/* ==========================================================================
   NoteyDoc interior pages — the landing page's system, applied everywhere
   else: the discipline pages, the comparisons, the EMR pages, About,
   Security, Support and the legal documents.

   Loaded after landing.css, which supplies the typefaces, the tokens, the
   header, the buttons, the feature lists and the footer skin. This file adds
   only what those pages have and the landing page does not, and maps the
   class names already in their markup onto the same ruled, light system:
   neutrals carry the page, one accent, hairlines instead of boxes.
   ========================================================================== */

/* --- Page containers -------------------------------------------------------
   These pages declare their own width on .section / .hero rather than nesting
   a .wrap inside, so the container rules land on those classes directly.
   -------------------------------------------------------------------------- */

.section,
.hero,
.security-content {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--section-y);
}

/* Two sections in a row would otherwise stack a full section's padding on
   both sides of one hairline. */
.section + .section,
.hero + .section,
.hero + .security-content {
  padding-top: 0;
}

/* Section headings, where the page states one outright rather than putting it
   inside a block. */
.section > h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 24ch;
}

.section > h2 + p {
  margin-top: var(--s3);
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
}

.section > h2 + .grid,
.section > h2 + p + .grid,
.section > h2 + .faq-list,
.section > h2 + .table-wrap {
  margin-top: var(--s6);
}

/* The brand in the header links home on every page but the landing page. */
a.brand {
  text-decoration: none;
  color: inherit;
}

a.brand:hover .brand-name {
  color: var(--accent);
}

main p {
  color: var(--ink-2);
}

main a {
  color: inherit;
}

/* --- Page head -------------------------------------------------------------
   Same measure and rhythm as the pricing page's head: eyebrow, headline,
   lead, then the actions.
   -------------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  padding-block: var(--s8) var(--s6);
}

/* Only the split hero has two things to separate; everywhere else the head is
   one column and its own margins set the rhythm. */
.hero:has(aside) {
  gap: var(--s6);
}

@media (min-width: 900px) {
  .hero {
    padding-block: var(--s9) var(--s7);
  }
}

/* Where the page pairs its headline with a short aside, the aside becomes the
   one framed panel on the page, beside the copy. */
@media (min-width: 1000px) {
  .hero:has(aside) {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: var(--s7);
  }
}

.hero h1,
.page-title {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 22ch;
  text-wrap: balance;
}

/* The comparison pages run long, specific headlines that read badly when
   they are held to the hero measure. */
.hero:not(:has(aside)) h1 {
  max-width: 26ch;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow + h1 {
  margin-top: var(--s3);
}

.lead,
.hero-subtitle {
  margin-top: var(--s5);
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
}

.hero-subtitle + .hero-subtitle {
  margin-top: var(--s4);
}

/* --- Actions ---------------------------------------------------------------
   The markup on these pages predates the .btn scale, so the older class names
   are mapped onto it rather than left to fend for themselves.
   -------------------------------------------------------------------------- */

.actions,
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s6);
}

/* On a narrow phone both actions take the full column rather than sitting as
   two orphaned pills, the same as the landing page's hero. */
@media (max-width: 479px) {
  .actions,
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-download-wrap {
    display: flex;
    width: 100%;
  }

  .cta-download-wrap > .btn-primary {
    flex: 1 1 auto;
  }
}

.btn-primary,
.btn-secondary,
.btn-ghost,
.upgrade-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  border: 2px solid transparent;
  border-radius: var(--r);
  padding: 11px 19px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.13s ease, border-color 0.13s ease,
    color 0.13s ease, transform 0.08s ease;
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
  font-weight: 700;
}

.btn-primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

.btn-primary:active {
  background: var(--accent-press);
  border-color: var(--accent-press);
  transform: translateY(1px);
}

.btn-secondary,
.btn-ghost {
  background: var(--white);
  color: var(--accent);
  border-color: var(--accent);
}

.btn-secondary:hover,
.btn-ghost:hover {
  background: var(--accent-wash);
  color: var(--accent-deep);
  border-color: var(--accent-deep);
}

.btn-secondary:active,
.btn-ghost:active {
  background: var(--accent-wash);
  color: var(--accent-press);
  border-color: var(--accent-press);
  transform: translateY(1px);
}

