/* ============================================================================
   guided-base.css — INHERITED page styling.

   MECHANICALLY DERIVED. Do not hand-edit: regenerate with
     python3 3_operations/jobs/rebuild-guided-base.py

   The proof body on this page was lifted from /plan/premium, and so was its
   styling — which lived in two inline <style> blocks in pdp/index.html, not in
   pdp/styles.css. Without this file the hero, gallery, sections, accordions and
   carousels render as unstyled browser defaults. Found in browser verification,
   not by reading the markup: the page LOOKED complete in source and was naked
   on screen.

   Every rule is scoped under #tb-guided using the same transformer the embed
   generator uses, because ThreadBeast's site-wide Webflow CSS sets
   h1-h6 { color:#131d28; text-transform:capitalize } and unscoped element rules
   lose to it.

   NEW components (questions, plan cards, rung strip, sticky bar) are NOT here —
   they live in guided-styles.css, which loads after this and therefore wins.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600&family=JetBrains+Mono:wght@400;500&display=swap');


/* ============================================================================
   DESIGN TOKENS — ThreadBeast dark grade (near-black surfaces, clay-rust accent)
   ========================================================================== */
#tb-guided{
  --bg:#0c0c0d;
  --surface:#151517;
  --surface-2:#1c1c1f;
  --surface-3:#232327;
  --line:#2b2b30;
  --line-2:#3a3a40;
  --ink:#f5f1e9;
  --ink-2:#cfc9bd;
  --muted:#938d81;
  --accent:#d8542a;       /* rust-orange — primary CTA */
  --accent-2:#d97a54;     /* clay — secondary warm */
  --accent-ink:#f0a878;   /* light accent for text on dark */
  --good:#37c97a;
  --maxw:1200px;
  --radius:14px;
  --radius-sm:10px;
  --tap:48px;
  --bar-h:54px;
  --hdr-h:52px;
  --shadow:0 10px 40px rgba(0,0,0,.45);
  --ease:cubic-bezier(.22,.61,.36,1);
}
#tb-guided *, #tb-guided *::before, #tb-guided *::after{box-sizing:border-box}
#tb-guided{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
#tb-guided{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  overflow-x:clip;padding-top:var(--bar-h);
}
#tb-guided img{display:block;max-width:100%}
#tb-guided a{color:inherit;text-decoration:none}
#tb-guided button{font-family:inherit;cursor:pointer}
#tb-guided h1, #tb-guided h2, #tb-guided h3, #tb-guided h4{margin:0;line-height:1.07;font-weight:800;letter-spacing:-.02em}
#tb-guided h1{font-size:clamp(30px,5.4vw,52px);font-weight:900}
#tb-guided h2{font-size:clamp(26px,4.4vw,42px);font-weight:900}
#tb-guided h3{font-size:clamp(20px,2.6vw,26px)}
#tb-guided p{margin:0 0 1em}
#tb-guided .serif{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:0}
#tb-guided :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
#tb-guided .skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:10px 16px;z-index:2000}
#tb-guided .skip-link:focus{left:0}

#tb-guided .wrap{min-width:0;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
#tb-guided .section{padding:clamp(54px,8vw,104px) 0}
#tb-guided .section--dark{background:#070708}
#tb-guided .section--surface{background:var(--surface)}
#tb-guided .overline{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-ink)}
#tb-guided .center{text-align:center}
#tb-guided .muted{color:var(--muted)}
#tb-guided .sec-head{max-width:780px;margin:0 auto clamp(34px,5vw,56px)}
#tb-guided .sec-head .overline{margin-bottom:14px}
#tb-guided .sec-head h2{margin-bottom:14px}
#tb-guided .sec-head p{color:var(--ink-2);font-size:clamp(16px,2vw,19px)}

#tb-guided .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--accent);color:#fff;border:none;border-radius:999px;
  padding:17px 30px;min-height:var(--tap);font-size:15px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;line-height:1;
  transition:transform .08s var(--ease),background .18s var(--ease),box-shadow .18s;
  box-shadow:0 8px 24px rgba(216,84,42,.32);
}
#tb-guided .btn:hover{background:#ee6536;box-shadow:0 10px 30px rgba(216,84,42,.42)}
#tb-guided .btn:active{transform:translateY(1px) scale(.99)}
#tb-guided .btn--full{width:100%}
#tb-guided .btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2);box-shadow:none}
#tb-guided .btn--ghost:hover{background:var(--surface-2);border-color:var(--accent)}
#tb-guided .btn--lg{padding:20px 36px;font-size:16px}

#tb-guided .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
#tb-guided .reveal.in{opacity:1;transform:none}

/* 0. ANNOUNCE */
#tb-guided .announce{position:fixed;top:0;left:0;right:0;height:var(--bar-h);z-index:1000;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center}
#tb-guided .announce button{background:none;border:none;color:#fff;font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:10px 16px;width:100%;height:100%}
#tb-guided .announce b{text-decoration:underline;text-underline-offset:3px}

