/* Readable type at every viewport; chapters scroll when content needs room. */
body {font-size:18px}
main {min-height:0}
.scene {overscroll-behavior:contain;touch-action:pan-y pinch-zoom}
.header nav,.header-cta {font-size:16px}
.header-cta {color:#fff;background:linear-gradient(160deg,#23835c,#14583c);border:1px solid #14583c;box-shadow:0 3px 0 #0e412c,0 7px 16px #17674726,inset 0 1px 0 #ffffff30;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.header-cta:hover {color:#fff;background:linear-gradient(160deg,#299268,#176747);transform:translateY(-1px);box-shadow:0 4px 0 #0e412c,0 9px 20px #17674730,inset 0 1px 0 #ffffff30}
.header-cta:active {transform:translateY(2px);box-shadow:0 1px 0 #0e412c,0 3px 8px #17674720,inset 0 1px 0 #ffffff20}
.header-cta:focus-visible {outline:3px solid #93ba59;outline-offset:5px}
.wordmark {letter-spacing:0}
.wordmark img {width:132px;height:auto;object-fit:contain}
.intro,.hero-copy .intro,.brands-layout .intro {font-size:20px;line-height:1.6}
.body-copy,.event-explanation p,.faq details p {font-size:18px;line-height:1.75}
.living-button,.hero-copy .living-button,.discount-card .living-button,.faq .living-button,.solid-button {font-size:17px}
.living-button small {font-size:14px}
.eyebrow,.hero-copy .eyebrow,.growth-heading .eyebrow,.card-top .eyebrow {font-size:13px;letter-spacing:1.2px}
.reassurance,.demo-label,.pill,.funding-row small,.chart-labels,.chapter,.swipe-hint,.number {font-size:14px}
.fine,.discount-card .fine,.growth-visual>.fine {font-size:14px!important;line-height:1.65!important}
.text-link,.brand-strip>.text-link,.steps li,.discount-card-body>p,.wallet-feedback,.growth-subtitle,.event-foot p,.funding-row p,.funding-note,.brands-bottom p {font-size:17px}
.steps b,.faq summary,.brand-grid strong {font-size:18px}
.steps li:before {font-size:14px;width:28px;height:28px}
.brand-strip p,.simple-promises,.brand-grid span,.growth-chart span {font-size:15px}
.funding-row h3 {font-size:23px}
.card-top {flex-wrap:wrap}
.card-top .eyebrow {max-width:none}
.growth-heading {flex-wrap:wrap}
.brand-grid {grid-template-columns:repeat(3,1fr)}
.brand-grid a {padding:20px}
.brand-grid img {margin-bottom:12px}
.hero-grid {grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px 48px}
.hero-copy h1 {font-size:clamp(58px,5.6vw,86px)}
.nav-actions button {width:44px;height:44px}
.chapter #chapter-name {display:none}

/* A guided rendition of LivingDiscountHero's mobile UI, using its own artwork. */
.walkthrough {min-width:0;width:100%;max-width:540px;margin:0 auto;align-self:center}
.walkthrough-top {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;font-size:13px;font-weight:700;letter-spacing:1px}
.walkthrough-demo {font-size:13px;font-weight:500;letter-spacing:0;color:var(--muted)}
.app-preview {border:1px solid #d7ddd7;border-radius:23px;overflow:hidden;background:#060a12;box-shadow:0 18px 50px #182b2318;color:#eef3ff}
.app-preview-header {display:flex;align-items:center;gap:12px;padding:12px 20px;background:#fff;color:#182b23;font-size:18px}
.app-preview-header img {object-fit:contain}
.app-preview-screen {height:382px;position:relative;isolation:isolate;overflow:hidden}
.app-target-photo,.app-preview-shade {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.app-target-photo {object-position:center 42%;opacity:1;transition:opacity .6s}
.walkthrough[data-step="0"] .app-target-photo {opacity:.3}
.app-preview-shade {z-index:-1;background:linear-gradient(180deg,#060a12d9 0%,#060a1240 45%,#060a12ed 100%)}
.app-brand-info {display:flex;gap:12px;padding:22px 22px 0;align-items:flex-start}
.app-brand-info>img {background:white;border-radius:50%;padding:7px;flex-shrink:0}
.app-brand-info h3 {color:white;font-size:24px;margin:0 0 5px;letter-spacing:-.4px}
.app-brand-info p {font-size:15px;line-height:1.5;margin:0;max-width:340px;color:#eef3ff}
.app-preview-pills {display:flex;gap:9px;padding:16px 22px;flex-wrap:wrap}
.app-preview-pills button {font-size:15px;padding:9px 14px;min-height:44px;color:#eef3ff;border:1px solid #ffffff50;background:#060a1266;border-radius:30px}
.app-preview-pills button:hover {background:#233653;border-color:#ffffff90}
.app-preview-bottom {position:absolute;bottom:18px;left:22px;right:22px}
.app-start {display:block;width:100%;min-height:48px;border-radius:14px;background:linear-gradient(135deg,#af0000,#8f0000);color:white;border:1px solid #ffffff30;font-size:16px;font-weight:700;padding:12px;line-height:1.4;box-shadow:0 8px 20px #af000030}
.app-start:hover {background:#c00000}
.app-whatis {display:block;width:100%;min-height:44px;color:#eef3ff;text-align:center;font-size:14px;border:1px solid #ffffff45;padding:10px;border-radius:12px;margin-top:8px;background:#0b13248a}
.app-whatis:hover {background:#233653;border-color:#ffffff90}
.discount-explainer {width:min(560px,calc(100% - 32px));max-height:calc(100svh - 32px);padding:0;border:1px solid var(--line);border-radius:22px;background:#fff;color:var(--ink);box-shadow:0 24px 90px #0003;overflow:auto;overscroll-behavior:contain}
.discount-explainer::backdrop {background:#060a1299;backdrop-filter:blur(4px)}
.explainer-header {display:flex;align-items:center;gap:16px;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line)}
.explainer-header h2 {font-size:clamp(22px,5vw,28px);letter-spacing:-.7px;line-height:1.2;margin:0}
.explainer-header form {margin:0;flex-shrink:0}
.explainer-close {width:44px;height:44px;border-radius:50%;background:var(--soft);font-size:28px;line-height:1}
.explainer-content {padding:24px 28px 30px;text-align:center}
.explainer-symbol {display:block;font-size:40px;line-height:1;color:#2a67ff}
.explainer-sub {font-size:13px;font-weight:700;letter-spacing:1.2px;color:var(--green);margin:16px 0}
#explainer-body {font-size:18px;line-height:1.75;margin:0;color:var(--muted)}
.explainer-highlights {list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:0;margin:24px 0}
.explainer-highlights li {font-size:14px;padding:9px 14px;border-radius:30px;color:#9b111e;border:1px solid #9b111e30;background:#9b111e08}
.explainer-highlights .explainer-free {color:var(--green);background:var(--soft);border-color:#17674730}
.explainer-tagline {font-size:24px;font-weight:700;color:#2a67ff;margin:20px 0}
.explainer-content .solid-button {font-size:16px;gap:15px}
@media(max-width:400px){.explainer-header{padding:16px}.explainer-content{padding:22px 18px}#explainer-body{font-size:17px}}
.app-brands {display:flex;align-items:center;justify-content:center;gap:16px;margin-top:17px}
.app-brands>img,.app-brands button {width:42px;height:42px;background:white;border:2px solid transparent;border-radius:50%;object-fit:contain;padding:7px;flex-shrink:0}
.app-brands button {display:grid;place-items:center;transition:box-shadow .3s,border-color .3s}
.app-brands button img {width:100%;height:100%;object-fit:contain}
.app-brands button[aria-pressed="true"] {border-color:#af0000;box-shadow:0 0 0 4px #fff9}
.app-confirm,.app-success {position:absolute;inset:0;background:#060a12dc;padding:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;backdrop-filter:blur(5px)}
.app-confirm>img {padding:10px;background:#fff;border-radius:50%}
.app-confirm h3,.app-success h3 {font-size:26px;color:#fff;margin:16px 0 7px;line-height:1.25}
.app-confirm p,.app-success p {font-size:17px;color:#eef3ff;margin:0 0 14px;line-height:1.5}
.confirm-dots {letter-spacing:7px;color:#ef4c4c;font-size:12px;margin:4px 0 20px}
.app-confirm .app-start {max-width:330px}
.app-cancel {font-size:15px;color:#fff;padding:12px;min-height:44px}
.app-initiate {position:absolute;inset:18px;display:flex;flex-direction:column;justify-content:center;background:white;color:#182b23;border-radius:18px;padding:24px;box-shadow:0 10px 60px #0005}
.app-initiate h3 {font-size:24px;margin:0 0 20px}
.app-modal-brand {display:flex;align-items:center;gap:12px;font-size:17px}
.app-initiate p {font-size:16px;line-height:1.6;margin:18px 0}
.app-session-note {font-size:13px;color:#637269;text-align:center;margin-top:12px}
.success-check {display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#10b981;color:#060a12;font-size:35px}
.success-brand {display:flex;align-items:center;gap:10px;background:#fff;color:#182b23;border-radius:12px;padding:13px;font-size:15px;margin-top:16px}
.demo-pointer {position:absolute;left:66%;top:88%;width:27px;height:33px;filter:drop-shadow(0 2px 3px #0005);transition:left .8s ease,top .8s ease;pointer-events:none;z-index:5}
.demo-pointer svg {width:100%;height:100%}
.demo-pointer.tap:after {content:'';position:absolute;left:-9px;top:-9px;width:28px;height:28px;border:2px solid white;border-radius:50%;animation:demo-tap .7s ease-out}
@keyframes demo-tap {from{transform:scale(.3);opacity:1}to{transform:scale(1.7);opacity:0}}
.walkthrough[data-step="1"] .demo-pointer {left:55%;top:59%}
.walkthrough[data-step="2"] .demo-pointer {left:55%;top:70%}
.walkthrough[data-step="3"] .demo-pointer {left:55%;top:72%}
.walkthrough[data-step="4"] .demo-pointer {display:none}
.walkthrough figcaption {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px}
.walkthrough-caption {display:flex;align-items:center;gap:12px;line-height:1.4}
.walkthrough-caption>span {font-size:13px;color:var(--green);white-space:nowrap;font-variant-numeric:tabular-nums}
.walkthrough-caption strong {font-size:17px;font-weight:600}
.walkthrough-controls {display:flex;gap:4px;flex-shrink:0}
.walkthrough-controls button {width:40px;height:40px;border:1px solid var(--line);border-radius:50%;font-size:20px}
.walkthrough-note {font-size:13px;line-height:1.6;color:var(--muted);margin:10px 0 0}
.walkthrough.paused .demo-pointer {transition:none}
.preview-help-hint {margin:0 22px;color:#dce9e3;font-size:12px}
.app-preview-pills {padding-bottom:6px}
.app-preview-pills button {display:flex;gap:10px;align-items:center;background:#ffffff18;box-shadow:0 2px 0 #ffffff30;cursor:pointer}
.app-preview-pills button span {display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#ffffff22;font-size:16px}
.brand-prompt {text-align:center;margin:11px 0 0;color:#eef3ff;font-size:13px}
.app-brands {margin-top:10px;gap:14px}
.app-brands button {width:44px;height:44px;cursor:pointer}
.app-brands button:hover {transform:translateY(-3px);box-shadow:0 0 0 3px #ffffff70}
.app-success {background:#f1f7f3;color:#183d2d;backdrop-filter:none;justify-content:flex-start;overflow:auto;padding:24px 28px;overscroll-behavior:contain}
.growth-brand {display:flex;align-items:center;gap:12px;width:100%;font-size:22px}
.growth-brand img {background:#fff;border-radius:12px;padding:8px;object-fit:contain}
.growth-demo-tag {font-size:11px;letter-spacing:1.4px;margin-left:auto;border:1px solid #b6cdbf;border-radius:6px;padding:5px 7px}
.app-success h3.growth-status {color:#176747;font-size:22px;margin:20px 0 8px;display:flex;align-items:center;gap:8px}
.growth-status>span {font-size:12px;animation:growth-pulse 1.6s ease-in-out infinite}
.app-success p.growth-explanation {color:#425e50;font-size:15px;margin:0}
.growth-balance {display:flex;flex-direction:column;align-items:center;margin:16px 0 10px}
.growth-balance>span {font-size:13px;color:#50685a}
.growth-balance>strong {font-size:clamp(42px,5vw,60px);line-height:1.2;letter-spacing:-2px;font-variant-numeric:tabular-nums}
.growth-track {width:100%;max-width:360px;height:6px;border-radius:6px;background:#d9e7de;overflow:hidden;flex-shrink:0}
.growth-track>span {display:block;height:100%;width:0;background:#25815a;border-radius:6px}
.app-success p.growth-ticker {font-size:14px;color:#176747;margin:10px 0 16px}
.growth-redeem {background:#176747;color:white;border-radius:12px;min-height:48px;padding:12px 18px;width:100%;max-width:360px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:16px;font-weight:700;flex-shrink:0}
.growth-redeem:hover {background:#104d34}
.growth-redeem:disabled {opacity:.55;cursor:default}
.app-success p.growth-disclaimer {font-size:12px;color:#607367;margin:12px 0 0}
.growth-change {color:#176747;text-decoration:underline;text-underline-offset:4px;font-size:14px;min-height:44px;flex-shrink:0}
.demo-gift {width:100%;max-width:360px;background:white;border:1px solid #b6cdbf;border-radius:14px;padding:14px;display:grid;grid-template-columns:1fr auto;gap:8px;text-align:left}
.demo-gift>span {font-weight:700;font-variant-numeric:tabular-nums}
.app-success .demo-gift p {font-size:14px;color:#425e50;margin:0;grid-column:1/-1}
.demo-gift small {font-size:12px;color:#607367;grid-column:1/-1}
.app-success:has(.demo-gift:not([hidden])) .growth-balance {display:none}
.app-success:has(.demo-gift:not([hidden])) .growth-track {margin-top:20px}
.walkthrough.paused .growth-status>span {animation-play-state:paused}
@keyframes growth-pulse {50%{opacity:.4}}
@media(prefers-reduced-motion:reduce){.growth-status>span{animation:none}.app-brands button:hover{transform:none}}
@media(max-width:400px){.app-success{padding:20px 16px}.app-success h3.growth-status{font-size:20px}.growth-brand{font-size:20px}.app-success p.growth-explanation{font-size:14px}.app-brands{gap:9px}.preview-help-hint{margin-left:18px}}
@media(min-width:761px) and (max-width:1000px) {
  .hero-grid {gap:26px;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .hero-copy h1 {font-size:59px}
  .hero-copy .living-button {font-size:16px;padding:15px}
  .header nav {gap:17px;font-size:14px}
  .app-preview-screen {height:420px}
  .app-brands {gap:9px}
  .walkthrough-caption {gap:8px}
  .walkthrough-caption strong {font-size:15px}
}
@media(max-width:760px) {
  .header-cta {font-size:15px}
  .wordmark img {width:114px;height:auto}
  .scene-inner {padding:29px 6% 36px}
  .hero-grid {grid-template-columns:1fr;gap:30px}
  .hero-copy h1 {font-size:clamp(47px,11.6vw,75px)}
  .intro,.hero-copy .intro,.brands-layout .intro {font-size:19px}
  .eyebrow,.hero-copy .eyebrow {font-size:12px;letter-spacing:1px}
  .hero-copy .living-button {font-size:16px;max-width:none}
  .brand-strip p,.brand-strip>.text-link,.brand-grid span {font-size:14px}
  .brand-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .brand-grid strong {font-size:18px}
  .brand-grid a {padding:19px}
  .chapter {font-size:13px}
  .nav-actions {gap:5px}
  .nav-actions button {width:40px;height:40px}
  .dots button {width:21px}
  .funding-panel,.growth-visual {padding:22px}
  .funding-row {align-items:start}
  .funding-row h3 {font-size:22px}
  .funding-row p {font-size:16px}
  .walkthrough {max-width:480px}
  .walkthrough-top {font-size:12px;letter-spacing:.6px}
  .app-preview-screen {height:400px}
  .app-brand-info {padding:20px 18px 0}
  .app-preview-pills {padding:14px 18px}
  .app-preview-bottom {left:18px;right:18px}
  .app-brands {gap:12px}
  .app-initiate {inset:12px;padding:20px}
  .walkthrough-caption {gap:8px}
  .walkthrough-caption strong {font-size:16px}
  .walkthrough-note {font-size:14px}
}
@media(max-width:360px) {
  .header-cta {padding:10px 12px;gap:10px;font-size:14px}
  .app-brands {gap:8px}
  .app-brand-info p {font-size:14px}
  .app-preview-pills {gap:6px}
  .app-preview-pills button {font-size:13px;padding:8px 10px}
  .app-start {font-size:15px}
}

/* Let the working interface be the hero's primary feature. */
.hero-grid {grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:30px 54px}
.hero-copy h1 {font-size:clamp(52px,5vw,76px)}
.hero-copy .reassurance {max-width:360px;line-height:1.65}
.walkthrough {max-width:680px}
.app-preview-screen {height:clamp(480px,58svh,620px)}
.interface-explainer {width:min(620px,calc(100% - 32px))}
#interface-heading {font-size:clamp(23px,4.8vw,29px);line-height:1.35;margin:18px 0}
#interface-body p,#interface-about p {font-size:18px;line-height:1.7;color:var(--muted)}
.explainer-pagination {display:flex;align-items:center;justify-content:center;gap:28px;margin:24px 0}
.explainer-pagination button {width:46px;height:46px;border:1px solid var(--line);border-radius:50%;font-size:22px}
.explainer-pagination span {font-size:15px;font-variant-numeric:tabular-nums;color:var(--muted)}
#interface-about {text-align:left;border-top:1px solid var(--line);padding:18px 0;margin-bottom:10px}
#interface-about summary {cursor:pointer;font-size:17px;font-weight:600}
@media(min-width:761px) and (max-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:28px}
  .hero-copy h1{font-size:52px;letter-spacing:-2.6px}
  .app-preview-pills{gap:7px;padding-left:18px;padding-right:18px}
  .app-preview-pills button{font-size:13px;padding:8px 10px}
}
@media(max-width:760px){
  .hero-grid{grid-template-columns:1fr;gap:25px}
  .hero-copy h1{font-size:clamp(43px,10vw,64px);margin-bottom:16px}
  .hero-copy .eyebrow{margin-bottom:15px}
  .hero-copy .intro{margin-bottom:12px}
  .hero-copy .reassurance{margin:0}
  .walkthrough{max-width:560px}
  .app-preview-screen{height:460px}
}
@media(max-width:360px){
  .hero-copy h1{font-size:42px}
  .app-preview-screen{height:470px}
  #interface-body p,#interface-about p{font-size:17px}
}