/* The header's plan link, at nav scale. */
.upgrade-btn {
  padding: 8px 15px;
  font-size: var(--fs-xs);
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.upgrade-btn:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

/* The comparison pages carry the download tooltip without the landing page's
   script, so it opens on hover and on keyboard focus instead. */
.cta-download-wrap:hover .cta-tooltip,
.cta-download-wrap:focus-within .cta-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* --- Blocks ----------------------------------------------------------------
   A .card here is a ruled block, the same shape the landing page gives its
   three benefits: a hairline, a title, and the copy under it. No boxes.
   -------------------------------------------------------------------------- */

.card,
.security-card {
  border-top: 1px solid var(--rule);
  padding-top: var(--s5);
}

.card > :first-child,
.security-card > :first-child {
  margin-top: 0;
}

.card h2,
.card h3,
.security-card h2 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.card h2 a,
.card h3 a {
  text-decoration: none;
}

.card h2 a:hover,
.card h3 a:hover {
  color: var(--accent);
}

.card p,
.security-card p {
  margin-top: var(--s3);
  color: var(--ink-2);
}

.card ul,
.card ol {
  margin-top: var(--s3);
  padding-left: 18px;
  color: var(--ink-2);
}

.card li + li {
  margin-top: var(--s1);
}

/* --- Grids ---------------------------------------------------------------- */

.grid,
.faq-grid,
.faq-list,
.info-grid,
.content-grid,
.security-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s6);
}

/* auto-fit so a section with two blocks splits the row in half and a section
   with nine fills three columns, without either being told which it is. */
@media (min-width: 860px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
    gap: var(--s7) var(--s6);
  }

  .faq-grid,
  .faq-list,
  .info-grid,
  .content-grid,
  .security-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s6) var(--s7);
  }
}

/* --- Panels ----------------------------------------------------------------
   One framed panel per page at most: the hero aside, or the founding story.
   Same frame the landing page gives the demo video and the screenshot.
   -------------------------------------------------------------------------- */

.hero aside,
.story-card,
.shell {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-panel);
  padding: var(--s6);
}

@media (min-width: 900px) {
  .story-card,
  .shell {
    padding: var(--s7);
  }
}

.hero aside h2 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.hero aside p {
  margin-top: var(--s3);
  color: var(--ink-2);
}

/* --- Ruled sub-sections ----------------------------------------------------
   .context-links, .comparison-copy and .final-cta are all "a rule, a title,
   and what follows" — the page's repeating unit.
   -------------------------------------------------------------------------- */

.context-links,
.comparison-copy,
.faq-block,
.final-cta {
  border-top: 1px solid var(--rule);
  padding-top: var(--s5);
  margin-top: var(--s7);
}

.context-links > h2,
.comparison-copy > h2,
.faq-block > h2,
.final-cta > h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.context-links > h2 {
  font-size: var(--fs-h3);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.context-links > p,
.comparison-copy > p,
.faq-block > p,
.final-cta > p {
  margin-top: var(--s3);
  color: var(--ink-2);
  max-width: 74ch;
}

/* The worked example on each discipline page: the summary a therapist types,
   then the note it comes back as, set off the way a quote is. */
.soap-example {
  margin-top: var(--s5);
  border-left: 2px solid var(--accent);
  padding-left: var(--s5);
  max-width: 74ch;
}

.soap-example p {
  margin-top: var(--s4);
}

.soap-example p:first-child {
  margin-top: 0;
}

.context-links p strong {
  color: var(--ink);
}

/* Numbered how-it-works lists on the EMR pages. */
.context-links ol,
.context-links ul {
  margin-top: var(--s4);
  padding-left: 20px;
  max-width: 74ch;
  color: var(--ink-2);
}

.context-links li + li {
  margin-top: var(--s2);
}

.context-links ol::marker,
.context-links li::marker {
  color: var(--accent);
}

.context-links .faq-grid,
.context-links .grid {
  margin-top: var(--s5);
}

.final-cta .hero-actions {
  margin-top: var(--s5);
}

/* --- Link rows ------------------------------------------------------------ */

.link-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin-top: var(--s4);
}

.link-list a {
  font-size: var(--fs-sm);
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.link-list a:hover {
  color: var(--accent-deep);
}

/* --- Comparison tables -----------------------------------------------------
   The one place on these pages where a frame is the right answer: the table
   scrolls sideways on a phone, so it needs an edge to scroll inside.
   -------------------------------------------------------------------------- */

.table-wrap,
.comparison-table-wrap {
  margin-top: var(--s5);
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-panel);
}

.table-wrap table,
.comparison-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.table-wrap th,
.table-wrap td,
.comparison-table th,
.comparison-table td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}

.table-wrap th,
.comparison-table th {
  background: var(--band);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.table-wrap td,
.comparison-table td {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-2);
}

