/* The Wearable Wellness Institute — Design System v2
   Modern tech-biotech aesthetic: soft whites, Deep Wellness Blue + emerald,
   Apple/Stripe restraint, editorial serif display for statement moments.
   One stylesheet, shared across the campus. */

:root{
  /* New palette */
  --bg:#FAFAFA; --surface:#FFFFFF; --surface2:#F5F5F5;
  --ink:#111111; --slate:#555555; --mute:#6B7280;
  --blue:#2563EB; --blue-soft:#EFF4FF; --blue-line:#DBE6FF;
  --green:#16A34A; --emerald:#10B981; --emerald-soft:#ECFDF5;
  --border:#E5E7EB;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style",Georgia,"Times New Roman",serif;
  --shadow:0 1px 2px rgba(17,17,17,.04),0 8px 30px rgba(17,17,17,.06);
  --shadow-lg:0 2px 4px rgba(17,17,17,.05),0 20px 50px rgba(17,17,17,.10);
  /* Legacy aliases (older inline refs remap cleanly to the new palette) */
  --navy:#111111; --navy-deep:#0F1115; --gold:#2563EB; --gold-soft:#DBE6FF; --teal:#10B981;
  --paper:#FAFAFA; --card:#FFFFFF; --wash:#F5F5F5; --line:#E5E7EB; --muted:#555555;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;letter-spacing:-0.011em}
a{color:inherit;text-decoration:none}
.serif{font-family:var(--serif)}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
@media(max-width:600px){.wrap{padding:0 20px}}

/* Motion */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rise{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.05s}.d2{animation-delay:.14s}.d3{animation-delay:.23s}.d4{animation-delay:.32s}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Accessibility */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;font-weight:700;font-size:14px}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}

/* Scaffold banner (subtle in the light system) */
.scaffold{background:var(--surface2);color:var(--mute);text-align:center;font-size:11px;letter-spacing:.04em;padding:7px 16px;font-weight:600;border-bottom:1px solid var(--border)}

