/* ─── tr8ck MODULE (product) PAGES · design system v2 (2026-09-26) ───
   Linked AFTER the 14 KB inline stylesheet the 12 tr8ck-<module>.html pages
   carry, so equal-specificity rules win by order; `body` prefixes beat the
   compound selectors (section.block.dark, .hero h1 .accent-text). Also linked
   by tr8ck-glp1.html / tr8ck-supplements.html for their rose-accent classes. */

:root{
  --ink:#1d1d1f;--ink-2:#6e6e73;--ink-3:#86868b;--paper:#fff;--grey:#f5f5f7;--grey-2:#e8e8ed;--line:#d2d2d7;--link:#5b4bd6;
  --bg-secondary:#f5f5f7;--bg-tertiary:#f5f5f7;--bg-dark:#000;--bg-dark-2:#000;
  --text-primary:#1d1d1f;--text-secondary:#6e6e73;--text-tertiary:#86868b;
  --border:#d2d2d7;--border-subtle:#e8e8ed;--accent:#1d1d1f;--accent-2:#1d1d1f;
  --grad-violet:#1d1d1f;--grad-blue:#1d1d1f;--grad-teal:#1d1d1f;--grad-pink:#1d1d1f;--grad-emerald:#1d1d1f;--grad-dark:#000;--grad-lime:#1d1d1f;
  --shadow-sm:none;--shadow-md:none;--shadow-lg:none;--shadow-xl:none;--shadow-glow:none;--shadow-phone:0 40px 100px rgba(0,0,0,.35);
  --r-xl:28px;--r-2xl:32px;
}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--ink);background:#fff;font-size:17px;line-height:1.47}
body h1,body h2,body h3{font-weight:600;letter-spacing:-.025em}