.table-wrap td:first-child,
.comparison-table td:first-child {
  font-weight: 600;
  color: var(--ink);
}

.table-wrap tbody tr:last-child td,
.comparison-table tbody tr:last-child td {
  border-bottom: 0;
}

.note {
  margin-top: var(--s3);
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

/* --- Disclosure FAQs -------------------------------------------------------
   Ruled rows, the same as the landing page's FAQ, with the sign on the right
   carrying the open/closed state.
   -------------------------------------------------------------------------- */

details {
  border-top: 1px solid var(--rule);
  padding-block: var(--s4);
}

.faq-block details:first-of-type {
  margin-top: var(--s4);
}

summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  cursor: pointer;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--accent);
}

details[open] summary::after {
  content: "–";
}

details p,
details ul {
  margin-top: var(--s3);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 74ch;
}

details ul {
  padding-left: 20px;
}

details li + li {
  margin-top: var(--s1);
}

/* --- Long-form prose -------------------------------------------------------
   The legal documents and the founding story. One column, one measure.
   -------------------------------------------------------------------------- */

.prose {
  max-width: 74ch;
}

.prose h1 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.prose h2 {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* The numbered sections of the privacy overview are h3s, and they are the
   document's real structure, so they get the rule. */
.prose h3 {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* Unless it is already sitting under one. */
.prose h2 + h3 {
  margin-top: var(--s4);
  padding-top: 0;
  border-top: 0;
}

.prose p,
.prose li {
  margin-top: var(--s3);
  color: var(--ink-2);
  line-height: 1.7;
}

.prose ul,
.prose ol {
  margin-top: var(--s3);
  padding-left: 20px;
}

.prose li::marker {
  color: var(--rule-strong);
}

.prose strong {
  color: var(--ink);
}

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose a:hover {
  color: var(--accent-deep);
}

/* The terms are one pre-wrapped block of text rather than marked-up sections,
   so the line height and measure do the work the headings would. */
.prose .content {
  margin-top: var(--s5);
  white-space: pre-line;
  color: var(--ink-2);
  line-height: 1.75;
}

.doc-meta {
  margin-top: var(--s3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

/* --- About ---------------------------------------------------------------- */

.story-card {
  max-width: 82ch;
}

.story-card p {
  color: var(--ink-2);
  line-height: 1.75;
  max-width: 68ch;
}

.story-card p + p {
  margin-top: var(--s4);
}

.signature {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}

.info-grid {
  margin-top: var(--s7);
}

/* --- PHI acknowledgement --------------------------------------------------- */

.shell {
  max-width: 860px;
}

.shell h1 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.shell h2 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.shell section {
  margin-top: var(--s5);
}

.shell p {
  margin-top: var(--s3);
  color: var(--ink-2);
  max-width: 74ch;
}

.quick-note {
  border-left: 2px solid var(--accent);
  padding-left: var(--s5);
}

.ack-line {
  font-weight: 600;
  color: var(--ink);
}

.disclaimer {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-xs);
  line-height: 1.65;
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* --- Support form ----------------------------------------------------------
   Same controls as the team-pricing dialog on the pricing page.
   -------------------------------------------------------------------------- */

.form-panel {
  max-width: 860px;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-panel);
  padding: var(--s6);
}

@media (min-width: 900px) {
  .form-panel {
    padding: var(--s7);
  }
}

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
}

@media (min-width: 640px) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field + .form-field,
.form-grid + .form-field {
  margin-top: var(--s4);
}

/* Inside the two-up row the grid's own gap does the spacing. */
.form-grid > .form-field + .form-field {
  margin-top: 0;
}

.form-field label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.13s ease, box-shadow 0.13s ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #6b747e;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.form-field textarea {
  resize: vertical;
  min-height: 150px;
  line-height: 1.55;
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  margin-top: var(--s5);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.form-check input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: var(--accent);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
}

.form-actions .btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.form-aside {
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.form-aside a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-aside a:hover {
  color: var(--accent-deep);
}

.form-status {
  margin-top: var(--s3);
  min-height: 1.3rem;
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

.form-status.is-ok {
  color: var(--accent);
  font-weight: 600;
}

.form-status.is-error {
  color: #b3261e;
  font-weight: 600;
}

/* Hidden field bots fill in. Off-screen rather than display:none so it stays
   fillable by a script that ignores CSS. */
.hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.support-note {
  max-width: 860px;
  margin-top: var(--s5);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

.support-note code {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--ink-2);
  background: var(--band);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 2px 6px;
}

/* --- Trademark and small print -------------------------------------------- */

.fine-print {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 90ch;
}