/* ==============================
   TIHNA — Complete Stylesheet
   Dark premium · Teal #00C9A7
   Cabinet Grotesk + Satoshi
   ============================== */

/* --- TOKENS --- */
:root {
  --bg:        #09090B;
  --surface:   #111113;
  --surface2:  #18181B;
  --surface3:  #222225;
  --border:    rgba(255,255,255,0.08);
  --divider:   rgba(255,255,255,0.05);
  --text:      #F4F4F5;
  --muted:     #A9A9B2;
  --faint:     #85858E;
  --teal:      #00C9A7;
  --teal-dim:  rgba(0,201,167,0.10);
  --teal-glow: 0 0 40px rgba(0,201,167,0.18);
  --blue:      #7DD3FC;
  --purple:    #A78BFA;
  --amber:     #F59E0B;
  --font-d:    'Cabinet Grotesk', 'Helvetica Neue', sans-serif;
  --font-b:    'Satoshi', 'Inter', sans-serif;
  --ease:      cubic-bezier(0.16,1,0.3,1);
}

/* --- RESET --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;scroll-padding-top:72px}
body{font-family:var(--font-b);font-size:clamp(1rem,.95rem + .25vw,1.125rem);color:var(--text);background:var(--bg);min-height:100dvh;line-height:1.65;overflow-x:hidden}
img,svg{display:block;max-width:100%;height:auto}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-d);line-height:1.1;text-wrap:balance}
p,li{text-wrap:pretty}
::selection{background:rgba(0,201,167,.2);color:var(--text)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}
ul{list-style:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* --- LAYOUT HELPERS --- */
.container{width:100%;max-width:1440px;margin-inline:auto;padding-inline:clamp(1.5rem,4vw,5rem)}
.section{padding-block:clamp(5rem,9vw,10rem)}
.teal{color:var(--teal)}
.teal-text{color:var(--teal)}
.left-align{text-align:left}
.mt-8{margin-top:2rem}

/* --- BUTTONS --- */
.btn-primary{display:inline-flex;align-items:center;gap:.5rem;background:var(--teal);color:#09090B;font-family:var(--font-b);font-weight:700;border-radius:9999px;border:none;cursor:pointer;transition:background 180ms var(--ease),transform 180ms var(--ease),box-shadow 180ms var(--ease)}
.btn-primary:hover{background:#00b396;transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,201,167,.3)}
.btn-ghost{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.06);color:var(--text);font-family:var(--font-b);font-weight:600;border-radius:9999px;border:1px solid var(--border);cursor:pointer;transition:background 180ms var(--ease)}
.btn-ghost:hover{background:rgba(255,255,255,.11)}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:transparent;color:var(--text);font-family:var(--font-b);font-weight:600;border-radius:9999px;border:1px solid var(--border);cursor:pointer;transition:border-color 180ms var(--ease),color 180ms var(--ease)}
.btn-outline:hover{border-color:var(--teal);color:var(--teal)}
.btn-sm{font-size:.875rem;padding:.45rem 1.1rem}
.btn-lg{font-size:1rem;padding:.9rem 2.25rem}
.btn-full{width:100%;justify-content:center;padding:.85rem 1.25rem;min-height:48px;font-size:.9375rem;text-align:center;line-height:1.25}

/* --- NAV --- */
.nav{position:sticky;top:0;z-index:100;background:rgba(9,9,11,.88);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid var(--divider)}
.nav-inner{display:flex;align-items:center;gap:2.5rem;max-width:1440px;margin-inline:auto;padding-inline:clamp(1.5rem,4vw,5rem);height:68px}
.logo{display:flex;align-items:center;flex-shrink:0}
.nav-links{display:flex;align-items:center;gap:2rem;flex:1}
.nav-links a{font-size:.875rem;font-weight:500;color:var(--muted);transition:color 180ms var(--ease)}
.nav-links a:hover{color:var(--text)}
.nav-right{display:flex;align-items:center;gap:.75rem;margin-left:auto}
.hamburger{display:none;flex-direction:column;gap:5px;padding:.375rem}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all 180ms var(--ease)}
.mobile-menu{display:none;flex-direction:column;gap:1rem;padding:1.5rem clamp(1.25rem,5vw,3rem) 2rem;border-top:1px solid var(--divider)}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:1rem;font-weight:500;color:var(--muted)}
.mobile-menu .btn-primary{align-self:flex-start;margin-top:.5rem}
@media(max-width:900px){.nav-links{display:none}.nav-right .btn-primary{display:none}.hamburger{display:flex}}
@media(max-width:900px){.nav-right .btn-sm:not(.hamburger){display:none}}

/* --- HERO --- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-start;overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.40}
.hero-fade-top{position:absolute;inset:0;background:linear-gradient(180deg,var(--bg) 0%,transparent 20%)}
.hero-fade-bottom{position:absolute;inset:0;background:linear-gradient(0deg,var(--bg) 0%,transparent 35%)}
#heroCanvas{position:absolute;bottom:0;left:0;right:0;width:100%;height:140px;opacity:.6;pointer-events:none}
.hero-content{position:relative;z-index:2;text-align:center;width:100%;max-width:1440px;margin-inline:auto;padding-inline:clamp(1.5rem,5vw,6rem);padding-block:clamp(2.5rem,6vw,8rem);display:flex;flex-direction:column;align-items:center;gap:2rem}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;flex-wrap:nowrap;font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);background:rgba(0,201,167,.08);border:1px solid rgba(0,201,167,.2);border-radius:9999px;padding:.45rem 1.375rem}
.hero h1{font-size:clamp(3rem,1rem + 5.8vw,8.5rem);font-weight:900;letter-spacing:-.04em;max-width:26ch;line-height:1.0}
.hero-sub{font-size:clamp(1.0625rem,.95rem + .6vw,1.375rem);color:var(--muted);max-width:68ch;line-height:1.85}
.hero-cta-group{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;justify-content:center;margin-top:.75rem;width:100%}
.hero-stats{display:flex;align-items:center;gap:3rem;flex-wrap:wrap;justify-content:center;margin-top:1.75rem;padding-top:2rem;border-top:1px solid var(--divider)}
.stat{display:flex;flex-direction:column;align-items:center;gap:2px}
.stat-num{font-family:var(--font-d);font-size:clamp(1.75rem,1.4rem + 1.1vw,2.75rem);font-weight:900;color:var(--teal)}
.stat-label{font-size:.875rem;color:var(--muted)}
.stat-divider{width:1px;height:52px;background:var(--border)}

/* --- PROBLEM STRIP --- */
.problem-strip{background:rgba(0,201,167,.06);border-top:1px solid rgba(0,201,167,.12);border-bottom:1px solid rgba(0,201,167,.12);padding-block:2rem}
.problem-strip p{max-width:1440px;margin-inline:auto;padding-inline:clamp(1.5rem,4vw,5rem);font-size:clamp(1rem,.95rem + .3vw,1.125rem);color:var(--muted);text-align:center;line-height:1.8}
.problem-strip strong{color:var(--text)}

/* --- SECTION LABELS/TITLES --- */
.section-label{font-size:.875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:1rem}
.section-title{font-size:clamp(2.375rem,1.2rem + 3vw,4.5rem);font-weight:900;margin-bottom:1.5rem;letter-spacing:-.03em}
.section-sub{font-size:clamp(1rem,.95rem + .25vw,1.175rem);color:var(--muted);max-width:80ch;line-height:1.9;margin-bottom:0}

/* --- PROGRAMS SECTION --- */
.programs-section .container{text-align:center}
.programs-section .section-sub{margin-inline:auto;margin-bottom:3.5rem}
.programs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:left}
@media(max-width:1200px){.programs-grid{grid-template-columns:repeat(2,1fr);gap:2rem}}@media(max-width:560px){.programs-grid{grid-template-columns:1fr}}