/* Header / nav */
header.site{position:sticky;top:0;z-index:30;background:rgba(250,250,250,.82);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--border)}
.navrow{display:flex;align-items:center;justify-content:space-between;height:66px;gap:12px}
.wordmark{display:flex;align-items:center;gap:11px;font-family:var(--sans);font-weight:600;font-size:15px;color:var(--ink);line-height:1.05}
.wordmark::before{content:"W";flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:linear-gradient(140deg,var(--blue),var(--emerald));color:#fff;font-family:var(--serif);font-weight:700;font-size:16px;display:grid;place-items:center;box-shadow:var(--shadow)}
.wordmark small{display:block;font-family:var(--sans);font-weight:500;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:2px}
nav.doors{display:flex;gap:24px;flex-wrap:wrap}
nav.doors a{font-size:14px;font-weight:500;color:var(--slate);transition:color .15s}
nav.doors a:hover{color:var(--ink)}
nav.doors a.trust{color:var(--ink);font-weight:600}
@media(max-width:720px){.navrow{height:auto;flex-direction:column;padding:12px 0;gap:10px}nav.doors{gap:16px;justify-content:center}}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;padding:13px 22px;border-radius:12px;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s,border-color .15s}
.btn.primary{background:var(--ink);color:#fff}
.btn.primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.btn.ghost{color:var(--ink);border:1px solid var(--border);background:var(--surface)}
.btn.ghost:hover{border-color:#cfd4dc}
.btn .arw{transition:transform .18s}
.btn:hover .arw{transform:translateX(3px)}

/* Page head (interior) */
.page-head{padding:64px 0 30px}
.page-head .breadcrumb{font-size:13px;color:var(--mute);margin-bottom:14px}
.page-head .breadcrumb a{color:var(--slate)}
.page-head .breadcrumb a:hover{color:var(--ink)}
.door-tag{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);font-weight:700}
.page-head h1{font-family:var(--serif);color:var(--ink);font-size:clamp(32px,5vw,50px);line-height:1.08;letter-spacing:-0.02em;margin:12px 0 16px;font-weight:640;max-width:20ch}
.page-head .lead{font-size:clamp(17px,2vw,20px);color:var(--slate);max-width:60ch;line-height:1.5}
.lesson-meta{font-size:13px;letter-spacing:.02em;color:var(--mute);margin-bottom:12px}
.lesson-meta b{color:var(--blue)}

/* Page body (long-form reading) */
.page-body{padding:20px 0 72px}
.page-body p{max-width:68ch;margin:0 0 18px;color:#2b2f36;font-size:17px;line-height:1.72}
.page-body h2{font-family:var(--serif);color:var(--ink);font-size:clamp(22px,3vw,30px);letter-spacing:-0.015em;margin:38px 0 12px;font-weight:640}
.page-body h3{color:var(--ink);font-size:19px;margin:28px 0 8px;font-weight:640;letter-spacing:-0.01em}
.page-body ul{max-width:68ch;margin:0 0 18px;padding-left:22px}
.page-body li{margin-bottom:9px;font-size:17px;line-height:1.65;color:#2b2f36}
.page-body a{color:var(--blue);font-weight:500}
.page-body a:hover{text-decoration:underline}

/* Callout / honest / note / sources */
.callout{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--blue);border-radius:14px;padding:20px 22px;max-width:70ch;margin:10px 0 26px;box-shadow:var(--shadow)}
.callout .k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:7px}
.callout p{margin:0;color:var(--ink);font-size:15.5px;max-width:none}
.honest{background:var(--emerald-soft);border:1px solid #cdeede;border-radius:14px;padding:16px 20px;max-width:70ch;margin:10px 0 26px;font-size:15px;color:#155e45}
.honest b{color:#0c4a35}
.note{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:15px 18px;max-width:70ch;color:var(--slate);font-size:14.5px;margin:6px 0 24px}
.sources{max-width:70ch;margin:28px 0 0;padding-top:18px;border-top:1px solid var(--border);font-size:13.5px;color:var(--mute)}
.sources b{color:var(--ink)}

/* Card grids (trustgrid) */
.trustgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:72ch;margin:10px 0}
.trustcard{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px;transition:transform .18s,box-shadow .18s,border-color .18s}
.trustcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:#dfe3ea}
.trustcard h3{font-family:var(--serif);color:var(--ink);font-size:18px;margin-bottom:7px;font-weight:640}
.trustcard p{font-size:14.5px;color:var(--slate);line-height:1.5;margin:0;max-width:none}
.trustcard a{color:var(--blue);font-weight:600}
@media(max-width:560px){.trustgrid{grid-template-columns:1fr}}

/* Curriculum / lesson links */
.curriculum{display:flex;flex-direction:column;gap:12px;max-width:76ch;margin:8px 0}
.lesson-link{display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px 22px;transition:transform .18s,box-shadow .18s,border-color .18s}
.lesson-link:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:#dfe3ea}
.lesson-link .n{flex:0 0 36px;width:36px;height:36px;border-radius:10px;background:var(--blue-soft);color:var(--blue);font-family:var(--serif);font-weight:700;display:grid;place-items:center;font-size:16px}
.lesson-link .t h3{font-family:var(--serif);color:var(--ink);font-size:18px;font-weight:640;margin-bottom:3px}
.lesson-link .t p{font-size:14px;color:var(--slate);line-height:1.5;max-width:none}

/* pillar note (sleep landing) */
.pillar-note{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--emerald);border-radius:14px;padding:22px 24px;max-width:76ch;margin:8px 0;box-shadow:var(--shadow)}
.pillar-note h3{font-family:var(--serif);color:var(--ink);font-size:18px;margin-bottom:8px;font-weight:640}
.pillar-note p{font-size:15.5px;color:var(--slate);max-width:none;margin-bottom:8px}
.pillar-note a{color:var(--blue);font-weight:600}

/* lesson nav (prev/next) */
.lessonnav{display:flex;justify-content:space-between;gap:12px;max-width:76ch;margin:40px 0 0;flex-wrap:wrap}
.lessonnav a{flex:1;min-width:210px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:15px 18px;font-size:14px;font-weight:600;color:var(--ink);transition:transform .18s,box-shadow .18s,border-color .18s}
.lessonnav a:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:#dfe3ea}
.lessonnav a.next{text-align:right}
.lessonnav a small{display:block;font-weight:600;color:var(--mute);font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}

/* Evidence ladder */
.ladder{list-style:none;max-width:72ch;margin:10px 0 24px;padding:0}
.ladder li{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:15px 18px;margin-bottom:10px}
.ladder li .rank{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:100px;white-space:nowrap;margin-top:2px}
.ladder li .rank.w{background:#FEF2F2;color:#b42318;border:1px solid #fbd5d0}
.ladder li .rank.m{background:var(--blue-soft);color:var(--blue);border:1px solid var(--blue-line)}
.ladder li .rank.s{background:var(--emerald-soft);color:#0c7a55;border:1px solid #cdeede}
.ladder li b{color:var(--ink)}
.ladder li span.tx{font-size:15px;color:#2b2f36;line-height:1.55}

/* Two-evidence wall */
.wall{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:72ch;margin:10px 0 24px}
.wall .col{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px}
.wall .col.est{border-top:3px solid var(--emerald)}
.wall .col.eme{border-top:3px solid var(--blue)}
.wall .col .lab{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-bottom:8px}
.wall .col.est .lab{color:#0c7a55}
.wall .col.eme .lab{color:var(--blue)}
.wall .col p{font-size:14.5px;color:var(--slate);margin:0;line-height:1.55;max-width:none}
@media(max-width:560px){.wall{grid-template-columns:1fr}}

/* Promise band */
.promise{background:var(--surface);text-align:center;padding:56px 24px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.promise .p{font-family:var(--serif);font-size:clamp(21px,3vw,30px);color:var(--ink);font-weight:600;line-height:1.3;letter-spacing:-0.02em;max-width:22ch;margin:0 auto}
.promise .m{font-size:14px;color:var(--mute);margin-top:12px;letter-spacing:.02em}

/* ===== Homepage components ===== */
.hero{position:relative;overflow:hidden;padding:92px 0 80px;border-bottom:1px solid var(--border)}
.hero .neural{position:absolute;inset:0;pointer-events:none;opacity:.5;mask-image:radial-gradient(120% 90% at 80% 28%,#000 22%,transparent 68%);-webkit-mask-image:radial-gradient(120% 90% at 80% 28%,#000 22%,transparent 68%)}
.hero-inner{position:relative;max-width:820px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--blue);background:var(--blue-soft);border:1px solid var(--blue-line);padding:6px 13px;border-radius:100px}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 3px var(--emerald-soft)}
.hero h1{font-size:clamp(38px,6.4vw,66px);line-height:1.05;letter-spacing:-0.03em;font-weight:680;margin:24px 0 22px;max-width:15ch}
.hero h1 .grad{background:linear-gradient(120deg,var(--blue),var(--emerald));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{font-size:clamp(17px,2.1vw,21px);color:var(--slate);max-width:56ch;line-height:1.5}
.hero .ctas{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.trustchips{display:flex;gap:22px;margin-top:42px;flex-wrap:wrap}
.trustchip{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--slate);font-weight:500}
.trustchip .ic{width:18px;height:18px;color:var(--emerald);flex:0 0 auto}

.statement{padding:76px 0;text-align:center;background:var(--surface);border-bottom:1px solid var(--border)}
.statement .q{font-family:var(--serif);font-size:clamp(25px,3.6vw,40px);line-height:1.25;letter-spacing:-0.02em;max-width:20ch;margin:0 auto;font-weight:600}
.statement .cap{margin:18px auto 0;color:var(--slate);font-size:16px;max-width:52ch}

.sec{padding:78px 0;border-bottom:1px solid var(--border)}
.sec-ey{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.sec h2{font-size:clamp(26px,3.4vw,38px);line-height:1.12;letter-spacing:-0.025em;font-weight:680;margin:12px 0 10px;max-width:18ch}
.sec .lead{color:var(--slate);font-size:17px;max-width:56ch}

.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:40px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:10px;transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s,border-color .2s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#dfe3ea}
.card .tag{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.card.em .tag{color:#0c7a55}
.card h3{font-size:20px;font-weight:640;letter-spacing:-0.015em}
.card p{font-size:14.5px;color:var(--slate);line-height:1.5}
.card .go{margin-top:auto;font-size:14px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.card .go .arw{transition:transform .18s;color:var(--blue)}
.card:hover .go .arw{transform:translateX(3px)}
.card .glow{position:absolute;width:180px;height:180px;border-radius:50%;filter:blur(60px);opacity:.13;top:-40px;right:-40px;background:var(--blue);pointer-events:none}
.card.em .glow{background:var(--emerald)}
.span3{grid-column:span 3}.span2{grid-column:span 2}
@media(max-width:880px){.bento{grid-template-columns:repeat(2,1fr)}.span3,.span2{grid-column:span 1}}
@media(max-width:560px){.bento{grid-template-columns:1fr}}

.evgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.ev{padding-top:18px;border-top:2px solid var(--ink)}
.ev .n{font-size:13px;font-weight:700;color:var(--emerald);letter-spacing:.04em}
.ev h4{font-size:16px;font-weight:640;margin:8px 0 5px;letter-spacing:-0.01em}
.ev p{font-size:13.5px;color:var(--slate);line-height:1.5}
@media(max-width:820px){.evgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.evgrid{grid-template-columns:1fr}}

.phil{background:linear-gradient(180deg,var(--surface),#fbfcfe)}
.phil .pgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.phil .oi{font-family:var(--serif);font-size:clamp(24px,3vw,34px);line-height:1.28;letter-spacing:-0.02em;font-weight:600}
.phil .oi .em{color:var(--emerald)}
.phil p{color:var(--slate);font-size:16px;margin-top:16px;max-width:46ch}
.orb{aspect-ratio:1;border-radius:24px;background:radial-gradient(120% 120% at 30% 25%,#fff,var(--blue-soft) 55%,var(--emerald-soft));border:1px solid var(--border);position:relative;overflow:hidden;box-shadow:var(--shadow)}
@media(max-width:820px){.phil .pgrid{grid-template-columns:1fr;gap:28px}.orb{max-width:320px}}

/* Footer (light) */
footer.site{background:var(--surface);padding:52px 0 38px;border-top:1px solid var(--border)}
footer .cols{display:flex;flex-wrap:wrap;gap:34px;justify-content:space-between;max-width:1120px;margin:0 auto;padding:0 28px}
footer .brand{max-width:300px}
footer .brand .wm{font-family:var(--serif);color:var(--ink);font-weight:640;font-size:18px}
footer .brand p{font-size:13.5px;color:var(--slate);margin-top:10px;line-height:1.55}
footer .col h4{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:12px;font-weight:700}
footer .col a{display:block;color:var(--slate);font-size:14px;margin-bottom:9px}
footer .col a:hover{color:var(--ink)}
footer .foot-promise{max-width:1120px;margin:30px auto 0;padding:22px 28px 0;border-top:1px solid var(--border);text-align:center}
footer .foot-promise .p{font-family:var(--serif);color:var(--ink);font-size:16px;font-weight:600}
footer .foot-promise .m{font-size:12.5px;color:var(--mute);margin-top:8px}