:root { --paper: #f6f1e7; --paper-deep: #ede5d3; --paper-card: #fffbf3; --surface-selected: #eee2cf; --ink: #1c1a17; --ink-soft: #5f5549; --brown: #6b4d2a; --gold: #c9a253; --rule: #d8cdb8; --night: #0f0e12; --night-card: #211e25; --night-selected: #2b251e; --night-rule: rgba(255, 255, 255, .12); --night-text: #fbf7ef; --danger: #9e3f39; --success: #356648; --font-ui: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --content: 430px; --header-row-height: 54px; }
* { box-sizing: border-box; }
html { min-height: 100%; overflow-x: hidden; background: var(--paper); text-size-adjust: 100%; }
body { margin: 0px; min-height: 100svh; color: var(--ink); background: var(--paper); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color 0.2s, color 0.2s; }
body.is-dark { color: var(--night-text); background: var(--night); }
body.is-intro { color: var(--ink); background: var(--paper); }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
.funnel-intro { width: 100%; min-height: 100svh; padding: max(24px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left)); display: grid; place-items: center; }
.intro-brand { display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: var(--ink); font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.intro-brand-splash { flex-direction: column; gap: 16px; animation: splashIn .35s ease-out both; }
.intro-brand-splash img { width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 18px 36px rgba(28, 26, 23, .16); }
.intro-brand-splash h1 { margin: 0; font-size: 25px; line-height: 1; letter-spacing: -.035em; }
@keyframes splashIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.funnel-shell { width: 100%; min-height: 100svh; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
.funnel-header { position: sticky; top: 0px; z-index: 20; width: min(100%, var(--content)); margin: 0px auto; padding-top: env(safe-area-inset-top); background: var(--paper); border-bottom: 1px solid rgba(107, 77, 42, 0.08); }
.is-dark .funnel-header { background: var(--night); border-bottom-color: rgba(255, 255, 255, 0.08); }
.header-row { min-width: 0px; height: var(--header-row-height); display: grid; grid-template-columns: 64px minmax(0px, 1fr) 64px; align-items: center; }
.back-button { width: 64px; border: 0px; background: transparent; color: var(--ink-soft); font-size: 13px; font-weight: 700; text-align: left; padding: 12px 0px; cursor: pointer; }
.back-button.is-placeholder { visibility: hidden; pointer-events: none; }
.is-dark .back-button { color: rgba(255, 255, 255, 0.62); }
.back-button:focus-visible, .option-card:focus-visible, .primary-button:focus-visible, .carousel-card:focus-visible, .quote-card:focus-visible, .plan-card:focus-visible, .theme-card:focus-visible, .theme-tab:focus-visible, .font-card:focus-visible, .text-link:focus-visible, input:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.brand { min-width: 0px; display: inline-flex; align-items: center; justify-content: center; justify-self: center; gap: 7px; white-space: nowrap; font-size: clamp(14px, 4.2vw, 17px); font-weight: 800; letter-spacing: -0.02em; }
.brand img { width: 25px; height: 25px; flex: 0 0 25px; border-radius: 7px; }
.brand span { overflow: hidden; text-overflow: ellipsis; }
.step-counter { text-align: right; color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.is-dark .step-counter { color: rgba(255, 255, 255, 0.52); }
.progress-track { height: 3px; border-radius: 999px; background: rgba(107, 77, 42, 0.14); overflow: hidden; }
.is-dark .progress-track { background: rgba(255, 255, 255, 0.11); }
.progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brown), var(--gold)); transition: width 0.35s; }
.screen { width: min(100%, var(--content)); min-height: calc(100svh - var(--header-row-height) - 4px - env(safe-area-inset-top)); margin: 0px auto; padding: clamp(18px, 4.2vh, 38px) 0 max(18px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.screen-heading, .screen-content { animation: 0.3s cubic-bezier(0.2, 0.75, 0.25, 1) 0s 1 normal both running contentIn; }
.screen-content { animation-delay: 0.035s; }
@keyframes contentIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.screen-heading { text-align: center; margin-bottom: clamp(18px, 3.4vh, 26px); }
.eyebrow { margin: 0px 0px 9px; color: var(--brown); font-size: 11px; line-height: 1.2; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; }
.is-dark .eyebrow { color: var(--gold); }
h1, h2, p { margin-top: 0px; }
.screen h1 { margin-bottom: 0; font-family: var(--font-ui); font-size: clamp(28px, 7.7vw, 38px); line-height: 1.06; font-weight: 800; letter-spacing: -0.04em; }
.action-footer { width: 100%; margin-top: auto; padding-top: clamp(22px, 4vh, 34px); padding-bottom: max(2px, env(safe-area-inset-bottom)); }
.primary-button { width: 100%; min-height: 56px; border: 0px; border-radius: 17px; padding: 14px 22px; color: rgb(255, 255, 255); background: var(--ink); box-shadow: rgba(28, 26, 23, 0.16) 0px 9px 22px; font-size: 16px; font-weight: 800; cursor: pointer; transition: transform 0.16s, opacity 0.16s, box-shadow 0.16s; }
.is-dark .primary-button { color: var(--night); background: var(--gold); box-shadow: rgba(0, 0, 0, 0.22) 0px 9px 22px; }
.primary-button:hover { transform: translateY(-1px); box-shadow: rgba(28, 26, 23, 0.2) 0px 11px 25px; }
.primary-button:active { transform: scale(0.985); }
.primary-button:disabled { opacity: 0.42; cursor: not-allowed; transform: none; box-shadow: none; }
.options { display: grid; gap: 10px; }
.option-card { position: relative; width: 100%; min-height: 66px; display: flex; align-items: center; gap: 13px; border: 1px solid var(--rule); border-radius: 18px; padding: 13px 15px; color: var(--ink); background: var(--paper-card); box-shadow: rgba(83, 59, 28, 0.04) 0px 5px 16px; text-align: left; cursor: pointer; transition: transform 0.16s, border-color 0.16s, background 0.16s, box-shadow 0.16s; }
.option-card:hover { transform: translateY(-1px); border-color: rgba(107, 77, 42, 0.48); }
.option-card:active { transform: scale(0.985); }
.option-card.is-selected { border-color: var(--brown); background: var(--surface-selected); box-shadow: 0 0 0 1px var(--brown); }
.option-emoji { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 11px; background: var(--paper-deep); font-size: 19px; line-height: 1; }
.option-copy { min-width: 0px; flex: 1 1 0%; }
.option-copy strong { display: block; font-size: 15.5px; line-height: 1.22; font-weight: 700; }
.option-copy small { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 12.25px; line-height: 1.34; }
.selection-control { position: absolute; opacity: 0; pointer-events: none; }
.selection-check, .card-check, .theme-check { display: grid; place-items: center; color: rgb(255, 255, 255); background: var(--brown); font-weight: 800; opacity: 0; transform: scale(0.8); transition: opacity 0.16s, transform 0.16s; }
.selection-check { width: 23px; height: 23px; flex: 0 0 23px; border-radius: 50%; font-size: 13px; }
.option-card.is-selected .selection-check, .quote-card.is-selected .card-check, .carousel-card.is-selected .card-check, .font-card.is-selected .card-check, .theme-card.is-selected .theme-check { opacity: 1; transform: scale(1); }
.is-dark .option-card { color: var(--night-text); border-color: var(--night-rule); background: var(--night-card); box-shadow: none; }
.is-dark .option-card:hover { border-color: rgba(201, 162, 83, 0.6); }
.is-dark .option-card.is-selected { border-color: var(--gold); background: var(--night-selected); box-shadow: 0 0 0 1px var(--gold); }
.is-dark .option-emoji { background: rgba(255, 255, 255, 0.08); }
.is-dark .option-copy small { color: rgba(255, 255, 255, 0.56); }
.is-dark .selection-check { color: var(--night); background: var(--gold); }
.benefit-visual { width: 100%; margin: 0px auto; text-align: center; }
.hero-phone { display: block; width: min(76%, 300px); max-height: min(45vh, 440px); object-fit: cover; object-position: center 38%; margin: 0px auto; border-radius: 26px; box-shadow: rgba(0, 0, 0, 0.28) 0px 16px 38px; }
.benefit-composition { position: relative; isolation: isolate; width: min(100%, 372px); height: clamp(244px, 43vh, 382px); margin: 0 auto; overflow: hidden; border: 1px solid rgba(255, 255, 255, .11); border-radius: 29px; background: #171512; box-shadow: 0 20px 48px rgba(0, 0, 0, .3); }
.benefit-composition::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 32%, rgba(0, 0, 0, .18)); }
.benefit-composition-bg { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; }
.benefit-shot { position: absolute; z-index: 2; display: block; height: auto; border: 1px solid rgba(255, 255, 255, .24); border-radius: clamp(16px, 5vw, 24px); background: #111; box-shadow: 0 18px 35px rgba(0, 0, 0, .38); pointer-events: none; transform-origin: center top; }
.benefit-composition.is-right-place .is-lock-screen { z-index: 2; top: 8%; left: 5%; width: 46%; transform: rotate(-2.5deg); }
.benefit-composition.is-right-place .is-home-screen { z-index: 3; top: 4%; right: 3%; width: 55%; transform: rotate(2deg); }
.benefit-composition.is-effortless .benefit-shot { transform-origin: center; border-color: rgba(255, 255, 255, .2); box-shadow: 0 20px 38px rgba(0, 0, 0, .44); }
.benefit-composition.is-effortless .is-widget-blue { z-index: 3; top: 15%; left: 6%; width: 72%; border-radius: clamp(20px, 7vw, 30px); transform: rotate(-3deg); }
.benefit-composition.is-effortless .is-widget-dark { z-index: 2; top: 7%; right: 4%; width: 60%; border-radius: clamp(18px, 6vw, 25px); transform: rotate(4deg); opacity: .82; }
.benefit-composition.is-effortless .is-widget-fire { z-index: 4; bottom: 8%; left: 8%; width: 84%; border-radius: clamp(16px, 5vw, 22px); transform: rotate(-2deg); }

@keyframes effortless-card-cycle {
  0%, 28% { z-index: 4; opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  33%, 61% { z-index: 2; opacity: .62; transform: translate(-39%, -43%) rotate(6deg) scale(.82); }
  66%, 94% { z-index: 3; opacity: .76; transform: translate(-61%, -56%) rotate(-6deg) scale(.88); }
  100% { z-index: 4; opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
  .benefit-composition.is-effortless .is-widget-blue,
  .benefit-composition.is-effortless .is-widget-dark,
  .benefit-composition.is-effortless .is-widget-fire { top: 50%; right: auto; bottom: auto; left: 50%; animation: effortless-card-cycle 9s cubic-bezier(.4, 0, .2, 1) infinite both; will-change: transform, opacity; }
  .benefit-composition.is-effortless .is-widget-blue { animation-delay: 0s; }
  .benefit-composition.is-effortless .is-widget-dark { animation-delay: -3s; }
  .benefit-composition.is-effortless .is-widget-fire { animation-delay: -6s; }
}
.quote-grid { display: grid; gap: 12px; }
.quote-card { position: relative; width: 100%; border: 1px solid var(--rule); border-radius: 22px; padding: 21px 48px 18px 18px; color: var(--ink); background: var(--paper-card); text-align: left; cursor: pointer; }
.quote-card blockquote { margin: 0px; font: 700 19px / 1.3 var(--font-ui); letter-spacing: -0.015em; }
.quote-card cite { display: block; margin-top: 13px; color: var(--ink-soft); font-size: 10px; line-height: 1.35; font-style: normal; letter-spacing: 0.075em; text-transform: uppercase; }
.quote-card.is-selected { border-color: var(--brown); box-shadow: 0 0 0 1px var(--brown); background: var(--surface-selected); }
.card-check { position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; border-radius: 50%; font-size: 13px; }
.carousel { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 312px); gap: 12px; overflow-x: auto; padding: 2px 1px 12px; scroll-padding-inline: 1px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel-card { position: relative; scroll-snap-align: start; border: 1px solid var(--night-rule); border-radius: 24px; padding: 13px; overflow: hidden; color: var(--night-text); background: var(--night-card); text-align: left; cursor: pointer; }
.carousel-card.is-selected { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.carousel-card .card-check { color: var(--night); background: var(--gold); z-index: 4; }
.widget-card-preview { display: block; width: 100%; }
.widget-card-preview .widget-preview { box-shadow: none; }
.carousel-copy { display: block; padding: 14px 3px 3px; }
.carousel-copy strong { display: block; padding-right: 30px; font-size: 16px; font-weight: 800; }
.carousel-copy small { display: block; margin-top: 5px; color: rgba(255, 255, 255, 0.58); font-size: 12px; line-height: 1.4; }
.swipe-note { margin: 7px 0px 0px; text-align: center; color: rgba(255, 255, 255, 0.48); font-size: 12px; }
.widget-preview { position: relative; isolation: isolate; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: clamp(19px, 7%, 25px); color: rgb(244, 240, 231); background: rgb(17, 17, 15); font-family: var(--widget-font, Roboto, sans-serif); box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 26px; }
.widget-preview img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; }
.widget-shade { position: absolute; inset: 0px; z-index: 1; background: linear-gradient(rgba(8, 7, 5, 0.27), rgba(8, 7, 5, 0.79)); }
.widget-quote-copy { position: absolute; inset: 13%; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.widget-quote blockquote { margin: 0px; font-family: inherit; font-size: clamp(14px, 5.2vw, 21px); line-height: 1.34; font-weight: 600; }
.widget-quote cite { margin-top: 11%; font-family: inherit; font-size: clamp(8px, 2.5vw, 10px); line-height: 1.2; font-style: normal; letter-spacing: 0.12em; }
.widget-sisyphus .widget-shade { background: linear-gradient(rgba(8, 7, 5, 0.04), rgba(8, 7, 5, 0.72)); }
.widget-sisyphus strong { position: absolute; z-index: 2; left: 8%; right: 8%; bottom: 8%; font-family: inherit; font-size: clamp(20px, 7vw, 28px); line-height: 1; font-weight: 600; }
.widget-memento { padding: 9%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.memento-eyebrow { margin-bottom: 6%; color: rgb(164, 160, 153); font-size: clamp(8px, 2.7vw, 11px); letter-spacing: 0.16em; }
.memento-days { color: rgb(242, 239, 231); font-size: clamp(46px, 17vw, 72px); line-height: 0.95; font-weight: 600; letter-spacing: -0.055em; }
.memento-label { margin-top: 3%; color: rgb(164, 160, 153); font-size: clamp(8px, 2.8vw, 12px); letter-spacing: 0.16em; }
.memento-stats { margin-top: 8%; display: flex; align-items: center; justify-content: center; gap: 16px; }
.memento-stats span { display: flex; flex-direction: column; }
.memento-stats b { font-size: clamp(15px, 5vw, 20px); font-weight: 500; }
.memento-stats small { margin-top: 3px; color: rgb(119, 115, 109); font-size: clamp(7px, 2.2vw, 9px); }
.memento-stats i { width: 1px; height: 24px; background: rgb(58, 56, 51); }
.widget-year { padding: 5.5%; color: rgb(231, 227, 218); background: rgb(18, 18, 18); }
.year-header { height: 12%; display: flex; align-items: flex-start; justify-content: space-between; }
.year-header > span { display: flex; flex-direction: column; }
.year-header > span:last-child { align-items: flex-end; }
.year-header b { font-size: clamp(12px, 4vw, 16px); line-height: 1; font-weight: 500; }
.year-header small { margin-top: 3px; color: rgb(127, 124, 119); font-size: clamp(6px, 2.2vw, 9px); }
.year-grid { height: 82%; margin-top: 5%; display: grid; grid-template-columns: repeat(19, 1fr); grid-template-rows: repeat(20, 1fr); gap: 2px; }
.year-grid i { display: block; min-width: 0px; min-height: 0px; aspect-ratio: 1 / 1; align-self: center; border-radius: 50%; background: rgb(48, 48, 46); }
.year-grid i.is-done { background: rgb(213, 208, 198); }
.theme-tabs { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 7px; }
.theme-tab { min-width: 0px; border: 1px solid var(--rule); border-radius: 999px; padding: 10px 5px; color: var(--ink-soft); background: transparent; font-size: clamp(11px, 3.2vw, 13px); font-weight: 700; cursor: pointer; }
.theme-tab.is-selected { color: var(--brown); border-color: var(--brown); background: var(--surface-selected); }
.theme-blurb { margin: 11px 4px 14px; color: var(--ink-soft); font-size: 13px; line-height: 1.35; text-align: center; }
.theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 14px 9px; }
.theme-card { min-width: 0px; border: 0px; padding: 0px; color: var(--ink-soft); background: transparent; cursor: pointer; }
.theme-image { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border: 2px solid transparent; border-radius: 16px; background: rgb(24, 23, 20); }
.theme-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.theme-card.is-selected .theme-image { border-color: var(--brown); box-shadow: 0 0 0 1px var(--brown); }
.theme-check { position: absolute; top: 7px; right: 7px; width: 23px; height: 23px; border-radius: 50%; font-size: 12px; }
.theme-name { display: block; margin-top: 6px; overflow: hidden; color: inherit; font-size: clamp(9px, 2.7vw, 11px); font-weight: 600; line-height: 1.2; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.theme-card.is-selected .theme-name { color: var(--brown); font-weight: 800; }
.personalization-preview { width: 100%; margin-inline: auto; }
.home-screen-preview { position: relative; isolation: isolate; width: min(60vw, 232px); aspect-ratio: 2 / 3; margin: 0 auto; overflow: hidden; border: 1px solid rgba(255, 255, 255, .17); border-radius: clamp(27px, 7.5vw, 34px); background: #171512; box-shadow: 0 24px 48px rgba(0, 0, 0, .34), inset 0 0 0 1px rgba(255, 255, 255, .05); container-type: inline-size; }
.home-screen-wallpaper, .home-screen-scrim { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-screen-wallpaper { z-index: 0; display: block; object-fit: cover; }
.home-screen-scrim { z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .02) 38%, rgba(0, 0, 0, .05) 60%, rgba(0, 0, 0, .32) 100%); }
.home-screen-body { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; padding: 6.5cqw 5cqw 4.8cqw; }
.home-screen-widget { width: 84cqw; margin: 0 auto; border-radius: 14cqw; }
.home-screen-widget .widget-preview { box-shadow: 0 10px 22px rgba(0, 0, 0, .28); }
.home-screen-app-row { width: 100%; margin-top: 4.8cqw; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.4cqw; }
.home-screen-app { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1.25cqw; color: #fff; font-size: 3cqw; font-weight: 500; line-height: 1; text-shadow: 0 1px 4px rgba(0, 0, 0, .9); white-space: nowrap; }
.home-screen-app img { width: 13.4cqw; height: 13.4cqw; display: block; border-radius: 3.1cqw; box-shadow: 0 2px 8px rgba(0, 0, 0, .26); }
.home-screen-spacer { flex: 1 1 auto; min-height: 1cqw; }
.home-screen-search { align-self: center; margin-bottom: 2.8cqw; border-radius: 999px; padding: 1.8cqw 4.8cqw; color: rgba(255, 255, 255, .92); background: rgba(38, 38, 38, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); backdrop-filter: blur(12px); font-size: 2.8cqw; font-weight: 600; line-height: 1; }
.home-screen-dock { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 2.8cqw; border-radius: 7.2cqw; padding: 2.5cqw 3.8cqw; background: rgba(235, 235, 235, .25); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); backdrop-filter: blur(17px) saturate(1.2); }
.home-screen-dock .home-screen-app { gap: 0; }
.home-screen-dock .home-screen-app img { width: 13.8cqw; height: 13.8cqw; }
.home-screen-dock .home-screen-app > span { display: none; }
.font-live-preview, .result-widget { width: min(76vw, 312px); margin-inline: auto; }
.font-live-preview { width: min(47vw, 190px); margin-bottom: 0; }
.font-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.font-card { position: relative; width: 100%; min-height: 104px; display: flex; flex-direction: column; justify-content: space-between; gap: 9px; border: 1px solid var(--rule); border-radius: 18px; padding: 13px 38px 12px 14px; background: var(--paper-card); color: var(--ink); text-align: left; cursor: pointer; }
.font-card.is-selected { border-color: var(--brown); box-shadow: 0 0 0 1px var(--brown); background: var(--surface-selected); }
.font-meta { display: block; min-width: 0; }
.font-meta strong { display: block; overflow: hidden; color: var(--ink-soft); font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.font-meta small { display: block; margin-top: 2px; overflow: hidden; color: rgb(141, 129, 115); font-size: 9.5px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.font-sample { display: block; margin: 0; font-size: clamp(34px, 10vw, 42px); line-height: .9; }
.social-showcase { width: min(100%, 360px); margin: 0 auto; border: 1px solid var(--night-rule); border-radius: 26px; padding: 14px 18px 18px; background: radial-gradient(circle at 50% 32%, rgba(201, 162, 83, .14), transparent 43%), var(--night-card); }
.social-figure { margin: 0; display: grid; justify-items: center; }
.social-aurelius { width: min(54vw, 210px); height: auto; display: block; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .28)); }
.social-stars { width: min(67vw, 250px); height: auto; display: block; margin-top: -8px; }
.rating-row { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.rating-row strong { color: var(--gold); font-size: 35px; line-height: 1; font-weight: 800; letter-spacing: -0.05em; }
.rating-meta { color: rgba(255, 255, 255, 0.6); font-size: 12px; }
.review { border-top: 1px solid var(--night-rule); margin-top: 13px; padding-top: 13px; }
.review h2 { margin: 0px 0px 5px; font-size: 17px; line-height: 1.15; font-weight: 800; }
.review p { margin: 0px; color: rgba(255, 255, 255, 0.69); font-size: 12.5px; line-height: 1.45; }
.email-form { display: grid; gap: 12px; }
.field-label { font-size: 13px; font-weight: 700; }
.email-input { width: 100%; min-height: 57px; border: 1px solid var(--rule); border-radius: 17px; padding: 14px 16px; background: var(--paper-card); color: var(--ink); font-size: 16px; }
.consent { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-soft); font-size: 12.5px; line-height: 1.42; }
.consent input { margin: 3px 0px 0px; accent-color: var(--brown); }
.form-message { min-height: 20px; margin: 0px; color: var(--danger); font-size: 12.5px; }
.privacy-note { margin: 18px 0px 0px; color: var(--ink-soft); font-size: 12px; line-height: 1.5; text-align: center; }
.privacy-note a, .legal-links a, .text-link { color: inherit; }
.is-checkout-email-open { overflow: hidden; }
.checkout-email-overlay { position: fixed; inset: 0; z-index: 100; padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); overflow-y: auto; display: grid; place-items: center; background: rgba(8, 7, 10, .74); backdrop-filter: blur(8px); }
.checkout-email-overlay[hidden] { display: none; }
.checkout-email-card { position: relative; width: min(100%, 420px); border: 1px solid rgba(107, 77, 42, .14); border-radius: 26px; padding: 26px 22px 22px; color: var(--ink); background: var(--paper); box-shadow: 0 28px 70px rgba(0, 0, 0, .36); }
.checkout-email-close { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: 0; border-radius: 999px; color: var(--ink-soft); background: rgba(107, 77, 42, .08); font-size: 25px; line-height: 1; cursor: pointer; }
.checkout-email-icon { width: 54px; height: 54px; margin-bottom: 18px; }
.checkout-email-icon img { width: 100%; height: 100%; border-radius: 14px; box-shadow: 0 10px 24px rgba(28, 26, 23, .14); }
.checkout-email-card h2 { max-width: 310px; margin: 0; font-size: clamp(25px, 7vw, 31px); line-height: 1.04; letter-spacing: -.04em; }
.checkout-email-copy { margin: 12px 0 22px; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.checkout-email-card .primary-button { color: #fff; background: var(--brown); }
.checkout-email-card .privacy-note { margin-top: 14px; }
.result-card { border: 1px solid var(--rule); border-radius: 25px; overflow: hidden; background: var(--paper-card); box-shadow: rgba(91, 62, 26, 0.09) 0px 13px 32px; }
.result-widget { padding: 16px 16px 0px; }
.result-copy { padding: 19px 19px 21px; }
.result-copy h2 { margin: 0px 0px 13px; font-size: 22px; line-height: 1.1; font-weight: 800; }
.result-list { display: grid; gap: 9px; margin: 0px; padding: 0px; list-style: none; }
.result-list li { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); font-size: 12.5px; }
.result-list li:last-child { padding-bottom: 0px; border-bottom: 0px; }
.result-list span { color: var(--ink-soft); }
.result-list strong { max-width: 64%; text-align: right; }
.plan-grid { display: grid; gap: 11px; }
.plan-card { position: relative; width: 100%; min-height: 84px; border: 1px solid var(--night-rule); border-radius: 20px; padding: 16px 17px; background: var(--night-card); color: var(--night-text); display: flex; align-items: center; justify-content: space-between; gap: 18px; text-align: left; cursor: pointer; }
.plan-card.is-selected { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); background: var(--night-selected); }
.plan-name strong { display: block; font-size: 16px; font-weight: 800; }
.plan-name small { display: block; margin-top: 4px; color: rgba(255, 255, 255, 0.56); }
.plan-price { text-align: right; }
.plan-price strong { display: block; color: var(--gold); font-size: 23px; line-height: 1; font-weight: 800; }
.plan-price small { color: rgba(255, 255, 255, 0.55); font-size: 11px; }
.best-value { position: absolute; top: -9px; right: 13px; border-radius: 999px; padding: 5px 9px; color: var(--night); background: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.billing-note { margin: 17px auto 0px; color: rgba(255, 255, 255, 0.54); font-size: 12px; line-height: 1.5; text-align: center; }
.legal-links { margin-top: 12px; color: rgba(255, 255, 255, 0.5); text-align: center; font-size: 11px; }
.checkout-error { min-height: 18px; margin: 10px 0px 0px; color: rgb(227, 163, 156); text-align: center; font-size: 12px; }
.noscript-card { width: min(100% - 40px, 420px); margin: 12vh auto; text-align: center; }
.noscript-card img { width: 78px; border-radius: 18px; }
.noscript-card h1 { font-family:var(--font-ui); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; }
@media (max-width: 350px) {
  .funnel-shell { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  .header-row { grid-template-columns: 56px minmax(0px, 1fr) 56px; }
  .back-button { width: 56px; }
  .brand { gap: 5px; font-size: 14px; }
  .brand img { width: 22px; height: 22px; flex-basis: 22px; }
  .option-card { gap: 10px; padding-inline: 12px; }
  .option-emoji { width: 31px; height: 31px; flex-basis: 31px; font-size: 17px; }
  .option-copy strong { font-size: 14.5px; }
  .option-copy small { font-size: 11.5px; }
  .selection-check { width: 21px; height: 21px; flex-basis: 21px; }
  .theme-grid { }
}
@media (max-height: 700px) {
  :root { --header-row-height: 48px; }
  .screen { padding-top: 12px; }
  .screen-heading { margin-bottom: 15px; }
  .screen h1 { font-size: clamp(27px, 7.5vw, 34px); }
  .options { gap: 8px; }
  .option-card { min-height: 57px; padding-top: 10px; padding-bottom: 10px; }
  .option-copy small { margin-top: 2px; }
  .action-footer { padding-top: 18px; }
  .primary-button { min-height: 52px; }
  .hero-phone { max-height: 37vh; }
  .benefit-composition { height: min(36vh, 255px); border-radius: 24px; }
  .carousel { grid-auto-columns: min(68%, 250px); }
  .home-screen-preview { width: min(52vw, 184px); }
  .social-showcase { padding: 10px 14px 13px; }
  .social-aurelius { width: min(39vw, 138px); }
  .social-stars { width: min(54vw, 190px); margin-top: -7px; }
  .rating-row strong { font-size: 29px; }
  .review { margin-top: 9px; padding-top: 9px; }
  .review h2 { font-size: 14px; }
  .review p { font-size: 10.5px; line-height: 1.35; }
  .font-live-preview, .result-widget { width: min(64vw, 250px); }
}
@media (min-width: 720px) {
  .funnel-shell { padding-inline: max(24px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-right)); }
  .screen { padding-top: 34px; }
  .benefit-composition { height: min(44vh, 392px); }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

@font-face {
  font-family: "Stoic Space Mono";
  src: url("/funnel/assets/fonts/SpaceMono-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Stoic Space Mono";
  src: url("/funnel/assets/fonts/SpaceMono-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

.screen-content { min-width: 0; }

.screen-heading,
.screen-content {
  animation-duration: .36s;
  animation-timing-function: cubic-bezier(.2, .78, .24, 1);
}

.option-card,
.quote-card,
.carousel-card,
.theme-card,
.font-card,
.plan-card {
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease;
}

@media (hover: none), (pointer: coarse) {
  .option-card:hover,
  .primary-button:hover { transform: none; }
}

.benefit-visual.is-lock-screen .hero-phone {
  width: min(70%, 286px);
  max-height: min(47vh, 470px);
  object-fit: contain;
  object-position: center;
  border-radius: 28px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .2);
}

.evidence-card {
  width: 100%;
  border: 1px solid var(--night-rule);
  border-radius: 27px;
  padding: clamp(19px, 5.5vw, 25px);
  color: var(--night-text);
  background: var(--night-card);
  box-shadow: none;
}

.evidence-kicker,
.mindfulness-result {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.evidence-kicker span,
.mindfulness-result span {
  max-width: 14ch;
  color: rgba(255, 255, 255, .54);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.evidence-kicker strong,
.mindfulness-result strong {
  color: var(--gold);
  font-size: clamp(37px, 11vw, 49px);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.06em;
  white-space: nowrap;
}

.study-chart { margin-top: 24px; }

@keyframes evidenceBar {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.evidence-copy { margin: 24px 0 0; color: rgba(255, 255, 255, .82); font-size: 15px; font-weight: 700; line-height: 1.4; }
.study-note { margin: 13px 0 0; color: rgba(255, 255, 255, .43); font-size: 10.5px; line-height: 1.4; }

.mindfulness-result { position: relative; z-index: 1; align-items: center; }
.mindfulness-evidence { position: relative; overflow: hidden; background: radial-gradient(circle at 84% 8%, rgba(201, 162, 83, .09), transparent 35%), var(--night-card); }
.index-chart { position: relative; height: 200px; margin-top: 17px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .055); border-radius: 22px; background: rgba(7, 7, 8, .25); }
.index-plot { width: 100%; height: 100%; display: block; overflow: visible; }
.index-gridline { stroke: rgba(255, 255, 255, .09); stroke-width: 1; }
.index-gridline.is-zero { stroke: rgba(255, 255, 255, .15); }
.index-area { fill: url(#mindfulness-area); animation: indexAreaReveal .8s .18s ease both; }
.index-line-echo { fill: none; stroke: rgba(216, 181, 94, .17); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; opacity: 0; animation: indexEchoReveal .55s .7s ease forwards; }
.index-line { fill: none; stroke: #d8b55e; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 290; stroke-dashoffset: 290; filter: drop-shadow(0 3px 7px rgba(201, 162, 83, .24)); animation: indexLineDraw 1.15s .14s cubic-bezier(.16, .8, .2, 1) forwards; }
.index-point { stroke: var(--night-card); stroke-width: 3; opacity: 0; animation: indexPointReveal .2s .86s ease forwards; }
.index-point.is-before { fill: #817d84; }
.index-point.is-after { fill: var(--gold); animation-delay: 1.05s; }
.index-axis-mark, .index-value, .index-label { position: absolute; }
.index-axis-mark { left: 13px; color: rgba(255, 255, 255, .3); font-size: 9px; font-weight: 700; }
.index-axis-mark.is-zero { top: 78%; }
.index-value { min-width: 41px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 999px; padding: 5px 9px; background: rgba(35, 32, 38, .92); box-shadow: 0 7px 18px rgba(0, 0, 0, .22); font-size: 12px; font-weight: 800; line-height: 1; text-align: center; transform: translateX(-50%); }
.index-value.is-before { left: 15%; top: 18%; color: rgba(255, 255, 255, .68); }
.index-value.is-after { left: 87%; top: 0; border-color: rgba(216, 181, 94, .24); color: #e2c36f; background: rgba(65, 51, 27, .94); font-size: 15px; }
.index-label { bottom: 9px; width: 112px; color: rgba(255, 255, 255, .54); font-size: 10px; font-weight: 700; line-height: 1.15; text-align: center; transform: translateX(-50%); }
.index-label.is-before { left: 15%; }
.index-label.is-after { right: 12px; width: 126px; text-align: right; transform: none; }

@keyframes indexLineDraw { to { stroke-dashoffset: 0; } }
@keyframes indexAreaReveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes indexEchoReveal { to { opacity: 1; } }
@keyframes indexPointReveal { to { opacity: 1; } }

.distraction-note { margin: 18px 0 0; border-radius: 14px; padding: 11px 13px; color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .06); font-size: 13px; font-weight: 700; line-height: 1.35; }
.distraction-note span { color: var(--gold); font-size: 17px; }

.widget-retro {
  padding: 6.4%;
  color: #f2efe9;
  background: #0a0a0b;
  border: 1px solid rgba(255, 255, 255, .08);
  font-family: "Stoic Space Mono", monospace;
}

.widget-preview { container-type: inline-size; }
.widget-quote blockquote { font-size: clamp(10px, 6.7cqw, 21px); }
.widget-quote cite { font-size: clamp(6px, 3.2cqw, 10px); }
.widget-sisyphus strong { font-size: clamp(12px, 9cqw, 28px); }
.memento-eyebrow { font-size: clamp(6px, 3.5cqw, 11px); }
.memento-days { font-size: clamp(28px, 23cqw, 72px); }
.memento-label { font-size: clamp(6px, 3.8cqw, 12px); }
.memento-stats b { font-size: clamp(11px, 6.4cqw, 20px); }
.memento-stats small { font-size: clamp(5px, 2.9cqw, 9px); }

.retro-header {
  font-family: "Stoic Space Mono", monospace;
  font-size: clamp(5px, 3.85cqw, 12px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 1.4px;
  color: rgba(242, 239, 233, .8);
  white-space: nowrap;
}

.retro-divider { height: 1px; margin: 3.2% 0 2.6%; background: rgba(255, 255, 255, .2); }
.retro-rows { height: calc(100% - 11%); padding: 0; display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); }
.retro-row { min-height: 0; display: grid; grid-template-columns: 19.1% minmax(0, 1fr) 14.7%; gap: 4.4%; align-items: center; color: #f2efe9; font-family: "Stoic Space Mono", monospace; font-size: clamp(5px, 3.85cqw, 12px); line-height: 1; }
.retro-row.is-life { margin: 0; padding-top: 2.6%; border-top: 1px solid rgba(255, 255, 255, .1); color: #a88e5d; font-weight: 700; }
.retro-bars { width: 100%; height: clamp(5px, 4.5cqw, 14px); display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); gap: clamp(.6px, .8cqw, 2.5px); }
.retro-bars i { min-width: 0; border: 0; background: rgba(242, 239, 233, .4); }
.retro-bars i.is-active { background: #f2efe9; box-shadow: 0 0 1px rgba(242, 239, 233, .25); }
.retro-row.is-life .retro-bars i { border: 0; background: rgba(168, 142, 93, .4); }
.retro-row.is-life .retro-bars i.is-active { background: #a88e5d; box-shadow: 0 0 1px rgba(168, 142, 93, .22); }
.retro-row b { min-width: 0; overflow: visible; text-align: right; font-weight: inherit; }

.font-preview-note { margin: 9px 0 15px; color: var(--ink-soft); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-align: center; text-transform: uppercase; }

.loading-composer { width: min(100%, 360px); margin: 0 auto; display: grid; border: 1px solid var(--night-rule); border-radius: 28px; padding: clamp(18px, 5.5vw, 24px); background: var(--night-card); }
.loading-current-stage { min-height: 15px; margin: 0 0 27px; color: var(--gold); font-size: 11px; font-weight: 800; line-height: 1.35; letter-spacing: .11em; text-align: center; text-transform: uppercase; }
.loading-stage-list { display: grid; gap: 24px; }
.loading-stage { min-width: 0; opacity: .58; transition: opacity .22s ease; }
.loading-stage-copy { margin-bottom: 8px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; }
.loading-stage-number { color: rgba(255, 255, 255, .3); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.loading-label { display: block; min-width: 0; margin: 0; color: rgba(255, 255, 255, .66); font-size: 12px; line-height: 1.25; }
.loading-percent { min-width: 38px; color: rgba(255, 255, 255, .38); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .01em; text-align: right; }
.loading-stage-track { height: 10px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); }
.loading-stage-fill { width: 100%; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--brown), var(--gold)); box-shadow: 0 0 15px rgba(201, 162, 83, .18); transform: scaleX(0); transform-origin: left center; will-change: transform; }
.loading-stage.is-working, .loading-stage.is-ready { opacity: 1; }
.loading-stage.is-working .loading-stage-number, .loading-stage.is-working .loading-percent { color: var(--gold); }
.loading-stage.is-working .loading-label { color: rgba(255, 255, 255, .9); }
.loading-stage.is-ready .loading-stage-number { color: #8ec6a1; }
.loading-stage.is-ready .loading-label { color: rgba(255, 255, 255, .88); }
.loading-stage.is-ready .loading-percent { color: #8ec6a1; }

@media (max-height: 700px) {
  .benefit-visual.is-lock-screen .hero-phone { max-height: 39vh; }
  .evidence-card { padding: 17px; }
  .study-chart { margin-top: 18px; }
  .evidence-copy { margin-top: 17px; font-size: 13px; }
  .index-chart { height: 142px; margin-top: 9px; border-radius: 17px; }
  .index-value { padding: 4px 7px; font-size: 10px; }
  .index-value.is-after { font-size: 12px; }
  .index-label { bottom: 5px; font-size: 8px; }
  .distraction-note { margin-top: 10px; padding-block: 8px; font-size: 11px; }
  .mindfulness-evidence .study-note { margin-top: 8px; font-size: 9px; }
  .loading-composer { padding: 16px; }
  .loading-current-stage { margin-bottom: 18px; }
  .loading-stage-list { gap: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .index-area, .index-line-echo, .index-line, .index-point { animation: none; }
  .index-line-echo { opacity: 1; }
  .index-line { stroke-dashoffset: 0; }
  .index-point { opacity: 1; }
}

.decline-offer { width: 100%; text-align: center; white-space: nowrap; }

/* Preserve the personalized widget and explain account access at the buying decision. */
.paywall-heading h1 { font-size: clamp(30px, 8vw, 38px); }
.paywall-heading > p:last-child { color: #c5bfb3; font-size: 16px; line-height: 1.5; }
.paywall-preview { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 18px; padding: 18px 0 24px; }
.paywall-widget { min-width: 0; }
.paywall-widget .widget-preview { width: 100%; }
.paywall-preview h2 { margin: 5px 0; font-size: 19px; }
.paywall-preview p { margin: 5px 0; color: #c5bfb3; font-size: 13px; line-height: 1.45; }
.paywall-preview .paywall-kicker { color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.paywall-preview small { display: block; margin-top: 8px; color: #aaa398; font-size: 11px; line-height: 1.4; }
.paywall-benefits { list-style: none; padding: 0; margin: 18px 0 28px; display: grid; gap: 14px; }
.paywall-benefits li { padding-left: 14px; border-left: 2px solid var(--gold); }
.paywall-benefits strong, .paywall-benefits span { display: block; }
.paywall-benefits strong { font-size: 15px; }
.paywall-benefits span { margin-top: 4px; font-size: 13px; line-height: 1.5; color: #c5bfb3; }
.paywall-section-title { font-size: 20px; margin: 0 0 6px; }
.paywall-plan-note { margin: 0 0 18px; color: #c5bfb3; font-size: 13px; line-height: 1.5; }
.paywall-content .plan-name small, .paywall-content .plan-price small, .paywall-content .billing-note { color: #c5bfb3; }
.paywall-activation { border-top: 1px solid var(--night-rule); margin-top: 24px; padding-top: 22px; }
.paywall-activation h2 { font-size: 18px; margin: 0 0 16px; }
.paywall-activation ol { margin: 0 0 16px; padding-left: 24px; display: grid; gap: 14px; }
.paywall-activation li { padding-left: 5px; color: var(--gold); }
.paywall-activation strong { display: block; color: var(--night-text); font-size: 14px; }
.paywall-activation span { display: block; color: #c5bfb3; font-size: 13px; line-height: 1.5; margin-top: 4px; }
.paywall-activation .text-link { color: var(--gold); font-size: 13px; display: inline-block; padding: 10px 0; }
.paywall-faq { border-bottom: 1px solid var(--night-rule); }
.paywall-faq summary { padding: 18px 0; cursor: pointer; font-size: 14px; font-weight: 700; }
.paywall-faq summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.paywall-faq p { color: #c5bfb3; font-size: 13px; line-height: 1.6; margin: 0 0 18px; }
.screen[data-step="paywall"] .action-footer { padding: 8px 0 0; margin-top: 0; }
.screen[data-step="paywall"] .decline-offer { width: 100%; text-align: center; padding: 16px 12px; margin-bottom: 24px; }
@media (max-width: 360px) { .paywall-preview { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; } .paywall-preview h2 { font-size: 17px; } }

/* The shorter question flow and compact offer share the existing Stoic palette. */
.selection-hint { margin: 12px 0 0; font-size: 14px; color: var(--ink-soft); font-weight: 500; }
.is-dark .selection-hint { color: #c5bfb3; }
.option-card { min-height: 64px; padding-block: 17px; }
.option-copy strong { font-size: 17px; }
.study-source { color: var(--gold); font-size: 13px; margin-bottom: 20px; }
.mindfulness-chart { margin-top: 24px; }
.mindfulness-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.mindfulness-result strong { font-size: 42px; }
.benefit-subtitle { text-align: center; color: #c5bfb3; font-size: 17px; }
.phone-demo { height: min(53svh, 430px); position: relative; margin: 20px auto 0; }
.phone-demo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.home-screen-preview { aspect-ratio: 9 / 19.5; border: 6px solid #29272b; outline: 1px solid #655f65; width: min(65vw, 250px); border-radius: 34px; }
.home-screen-body { padding-top: 22cqw; }
.phone-island { position: absolute; z-index: 5; width: 30%; height: 5%; border-radius: 20px; background: #080809; top: 3%; left: 35%; }
.proof-content { text-align: center; }
.proof-content h1 { font-size: 32px; }
.proof-total { display: grid; gap: 4px; margin: 30px 0 0; }
.proof-total strong { color: var(--gold); font-size: 76px; font-weight: 800; letter-spacing: -.06em; line-height: 1; }
.proof-total span { color: #c5bfb3; font-size: 18px; }
.proof-stars { width: 240px; height: auto; margin: 20px auto; }
.review { text-align: left; padding: 24px; background: #f6f1e7; color: #1c1a17; border-radius: 22px; }
.review img { width: 145px; height: 40px; object-fit: contain; display: block; margin-bottom: 16px; }
.review p { font-size: 21px; line-height: 1.45; font-weight: 600; margin-bottom: 16px; }
.review cite { color: #62584c; font-size: 13px; font-style: normal; }
.loading-brand { text-align: center; margin: 8px 0 26px; }
.loading-brand img { border-radius: 18px; }
.loading-stage-list { gap: 20px; }
.loading-stage { padding: 20px; border-radius: 16px; }
.loading-proof { text-align: center; margin-top: 36px; }
.loading-proof strong { color: var(--gold); font-size: 18px; }
.loading-proof p { margin-top: 8px; color: #c5bfb3; font-size: 14px; }
.offer-banner { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 19; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; margin: 0 0 28px; background: #e7bd69; color: #221b0f; border-radius: 0 0 12px 12px; }
.offer-banner span { font-size: 13px; font-weight: 700; }
.offer-banner strong { font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.offer-ticket { text-align: center; border: 1px solid var(--gold); padding: 35px 12px; border-radius: 24px; margin-top: 15px; background: #28231b; }
.offer-ticket span { color: #d0c4b0; font-size: 17px; }
.offer-ticket strong { display: block; color: #edc876; font-size: clamp(54px, 16vw, 76px); letter-spacing: -.04em; margin: 10px 0; line-height: 1; }
.offer-ticket p { margin-bottom: 0; font-size: 18px; }
.offer-summary { text-align: center; line-height: 2.2; color: #c5bfb3; margin: 24px 0 0; }
.offer-summary strong { color: #fbf7ef; }
.offer-summary s { margin: 0 5px 0 8px; color: #aaa091; }
.screen[data-step="paywall"] { padding-top: 18px; }
.paywall-heading { margin-bottom: 24px; }
.paywall-heading h1 { font-size: 30px; }
.paywall-content h2, .paywall-details h2 { font-size: 21px; text-align: center; margin: 0 0 22px; }
.plan-grid { display: grid; gap: 16px; }
.plan-card { position: relative; display: flex; gap: 12px; align-items: center; padding: 22px 14px; border-radius: 18px; min-height: 88px; }
.plan-card.is-selected { border-color: var(--gold); background: #29241b; box-shadow: 0 0 0 1px var(--gold); }
.plan-choice { flex: 0 0 20px; height: 20px; border: 1.5px solid #70685c; border-radius: 50%; }
.is-selected .plan-choice { border: 6px solid var(--gold); background: #211d16; }
.plan-name { flex: 1; }
.plan-name strong { font-size: 20px; }
.plan-name small { font-size: 13px; margin-top: 6px; }
.plan-name s { color: #a49b8f; margin-right: 5px; }
.plan-price { text-align: right; }
.plan-price strong { font-size: 22px; color: var(--gold); }
.plan-price small { font-size: 11px; margin-top: 4px; }
.plan-card[data-plan="lifetime"] .plan-price strong, .plan-card[data-plan="lifetime_save"] .plan-price strong { font-size: 14px; }
.popular-badge { position: absolute; top: -11px; right: 16px; background: var(--gold); color: #20190e; padding: 4px 12px; border-radius: 20px; font-size: 10px; font-weight: 800; letter-spacing: .05em; }
.billing-note { font-size: 12px; line-height: 1.5; text-align: center; margin: 16px 0 4px; }
.checkout-trust { text-align: center; color: #bdb4a7; font-size: 11px; margin: 12px 0 30px; }
.paywall-benefits { margin: 0 0 24px; gap: 17px; }
.paywall-benefits li { font-size: 15px; line-height: 1.4; padding-left: 15px; }
.paywall-faq summary { padding: 16px 0; }
.legal-links { margin-top: 20px; text-align: center; }
.app-link { display: block; text-align: center; text-decoration: none; }
@media (max-width: 360px) { .plan-card { gap: 9px; padding-inline: 10px; } .plan-name strong { font-size: 18px; } .plan-price strong { font-size: 20px; } .plan-name small { font-size: 12px; } }

.proof-date { font-size: 11px; color: #b9afa1; margin: 10px 0 24px; }
.proof-ratings { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.proof-ratings strong { font-size: 24px; color: var(--gold); }
.proof-ratings span { font-size: 15px; color: #c5bfb3; }
.is-dark .review p { color: #1c1a17; }

/* Mobile polish: preserve source device proportions, with room to read. */
.screen.from-intro .screen-heading { animation: questionReveal .65s .06s both; }
.screen.from-intro .option-card { animation: questionReveal .55s both; }
.screen.from-intro .option-card:nth-child(1) { animation-delay: .16s; }
.screen.from-intro .option-card:nth-child(2) { animation-delay: .23s; }
.screen.from-intro .option-card:nth-child(3) { animation-delay: .30s; }
.screen.from-intro .option-card:nth-child(4) { animation-delay: .37s; }
.screen.from-intro .action-footer { animation: questionReveal .55s .42s both; }
@keyframes questionReveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.benefit-composition.is-right-place { height: clamp(390px, 59svh, 570px); width: 100%; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.benefit-composition.is-right-place::after { display: none; }
.benefit-composition.is-right-place .benefit-composition-bg { display: none; }
.benefit-composition.is-right-place .is-lock-screen { top: 8%; left: 1%; width: 58%; }
.benefit-composition.is-right-place .is-home-screen { top: 2%; right: 0; width: 60%; }
.phone-demo { height: clamp(400px, 58svh, 550px); margin-top: 12px; }
.phone-demo img { object-fit: contain; object-position: center; border-radius: 28px; }
.study-story { padding: 4px 0 0; text-align: center; }
.study-sample { display: inline-flex; gap: 10px; padding: 8px 15px; border: 1px solid #494333; background: #252219; color: #e0c78a; font-size: 13px; border-radius: 30px; margin: 0 0 17px; }
.study-sample span { color: #9f9275; }
.study-summary { max-width: 355px; margin: 0 auto 24px; color: #c9c2b8; font-size: 16px; line-height: 1.5; }
.study-summary strong { color: #fbf7ef; font-weight: 700; }
.study-story .mindfulness-chart { margin: 0; padding: 0; }
.study-grid path { fill: none; stroke: #ffffff12; stroke-width: 1; }
.study-area { fill: url(#study-wash); }
.study-guide { fill: none; stroke: #aec4b6; stroke-width: 1.5; stroke-dasharray: 5 6; opacity: .55; }
.study-trend { fill: none; stroke: url(#study-stroke); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: studyTrace 1.5s .15s cubic-bezier(.2,.6,.3,1) forwards; }
@keyframes studyTrace { to { stroke-dashoffset: 0; } }
.study-callout rect, .study-callout path { fill: #9bc8af; }
.study-callout text { fill: #10271b; font-size: 22px; font-weight: 800; }
.study-callout .callout-caption { font-size: 11px; font-weight: 700; }
.study-axis { fill: #c8c0b4; font-size: 12px; font-weight: 600; }
.study-axis.before { fill: #d39a8a; }
.study-axis.after { fill: #aad0b9; }
.mindfulness-chart figcaption { color: #9c9488; font-size: 11px; margin-top: 0; }
.study-takeaway { margin: 24px 0 0; color: #d3c7b3; font-size: 15px; }
.decline-pill { align-self: center; min-height: 44px; margin: 12px 0 0; padding: 10px 28px; border: 1px solid #514a40; border-radius: 30px; background: transparent; color: #d5cbbd; font-size: 13px; cursor: pointer; }
.decline-pill:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.proof-ratings { margin-top: 25px; }
@media (max-height: 720px) { .benefit-composition.is-right-place { min-height: 360px; } .phone-demo { min-height: 380px; } }
@media (prefers-reduced-motion: reduce) { .screen.from-intro .screen-heading, .screen.from-intro .option-card, .screen.from-intro .action-footer { animation: none; } .study-trend { animation: none; stroke-dashoffset: 0; } }
.benefit-composition.is-right-place { height: auto; min-height: 0; aspect-ratio: .72; }

/* Two-week comparison, two visible device demos, and final offer flow. */
.exposure-study { text-align: center; }
.exposure-study .study-sample { margin-top: 20px; }
.exposure-study .study-summary { margin: 18px 0 14px; }
.exposure-chart svg { display:block; width:100%; height:auto; overflow:visible; }
.exposure-control { fill:none; stroke:#c9a5a0; stroke-width:3; stroke-linecap:round; }
.exposure-widget { fill:none; stroke:url(#exposure-color); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; animation:drawExposure 1.5s .15s ease-out forwards; }
.exposure-callout rect { fill:#a4c8b0; }
.exposure-callout text { fill:#17382c; font-size:22px; font-weight:800; }
.exposure-callout .callout-caption { font-size:12px; font-weight:600; }
.chart-axis { fill:#c2b7a9; font-family:var(--font-ui); font-size:12px; }
.chart-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 18px; font-size:12px; }
.chart-legend span::before { content:""; display:inline-block; width:17px; height:3px; margin:0 6px 3px 0; border-radius:2px; }
.legend-widget { color:#b7d3bf; }.legend-widget::before { background:#a4c8b0; }
.legend-control { color:#d4b7b3; }.legend-control::before { background:#c9a5a0; }
.study-method { font-size:13px; line-height:1.5; color:#c4bcaf; margin:22px 5px 0; }
@keyframes drawExposure { to { stroke-dashoffset:0; } }
.phone-demo { position:relative; height:auto; min-height:0; aspect-ratio:.73; margin:18px 0 0; }
.phone-demo img { inset:auto; height:auto; object-fit:contain; opacity:1; max-width:none; filter:drop-shadow(0 18px 18px #0006); }
.phone-demo .demo-lock { width:60%; left:1%; top:4%; border-radius:27px; transform:rotate(-7deg); animation:lockSettle .8s ease-out both; }
.phone-demo .demo-home { width:60%; right:1%; top:13%; border:4px solid #494443; border-radius:27px; transform:rotate(6deg); animation:homeSettle .9s .12s ease-out both; }
@keyframes lockSettle { from { opacity:0; transform:translateY(25px) rotate(-11deg); } to { opacity:1; transform:translateY(0) rotate(-7deg); } }
@keyframes homeSettle { from { opacity:0; transform:translateY(35px) rotate(10deg); } to { opacity:1; transform:translateY(0) rotate(6deg); } }
.theme-tabs { margin:20px 0; gap:8px; align-items:stretch; }
.theme-tab { min-height:44px; }
.theme-grid { row-gap:18px; }
@keyframes readyReveal { from { opacity:0; transform:translateY(16px) rotate(0deg) scale(.94); } to { opacity:1; transform:rotate(-3deg) scale(1); } }
.exit-choices { display:grid; gap:14px; margin-top:24px; }
.exit-choice { min-height:64px; padding:18px 20px; border:1px solid #ffffff24; border-radius:18px; text-align:left; color:#fbf7ef; background:#242027; font:600 17px var(--font-ui); cursor:pointer; transition:background .18s,transform .18s; }
.exit-choice:hover { background:#36302b; transform:translateY(-2px); }
.exit-choice:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
body.is-save-offer { color:#172d24; background:#d8e5d3; }
.is-save-offer .funnel-header { background:#d8e5d3; border-color:#214d2e15; }
.is-save-offer .progress-track { background:#31503b20; }
.is-save-offer .offer-banner { color:#e7f2dd; background:#254c37; }
.save-intro { text-align:center; margin-top:22px; animation:readyReveal .6s ease-out both; }
.save-eyebrow { font-size:11px; letter-spacing:.16em; margin:0 0 8px; color:#365441; font-weight:700; }
.save-discount { font-size:clamp(48px,15vw,64px); line-height:1; font-weight:900; letter-spacing:-.05em; }
.save-intro>p:last-child { margin:10px 0 0; font-size:17px; color:#365441; }
.is-save-offer .paywall-heading { margin-top:20px; }
.is-save-offer .paywall-heading h1 { color:#193326; font-size:29px; }
.is-save-offer .paywall-content h2 { color:#365441; font-size:17px; }
.is-save-offer .plan-card, .is-save-offer .plan-card.is-selected { background:#f9fcf5; border-color:#476749; color:#193326; }
.is-save-offer .plan-name strong, .is-save-offer .plan-price strong { color:#193326; }
.is-save-offer .plan-name small, .is-save-offer .plan-price small { color:#50604f; }
.is-save-offer .plan-choice { background:#315d3d; border-color:#315d3d; }
.is-save-offer .primary-button { background:#234e35; color:#f8f5e8; }
.is-save-offer .billing-note, .is-save-offer .checkout-trust { color:#40543f; }
.is-save-offer .paywall-details, .is-save-offer .paywall-details h2, .is-save-offer .paywall-faq summary { color:#193326; }
.is-save-offer .paywall-faq p, .is-save-offer .legal-links { color:#40543f; }
.is-save-offer .paywall-faq, .is-save-offer .legal-links { border-color:#315d3d30; }
.is-save-offer .paywall-benefits li { border-color:#527756; }
@media(prefers-reduced-motion:reduce) { .phone-demo .demo-lock,.phone-demo .demo-home { animation:none; opacity:1; } .exposure-widget { animation:none; stroke-dashoffset:0; } .ready-widget,.save-intro,.intro-brand-splash { animation:none; } }

.exposure-chart { display:block; height:auto; margin:20px 0 10px; }
.exposure-study .chart-caption { font-size:11px; color:#a89e90; margin:14px 0 0; }
.phone-demo .demo-lock { width:55%; left:8%; }
.phone-demo .demo-home { width:55%; right:7%; }
.is-save-offer .save-plan .plan-price strong { font-size:38px; font-weight:850; letter-spacing:-.04em; }

/* Final simplification: clear chart, clean phone, and compact progress. */
.exposure-sample { display:flex; justify-content:center; align-items:center; gap:22px; margin:26px auto; color:#c6c0b6; font-size:13px; }
.exposure-sample span { display:flex; align-items:baseline; gap:6px; }
.exposure-sample span+span { border-left:1px solid #ffffff30; padding-left:22px; }
.exposure-sample strong { color:#f2ddb1; font-size:20px; font-weight:700; }
.exposure-study .study-summary { margin:22px 0 30px; }
.exposure-control { stroke:#ef9a78; stroke-width:3.5; stroke-dasharray:7 5; }
.legend-control { color:#f0b49b; }.legend-control::before { background:#ef9a78; }
.legend-widget { color:#a8e4c1; }.legend-widget::before { background:#78d5b5; }
.exposure-callout rect { fill:#a8e4c1; }
.home-screen-preview { width:min(68vw,272px); border:5px solid #353638; outline:1px solid #737478; border-radius:38px; background:#23282e; }
.home-screen-wallpaper { background:#23282e; }
.home-screen-wallpaper img { width:100%; height:100%; object-fit:cover; object-position:center; }
.home-screen-scrim { background:linear-gradient(#0004,transparent 45%,#0005); }
.phone-island { width:29%; height:4.5%; top:2.5%; left:35.5%; border-radius:999px; }
.phone-status { position:absolute; z-index:4; top:4%; left:9%; right:9%; display:flex; justify-content:space-between; color:white; font-size:3.6cqw; font-weight:700; line-height:1; }
.home-screen-body { padding:25cqw 6cqw 6cqw; }
.home-screen-widget { width:100%; margin:0; }
.home-screen-app-row { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4cqw; margin-top:7cqw; }
.home-screen-app { gap:2cqw; font-size:3cqw; text-shadow:none; }
.home-screen-app img { width:18cqw; height:18cqw; object-fit:cover; border-radius:4.4cqw; box-shadow:none; }
.home-screen-search { margin-bottom:5cqw; padding:2cqw 5cqw; font-size:3cqw; }
.home-screen-dock { width:100%; gap:3cqw; padding:3cqw 2cqw; border-radius:8cqw; background:#ffffff24; }
.home-screen-dock .home-screen-app img { width:18cqw; height:18cqw; }
.loading-composer { border:0; background:transparent; padding:4px 6px 18px; width:min(100%,360px); }
.loading-brand { margin:14px auto 20px; }
.loading-ring { --loading-angle:0deg; width:156px; height:156px; padding:5px; border-radius:50%; background:conic-gradient(from -90deg,#9ce0be 0deg,#d6b369 var(--loading-angle),#ffffff12 var(--loading-angle),#ffffff12 360deg); }
.loading-ring-center { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:var(--night); border-radius:50%; }
.loading-ring-center img { width:58px; height:58px; border-radius:16px; }
.loading-ring-center strong { font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; color:#d5e8d6; }
.loading-current-stage { margin:0 0 28px; font-size:12px; letter-spacing:.03em; text-transform:none; color:#c5ddce; }
.loading-stage-list { gap:12px; }
.loading-stage { --stage-color:#9fd4b5; padding:16px; border-radius:18px; background:#ffffff05; border:1px solid #ffffff0b; opacity:.6; }
.loading-stage:nth-child(2) { --stage-color:#d9bd82; }
.loading-stage:nth-child(3) { --stage-color:#d9a294; }
.loading-stage.is-working { background:#ffffff09; border-color:#ffffff25; }
.loading-stage-copy { grid-template-columns:22px minmax(0,1fr) auto; gap:8px; margin-bottom:11px; }
.loading-label { font-size:14px; }
.loading-stage-number { font-size:10px; }
.loading-stage-track { height:5px; }
.loading-stage-fill { background:var(--stage-color); box-shadow:none; }
.loading-stage.is-working .loading-stage-number,.loading-stage.is-working .loading-percent,.loading-stage.is-ready .loading-percent { color:var(--stage-color); }
.loading-proof { margin-top:26px; }
.loading-proof strong { font-size:13px; font-weight:600; color:#b6afa2; }
.loading-proof p { font-size:14px; margin-top:12px; }
@media(max-height:720px) { .home-screen-preview { width:min(62vw,230px); } .loading-brand { margin-top:0; } .loading-ring { width:132px; height:132px; } .loading-stage { padding:13px; } }
.home-icon-mask { display:block; width:18cqw; height:18cqw; overflow:hidden; border-radius:4.4cqw; flex:none; }
.home-screen-app .home-icon-mask img { width:100%; height:100%; max-width:none; transform:none; border-radius:0; }
.home-screen-dock .home-screen-app>.home-icon-mask { display:block; }

/* Fixed-height widget interiors keep all rows within their square at any size. */
.widget-retro { display:flex; flex-direction:column; }
.retro-header { flex:none; font-size:3.7cqw; letter-spacing:.32cqw; }
.retro-divider { flex:none; }
.retro-rows { flex:1; min-height:0; height:auto; }
.widget-year { display:flex; flex-direction:column; }
.year-header { height:auto; flex:none; }
.year-header b { font-size:6cqw; }
.year-header small { font-size:3.4cqw; margin-top:1cqw; }
.year-grid { flex:1; min-height:0; height:auto; gap:.75cqw; margin-top:4cqw; grid-template-rows:repeat(20,minmax(0,1fr)); }
.year-grid i { height:100%; width:auto; max-width:100%; justify-self:center; }
.home-screen-preview { border:4px solid #171719; outline:1px solid #747477; box-shadow:0 24px 50px #0006,0 0 0 3px #29292c; border-radius:38px; }
.home-screen-body { padding:25cqw 6cqw 5cqw; }
.home-screen-app { text-shadow:0 1px 3px #000b; font-family:-apple-system,BlinkMacSystemFont,sans-serif; font-weight:400; }
.home-screen-app-row { margin-top:8cqw; }
.home-icon-mask { width:16cqw; height:16cqw; border-radius:3.8cqw; box-shadow:0 2px 4px #0002; }
.home-screen-dock { padding:4cqw 2cqw; background:#ffffff30; backdrop-filter:blur(20px) saturate(1.5); border-radius:9cqw; }
.phone-signal { display:flex; align-items:center; gap:1.5cqw; }
.phone-signal svg { width:7cqw; height:3.5cqw; }

/* Reserve breathing room above Safari's floating bottom controls. Keep long
   screens in normal document flow so every action remains scrollable. */
@media (max-width: 600px) {
  .screen { padding-top:20px; padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
  .action-footer { padding-top:20px; padding-bottom:0; }
  .benefit-composition.is-right-place { width:min(100%, 43svh); }
  .phone-demo { width:min(100%, 41svh); margin-inline:auto; }
  .study-story .mindfulness-chart { width:min(100%, 43svh); margin-inline:auto; }
  .proof-total { margin-top:22px; }
  .proof-total strong { font-size:64px; }
  .proof-stars { width:200px; margin:14px auto; }
}

/* Widget choice and wallpaper are independent parts of the preview. */
.screen[data-step="widget"] .screen-content { margin-block:auto; padding-block:30px 18px; }
.carousel { position:relative; grid-auto-columns:100%; padding:12px 9% 20px; scroll-padding-inline:9%; gap:18px; perspective:1000px; }
.carousel-card { scroll-snap-align:center; padding:18px; border-radius:28px; background:#1c1b20; transition:transform .3s,box-shadow .3s; }
.carousel-card.is-selected { box-shadow:0 14px 28px #0004,0 0 0 1px #c9a253; }
.carousel.is-touring { scroll-snap-type:none; }
.carousel.is-touring .carousel-card { transition:none; will-change:transform,opacity; }
.carousel-copy { padding-top:20px; }
.carousel-copy small { line-height:1.55; }
.widget-memento { background:linear-gradient(145deg,#243d56,#101a29); }
.widget-retro { background:#302920; color:#f6e7ca; }
.widget-year { background:#eee5d2; color:#30291e; }
.widget-year .year-header small { color:#746653; }
.widget-year .year-grid i { background:#d0c4ae; }
.widget-year .year-grid i.is-done { background:#8c6740; }
.screen[data-step="theme"] { padding-top:18px; }
.screen[data-step="theme"] .screen-heading { margin-bottom:18px; }
.theme-grid { gap:10px 9px; }
.theme-image { aspect-ratio:auto; height:clamp(44px,calc((100svh - 440px)/3),126px); border-radius:13px; }
.theme-name { font-size:10px; margin-top:4px; }
.theme-tab { padding:9px 4px; }
.screen[data-step="theme"] .action-footer { padding-top:16px; }
.loading-composer { padding:8px 0 0; }
.loading-brand { margin:22px auto; }
.loading-ring { width:140px; height:140px; padding:3px; background:conic-gradient(from -90deg,#faf1d8 0deg,#c9a253 var(--loading-angle),#ffffff10 var(--loading-angle),#ffffff10 360deg); }
.loading-ring-center strong { color:#f8efd9; }
.loading-current-stage { color:#d8c79e; margin-bottom:22px; }
.loading-stage,.loading-stage:nth-child(2),.loading-stage:nth-child(3) { --stage-color:#c9a253; border:0; background:transparent; padding:12px 4px; }
.loading-stage:nth-child(2) { --stage-color:#e6d8b6; }
.loading-stage:nth-child(3) { --stage-color:#c8d0c3; }
.loading-stage-list { gap:8px; }
.loading-stage-track { height:3px; }
.loading-proof { margin-top:32px; }
.proof-badges { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.proof-badge { position:relative; isolation:isolate; background:var(--night); aspect-ratio:1; display:grid; place-items:center; }
.proof-badge img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; mix-blend-mode:screen; opacity:.88; }
.proof-badge span { position:relative; display:grid; gap:5px; text-align:center; padding-bottom:3px; }
.proof-badge strong { color:#f7eedb; font-size:clamp(16px,4.4vw,21px); font-weight:800; letter-spacing:-.055em; line-height:1; white-space:nowrap; }
.proof-badge small { font-size:10px; font-weight:500; color:#c4b99e; letter-spacing:.02em; }
.loading-proof p { font-size:12px; color:#aaa397; margin-top:16px; }
.widget-quote .widget-shade { background:linear-gradient(160deg,#080b0d55,#080b0dcc); }
.widget-quote blockquote { font-weight:600; letter-spacing:-.035em; line-height:1.4; }
.funnel-header[hidden] { display:none; }
.screen[data-step="paywall"] { min-height:100svh; padding-top:30px; }
.exposure-sample { margin-top:28px; margin-bottom:24px; }
.screen[data-step="glances"] .study-summary { margin:0 0 24px; }
@media(prefers-reduced-motion:reduce) { .carousel-card { transition:none; } }


.brand[hidden] { display:none; }

/* Keep animated proof digits steady as their values grow. */
[data-proof-count] { font-variant-numeric:tabular-nums; }
.proof-total strong > [data-proof-count], .proof-ratings strong > [data-proof-count] { font:inherit; color:inherit; }

.exit-choice { display:flex; align-items:center; gap:14px; }
.exit-choice-emoji { flex:none; font-size:23px; line-height:1; }

/* Illustrated Stoic journey */
:root { --paper:#fff6ed; --paper-card:#fffdf9; --paper-deep:#fae7d6; --ink:#302a26; --ink-soft:#75675e; --brown:#b44621; --gold:#fa783f; --night:#171b1b; --night-card:#242b2a; --night-selected:#363126; --surface-selected:#ffeadb; --rule:#e9d5c6; }
body { background:var(--paper); }
body.is-dark { background:var(--night); }
.primary-button,.is-dark .primary-button { background:#ff814b; color:#23180f; box-shadow:none; border-radius:16px; }
.primary-button:focus-visible,button:focus-visible,a:focus-visible { outline:3px solid #ca562e; outline-offset:4px; }
.screen { padding-top:26px; }
.screen h1 { line-height:1.14; letter-spacing:-.035em; }
.screen[data-step="outcome"] h1 { font-size:clamp(26px,7vw,34px); }
.option-card { min-height:72px; box-shadow:none; border-radius:16px; }
.option-copy strong { line-height:1.4; }
.option-emoji { background:transparent; }
.header-row { height:60px; }
.brand { color:var(--brown); }
.is-dark .brand { color:var(--gold); }
.milestone-progress { position:relative; display:flex; justify-content:space-between; align-items:center; height:18px; margin:0 4px; }
.milestone-progress .progress-track { position:absolute; left:5px; right:5px; height:3px; overflow:hidden; }
.progress-fill { background:var(--gold); }
.milestone-dot { position:relative; width:10px; height:10px; border:2px solid #dfbfa9; border-radius:50%; background:var(--paper); box-shadow:0 0 0 5px var(--paper); }
.is-dark .milestone-dot { background:var(--night); box-shadow:0 0 0 5px var(--night); }
.milestone-dot.is-reached { border-color:var(--gold); background:var(--gold); }
.progress-section { text-align:center; color:var(--brown); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; margin:8px 0 0; }
.is-dark .progress-section { color:var(--gold); }
.screen[data-step="welcome"],.screen[data-step="proof"] { min-height:100svh; padding-top:20px; }
.hero-brand { display:flex; align-items:center; justify-content:center; gap:9px; font-size:16px; font-weight:800; color:#ffc297; z-index:2; }
.hero-brand img { border-radius:8px; }
.hero-art { position:relative; height:clamp(310px,48svh,430px); margin:14px -12px 16px; }
.hero-illustration { display:block; width:100%; height:100%; object-fit:cover; object-position:center top; border-radius:24px; mask-image:linear-gradient(#000 85%,transparent); }
.hero-widget { position:absolute; filter:drop-shadow(0 9px 12px #0008); }
.hero-widget-one { left:0; bottom:4%; width:35%; transform:rotate(-7deg); z-index:2; }
.hero-widget-two { right:0; bottom:8%; width:31%; transform:rotate(6deg); z-index:1; }
.hero-widget-three { left:37%; bottom:-2%; width:29%; transform:rotate(2deg); z-index:3; }
.hero-widget .widget-preview { width:100%; height:auto; aspect-ratio:1; border:1px solid #f6dec344; border-radius:18px; }
.hero-widget .widget-quote-copy { inset:12%; padding:0; }
.hero-widget .widget-quote-copy blockquote { font-size:clamp(12px,3.3vw,15px); line-height:1.35; }
.hero-widget .widget-quote-copy cite { font-size:8px; }
.hero-widget .widget-sisyphus strong { font-size:clamp(10px,2.8vw,13px); }
.hero-widget .widget-memento { padding:12px 6px 9px; font-family:var(--font-ui); }
.hero-widget .memento-eyebrow { font-size:7px; letter-spacing:.08em; }
.hero-widget .memento-days { font-size:25px; line-height:1.1; margin-top:4px; }
.hero-widget .memento-label { font-size:7px; letter-spacing:.08em; }
.hero-widget .memento-stats { margin-top:7px; gap:9px; }
.hero-widget .memento-stats b { font-size:10px; }
.hero-widget .memento-stats small { font-size:6px; }
.hero-copy { text-align:center; position:relative; }
.hero-copy h1,.proof-content h1 { font-family:var(--font-ui); font-size:clamp(32px,8.4vw,40px); font-weight:800; }
.hero-copy em,.proof-content em { font-style:normal; color:#ff985f; }
.hero-copy p { color:#c9c5b9; font-size:16px; line-height:1.5; margin:14px 0 0; }
.proof-content { text-align:center; display:flex; flex-direction:column; justify-content:center; }
.proof-content h1 { margin:12px 0 30px; }
.proof-laurels { display:grid; grid-template-columns:1fr 1fr; gap:24px 10px; width:100%; margin:0 auto; }
.laurel-badge { position:relative; min-height:156px; display:grid; place-items:center; }
.laurel-badge:first-child { grid-column:1/-1; width:100%; max-width:340px; min-height:186px; margin:auto; }
.gold-laurels { position:absolute; width:100%; height:100%; color:#dcb779; overflow:visible; }
.laurel-badge div { z-index:1; width:65%; }
.laurel-badge strong { display:block; font-family:var(--font-ui); font-weight:800; font-size:28px; color:#f5d69b; line-height:1.1; letter-spacing:-.04em; }
.laurel-badge:first-child strong { font-size:28px; max-width:150px; margin:auto; }
.laurel-badge span { display:block; font-size:12px; line-height:1.5; margin-top:9px; color:#e9e2d6; }
.laurel-badge:first-child span { max-width:160px; margin:9px auto 0; font-size:14px; }
.callback-content { text-align:center; }
.callback-content h1 { font-family:var(--font-ui); font-weight:800; font-size:clamp(27px,7.5vw,34px); }
.callback-widget,.summary-widget { width:min(84%,290px); margin:38px auto 0; transform:rotate(-2deg); }
.callback-widget .widget-preview,.summary-widget .widget-preview { width:100%; aspect-ratio:1; height:auto; border:1px solid #ffffff33; box-shadow:0 20px 35px #0004; }
.quote-source { color:#b9b5a9; font-size:11px; line-height:1.6; margin:26px 0 0; }
.growth-content { display:flex; flex-direction:column; justify-content:center; text-align:center; }
.growth-symbol { color:#f5d69b; font-size:48px; margin-bottom:24px; }
.growth-content h1 { font-size:clamp(32px,8.6vw,40px); }
.growth-content p { color:#c9c5b9; font-size:17px; line-height:1.5; margin:20px auto 12px; max-width:280px; }
.growth-chart { display:block; width:100%; height:auto; margin:32px auto; overflow:visible; }
.summary-details { margin:30px 0 0; }
.summary-details div { display:flex; gap:12px; justify-content:space-between; padding:14px 0; border-bottom:1px solid #ffffff1f; font-size:14px; }
.summary-details dt { color:#b9b5a9; }
.summary-details dd { text-align:right; margin:0; max-width:65%; }
.summary-note { margin:18px 0 0; color:#b9b5a9; font-size:12px; line-height:1.5; text-align:center; }
@media(min-width:700px) { .screen[data-step="welcome"],.screen[data-step="proof"] { min-height:min(920px,100svh); } .hero-art { margin-left:0; margin-right:0; } }
@media(max-height:740px) { .hero-art { height:310px; } .hero-copy h1 { font-size:32px; } .hero-copy p { margin-top:10px; font-size:14px; } .proof-content h1 { margin:0 0 20px; } .laurel-badge:first-child { min-height:154px; } .laurel-badge { min-height:140px; } .proof-laurels { gap:12px 10px; } }
@media(max-width:350px) { .hero-art { height:300px; }  .laurel-badge strong { font-size:25px; } .laurel-badge span { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
.funnel-shell { overflow-x:clip; }
.edit-choices{align-self:center;border:0;background:none;color:#bcb8ac;font:inherit;font-size:12px;text-decoration:underline;padding:12px;cursor:pointer}
.proof-back{align-self:flex-start;background:none;border:0;color:#bcb8ac;font:inherit;font-size:12px;padding:0 0 12px;cursor:pointer}

/* ── Headway-model variant (?v=headway) ─────────────────────────────────────
   Theme: "Stoa" = marble paper, warm ink, antique gold, laurel green.
   Everything is scoped to body.v-headway so the main flow is untouched. */
body.v-headway { --paper:#f6f1e7; --paper-card:#fffbf3; --paper-deep:#ede5d3; --surface-selected:#efe3c9; --ink:#1c1a17; --ink-soft:#5f5549; --brown:#6b4d2a; --gold:#c9a253; --gold-deep:#a8843c; --laurel:#5f6f4a; --rule:#dcd0b9; --night:#12110e; --night-card:#1e1b16; --night-selected:#2c2618; --night-rule:rgba(246,241,231,.13); --night-text:#f6f1e7; --night-soft:#b9b1a1; }
body.v-headway .primary-button { background:var(--ink); color:var(--paper); border-radius:16px; }
body.v-headway.is-dark .primary-button { background:var(--gold); color:#17130a; }
body.v-headway .primary-button:focus-visible, body.v-headway button:focus-visible, body.v-headway a:focus-visible { outline:3px solid var(--gold-deep); outline-offset:4px; }
body.v-headway .hero-copy em, body.v-headway .proof-content em, body.v-headway h1 em { font-style:normal; color:var(--gold); }
body.v-headway .growth-symbol, body.v-headway .laurel-badge strong { color:var(--gold); }
/* one type scale: every headline identical, every footer at the same height */
body.v-headway .screen h1 { font-family:var(--font-ui); font-size:clamp(27px,7.4vw,34px); line-height:1.14; font-weight:800; letter-spacing:-.035em; }
body.v-headway .screen { padding-bottom:max(20px, env(safe-area-inset-bottom)); }
body.v-headway .action-footer { margin-top:auto; padding-top:20px; padding-bottom:0; }
body.v-headway .selection-hint { margin:12px 0 0; font-size:14px; font-weight:500; }
body.v-headway .is-dark .selection-hint, body.v-headway.is-dark .selection-hint { color:var(--night-soft); }

/* 1 · hero: art bleeds into the page, value prop flows into the choice */
body.v-headway .screen[data-step="outcome"] { position:relative; min-height:100svh; padding-top:0; }
.hc-art { position:relative; height:clamp(250px,47svh,430px); margin:0 -16px; overflow:hidden; }
.hc-art img { width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block; }
.hc-art::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,17,14,.55) 0%, rgba(18,17,14,0) 22%, rgba(18,17,14,0) 52%, var(--night) 100%); }
.hc-brand { position:absolute; top:max(16px, env(safe-area-inset-top)); left:0; right:0; z-index:2; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--night-text); font-size:15px; font-weight:800; letter-spacing:-.01em; }
.hc-brand img { border-radius:7px; }
.hc-body { position:relative; z-index:1; margin-top:-46px; display:flex; flex-direction:column; flex:1; text-align:center; }
.hc-trust { display:inline-flex; align-self:center; align-items:center; gap:6px; margin:0 0 14px; padding:7px 13px; border:1px solid var(--night-rule); border-radius:999px; background:rgba(18,17,14,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--night-soft); font-size:12.5px; line-height:1; }
.hc-trust strong { color:var(--night-text); font-weight:800; }
.hc-stars { color:var(--gold); letter-spacing:.05em; font-size:11px; }
.hc-trust i { width:3px; height:3px; margin:0 3px; border-radius:50%; background:var(--night-soft); opacity:.6; }
.hc-lead { margin:auto 0 0; padding-top:18px; color:var(--night-text); font-size:16px; font-weight:700; line-height:1.45; text-wrap:balance; }
.hc-body h1 { text-wrap:balance; }
.hc-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding-top:12px; }
.hc-card { position:relative; min-height:64px; display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--night-rule); border-radius:16px; color:var(--night-text); background:linear-gradient(180deg, #25211a, var(--night-card)); font-size:16px; font-weight:700; text-align:left; cursor:pointer; transition:transform .14s ease, border-color .14s ease, background-color .14s ease; }
.hc-emoji { font-size:20px; line-height:1; }
.hc-label { flex:1; }
.hc-arrow { color:var(--gold); font-size:15px; opacity:.85; transition:transform .16s ease; }
.hc-card:hover { border-color:rgba(201,162,83,.6); }
.hc-card:hover .hc-arrow { transform:translateX(3px); }
.hc-card:active { transform:scale(.98); }
.hc-card.is-selected { border-color:var(--gold); background:var(--night-selected); box-shadow:0 0 0 1px var(--gold); }
@media(max-height:700px) { .hc-art { height:210px; } .hc-card { min-height:54px; } .hc-lead { font-size:15px; } }

/* 2 · proof: marble, laurel, one big number */
body.v-headway .screen[data-step="proof"] { min-height:100svh; padding-top:20px; }
.hp-content { text-align:center; display:flex; flex-direction:column; align-items:center; }
.hp-art { position:relative; width:min(76%,290px, calc(100svh - 540px)); aspect-ratio:1; margin:4px auto 6px; display:grid; place-items:center; }
.hp-art img { position:relative; z-index:1; width:78%; height:78%; object-fit:cover; border-radius:50%; border:1px solid rgba(201,162,83,.55); box-shadow:0 18px 40px rgba(0,0,0,.5); }
.hp-glow { position:absolute; inset:-18%; border-radius:50%; background:radial-gradient(circle, rgba(201,162,83,.34) 0%, rgba(201,162,83,.08) 45%, rgba(201,162,83,0) 68%); }
.hp-laurel { position:absolute; inset:-6% -14% -2%; color:var(--gold); opacity:.9; }
.hp-laurel svg { width:100%; height:100%; }
.hp-rating { display:flex; align-items:baseline; justify-content:center; gap:9px; margin:16px 0 0; }
.hp-rating strong { font-size:44px; line-height:1; font-weight:800; letter-spacing:-.04em; color:var(--night-text); }
.hp-stars { color:var(--gold); font-size:15px; letter-spacing:.08em; }
.hp-rating small { color:var(--night-soft); font-size:13px; }
.hp-stats { list-style:none; width:100%; margin:16px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hp-stats li { padding:13px 10px; border:1px solid var(--night-rule); border-radius:16px; background:var(--night-card); }
.hp-stats strong { display:block; color:var(--gold); font-size:17px; font-weight:800; letter-spacing:-.02em; }
.hp-stats span { display:block; margin-top:4px; color:var(--night-soft); font-size:12px; line-height:1.4; }
.hp-review { width:100%; margin:12px 0 0; padding:14px 16px; border-radius:16px; background:var(--paper); color:var(--ink); text-align:left; }
.hp-review blockquote { margin:0; font-family:"Noto Serif", Georgia, serif; font-size:15px; line-height:1.45; font-weight:600; }
.hp-review figcaption { margin-top:7px; color:var(--ink-soft); font-size:12px; }
@media(max-height:720px) { .hp-art { width:150px; } .hp-rating strong { font-size:36px; } .hp-review { display:none; } }

.options.chips { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:9px; }
.chip-card { min-height:54px; border:1px solid var(--rule); border-radius:14px; padding:8px 6px; color:var(--ink); background:var(--paper-card); font-family:var(--font-ui); font-size:14px; font-weight:700; line-height:1.2; cursor:pointer; transition:transform .14s ease, border-color .14s ease, background-color .14s ease; }
.chip-card:active { transform:scale(.97); }
.chip-card.is-selected { border-color:var(--brown); background:var(--surface-selected); box-shadow:0 0 0 1px var(--brown); }

/* statements: one header only (the progress label), big quoted line, scale pinned to the footer line */
.likert-heading { margin-top:clamp(8px,4vh,40px); }
.likert-mark { display:block; height:34px; color:var(--gold); font-family:"Noto Serif", Georgia, serif; font-size:64px; line-height:1; }
.likert-content { display:flex; flex-direction:column; padding-top:20px; }
.likert-scale { display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; }
.likert-button { height:56px; border:1px solid var(--rule); border-radius:16px; background:var(--paper-card); font-size:24px; cursor:pointer; transition:transform .14s ease, border-color .14s ease, background-color .14s ease; }
.likert-button.is-strong { font-size:32px; }
.likert-button:active { transform:scale(.94); }
.likert-button.is-selected { border-color:var(--brown); background:var(--surface-selected); box-shadow:0 0 0 1px var(--brown); }
.likert-legend { display:flex; justify-content:space-between; order:-1; margin:0 2px 10px; color:var(--ink-soft); font-size:12px; font-weight:700; }

/* affirmation: a considered reply, not a one-liner */
.affirm-content { text-align:center; }
.affirm-said { margin:0 auto 18px; max-width:340px; padding:12px 16px; border:1px solid var(--night-rule); border-radius:16px; background:var(--night-card); color:var(--night-soft); font-family:"Noto Serif", Georgia, serif; font-size:14px; line-height:1.45; font-style:italic; }
.affirm-said small { display:block; margin-bottom:5px; color:var(--gold); font-family:var(--font-ui); font-size:10.5px; font-style:normal; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.affirm-body { margin:14px auto 0; max-width:350px; color:var(--night-soft); font-size:16px; line-height:1.55; }
.affirm-widget { width:min(70%,250px); margin:24px auto 0; transform:rotate(-2deg); }
.affirm-widget .widget-preview { width:100%; height:auto; aspect-ratio:1; border:1px solid rgba(246,241,231,.2); box-shadow:0 22px 44px rgba(0,0,0,.5), 0 0 0 6px rgba(201,162,83,.08); }
.affirm-content .quote-source { margin-top:16px; color:var(--night-soft); }
.affirm-plan { margin:22px 0 0; padding:16px; border:1px solid var(--night-rule); border-radius:18px; background:var(--night-card); text-align:left; }
.affirm-plan h2 { margin:0 0 10px; color:var(--gold); font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.affirm-plan ul { margin:0; padding:0; list-style:none; display:grid; gap:9px; }
.affirm-plan li { position:relative; padding-left:24px; color:var(--night-text); font-size:15px; line-height:1.4; }
.affirm-plan li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--gold); font-weight:800; }
.affirm-promise { margin:20px auto 0; max-width:330px; color:var(--night-text); font-size:17px; line-height:1.4; font-weight:700; }

/* swipe: the widget is the page */
.swipe-content { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; gap:16px; padding-top:6px; }
.swipe-dots { display:flex; gap:6px; }
.swipe-dots i { width:22px; height:4px; border-radius:999px; background:var(--night-rule); }
.swipe-dots i.is-done { background:rgba(201,162,83,.5); }
.swipe-dots i.is-current { background:var(--gold); }
.swipe-stage { position:relative; width:min(88%, 340px, calc(100svh - 492px)); min-width:190px; }
.swipe-stage .widget-shade, .affirm-widget .widget-shade, .hs-widget .widget-shade { opacity:.72; }
.swipe-stage::before { content:""; position:absolute; inset:-14%; z-index:-1; border-radius:50%; background:radial-gradient(circle, rgba(201,162,83,.26), rgba(201,162,83,0) 66%); }
.swipe-stage .widget-preview { width:100%; height:auto; aspect-ratio:1; border-radius:34px; border:1px solid rgba(246,241,231,.24); box-shadow:0 30px 60px rgba(0,0,0,.6), 0 0 0 8px rgba(201,162,83,.07); }
.swipe-stage .widget-preview img { filter:saturate(1.15) contrast(1.06); }
.swipe-stage .widget-quote-copy blockquote { font-size:clamp(17px,5.2vw,22px); line-height:1.36; }
.swipe-stage.is-in { animation:swipeIn .3s cubic-bezier(.2,.75,.25,1) both; }
@keyframes swipeIn { from { opacity:0; transform:translateX(28px) rotate(2.5deg) scale(.97); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .swipe-stage.is-in { animation:none; } }
.swipe-meta { margin:0; display:flex; flex-direction:column; gap:2px; text-align:center; color:var(--night-soft); font-size:12.5px; }
.swipe-meta strong { color:var(--night-text); font-size:15px; }
.swipe-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.swipe-button { min-height:56px; display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--night-rule); border-radius:16px; color:var(--night-text); background:var(--night-card); font-family:var(--font-ui); font-size:16px; font-weight:800; cursor:pointer; transition:transform .14s ease; }
.swipe-button span { font-size:18px; line-height:1; }
.swipe-button.is-no span { color:#d98b73; }
.swipe-button.is-yes { border-color:var(--gold); background:var(--gold); color:#17130a; }
.swipe-button:active { transform:scale(.97); }

/* preview: make the phone the hero of the page */
body.v-headway .screen[data-step="preview"] .personalization-preview { position:relative; padding:14px 0 6px; }
body.v-headway .screen[data-step="preview"] .personalization-preview::before { content:""; position:absolute; left:50%; top:46%; width:112%; aspect-ratio:1; transform:translate(-50%,-50%); z-index:0; border-radius:50%; background:radial-gradient(circle, rgba(201,162,83,.36) 0%, rgba(201,162,83,.12) 36%, rgba(201,162,83,0) 62%); pointer-events:none; }
body.v-headway .screen[data-step="preview"] .home-screen-preview { position:relative; z-index:1; width:min(70vw, 286px, calc((100svh - 392px) * 9 / 19.5)); transform:perspective(1100px) rotateY(-7deg) rotateX(3deg); box-shadow:26px 36px 70px rgba(0,0,0,.62), 0 0 0 3px #2a2722, 0 0 60px rgba(201,162,83,.2); animation:phoneFloat 5.5s ease-in-out infinite; }
@keyframes phoneFloat { 0%,100% { transform:perspective(1100px) rotateY(-7deg) rotateX(3deg) translateY(0); } 50% { transform:perspective(1100px) rotateY(-5deg) rotateX(2deg) translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { body.v-headway .screen[data-step="preview"] .home-screen-preview { animation:none; } }

/* growth: rising, gold, clearly labelled */
.growth-line-h { stroke-dasharray:1; stroke-dashoffset:1; animation:growthDraw 1.3s .15s cubic-bezier(.3,.7,.2,1) forwards; }
@keyframes growthDraw { to { stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce) { .growth-line-h { animation:none; stroke-dashoffset:0; } }
body.v-headway .growth-content .growth-caption { margin:0 auto; color:var(--night-soft); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
body.v-headway .growth-chart { margin:26px auto 12px; }

/* summary: fits one screen */
.hs-content { display:flex; flex-direction:column; align-items:center; }
.hs-widget { position:relative; width:min(54%, 200px, calc(100svh - 560px)); min-width:140px; margin:6px auto 0; transform:rotate(-2deg); }
.hs-widget .widget-preview { position:relative; z-index:1; width:100%; height:auto; aspect-ratio:1; border:1px solid rgba(246,241,231,.22); box-shadow:0 22px 44px rgba(0,0,0,.55); }
.hs-glow { position:absolute; inset:-22%; border-radius:50%; background:radial-gradient(circle, rgba(201,162,83,.3), rgba(201,162,83,0) 66%); }
.hs-grid { width:100%; margin:22px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hs-grid div { padding:12px 14px; border:1px solid var(--night-rule); border-radius:16px; background:var(--night-card); text-align:left; }
.hs-grid dt { color:var(--gold); font-size:10.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.hs-grid dd { margin:5px 0 0; color:var(--night-text); font-size:15px; font-weight:700; line-height:1.3; }
body.v-headway .hs-content .summary-note { margin-top:12px; }

/* final offer: the light-green page was losing to body.is-dark. Restore it and make it readable. */
body.is-dark.is-save-offer, body.v-headway.is-save-offer { color:#172d24; background:#dfe8d6; }
body.v-headway.is-save-offer .funnel-header { background:#dfe8d6; }
body.v-headway.is-save-offer .primary-button { background:#234e35; color:#f8f5e8; }

/* long affirmation pages scroll under a pinned Continue, so the button never moves */
body.v-headway .screen[data-step^="affirm_"] .action-footer { position:sticky; bottom:0; z-index:5; margin-inline:-16px; padding:26px 16px max(20px, env(safe-area-inset-bottom)); background:linear-gradient(180deg, rgba(18,17,14,0) 0%, var(--night) 34%); }
body.v-headway .screen[data-step^="affirm_"] { padding-bottom:0; }

/* the header is taller than --header-row-height, so size the screen by flex instead of a calc: every footer lands on the same line */
body.v-headway .funnel-shell { display:flex; flex-direction:column; min-height:100svh; }
body.v-headway .funnel-shell > .screen { flex:1 0 auto; min-height:0; }
body.v-headway .screen[data-step="outcome"], body.v-headway .screen[data-step="proof"] { min-height:100svh; }

/* ── review pass (2026-09-21): fixes from the three-viewport QA ── */
/* hero grid: columns sized by the container, not by their content */
.hc-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.hc-card { min-width:0; }
.hc-trust { white-space:nowrap; }
@media(max-width:360px) { .hc-card { padding:10px 11px; gap:8px; font-size:15px; } .hc-emoji { font-size:18px; } .hc-trust { font-size:11px; padding:6px 10px; gap:4px; } .hc-stars { display:none; } }
/* pinned Continue on affirmation pages: full bleed, opaque before the button */
body.v-headway .screen[data-step^="affirm_"] .action-footer { width:auto; padding-top:38px; background:linear-gradient(180deg, rgba(18,17,14,0) 0%, var(--night) 40%); }
/* every headline balances its lines */
body.v-headway .screen h1 { text-wrap:balance; }
.chip-card { padding-inline:4px; font-size:clamp(12.5px, 3.6vw, 14px); overflow-wrap:anywhere; }
/* one accent: no terracotta, no peach, no purple-grey */
.swipe-button.is-no span { color:var(--night-soft); }
body.v-headway .milestone-dot { border-color:var(--rule); }
body.v-headway.is-dark .milestone-dot { border-color:rgba(246,241,231,.28); }
body.v-headway .milestone-dot.is-reached { border-color:var(--gold); background:var(--gold); }
body.v-headway .exit-choice { background:var(--night-card); border-color:var(--night-rule); color:var(--night-text); }
body.v-headway .exit-choice:hover { background:var(--night-selected); }
body.v-headway .carousel-card { background:var(--night-card); }
body.v-headway.is-dark .brand img, .hc-brand img { box-shadow:0 0 0 1px rgba(246,241,231,.22); }
/* a serif that actually exists on the device */
.hp-review blockquote, .affirm-said, .likert-mark { font-family:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; }
body.v-headway .save-plan s, body.v-headway.is-save-offer .plan-name small { color:#4b5a4a; }
/* preview phone: never collapses to a capsule */
body.v-headway .screen[data-step="preview"] .home-screen-preview { width:clamp(150px, calc((100svh - 392px) * 9 / 19.5), 286px); }

/* short phones (iPhone SE class): everything still fits above the fold */
@media(max-height:620px) {
  body.v-headway .screen { padding-top:14px; }
  body.v-headway .screen h1 { font-size:24px; }
  body.v-headway .screen-heading { margin-bottom:14px; }
  body.v-headway .options { gap:8px; }
  body.v-headway .option-card { min-height:54px; padding:9px 14px; }
  body.v-headway .option-copy strong { font-size:16px; line-height:1.25; }
  body.v-headway .action-footer { padding-top:12px; }
  .chip-card { min-height:46px; }
  .hc-art { height:clamp(170px, 40svh, 240px); }
  .hc-body { margin-top:-40px; }
  .hc-lead { padding-top:10px; font-size:15px; }
  .hc-card { min-height:48px; }
  .swipe-content { gap:10px; }
  .swipe-stage { width:min(70%, calc(100svh - 400px)); min-width:150px; }
  .swipe-meta span { display:none; }
  body.v-headway .screen[data-step="preview"] .home-screen-preview { width:clamp(140px, calc((100svh - 300px) * 9 / 19.5), 286px); border-radius:26px; }
  body.v-headway .growth-symbol { font-size:30px; margin-bottom:10px; }
  body.v-headway .growth-content p { margin:10px auto 6px; font-size:15px; }
  body.v-headway .growth-chart { height:clamp(80px, 20svh, 130px); margin:12px auto 8px; }
  .hs-widget { width:min(36vw, 120px); min-width:0; }
  .hs-grid { margin-top:12px; gap:8px; }
  .hs-grid div { padding:9px 11px; }
  body.v-headway .hs-content .summary-note { display:none; }
  body.v-headway .screen[data-step="widget"] .screen-content { padding-block:8px 6px; }
  body.v-headway .screen[data-step="widget"] .carousel-card { max-height:calc(100svh - 325px); }
}
@media(max-width:350px) { body.v-headway .screen[data-step^="affirm_"] .action-footer { margin-inline:-12px; padding-inline:12px; } }
/* preview: dim the phone, let the widget carry the light */
body.v-headway .screen[data-step="preview"] .home-screen-wallpaper img { filter:brightness(.5) saturate(.7); }
body.v-headway .screen[data-step="preview"] .home-screen-scrim { background:linear-gradient(#0006, #0003 45%, #0007); }
body.v-headway .screen[data-step="preview"] .home-screen-widget { position:relative; z-index:3; }
body.v-headway .screen[data-step="preview"] .home-screen-widget .widget-preview { border:1px solid rgba(246,241,231,.3); box-shadow:0 14px 30px rgba(0,0,0,.55), 0 0 34px rgba(201,162,83,.32); }
body.v-headway .screen[data-step="preview"] .home-screen-widget .widget-preview img { filter:brightness(1.12) saturate(1.15) contrast(1.05); }
body.v-headway .screen[data-step="preview"] .home-screen-widget .widget-shade { opacity:.6; }
body.v-headway .screen[data-step="preview"] .home-screen-widget .widget-quote-copy { text-shadow:0 1px 8px rgba(0,0,0,.6); }

/* 2026-09-22: bigger proof on the hero, store icon, proof page rework, no brand on night screens */
.hc-trust { display:flex; align-items:center; gap:7px; margin:0 0 16px; padding:10px 16px; font-size:14px; border-color:rgba(201,162,83,.4); background:rgba(18,17,14,.8); }
.hc-trust strong { font-size:15px; }
.hc-stars { font-size:13px; }
.hc-trust i { width:4px; height:4px; margin:0 2px; }
.hc-brand img { border-radius:50%; box-shadow:0 0 0 1px rgba(201,162,83,.5); }
body.v-headway .brand img { border-radius:50%; }
@media(max-width:360px) { .hc-trust { font-size:12px; padding:8px 12px; gap:5px; } .hc-trust strong { font-size:13px; } .hc-stars { display:inline; font-size:11px; } }
.hp-rating { flex-direction:column; align-items:center; gap:4px; margin-top:14px; }
.hp-rating strong { font-size:52px; }
.hp-rating small { max-width:260px; font-size:14px; line-height:1.4; }
.hp-stats { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.hp-stats li { padding:12px 8px; text-align:center; }
.hp-stats strong { font-size:16px; }
.hp-stats span { font-size:11.5px; }
.hp-art { width:min(64%, 240px, calc(100svh - 560px)); }
.hc-trust { flex-wrap:wrap; justify-content:center; row-gap:4px; max-width:100%; font-size:13.5px; padding:9px 14px; white-space:normal; }
.hc-trust > span { white-space:nowrap; }
@media(max-width:400px) { .hc-trust i { display:none; } }

/* ── 2026-09-22 round 3: bigger hero proof, short headline, proof stats, tour, summary list, paywall value hero ── */
/* hero: the proof reads as two stats, not a caption */
.hc-trust { gap:14px; padding:9px 18px 10px; border-radius:20px; margin-bottom:14px; white-space:nowrap; flex-wrap:nowrap; }
.hc-trust-cell { display:flex; flex-direction:column; align-items:center; gap:3px; line-height:1; }
.hc-trust-cell strong { font-size:23px; letter-spacing:-.03em; color:var(--night-text); }
.hc-trust-cell small { font-size:12px; font-weight:600; color:var(--night-soft); }
.hc-trust .hc-stars { font-size:11px; letter-spacing:.06em; }
.hc-trust i, .hc-trust > i { display:block; width:1px; height:36px; margin:0; border-radius:0; background:rgba(246,241,231,.2); opacity:1; }
@media(max-width:400px) { .hc-trust i { display:block; } }
@media(max-width:360px) { .hc-trust { gap:10px; padding:8px 12px; } .hc-trust-cell strong { font-size:20px; } .hc-trust-cell small { font-size:11px; } .hc-trust .hc-stars { display:inline; font-size:10px; } }
.hc-art { height:clamp(210px, 40svh, 400px); }
.hc-body h1 { font-size:clamp(28px, 7.8vw, 36px); }
.hc-body h1 em { display:block; }
@media(max-height:700px) { .hc-art { height:clamp(180px, 34svh, 240px); } .hc-body { margin-top:-40px; } .hc-lead { padding-top:12px; } }
@media(max-height:620px) { .hc-trust { padding:6px 12px 7px; } .hc-trust-cell strong { font-size:19px; } .hc-trust i { height:28px; } .hc-body h1 { font-size:24px; } }

/* proof page: downloads is the big stat; the review shows its stars */
.hp-stats strong { font-size:19px; }
.hp-stats li.is-big strong { font-size:22px; }
.hp-stats span { font-size:11.5px; }
.hp-review-stars { display:block; margin-bottom:5px; color:var(--gold-deep); font-size:13px; letter-spacing:.14em; }

/* summary: a receipt of every choice */
.hs-grid { display:flex; flex-direction:column; gap:0; margin-top:16px; border:1px solid var(--night-rule); border-radius:18px; background:var(--night-card); overflow:hidden; }
.hs-grid div { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:10px 14px; border:0; border-top:1px solid var(--night-rule); border-radius:0; background:none; }
.hs-grid div:first-child { border-top:0; }
.hs-grid dt { flex:none; }
.hs-grid dd { margin:0; font-size:14px; text-align:right; }
.hs-widget { width:min(42%, 156px, calc(100svh - 650px)); min-width:108px; margin-top:2px; }
body.v-headway .hs-content .summary-note { margin-top:10px; font-size:12px; }
@media(max-height:700px) { .hs-widget { width:min(34%, 120px); min-width:0; } .hs-grid { margin-top:10px; } .hs-grid div { padding:8px 12px; } .hs-grid dd { font-size:13px; } body.v-headway .hs-content .summary-note { display:none; } }

/* widget carousel: the square card is sized by the viewport height on mid phones so the footer stays on screen */
@media(max-height:700px) { body.v-headway .screen[data-step="widget"] .carousel { grid-auto-columns:min(100%, calc(100svh - 420px)); } body.v-headway .screen[data-step="widget"] .screen-content { padding-block:6px 4px; } }
/* tall phones: the art takes the room the shorter headline gave back */
@media(min-height:760px) { .hc-art { height:clamp(300px, 46svh, 470px); } }
/* ── review fixes (2026-09-22, independent QA pass) ── */
/* answered statement: a way forward without re-tapping */
.likert-continue { margin-top:14px; }
/* proof page on short phones: keep the review, shrink the rest */
.hp-art { width:clamp(110px, min(64%, 240px, calc(100svh - 560px)), 240px); }
@media(max-height:720px) { .hp-art { width:clamp(110px, calc(100svh - 520px), 150px); } .hp-rating { margin-top:8px; } .hp-rating strong { font-size:34px; } .hp-rating small { font-size:12.5px; } .hp-stats { margin-top:10px; } .hp-stats li { padding:9px 6px; } .hp-review { display:block; margin-top:10px; padding:10px 14px; } .hp-review blockquote { font-size:13.5px; } .hp-review figcaption { display:none; } .hp-review-stars { font-size:11px; margin-bottom:3px; } }
@media(max-height:620px) { .hp-art { width:110px; margin:0 auto; } .hp-content h1 { font-size:22px; } .hp-rating strong { font-size:30px; } .hp-stats strong, .hp-stats li.is-big strong { font-size:16px; } .hp-stats span { font-size:10.5px; } }
/* widget carousel on narrow phones: no clipped detail line */
@media(max-width:350px) { body.v-headway .carousel-copy small { display:none; } body.v-headway .carousel-copy { padding-top:12px; } }
body.v-headway .screen[data-step="paywall"] .paywall-heading h1 { font-size:clamp(27px,7.4vw,34px); }
@media(max-height:620px) { body.v-headway .screen[data-step="paywall"] .paywall-heading h1 { font-size:24px; } }
/* tap targets */
body.v-headway .proof-back { min-height:44px; padding:10px 0; }
/* tall phones: no dead band between headline and question */
@media(min-height:760px) { .hc-art { height:clamp(300px, 49svh, 470px); } .hc-lead { padding-top:14px; } }

/* ── paywall v2 (2026-09-22): App Store style hero, plans and CTA on the first screen, the rest below ── */
body.v-headway .screen[data-step="paywall"] { padding-top:0; }
body.v-headway .screen[data-step="paywall"] .offer-banner { margin-bottom:0; }
.pw2-hero { position:relative; margin:0 -16px 14px; height:clamp(230px, 43svh, 380px); overflow:hidden; background:radial-gradient(120% 70% at 80% 0%, rgba(201,162,83,.14), transparent 55%), var(--night); }
.pw2-bust { position:absolute; right:-16%; bottom:-8%; width:66%; height:auto; aspect-ratio:3 / 4; object-fit:cover; object-position:center top; -webkit-mask-image:radial-gradient(110% 90% at 72% 78%, #000 28%, rgba(0,0,0,.6) 50%, transparent 74%); mask-image:radial-gradient(110% 90% at 72% 78%, #000 28%, rgba(0,0,0,.6) 50%, transparent 74%); filter:grayscale(.15) brightness(.96); }
.pw2-copy { position:relative; z-index:2; padding:max(20px, env(safe-area-inset-top)) 16px 0; }
.pw2-eyebrow { margin:0 0 7px; color:var(--gold); font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
body.v-headway .screen[data-step="paywall"] .pw2-copy h1 { margin:0; max-width:78%; font-family:"Playfair Display", "Iowan Old Style", Georgia, serif; font-weight:600; font-size:clamp(28px, 8.2vw, 38px); line-height:1.06; letter-spacing:-.02em; text-wrap:balance; }
.pw2-proof { margin:9px 0 0; color:var(--night-soft); font-size:12.5px; font-weight:700; }
.pw2-proof .hc-stars { font-size:11px; margin-right:2px; }
.pw2-phone { position:absolute; z-index:1; left:16px; bottom:-30%; width:54%; max-width:220px; aspect-ratio:9 / 19.5; border-radius:28px; border:3px solid #26231e; overflow:hidden; background:#000; box-shadow:0 30px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(201,162,83,.3); }
.pw2-wall { position:absolute; inset:0; }
.pw2-wall img { width:100%; height:100%; object-fit:cover; filter:brightness(.42) saturate(.7); }
.pw2-wall::after { content:""; position:absolute; inset:0; background:linear-gradient(#0007, #0003 40%, #0008); }
.pw2-island { position:absolute; top:3.6%; left:36%; width:28%; height:3%; border-radius:999px; background:#000; }
.pw2-date { position:relative; margin:14% 0 0; text-align:center; color:#fff; font-family:-apple-system, "Helvetica Neue", "Hanken Grotesk", sans-serif; font-size:clamp(9px, 2.8vw, 11px); font-weight:600; }
.pw2-clock { position:relative; margin:0; text-align:center; color:#f3eee2; font-family:-apple-system, "Helvetica Neue", "Hanken Grotesk", sans-serif; font-size:clamp(40px, 13vw, 54px); font-weight:700; line-height:1.05; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.pw2-widget { position:relative; width:84%; margin:7% auto 0; }
.pw2-widget .widget-preview { width:100%; height:auto; aspect-ratio:1; border:1px solid rgba(246,241,231,.3); box-shadow:0 12px 26px rgba(0,0,0,.55), 0 0 30px rgba(201,162,83,.3); }
.pw2-hero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:28%; z-index:3; background:linear-gradient(180deg, rgba(18,17,14,0), var(--night)); pointer-events:none; }
/* plans: compact enough to sit on the first screen with the button */
.pw2-label { margin:0 0 10px; color:var(--night-soft); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; text-align:center; }
body.v-headway .screen[data-step="paywall"] .plan-grid { gap:10px; }
body.v-headway .screen[data-step="paywall"] .plan-card { min-height:70px; padding:13px 14px; }
body.v-headway .screen[data-step="paywall"] .plan-name strong { font-size:18px; }
body.v-headway .screen[data-step="paywall"] .plan-name small { margin-top:4px; }
body.v-headway .screen[data-step="paywall"] .popular-badge { top:-10px; }
body.v-headway .screen[data-step="paywall"] .billing-note { margin:10px 0 0; }
body.v-headway .screen[data-step="paywall"] .action-footer { padding-top:12px; margin-top:0; }
.pw2-secondary { display:flex; align-items:center; justify-content:center; padding-bottom:6px; }
body.v-headway .screen[data-step="paywall"] .decline-pill { width:min(100%, 240px); min-height:48px; margin:12px 0 0; padding:11px 24px; border:0; background:transparent; color:var(--night-soft); font-size:16px; font-weight:600; }
.pw2-more { margin:0 0 22px; text-align:center; color:var(--night-soft); font-size:12px; font-weight:700; }
.pw2-more span { display:block; font-size:16px; line-height:.8; }
/* below the fold */
.pw2-section { margin:0 0 18px; padding:18px 16px; border:1px solid var(--night-rule); border-radius:18px; background:var(--night-card); }
.pw2-section h2 { margin:0 0 14px; font-size:18px; text-align:left; }
.pw2-timeline ol { margin:0; padding:0; list-style:none; display:grid; gap:16px; }
.pw2-timeline li { position:relative; padding-left:26px; }
.pw2-timeline li::before { content:""; position:absolute; left:5px; top:5px; width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px rgba(201,162,83,.22); }
.pw2-timeline li::after { content:""; position:absolute; left:9px; top:18px; bottom:-16px; width:1px; background:var(--night-rule); }
.pw2-timeline li:last-child::after { display:none; }
.pw2-when { display:block; color:var(--gold); font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.pw2-timeline strong { display:block; margin-top:2px; font-size:15px; }
.pw2-timeline li > span:last-child, .pw2-gets span { display:block; margin-top:3px; color:var(--night-soft); font-size:13px; line-height:1.5; }
.pw2-gets { margin:0; padding:0; list-style:none; display:grid; gap:12px; }
.pw2-gets li { padding-left:14px; border-left:2px solid var(--gold); }
.pw2-gets strong { display:block; font-size:15px; }
.pw2-terms p { margin:0 0 10px; color:var(--night-soft); font-size:13px; line-height:1.55; }
body.v-headway .screen[data-step="paywall"] .paywall-faq { border-top:1px solid var(--night-rule); border-bottom:0; }
body.v-headway .screen[data-step="paywall"] .legal-links { margin-top:6px; }
@media(max-height:700px) { .pw2-hero { height:clamp(200px, 36svh, 250px); margin-bottom:10px; } .pw2-phone { width:48%; bottom:-36%; } body.v-headway .screen[data-step="paywall"] .pw2-copy h1 { font-size:26px; } }
@media(max-height:620px) { .pw2-hero { height:176px; } .pw2-phone { display:none; } body.v-headway .screen[data-step="paywall"] .pw2-copy h1 { font-size:24px; max-width:70%; } body.v-headway .screen[data-step="paywall"] .plan-card { min-height:60px; padding:9px 12px; } body.v-headway .screen[data-step="paywall"] .plan-name strong { font-size:16px; } body.v-headway .screen[data-step="paywall"] .plan-price strong { font-size:18px; } .pw2-label { margin-bottom:6px; } }
/* paywall hero: copy first, phone below it in flow, bust behind on the right */
.pw2-hero { display:flex; flex-direction:column; align-items:flex-start; }
.pw2-bust { z-index:0; right:-10%; bottom:-4%; width:78%; -webkit-mask-image:radial-gradient(100% 90% at 68% 70%, #000 30%, rgba(0,0,0,.65) 52%, transparent 76%); mask-image:radial-gradient(100% 90% at 68% 70%, #000 30%, rgba(0,0,0,.65) 52%, transparent 76%); }
.pw2-phone { position:relative; left:auto; bottom:auto; flex:none; margin:10px 0 0 16px; }
.pw2-date { margin-top:10%; }
.pw2-clock { font-size:clamp(34px, 11vw, 44px); }
.pw2-widget { margin-top:5%; }
@media(max-height:700px) { .pw2-phone { margin-top:6px; } .pw2-clock { font-size:36px; } }
.pw2-hero::after { height:18%; }
@media(max-height:700px) { .pw2-date { display:none; } .pw2-clock { margin-top:12%; } }
@media(max-height:620px) { .pw2-bust { width:auto; height:124%; right:-6%; bottom:-14%; } }
/* ── final review fixes: the widget is the fixed point of the paywall hero ── */
.pw2-hero { height:clamp(330px, 49svh, 408px); margin-bottom:10px; }
.pw2-hero::after { height:10%; }
.pw2-date { display:none; }
.pw2-clock { margin-top:11%; font-size:clamp(30px, 9.6vw, 38px); }
.pw2-widget { margin-top:5%; }
.pw2-proof { max-width:72%; }
.pw2-bust { right:-14%; -webkit-mask-image:radial-gradient(100% 90% at 70% 70%, #000 26%, rgba(0,0,0,.6) 48%, transparent 72%); mask-image:radial-gradient(100% 90% at 70% 70%, #000 26%, rgba(0,0,0,.6) 48%, transparent 72%); }
body.v-headway .screen[data-step="paywall"] .pw2-copy h1 { font-family:"Iowan Old Style", "Playfair Display", "Palatino Linotype", Palatino, Georgia, serif; }
/* short phones: a bare widget card instead of the phone, so the widget is always whole */
@media(max-height:700px) {
  .pw2-hero { height:clamp(236px, 41svh, 280px); }
  .pw2-phone { width:34%; max-width:130px; aspect-ratio:1; margin-top:6px; border:0; border-radius:22px; background:none; box-shadow:none; overflow:visible; }
  .pw2-wall, .pw2-island, .pw2-clock { display:none; }
  .pw2-widget { width:100%; margin:0; }
  body.v-headway .screen[data-step="paywall"] .pw2-copy h1 { font-size:25px; }
  .pw2-proof { margin-top:6px; font-size:12px; }
}
@media(max-height:620px) {
  .pw2-hero { height:206px; }
  .pw2-phone { display:block; width:30%; max-width:96px; margin-top:4px; }
  .pw2-bust { width:auto; height:124%; right:-10%; bottom:-14%; }
  body.v-headway .screen[data-step="paywall"] .pw2-copy h1 { font-size:23px; max-width:66%; }
  body.v-headway .screen[data-step="paywall"] .plan-price strong { font-size:14px; }
  body.v-headway .screen[data-step="paywall"] .plan-card[data-plan="annual"] .plan-price strong { font-size:18px; }
}
/* plan badge clear of the card above; secondary actions at 44px; legal links tappable */
body.v-headway .screen[data-step="paywall"] .plan-grid { gap:14px; }
.pw2-more { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:44px; margin:0 0 16px; border:0; background:none; color:var(--night-soft); font-family:var(--font-ui); font-size:12px; font-weight:700; cursor:pointer; }
.pw2-more span { display:none; }
body.v-headway .screen[data-step="paywall"] .legal-links a { display:inline-block; padding:8px 4px; }
/* hero (step 0): the art absorbs the slack on short phones, arrows go at narrow widths */
@media(max-height:700px) { .hc-art { height:clamp(200px, 44svh, 300px); } }
@media(max-height:620px) { .hc-art { height:clamp(200px, 46svh, 260px); } }
@media(max-width:360px) { .hc-arrow { display:none; } }
.pw2-phone { width:48%; max-width:190px; }
@media(max-height:700px) { .pw2-phone { width:30%; max-width:112px; } }
@media(max-height:620px) { .pw2-eyebrow { display:none; } .pw2-phone { width:28%; max-width:90px; } }
.pw2-proof { max-width:82%; font-size:12px; }
/* paywall hero: the real Home Screen mock (the visitor's widget, wallpaper, icons, dock), bleeding off the bottom */
.pw2-device { position:relative; z-index:1; flex:none; width:50%; max-width:192px; margin:10px 0 0 16px; }
.pw2-device .home-screen-preview { width:100%; margin:0; transform:none; animation:none; border-radius:30px; box-shadow:0 30px 60px rgba(0,0,0,.7), 0 0 0 3px #29292c, 0 0 50px rgba(201,162,83,.16); }
.pw2-device .home-screen-wallpaper img { filter:brightness(.45) saturate(.7); }
.pw2-device .home-screen-scrim { background:linear-gradient(#0006, #0003 45%, #0007); }
.pw2-device .home-screen-widget { position:relative; z-index:3; }
.pw2-device .home-screen-widget .widget-preview { border:1px solid rgba(246,241,231,.3); box-shadow:0 14px 30px rgba(0,0,0,.55), 0 0 34px rgba(201,162,83,.32); }
.pw2-device .home-screen-widget .widget-preview img { filter:brightness(1.12) saturate(1.15) contrast(1.05); }
.pw2-device .home-screen-widget .widget-shade { opacity:.6; }
.pw2-device .home-screen-widget .widget-quote-copy { text-shadow:0 1px 8px rgba(0,0,0,.6); }
@media(max-height:700px) { .pw2-hero { height:clamp(276px, 46svh, 312px); } .pw2-device { width:37%; max-width:134px; margin-top:6px; } .pw2-device .home-screen-preview { border-radius:20px; border-width:3px; } }
@media(max-height:620px) { .pw2-hero { height:230px; } .pw2-device { width:31%; max-width:100px; margin-top:4px; } .pw2-device .home-screen-preview { border-radius:16px; border-width:2px; } }
/* paywall: a pay button stays within reach while the visitor reads below the fold */
.pw2-sticky { position:fixed; left:0; right:0; bottom:0; z-index:18; padding:14px max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background:linear-gradient(180deg, rgba(18,17,14,0) 0%, var(--night) 34%); transform:translateY(110%); opacity:0; transition:transform .32s cubic-bezier(.2,.75,.25,1), opacity .26s ease; pointer-events:none; }
.pw2-sticky.is-visible { transform:none; opacity:1; pointer-events:auto; }
.pw2-sticky-button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:100%; max-width:var(--content); margin:0 auto; min-height:58px; padding:9px 22px; box-shadow:0 12px 30px rgba(0,0,0,.5); }
.pw2-sticky-button small { font-size:11.5px; font-weight:600; opacity:.8; }
body.has-sticky-cta .screen[data-step="paywall"] { padding-bottom:112px; }
body.is-checkout-email-open .pw2-sticky { transform:translateY(110%); opacity:0; pointer-events:none; }
@media (prefers-reduced-motion: reduce) { .pw2-sticky { transition:none; } }

/* Short browser viewports: keep the purchase and save-offer paths in view. */
@media (max-height:780px) {
  .pw2-hero { height:clamp(160px, 29svh, 208px); }
  .pw2-device { display:none; }
  .pw2-bust { width:auto; height:125%; right:0; bottom:-12%; }
  .pw2-proof { max-width:68%; line-height:1.3; }
}

/* Headway final offer: one continuous green header above the price card. */
body.v-headway.is-save-offer .screen[data-step="paywall"] .offer-banner { margin-inline:-16px; padding-inline:max(22px, env(safe-area-inset-left)) max(22px, env(safe-area-inset-right)); border-radius:0; background:#254c37; }
.hw-save-hero { margin:0 -16px; padding:24px 22px 38px; border-radius:0 0 26px 26px; text-align:center; color:#f8f5e9; background:linear-gradient(180deg, #254c37 0%, #214631 52%, #173b2a 100%); }
.hw-save-kicker { margin:0 0 8px; color:#e4d39b; font-size:11px; font-weight:800; letter-spacing:.16em; }
body.v-headway.is-save-offer .screen[data-step="paywall"] .hw-save-hero h1 { margin:0; color:#fffaf0; line-height:1.04; }
.hw-save-hero h1 strong { display:block; font-family:var(--font-ui); font-size:clamp(54px, 16vw, 70px); font-weight:900; letter-spacing:-.055em; }
.hw-save-hero h1 span { display:block; margin-top:5px; font-family:"Iowan Old Style", Georgia, serif; font-size:clamp(22px, 6vw, 27px); font-weight:600; letter-spacing:-.02em; }
.hw-save-hero > p:last-child { max-width:330px; margin:13px auto 0; color:#e7eddb; font-size:14px; line-height:1.4; }
.hw-save-content { position:relative; z-index:1; margin-top:-18px; }
body.v-headway.is-save-offer .screen[data-step="paywall"] .hw-save-card { display:block; min-height:0; padding:16px 18px 14px; border:2px solid #b4944d; border-radius:20px; background:#fffcf4; box-shadow:0 12px 26px rgba(25,51,38,.13); text-align:left; }
.hw-save-card-top, .hw-save-price-row, .hw-save-card-foot { display:flex; }
.hw-save-card-top { align-items:center; justify-content:space-between; gap:8px; }
.hw-save-card-top strong { color:#193326; font-size:16px; font-weight:800; }
.hw-save-card-top span { border-radius:999px; padding:5px 9px; color:#234e35; background:#e4ebd9; font-size:10px; font-weight:800; letter-spacing:.05em; white-space:nowrap; }
.hw-save-price-row { align-items:end; justify-content:space-between; gap:12px; margin-top:10px; }
.hw-save-before, .hw-save-after { display:flex; flex-direction:column; gap:2px; }
.hw-save-price-row small { color:#586a58; font-size:10px; font-weight:800; letter-spacing:.11em; }
.hw-save-before s { color:#697a6c; font-size:29px; font-weight:700; line-height:1.1; text-decoration-color:#93554c; text-decoration-thickness:2px; }
.hw-save-after { align-items:flex-end; }
.hw-save-after strong { color:#173b2a; font-size:50px; font-weight:900; line-height:.92; letter-spacing:-.06em; }
.hw-save-card-foot { margin-top:12px; padding-top:10px; border-top:1px solid #dce4d7; color:#405a46; font-size:11.5px; font-weight:700; }
body.v-headway.is-save-offer .screen[data-step="paywall"] .hw-save-content .billing-note { margin:9px 0 0; color:#40543f; }
body.v-headway.is-save-offer .screen[data-step="paywall"] .action-footer { padding-top:15px; }
body.v-headway.is-save-offer .screen[data-step="paywall"] .hw-save-details { margin-top:24px; }
body.v-headway.is-save-offer .screen[data-step="paywall"] .hw-save-details h2 { margin-bottom:16px; font-size:19px; }
@media (max-height:700px) {
  .hw-save-hero { padding:16px 18px 29px; }
  .hw-save-hero h1 strong { font-size:52px; }
  .hw-save-hero h1 span { font-size:22px; }
  .hw-save-hero > p:last-child { margin-top:9px; font-size:13px; }
  body.v-headway.is-save-offer .screen[data-step="paywall"] .hw-save-card { padding:12px 15px 11px; }
  .hw-save-price-row { margin-top:7px; }
  .hw-save-card-foot { margin-top:8px; padding-top:7px; }
}