/* Tailoring the verified sage/layered source design, not replacing its identity. */
.hero-copy { max-width: 640px; margin-inline: auto; }
/* The headline names the outcome, so it runs longer than the old tagline. */
.hero h1 { font-size: clamp(60px, 7.4vw, 112px); }
.hero-aside { margin-top: 22px; font-size: 14px; color: var(--ink-2); }
.hero-aside a { color: var(--green); font-weight: 550; border-bottom: 1px solid #173e3540; }
.hero-aside a:hover { border-color: currentColor; }
.cta .cta-aside { margin: 26px auto 0; font-size: 15px; }
.cta-aside a { color: var(--on-green); border-bottom: 1px solid #eff3dd66; overflow-wrap: anywhere; }
.cta-aside a:hover { border-color: currentColor; }
@media (max-width: 767px) { .hero h1 { font-size: clamp(46px, 12.6vw, 72px); } }
.hero-scene .clinic-card { z-index: 2; }
.hero-scene .phone { z-index: 3; }
.source-paper { position: absolute; left: 26px; top: 326px; width: 226px; padding: 22px 24px; border-radius: 8px; border: 1px solid #c8d7c5; background: #fffef9; color: var(--ink); box-shadow: 0 16px 38px #21443416; transform: rotate(-6deg); z-index: 1; }
.source-paper strong, .source-paper > span, .source-paper small { display: block; }
.source-paper strong { margin: 16px 0 10px; font-size: 16px; }
.source-paper > span:not(.source-file) { margin-top: 8px; font-size: 13px; }
.source-paper small { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.source-file { font-size: 10px; font-weight: 650; letter-spacing: .1em; color: #477364; }
.hero-scene[data-state="1"] .source-paper, .hero-scene[data-state="2"] .source-paper { transform: rotate(-6deg); }
.hero-scene[data-state="5"] [data-show~="5"] { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .45s ease; }
.hero-scene[data-entry="direct"] .only-pdf, .hero-scene[data-entry="pdf"] .only-direct { display: none !important; }
.referral-slip { padding: 24px 18px; margin-top: 18px; background: #fffef9; border: 1px solid #d6dfd0; border-radius: 8px; box-shadow: 0 12px 28px #2046320b; }
.referral-slip strong { display: block; font-size: 19px; margin-top: 20px; }
.referral-slip p { font-size: 13px; margin-top: 12px; color: var(--ink-2); line-height: 1.5; }
.slip-lines { display: grid; gap: 9px; margin-top: 22px; }
.slip-lines i { display: block; height: 5px; background: #e6ece0; border-radius: 3px; }
.slip-lines i:last-child { width: 60%; }
.phone-details > div { padding: 15px 0; border-top: 1px solid #dce5d4; }
.phone-details dt { font-size: 11px; color: var(--ink-2); margin-bottom: 7px; }
.phone-details dd { font-size: 14px; font-weight: 550; }
.review-note { font-size: 12px; line-height: 1.6; color: var(--ink-2); margin-top: 16px; }
.ready-mark { width: 66px; height: 66px; display: grid; place-items: center; margin: 12px 0 22px; border-radius: 50%; color: var(--green); background: #dfebd2; }
.ready-mark .i { width: 30px; height: 30px; }
.hero-scene[data-state="4"] .screen-form .form-list .tick, .hero-scene[data-state="4"] .screen-form .ui-button { opacity: 1; transform: none; }
.hero-scene[data-state="4"] .form-list li:nth-child(1) .tick { transition-delay: .4s; }
.hero-scene[data-state="4"] .form-list li:nth-child(2) .tick { transition-delay: .8s; }
.hero-scene[data-state="4"] .form-list li:nth-child(3) .tick { transition-delay: 1.2s; }
.hero-scene[data-state="4"] .screen-form .ui-button { transition-delay: 1.6s; }
.showcase-controls { display: flex; flex-wrap: wrap; gap: 12px 18px; justify-content: center; align-items: center; margin-top: 20px; position: relative; z-index: 4; }
.showcase-controls[hidden] { display: none; }
.entry-switch, .playback-controls { display: inline-flex; align-items: center; gap: 4px; }
.entry-switch { padding: 4px; border: 1px solid #c8d5c3; border-radius: 24px; background: #ffffff55; }
.showcase-controls button { min-height: 44px; padding: 10px 14px; border-radius: 22px; border: 1px solid transparent; background: transparent; color: var(--ink-2); cursor: pointer; font-size: 12px; }
.entry-switch button[aria-pressed="true"] { background: var(--surface); color: var(--green); box-shadow: 0 3px 10px #2046320c; }
.showcase-controls button:hover { background: #ffffffa0; color: var(--green); }
.showcase-controls .loop-toggle { position: static; display: inline-flex; align-items: center; gap: 8px; width: auto; height: auto; background: transparent; border-color: #c5d3bf; }
.loop-toggle.is-paused { background: #ffffffa0; }
.showcase-caption { text-align: center; margin-top: 14px; color: var(--ink-2); font-size: 12px; line-height: 1.5; }
.referral-paths { padding-top: 110px; padding-bottom: 20px; }
.path-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; margin-top: 42px; }
.path-card { padding: 36px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.path-card:last-child { background: #eaf0e2; border-color: #d5e0cb; }
.path-card h3 { font-family: var(--serif); font-size: clamp(34px,3.6vw,48px); line-height: 1.05; margin: 22px 0 18px; }
.path-card > p:not(.eyebrow) { max-width: 440px; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.path-card .arrow-link { margin-top: 26px; }
.home-pricing { padding-top: 110px; padding-bottom: 30px; }
.home-plan-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; margin: 38px 0 26px; }
.home-plan-row > div { padding: 26px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.home-plan-row p { margin: 18px 0 12px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.home-plan-row strong { display: block; font-family: var(--serif); font-size: 46px; font-weight: 400; color: var(--ink); }
.home-plan-row small { display: block; color: var(--ink-2); font-size: 13px; line-height: 1.6; }
.home-pricing > p { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.home-pricing > .arrow-link { margin-top: 22px; }
.hero.pr-hero { padding-bottom: 64px; }
.pr-plans { margin-top: 44px; }
.pr-plan .pr-allowance { padding-top: 18px; margin: 8px 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.pr-allowance strong { font-size: inherit; font-weight: 600; }
.is-featured .pr-allowance { color: var(--on-green-2); border-color: #9aba8038; }
.pr-plan .button { margin-top: auto; }
.import-definition { padding: 26px 30px; margin-top: 28px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.import-definition h3 { font-size: 21px; margin-bottom: 14px; }
.import-definition p { max-width: 880px; font-size: 15px; color: var(--ink-2); line-height: 1.65; }
.import-definition p + p { margin-top: 12px; }
.included-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; margin-top: 40px; }
.included-grid h3 { font-size: 20px; margin-bottom: 10px; }
.included-grid p { font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.referrer-choice { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 64px; align-items: center; }
.referrer-choice h2 { margin-top: 18px; }
.referrer-choice p:not(.eyebrow) { font-size: 16px; line-height: 1.65; color: var(--ink-2); margin-top: 20px; max-width: 510px; }
.free-referrer { padding: 32px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.free-referrer h3 { font-family: var(--serif); font-size: 38px; margin-top: 18px; }
.free-referrer .button { margin-top: 28px; }
.pdf-process { padding-top: 80px; }
.pdf-process ol { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px; }
.pdf-process li { padding: 24px 20px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.pdf-process span { display: block; font-size: 12px; color: #477364; margin-bottom: 14px; }
.pdf-process strong { font-size: 17px; font-weight: 550; }
.pdf-review-card { width: 390px; }
.pdf-review-card .mc-title { font-size: 36px; }
.pdf-review-card .mc-dl > div { gap: 14px; }
.pdf-review-card .attach { gap: 14px; }
/* Retain the rounded, expressive closing panel. The demo is never hidden
   behind a long scroll-pinned transition. */
.closer { height: auto !important; view-timeline: none; }
.closer-stage { position: relative !important; top: auto !important; height: auto !important; min-height: 0 !important; }
.closer-dark, .closer-prompt { display: none !important; }
.closer .cta { position: relative !important; inset: auto !important; display: block !important; animation: none !important; clip-path: none !important; padding: 100px 24px 210px !important; }
.closer .cta-inner, .closer .cta-word { animation: none !important; opacity: 1 !important; transform: none !important; }
/* All copy and CTAs appear immediately; only illustrative product surfaces
   crossfade. Reduced motion also removes the sticky journey composition. */
/* Nov 2026: hero copy and section reveals animate again (see site.js); off under reduced motion. */
@media (prefers-reduced-motion: reduce) { .js .intro { animation: none; } .js-motion .reveal { opacity: 1; transform: none; transition: none; } }
@media (max-width: 1000px) {
 .referrer-choice { grid-template-columns: minmax(0,1fr); gap: 32px; }
 .included-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 860px) {
 .hero-visual { width: min(580px,calc(100% - 32px)); }
 .hero-scene { height: 650px; }
 .hero-scene .clinic-card { display: block; top: 334px; left: 0; width: min(340px,100%); z-index: 4; padding: 14px 16px; }
 .hero-scene .phone { left: auto; right: 12px; top: 0; margin-left: 0; }
 .hero-scene .clinic-card .cc-row { font-size: 12px; gap: 8px; padding: 9px 0; }
 .hero-scene .clinic-card .cc-row small { font-size: 10px; }
 .hero-scene .clinic-card .status { font-size: 10px; padding: 3px 6px; }
 .hero-scene .clinic-card .avatar { width: 26px; height: 26px; font-size: 10px; }
 .source-paper { left: 5px; top: 66px; width: 174px; padding: 18px; }
 .source-paper > span:not(.source-file) { font-size: 11px; }
 .path-grid { gap: 20px; }
 .path-card { padding: 28px; }
 .home-plan-row { gap: 18px; }
 .home-plan-row > div { padding: 22px; }
}
@media (max-width: 600px) {
 .hero-scene { height: 626px; }
 .hero-scene .phone { right: 0; }
 .hero-scene .clinic-card { width: 100%; top: 372px; }
 .hero-scene .source-paper { display: none; }
 .showcase-controls { gap: 10px; }
 .showcase-controls button { padding: 10px 12px; }
 .referral-paths { padding-top: 72px; }
 .path-grid, .home-plan-row, .included-grid { grid-template-columns: minmax(0,1fr); }
 .path-card { padding: 28px 24px; }
 .home-pricing { padding-top: 80px; }
 .home-plan-row { gap: 14px; }
 .home-plan-row strong { display: inline; font-size: 36px; margin-right: 8px; }
 .home-plan-row p { margin: 14px 0 8px; }
 .hero.pr-hero h1 { font-size: clamp(42px,11vw,64px); line-height: 1; }
 .free-referrer { padding: 28px 24px; }
 .free-referrer .button { width: 100%; white-space: normal; text-align: center; }
 .import-definition { padding: 24px; }
 .pdf-process ol { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
 .pdf-process li { padding: 20px 16px; }
 .pdf-process strong { font-size: 15px; }
 .pdf-review-card { padding: 22px; }
 .pdf-review-card .mc-dl > div { font-size: 12px; }
 .closer .cta { padding: 80px 24px 150px !important; }
 .footer-column a { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { animation: none !important; transition: none !important; }
 .hero-scene .screen-form .tick, .hero-scene .screen-form .ui-button { opacity: 1; transform: none; }
 .js .journey-grid { grid-template-columns: minmax(0,1fr); }
 .js .j-step { grid-column: 1; min-height: 0; padding: 24px 0 0; }
 .js .j-stage { display: contents; position: static; }
 .js .j-tracker { display: none; }
 .js .j-step[data-step="1"] { grid-row: 1; } .js .j-visual[data-step="1"] { grid-row: 2; }
 .js .j-step[data-step="2"] { grid-row: 3; } .js .j-visual[data-step="2"] { grid-row: 4; }
 .js .j-step[data-step="3"] { grid-row: 5; } .js .j-visual[data-step="3"] { grid-row: 6; }
 .js .j-step[data-step="4"] { grid-row: 7; } .js .j-visual[data-step="4"] { grid-row: 8; }
 .js .j-step[data-step="5"] { grid-row: 9; } .js .j-visual[data-step="5"] { grid-row: 10; }
 .js .j-visual { grid-column: 1; grid-area: auto; opacity: 1; visibility: visible; transform: none; margin: 28px 0 64px; }
 .js .j-visual > * { transform: none; }
}

/* --- Nov 2026 homepage pass: problem section, hero facts, mid CTA, pricing actions --- */
.hero-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--ink-2); }
.hero-facts li { display: inline-flex; align-items: center; gap: 8px; }
.hero-facts li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e7351' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 9px no-repeat; box-shadow: inset 0 0 0 1px #cfe0c6; }
.hero-aside { margin-top: 14px; }

.problem { padding-top: 120px; padding-bottom: 10px; }
.problem-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; margin: 44px 0 0; padding: 0; list-style: none; }
.problem-card { padding: 28px 0 30px; border-top: 1px solid var(--ink); }
.problem-n { display: block; font-size: 12px; letter-spacing: .12em; font-weight: 600; color: var(--accent); }
.problem-card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px,2.6vw,36px); line-height: 1.08; margin: 18px 0 12px; color: var(--ink); }
.problem-card p { font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 320px; }
.problem-turn { margin-top: 48px; padding: 28px 32px; border-radius: 14px; background: var(--panel); font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.problem-turn strong { color: var(--ink); font-weight: 600; }

.mid-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 56px; padding: 28px 32px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.mid-cta p { font-family: var(--serif); font-size: clamp(26px,2.4vw,34px); line-height: 1.1; color: var(--ink); margin: 0; }

.home-plan-row p { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.home-plan-row strong { display: inline; }
.home-pricing-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 26px; }
.home-pricing-actions .arrow-link { margin-top: 0; }

@media (max-width: 900px) {
 .problem-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
 .problem-card { padding: 24px 0 26px; }
}
@media (max-width: 640px) {
 .problem { padding-top: 80px; }
 .problem-turn { padding: 22px; font-size: 16px; }
 .mid-cta { flex-direction: column; align-items: flex-start; padding: 24px 22px; }
 .hero-facts { font-size: 13px; gap: 6px 16px; }
}
.referral-paths { padding-bottom: 120px; }
@media (max-width: 640px) { .referral-paths { padding-bottom: 80px; } }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.js .intro { animation-delay: calc(.1s + var(--d, 0) * 70ms); }

/* --- Nov 2026 fuller homepage: roles, feature lists, patient information, getting started --- */
.roles { padding-top: 130px; }
.role-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; margin: 44px 0 0; padding: 0; list-style: none; }
.role-card { padding: 28px 26px 30px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.role-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px #173e3540; }
.role-card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px,2.2vw,32px); line-height: 1.08; margin: 18px 0 12px; color: var(--ink); }
.role-card > p:not(.eyebrow) { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.role-card:nth-child(4) { background: var(--panel); }

.module-list { list-style: none; padding: 18px 0 0; margin: 18px 0 20px; border-top: 1px solid #ffffff1f; display: grid; gap: 10px; }
.module-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--on-green-2); }
.module-list .i { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--accent-dark); stroke: currentColor; fill: none; stroke-width: 2.4; }

.trust { padding-top: 130px; padding-bottom: 40px; }
.trust-grid { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: 64px; align-items: start; }
.trust .section-head .arrow-link { margin-top: 24px; }
.trust-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.trust-list li { display: flex; gap: 16px; padding: 24px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.trust-tick { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); box-shadow: inset 0 0 0 1px #cfe0c6; }
.trust-tick .i { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.trust-list h3 { font-size: 16px; font-weight: 600; color: var(--ink); margin: 3px 0 6px; }
.trust-list p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

.start { margin: 120px 10px 0; border-radius: 16px; background: var(--green); color: var(--on-green); padding: 110px 0 100px; }
.start h2 { color: var(--on-green); }
.start h2 em { color: var(--accent-dark); }
.start .eyebrow { color: var(--accent-dark); }
.start-grid { list-style: none; padding: 0; margin: 48px 0 44px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px; counter-reset: s; }
.start-step { position: relative; padding-top: 26px; border-top: 1px solid #ffffff2e; }
.start-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--lime); color: var(--green); font-weight: 600; font-size: 14px; }
.start-step h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.1; margin: 20px 0 10px; color: var(--on-green); }
.start-step p { font-size: 15px; line-height: 1.6; color: var(--on-green-2); }

@media (max-width: 1100px) {
 .role-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .start-grid { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 40px; }
}
@media (max-width: 900px) {
 .trust-grid { grid-template-columns: minmax(0,1fr); gap: 36px; }
}
@media (max-width: 640px) {
 .roles, .trust { padding-top: 84px; }
 .role-grid, .trust-list, .start-grid { grid-template-columns: minmax(0,1fr); }
 .start { margin-top: 84px; padding: 80px 0 72px; }
}
@media (prefers-reduced-motion: reduce) { .role-card, .role-card:hover { transition: none; transform: none; } }
.start .section-head > p:not(.eyebrow) { color: var(--on-green-2); margin-top: 18px; }

/* --- proof stats + pilot --- */
.proof { padding-top: 120px; }
.proof-grid { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
.proof-stat { padding: 28px 26px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.proof-num { font-family: var(--serif); font-size: clamp(56px,5.4vw,80px); line-height: .95; color: var(--green); margin: 0 0 16px; }
.proof-num span { font-size: .4em; margin-left: 6px; color: var(--accent); font-style: italic; }
.proof-stat > p:last-child { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.proof-source { margin-top: 22px; font-size: 13.5px; line-height: 1.6; color: var(--muted); max-width: 720px; }
.start .section-head { max-width: 760px; }
.pilot-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; margin: 48px 0 44px; }
.pilot-col { padding: 30px; border-radius: 14px; background: var(--green-2); border: 1px solid #ffffff1f; }
.pilot-col h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; color: var(--on-green); margin: 0 0 16px; }
.pilot-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.pilot-col li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.55; color: var(--on-green-2); }
.pilot-col li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-dark); }
@media (max-width: 1100px) { .proof-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px) { .proof { padding-top: 84px; } .proof-grid, .pilot-grid { grid-template-columns: minmax(0,1fr); } .pilot-col { padding: 24px; } }

/* --- SEO pass: product-page h1 is a descriptive phrase, plus a one-line lede --- */
.p-hero h1 { font-size: clamp(44px, 4.8vw, 72px); letter-spacing: -.045em; line-height: 1; max-width: 12ch; }
.p-hero .p-promise { margin-bottom: 16px; }
.p-lede { max-width: 470px; margin: 0 0 30px; font-size: 16.5px; line-height: 1.6; color: var(--on-green-2); }
@media (max-width: 640px) { .p-hero h1 { font-size: clamp(40px, 11vw, 54px); } }

/* ===== Nov 2026 restructure: hero proof strip, 4-card how-it-works, setup + patient info ===== */
.hero-proof { max-width: 1168px; margin: 34px auto 0; padding: 26px 30px 24px; border-radius: 16px; background: var(--green); color: var(--on-green); }
.hero-proof .eyebrow { color: var(--accent-dark); margin: 0 0 16px; text-align: left; }
.hero-proof ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; text-align: left; }
.hero-proof li { display: grid; gap: 8px; }
.hp-num { font-family: var(--serif); font-size: clamp(44px,4.2vw,60px); line-height: .95; }
.hp-num small { font-size: .42em; font-style: italic; color: var(--accent-dark); margin-left: 5px; }
.hp-txt { font-size: 14px; line-height: 1.45; color: var(--on-green-2); max-width: 230px; }
.hero > .disclaimer { margin-top: 14px; }

.how { padding-top: 120px; }
.how .section-head.center { margin-inline: auto; text-align: center; }
.how-grid { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
.how-card { display: flex; flex-direction: column; padding: 26px 24px 24px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.how-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: var(--on-green); font-size: 13px; font-weight: 600; }
.how-card h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.08; margin: 18px 0 10px; color: var(--ink); }
.how-card > p { font-size: 15px; line-height: 1.58; color: var(--ink-2); }
.how-vis { margin: 22px 0 18px; padding: 16px; border-radius: 12px; background: var(--panel); flex: 1; display: flex; align-items: flex-start; }
.how-card .arrow-link { margin-top: auto; align-self: flex-start; }
.hv-card, .hv-chat { width: 100%; padding: 14px 14px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 24px -18px #173e3555; font-size: 13px; color: var(--ink-2); display: grid; gap: 4px; }
.hv-kicker { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--accent); margin: 0 0 4px; }
.hv-card strong { font-size: 15px; color: var(--ink); }
.hv-file { margin-top: 6px; padding: 6px 8px; border-radius: 6px; background: var(--ok-bg); color: var(--ok); font-size: 12px; font-weight: 500; }
.hv-bubble { margin: 0; padding: 10px 12px; border-radius: 12px 12px 12px 4px; background: #e1eadb; color: var(--ink); font-size: 13px; line-height: 1.45; }
.hv-link { display: inline-flex; align-items: center; justify-content: space-between; margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: #3f6a4f; color: #f3f6e6; font-size: 12.5px; font-weight: 500; }
.hv-link .i, .hv-checks .i { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.hv-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.hv-checks li { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.hv-checks .i { color: var(--ok); }
.hv-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.hv-row:first-of-type { border-top: 0; }
.hv-row b { font-weight: 600; color: var(--ink); }
.how .mid-cta { margin-top: 36px; }
.roles .role-card .arrow-link { margin-top: 18px; }

.setup { padding-top: 130px; padding-bottom: 20px; }
.setup-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: start; }
.setup-steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 0; }
.setup-steps li { display: flex; gap: 18px; padding: 20px 0; border-top: 1px solid var(--line); }
.setup-steps .start-n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: var(--on-green); font-weight: 600; font-size: 14px; }
.setup-steps h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.1; margin: 2px 0 6px; color: var(--ink); }
.setup-steps p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.setup-trust { padding: 32px; border-radius: 18px; background: var(--panel); }
.setup-trust-title { font-family: var(--serif); font-weight: 400; font-size: clamp(30px,2.8vw,40px); line-height: 1.05; margin: 10px 0 24px; color: var(--ink); }
.setup-trust-title em { color: var(--accent); }
.setup-trust .trust-list { grid-template-columns: minmax(0,1fr); gap: 12px; }
.setup-trust .trust-list li { padding: 16px 18px; }
.setup-trust .trust-list h4 { font-size: 15.5px; font-weight: 600; color: var(--ink); margin: 3px 0 4px; }
.setup-trust .trust-list p { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.setup-trust-more { margin-top: 18px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.setup-trust-more a { color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.home-pricing .section-head > p { margin-top: 16px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); max-width: 560px; }

@media (max-width: 1100px) { .how-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 900px) { .setup-grid { grid-template-columns: minmax(0,1fr); gap: 40px; } .hero-proof ul { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px) {
 .hero-proof { margin: 28px 16px 0; padding: 22px 20px; }
 .hero-proof ul { gap: 20px 16px; }
 .how, .setup { padding-top: 84px; }
 .how-grid { grid-template-columns: minmax(0,1fr); }
 .setup-trust { padding: 24px 20px; }
}
.roles { padding-bottom: 120px; }
@media (max-width: 640px) { .roles { padding-bottom: 84px; } }

/* =====================================================================
   "Wow" pass (Nov 2026): dark hero with layered live scene, count-up proof,
   call-list problem visual, drawn how-it-works rail, richer green sections.
   All motion is decorative and off under prefers-reduced-motion.
   ===================================================================== */
:root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --lime-hi: #d9ec9f; }

/* ---------- hero ---------- */
.hx { position: relative; margin: 10px 10px 0; border-radius: 20px; overflow: hidden; color: var(--on-green); background: #12352d; padding: 150px 0 0; isolation: isolate; }
.hx-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent calc(8.333% - 1px), #ddedcd0d calc(8.333% - 1px), #ddedcd0d 8.333%),
    linear-gradient(180deg, #163f35 0, #10302a 100%); }
.hx-bg::after { content: none; }
.hx-glow { position: absolute; border-radius: 50%; filter: blur(60px); }
.hx-glow.a { width: 520px; height: 520px; right: 4%; top: 10%; background: radial-gradient(circle, #b8d98a33 0, transparent 70%); }
.hx-glow.b { width: 380px; height: 380px; right: 26%; top: 48%; background: radial-gradient(circle, #77ad9940 0, transparent 70%); }
/* The drifting glows were removed (Nov 2026): the hero is plain green. */
.hx-glow { display: none; }

.hx-grid { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter, 32px); display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,1fr); gap: 40px; align-items: center; }
.hx-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; border-radius: 999px; background: #ffffff10; border: 1px solid #ffffff1f; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--on-green-2); }
.hx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime-hi); box-shadow: 0 0 0 0 #d9ec9f88; }
.js .hx-dot { animation: hxPulse 2.4s ease-out infinite; }
@keyframes hxPulse { 0% { box-shadow: 0 0 0 0 #d9ec9f88; } 80%,100% { box-shadow: 0 0 0 10px #d9ec9f00; } }
.hx h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(56px, 6.6vw, 104px); line-height: .9; letter-spacing: -.035em; margin: 26px 0 26px; color: #f4f6e8; }
.hx h1 .line { display: block; }
.hx h1 em { color: var(--lime-hi); }
.hx-lede { max-width: 520px; font-size: 18px; line-height: 1.6; color: var(--on-green-2); }
.hx-actions { display: flex; align-items: center; gap: 26px; margin-top: 34px; flex-wrap: wrap; }
.hx-cta { padding: 17px 26px; font-size: 16px; box-shadow: 0 18px 40px -16px #d9ec9f66; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.hx-cta:hover { transform: translateY(-2px); box-shadow: 0 24px 50px -16px #d9ec9f88; }
.hx-link { display: inline-flex; align-items: center; gap: 8px; color: var(--on-green); font-weight: 550; border-bottom: 1px solid #eff3dd55; padding-bottom: 2px; }
.hx-link:hover { border-color: currentColor; }
.hx-link .i { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.hx-facts { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; color: var(--on-green-2); }
.hx-facts li { display: inline-flex; align-items: center; gap: 8px; }
.hx-facts .i { width: 15px; height: 15px; stroke: var(--lime-hi); fill: none; stroke-width: 2.6; }
.hx-aside { margin-top: 16px; font-size: 14px; color: var(--on-green-2); }
.hx-aside a { color: var(--on-green); font-weight: 600; border-bottom: 1px solid #eff3dd55; }
.hx-aside a:hover { border-color: currentColor; }

/* stage: layered product scene */
.hx-stage { position: relative; height: 600px; --mx: 0; --my: 0; }
.hx-layer { position: absolute; inset: 0; pointer-events: none; transform: translate3d(calc(var(--mx) * var(--depth, .5) * 18px), calc(var(--my) * var(--depth, .5) * 14px), 0); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.hx-layer[data-depth="0.35"] { --depth: .35; } .hx-layer[data-depth="0.7"] { --depth: .7; } .hx-layer[data-depth="0.9"] { --depth: .9; } .hx-layer[data-depth="1.1"] { --depth: 1.1; } .hx-layer[data-depth="1.3"] { --depth: 1.3; }
.hx-inbox { position: absolute; left: 0; top: 190px; width: 360px; padding: 18px 18px 10px; border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 40px 80px -30px #000a, 0 0 0 1px #ffffff14; transform: rotate(-3deg); }
.hx-inbox .cc-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.hx-inbox-title { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 6px; font-weight: 600; font-size: 15px; }
.hx-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 10px; }
.hx-row.is-focus { background: var(--ok-bg); }
.hx-row > div { flex: 1; min-width: 0; display: grid; }
.hx-row strong { font-size: 14px; } .hx-row small { font-size: 12px; color: var(--muted); }
.hx-row .status { font-size: 11.5px; white-space: nowrap; }
.hx-phone { position: absolute; right: 30px; top: 0; width: 290px; height: 570px; padding: 14px 14px 20px; border-radius: 44px; background: #f6f5ee; color: var(--ink); box-shadow: 0 60px 100px -30px #000c, inset 0 0 0 1px #fff, 0 0 0 8px #0f2a24, 0 0 0 9px #ffffff22; }
.hx-phone .phone-status { position: relative; }
.hx-chat { display: flex; flex-direction: column; gap: 10px; padding: 18px 8px 0; }
.hx-chat .chat-head { display: grid; justify-items: center; gap: 2px; padding-bottom: 6px; }
.hx-chat .chat-head small { font-size: 11.5px; color: var(--muted); }
.hx-time { text-align: center; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 6px 0 2px; }
.hx-bubble { margin: 0; max-width: 88%; padding: 11px 14px; border-radius: 18px 18px 18px 5px; background: #e1eadb; font-size: 14px; line-height: 1.42; }
.hx-action { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding: 13px 15px; border-radius: 12px; background: #3f6a4f; color: #f3f6e6; font-size: 14px; font-weight: 550; }
.hx-action .i { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; }
.hx-receipt { text-align: right; font-size: 11.5px; color: var(--ok); font-weight: 600; margin: 0 4px; }
.hx-typing { display: inline-flex; gap: 4px; width: 58px; padding: 12px 14px; border-radius: 18px 18px 18px 5px; background: #e1eadb; margin: 0; height: 0; opacity: 0; overflow: hidden; }
.hx-typing i { width: 7px; height: 7px; border-radius: 50%; background: #7f9a88; animation: hxDot 1s infinite ease-in-out; }
.hx-typing i:nth-child(2) { animation-delay: .15s; } .hx-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes hxDot { 0%,80%,100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }
.hx-chip { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 14px; background: #fffef9f2; color: var(--ink); box-shadow: 0 24px 50px -20px #000b, 0 0 0 1px #ffffff40; backdrop-filter: blur(8px); white-space: nowrap; }
.hx-chip > div { display: grid; } .hx-chip strong { font-size: 14px; } .hx-chip small { font-size: 12px; color: var(--muted); }
.hx-chip-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--wait-bg); color: var(--wait); font-size: 16px; font-weight: 700; }
.hx-chip-ico.ok { background: var(--ok-bg); color: var(--ok); } .hx-chip-ico.new { background: #e6edcd; color: var(--green); }
.hx-chip-ico .i { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.6; }
.hx-chip.c1 { left: 40px; top: 70px; }
.hx-chip.c2 { right: -10px; bottom: 40px; }
.hx-chip.c3 { left: 150px; top: 470px; }

/* load choreography (JS only, so no-JS shows the final state) */
.js .hx-typing { animation: hxTyping 1.2s 1s both; }
@keyframes hxTyping { 0% { opacity: 0; height: 0; padding-block: 0; } 15%,85% { opacity: 1; height: 31px; padding-block: 12px; } 100% { opacity: 0; height: 0; padding-block: 0; margin-top: -10px; } }
.js .hx-bubble, .js .hx-action, .js .hx-receipt { animation: hxIn .5s var(--ease-out) both; }
.js .hx-bubble.b1 { animation-delay: 2.2s; } .js .hx-bubble.b2 { animation-delay: 2.7s; } .js .hx-action { animation-delay: 3.2s; } .js .hx-receipt { animation-delay: 3.6s; }
@keyframes hxIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.js .hx-chip { animation: hxPop .6s cubic-bezier(.2,1.4,.4,1) both, hxFloat 6s 1s ease-in-out infinite alternate; }
.js .hx-chip.c3 { animation-delay: 1.4s, 2s; } .js .hx-chip.c1 { animation-delay: 4s, 4.6s; } .js .hx-chip.c2 { animation-delay: 4.6s, 5.2s; }
@keyframes hxPop { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes hxFloat { from { translate: 0 0; } to { translate: 0 -10px; } }
.js .hx-status { animation: hxIn .4s 3.7s both; }

/* proof row */
.hx-proof { max-width: 1240px; margin: 70px auto 0; padding: 30px var(--gutter, 32px) 34px; border-top: 1px solid #ffffff1c; }
.hx-proof-label { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 22px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--accent-dark); }
.hx-proof ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.hx-proof li { display: grid; gap: 10px; padding: 0 24px; border-left: 1px solid #ffffff1c; }
.hx-proof li:first-child { padding-left: 0; border-left: 0; }
.hx-proof .hp-num { font-family: var(--serif); font-size: clamp(54px, 5.4vw, 84px); line-height: .9; color: #f4f6e8; }
.hx-proof .hp-num small { font-size: .38em; font-style: italic; color: var(--lime-hi); margin-left: 6px; }
.hx-proof .hp-txt { font-size: 14px; line-height: 1.45; color: var(--on-green-2); max-width: 220px; }
.hx-note { margin-top: 26px; font-size: 11.5px; color: #9fb3a2; }

/* ---------- problem: call list ---------- */
.pb-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: 64px; align-items: center; }
.pb-list { list-style: none; margin: 34px 0 0; padding: 0; }
.pb-list li { display: flex; gap: 22px; padding: 22px 0; border-top: 1px solid var(--line); }
.pb-list h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px,2.4vw,32px); line-height: 1.1; margin: 0 0 6px; color: var(--ink); }
.pb-list p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.pb-list .problem-n { padding-top: 8px; }
.pb-visual { position: relative; padding: 30px 10px 60px; }
.calllog { position: relative; padding: 22px 22px 14px; border-radius: 16px; background: #fffef9; border: 1px solid var(--line); box-shadow: 0 40px 70px -40px #173e3566; transform: rotate(1.6deg);
  background-image: repeating-linear-gradient(180deg, transparent 0, transparent 43px, #e9ece2 43px, #e9ece2 44px); background-position: 0 62px; }
.cl-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; font-weight: 600; font-size: 15px; color: var(--ink); }
.cl-badge { padding: 4px 10px; border-radius: 999px; background: #f7e3d6; color: #8a4a26; font-size: 12px; font-weight: 600; }
.cl-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 44px; font-size: 14px; }
.cl-name { color: var(--ink); text-decoration: line-through; text-decoration-color: #c98b6b; text-decoration-thickness: 1.5px; }
.cl-row:nth-child(3) .cl-name, .cl-row:nth-child(5) .cl-name { text-decoration: none; }
.cl-tag { padding: 4px 9px; border-radius: 6px; background: var(--wait-bg); color: var(--wait); font-size: 12px; font-weight: 550; white-space: nowrap; }
.cl-tag.warn { background: #f7e3d6; color: #8a4a26; font-style: italic; }
.cl-row.faded { opacity: .55; } .cl-row.faded .cl-name { text-decoration: none; }
.cl-note { position: absolute; right: -6px; bottom: 6px; width: 200px; padding: 18px 18px 20px; background: #eef3c9; color: #3d4a2a; font-family: var(--serif); font-size: 22px; line-height: 1.1; box-shadow: 0 20px 30px -18px #3d4a2a88; transform: rotate(-5deg); border-radius: 2px 2px 14px 2px; }
.cl-note em { display: block; color: #8a4a26; }
.cl-note::before { content: ""; position: absolute; top: -10px; left: 50%; width: 70px; height: 20px; margin-left: -35px; background: #ffffff99; transform: rotate(3deg); box-shadow: 0 1px 2px #0001; }
.js-motion .pb-visual.reveal { transform: translateY(24px) rotate(-1deg); }
.js-motion .pb-visual.reveal.is-visible { transform: none; }

/* ---------- how it works: drawn rail ---------- */
.how-rail { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; margin: 52px 0 -18px; z-index: 2; }
.how-rail::before, .how-rail::after { content: ""; position: absolute; left: calc(12.5% - 10px); right: calc(12.5% - 10px); top: 19px; height: 2px; background: var(--line); }
.how-rail::after { background: linear-gradient(90deg, var(--green), var(--accent)); transform-origin: left; transform: scaleX(1); }
.js-motion .how-rail::after { transform: scaleX(0); transition: transform 1.6s cubic-bezier(.65,0,.35,1) .3s; }
.js-motion .how-rail.is-visible::after { transform: scaleX(1); }
.how-rail span { position: relative; z-index: 1; justify-self: center; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: var(--on-green); font-weight: 600; font-size: 15px; box-shadow: 0 0 0 6px var(--bg); }
.how-grid { margin-top: 0; }
.how-card { padding-top: 34px; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s; }
.how-card .how-n { display: none; }
.how-card h3 { margin-top: 6px; }
.how-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -36px #173e3566; border-color: #cfdcc6; }

/* ---------- richer green sections + card hovers ---------- */
.modules.on-green { position: relative; isolation: isolate; background: radial-gradient(ellipse 60% 70% at 90% 0%, #2c5b4a 0, transparent 60%), radial-gradient(ellipse 50% 60% at 0% 100%, #1d4a3c 0, transparent 60%), var(--green); }
.modules.on-green::after, .closer .cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .07; mix-blend-mode: overlay; pointer-events: none; border-radius: inherit; }
.module-card { transition: transform .35s var(--ease-out), background-color .35s, border-color .35s, box-shadow .35s; }
.module-card:hover { transform: translateY(-6px); background-color: #2a5545; border-color: #ffffff33; box-shadow: 0 30px 60px -30px #000a; }
.role-card:hover { border-color: #cfdcc6; }
.hx + .problem { padding-top: 130px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
 .hx-grid { grid-template-columns: minmax(0,1fr); gap: 20px; }
 .hx-copy { text-align: center; } .hx-eyebrow { margin-inline: auto; } .hx-lede { margin-inline: auto; }
 .hx-actions, .hx-facts { justify-content: center; }
 .hx-stage { width: 640px; max-width: 100%; margin: 40px auto 0; }
 .how-rail { display: none; } .how-card .how-n { display: grid; } .how-card { padding-top: 26px; }
 .pb-grid { grid-template-columns: minmax(0,1fr); gap: 30px; }
 .pb-visual { max-width: 560px; }
}
@media (max-width: 900px) { .hx-proof ul { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 28px; } .hx-proof li:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 640px) {
 .hx { padding-top: 120px; border-radius: 16px; }
 .hx h1 { font-size: clamp(46px, 13vw, 60px); }
 .hx-lede { font-size: 16.5px; }
 .hx-stage { height: 540px; transform: scale(.86); transform-origin: top center; margin: 20px auto -60px; width: 400px; max-width: none; left: 50%; margin-left: -200px; }
 .hx-inbox { width: 300px; top: 300px; left: 0; }
 .hx-phone { right: 10px; width: 250px; height: 500px; }
 .hx-chip.c1 { left: -6px; top: 40px; } .hx-chip.c2 { right: -6px; bottom: 120px; } .hx-chip.c3 { display: none; }
 .hx-proof { margin-top: 30px; padding: 26px 22px 28px; }
 .hx-proof-label { flex-direction: column; gap: 4px; }
 .hx-proof li { padding: 0 0 0 16px; } .hx-proof li:nth-child(odd) { padding-left: 0; border-left: 0; }
 .hx-proof .hp-num { font-size: 50px; }
 .cl-note { width: 160px; font-size: 18px; right: 0; bottom: -10px; }
 .calllog { transform: none; } .cl-row { font-size: 13px; }
 .hx + .problem { padding-top: 84px; }
}
@media (prefers-reduced-motion: reduce) {
 .hx-glow, .hx-dot, .hx-typing, .hx-typing i, .hx-bubble, .hx-action, .hx-receipt, .hx-chip, .hx-status { animation: none !important; }
 .hx-typing { display: none; }
 .hx-layer { transform: none !important; transition: none; }
 .how-card, .module-card, .hx-cta { transition: none; }
 .how-card:hover, .module-card:hover, .hx-cta:hover { transform: none; }
}

/* hero composition fixes: inbox in front of the phone, chips re-placed; simpler mobile scene */
.hx-layer[data-depth="0.35"] { z-index: 3; }
.hx-layer[data-depth="0.7"] { z-index: 2; }
.hx-layer[data-depth="0.9"], .hx-layer[data-depth="1.1"], .hx-layer[data-depth="1.3"] { z-index: 4; }
.hx-inbox { top: 330px; left: -10px; width: 370px; }
.hx-chip.c1 { left: 30px; top: 60px; }
.hx-chip.c3 { left: 60px; top: 236px; }
.hx-chip.c2 { right: -16px; bottom: 96px; }
@media (max-width: 1100px) { .hx-inbox { left: 30px; } }
@media (max-width: 640px) {
 .hx-stage { height: 560px; width: 100%; max-width: 360px; margin: 36px auto 0; left: auto; transform: none; }
 .hx-layer[data-depth="0.35"], .hx-chip.c3 { display: none; }
 .hx-phone { left: 50%; right: auto; margin-left: -128px; width: 256px; height: 520px; border-radius: 40px; }
 .hx-bubble { font-size: 13.5px; }
 .hx-chip { padding: 10px 14px 10px 10px; }
 .hx-chip.c1 { left: 0; top: 70px; }
 .hx-chip.c2 { right: 0; bottom: 70px; }
 .hx-eyebrow { font-size: 10.5px; letter-spacing: .1em; padding: 6px 12px; }
}
.hx-inbox { top: 318px; left: -44px; width: 330px; }
.hx-phone { right: 0; }
.hx-chip.c1 { left: 10px; top: 54px; }
.hx-chip.c3 { left: 40px; top: 228px; }
.hx-chip.c2 { right: -24px; bottom: 30px; }
@media (max-width: 1100px) { .hx-inbox { left: 0; } .hx-phone { right: 20px; } }
@media (max-width: 640px) { .hx-phone { right: auto; } .hx-chip.c2 { right: 0; bottom: -14px; } .hx-stage { margin-bottom: 20px; } }

/* ===== Hero phone v2 (2026-11-04): no mouse parallax; looping conversation ===== */
.hx-layer { transform: none !important; transition: none; }
.hx-chat { height: calc(100% - 22px); padding-top: 14px; gap: 0; }
.hx-chat .chat-head { padding-bottom: 10px; border-bottom: 1px solid #e6e4d8; }
.hx-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 0 2px 6px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36px); mask-image: linear-gradient(to bottom, transparent 0, #000 36px); }
.hx-thread .hx-msg { flex: none; margin: 10px 0 0; }
.hx-thread .hx-time { margin-top: 0; }
.hx-thread .hx-bubble { animation: none; }
.hx-done { display: inline-flex; align-self: center; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: 12px; font-weight: 600; }
.hx-done .i { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.6; }
.hx-thread .hx-typing { display: inline-flex; height: auto; opacity: 1; animation: none; }
.hx-action { position: relative; overflow: hidden; transition: transform .2s ease, background .2s ease; }
.hx-action.tap { transform: scale(.96); background: #335a42; }
.hx-action::after { content: ""; position: absolute; left: 70%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: #ffffff66; opacity: 0; transform: scale(0); }
.hx-action.tap::after { animation: hxTap .7s ease-out; }
@keyframes hxTap { 0% { opacity: .9; transform: scale(0); } 100% { opacity: 0; transform: scale(14); } }

/* with JS: messages are hidden until the loop shows them, and slide up like a real thread */
.js .hx-thread.live .hx-msg { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(12px) scale(.97); transform-origin: left bottom; padding-top: 0; padding-bottom: 0; overflow: hidden;
  transition: max-height .5s var(--ease-out), margin .5s var(--ease-out), padding .5s var(--ease-out), opacity .35s ease .12s, transform .5s var(--ease-out); }
.js .hx-thread.live .hx-msg.on { max-height: 180px; opacity: 1; margin-top: 10px; transform: none; }
.js .hx-thread.live .hx-bubble.on { padding: 11px 14px; }
.js .hx-thread.live .hx-action.on { padding: 13px 15px; overflow: hidden; }
.js .hx-thread.live .hx-done.on { padding: 6px 12px; }
.js .hx-thread.live .hx-typing.on { padding: 12px 14px; }
.js .hx-thread.live .hx-time.on { margin-top: 0; }
.js .hx-thread.live.reset .hx-msg { opacity: 0; transition: opacity .4s ease; }
html:not(.js) .hx-thread .hx-typing { display: none; }

/* inbox status swaps and the "intake complete" chip follow the loop */
.js .hx-status { animation: none; transition: background .3s ease, color .3s ease; }
.hx-status.is-swap { opacity: .2; }
.js .hx-chip.c1 { animation: none; opacity: 0; transform: translateY(10px) scale(.94); transition: opacity .45s ease, transform .5s cubic-bezier(.2,1.4,.4,1); }
.js .hx-chip.c1.on { opacity: 1; transform: none; }
.js .hx-chip.c2, .js .hx-chip.c3 { animation: hxPop .6s cubic-bezier(.2,1.4,.4,1) both; }
.js .hx-chip.c3 { animation-delay: .9s; } .js .hx-chip.c2 { animation-delay: 1.5s; }

/* keep the inbox clear of the chat: it sits low and left, overlapping only the phone's bottom corner */
.hx-inbox { top: 372px; left: -64px; width: 320px; }
.hx-chip.c2 { right: -28px; bottom: auto; top: 150px; }
@media (max-width: 1100px) { .hx-inbox { left: -10px; } }
@media (max-width: 640px) { .hx-chip.c2 { top: auto; bottom: -14px; right: 0; } }
@media (prefers-reduced-motion: reduce) { .hx-thread .hx-msg, .hx-chip.c1, .hx-action { transition: none !important; animation: none !important; } }
.hx-layer:has(> .hx-chip.c2) { display: none; }
@media (max-width: 640px) { .hx-chip.c1 { top: auto; bottom: -16px; left: 0; } .hx-stage { margin-bottom: 34px; } }

/* ===== Refinement pass (2026-11-04): calmer hero, editorial roles, tabbed features ===== */
/* hero: one focal point, the phone; inbox sits straight behind its lower-left corner */
.hx-stage { height: 640px; }
.hx-phone { width: 304px; height: 610px; right: 8px; }
.hx-inbox { transform: none; top: 360px; left: -8px; width: 300px; padding: 16px 16px 8px; box-shadow: 0 30px 60px -28px #000c, 0 0 0 1px #ffffff14; }
.hx-inbox .hx-row { padding: 9px 8px; }
.hx-chip.c1 { left: 24px; top: 150px; }
.hx-facts { display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 28px; }
@media (max-width: 1100px) { .hx-inbox { left: 0; } }
@media (max-width: 900px) { .hx-facts { justify-content: center; } }
@media (max-width: 640px) { .hx-stage { height: 560px; } .hx-phone { width: 256px; height: 520px; right: auto; } .hx-facts { grid-template-columns: max-content; justify-content: center; } }

/* who it helps: editorial split instead of a fourth row of cards */
.roles { padding-bottom: 130px; }
.rl-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 80px; align-items: start; }
.rl-head { position: sticky; top: 120px; }
.rl-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rl-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 24px; padding: 34px 0; border-bottom: 1px solid var(--line); }
.rl-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--panel); color: var(--green); transition: background .3s ease, color .3s ease, transform .4s var(--ease-out); }
.rl-ico svg { width: 26px; height: 26px; }
.rl-item:hover .rl-ico { background: var(--green); color: var(--lime-hi); transform: rotate(-4deg); }
.rl-item h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.05; margin: 10px 0 12px; color: var(--ink); }
.rl-item p:not(.eyebrow) { font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 520px; }
.rl-item .arrow-link { margin-top: 16px; }
@media (max-width: 900px) { .rl-grid { grid-template-columns: 1fr; gap: 36px; } .rl-head { position: static; } }
@media (max-width: 540px) { .rl-item { grid-template-columns: 1fr; gap: 14px; padding: 28px 0; } .rl-ico { width: 48px; height: 48px; } }

/* everything included: one product panel with tabs */
.fx { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 24px; margin-top: 56px; }
.fx-tabs { display: grid; gap: 8px; align-content: start; }
.fx-tab { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 18px 18px 18px 16px; border-radius: 14px; border: 1px solid transparent; color: var(--on-green-2); position: relative; transition: background .3s ease, border-color .3s ease, color .3s ease; }
.fx-tab:hover { background: #ffffff0a; color: var(--on-green); }
.fx-tab:focus-visible { outline: 2px solid var(--lime-hi); outline-offset: 2px; }
.fx-tab[aria-selected="true"] { background: #ffffff12; border-color: #ffffff24; color: var(--on-green); }
.fx-tab[aria-selected="true"]::before { content: ""; position: absolute; left: -1px; top: 16px; bottom: 16px; width: 3px; border-radius: 3px; background: var(--lime-hi); }
.fx-n { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.1; color: #a9c39a; }
.fx-tab[aria-selected="true"] .fx-n { color: var(--lime-hi); }
.fx-tab strong { display: block; font-size: 17px; font-weight: 600; line-height: 1.3; }
.fx-tab small { display: block; margin-top: 3px; font-size: 13.5px; color: #b9cbb4; }
.fx-panels { position: relative; }
.fx-panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px; align-items: center; padding: 40px; border-radius: 22px; background: linear-gradient(150deg, #ffffff10, #ffffff05); border: 1px solid #ffffff1f; min-height: 470px; }
.js .fx-panel { display: none; }
.js .fx-panel.is-active { display: grid; animation: fxIn .55s var(--ease-out) both; }
@keyframes fxIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html:not(.js) .fx-tabs { display: none; }
html:not(.js) .fx { grid-template-columns: 1fr; }
html:not(.js) .fx-panels { display: grid; gap: 16px; }
.fx-kicker { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--lime-hi); }
.fx-copy h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.2vw, 48px); line-height: 1.02; margin: 12px 0 0; color: #f4f6e8; }
.fx-copy h3 em { color: var(--lime-hi); }
.fx-copy .module-list { margin: 26px 0 8px; }
.fx-copy .module-list li { font-size: 15px; }
.fx-copy .module-link { padding-top: 18px; color: var(--on-green); }
.fx-copy .module-link:hover .i { transform: translateX(3px); }
.fx-shot { position: relative; display: grid; place-items: center; min-height: 390px; padding: 28px; border-radius: 16px; background: radial-gradient(120% 90% at 80% 10%, #d9ec9f2e, transparent 60%), linear-gradient(160deg, #2d5e4c, #1b4639); overflow: hidden; }
.fx-note { margin-top: 14px; font-size: 11.5px; color: #9fb3a2; text-align: right; }

/* sample screens inside the panel */
.fs-card { width: 100%; max-width: 400px; padding: 20px; border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 34px 70px -30px #000c, 0 0 0 1px #ffffff20; }
.fs-top { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.fs-top > div { flex: 1; min-width: 0; display: grid; }
.fs-top strong { font-size: 15px; } .fs-top small { font-size: 12px; color: var(--muted); }
.fs-top .status { font-size: 11.5px; }
.fs-docs { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0; }
.fs-docs span { padding: 6px 10px; border-radius: 8px; background: var(--panel); font-size: 12px; font-weight: 550; color: var(--green); }
.fs-time { list-style: none; margin: 0; padding: 4px 0 0; display: grid; gap: 0; }
.fs-time li { position: relative; display: flex; justify-content: space-between; padding: 9px 0 9px 26px; font-size: 13.5px; }
.fs-time li::before { content: ""; position: absolute; left: 4px; top: 13px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #b9c8b4; background: var(--surface); }
.fs-time li::after { content: ""; position: absolute; left: 9px; top: 26px; bottom: -8px; width: 2px; background: var(--line); }
.fs-time li:last-child::after { display: none; }
.fs-time li.done::before { background: var(--ok); border-color: var(--ok); }
.fs-time li:not(.done) b { color: var(--green); }
.fs-time b { font-weight: 550; } .fs-time small { color: var(--muted); font-size: 12px; }
.fs-bar { height: 8px; margin: 16px 0 6px; border-radius: 8px; background: var(--panel); overflow: hidden; }
.fs-bar i { display: block; height: 100%; width: 75%; border-radius: inherit; background: linear-gradient(90deg, #5d8c68, var(--ok)); }
.js .fx-panel.is-active .fs-bar i { animation: fsGrow 1s .2s var(--ease-out) both; }
@keyframes fsGrow { from { width: 0; } }
.fs-checks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.fs-checks li { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13.5px; color: var(--ink-2); }
.fs-checks li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #c8d4c2; }
.fs-checks li.done { color: var(--ink); }
.fs-checks li.done::before { border-color: var(--ok); background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat; }
.fs-sign { margin-top: 12px; padding: 12px 14px 6px; border-radius: 12px; border: 1.5px dashed #c8d4c2; color: var(--green); }
.fs-sign small { display: block; font-size: 11.5px; color: var(--muted); }
.fs-sign svg { width: 180px; height: 40px; }
.js .fx-panel.is-active .fs-sign path { stroke-dasharray: 320; animation: fsDraw 1.6s .5s ease-out both; }
@keyframes fsDraw { from { stroke-dashoffset: 320; } to { stroke-dashoffset: 0; } }
.fs-pdf { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: center; width: 100%; max-width: 460px; }
.fs-page { position: relative; display: grid; gap: 7px; padding: 16px 14px 34px; border-radius: 6px; background: #fbfaf4; box-shadow: 0 24px 50px -24px #000c; transform: rotate(-4deg); }
.fs-page b { font-size: 9px; letter-spacing: .14em; color: #8a9a8e; }
.fs-page i { height: 5px; border-radius: 3px; background: #dde3d6; }
.fs-page i.s { width: 60%; }
.fs-page span { position: absolute; left: 10px; right: 10px; bottom: 9px; font-size: 9.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-fields dl { margin: 6px 0 0; display: grid; }
.fs-fields dl div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #eef1ea; font-size: 13px; }
.fs-fields dt { color: var(--muted); } .fs-fields dd { margin: 0; font-weight: 600; }
.fs-fields dd { position: relative; }
.js .fx-panel.is-active .fs-fields dd { animation: fsFill .5s var(--ease-out) both; }
.js .fx-panel.is-active .fs-fields div:nth-child(2) dd { animation-delay: .15s; } .js .fx-panel.is-active .fs-fields div:nth-child(3) dd { animation-delay: .3s; } .js .fx-panel.is-active .fs-fields div:nth-child(4) dd { animation-delay: .45s; }
@keyframes fsFill { from { opacity: 0; transform: translateX(8px); background: #e6edcd; } }
.fs-btn { display: block; margin-top: 14px; padding: 11px 14px; border-radius: 10px; background: var(--green); color: #f3f6e6; font-size: 13.5px; font-weight: 550; text-align: center; }
.fs-bars { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.fs-bars li { display: grid; grid-template-columns: 118px minmax(0, 1fr) 24px; gap: 12px; align-items: center; padding: 7px 0; font-size: 13px; }
.fs-bars i { height: 10px; width: var(--w); border-radius: 6px; background: linear-gradient(90deg, #5d8c68, var(--green)); }
.js .fx-panel.is-active .fs-bars i { animation: fsGrow .9s var(--ease-out) both; }
.js .fx-panel.is-active .fs-bars li:nth-child(2) i { animation-delay: .1s; } .js .fx-panel.is-active .fs-bars li:nth-child(3) i { animation-delay: .2s; } .js .fx-panel.is-active .fs-bars li:nth-child(4) i { animation-delay: .3s; }
.fs-bars li:last-child i { background: #d9a15c; }
.fs-bars b { font-weight: 600; text-align: right; }
.fs-nudge { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--wait-bg); }
.fs-nudge > div { flex: 1; display: grid; } .fs-nudge strong { font-size: 13.5px; } .fs-nudge small { font-size: 12px; color: var(--muted); }
.fs-nudge .status { background: #fff8; }

@media (max-width: 1100px) { .fx { grid-template-columns: 1fr; } .fx-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fx-tab { grid-template-columns: 1fr; gap: 6px; } .fx-tab[aria-selected="true"]::before { left: 16px; right: 16px; top: auto; bottom: -1px; width: auto; height: 3px; } }
@media (max-width: 900px) { .fx-panel { grid-template-columns: 1fr; padding: 28px; min-height: 0; } .fx-shot { min-height: 0; } }
@media (max-width: 640px) {
 .fx-tabs { display: flex; overflow-x: auto; gap: 8px; margin: 0 -22px; padding: 0 22px 4px; scrollbar-width: none; }
 .fx-tabs::-webkit-scrollbar { display: none; }
 .fx-tab { flex: none; padding: 12px 14px; } .fx-tab small, .fx-n { display: none; }
 .fx-panel { padding: 22px 18px; gap: 24px; } .fx-shot { padding: 18px 14px; }
 .fs-pdf { grid-template-columns: 1fr; } .fs-page { display: none; }
 .fs-bars li { grid-template-columns: 96px minmax(0, 1fr) 20px; }
}
@media (prefers-reduced-motion: reduce) { .fx-panel, .fs-bar i, .fs-bars i, .fs-sign path, .fs-fields dd { animation: none !important; } .rl-ico { transition: none; } .rl-item:hover .rl-ico { transform: none; } }
/* refinement fixes */
.hx-phone { right: -14px; }
.hx-inbox { left: -34px; width: 262px; top: 372px; }
.hx-inbox .cc-top > span:last-child { display: none; }
.hx-inbox .hx-row { gap: 10px; padding: 8px 6px; }
.hx-inbox .hx-row .status { font-size: 11px; padding: 3px 7px; }
.hx-chip.c1 { left: 0; top: 168px; }
@media (max-width: 1100px) { .hx-inbox { left: 0; } .hx-phone { right: 0; } }
@media (max-width: 640px) { .hx-phone { right: auto; } }
.fx-panel { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); padding: 34px; gap: 32px; }
.fx-copy h3 { font-size: clamp(30px, 2.6vw, 40px); text-wrap: balance; }
.fx-shot { padding: 26px 24px; }
.fs-pdf { display: block; position: relative; max-width: 420px; padding-left: 64px; }
.fs-page { position: absolute; left: 0; top: 54px; width: 118px; z-index: 0; }
.fs-fields { position: relative; z-index: 1; }
@media (max-width: 640px) { .fs-pdf { padding-left: 0; } .fs-bars li { grid-template-columns: 108px minmax(0, 1fr) 20px; font-size: 12.5px; } }
.hx-inbox .avatar { display: none; }
.hx-inbox .hx-row { padding: 9px 10px; }
@media (max-width: 640px) { .hx-facts { grid-template-columns: repeat(2, max-content); gap: 10px 18px; font-size: 13.5px; } }
@media (max-width: 900px) { .fx-panel { grid-template-columns: 1fr; padding: 28px; } }
@media (max-width: 640px) { .fx-panel { padding: 22px 18px; gap: 24px; } .fx-shot { padding: 18px 14px; } }
@media (max-width: 640px) { .fs-top:has(.avatar) .status { display: none; } }

/* founder line under the call list (2026-11-04) */
.pt-statement { margin-top: 72px; padding: 56px 64px; border-radius: 22px; background: radial-gradient(90% 120% at 100% 0, #d9ec9f55, transparent 60%), var(--panel); color: var(--ink); }
.pt-kicker { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--accent, #3f6a4f); }
.pt-line { margin: 14px 0 0; max-width: 900px; font-family: var(--serif); font-size: clamp(36px, 4.2vw, 62px); line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; color: var(--ink); }
.pt-line em { color: #4f7a62; }
.pt-sub { margin-top: 22px; max-width: 640px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 640px) { .pt-statement { margin-top: 48px; padding: 30px 22px; } .pt-sub { font-size: 15.5px; } }

/* quotes from the live practice (2026-11-04) */
.pt-statement { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; align-items: end; }
.pt-quote { margin: 0; padding: 28px 28px 24px; border-radius: 18px; background: var(--surface); box-shadow: 0 24px 50px -30px #173e3540; position: relative; }
.pt-quote::before { content: "“"; position: absolute; top: -26px; left: 22px; font-family: var(--serif); font-size: 96px; line-height: 1; color: #9dbb8a; }
.pt-quote blockquote { margin: 0; font-family: var(--serif); font-size: 22px; line-height: 1.3; color: var(--ink); }
.pt-quote figcaption { margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--muted); }
.voices { padding-top: 130px; }
.vc-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px; margin-top: 44px; }
.vc-card { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 40px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.vc-card blockquote { margin: 0; font-family: var(--serif); font-size: clamp(21px, 1.8vw, 26px); line-height: 1.32; color: var(--ink); }
.vc-lead { background: var(--green); border-color: transparent; color: var(--on-green); position: relative; overflow: hidden; }
.vc-lead::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .07; mix-blend-mode: overlay; pointer-events: none; }
.vc-lead blockquote { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.16; color: #f4f6e8; }
.vc-card figcaption { display: grid; gap: 2px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; }
.vc-card figcaption strong { font-weight: 600; color: var(--ink); } .vc-card figcaption span { color: var(--muted); }
.vc-lead figcaption { border-color: #ffffff24; } .vc-lead figcaption strong { color: var(--on-green); } .vc-lead figcaption span { color: var(--on-green-2); }
@media (max-width: 900px) { .pt-statement { grid-template-columns: 1fr; gap: 36px; } .vc-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .vc-card { padding: 28px 22px; } .voices { padding-top: 96px; } .pt-quote blockquote { font-size: 19px; } }
.vc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.vc-lead blockquote { font-size: clamp(32px, 3.2vw, 46px); line-height: 1.08; }
.vc-card blockquote { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.22; }
.pt-quote blockquote { font-size: 26px; line-height: 1.2; }
.vc-card.vc-lead blockquote { font-size: clamp(34px, 3.4vw, 50px); line-height: 1.06; }

/* Real app screenshots in the features tabs (2026-11-06) */
.fx-real img { display: block; max-width: 100%; height: auto; border-radius: 14px; box-shadow: 0 24px 60px -24px #0009, 0 0 0 1px #ffffff26; background: #f6f5f0; }
#fx-p1 .fx-real img { max-height: 420px; width: auto; }
.fx-phone { width: 230px; aspect-ratio: 9 / 17.5; border-radius: 34px; padding: 8px; background: #0f2a22; box-shadow: 0 30px 70px -28px #000a, 0 0 0 1px #ffffff2e; }
.fx-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 26px; box-shadow: none; }
.js .fx-panel.is-active .fx-real > * { animation: fxIn .6s .1s var(--ease-out) both; }
@media (max-width: 640px) { #fx-p1 .fx-real img, #fx-p4 .fx-real img { max-height: none; width: 100%; } .fx-phone { width: 200px; } }
@media (prefers-reduced-motion: reduce) { .js .fx-panel.is-active .fx-real > * { animation: none; } }
#fx-p4 .fx-real img { max-height: 420px; width: auto; }
@media (max-width: 640px) { #fx-p4 .fx-real img { max-height: none; width: 100%; } }

/* Real app screenshots in feature-page heroes (2026-11-06) */
.p-shot img { display: block; max-width: 100%; height: auto; border-radius: 16px; background: #f6f5f0; box-shadow: 0 30px 70px -28px #000a, 0 0 0 1px #ffffff26; }
.p-shot .fx-phone { width: 250px; }
.p-shot .fx-phone img { border-radius: 26px; box-shadow: none; height: 100%; }
@media (max-width: 640px) { .p-shot .fx-phone { width: 210px; } }
.f-shot { display: flex; justify-content: center; }
.f-shot img { display: block; max-width: 100%; height: auto; border-radius: 16px; background: #f6f5f0; box-shadow: 0 24px 60px -30px #1b463966, 0 0 0 1px #1b46391f; }

/* Layered product shot: real app screen + floating real fragments (2026-11-06) */
.p-stack { position: relative; display: block; width: 100%; max-width: 560px; margin-inline: auto; padding: 46px 0 96px 28px; }
.p-stack::before { content: ""; position: absolute; inset: 6% -8% 2% -6%; background: radial-gradient(60% 55% at 60% 40%, #d9ec9f40, transparent 70%), radial-gradient(45% 45% at 15% 85%, #8fd3b42e, transparent 70%); filter: blur(10px); z-index: 0; pointer-events: none; }
.p-stack img { display: block; height: auto; max-width: 100%; }
.ps-base { position: relative; z-index: 1; border-radius: 18px; overflow: hidden; background: #f6f5f0; box-shadow: 0 40px 80px -36px #000c, 0 0 0 1px #ffffff2b; }
.ps-base img { width: 100%; }
.ps-float { position: absolute; z-index: 2; border-radius: 16px; box-shadow: 0 28px 60px -22px #000d, 0 0 0 1px #ffffff40; }
.ps-a { top: 0; right: -30px; width: 62%; border-radius: 14px; }
.ps-b { bottom: 0; left: -10px; width: 56%; background: #fff; }
.js .p-stack .ps-base { animation: psIn .8s .35s var(--ease-out) both; }
.js .p-stack .ps-a { animation: psIn .8s .75s var(--ease-out) both; }
.js .p-stack .ps-b { animation: psIn .8s 1.05s var(--ease-out) both; }
@keyframes psIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .p-stack { max-width: 520px; } .ps-a { right: -8px; } }
@media (max-width: 640px) { .p-stack { padding: 34px 0 70px 10px; } .ps-a { width: 70%; right: -4px; } .ps-b { width: 64%; left: -4px; } }
@media (prefers-reduced-motion: reduce) { .js .p-stack .ps-base, .js .p-stack .ps-a, .js .p-stack .ps-b { animation: none; } }
.ps-a { box-shadow: 0 28px 60px -22px #000d, 0 0 0 1.5px #d9ec9fa6, 0 0 36px -6px #d9ec9f55; }
.p-stack { max-width: 520px; }
.ps-a { right: -56px; width: 70%; }
.ps-b { left: -48px; width: 60%; }
@media (max-width: 640px) { .ps-a { right: -6px; width: 76%; } .ps-b { left: -6px; width: 66%; } }

/* Feature-page motion, matched to the homepage (2026-11-06): text cascades in,
   the visual follows a beat later, rows inside sample cards stagger. */
.js-motion .feature-copy.reveal > * { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.js-motion .feature-copy.reveal.is-visible > * { opacity: 1; transform: none; }
.js-motion .feature-copy.reveal.is-visible > :nth-child(2) { transition-delay: .08s; }
.js-motion .feature-copy.reveal.is-visible > :nth-child(3) { transition-delay: .16s; }
.js-motion .feature-copy.reveal.is-visible > :nth-child(n+4) { transition-delay: .24s; }
.js-motion .feature-visual.reveal { transform: translateY(28px) scale(.97); transition-duration: .8s; transition-delay: .12s; }
.js-motion .feature-visual.reveal.is-visible { transform: none; }
.js-motion .feature-visual.reveal :is(.cc-row, .quiet-row, .outcome-row, .mc-dl > div, .form-list li, .attach, .review-note, .msg, .bubble) { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.js-motion .feature-visual.reveal.is-visible :is(.cc-row, .quiet-row, .outcome-row, .mc-dl > div, .form-list li, .attach, .review-note, .msg, .bubble) { opacity: 1; transform: none; }
.js-motion .feature-visual.reveal.is-visible :is(.cc-row, .quiet-row, .outcome-row, .mc-dl > div, .form-list li, .msg, .bubble):nth-child(1) { transition-delay: .35s; }
.js-motion .feature-visual.reveal.is-visible :is(.cc-row, .quiet-row, .outcome-row, .mc-dl > div, .form-list li, .msg, .bubble):nth-child(2) { transition-delay: .45s; }
.js-motion .feature-visual.reveal.is-visible :is(.cc-row, .quiet-row, .outcome-row, .mc-dl > div, .form-list li, .msg, .bubble):nth-child(3) { transition-delay: .55s; }
.js-motion .feature-visual.reveal.is-visible :is(.cc-row, .quiet-row, .outcome-row, .mc-dl > div, .form-list li, .msg, .bubble):nth-child(4) { transition-delay: .65s; }
.js-motion .feature-visual.reveal.is-visible :is(.cc-row, .quiet-row, .outcome-row, .mc-dl > div, .form-list li, .msg, .bubble):nth-child(n+5) { transition-delay: .75s; }
.js-motion .feature-visual.reveal.is-visible :is(.attach, .review-note) { transition-delay: .8s; }
.js-motion .f-shot.reveal img { transition: transform 1s var(--ease-out) .2s; transform: scale(.98); }
.js-motion .f-shot.reveal.is-visible img { transform: none; }
.js-motion details.reveal { transform: translateY(14px); }
@media (prefers-reduced-motion: reduce) {
  .js-motion .feature-copy.reveal > *, .js-motion .feature-visual.reveal, .js-motion .feature-visual.reveal *, .js-motion .f-shot.reveal img { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- "coming soon" teasers (homepage features, pricing) 2026-11-09 ---------- */
.soon-tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 99px; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; background: var(--lime); color: var(--green); }
.soon-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: soonPulse 2.4s ease-in-out infinite; }
@keyframes soonPulse { 50% { opacity: .35; } }
.soon-ico { flex: none; width: 44px; height: 44px; padding: 10px; border-radius: 13px; background: #d9ec9f22; color: var(--lime); }
.soon-go { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.soon-go .i { width: 16px; height: 16px; transition: transform var(--t-ui); }
.soon-strip:hover .soon-go .i, .soon-tile:hover .soon-go .i { transform: translateX(3px); }
.soon-strip { display: flex; align-items: center; gap: 18px; margin-top: 34px; padding: 18px 24px 18px 18px; border-radius: 18px; border: 1px dashed #d9ec9f66; background: #ffffff08; color: #f3f6e6; text-decoration: none; transition: background var(--t-ui), border-color var(--t-ui); }
.soon-strip:hover { background: #ffffff10; border-color: #d9ec9faa; }
.soon-text { display: grid; gap: 2px; min-width: 0; }
.soon-text strong { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.15; }
.soon-text span { font-size: 14px; color: var(--on-green-2); }
.soon-strip .soon-go { color: var(--lime); }
.soon-tile { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; padding: 24px 28px 24px 22px; border-radius: 20px; border: 1px dashed #b9c9b2; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color var(--t-ui), box-shadow .3s var(--ease-out); }
.soon-tile:hover { border-color: #8fa88b; box-shadow: 0 22px 50px -30px #3e523a55; }
.soon-tile .soon-ico { background: var(--lime); color: var(--green); }
.soon-tile h3 { margin: 10px 0 4px; }
.soon-tile p { margin: 0; }
.soon-tile .soon-tag { background: var(--green); color: var(--lime); }
.soon-tile .soon-go { color: var(--green); }
@media (max-width: 760px) {
  .soon-strip, .soon-tile { flex-wrap: wrap; align-items: flex-start; }
  .soon-strip .soon-tag { order: -1; }
  .soon-text { flex: 1 1 200px; }
  .soon-go { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .soon-tag::before { animation: none; } }
.nw { white-space: nowrap; }
@media (max-width: 760px) { .soon-strip .soon-ico { display: none; } }
.proof-story { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.proof-story:hover { text-decoration-thickness: 2px; }