/* 1. HERO */
#tb-guided .hero{position:relative;min-height:86vh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden;background:#0a0a0b url('https://via.placeholder.com/1920x1080/111111/2a2a2a?text=ThreadBeast') center/cover no-repeat}
@media (min-width:900px){#tb-guided .hero{background-attachment:fixed}}
#tb-guided .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,9,.5),rgba(8,8,9,.84))}
#tb-guided .hero-inner{position:relative;z-index:2;max-width:780px;padding:80px 22px}
#tb-guided .hero .overline{color:var(--accent-ink);margin-bottom:18px}
#tb-guided .hero h1{font-size:clamp(34px,6.6vw,64px);margin-bottom:18px;text-wrap:balance}
#tb-guided .hero h1 em{font-style:italic;font-family:'Instrument Serif',Georgia,serif;font-weight:400;color:var(--accent-ink)}
#tb-guided .hero-sub{font-size:clamp(16px,2.4vw,20px);color:var(--ink-2);max-width:34ch;margin:0 auto 28px}
#tb-guided .hero-micro{font-size:14px;color:var(--ink-2);margin-bottom:16px;font-weight:600}
#tb-guided .hero-stars{color:var(--accent);letter-spacing:3px;font-size:15px;margin-bottom:14px}

/* 2 + 3 PRODUCT */
#tb-guided .product{padding:20px 0}
#tb-guided .product-grid{display:grid;grid-template-columns:1fr;gap:34px}
@media (min-width:980px){#tb-guided .product-grid{grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}}
#tb-guided .gallery-main{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--surface);border:1px solid var(--line)}
#tb-guided .gallery-main img{width:100%;aspect-ratio:1/1;object-fit:cover}
#tb-guided .gallery-label{position:absolute;left:14px;top:14px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:6px 11px;border-radius:6px}
#tb-guided .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
@media (min-width:520px){#tb-guided .thumbs{grid-template-columns:repeat(8,1fr)}}
#tb-guided .thumb{border:2px solid transparent;border-radius:10px;overflow:hidden;background:var(--surface);padding:0;aspect-ratio:1/1}
#tb-guided .thumb img{width:100%;height:100%;object-fit:cover}
#tb-guided .thumb.active{border-color:var(--accent)}
#tb-guided .nutrition-link{display:inline-flex;align-items:center;gap:7px;margin-top:14px;background:none;border:none;color:var(--accent-ink);font-weight:700;font-size:14px;text-decoration:underline;text-underline-offset:3px;padding:6px 0}
#tb-guided .trust-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}
@media (min-width:560px){#tb-guided .trust-strip{grid-template-columns:repeat(4,1fr)}}
#tb-guided .trust{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 10px}
#tb-guided .trust svg{width:26px;height:26px;color:var(--accent)}
#tb-guided .trust span{font-size:11.5px;font-weight:700;color:var(--ink-2);line-height:1.25}
#tb-guided .teaser{margin-top:18px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
#tb-guided .teaser-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;background:none;border:none;color:var(--ink);padding:18px 20px;font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-align:left}
#tb-guided .teaser-head .chev{transition:transform .3s var(--ease);color:var(--accent)}
#tb-guided .teaser.open .teaser-head .chev{transform:rotate(180deg)}
#tb-guided .teaser-body{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
#tb-guided .teaser-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:6px 16px 20px}
@media (min-width:560px){#tb-guided .teaser-grid{grid-template-columns:repeat(4,1fr)}}
#tb-guided .ing-card{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:12px;text-align:center}
#tb-guided .ing-card img{border-radius:8px;margin-bottom:8px;width:100%;aspect-ratio:1/1;object-fit:cover}
#tb-guided .ing-card b{display:block;font-size:13px;margin-bottom:3px}
#tb-guided .ing-card small{color:var(--muted);font-size:11px;line-height:1.3}

/* What's in a Premium Box — image-card grid (MarsMen layout, condensed) */
#tb-guided #sec-box{padding:clamp(34px,5vw,60px) 0}
#tb-guided #sec-box .sec-head h2{max-width:18ch;margin-left:auto;margin-right:auto;text-wrap:balance}
#tb-guided .box-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:760px;margin:0 auto}
#tb-guided .box-card{position:relative;border-radius:3px;overflow:hidden;min-height:158px;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;background-size:cover;background-position:center;color:#fff;border:1px solid var(--line)}
#tb-guided .box-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,9,7,.30) 0%,rgba(12,9,7,.55) 48%,rgba(12,9,7,.88) 100%);z-index:0}
#tb-guided .box-card>*{position:relative;z-index:1}
#tb-guided .box-pill{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:#f2ede3;color:#131e29;border-radius:999px;padding:3px 10px;font-size:10.5px;font-weight:800;letter-spacing:.01em;white-space:nowrap}
#tb-guided .box-card__body{margin-top:auto}
#tb-guided .box-card h3{font-size:18px;font-weight:900;letter-spacing:-.01em;margin:0 0 5px;color:#fff}
#tb-guided .box-card p{font-size:13px;line-height:1.4;margin:0;color:rgba(255,255,255,.92)}
@media (max-width:479px){#tb-guided .box-card{min-height:138px;padding:13px}#tb-guided .box-card h3{font-size:16px}}

#tb-guided .buybox{background:none;border:none;border-radius:0;padding:0}
@media (min-width:980px){#tb-guided .gallery-col{position:sticky;top:calc(var(--hdr-h) + 16px);align-self:start}}
#tb-guided .buybox .overline{margin-bottom:10px}
#tb-guided .buybox h1{font-size:clamp(26px,3.4vw,34px);margin-bottom:12px}
#tb-guided .buybox .subhead{color:var(--ink-2);font-size:15.5px;margin-bottom:20px}
#tb-guided .proof-list{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:11px}
#tb-guided .proof-list li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);font-weight:500}
#tb-guided .proof-list svg{flex:0 0 auto;width:20px;height:20px;color:var(--good);margin-top:1px}
#tb-guided .price-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
#tb-guided .price-row .was{color:var(--muted);text-decoration:line-through;font-size:19px}
#tb-guided .price-row .now{font-size:38px;font-weight:900;letter-spacing:-.02em}
#tb-guided .price-row .per{color:var(--muted);font-size:14px}
#tb-guided .save-badge{display:inline-block;background:rgba(216,84,42,.16);color:var(--accent-ink);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;border-radius:999px}
#tb-guided .plan-toggle{display:grid;gap:12px;margin:18px 0}
#tb-guided .plan{display:flex;gap:13px;align-items:flex-start;background:var(--surface-2);border:1.5px solid var(--line);border-radius:12px;padding:15px 16px;cursor:pointer;transition:border-color .15s,background .15s}
#tb-guided .plan.active{border-color:var(--accent);background:rgba(216,84,42,.07)}
#tb-guided .plan .radio{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2);margin-top:2px;position:relative;transition:border-color .15s}
#tb-guided .plan.active .radio{border-color:var(--accent)}
#tb-guided .plan.active .radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent)}
#tb-guided .plan-body{flex:1}
#tb-guided .plan-title{display:flex;justify-content:space-between;gap:10px;font-weight:800;font-size:15px;align-items:baseline}
#tb-guided .plan-title .pp{font-weight:900}
#tb-guided .plan-note{font-size:12.5px;color:var(--muted);margin-top:3px}
#tb-guided .plan-flag{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)}
#tb-guided .micro-rows{display:grid;gap:10px;margin:18px 0}
#tb-guided .micro{display:flex;gap:11px;align-items:center;font-size:13.5px;color:var(--ink-2)}
#tb-guided .micro svg{flex:0 0 auto;width:19px;height:19px;color:var(--accent)}
#tb-guided .gifts{margin-top:22px;border-top:1px solid var(--line);padding-top:20px}
#tb-guided .gifts-h{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:14px}
#tb-guided .gift-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
#tb-guided .gift{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:13px;text-align:center}
#tb-guided .gift img{border-radius:7px;margin:0 auto 9px;width:100%;aspect-ratio:16/10;object-fit:cover}
#tb-guided .gift b{display:block;font-size:12.5px;margin-bottom:4px;line-height:1.25}
#tb-guided .gift .gv{font-size:11px;color:var(--muted)}
#tb-guided .gift .gv s{margin-right:5px}
#tb-guided .gift .gfree{color:var(--good);font-weight:800}
#tb-guided .finep{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.5}

/* 4. TAB BAR */
#tb-guided .tabbar{background:rgba(12,12,13,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);z-index:900}
#tb-guided .tabbar.stuck{position:sticky;top:var(--bar-h)}
#tb-guided .tabbar-inner{display:flex;gap:4px;max-width:var(--maxw);margin:0 auto;padding:0 12px;overflow-x:auto}
#tb-guided .tabbar button{flex:1;min-width:120px;background:none;border:none;color:var(--muted);font-weight:700;font-size:13.5px;letter-spacing:.04em;text-transform:uppercase;padding:16px 12px;border-bottom:3px solid transparent;white-space:nowrap;transition:color .15s,border-color .15s}
#tb-guided .tabbar button.active{color:var(--ink);border-bottom-color:var(--accent)}

/* 5. WHAT TO EXPECT — in-place tab panels (condensed for density) */
#tb-guided #sec-expect{padding:24px 0 44px}
#tb-guided .tabpanels{max-width:740px;margin:0 auto}
#tb-guided .tabpanel{display:none}
#tb-guided .tabpanel.active{display:block;animation:fadeup .3s var(--ease)}
#tb-guided .panel-head{text-align:left;margin-bottom:12px}
#tb-guided .panel-title{font-size:clamp(20px,2.5vw,25px);line-height:1.15;margin:0}
#tb-guided .timeline{display:grid;gap:0}
#tb-guided .tl-step{padding:0}
#tb-guided .tl-step + .tl-step{border-top:1px solid var(--line);margin-top:13px;padding-top:13px}
#tb-guided .tl-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px}
#tb-guided .tl-ic{flex:0 0 auto;width:27px;height:27px;border-radius:50%;background:rgba(216,84,42,.1);display:flex;align-items:center;justify-content:center}
#tb-guided .tl-ic svg{width:15px;height:15px;color:var(--accent)}
#tb-guided .tl-n{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}
#tb-guided .tl-t{font-size:16px;font-weight:900;letter-spacing:-.01em;color:var(--ink)}
#tb-guided .tl-list{list-style:none;padding:0;margin:0 0 0 36px;display:grid;gap:4px}
#tb-guided .tl-list li{position:relative;padding-left:16px;font-size:14px;color:var(--ink-2);line-height:1.45}
#tb-guided .tl-list li::before{content:"";position:absolute;left:3px;top:7px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
@media (min-width:768px){
  #tb-guided #panel-expect{max-width:none}
  #tb-guided .timeline{grid-template-columns:repeat(3,1fr)}
  #tb-guided .tl-step{padding:0 22px}
  #tb-guided .tl-step:first-child{padding-left:0}
  #tb-guided .tl-step:last-child{padding-right:0}
  #tb-guided .tl-step + .tl-step{border-top:none;border-left:1px solid var(--line);margin-top:0;padding-top:0}
  #tb-guided .tl-list{margin-left:0}
}
#tb-guided .rev-hidden{display:none}
#tb-guided .acc{max-width:760px;margin:0 auto 24px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
#tb-guided .acc-item{border-bottom:1px solid var(--line)}
#tb-guided .acc-item:last-child{border-bottom:none}
#tb-guided .acc-q{width:100%;background:none;border:none;color:var(--ink);text-align:left;padding:18px 20px;font-size:16px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:var(--tap)}
#tb-guided .acc-q .chev{flex:0 0 auto;width:18px;height:18px;color:var(--accent);transition:transform .3s var(--ease)}
#tb-guided .acc-item.open .acc-q .chev{transform:rotate(180deg)}
#tb-guided .acc-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
#tb-guided .acc-a-inner{padding:0 20px 20px;color:var(--ink-2);font-size:15px;line-height:1.6}
#tb-guided .anchor-link{display:inline-block;color:var(--accent-ink);font-weight:700;font-size:14px;text-decoration:underline;text-underline-offset:3px;background:none;border:none;padding:8px 0}
#tb-guided .obj-reassure{color:var(--muted);font-size:13px;margin-top:13px}
#tb-guided .fr-grid{display:grid;grid-template-columns:1fr;gap:16px;max-width:980px;margin:34px auto 18px}
@media (min-width:760px){#tb-guided .fr-grid{grid-template-columns:repeat(3,1fr)}}
#tb-guided .fr{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
#tb-guided .fr .stars{color:var(--accent);letter-spacing:2px;font-size:13px;margin-bottom:10px}
#tb-guided .fr h4{font-size:16px;margin-bottom:9px}
#tb-guided .fr p{font-size:14px;color:var(--ink-2);line-height:1.55;margin-bottom:14px}
#tb-guided .fr .by{font-size:13px;color:var(--muted)}
#tb-guided .fr .by b{color:var(--ink)}
#tb-guided .verified-tag{display:inline-flex;align-items:center;gap:5px;color:var(--good);font-size:11px;font-weight:700}
#tb-guided .verified-tag svg{width:13px;height:13px}

/* 6. INGREDIENT DEEP-DIVE */
#tb-guided .ing-deep{display:grid;grid-template-columns:1fr;gap:12px;max-width:900px;margin:0 auto 30px}
@media (min-width:640px){#tb-guided .ing-deep{grid-template-columns:1fr 1fr}}
#tb-guided .ingd{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--radius);padding:17px 20px}
#tb-guided .ingd-h{display:flex;align-items:center;gap:11px;margin-bottom:6px}
#tb-guided .ingd-num{flex:0 0 auto;width:25px;height:25px;border-radius:50%;background:rgba(216,84,42,.14);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px}
#tb-guided .ingd h3{margin:0;font-size:16px}
#tb-guided .ingd p{font-size:14px;color:var(--ink-2);margin:0;line-height:1.45}
#tb-guided .marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin:0 0 36px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
#tb-guided .marquee-track{display:flex;gap:48px;width:max-content;animation:marquee 22s linear infinite}
#tb-guided .marquee:hover .marquee-track{animation-play-state:paused}
#tb-guided .marquee-track span{display:inline-flex;align-items:center;gap:14px;font-size:14px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
#tb-guided .marquee-track span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
@keyframes marquee{to{transform:translateX(-50%)}}
#tb-guided .ing-close{max-width:720px;margin:0 auto 28px;text-align:center;color:var(--ink-2);font-size:15.5px;line-height:1.6}

/* 7. BEFORE/AFTER + TESTIMONIALS */
#tb-guided .ticker{max-width:500px;margin:0 auto 28px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:11px 18px;display:flex;align-items:center;gap:10px;justify-content:center;font-size:13px;color:var(--ink-2)}
#tb-guided .ticker .dot{width:8px;height:8px;border-radius:50%;background:var(--good);flex:0 0 auto;box-shadow:0 0 0 4px rgba(55,201,122,.18)}
#tb-guided .ticker .msg{transition:opacity .4s}
#tb-guided .ba-carousel{position:relative;max-width:900px;margin:0 auto 50px}
#tb-guided .ba-track{display:flex;overflow-x:auto;scroll-snap-type:none;gap:16px;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;touch-action:pan-y}
#tb-guided .ba-track::-webkit-scrollbar{display:none}
#tb-guided .ba-track.dragging{cursor:grabbing;scroll-behavior:auto}
#tb-guided .ba-track.dragging img{pointer-events:none;user-select:none}
#tb-guided .ba-slide{flex:0 0 100%;scroll-snap-align:center}
#tb-guided .ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#tb-guided .ba-cell{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);aspect-ratio:3/4;background:var(--surface)}
#tb-guided .ba-cell img{width:100%;height:100%;object-fit:cover}
#tb-guided .ba-cell .tag{position:absolute;top:10px;left:10px;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:5px}
#tb-guided .ba-cell.before .tag{background:#fff;color:#111}
#tb-guided .ba-cell.after .tag{background:var(--accent);color:#fff}
#tb-guided .ba-vbadge{text-align:center;margin-bottom:12px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--good)}
#tb-guided .ba-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:18px}
#tb-guided .ba-arrow{width:46px;height:46px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink);display:flex;align-items:center;justify-content:center}
#tb-guided .ba-arrow:hover{border-color:var(--accent);color:var(--accent)}
#tb-guided .ba-arrow svg{width:20px;height:20px}
#tb-guided .ba-dots{display:flex;gap:8px}
#tb-guided .ba-dot{width:9px;height:9px;border-radius:50%;background:var(--line-2);border:none;padding:0}
#tb-guided .ba-dot.active{background:var(--accent)}
#tb-guided .testi-scroll{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 14px;scrollbar-width:none}
#tb-guided .testi-scroll::-webkit-scrollbar{display:none}
#tb-guided .tcard{flex:0 0 87%;max-width:380px;scroll-snap-align:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
@media (min-width:760px){#tb-guided .tcard{flex:0 0 366px}}
#tb-guided .tcard .stars{color:var(--accent);letter-spacing:3px;font-size:21px;line-height:1;margin-bottom:15px}
#tb-guided .tcard .tby{display:flex;align-items:center;gap:9px;margin-bottom:18px;flex-wrap:wrap}
#tb-guided .tcard .tby-name{font-weight:800;font-size:15px;letter-spacing:.03em;text-transform:uppercase}
#tb-guided .tcard .tby-badge{display:inline-flex;align-items:center;gap:5px;border:1.5px solid var(--accent);color:var(--accent-ink);border-radius:999px;padding:3px 11px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
#tb-guided .tcard .tby-badge svg{width:13px;height:13px;color:var(--accent)}
#tb-guided .tcard h4{font-size:19px;font-weight:900;letter-spacing:-.01em;margin-bottom:13px;line-height:1.2}
#tb-guided .tcard p{font-size:14.5px;color:var(--ink-2);margin:0;line-height:1.55}
#tb-guided .testi-wrap{position:relative;max-width:var(--maxw);margin:0 auto}
#tb-guided .testi-arrows{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:18px}
#tb-guided .testi-hint{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (max-width:767px){#tb-guided .hide-mobile{display:none}}

/* 8. UGC VIDEO TABS */
#tb-guided .pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:30px}
#tb-guided .pill{background:var(--surface-2);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:11px 20px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;min-height:44px}
#tb-guided .pill.active{background:var(--accent);border-color:var(--accent);color:#fff}
#tb-guided .sec-subcaps{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin-top:8px}
/* member video carousel — vertical 9:16 cards, MarsMen layout */
#tb-guided .vid-carousel{position:relative;max-width:var(--maxw);margin:0 auto}
#tb-guided .vid-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:none;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;touch-action:pan-y;padding:4px 2px 8px}
#tb-guided .vid-track::-webkit-scrollbar{display:none}
#tb-guided .vid-track.dragging{cursor:grabbing;scroll-behavior:auto}
#tb-guided .vid-track.dragging img{pointer-events:none;user-select:none}
#tb-guided .vid-card{position:relative;flex:0 0 auto;width:clamp(228px,68vw,300px);aspect-ratio:9/16;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:#000}
#tb-guided .vid-card img, #tb-guided .vid-card video{width:100%;height:100%;object-fit:cover;opacity:.92;display:block;background:#000}
#tb-guided .vid-card.sound video{opacity:1}
/* play/pause button: prominent when paused, fades out while playing (still tap-anywhere to pause), reappears on hover */
#tb-guided .vid-card.playing .video-play{opacity:0}
#tb-guided .vid-card.playing:hover .video-play{opacity:1}
#tb-guided .video-play{transition:opacity .18s}
#tb-guided .vid-card .vid-muted{position:absolute;left:10px;bottom:10px;z-index:3;display:flex;align-items:center;gap:5px;padding:5px 10px;border:none;border-radius:100px;background:rgba(4,4,5,.62);color:#fff;font:600 11px/1 var(--mono,ui-monospace,monospace);letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
#tb-guided .vid-card .vid-muted:hover{background:rgba(216,84,42,.92)}
#tb-guided .vid-card.sound .vid-muted{background:rgba(216,84,42,.92)}
#tb-guided .vid-pill{position:absolute;top:12px;left:12px;right:12px;z-index:2;background:var(--accent);color:#fff;text-align:center;border-radius:7px;padding:8px 10px;font-weight:800;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
#tb-guided .vid-fs{position:absolute;bottom:12px;right:12px;z-index:3;width:34px;height:34px;border-radius:7px;background:rgba(242,237,227,.92);display:flex;align-items:center;justify-content:center;color:#131e29;cursor:pointer}
#tb-guided .vid-fs:hover{background:#fff}
#tb-guided .vid-fs svg{width:18px;height:18px}
#tb-guided .video-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:none;border:none;z-index:1}
#tb-guided .video-play .pb{width:66px;height:66px;border-radius:50%;background:rgba(216,84,42,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(0,0,0,.5);transition:transform .15s}
#tb-guided .video-play:hover .pb{transform:scale(1.07)}
#tb-guided .video-play .pb svg{width:27px;height:27px;color:#fff;margin-left:4px}
#tb-guided .video-play .pb.is-pause svg{margin-left:0;width:24px;height:24px}
#tb-guided .vid-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:20px}

/* 9. COMPARISON — value table, all 4 columns fit mobile (no horizontal scroll) */
#tb-guided .cmp-wrap{max-width:720px;margin:0 auto}
#tb-guided .cmp2{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0}
#tb-guided .cmp2 col.c-label{width:23%}
#tb-guided .cmp2 col.c-tb{width:28%}
#tb-guided .cmp2 col.c-a, #tb-guided .cmp2 col.c-b{width:24.5%}
#tb-guided .cmp2 th, #tb-guided .cmp2 td{padding:clamp(9px,2vw,14px) clamp(4px,1.4vw,12px);text-align:center;vertical-align:middle;font-size:clamp(11px,2.7vw,15.5px);line-height:1.25;overflow-wrap:anywhere}
#tb-guided .cmp2 thead th{font-size:clamp(9px,2.2vw,12.5px);font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);vertical-align:bottom;padding-bottom:clamp(10px,2vw,16px)}
#tb-guided .cmp2 .rlabel{text-align:left;font-size:clamp(9px,2.1vw,12px);font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);padding-left:2px}
#tb-guided .cmp2 tbody .rlabel, #tb-guided .cmp2 tbody td.alt{border-top:1px solid var(--line)}
#tb-guided .cmp2 .alt{color:#cf7a52;font-weight:600}
#tb-guided .cmp2 .tb{background:var(--accent);color:#fff;font-weight:800}
#tb-guided .cmp2 thead th.tb{color:#fff;border-radius:12px 12px 0 0;padding-top:18px}
#tb-guided .cmp2 tbody tr:last-child td.tb{border-radius:0 0 12px 12px;padding-bottom:18px}
#tb-guided .cmp2 .crown2{display:block;font-size:clamp(8px,1.9vw,10px);font-weight:800;letter-spacing:.1em;opacity:.85;margin-bottom:4px}
#tb-guided .cmp-foot{text-align:center;color:var(--muted);font-size:clamp(12px,2.4vw,14px);max-width:60ch;margin:26px auto 0}
#tb-guided .crown{display:block;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:3px}

/* 10. JOURNEY — climbing chart hero + tab-driven build-up */
@keyframes fadeup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#tb-guided .jtabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;max-width:560px;margin:0 auto 24px}
#tb-guided .jtab{flex:0 0 auto;background:var(--surface);border:1px solid var(--line);color:var(--ink-2);font-weight:700;font-size:14px;padding:10px 18px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
#tb-guided .jtab:hover{color:var(--ink)}
#tb-guided .jtab[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
#tb-guided .jchart-card{max-width:600px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:26px 22px 16px}
#tb-guided .jchart-cap{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:42px}
#tb-guided .jchart{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;height:178px;margin-bottom:30px}
#tb-guided .jbar{position:relative;width:100%;height:100%}
/* bar hidden until its month is reached (grows from bottom), staggered */
#tb-guided .jbar-col{position:absolute;bottom:0;left:50%;width:100%;max-width:46px;height:var(--h);border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--accent),var(--accent-2));transform:translateX(-50%) scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);transition-delay:calc(var(--i,0)*55ms)}
#tb-guided .jbar.on .jbar-col{transform:translateX(-50%) scaleY(1)}
/* count (pieces + outfits) sits above the bar, hidden until reached */
#tb-guided .jcount{position:absolute;left:0;right:0;bottom:calc(var(--h) + 7px);text-align:center;white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity .4s ease,transform .4s ease;transition-delay:calc(var(--i,0)*55ms)}
#tb-guided .jbar.on .jcount{opacity:1;transform:none}
#tb-guided .jcount b{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:800;font-size:14px;color:var(--accent-ink);line-height:1.05}
#tb-guided .jcount i{display:block;font-style:normal;font-weight:700;font-size:9.5px;letter-spacing:.02em;color:var(--muted);margin-top:1px}
#tb-guided .jmo{position:absolute;left:0;right:0;bottom:-26px;text-align:center;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;color:var(--muted);white-space:nowrap;transition:color .3s ease}
#tb-guided .jbar.on .jmo{color:var(--ink)}
#tb-guided .jcard{max-width:600px;margin:18px auto 0;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:28px 26px}
#tb-guided .jcard.swap{animation:fadeup .4s var(--ease)}
#tb-guided .jtag{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
#tb-guided .jtitle{font-size:clamp(22px,5vw,30px);font-weight:900;letter-spacing:-.01em;margin:8px 0 12px;color:var(--ink)}
#tb-guided .jwhats{color:var(--ink-2);font-size:15.5px;line-height:1.55;margin-bottom:18px}
#tb-guided .jcard ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
#tb-guided .jcard li{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.4;color:var(--ink-2)}
#tb-guided .jcard li svg{flex:0 0 auto;width:18px;height:18px;color:var(--accent);margin-top:2px}
#tb-guided .jpayoff{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-weight:800;font-size:15.5px;color:var(--ink)}
#tb-guided .jfoot{text-align:center;margin:24px auto 0;color:var(--muted);font-size:12.5px;line-height:1.5;max-width:56ch}
@media(max-width:480px){#tb-guided .jchart{gap:5px;height:176px}#tb-guided .jcount b{font-size:12px}#tb-guided .jcount i{font-size:8.5px}#tb-guided .jmo{font-size:9.5px}#tb-guided .jtab{font-size:13px;padding:9px 14px}}

/* 11. ADVISORY */
#tb-guided .adv-wrap{position:relative;max-width:980px;margin:0 auto}
#tb-guided .adv-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:18px;scrollbar-width:none;padding-bottom:6px}
#tb-guided .adv-track::-webkit-scrollbar{display:none}
#tb-guided .adv-card{flex:0 0 100%;scroll-snap-align:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;text-align:center}
@media (min-width:760px){#tb-guided .adv-card{flex:0 0 calc((100% - 36px)/3)}}
#tb-guided .adv-card img{width:96px;height:96px;border-radius:50%;object-fit:cover;margin:0 auto 16px;border:2px solid var(--line-2)}
#tb-guided .adv-card h4{font-size:18px;margin-bottom:4px}
#tb-guided .adv-card .role{font-size:12px;font-weight:700;color:var(--accent-ink);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
#tb-guided .adv-card p{font-size:14px;color:var(--ink-2);line-height:1.55;margin:0}
#tb-guided .adv-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:22px}

/* 12. GUARANTEE */
#tb-guided .guarantee{text-align:center;max-width:640px;margin:0 auto}
#tb-guided .seal{width:170px;height:170px;border-radius:50%;margin:0 auto 26px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 50% 35%,rgba(216,84,42,.22),transparent 70%);border:3px solid var(--accent);color:#fff;position:relative}
#tb-guided .seal::before{content:"";position:absolute;inset:10px;border:1px dashed rgba(216,84,42,.5);border-radius:50%}
#tb-guided .seal .big{font-size:36px;font-weight:900;line-height:1;color:var(--accent)}
#tb-guided .seal .sm{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-top:6px;color:var(--ink-2);max-width:120px}
#tb-guided .guarantee h2{margin-bottom:14px}
#tb-guided .guarantee p{color:var(--ink-2);font-size:16px;max-width:50ch;margin:0 auto 26px}

/* 13. FULL FAQ */
#tb-guided .faq2{max-width:780px;margin:0 auto;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
#tb-guided .faq2 .acc-item.hidden{display:none}
#tb-guided .faq-more{display:block;margin:22px auto 0;background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink);border-radius:999px;padding:13px 26px;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
#tb-guided .faq-more:hover{border-color:var(--accent)}

/* 14. LAUNCH KIT */
#tb-guided .kit-grid{display:grid;grid-template-columns:1fr;gap:30px;max-width:980px;margin:0 auto;align-items:center}
@media (min-width:820px){#tb-guided .kit-grid{grid-template-columns:1fr 1fr}}
#tb-guided .kit-collage{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#tb-guided .kit-collage img{border-radius:10px;width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--line)}
#tb-guided .kit-collage img:first-child{grid-column:1/-1;aspect-ratio:16/9}
#tb-guided .kit-list{list-style:none;padding:0;margin:0}
#tb-guided .kit-list li{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
#tb-guided .kit-list li:last-child{border-bottom:none}
#tb-guided .kit-list .kn{flex:1}
#tb-guided .kit-list .kp{color:var(--muted);font-size:13.5px}
#tb-guided .kit-list .kp s{margin-right:7px}
#tb-guided .kit-list .kfree{color:var(--good);font-weight:800;font-size:12.5px}
#tb-guided .kit-total{display:flex;justify-content:space-between;align-items:baseline;margin:20px 0;font-weight:900;font-size:18px}
#tb-guided .kit-total .amt{color:var(--accent)}
#tb-guided .kit-hero{width:100%;aspect-ratio:3/2;object-fit:cover;/*object-position:top;*/border:1px solid var(--line);border-radius:6px}

/* sticky footer CTA (MarsMen-style, appears after the What to Expect tabs) */
#tb-guided .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:950;background:var(--ink-band);padding:6px 14px;padding-bottom:calc(6px + env(safe-area-inset-bottom));transform:translateY(120%);transition:transform .35s var(--ease);box-shadow:0 -10px 30px rgba(0,0,0,.16)}
#tb-guided .sticky-cta__btn{padding:10px 24px;font-size:15px}
#tb-guided .sticky-cta.show{transform:none}
#tb-guided .sticky-cta__inner{max-width:600px;margin:0 auto}
#tb-guided .sticky-cta__btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:12px}
#tb-guided .sticky-cta__btn svg{width:20px;height:20px}
@media (prefers-reduced-motion:reduce){#tb-guided .sticky-cta{transition:none}}
/* MW-38: IM8-style plan control inside the sticky bar — defaults Monthly, others sold-out */
#tb-guided .sticky-cta__inner{display:flex;align-items:center;gap:10px}
#tb-guided .sticky-cta .sticky-cta__btn{flex:1 1 auto;width:auto;min-width:0}
#tb-guided .sticky-plan{position:relative;flex:0 0 auto}
#tb-guided .sticky-plan__toggle{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.30);color:#fff;border-radius:12px;padding:9px 12px;font-size:13px;font-weight:700;line-height:1;cursor:pointer;white-space:nowrap}
#tb-guided .sticky-plan__name{font-weight:700}
#tb-guided .sticky-plan__price{font-weight:800}
#tb-guided .sticky-plan__price span{font-weight:600;opacity:.8}
#tb-guided .sticky-plan__chev{width:12px;height:12px;flex:0 0 auto;transition:transform .2s var(--ease)}
#tb-guided .sticky-plan[aria-open="true"] .sticky-plan__chev{transform:rotate(180deg)}
#tb-guided .sticky-plan__menu{position:absolute;bottom:calc(100% + 8px);left:0;min-width:236px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 36px rgba(0,0,0,.24);padding:6px;z-index:2}
#tb-guided .sticky-plan__menu[hidden]{display:none}
#tb-guided .sticky-plan__opt{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 12px;border-radius:10px;font-size:14px;color:var(--ink)}
#tb-guided .sticky-plan__opt.is-active{background:var(--surface-2);font-weight:800}
#tb-guided .sticky-plan__opt.is-sold{color:var(--muted);cursor:not-allowed}
#tb-guided .sticky-plan__opt .sold{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);border-radius:999px;padding:3px 8px;white-space:nowrap}

/* sticky site header (logo placeholder) — sits under the promo bar, sticks on scroll */
#tb-guided .site-header{position:sticky;top:0;z-index:1000;background:var(--bg);border-bottom:1px solid var(--line)}
#tb-guided .site-header__inner{max-width:var(--maxw);margin:0 auto;height:var(--hdr-h);display:flex;align-items:center;justify-content:center;padding:0 20px}
#tb-guided .site-logo{display:inline-flex;align-items:center;line-height:0;text-decoration:none}
#tb-guided .site-logo img{height:17px;width:auto;display:block}

/* ===== Customer reviews widget (visual dupe of a reviews SaaS) ===== */
#tb-guided .rv{max-width:920px;margin:0 auto;color:var(--cream)}
#tb-guided .rv-h{font-size:clamp(21px,3.6vw,28px);font-weight:900;letter-spacing:-.01em;margin:0 0 22px;color:var(--cream)}
#tb-guided .rv-summary{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center}
@media(max-width:560px){#tb-guided .rv-summary{grid-template-columns:1fr;gap:20px}}
#tb-guided .rv-score__num{font-size:clamp(40px,9vw,54px);font-weight:900;line-height:1;color:var(--cream)}
#tb-guided .rv-score .rv-stars{font-size:20px;letter-spacing:2px;color:var(--accent);margin:8px 0 6px}
#tb-guided .rv-score__count{font-size:13px;color:var(--cream-2);text-decoration:underline;text-underline-offset:2px}
#tb-guided .rv-hist{display:grid;gap:7px;max-width:440px}
#tb-guided .rv-bar{display:grid;grid-template-columns:12px 1fr;gap:11px;align-items:center}
#tb-guided .rv-bar__n{font-size:12px;color:var(--cream-2);text-align:right}
#tb-guided .rv-bar__track{height:8px;background:rgba(242,237,227,.13);border-radius:999px;overflow:hidden}
#tb-guided .rv-bar__track i{display:block;height:100%;background:var(--accent);border-radius:999px}
#tb-guided .rv-rule{border:none;border-top:1px solid rgba(242,237,227,.13);margin:24px 0}
#tb-guided .rv-ai__h{font-size:18px;font-weight:800;color:var(--cream);display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px}
#tb-guided .rv-ai__tag{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--accent)}
#tb-guided .rv-ai__tag svg{width:15px;height:15px}
#tb-guided .rv-ai__body{font-size:15px;line-height:1.6;color:var(--cream-2);margin:0}
#tb-guided .rv-media{display:flex;gap:10px;overflow-x:auto;margin-top:18px;scrollbar-width:none;padding-bottom:4px}
#tb-guided .rv-media::-webkit-scrollbar{display:none}
#tb-guided .rv-media img{flex:0 0 auto;width:108px;height:128px;object-fit:cover;border-radius:8px;border:1px solid rgba(242,237,227,.12)}
#tb-guided .rv-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0}
#tb-guided .rv-search{flex:1 1 190px;min-width:150px;display:flex;align-items:center;gap:8px;background:rgba(242,237,227,.05);border:1px solid rgba(242,237,227,.14);border-radius:8px;padding:9px 12px}
#tb-guided .rv-search svg{width:15px;height:15px;color:var(--cream-2);flex:0 0 auto}
#tb-guided .rv-search input{flex:1;background:none;border:none;color:var(--cream);font-size:14px;outline:none;min-width:0}
#tb-guided .rv-search input::placeholder{color:var(--cream-2)}
#tb-guided .rv-select{display:inline-flex;align-items:center;gap:8px;background:rgba(242,237,227,.05);border:1px solid rgba(242,237,227,.14);border-radius:8px;padding:9px 13px;color:var(--cream);font-size:14px;font-weight:600;cursor:pointer}
#tb-guided .rv-select svg{width:12px;height:12px;color:var(--cream-2)}
#tb-guided .rv-check{display:inline-flex;align-items:center;gap:8px;color:var(--cream);font-size:14px;cursor:pointer;user-select:none}
#tb-guided .rv-check input{width:16px;height:16px;accent-color:var(--accent)}
#tb-guided .rv-item{display:grid;grid-template-columns:clamp(98px,18vw,156px) 1fr;gap:22px;padding:26px 0;border-top:1px solid rgba(242,237,227,.13)}
@media(max-width:560px){#tb-guided .rv-item{grid-template-columns:1fr;gap:14px}}
#tb-guided .rv-who{display:flex;align-items:flex-start;gap:10px}
#tb-guided .rv-avatar{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:rgba(242,237,227,.09);border:1px solid rgba(242,237,227,.16);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:var(--cream)}
#tb-guided .rv-name{font-size:14px;font-weight:800;color:var(--cream)}
#tb-guided .rv-verified{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--accent);font-weight:600;margin-top:3px}
#tb-guided .rv-verified svg{width:13px;height:13px}
#tb-guided .rv-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
#tb-guided .rv-item .rv-stars{font-size:15px;letter-spacing:1.5px;color:var(--accent)}
#tb-guided .rv-pin{color:var(--cream-2)}
#tb-guided .rv-time{font-size:12.5px;color:var(--cream-2);display:inline-flex;align-items:center;gap:7px}
#tb-guided .rv-title{font-size:16.5px;font-weight:800;color:var(--cream);margin:0 0 7px}
#tb-guided .rv-text{font-size:14.5px;line-height:1.6;color:var(--cream-2);margin:0}
#tb-guided .rv-more{color:var(--cream);text-decoration:underline;text-underline-offset:2px;cursor:pointer;background:none;border:none;font:inherit;padding:0}
#tb-guided .rv-photos{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
#tb-guided .rv-photos img{width:70px;height:86px;object-fit:cover;border-radius:6px;border:1px solid rgba(242,237,227,.12)}
#tb-guided .rv-for{font-size:12.5px;color:var(--cream-2);margin-top:14px}
#tb-guided .rv-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap}
#tb-guided .rv-rec{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--cream)}
#tb-guided .rv-rec svg{width:15px;height:15px;color:var(--accent)}
#tb-guided .rv-helpful{display:inline-flex;align-items:center;gap:12px;font-size:13px;color:var(--cream-2)}
#tb-guided .rv-vote{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
#tb-guided .rv-vote::before{color:var(--cream-2)}
#tb-guided .rv-hidden{display:none}
#tb-guided .rv-more-btn{display:block;margin:26px auto 0;background:rgba(242,237,227,.06);border:1px solid rgba(242,237,227,.16);color:var(--cream);border-radius:999px;padding:13px 28px;font-weight:800;font-size:13px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
#tb-guided .rv-more-btn:hover{border-color:var(--accent)}

/* FOOTER */
#tb-guided .foot{background:#070708;border-top:1px solid var(--line);padding:56px 0 36px;color:var(--muted)}
#tb-guided .foot-top{display:grid;grid-template-columns:1fr;gap:36px;margin-bottom:40px}
@media (min-width:760px){#tb-guided .foot-top{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr}}
#tb-guided .foot-brand .fname{font-size:22px;font-weight:900;color:var(--ink);letter-spacing:-.02em}
#tb-guided .foot-brand .ftag{font-size:13px;margin:8px 0 18px;max-width:32ch}
#tb-guided .foot-email{display:flex;gap:8px;max-width:320px}
#tb-guided .foot-email input{flex:1;background:var(--surface);border:1px solid var(--line-2);border-radius:8px;color:var(--ink);padding:12px 14px;font-size:14px;font-family:inherit}
#tb-guided .foot-email button{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:0 18px;font-weight:800;font-size:13px}
#tb-guided .foot-social{display:flex;gap:14px;margin-top:18px}
#tb-guided .foot-social a{color:var(--muted)}
#tb-guided .foot-social a:hover{color:var(--accent)}
#tb-guided .foot-social svg{width:22px;height:22px}
#tb-guided .foot-col h5{color:var(--ink);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin:0 0 14px}
#tb-guided .foot-col a{display:block;font-size:13.5px;margin-bottom:9px;color:var(--muted)}
#tb-guided .foot-col a:hover{color:var(--ink)}
#tb-guided .foot-bottom{border-top:1px solid var(--line);padding-top:24px;font-size:11.5px;line-height:1.6}
#tb-guided .foot-bottom .disc{max-width:90ch;margin-bottom:12px}

/* MODALS */
#tb-guided .modal{position:fixed;inset:0;z-index:1500;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(4,4,5,.82);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
#tb-guided .modal.open{display:flex;animation:fade .25s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
#tb-guided .modal-card{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);max-width:560px;width:100%;max-height:88vh;overflow:auto;position:relative;padding:26px}
#tb-guided .modal-x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink);display:flex;align-items:center;justify-content:center}
#tb-guided .modal-x:hover{border-color:var(--accent)}
#tb-guided .modal-x svg{width:18px;height:18px}
#tb-guided .modal-card h3{margin-bottom:8px;padding-right:40px}
#tb-guided .modal-card .modal-sub{color:var(--muted);font-size:14px;margin-bottom:20px}
#tb-guided .upsell-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
#tb-guided .upsell-opt{background:var(--surface-2);border:1.5px solid var(--line);border-radius:12px;padding:18px;text-align:center;position:relative}
#tb-guided .upsell-opt.best{border-color:var(--accent)}
#tb-guided .upsell-opt img{border-radius:8px;margin:0 auto 12px;aspect-ratio:1/1;object-fit:cover;width:100%}
#tb-guided .upsell-opt .ut{font-weight:800;font-size:14px;margin-bottom:4px}
#tb-guided .upsell-opt .uprice{font-size:22px;font-weight:900}
#tb-guided .upsell-opt .uper{font-size:11px;color:var(--muted)}
#tb-guided .upsell-opt .utag{display:block;font-size:13px;color:var(--ink-2);margin-top:8px}
#tb-guided .upsell-opt .best-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px;white-space:nowrap}
#tb-guided .upsell-opt .save{color:var(--good);font-weight:800;font-size:12.5px;margin-top:6px;display:block}
#tb-guided .upsell-btns{display:grid;gap:10px}
#tb-guided .video-modal-card{background:#000;border:none;max-width:900px;width:100%;padding:0;border-radius:var(--radius);overflow:hidden;position:relative}
#tb-guided .video-modal-card video{width:100%;aspect-ratio:16/9;display:block;background:#000}
#tb-guided .nutri-img{width:100%;border-radius:8px;background:var(--surface-2)}

@media (prefers-reduced-motion:reduce){
  #tb-guided *, #tb-guided *::before, #tb-guided *::after{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  #tb-guided .reveal{opacity:1;transform:none}
  #tb-guided .marquee-track{animation:none}
}



#tb-guided{
  /* WYV exact tokens */
  --bg:#f2ede3;            /* primary cream surface */
  --surface:#f8f5ee;       /* raised card on cream */
  --surface-2:#ece4d4;     /* warm tan panel */
  --surface-3:#e2d9c6;
  --line:rgba(19,29,40,.14);
  --line-2:rgba(19,29,40,.24);
  --ink:#131D28;           /* primary dark text */
  --ink-2:#2b2a24;         /* body copy */
  --muted:#7a756a;         /* eyebrows, meta, captions */
  --accent:#d97a54;        /* Low Key clay — the single accent */
  --accent-2:#d64a2b;      /* rust (hover) */
  --accent-ink:#b5512e;    /* clay for text on cream (contrast) */
  --good:#0c7a45;          /* member green on cream */
  --cream:#f2ede3; --cream-2:rgba(242,237,227,.84); --cream-faint:rgba(242,237,227,.6);
  --hair-cream:rgba(242,237,227,.16);
  --ink-band:#131D28;
}
#tb-guided{background:var(--bg);color:var(--ink)}

/* ---- type registry: mono eyebrows, Inter display, one serif italic ---- */
#tb-guided .overline{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;font-size:11px;letter-spacing:.26em;color:var(--accent-ink)}
#tb-guided h1, #tb-guided h2, #tb-guided h3, #tb-guided h4{font-family:'Inter',sans-serif;letter-spacing:-.02em}
#tb-guided em{font-style:italic;font-family:'Instrument Serif',Georgia,serif;font-weight:400}
#tb-guided .hero h1 em{color:var(--accent)}
#tb-guided .gifts-h, #tb-guided .plan-flag, #tb-guided .crown, #tb-guided .ms-day, #tb-guided .wk-phase, #tb-guided .adv-card .role, #tb-guided .kit-total .amt, #tb-guided .tcard .pull{font-family:'JetBrains Mono',ui-monospace,monospace}

/* ---- materials: square corners (2-4px); pills + avatars stay round ---- */
#tb-guided .gallery-main, #tb-guided .thumb, #tb-guided .trust, #tb-guided .teaser, #tb-guided .ing-card, #tb-guided .ms, #tb-guided .acc, #tb-guided .fr, #tb-guided .ingd, #tb-guided .compare, #tb-guided .wk-panel, #tb-guided .adv-card, #tb-guided .faq2, #tb-guided .modal-card, #tb-guided .ba-cell, #tb-guided .tcard, #tb-guided .video-frame, #tb-guided .plan, #tb-guided .gift, #tb-guided .nutri-img, #tb-guided .upsell-opt, #tb-guided .kit-collage img, #tb-guided .kit-list, #tb-guided .foot-email input, #tb-guided .video-modal-card{border-radius:3px}
#tb-guided .btn, #tb-guided .save-badge, #tb-guided .plan-flag, #tb-guided .gift .gfree, #tb-guided .kfree, #tb-guided .pill, #tb-guided .faq-more, #tb-guided .crown, #tb-guided .best-badge, #tb-guided .verified-tag, #tb-guided .ticker, #tb-guided .seal, #tb-guided .avatar-chip, #tb-guided .gallery-label, #tb-guided .ba-cell .tag, #tb-guided .ms::before{border-radius:999px}
#tb-guided .adv-card img, #tb-guided .avatar-chip{border-radius:50%}
#tb-guided .modal-x, #tb-guided .ba-arrow{border-radius:50%}

/* ---- cream surfaces + hairline borders ---- */
#tb-guided .trust, #tb-guided .teaser, #tb-guided .ing-card, #tb-guided .ms, #tb-guided .acc, #tb-guided .fr, #tb-guided .tcard, #tb-guided .wk-panel, #tb-guided .adv-card, #tb-guided .faq2, #tb-guided .modal-card, #tb-guided .video-frame, #tb-guided .gallery-main, #tb-guided .thumb, #tb-guided .plan, #tb-guided .gift, #tb-guided .ticker, #tb-guided .kit-list, #tb-guided .nutri-img{background:var(--surface);border-color:var(--line)}
#tb-guided .section--surface{background:var(--surface-2)}     /* warm tan zebra band */
#tb-guided .sec-head p, #tb-guided .proof-list li, #tb-guided .micro, #tb-guided .trust span, #tb-guided .ms li, #tb-guided .wk-panel>p, #tb-guided .wk-panel li, #tb-guided .fr p, #tb-guided .tcard p, #tb-guided .video-cap, #tb-guided .adv-card p{color:var(--ink-2)}
#tb-guided .proof-list svg{color:var(--good)}
#tb-guided .price-row .now{color:var(--ink)}
#tb-guided .save-badge{background:rgba(217,122,84,.16);color:var(--accent-ink)}
#tb-guided .plan.active{background:rgba(217,122,84,.08);border-color:var(--accent)}
#tb-guided .plan.active .radio{border-color:var(--accent)}#tb-guided .plan.active .radio::after{background:var(--accent)}
#tb-guided .gift .gfree, #tb-guided .kit-list .kfree, #tb-guided .verified-tag{color:var(--good)}
#tb-guided .ba-cell.before .tag{background:var(--ink);color:var(--cream)}
#tb-guided .ba-cell.after .tag{background:var(--accent);color:#fff}
#tb-guided .video-play .pb{background:rgba(217,122,84,.95)}
#tb-guided .ms::before{background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:0}
#tb-guided .wk-progress i{background:linear-gradient(90deg,var(--accent-2),var(--accent))}
#tb-guided .seal{background:radial-gradient(circle at 50% 35%,rgba(217,122,84,.18),transparent 70%);border-color:var(--accent)}
#tb-guided .seal::before{border-color:rgba(217,122,84,.5)}#tb-guided .seal .big{color:var(--accent-ink)}#tb-guided .seal .sm{color:var(--muted)}
#tb-guided .kit-total .amt{color:var(--accent-ink)}

/* ---- tab bar -> cream sticky ---- */
#tb-guided .tabbar{background:rgba(242,237,227,.92);border-color:var(--line)}
#tb-guided .tabbar button{color:var(--muted)}#tb-guided .tabbar button.active{color:var(--ink);border-bottom-color:var(--accent)}

/* ---- modals on cream ---- */
#tb-guided .modal{background:rgba(19,29,40,.55)}
#tb-guided .modal-card{background:var(--surface);border-color:var(--line-2)}
#tb-guided .modal-x{background:var(--surface-2);border-color:var(--line-2);color:var(--ink)}
#tb-guided .upsell-opt{background:var(--surface-2);border-color:var(--line)}
#tb-guided .upsell-opt.best{border-color:var(--accent)}
#tb-guided .video-modal-card{background:#000}

/* ============================ INK ZEBRA BANDS ============================ */
/* hero (dark photo band) */
#tb-guided .hero .overline{color:#f0a878}
#tb-guided .hero-sub, #tb-guided .hero-micro{color:var(--cream-2)}#tb-guided .hero-micro b{color:var(--cream)}
#tb-guided .hero-stars{color:var(--accent)}

/* .section--dark -> brand ink #131D28, cream text */
#tb-guided .section--dark{background:var(--ink-band)}
#tb-guided .section--dark .sec-head h2{color:var(--cream)}
#tb-guided .section--dark .sec-head p{color:var(--cream-2)}
#tb-guided .section--dark .overline, #tb-guided .section--dark .crown{color:#f0a878}
#tb-guided .section--dark .ingd{background:rgba(242,237,227,.045);border-color:var(--hair-cream)}
#tb-guided .section--dark .ingd h3{color:var(--cream)}#tb-guided .section--dark .ingd p{color:var(--cream-2)}#tb-guided .section--dark .ingd-num{color:#f0a878;background:rgba(240,168,120,.16)}
#tb-guided #sec-ingredients{padding:clamp(40px,6vw,72px) 0}
#tb-guided .section--dark .ing-close{color:var(--cream-2)}
#tb-guided .section--dark .marquee{border-color:var(--hair-cream)}
#tb-guided .section--dark .marquee-track span{color:var(--cream-2)}
#tb-guided .section--dark .cmp2 thead th{color:var(--cream-2)}
#tb-guided .section--dark .cmp2 .rlabel{color:var(--cream-2)}
#tb-guided .section--dark .cmp2 tbody .rlabel, #tb-guided .section--dark .cmp2 tbody td.alt{border-color:var(--hair-cream)}
#tb-guided .section--dark .cmp2 .alt{color:#e0a07a}
#tb-guided .section--dark .cmp-foot{color:var(--cream-2)}
#tb-guided .section--dark .compare tbody th{color:var(--cream)}
#tb-guided .section--dark .compare .y{color:#5fe0a0}#tb-guided .section--dark .compare .n{color:#ff9b80}#tb-guided .section--dark .compare .q{color:var(--cream-faint)}
#tb-guided .section--dark .faq2{background:rgba(242,237,227,.04);border-color:var(--hair-cream)}
#tb-guided .section--dark .acc-item{border-color:var(--hair-cream)}
#tb-guided .section--dark .acc-q{color:var(--cream)}
#tb-guided .section--dark .acc-a-inner{color:var(--cream-2)}#tb-guided .section--dark .acc-a-inner b{color:var(--cream)}
#tb-guided .section--dark .faq-more{background:rgba(242,237,227,.06);border-color:var(--hair-cream);color:var(--cream)}

/* footer ink band */
#tb-guided .foot{background:var(--ink-band);border-color:var(--hair-cream)}
#tb-guided .foot-brand .fname, #tb-guided .foot-col h5{color:var(--cream)}
#tb-guided .foot-brand .ftag, #tb-guided .foot-col a, #tb-guided .foot-bottom, #tb-guided .foot-social a{color:var(--cream-faint)}
#tb-guided .foot-col a:hover, #tb-guided .foot-social a:hover{color:var(--cream)}
#tb-guided .foot-email input{background:rgba(242,237,227,.06);border-color:var(--hair-cream);color:var(--cream)}
#tb-guided .foot-bottom{border-color:var(--hair-cream)}

/* announce -> ink band (WYV promo bars are ink; accent never a large fill) */
#tb-guided .announce{background:var(--ink-band)}
#tb-guided .announce button{color:var(--cream)}
#tb-guided .announce b{color:#f0a878}

/* featured-brands pills */
#tb-guided .brand-pill{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:15px;padding:14px 22px;border:1px solid var(--line);border-radius:999px;color:var(--ink);background:var(--surface)}

/* HERO HIDDEN FOR NOW (to be powered by a popup). Markup + personalization
   wiring stay intact; delete this one rule to bring it back. */
#tb-guided .hero{display:none}

/* ===== NOTE BATCH: WYV promo + nav · rating pill · thumb scroller · gruns plan cards ===== */
/* deadspace fix: promo is static (WYV-style), so body no longer offsets a fixed bar */
#tb-guided{padding-top:0}
#tb-guided .tabbar.stuck{top:var(--hdr-h)}
/* promo ribbon — centered offer (ink band, clay 50% Off badge) */
#tb-guided .promo{background:var(--ink-band);color:var(--cream);padding:9px 20px}
#tb-guided .promo__container{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:center;text-decoration:none;color:inherit;cursor:pointer}
#tb-guided .promo__offer{display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:clamp(10px,2.4vw,13px);font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
#tb-guided .promo__badge{background:var(--accent);color:#fff;border-radius:6px;padding:3px 9px;font-weight:800;letter-spacing:.06em}
#tb-guided .promo__bonus{color:var(--accent);font-weight:800}
@media(max-width:520px){#tb-guided .promo__offer{gap:7px;letter-spacing:.04em}#tb-guided .promo__badge{padding:3px 7px}}
/* Buy-box rating row (flat, IM8 layout) */
/* desktop 2-col: comfortable fixed size (wrap as safety on narrow laptops) */
#tb-guided .bb-rating{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:0 0 18px}
#tb-guided .bb-rating__avatars{display:inline-flex;align-items:center;flex:0 0 auto}
#tb-guided .bb-rating__avatar{width:28px;height:28px;border-radius:50%;border:2px solid var(--bg-page,#f2ede3);object-fit:cover;background:var(--accent)}
#tb-guided .bb-rating__avatar+.bb-rating__avatar{margin-left:-7px}
#tb-guided .bb-rating__stars{color:var(--accent);letter-spacing:.5px;font-size:16px}
#tb-guided .bb-rating__score{font-weight:800;font-size:16px;color:var(--ink)}
#tb-guided .bb-rating__txt{color:var(--ink-2);font-size:15px;font-weight:500}
#tb-guided .bb-rating__div{width:1px;height:16px;background:var(--line-2);margin:0 3px}
/* mobile single-col: fluid — fill the full width on one line */
@media(max-width:979px){
  #tb-guided .bb-rating{flex-wrap:nowrap;white-space:nowrap;gap:clamp(3px,1vw,9px)}
  #tb-guided .bb-rating__avatar{width:clamp(16px,4.4vw,26px);height:clamp(16px,4.4vw,26px)}
  #tb-guided .bb-rating__stars{letter-spacing:0;font-size:clamp(10.5px,2.8vw,15px)}
  #tb-guided .bb-rating__score{font-size:clamp(11.5px,3.2vw,15px)}
  #tb-guided .bb-rating__txt{font-size:clamp(10px,2.7vw,14px)}
  #tb-guided .bb-rating__div{height:clamp(13px,3vw,15px);margin:0 clamp(1px,0.5vw,3px)}
}
#tb-guided .thumbs-wrap{display:flex;align-items:center;gap:8px;margin-top:12px}
#tb-guided .thumbs{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;flex:1 1 0;min-width:0;grid-template-columns:none}
#tb-guided .thumbs::-webkit-scrollbar{display:none}
#tb-guided .thumb{flex:0 0 auto;width:62px;height:62px;scroll-snap-align:start}
#tb-guided .thumb-arrow{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--surface);border:1px solid var(--line-2);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
#tb-guided .thumb-arrow:hover{border-color:var(--accent);color:var(--accent)}
#tb-guided .thumb-arrow svg{width:18px;height:18px}
#tb-guided .plan-toggle{gap:14px}
#tb-guided .plan{display:block;padding:0;overflow:hidden;border-width:2px}
#tb-guided .planbar{background:var(--ink-band);color:var(--cream);text-align:center;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:9px 12px}
#tb-guided .planbar b{color:#f0a878}
#tb-guided .planbody{padding:16px 18px}
#tb-guided .planhead{display:flex;align-items:flex-start;gap:12px}
#tb-guided .planhead .radio{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2);margin-top:3px;position:relative;transition:border-color .15s}
#tb-guided .plan.active .planhead .radio{border-color:var(--accent)}
#tb-guided .plan.active .planhead .radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent)}
#tb-guided .planhead__main{flex:1;min-width:0}
#tb-guided .planhead__title{font-weight:800;font-size:18px;letter-spacing:-.01em}
#tb-guided .planhead__sub{font-size:13px;color:var(--muted);margin-top:2px}
#tb-guided .planhead__price{text-align:right;flex:0 0 auto}
#tb-guided .pprice{display:flex;align-items:baseline;gap:7px;justify-content:flex-end}
#tb-guided .pnow{font-size:22px;font-weight:900;letter-spacing:-.02em}
#tb-guided .pwas{color:var(--muted);font-size:15px}
#tb-guided .pday{font-size:12px;color:var(--muted);margin-top:2px}
#tb-guided .planchecks{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
#tb-guided .planchecks li{display:flex;gap:9px;align-items:center;font-size:14px;font-weight:600;color:var(--ink-2)}
#tb-guided .planchecks svg{flex:0 0 auto;width:18px;height:18px;color:var(--good)}
#tb-guided .planchecks--x{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:6px}
#tb-guided .planchecks--x li{white-space:nowrap}
#tb-guided .planchecks--x svg{color:#b9402b}
#tb-guided .plangifts{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
#tb-guided .plangifts__h{font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:12px}
#tb-guided .plangifts .gift-grid{grid-template-columns:1fr 1fr 1fr;gap:10px}
#tb-guided .plangifts .gift{padding:10px;text-align:center}
#tb-guided .gift__badge{display:inline-block;background:var(--ink-band);color:var(--cream);font-size:10.5px;font-weight:800;letter-spacing:.02em;padding:4px 10px;border-radius:999px;margin-bottom:9px}
#tb-guided .gift__badge s{color:#9a958c;margin-left:4px}
/* grid items default to min-width:auto and refuse to shrink below their content,
   which let the square gallery balloon the column past the container. Force shrink. */
#tb-guided .product-grid > div{min-width:0}
#tb-guided .gallery-main, #tb-guided .gallery-main img{min-width:0;max-width:100%}
/* single-column (mobile/tablet): cap the product column so the gallery stays sane + centered. */
@media(max-width:979px){
  #tb-guided .product-grid{max-width:480px;margin-left:auto;margin-right:auto}
}

/* ===== IM8-style plan stack: label + supply cards + shared kit + one-time link ===== */
#tb-guided .subscribe-label{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin:2px 0 12px}
#tb-guided .plan-toggle{gap:12px}
#tb-guided .plan{position:relative;display:block;padding:0;overflow:visible;border-width:2px}
#tb-guided .plan .planbody{position:relative;padding:15px 16px 15px 46px}
#tb-guided .plan .radio{position:absolute;left:16px;top:17px;width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2);margin:0}
#tb-guided .plan.active .radio{border-color:var(--accent)}
#tb-guided .plan.active .radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent)}
#tb-guided .planhead__title{font-weight:800;font-size:17px;letter-spacing:-.01em;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
#tb-guided .pprice{display:flex;align-items:baseline;gap:5px;margin-top:5px;justify-content:flex-start}
#tb-guided .pnow{font-size:30px;font-weight:900;letter-spacing:-.02em}
#tb-guided .pmsrp{font-size:17px;font-weight:700;color:var(--muted);text-decoration:line-through;text-decoration-thickness:1.5px}
#tb-guided .pper{font-size:14px;color:var(--muted);font-weight:600}
#tb-guided .planmeta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:5px;flex-wrap:wrap}
#tb-guided .ptotal{font-size:13px;color:var(--muted)}
#tb-guided .pperpiece{font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--accent-ink);font-family:'JetBrains Mono',ui-monospace,monospace}
#tb-guided .save-pill{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#fff;background:var(--accent);padding:3px 9px;border-radius:999px;white-space:nowrap}
#tb-guided .save-pill--ghost{color:var(--accent-ink);background:transparent;border:1px solid var(--accent)}
#tb-guided .best-flag{position:absolute;top:-1px;right:-1px;background:var(--ink-band);color:var(--cream);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:6px 12px;border-radius:0 2px 0 12px;z-index:1}
#tb-guided .sub-benefits{margin-top:14px}
#tb-guided .sub-benefits .plangifts{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
#tb-guided .onetime{margin:18px 0 22px;text-align:center}
#tb-guided .onetime-link{display:inline-flex;align-items:center;gap:9px;background:none;border:none;cursor:pointer;font-size:15px;color:var(--ink);font-weight:600;padding:8px 4px}
#tb-guided .onetime-link .radio{position:relative;width:18px;height:18px;border-radius:50%;border:2px solid var(--line-2);flex:0 0 auto;display:inline-block}
#tb-guided .onetime-link.active .radio{border-color:var(--accent)}
#tb-guided .onetime-link.active .radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent)}
#tb-guided .onetime-link .onetime-text{text-decoration:underline;text-underline-offset:3px}
#tb-guided .onetime-msrp{color:var(--muted);font-weight:600;margin-right:1px;text-decoration:line-through}
#tb-guided .onetime-link b{font-weight:800}
#tb-guided .onetime-detail{max-width:480px;margin:12px auto 0}
#tb-guided .onetime-detail[hidden]{display:none}

/* ===== per-card expansion + navy bar + IM8 gift cards + future gifts + sold-out ===== */
#tb-guided .plan .plan-expand{display:none}
#tb-guided .plan.active .plan-expand{display:block}
#tb-guided .plan-rule{border:none;border-top:1px solid var(--line);margin:14px 0}
#tb-guided .plan--mo{overflow:hidden}                      /* clips navy bar to the rounded card; no best-flag here */
#tb-guided .planbar{margin:0}
#tb-guided .plan-expand{margin-left:-30px}                 /* pull checklist + gifts full-width, out from under the radio indent */
#tb-guided .plan-expand .planchecks li{white-space:nowrap;font-size:13px;gap:8px}
#tb-guided .gift{background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:7px;text-align:center;min-width:0}
#tb-guided .gift b, #tb-guided .gift small{overflow-wrap:anywhere}
#tb-guided .gift img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:5px;margin-bottom:6px}
#tb-guided .gift s{display:block;color:var(--muted);font-size:11px;font-weight:700;margin-bottom:1px}
#tb-guided .gift .gift-credit{display:block;color:var(--accent-ink);font-size:13px;font-weight:900;margin-bottom:1px;font-family:'JetBrains Mono',ui-monospace,monospace}
#tb-guided .gift b{display:block;font-size:10px;line-height:1.18}
#tb-guided .gift small{display:block;color:var(--muted);font-size:9px;margin-top:2px;line-height:1.15}
/* gifts stay on ONE row at all widths (IM8-style) */
#tb-guided .plangifts .gift-grid{gap:7px}
#tb-guided .plangifts .gift-grid--4{grid-template-columns:repeat(4,1fr)}
#tb-guided .plangifts .gift-grid--2{grid-template-columns:repeat(2,1fr)}
#tb-guided .plangifts .gift-grid--3{grid-template-columns:repeat(3,1fr)}
#tb-guided .future-gifts{margin-top:14px}
#tb-guided .future-toggle{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--surface);border:1px solid var(--line-2);border-radius:999px;color:var(--accent-ink);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:12px 16px;cursor:pointer}
#tb-guided .future-toggle .chev{width:16px;height:16px;transition:transform .25s ease}
#tb-guided .future-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
#tb-guided .future-body[hidden]{display:none}
#tb-guided .future-body{margin-top:14px}
#tb-guided .future-month{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px}
#tb-guided .future-body .future-month:first-child{margin-top:0}
#tb-guided .btn--soldout, #tb-guided .btn:disabled{background:var(--surface-2)!important;color:var(--muted)!important;box-shadow:none!important;cursor:not-allowed;transform:none!important}

/* member quote scroller (MarsMen-style) + discount-applied badge */
#tb-guided .qscroll-wrap{margin-top:14px}
#tb-guided .qscroll{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
#tb-guided .qscroll::-webkit-scrollbar{display:none}
/* full-bleed to the viewport edges on single-column (phone/tablet) */
@media(max-width:979px){
  #tb-guided .qscroll-wrap{margin-left:-20px;margin-right:-20px}
  #tb-guided .qscroll{padding-left:20px;padding-right:20px;scroll-padding-left:20px}
}
#tb-guided .qcard{flex:0 0 84%;max-width:285px;min-width:0;scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:11px 13px;margin:0}
@media(min-width:560px){#tb-guided .qcard{flex:0 0 270px}}
#tb-guided .qcard p{font-size:13.5px;line-height:1.3;margin:0 0 7px;color:var(--ink)}
#tb-guided .qcard p b{font-weight:700}
#tb-guided .qmeta{display:flex;align-items:center;justify-content:space-between;gap:10px}
#tb-guided .qstars{color:var(--accent);letter-spacing:1px;font-size:11.5px}
#tb-guided .qby{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--ink)}
#tb-guided .qver{width:13px;height:13px;color:var(--good);flex:0 0 auto}
#tb-guided .discount-applied{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--good);font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700;font-style:italic;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;margin:12px 0 6px}
#tb-guided .discount-applied svg{width:16px;height:16px}
#tb-guided .micro b{font-weight:800;color:var(--ink)}

/* ============================================================================
   ThreadBeast — Guided Plan Selector  (MW-54)
   Stylesheet for /plan/guided-3mo + /plan/guided-annual.

   VISUAL FAMILY: the cream "/try editorial" grade the PDP ships (the
   `#cream-skin` layer inside pdp/index.html) — cream #f2ede3 surfaces, ink-navy
   #131D28 type, ONE rationed clay accent, 3px square card corners, 999px pills,
   hairline rgba(19,29,40,.14) borders, mono eyebrows, Inter display type.
   The plan cards are a direct descendant of the PDP's .plan / .planbar /
   .planhead__title / .pprice / .save-pill / .planchecks stack, and the sticky
   bar of its .sticky-cta.

   SCOPING (load-bearing, do not relax): every rule is scoped under #tb-guided.
   The page ships as a pasted Webflow embed, and ThreadBeast's site-wide Webflow
   CSS declares `h1-h6 { color:#131d28; text-transform:capitalize }` plus
   normalize rules on button/ul/a. Unscoped element selectors LOSE to those
   (proven on the PDP). There is no `:root` here either — tokens live on
   #tb-guided so nothing leaks into the host page and the host page's own
   variables cannot collide with ours.

   NO external fonts, no @import, no CDN. Family names are listed in the font
   stacks so that if the host page has already loaded Inter / JetBrains Mono we
   inherit them, with system fallbacks when it has not.

   Mobile-first. Everything below is written for 375px and widened upward.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   TOKENS + ROOT
   Values lifted from the PDP cream skin, with three deliberate deviations,
   each marked AA-FIX. The PDP's own values fail WCAG AA at body sizes; this
   page is a cold-traffic decision surface, so we ship the same hues one stop
   deeper rather than inheriting the failure.
   --------------------------------------------------------------------------- */
#tb-guided{
  /* surfaces */
  --g-bg:#f2ede3;              /* primary cream — page surface */
  --g-surface:#f8f5ee;         /* raised card on cream */
  --g-surface-2:#ece4d4;       /* warm tan panel — secondary/escape surface */
  --g-ink-band:#131D28;        /* ink band: banners, sticky bar, selected rung */

  /* type colours */
  --g-ink:#131D28;             /* primary type — 14.6:1 on cream */
  --g-ink-2:#2b2a24;           /* body copy — 12.9:1 on cream */
  --g-muted:#635e54;           /* AA-FIX: PDP --muted #7a756a is 3.9:1 on cream.
                                  Darkened to 5.7:1 so sub-labels, billing lines
                                  and per-outfit meta pass AA as body text. */
  --g-cream:#f2ede3;           /* type on ink bands — 14.6:1 */
  --g-cream-2:rgba(242,237,227,.84);

  /* accents */
  --g-accent:#d97a54;          /* clay — the single accent, used as line + wash */
  --g-accent-ink:#a3461f;      /* AA-FIX: PDP --accent-ink #b5512e is 4.3:1 on
                                  cream. Deepened to 5.2:1 for accent TEXT. */
  --g-cta:#bf4f2a;             /* AA-FIX: PDP .btn is white-on-clay = 3.1:1.
                                  Same hue, one stop deeper: 4.8:1 with #fff.
                                  Sits between clay #d97a54 and rust #d64a2b, so
                                  it still reads as the family CTA. */
  --g-cta-hover:#a8421f;       /* hover goes deeper, not lighter (contrast rises) */
  --g-accent-lit:#f0a878;      /* accent for type ON ink bands — 8.6:1 */
  --g-good:#0c7a45;            /* member green — check glyphs, 4.6:1 on cream */
  --g-danger:#b3261e;          /* cross glyphs only — 5.9:1 on cream. Never a fill,
                                  never a border: a rung he did not pick is a limit,
                                  not an error, and this brand does not alarm. */

  /* lines + material */
  --g-line:rgba(19,29,40,.14);   /* hairline */
  --g-line-2:rgba(19,29,40,.24); /* stronger divider / secondary card border */
  --g-radius:3px;                /* square corners — the cream skin's material */
  --g-pill:999px;                /* pills + dots stay round */
  --g-shadow:0 1px 2px rgba(19,29,40,.05), 0 10px 28px rgba(19,29,40,.07);
  --g-tap:48px;                  /* minimum tap target */
  --g-ease:cubic-bezier(.22,.61,.36,1);  /* PDP --ease */
  --g-dur:200ms;                 /* reveal duration — inside the 150-250ms band */

  /* type stacks — declared, never fetched */
  --g-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --g-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  background:var(--g-bg);
  color:var(--g-ink);
  font-family:var(--g-sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  max-width:100%;
  /* No top padding: the promo ribbon is a full-bleed band and must sit flush at the
     very top of the container, the way it does on /plan/premium. The 22px that used
     to be here read as an unexplained gap above the banner. */
  padding:0 0 34px;
}


/* ---------------------------------------------------------------------------
   SCOPED RESETS
   Webflow's normalize is the thing we are defending against here: it puts
   padding-left on lists, margins on headings, a browser font on buttons, and
   capitalize + a fixed colour on every heading. Each is undone explicitly, and
   only inside #tb-guided.
   --------------------------------------------------------------------------- */
#tb-guided, #tb-guided *, #tb-guided *::before, #tb-guided *::after{box-sizing:border-box}

#tb-guided .gq__h{
  margin:0 0 16px;
  color:var(--g-ink);
  text-transform:none;          /* beats Webflow's h1-h6 capitalize */
  font-family:var(--g-sans);
}

/* Webflow's normalize puts padding-left on the list AND a marker on the item.
   Resetting only the <ul> leaves the disc bullets behind — confirmed in a host
   simulation — so the <li> has to be reset too. */
#tb-guided .gplan__checks{margin:0;padding:0;list-style:none}
#tb-guided .gplan__checks li{list-style:none}
#tb-guided .gplan__checks li::marker{content:""}

#tb-guided .gq__opt, #tb-guided .gq__skip{
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
  color:inherit;
  margin:0;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  text-align:center;
}

#tb-guided .gplan__cta{
  text-decoration:none;
  color:inherit;
  -webkit-tap-highlight-color:transparent;
}

/* Prices must not reflow as digits change (150 -> 1200 on a rung switch). */
#tb-guided [data-guided-price], #tb-guided .gplan__now, #tb-guided .gplan__msrp{font-variant-numeric:tabular-nums}

/* The engine writes real copy into these; long strings must wrap, never push
   a horizontal scrollbar onto a 375px viewport. */

#tb-guided .gplan__checks li{overflow-wrap:break-word;min-width:0}

/* Layout container — the PDP's single-column reading measure (620px there, 560px
   here because this column carries no gallery).

   The QUESTIONS keep their 20px gutters: they are prose and need a margin to read
   against. The PLAN CARDS and the RUNG STRIP do not — Nadir's call, 2026-07-28.
   They are self-contained bordered objects, and gutters around them made the buy
   box look narrower than the page it sits in. They now run to the container edge
   and take their inset from whatever the host column gives them. */
#tb-guided .gq{
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
}
#tb-guided .guided-plans, #tb-guided [data-guided-plans]{
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
  padding-left:0;
  padding-right:0;
}


/* ---------------------------------------------------------------------------
   FOCUS  — this stylesheet is the ONLY source of focus styling on this page.
   guided.js implements roving tabindex plus arrow / Home / End navigation on
   the rung radiogroup and injects no focus CSS of its own by design, so every
   keyboard-reachable control below must be named explicitly. Never outline:none
   without a replacement.

   A 3px ink ring reads on every cream surface; controls that sit on an ink
   band (a selected rung, a filled CTA, the sticky bar) get the cream ring
   instead so it stays visible against the dark fill.
   --------------------------------------------------------------------------- */
/* ORDER MATTERS HERE. The plain `:focus` fallback is declared FIRST, because
   it has the same specificity as the `:focus-visible` rules below it — if it
   came last it would silently win the cascade and flatten every tuned
   outline-offset back to 3px. (It did, before this was reordered.) */
#tb-guided .gq__opt:focus, #tb-guided [data-guided-answer]:focus, #tb-guided .gq__skip:focus{outline:3px solid var(--g-ink);outline-offset:3px}

#tb-guided :focus-visible{
  outline:3px solid var(--g-ink);
  outline-offset:3px;
  border-radius:var(--g-radius);
}

/* The three controls the engine requires by name. */

#tb-guided [data-guided-answer]:focus-visible, #tb-guided .gq__skip:focus-visible{
  outline:3px solid var(--g-ink);
  outline-offset:3px;
}
/* Filled CTAs are dark; the sticky bar is darker still. */
#tb-guided .gplan__cta:focus-visible, #tb-guided [data-guided-sticky] .gplan__cta:focus-visible{
  outline-color:var(--g-cream);
  outline-offset:2px;
}

/* Withdraw the fallback ring only where :focus-visible IS understood, so a
   mouse click never leaves a ring behind. Safe at any position in the block —
   :focus-visible and :not(:focus-visible) can never both match. */
#tb-guided .gq__opt:focus:not(:focus-visible), #tb-guided [data-guided-answer]:focus:not(:focus-visible), #tb-guided .gq__skip:focus:not(:focus-visible){outline:none}


/* ===========================================================================
   A. THE TWO QUESTIONS
   The first thing a cold visitor sees. NO price renders anywhere in this block
   — the gate in section D is what guarantees that, this block simply has
   nothing priced in it.
   =========================================================================== */
#tb-guided .gq{padding:6px 0 4px}

/* The "QUESTION 1 OF 2" counter is gone: both questions are on screen at once now,
   so a step counter above each one was both wrong (it read "1 of 2" twice) and
   pointless — he can see how many there are. */

#tb-guided .gq__h{
  font-size:14.5px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:normal;
  margin:0 0 8px;
}

/* PILLS. Two short labels side by side read as one quick choice; the previous
   full-width cards with a radio dot and sub-copy read as a form, and a form is
   the wrong ritual for a two-second question. The sentence that used to be
   sub-copy now lands UNDER the row once he answers (.gq__after) — it confirms
   his choice instead of pre-arguing it. */
#tb-guided .gq__opts{display:flex;flex-wrap:wrap;gap:8px;margin:0}
#tb-guided .gq__opt{
  flex:1 1 auto;
  white-space:nowrap;
  min-height:var(--g-tap);
  padding:14px 18px;
  background:var(--g-surface);
  border:1.5px solid var(--g-line-2);
  border-radius:var(--g-pill);
  font-size:14.5px;
  font-weight:700;
  line-height:1.25;
  color:var(--g-ink);
  text-align:center;
  transition:border-color var(--g-dur) var(--g-ease),
             background var(--g-dur) var(--g-ease),
             color var(--g-dur) var(--g-ease);
}
#tb-guided .gq__opt:hover{border-color:var(--g-ink)}

/* SELECTED: an ink fill. On a pill this is unmistakable at a glance and needs no
   dot — the shape is the control. Border weight carries the non-colour cue. */
#tb-guided .gq__opt[aria-checked="true"], #tb-guided .gq__opt[aria-pressed="true"], #tb-guided .gq__opt[data-selected="true"]{
  border-color:var(--g-ink);
  border-width:2.5px;
  background:var(--g-ink);
  color:var(--g-cream);
  padding:13px 17px;              /* holds position against the +1px border */
}

/* SKIP. Quieter than the options by shape — a plain underlined control, not a
   card — but NOT quieter by contrast: ink-2 at 12.9:1 with a permanent
   underline and a full 48px target. It is a branch we measure, so it has to be
   genuinely findable. */
#tb-guided .gq__skip{
  display:block;
  width:100%;
  min-height:var(--g-tap);
  margin:14px 0 0;
  padding:13px 8px;
  background:none;
  border:none;
  text-align:center;
  font-size:15px;
  font-weight:600;
  color:var(--g-ink-2);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  transition:color var(--g-dur) var(--g-ease);
}
#tb-guided .gq__skip:hover{color:var(--g-accent-ink);text-decoration-thickness:2px}


/* ===========================================================================
   B. PLAN CARDS
   Descendant of the PDP buy box: .planbar ink strip -> .planbody -> title with
   .save-pill -> .pprice (msrp / now / per) -> .planmeta -> .planchecks -> CTA.
   Deviation from the PDP on purpose: the OUTFIT LINE is the headline and is
   set larger than the price, because this page leads with outfits, not plan
   names and not dollars.
   =========================================================================== */
#tb-guided .guided-plans, #tb-guided [data-guided-plans]{
  gap:14px;
  margin-top:20px;
  /* NOTE: `display` is deliberately NOT set here. Section D owns it, so the
     default state of this container is display:none and a stylesheet that
     half-applies can never leak a price. */
}

#tb-guided .gplan{
  position:relative;
  background:var(--g-surface);
  border:1.5px solid var(--g-line);
  border-radius:var(--g-radius);
  box-shadow:var(--g-shadow);
  overflow:hidden;                 /* clips the banner to the card corners */
  transition:border-color var(--g-dur) var(--g-ease),
             box-shadow var(--g-dur) var(--g-ease),
             transform var(--g-dur) var(--g-ease);
}

#tb-guided .gplan__body{padding:16px 18px 18px}

#tb-guided .gplan__cadence{
  margin-top:6px;
  font-size:15px;
  line-height:1.4;
  color:var(--g-ink-2);
}

/* Price row — the PDP's .pprice, one step down in size so the outfit line
   stays dominant. */
#tb-guided .gplan__price{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px;
  margin-top:14px;
}
#tb-guided .gplan__msrp{
  font-size:16px;
  font-weight:700;
  color:var(--g-muted);
  text-decoration:line-through;
  text-decoration-thickness:1.5px;
}
#tb-guided .gplan__now{
  font-size:22px;
  font-weight:900;
  letter-spacing:-.02em;
  color:var(--g-ink);
}
#tb-guided .gplan__per{font-size:14px;font-weight:600;color:var(--g-muted)}