.program-card{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:2.25rem;display:flex;flex-direction:column;gap:1.5rem;transition:transform 200ms var(--ease),border-color 200ms var(--ease),box-shadow 200ms var(--ease)}
.program-card:hover{transform:translateY(-4px);border-color:rgba(0,201,167,.25);box-shadow:var(--teal-glow)}
.program-card--featured{border-color:rgba(0,201,167,.3);background:linear-gradient(150deg,rgba(0,201,167,.07) 0%,var(--surface) 60%);position:relative}
.featured-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--teal);color:#09090B;font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .9rem;border-radius:9999px;white-space:nowrap}

.program-top{display:flex;align-items:center;gap:.875rem}
.program-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sleep-icon{background:rgba(0,201,167,.1);color:var(--teal)}
.calm-icon{background:rgba(125,211,252,.1);color:var(--blue)}
.focus-icon{background:rgba(167,139,250,.1);color:var(--purple)}
.program-name{font-family:var(--font-d);font-size:1.2rem;font-weight:800;line-height:1.2}
.program-hz{font-size:.75rem;color:var(--teal);font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}

.wave-canvas{width:100%;height:52px;border-radius:8px;background:var(--surface2);display:block}

.program-outcome{background:var(--surface2);border-radius:12px;padding:1rem 1.125rem;border-left:3px solid var(--teal)}
.outcome-big{font-family:var(--font-d);font-size:clamp(1.75rem,1.5rem + .8vw,2.25rem);font-weight:900;color:var(--teal);line-height:1}
.outcome-label{font-size:.78rem;color:var(--muted);margin-top:.25rem;line-height:1.5}

.program-desc{font-size:.875rem;color:var(--muted);line-height:1.7}

.program-citation{display:flex;align-items:center;gap:.4rem;font-size:.78rem}
.program-citation svg{color:var(--teal);flex-shrink:0}
.program-citation a{color:var(--teal);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(0,201,167,.35);transition:text-decoration-color 150ms}
.program-citation a:hover{text-decoration-color:var(--teal)}

.program-free-note{font-size:.75rem;font-weight:600;color:var(--muted);margin-top:auto}
.programs-disclaimer{font-size:.78rem;color:var(--faint);max-width:640px;margin-inline:auto;margin-top:2.5rem;line-height:1.7}

/* --- APP SECTION --- */
.app-section{background:var(--surface);border-top:1px solid var(--divider);border-bottom:1px solid var(--divider)}
.app-inner{display:grid;grid-template-columns:1.15fr 0.85fr;gap:clamp(4rem,7vw,9rem);align-items:center}
@media(max-width:900px){.app-inner{grid-template-columns:1fr}.app-mockup{order:-1;max-width:360px;margin-inline:auto}}
.app-text{display:flex;flex-direction:column;gap:1.75rem}
.feature-list{display:flex;flex-direction:column;gap:1.1rem}
.feature-item{display:flex;align-items:flex-start;gap:1rem;font-size:clamp(.9375rem,.9rem + .2vw,1.0625rem);color:var(--muted);line-height:1.75}
.feature-item strong{color:var(--text)}
.feature-dot{width:8px;height:8px;border-radius:50%;background:var(--teal);flex-shrink:0;margin-top:.45rem}
.app-mockup img{width:100%;max-width:460px;border-radius:28px;box-shadow:var(--teal-glow),0 40px 100px rgba(0,0,0,.6);margin-inline:auto;transition:transform 300ms var(--ease)}
.app-mockup img:hover{transform:scale(1.02) rotate(-1deg)}

/* --- SCIENCE --- */
.science-section{position:relative;overflow:hidden}
.science-bg{position:absolute;inset:0;pointer-events:none}
.science-bg img{width:100%;height:100%;object-fit:cover;opacity:.15}
.science-overlay{position:absolute;inset:0;background:linear-gradient(180deg,var(--bg) 0%,rgba(9,9,11,.88) 40%,rgba(9,9,11,.88) 60%,var(--bg) 100%);pointer-events:none;z-index:0}
.science-inner{position:relative;z-index:2;text-align:center}
.science-inner .section-sub{margin-inline:auto;margin-bottom:3rem}

.studies-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.75rem;text-align:left;margin-bottom:3rem}
@media(max-width:760px){.studies-grid{grid-template-columns:1fr}}

/* Study cards ARE real links — make them feel clickable */
.study-card{display:flex;gap:1.5rem;align-items:flex-start;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:20px;padding:2rem;cursor:pointer;transition:background 200ms var(--ease),border-color 200ms var(--ease),transform 200ms var(--ease);text-decoration:none;color:inherit;position:relative;z-index:3;-webkit-tap-highlight-color:rgba(0,201,167,.15);touch-action:manipulation}
.study-card:hover{background:rgba(0,201,167,.06);border-color:rgba(0,201,167,.28);transform:translateY(-3px)}
.study-card:active{background:rgba(0,201,167,.1);border-color:rgba(0,201,167,.4);transform:scale(0.98)}
.study-card:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.study-hz{font-family:var(--font-d);font-size:clamp(1.5rem,1.2rem + .8vw,2rem);font-weight:900;color:var(--teal);flex-shrink:0;min-width:64px;line-height:1.1}
.study-body{display:flex;flex-direction:column;gap:.4rem}
.study-result{font-size:1.0625rem;font-weight:700;color:#fff;line-height:1.35}
.study-detail{font-size:.9375rem;color:rgba(255,255,255,.5);line-height:1.7}
.study-source{font-size:.78rem;color:var(--teal);font-weight:600;margin-top:.25rem;display:flex;align-items:center;gap:.3rem}
.study-source::after{content:'↗';font-size:.75rem;opacity:.8}
.science-note{font-size:clamp(.9375rem,.9rem + .25vw,1.0625rem);color:rgba(255,255,255,.45);max-width:1000px;margin-inline:auto;line-height:1.85}

/* --- HOW IT WORKS --- */
.steps-section{background:var(--surface);border-top:1px solid var(--divider);border-bottom:1px solid var(--divider)}
.steps-section .section-title{margin-bottom:3.5rem}
.steps-list{max-width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:0 5rem}@media(max-width:900px){.steps-list{grid-template-columns:1fr;max-width:680px;margin-inline:auto}}
.step-row{display:grid;grid-template-columns:68px 1fr;gap:1.75rem;align-items:start;padding-bottom:3rem;position:relative}
.step-row:not(:last-child)::after{content:'';position:absolute;left:32px;top:60px;width:2px;height:calc(100% - 32px);background:linear-gradient(to bottom,var(--teal),rgba(0,201,167,.1));opacity:.3}@media(min-width:860px){.step-row:nth-child(2)::after{display:none}}
.step-num{width:60px;height:60px;border-radius:14px;background:var(--teal-dim);border:1px solid rgba(0,201,167,.2);color:var(--teal);font-family:var(--font-d);font-weight:900;font-size:1.125rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;letter-spacing:-.01em}
.step-content h3{font-size:clamp(1.125rem,1rem + .5vw,1.5rem);font-weight:700;margin-bottom:.75rem}
.step-content p{font-size:clamp(.9375rem,.9rem + .2vw,1.0625rem);color:var(--muted);line-height:1.85}

/* --- COMPARISON --- */
.comparison-section{}
.comparison-section .section-title{margin-bottom:2.5rem}
.comparison-wrap{overflow-x:auto;border-radius:20px;border:1px solid var(--border)}
.compare-table{width:100%;border-collapse:collapse;font-size:.9375rem}
.compare-table th,.compare-table td{padding:1.125rem 1.5rem;text-align:center;border-bottom:1px solid var(--divider)}
.compare-table th:first-child,.compare-table td:first-child{text-align:left;color:var(--muted)}
.compare-table thead tr{background:var(--surface2)}
.compare-table thead th{font-family:var(--font-d);font-weight:700;font-size:.875rem}
.compare-table tbody tr{background:var(--surface);transition:background 150ms}
.compare-table tbody tr:hover{background:var(--surface2)}
.compare-table tbody tr:last-child td{border-bottom:none}
.tihna-col{background:rgba(0,201,167,.05)!important}
.compare-table .tihna-col th,.compare-table .tihna-col{color:var(--teal);font-weight:600}
.yes{color:var(--teal);font-weight:700}
.no{color:var(--faint)}
.partial{color:var(--amber)}

/* --- PRICING --- */
.pricing-section .section-title,.pricing-section .section-label{text-align:center}
.pricing-section .section-sub{text-align:center;margin-inline:auto;margin-bottom:3.5rem}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;align-items:start}
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.pricing-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

