/* Shared styles for interior marketing pages (pricing, therapists). */

.page-hero { padding-top: 170px; padding-bottom: 54px; text-align: center; }
.page-hero h1 { max-width: 880px; margin: 0 auto 26px; }
.page-lede { max-width: 620px; margin: 0 auto 36px; color: #4b4945; font-size: 18px; line-height: 1.5; }
.page-hero .eyebrow { margin-bottom: 26px; }

/* ---------- Segmented toggle ---------- */
.plan-toggle { display: inline-flex; gap: 4px; padding: 5px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.5); }
.plan-toggle button { min-height: 38px; padding: 0 24px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 14px; cursor: pointer; transition: background .24s ease, color .24s ease; }
.plan-toggle button.active { background: var(--ink); color: #fff; }
.plan-toggle button:hover:not(.active) { color: var(--ink); }

/* ---------- Plan cards ---------- */
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: stretch; max-width: 1180px; margin: 0 auto; padding-bottom: 120px; }
.plan-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.plan-grid.three .plan-card { padding: 30px 26px 28px; }
.plan-grid.three .plan-name { font-size: 26px; }
.plan-grid.three .plan-price { font-size: 30px; }
.plan-badge { align-self: flex-start; margin-bottom: 14px; padding: 4px 11px; border-radius: 999px; background: var(--accent); color: var(--nav-green); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.plan-sub { margin: 0 0 4px; color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.plan-card-dark .plan-sub { color: rgba(245,241,232,.6); }
.plan-card { display: flex; flex-direction: column; padding: 34px 34px 32px; border: 1px solid var(--line); border-radius: 26px; background: #fffdf8; }
.plan-card-dark { border-color: transparent; background: var(--espresso); color: var(--parchment); }
.plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.plan-name { margin: 0; font-family: var(--serif); font-size: 30px; font-weight: 350; letter-spacing: -.05em; }
.plan-price { font-family: var(--serif); font-size: 34px; font-weight: 350; letter-spacing: -.05em; white-space: nowrap; }
.plan-price small { margin-left: 3px; color: var(--muted); font-family: var(--sans); font-size: 12px; letter-spacing: 0; }
.plan-card-dark .plan-price small { color: rgba(245,241,232,.6); }
.plan-desc { margin: 20px 0 0; max-width: 430px; color: #4b4945; font-size: 14px; line-height: 1.55; }
.plan-card-dark .plan-desc { color: rgba(245,241,232,.74); }
.plan-rule { margin: 26px 0; border: 0; border-top: 1px solid var(--line); }
.plan-card-dark .plan-rule { border-top-color: rgba(245,241,232,.22); }
.plan-features { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.plan-features li { display: flex; gap: 10px; align-items: flex-start; }
.plan-features i { flex: none; color: var(--accent-dark); font-style: normal; }
.plan-card-dark .plan-features i { color: var(--lime); }
.plan-models { margin-top: 30px; }
.plan-models > span { display: block; margin-bottom: 13px; color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.plan-card-dark .plan-models > span { color: rgba(245,241,232,.6); }
.model-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.model-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; }
.model-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.plan-card-dark .model-chip { border-color: rgba(245,241,232,.26); }
.plan-card-dark .model-chip::before { background: var(--lime); }
.plan-cta { width: 100%; margin-top: 34px; }
.plan-card-dark .plan-cta { border-color: rgba(245,241,232,.5); color: var(--parchment); }
.plan-card-dark .plan-cta:hover { border-color: var(--parchment); background: var(--parchment); color: var(--espresso); }

/* ---------- Comparison table ---------- */
.compare { padding-bottom: 130px; }
.compare-scroll { max-width: 1180px; margin: 0 auto; }
.compare-table { width: 100%; min-width: 760px; border-collapse: collapse; text-align: left; }
.compare-table th, .compare-table td { padding: 15px 22px; font-weight: 400; vertical-align: middle; }
.compare-table tbody td, .compare-table tbody th { border-top: 1px solid var(--line); font-size: 14px; }
.compare-table tbody th { color: #4b4945; }
.compare-table td:not(:last-child) { color: #4b4945; }
.compare-table col.col-label { width: 34%; }
.compare-label { color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.compare-head th { position: sticky; top: 76px; z-index: 3; padding-top: 22px; padding-bottom: 22px; background: var(--paper); }
.compare-head .plan-toggle { transform: scale(.92); transform-origin: left center; }
.compare-head-plan { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.compare-head-plan strong { font-family: var(--serif); font-size: 23px; font-weight: 350; letter-spacing: -.05em; }
.compare-head-plan .button { min-height: 38px; padding: 0 16px; font-size: 13px; }
.compare-table th:last-child, .compare-table td:last-child { background: var(--espresso); color: var(--parchment); }
.compare-table tbody td:last-child { border-top-color: rgba(245,241,232,.16); }
.compare-head th:last-child { border-radius: 20px 20px 0 0; }
.compare-table tbody:last-of-type tr:last-child td:last-child { border-radius: 0 0 20px 20px; }
.compare-table td:last-child .button { border-color: rgba(245,241,232,.5); color: var(--parchment); }
.compare-table td:last-child .button:hover { border-color: var(--parchment); background: var(--parchment); color: var(--espresso); }
.group-row th { padding-top: 48px; padding-bottom: 14px; border-top: 0 !important; font-family: var(--serif); font-size: 26px; font-weight: 350; letter-spacing: -.05em; }
.group-row td { padding-top: 48px; border-top: 0 !important; }
.cell-yes { color: var(--accent-dark) !important; }
.compare-table td:last-child .cell-yes { color: var(--lime) !important; }
.cell-no { color: #a5a29b !important; }
.compare-table td:last-child .cell-no { color: rgba(245,241,232,.42) !important; }
.cell-stack { display: grid; gap: 5px; }

/* ---------- FAQs ---------- */
.faq { display: grid; grid-template-columns: .48fr 1fr; gap: clamp(36px, 7vw, 120px); padding-top: 130px; padding-bottom: 130px; }
.faq h2 { margin-bottom: 0; }
.faq-list { display: grid; align-content: start; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 22px; width: 100%; padding: 25px 4px; border: 0; background: transparent; color: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.faq-q i { flex: none; font-size: 15px; font-style: normal; transition: transform .32s cubic-bezier(.2,.8,.2,1); }
.faq-item.open .faq-q i { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.2,.8,.2,1); }
.faq-a p { max-width: 640px; margin: 0; padding: 0 4px 27px; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* ---------- Hero word rotator ---------- */
.rotator { display: inline-grid; vertical-align: bottom; text-align: left; }
/* Three single-character phonemes of near-identical width, so no gap is left behind. */
.rotator span { grid-area: 1 / 1; color: var(--accent); opacity: 0; animation: rotateWord 9.9s cubic-bezier(.2,.8,.2,1) infinite; }
.rotator span:nth-child(2) { animation-delay: 3.3s; }
.rotator span:nth-child(3) { animation-delay: 6.6s; }
@keyframes rotateWord {
  0% { opacity: 0; transform: translateY(16px); }
  4%, 29% { opacity: 1; transform: translateY(0); }
  33%, 100% { opacity: 0; transform: translateY(-14px); }
}

/* ---------- Showcase band ---------- */
.showcase-band { padding-bottom: 96px; background: linear-gradient(180deg, var(--paper) 0 34%, var(--espresso) 34% 100%); }
.showcase-frame { max-width: 1180px; margin: 0 auto; }
.showcase-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 13px; padding-top: 16px; }

/* ---------- Mock UI primitives ---------- */
.mock-panel { padding: 17px 18px; border: 1px solid rgba(21,21,21,.12); border-radius: 15px; background: #fffdf8; }
.mock-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; color: #8b8881; font-family: var(--mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.mock-rows { display: grid; gap: 13px; font-size: 12px; }
.mock-row { display: grid; grid-template-columns: 82px 1fr 42px; gap: 12px; align-items: center; }
.mock-bar { height: 6px; border-radius: 999px; background: var(--paper-deep); overflow: hidden; }
.mock-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.mock-bar i.alt { background: var(--nav-green); }
.mock-bar i.pale { background: var(--brown); }
.mock-row b { font-weight: 400; text-align: right; color: var(--muted); }
.mock-chart { width: 100%; height: 118px; }
.mock-chart polyline { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mock-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; color: var(--muted); font-size: 11px; }
.mock-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mock-legend i { width: 8px; height: 8px; border-radius: 50%; }
.mock-donut { display: grid; place-items: center; width: 108px; aspect-ratio: 1; margin: 4px auto 0; border-radius: 50%; background: conic-gradient(var(--accent) 0 38%, var(--paper-deep) 38% 100%); }
.mock-donut > div { display: grid; place-items: center; width: 74%; height: 74%; border-radius: 50%; background: #fffdf8; font-size: 23px; }
.mock-donut span { font-size: 12px; }
.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.mock-kpi { padding: 14px 15px; border: 1px solid rgba(21,21,21,.12); border-radius: 13px; background: #fffdf8; }
.mock-kpi small { display: block; margin-bottom: 7px; color: #8b8881; font-family: var(--mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.mock-kpi strong { font-size: 21px; font-weight: 400; }
.mock-kpi em { color: #43a45e; font-size: 11px; font-style: normal; }
.mock-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; font-size: 12px; }
.mock-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid rgba(21,21,21,.1); border-radius: 10px; background: rgba(255,255,255,.6); }
.mock-list li span { color: var(--muted); font-family: var(--mono); font-size: 11px; }
.mock-prompt { display: grid; gap: 9px; padding: 13px 14px; border-radius: 12px; background: rgba(34,33,32,.92); color: #fff; font-size: 13px; }
.mock-prompt small { color: #a9a7a1; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.mock-prompt b { font-weight: 400; }
/* Small stand-ins for the real builder controls, so each tile shows the actual
   thing being described rather than a screenshot of the whole screen. */
.mock-field { display: grid; gap: 9px; }
.mock-field + .mock-field { margin-top: 15px; }
.mock-field > span { color: #8b8881; font-family: var(--mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }

.mock-pills, .mock-words, .mock-checks { display: flex; flex-wrap: wrap; gap: 7px; }
.mock-pill, .mock-word, .mock-check {
  padding: 6px 12px;
  border: 1px solid rgba(21,21,21,.16);
  border-radius: 999px;
  background: #fffdf8;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}
.mock-pill.on { border-color: var(--ink); background: var(--ink); color: #fff; }

.mock-word { display: inline-flex; align-items: center; gap: 7px; border-radius: 9px; color: var(--ink); font-size: 13px; }
.mock-word::before { content: ""; width: 13px; height: 13px; border-radius: 4px; border: 1px solid rgba(21,21,21,.28); }
.mock-word.on::before { border-color: var(--nav-green); background: var(--nav-green); }

.mock-check { display: inline-flex; align-items: center; gap: 7px; }
.mock-check::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(21,21,21,.28); }
.mock-check.on { color: var(--ink); }
.mock-check.on::before { border-color: var(--nav-green); background: var(--nav-green); }

.mock-search { margin: 0 0 13px; padding: 10px 13px; border: 1px solid rgba(21,21,21,.14); border-radius: 10px; background: #fffdf8; color: #8b8881; font-size: 13px; }

.mock-days { display: flex; gap: 6px; }
.mock-day { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(21,21,21,.16); border-radius: 50%; background: #fffdf8; color: var(--muted); font-size: 11px; font-weight: 400; }
.mock-day.on { border-color: var(--nav-green); background: var(--nav-green); color: #fff; }

.mock-word-large { margin: 18px 0 12px; font-family: var(--serif); font-size: clamp(38px, 5.5vw, 56px); font-weight: 350; letter-spacing: -.05em; line-height: 1; text-align: center; }

.mock-list li span.warn { color: var(--accent-dark); }

.mock-url { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border: 1px solid rgba(21,21,21,.14); border-radius: 999px; background: #fffdf8; font-size: 14px; }
.mock-url::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ---------- Sticky feature scroller ---------- */
.section-head { max-width: 780px; margin: 0 auto; padding-top: 130px; padding-bottom: 60px; text-align: center; }
.section-head h2 { margin-bottom: 0; }
.feature-scroll { --panel-h: min(460px, 66svh); display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(36px, 6vw, 96px); align-items: start; padding-bottom: 130px; }
.feature-steps { display: grid; }
/* Each step needs roughly a screenful of scroll so all four activate while the visual is still pinned. */
.feature-step { padding: clamp(60px, 15vh, 160px) 0 clamp(60px, 15vh, 160px) 28px; border-left: 1px solid var(--line); cursor: pointer; }
.feature-step h3 { margin: 0; color: #a5a29b; font-family: var(--serif); font-size: clamp(22px, 2.1vw, 28px); font-weight: 350; letter-spacing: -.05em; transition: color .4s ease; }
.feature-step.active { border-left-color: var(--ink); }
.feature-step.active h3 { color: var(--ink); }
.feature-body { display: grid; gap: 18px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s cubic-bezier(.2,.8,.2,1), opacity .4s ease, margin .5s ease; }
.feature-step.active .feature-body { max-height: 320px; margin-top: 16px; opacity: 1; }
.feature-body p { margin: 0; max-width: 400px; color: #4b4945; font-size: 15px; line-height: 1.6; }
.feature-body ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.feature-body li { display: flex; gap: 10px; }
.feature-body i { color: var(--accent-dark); font-style: normal; }
/* The holder is only as tall as the panel and is pinned at the offset that
   centres it, so the visual rests in the middle of the screen instead of riding
   along at the very top. Sizing it to the panel rather than to the viewport
   also matters: a sticky element stays pinned for (row height - its own
   height), so a full-height holder would come unstuck partway down the steps. */
.feature-visual { position: sticky; top: calc((100svh - var(--panel-h)) / 2); height: var(--panel-h); }
.feature-panel { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 30px; overflow: hidden; border-radius: 26px; background: linear-gradient(150deg, #d9d5cb, #a9a69f 52%, #8e9a62); box-shadow: 0 24px 60px rgba(60,56,46,.16); opacity: 0; transition: opacity .5s ease; pointer-events: none; }

/* A screenshot panel gives its whole area to the screenshot: the shots are
   wider than the holder is, so scaling them to its width alone left a band of
   gradient above and below. Anchored top-left, which is where the part of the
   interface being described actually is. */
/* Block, not the grid the other panels use: inside a grid with
   `align-content: center` the row track is content-sized, so `height: 100%` on
   the image resolves against itself and collapses to zero. */
.feature-panel:not(.shot-panel) > .shot { width: auto; max-width: 100%; max-height: 100%; min-height: 0; margin: 0 auto; object-fit: contain; }

.shot-panel { display: block; padding: 0; }
.shot-panel > .shot { width: 100%; height: 100%; object-fit: cover; object-position: left top; border: 0; border-radius: 26px; box-shadow: none; }
.feature-panel.active { opacity: 1; pointer-events: auto; }

/* ---------- Animated hero stage ---------- */
.hero-stage { --stage-rim: 12px; position: relative; display: flex; flex-direction: column; min-height: 540px; padding: 0 var(--stage-rim) var(--stage-rim); overflow: hidden; border: 1px solid #fff; border-radius: 26px; background: #fff; box-shadow: 0 30px 70px rgba(46,42,34,.17); }
.stage-bg { position: absolute; inset: -24%; z-index: 0; filter: blur(56px) saturate(1.3); opacity: .95; }
.blob { position: absolute; width: 76%; height: 78%; border-radius: 50%; transition: background 1.1s ease, transform 1.6s cubic-bezier(.4,0,.2,1); }
.blob-a { top: -8%; left: -10%; background: var(--accent); animation: driftA 15s ease-in-out infinite; }
.blob-b { right: -12%; bottom: -12%; background: var(--brown); animation: driftB 18s ease-in-out infinite; }
.blob-c { top: 16%; left: 22%; width: 64%; height: 66%; background: var(--paper-deep); animation: driftC 13s ease-in-out infinite; }
@keyframes driftA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(14%,10%) scale(1.12); } }
@keyframes driftB { 0%,100% { transform: translate(0,0) scale(1.05); } 50% { transform: translate(-12%,-8%) scale(.92); } }
@keyframes driftC { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-10%,12%); } }
/* Each scene repaints the background. */
.hero-stage[data-scene="1"] .blob-a { background: #d8a25f; }
.hero-stage[data-scene="1"] .blob-b { background: var(--accent); }
.hero-stage[data-scene="2"] .blob-a { background: var(--accent-dark); }
.hero-stage[data-scene="2"] .blob-b { background: #8e9a62; }
.hero-stage[data-scene="3"] .blob-a { background: #8e9a62; }
.hero-stage[data-scene="3"] .blob-b { background: var(--nav-green); }
.hero-stage[data-scene="3"] .blob-c { background: #c8d79a; }
.hero-stage[data-scene="4"] .blob-a { background: var(--nav-green); }
.hero-stage[data-scene="4"] .blob-b { background: var(--accent); }

.stage-chrome { position: relative; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 14px 4px; background: #fff; }
.stage-chrome .chrome-dots { gap: 7px; }
.stage-chrome .chrome-dots span { width: 11px; height: 11px; }
.stage-url { margin: 0 auto; padding: 4px 16px; border-radius: 999px; background: rgba(21,21,21,.06); color: #6f6d68; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; transition: opacity .3s ease; }
.stage-body { position: relative; z-index: 2; flex: 1; display: grid; overflow: hidden; border-radius: 14px; background: #fffdf8; }
.scene { position: relative; z-index: 1; grid-area: 1 / 1; display: grid; align-content: center; justify-items: center; gap: 14px; padding: 26px; opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.scene.active { opacity: 1; transform: none; }

.tile { border: 1px solid rgba(255,255,255,.5); border-radius: 18px; background: rgba(255,253,248,.82); box-shadow: 0 14px 34px rgba(46,42,34,.14); backdrop-filter: blur(10px); }
.tile-main { width: min(400px, 100%); padding: 20px 22px; }
.tile-kicker { margin: 0 0 16px; color: #7c7970; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.tile-float { position: absolute; padding: 13px 16px; }
.tile-float small { display: block; margin-bottom: 5px; color: #7c7970; font-family: var(--mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.tile-float strong { font-family: var(--serif); font-size: 22px; font-weight: 350; letter-spacing: -.04em; }
.f-a { top: 12%; right: 7%; }
.f-b { bottom: 14%; left: 6%; }
.f-c { top: 11%; left: 6%; }
.f-d { bottom: 13%; right: 6%; }
.scene.active .tile-float { animation: tilePop .5s cubic-bezier(.2,.8,.2,1) both; }
.scene.active .f-b, .scene.active .f-d { animation-delay: .22s; }
@keyframes tilePop { from { opacity: 0; transform: translateY(10px) scale(.94); } }

.pick-row { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; font-size: 12px; }
.pick-row > span { width: 62px; flex: none; color: #7c7970; }
.pick-chip { padding: 5px 11px; border: 1px solid rgba(21,21,21,.14); border-radius: 999px; font-weight: 400; font-size: 12px; transition: background .4s ease, color .4s ease, border-color .4s ease; }
.scene.active .pick-chip.on { border-color: var(--ink); background: var(--ink); color: #fff; }

.word-cloud { display: flex; flex-wrap: wrap; gap: 7px; }
.word-cloud span { padding: 6px 12px; border: 1px solid rgba(21,21,21,.12); border-radius: 999px; background: rgba(255,255,255,.7); font-size: 13px; opacity: 0; }
.scene.active .word-cloud span { animation: wordIn .4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes wordIn { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }

.stage-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-size: 13px; }
.stage-row b { font-family: var(--serif); font-size: 21px; font-weight: 350; }
.days { display: flex; gap: 6px; margin-bottom: 20px; }
.days i { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(21,21,21,.14); border-radius: 50%; font-size: 11px; font-style: normal; transition: background .4s ease, color .4s ease, border-color .4s ease; }
.scene.active .days i.on { border-color: var(--accent); background: var(--accent); color: var(--nav-green); }
.stage-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; transition: transform .18s ease; }
.stage-btn.lime { background: var(--lime); color: var(--ink); }
.hero-stage.pressing .stage-btn { transform: scale(.96); }

.stage-phone { width: min(230px, 62%); padding: 22px 20px; border-radius: 22px; background: rgba(43,60,45,.9); color: var(--parchment); text-align: center; box-shadow: 0 18px 40px rgba(30,42,32,.3); backdrop-filter: blur(10px); }
.stage-phone p { margin: 0; }
.phone-kicker { color: rgba(245,241,232,.55); font-family: var(--mono); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
.phone-word { margin: 14px 0 6px !important; font-family: var(--serif); font-size: 38px; font-weight: 350; letter-spacing: -.04em; }
.phone-meta { color: rgba(245,241,232,.6); font-size: 11px; }
.phone-dots { display: flex; gap: 6px; justify-content: center; margin: 16px 0 14px; }
.phone-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(245,241,232,.25); }
.scene.active .phone-dots i.on { background: var(--lime); animation: dotIn .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes dotIn { from { transform: scale(.4); opacity: 0; } }
/* Practice micro-sequence: tap → listening → AI cue, all inside one 5.2s scene. */
.phone-states { display: grid; min-height: 84px; align-content: center; }
.p-state { grid-area: 1 / 1; display: grid; gap: 7px; align-content: center; justify-items: center; opacity: 0; }
.scene.active .p-idle { animation: stIdle 5.2s linear both; }
.scene.active .p-listen { animation: stListen 5.2s linear both; }
.scene.active .p-feedback { animation: stFeedback 5.2s linear both; }
@keyframes stIdle { 0%, 21% { opacity: 1; transform: none; } 26%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes stListen { 0%, 21% { opacity: 0; transform: translateY(6px); } 27%, 52% { opacity: 1; transform: none; } 58%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes stFeedback { 0%, 54% { opacity: 0; transform: translateY(8px); } 61%, 100% { opacity: 1; transform: none; } }
.mic-bars { display: inline-flex; align-items: flex-end; justify-content: center; gap: 3px; height: 20px; }
.mic-bars i { width: 3px; height: 5px; border-radius: 2px; background: var(--lime); animation: micBar .9s ease-in-out infinite; }
.mic-bars i:nth-child(2) { animation-delay: .1s; }
.mic-bars i:nth-child(3) { animation-delay: .2s; }
.mic-bars i:nth-child(4) { animation-delay: .3s; }
.mic-bars i:nth-child(5) { animation-delay: .4s; }
@keyframes micBar { 0%, 100% { height: 5px; } 50% { height: 19px; } }
.listen-label { color: rgba(245,241,232,.7); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.fb-line { margin: 0 !important; font-size: 14px; line-height: 1.4; }
.fb-line b { color: var(--accent); font-weight: 400; }
.fb-cue { margin: 0 !important; color: rgba(245,241,232,.6); font-size: 11px; line-height: 1.4; }
.f-ai { top: 13%; left: 6%; }
.scene.active .f-ai { animation: aiTileIn 5.2s linear both; }
@keyframes aiTileIn { 0%, 56% { opacity: 0; transform: translateY(10px) scale(.94); } 64%, 100% { opacity: 1; transform: none; } }
.f-ai strong { color: var(--accent-dark); }

.stage-spriggy { position: absolute; right: 6%; bottom: 4%; width: 116px; height: auto; filter: drop-shadow(0 10px 18px rgba(30,42,32,.28)); }
.scene.active .stage-spriggy { animation: spriggyIn .6s cubic-bezier(.2,.8,.2,1) both .2s; }
@keyframes spriggyIn { from { opacity: 0; transform: translateY(18px) rotate(-6deg); } }

.trend-svg { width: 100%; height: 96px; margin-bottom: 10px; }
.trend-svg polyline { fill: none; stroke: var(--accent-dark); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 260; stroke-dashoffset: 260; }
.scene.active .trend-svg polyline { animation: drawLine 1.3s cubic-bezier(.3,0,.2,1) both .15s; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
.trend-ends { display: flex; justify-content: space-between; color: #6f6d68; font-family: var(--mono); font-size: 11px; }

/* Positioned in percentages so it never depends on a measured layout. */
.stage-cursor { position: absolute; z-index: 5; top: 34%; left: 40%; width: 20px; height: 20px; color: var(--ink); pointer-events: none; transition: top 1s cubic-bezier(.4,0,.2,1), left 1s cubic-bezier(.4,0,.2,1); filter: drop-shadow(0 3px 5px rgba(0,0,0,.28)); }

/* ---------- AI feedback band ----------
   Three beats on a loop: listening → the cue the child hears → what is going on.
   Beats are stacked in one grid cell so the section never changes height. */
.ai-band { padding-top: 150px; padding-bottom: 150px; background: var(--espresso); color: var(--parchment); }
.ai-stage { display: grid; place-items: center; min-height: 300px; max-width: 900px; margin: 0 auto; text-align: center; }
.ai-beat { grid-area: 1 / 1; display: grid; place-items: center; gap: 20px; width: 100%; opacity: 0; }
.ai-explain { gap: 22px; }
/* Runs once when the band first scrolls into view, then rests on the explainer.
   Gated on .is-visible so someone arriving partway down still sees it from the top. */
.ai-band.is-visible .ai-listen { animation: aiBeat1 11s ease-in-out both; }
.ai-band.is-visible .ai-cue { animation: aiBeat2 11s ease-in-out both; }
.ai-band.is-visible .ai-explain { animation: aiBeat3 11s ease-in-out both; }
@keyframes aiBeat1 { 0% { opacity: 0; transform: translateY(10px); } 5%, 22% { opacity: 1; transform: none; } 27%, 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes aiBeat2 { 0%, 27% { opacity: 0; transform: translateY(10px); } 32%, 58% { opacity: 1; transform: none; } 63%, 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes aiBeat3 { 0%, 63% { opacity: 0; transform: translateY(10px); } 68%, 100% { opacity: 1; transform: none; } }

.mic-lg { height: 66px; gap: 7px; }
.mic-lg i { width: 7px; height: 12px; border-radius: 4px; animation: micBarLg 1.1s ease-in-out infinite; }
.mic-lg i:nth-child(2) { animation-delay: .09s; }
.mic-lg i:nth-child(3) { animation-delay: .18s; }
.mic-lg i:nth-child(4) { animation-delay: .27s; }
.mic-lg i:nth-child(5) { animation-delay: .36s; }
.mic-lg i:nth-child(6) { animation-delay: .45s; }
.mic-lg i:nth-child(7) { animation-delay: .54s; }
@keyframes micBarLg { 0%, 100% { height: 12px; } 50% { height: 62px; } }
.ai-listen-label { color: rgba(245,241,232,.66); font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; }
.ai-listen-label::after { content: '…'; animation: aiDots 1.4s steps(4, end) infinite; }
@keyframes aiDots { 0% { content: ''; } 25% { content: '·'; } 50% { content: '··'; } 75%, 100% { content: '···'; } }

.ai-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border: 1px solid rgba(245,241,232,.28); border-radius: 999px; color: rgba(245,241,232,.78); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.ai-chip span { color: var(--accent); }
.ai-cue blockquote { max-width: 800px; margin: 0; font-family: var(--serif); font-size: clamp(26px, 3.4vw, 46px); font-weight: 350; line-height: 1.16; letter-spacing: -.04em; }
.ai-explain h2 { margin: 0; }
.ai-explain h2 em { color: var(--lime); }
.ai-explain p { max-width: 660px; margin: 0 auto; color: rgba(245,241,232,.78); font-size: 17px; line-height: 1.6; }
.ai-foot { color: rgba(245,241,232,.5) !important; font-size: 13px !important; }

/* The scrolled nav pill is deep green; a faint ring keeps it legible on dark bands. */
.site-header.scrolled { box-shadow: 0 14px 32px rgba(23,34,25,.22), 0 0 0 1px rgba(245,241,232,.26); }

@media (prefers-reduced-motion: reduce) {
  /* No cycling: show all three beats stacked and readable. */
  .ai-stage { grid-auto-flow: row; gap: 34px; min-height: 0; }
  .ai-beat { grid-area: auto; opacity: 1 !important; transform: none !important; }
}
@media (max-width: 720px) {
  .ai-band { padding-top: 96px; padding-bottom: 96px; }
  .ai-stage { min-height: 340px; }
  .mic-lg { height: 52px; }
  @keyframes micBarLg { 0%, 100% { height: 10px; } 50% { height: 48px; } }
}

/* ---------- Home page additions ---------- */
@media (min-width: 721px) {
  .hero { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1.02fr); column-gap: clamp(28px, 3vw, 48px); }
}
.hero-copy h1, .hero-copy .hero-lede, .hero-copy .audit-form { max-width: none; }
.hero-copy { max-width: 590px; }
.hero-copy h1 { margin-bottom: 44px; font-size: clamp(38px, 4.45vw, 64px); }
.hero-copy .hero-lede { margin-bottom: 48px; }
.hero-copy .form-note { margin-top: 22px; }
@media (max-width: 720px) {
  .hero-copy h1 { font-size: clamp(36px, 10vw, 46px); }
}
/* Hero headline reads in one colour, and the lime CTA needs a hover that works
   on the light hero rather than the white one meant for dark sections. */
.hero-copy h1 em { color: var(--ink); }
.hero-copy .button-lime:hover { border-color: var(--ink); background: var(--ink); color: var(--lime); }
/* Single centred column, no visual — overrides the two-column split layout. */
.split-section.centered { display: flex; flex-direction: column; justify-content: center; min-height: 600px; padding-top: 152px; padding-bottom: 152px; text-align: center; }
.split-section.centered .split-copy { max-width: 760px; margin: 0 auto; }
.split-section.centered .split-copy h2 { max-width: 640px; margin-left: auto; margin-right: auto; }
.split-section.centered .split-copy p:not(.eyebrow) { max-width: 620px; margin-left: auto; margin-right: auto; }
#home-practice .split-copy { position: relative; }
#home-practice .practice-app-icon { position: absolute; top: -100px; left: 50%; display: block; width: 72px; height: 72px; border-radius: 24%; box-shadow: 0 10px 22px rgba(0,0,0,.35); transform: translateX(-50%); }
@media (max-width: 720px) { .split-section.centered { min-height: 560px; padding-top: 104px; padding-bottom: 104px; } }
@media (max-width: 360px) { .split-section.centered { min-height: 620px; } }

.help-note { max-width: 470px; margin: -8px 0 24px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.warm-section .help-note { color: rgba(245,241,232,.62); }
.quote-stat.tight { font-size: clamp(40px, 4.6vw, 66px); letter-spacing: -.05em; line-height: 1; }
/* Orange band with dark text: the scrolled nav pill is --nav-green, so a green or
   espresso band would hide it (1.0:1 and 1.14:1). Orange keeps the pill at 4.3:1
   and the body text at 6.7:1. */
/* The bridge between building an assignment and reading what came back: the
   child practising. Deeper brown than the shared tan band, and taller, so it
   reads as a pause between the two long scrolling sections either side. */
.quote-band.band-espresso { padding-top: 132px; padding-bottom: 132px; background: var(--espresso); color: var(--parchment); }
.quote-band.band-espresso .quote-stat { color: var(--lime); }
.quote-band.band-espresso .quote-label { color: rgba(245,241,232,.72); }
.quote-band.band-espresso blockquote { color: var(--parchment); }
.quote-band.band-espresso .quote-byline span { color: rgba(245,241,232,.6); }

/* The icon stands in for the grey placeholder circle the band used to carry.
   The size override lives here rather than in styles.css because that file is
   loaded first, so its media query would lose to this rule. */
.quote-app-icon { justify-self: center; width: min(200px, 100%); height: auto; border-radius: 24%; box-shadow: 0 24px 50px rgba(0,0,0,.42); }

@media (max-width: 720px) {
  .quote-app-icon { display: block; justify-self: start; width: 116px; }
}

/* Mirrors the home page's centred split section: one column, the app icon
   leading as a small badge above the copy instead of a numbered stat
   anchoring a side column. Specificity keeps the icon visible through the
   width where the default .quote-app-icon is hidden for the side-by-side layout. */
.quote-band.centered { display: block; text-align: center; }
.quote-band.centered .quote-app-icon { display: block; width: 72px; height: auto; margin: 0 auto 28px; box-shadow: 0 10px 22px rgba(0,0,0,.35); }
.quote-band.centered .quote-label { max-width: none; }
.quote-band.centered .feature-statement, .quote-band.centered .statement-description { max-width: 620px; margin-left: auto; margin-right: auto; }

.quote-band.band-accent { background: var(--accent); color: var(--ink); }
.quote-band.band-accent .quote-stat { color: var(--nav-green); white-space: nowrap; }
.quote-band.band-accent .quote-stat .arrow { color: rgba(21,21,21,.42); }
.quote-band.band-accent .quote-label { color: rgba(21,21,21,.78); }
.quote-band.band-accent .quote-byline span { color: rgba(21,21,21,.66); }
.testimonial-visual { display: grid; place-items: center; }
.testimonial-visual img { width: min(330px, 82%); height: auto; }
.lab-shot { display: block; width: 100%; height: 188px; margin: 18px 0 20px; object-fit: cover; object-position: top center; border: 1px solid rgba(21,21,21,.1); border-radius: 14px; background: var(--paper-deep); }
.lab-shot + h3 { min-height: 0; margin-bottom: 14px; }

/* ---------- Pill form (same shape as the audit form, different submit copy) ---------- */
.pill-form { display: flex; max-width: 530px; margin: 0 auto; padding: 6px; border: 1px solid rgba(21,21,21,.28); border-radius: 999px; background: rgba(255,255,255,.62); }
.pill-form input { flex: 1; min-width: 0; padding: 0 17px; border: 0; outline: 0; background: transparent; color: var(--ink); }
.pill-form input::placeholder { color: #8f8c86; }
/* pages.css loads after styles.css, so the dark variant needs to win explicitly. */
.pill-form.dark-form { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.1); }
.pill-form.dark-form input { color: #fff; }
.pill-form.dark-form input::placeholder { color: rgba(255,255,255,.55); }

/* ---------- Framed product screenshot ---------- */
.shot { display: block; width: 100%; height: auto; border: 1px solid rgba(21,21,21,.14); border-radius: 18px; background: #fffdf8; box-shadow: 0 34px 80px rgba(36,34,28,.28); }
.shot-tight { border-radius: 12px; box-shadow: 0 14px 34px rgba(46,42,34,.13); }

/* ---------- Hero figure with floating stat cards ---------- */
.hero-figure { position: relative; max-width: 1180px; margin: 0 auto; padding-bottom: 120px; }
.hero-figure-chart { width: 100%; height: clamp(220px, 26vw, 330px); display: block; overflow: visible; }
.hero-figure-chart polyline { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.float-stack { position: absolute; right: 0; bottom: 120px; display: grid; gap: 11px; width: min(300px, 46vw); }
.float-card { padding: 16px 18px; border: 1px solid rgba(21,21,21,.12); border-radius: 15px; background: rgba(255,253,248,.94); box-shadow: 0 18px 40px rgba(46,42,34,.14); }
.float-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.float-card small { display: block; margin-bottom: 8px; color: #8b8881; font-family: var(--mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.float-card strong { font-family: var(--serif); font-size: 30px; font-weight: 350; letter-spacing: -.05em; }
.float-card .mock-rows { gap: 10px; }

/* ---------- Dark trust band ---------- */
.dark-trust { background: var(--espresso); color: var(--parchment); border-bottom: 0; }
.dark-trust > p { color: rgba(245,241,232,.6); }
.dark-trust .logo-track { color: rgba(245,241,232,.9); }
.dark-trust .logo-muted { color: rgba(245,241,232,.5); }

/* ---------- Animated comparison counters ---------- */
.counter-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 7vw, 110px); align-items: center; padding-top: 130px; padding-bottom: 130px; }
.counter-panel { display: grid; gap: 13px; padding: 30px; border-radius: 26px; background: var(--espresso); color: var(--parchment); }
.counter-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; border: 1px solid rgba(245,241,232,.2); border-radius: 16px; }
.counter-row span { color: rgba(245,241,232,.72); font-size: 14px; }
.counter-row b { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 46px); font-weight: 350; letter-spacing: -.05em; }
.counter-row.highlight { border-color: transparent; background: var(--accent); color: var(--espresso); }
.counter-row.highlight span { color: rgba(62,43,34,.75); }
.counter-note { margin: 4px 2px 0; color: rgba(245,241,232,.55); font-family: var(--mono); font-size: 11px; }

/* ---------- Dark-green hero theme (therapists) ---------- */
/* The header is absolutely positioned over the hero, so both read as one green block. */
.hero-dark .page-hero { background: var(--nav-green); color: var(--parchment); }
.hero-dark .page-hero .eyebrow { color: rgba(245,241,232,.62); }
.hero-dark .page-lede { color: rgba(245,241,232,.78); }
.hero-dark .showcase-band { background: var(--nav-green); }

.hero-dark .site-header:not(.scrolled) { color: var(--accent); }
.hero-dark .site-header:not(.scrolled) .button-light { border-color: rgba(227,131,87,.55); color: var(--accent); }
.hero-dark .site-header:not(.scrolled) .button-light:hover { border-color: var(--accent); background: var(--accent); color: var(--nav-green); }
.hero-dark .site-header:not(.scrolled) .button-dark { border-color: var(--accent); background: var(--accent); color: var(--nav-green); }
.hero-dark .site-header:not(.scrolled) .button-dark:hover { border-color: var(--accent); background: transparent; color: var(--accent); }

/* On scroll the pill inverts: orange bar, green contents. */
.hero-dark .site-header.scrolled { background: var(--accent); color: var(--nav-green); box-shadow: 0 14px 32px rgba(176,90,56,.28); }
.hero-dark .site-header.scrolled .scroll-tagline { color: rgba(43,60,45,.78); }
.hero-dark .site-header.scrolled .mobile-menu-panel, .hero-dark .site-header.scrolled .mobile-menu-links a { border-color: rgba(43,60,45,.22); }
.hero-dark .site-header.scrolled .mobile-menu-action { border-color: rgba(43,60,45,.45); color: var(--nav-green); }
.hero-dark .site-header.scrolled .mobile-action-primary { border-color: var(--nav-green); background: var(--nav-green); color: var(--accent); }

/* The shipped logos are opaque PNGs, so tint the transparent variants instead of blending. */
.hero-dark .site-header .brand-crop { position: relative; }
.hero-dark .site-header .brand-crop img { visibility: hidden; }
.hero-dark .site-header .brand-crop::after { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: var(--brand-art) center/contain no-repeat; mask: var(--brand-art) center/contain no-repeat; }
.hero-dark .site-header .brand-wordmark { --brand-art: url(/assets/merle-wordmark-transparent.png); }
.hero-dark .site-header .brand-mark { --brand-art: url(/assets/merle-mark-transparent.png); }

@media (max-width: 980px) {
  .plan-grid.three { grid-template-columns: 1fr; gap: 20px; }
  .counter-section { grid-template-columns: 1fr; }
  .float-stack { position: static; width: auto; margin-top: 18px; }
  .hero-figure { padding-bottom: 80px; }
  /* Below this width the table scrolls sideways, which rules out a sticky header. */
  .compare-scroll { overflow-x: auto; }
  .compare-head th { position: static; }
  .faq { grid-template-columns: 1fr; gap: 34px; }
  .feature-scroll { grid-template-columns: 1fr; }
  .feature-visual { position: relative; top: 0; order: -1; height: auto; min-height: 460px; }

  .showcase-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .hero-stage { min-height: 460px; border-radius: 20px; }
  .scene { padding: 18px; }
  .tile-float { padding: 10px 12px; }
  .tile-float strong { font-size: 18px; }
  .stage-spriggy { width: 84px; }
  .page-hero { padding-top: 120px; padding-bottom: 40px; }
  /* The stacked mobile form re-styles the input for light backgrounds, which hides white text. */
  .dark-form input { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.12); }
  .page-lede { font-size: 17px; }
  .plan-grid { grid-template-columns: 1fr; padding-bottom: 80px; }
  .plan-card { padding: 28px 24px; border-radius: 22px; }
  .compare { padding-bottom: 85px; }
  .compare-table { min-width: 580px; }
  .compare-table th, .compare-table td { padding: 12px 14px; }
  .compare-table col.col-label { width: 38%; }
  .group-row th, .group-row td { padding-top: 34px; }
  .faq, .section-head { padding-top: 85px; }
  .faq { padding-bottom: 85px; }
  .feature-scroll { padding-bottom: 85px; }
  .feature-step { padding: 26px 0 26px 20px; }
  .feature-visual { min-height: 505px; }
  .feature-panel { padding: 18px; border-radius: 20px; }
  /* Block, not the grid the other panels use: inside a grid with
   `align-content: center` the row track is content-sized, so `height: 100%` on
   the image resolves against itself and collapses to zero. */
.feature-panel:not(.shot-panel) > .shot { width: auto; max-width: 100%; max-height: 100%; min-height: 0; margin: 0 auto; object-fit: contain; }

.shot-panel { display: block; padding: 0; }
  .shot-panel > .shot { border-radius: 20px; }
  .showcase-band { padding-bottom: 60px; }
  .mock-kpis { grid-template-columns: 1fr; }
  .mock-row { grid-template-columns: 70px 1fr 38px; }
  .counter-section { padding-top: 85px; padding-bottom: 85px; }
  .counter-panel { padding: 20px; border-radius: 20px; }
  .counter-row { padding: 16px 18px; }
  .float-split { grid-template-columns: 1fr; }
  .pill-form { display: grid; gap: 6px; padding: 6px; border-radius: 18px; background: transparent; }
  .pill-form input { min-height: 48px; padding: 0 14px; border: 1px solid rgba(21,21,21,.28); border-radius: 12px; background: rgba(255,255,255,.62); }
  .pill-form.dark-form input { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.12); }
  .pill-form .button { width: 100%; }
}

/* Spriggy uses the same rounded app tile wherever its icon appears. */
img[src*="spriggy-app-icon.png"], .avatar-box.app-icon-frame { border-radius: 24%; }