/* Meta row — the PDP's .planmeta: billing sentence left, mono per-outfit right. */
#tb-guided .gplan__meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:4px 12px;
  margin-top:6px;
}
#tb-guided .gplan__billing{
  flex:1 1 200px;
  font-size:13px;
  line-height:1.45;
  color:var(--g-muted);
}
#tb-guided .gplan__peroutfit{
  flex:0 0 auto;
  font-family:var(--g-mono);
  font-size:12px;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--g-accent-ink);
  white-space:nowrap;
}

/* Checks — the PDP's .planchecks. The tick is drawn in CSS (two borders,
   rotated) because the engine emits bare <li> with no icon sprite. */
#tb-guided .gplan__checks{
  display:grid;
  gap:9px;
  margin-top:15px;
  padding-top:14px;
  border-top:1px solid var(--g-line);
}
#tb-guided .gplan__checks li{
  position:relative;
  padding-left:26px;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  color:var(--g-ink-2);
}
/* Typed marks. The tick was previously drawn on EVERY <li>, which would have put a
   green check beside "No welcome kit" the moment the engine started emitting
   crosses. Both marks are CSS-drawn (two borders, rotated) because the engine
   emits bare <li> with no icon sprite. */
#tb-guided .gplan__ck--y::before{
  content:"";
  position:absolute;
  left:2px;
  top:3px;
  width:11px;
  height:6px;
  border-left:2.2px solid var(--g-good);
  border-bottom:2.2px solid var(--g-good);
  transform:rotate(-45deg);
}
#tb-guided .gplan__ck--n::before, #tb-guided .gplan__ck--n::after{
  content:"";
  position:absolute;
  left:2px;
  top:8px;
  width:13px;
  height:0;
  border-top:2.2px solid var(--g-danger, #b3261e);
}
#tb-guided .gplan__ck--n::before{transform:rotate(45deg)}
#tb-guided .gplan__ck--n::after{transform:rotate(-45deg)}
/* A cross is a limit, not an alarm — the text cools, the mark carries the meaning. */
#tb-guided .gplan__ck--n{color:var(--g-muted)}