.price-card{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:2.5rem;display:flex;flex-direction:column;gap:1.5rem;position:relative}
.price-card--hero{border-color:var(--teal);background:linear-gradient(150deg,rgba(0,201,167,.08) 0%,var(--surface) 60%);box-shadow:var(--teal-glow)}
.price-card--lifetime{border-color:rgba(245,158,11,.25)}
.price-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--teal);color:#09090B;font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .9rem;border-radius:9999px;white-space:nowrap}
.price-badge--gold{background:var(--amber);color:#1a0f00}
.price-card h3{font-family:var(--font-d);font-size:1.2rem;font-weight:800}
.price-amount{font-family:var(--font-d);font-size:clamp(2rem,1.6rem + .8vw,2.6rem);font-weight:900;line-height:1.1;letter-spacing:-.03em}
.price-period{font-size:.875rem;color:var(--muted);font-family:var(--font-b);font-weight:400;letter-spacing:0}
.price-sub-note{font-size:.78rem;color:var(--teal);font-weight:600;margin-top:-.5rem}
/* Founders CTA block inside Annual card */
.founders-cta{margin-top:1rem;padding-top:1rem;border-top:1px dashed rgba(245,158,11,.35);display:flex;flex-direction:column;gap:.65rem}
.founders-cta-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem}
.founders-badge-inline{display:inline-block;font-size:.75rem;font-weight:800;letter-spacing:.08em;color:#1a0f00;background:var(--amber);padding:.25rem .55rem;border-radius:9999px;text-transform:uppercase}
.founders-strike{color:var(--faint);text-decoration:line-through;font-size:.85rem}
.founders-price{color:var(--amber);font-weight:800;font-size:.95rem}
.btn-founders{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--amber);color:#1a0f00;font-family:var(--font-b);font-weight:800;border-radius:9999px;border:none;cursor:pointer;padding:.75rem 1rem;font-size:.9rem;letter-spacing:.01em;transition:background 180ms var(--ease),transform 180ms var(--ease),box-shadow 180ms var(--ease);text-decoration:none;text-align:center;line-height:1.2}
.btn-founders:hover{background:#ffb128;transform:translateY(-2px);box-shadow:0 8px 24px rgba(245,158,11,.35)}
.founders-fine{font-size:.75rem;color:var(--faint);text-align:center;margin:0;line-height:1.4}
.price-badge--muted{background:rgba(255,255,255,.08);color:var(--muted);border:1px solid var(--border)}
.btn-lifetime{border-color:var(--amber);color:var(--amber)}
.btn-lifetime:hover{background:rgba(245,158,11,.1);border-color:var(--amber);color:var(--amber)}
/* Row under all pricing cards */
.pricing-included{margin-top:2.25rem;padding:1rem 1.25rem;border:1px solid var(--divider);border-radius:.75rem;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem 1rem;font-size:.8rem;color:var(--muted);text-align:center;background:rgba(255,255,255,.02)}
.pricing-included-label{color:var(--teal);font-weight:700;letter-spacing:.02em}
@media(max-width:900px){.pricing-included{flex-direction:column;gap:.35rem}.founders-cta{padding-top:.85rem}}
.price-features{display:flex;flex-direction:column;gap:.625rem;flex:1}
.price-features li{font-size:.875rem;color:var(--muted);display:flex;align-items:center;gap:.5rem}
.price-features li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--teal);flex-shrink:0}
.price-note{font-size:.75rem;color:var(--faint);text-align:center}

/* --- WAITLIST --- */
.waitlist-section{position:relative;overflow:hidden;background:var(--bg)}
.waitlist-bg{position:absolute;inset:0;pointer-events:none}
.waitlist-bg::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 100%,rgba(0,201,167,.1) 0%,transparent 70%)}
#ctaCanvas{width:100%;height:100%;opacity:.3}
.waitlist-inner{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2rem;max-width:1000px;margin-inline:auto}
.waitlist-inner .section-title{font-size:clamp(2.75rem,1.5rem + 4.5vw,6rem)}

.waitlist-form{width:100%;max-width:680px}
.form-row{display:flex;gap:.75rem;flex-wrap:wrap}
.email-input{flex:1;min-width:240px;background:var(--surface2);border:1px solid var(--border);border-radius:9999px;padding:.75rem 1.5rem;font-size:.9375rem;font-family:var(--font-b);color:var(--text);transition:border-color 180ms var(--ease),box-shadow 180ms var(--ease);outline:none}
.email-input::placeholder{color:var(--faint)}
.email-input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,201,167,.12)}
.form-submit{white-space:nowrap;flex-shrink:0}
#formStatus{font-size:.875rem;color:var(--teal);min-height:1.2em;margin-top:.75rem;font-weight:600}
.form-privacy{font-size:.75rem;color:var(--faint);margin-top:.5rem}
.waitlist-disclaimer{font-size:.75rem;color:var(--faint)}

