/* One visible action, a shorter path to the demo, and distinct section surfaces. */
:root{--header-height:76px}
html{scroll-padding-top:calc(var(--header-height) + 16px)}
body{background:var(--ice)}
.site-header{position:sticky;top:0;z-index:40;background:var(--ice);border-bottom:1px solid var(--mist);box-shadow:0 4px 18px #125C5608}
.site-header .header-inner{display:flex;min-height:76px;padding-block:10px;gap:14px}
.site-header .brand{font-size:29.6px;letter-spacing:-1.3px;gap:8px;white-space:nowrap}
.site-header .brand-mark{width:34px;height:36px;font-size:24px}
.site-header .header-cta{margin-left:auto;flex-shrink:0}
.hero,.how-section,.experience-section,.recognition-section,.science-section,.faq-section,.final-section{scroll-margin-top:0}
.demo-shell,#como-funciona{scroll-margin-top:0}
.hero{padding-bottom:32px}
.hero .hero-audience{display:flex;align-items:center;gap:8px;width:fit-content;max-width:100%;padding:7px 11px;border:1px solid var(--mist);border-radius:12px;background:var(--ice);color:var(--green);font-size:var(--font-min);font-weight:500;line-height:1.4;margin-top:16px}
.hero-audience>svg{width:22px;height:22px}
.hero-audience>span{min-width:0}
.hero{--hero-control-width:100%}
.hero .hero-audience,.hero .hero-cta{width:var(--hero-control-width);max-width:100%;min-width:0}
.hero .hero-audience{justify-content:center}
.hero-actions .aux:empty{display:none}
@media(min-width:600px){.hero{--hero-control-width:320px}}

/* A separate visual summary immediately follows the hero. */
.how-section{padding-block:28px 30px;background:var(--mist);border-block:1px solid var(--mist)}
.experience-section{background:var(--coralTint);border-bottom:1px solid var(--line);padding-block:40px}
.experience-layout{gap:24px}
.experience-copy>.scenario-instruction{margin-top:12px}
.process-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 auto;max-width:900px}
.process-steps>li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:13px}
.process-icon{width:64px;height:64px;border-radius:20px}
.process-icon>svg{width:33px;height:33px}
.process-number{width:24px;height:24px;right:-6px;bottom:-5px;border-width:2px;border-color:var(--mist);font-size:var(--font-min)}
.process-copy h3{font-size:1.0625rem;letter-spacing:-.02em}
.process-steps>li:not(:last-child)::after{left:calc(50% + 39px);top:32px;width:calc(100% - 66px);height:0;border-left:0;border-top:1px dashed var(--sage)}
.scenario-picker{margin-top:0;gap:8px}
.scenario-picker button,.scenario-picker button[aria-pressed=true]{min-height:96px;padding:12px;grid-template-columns:1fr auto;gap:8px;align-content:center;align-items:center;font-size:var(--font-min)}
.scenario-picker button>svg{width:23px;height:23px}
.scenario-picker button>span:not(.scenario-check){grid-column:1/-1;grid-row:2}
.scenario-picker .scenario-check{grid-column:2;grid-row:1;align-self:center}
.scenario-picker button[aria-pressed=true]{padding:11px}
.demo-caption{min-height:0;margin-top:12px}

/* Pain recognition and reward examples answer one question: why will this help? */
.recognition-section{background:var(--ice);border:0;padding-block:40px}
.recognition-layout{gap:24px}
.recognition-copy h2{max-width:26ch}
.recognition-lead{margin-top:12px}
.pain-paths{gap:10px}
.pain-paths>li{padding:14px 12px;background:var(--ice);border-color:var(--mist)}
.pain-paths>li>svg{width:26px;height:26px;margin-bottom:10px}
.pain-paths h3{font-size:1rem;line-height:1.25}
.pain-paths p{font-size:var(--font-min);margin-top:8px}
.rewards-block{min-width:0;border-top:1px solid var(--mist);padding-top:24px}
.rewards-heading h3{font-size:1.5rem;max-width:none}
.reward-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:18px}
.reward-option,.reward-option.friends{display:flex;align-items:center;gap:10px;min-height:76px;padding:14px 12px;border-radius:14px}
.reward-option>svg,.reward-option.friends>svg{width:28px;height:28px;margin:0}
.reward-option h4{font-size:1rem;line-height:1.25}
.reward-option h4 br{display:none}
.reward-option.friends{grid-column:1/-1;min-height:64px}
.rewards-note{font-size:var(--font-min);margin-top:14px;max-width:65ch}