/* CTA — the PDP's .btn: round pill, uppercase, wide tracking, full width. */
#tb-guided .gplan__cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  min-height:var(--g-tap);
  margin-top:18px;
  padding:17px 22px;
  background:var(--g-cta);
  color:#fff;
  border:2px solid var(--g-cta);
  border-radius:var(--g-pill);
  font-size:15px;
  font-weight:800;
  letter-spacing:.04em;
  line-height:1.15;
  text-transform:uppercase;
  text-align:center;
  box-shadow:0 8px 22px rgba(191,79,42,.26);
  transition:background var(--g-dur) var(--g-ease),
             border-color var(--g-dur) var(--g-ease),
             transform 90ms var(--g-ease);
}
#tb-guided .gplan__cta:hover{
  background:var(--g-cta-hover);
  border-color:var(--g-cta-hover);
}
#tb-guided .gplan__cta:active{transform:translateY(1px)}

/* ---- PRIMARY: visually dominant. It is what the sticky CTA acts on. ---- */
#tb-guided .gplan[data-guided-card="primary"]{
  border-width:2px;
  border-color:var(--g-ink);
}

/* ---- SELECTED: the promotion. ---------------------------------------------
   Written LAST on purpose. `.gplan[data-selected="true"]` and `.gplan[data-guided-card=
   "escape"]` are equal specificity, so source order decides — which means
   selecting the escape card genuinely promotes it to the dominant treatment
   instead of half-inheriting the secondary one.

   The treatment is the one BOTH references already agree on: the PDP's
   `.plan.active` (clay border + 8% clay wash) and the prototype's
   `.plan-card.selected`. Primary-ness is an ink border; chosen-ness is a clay
   border plus wash — so "dominant" and "chosen" stay two readable states
   rather than one. Non-colour cues on top: ring, border weight, 2px lift,
   restored ink banner, filled CTA. ----------------------------------------- */