/* --- SITE QR (desktop-only) --- */
.site-qr-block{display:none;align-items:center;gap:1.5rem;margin-top:2rem;padding:1.25rem 1.5rem;background:rgba(255,255,255,.03);border:1px solid rgba(0,201,167,.18);border-radius:20px;max-width:520px}
.site-qr-card{flex-shrink:0;padding:.5rem;background:#0a0a0b;border-radius:14px;box-shadow:0 6px 20px rgba(0,201,167,.12);line-height:0}
.site-qr-card img{display:block;width:160px;height:160px;border-radius:8px}
.site-qr-copy{text-align:left;color:#fff}
.site-qr-label{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:.35rem}
.site-qr-title{font-size:1.35rem;font-weight:800;letter-spacing:-.01em;line-height:1.15;margin-bottom:.5rem}
.site-qr-sub{font-size:.85rem;color:rgba(255,255,255,.7);line-height:1.5}
@media(min-width:820px){.site-qr-block{display:flex}}

/* --- FOOTER --- */
.footer{background:var(--surface);border-top:1px solid var(--divider);padding-top:clamp(3rem,6vw,5rem)}
.footer-inner{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:clamp(1.5rem,2.5vw,2.75rem);padding-bottom:3rem}
@media(max-width:1100px){.footer-inner{grid-template-columns:1fr 1fr 1fr;gap:2.5rem}}
@media(max-width:768px){.footer-inner{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer-inner{grid-template-columns:1fr}}
/* .footer-brand is a flex COLUMN, so the default align-items:stretch was
   stretching the logo to the full column width (306px at a declared
   32px height = 9.56 aspect vs the file's true 5.34). That both
   oversized and horizontally distorted the wordmark, and left only
   36px before the Product column. */
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem}
.footer-brand img{align-self:flex-start;max-width:100%;height:auto}
.footer-brand p{font-size:.875rem;color:var(--muted);line-height:1.7}
.footer-links{display:contents}
.footer-col{display:flex;flex-direction:column;gap:.625rem}
.footer-col h4{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:.375rem}
.footer-col a{font-size:.8125rem;color:var(--muted);transition:color 150ms var(--ease);line-height:1.5}
.footer-col a:hover{color:var(--teal)}
.footer-bottom{border-top:1px solid var(--divider);padding-block:1.25rem}
.footer-bottom p{font-size:.75rem;color:var(--faint);text-align:center;line-height:1.75;max-width:none}

/* --- INSIGHT BRIDGE --- */
.insight-bridge{background:transparent;border:0;padding-block:clamp(3.5rem,7vw,6rem)}
.insight-bridge__card{position:relative;max-width:900px;margin-inline:auto;padding:clamp(2.25rem,4vw,3.25rem) clamp(1.75rem,4vw,3.5rem);border-radius:24px;text-align:center;overflow:hidden;background:radial-gradient(130% 150% at 50% 0%,rgba(0,201,167,.16) 0%,rgba(0,201,167,.05) 42%,rgba(0,201,167,0) 78%),var(--surface2);border:1px solid rgba(0,201,167,.26);box-shadow:0 28px 70px -30px rgba(0,201,167,.32),inset 0 1px 0 rgba(255,255,255,.05)}
.insight-bridge__card::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(340px,64%);height:1px;background:linear-gradient(90deg,transparent,var(--teal),transparent);opacity:.75}
.insight-bridge__label{font-family:var(--font-b);font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:1.125rem}
.insight-bridge__text{max-width:60ch;margin-inline:auto;font-size:clamp(1.125rem,1rem + .55vw,1.4375rem);color:var(--text);text-align:center;line-height:1.7;font-weight:400;letter-spacing:-.005em}
.insight-bridge__text strong{color:var(--teal);font-weight:600}
.insight-bridge__text em{color:var(--text);font-style:italic;font-weight:500}


/* ============================================================
   RESPONSIVE BREAKPOINTS — Full device coverage
   xl   ≥ 1440px  (large desktop, 4K)
   lg   1280–1439 (MacBook 13/15)
   md   1024–1279 (iPad landscape, small laptop)
   sm   768–1023  (iPad portrait)
   xs   480–767   (large phone landscape / small tablet)
   2xs  ≤ 479     (iPhone SE → iPhone 16 Pro Max)
   ============================================================ */

/* ── xl: 1440px+ — fill the full viewport width ── */
@media (min-width: 1440px) {
  .hero h1 { font-size: clamp(5rem,4.5vw,8.5rem); }
  .section-title { font-size: clamp(3rem,2.8vw,4.5rem); }
  .programs-grid { grid-template-columns: repeat(4,1fr); }
  .pricing-grid  { grid-template-columns: repeat(3,1fr); }
  .steps-list    { grid-template-columns: repeat(2,1fr); }
}

/* ── lg: MacBook 13/15 (1280–1439px) ── */
@media (max-width: 1439px) and (min-width: 1280px) {
  .hero h1 { font-size: clamp(3.5rem,4vw,6rem); }
  .section-title { font-size: clamp(2.5rem,3vw,4rem); }
}

/* ── md: iPad landscape + small laptop (1024–1279px) ── */
@media (max-width: 1279px) and (min-width: 1024px) {
  .hero h1 { font-size: clamp(3rem,4.5vw,5.5rem); max-width:20ch; }
  .hero-sub { font-size: clamp(1rem,1.5vw,1.25rem); max-width:58ch; }
  .section-title { font-size: clamp(2.25rem,3.5vw,3.5rem); }
  .programs-grid { grid-template-columns: repeat(2,1fr); gap:1.5rem; }
  .pricing-grid  { grid-template-columns: repeat(3,1fr); gap:1.5rem; }
  .steps-list    { grid-template-columns: repeat(2,1fr); gap:0 3rem; }
}

/* ── sm: iPad portrait (768–1023px) ── */
@media (max-width: 1023px) and (min-width: 768px) {
  .container { padding-inline: clamp(1.5rem,4vw,3rem); }
  .hero h1 { font-size: clamp(2.75rem,5vw,4.5rem); max-width:22ch; }
  .hero-sub { font-size: clamp(.9375rem,1.5vw,1.125rem); max-width:56ch; }
  .hero { min-height: auto; }
  .hero-content { padding-block: clamp(3rem,6vw,5.5rem); }
  .section-title { font-size: clamp(2rem,3.5vw,3rem); }
  .section-sub { max-width:65ch; }
  .programs-grid { grid-template-columns: repeat(2,1fr); gap:1.25rem; }
  .pricing-grid  { grid-template-columns: repeat(2,1fr); gap:1.25rem; }
  .steps-list    { grid-template-columns: 1fr; max-width:600px; margin-inline:auto; }
  .app-inner     { grid-template-columns: 1fr; }
  .app-mockup    { order:-1; max-width:360px; margin-inline:auto; }
  .studies-grid  { grid-template-columns: repeat(2,1fr); }
  .footer-inner  { grid-template-columns: 1fr 1fr; gap:2.5rem; }
  .insight-bridge__text { font-size:1.1875rem; max-width:100%; }
}

/* ── xs: Large phone / small tablet (480–767px) ── */
@media (max-width: 767px) and (min-width: 480px) {
  .container { padding-inline: 1.5rem; }
  .hero { min-height: auto; }
  .hero h1 { font-size: clamp(2.5rem,6vw,3.75rem); max-width:18ch; }
  .hero-sub { font-size: clamp(.9375rem,2vw,1.0625rem); max-width:52ch; }
  .hero-content { padding-inline:1.75rem; padding-block: clamp(3.5rem,8vw,5rem); }
  .hero-cta-group { gap:.875rem; }
  .hero-badge { font-size:.75rem; padding:.35rem 1rem; }
  .hero-stats { gap:1.5rem; }
  .section-title { font-size: clamp(1.875rem,5vw,2.5rem); }
  .section-sub { font-size:.9375rem; max-width:90%; }
  .programs-grid { grid-template-columns: 1fr; max-width:480px; margin-inline:auto; }
  .pricing-grid  { grid-template-columns: 1fr; max-width:480px; margin-inline:auto; }
  .steps-list    { grid-template-columns: 1fr; max-width:540px; margin-inline:auto; }
  .app-inner     { grid-template-columns: 1fr; }
  .app-mockup    { order:-1; max-width:320px; margin-inline:auto; }
  .studies-grid  { grid-template-columns: 1fr; }
  .footer-inner  { grid-template-columns: 1fr 1fr; gap:2rem; }
  .comparison-wrap { font-size:.8125rem; }
  .compare-table th,.compare-table td { padding:.75rem .875rem; }
  .insight-bridge__text { font-size:1.125rem; }
  .science-note { font-size:.9rem; }
}

/* ── 2xs: iPhone SE → iPhone 16 Pro Max (≤ 479px) ── */
@media (max-width: 479px) {
  .container { padding-inline: 1.25rem; }

  /* Nav */
  .nav-inner { padding-inline: 1.25rem; height:60px; }

  /* Hero */
  .hero { min-height: 100svh; align-items:flex-start; }
  .hero-content { padding-inline:1.25rem; padding-block: clamp(3rem,10svh,5rem); gap:1.5rem; }
  .hero-badge { font-size:.75rem; padding:.3rem .875rem; letter-spacing:.07em; white-space:nowrap; }
  .hero h1 { font-size: clamp(2.125rem,8.5vw,3rem); max-width:16ch; line-height:1.06; letter-spacing:-.025em; }
  .hero-sub { font-size:.9375rem; max-width:38ch; line-height:1.75; }
  .hero-cta-group { flex-direction:column; align-items:stretch; gap:.75rem; width:100%; }
  .hero-cta-group .btn-primary, .hero-cta-group .btn-ghost { width:100%; justify-content:center; }
  .btn-lg { font-size:.9375rem; padding:.875rem 1.5rem; }
  .hero-stats { gap:1.25rem; padding-top:1.5rem; justify-content:space-around; width:100%; }
  .stat { flex:1; min-width:0; padding:0 0.25rem; }
  .stat-divider { height:36px; flex-shrink:0; }
  .stat-num { font-size:1.5rem; }
  .stat-label { font-size:.75rem; text-align:center; line-height:1.3; }

  /* Sections */
  .section { padding-block: clamp(3rem,8vw,5rem); }
  .section-label { font-size:.75rem; margin-bottom:.75rem; }
  .section-title { font-size: clamp(1.75rem,7.5vw,2.375rem); letter-spacing:-.02em; margin-bottom:1rem; }
  .section-sub { font-size:.9375rem; max-width:100%; line-height:1.75; }

  /* Problem strip */
  .problem-strip { padding-block:1.25rem; }
  .problem-strip p { font-size:.9rem; }

  /* Programs */
  .programs-grid { grid-template-columns:1fr; gap:1.25rem; }
  .program-card { padding:1.5rem; border-radius:18px; }
  .programs-section .section-sub { margin-bottom:2.5rem; }

  /* App section */
  .app-inner { gap:2.5rem; }
  .app-mockup img { max-width:260px; border-radius:20px; }
  .app-text { gap:1.5rem; }
  .feature-list { gap:1rem; }
  .feature-item { font-size:.875rem; }

  /* Science */
  .studies-grid { grid-template-columns:1fr; gap:1rem; }
  .study-card { padding:1.25rem; border-radius:14px; gap:1rem; }
  .study-hz { font-size:1.5rem; min-width:52px; }
  .study-result { font-size:.9375rem; }
  .study-detail { font-size:.8125rem; }
  .science-note { font-size:.875rem; max-width:100%; }
  .science-inner .section-sub { margin-bottom:2.5rem; }

  /* How it works */
  .steps-list { grid-template-columns:1fr; max-width:100%; }
  .step-row { grid-template-columns:56px 1fr; gap:1.25rem; padding-bottom:2rem; }
  .step-num { width:50px; height:50px; font-size:1rem; }
  .step-content h3 { font-size:1.0625rem; }
  .step-content p { font-size:.875rem; }
  .steps-section .section-title { margin-bottom:2.5rem; }

  /* Comparison */
  .comparison-section .section-title { font-size:1.75rem; }
  .compare-table { font-size:.8125rem; }
  .compare-table th,.compare-table td { padding:.625rem .75rem; }

  /* Pricing */
  .pricing-grid { grid-template-columns:1fr; gap:1.25rem; }
  .price-card { padding:1.75rem; border-radius:20px; }
  .price-amount { font-size:2rem; }
  .pricing-section .section-sub { margin-bottom:2.5rem; }

  /* Waitlist */
  .waitlist-inner { max-width:100%; gap:1.5rem; }
  .waitlist-inner .section-title { font-size:clamp(2rem,8vw,2.75rem); }
  .form-row { flex-direction:column; gap:.625rem; }
  .email-input { min-width:0; width:100%; }
  .form-submit { width:100%; justify-content:center; }
  .waitlist-form { max-width:100%; }
  .waitlist-section { padding-block:clamp(3rem,8vw,5rem); }

  /* Insight bridge */
  .insight-bridge { padding-block:2.75rem; }
  .insight-bridge__card { padding:1.75rem 1.25rem; border-radius:20px; }
  .insight-bridge__text { font-size:1.0625rem; }

  /* Footer */
  .footer-inner { grid-template-columns:1fr; gap:2rem; padding-bottom:2rem; }
  .footer-brand p { font-size:.8125rem; }
  .footer-col a { font-size:.8125rem; }
  .footer { padding-top:2.5rem; }
}

/* ── Safe area insets (iPhone notch / Dynamic Island) ── */
@supports (padding: max(0px)) {
  .nav { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); }
  .hero-content { padding-left: max(1.25rem, env(safe-area-inset-left)); padding-right: max(1.25rem, env(safe-area-inset-right)); }
  @media (max-width:479px) {
    .footer { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
    .waitlist-section { padding-bottom: max(3rem, calc(3rem + env(safe-area-inset-bottom))); }
  }
}

/* ── Touch targets — all interactive elements min 44×44px on mobile ── */
@media (max-width: 900px) {
  .nav-links a { min-height: 44px; display:inline-flex; align-items:center; }
  .btn-primary, .btn-ghost, .btn-outline { min-height: 44px; }
  .hamburger { min-width:44px; min-height:44px; justify-content:center; align-items:center; }
}

/* ── Prevent horizontal scroll on all devices ── */
html, body { max-width: 100%; overflow-x: hidden; }
.hero, .problem-strip, .insight-bridge { max-width: 100vw; overflow-x: hidden; }

/* ============================================================
   SCIENCE FINDINGS + BLOG PREVIEW ROWS
   ============================================================ */

.science-findings {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 4rem;
}

/* Each finding = stat column + blog card column */
.finding-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 3rem;
  align-items: center;
  padding: 3rem 0;
}
.finding-row--reverse {
  grid-template-columns: 1fr 1.6fr;
  direction: rtl;
}
.finding-row--reverse > * {
  direction: ltr;
}