/* Full-width color changes identify each new part of the story. */
.science-section{display:block;background:var(--coralTint);border-block:1px solid var(--line)}
.science-layout{display:grid;gap:24px}
.science-symbol.progress{background:var(--mist);color:var(--green)}
.science-evidence details{border-color:var(--line)}
.faq-section{display:block;background:var(--ice);border:0}
.faq-layout{display:grid;gap:20px}
.faq-list details{border-color:var(--mist)}
.final-section{padding-block:36px}
.site-footer{padding-bottom:32px}

@media(min-width:600px){
 .reward-options{grid-template-columns:repeat(3,minmax(0,1fr))}
 .reward-option.friends{grid-column:2/-1}
}
@media(min-width:900px){
 .site-header .header-inner{min-height:88px;padding-block:12px}
 .site-header .brand{font-size:37.6px;gap:10px;letter-spacing:-1.7px}
 .site-header .brand-mark{width:42px;height:44px;border-radius:12px;font-size:28.8px}
 .site-header .header-cta{font-size:1.0625rem;min-height:50px;padding-inline:22px}
 .hero{padding-top:36px;padding-bottom:42px}
 .experience-section{padding-block:56px}
 .how-section{padding-block:32px 34px}
 .experience-layout{max-width:1160px;grid-template-columns:minmax(0,1fr) 420px;gap:64px}
 .experience-copy h2{font-size:2.5rem;max-width:19ch}
 .process-steps{gap:40px;max-width:900px;margin-block:0}
 .process-steps>li{gap:16px}
 .process-icon{width:80px;height:80px;border-radius:25px}
 .process-icon>svg{width:42px;height:42px}
 .process-number{width:28px;height:28px;font-size:var(--font-min)}
 .process-copy h3{font-size:1.375rem}
 .process-steps>li:not(:last-child)::after{left:calc(50% + 48px);top:40px;width:calc(100% - 56px)}
 .scenario-picker{max-width:510px;gap:10px}
 .scenario-picker button,.scenario-picker button[aria-pressed=true]{min-height:80px;font-size:1rem}
 .recognition-section{padding-block:56px}
 .recognition-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:56px;row-gap:32px;align-items:start}
 .recognition-copy h2{font-size:2.5rem;max-width:20ch}
 .pain-paths{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .pain-paths>li{padding:16px}
 .pain-paths h3{font-size:1.0625rem}
 .rewards-block{grid-column:1/-1;padding-top:28px}
 .rewards-heading{display:block}
 .rewards-heading h3{font-size:1.75rem}
 .reward-options{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:20px}
 .reward-option,.reward-option.friends{min-height:88px;padding:16px;grid-column:auto;gap:12px}
 .reward-option.friends h4 br{display:none}
 .rewards-note{font-size:var(--font-min)}
 .science-section,.faq-section{padding-block:56px}
 .science-layout{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 64px;align-items:center}
 .science-intro h2{font-size:2.5rem}
 .science-principles{gap:20px}
 .science-evidence{grid-column:1/-1}
 .faq-layout{grid-template-columns:.8fr 1.2fr;gap:64px}
 .final-section{padding-block:44px}
}
@media(max-width:359px){
 .site-header .header-inner{gap:6px;min-height:70px}
 .site-header .brand{font-size:24.8px;gap:6px}
 .site-header .brand-mark{width:30px;height:32px;font-size:20.8px}
 .site-header .header-cta{font-size:var(--font-min);padding-inline:8px}
 .process-steps{gap:8px}
 .process-copy h3{font-size:var(--font-min)}
 .scenario-picker button,.scenario-picker button[aria-pressed=true]{padding:10px 8px;gap:6px;font-size:var(--font-min)}
 .scenario-picker button[aria-pressed=true]{padding:9px 7px}
 .reward-option,.reward-option.friends{padding-inline:10px;gap:8px}
}