#tb-guided .gplan[data-selected="true"]{
  border-width:2px;
  border-color:var(--g-accent);
  background:rgba(217,122,84,.08);
  box-shadow:0 0 0 4px rgba(217,122,84,.22), var(--g-shadow);
  transform:translateY(-2px);
}
/* (removed) the selected card used to drop its price to 22px — a leftover from the
   old skin, and backwards: it made choosing a plan shrink its own price. */
#tb-guided .gplan[data-selected="true"] .gplan__cta{
  background:var(--g-cta);
  color:#fff;
  border-color:var(--g-cta);
  box-shadow:0 8px 22px rgba(191,79,42,.26);
}
#tb-guided .gplan[data-selected="true"] .gplan__cta:hover{
  background:var(--g-cta-hover);
  border-color:var(--g-cta-hover);
  color:#fff;
}

/* OPTIONAL, from the prototype's `.answer-chips` / `.chip`: after answering,
   the two answers persist as small editable chips. That was the prototype's
   real "which did I pick, and can I change it" affordance and Nadir signed off
   on it. The CONTRACT does not name a hook for it, so nothing depends on this
   block — but if the engine ships chips they land in the family. */
#tb-guided .gq__chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-width:560px;
  margin:0 auto 14px;
  padding:0 20px;
}
#tb-guided .gq__chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:36px;
  padding:7px 13px;
  background:var(--g-surface);
  border:1px solid var(--g-ink);
  border-radius:var(--g-pill);
  font-family:inherit;
  font-size:12.5px;
  font-weight:600;
  color:var(--g-ink-2);
  cursor:pointer;
  transition:background var(--g-dur) var(--g-ease);
}
#tb-guided .gq__chip b{font-weight:800;color:var(--g-ink)}
#tb-guided .gq__chip:hover{background:rgba(217,122,84,.12)}