/* Banner (rare) */
body .top-banner{background:#000;color:#fff;font-weight:400}
body .banner-cta{color:#fff;font-weight:500}

/* Some product pages carry .fade-up with no observer script → visible by default */
body .fade-up{opacity:1!important;transform:none!important}

/* Buttons */
body .btn-primary{background:var(--ink)!important;color:#fff!important;padding:13px 26px;font-size:17px;font-weight:500;letter-spacing:-.01em;box-shadow:none!important}
body .btn-primary:hover{transform:none;box-shadow:none;opacity:.85}
body .btn-primary.on-dark{background:#fff!important;color:var(--ink)!important}
body .hero .btn-primary.on-dark,body section.block:not(.dark):not(.dark-2) .btn-primary.on-dark{background:var(--ink)!important;color:#fff!important}
body .hero .btn-secondary,body section.block:not(.dark):not(.dark-2) .btn-secondary{background:var(--grey-2);color:var(--ink)}
body .btn-primary.on-dark:hover{background:#fff;color:var(--ink);opacity:.9}
body .btn-primary.accent{background:var(--ink)!important;color:#fff!important}
body .btn-arrow{width:16px;height:16px;stroke-width:2}
body .btn-secondary{padding:13px 24px;font-size:17px;font-weight:500;border:none;background:rgba(255,255,255,.14);color:#fff}
body .btn-secondary:hover{background:rgba(255,255,255,.2);border-color:transparent}
body .btn-secondary.on-light{background:var(--grey-2);color:var(--ink);border:none}
body .btn-secondary.on-light:hover{background:#dedee3;color:var(--ink);border-color:transparent}

/* Hero: white, centred, device below the copy (Apple product-page pattern) */
body .hero{background:#fff;color:var(--ink);padding:132px 22px 0}
body .hero::before{display:none}
body .hero-inner{grid-template-columns:1fr;gap:44px;text-align:center;justify-items:center;max-width:1024px}
body .hero-eyebrow{background:none;border:none;padding:0;font-size:15px;font-weight:400;color:var(--ink-3);margin-bottom:22px}
body .hero-eyebrow-dot{display:none}
body .hero h1{font-size:clamp(44px,7vw,88px);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ink);max-width:900px;margin-bottom:22px}
body .hero h1 .accent-text{background:none!important;-webkit-background-clip:unset!important;-webkit-text-fill-color:currentColor!important;color:inherit!important}
body .hero-sub{font-size:clamp(19px,2.1vw,25px);color:var(--ink-2);max-width:640px;margin:0 auto 32px;line-height:1.35}
body .hero-ctas{justify-content:center;gap:12px;margin-bottom:14px}
body .hero-trust{justify-content:center;color:var(--ink-3);font-size:13px;margin-top:6px}
body .hero-trust-item svg{stroke:var(--ink-3)}
body .hero-visual{min-height:0;height:560px;overflow:hidden;align-items:flex-start;width:100%;margin-top:16px}
body .hero-phone{width:360px;transform:none!important;border-radius:56px;box-shadow:0 40px 100px rgba(0,0,0,.35),inset 0 0 0 2px #3a3a3e;background:#0b0b0d;padding:11px}
body .hero-phone img{border-radius:46px}
body .hero-phone-glow{display:none}

/* Blocks */
body section.block{padding:120px 22px}
body section.block.dark,body section.block.dark-2{background:#000;color:#f5f5f7}
body section.block.tinted{background:var(--grey)}
body .block-inner{max-width:1024px}
body .block-header{margin-bottom:56px}
body .eyebrow,body .eyebrow.purple,body .eyebrow.on-dark{font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-3);margin-bottom:12px}
body .h2{font-size:clamp(34px,4.8vw,56px);font-weight:600;letter-spacing:-.025em;line-height:1.05;color:var(--ink)}
body .h2.on-dark{color:#f5f5f7}
body .lead{font-size:clamp(19px,2vw,23px);color:var(--ink-2);line-height:1.35;max-width:620px}
body .lead.on-dark{color:rgba(245,245,247,.7)}

/* Problem band */
body .problem{background:#000;padding:140px 22px}
body .problem::before{display:none}
body .problem h2{font-size:clamp(36px,5.4vw,64px);font-weight:600;letter-spacing:-.03em;line-height:1.02;color:#f5f5f7}
body .problem h2 .strike{color:rgba(245,245,247,.4);text-decoration-color:rgba(245,245,247,.35);text-decoration-thickness:3px}
body .problem h2 .punch{background:none!important;-webkit-text-fill-color:#f5f5f7!important;color:#f5f5f7;margin-top:8px}
body .problem-tag{border-color:rgba(255,255,255,.14);color:rgba(245,245,247,.7);background:none;font-weight:400}
body .problem-tag.crossed{color:rgba(245,245,247,.4);text-decoration-color:rgba(245,245,247,.35)}

/* How it works */
body .how-grid{gap:20px}
body .how-card{background:var(--grey);border:none;border-radius:28px;padding:36px 32px}
body section.block.tinted .how-card{background:#fff}
body .how-card:hover{transform:none;box-shadow:none;border-color:transparent}
body .how-step{width:32px;height:32px;background:var(--ink)!important;color:#fff;border-radius:10px;font-size:14px;font-weight:600}
body .how-card h3{font-size:23px;font-weight:600;letter-spacing:-.02em}
body .how-card p{font-size:17px;color:var(--ink-2);line-height:1.45}
body .how-phone{max-width:240px;background:#0b0b0d;border-radius:40px;padding:8px;box-shadow:0 30px 60px rgba(0,0,0,.25),inset 0 0 0 1.5px #3a3a3e}
body .how-phone img{border-radius:33px}

/* Feature cards */
body .feat-grid{gap:20px}
body .feat-card{background:var(--grey);border:none;border-radius:28px;padding:32px}
body section.block.tinted .feat-card{background:#fff}
body .feat-card:hover{transform:none;box-shadow:none;border-color:transparent}
body .feat-card .feat-shot{max-width:220px;background:#0b0b0d;border-radius:40px;padding:8px;box-shadow:0 30px 60px rgba(0,0,0,.25),inset 0 0 0 1.5px #3a3a3e}
body .feat-card .feat-shot img{border-radius:33px}
body .feat-tag{font-size:13px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink-3)!important}
body .feat-title{font-size:21px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
body .feat-desc{font-size:16px;color:var(--ink-2);line-height:1.45}

/* Wedge (numbers vs answers) */
body .wedge-card{border:none;border-radius:28px;padding:40px 36px}
body .wedge-card.bad{background:var(--grey)}
body .wedge-card.good{background:#000;border-color:transparent;box-shadow:none;color:#f5f5f7}
body .wedge-label{font-size:13px;font-weight:500;text-transform:none;letter-spacing:0}
body .wedge-card.bad .wedge-label{color:var(--ink-3)}
body .wedge-card.good .wedge-label{color:rgba(245,245,247,.55)}
body .wedge-quote{font-family:inherit;font-size:17px;font-weight:400;color:var(--ink-2)}
body .wedge-card.good .wedge-quote{font-family:inherit;color:rgba(245,245,247,.6)}
body .wedge-translation{font-size:clamp(22px,2.4vw,28px);font-weight:600;letter-spacing:-.025em;line-height:1.2}
body .wedge-card.good .wedge-translation .hl{background:none!important;-webkit-text-fill-color:#f5f5f7!important;color:#f5f5f7}

/* Testimonials (quiet quotes) */
body .testi-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:24px;backdrop-filter:none}
body .testi-stars{display:none}
body .testi-text{font-size:17px;color:rgba(245,245,247,.88);letter-spacing:-.01em}
body .testi-av{display:none}
body .testi-name{font-weight:600;color:#f5f5f7}
body .testi-role{color:rgba(245,245,247,.5)}

/* Final */
body .final{background:#000;padding:150px 22px}
body .final::before{display:none}
body .final h2{font-size:clamp(40px,5.8vw,72px);font-weight:600;letter-spacing:-.03em;line-height:1.02;color:#f5f5f7}
body .final h2 .hl{background:none!important;-webkit-text-fill-color:#f5f5f7!important;color:#f5f5f7}
body .final p{font-size:clamp(19px,2vw,23px);color:rgba(245,245,247,.7);line-height:1.35}

/* FAQ */
body .faq-wrap{border:none;border-radius:0;background:none;max-width:820px}
body .faq-item{padding:22px 0;border-top:1px solid var(--line);border-bottom:none}
body .faq-item:last-child{border-bottom:1px solid var(--line)}
body .faq-q{font-size:19px;font-weight:600;letter-spacing:-.015em}
body .faq-a{font-size:17px;color:var(--ink-2);line-height:1.5}

/* Related */
body .related-section{background:#fff;border-top:none;padding:64px 22px}
body .related-label{font-size:13px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-3)}
body .related-pills a{background:var(--grey);border:none;font-weight:400;color:var(--ink)}
body .related-pills a:hover{background:var(--grey-2)}

/* GLP-1 / supplements pages (rose accents → ink) */
body .stat-card-glp{background:var(--grey);border:none;border-radius:24px}
body .stat-number-glp{color:var(--ink);font-weight:200;letter-spacing:-.05em;font-size:56px}
body .step-number{background:var(--ink)!important;width:32px;height:32px;border-radius:10px;font-size:14px;font-weight:600}
body .step-card{background:var(--grey);border:none;border-radius:24px;display:block;text-align:center;padding:32px 28px}
body .step-number{margin:0 auto 16px}
body .insight-pill{background:var(--grey);border:none;border-radius:24px}
body .insight-pill::before{display:none}
body .insight-pill-icon{display:none}
body .drug-chip{background:var(--grey-2);border:none;color:var(--ink);font-weight:500}
body .feature-check{background:var(--ink);color:#fff}
body .escalation-timeline{border-left-color:var(--line)}
body .escalation-step::before{background:var(--ink);box-shadow:0 0 0 2px var(--line)}
body .mock-insight-box{background:rgba(196,176,255,.12);border-color:rgba(196,176,255,.3)}
body .mock-insight-label,body .mock-dose-badge,body .mock-cycle-injection{color:#c4b0ff}
body .mock-dose-badge,body .mock-cycle-injection{background:rgba(196,176,255,.22)}
body .mock-phone{border-color:#3a3a3e;background:#0b0b0d}
body .mock-screen{background:linear-gradient(180deg,#0b0618,#17102e 55%,#241850)}

@media (max-width:880px){
  body .hero{padding:96px 22px 0}
  body .hero-inner{gap:32px}
  body .hero-visual{height:440px;order:2}
  body .hero-phone{width:300px}
  body section.block{padding:80px 22px}
  body .problem,body .final{padding:96px 22px}
}