/* =========================================================================
   Sosulo V2.5 — shared design system
   Pure-black base, orange (#ff6a2b) accent, Space Grotesk + Inter + Fraunces
   (Fraunces italic serif for accent words), pill buttons, uppercase labels,
   banner strips, editorial type. The app's original structural class names are
   preserved and restyled in place so teaser/plan/quiz inherit the new look.
   ========================================================================= */

/* ---- Design tokens ---------------------------------------------------- */
/* The app themes everything through these variable NAMES, so remapping them to
   the black/orange palette reskins the whole app. New V2.5 aliases are added
   alongside for components authored directly against them. */
:root{
  --bg:#000; --surface:#101010; --surface2:#0a0a0a; --border:rgba(255,255,255,0.11);
  --text:#ffffff; --muted:#a7a29a; --accent:#ff6a2b; --green:#8FB87A;
  /* V2.5 aliases */
  --bg2:#0a0a0a; --card:#101010; --card2:#161616;
  --acc:#ff6a2b; --acc-l:#ff8a52; --ink:#ffffff; --muted2:#6f6a63;
  --line:rgba(255,255,255,0.11);
}

/* ---- Base ------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:'Inter',-apple-system,Helvetica,Arial,sans-serif;line-height:1.6;padding:0 0 70px;-webkit-font-smoothing:antialiased;}
.wrap{max-width:660px;margin:0 auto;padding:0 22px;}
.hidden{display:none !important;}
/* Fraunces italic serif for accent words; orange accent text helper. */
.italic{font-family:'Fraunces',serif;font-style:italic;font-weight:400;letter-spacing:0;}
.acc{color:var(--accent);}
.loading{color:var(--muted);animation:pulse 1.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.45;}50%{opacity:.85;}}

/* ---- Loading skeletons (shimmer) — Refined Dark ---------------------- */
.skel-line{display:block;height:13px;border-radius:7px;background:var(--surface2);position:relative;overflow:hidden;margin:0 0 10px;}
.skel-line:last-child{margin-bottom:0;}
.skel-line::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent 0,rgba(255,106,43,.13) 50%,transparent 100%);animation:shimmer 1.5s ease-in-out infinite;}
.summary .skel-line{margin:11px 0;}
.skel-card{padding:16px 20px;}
@keyframes shimmer{100%{transform:translateX(100%);}}
@media(prefers-reduced-motion:reduce){.skel-line::after{animation:none;}.skel-line{opacity:.55;}}

/* ---- Shared hero / type (base = plan values) -------------------------- */
.hero{padding:50px 0 26px;scroll-margin-top:64px;}
/* Uppercase section label / eyebrow with a leading accent dash. */
.eyebrow{display:flex;align-items:center;gap:13px;font-family:'Space Grotesk',sans-serif;font-size:.72rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);font-weight:700;}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--accent);flex:none;}
h1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:2.6rem;line-height:1.05;letter-spacing:-.02em;margin:14px 0 14px;}
.summary{color:#ddd;font-size:1.05rem;max-width:560px;}
.summary b{color:var(--accent);font-weight:600;}
.chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px;}
.chip{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:8px 16px;font-size:.84rem;color:var(--muted);}
.chip strong{color:var(--accent);font-weight:600;}

h2{font-family:'Space Grotesk',sans-serif;font-size:1.7rem;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:44px 0 10px;scroll-margin-top:64px;}
.lead{color:var(--muted);font-size:1rem;margin-bottom:18px;}

/* (Old plan sticky-nav rules removed — the plan renderer now scopes its nav
   under .page-plan .nav in the PLAN PAGE block at the end of this file.) */

/* ---- Banner (in-page callouts: keeps .ic/.bt/.bd structure) ------------ */
.banner{display:flex;gap:14px;align-items:flex-start;background:rgba(255,106,43,.08);border:1px solid rgba(255,106,43,.3);border-radius:16px;padding:18px 20px;margin-top:20px;}
.banner .ic{color:var(--accent);flex:none;width:22px;height:22px;margin-top:2px;}
.banner .bt{font-family:'Space Grotesk',sans-serif;font-weight:700;margin-bottom:3px;}
.banner .bd{color:var(--muted);font-size:.9rem;}

/* ---- Banner strip (full-bleed uppercase orange callout) --------------- */
.banner-strip{background:var(--accent);color:#120a05;text-align:center;padding:17px 20px;font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;font-size:14px;line-height:1.4;}

/* ---- Day cards / exercises (shared) ----------------------------------- */
.day{background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden;margin-bottom:12px;}
.day-head{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid var(--border);}
.day-head .dt{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1rem;}
.day-head .dt .tag{color:var(--muted);font-weight:400;font-size:.82rem;}
.badge{background:var(--accent);color:#120a05;font-size:.72rem;font-weight:700;padding:5px 13px;border-radius:999px;letter-spacing:.4px;}
.badge.rest{background:rgba(255,255,255,.08);color:var(--muted);}
/* On the landing sample the demo is a <button> (no navigation, shows a tooltip);
   neutralise button chrome so it looks identical to the real plan's <a>. */
button.demo{background:none;border:0;padding:0;font-family:inherit;cursor:pointer;}
.demo-wrap{position:relative;display:inline-block;}
.demo-tip{position:absolute;z-index:30;top:calc(100% + 6px);left:0;width:max-content;max-width:230px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 11px;font-size:.78rem;line-height:1.45;color:var(--text);box-shadow:0 8px 22px rgba(0,0,0,.4);white-space:normal;}
.demo-tip[hidden]{display:none;}
/* (Old plan .ex / .day-foot rows removed — the plan renderer now uses
   .page-plan .ex (a <details> accordion) defined in the PLAN PAGE block below.) */

/* (Old plan .phase / .worklabel rules removed — now .page-plan-scoped below.) */

/* ---- Plan: weekly schedule grid --------------------------------------- */
.weekgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:6px 0 22px;}
.wd{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:11px 4px;text-align:center;}
.wd .d{font-size:.68rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);}
.wd .f{font-size:.8rem;font-weight:600;margin-top:4px;font-family:'Space Grotesk',sans-serif;}
/* training days: faint amber tint + border + a small top accent marker */
.wd.train{border-color:rgba(255,106,43,.30);background:linear-gradient(180deg,rgba(255,106,43,.05),transparent 70%),var(--surface);box-shadow:inset 0 2px 0 rgba(255,106,43,.5);}
.wd.train .f{color:var(--accent);}
/* rest days recede */
.wd.rest{background:var(--surface2);opacity:.58;}
.wd.rest .f{color:var(--muted);font-weight:400;}

/* (Old plan numbered-steps rules removed — now .page-plan .steps/.step below.) */

/* ---- Plan: cards / params / macros / meals ---------------------------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px;}
.system-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:20px;}
.card .ct{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.98rem;}
.card .cdose{color:var(--accent);font-size:.82rem;font-weight:600;font-family:'Space Grotesk',sans-serif;margin:3px 0 6px;}
.card .cd{font-size:.84rem;color:var(--muted);line-height:1.5;}

.params{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;}
.param{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;}
.param .pl{font-size:.7rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);font-weight:600;}
.param .pv{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.05rem;margin:4px 0 6px;}
.param .pw{font-size:.83rem;color:var(--muted);line-height:1.5;}

/* (Old plan .macros/.macro/.meal rules removed — now .page-plan-scoped below.) */

/* ---- Teaser: section label (eyebrow marker + hairline rule) ----------- */
.sec-label{display:flex;align-items:center;gap:13px;font-family:'Space Grotesk',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);margin:38px 0 15px;}
.sec-label::before{content:"";width:30px;height:2px;background:var(--accent);flex:none;}

/* ---- Teaser: zoned band (nutrition + unlock) so the page reads as zones */
.zone{background:var(--surface2);border:1px solid var(--border);border-radius:18px;padding:2px 18px 20px;margin:34px 0;}
.zone .sec-label{margin-top:24px;}
.zone .sec-label:first-child{margin-top:16px;}

/* ---- Teaser: locked / blurred exercise rows --------------------------- */
.rx-lock{display:inline-flex;align-items:center;gap:6px;}
.blur{filter:blur(5px);user-select:none;font-family:'Space Grotesk',monospace;color:var(--accent);font-weight:600;font-size:.86rem;}
.lk{width:13px;height:13px;flex:none;color:var(--muted);}
/* teaser week: training days get a faint amber border + left accent marker;
   rest days recede */