/* ===========================================================================
   D. THE STATE GATE  — rule 1 of the spec, in CSS
   DEFAULT-DENY. The priced surfaces are hidden at base, not merely hidden on
   [data-state="asking"], so they are also invisible before guided.js has run,
   if data-state is missing, misspelled, or mid-swap. There is therefore no
   frame in which a price can flash. The explicit `asking` rule is kept as well
   because the CONTRACT names it, and it also wins on specificity if anything
   downstream ever tries to force these visible.

   This is the SECOND lock, and only ever the second. guided.js builds no card
   markup and keeps the sticky bar fully detached from the DOM while asking —
   a CSS-only gate dies with the stylesheet, so neither lock is load-bearing
   alone. These rules matter for the window between markup insertion and the
   engine's own state write, and for the case where the engine never runs.
   =========================================================================== */
#tb-guided .guided-plans, #tb-guided [data-guided-plans], #tb-guided [data-guided-sticky]{display:none}

#tb-guided[data-state="asking"] .guided-plans, #tb-guided[data-state="asking"] [data-guided-plans], #tb-guided[data-state="asking"] [data-guided-sticky], #tb-guided[data-state="asking"] .gplan{display:none}

/* The only three states that may show a price. */
#tb-guided[data-state="answered"] .guided-plans, #tb-guided[data-state="answered"] [data-guided-plans], #tb-guided[data-state="skipped"] .guided-plans, #tb-guided[data-state="skipped"] [data-guided-plans], #tb-guided[data-state="seeded"] .guided-plans, #tb-guided[data-state="seeded"] [data-guided-plans]{display:grid}

#tb-guided[data-state="answered"] [data-guided-sticky], #tb-guided[data-state="skipped"] [data-guided-sticky], #tb-guided[data-state="seeded"] [data-guided-sticky]{display:block}

/* Reserve room for the sticky bar only once it exists. */
#tb-guided[data-state="answered"], #tb-guided[data-state="skipped"], #tb-guided[data-state="seeded"]{
  padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px));
}


/* ===========================================================================
   E. STICKY BAR
   Modelled on the PDP's .sticky-cta: fixed to the bottom, ink band, one
   full-width CTA, safe-area padding for the iPhone home indicator. Appears
   only once the questions are answered (section D owns that).
   =========================================================================== */
#tb-guided [data-guided-sticky]{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:950;
  background:var(--g-ink-band);
  color:var(--g-cream);
  padding:9px 14px;
  padding-bottom:calc(9px + env(safe-area-inset-bottom, 0px));
  box-shadow:0 -10px 30px rgba(19,29,40,.18);
}
#tb-guided [data-guided-sticky] .gsticky__inner{
  display:flex;
  align-items:center;
  gap:12px;
  max-width:600px;
  margin:0 auto;
}
#tb-guided [data-guided-sticky] .gsticky__msg{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
  flex:1 1 auto;
}
#tb-guided [data-guided-sticky] .gsticky__plan{
  font-size:13.5px;
  font-weight:800;
  line-height:1.25;
  color:var(--g-cream);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#tb-guided [data-guided-sticky] .gsticky__price{
  font-family:var(--g-mono);
  font-size:12px;
  font-weight:700;
  line-height:1.25;
  color:var(--g-accent-lit);
}
/* The bar's CTA is compact and never full-width — it shares the row. */
#tb-guided [data-guided-sticky] .gplan__cta{
  width:auto;
  flex:0 0 auto;
  margin-top:0;
  padding:13px 20px;
  min-height:44px;
  font-size:13.5px;
  box-shadow:none;
}
/* If the engine emits only a CTA and no message block, let it fill the bar. */
#tb-guided [data-guided-sticky] .gplan__cta:only-child{width:100%;flex:1 1 auto}


/* ===========================================================================
   F. MOTION
   An answer arriving, not a page repaint: a short rise on the cards and a
   short slide on the bar, both 200ms on the PDP's easing curve, with a 50ms
   stagger so the escape card reads as arriving after the primary. Nothing
   moves more than 10px and nothing loops.
   =========================================================================== */
@keyframes tbg-rise{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@keyframes tbg-slide-up{
  from{transform:translateY(110%)}
  to{transform:translateY(0)}
}

#tb-guided[data-state="answered"] .gplan, #tb-guided[data-state="skipped"] .gplan, #tb-guided[data-state="seeded"] .gplan{
  animation:tbg-rise var(--g-dur) var(--g-ease) both;
}
#tb-guided[data-state="answered"] .gplan:nth-child(2), #tb-guided[data-state="skipped"] .gplan:nth-child(2), #tb-guided[data-state="seeded"] .gplan:nth-child(2){animation-delay:55ms}

#tb-guided[data-state="answered"] [data-guided-sticky], #tb-guided[data-state="skipped"] [data-guided-sticky], #tb-guided[data-state="seeded"] [data-guided-sticky]{
  animation:tbg-slide-up 220ms var(--g-ease) both;
}