.finding-divider {
  height: 1px;
  background: rgba(255,255,255,.07);
  width: 100%;
}

/* LEFT: stat block */
.finding-hz {
  font-family: var(--font-d);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: .6rem;
}
.finding-number {
  font-family: var(--font-d);
  font-size: clamp(2.8rem, 2rem + 2vw, 4.5rem);
  font-weight: 900;
  color: #fff;
  line-height: 1;
  margin-bottom: .35rem;
}
.finding-vs {
  font-size: .9375rem;
  color: rgba(255,255,255,.68);
  margin-bottom: 1rem;
  line-height: 1.4;
}
.finding-plain {
  font-size: .9375rem;
  color: rgba(255,255,255,.65);
  line-height: 1.65;
  margin-bottom: 1.25rem;
  max-width: 340px;
}
.finding-source-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .875rem;
  font-weight: 700;
  color: var(--teal);
  text-decoration: none;
  background: rgba(0,201,167,.08);
  border: 1.5px solid rgba(0,201,167,.4);
  border-radius: 9999px;
  padding: .6rem 1.25rem;
  min-height: 44px;
  transition: background 160ms, border-color 160ms, transform 120ms;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,201,167,.2);
  cursor: pointer;
  position: relative;
  z-index: 10;
}
.finding-source-link:hover {
  background: rgba(0,201,167,.15);
  border-color: var(--teal);
}
.finding-source-link:active {
  background: rgba(0,201,167,.22);
  border-color: var(--teal);
  transform: scale(0.97);
}

/* RIGHT: blog card */
.finding-blog-card {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  align-items: center;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: background 200ms, border-color 200ms, transform 200ms;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,201,167,.1);
}
.finding-blog-card:hover {
  background: rgba(0,201,167,.05);
  border-color: rgba(0,201,167,.25);
  transform: translateY(-3px);
}
.finding-blog-card:active {
  transform: scale(0.99);
  background: rgba(0,201,167,.08);
}
.finding-blog-img {
  flex-shrink: 0;
  width: 180px;
  height: 140px;
  overflow: hidden;
}
.finding-blog-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms;
}
.finding-blog-card:hover .finding-blog-img img {
  transform: scale(1.05);
}
.finding-blog-body {
  padding: 1.25rem 1.5rem 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.finding-blog-tag {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--teal);
}
.finding-blog-body h3 {
  font-family: var(--font-d);
  font-size: clamp(.9375rem, .875rem + .3vw, 1.0625rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  margin: 0;
}
.finding-blog-body p {
  font-size: .875rem;
  color: rgba(255,255,255,.5);
  line-height: 1.6;
  margin: 0;
}
.finding-blog-cta {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--teal);
  margin-top: .25rem;
}

