/* Layout: one calm column of sections on a warm bone ground, after the practice site's
   editorial feel; Otti's violet carries every interactive thing and the apricot diamond
   appears only where the mark does. */
:root {
  --bg: #faf7f2;          /* bone, the EMR's own ground (ink-50) */
  --cream: #f3efe2;       /* the practice site's cream, for one band */
  --surface: #ffffff;
  --line: #e8e2d7;
  --fg: #241d33;          /* ink */
  --muted: #6b6280;
  --violet: #7a5ccc;
  --violet-deep: #463a6e;
  --violet-soft: #f1ecfb;
  --apricot: #f0a05a;
  --violet-text: #463a6e;   /* violet small text: 4.5:1 on the soft violet */
  --on-violet: #ffffff;
  --on-ok: #ffffff;
  --ok: #41705f;
  --ok-soft: #e3efe9;
  --on-deep: #f4f0fd;
  --on-deep-muted: #c9bfe6;
  --shadow: 0 1px 2px rgba(36, 29, 51, .06), 0 8px 24px rgba(36, 29, 51, .07);
  --frame: #241d33;          /* the example phone's bezel */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17131f; --cream: #201b2b; --surface: #231d30; --line: #352e44;
    --fg: #ece8f3; --muted: #a49cb6; --violet: #a98cf0; --violet-deep: #2a2340;
    --violet-soft: #2c2541; --apricot: #f2a868; --ok: #8cc7b1; --ok-soft: #1e3029;
    --on-deep: #f4f0fd; --on-deep-muted: #b9add9; --violet-text: #c9b6f7; --on-violet: #17131f; --on-ok: #17131f;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --frame: #3a3150;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #17131f; --cream: #201b2b; --surface: #231d30; --line: #352e44;
  --fg: #ece8f3; --muted: #a49cb6; --violet: #a98cf0; --violet-deep: #2a2340;
  --violet-soft: #2c2541; --apricot: #f2a868; --ok: #8cc7b1; --ok-soft: #1e3029;
  --on-deep: #f4f0fd; --on-deep-muted: #b9add9; --violet-text: #c9b6f7; --on-violet: #17131f; --on-ok: #17131f;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --frame: #3a3150;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--violet); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
.wrap { max-width: 72rem; margin: 0 auto; padding-inline: 20px; }
.eyebrow { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ---- the wordmark: Ott + a dotless i under the apricot diamond ---- */
.wm { font-family: var(--font-body); font-weight: 700; letter-spacing: -.025em; line-height: 1; color: var(--fg); text-decoration: none; display: inline-flex; align-items: center; }
/* The diamond dot, exactly as the app's own wordmark draws it (components/Logo.tsx):
   a dotless i, and the mark's apricot diamond 0.3em wide, centred on the stem and
   lifted just clear of it. */
.wm .i { position: relative; display: inline-block; }
.wm .i svg { position: absolute; left: 0; right: 0; margin-inline: auto; top: -.06em; width: .3em; height: .3em; }

/* ---- header ---- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.top.scrolled { border-bottom-color: var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.45rem; }
.nav { display: flex; align-items: center; gap: 22px; font-size: .95rem; }
.nav a { color: var(--fg); text-decoration: none; }
.nav a:hover { color: var(--violet); }
.nav .hide-sm { display: none; }
@media (min-width: 760px) { .nav .hide-sm { display: inline; } }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: 999px; font: 600 .98rem var(--font-body); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s, background .15s, box-shadow .15s; }
.btn-primary { background: var(--violet); color: var(--on-violet); box-shadow: 0 6px 18px color-mix(in srgb, var(--violet) 30%, transparent); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-quiet { background: transparent; color: var(--fg); border-color: var(--line); }
.btn-quiet:hover { border-color: var(--violet); color: var(--violet); }

/* ---- hero ---- */
.hero { padding-block: 56px 72px; }
.hero .wrap { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1040px) { .hero .wrap { grid-template-columns: 1.05fr .95fr; } }
.hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.6rem, 6.2vw, 4.6rem); line-height: 1.02; letter-spacing: -.02em; margin-top: 18px; }
.hero h1 em { font-style: italic; color: var(--violet); }
.hero .lead { margin-top: 22px; font-size: 1.15rem; color: var(--muted); max-width: 34rem; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero .note { margin-top: 16px; font-size: .9rem; color: var(--muted); }

/* the stage: the mark builds itself, then three moments of a day float in */
.stage { position: relative; min-height: 400px; border-radius: 28px; background: radial-gradient(120% 90% at 70% 20%, var(--violet-soft), transparent 60%), var(--cream); border: 1px solid var(--line); overflow: hidden; }
.stage svg.mark { position: absolute; left: 27%; top: 50%; width: 170px; height: 170px; transform: translate(-50%, -50%); cursor: pointer; }
.mark .b { transform-box: fill-box; transform-origin: center; animation: drop .55s cubic-bezier(.2,.9,.3,1.25) both; }
.mark .b1 { animation-delay: .15s; } .mark .b2 { animation-delay: .3s; } .mark .b3 { animation-delay: .45s; }
.mark .b4 { animation-delay: .6s; } .mark .b5 { animation-delay: .75s; }
.mark .d { transform-box: fill-box; transform-origin: center; animation: land .8s cubic-bezier(.2,.9,.3,1.35) 1.05s both; }
@keyframes drop { from { transform: translateY(-38px); opacity: 0; } to { transform: none; } }
@keyframes land { 0% { transform: translateY(-60px) rotate(45deg) scale(.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: rotate(45deg); opacity: 1; } }
.chip { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); font-size: .86rem; line-height: 1.3; max-width: 230px; animation: rise .6s ease-out both; }
.chip b { display: block; font-weight: 600; }
.chip span { color: var(--muted); }
.chip .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
/* The blocks build on the left; the day's three moments arrive on the right like a
   feed, so a card never sits on the mark. */
.chip { right: 5%; width: 215px; }
.chip.c1 { top: 12%; animation-delay: 1.6s; }
.chip.c2 { top: 40%; animation-delay: 1.85s; }
.chip.c3 { top: 68%; animation-delay: 2.1s; }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
/* A phone has no room for two columns: the mark sits on top, two cards below it. */
@media (max-width: 560px) {
  .stage { min-height: 360px; }
  .stage svg.mark { left: 50%; top: 27%; width: 130px; height: 130px; }
  .chip { width: auto; max-width: 78%; font-size: .82rem; }
  .chip.c1 { left: 5%; right: auto; top: auto; bottom: 30%; }
  .chip.c2 { right: 5%; top: auto; bottom: 7%; }
  .chip.c3 { display: none; }
}

/* ---- sections ---- */
section { padding-block: 72px; }
.section-head { max-width: 40rem; display: grid; gap: 14px; margin-bottom: 36px; }
.section-head h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.08; letter-spacing: -.015em; }
.section-head p { color: var(--muted); font-size: 1.08rem; }

