:root {
  --bg: #080a08;
  --panel: #10120f;
  --text: #f3f4ee;
  --muted: #a7afa0;
  --line: #30372a;
  --accent: #bafa65;
  --font: 'DM Sans', Arial, Helvetica, sans-serif;
  color-scheme: dark;
}

/* The default layout is the phone layout. Columns are added on wider screens. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.65 var(--font); -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; }
button, a, input, textarea, summary { -webkit-tap-highlight-color: transparent; }
button, a, summary { touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .6; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
::selection { background: var(--accent); color: var(--bg); }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 500; text-wrap: pretty; }
h2 { font-size: clamp(32px, 8.5vw, 40px); line-height: 1.15; letter-spacing: -.045em; }
svg { display: block; }
.wrap { width: min(100% - 40px, 560px); margin-inline: auto; }
.section { margin-top: 112px; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.desktop-break { display: none; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .075em; line-height: 1.6; }
.status-dot { display: inline-block; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; margin-right: 7px; box-shadow: 0 0 12px #bafa6525; }
.small-label { display: block; font-size: 12px; line-height: 1.5; font-weight: 600; letter-spacing: .055em; }
.skip-link { position: fixed; left: 20px; top: -100px; z-index: 100; padding: 12px; background: var(--accent); color: var(--bg); }
.skip-link:focus { top: 20px; }

.brand { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; flex-shrink: 0; }
.brand svg { height: 30px; width: 27px; fill: none; stroke: var(--accent); stroke-width: 1.5; }
.brand > span { font-size: 11px; line-height: 1.25; letter-spacing: .06em; font-weight: 650; }
.hero { text-align: center; padding-top: 48px; }
.hero h1 { font-size: clamp(35px, 9.5vw, 54px); line-height: 1.12; letter-spacing: -.05em; margin: 22px auto; }
.highlight { color: var(--accent); white-space: nowrap; }
.hero-copy { color: var(--muted); font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.hero-copy strong { color: #e0e6d9; font-weight: 500; }
.discover { display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; min-height: 48px; font-size: 15px; line-height: 1.5; max-width: 100%; }
.mechanism { margin-top: 100px; }
.section-heading { margin-bottom: 26px; }
.section-heading > p { font-size: 16px; color: var(--muted); line-height: 1.6; margin-top: 16px; }

.funnel-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.funnel-panel { min-width: 0; background: var(--panel); border: 1px solid #39422f; border-radius: 12px; padding: 22px 20px 0; }
.second-layer { background: linear-gradient(150deg, #171e11, #10160d); border-color: #607d3e; }
.panel-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.panel-heading > .eyebrow { font-size: 12px; letter-spacing: .035em; color: #bac3b0; }
.second-layer .panel-heading > .eyebrow { color: var(--accent); }
.pill { display: inline-block; width: fit-content; border: 1px solid #49533e; border-radius: 30px; background: #1d2219; color: #d1d8c8; font-size: 12px; line-height: 1.25; font-weight: 400; letter-spacing: 0; padding: 5px 10px; white-space: nowrap; }
.pill.green { background: #bafa6510; color: var(--accent); border-color: #bafa6544; }
.funnel-panel h3 { font-size: clamp(27px, 7.5vw, 34px); line-height: 1.2; letter-spacing: -.04em; margin-top: 20px; }
.funnel-panel > p:not(.diagram-caption) { font-size: 16px; line-height: 1.6; color: var(--muted); margin-top: 12px; }
.diagram { position: relative; margin: 18px -8px 0; }
.funnel-art { display: block; width: 100%; height: auto; }
.sale-label { position: absolute; top: 81.875%; left: 50%; transform: translate(-50%, -50%); font-size: 13px; line-height: 1.2; font-weight: 500; padding: 9px 14px; white-space: nowrap; border: 1px solid #525e46; border-radius: 40px; background: #181e13; color: #e1e8d8; }
.second-layer .sale-label { top: 54.625%; background: var(--accent); color: #162008; border-color: var(--accent); font-weight: 650; }
.diagram-caption { color: #b8c1ae; font-size: 15px; line-height: 1.5; text-align: center; margin: 12px 0 20px; text-wrap: pretty; }
.second-layer .diagram-caption { color: var(--accent); }
.panel-footer { display: flex; align-items: flex-start; gap: 12px; padding: 20px 0 23px; border-top: 1px solid var(--line); }
.panel-footer p { font-size: 16px; line-height: 1.6; color: #c1c9b8; }
.panel-footer p br { display: none; }
.circle-symbol { font-size: 25px; line-height: 1.3; color: #b2bea5; flex-shrink: 0; }
.second-layer .circle-symbol { color: var(--accent); }
.diagram-note { font-size: 13px; color: var(--muted); margin-top: 18px; line-height: 1.6; }
.center-cta { text-align: center; margin-top: 25px; }
.button { width: 100%; background: var(--accent); border: 1px solid var(--accent); border-radius: 9px; color: #111809; padding: 18px; min-height: 58px; font-size: 16px; line-height: 1.4; font-weight: 650; display: inline-flex; align-items: center; justify-content: center; gap: 18px; text-align: center; transition: background .2s, transform .2s; }
.button:hover { background: #ceff8e; }
.button:active { transform: translateY(1px); }

.implementation { border-top: 1px solid var(--line); padding-top: 38px; }
.implementation-intro > .eyebrow, .expert-copy > .eyebrow, .faq-section > div > .eyebrow { color: #b5c2a8; }
.implementation-intro h2 { margin-top: 0; }
.implementation-intro > p { font-size: 17px; line-height: 1.65; color: var(--muted); margin-top: 20px; }
.mini-mark { display: none; }
.timeline { margin: 36px 0 0; padding: 0 0 0 6px; list-style: none; }
.timeline li { position: relative; padding: 0 0 40px 24px; border-left: 1px solid #536143; }
.timeline li:last-child { padding-bottom: 0; border-color: transparent; }
.timeline li:before { content: ''; position: absolute; left: -6px; top: 4px; width: 11px; height: 11px; background: var(--bg); border: 1px solid #92a57b; border-radius: 50%; }
.timeline li:last-child:before { background: var(--accent); border-color: var(--accent); }
.step-number { display: block; font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 12px; }
.timeline h3 { font-size: 26px; letter-spacing: -.035em; line-height: 1.25; }
.timeline h3 .pill { display: table; margin-top: 12px; }
.timeline p { font-size: 17px; line-height: 1.65; color: var(--muted); margin-top: 15px; }

.expert-section { display: flex; flex-direction: column; gap: 32px; padding-top: 38px; border-top: 1px solid var(--line); }
.photo-composition { position: relative; width: 100%; padding: 0 38px 58px 0; }
.photo-slot { position: relative; overflow: hidden; border: 1px solid #566346; background: #171d12; }
.photo-slot > svg, .photo-slot > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-main { aspect-ratio: 5 / 5.7; border-radius: 8px; }
.photo-slot > span { position: absolute; bottom: 18px; left: 18px; right: 15px; font-size: 11px; line-height: 1.4; letter-spacing: .055em; color: #d3e1c4; }
.photo-detail { position: absolute; bottom: 40px; right: 4px; width: 46%; aspect-ratio: 4 / 3; border: 6px solid var(--bg); border-radius: 10px; transform: rotate(5deg); }
.photo-detail > span { bottom: 10px; left: 10px; font-size: 11px; }
.photo-caption { position: absolute; bottom: 0; left: 0; right: 0; font-size: 11px; letter-spacing: .03em; color: var(--muted); }
.expert-copy { width: 100%; min-width: 0; }
.expert-copy h2 { margin-top: 0; }
.expert-copy .expert-name { color: var(--text); font-size: 26px; margin-top: 24px; letter-spacing: -.035em; }
.expert-copy > p { color: var(--muted); font-size: 17px; line-height: 1.65; margin-top: 17px; }
.expert-handle { display: inline-block; color: #c0d0ae; font-size: 14px; margin-top: 23px; border-bottom: 1px solid #536344; padding-bottom: 8px; }
.closing { text-align: center; padding: 44px 0; border-block: 1px solid var(--line); background: radial-gradient(ellipse at 50% 85%, #bafa6506, transparent 65%); }
.closing h2 { font-size: clamp(33px, 9vw, 48px); margin-top: 24px; line-height: 1.15; }
.closing > p { font-size: 17px; color: var(--muted); line-height: 1.65; margin-top: 24px; }
.closing .button { margin-top: 28px; }
.faq-section { margin-top: 112px; }
.faq-section h2 { margin-top: 0; }
.faq-list { margin-top: 28px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 22px 0; min-height: 60px; font-size: 18px; letter-spacing: -.015em; cursor: pointer; line-height: 1.45; }
.faq-list details:first-child summary { padding-top: 0; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary > span { font-size: 27px; font-weight: 400; color: var(--muted); flex-shrink: 0; transition: transform .2s; }
.faq-list details[open] summary > span { transform: rotate(45deg); color: var(--accent); }
.faq-list details > p { font-size: 16px; line-height: 1.7; color: var(--muted); padding: 0 0 23px; }
.footer { border-top: 1px solid var(--line); margin-top: 62px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-block: 28px; }
.footer > p { font-size: 13px; color: var(--muted); line-height: 1.6; }
.footer > a:last-child { font-size: 13px; line-height: 1.6; color: #b7c4aa; min-height: 44px; display: flex; align-items: center; gap: 14px; }
.footer > a:last-child span { color: var(--accent); }

/* Bottom sheet: readable type and touch targets, with its own scrolling area. */
.form-backdrop { position: fixed; inset: 0; background: #0009; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: 40; animation: backdrop-in .25s both; }
.qualification-dialog { position: fixed; right: 0; left: 0; bottom: 0; z-index: 41; width: 100%; max-height: 92svh; max-height: 92dvh; overflow: auto; overscroll-behavior: contain; background: #12160f; border: 1px solid #4c5d3c; border-bottom: 0; border-radius: 22px 22px 0 0; padding: 12px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 24px 100px #0009; animation: drawer-in .32s cubic-bezier(.2,.8,.2,1) both; }
.drawer-handle { width: 36px; height: 4px; border-radius: 8px; background: #667d50; margin: 0 auto 10px; }
.form-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.form-header > .eyebrow { font-size: 11px; color: #c6d6b3; }
.icon-button { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; background: #22291b; color: #d6e1ca; border: 1px solid #4d5f3b; border-radius: 50%; font-size: 27px; line-height: 1; }
.progress-track { height: 4px; background: #39452e; border-radius: 9px; margin-bottom: 22px; overflow: hidden; }
.progress-track > span { display: block; height: 100%; width: 20%; background: var(--accent); transition: width .25s; }
.form-step { animation: step-in .2s both; }
.form-step > .eyebrow { font-size: 11px; color: #c1d2ac; }
.form-step h2 { font-size: 28px; line-height: 1.2; letter-spacing: -.035em; margin-top: 12px; outline: none; }
.form-step > .hint { font-size: 15px; line-height: 1.6; color: #b2c0a3; margin-top: 13px; }
.options { display: grid; gap: 10px; margin-top: 22px; }
.option { display: flex; align-items: center; text-align: left; gap: 12px; background: #1c2316; border: 1px solid #465736; border-radius: 9px; padding: 14px 12px; color: #e0e8d5; font-size: 16px; line-height: 1.45; min-height: 58px; transition: background .15s, border-color .15s; }
.option > .option-key { border: 1px solid #657b4e; border-radius: 5px; font-size: 12px; width: 26px; height: 28px; display: grid; place-items: center; color: #cbddb7; flex-shrink: 0; }
.option:hover, .option[aria-pressed=true] { background: #2f4021; border-color: var(--accent); }
.option[aria-pressed=true] > .option-key { background: var(--accent); color: #17220d; border-color: var(--accent); }
.field { display: block; margin-top: 18px; color: #c5d4b5; font-size: 14px; }
.field > input, .field > textarea { display: block; width: 100%; min-height: 52px; border: 1px solid #53673e; border-radius: 9px; background: #1c2316; color: var(--text); padding: 13px; font-size: 16px; margin-top: 8px; outline: none; }
.field > textarea { resize: vertical; min-height: 110px; max-height: 210px; line-height: 1.6; }
.field > input:focus, .field > textarea:focus { border-color: var(--accent); }
.field input::placeholder, .field textarea::placeholder { color: #a1af92; opacity: 1; }
.form-step .button { width: 100%; margin-top: 22px; }
.form-navigation { margin-top: 20px; padding-top: 12px; border-top: 1px solid #39482c; display: flex; justify-content: space-between; align-items: center; color: #bbcca9; font-size: 13px; }
.back-button { padding: 10px 0; min-height: 44px; min-width: 80px; text-align: left; background: none; border: 0; color: #c7d7b5; font-size: 15px; }
.form-error { font-size: 14px; line-height: 1.6; color: #ffc2ad; margin-top: 16px; }
.consent { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; line-height: 1.6; color: #bfceaf; margin-top: 18px; padding-block: 6px; cursor: pointer; }
.consent input { accent-color: var(--accent); margin: 2px 0 0; flex-shrink: 0; width: 20px; height: 20px; }
.success-mark { display: grid; place-items: center; border: 1px solid #7ca84c; border-radius: 50%; width: 48px; height: 48px; background: #bafa650d; color: var(--accent); font-size: 25px; margin-bottom: 20px; }
.success-state { padding: 12px 0; }
.success-state h2 { margin-top: 0; }
.review-list { padding: 15px 0; margin: 12px 0 0; list-style: none; font-size: 15px; line-height: 1.6; color: #c0d0ae; display: grid; gap: 14px; }
.review-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 15px; }
.review-list strong { font-weight: 500; color: var(--text); }
.noscript-note { position: fixed; bottom: 0; padding: 14px; background: var(--accent); color: var(--bg); width: 100%; text-align: center; font-size: 15px; }
.body-locked { overflow: hidden; }
.reveal { transition: opacity .65s, transform .65s; }
.reveal-pending { opacity: 0; transform: translateY(18px); }
@keyframes drawer-in { from { opacity: 0; transform: translateY(35px); } to { opacity: 1; transform: none; } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (min-width: 600px) {
  .hero { padding-top: 64px; }
  .funnel-panel { padding: 26px 28px 0; }
  .panel-heading { justify-content: space-between; }
  .qualification-dialog { left: auto; right: 24px; bottom: 24px; width: 460px; max-width: calc(100% - 48px); max-height: calc(100dvh - 48px); border-bottom: 1px solid #4c5d3c; border-radius: 19px; padding: 22px 26px 24px; }
  .drawer-handle { display: none; }
}

@media (min-width: 900px) {
  .wrap { width: min(1120px, 100% - 80px); }
  .section { margin-top: 168px; }
  h2 { font-size: clamp(38px, 3.6vw, 49px); }
  .desktop-break { display: initial; }
  .hero { padding-top: 80px; }
  .hero h1 { font-size: clamp(54px, 5.2vw, 74px); line-height: 1.08; margin-block: 26px; }
  .hero-copy { font-size: 19px; }
  .discover { font-size: 16px; gap: 20px; }
  .mechanism { margin-top: 144px; }
  .section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 32px; }
  .section-heading > p { text-align: right; margin: 0; }
  .funnel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .funnel-panel h3 { font-size: 34px; }
  .funnel-panel > p:not(.diagram-caption) { min-height: 52px; }
  .panel-heading { min-height: 66px; align-content: flex-start; }
  .diagram-caption { min-height: 46px; display: flex; align-items: center; justify-content: center; }
  .diagram-note { text-align: right; }
  .small-label { font-size: 11px; }
  .button { width: auto; gap: 34px; padding-inline: 25px; }
  .implementation { display: grid; grid-template-columns: .85fr 1.15fr; gap: 65px; padding-top: 64px; }
  .timeline { margin: 0; }
  .timeline h3 { font-size: 27px; }
  .timeline p { font-size: 17px; }
  .mini-mark { display: block; margin-top: 40px; width: 84px; }
  .mini-mark svg { fill: none; stroke: #566344; stroke-width: 1; }
  .mini-mark path + path { fill: #bafa6509; stroke: #75974c; }
  .expert-section { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; padding-top: 64px; }
  .photo-composition { padding-right: 48px; }
  .closing { padding-block: 72px; }
  .closing h2 { font-size: clamp(48px, 4.9vw, 66px); }
  .faq-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; margin-top: 152px; }
  .faq-list { margin: 0; }
  .footer { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; margin-top: 82px; padding-block: 32px; }
  .footer > p, .footer > a:last-child { font-size: 12px; }
}

@media (min-width: 1100px) {
  .panel-heading { min-height: 32px; flex-wrap: nowrap; }
  .funnel-panel > p:not(.diagram-caption) { min-height: 26px; }
  .diagram-caption { min-height: 23px; }
}

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

/* Revenue opportunity: stacked on phones, a single equation on desktop. */
.discover { background: var(--accent); color: #111809; border: 1px solid var(--accent); border-radius: 9px; padding: 18px 24px; min-height: 58px; font-weight: 650; }
.discover:hover { background: #ceff8e; }
.opportunity { margin-top: 100px; padding: 32px 20px; border: 1px solid var(--line); border-radius: 14px; }
.opportunity-intro { max-width: 670px; margin-top: 24px; color: var(--muted); font-size: 17px; }
.opportunity-equation { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-block: 36px; }
.metric { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 20px 16px; }
.metric > span { color: var(--muted); font-size: 10px; font-weight: 600; }
.metric strong { font-size: clamp(25px, 7vw, 34px); font-weight: 500; line-height: 1.2; letter-spacing: -.05em; white-space: nowrap; }
.math-symbol { color: var(--accent); text-align: center; font-size: 22px; line-height: 1; }
.metric-result { background: var(--accent); border-color: var(--accent); color: #111809; }
.metric-result > span { color: #263717; }
.metric-result strong { font-weight: 650; }
.opportunity-calculation { font-size: 19px; line-height: 1.5; }
.opportunity-calculation strong { font-weight: 500; }
.opportunity-note { color: var(--muted); font-size: 13px; margin-top: 18px; }
.opportunity-close { color: var(--accent); font-size: 24px; line-height: 1.35; letter-spacing: -.025em; margin-top: 32px; }
.center-cta { margin-top: 36px; }
@media (min-width: 900px) {
  .opportunity { margin-top: 144px; padding: 52px 32px; }
  .opportunity-equation { grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1.2fr); gap: 8px; align-items: center; margin-block: 52px 36px; }
  .metric { min-height: 126px; flex-direction: column; justify-content: center; gap: 20px; padding: 20px 8px; text-align: center; }
  .metric strong { font-size: clamp(25px, 2.8vw, 34px); }
  .metric > span { font-size: 10px; }
  .opportunity-close { font-size: 28px; margin-top: 36px; }
}

/* A quiet glow and a visual continuation of the first sale. */
.hero { position: relative; isolation: isolate; }
.hero::before { content: ''; position: absolute; z-index: -1; inset: 0 -20px -30px; pointer-events: none; background: radial-gradient(ellipse at 50% 25%, #bafa6512, transparent 62%); }
.hero::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background-image: linear-gradient(#bafa6507 1px, transparent 1px), linear-gradient(90deg, #bafa6507 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at center, black, transparent 70%); }
.hero .highlight { text-shadow: 0 0 42px #bafa6528; }
.hero .discover { box-shadow: 0 6px 32px #bafa6514; }
.hero-value { display: flex; align-items: flex-start; justify-content: center; max-width: 420px; margin: 40px auto 0; padding: 24px 28px; border: 1px solid #bafa651c; border-radius: 16px; background: linear-gradient(135deg, #141b10b3, #080a08cc); }
.hero-value-node { flex: 0 0 100px; display: grid; justify-items: center; gap: 12px; color: var(--muted); font-size: 12px; }
.value-icon { display: grid; place-content: center; position: relative; height: 48px; width: 48px; border-radius: 12px; border: 1px solid #424e37; background: #192014; color: #b9c5ad; font-size: 20px; letter-spacing: -.04em; }
.value-next { color: #dcebcf; }
.value-next .value-icon { color: var(--accent); border-color: #bafa6555; background: #bafa650c; box-shadow: 0 0 28px #bafa6512; }
.value-icon > span { position: absolute; right: -6px; top: -7px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--bg); font-size: 15px; line-height: 20px; }
.value-bridge { display: flex; align-items: center; gap: 10px; flex: 1; margin-top: 15px; }
.value-bridge > span { flex: 1; border-top: 1px dashed #718c5266; }
.value-bridge svg { width: 16px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 1.4; }
.funnel-flow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: none; stroke: #c0c9b7; stroke-width: 3; stroke-linecap: round; }
.second-layer .funnel-flow { stroke: var(--accent); filter: drop-shadow(0 0 4px #bafa6588); }
.funnel-flow path { stroke-dasharray: 2 98; animation: funnel-travel 4.8s linear infinite; animation-play-state: paused; opacity: 0; }
.funnel-flow path:nth-child(2) { animation-delay: -1.6s; }
.funnel-flow path:nth-child(3) { animation-delay: -3.2s; }
.funnel-panel.is-flowing .funnel-flow path { animation-play-state: running; }
@keyframes funnel-travel { 0% { stroke-dashoffset: 0; opacity: 0; } 12%, 85% { opacity: .9; } 100% { stroke-dashoffset: -100; opacity: 0; } }

/* Phone typography: natural wrapping and generous outside gutters. */
@media (max-width: 899px) {
  .wrap { width: min(100% - 56px, 560px); }
  body { font-size: 14px; }
  h2, .closing h2 { font-size: clamp(25px, 6.7vw, 30px); line-height: 1.22; letter-spacing: -.04em; text-wrap: pretty; }
  .hero { padding-top: 64px; }
  .hero h1 { max-width: 440px; font-size: clamp(29px, 7.8vw, 40px); line-height: 1.16; margin: 0 auto 22px; text-wrap: balance; }
  .hero-copy { max-width: 380px; margin-inline: auto; font-size: 14px; line-height: 1.75; }
  .discover { width: 100%; max-width: 360px; font-size: 13px; min-height: 52px; padding: 16px 18px; margin-top: 26px; }
  .hero-value { margin-top: 30px; padding: 22px 12px; }
  .hero-value-node { flex-basis: 88px; font-size: 11px; }
  .value-bridge { gap: 6px; }
  .mechanism { margin-top: 88px; }
  .section-heading > p, .funnel-panel > p:not(.diagram-caption), .panel-footer p,
  .implementation-intro > p, .timeline p, .expert-copy > p, .closing > p,
  .faq-list details > p, .opportunity-intro { font-size: 14px; line-height: 1.75; }
  .funnel-panel { padding: 24px 20px 0; }
  .panel-heading { gap: 10px; }
  .panel-heading > .eyebrow { font-size: 10px; letter-spacing: .02em; }
  .pill { font-size: 10px; padding: 5px 9px; }
  .funnel-panel h3 { font-size: clamp(22px, 5.8vw, 28px); margin-top: 18px; }
  .diagram-caption { font-size: 12px; }
  .sale-label { font-size: 11px; padding: 8px 12px; }
  .diagram-note { font-size: 11px; }
  .panel-footer { gap: 10px; }
  .circle-symbol { font-size: 21px; }
  .button { font-size: 13px; min-height: 52px; padding: 16px 18px; }
  .timeline h3 { font-size: 21px; line-height: 1.3; }
  .step-number { font-size: 11px; }
  .expert-copy .expert-name { font-size: 21px; }
  #expert-title, #faq-title { font-size: clamp(23px, 6.4vw, 30px); }
  .expert-handle { font-size: 12px; }
  .closing h2 { margin-top: 0; }
  .faq-list summary { font-size: 15px; gap: 16px; line-height: 1.55; }
  .opportunity { padding: 28px 20px; }
  .opportunity-intro { margin-top: 18px; }
  .opportunity-equation { margin-block: 28px; gap: 8px; }
  .metric { padding: 18px 14px; gap: 8px; }
  .metric > span { font-size: 9px; }
  .metric strong { font-size: 26px; }
  .metric-result { flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px; }
  .metric-result > span { font-size: 10px; }
  .metric-result strong { font-size: 40px; }
  .opportunity-calculation { font-size: 16px; }
  .opportunity-note { font-size: 11px; }
  .opportunity-close { font-size: 20px; }
  .form-step h2 { font-size: 24px; }
  .option { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .funnel-flow { display: none; }
}