/* Shared styles for the quiz family.
   Palette = ThreadBeast clay-to-rust editorial grade (matches threadbeast.com/try LP):
   ink-navy #131D28 · clay #d97a54 · rust #d64a2b · bone #f2ede3 · Member Green #008143.
   Mars-Men ergonomics retained: no progress bar, no question numbers, emoji options,
   selected = accent fill, result = labeled level bar + 2x2 stat grid. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Geist+Mono:wght@500;700&display=swap');
#tb-quiz{
  --bg:#131D28;       /* Pitch Noir / ink-navy — LP background */
  --card:#1b2632;     /* elevated ink-navy surface */
  --ink:#f2ede3;      /* Chalk White / bone — primary text */
  --muted:#9d9488;    /* warm taupe-grey */
  --line:#2c3947;     /* divider on navy */
  --accent:#d97a54;   /* clay — primary warm pop (buttons, markers, emphasis) */
  --accent2:#d64a2b;  /* rust — secondary warm */
  --good:#1f9d57;     /* Member Green (legible on navy) */
  --maxw:560px;
}
#tb-quiz *, #tb-quiz *::before, #tb-quiz *::after{box-sizing:border-box}
#tb-quiz{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
#tb-quiz.wrap, #tb-quiz .wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px 80px;min-height:100vh}
#tb-quiz .topbar{display:flex;align-items:center;justify-content:center;margin: 10px 0px;}
#tb-quiz .brand{font-weight:800;letter-spacing:.22em;font-size:13px;text-transform:uppercase}
#tb-quiz .brandlogo{height:30px;width:auto;display:block}
/* slim Mars-Men progress bar (fills through the questions; no numbers) */
#tb-quiz .pbar{height:4px;background:var(--line);border-radius:99px;overflow:hidden;/*margin:0 0 24px*/}
#tb-quiz .pbar > i{display:block;height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .35s ease}
#tb-quiz .screen{animation:rise .3s ease;margin-top: 25px;}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#tb-quiz h1, #tb-quiz h2, #tb-quiz .offer-h, #tb-quiz .typename{font-family:"Instrument Serif",Georgia,serif;font-weight:400;letter-spacing:0}
#tb-quiz h1{font-size:40px;line-height:1.02;margin:6px 0 14px}
#tb-quiz h2{font-size:2.5rem;line-height:1.1;margin:2px 0 18px}
#tb-quiz .sub{color:var(--muted);font-size:16px;line-height:1.45;margin:0 0 20px}
/* the Mars-Men "✓ this assessment analyzes…" line on screen 1 */
#tb-quiz .checkline{display:flex;gap:11px;align-items:flex-start;margin:4px 0 18px;font-size:14.5px;line-height:1.45;color:var(--ink);text-align:left}
#tb-quiz .cbox{flex:0 0 auto;width:20px;height:20px;border-radius:5px;background:var(--accent);color:var(--bg);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px}
/* options — emoji + short text, big tap target, selected fills accent */
#tb-quiz .opts{display:flex;flex-direction:column;gap:10px}
#tb-quiz .opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);
  color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:15px 16px;font-size:16.5px;
  line-height:1.3;cursor:pointer;transition:border-color .12s,background .12s,transform .05s}
#tb-quiz .opt:hover{border-color:#3c4c5c;background:#202d3a}
#tb-quiz .opt:active{transform:scale(.992)}
#tb-quiz .opt.sel{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:700}
#tb-quiz .opt .emo{font-size:21px;line-height:1;flex:0 0 auto}
#tb-quiz .opt .otext{flex:1}
/* alternate layout: 2-up grid for short-option questions (breaks the stacked-bar monotony) */
#tb-quiz .opts.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#tb-quiz .opts.grid .opt{flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;min-height:66px}
/* mechanism line on the result (installs the "why past attempts failed" belief) */
#tb-quiz .mechline{font-size:14px;line-height:1.5;color:#efe6d8;background:#241a12;border:1px solid #3d2a1d;border-radius:12px;padding:12px 14px;margin:12px 0 2px;text-align:center}
#tb-quiz .btn{display:block;background:var(--accent);color:var(--bg);border:none;border-radius:99px;
  padding:16px 26px;font-size:17px;font-weight:800;cursor:pointer;width:100%;text-align:center;text-decoration:none}