/* A selected card lifts 2px; suppress that lift while it is also arriving, or
   the animation's transform and the state transform fight. */
#tb-guided .gplan[data-selected="true"]{will-change:transform}


/* ===========================================================================
   G. WIDER SCREENS
   Mobile is the majority of this traffic, so these are additive only. The
   plan cards stay a single stacked column at every width: stacking is what
   preserves the primary/escape rank, and side-by-side would read as a choice
   between equals.
   =========================================================================== */
@media (min-width:560px){
  #tb-guided .gq__opts{grid-template-columns:1fr 1fr;gap:14px}
  #tb-guided .gq__opt{padding:19px 20px 19px 50px}
  #tb-guided .gq__opt[aria-checked="true"], #tb-guided .gq__opt[aria-pressed="true"], #tb-guided .gq__opt[data-selected="true"], #tb-guided .gq__opt.is-selected{padding:18.5px 19.5px 18.5px 49.5px}
}

@media (min-width:760px){
  #tb-guided{padding-top:34px}
  #tb-guided .gq{padding:6px 0 10px}
  #tb-guided .gplan__body{padding:20px 22px 22px}
  #tb-guided .gplan__cadence{font-size:15.5px}
  #tb-guided [data-guided-sticky]{padding:11px 20px}
}


/* ===========================================================================
   H. REDUCED MOTION
   Motion removed entirely, not merely shortened. `both` fill on the reveal
   animations means they must be cancelled with animation:none, otherwise a
   cancelled animation would leave the cards stuck at opacity:0.
   =========================================================================== */
@media (prefers-reduced-motion:reduce){
  #tb-guided *, #tb-guided *::before, #tb-guided *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
  #tb-guided .gplan, #tb-guided [data-guided-sticky]{opacity:1;transform:none}
  #tb-guided .gplan[data-selected="true"]{transform:none}
}

/* ===========================================================================
   G. THE REV-8 CARD  (spec §5/§6, 2026-07-29)

   The card is a top-to-bottom STACK, not a name-left/price-right split. Freed
   from a right-hand column the price gets a whole line and stops competing with
   the headline for width, so the stack reads by weight: headline, cadence,
   PRICE, then the small facts about that same money.

   Only the SELECTED card carries its checks and kit tiles. Two open cards meant
   two bullet lists and two gift grids competing for one screen, which pushed the
   CTA below the fold on a phone.
   =========================================================================== */

/* The label above the pair ("Subscribe and save:"). */
#tb-guided .gplans__label{
  margin:0 0 10px;
  font-size:15px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--g-ink);
}
#tb-guided .gplans__group{display:grid;gap:10px}

/* ---- the SAVE strip: fused to the top of the card, not floating on it -------
   A small floating tag read as stuck on afterwards. Full-width and welded to the
   card's top edge, it reads as part of the offer. Commitment rung only — it is
   the ranking device, so a second one would rank nothing. */
#tb-guided .gplan__strip{
  padding:9px 12px;
  background:var(--g-ink);
  color:var(--g-cream);
  font-family:var(--g-mono);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.11em;
  line-height:1.2;
  text-transform:uppercase;
  text-align:center;
}

/* ---- the card body IS the radio ------------------------------------------ */
#tb-guided .gplan__body{
  display:block;
  width:100%;
  margin:0;
  padding:15px 16px 17px;
  background:none;
  border:0;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
#tb-guided .gplan__top{display:flex;gap:11px;align-items:center}
#tb-guided .gplan__radio{
  flex:0 0 20px;
  height:20px;
  border-radius:var(--g-pill);
  border:1.5px solid var(--g-line-2);
  background:#fff;
  /* The fill is an INSET SHADOW, not a fatter border. Animating border-width
     re-runs layout on every frame of a control the visitor taps repeatedly;
     box-shadow is composited and never reflows. Same result to the eye — 6.5px
     of ink around a 7px white centre — at no layout cost. */
  box-shadow:inset 0 0 0 0 var(--g-ink);
  transition:box-shadow var(--g-dur) var(--g-ease),border-color var(--g-dur) var(--g-ease);
}
#tb-guided .gplan[data-selected="true"] .gplan__radio{
  border-color:var(--g-ink);
  box-shadow:inset 0 0 0 5px var(--g-ink);
}
#tb-guided .gplan__mid{
  flex:1;
  min-width:0;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
/* THE HEADLINE — the outfit count, alone. Plan names are our vocabulary. */
#tb-guided .gplan__nm{
  font-size:17px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--g-ink);
}
/* The tag. "Lowest price" / "Most flexible" argue on different axes, which are
   the two answers to Q2 — so it hands his own words back rather than reopening
   the choice. Quiet by construction: mono, small, accent ink, no chip. */
#tb-guided .gplan__tag{
  flex:0 0 auto;
  font-family:var(--g-mono);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--g-accent-ink);
}

/* Everything below the radio hangs on the radio's text column. */
#tb-guided .gplan__cadence, #tb-guided .gplan__price, #tb-guided .gplan__meta, #tb-guided .gplan__checks, #tb-guided .gplan .plangifts{margin-left:31px}

#tb-guided .gplan__cadence{display:block;margin-top:5px;font-size:13px}
#tb-guided .gplan__price{display:flex;align-items:baseline;gap:9px;margin-top:10px}
#tb-guided .gplan__meta{display:flex}

/* The kit's own value, so "$159 value" on the tiles and "worth $159" in the
   bullet come from one derived figure and cannot drift apart. */
#tb-guided .plangifts__v{font-weight:600;color:var(--g-muted)}

/* ---- ONE BOX: a link, not a card ----------------------------------------- */
#tb-guided .gonetime{margin-top:4px}
#tb-guided .gonetime__link{
  display:block;
  width:100%;
  min-height:var(--g-tap);
  padding:14px 6px;
  background:none;
  border:0;
  font:inherit;
  font-size:14px;
  color:var(--g-muted);
  text-align:center;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
#tb-guided .gonetime__link[aria-checked="true"]{
  color:var(--g-ink);
  font-weight:700;
  text-decoration-thickness:2px;
}
#tb-guided .gonetime__body{
  padding:13px 15px 15px;
  background:var(--g-surface);
  border:1.5px solid var(--g-line-2);
  border-radius:var(--g-radius);
}
/* No radio dot in the expanded body, so nothing hangs off one. */
#tb-guided .gonetime__body .gplan__cadence, #tb-guided .gonetime__body .gplan__price, #tb-guided .gonetime__body .gplan__meta, #tb-guided .gonetime__body .gplan__checks{margin-left:0}
#tb-guided .gonetime__body .gplan__nm{display:block}

/* ---- selection ------------------------------------------------------------
   Chosen-ness is border weight + a white lift, NOT a colour wash: with only two
   cards and a filled radio already saying which is chosen, a clay wash on top
   was three cues for one fact. Non-colour cues carry it. */
#tb-guided .gplan[data-selected="true"]{
  border-width:2.5px;
  border-color:var(--g-ink);
  background:#fff;
}
#tb-guided .gplan[data-selected="false"]:hover{border-color:var(--g-line-2)}

/* The CTA sits under the group and acts on the selection, so it needs the
   group's top margin rather than a card's. */
#tb-guided .guided-plans > .gplan__cta, #tb-guided [data-guided-plans] > .gplan__cta{margin-top:16px}

@media (min-width:768px){
  #tb-guided .gplan__body{padding:18px 20px 20px}
  #tb-guided .gplan__nm{font-size:18px}
  #tb-guided .gplan__cadence{font-size:13.5px}
}

/* ---- narrow-screen fixes found in QA at 375px ------------------------------ */

/* The billed total and the per-outfit figure are ONE fact about the same money,
   so they share a line. `flex:1 1 200px` on the billing text forced a wrap at
   375px once the 31px radio indent was taken out of the measure, which split
   them into two stacked rows and lost the relationship. */
#tb-guided .gplan__billing{flex:0 1 auto;font-size:12px}
#tb-guided .gplan__peroutfit{font-size:11.5px}

/* Gift tiles. Four across is right — the kit reads as a SET, and two-up doubled
   the card's height for the same four items. What was actually wrong at 375px was
   the inherited aspect-ratio:1/1 image (a ~70px square per tile) plus
   overflow-wrap:break-word, which broke labels mid-syllable ("Free Shippin g").
   Cap the image the way the prototype did and let words break only at spaces. */
#tb-guided .plangifts .gift img{aspect-ratio:auto;height:40px;object-fit:contain;margin-bottom:4px}
#tb-guided .plangifts .gift{padding:7px 4px 8px}
#tb-guided .plangifts .gift b{
  font-size:9.5px;
  line-height:1.2;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:auto;
}
#tb-guided .plangifts .gift s{font-size:10px}

/* ===========================================================================
   H. D5 FIDELITY PASS  (2026-07-29)

   Section G brought the rev-8 STRUCTURE across but let the card keep the page's
   inherited PDP type scale, so it read as the right layout in the wrong skin.
   These are the measured deltas against the approved prototypes
   (_craft-d5.html / _craft-annual.html), matched value for value.
   =========================================================================== */

/* Nothing inside the buy box may inherit the HOST page's face. Elements that
   declared --g-sans got Inter; ones that only inherited were picking up the
   Webflow page's aktiv-grotesk, which put two typefaces inside one card. */
#tb-guided .gq, #tb-guided .guided-plans, #tb-guided [data-guided-plans], #tb-guided [data-guided-sticky]{font-family:var(--g-sans)}

/* The line under the pills, once answered. */
#tb-guided .gq__after{
  margin:8px 0 0;
  font-size:13px;
  line-height:1.45;
  color:var(--g-muted);
}
#tb-guided .gq{margin-bottom:18px}


/* ---- card type scale, matched to the prototypes ---- */
#tb-guided .gplans__label{font-size:14.5px;letter-spacing:normal}
#tb-guided .gplan__nm{font-size:16px;letter-spacing:normal;line-height:1.2}
#tb-guided .gplan__cadence{font-size:12.5px;line-height:1.45;color:var(--g-muted)}

/* THE PRICE. Mono, 28px — this is the change that makes the card read as the
   approved design. Prices are mono brand-wide (the design system reserves the
   mono face for numerals), and at 28px against a 16px headline the price finally
   dominates the card the way "the price gets a whole line" promised. */
#tb-guided .gplan__now{
  font-family:var(--g-mono);
  font-size:28px;
  font-weight:700;
  line-height:1;
  letter-spacing:normal;
}
#tb-guided .gplan__per{
  font-family:var(--g-mono);
  font-size:13px;
  font-weight:500;
  letter-spacing:normal;
}
#tb-guided .gplan__msrp{
  font-family:var(--g-mono);
  font-size:15px;
  font-weight:400;
  letter-spacing:normal;
}

/* Billed total and per-outfit sit TOGETHER on the left. space-between threw them
   to opposite edges of the card, which read as two unrelated numbers instead of
   two facts about the same money. */
#tb-guided .gplan__meta{justify-content:flex-start;gap:4px 10px}
#tb-guided .gplan__billing{font-size:11.5px;line-height:1.3;flex:0 1 auto}
#tb-guided .gplan__peroutfit{
  font-size:11.5px;
  font-weight:700;
  text-transform:none;      /* "$50 an outfit", not "$50 AN OUTFIT" */
  letter-spacing:normal;
}

/* No rule above the checks — the prototypes divide only ABOVE the kit, so the
   bullets read as part of the price block rather than a separate panel. */
#tb-guided .gplan__checks{
  border-top:0;
  padding-top:0;
  margin-top:12px;
  gap:7px;
  font-family:var(--g-sans);
}
#tb-guided .gplan__ck{font-size:13.5px;font-weight:400;line-height:1.4;color:var(--g-ink)}
#tb-guided .gplan .plangifts{margin-top:12px;padding-top:11px;border-top:1px solid var(--g-line)}
#tb-guided .plangifts__h{font-size:12.5px;font-weight:700;line-height:1.3;color:var(--g-ink)}
#tb-guided .plangifts__v{font-weight:700}

@media (min-width:768px){
  #tb-guided .gplan__nm{font-size:16px}
  #tb-guided .gplan__cadence{font-size:12.5px}
}

/* ===========================================================================
   I. QUESTION BLOCK — spacing + skip  (Nadir, 2026-07-29)
   =========================================================================== */

/* 6.3 — the rhythm. The heading sat 16px off its own pills (inherited from when
   it was a 34px display line) while the groups sat only 18px apart, so each
   question read as loosely bound to its own answers and tightly bound to the
   next question. Inverted: heading close to its pills, clear air between groups. */
#tb-guided .gq__h{margin:0 0 10px}
#tb-guided .gq{margin:0 0 22px}
#tb-guided .gq + .gq{margin-top:0}
#tb-guided .gq__after{margin:10px 0 0}

/* The questions are the first thing in the buy box now that the proof list is
   hidden, so they carry their own top margin rather than inheriting the list's. */
#tb-guided .gq-wrap{margin-top:18px}

/* 2 + 6.5 — skip is the path we least want taken: tertiary, small, light, and
   quiet. It was reading as a peer of the pills at inherited body size. */
#tb-guided .gq__skip{
  display:block;
  width:auto;
  margin:2px auto 0;
  padding:10px 8px;
  background:none;
  border:0;
  font-size:12.5px;
  font-weight:400;
  line-height:1.4;
  color:var(--g-muted);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
#tb-guided .gq__skip:hover{color:var(--g-ink)}

/* The [hidden] attribute is only a UA rule (`display:none`) with almost no
   specificity, so any scoped `display:` here silently beat it — the hidden proof
   list and the gated discount badge both kept rendering. The engine hides things
   by setting `hidden`, so that attribute has to win inside the buy box. */
#tb-guided [hidden]{display:none !important}

/* ===========================================================================
   J. PILLS ON ONE LINE  (Nadir, 2026-07-29)

   Both pills of a question must share ONE row at every width, and the label must
   still never wrap. At 375px "Being able to stop any time" plus "The lowest
   price" cannot do that at 14.5px, so the TYPE scales with the viewport and the
   horizontal padding tightens — the row is what is fixed, the type is what gives.
   =========================================================================== */
#tb-guided .gq__opts{flex-wrap:nowrap}
#tb-guided .gq__opt{
  flex:0 1 auto;
  min-width:0;
  padding:14px clamp(8px, 2.6vw, 18px);
  font-size:clamp(11.5px, 3.35vw, 14.5px);
}
#tb-guided .gq__opt[aria-checked="true"], #tb-guided .gq__opt[aria-pressed="true"], #tb-guided .gq__opt[data-selected="true"]{
  padding:13px clamp(7px, 2.6vw, 17px);
}

/* ===========================================================================
   K. BADGES, PILLS + STICKY  (Nadir, 2026-07-29)
   =========================================================================== */

/* 5 — THE TAG IS A TAB. Filled ink, mono, welded to the top-left corner of the
   card. It replaces the old full-width "SAVE n% + FREE GIFTS" band: with the
   discount now on its own pill beside the outfit count, a full-bleed band saying
   the same number was the third savings claim inside two inches. */
#tb-guided .gplan__tab{
  display:inline-block;
  padding:9px 16px;
  background:var(--g-ink);
  color:var(--g-cream);
  font-family:var(--g-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  line-height:1;
  text-transform:uppercase;
  border-radius:0 0 var(--g-pill) 0;   /* square into the corner, rounded away from it */
}

/* 6 — the savings pill, back beside the outfit count. Clay fill, white text: the
   one place on the card where the accent is a FILL rather than a line, because
   it is the one number he is meant to feel rather than read. */
#tb-guided .gplan__save{
  flex:0 0 auto;
  padding:5px 11px;
  background:var(--g-cta);
  color:#fff;
  border-radius:var(--g-pill);
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.01em;
  line-height:1.15;
  white-space:nowrap;
}

/* 7 — the gift tiles lose their wrapper. The tan card around each gift fought the
   white card it sat inside and boxed four small images into four smaller boxes.
   The images ARE the tiles now. */