/* ENGINEERED BLOCK — the +10 dB ambience explainer */
.engineered-block {
  margin-top: 4rem;
  padding: 3rem clamp(1.5rem, 2vw, 3rem);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(0,201,167,0.06) 0%, rgba(0,201,167,0.02) 60%, transparent 100%);
  border: 1px solid rgba(0,201,167,0.16);
  position: relative;
  overflow: hidden;
}
.engineered-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 300px at 20% 0%, rgba(0,201,167,0.10), transparent 60%),
    radial-gradient(500px 260px at 90% 100%, rgba(245,158,11,0.06), transparent 60%);
  pointer-events: none;
  opacity: 0.9;
}
.engineered-eyebrow {
  position: relative;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: .75rem;
  text-align: center;
}
.engineered-title {
  position: relative;
  font-family: var(--font-d);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
  font-weight: 900;
  color: #fff;
  text-align: center;
  margin: 0 auto .75rem;
  max-width: 22ch;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.engineered-lead {
  position: relative;
  font-size: clamp(1rem, .95rem + .25vw, 1.1rem);
  color: rgba(255,255,255,.72);
  text-align: center;
  max-width: 62ch;
  margin: 0 auto 2.75rem;
  line-height: 1.7;
}
.engineered-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
.engineered-card {
  background: rgba(9,9,11,.55);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  padding: 1.75rem 1.5rem;
  backdrop-filter: blur(6px);
  transition: border-color 220ms var(--ease), transform 220ms var(--ease);
}
.engineered-card:hover {
  border-color: rgba(0,201,167,.32);
  transform: translateY(-3px);
}
.engineered-metric {
  font-family: var(--font-d);
  font-size: clamp(2rem, 1.5rem + 1.4vw, 2.75rem);
  font-weight: 900;
  color: var(--teal);
  line-height: 1;
  margin-bottom: .35rem;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.engineered-metric-label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 1rem;
}
.engineered-card p {
  font-size: .95rem;
  color: rgba(255,255,255,.78);
  line-height: 1.7;
  margin: 0;
  text-align: left;
}
/* This sits inside .engineered-block, which has its own inline padding, so the
   card is pulled back by the difference between the block padding and the
   standard card padding. That makes its content edges land on exactly the same
   x positions as .evidence-note directly below it, and both cards use the same
   two-column grid, so the whole science section reads on one alignment. */
.engineered-honest {
  position: relative;
  display: grid;
  grid-template-columns: minmax(200px, 19rem) minmax(0, 1fr);
  column-gap: clamp(2rem, 4vw, 4rem);
  row-gap: 0;
  align-items: start;
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.75rem);
  margin-top: 2.5rem;
  border: 1px solid rgba(0,201,167,.16);
  border-left: 3px solid var(--teal);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(0,201,167,.07) 0%, rgba(0,201,167,.025) 100%),
    rgba(255,255,255,.012);
}
.engineered-honest__head, .engineered-honest__body { min-width: 0; }
.engineered-honest__label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: .625rem;
  text-align: left;
}
.engineered-honest__title {
  text-align: left;
  font-family: var(--font-d);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 800;
  color: #fff;
  margin: 0;
  letter-spacing: -.015em;
  line-height: 1.2;
  text-wrap: balance;
}
.engineered-honest__body p {
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  color: rgba(255,255,255,.72);
  line-height: 1.75;
  margin: 0;
  text-align: left;
  max-width: 68ch;
}
.engineered-honest__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.07);
}
@media (max-width: 860px) {
  .engineered-honest { display: block; }
  .engineered-honest__title { margin-bottom: .875rem; }
}
@media (max-width: 560px) {
  .engineered-honest__actions { flex-direction: column; }
  .engineered-honest__actions .btn-ghost { width: 100%; justify-content: center; text-align: center; }
}
.engineered-honest em {
  color: var(--teal);
  font-style: normal;
  font-weight: 600;
}

/* Bottom CTA strip */
.science-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
  padding-top: 1rem;
  margin-top: 3rem;
}
.science-bottom__text {
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  color: rgba(255,255,255,.68);
  max-width: 68ch;
  line-height: 1.75;
  text-align: left;
  margin-inline: auto;
}

/* ---- RESPONSIVE ---- */

/* Large tablet: tighten the blog card image */
@media (max-width: 1100px) {
  .finding-row,
  .finding-row--reverse {
    grid-template-columns: 1fr 1.4fr;
    gap: 2rem;
  }
  .finding-blog-img {
    width: 140px;
    height: 120px;
  }
}

/* Tablet: stack stat above card */
@media (max-width: 860px) {
  .finding-row,
  .finding-row--reverse {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    direction: ltr;
  }
  .finding-row--reverse > * {
    direction: ltr;
  }
  .finding-plain {
    max-width: 100%;
  }
  .finding-blog-img {
    width: 130px;
    height: 110px;
  }
  .finding-blog-body {
    padding: 1rem 1rem 1rem 0;
  }
}

/* Mobile: blog card goes vertical */
@media (max-width: 560px) {
  .finding-row {
    padding: 2rem 0;
  }
  .finding-blog-card {
    flex-direction: column;
    gap: 0;
  }
  .finding-blog-img {
    width: 100%;
    height: 180px;
  }
  .finding-blog-body {
    padding: 1rem 1.25rem 1.25rem;
  }
  .finding-number {
    font-size: 3rem;
  }
  .finding-source-link {
    width: 100%;
    justify-content: center;
    font-size: .9375rem;
    padding: .75rem 1.5rem;
    min-height: 48px;
    margin-top: .25rem;
  }
  .finding-blog-cta {
    font-size: .875rem;
    font-weight: 700;
  }
}

/* =====================================================
   Study Modal — bottom sheet (index.html)
   ===================================================== */
#study-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: flex-end;
  justify-content: center;
}
#study-modal-overlay.is-open { display: flex; }
#study-modal-sheet {
  position: relative;
  width: 100%;
  max-width: 640px;
  background: #111214;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px 20px 0 0;
  padding: 2rem 1.75rem 2.5rem;
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(0.32,0.72,0,1);
  max-height: 88svh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#study-modal-sheet.is-visible { transform: translateY(0); }
#study-modal-drag-bar {
  width: 40px; height: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  margin: 0 auto 1.5rem;
}
#study-modal-close {
  position: absolute; top: 1.25rem; right: 1.25rem;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.07); border: none;
  color: #aaa; font-size: 1.25rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 200ms, color 200ms;
}
#study-modal-close:hover { background: rgba(255,255,255,0.14); color: #fff; }
#study-modal-badge {
  display: inline-block; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.3em 0.85em; border-radius: 100px; margin-bottom: 0.6rem;
}
#study-modal-journal { font-size: 0.8rem; color: #666; margin: 0 0 0.6rem; }
#study-modal-title {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 1.15rem; font-weight: 700; color: #fff;
  margin: 0 0 1rem; line-height: 1.35; padding-right: 2rem;
}
#study-modal-stat-box {
  background: rgba(0,201,167,0.08);
  border: 1px solid rgba(0,201,167,0.2);
  border-radius: 10px; padding: 0.75rem 1rem; margin-bottom: 1rem;
}
#study-modal-stat {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 1rem; font-weight: 700; color: #00C9A7;
}
#study-modal-finding {
  font-size: 0.9rem; color: #b0b0b0; line-height: 1.65; margin: 0 0 1.5rem;
}
#study-modal-open-btn {
  display: block; width: 100%; text-align: center;
  background: transparent; border: 1.5px solid rgba(0,201,167,0.45);
  color: #00C9A7; font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 0.95rem; font-weight: 700; padding: 0.875rem 1rem;
  border-radius: 12px; text-decoration: none; margin-bottom: 0.75rem;
  transition: background 200ms, border-color 200ms; min-height: 48px;
}
#study-modal-open-btn:hover { background: rgba(0,201,167,0.08); border-color: #00C9A7; }
#study-modal-cta {
  display: block; width: 100%; text-align: center;
  background: #00C9A7; color: #09090B;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 0.95rem; font-weight: 800; padding: 0.875rem 1rem;
  border-radius: 12px; text-decoration: none;
  transition: opacity 200ms; min-height: 48px;
}
#study-modal-cta:hover { opacity: 0.9; }
@media (min-width: 641px) {
  #study-modal-sheet { border-radius: 20px; margin-bottom: 2rem; max-width: 560px; }
}

/* =====================================================
   Brainwave Spectrum Guide
   ===================================================== */
