/* =====================================================================
   unlockplate.com — main.css
   House style shared with darinallredmd.com and unlockstrong.com: Archivo for display,
   Figtree for body, the deep-teal and mint palette, 17px root, three breakpoints
   (sm ≤640 · md ≤900 · lg ≤1080). Three radii (10 buttons/inputs · 16 cards · 20 feature
   blocks) and four section spacings, per the Unlock Strong polish list. Hex values live
   only in :root. No em dashes anywhere a customer reads.
   ===================================================================== */

/* ---------- 1. FONTS (self-hosted, OFL) ---------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500 800;font-display:swap;src:url(/assets/fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500 800;font-display:swap;src:url(/assets/fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/figtree-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/figtree-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/figtree-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo Fallback';src:local('Arial'),local('ArialMT');size-adjust:119.62%;ascent-override:73.40%;descent-override:17.56%;line-gap-override:0.00%}
@font-face{font-family:'Figtree Fallback';src:local('Arial'),local('ArialMT');size-adjust:120.07%;ascent-override:79.12%;descent-override:20.82%;line-gap-override:0.00%}

/* ---------- 2. TOKENS ---------- */
:root{
  --teal:#628D8D;        /* rules, icons, display ≥24px only, never small text */
  --teal-deep:#32504F;   /* headings, primary buttons, focus ring */
  --teal-ink:#1F3534;    /* dark bands, footer */
  --teal-text:#3F6B6B;   /* eyebrows, small teal text */
  --mint:#ADDDC4;
  --mint-mid:#E4F3EC;
  --mint-wash:#F2FAF6;
  --mint-line:#BFE3D0;
  --blue:#64AEE8;
  --blue-soft:#AAD3F3;
  --blue-wash:#F0F9FE;
  --blue-text:#1F5F8F;
  --gray:#9D9D9D;        /* dividers and icons only, never text */
  --gray-line:#D9D9D9;
  --gray-wash:#F7F7F7;
  --gray-mid:#8A8A8A;
  --white:#FFFFFF;
  --cream:#FBF9F4;       /* the one addition for this site: a warm page field the plate sits on */
  --ink:#1C2B2A;
  --gray-text:#536B69;
  --mist:#D8E7E2;
  --alert:#8A2F22;
  --alert-wash:#FDF3F1;
  --alert-line:#E3B0A6;
  /* fundamentals tiles: house tints, one per fundamental */
  --tile-1:#D6EFE5; --tile-2:#DCEFC9; --tile-3:#FBE9C8; --tile-4:#F9D9C7; --tile-5:#DCE9F7; --tile-6:#E7E0F3;
  --display:'Archivo','Archivo Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --body:'Figtree','Figtree Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --maxw:1180px; --measure:760px;
  --fs-xs:.8235rem; --fs-sm:.9rem; --fs-base:1rem; --fs-prose:1.06rem; --fs-md:1.1176rem; --fs-lg:1.294rem; --fs-xl:1.647rem; --fs-2xl:2.118rem; --fs-3xl:2.588rem;
  --fs-display:clamp(2.1rem, 1.3rem + 2.6vw, 3.5rem);
  --fs-h1:clamp(2rem, 1.4rem + 1.8vw, 2.75rem);
  --fs-h2:clamp(1.647rem, 1.25rem + 1.2vw, 2.25rem);
  --fs-lede:clamp(1.1176rem, 1rem + .35vw, 1.1765rem);
  --lh-tight:1.08; --lh-snug:1.2; --lh-body:1.55; --lh-prose:1.65;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px; --s-9:56px; --s-10:72px;
  --sec-1:clamp(2rem, 1.2rem + 2.4vw, 3.5rem);   /* four section spacings, no others */
  --sec-2:clamp(2.5rem, 1.5rem + 3vw, 5rem);
  --sec-3:clamp(3rem, 2rem + 3.6vw, 6rem);
  --sec-4:clamp(3.5rem, 2.5rem + 4vw, 7rem);
  --gutter:clamp(1rem, 4vw, 1.5rem);
  --r-btn:10px; --r-card:16px; --r-block:20px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(31,53,52,.06), 0 1px 1px rgba(31,53,52,.04);
  --sh-2:0 2px 6px rgba(31,53,52,.06), 0 12px 32px rgba(31,53,52,.10);
  --ring:0 0 0 3px #fff, 0 0 0 6px var(--teal-deep);
  --ring-dark:0 0 0 3px var(--teal-ink), 0 0 0 6px var(--mint);
  --nav-h:68px;
}
@media (max-width:640px){:root{--nav-h:60px}}
html{font-size:106.25%;scroll-padding-top:calc(var(--nav-h) + 16px)}