/* The AI section is the cream band between the workflows and the family portal, so the
   page alternates bone and cream into the deep security band. */
.ai { background: var(--cream); border-block: 1px solid var(--line); }

/* features */
.features { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } }
@media (min-width: 1040px) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feature { padding-block: 24px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.feature h3 { font-size: 1.08rem; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.feature h3::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--violet); transform: rotate(45deg); flex: none; }
.feature p { color: var(--muted); }

/* trust */
.trust { background: var(--violet-deep); color: var(--on-deep); }
.trust .section-head p { color: var(--on-deep-muted); }
.trust .fineprint { margin-top: 32px; color: var(--on-deep-muted); font-size: .95rem; }
.trust .eyebrow { color: var(--on-deep-muted); }
.facts { display: grid; gap: 18px; }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fact { border-top: 1px solid color-mix(in srgb, var(--on-deep) 22%, transparent); padding-top: 18px; display: grid; gap: 8px; align-content: start; }
.fact h3 { font-size: 1.1rem; font-weight: 600; }
.fact p { color: var(--on-deep-muted); }

/* origin */
.origin blockquote { margin: 0; font-family: var(--font-display); font-style: italic; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.25; max-width: 46rem; }
.origin p { margin-top: 18px; color: var(--muted); max-width: 40rem; }