.day.locked-day{position:relative;border-color:rgba(255,106,43,.26);box-shadow:inset 3px 0 0 rgba(255,106,43,.5);}
.day.rest-day{opacity:.6;}
.locked-day .ex .name{filter:blur(5px);user-select:none;color:var(--muted);}
.lock-tag{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;color:var(--muted);font-size:.85rem;}
.lock-tag .lk{width:15px;height:15px;}

/* ---- Teaser: nutrition hook ------------------------------------------- */
.nut{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 22px;flex-wrap:wrap;}
.nut .cal .n{font-family:'Space Grotesk',sans-serif;font-size:1.8rem;font-weight:600;color:var(--accent);}
.nut .cal .l{font-size:.74rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted);}
.nut .more{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.88rem;}

/* ---- Teaser: unlock list ---------------------------------------------- */
.unlock-list{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:8px 4px;}
.ul-row{display:flex;align-items:center;gap:12px;padding:11px 18px;font-size:.94rem;}
.ul-row + .ul-row{border-top:1px solid var(--border);}
.ul-row .lk{width:16px;height:16px;color:var(--accent);}
.ul-row .tag{margin-left:auto;font-size:.7rem;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);}

/* ---- Teaser: CTA + buttons -------------------------------------------- */
.cta{background:var(--surface2);border:1px solid rgba(255,106,43,.3);border-radius:22px;padding:38px 26px;text-align:center;margin-top:34px;}
.cta h3{font-family:'Space Grotesk',sans-serif;font-size:1.55rem;font-weight:700;letter-spacing:-.02em;}
.cta .price{font-family:'Space Grotesk',sans-serif;font-size:3.4rem;font-weight:700;letter-spacing:-.02em;margin:14px 0 2px;}
.cta .price small{font-size:1.05rem;color:var(--accent);font-weight:600;}
.cta .reassure{color:var(--muted);font-size:.85rem;margin-bottom:20px;}
/* iOS: register quick taps on button-like controls as taps, never as a
   double-tap-to-zoom gesture (which zoomed the page on rapid day-picker taps). */
.daycell,.opt,.btn,.tab,.toggle button,.gate{touch-action:manipulation;}
/* Pill buttons. Inline-flex + centered so they work both as auto-width pills
   (landing) and stretched via flex overrides (sticky CTA). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--accent);color:#fff;font-weight:700;font-size:1rem;font-family:'Space Grotesk',sans-serif;border:1.5px solid var(--accent);border-radius:999px;padding:16px 32px;cursor:pointer;text-decoration:none;text-align:center;transition:transform .15s ease,background .15s ease,border-color .15s ease;}
.btn:hover{transform:translateY(-2px);background:var(--acc-l);border-color:var(--acc-l);}
.btn:active{transform:translateY(0);}
.btn:disabled,.btn.disabled{opacity:.4;cursor:not-allowed;transform:none;background:var(--accent);border-color:var(--accent);}
.btn.alt{background:transparent;color:#fff;border-color:rgba(255,255,255,0.35);}
.btn.alt:hover{background:rgba(255,255,255,0.06);border-color:#fff;}
.fine{color:var(--muted);font-size:.78rem;margin-top:14px;}

/* ---- Teaser trust block, FAQ, second + sticky CTA (Batch 2) ----------- */
.cta .deliverable{color:var(--muted);font-size:.85rem;line-height:1.5;margin:6px auto 16px;max-width:34ch;}
.cta .anchor{color:var(--muted);font-size:.85rem;margin-bottom:8px;}
.cta .reassure{margin-bottom:6px;}
.cta .guarantee{margin-bottom:20px;}
.second-unlock{text-align:center;margin-top:28px;}
.faq{display:flex;flex-direction:column;gap:10px;}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 18px;}
.faq-q{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1rem;margin-bottom:6px;}
.faq-a{color:var(--muted);font-size:.9rem;line-height:1.55;}
.sticky-cta{display:none;}
@media(max-width:640px){
  .sticky-cta.show{display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--surface2);border-top:1px solid var(--border);padding:10px 16px;box-shadow:0 -6px 20px rgba(0,0,0,.28);}
  .sticky-left{display:flex;flex-direction:column;gap:1px;min-width:0;}
  .sticky-cta .btn{margin:0;flex:1;max-width:none;padding:13px 18px;}
  .sticky-price{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.2rem;white-space:nowrap;}
  .sticky-price span{font-size:.78rem;color:var(--muted);font-weight:500;}
  .page-teaser{padding-bottom:80px;}
}

/* =======================================================================
   Page-scoped reconciliation — teaser mockup used slightly different
   values for a few shared elements. Restore them only on the teaser page
   so it stays pixel-identical to teaser_mockup.html.
   ======================================================================= */
.page-teaser{line-height:1.6;}
.page-teaser .wrap{max-width:640px;}
.page-teaser .hero{padding:52px 0 30px;}
.page-teaser h1{font-size:2.4rem;}
.page-teaser .summary{font-size:1.04rem;max-width:540px;}
.page-teaser .chips{margin-top:22px;}
.page-teaser .ex{align-items:center;gap:0;padding:13px 20px;}

/* =======================================================================
   Landing + quiz (Phase 0 front-end, index.html / quiz.js)
   New classes — not from the mockups, but built in the same Refined Dark
   language (surface bg, 1px border, 14px radius, amber accent).
   ======================================================================= */

/* ---- Keyboard focus (visible on the dark theme) ----------------------- */
.opt:focus-visible,
.daycell:focus-visible,
.btn:focus-visible,
a:focus-visible,
button:focus-visible,
.gate:focus-visible,
.gate input:focus-visible,
.toggle button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ---- Brand wordmark --------------------------------------------------- */
.brandbar{padding:22px 0 0;}

/* Logo wordmark image — the brand wordmark. Height is set per surface to
   match the old text height; width:auto keeps the aspect ratio so it never
   distorts. line-height:0 stops the inline image adding phantom descender space. */
.brand-logo{display:inline-flex;align-items:center;line-height:0;text-decoration:none;flex-shrink:0;}
.brand-logo img{display:block;width:auto;height:22px;}
.brand-logo-sm img{height:17px;}
#landing .brand-logo img{height:22px;}
.page-teaser .brand-logo img{height:23px;}
.page-plan .brand-logo img{height:18px;}
.page-legal .brand-logo img{height:22px;}

/* ---- Landing / quiz shared bits (quiz reuses .landing-sub) ------------- */
.landing-sub{color:var(--muted);font-size:1rem;margin-top:14px;max-width:520px;}
.landing-cta{margin-top:30px;}

/* ---- Quiz progress (sticky) ------------------------------------------- */
.progress{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border);margin:0 -22px;padding:12px 22px;}
.progress .bar{height:6px;background:var(--surface);border-radius:999px;overflow:hidden;}
.progress .fill{height:100%;width:0;background:var(--accent);border-radius:999px;transition:width .25s ease;}
.progress .lbl{display:flex;justify-content:space-between;font-size:.76rem;color:var(--muted);margin-top:7px;}
.progress .lbl b{color:var(--text);font-weight:600;}