/* ---------- 3. RESET + BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
body{margin:0;font-family:var(--body);font-size:var(--fs-base);line-height:var(--lh-body);color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%}
img{height:auto}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--display);color:var(--teal-deep);margin:0 0 .5em;letter-spacing:-.01em;text-wrap:balance;overflow-wrap:anywhere}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight);font-weight:800}
h2{font-size:var(--fs-h2);line-height:1.15;font-weight:800}
h3{font-size:var(--fs-lg);line-height:var(--lh-snug);font-weight:700}
h4{font-size:var(--fs-md);line-height:var(--lh-snug);font-weight:700}
p{margin:0 0 1em}
a{color:var(--blue-text);text-decoration-thickness:1px;text-underline-offset:.15em}
a:hover{color:var(--teal-deep)}
strong,b{font-weight:700}
small{font-size:var(--fs-sm)}
ul,ol{padding-left:1.25em;margin:0 0 1em}
li{margin:.25em 0}
hr{border:0;border-top:1px solid var(--gray-line);margin:var(--s-8) 0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-btn)}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--teal-deep);color:#fff;padding:8px 12px;border-radius:var(--r-btn);z-index:100}
.skip-link:focus{left:8px}
table{border-collapse:collapse;width:100%;font-size:var(--fs-sm)}
th,td{text-align:left;padding:.55em .75em;border-bottom:1px solid var(--gray-line);vertical-align:top}
th{font-family:var(--display);font-weight:700;color:var(--teal-deep);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1em}

/* ---------- 4. LAYOUT ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap--narrow{max-width:calc(var(--measure) + 2*var(--gutter))}
.section{padding:var(--sec-2) 0}
.section--tight{padding:var(--sec-1) 0}
.section--big{padding:var(--sec-3) 0}
.section--white{background:var(--white)}
.section--mint{background:var(--mint-wash)}
.section--dark{background:var(--teal-ink);color:#fff}
.section--dark h2,.section--dark h3{color:#fff}
.section--dark p{color:var(--mist)}
.section--dark a{color:var(--mint)}
.prose{max-width:var(--measure);font-size:var(--fs-prose);line-height:var(--lh-prose)}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.4em}
.prose>h2:first-child,.prose>h3:first-child{margin-top:0}
.prose li{margin:.4em 0}
.prose img{border-radius:var(--r-card)}
.lede{font-size:var(--fs-lede);line-height:1.5;color:var(--gray-text);max-width:var(--measure)}
.eyebrow{font-family:var(--display);font-size:var(--fs-sm);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-text);margin:0 0 .6em}
.center{text-align:center}
.grid{display:grid;gap:var(--s-6)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1080px){.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

/* ---------- 5. BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.8em 1.35em;border-radius:var(--r-btn);border:2px solid transparent;font-family:var(--display);font-weight:700;font-size:var(--fs-base);line-height:1.15;text-decoration:none;cursor:pointer;transition:transform .12s ease,background .15s ease,box-shadow .15s ease;min-height:48px}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;transform:none}
.btn-primary{background:var(--teal-deep);color:#fff;border-color:var(--teal-deep);box-shadow:var(--sh-1)}
.btn-primary:hover{background:var(--teal-ink);color:#fff;border-color:var(--teal-ink)}
.btn-mint{background:var(--mint);color:var(--teal-ink);border-color:var(--mint)}
.btn-mint:hover{background:#9BD3B7;color:var(--teal-ink)}
.btn-ghost{background:transparent;color:var(--teal-deep);border-color:var(--teal-deep)}
.btn-ghost:hover{background:var(--mint-wash);color:var(--teal-deep)}
.btn-light{background:#fff;color:var(--teal-deep);border-color:#fff}
.btn-light:hover{background:var(--mint-wash);color:var(--teal-deep)}
.btn-xl{font-size:var(--fs-md);padding:1em 1.6em;min-height:56px}
.btn-sm{font-size:var(--fs-sm);padding:.55em 1em;min-height:40px}
.btn-block{display:flex;width:100%}
.btn__icon{width:20px;height:20px;flex:none}
.actions{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.text-link{font-weight:700;color:var(--teal-deep)}
.note{font-size:var(--fs-sm);color:var(--gray-text)}

/* ---------- 6. NAV ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(251,249,244,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--gray-line)}
.nav__inner{display:flex;align-items:center;gap:var(--s-5);height:var(--nav-h)}
.nav__brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--teal-deep)}
.nav__mark{color:var(--teal-deep)}
.nav__name{font-family:var(--display);font-weight:500;font-size:1.2rem;letter-spacing:-.01em;color:var(--teal-deep)}
.nav__name b{font-weight:800}
.nav__links{display:flex;gap:2px;list-style:none;margin:0 0 0 auto;padding:0}
.nav__link{display:inline-block;padding:.5em .7em;border-radius:var(--r-btn);text-decoration:none;color:var(--ink);font-weight:600;font-size:var(--fs-sm)}
.nav__link:hover{background:var(--mint-mid);color:var(--teal-deep)}
.nav__link[aria-current=page]{color:var(--teal-deep);box-shadow:inset 0 -3px 0 var(--mint)}
.nav__mine{display:none}
.nav__mine.is-on{display:inline-flex}
.nav__toggle{display:none;align-items:center;gap:8px;background:none;border:0;padding:8px;margin-left:auto;font-family:var(--display);font-weight:700;color:var(--teal-deep);border-radius:var(--r-btn)}
.nav__bars{display:inline-flex;flex-direction:column;gap:4px}
.nav__bars i{display:block;width:20px;height:2px;background:currentColor;border-radius:2px}
.nav__word--close{display:none}
.nav__toggle[aria-expanded=true] .nav__word--open{display:none}
.nav__toggle[aria-expanded=true] .nav__word--close{display:inline}
.menu{background:var(--white);border-bottom:1px solid var(--gray-line);box-shadow:var(--sh-2)}
.menu__list{list-style:none;margin:0;padding:var(--s-4) 0}
.menu__list a{display:block;padding:.7em var(--s-2);font-weight:600;text-decoration:none;color:var(--ink);border-radius:var(--r-btn);font-size:var(--fs-md)}
.menu__list a:hover{background:var(--mint-mid);color:var(--teal-deep)}
.noscript-menu ul{display:flex;flex-wrap:wrap;gap:1em;list-style:none;padding:1em 0}
@media (max-width:1080px){.nav__links{display:none}.nav__toggle{display:inline-flex}.nav__cta{margin-left:auto}.nav__toggle{margin-left:0}}
@media (max-width:640px){.nav__cta{display:none}.nav__mine.is-on{display:none}}

/* ---------- 7. OPENERS (hero) ---------- */
.opener{padding:var(--sec-2) 0 var(--sec-1)}
.opener--home{padding:var(--sec-3) 0 var(--sec-2)}
.opener__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s-9);align-items:center}
.opener__title{font-size:var(--fs-display);margin-bottom:.4em}
.opener__title em{font-style:normal;color:var(--teal-text);background:linear-gradient(transparent 62%, var(--mint) 62%)}
.opener__lede{font-size:var(--fs-lede);color:var(--gray-text);max-width:34em}
.opener__actions{margin:var(--s-6) 0 var(--s-3)}
.opener__fine{font-size:var(--fs-sm);color:var(--gray-text)}
.opener__crumbs{font-size:var(--fs-sm);color:var(--gray-text);margin-bottom:var(--s-4)}
.opener__crumbs a{color:var(--gray-text)}
.opener--utility .opener__title{font-size:var(--fs-h1)}
.opener__media{position:relative}
@media (max-width:900px){.opener__grid{grid-template-columns:1fr;gap:var(--s-7)}}