/* closing */
.closing .card { border-radius: 28px; padding: 36px 26px; background: var(--cream); border: 1px solid var(--line); display: grid; gap: 18px; justify-items: start; }
.closing h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.1; }
.closing p { color: var(--muted); max-width: 36rem; }
footer { padding-block: 32px 48px; color: var(--muted); font-size: .9rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
footer a { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Formerly inline style attributes, moved here so the Content-Security-Policy can refuse
   inline styles outright. */
.dot-violet { background: var(--violet); }
.dot-ok { background: var(--ok); }
.dot-apricot { background: var(--apricot); }
.origin blockquote, blockquote.spaced { margin-top: 16px; }
.wm.footer-wm { font-size: 1.1rem; }
.wm .year { font-weight: 400; color: var(--muted); }

/* The family portal: what families get, beside an example phone. The phone is drawn in
   HTML with working tabs rather than a screenshot, so it stays sharp at any size and
   follows dark mode. The practice name and logo on it are made up, which is the point:
   a family sees their own practice there, and Otti only in the small print. */
.portal-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1040px) { .portal-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 64px; } }
.portal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 640px) { .portal-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
.portal-list li { position: relative; padding-left: 22px; color: var(--muted); }
.portal-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: var(--violet); transform: rotate(45deg); }
.portal-list b { color: var(--fg); font-weight: 600; }
.portal-note { margin: 24px 0 0; color: var(--muted); font-size: .95rem; }
.phone-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.phone-hint { margin: 0; font-size: .85rem; color: var(--muted); text-align: center; }
.phone { width: min(310px, 100%); border-radius: 42px; padding: 11px; background: var(--frame); box-shadow: var(--shadow); }
.p-screen { border-radius: 32px; background: var(--bg); padding: 18px 14px 12px; display: grid; gap: 12px; }
.p-top { display: flex; align-items: center; gap: 10px; }
.p-logo { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); flex: none; }
.p-practice { font-weight: 600; font-size: .92rem; line-height: 1.2; }
.p-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 13px; background: var(--surface); border: 1px solid var(--line); }
.p-tabs [role="tab"] { font: inherit; font-size: .85rem; font-weight: 600; color: var(--muted); background: none; border: 0; border-radius: 9px; min-height: 36px; cursor: pointer; }
.p-tabs [role="tab"][aria-selected="true"] { background: var(--violet-soft); color: var(--violet-text); }
/* The three screens share one grid cell, so the phone is as tall as its fullest screen
   and keeps that height when the tabs change, as a real phone does; sized by their own
   content, the frame jumped 170px between Home and Bills. A hidden screen keeps its
   place but is invisible, out of the tab order and out of the accessibility tree, which
   visibility: hidden does at once. Without that line all three draw over each other:
   the panel's own display value beats the browser's [hidden] rule. */
.p-panels { display: grid; }
.p-panel { grid-area: 1 / 1; display: grid; gap: 10px; align-content: start; }
.p-panel[hidden] { visibility: hidden; }
.p-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: grid; gap: 3px; }
.p-label { margin: 0; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.p-strong { margin: 0; font-weight: 600; }
.p-sub { margin: 0; font-size: .84rem; color: var(--muted); }
.p-text { margin: 0; font-size: .88rem; line-height: 1.5; }
.p-chip, .p-btn { justify-self: start; margin-top: 6px; font-size: .78rem; font-weight: 600; border-radius: 999px; padding: 4px 11px; }
.p-chip { color: var(--violet-text); background: var(--violet-soft); }
.p-btn { color: var(--on-violet); background: var(--violet); border-radius: 10px; padding: 7px 14px; }
.p-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.p-chips span { font-size: .74rem; font-weight: 600; color: var(--ok); background: var(--ok-soft); border-radius: 999px; padding: 3px 9px; }
.p-bar { height: 8px; margin: 6px 0 4px; border-radius: 999px; background: var(--violet-soft); overflow: hidden; }
.p-bar span { display: block; width: 66%; height: 100%; border-radius: inherit; background: var(--violet); transition: width .3s ease; }
/* The example home program can be ticked, the way a parent would (site.js keeps the bar
   and the tally in step). The 66% above is two of three, for a page without script. */
.p-checks { display: grid; gap: 6px; margin-top: 4px; }
.p-check { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; padding: 6px 9px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; font-size: .86rem; text-align: left; cursor: pointer; }
.p-check::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--muted); display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--on-ok); transition: background .15s, border-color .15s; }
.p-check[aria-pressed="true"] { color: var(--muted); }
.p-check[aria-pressed="true"]::before { content: "\2713"; background: var(--ok); border-color: var(--ok); }
.p-spark { display: flex; align-items: flex-end; gap: 6px; height: 46px; margin: 8px 0 4px; }
.p-spark i { flex: 1; border-radius: 4px 4px 2px 2px; background: var(--violet); }
.p-spark i:nth-child(1), .p-spark i:nth-child(2) { height: 20%; opacity: .5; }
.p-spark i:nth-child(3), .p-spark i:nth-child(4) { height: 40%; opacity: .7; }
.p-spark i:nth-child(5), .p-spark i:nth-child(6) { height: 60%; }
.p-link { color: var(--violet); font-weight: 600; }
.p-powered { margin: 0; text-align: center; font-size: .7rem; color: var(--muted); }

/* Workflows: three tabs beside a stage, in the hero's language. Picking a workflow drops
   its example screens onto the stage one after another, with the hero mark's own "drop"
   motion. Until the section scrolls into view the drops wait (site.js), so they play
   when someone is looking rather than at page load, out of sight. They sit straight under
   the hero on the same bone ground, so a hairline keeps them from reading as part of it. */