#tb-quiz .btn:active{transform:scale(.99)}
#tb-quiz .microtrust{color:var(--muted);font-size:12.5px;text-align:center;margin-top:14px}
#tb-quiz .introrule{height:1px;background:var(--line);margin:20px 0 18px}
#tb-quiz h2.firstq{font-size:2rem;margin-top:0}
/* testimonial with profile photo (Mars-Men style) */
#tb-quiz .tcardhero{display:flex;gap:13px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:16px 0;text-align:left}
#tb-quiz .avatar{flex:0 0 auto;width:46px;height:46px;border-radius:50%;object-fit:cover;background:var(--line)}
#tb-quiz .tcardbody{flex:1}
#tb-quiz .tcardq{margin:0 0 6px;font-size:15.5px;line-height:1.4;font-style:italic}
#tb-quiz .tcardby{font-size:12.5px;color:var(--muted);font-weight:600}
#tb-quiz .interstitial{text-align:center;padding:10px 0}
#tb-quiz .interstitial .big{font-size:26px;font-weight:800;margin:14px 0 12px;letter-spacing:-.01em}
#tb-quiz .quotecard{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:12px;padding:16px 18px;margin:16px 0;font-size:17px;line-height:1.4;font-style:italic;text-align:left}
#tb-quiz .quotecard small{display:block;margin-top:9px;color:var(--muted);font-style:normal;font-size:13px}
#tb-quiz .verified{color:var(--accent);font-style:normal}
#tb-quiz .stat{font-size:13px;color:var(--muted);margin-top:8px}
#tb-quiz .loader{display:flex;gap:8px;justify-content:center;margin:22px 0}
#tb-quiz .loader i{width:10px;height:10px;border-radius:99px;background:var(--accent);opacity:.3;animation:blink 1s infinite}
#tb-quiz .loader i:nth-child(2){animation-delay:.2s}#tb-quiz .loader i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}
/* result */
#tb-quiz .resultkicker{color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin:22px 0 8px}
/* hero diagnosis card: labeled level bar + YOU marker + assessment callout */
#tb-quiz .herocard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 16px 16px;margin:4px 0 14px}
#tb-quiz .levelwrap{margin-bottom:16px}
#tb-quiz .levelbig{font-family:"Geist Mono",ui-monospace,monospace;font-size:42px;font-weight:700;letter-spacing:-.02em;line-height:1;text-align:center}
#tb-quiz .levelbig .unit{font-size:20px;color:var(--muted);font-weight:500}
#tb-quiz .levelsub{font-size:12.5px;color:var(--muted);text-align:center;margin-top:5px;letter-spacing:.03em}
#tb-quiz .levelbar{position:relative;margin:34px 0 8px}
#tb-quiz .segs{display:flex;gap:3px;height:12px}
#tb-quiz .seg{background:var(--line);border-radius:4px}
#tb-quiz .seg.on{background:var(--accent)}
#tb-quiz .youmark{position:absolute;top:-27px;transform:translateX(-50%);text-align:center;z-index:2}
#tb-quiz .youmark span{background:var(--ink);color:var(--bg);font-size:10px;font-weight:800;letter-spacing:.08em;padding:3px 7px;border-radius:6px;display:inline-block}
#tb-quiz .youmark::after{content:"";display:block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--ink);margin:2px auto 0}
#tb-quiz .zlabs{display:flex;gap:3px}
#tb-quiz .zlab{font-size:10px;color:var(--muted);text-align:center;text-transform:uppercase;letter-spacing:.03em}
#tb-quiz .zlab.on{color:var(--accent);font-weight:800}
#tb-quiz .assess{display:flex;gap:12px;align-items:flex-start;background:#241a12;border:1px solid #3d2a1d;border-radius:12px;padding:13px 14px;margin-top:8px}
#tb-quiz .assess .bang{flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:var(--accent);color:var(--bg);font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center}
#tb-quiz .assess-h{font-weight:800;font-size:15px;margin-bottom:3px}
#tb-quiz .assess p{margin:0;font-size:14px;line-height:1.45;color:#efe6d8}
#tb-quiz .typename{font-size:28px;letter-spacing:0;margin:6px 0 8px}
#tb-quiz .read{font-size:17px;line-height:1.5;margin:0 0 16px}
/* 2x2 computed-stat grid (the Mars-Men "calculated report" feel) */
#tb-quiz .tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
#tb-quiz .tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 13px}
#tb-quiz .tlabel{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:5px}
#tb-quiz .tval{font-size:15px;font-weight:700;line-height:1.2}
#tb-quiz .mech{background:#241a12;border:1px solid #3d2a1d;border-radius:12px;padding:16px 18px;margin:18px 0;font-size:15px;line-height:1.55;color:#efe6d8}
#tb-quiz .mech b{color:var(--accent)}
#tb-quiz .proj{margin:22px 0}
#tb-quiz .proj h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
#tb-quiz .rx{font-size:17px;line-height:1.5;margin:14px 0}
#tb-quiz .rx b{color:var(--ink)}
#tb-quiz .objbox{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:14px 0;font-size:15px;line-height:1.45;color:var(--muted)}
#tb-quiz .objbox b{color:var(--ink)}
#tb-quiz .honesty{font-size:13.5px;color:var(--muted);line-height:1.5;margin:14px 0;text-align:center}
#tb-quiz .restart{display:block;text-align:center;color:var(--muted);font-size:13px;margin-top:22px;cursor:pointer;text-decoration:underline}
#tb-quiz .footnote{font-size:11.5px;color:#4d5763;text-align:center;margin-top:30px;line-height:1.5}
/* ---- offer screen (Mars-Men-style close) ---- */
#tb-quiz .offer{text-align:center}
#tb-quiz .offer-h{font-size:42px;line-height:1.06;margin:4px 0 10px}
#tb-quiz .offer .sub{text-align:center}
#tb-quiz .offer-guarantee{font-weight:800;font-size:15px;line-height:1.4;margin:10px 0 18px;text-decoration:underline;text-underline-offset:3px}
#tb-quiz .offerhero{display:block;width:100%;border-radius:16px;margin:8px 0 16px}
#tb-quiz .offercard{position:relative;background:linear-gradient(180deg,#1b2632,#131d28);border:1px solid var(--line);border-radius:18px;padding:16px 16px 16px;margin:10px 0 16px}
#tb-quiz .offertop{display:flex;gap:8px;align-items:stretch;margin-bottom:12px}
#tb-quiz .offer-banner{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:8px 12px;font-size:12px;font-weight:700;line-height:1.3;display:flex;align-items:center}
#tb-quiz .offer-banner b{color:var(--accent)}
#tb-quiz .offer-badge{flex:0 0 auto;background:var(--bg);border:1px solid var(--line);color:var(--ink);border-radius:12px;font-size:10px;font-weight:800;letter-spacing:.03em;padding:8px 10px;line-height:1.15;display:flex;align-items:center;text-align:center;max-width:104px}
#tb-quiz .boximg{display:block;width:100%;max-width:260px;margin:6px auto 14px;border-radius:12px}
/* offer: product image flanked by benefit callouts (Mars-Men layout) */
#tb-quiz .offerflank{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin:8px 0 6px}
#tb-quiz .offerflank .boximg{max-width:150px;margin:0 auto}
#tb-quiz .bencol{display:flex;flex-direction:column;gap:10px}
#tb-quiz .offerflank .benefit{flex-direction:column;align-items:flex-start;gap:5px;padding:10px 11px;font-size:12.5px;line-height:1.25;background:#0f1822}
#tb-quiz .offerflank .benefit .bemo{font-size:18px}
/* plan: simplified projection screen (Mars-Men trajectory card) */
#tb-quiz .plan{text-align:center}
#tb-quiz .plan .planh1{font-size:30px;line-height:1.12;margin:6px 0 8px}
#tb-quiz .projcard{border:1px solid var(--line);border-radius:14px;padding:14px 14px 8px;background:var(--card);max-width:360px;margin:16px auto 10px;text-align:left}
#tb-quiz .projhead{display:flex;gap:8px;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:4px}
#tb-quiz .projhead .ps{flex:1}
#tb-quiz .projhead .pl{font-size:9px;letter-spacing:.07em;color:var(--muted);text-transform:uppercase}
#tb-quiz .projhead .pv{font-family:"Geist Mono",ui-monospace,monospace;font-weight:700;font-size:13px;margin-top:3px;line-height:1.15}
#tb-quiz .projhead .pv.accent{color:var(--accent)}
#tb-quiz .projsvg{display:block}
#tb-quiz .projline{stroke-dasharray:1;stroke-dashoffset:1;animation:projdraw 1.25s ease .2s forwards}
@keyframes projdraw{to{stroke-dashoffset:0}}
#tb-quiz .projfill{opacity:0;animation:projfade 1s ease .7s forwards}
@keyframes projfade{to{opacity:.2}}
#tb-quiz .projend, #tb-quiz .goaltag{opacity:0;animation:projfade2 .4s ease 1.4s forwards}
@keyframes projfade2{to{opacity:1}}
#tb-quiz .benefits{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 6px}
#tb-quiz .benefit{display:flex;align-items:center;gap:9px;background:#0f1822;border:1px solid var(--line);border-radius:12px;padding:11px 12px;font-size:14px;font-weight:600;text-align:left}
#tb-quiz .benefit .bemo{font-size:18px}
#tb-quiz .finep{font-size:10.5px;color:var(--muted);margin-top:10px}
#tb-quiz .ba{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 14px}
#tb-quiz .ba-tile{border-radius:12px;padding:22px 12px;text-align:center;border:1px solid var(--line)}
#tb-quiz .ba-tile span{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--muted);margin-bottom:8px}
#tb-quiz .ba-tile em{font-style:normal;font-size:13.5px;line-height:1.35;display:block}
#tb-quiz .ba-before{background:#1b2632}
#tb-quiz .ba-after{background:#12231a;border-color:#1f4d34}
#tb-quiz .ba-after em{color:var(--good)}
#tb-quiz .priceblock{margin:6px 0 16px}
#tb-quiz .priceblock .strike{color:var(--muted);text-decoration:line-through;font-size:18px;margin-right:10px}
#tb-quiz .priceblock .now{font-family:"Geist Mono",ui-monospace,monospace;font-size:30px;font-weight:700;color:var(--accent)}
#tb-quiz .priceblock .pnote{font-size:13px;color:var(--muted);margin-top:6px}
#tb-quiz .tests{display:flex;flex-direction:column;gap:10px;margin:6px 0 18px;text-align:left}
#tb-quiz .tcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
#tb-quiz .tstars{color:var(--accent);font-size:13px;letter-spacing:2px;margin-bottom:6px}
#tb-quiz .tquote{font-size:14.5px;line-height:1.45;font-style:italic;margin-bottom:8px}
#tb-quiz .tby{font-size:12.5px;color:var(--muted)}
#tb-quiz .tby span{color:var(--ink)}
/* ---- before/after, side by side (the "you're in the right place" interstitial) ---- */
#tb-quiz .bados{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:360px;margin:24px auto 16px}
#tb-quiz .bacol{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);aspect-ratio:3/4;background:var(--card)}
#tb-quiz .bacol.af{border-color:var(--accent)}
#tb-quiz .balayer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .55s ease}
#tb-quiz .bacol .balabel{z-index:2}
#tb-quiz .bacol .balabel{position:absolute;top:10px;left:10px}
#tb-quiz .balabel{font-size:10px;font-weight:800;letter-spacing:.12em;padding:4px 8px;border-radius:5px}
#tb-quiz .balabel.bl{background:var(--ink);color:var(--bg)}
#tb-quiz .balabel.al{background:var(--accent);color:var(--bg)}
#tb-quiz .baproof{font-size:15.5px;line-height:1.5;color:var(--ink);margin:6px 0 4px}
#tb-quiz .baproof b{color:var(--accent)}
/* ---- checklist loader (Mars-Men "building your profile" stacked checks) ---- */
#tb-quiz .cklist{display:flex;flex-direction:column;gap:10px;margin:20px 0 14px;text-align:left}
#tb-quiz .ckrow{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 16px;opacity:.45;transition:opacity .3s,border-color .3s}
#tb-quiz .ckrow.active{opacity:1;border-color:var(--accent)}
#tb-quiz .ckrow.done{opacity:1}
#tb-quiz .ckicon{flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:rgba(217,122,84,.16);display:flex;align-items:center;justify-content:center;font-size:15px}
#tb-quiz .cklabel{flex:1;font-size:16px;font-weight:600}
#tb-quiz .ckmark{flex:0 0 auto;width:22px;height:22px;display:flex;align-items:center;justify-content:center;color:var(--accent);font-weight:800;font-size:16px}
#tb-quiz .ckrow.active .ckmark::before{content:"";width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* ---- processing screen (animated ring that actually counts up) ---- */
#tb-quiz .proc{padding-top:18px}
#tb-quiz .proch{font-size:2rem;line-height:1.12;margin-bottom:8px}
#tb-quiz .ring{position:relative;width:140px;height:140px;margin:24px auto 10px}
#tb-quiz .ring svg{width:140px;height:140px;transform:rotate(-90deg)}
#tb-quiz .ringbg{fill:none;stroke:var(--line);stroke-width:8}
#tb-quiz .ringfg{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round}
#tb-quiz .ringpct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Geist Mono",ui-monospace,monospace;font-size:28px;font-weight:700}
#tb-quiz .procnote{font-size:11px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;margin-top:2px}


/* ===== Webflow-host hardening (v2, 2026-07-06) =====
   TB's shared site CSS sets h1-h6 color:#131d28 + text-transform:capitalize and a
   white body. Everything above is scoped under #tb-quiz (ID beats their element
   rules); these lines pin what inheritance can't protect. This stylesheet loads
   ONLY on the quiz pages, so the body override is safe. */
body{background:#131D28 !important}
#tb-quiz h1,#tb-quiz h2,#tb-quiz h3{color:var(--ink);text-transform:none}
#tb-quiz{background:var(--bg)}
#tb-quiz button{font-family:inherit}
#tb-quiz img{max-width:100%;display:inline-block}