.spectrum-guide {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1.5rem 1.5rem 1.375rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
}
.spectrum-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  white-space: nowrap;
  flex-shrink: 0;
}
.spectrum-track {
  display: flex;
  flex: 1;
  /* flex-start, not stretch: each node sizes to its own content, so the
     tallest caption can't drag the shared baseline down. */
  align-items: flex-start;
  gap: 0.5rem;
  position: relative;
}
.spectrum-track::before {
  content: '';
  position: absolute;
  /* Pinned to the dot row (padding-top .25rem + half the 12px dot), NOT to
     50% of the track. At 50% a long caption stretched the track to 99px and
     put the gradient line straight through every node's label text. */
  top: 10px;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #00C9A7, #7DD3FC, #F59E0B, #A78BFA);
  transform: translateY(-50%);
  z-index: 0;
}
.spectrum-node {
  flex: 1;
  text-align: center;
  font-size: .75rem;
  font-weight: 700;
  color: rgba(255,255,255,0.66);
  line-height: 1.3;
  position: relative;
  z-index: 1;
  padding-top: 0.25rem;
}
.spectrum-node small {
  display: block;
  font-size: .75rem;
  font-weight: 400;
  color: rgba(255,255,255,0.62);
  margin-top: 0.35rem;
  line-height: 1.45;
}
.spectrum-node::before {
  content: '';
  display: block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #00C9A7;
  margin: 0 auto 0.4rem;
  border: 2px solid #09090B;
}
.spectrum-node:nth-child(1)::before { background: #5B9BD5; }
.spectrum-node:nth-child(2)::before { background: #00C9A7; }
.spectrum-node:nth-child(3)::before { background: #7DD3FC; }
.spectrum-node:nth-child(4)::before { background: #F59E0B; }
.spectrum-node:nth-child(5)::before { background: #A78BFA; }

@media (max-width: 600px) {
  .spectrum-guide {
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
  }
  .spectrum-track {
    width: 100%;
  }
  .spectrum-node {
    font-size: .75rem;
  }
  .spectrum-node small {
    display: none;
  }
}

/* Spectrum guide — dim (Delta) and active (Tihna waves) node states */
.spectrum-node--dim {
  color: rgba(255,255,255,0.48);
}
.spectrum-node--dim::before {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.1) !important;
}
.spectrum-node--dim small {
  color: rgba(255,255,255,0.42);
  font-size: .75rem;
}
.spectrum-node--tihna {
  color: rgba(255,255,255,0.7);
}
.spectrum-note {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.66);
  text-align: center;
  margin: 0 0 2.5rem;
  font-style: italic;
}

/* =============================================
   FOUNDERS MODAL — Multi-step waitlist form
   ============================================= */

/* Scarcity bar above waitlist section */
.founders-scarcity-bar {
  background: linear-gradient(90deg, rgba(0,201,167,0.12) 0%, rgba(0,201,167,0.06) 100%);
  border: 1px solid rgba(0,201,167,0.25);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
  max-width: 680px;
  width: 100%;
}
.founders-scarcity-bar .badge {
  background: var(--teal);
  color: #09090B;
  font-family: var(--font-b);
  font-weight: 800;
  font-size: .75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  white-space: nowrap;
}
.founders-scarcity-bar .scarcity-text {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.85);
  font-family: var(--font-b);
}
.founders-scarcity-bar .scarcity-text strong {
  color: var(--teal);
}
.founders-progress-wrap {
  width: 100%;
  max-width: 680px;
}
.founders-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--faint);
  font-family: var(--font-b);
  margin-bottom: 0.4rem;
}
.founders-progress-label span:last-child {
  color: var(--teal);
  font-weight: 700;
}
.founders-progress-bar {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 9999px;
  overflow: hidden;
}
.founders-progress-fill {
  height: 100%;
  background: var(--teal);
  border-radius: 9999px;
  transition: width 1s cubic-bezier(0.4,0,0.2,1);
}

/* ===== MODAL OVERLAY ===== */
#founders-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
#founders-modal-overlay.is-open {
  display: flex;
}
#founders-modal {
  background: #111113;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 40px 120px rgba(0,0,0,0.8), 0 0 0 1px rgba(0,201,167,0.08);
  animation: modalIn 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes modalIn {
  from { opacity:0; transform:scale(0.93) translateY(16px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.modal-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255,255,255,0.66);
  font-size: 1.1rem;
  transition: background 150ms, color 150ms;
  z-index: 10;
  line-height: 1;
  padding: 0;
}
.modal-close-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* Modal header */
.modal-header {
  padding: 2rem 2rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(0,201,167,0.12);
  border: 1px solid rgba(0,201,167,0.25);
  border-radius: 9999px;
  padding: 0.3rem 0.85rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.85rem;
}
.modal-badge::before {
  content: '●';
  font-size: 0.5rem;
  animation: pulse-dot 1.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity:1; } 50% { opacity:0.3; }
}
.modal-title {
  font-family: var(--font-d);
  font-weight: 800;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  color: #fff;
  line-height: 1.2;
  margin: 0 0 0.5rem;
}
.modal-subtitle {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  margin: 0;
}
.modal-spots-left {
  margin-top: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #F59E0B;
}
.modal-spots-left svg { flex-shrink: 0; }

/* Step progress dots */
.modal-steps {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 1.25rem 2rem 0;
}
.step-dot {
  height: 3px;
  flex: 1;
  border-radius: 9999px;
  background: rgba(255,255,255,0.1);
  transition: background 0.3s;
}
.step-dot.active { background: var(--teal); }
.step-dot.done { background: rgba(0,201,167,0.4); }
.modal-step-label {
  font-size: .75rem;
  color: var(--faint);
  padding: 0.5rem 2rem 0;
  font-family: var(--font-b);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Form body */
.modal-body {
  padding: 1.5rem 2rem 2rem;
}
.modal-step { display: none; }
.modal-step.active { display: block; }

/* Field groups */
.f-group {
  margin-bottom: 1.25rem;
}
.f-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  margin-bottom: 0.45rem;
  letter-spacing: 0.02em;
}
.f-group label span.req { color: var(--teal); margin-left: 2px; }
.f-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  font-family: var(--font-b);
  color: var(--text);
  outline: none;
  transition: border-color 180ms, box-shadow 180ms;
  box-sizing: border-box;
}
.f-input::placeholder { color: rgba(255,255,255,0.2); }
.f-input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0,201,167,0.1);
}
.f-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 480px) { .f-row-2 { grid-template-columns: 1fr; } }
select.f-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.3)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
select.f-input option { background: #1a1a1c; color: #fff; }
textarea.f-input {
  resize: vertical;
  min-height: 90px;
  line-height: 1.5;
}

/* Chip selects */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.chip-option {
  position: relative;
}
.chip-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.chip-option label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: all 150ms;
  margin: 0;
  letter-spacing: 0;
}
.chip-option input:checked + label {
  background: rgba(0,201,167,0.14);
  border-color: rgba(0,201,167,0.5);
  color: var(--teal);
}
.chip-option label:hover {
  border-color: rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.9);
}