.flows { border-top: 1px solid var(--line); }
.wf { display: grid; gap: 20px; align-items: start; }
@media (min-width: 900px) { .wf { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 28px; } }
.steps { display: grid; gap: 8px; }
.step { text-align: left; display: grid; gap: 4px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: inherit; cursor: pointer; transition: border-color .15s, background .15s; min-height: 44px; }
.step .n { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.step .t { font-weight: 600; }
.step .s { font-size: .9rem; color: var(--muted); display: none; }
@media (min-width: 900px) { .step .s { display: block; } }
.step[aria-selected="true"] { border-color: var(--violet); background: var(--violet-soft); }
.step[aria-selected="true"] .n { color: var(--violet-text); }
.wf-stage { position: relative; min-height: 520px; border-radius: 28px; border: 1px solid var(--line); background: radial-gradient(110% 80% at 80% 10%, var(--violet-soft), transparent 60%), var(--cream); overflow: hidden; }
.wf-stage[hidden] { display: none; }
.wf-card { position: absolute; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 14px 16px; display: grid; gap: 6px; font-size: .86rem; line-height: 1.4; }
.wf-a { top: 5%; left: 6%; width: 60%; z-index: 1; }
.wf-b { top: 36%; right: 5%; width: 58%; z-index: 2; }
.wf-c { bottom: 5%; left: 10%; width: 60%; z-index: 3; }
.drop-in { animation: drop .6s cubic-bezier(.2,.9,.3,1.25) both; }
.wf-a.drop-in { animation-delay: .1s; } .wf-b.drop-in { animation-delay: .55s; } .wf-c.drop-in { animation-delay: 1s; }
.flows.wait .drop-in, .flows.wait .wave i { animation-play-state: paused; }
@media (max-width: 899px) {
  .wf-stage { min-height: 0; display: grid; gap: 12px; padding: 18px; }
  .wf-card { position: static; width: auto; }
  .wf-a { margin-right: 10%; } .wf-b { margin-left: 10%; } .wf-c { margin-right: 5%; }
}
.wf-head { display: flex; align-items: center; gap: 8px; }
.wf-head b { font-weight: 600; font-size: .92rem; }
.wf-head .wf-pill, .wf-head .ai-tag { margin-left: auto; }
.wf-head .wf-mic + b + .ai-tag { margin-left: auto; }
/* The AI badge: the one mark that tells a reader which steps the AI does. */
.ai-tag { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; color: var(--violet-text); background: var(--violet-soft); }
.wf-pill { font-size: .72rem; font-weight: 600; color: var(--violet-text); background: var(--violet-soft); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.wf-pill.ok { color: var(--ok); background: var(--ok-soft); }
.wf-label { margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wf-text { margin: 0; color: var(--muted); }
.wf-list, .wf-goals { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wf-list li { display: flex; align-items: center; gap: 8px; }
.wf-list li::before { content: "\2713"; display: grid; place-items: center; width: 15px; height: 15px; flex: none; border-radius: 4px; font-size: 10px; font-weight: 700; color: var(--on-ok); background: var(--ok); }
.wf-goals li { display: flex; align-items: center; gap: 8px; }
.wf-goals li::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 2px; background: var(--violet); transform: rotate(45deg); }
.wf-line { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
.wf-line b { color: var(--fg); font-weight: 600; white-space: nowrap; }
.wf-line.total { border-top: 1px solid var(--line); padding-top: 6px; color: var(--fg); font-weight: 600; }
.wf-soap { margin: 0; display: flex; gap: 8px; color: var(--muted); }
.wf-soap b { flex: none; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 5px; font-size: .7rem; color: var(--violet-text); background: var(--violet-soft); }
.wf-score { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 8px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.wf-score span:first-child { flex: 1; color: var(--muted); }
.wf-score b { font-weight: 600; }
.wf-apply { font-size: .74rem; font-weight: 600; color: var(--on-violet); background: var(--violet); border-radius: 8px; padding: 3px 9px; }
.wf-mic { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--on-violet); background: var(--violet); }
/* The waveform moves for about four seconds and then rests, so nothing on the page keeps
   moving on its own past five seconds (WCAG 2.2.2) without a way to stop it. */
.wave { display: flex; align-items: center; gap: 3px; height: 26px; }
.wave i { flex: 1; max-width: 5px; height: 100%; border-radius: 3px; background: var(--violet); transform-origin: center; animation: talk .45s ease-in-out 1.2s 9 alternate both; }
.wave i:nth-child(3n+1) { height: 90%; animation-duration: .5s; }
.wave i:nth-child(3n+2) { height: 45%; animation-duration: .38s; }
.wave i:nth-child(3n) { height: 70%; animation-duration: .42s; }
@keyframes talk { from { transform: scaleY(.3); } to { transform: scaleY(1); } }