#tb-guided .plangifts .gift{
  background:none;
  border:0;
  border-radius:0;
  padding:0;
}
#tb-guided .plangifts .gift img{height:52px;margin-bottom:5px}
#tb-guided .plangifts .gift-grid{gap:12px 10px}

/* 2 — sticky bar mirrors the card: outfit count + the same discount, then the same
   per-box price. */
#tb-guided [data-guided-sticky] .gsticky__save{
  font-family:var(--g-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--g-accent-lit);
}
#tb-guided [data-guided-sticky] .gsticky__price{font-size:14px}
#tb-guided [data-guided-sticky] .gsticky__per{
  font-size:11px;
  font-weight:500;
  color:var(--g-cream-2);
}

/* The scroll-on-unlock lands the card at viewport top, which puts its tab under
   the host's sticky header. Reserve for it so the tag and the price are the first
   things he sees, not the second and third. */
#tb-guided .gplan{scroll-margin-top:92px}

/* The sticky bar's plan line was truncating to "9 outfits (Sa..." — nowrap plus
   ellipsis against a CTA that got longer. The message column may wrap now, and the
   CTA gives up some padding on narrow screens rather than eating the sentence. */
#tb-guided [data-guided-sticky] .gsticky__plan{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}
@media (max-width:479px){
  /* The bar has three things competing for 375px: the plan, the chevron and a CTA
     that now reads CHECKOUT & BUILD MY BOX. The CTA gives up padding and tracking
     first, because the plan line wrapping to two rows is what actually looks broken. */
  #tb-guided [data-guided-sticky] .gplan__cta{
    padding-left:12px;
    padding-right:12px;
    font-size:11.5px;
    letter-spacing:.01em;
  }
  #tb-guided [data-guided-sticky] .gsticky__plan{font-size:12px;white-space:nowrap}
  #tb-guided [data-guided-sticky] .gsticky__save{font-size:10.5px}
  #tb-guided [data-guided-sticky] .gsticky__price{font-size:13px}
  #tb-guided .gsticky__toggle{gap:6px}
}

/* ===========================================================================
   L. CARD INTERIOR — reclaim the radio gutter  (Nadir, 2026-07-29)
   =========================================================================== */

/* Everything below the first line used to hang on a 31px indent so it lined up
   past the radio. That gutter ran the full height of the card — six bullets, the
   kit heading and four gift tiles all squeezed into ~90% of the width to stay
   clear of a 20px dot at the very top. The radio only needs its own row. */
#tb-guided .gplan__cadence, #tb-guided .gplan__price, #tb-guided .gplan__meta, #tb-guided .gplan__checks, #tb-guided .gplan .plangifts{margin-left:0}

/* The per-outfit figure pins right; the billed total holds the left. */
#tb-guided .gplan__meta{justify-content:space-between}
#tb-guided .gplan__peroutfit{margin-left:auto}

/* A hairline under the money block. Above it, what it costs; below it, what
   arrives — the cadence now opens that second half instead of interrupting the
   first. */
#tb-guided .gplan__cadence{
  margin-top:12px;
  padding-top:11px;
  border-top:1px solid var(--g-line);
}
#tb-guided .gplan__checks{margin-top:10px}

/* One line at 375px. It was wrapping "($159 value)" onto a second row, which made
   a heading look like a paragraph. */
#tb-guided .plangifts__h{font-size:11px;letter-spacing:-.005em}
#tb-guided .plangifts__v{font-weight:600}

/* ===========================================================================
   M. STICKY PLAN CONTROL + GIFT FRAMES  (Nadir, 2026-07-29)
   =========================================================================== */

/* The bar's message becomes a toggle. It still reads as text, not a form control —
   the chevron is the only affordance added, because the bar's job is still to
   close, and changing plan is the secondary action. */
#tb-guided .gsticky__ctl{position:relative;flex:1 1 auto;min-width:0}
#tb-guided .gsticky__toggle{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:4px 2px;
  background:none;
  border:0;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
#tb-guided .gsticky__chev{
  width:14px;
  height:14px;
  flex:0 0 14px;
  color:var(--g-cream-2);
  transition:transform var(--g-dur) var(--g-ease);
}
#tb-guided .gsticky__ctl[data-open="true"] .gsticky__chev{transform:rotate(180deg)}
#tb-guided .gsticky__toggle:focus-visible{outline:3px solid var(--g-cream);outline-offset:2px;border-radius:2px}

/* The menu opens UPWARD — the bar is pinned to the bottom of the viewport. */
#tb-guided .gsticky__menu{
  position:absolute;
  bottom:calc(100% + 10px);
  left:0;
  min-width:min(268px, 78vw);
  padding:6px;
  background:#fff;
  border:1px solid var(--g-line);
  border-radius:var(--g-radius);
  box-shadow:0 16px 40px rgba(19,29,40,.28);
  z-index:2;
}
#tb-guided .gsticky__menu[hidden]{display:none}
#tb-guided .gsticky__opt{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-height:44px;
  padding:11px 12px;
  background:none;
  border:0;
  border-radius:var(--g-radius);
  font:inherit;
  color:var(--g-ink);
  text-align:left;
  cursor:pointer;
}
#tb-guided .gsticky__opt:hover{background:var(--g-surface)}
#tb-guided .gsticky__opt[aria-selected="true"]{background:var(--g-surface-2)}
#tb-guided .gsticky__optname{font-size:14px;font-weight:700;min-width:0}
#tb-guided .gsticky__optprice{
  flex:0 0 auto;
  font-family:var(--g-mono);
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}
#tb-guided .gsticky__optprice span{font-size:10.5px;font-weight:500;color:var(--g-muted)}

/* ---- gift frames ----------------------------------------------------------
   The art is 1000x1000 with the product sitting inside a wide margin, so
   object-fit:contain drew a small product floating in a big empty box — the
   "space between the rows" was inside the images, not between them. The frame is
   square and the image overfills it, cropping that margin and letting the product
   itself get bigger in the same footprint. */
#tb-guided .plangifts .gift__ph{
  display:block;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:2px;
  margin-bottom:6px;
}
#tb-guided .plangifts .gift__ph img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  transform:scale(.96);
  margin:0;
}
#tb-guided .plangifts .gift-grid{gap:14px 10px}
#tb-guided .gsticky__optsub{font-weight:500;color:var(--g-muted)}

/* ===========================================================================
   N. ABOVE THE FOLD + "BUILD YOUR BOX"  (Woodie's review, 2026-08-03)

   Three problems, one cause: the page never said what it sells, nothing broke
   the fold, and the questions looked like page furniture so people scrolled
   past them. Fixed in that order.
   =========================================================================== */

/* ---- what this is, above the photo ---- */
#tb-guided .product-intro{
  max-width:560px;
  margin:0 auto 22px;
  padding:0 20px;
}
#tb-guided .product-intro__name{
  margin:0 0 8px;
  font-size:clamp(28px,7.2vw,38px);
  font-weight:900;
  line-height:1.05;
  letter-spacing:-.025em;
  color:var(--g-ink);
  text-transform:none;          /* beats Webflow's h1-h6 capitalize */
  text-wrap:balance;
}
#tb-guided .product-intro__sub{
  margin:0 0 14px;
  font-size:16px;
  font-weight:600;
  line-height:1.4;
  color:var(--g-ink-2);
}
#tb-guided .product-intro .proof-list{
  display:grid;
  gap:8px;
  margin:0 0 18px;
  padding:0;
  list-style:none;
}
#tb-guided .product-intro .proof-list li{
  display:flex;
  gap:9px;
  align-items:flex-start;
  font-size:15px;
  line-height:1.35;
  color:var(--g-ink-2);
}
#tb-guided .product-intro .proof-list svg{
  width:17px;
  height:17px;
  flex:0 0 17px;
  margin-top:1px;
  color:var(--g-good);
}
#tb-guided .product-intro__cta{width:100%;text-align:center}

/* ---- the questions, as a step you are inside of ---------------------------
   A tinted panel with a hard top edge. This is the "alternating colour block"
   Woodie asked for, doing double duty: it breaks the fold AND it is what makes
   the questions read as a stage rather than as two more paragraphs. */
#tb-guided .gq-wrap{
  margin-top:22px;
  padding:20px 20px 22px;
  background:var(--g-surface-2);
  border-top:2px solid var(--g-ink);
  border-radius:var(--g-radius);
}
#tb-guided .gq-wrap .gq{padding-left:0;padding-right:0}

#tb-guided .gq-head{margin:0 0 18px}
#tb-guided .gq-head__step{
  display:inline-block;
  margin:0 0 8px;
  padding:5px 10px;
  background:var(--g-ink);
  color:var(--g-cream);
  border-radius:var(--g-pill);
  font-family:var(--g-mono);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  line-height:1;
}
#tb-guided .gq-head__step[data-complete="true"]{background:var(--g-good)}
#tb-guided .gq-head__h{
  margin:0 0 4px;
  font-size:clamp(22px,5.6vw,26px);
  font-weight:900;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--g-ink);
  text-transform:none;
}
#tb-guided .gq-head__sub{
  margin:0;
  font-size:14px;
  line-height:1.4;
  color:var(--g-muted);
}

/* On the tan panel the unselected pill needs a lighter fill to stay legible. */
#tb-guided .gq-wrap .gq__opt{background:#fff}
#tb-guided .gq-wrap .gq__opt[aria-checked="true"]{background:var(--g-ink)}

/* The answer line is now the box filling up, so it earns more than muted grey. */
#tb-guided .gq__after{
  font-size:13.5px;
  font-weight:600;
  color:var(--g-accent-ink);
}
/* .proof-list li is a flex row, so every text run and <b> inside it became its own
   flex item — the stats line shattered into four columns. One span = one item. */
#tb-guided .product-intro .proof-list li > span{min-width:0}
#tb-guided .product-intro .proof-list b{font-weight:800;color:var(--g-ink)}

/* Q2's labels got materially longer (Woodie: name the UNIT — "Lowest price per box"
   / "More flexibility, higher price per box"). Two of those cannot share a 375px row
   without either wrapping or clipping, and they were clipping. The ROW gives way
   before the words do: pills wrap to their own full-width line when they do not fit,
   and sit side by side the moment there is room. Accuracy over symmetry — this is
   the question that was misleading people. */
#tb-guided .gq__opts{flex-wrap:wrap}
#tb-guided .gq__opt{flex:1 1 auto}
@media (max-width:560px){
  #tb-guided .gq__opt{flex:1 1 100%}
}

/* 3 — the intro CTA was as tall as the primary buy button. It is a scroll control,
   not the purchase, so it should not carry the same weight. */
#tb-guided .product-intro__cta{
  min-height:0;
  padding:13px 22px;
  font-size:14px;
}

/* ===========================================================================
   O. INTRO PLACEMENT + SKIP LINK  (Nadir, 2026-08-03)
   =========================================================================== */

/* 4 — no gutters on mobile. The intro is the first thing on the page and was
   sitting inset from the full-bleed photo directly beneath it. */
#tb-guided .product-intro{padding:0;margin:0 auto 20px}

/* 1 + 2 — one copy of the markup, two placements. On mobile the grid is a single
   column and source order already puts the intro above the photo. On desktop it
   moves into the right-hand column above the questions, where the gallery no
   longer separates the pitch from the ask, and the CTA is redundant because the
   questions are already on screen next to it. */
@media (min-width:980px){
  #tb-guided .product-intro{grid-column:2;grid-row:1;margin-bottom:0}
  #tb-guided .gallery-col{grid-column:1;grid-row:1 / span 2}
  #tb-guided .buybox{grid-column:2;grid-row:2}
  #tb-guided .product-grid{row-gap:20px}
  #tb-guided .product-intro__cta{display:none}
}

/* 5 — the cream band above the promo bar was an UNSTYLED SKIP LINK. Nothing in
   either stylesheet matched .skip-link, so "Skip to plans" rendered as ordinary
   text at the very top of the container and pushed the ribbon down. It is a real
   a11y control, so it is hidden until focused rather than deleted. */
#tb-guided .skip-link{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
#tb-guided .skip-link:focus, #tb-guided .skip-link:focus-visible{
  position:static;
  width:auto;height:auto;
  margin:0;padding:12px 20px;
  overflow:visible;
  clip:auto;clip-path:none;
  background:var(--g-ink);
  color:var(--g-cream);
  font-size:14px;
  font-weight:700;
  text-decoration:underline;
}

/* ===========================================================================
   P. RATING REUSE + MOBILE TIGHTENING  (Nadir, 2026-08-03)
   =========================================================================== */

/* 1 — the intro uses the existing .bb-rating design. Stars render as SVG rather
   than the unicode glyph the older strip uses (design system bans it), sized to
   match so the two are visually identical. */
#tb-guided .bb-rating__stars{display:inline-flex;align-items:center;gap:2px;line-height:1}
#tb-guided .bb-rating__stars svg{width:16px;height:16px;color:var(--accent,#d97a54)}
@media (max-width:520px){
  #tb-guided .bb-rating__stars svg{width:clamp(10.5px,2.8vw,15px);height:clamp(10.5px,2.8vw,15px)}
}
#tb-guided .product-intro .bb-rating{margin:0 0 16px}

/* 5 — the buy box's strip is now the duplicate. */
#tb-guided .bb-rating--dupe{display:none}

/* 6 — header 20% shorter. --hdr-h also drives the desktop sticky offset for the
   gallery column, so changing the token keeps those in step automatically. */
@media (max-width:979px){
  #tb-guided{--hdr-h:42px}
}

/* 2 — thumb rail: arrows flush to the thumbnails and sized to them. */
#tb-guided .thumbs-wrap{gap:0;margin-top:0;align-items:center}
#tb-guided .thumb-arrow{width:22px;height:22px;align-self:center}
#tb-guided .thumb-arrow svg{width:12px;height:12px}

/* 3 */
#tb-guided .qscroll-wrap{margin-top:12px}

/* 4 — the intro CTA and the gallery were 54px apart on mobile (34px grid gap plus
   the intro's own 20px margin), which read as a break in the page rather than a
   handoff. The gallery-to-buy-box gap is restored separately so only the seam
   that was wrong gets tightened. */
@media (max-width:979px){
  #tb-guided .product-intro{margin-bottom:0}
  #tb-guided .product-grid{row-gap:16px}
}

/* Separator dots in the rating row. A round dot rather than the older strip's 1px
   rule, and align-self keeps it centred against the cap height of the text either
   side rather than sitting on the baseline. */
/* The separator is a ::before on the label it introduces, not a sibling. As a sibling
   it was its own flex item, so a wrap could land it at the end of a line with nothing
   after it — a dangling bullet. Carried by the label, the two can never separate.
   gap:inherit keeps the space either side of the dot equal to the row's own gap at
   every breakpoint. */
#tb-guided .bb-rating__txt--dot{
  display:inline-flex;
  align-items:center;
  gap:inherit;
}
#tb-guided .bb-rating__txt--dot::before{
  content:"";
  flex:0 0 3px;
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--g-muted,#635e54);
}
/* The row now carries three facts, which will not fit one line on a phone. The older
   strip forces nowrap; the intro copy is allowed to wrap so it can never push a
   horizontal scrollbar onto a 375px viewport. */
@media (max-width:560px){
  #tb-guided .product-intro .bb-rating{
    flex-wrap:wrap;
    row-gap:5px;
  }
  /* The CONTAINER wraps; each label does not. Setting white-space:normal on the row
     let "39,104 reviews" break after the number, fragmenting three facts across five
     lines. Items stay intact and break between each other instead. */
  #tb-guided .product-intro .bb-rating > *{white-space:nowrap}
}


/* Webflow-host hardening (see quiz-styles.v2 / pdp-styles.v4 rationale) */
body{background:#faf7f2 !important}
#tb-guided h1,#tb-guided h2,#tb-guided h3,#tb-guided h4{text-transform:none}
#tb-guided button{font-family:inherit}
#tb-guided img,#tb-guided video{max-width:100%}