/* plate illustration in the hero: a plate built from the site's own tokens, no photo needed */
.plate{width:min(100%,440px);margin:0 auto;aspect-ratio:1;position:relative}
.plate__svg{width:100%;height:100%}
.plate__label{position:absolute;font-family:var(--display);font-weight:700;font-size:var(--fs-sm);color:var(--teal-deep);background:#fff;padding:.35em .7em;border-radius:var(--r-pill);box-shadow:var(--sh-2)}
.plate__label--a{left:2%;top:38%}.plate__label--b{right:0;top:18%}.plate__label--c{right:6%;bottom:14%}
.photo-slot{border:2px dashed var(--mint-line);border-radius:var(--r-card);padding:var(--s-4);color:var(--gray-text);font-size:var(--fs-sm);background:var(--mint-wash);margin-top:var(--s-4)}

/* ---------- 8. CARDS (the Lingo-style photo card, rendered in the house palette) ---------- */
.card{background:#fff;border:1px solid var(--gray-line);border-radius:var(--r-card);padding:var(--s-6);box-shadow:var(--sh-1)}
.card--mint{background:var(--mint-wash);border-color:var(--mint-line)}
.card--blue{background:var(--blue-wash);border-color:var(--blue-soft)}
.card--alert{background:var(--alert-wash);border-color:var(--alert-line)}
.ccard{display:grid;grid-template-columns:150px minmax(0,1fr);background:#fff;border:1px solid var(--gray-line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-1);text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease;min-height:150px}
.ccard:hover{transform:translateY(-2px);box-shadow:var(--sh-2);color:inherit}
.ccard__art{position:relative;display:grid;place-items:center;background:var(--tile,var(--tile-1));overflow:hidden}
.ccard__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ccard__ring{position:relative;width:76px;height:76px;border-radius:50%;border:3px solid #fff;display:grid;place-items:center;color:#fff;background:rgba(31,53,52,.28);backdrop-filter:blur(2px)}
.ccard__ring svg{width:40px;height:40px}
.ccard__body{padding:var(--s-5) var(--s-5) var(--s-5);display:flex;flex-direction:column;gap:var(--s-2)}
.ccard__title{font-family:var(--display);font-weight:700;font-size:var(--fs-md);color:var(--teal-deep);margin:0}
.ccard__sub{margin:0;color:var(--gray-text);font-size:var(--fs-sm)}
.ccard__go{margin-top:auto;font-family:var(--display);font-weight:700;font-size:var(--fs-sm);color:var(--teal-deep)}
.ccard--done .ccard__title::after{content:" ✓";color:var(--teal)}
@media (max-width:640px){.ccard{grid-template-columns:120px minmax(0,1fr)}}

/* fundamentals tiles (the pastel tile row) */
.tile{display:flex;flex-direction:column;justify-content:space-between;min-height:220px;padding:var(--s-6);border-radius:var(--r-block);background:var(--tile,var(--tile-1));color:var(--teal-ink);text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.tile:hover{transform:translateY(-3px);box-shadow:var(--sh-2);color:var(--teal-ink)}
.tile__title{font-family:var(--display);font-weight:700;font-size:var(--fs-lg);line-height:1.15;margin:0 0 var(--s-4);color:var(--teal-ink)}
.tile__foot{display:flex;flex-direction:column;gap:var(--s-2)}
.tile__icon{width:40px;height:40px;color:var(--teal-ink)}
.tile__kicker{font-family:var(--display);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:700;opacity:.8}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.tiles{grid-template-columns:1fr 1fr;gap:var(--s-3)}.tile{min-height:180px;padding:var(--s-4)}.tile__title{font-size:var(--fs-md)}}

/* ---------- 9. TABS (Goal | Science) ---------- */
.tabs{margin:var(--s-6) 0}
.tabs__list{display:flex;gap:0;border-bottom:2px solid var(--gray-line);margin:0 0 var(--s-6);padding:0;list-style:none}
.tabs__btn{background:none;border:0;padding:.8em 1.1em;font-family:var(--display);font-weight:700;color:var(--gray-text);cursor:pointer;margin-bottom:-2px;border-bottom:3px solid transparent;font-size:var(--fs-base)}
.tabs__btn[aria-selected=true]{color:var(--teal-deep);border-bottom-color:var(--teal-deep)}
.tabs__panel[hidden]{display:none}

/* ---------- 10. DETAIL PAGE (challenge / fundamental) ---------- */
.detail-hero{background:var(--tile,var(--tile-1));padding:var(--sec-2) 0}
.detail-hero__inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-6);align-items:center}
.detail-hero__ring{width:110px;height:110px;border-radius:50%;border:4px solid #fff;display:grid;place-items:center;color:var(--teal-ink);background:rgba(255,255,255,.45)}
.detail-hero__ring svg{width:56px;height:56px}
.detail-hero .opener__title{font-size:var(--fs-h1);color:var(--teal-ink)}
.detail-hero .opener__lede{color:var(--teal-ink);opacity:.85}
@media (max-width:640px){.detail-hero__inner{grid-template-columns:1fr}.detail-hero__ring{width:84px;height:84px}}
.tip{background:var(--blue-wash);border-left:4px solid var(--blue);padding:var(--s-4) var(--s-5);border-radius:0 var(--r-card) var(--r-card) 0;margin:var(--s-6) 0}
.tip__title{font-family:var(--display);font-weight:700;margin:0 0 .3em;color:var(--teal-deep)}
.callout{background:var(--mint-wash);border:1px solid var(--mint-line);border-radius:var(--r-card);padding:var(--s-5) var(--s-6);margin:var(--s-6) 0}
.callout--alert{background:var(--alert-wash);border-color:var(--alert-line)}
.callout--alert h3,.callout--alert .eyebrow{color:var(--alert)}
.honest{border-top:3px solid var(--teal);padding-top:var(--s-4);margin-top:var(--s-7)}
.honest .eyebrow{color:var(--teal-text)}
.refs{font-size:var(--fs-sm);color:var(--gray-text)}
.refs li{margin:.5em 0}
.cite{font-size:.75em;vertical-align:super;text-decoration:none;font-weight:700;color:var(--teal-text);margin-left:2px}

/* tracker (7-day checkboxes) */
.tracker{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s-2);margin:var(--s-5) 0}
.tracker__day{display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--display);font-weight:700;font-size:var(--fs-xs);color:var(--gray-text);text-transform:uppercase;letter-spacing:.06em}
.tracker__box{width:44px;height:44px;border:2px solid var(--gray-line);border-radius:var(--r-btn);background:#fff;display:grid;place-items:center;cursor:pointer;color:transparent;transition:background .15s ease,border-color .15s ease}
.tracker__box svg{width:22px;height:22px}
.tracker__box.is-done{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff}
.tracker__count{font-family:var(--display);font-weight:700;color:var(--teal-deep)}
@media (max-width:420px){.tracker__box{width:38px;height:38px}}

/* ---------- 11. QUIZ + CALCULATOR ---------- */
.quiz-card{background:#fff;border:1px solid var(--gray-line);border-radius:var(--r-block);padding:clamp(1.25rem,1rem + 2vw,2.5rem);box-shadow:var(--sh-2);max-width:760px;margin:0 auto}
.quiz-bar{height:6px;background:var(--mint-mid);border-radius:var(--r-pill);overflow:hidden;margin:0 0 var(--s-6)}
.quiz-bar span{display:block;height:100%;background:var(--teal-deep);transition:width .2s ease}
.quiz-kicker{font-family:var(--display);font-size:var(--fs-sm);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-text);margin:0 0 .5em}
.quiz-card h2{font-size:var(--fs-xl);margin-bottom:.5em}
.quiz-note{color:var(--gray-text);margin:-.25em 0 1em}
.quiz-opts{display:grid;gap:var(--s-3);margin:var(--s-5) 0}
.quiz-opt{display:block;width:100%;text-align:left;background:var(--cream);border:2px solid var(--gray-line);border-radius:var(--r-btn);padding:.9em 1.1em;font-size:var(--fs-md);cursor:pointer;line-height:1.35;transition:border-color .12s ease,background .12s ease}
.quiz-opt:hover{border-color:var(--teal-deep);background:var(--mint-wash)}
.quiz-opt small{display:block;color:var(--gray-text);font-size:var(--fs-sm);margin-top:.2em}
.quiz-check{display:flex;gap:.8em;align-items:flex-start;background:var(--cream);border:2px solid var(--gray-line);border-radius:var(--r-btn);padding:.8em 1em;cursor:pointer;font-size:var(--fs-md)}
.quiz-check input{width:22px;height:22px;margin:.15em 0 0;accent-color:var(--teal-deep);flex:none}
.quiz-check:has(input:checked){border-color:var(--teal-deep);background:var(--mint-wash)}
.quiz-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s-3);margin:var(--s-4) 0}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--display);font-weight:700;font-size:var(--fs-sm);color:var(--teal-deep)}
.field input,.field select{padding:.75em .9em;border:2px solid var(--gray-mid);border-radius:var(--r-btn);background:#fff;font-size:var(--fs-md);min-height:48px;width:100%}
.field input:focus,.field select:focus{border-color:var(--teal-deep)}
.field__hint{font-size:var(--fs-xs);color:var(--gray-text)}
.quiz-back{background:none;border:0;color:var(--gray-text);padding:.5em 0;cursor:pointer;font-weight:600;margin-top:var(--s-4)}
.quiz-disclaimer{font-size:var(--fs-xs);color:var(--gray-text);margin-top:var(--s-4)}
.quiz-cta{margin-top:var(--s-4)}
.form-err{color:var(--alert);font-size:var(--fs-sm);margin:.5em 0 0}

/* the result: the number */
.number{background:var(--teal-deep);color:#fff;border-radius:var(--r-block);padding:var(--s-7) var(--s-6);text-align:center;margin:var(--s-6) 0}
.number__label{font-family:var(--display);font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--mint);margin:0 0 .4em}
.number__big{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,2rem + 3vw,4.2rem);line-height:1;letter-spacing:-.02em;margin:0;font-variant-numeric:tabular-nums}
.number__unit{font-size:.4em;font-weight:600;color:var(--mint);letter-spacing:0}
.number__sub{color:var(--mist);margin:.6em 0 0;font-size:var(--fs-md)}
.number__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s-4);margin-top:var(--s-6);text-align:center}
.number__row b{display:block;font-family:var(--display);font-size:var(--fs-xl);color:#fff}
.number__row span{font-size:var(--fs-sm);color:var(--mist)}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s-4);margin:var(--s-6) 0}
.stat{background:#fff;border:1px solid var(--gray-line);border-radius:var(--r-card);padding:var(--s-4) var(--s-5)}
.stat b{display:block;font-family:var(--display);font-size:var(--fs-xl);color:var(--teal-deep);line-height:1.1}
.stat span{font-size:var(--fs-sm);color:var(--gray-text)}
.capture{background:var(--mint-wash);border:1px solid var(--mint-line);border-radius:var(--r-card);padding:var(--s-6);margin:var(--s-7) 0}
.capture h3{margin-top:0}
.capture form{display:flex;gap:var(--s-3);flex-wrap:wrap}
.capture input[type=email]{flex:1 1 240px;padding:.8em 1em;border:2px solid var(--gray-mid);border-radius:var(--r-btn);font-size:var(--fs-md);min-height:48px}
.sent{font-weight:700;color:var(--teal-deep)}

/* ---------- 12. HOME PIECES ---------- */
.strip{border-top:1px solid var(--gray-line);border-bottom:1px solid var(--gray-line);background:#fff;padding:var(--s-5) 0}
.strip__inner{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-7);align-items:center;justify-content:center;font-size:var(--fs-sm);color:var(--gray-text)}
.strip__inner b{color:var(--teal-deep);font-family:var(--display)}
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6)}
.step{position:relative;padding:var(--s-6);background:#fff;border:1px solid var(--gray-line);border-radius:var(--r-card)}
.step::before{counter-increment:step;content:counter(step);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--mint);color:var(--teal-ink);font-family:var(--display);font-weight:800;margin-bottom:var(--s-4)}
@media (max-width:900px){.steps{grid-template-columns:1fr}}
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-8);align-items:center}
@media (max-width:900px){.story{grid-template-columns:1fr}}
.pull{font-family:var(--display);font-size:var(--fs-lg);font-weight:600;color:var(--teal-deep);border-left:4px solid var(--mint);margin:var(--s-6) 0;padding:.2em 0 .2em 1em}
.inside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.inside li{list-style:none;margin:0;padding:var(--s-4) var(--s-5);background:#fff;border:1px solid var(--gray-line);border-radius:var(--r-card);display:flex;gap:var(--s-3);align-items:flex-start}
.inside svg{width:22px;height:22px;flex:none;color:var(--teal);margin-top:2px}
.inside b{display:block;font-family:var(--display);color:var(--teal-deep)}
.inside span{color:var(--gray-text);font-size:var(--fs-sm)}
.inside{padding:0}
@media (max-width:640px){.inside{grid-template-columns:1fr}}
.price{background:#fff;border:2px solid var(--teal-deep);border-radius:var(--r-block);padding:var(--s-7);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-6);align-items:center;box-shadow:var(--sh-2)}
.price__big{font-family:var(--display);font-weight:800;font-size:var(--fs-3xl);color:var(--teal-deep);line-height:1;margin:0}
.price__big small{font-size:.4em;color:var(--gray-text);font-weight:600}
.price__list{list-style:none;padding:0;margin:var(--s-4) 0}
.price__list li{padding-left:1.6em;position:relative;margin:.35em 0}
.price__list li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:14px;border-radius:50%;background:var(--mint)}
@media (max-width:900px){.price{grid-template-columns:1fr}}
.faq details{background:#fff;border:1px solid var(--gray-line);border-radius:var(--r-card);margin:0 0 var(--s-3);padding:0 var(--s-5)}
.faq summary{list-style:none;cursor:pointer;padding:var(--s-4) 0;font-family:var(--display);font-weight:700;color:var(--teal-deep);display:flex;justify-content:space-between;gap:var(--s-4);align-items:center;font-size:var(--fs-md)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:12px;height:12px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(45deg);transition:transform .15s ease;flex:none;margin-right:4px}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details>div{padding:0 0 var(--s-5);color:var(--ink);max-width:var(--measure)}
.cta-band{background:var(--teal-deep);color:#fff;border-radius:var(--r-block);padding:var(--sec-1) var(--s-7);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-6);align-items:center}
.cta-band h2{color:#fff;margin:0 0 .3em}
.cta-band p{color:var(--mist);margin:0}
@media (max-width:900px){.cta-band{grid-template-columns:1fr}}

/* ---------- 13. PROGRAM HUB ---------- */
.hub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
@media (max-width:1080px){.hub{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.hub{grid-template-columns:1fr}}
.hub__card{display:flex;flex-direction:column;gap:var(--s-2);background:#fff;border:1px solid var(--gray-line);border-radius:var(--r-card);padding:var(--s-5);text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease}
.hub__card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);color:inherit}
.hub__kicker{font-family:var(--display);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--teal-text)}
.hub__title{font-family:var(--display);font-weight:700;font-size:var(--fs-md);color:var(--teal-deep);margin:0}
.hub__sub{color:var(--gray-text);font-size:var(--fs-sm);margin:0}
.week{border:1px solid var(--gray-line);background:#fff;border-radius:var(--r-card);padding:var(--s-5) var(--s-6);margin:0 0 var(--s-4);display:grid;grid-template-columns:90px minmax(0,1fr);gap:var(--s-5)}
.week__num{font-family:var(--display);font-weight:800;color:var(--teal-deep);font-size:var(--fs-lg);line-height:1.1}
.week__num small{display:block;font-size:var(--fs-xs);color:var(--gray-text);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.week h3{margin:0 0 .3em}
.week p{margin:0 0 .5em}
.week__focus{display:inline-block;background:var(--mint-mid);border-radius:var(--r-pill);padding:.25em .8em;font-size:var(--fs-sm);font-weight:700;color:var(--teal-deep);margin:0 .4em .4em 0;text-decoration:none}
@media (max-width:640px){.week{grid-template-columns:1fr;gap:var(--s-3)}}
.phase{margin:var(--s-8) 0 var(--s-4)}
.phase h2{margin-bottom:.2em}
.phase p{color:var(--gray-text)}
.gate{max-width:560px;margin:0 auto}
.checklist{list-style:none;padding:0;margin:0}
.checklist li{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4) var(--s-5);background:#fff;border:1px solid var(--gray-line);border-radius:var(--r-card);margin:0 0 var(--s-3);cursor:pointer;font-size:var(--fs-md)}
.checklist li.is-done{background:var(--mint-wash);border-color:var(--mint-line)}
.checklist li.is-done .checklist__label{text-decoration:line-through;color:var(--gray-text)}
.checklist__box{width:30px;height:30px;border:2px solid var(--gray-mid);border-radius:8px;display:grid;place-items:center;flex:none;color:transparent;background:#fff}
.checklist__box svg{width:18px;height:18px}
li.is-done .checklist__box{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff}
.checklist__label b{display:block;font-family:var(--display);color:var(--teal-deep)}
.checklist__label span{font-size:var(--fs-sm);color:var(--gray-text)}
.streak{font-family:var(--display);font-weight:700;color:var(--teal-deep)}

/* ---------- 14. FOOTER ---------- */
.footer{background:var(--teal-ink);color:var(--mist);padding:var(--sec-2) 0 var(--s-7);margin-top:var(--sec-2)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s-8)}
.footer__mark{color:var(--mint);margin-bottom:var(--s-3)}
.footer__name{display:block;font-family:var(--display);color:#fff;font-size:var(--fs-md);margin-bottom:var(--s-2)}
.footer__blurb{font-size:var(--fs-sm);color:var(--mist);max-width:38em}
.footer__blurb a{color:var(--mint)}
.footer__title{font-family:var(--display);font-weight:700;color:#fff;margin:0 0 var(--s-3);font-size:var(--fs-sm);letter-spacing:.06em;text-transform:uppercase}
.footer__list{list-style:none;padding:0;margin:0}
.footer__list li{margin:.35em 0}
.footer__list a{color:var(--mist);text-decoration:none;font-size:var(--fs-sm)}
.footer__list a:hover{color:#fff;text-decoration:underline}
.footer__legal{border-top:1px solid rgba(255,255,255,.15);margin-top:var(--s-8);padding-top:var(--s-5);font-size:var(--fs-xs);color:var(--mist)}
.footer__legal a{color:var(--mint)}
.footer__legal p{max-width:70em}
@media (max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.footer__grid{grid-template-columns:1fr;gap:var(--s-6)}}

/* ---------- 15. UTILITIES ---------- */
.badge{display:inline-block;background:var(--mint-mid);color:var(--teal-deep);border-radius:var(--r-pill);padding:.2em .7em;font-size:var(--fs-xs);font-weight:700;font-family:var(--display);letter-spacing:.04em;text-transform:uppercase}
.badge--warm{background:var(--tile-3)}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mt-6{margin-top:var(--s-6)}.mt-8{margin-top:var(--s-8)}
.reveal{opacity:1}
.sticky-cta{display:none}
@media (max-width:640px){
  .sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(251,249,244,.96);border-top:1px solid var(--gray-line);padding:10px var(--gutter);gap:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .sticky-cta .btn{flex:1}
  body.has-sticky{padding-bottom:84px}
}