/* ---- Quiz stepper: back arrow + step label + one-question-at-a-time ---- */
.progress .ptop{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.progress .pstep{margin-left:auto;font-family:'Space Grotesk',sans-serif;font-size:.78rem;color:var(--muted);letter-spacing:.3px;}
.progress .pstep b{color:var(--text);font-weight:700;}
.stepback{flex:none;width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid var(--border);border-radius:999px;color:var(--muted);cursor:pointer;transition:.15s;}
.stepback:hover{color:var(--accent);border-color:var(--accent);}
.stepback svg{width:16px;height:16px;}
/* Stepper shows exactly one .q; the rest are removed from flow. */
#quizForm .q{display:none;margin:24px 0 0;}
#quizForm .q.step-active{display:block;animation:stepIn .2s ease;}
@keyframes stepIn{from{opacity:0;transform:translateX(14px);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){#quizForm .q.step-active{animation:none;}}

/* ---- Quiz question blocks --------------------------------------------- */
.q{margin:34px 0;scroll-margin-top:80px;}
.q-num{display:flex;align-items:center;gap:11px;font-family:'Space Grotesk',sans-serif;font-size:.7rem;letter-spacing:2px;text-transform:uppercase;color:var(--accent);font-weight:700;}
.q-num::before{content:"";width:24px;height:2px;background:var(--accent);flex:none;}
.q-title{font-family:'Space Grotesk',sans-serif;font-size:1.3rem;font-weight:600;margin:6px 0 4px;line-height:1.2;}
.q-sub{color:var(--muted);font-size:.9rem;margin:8px 0 16px;}
.q-micro{color:var(--muted);font-size:.9rem;margin:8px 0 16px;}
.subhead{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.95rem;margin:18px 0 10px;}
.subhead .opt-hint{color:var(--muted);font-weight:400;font-size:.82rem;}
.subhead-note{color:var(--muted);font-size:.85rem;line-height:1.5;margin:-4px 0 12px;max-width:56ch;}

/* ---- Selectable options ----------------------------------------------- */
.opts{display:flex;flex-direction:column;gap:10px;}
.opts.cols2{display:grid;grid-template-columns:1fr 1fr;}
.opt{display:flex;gap:13px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:15px 17px;cursor:pointer;transition:.15s;text-align:left;width:100%;color:var(--text);}
.opt:hover{border-color:rgba(255,106,43,.55);}
.opt.selected{border-color:var(--accent);background:rgba(255,106,43,.09);}
.opt.disabled{opacity:.4;pointer-events:none;}
.opt .oemoji{font-size:1.35rem;line-height:1.2;flex:none;}
.opt .obody{flex:1;}
.opt .ot{display:block;font-weight:600;font-size:.98rem;line-height:1.3;}
.opt .os{display:block;color:var(--muted);font-size:.85rem;margin-top:4px;line-height:1.4;}
.opt .oe{display:block;color:var(--muted);font-size:.78rem;margin-top:6px;font-style:italic;line-height:1.4;}
/* Pin the tick glyph to the system UI font. It is a plain U+2713 check mark, and
   left to inherit it renders in Inter, whose thin check drifts in once the web
   font swaps in. The system font gives the bold, geometric check consistently. */
.opt .otick{flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;color:#120a05;font-size:.7rem;font-weight:700;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;}
.opt.selected .otick{background:var(--accent);border-color:var(--accent);}

/* ---- Day picker (Q6) -------------------------------------------------- */
.daypick{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.daycell{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 4px;text-align:center;cursor:pointer;font-size:.82rem;font-weight:600;font-family:'Space Grotesk',sans-serif;transition:.15s;color:var(--muted);}
.daycell:hover{border-color:rgba(255,106,43,.45);}
.daycell.selected{border-color:var(--accent);background:rgba(255,106,43,.12);color:var(--accent);}
/* High-availability hint under the day picker (shown at 5+ selected). */
.dayhint{margin-top:14px;font-size:.86rem;line-height:1.55;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;}
.dayhint[hidden]{display:none;}

/* Respect reduced-motion: no transitions/press transforms for those who opt out */
@media(prefers-reduced-motion:reduce){
  .btn,.opt,.daycell,.nav a,.ex .demo{transition:none;}
  .btn:active{transform:none;}
}

/* ---- Inputs ----------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.field label{font-size:.85rem;color:var(--muted);font-weight:500;}
/* font-size must stay >=16px: iOS Safari zooms the page when a focused input is
   under 16px. 1rem = 16px here (root is the default 16px). */
input[type=number],input[type=text],textarea{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;color:var(--text);font-family:'Inter',sans-serif;font-size:1rem;width:100%;}
input[type=number]:focus,input[type=text]:focus,textarea:focus{outline:none;border-color:var(--accent);}
/* keyboard focus gets the same visible accent outline as other controls */
input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent);}
textarea{resize:vertical;min-height:70px;line-height:1.5;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.suffix{position:relative;}
.suffix .u{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:.85rem;pointer-events:none;}
.suffix input{padding-right:38px;}
/* Hide native number spinners so they never eat right-side space or crowd the
   unit label — keeps two-digit inches / three-digit cm fully visible. */
.suffix input[type=number]::-webkit-outer-spin-button,
.suffix input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.suffix input[type=number]{-moz-appearance:textfield;appearance:textfield;}
/* Gentle inline correction shown when a numeric value is clamped to range. */
.clamp-note{color:var(--accent);font-size:.8rem;margin-top:6px;line-height:1.35;}

/* ---- Unit toggle ------------------------------------------------------ */
.toggle{display:inline-flex;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:3px;margin-bottom:14px;}
.toggle button{background:none;border:none;color:var(--muted);font-family:'Inter',sans-serif;font-size:.85rem;font-weight:600;padding:7px 16px;border-radius:999px;cursor:pointer;}
.toggle button.active{background:var(--accent);color:#120a05;}

/* ---- Safety gates ----------------------------------------------------- */
.gate{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:15px 17px;cursor:pointer;margin-bottom:10px;}
.gate input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--accent);cursor:pointer;}
.gate .gt{font-size:.88rem;}

/* ---- Validation ------------------------------------------------------- */
.err{color:#e07a7a;font-size:.82rem;margin-top:8px;display:none;}
.q.invalid .err{display:block;}
.q.invalid .q-title{color:#e07a7a;}

.submit-wrap{text-align:center;margin-top:40px;}
.submit-note{color:var(--muted);font-size:.8rem;margin-top:12px;}

@media(max-width:600px){
  .weekgrid{grid-template-columns:repeat(4,1fr);}
  .grid2,.macros{grid-template-columns:1fr 1fr;}
  .system-grid{grid-template-columns:1fr;}
  .opts.cols2{grid-template-columns:1fr;}
}

/* On narrow phones, give Height and Current weight a full row each. Only the
   outer row2 stacks; the inner ft/in pair stays side by side. */
@media(max-width:480px){
  #metricFields>.row2,#imperialFields>.row2{grid-template-columns:1fr;}
  /* Keep the price comparison card readable on narrow phones: tighter padding
     and font so the long left label + "$X once" value never overflow. */
  #landing .anchor{padding:6px 18px;}
  #landing .arow{font-size:14.5px;gap:12px;}
}

/* =======================================================================
   LANDING (Sosulo V2.5 mockup). Every rule is scoped under #landing so the
   mockup's class names (.banner, .card, .chip, .tag, .faq, nav, section, h2…)
   never collide with the teaser / plan / quiz that reuse those names. The
   #quiz container is a sibling of #landing, so it keeps the app's own styles.
   ======================================================================= */
#landing{display:block;}
#landing .wrap{max-width:1080px;padding:0 30px;}
#landing .narrow{max-width:760px;}
#landing p{color:var(--muted);font-size:17px;}
#landing .tk{width:1em;height:1em;display:inline-block;vertical-align:-0.13em;flex-shrink:0;}
#landing h1,#landing h2,#landing h3,#landing h4{font-family:'Space Grotesk',sans-serif;letter-spacing:-0.02em;line-height:1.05;font-weight:700;}

/* label */
#landing .label{display:flex;align-items:center;gap:13px;text-transform:uppercase;letter-spacing:2.5px;font-size:12px;font-weight:700;color:var(--acc);margin-bottom:18px;font-family:'Space Grotesk',sans-serif;}
#landing .label:before{content:"";width:30px;height:2px;background:var(--acc);}

/* buttons (reuse global .btn pill; add mockup modifiers) */
#landing .btn-sub{font-size:13.5px;color:var(--muted2);margin-top:15px;}
#landing .btn.navcta{font-size:13px;padding:12px 22px;}

/* nav */
#landing nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0;border-bottom:1px solid var(--line);}

/* hero */
#landing .hero{position:relative;overflow:hidden;padding:0;}
#landing .hero:before{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 78% 15%, rgba(255,106,43,0.16) 0%, rgba(0,0,0,0) 55%), radial-gradient(60% 50% at 10% 90%, rgba(255,106,43,0.06) 0%, rgba(0,0,0,0) 60%);pointer-events:none;}
#landing .hero-rings{position:absolute;top:-160px;right:-160px;width:620px;height:620px;border-radius:50%;border:1px solid rgba(255,106,43,0.10);}
#landing .hero-rings:before,#landing .hero-rings:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,106,43,0.10);}
#landing .hero-rings:before{inset:80px;}
#landing .hero-rings:after{inset:180px;border-color:rgba(255,106,43,0.14);}
#landing .hero .wrap{position:relative;display:flex;gap:50px;align-items:center;padding-top:70px;padding-bottom:80px;}
#landing .hero-copy{flex:1;min-width:0;}
#landing .hero h1{font-size:60px;margin-bottom:6px;}
#landing .hero h1 .l2{display:block;}
#landing .hero .italic{display:block;font-size:44px;color:var(--muted);margin:2px 0 24px;}
#landing .hero .sub{font-size:19px;max-width:520px;margin-bottom:34px;}
#landing .hero-btns{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
#landing .trust-line{font-size:13.5px;color:var(--muted);margin-top:20px;}
#landing .trust-line .acc{font-weight:700;}
#landing .hero-visual{flex-shrink:0;}

/* phone */
#landing .phone{width:270px;border-radius:40px;padding:11px;background:linear-gradient(160deg,#1a1a1a,#050505);border:1px solid rgba(255,255,255,0.14);box-shadow:0 40px 90px rgba(0,0,0,0.7);position:relative;}
#landing .phone:before{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);width:58px;height:5px;background:#000;border-radius:4px;z-index:3;}
#landing .phone-screen{background:#0c0c0c;border-radius:30px;overflow:hidden;padding:32px 15px 18px;}
#landing .ps-k{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--acc);font-weight:700;font-family:'Space Grotesk',sans-serif;}
#landing .ps-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;margin:4px 0 13px;}
#landing .ps-row{display:flex;justify-content:space-between;align-items:center;gap:8px;background:rgba(255,255,255,0.04);border:1px solid var(--line);border-radius:12px;padding:9px 11px;margin-bottom:7px;}
#landing .ps-row .n{font-size:11.5px;color:#eee;font-weight:500;line-height:1.25;}
#landing .ps-row .n small{display:block;color:var(--muted2);font-size:9.5px;font-weight:400;}
#landing .ps-row .s{font-family:'Space Grotesk',sans-serif;color:var(--acc);font-weight:700;font-size:12px;white-space:nowrap;}
#landing .ps-badge{margin-top:9px;text-align:center;font-size:9.5px;color:var(--muted2);line-height:1.4;}

/* banner strip */
#landing .banner{background:var(--acc);color:#120a05;text-align:center;justify-content:center;padding:17px 20px;font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;font-size:14px;border-radius:0;border:none;}

#landing section{padding:90px 0;}
#landing h2{font-size:42px;margin-bottom:16px;}
#landing h2 .italic{font-size:40px;}
#landing .lead{font-size:19px;color:var(--muted);max-width:600px;margin-bottom:0;}

/* cards */
#landing .cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px;}
#landing .card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:30px;}
#landing .icon{width:48px;height:48px;border-radius:14px;background:rgba(255,106,43,0.12);border:1px solid rgba(255,106,43,0.25);display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
#landing .icon svg{width:24px;height:24px;stroke:var(--acc);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
#landing .card h4{font-size:19px;margin-bottom:9px;}
#landing .card p{font-size:15px;margin:0;}

/* imagery band */
#landing .imgband{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
#landing .photo-hero{position:relative;min-height:520px;display:flex;align-items:center;background-size:cover;background-position:center right;}
#landing .photo-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,0.80) 40%,rgba(0,0,0,0.30) 72%,rgba(0,0,0,0.05) 100%);}
#landing .photo-hero .wrap{position:relative;padding-top:64px;padding-bottom:64px;}
#landing .photo-hero h2{max-width:540px;margin-bottom:16px;}
#landing .photo-hero p{max-width:440px;}

/* how the 8 weeks work */
#landing .flow{display:flex;align-items:center;gap:24px;margin-top:42px;flex-wrap:wrap;}
#landing .weekcard{flex:1;min-width:230px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;}
#landing .weekcard .wt{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted2);font-weight:700;margin-bottom:12px;font-family:'Space Grotesk',sans-serif;}
#landing .drow{display:flex;justify-content:space-between;font-size:13.5px;padding:7px 0;border-bottom:1px solid var(--line);}
#landing .drow:last-child{border-bottom:none;}
#landing .drow.on{color:#fff;font-weight:600;}
#landing .drow.on .d-tag{color:var(--acc);}
#landing .drow.off{color:var(--muted2);}
#landing .times{flex-shrink:0;text-align:center;}
#landing .times .x{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:46px;color:var(--acc);line-height:1;}
#landing .times .xs{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:4px;}
#landing .rules{flex:1;min-width:240px;}
#landing .rule{display:flex;gap:13px;padding:10px 0;border-bottom:1px solid var(--line);}
#landing .rule:last-child{border-bottom:none;}
#landing .rule .rn{flex-shrink:0;width:27px;height:27px;border-radius:8px;background:rgba(255,106,43,0.15);border:1px solid rgba(255,106,43,0.3);color:var(--acc);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;}
#landing .rule .rt{font-size:14.5px;}
#landing .rule .rt b{color:#fff;}
#landing .rule .rt span{color:var(--muted);}

/* sample plan */
/* Goal toggle (segmented control): swaps the taste appetizer between Sam / Maya.
   Active button uses brand orange. Hidden entirely if fewer than two samples. */
#landing .goal-toggle{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;margin:18px 0 12px;max-width:100%;background:rgba(255,255,255,0.04);border:1px solid var(--line);border-radius:12px;}
#landing .goal-toggle[hidden],#landing .goal-toggle [data-sample][hidden]{display:none;}
#landing .goal-toggle .gt-btn{appearance:none;-webkit-appearance:none;border:none;background:transparent;color:var(--muted);font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;padding:9px 18px;border-radius:9px;cursor:pointer;transition:background .12s,color .12s;}
#landing .goal-toggle .gt-btn:hover{color:var(--text);}
#landing .goal-toggle .gt-btn.on{background:var(--acc);color:#0a0a0a;}
#landing .gt-note{font-size:13.5px;color:var(--muted);max-width:640px;margin:2px 0 10px;}
/* Three buttons are tighter than two: on narrow screens make the control full-width
   with three equal, slightly smaller buttons so all fit and stay tappable. */
@media(max-width:560px){
  #landing .goal-toggle{display:flex;width:100%;box-sizing:border-box;}
  #landing .goal-toggle .gt-btn{flex:1 1 0;min-width:0;padding:10px 6px;font-size:13px;text-align:center;}
}

#landing #taste-tags{margin:22px 0 12px;}
#landing .plan{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;}
#landing .plan .phead{display:flex;justify-content:space-between;align-items:center;padding:22px 26px;border-bottom:1px solid var(--line);}
#landing .plan .phead h4{font-size:18px;}
#landing .plan .phead h4 span{color:var(--muted2);font-weight:400;font-family:'Inter',sans-serif;font-size:14px;}
#landing .chip{background:var(--acc);color:#120a05;font-size:12px;font-weight:700;padding:6px 14px;border-radius:999px;}
#landing .prow{padding:15px 26px;border-bottom:1px solid var(--line);}
#landing .plabel{text-transform:uppercase;letter-spacing:1.5px;font-size:11px;font-weight:700;color:var(--acc);margin-bottom:5px;font-family:'Space Grotesk',sans-serif;}
#landing .prow p{font-size:14.5px;margin:0;}
#landing .exrow{display:flex;justify-content:space-between;gap:18px;padding:15px 26px;border-bottom:1px solid var(--line);}
#landing .exrow .ex-l h5{font-family:'Space Grotesk',sans-serif;font-size:15.5px;font-weight:600;margin-bottom:4px;}
#landing .exrow .ex-l p{font-size:14px;margin:0;}
#landing .exrow .ex-r{text-align:right;white-space:nowrap;}
#landing .exrow .ex-r .sets{font-family:'Space Grotesk',sans-serif;color:var(--acc);font-weight:700;font-size:15px;}
#landing .exrow .ex-r .tempo{color:var(--muted2);font-size:12.5px;margin-top:3px;}
#landing .plan .pfoot{padding:18px 26px;font-size:14px;color:var(--muted2);}

/* who */
#landing .who{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px;}
#landing .wcol{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px;}
#landing .wcol h4{font-size:16px;margin-bottom:16px;}
#landing .wcol.good h4{color:var(--acc-l);}
#landing .wcol.bad h4{color:#c98f8f;}
#landing .wcol ul{list-style:none;}
#landing .wcol li{font-size:15px;color:var(--muted);padding:7px 0 7px 26px;position:relative;}
#landing .wcol.good li:before{content:"";position:absolute;left:0;top:9px;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a2b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.8l4.7 4.9L20 6.2'/%3E%3C/svg%3E") no-repeat center/contain;}
#landing .wcol.bad li:before{content:"\2715";position:absolute;left:0;color:#b56c6c;font-weight:700;}

/* founder */
#landing .founder{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:40px;display:flex;gap:30px;align-items:center;margin-top:14px;}
#landing .founder p{font-size:16px;text-align:left;}
#landing .founder p strong{color:var(--ink);}
#landing .founder.note{display:block;border-left:3px solid var(--acc);}
#landing .founder .signoff{margin-top:20px;font-family:'Fraunces',serif;font-style:italic;color:var(--acc);font-size:18px;}

/* price */
#landing .price-wrap{text-align:center;}
#landing .anchor{max-width:540px;margin:32px auto 0;background:var(--card2);border:1px solid var(--line);border-radius:18px;padding:8px 26px;text-align:left;}
#landing .arow{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);font-size:15.5px;}
#landing .arow:last-child{border-bottom:none;}
#landing .arow .al{color:var(--muted);flex:1;min-width:0;}
#landing .arow .av{color:var(--muted);flex:none;white-space:nowrap;text-align:right;}
#landing .arow.you .al{color:var(--ink);font-weight:600;}
#landing .arow.you .av{color:var(--acc);font-weight:700;}
#landing .pricebox{margin-top:32px;}
#landing .pricebox .now{font-family:'Space Grotesk',sans-serif;font-size:64px;font-weight:700;}
#landing .pricebox .now small{font-size:20px;color:var(--acc);font-weight:600;}
#landing .pricebox .oneoff{font-size:14px;color:var(--muted2);margin-top:2px;}

/* guarantee */
#landing .gbox{max-width:620px;margin:44px auto 0;text-align:center;background:var(--card);border:1px solid rgba(255,106,43,0.3);border-radius:22px;padding:44px;}
#landing .seal{width:70px;height:70px;border-radius:50%;margin:0 auto 20px;background:rgba(255,106,43,0.14);border:1px solid rgba(255,106,43,0.45);display:flex;align-items:center;justify-content:center;}

/* faq */
#landing .faq{max-width:720px;margin:40px auto 0;}
#landing .fitem{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 28px;margin-bottom:12px;}
#landing .fitem h4{font-size:17px;margin-bottom:8px;}
#landing .fitem p{font-size:15px;margin:0;}

/* final */
#landing .final{text-align:center;position:relative;overflow:hidden;}
#landing .final:before{content:"";position:absolute;inset:0;background:radial-gradient(80% 90% at 50% 120%, rgba(255,106,43,0.20) 0%, rgba(0,0,0,0) 60%);}
#landing .final .wrap{position:relative;}
#landing .final h2{font-size:52px;max-width:720px;margin:0 auto 20px;}
#landing .final p{max-width:540px;margin:0 auto 32px;font-size:19px;}

/* footer */
#landing footer{border-top:1px solid var(--line);padding:38px 0;text-align:center;}
#landing footer .links a{color:var(--muted);text-decoration:none;margin:0 10px;font-size:14px;}
#landing footer .links a:hover{color:var(--ink);}

@media(max-width:860px){
  #landing .hero .wrap{flex-direction:column;align-items:flex-start;gap:44px;}
  #landing .hero-visual{align-self:center;}
  #landing .hero h1{font-size:44px;}
  #landing .hero .italic{font-size:33px;}
  #landing h2{font-size:32px;}
  #landing h2 .italic{font-size:30px;}
  #landing .cards,#landing .who{grid-template-columns:1fr;}
  #landing .founder{flex-direction:column;text-align:center;}
  #landing section{padding:64px 0;}
  #landing .final h2{font-size:36px;}
  #landing .pricebox .now{font-size:50px;}
  #landing .photo-hero{min-height:440px;background-position:center right 30%;}
  #landing .photo-hero:before{background:linear-gradient(180deg,rgba(0,0,0,0.45) 0%,rgba(0,0,0,0.82) 100%);}
}

/* =======================================================================
   LEGAL PAGES (privacy.html / terms.html) — static files that link this
   shared stylesheet, so they inherit the design system and never drift.
   A comfortable prose scale scoped to .page-legal; everything reuses the
   shared tokens, fonts and the .brand-logo wordmark image.
   ======================================================================= */
.page-legal .wrap{max-width:760px;padding:56px 24px 80px;}
.page-legal .brandbar{padding:0;margin-bottom:40px;}
.page-legal h1{font-size:2.1rem;margin:0 0 10px;}
.page-legal h2{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.2rem;letter-spacing:-.01em;margin:38px 0 12px;}
.page-legal p,.page-legal li{color:var(--text);font-size:1rem;line-height:1.7;}
.page-legal p{margin:0 0 14px;}
.page-legal strong{color:var(--text);font-weight:600;}
.page-legal .muted{color:var(--muted);}
.page-legal a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.page-legal a:hover{color:var(--acc-l);}
.page-legal ul{padding-left:22px;margin:0 0 14px;}
.page-legal li{margin:6px 0;}
.page-legal .callout{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px 22px;margin:24px 0;}
.page-legal .divider{height:1px;background:var(--border);border:0;margin:44px 0;}
.page-legal footer{color:var(--muted);font-size:.9rem;}
.page-legal footer a{color:var(--muted);text-decoration:underline;}
.page-legal footer a:hover{color:var(--text);}

/* =======================================================================
   TEASER (v2 design). Scoped under .page-teaser so the mockup's class names
   (.label, .badge, .summary, .subhead, .price, .anchor, .tag …) never collide
   with the landing / plan / quiz. Existing design tokens only, no new colours.
   ======================================================================= */
.page-teaser{line-height:1.55;}
.page-teaser .wrap{max-width:640px;}
.page-teaser .top{padding:34px 0 8px;}
.page-teaser section{padding:34px 0;}
.page-teaser h1{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.08;font-size:38px;margin-bottom:14px;}
.page-teaser .subhead{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:18px;color:#ded9d2;margin-bottom:16px;line-height:1.35;}
.page-teaser .subhead .acc{font-weight:700;}
.page-teaser .summary{color:var(--muted);font-size:16px;line-height:1.65;max-width:none;}
.page-teaser .label{display:flex;align-items:center;gap:12px;text-transform:uppercase;letter-spacing:2.5px;font-size:11.5px;font-weight:700;color:var(--acc);font-family:'Space Grotesk',sans-serif;margin-bottom:16px;}
.page-teaser .label:before{content:"";width:26px;height:2px;background:var(--acc);flex:none;}
.page-teaser .sec-intro{color:var(--muted);font-size:15.5px;margin-bottom:20px;max-width:560px;}

/* hero tags */
.page-teaser .tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;}
.page-teaser .tag{border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:13.5px;color:var(--muted);}
.page-teaser .tag.key{border-color:rgba(255,106,43,0.5);color:var(--acc);font-weight:600;}
.page-teaser .tag.key b{color:var(--acc);}

/* buttons: full-width pill (override the global auto-width pill) */
.page-teaser .btn{width:100%;padding:18px 30px;font-size:17px;gap:9px;}
.page-teaser .sticky-cta .btn{width:auto;font-size:1rem;}
.page-teaser .lockicon{width:15px;height:15px;display:inline-block;vertical-align:-2px;flex:none;}

/* day cards */
.page-teaser .daycard{background:var(--card);border:1px solid var(--line);border-radius:16px;margin-bottom:12px;overflow:hidden;}
.page-teaser .daycard.rest{background:transparent;}
.page-teaser .daycard.train{border-color:rgba(255,106,43,0.4);}
.page-teaser .dayhead{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 22px;}
.page-teaser .dayhead .dn{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;}
.page-teaser .daycard.rest .dayhead .dn{color:var(--muted);font-weight:500;}
.page-teaser .dayhead .dn .sub{color:var(--muted2);font-weight:400;font-size:13.5px;font-family:'Inter',sans-serif;}
.page-teaser .restpill{background:rgba(255,255,255,0.05);color:var(--muted2);font-size:12px;padding:6px 14px;border-radius:999px;white-space:nowrap;flex:none;}
.page-teaser .badge{background:var(--acc);color:#fff;font-size:12px;font-weight:700;padding:6px 14px;border-radius:999px;white-space:nowrap;flex:none;letter-spacing:0;}
.page-teaser .exrow{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 22px;border-top:1px solid var(--line);}
.page-teaser .exname{font-size:14.5px;color:#ececec;font-weight:500;}
.page-teaser .exrx{display:flex;align-items:center;gap:8px;white-space:nowrap;flex-shrink:0;}
.page-teaser .exrx .rx{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;color:var(--acc);}
.page-teaser .exrx .blur{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;color:var(--muted);filter:blur(5px);user-select:none;}
.page-teaser .ptag{font-size:10px;text-transform:uppercase;letter-spacing:1px;font-weight:700;color:var(--acc);border:1px solid rgba(255,106,43,0.4);border-radius:5px;padding:2px 6px;}
.page-teaser .exrx .lockicon{color:var(--muted2);}
.page-teaser .unlockrow{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);background:rgba(255,106,43,0.04);text-align:center;line-height:1.4;}
/* Phase rows inside a training day: warm-up / working sets (with movement count
   + blurred rep scheme) / cool-down. Exercise names are never shown. */
.page-teaser .phaserow{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 22px;border-top:1px solid var(--line);}
.page-teaser .phaserow .pl{display:flex;align-items:center;gap:11px;font-size:14.5px;color:#cbc7c0;min-width:0;flex-wrap:wrap;}
.page-teaser .phaserow .pl .lockicon{color:var(--muted2);flex-shrink:0;}
.page-teaser .phaserow.work .pl{color:#f0f0f0;font-weight:600;}
.page-teaser .phaserow .cnt{font-size:11px;text-transform:uppercase;letter-spacing:1px;font-weight:700;color:var(--acc);border:1px solid rgba(255,106,43,0.35);border-radius:5px;padding:2px 7px;white-space:nowrap;}
.page-teaser .phaserow .blur{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13.5px;color:var(--muted);filter:blur(5px);user-select:none;flex-shrink:0;}

/* nutrition */
.page-teaser .nutcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px;text-align:center;}
.page-teaser .nutcard .big{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:44px;color:var(--acc);}
.page-teaser .nutcard .big .blur{filter:blur(9px);user-select:none;font-size:inherit;line-height:inherit;font-weight:inherit;}
.page-teaser .nutcard .nlbl{text-transform:uppercase;letter-spacing:2px;font-size:11px;color:var(--muted2);font-weight:700;margin-top:6px;}
.page-teaser .nutcard .nlock{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13.5px;color:var(--muted);margin-top:16px;}

/* unlock list */
.page-teaser .ulist{border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.page-teaser .uitem{display:flex;gap:13px;padding:15px 20px;border-bottom:1px solid var(--line);font-size:14.5px;color:#d8d8d8;line-height:1.5;}
.page-teaser .uitem:last-child{border-bottom:none;}
.page-teaser .uitem .lockicon{color:var(--acc);flex-shrink:0;margin-top:2px;}
.page-teaser .uitem b{color:#fff;font-weight:600;}
.page-teaser .cta-inline{margin:24px 0 0;}
.page-teaser .cta-sub{text-align:center;font-size:12.5px;color:var(--muted2);margin-top:11px;}

/* price card */
.page-teaser .pricecard{background:linear-gradient(180deg,#141414,#0b0b0b);border:1px solid rgba(255,106,43,0.35);border-radius:20px;padding:38px 30px;text-align:center;margin-top:26px;}
.page-teaser .pricecard h2{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.02em;font-size:26px;margin-bottom:14px;}
.page-teaser .pricecard .desc{color:var(--muted);font-size:15px;max-width:430px;margin:0 auto 20px;}
.page-teaser .pricecard .anchor{color:var(--muted2);font-size:14px;margin-bottom:14px;background:none;border:none;padding:0;max-width:none;border-radius:0;}
.page-teaser .pricecard .price{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:60px;line-height:1;}
.page-teaser .pricecard .price small{font-family:'Inter',sans-serif;font-size:16px;color:var(--acc);font-weight:600;letter-spacing:1px;}
.page-teaser .pricecard .perweek{color:var(--acc);font-size:14px;font-weight:600;margin-top:10px;}
.page-teaser .pricecard .noSub{color:var(--muted);font-size:14.5px;margin:8px 0 4px;}
.page-teaser .pricecard .refund{color:var(--muted2);font-size:13.5px;margin-bottom:22px;}
.page-teaser .pricecard .reassure{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:var(--muted2);margin-top:16px;}

/* faq */
.page-teaser .fitem{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin-bottom:11px;}
.page-teaser .fitem h4{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.02em;font-size:16.5px;margin-bottom:8px;}
.page-teaser .fitem p{color:var(--muted);font-size:14.5px;margin:0;line-height:1.55;}

/* footer + skeleton */
.page-teaser footer{padding:40px 0 60px;text-align:center;color:var(--muted2);font-size:12.5px;}
.page-teaser .daycard.skel-card{padding:18px 22px;}

@media(max-width:520px){
  .page-teaser h1{font-size:30px;}
  .page-teaser .pricecard .price{font-size:48px;}
  .page-teaser .nutcard .big{font-size:36px;}
}

/* =====================================================================
   PLAN PAGE (lib/render.js) — the interactive "full plan" design.
   Everything is scoped under .page-plan so it can't touch the landing,
   teaser or quiz, and overrides any shared class names by specificity.
   ===================================================================== */
.page-plan{line-height:1.55;}
.page-plan h1,.page-plan h2,.page-plan h3,.page-plan h4{font-family:'Space Grotesk',sans-serif;letter-spacing:-.02em;font-weight:700;}
.page-plan .wrap{max-width:640px;margin:0 auto;padding:0 20px;}
.page-plan summary{list-style:none;cursor:pointer;}
.page-plan summary::-webkit-details-marker{display:none;}
.page-plan .chev{transition:transform .2s;color:var(--muted2);flex-shrink:0;}
.page-plan details[open]>summary .chev{transform:rotate(180deg);}

/* sample-only marketing banner (top of the /sample page; never on real plans) */
/* Opaque backing (orange tint layered over the page bg) so scrolled content never
   shows through the banner while it's pinned. Same colour as before at rest. */
.page-plan .sample-banner{background:linear-gradient(rgba(255,106,43,0.08),rgba(255,106,43,0.08)),var(--bg);border-bottom:1px solid rgba(255,106,43,0.3);}
.page-plan .sample-banner .wrap{max-width:640px;margin:0 auto;padding:16px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;}
.page-plan .sample-banner p{flex:1;min-width:240px;margin:0;font-size:13px;line-height:1.55;color:var(--muted);}
.page-plan .sample-banner .sample-cta{flex-shrink:0;background:var(--acc);color:#120a05;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;padding:10px 18px;border-radius:99px;text-decoration:none;white-space:nowrap;}
.page-plan .sample-banner .sample-cta:hover{background:var(--acc-l);}
/* Condensed state (plan-header.js toggles .scrolled past ~34px): shrink the banner
   padding and swap the full paragraph for the one-line .mini so "Build mine" stays
   visible the whole scroll. Subtle padding transition; the copy swap is instant. */
.page-plan .sample-banner .wrap{transition:padding .18s ease;}
.page-plan .sample-banner .mini{display:none;}
.page-plan .plan-header.scrolled .sample-banner .wrap{padding-top:9px;padding-bottom:9px;}
.page-plan .plan-header.scrolled .sample-banner p{display:none;}
.page-plan .plan-header.scrolled .sample-banner .mini{display:block;flex:1;min-width:0;margin:0;font-size:13px;line-height:1.4;color:var(--muted);}
.page-plan .plan-header.scrolled .sample-banner .sample-cta{padding-top:8px;padding-bottom:8px;}

/* sticky nav */
/* Banner (sample only) + nav pin together in ONE sticky wrapper — no fragile
   sticky-stacking math. The wrapper stays transparent so the nav's backdrop-blur
   still samples the scrolling content (real-plan header looks exactly as before);
   the translucent banner gets its own opaque backing (below) so nothing bleeds
   through it on the sample. On real plans the wrapper holds only the nav. */
.page-plan .plan-header{position:sticky;top:0;z-index:20;}
.page-plan .nav{position:static;background:rgba(0,0,0,0.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.page-plan .nav .wrap{display:flex;align-items:center;gap:14px;padding:13px 20px;}
/* Wraps so every tab (including Reference) stays visible; when they don't all fit
   on one line the last tab(s) drop to a second row instead of hiding behind a
   horizontal scroll + fade. flex:1+min-width:0 lets it take the row beside the brand. */
.page-plan .navlinks{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:7px;row-gap:8px;}
.page-plan .navlinks a{flex-shrink:0;font-size:12.5px;color:var(--muted);text-decoration:none;padding:6px 12px;border-radius:99px;border:1px solid var(--line);white-space:nowrap;}
.page-plan .navlinks a.on,.page-plan .navlinks a:hover{color:var(--acc);border-color:rgba(255,106,43,0.5);}

/* Shared anchor offset so nav-tab and day-card jumps land the target's title just
   below the pinned header (not hidden under it). plan-header.js measures the live
   header height (banner + wrapped nav, condensed or not) and sets --plan-anchor
   inline on the body, so this covers every state and both surfaces. The 108px here
   is only a no-JS fallback. */
.page-plan{--plan-anchor:108px;}
.page-plan section{padding:30px 0;scroll-margin-top:var(--plan-anchor);}
.page-plan .label{display:flex;align-items:center;gap:12px;text-transform:uppercase;letter-spacing:2.5px;font-size:11px;font-weight:700;color:var(--acc);font-family:'Space Grotesk',sans-serif;margin-bottom:14px;}
.page-plan .label:before{content:"";width:24px;height:2px;background:var(--acc);flex:none;}
.page-plan h2.sec{font-size:26px;font-weight:700;margin:0 0 10px;scroll-margin-top:var(--plan-anchor);}
.page-plan .lead{color:var(--muted);font-size:15.5px;line-height:1.6;}

/* hero */
.page-plan .hero{padding-top:26px;}
.page-plan .hero h1{font-size:32px;font-weight:700;margin:6px 0 12px;}
.page-plan .hero .summary{color:var(--muted);font-size:15px;line-height:1.65;}

/* "Built for you" input summary — labelled chips of what the plan was built around.
   Wraps cleanly on mobile; brand-orange section heading, muted labels, bold values. */
.page-plan .builtfor{margin:18px 0 6px;}
.page-plan .builtfor .bfy-h{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--acc);margin-bottom:11px;}

/* Answer chips — shared by the plan-page "Built for you" summary and the landing
   taste preview (same lib/chips.js builder). Grey label + white value; the
   constraint tier (injury, diet) is a calm amber — the LABEL carries the meaning,
   the colour only reinforces (still reads in greyscale). Named .achip to avoid the
   existing .chip badge. */
.achips{display:flex;flex-wrap:wrap;gap:8px;}
.achip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:9px 17px;font-size:14.5px;line-height:1;white-space:nowrap;background:transparent;color:var(--text);}
.achip__lbl{color:var(--muted);font-weight:400;}
.achip__val{color:var(--text);font-weight:500;}
.achip--limit{border-color:#3a2f22;background:#171208;}
.achip--limit .achip__lbl{color:#a8814f;}
.achip--limit .achip__val{color:#e0a458;}

/* stat tiles */
.page-plan .tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;}
.page-plan .tile{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:16px;}
.page-plan .tile .tl{font-size:10.5px;text-transform:uppercase;letter-spacing:1.5px;color:var(--acc);font-weight:700;}
.page-plan .tile .tv{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;margin:5px 0 4px;}
.page-plan .tile .td{font-size:12.5px;color:var(--muted2);line-height:1.5;}
.page-plan .callout{display:flex;gap:12px;background:rgba(255,106,43,0.06);border:1px solid rgba(255,106,43,0.25);border-radius:13px;padding:15px 17px;margin-top:14px;}
.page-plan .callout .cico{color:var(--acc);flex-shrink:0;}
.page-plan .callout h4{font-size:14.5px;margin-bottom:4px;}
.page-plan .callout p{font-size:13.5px;color:var(--muted);line-height:1.55;}

/* accordion (reference) */
.page-plan .acc-item{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:11px;overflow:hidden;}
.page-plan .acc-item>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 18px;}
.page-plan .acc-item>summary .at{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;}
.page-plan .acc-item>summary .as{font-size:12px;color:var(--muted2);}
.page-plan .acc-body{padding:15px 18px 18px;border-top:1px solid var(--line);}
.page-plan .acc-body>.lead{margin-bottom:14px;}

/* generic content cards (2-col) */
.page-plan .ccards{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.page-plan .ccard{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:16px;}
.page-plan .ccard h4{font-size:14.5px;margin-bottom:5px;}
.page-plan .ccard .cd{font-size:11.5px;color:var(--acc);font-weight:600;margin-bottom:7px;}
.page-plan .ccard p{font-size:12.5px;color:var(--muted);line-height:1.55;}

/* numbered steps */
.page-plan .steps{margin-top:4px;}
.page-plan .step{display:flex;gap:12px;background:var(--card2);border:1px solid var(--line);border-radius:11px;padding:13px 15px;margin-bottom:8px;}
.page-plan .step .sn{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--acc);color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;}
.page-plan .step h4{font-size:14px;margin-bottom:2px;}
.page-plan .step p{font-size:12.5px;color:var(--muted);line-height:1.55;}

/* day pills */
/* Week strip: a grid so the whole week is always visible with NO horizontal
   scroll — 7 across on desktop, 4 across (2 rows) on mobile. minmax(0,1fr) lets
   the day cards shrink to fit the column instead of overflowing. */
.page-plan .daypills{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:16px 0;}
.page-plan .dp{min-width:0;text-align:center;padding:11px 6px;border-radius:11px;border:1px solid var(--line);text-decoration:none;}
.page-plan .dp .dpd{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted2);font-weight:700;font-family:'Space Grotesk',sans-serif;}
.page-plan .dp .dpf{font-size:12.5px;margin-top:3px;color:var(--muted);}
.page-plan .dp.train{border-color:rgba(255,106,43,0.45);}
.page-plan .dp.train .dpf{color:var(--acc);font-weight:600;}
/* Clickable day cards: rest cards stay muted (the on/off contrast matters) but get
   a pointer + subtle hover so the link is discoverable; training cards intensify. */
.page-plan a.dp{cursor:pointer;transition:border-color .15s ease,background .15s ease;}
.page-plan a.dp:hover{border-color:var(--muted2);background:rgba(255,255,255,0.035);}
.page-plan a.dp.train:hover{border-color:var(--acc);background:rgba(255,106,43,0.06);}

.page-plan .readnote{background:var(--card2);border:1px solid var(--line);border-radius:11px;padding:13px 16px;font-size:12.5px;color:var(--muted);margin-bottom:16px;}
.page-plan .readnote b{color:#ddd;}
/* Quiet "quality over quantity" line — only when we built fewer sessions than picked. */
.page-plan .qualnote{font-size:13px;line-height:1.55;color:var(--muted2);border-left:2px solid var(--acc);padding-left:12px;margin:14px 0 4px;}

/* session */
.page-plan .session{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:14px;scroll-margin-top:var(--plan-anchor);}
.page-plan .session.rest{padding:15px 18px;display:flex;align-items:center;justify-content:space-between;}
.page-plan .session.rest .rn{font-family:'Space Grotesk',sans-serif;font-weight:500;color:var(--muted);}
.page-plan .restpill{background:rgba(255,255,255,0.05);color:var(--muted2);font-size:11.5px;padding:5px 13px;border-radius:99px;}
.page-plan .shead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.page-plan .shead .sd{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--acc);font-weight:700;font-family:'Space Grotesk',sans-serif;}
.page-plan .shead h3{font-size:20px;margin-top:3px;}
.page-plan .shead .ssub{font-size:12.5px;color:var(--muted2);margin-top:2px;}
.page-plan .badge{background:var(--acc);color:#fff;font-size:11px;font-weight:700;padding:5px 12px;border-radius:99px;white-space:nowrap;flex-shrink:0;}

.page-plan .phase{background:var(--card2);border:1px solid var(--line);border-radius:11px;margin:8px 0;overflow:hidden;}
.page-plan .phase>summary{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;}
.page-plan .phase .pt{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:8px;}
.page-plan .phase .pt .ic{color:var(--acc);display:flex;}
.page-plan .phase .pbody{padding:11px 15px 14px;font-size:13px;color:var(--muted);line-height:1.6;border-top:1px solid var(--line);}
.page-plan .phase .pbody b{color:#ddd;}

.page-plan .worklabel{font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--muted2);font-weight:700;font-family:'Space Grotesk',sans-serif;margin:18px 0 9px;}
.page-plan .ex{background:var(--card2);border:1px solid var(--line);border-radius:12px;margin-bottom:9px;overflow:hidden;}
.page-plan .ex[open]{border-color:rgba(255,106,43,0.4);}
.page-plan .ex>summary{display:flex;align-items:center;gap:11px;padding:13px 14px;}
.page-plan .exmid{flex:1;min-width:0;}
.page-plan .exname{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14.5px;display:flex;align-items:center;gap:6px;}
.page-plan .excue{font-size:12px;color:var(--muted);margin-top:2px;}
.page-plan .exrx{text-align:right;flex-shrink:0;}
.page-plan .exrx .sets{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;color:var(--acc);white-space:nowrap;}
.page-plan .exrx .tempo{display:block;font-size:10.5px;color:var(--muted2);margin-top:1px;}
.page-plan .exbody{border-top:1px solid var(--line);padding:13px 14px 15px;}
.page-plan .exbody .full{font-size:13px;color:var(--muted);line-height:1.6;}
.page-plan .exbody .why{font-size:12.5px;color:#b7b2aa;margin-top:9px;background:rgba(255,106,43,0.06);border-left:2px solid var(--acc);padding:9px 12px;border-radius:0 7px 7px 0;line-height:1.55;}
.page-plan .exbody .why b{color:var(--acc);font-weight:600;}

/* Curated exercise demo media (from public/exercise-media.css, inlined here so it
   ships with the plan's styles). Matched exercises show inline start/end photos;
   unmatched keep the .exdemo-link fallback. The block sits directly in .exbody,
   above the week-log grid. */
.exdemo{display:flex;align-items:flex-end;gap:10px;margin-top:12px;flex-wrap:wrap;}
.page-plan .exbody>.exdemo-link{display:inline-block;margin-top:12px;}
.exdemo-shot{margin:0;width:112px;}
.exdemo-shot img{width:112px;height:auto;border-radius:8px;background:#fff;display:block;border:1px solid var(--line);}
.exdemo-shot figcaption{font-size:11px;color:var(--muted2);text-align:center;margin-top:3px;letter-spacing:.02em;text-transform:uppercase;}
.exdemo-more{align-self:center;font-size:12px;color:var(--acc);text-decoration:none;font-weight:600;}
.exdemo-more:hover{text-decoration:underline;}
.exdemo-link{font-size:12px;color:var(--acc);text-decoration:none;font-weight:600;}
.exdemo-link:hover{text-decoration:underline;}

/* Click-to-enlarge demo photos (lightbox in public/lightbox.js). The script wraps
   each photo in a real <button> (native keyboard + reliable focus return) and adds
   .lb-on to the body; the tap affordance is a CSS-only magnifier badge, so there is
   no markup change to renderDemo. The badge only shows once the script has wired up. */
.exdemo-shot{position:relative;}
.exdemo-btn{display:block;width:112px;padding:0;margin:0;border:0;background:none;line-height:0;border-radius:8px;cursor:zoom-in;}
.exdemo-btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}
.page-plan.lb-on .exdemo-shot::after{content:"";position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:6px;pointer-events:none;background:rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2.4'%20stroke-linecap='round'%3E%3Ccircle%20cx='10.5'%20cy='10.5'%20r='6.5'/%3E%3Cpath%20d='M20%2020l-4.5-4.5'/%3E%3C/svg%3E") center/14px 14px no-repeat;}
@media (hover:hover){
  .exdemo-btn:hover img{filter:brightness(1.08);}
  .exdemo-shot:hover::after{background-color:rgba(0,0,0,.8);}
}

/* Lightbox overlay. Backdrop click / the x / Esc close it (handled in the script).
   Side-by-side on wide viewports, stacked on narrow; content scrolls if both frames
   don't fit at once. Capped near native (850x567) so it never upscales to blur. */
.exlb{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;overflow:auto;padding:24px;-webkit-overflow-scrolling:touch;}
.exlb-content{display:flex;flex-direction:row;flex-wrap:wrap;gap:22px;align-items:center;justify-content:center;margin:auto;}
.exlb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:9px;}
.exlb-img{display:block;width:auto;height:auto;max-width:min(46vw,850px);max-height:min(85vh,567px);border-radius:10px;background:#fff;}
.exlb-cap{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:1.5px;font-weight:600;font-family:'Space Grotesk',sans-serif;}
.exlb-close{position:fixed;top:14px;right:16px;width:48px;height:48px;border-radius:50%;border:none;background:rgba(255,255,255,.16);color:#fff;font-size:30px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1001;padding:0;}
.exlb-close:hover{background:rgba(255,255,255,.28);}
.exlb-close:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}
@media (max-width:760px){
  .exlb-content{flex-direction:column;gap:16px;}
  .exlb-img{max-width:min(92vw,850px);max-height:min(78vh,567px);}
}

/* iOS-safe body scroll lock: position:fixed + saved offset (top set from JS). The
   naive overflow:hidden on body does not hold on iOS Safari. */
.exlb-lock{position:fixed;left:0;right:0;width:100%;overflow:hidden;}

/* Per-exercise 8-week top-set log (from tracker.css, inlined here). 4-up on
   desktop, 2-up on narrow screens; dark theme + brand orange focus. */
.page-plan .wklog{margin-top:12px;}
.page-plan .wklog-h{font-size:12px;color:#8a8a8a;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;}
.page-plan .wklog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
@media (max-width:520px){.page-plan .wklog-grid{grid-template-columns:repeat(2,1fr);}}
.page-plan .wklog .wk{display:flex;flex-direction:column;gap:3px;}
.page-plan .wklog .wkn{font-size:11px;color:#7a7a7a;letter-spacing:.03em;}
.page-plan .wklog .wk input{width:100%;box-sizing:border-box;padding:7px 8px;border:1px solid #2a2a2a;border-radius:8px;background:#141414;color:#eaeaea;font:inherit;font-size:13px;}
.page-plan .wklog .wk input::placeholder{color:#4a4a4a;}
.page-plan .wklog .wk input:focus{outline:none;border-color:#ff6a2b;}
.page-plan .wklog .wk input:not(:placeholder-shown){border-color:#3a3a3a;background:#181818;}
.page-plan .prognote{background:rgba(255,106,43,0.06);border:1px solid rgba(255,106,43,0.22);border-radius:11px;padding:12px 15px;margin-top:12px;font-size:12.5px;color:#cfcac2;line-height:1.55;}
.page-plan .prognote .h{font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--acc);font-size:11.5px;text-transform:uppercase;letter-spacing:1px;margin-bottom:5px;}

/* nutrition */
.page-plan .macros{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0 16px;}
.page-plan .macro{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 8px;text-align:center;}
.page-plan .macro .mv{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;}
.page-plan .macro:first-child .mv{color:var(--acc);}
.page-plan .macro .ml{font-size:9.5px;text-transform:uppercase;letter-spacing:1px;color:var(--muted2);margin-top:3px;}
.page-plan .mealwrap{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px 18px;}
.page-plan .meal{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);}
.page-plan .meal:last-child{border-bottom:none;}
.page-plan .meal .mt{flex-shrink:0;width:96px;font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--acc);font-weight:700;font-family:'Space Grotesk',sans-serif;padding-top:2px;}
.page-plan .meal .mc{font-size:13.5px;color:#ddd;line-height:1.55;}
.page-plan .meal .mc .mp{color:var(--muted2);font-size:12px;}
/* Meal options are a clean stacked list separated by dashed rules. NB: the class
   is .mopt, not .opt — .opt is the quiz's option-button class (global display:flex)
   and would otherwise collapse each option into a squashed desc|meta flex row. */
.page-plan .meal .mc .mopt{padding:3px 0;}
.page-plan .meal .mc .mopt + .mopt{border-top:1px dashed var(--line);margin-top:5px;padding-top:8px;}
/* kcal/protein meta on its own full-width line under the desc, so it always has
   room (never crushed into a corner). render.js uses non-breaking spaces inside
   each token, so if it ever wraps it breaks only at the middle "·", never mid-number. */
.page-plan .meal .mc .mopt .mp{display:block;margin-top:3px;white-space:normal;}
/* Mobile: stop the fixed 96px label column wasting width and squashing meals.
   Stack the slot — the label becomes a full-width uppercase header above its
   option cards, and the cards take the full content width. */
@media(max-width:640px){
  .page-plan .meal{flex-direction:column;gap:4px;}
  .page-plan .meal .mt{width:auto;padding-top:0;margin-bottom:3px;}
  /* Stat tiles one-per-row on mobile (2-col squashes each into a tall narrow strip). */
  .page-plan .tiles{grid-template-columns:1fr;}
  /* Week strip: 4 across -> Mon-Thu on row 1, Fri-Sun on row 2. Wider cards keep
     the focus labels ("Back & Arms") readable on two lines, no scrolling. */
  .page-plan .daypills{grid-template-columns:repeat(4,1fr);}
}
.page-plan .mealnote{font-size:12px;color:var(--muted2);margin-top:10px;}

/* supplements grid */
.page-plan .supps{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.page-plan .supp{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:15px;}
.page-plan .supp h4{font-size:14px;margin-bottom:4px;}
.page-plan .supp .sd{font-size:11.5px;color:var(--acc);font-weight:600;margin-bottom:7px;}
.page-plan .supp p{font-size:12px;color:var(--muted);line-height:1.5;}

.page-plan footer{padding:30px 0 60px;}
.page-plan .disc{font-size:12px;color:var(--muted2);line-height:1.55;border-top:1px solid var(--line);padding-top:20px;}
.page-plan .refhead{margin-top:8px;}

@media(max-width:560px){
  .page-plan .ccards{grid-template-columns:1fr;}
  .page-plan .supps{grid-template-columns:1fr;}
}