/* Rating stars */
.star-group {
  display: flex;
  gap: 0.35rem;
}
.star-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: rgba(255,255,255,0.15);
  transition: color 150ms, transform 150ms;
  padding: 0.1rem;
  line-height: 1;
}
.star-btn.active, .star-btn:hover { color: #F59E0B; transform: scale(1.15); }

/* Navigation buttons */
.modal-nav {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.btn-modal-back {
  flex: 0 0 auto;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9999px;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: rgba(255,255,255,0.66);
  cursor: pointer;
  transition: all 150ms;
  font-family: var(--font-b);
}
.btn-modal-back:hover { background: rgba(255,255,255,0.1); color: #fff; }
.btn-modal-next {
  flex: 1;
  background: var(--teal);
  border: none;
  border-radius: 9999px;
  padding: 0.85rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 800;
  color: #09090B;
  cursor: pointer;
  transition: all 180ms;
  font-family: var(--font-b);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.btn-modal-next:hover { background: #00b396; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,201,167,0.3); }
.btn-modal-next:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Success state */
.modal-success {
  text-align: center;
  padding: 3rem 2rem;
}
.modal-success .success-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
}
.modal-success h3 {
  font-family: var(--font-d);
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.75rem;
}
.modal-success p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  margin: 0 0 0.5rem;
}
.modal-success .highlight {
  color: var(--teal);
  font-weight: 700;
}
.modal-success .success-perks {
  margin: 1.5rem auto;
  text-align: left;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.modal-success .perk {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.75);
  font-weight: 600;
}
.modal-success .perk::before {
  content: '✓';
  color: var(--teal);
  font-weight: 800;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.f-error {
  font-size: 0.75rem;
  color: #f87171;
  margin-top: 0.3rem;
  display: none;
}
.f-error.visible { display: block; }

@media (max-width: 600px) {
  #founders-modal { border-radius: 16px; }
  .modal-header, .modal-body { padding-inline: 1.25rem; }
  .modal-steps, .modal-step-label { padding-inline: 1.25rem; }
}

/* Fix "Download on App Store" CTA inside .app-text (features block) */
.app-cta-wrap{margin-top:2rem;display:flex;justify-content:flex-start}
.app-cta-wrap .btn-primary{justify-content:center;text-align:center}
@media(max-width:900px){.app-cta-wrap{justify-content:center}.app-cta-wrap .btn-primary{width:100%;max-width:360px}}

/* Free-tier CTA — filled dark button so it visually matches the paid tiers
   without competing with the Annual "Start 7-day free trial" primary CTA */
.btn-free{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;background:transparent;color:var(--teal);font-family:var(--font-b);font-weight:700;border-radius:9999px;border:1.5px solid var(--teal);padding:.85rem 1.25rem;cursor:pointer;transition:background 180ms var(--ease),color 180ms var(--ease),transform 120ms var(--ease),box-shadow 180ms var(--ease);text-decoration:none}
.btn-free:hover{background:var(--teal);color:#09090B;transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,201,167,.25)}
.btn-free .btn-apple{display:inline-block;flex-shrink:0;transition:color 180ms var(--ease)}

/* Responsive: stack engineered cards on tablet/mobile */
@media (max-width: 820px) {
  .engineered-grid { grid-template-columns: 1fr; gap: 1rem; }
  .engineered-block { padding: 2.25rem 1.25rem; margin-top: 3rem; }
  .engineered-card { padding: 1.35rem 1.25rem; }
  .engineered-metric { font-size: 2rem; }
  .engineered-title { max-width: 100%; }
  .engineered-honest { padding: 1.5rem 1rem; }
}

/* ============================================================
   RESPONSIVE + A11Y HARDENING
   ============================================================ */

/* P0 — .expect-table rendered 476px wide inside a 390px viewport,
   which set bodyScrollW=476 and clipped surrounding content. */
@media (max-width: 768px) {
  .expect-table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .expect-table thead, .expect-table tbody {
    display: table; width: 100%; min-width: 460px;
  }
}

/* P1 — Tap targets below the 44px minimum on touch viewports. */
@media (max-width: 900px) {
  .hamburger { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }
  .nav-links a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 768px) {
  .footer-col a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-col ul { display: flex; flex-direction: column; }
}

/* P2 — /pricing/ has FOUR .pricing-card children in a 3-column grid,
   so the 4th card sat alone beside two empty cells. The homepage uses
   the same .pricing-grid class but holds only THREE .price-card
   children, where 3 columns is already correct — so scope this to
   grids that actually contain .pricing-card. */
@media (min-width: 1101px) {
  .pricing-grid:has(.pricing-card) { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .pricing-grid:has(.pricing-card) { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

/* Visually hidden but available to screen readers and crawlers. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Standalone (non-prose) links need a 44px touch target. Inline links
   inside a sentence are exempt under WCAG 2.5.5, so they are left alone. */
@media (max-width: 900px) {
  .footer-links a,
  .breadcrumb a,
  .program-citation a,
  .support-card a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .footer-links { flex-wrap: wrap; gap: .25rem 1.5rem; }
}

/* Long bare study URLs are unbreakable strings and were escaping the
   viewport (446px wide inside 390px). Let them wrap. */
.article-content a, .legal-content a, .citation-list a, p a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Legal table-of-contents entries are a list of navigation links, not
   prose, so they need real touch targets. */
@media (max-width: 900px) {
  .legal-content > ol > li,
  .legal-content > ul > li { margin-block: .15rem; }
  .legal-content > ol > li > a,
  .legal-content > ul > li > a {
    display: inline-flex; align-items: center;
    min-height: 44px; line-height: 1.35;
  }
}

/* ===== EVIDENCE NOTE =====================================================
   Was two centred paragraphs and a centred button row floating on the page
   background with no container, so it read as leftover text rather than a
   deliberate editorial aside. Rebuilt on the same treatment as
   .engineered-honest (tinted panel + teal rule) so it belongs to the site. */
.science-bottom {
  display: block;
  margin-top: 3.5rem;
  padding-top: 0;
  text-align: left;
}
.evidence-note {
  position: relative;
  /* Full container width so the card's edges line up with .engineered-block
     directly above it. A 68ch measure inside a 1325px card would leave the
     right half empty, so the content runs as a two-column editorial grid:
     heading rail on the left, prose + actions on the right. */
  margin-inline: 0;
  display: grid;
  grid-template-columns: minmax(200px, 19rem) minmax(0, 1fr);
  column-gap: clamp(2rem, 4vw, 4rem);
  row-gap: 0;
  align-items: start;
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.75rem);
  border: 1px solid rgba(0,201,167,.16);
  border-left: 3px solid var(--teal);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(0,201,167,.07) 0%, rgba(0,201,167,.025) 100%),
    rgba(255,255,255,.012);
}
.evidence-note__label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: .625rem;
}
.evidence-note__title {
  font-family: var(--font-d);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -.015em;
  color: #fff;
  margin: 0 0 .875rem;
  line-height: 1.2;
}
.evidence-note__text {
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  color: rgba(255,255,255,.72);
  line-height: 1.75;
  max-width: 68ch;
  margin: 0;
  text-align: left;
}
.evidence-note__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.07);
}
@media (max-width: 560px) {
  .evidence-note__actions { flex-direction: column; }
  .evidence-note__actions .btn-ghost { width: 100%; justify-content: center; text-align: center; }
}


/* --- evidence note: two-column editorial grid ------------------------------
   Left rail carries the eyebrow + title, right column the prose and actions.
   Fills the full-width card without stretching the reading measure past 68ch.
   Collapses to a single column below 860px. */
.evidence-note__head, .evidence-note__body { min-width: 0; }
.evidence-note__label { margin-bottom: .625rem; }
.evidence-note__title { margin: 0; text-wrap: balance; }

@media (max-width: 860px) {
  .evidence-note { display: block; }
  .evidence-note__title { margin-bottom: .875rem; }
}


/* --- Why we built it ------------------------------------------------------
   Was a bare centred label/title/paragraph inside an inline-styled 720px
   container, so it floated in the section's vertical padding with no surface
   and read as leftover text next to the card-based sections around it.
   Rebuilt on the same two-column card system as .evidence-note so it lines up
   with the rest of the homepage. */
/* .comparison-section .container inherits the standard 1440px .container grid. */
.why-note {
  position: relative;
  display: grid;
  grid-template-columns: minmax(200px, 19rem) minmax(0, 1fr);
  column-gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.75rem);
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid var(--teal);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.012) 100%);
  text-align: left;
}
.why-note__head, .why-note__body { min-width: 0; }
.why-note__label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: .625rem;
}
.why-note__title {
  font-family: var(--font-d);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0;
  line-height: 1.15;
  text-wrap: balance;
}
.why-note__text {
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  color: rgba(255,255,255,.72);
  line-height: 1.75;
  max-width: 68ch;
  margin: 0;
}
.why-note__points {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid rgba(255,255,255,.07);
  display: grid;
  gap: .75rem;
}
.why-note__points li {
  position: relative;
  padding-left: 1.75rem;
  font-size: .9375rem;
  color: rgba(255,255,255,.82);
  line-height: 1.55;
}
.why-note__points li::before {
  content: "";
  position: absolute;
  left: .375rem;
  top: .5rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(0,201,167,.16);
}
@media (max-width: 860px) {
  .why-note { display: block; }
  .why-note__title { margin-bottom: .875rem; }
}
