:root{
  /* ── TradiX brand — Deep Ocean: ink navy + teal, straight off the logo ── */
  --navy:#0c1f30; --navy-light:#153450;
  --primary:#0d9488; --primary-dark:#0b7268;
  --accent-light:#5eead4; --tint:#effcfa; --tint-bd:#a7ecdf;
  --spark:#2dd4bf;
  --orange:#f4601a;                     /* In Progress only — app accuracy */
  --bg:#f2f4f8; --card:#ffffff;
  --ink:#1a2744; --muted:#7a8499; --line:#e0e4ee;
  --radius:12px;
  --font-d:'Barlow Condensed',sans-serif;
  --font-b:'Barlow',system-ui,sans-serif;
  --font-m:'IBM Plex Mono',monospace;
  --font-app:'Segoe UI',system-ui,-apple-system,sans-serif;
}
/* Real in-app themes — demos run Blue & Teal */
.th-blue{ --navy:#1e3a5f; --navy-light:#2a4f7a; --primary:#1565a8; --primary-dark:#0f4d80; --accent-light:#7dd3fc; --tint:#e8f1fa; --tint-bd:#bcd7ec; }
.th-teal{ --navy:#134e4a; --navy-light:#115e59; --primary:#0d9488; --primary-dark:#0f766e; --accent-light:#5eead4; --tint:#e6f7f4; --tint-bd:#b5e4dc; }
/* App status colours (exact) */
:root{
  --st-sched:#2563eb; --st-sched-bg:#dbeafe; --st-sched-tx:#1d4ed8;
  --st-prog:#f59e0b;  --st-prog-bg:#ffedd5;  --st-prog-tx:#c2410c; --st-prog-brand:#f4601a;
  --st-done:#16a34a;  --st-done-bg:#dcfce7;  --st-done-tx:#15803d;
  --st-pend:#64748b;  --st-pend-bg:#f1f5f9;  --st-pend-tx:#475569;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{font-family:var(--font-b);color:var(--ink);background:var(--bg);line-height:1.55;font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
a{color:var(--primary-dark)}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.btn{display:inline-block;font-family:var(--font-b);font-weight:700;font-size:15px;border-radius:10px;padding:13px 24px;cursor:pointer;text-decoration:none;border:none;transition:background .15s,transform .12s,box-shadow .15s}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(13,148,136,.28)}
@media (prefers-reduced-motion:no-preference){
.rv{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.rv.in{opacity:1;transform:none}
}
.inds{padding:64px 0;background:#fff;border-top:1px solid var(--line)}
.igrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:960px){.igrid{grid-template-columns:1fr 1fr}}
@media (max-width:580px){.igrid{grid-template-columns:1fr}}
.icard{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:20px;transition:transform .12s,box-shadow .15s}
.icard:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(12,31,48,.12)}
.icard .ic{font-size:26px;display:block;margin-bottom:8px}
.icard b{display:block;font-size:16.5px;margin-bottom:5px}
.icard span:not(.ic){font-size:13.5px;color:var(--muted);line-height:1.55}
.scrs{padding:64px 0;background:var(--bg)}
.scrgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:900px){.scrgrid{grid-template-columns:1fr}}
.scr{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(12,31,48,.08)}
.scr-bar{display:flex;align-items:center;gap:6px;background:var(--navy);padding:9px 13px}
.scr-bar .d{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.28)}
.scr-bar b{margin-left:6px;color:#fff;font-size:12.5px;font-weight:800}
.scr-body{padding:14px 15px;display:flex;flex-direction:column;gap:8px;font-size:12.5px;color:var(--ink)}
.scr-h1{font-size:16px;font-weight:800;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.scr-h1 .pill.red{background:#dc2626;color:#fff;font-size:9px;font-weight:800;padding:3px 9px;border-radius:99px}
.scr-notes{display:flex;gap:8px;flex-wrap:wrap}
.sn{border-radius:10px;padding:7px 10px;font-size:10.5px;font-weight:700;line-height:1.35;border:1px solid rgba(0,0,0,.08)}
.sn i{display:block;font-style:normal;font-size:7.5px;font-weight:800;color:#92400e}
.sn em{font-style:normal;font-weight:600;color:rgba(0,0,0,.55);font-size:9.5px}
.sn.y{background:#fef9c3}.sn.p{background:#fce7f3}.sn.b{background:#e0e7ff}
.scr-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.scr-panel{border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:10.5px}
.scr-panel b{display:block;margin-bottom:3px}
.scr-panel .cnt{background:#2563eb;color:#fff;border-radius:99px;padding:1px 7px;font-size:8.5px;font-style:normal;font-weight:800}
.scr-panel span{color:var(--muted);line-height:1.5}
.scr-rail{background:var(--tint);border:1px solid var(--tint-bd);border-radius:10px;padding:7px 10px;font-size:10px;color:var(--primary-dark)}
.scr-toggle{display:flex;align-items:center;gap:8px;font-size:12.5px}
.scr-toggle .tgl{margin-left:auto;width:34px;height:19px;border-radius:99px;background:var(--primary);position:relative}
.scr-toggle .tgl::after{content:"";position:absolute;top:2px;right:2px;width:15px;height:15px;border-radius:50%;background:#fff}
.scr-note2{font-size:9.5px;color:var(--muted)}
.scr-row{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.scr-row .tag{font-size:8px;font-weight:800;padding:2px 7px;border-radius:6px}
.scr-row .tag.j{background:#dbeafe;color:#1d4ed8}.scr-row .tag.s{background:#fef3c7;color:#92400e}
.scr-row b{font-size:11.5px}
.scr-row em,.scr-shift em{font-style:normal;color:var(--muted);font-size:9.5px}
.scr-row .mini,.scr-sup .mini{margin-left:auto;font-size:9px;color:var(--primary-dark);font-weight:800;white-space:nowrap}
.scr-duo{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.scr-duo .pane{border-radius:10px;padding:8px 10px;font-size:10px;font-weight:800;color:#fff}
.scr-duo .pane em{display:block;font-style:normal;font-weight:600;font-size:9px;opacity:.85}
.scr-duo .pane.red{background:#dc2626}.scr-duo .pane.blue{background:#2563eb}
.scr-tot{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:10.5px;font-weight:700}
.scr-day{background:#eff6ff;border:1px solid #bfdbfe;border-radius:9px;padding:6px 10px;font-size:10.5px;font-weight:800;color:#1e3a8a;display:flex;justify-content:space-between;gap:8px}
.scr-day em{font-style:normal;font-weight:700;font-size:9px;color:#3b82f6}
.scr-shift{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:10px;padding:7px 10px}
.scr-shift b{font-size:11.5px}
.scr-shift .hrs{margin-left:auto;font-weight:800;font-size:11px}
.scr-shift .onc{margin-left:auto;color:#15803d;font-weight:800;font-size:9.5px}
.scr-shift em{margin-left:0;flex-basis:100%;order:3}
.scr-shift{flex-wrap:wrap}
.scr-sup{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;margin-top:2px}
.scr-sup em{font-style:normal;color:var(--muted);font-size:9.5px;font-weight:600}
.qdrawer{position:absolute;top:0;right:-46%;bottom:0;width:44%;background:#fff;border-left:1px solid var(--line);box-shadow:-14px 0 34px rgba(0,0,0,.16);padding:11px 12px;display:flex;flex-direction:column;gap:7px;transition:right .5s cubic-bezier(.2,.8,.25,1)}
.qdrawer.in{right:0}
.qrow{display:flex;align-items:center}
.qrow .qx{margin-left:auto;font-size:9px;font-weight:800;color:var(--primary-dark);border:1.5px solid var(--tint-bd);border-radius:8px;padding:4px 10px}
.qtitle{font-size:13px;font-weight:800;color:var(--ink)}
.qtitle em{font-style:normal;color:var(--muted);font-size:9.5px;margin-left:5px}
.qkv{font-size:9.5px;color:var(--ink);line-height:1.45}
.qkv b{display:block;font-size:7.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.qlive{color:#b45309;font-weight:800;font-size:11px}
.scr-toggle .tgl.off{background:#cbd2df}
.scr-toggle .tgl.off::after{right:auto;left:2px}
.scr-cap{border-top:1px solid var(--line);padding:9px 15px 12px;font-size:12px;color:var(--muted)}
.mid{padding:64px 0 20px}
.midgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:6px}
@media (max-width:900px){.midgrid{grid-template-columns:1fr}}
.mcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 20px}
.mcard .mh{font-family:var(--font-d);font-size:22px;font-weight:800;color:var(--muted);margin-bottom:14px;letter-spacing:.01em}
.mcard ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.mcard li{position:relative;padding-left:26px;font-size:15px;color:var(--ink);line-height:1.45}
.mcard li::before{content:"\2715";position:absolute;left:0;top:1px;color:#c96a6a;font-weight:800}
.mcard.win{border:2px solid var(--primary);box-shadow:0 14px 36px rgba(13,148,136,.16);background:linear-gradient(180deg,#fff,var(--tint))}
.mcard.win .mh{color:var(--primary-dark)}
.mcard.win li::before{content:"\2713";color:var(--primary);font-weight:800}
.midline{text-align:center;margin-top:22px;font-size:17px;font-weight:700;color:var(--ink)}
.wait{padding:56px 0 10px}
.waitcard{background:linear-gradient(135deg,var(--navy),var(--navy-light));border-radius:20px;padding:36px 34px;text-align:center;box-shadow:0 18px 44px rgba(12,31,48,.22)}
.waitcard .eyebrow{color:var(--accent-light)}
.waitcard h2{color:#fff;margin:6px 0 8px}
.waitcard p{color:#c9e4de;max-width:620px;margin:0 auto 20px}
.waitform{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:560px;margin:0 auto}
.waitform input[type=email]{flex:1;min-width:260px;border:2px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;border-radius:12px;padding:14px 16px;font-size:16px;font-family:var(--font-b)}
.waitform input[type=email]::placeholder{color:#9ec4bd}
.waitform input[type=email]:focus{outline:none;border-color:var(--spark);background:rgba(255,255,255,.14)}
.waitform .btn{padding:14px 26px;font-size:16px;white-space:nowrap}
.waitnote{color:#9ec4bd;font-size:13px;margin-top:14px}
.hp{position:absolute;left:-9999px}
.billtog{display:flex;gap:8px;justify-content:center;margin:22px 0 20px}
.billtog span{padding:9px 18px;border-radius:99px;border:1px solid rgba(255,255,255,.28);color:#c9e4de;font-size:13.5px;font-weight:700;cursor:pointer;user-select:none;transition:background .15s,color .15s}
.billtog span.on{background:#fff;color:var(--ink);border-color:#fff}
.pbill{font-size:12px;opacity:.72;margin:-4px 0 10px}
.peruser{margin:2px 0 10px;font-size:12px;background:var(--tint);color:var(--primary-dark);border:1px solid var(--tint-bd);border-radius:8px;padding:7px 9px;font-weight:700;line-height:1.4}
.assure{padding:34px 0;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.agrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:980px){.agrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.agrid{grid-template-columns:1fr}}
.ai{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--muted);line-height:1.45}
.ai .ic{font-size:20px;line-height:1;margin-top:1px}
.ai b{display:block;color:var(--ink);font-size:14px;margin-bottom:2px}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--primary)}
.eyebrow{font-family:var(--font-m);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--primary-dark)}

/* ── Header ── */
header{position:sticky;top:0;z-index:50;background:rgba(242,244,248,.93);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:26px;height:74px}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:48px;width:auto;display:block}
.nav-links{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav-links a{text-decoration:none;color:var(--ink);font-weight:600;font-size:14.5px}
.nav-links a:hover{color:var(--primary-dark)}
.nav .btn{padding:10px 18px;font-size:14px}
.navtoggle{display:none;margin-left:auto;align-items:center;gap:9px;height:42px;padding:0 15px;border:1.5px solid var(--primary);background:var(--primary);border-radius:11px;cursor:pointer;color:#fff;font-family:inherit;font-weight:800;font-size:15px;line-height:1}
.navtoggle-bars{display:flex;flex-direction:column;justify-content:center;gap:4px}
.navtoggle-bars i{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .25s,opacity .2s}
.navtoggle.open .navtoggle-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.navtoggle.open .navtoggle-bars i:nth-child(2){opacity:0}
.navtoggle.open .navtoggle-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1119px){
  .logo img{height:40px}
  .navtoggle{display:inline-flex}
  .nav-links{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:8px 16px 16px;background:rgba(242,244,248,.98);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);box-shadow:0 16px 34px rgba(13,31,48,.14);display:none}
  .nav-links.open{display:flex}
  .nav-links a.nl{display:block;padding:14px 6px;font-size:16px;border-bottom:1px solid var(--line)}
  .nav-links a.nl[aria-current="page"]{color:var(--primary-dark)}
  .nav-links .btn{margin-top:12px;text-align:center;padding:14px 18px;font-size:15px}
}

/* ── Hero ── */
.hero{padding:64px 0 60px;background:linear-gradient(175deg,var(--bg) 50%, var(--tint) 100%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr;gap:44px}}
h1{font-family:var(--font-d);font-weight:800;font-size:clamp(42px,5.6vw,66px);line-height:1.02;text-transform:uppercase}
h1 .mark{background:linear-gradient(100deg,#14b8a6 10%,#38bdf8 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lede{margin:18px 0 26px;font-size:18.5px;color:var(--muted);max-width:34em}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero-note{margin-top:14px;font-size:13.5px;color:var(--muted)}

/* ── Trust strip ── */
.trust{background:var(--navy);color:#fff;padding:20px 0}
.trust .wrap{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:space-between}
.trust .who{font-size:15px;font-weight:600;color:#cfe6d6}
.trust .who em{font-style:normal;color:#fff;font-weight:800}
.trust .facts{display:flex;gap:34px;flex-wrap:wrap}
.trust .f{display:flex;flex-direction:column;font-size:12.5px;color:#9ec4bd}
.trust .f b{font-family:var(--font-d);font-size:26px;color:var(--accent-light);line-height:1.05}

/* ═══ DEMO PLAYER — fixed 940×564 canvas, scaled to fit ═══ */
.demo{padding:78px 0 70px;background:linear-gradient(180deg,var(--bg),#e9eef4)}
.sec-head{max-width:660px;margin:0 auto 40px;text-align:center}
.sec-head h2{font-family:var(--font-d);font-weight:800;font-size:clamp(32px,4vw,46px);text-transform:uppercase;line-height:1.06;margin-top:8px}
.sec-head p{color:var(--muted);margin-top:12px}
.player[data-w="800"]{max-width:800px}
.player[data-w="800"] .stage{aspect-ratio:800/564}
.player[data-w="800"] .fit{width:800px}
.player{max-width:940px;margin:0 auto;border-radius:16px;overflow:hidden;box-shadow:0 34px 80px rgba(19,58,74,.22),0 6px 18px rgba(0,0,0,.10);background:#fff;border:1px solid var(--line)}
.stage{position:relative;width:100%;aspect-ratio:940/564;overflow:hidden;background:var(--bg)}
.slide{position:absolute;inset:0;opacity:0;transform:translateX(24px);transition:opacity .55s ease,transform .55s ease;pointer-events:none}
.slide.on{opacity:1;transform:none;pointer-events:auto}
.fit{width:940px;height:564px;transform:scale(var(--s,1)) translateZ(0);transform-origin:top left;backface-visibility:hidden;display:flex;flex-direction:column;font-family:var(--font-app);color:var(--ink)}
/* phone-slide backdrops */
.ph-stage{flex:1;display:flex;align-items:center;justify-content:center;gap:40px;background:radial-gradient(120% 160% at 15% 0%,var(--navy-light),var(--navy) 70%);padding:14px 20px}
.ph-side{max-width:270px;color:#fff}
.ph-side .k{font-family:var(--font-m);font-size:11px;letter-spacing:.12em;color:var(--accent-light);font-weight:600;text-transform:uppercase}
.ph-side h4{font-family:var(--font-d);font-size:30px;font-weight:800;text-transform:uppercase;line-height:1.05;margin:8px 0 10px}
.ph-side p{font-size:13.5px;color:rgba(255,255,255,.78)}
.ph-side ul{list-style:none;margin-top:12px}
.ph-side li{padding:4px 0 4px 24px;position:relative;font-size:12.5px;color:rgba(255,255,255,.9)}
.ph-side li::before{content:"✓";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.16);color:var(--accent-light);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center}
.slide .phone{width:254px;height:532px;min-height:0;flex-shrink:0;margin:0}
/* checklist bits (real classes) */
.ck-sect{font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#374151;padding:6px 3px 5px}
.ck-items{background:#fff;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.ck-row{display:flex;align-items:flex-start;gap:8px;padding:9px 11px;border-bottom:1px solid var(--line)}
.ck-row:last-child{border-bottom:none}
.ck-box{width:16px;height:16px;border-radius:5px;border:2px solid var(--line);background:#fff;flex-shrink:0;margin-top:1px}
.ck-box.ck{background:var(--primary);border-color:var(--primary);position:relative}
.ck-box.ck::after{content:'✓';color:#fff;font-size:10px;font-weight:700;position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ck-lab{font-size:10px;line-height:1.35;flex:1}
.ck-lab.done{color:var(--muted);text-decoration:line-through}
.ck-pr{display:block;font-size:8px;color:var(--muted);margin-top:1px;text-decoration:none}
.ynt{display:flex;flex-shrink:0;border-radius:7px;overflow:hidden;border:2px solid var(--st-prog-brand)}
.ynt b{padding:4px 9px;font-size:8.5px;font-weight:700;background:#fff5f0;color:var(--st-prog-brand);line-height:1}
.ynt b:first-child{border-right:2px solid var(--st-prog-brand)}
.ynt b.y{background:var(--primary);color:#fff}
.ynt b.n{background:#dc2626;color:#fff}
.ck-thumbs{display:flex;gap:5px;padding:8px 11px}
.ck-thumbs span{width:34px;height:34px;border-radius:7px;border:2px solid var(--line);background:linear-gradient(135deg,#c3d2d8,#93aab4);display:flex;align-items:center;justify-content:center;font-size:12px}
.subarea{background:#fff;border:1px solid var(--line);border-radius:11px;padding:9px 11px;margin-top:7px}
.pbar{height:6px;background:var(--line);border-radius:6px;overflow:hidden}
.pbar i{display:block;height:100%;width:86%;background:var(--primary)}
.ptext{font-size:8.5px;color:var(--muted);margin:5px 0 7px;text-align:center}
.subbtn{display:block;text-align:center;background:var(--primary);color:#fff;border-radius:10px;padding:10px;font-size:11px;font-weight:700}
/* messages thread */
.msg-hd{background:#f5f5f7;border-bottom:1px solid #e3e3e8;padding:10px 12px 8px;text-align:center}
.msg-hd .avc{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;margin:0 auto 4px}
.msg-hd .nm{font-size:10px;font-weight:600}
.msg-body{padding:12px 11px 22px;display:flex;flex-direction:column;gap:8px;background:#fff;flex:1}
.msg-time{text-align:center;font-size:8px;color:#8e8e93;font-weight:600}
.bub{max-width:82%;background:#e9e9eb;color:#111;border-radius:16px;padding:8px 11px;font-size:10.5px;line-height:1.4;align-self:flex-start}
.bub.mine{background:#34c759;color:#fff;align-self:flex-end}

/* controls */
.demo-bar{display:flex;align-items:center;gap:14px;padding:13px 16px;background:#fff;border-top:1px solid var(--line);flex-wrap:wrap}
.demo-play{width:38px;height:38px;border-radius:50%;background:var(--primary);color:#fff;border:none;font-size:14px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.demo-play:hover{background:var(--primary-dark)}
.demo-cap{font-size:14px;font-weight:700;flex:1;min-width:200px}
.demo-cap small{display:block;font-weight:500;color:var(--muted);font-size:12.5px}
.demo-dots{display:flex;gap:8px}
/* Navigate sheet (phone bottom sheet, matches app etaNavigate) */
.navsheet{position:absolute;left:5px;right:5px;bottom:5px;background:#fff;border-radius:16px 16px 14px 14px;box-shadow:0 -10px 34px rgba(0,0,0,.30);padding:11px 11px 10px;transform:translateY(118%);transition:transform .45s cubic-bezier(.2,.8,.25,1);z-index:4}
.navsheet.in{transform:none}
.ns-grab{display:block;width:38px;height:4px;border-radius:99px;background:#d7dce6;margin:0 auto 8px}
.ns-addr{font-size:11.5px;font-weight:800;color:#1a2744;margin-bottom:8px}
.navbtns{display:flex;gap:7px}
.navbtn{flex:1;text-align:center;padding:11px 4px;border-radius:11px;background:var(--primary);color:#fff;font-size:11px;font-weight:800;white-space:nowrap}
.ns-omw{display:flex;align-items:center;gap:7px;margin-top:8px;padding:8px 9px;background:#f2f4f8;border:1px solid #e0e4ee;border-radius:10px;font-size:9.5px;color:#1a2744;line-height:1.35}
.ns-omw b{color:var(--primary-dark)}
.ns-send{margin-left:auto;flex-shrink:0;padding:6px 12px;border-radius:8px;background:var(--primary);color:#fff;font-size:10px;font-weight:800}
/* Review slide views */
.pushnote{position:absolute;top:6px;left:8px;right:8px;background:rgba(18,22,30,.94);color:#fff;border-radius:12px;padding:8px 11px;font-size:8.5px;line-height:1.45;transform:translateY(-150%);transition:transform .5s cubic-bezier(.2,.8,.25,1);z-index:6;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.pushnote.in{transform:none}
.pushnote b{font-weight:800}
.sf-tick{width:17px;height:17px;border-radius:50%;border:1.5px solid #cbd2df;background:#fff;flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#fff;transition:background .2s,border-color .2s}
.sf-tick.on{background:var(--primary);border-color:var(--primary)}
.sf-tick.on::after{content:"✓"}
.sf-signrow{display:flex;gap:8px;align-items:center;padding:9px 10px;border:1.5px solid var(--line);border-radius:10px;background:#fff;margin-top:2px}
.sf-name{flex:1;font-size:10.5px;font-weight:700;color:#1a2744}
.sf-signbtn{padding:7px 13px;border:1.5px solid #cbd2df;border-radius:9px;background:#fff;font-size:9.5px;font-weight:800;transition:background .2s,color .2s,border-color .2s}
.sf-signbtn.on{background:var(--primary);border-color:var(--primary);color:#fff}
.sf-submit{display:block;text-align:center;background:var(--primary);color:#fff;border-radius:10px;padding:10px;font-size:11px;font-weight:800}
.rv-wrap{position:relative;padding:18px 12px 22px;text-align:center;flex:1;display:flex;flex-direction:column;justify-content:center}
.rv-done,.rv-qr{transition:opacity .3s}
.rv-qr.hideme,.rv-done.hideme{display:none}
.rv-tick{display:flex;align-items:center;justify-content:center;width:58px;height:58px;margin:6px auto 12px;border-radius:50%;background:#dcfce7;border:2px solid #16a34a;color:#16a34a;font-size:30px;font-weight:800}
.rv-h{font-size:17px;font-weight:800;color:#1a2744;margin-bottom:5px}
.rv-s{font-size:11px;color:#7a8499;line-height:1.45;margin-bottom:6px}
.rv-m{font-size:10.5px;color:#1a2744;background:#f2f4f8;border:1px solid #e0e4ee;border-radius:9px;padding:7px 9px;margin:0 6px 14px}
.rv-m b{color:#16a34a}
.rv-grad{display:block;margin:0 4px;padding:12px 10px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;font-size:11.5px;font-weight:800;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.rv-qrbox{width:158px;height:158px;margin:10px auto 12px;background:#fff;border:1px solid #e0e4ee;border-radius:12px;padding:9px;box-shadow:0 3px 14px rgba(0,0,0,.09)}
.rv-link{display:block;margin:0 10px;padding:11px 10px;border-radius:10px;background:var(--primary);color:#fff;font-size:11px;font-weight:800}
.ddot{width:34px;height:5px;border-radius:99px;background:var(--line);border:none;cursor:pointer;position:relative;overflow:hidden;padding:0}
.ddot .fill{position:absolute;inset:0;width:0%;background:var(--primary)}
.ddot.on .fill{animation:dfill 7s linear forwards}
.ddot.done .fill{width:100%}
body.demo-paused .ddot.on .fill{animation-play-state:paused}
@keyframes dfill{from{width:0}to{width:100%}}

/* ═══ DESKTOP + PHONE section ═══ */
.everywhere{padding:78px 0}
.dev-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:center}
@media (max-width:920px){.dev-grid{grid-template-columns:1fr;gap:44px}}
.laptop{border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 70px rgba(26,77,46,.20);background:#fff}
.laptop .stageL{position:relative;width:100%;aspect-ratio:940/588;overflow:hidden;background:var(--bg)}
.laptop .fitL{width:940px;height:588px;transform:scale(var(--s,1));transform-origin:top left;display:flex;flex-direction:column;font-family:var(--font-app);color:var(--ink)}
.chrome{background:#e8ebf1;display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line)}
.chrome .dot{width:11px;height:11px;border-radius:50%}
.chrome .url{margin-left:10px;flex:1;background:#fff;border:1px solid var(--line);border-radius:8px;font-family:var(--font-m);font-size:11.5px;color:var(--muted);padding:5px 12px}
.dev-copy h3{font-family:var(--font-d);font-size:28px;font-weight:800;text-transform:uppercase;margin-bottom:8px}
.dev-copy p{color:var(--muted);font-size:15px;margin-bottom:14px}
.dev-copy ul{list-style:none;margin-top:6px}
.dev-copy li{padding:6px 0 6px 28px;position:relative;font-size:14.5px}
.dev-copy li::before{content:"✓";position:absolute;left:0;top:5px;width:19px;height:19px;border-radius:50%;background:var(--tint);color:var(--primary-dark);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}

/* ── Day flow ── */
.dayflow{padding:78px 0;background:#fff}
.step{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;padding:34px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:none}
.step:nth-child(odd) .step-visual{order:-1}
@media (max-width:860px){.step{grid-template-columns:1fr;gap:22px}.step:nth-child(odd) .step-visual{order:0}}
.tag{display:inline-block;font-family:var(--font-m);font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--primary-dark);background:var(--tint);border:1px solid var(--tint-bd);border-radius:999px;padding:4px 12px;margin-bottom:12px}
.step h3{font-family:var(--font-d);font-size:30px;font-weight:800;text-transform:uppercase;line-height:1.05;margin-bottom:10px}
.step p{color:var(--muted);font-size:15.5px}
.step ul{list-style:none;margin-top:14px}
.step li{padding:6px 0 6px 28px;position:relative;font-size:14.5px}
.step li::before{content:"✓";position:absolute;left:0;top:5px;width:19px;height:19px;border-radius:50%;background:var(--tint);color:var(--primary-dark);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.vig{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:16px;font-family:var(--font-app);box-shadow:0 14px 34px rgba(26,39,68,.10)}
.vt{font-family:var(--font-m);font-size:11px;color:var(--muted);font-weight:600;margin-bottom:12px;letter-spacing:.05em;text-transform:uppercase}
.frm-line{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 13px;margin-bottom:8px;font-size:13.5px;gap:8px}
.exp-row{display:flex;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 13px;margin-bottom:8px;font-size:13px}
.exp-row .mono,.exp-total .amt{font-family:var(--font-m);font-size:12.5px}
.exp-total{display:flex;justify-content:space-between;padding:10px 13px;font-weight:800;color:var(--primary-dark);background:var(--tint);border-radius:10px;font-size:14px}
.big-p{border-radius:9px;border-left:4px solid;padding:8px 12px;margin-bottom:8px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:9px;background:#fff}
.big-p .who{margin-left:auto;font-size:11.5px;color:var(--muted);font-weight:600;white-space:nowrap}
.big-p.sc{border-color:var(--st-sched);background:rgba(37,99,235,.08)}
.big-p.ip{border-color:#f59e0b;background:rgba(245,158,11,.10)}
.big-p.dn{border-color:#dc2626;background:rgba(220,38,38,.07)}
.smsq{background:#fff;border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:10px;padding:9px 12px;font-size:12px}
.smsq .from{display:block;font-family:var(--font-m);font-size:9px;color:var(--primary-dark);font-weight:600;margin-bottom:2px}
.ynp{font-size:10px;font-weight:800;padding:2px 9px;border-radius:99px}
.ynp.y{background:var(--tint);color:var(--primary-dark)}
.prc{font-family:var(--font-m);font-size:11.5px;font-weight:600;margin-left:6px}

/* ── Everything grid ── */
.every{padding:78px 0;background:var(--bg)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:820px){.fgrid{grid-template-columns:1fr}}
.fblock{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.fblock h3{font-family:var(--font-d);font-size:22px;font-weight:800;text-transform:uppercase;margin-bottom:10px}
.fblock ul{list-style:none}
.fblock li{padding:7px 0 7px 28px;position:relative;font-size:14px;color:var(--muted);line-height:1.5}
.fblock li::before{content:"✓";position:absolute;left:0;top:8px;width:19px;height:19px;border-radius:50%;background:var(--tint);color:var(--primary-dark);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.fblock li b{color:var(--ink)}

/* ── Pricing ── */
.pricing{padding:78px 0;background:linear-gradient(160deg,var(--navy) 0%,var(--navy-light) 70%,#236b3f 100%);color:#fff}
.pricing .sec-head h2{color:#fff}
.pricing .eyebrow{color:var(--accent-light)}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}
@media (max-width:1000px){.pgrid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.pgrid{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}}
.plan{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:24px 20px;display:flex;flex-direction:column;backdrop-filter:blur(4px)}
.plan.hot{background:#fff;color:var(--ink);border:2px solid var(--primary);position:relative;transform:scale(1.02)}
.plan.hot::before{content:"MOST CREWS PICK THIS";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;font-family:var(--font-m);font-size:10px;font-weight:600;letter-spacing:.08em;padding:4px 12px;border-radius:999px;white-space:nowrap}
.pn{font-family:var(--font-d);font-size:22px;font-weight:800;text-transform:uppercase}
.pp{font-family:var(--font-d);font-size:52px;font-weight:800;line-height:1;margin:8px 0 2px}
.pp small{font-size:18px;font-weight:600;opacity:.7}
.pfor{font-size:13px;opacity:.75;margin-bottom:14px}
.plan ul{list-style:none;margin-bottom:20px;flex:1}
.plan li{padding:5px 0 5px 24px;position:relative;font-size:14px}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--accent-light);font-weight:800}
.plan.hot li::before{color:var(--primary)}
.fine{text-align:center;margin-top:26px;font-size:13px;color:#9ec4bd}
.fine a{color:var(--accent-light)}

/* ── Forms ── */
.getin{padding:78px 0;background:#fff}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:860px){.formgrid{grid-template-columns:1fr}}
form.card{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:28px}
form.card h3{font-family:var(--font-d);font-size:26px;font-weight:800;text-transform:uppercase;margin-bottom:16px}
form.card label{display:block;font-size:13px;font-weight:700;margin:12px 0 5px}
form.card input,form.card select,form.card textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;font-family:var(--font-b);font-size:14.5px;background:#fff;color:var(--ink)}
form.card input:focus,form.card select:focus,form.card textarea:focus{border-color:var(--primary);outline:none}
form.card .btn{width:100%;margin-top:18px}
.form-note{font-size:12.5px;color:var(--muted);margin-top:10px;text-align:center}

/* ── FAQ ── */
.faq{padding:78px 0;background:var(--bg)}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;max-width:760px;margin-left:auto;margin-right:auto}
.faq summary{cursor:pointer;font-weight:700;font-size:15.5px;padding:16px 20px;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:12px;font-size:22px;color:var(--primary)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 20px 16px;color:var(--muted);font-size:14.5px}

/* ── Footer ── */
footer{background:var(--navy);color:#9ec4bd;padding:38px 0}
footer .wrap{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;font-size:14px}
footer .flogo img{height:38px;width:auto;display:block;background:#fff;border-radius:8px;padding:4px 10px}
.fnav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px}
.fnav a{color:#e6f2ec;text-decoration:none;font-weight:700;padding:4px 2px}
.fnav a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.fcopy{color:#9ec4bd;font-size:13px;max-width:540px;line-height:1.6}
footer a{color:#cfe6d6;text-decoration:none}
footer a:hover{color:#fff}

/* multi-page nav active state */
.nav-links .nl[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}

/* ═══════════ REAL SCREENSHOTS — device frames, carousels, feature rows ═══════════ */
.shots{padding:74px 0;background:var(--bg)}
.shots.alt{background:linear-gradient(180deg,#0c1f30,#153450);color:#fff}
.shots.alt .sec-head h2{color:#fff}
.shots.alt .sec-head p{color:#c4d3e2}
.shots.alt .eyebrow{color:var(--accent-light)}
.shots.alt .shot-cap{color:#c4d3e2}
.shots.alt .cdot{background:rgba(255,255,255,.28)}
.shots.alt .cdot[aria-selected="true"]{background:var(--accent-light)}
.shots.alt .cnav{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.22)}
.shots.alt .cnav:hover{background:rgba(255,255,255,.2)}

/* ── Phone frame ── */
.dv-phone{position:relative;width:100%;max-width:290px;margin:0 auto;border-radius:34px;background:#0b1220;padding:9px;box-shadow:0 22px 50px rgba(6,17,30,.34),0 2px 0 rgba(255,255,255,.07) inset}
.dv-phone::before{content:"";position:absolute;top:15px;left:50%;transform:translateX(-50%);width:74px;height:5px;border-radius:4px;background:#2a3446;z-index:2}
.dv-phone img{display:block;width:100%;height:auto;border-radius:26px;background:#fff}

/* ── Desktop / browser frame ── */
.dv-hq{position:relative;width:100%;border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 20px 46px rgba(12,31,48,.18)}
.dv-hq .bar{display:flex;align-items:center;gap:6px;padding:9px 13px;background:#e9edf4;border-bottom:1px solid var(--line)}
.dv-hq .bar i{width:10px;height:10px;border-radius:50%;background:#cbd3e0;display:block}
.dv-hq .bar i:nth-child(1){background:#f2564a}.dv-hq .bar i:nth-child(2){background:#f5bc42}.dv-hq .bar i:nth-child(3){background:#41c463}
.dv-hq .bar b{margin-left:10px;font-family:var(--font-m);font-size:11px;font-weight:600;color:#6b7688;letter-spacing:.04em}
.dv-hq img{display:block;width:100%;height:auto}

.shot-cap{font-size:14.5px;color:var(--muted);margin-top:14px;text-align:center;max-width:460px;margin-left:auto;margin-right:auto;line-height:1.5}
.shot-cap b{color:inherit;font-weight:700;display:block;font-size:16px;margin-bottom:3px}
.shots.alt .shot-cap b{color:#fff}

/* ── Carousel ── */
.carousel{position:relative;margin-top:34px}
.ctrack{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 0 20px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ctrack::-webkit-scrollbar{display:none}
.cslide{flex:0 0 auto;scroll-snap-align:center;width:290px}
.carousel.hq .cslide{width:min(760px,86vw)}
.cbar{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:6px}
.cdots{display:flex;gap:8px;align-items:center}
.cdot{width:9px;height:9px;border-radius:50%;border:none;padding:0;background:#c7cedb;cursor:pointer;transition:background .18s,transform .18s}
.cdot[aria-selected="true"]{background:var(--primary);transform:scale(1.35)}
.cnav{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:17px;line-height:1;cursor:pointer;transition:background .15s,transform .12s}
.cnav:hover{background:var(--tint);transform:translateY(-1px)}
.chint{text-align:center;font-family:var(--font-m);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.shots.alt .chint{color:#8fa6bb}

/* ── Feature rows (static screenshots) ── */
.featrow{display:grid;grid-template-columns:1fr 1.25fr;gap:52px;align-items:center;padding:56px 0;border-top:1px solid var(--line)}
.shots.alt .featrow{border-top-color:rgba(255,255,255,.12)}
.featrow:first-of-type{border-top:none}
.featrow.flip .ftext{order:2}
.featrow.flip .fshot{order:1}
.featrow.phone{grid-template-columns:1fr 1fr}
.ftext h3{font-family:var(--font-d);font-size:31px;font-weight:800;line-height:1.12;margin-bottom:12px;letter-spacing:-.01em}
.ftext p{font-size:16.5px;color:var(--muted);margin-bottom:14px}
.shots.alt .ftext p{color:#c4d3e2}
.ftext ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.ftext li{font-size:15.5px;padding-left:26px;position:relative}
.ftext li::before{content:"✓";position:absolute;left:0;top:0;color:var(--primary);font-weight:800}
.shots.alt .ftext li::before{color:var(--accent-light)}
.ftag{display:inline-block;font-family:var(--font-m);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--primary-dark);margin-bottom:9px}
.shots.alt .ftag{color:var(--accent-light)}

@media (max-width:900px){
  .featrow,.featrow.phone{grid-template-columns:1fr;gap:28px;padding:40px 0}
  .featrow.flip .ftext,.featrow.flip .fshot{order:0}
  .ftext h3{font-size:26px}
  .carousel.hq .cslide{width:88vw}
  .shots{padding:52px 0}
}

/* ═══ Screenshot backdrop behind content blocks ═══ */
.every,.inds,.faq{position:relative;overflow:hidden}
.every>.wrap,.inds>.wrap,.faq>.wrap{position:relative;z-index:2}
.inds{--wash:255,255,255}
.every,.faq{--wash:242,244,248}
.shotbg{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.shotbg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(52% 30% at 50% 17%, rgb(var(--wash)) 0%, rgba(var(--wash),.90) 58%, rgba(var(--wash),0) 100%),
  radial-gradient(80% 50% at 50% 46%, rgba(var(--wash),.84) 0%, rgba(var(--wash),.60) 45%, rgba(var(--wash),.14) 76%, rgba(var(--wash),0) 100%),
  linear-gradient(180deg, rgb(var(--wash)) 0%, rgba(var(--wash),0) 10%, rgba(var(--wash),0) 90%, rgb(var(--wash)) 100%);}
.shotbg img{position:absolute;height:auto;border-radius:14px;box-shadow:0 30px 70px rgba(12,31,48,.26);
  border:1px solid rgba(12,31,48,.12);filter:saturate(1.16) contrast(1.03)}
.shotbg .ph{border-radius:26px}
.shotbg .s1{width:900px;top:40px;left:-210px;transform:rotate(-7deg)}
.shotbg .s2{width:400px;top:150px;right:-70px;transform:rotate(7deg)}
.shotbg .s3{width:880px;bottom:40px;right:-220px;transform:rotate(4deg)}
.shotbg .s4{width:370px;bottom:20px;left:-90px;transform:rotate(-6deg)}
.every .fblock,.inds .icard,.faq details{background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);
  box-shadow:0 10px 34px rgba(12,31,48,.10)}
@media (max-width:900px){
  .shotbg .s2,.shotbg .s3{display:none}
  .shotbg .s1{width:560px;top:30px;left:-190px}
  .shotbg .s4{width:250px;bottom:16px;left:-90px}
  .shotbg::after{background:linear-gradient(180deg,rgba(var(--wash),.90),rgb(var(--wash)) 55%)}
  .every .fblock,.inds .icard,.faq details{background:rgba(255,255,255,.95)}
}

/* ═══ Phone carousels: slides auto-size to the viewport so they scroll in clean pages ═══ */
@media (min-width:1000px){
  .carousel:not(.hq) .ctrack{scroll-padding-left:0}
  .carousel:not(.hq) .cslide{width:calc((100% - 3*26px)/4.35);scroll-snap-align:start}
  .carousel:not(.hq) .dv-phone{max-width:100%}
}
@media (min-width:700px) and (max-width:999px){
  .carousel:not(.hq) .cslide{width:calc((100% - 2*26px)/2.4);scroll-snap-align:start}
  .carousel:not(.hq) .dv-phone{max-width:100%}
}

/* Hairline between back-to-back dark sections so they don't read as one slab */
.shots.alt + .shots.alt{border-top:1px solid rgba(255,255,255,.09)}

/* Ghost buttons on dark sections need light ink, not the default navy */
.shots.alt .btn-ghost{color:#fff;border-color:rgba(255,255,255,.38)}
.shots.alt .btn-ghost:hover{border-color:var(--accent-light);background:rgba(255,255,255,.08)}

/* Footer social row */
.fsocial{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.fsocial a{display:inline-flex;align-items:center;gap:8px;color:#cfe6d6;font-weight:700;font-size:13px;
  border:1px solid rgba(255,255,255,.20);border-radius:999px;padding:7px 14px;transition:.15s}
.fsocial a:hover{color:#fff;border-color:var(--accent-light);background:rgba(255,255,255,.07)}
.fsocial svg{flex:0 0 auto}



/* ── Home hero: enquiry card + proof line (added 7 Aug 2026) ─────────────
   Uses the site's own brand variables and .btn classes only, so it follows the
   theme. Everything is scoped under .h1-wa / .hero-proof / .tgx-enq, so no
   existing selector on any page is affected. */
.hero h1.h1-wa{font-size:56px;line-height:.98}
@media (max-width:1100px){ .hero h1.h1-wa{font-size:48px} }
@media (max-width:900px){ .hero h1.h1-wa{font-size:40px} }
.hero-proof{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);
  font-size:15.5px;line-height:1.6;color:#42506b;max-width:34em}
.hero-proof b{color:var(--ink)}
.tgx-enq{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:24px 24px 20px;box-shadow:0 18px 44px rgba(12,31,48,.10)}
.tgx-enq h2{font-family:var(--font-d);font-weight:800;font-size:30px;letter-spacing:-.3px;
  margin:0 0 4px;text-transform:uppercase;color:var(--ink)}
.tgx-enq .sub{margin:0 0 16px;font-size:14.5px;color:var(--muted);line-height:1.45}
.tgx-enq label{display:block;font-size:12.5px;font-weight:700;margin:0 0 5px;color:var(--ink)}
.tgx-enq input,.tgx-enq select{width:100%;padding:11px 13px;border:1.5px solid var(--line);
  border-radius:10px;font-size:15px;font-family:var(--font-b);background:#fff;color:var(--ink)}
.tgx-enq input:focus,.tgx-enq select:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(13,148,136,.16)}
.tgx-enq .f{margin-bottom:12px}
.tgx-enq .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tgx-enq .btn{width:100%;margin-top:4px;text-align:center;font-size:16px;padding:14px 24px}
.tgx-enq .tiny{font-size:12.5px;color:var(--muted);margin:10px 0 0;line-height:1.45;text-align:center}
@media (max-width:900px){ .tgx-enq{margin-top:24px} }


/* ═══ SITE: high-contrast dark theme (added 7 Aug 2026) ══════════════════════════
   Scoped entirely under body.tgx-bold. Nothing here can reach /tour,
   /features, /industries, /pricing or /get-started — they keep the light
   treatment until the same class is added to them.

   Why dark: the page was light-on-light top to bottom, so the hero had no
   more visual weight than a mid-page section. A navy band with a white card
   sitting on it gives the offer somewhere to land, and lime is the one colour
   that survives against both navy and the teal used everywhere else. */
:root{ --lime:#a3e635; --lime-dk:#8fce2b; --navy-deep:#081a2e; }

/* ── header ── */
body.tgx-bold header{background:rgba(8,26,46,.94);border-bottom:1px solid rgba(255,255,255,.10)}
body.tgx-bold header .nav a{color:#e6eefb}
body.tgx-bold header .nav a:hover{color:#fff}
body.tgx-bold header .btn-primary{background:var(--lime);color:#132106}
body.tgx-bold header .btn-primary:hover{background:var(--lime-dk)}
body.tgx-bold header .btn-ghost{color:#e6eefb;border-color:rgba(255,255,255,.32)}
/* The logo is a navy-to-teal gradient built for a light header; on navy the
   "Tradi" half all but disappears. Knocked to solid white rather than shipping a
   second logo file — same treatment as the ad set. */
body.tgx-bold header img[src*="tradix_logo"]{filter:brightness(0) invert(1)}

/* ── hero band ── */
body.tgx-bold .hero{
  background:radial-gradient(1100px 620px at 78% 12%, #17406e 0%, transparent 62%),
             linear-gradient(168deg, var(--navy-deep) 0%, #0e2748 58%, #123054 100%);
  padding:72px 0 84px}
body.tgx-bold .hero h1.h1-wa{
  font-family:var(--font-b);          /* Barlow 800 is chunkier and wider than
                                         Barlow Condensed — the heavier look */
  font-weight:800;font-size:60px;line-height:1.02;letter-spacing:-1.6px;
  color:#fff;text-transform:none}
body.tgx-bold .hero h1.h1-wa .mark{color:var(--spark)}
@media (max-width:1100px){ body.tgx-bold .hero h1.h1-wa{font-size:52px} }
@media (max-width:900px){ body.tgx-bold .hero h1.h1-wa{font-size:42px;letter-spacing:-1px} }
body.tgx-bold .hero p.lede{color:#c2d4ee;font-size:19px}
body.tgx-bold .hero-note{color:#8fa6c8}
body.tgx-bold .hero-proof{border-top-color:rgba(255,255,255,.16);color:#c2d4ee}
body.tgx-bold .hero-proof b{color:#fff}

/* ── hero buttons ── */
body.tgx-bold .hero .btn-primary{background:var(--lime);color:#132106;
  box-shadow:0 10px 26px rgba(163,230,53,.26)}
body.tgx-bold .hero .btn-primary:hover{background:var(--lime-dk)}
body.tgx-bold .hero .btn-ghost{color:#fff;border:1.5px solid rgba(255,255,255,.4);background:transparent}
body.tgx-bold .hero .btn-ghost:hover{background:rgba(255,255,255,.09)}

/* ── the card keeps its white, which is the whole point of it on navy ── */
body.tgx-bold .tgx-enq{box-shadow:0 30px 70px rgba(3,12,26,.55);border-color:rgba(255,255,255,.14)}
body.tgx-bold .tgx-enq .btn-primary{background:var(--primary);color:#fff}
body.tgx-bold .tgx-enq .btn-primary:hover{background:var(--primary-dark)}

/* ── carry a little of the accent down the page so the hero is not an orphan ── */
body.tgx-bold .eyebrow{color:var(--primary)}
body.tgx-bold .eyebrow::before{content:"";display:inline-block;width:22px;height:3px;
  border-radius:2px;background:var(--lime);vertical-align:middle;margin-right:9px}

/* ═══ SITE-WIDE ROLLOUT of the bold theme (7 Aug 2026) ═══════════════════════════
   The hero was doing all the selling and then the page fell back to light-on-light
   with condensed uppercase headings — it read like two different sites stapled
   together. This carries the three things that make the hero work down every page:

     1. Barlow 800 sentence case instead of Barlow Condensed UPPERCASE
     2. one loud CTA colour (lime) for "start the trial", teal kept for secondary
     3. a dark / light band rhythm so nothing sits flat

   Still entirely scoped under body.tgx-bold. Remove the class from a page and that
   page returns to the original light treatment untouched. */

/* ── 1. headings: the hero's face, everywhere ────────────────────────────────── */
body.tgx-bold .sec-head h2,
body.tgx-bold .step h3,
body.tgx-bold .fblock h3,
body.tgx-bold .waitcard h2,
body.tgx-bold .mcard .mh,
body.tgx-bold .midline,
body.tgx-bold .pn,
body.tgx-bold .dev-copy h3{
  font-family:var(--font-b);font-weight:800;text-transform:none}
body.tgx-bold .sec-head h2{font-size:clamp(30px,3.6vw,44px);line-height:1.05;letter-spacing:-1.3px}
body.tgx-bold .step h3{font-size:28px;line-height:1.1;letter-spacing:-.8px}
body.tgx-bold .dev-copy h3{font-size:28px;line-height:1.1;letter-spacing:-.8px}
body.tgx-bold .fblock h3{font-size:21px;letter-spacing:-.5px}
body.tgx-bold .mcard .mh{font-size:21px;letter-spacing:-.4px}
body.tgx-bold .waitcard h2{font-size:34px;letter-spacing:-1px}
body.tgx-bold .pn{font-size:20px;letter-spacing:-.4px}
body.tgx-bold .pp{font-family:var(--font-b);font-weight:800;letter-spacing:-2px}
body.tgx-bold .icard b{font-weight:800;letter-spacing:-.3px}

/* ── 2. one CTA colour. Lime = "start the trial", and nothing else uses it ────── */
body.tgx-bold .btn-primary{background:var(--lime);color:#132106}
body.tgx-bold .btn-primary:hover{background:var(--lime-dk);box-shadow:0 8px 20px rgba(163,230,53,.32)}
/* "Book my demo" is the softer of the two asks on /get-started — it stays teal so
   the free trial is unmistakably the louder button of the pair. */
body.tgx-bold #demo-form .btn-primary,
body.tgx-bold form[name="book-demo"] .btn-primary{background:var(--primary);color:#fff}
body.tgx-bold #demo-form .btn-primary:hover,
body.tgx-bold form[name="book-demo"] .btn-primary:hover{background:var(--primary-dark);box-shadow:none}

/* ── 3. dark bands ───────────────────────────────────────────────────────────── */
body.tgx-bold .every,
body.tgx-bold .inds,
body.tgx-bold .tgx-closer{
  background:radial-gradient(1000px 560px at 74% 6%, #17406e 0%, transparent 60%),
             linear-gradient(168deg, var(--navy-deep) 0%, #0e2748 62%, #123054 100%);
  color:#fff;border-top:1px solid rgba(255,255,255,.08)}
/* .shotbg fades the background collage into the section colour — it has to be told
   the section is navy now or it fades screenshots into a light halo on navy. */
body.tgx-bold .every,
body.tgx-bold .inds{--wash:8,26,46}
body.tgx-bold .every .shotbg img,
body.tgx-bold .inds .shotbg img{border-color:rgba(255,255,255,.14);
  box-shadow:0 30px 70px rgba(0,0,0,.5)}

body.tgx-bold .every .sec-head h2,
body.tgx-bold .inds .sec-head h2,
body.tgx-bold .tgx-closer .sec-head h2{color:#fff}
body.tgx-bold .every .sec-head p,
body.tgx-bold .inds .sec-head p,
body.tgx-bold .tgx-closer .sec-head p{color:#b6cbe8}
body.tgx-bold .every .eyebrow,
body.tgx-bold .inds .eyebrow,
body.tgx-bold .tgx-closer .eyebrow,
body.tgx-bold .pricing .eyebrow,
body.tgx-bold .shots.alt .eyebrow,
body.tgx-bold .waitcard .eyebrow{color:var(--spark)}

/* ghost buttons need light ink once the band behind them goes navy */
body.tgx-bold .tgx-closer .btn-ghost,
body.tgx-bold .every .btn-ghost,
body.tgx-bold .inds .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4);background:transparent}
body.tgx-bold .tgx-closer .btn-ghost:hover,
body.tgx-bold .every .btn-ghost:hover,
body.tgx-bold .inds .btn-ghost:hover{background:rgba(255,255,255,.09);border-color:var(--spark)}

/* the two teaser sections at the foot of the home page become one closing band */
body.tgx-bold .tgx-closer{border-top:none}
body.tgx-bold .tgx-closer + .tgx-closer{margin-top:-1px}

/* ── heroes that are not the home page ───────────────────────────────────────── */
/* /tour has its own h1 (no .h1-wa), which kept the light-page ink colour and went
   near-invisible the moment the hero band went navy. */
body.tgx-bold .hero h1{color:#fff}
body.tgx-bold .hero h1 .mark{background:none;-webkit-background-clip:border-box;
  background-clip:border-box;color:var(--spark)}
body.tgx-bold .hero .eyebrow{color:var(--spark)}
body.tgx-bold .hero p.lede{color:#c2d4ee}
body.tgx-bold .hero p{color:#b6cbe8}

/* ── pricing band: match the hero's navy instead of the old navy→green fade ───── */
body.tgx-bold .pricing{
  background:radial-gradient(1000px 560px at 74% 6%, #17406e 0%, transparent 60%),
             linear-gradient(168deg, var(--navy-deep) 0%, #0e2748 62%, #123054 100%)}
body.tgx-bold .plan.hot::before{background:var(--lime);color:#132106}
body.tgx-bold .plan.hot{border-color:var(--lime)}

/* ── the early-access card on /get-started ───────────────────────────────────── */
body.tgx-bold .waitcard{
  background:radial-gradient(700px 400px at 78% 8%, #17406e 0%, transparent 62%),
             linear-gradient(150deg, var(--navy-deep) 0%, #0e2748 70%, #123054 100%)}
body.tgx-bold .waitform input[type=email]:focus{border-color:var(--lime)}

/* ── tick marks pick up the accent so the lists stop reading grey ─────────────── */
body.tgx-bold .step li::before,
body.tgx-bold .fblock li::before{background:var(--tint);color:var(--primary-dark)}
body.tgx-bold .mcard.win{border-color:var(--primary)}

/* ── footer: hairline so it separates from a dark section above it ───────────── */
body.tgx-bold footer{border-top:1px solid rgba(255,255,255,.09)}

/* ── rollout corrections, measured in-browser ─────────────────────────────────
   Found by rendering all seven pages, not by reading the CSS: */

/* 1. .every and .inds set color:#fff for the band, and the white cards sitting on
      that band inherited it — every card title went white-on-white. */
body.tgx-bold .every .fblock,
body.tgx-bold .inds .icard{color:var(--ink)}
body.tgx-bold .every .fblock h3,
body.tgx-bold .inds .icard b{color:var(--ink)}
body.tgx-bold .inds .icard span:not(.ic){color:var(--muted)}

/* 2. remaining Barlow Condensed uppercase headings the first pass missed */
body.tgx-bold .hero h1,
body.tgx-bold form.card h3,
body.tgx-bold .tgx-enq h2,
body.tgx-bold .ph-side h4,
body.tgx-bold .ftext h3{font-family:var(--font-b);font-weight:800;text-transform:none;
  letter-spacing:-1px;line-height:1.06}
body.tgx-bold .hero h1{font-size:clamp(38px,5vw,58px);letter-spacing:-1.6px}
body.tgx-bold form.card h3{font-size:24px;letter-spacing:-.6px}
body.tgx-bold .tgx-enq h2{font-size:28px;letter-spacing:-.8px}

/* 3. one CTA colour means the hero card's button too — it is the same offer as
      the lime button sitting next to it, so it cannot be a different colour. */
body.tgx-bold .tgx-enq .btn-primary{background:var(--lime);color:#132106;
  box-shadow:0 8px 20px rgba(163,230,53,.28)}
body.tgx-bold .tgx-enq .btn-primary:hover{background:var(--lime-dk)}
/* the card sub-line was mid-grey on white inside a dark band — too faint to read */
body.tgx-bold .tgx-enq .sub{color:#5c6a83}

/* ── contrast pass ────────────────────────────────────────────────────────────
   Every text node on all seven pages was measured against its real composited
   background. Three of these were caused by the rollout; the fourth was already
   there and is worth fixing while the file is open. */

/* a) The header CTA went unreadable: `header .nav a{color:#e6eefb}` out-specifies
      `header .btn-primary{color:#132106}` (two classes + three elements beats two
      classes + two), so the lime button was carrying pale blue text — 1.29:1. */
body.tgx-bold header .nav a.btn-primary{color:#132106}
body.tgx-bold header .nav a.btn-primary:hover{color:#132106}

/* b) `.hero p{color:#b6cbe8}` was written for copy sitting ON the navy band, but
      it also reached inside the white enquiry card — the fine print under the
      button was pale blue on white at 1.65:1. Target the two real hero paragraphs
      instead of every <p> in the section. */
body.tgx-bold .hero > .wrap > div > p{color:#b6cbe8}
body.tgx-bold .tgx-enq p.tiny{color:#626d80}
body.tgx-bold .tgx-enq p.sub{color:#5c6779}

/* c) Eyebrows on LIGHT sections went to --primary (3.4:1). Dark sections keep the
      brighter --spark, set further up; this is the light-section default. */
body.tgx-bold .eyebrow{color:var(--primary-dark)}

/* d) Pre-existing: --muted #7a8499 is 3.76:1 on white and 3.41:1 on the page
      background — under AA everywhere it is used, which is most body copy on the
      site. #626d80 clears it (5.23 / 4.75) and reads sharper on a screen in a van. */
body.tgx-bold{--muted:#626d80}

/* e) White on --primary is 3.74:1. The one solid-teal button left on the site is
      "Book my demo"; --primary-dark takes it to 5.80:1. */
body.tgx-bold form[name="book-demo"] .btn-primary{background:var(--primary-dark)}
body.tgx-bold form[name="book-demo"] .btn-primary:hover{background:#0a6459}

/* ── mobile header + menu (reported from a real phone, 7 Aug) ─────────────────
   Two bugs, one cause each:

   a) The open menu was unreadable. `header .nav a{color:#e6eefb}` was written for
      the dark desktop header, but on mobile those same anchors move into a
      dropdown panel that is still the ORIGINAL light `rgba(242,244,248,.98)` —
      pale blue on near-white. The panel's 98% alpha plus backdrop-blur also let
      the hero headline ghost through behind the links. Fixed by taking the panel
      dark, which is where the theme should have put it in the first place.

   b) The Explore toggle was still `--primary` teal, the pre-rollout colour. It is
      navigation, not the offer, so it becomes an outline button rather than a
      second lime one — lime stays reserved for "start the trial", which is the
      rule the whole theme runs on. */
@media (max-width:1119px){
  body.tgx-bold .nav-links{
    background:var(--navy-deep);
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border-bottom:1px solid rgba(255,255,255,.12);
    box-shadow:0 22px 44px rgba(3,12,26,.55);
    padding:6px 20px 18px}
  body.tgx-bold .nav-links a.nl{color:#fff;font-size:17px;padding:15px 2px;
    border-bottom:1px solid rgba(255,255,255,.10)}
  body.tgx-bold .nav-links a.nl:last-of-type{border-bottom:none}
  body.tgx-bold .nav-links a.nl[aria-current="page"]{color:var(--spark)}

  body.tgx-bold .navtoggle{background:transparent;border:1.5px solid rgba(255,255,255,.42);
    color:#fff}
  body.tgx-bold .navtoggle:hover,
  body.tgx-bold .navtoggle.open{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.6)}
  body.tgx-bold .navtoggle-bars i{background:#fff}

  /* The trial was buried inside the menu on a phone — three taps from the top of
     the page. It now sits in the sticky bar, so it is one tap from anywhere. */
  .navcta{display:inline-flex;align-items:center;margin-left:auto;
    height:42px;padding:0 16px;font-size:14.5px;border-radius:11px}
  .navtoggle{margin-left:9px}
}
@media (min-width:1120px){ .navcta{display:none} }
/* Below about 420px the logo, the trial button and a labelled toggle stop fitting
   on one row — measured, not guessed. The burger drops its label first. */
@media (max-width:420px){
  .navtoggle{padding:0 12px}
  .navtoggle-label{display:none}
  .navcta{padding:0 13px;font-size:14px}
}

/* With the trial now in the sticky bar, the lime button inside the menu was a
   second lime element on the same screen. It still earns its place — it is the
   only route to the demo — so it becomes the outline of the pair. One lime
   element visible at a time. */
@media (max-width:1119px){
  /* Needs header + .nav in the selector: the earlier header-CTA fix is
     `body.tgx-bold header .nav a.btn-primary` at (0,3,3), so anything shorter
     loses and the label stays lime-ink dark on a transparent button. */
  body.tgx-bold header .nav .nav-links a.btn-primary{background:transparent;color:#fff;
    border:1.5px solid rgba(255,255,255,.42);box-shadow:none}
  body.tgx-bold header .nav .nav-links a.btn-primary:hover{background:rgba(255,255,255,.10);
    border-color:rgba(255,255,255,.6);color:#fff}
  /* "Free trial" wrapped to two lines at 360px */
  .navcta{white-space:nowrap}
}

/* ── Watch how it works ─────────────────────────────────────────── */
.tgx-watch{padding:78px 0;background:var(--navy);color:#fff}
.tgx-watch .sec-head h2{color:#fff}
.tgx-watch .sec-head p{color:#a9bdd0}
.tgx-watch .eyebrow{color:var(--spark)}
/* Was a hard repeat(5,1fr). Pulling video 04 for a re-shoot left a card of
   dead space on the right. Counting the children instead means the row fills
   whatever is actually there, and fills again when 04 comes back. */
.wt-grid{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(5,1fr)}
.wt-grid:has(> :last-child:nth-child(4)){grid-template-columns:repeat(4,1fr)}
.wt-grid:has(> :last-child:nth-child(3)){grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.wt-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.wt-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media (max-width:440px){.wt-grid{grid-template-columns:1fr}}
.wt-card{margin:0}
.wt-btn{display:block;width:100%;text-align:left;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit}
.wt-btn:focus-visible{outline:3px solid var(--lime);outline-offset:4px;border-radius:16px}
.wt-media{position:relative;display:block;border-radius:14px;overflow:hidden;background:#0a1826;aspect-ratio:9/16;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.wt-media img,.wt-media video{width:100%;height:100%;object-fit:cover;display:block}
.wt-media video{position:absolute;inset:0;opacity:0;transition:opacity .35s}
.wt-btn:hover .wt-media video,.wt-btn:focus-visible .wt-media video{opacity:1}
.wt-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,16,28,.7),rgba(5,16,28,0) 46%)}
.wt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:54px;height:54px;border-radius:50%;background:var(--lime);display:grid;place-items:center;transition:transform .2s}
.wt-play::before{content:"";width:0;height:0;margin-left:4px;border-left:16px solid var(--navy);border-top:10px solid transparent;border-bottom:10px solid transparent}
.wt-btn:hover .wt-play{transform:translate(-50%,-50%) scale(1.09)}
.wt-len{position:absolute;right:9px;bottom:9px;z-index:2;font-family:var(--font-m);font-size:11px;font-weight:600;color:#fff;background:rgba(5,16,28,.72);padding:3px 7px;border-radius:6px}
.wt-meta{display:block;padding:13px 2px 0}
.wt-step{font-family:var(--font-m);font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--spark)}
.wt-title{display:block;font-family:var(--font-b);font-size:17px;font-weight:700;line-height:1.25;margin:3px 0 5px;color:#fff}
.wt-desc{display:block;font-family:var(--font-b);font-size:14px;line-height:1.45;color:#93a8bd}
.wt-note{font-size:14px;color:#8fa4b8;margin-top:12px}
.wt-lb[hidden]{display:none}
.wt-lb{position:fixed;inset:0;z-index:9999;background:rgba(4,12,21,.93);display:grid;place-items:center;padding:24px}
.wt-lb-stage{width:min(420px,92vw);aspect-ratio:9/16;max-height:88vh;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.wt-lb-vid{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.wt-lb-close{position:absolute;top:18px;right:22px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.wt-lb-close:hover{background:rgba(255,255,255,.22)}
@media (prefers-reduced-motion:reduce){.wt-media video{display:none}.wt-play,.wt-btn:hover .wt-play{transition:none}}

/* build version in the footer — value comes from /version.json via app.js */
.fver{font-family:var(--font-m);font-size:.92em;letter-spacing:.02em;opacity:.7}


/* ── "Watch how it works" nav item, and making the bar actually fit ──
   Adding a seventh item exposed a fault that was already live: .nav-links
   never had nowrap, so from about 1030px down the labels broke over two
   and three lines -- "Product / tour", "Solar / Industry", "Get started /
   Demo" -- instead of the bar handing over to the burger. Measured, the
   six-item bar needed 1027px and was still being shown at 761px.

   "Watch how it works" is a long label for a seventh item, so the bar now
   steps down twice before it gives up: full size, then tighter, then the
   burger. Breakpoints are measured off the real label widths, not picked. */
/* The logo had no flex-shrink guard, so instead of the bar giving up and
   handing to the burger, flex quietly crushed the TradiX mark -- 171px
   down to 45px at 1440. It holds its size now and the breakpoints below
   do the work. */
.nav-links{flex-wrap:nowrap}
.nav-links a{white-space:nowrap}

/* .wrap is capped at 1120px, so a wider viewport buys the bar no room at
   all -- seven items have to fit in 1120 minus 44 of padding, at every
   desktop width. One sizing rather than a ladder of tiers: 13.5px labels
   and 12px gaps land it with 22px clear on each side. Below 1120 the wrap
   starts tracking the viewport and that clearance goes, so that is exactly
   where the burger takes over. */
@media (min-width:1120px){
  /* Only pinned on the bar. On a phone the logo still has to give way to
     the trial button and the burger -- pinning it there pushed the burger
     46px off the right edge at 360. */
  .logo{flex:0 0 auto}
  .nav-links{flex:0 0 auto}
  .nav{gap:16px}
  .nav-links{gap:12px}
  .nav-links a.nl{font-size:13.5px}
  .nav-links .btn{padding:10px 15px;font-size:14px}
}


/* ── SEO: the h2 that was really the page's subject is now an h1 ─────
   Eight pages carried no h1 at all -- the line that names the page was
   marked up as an h2, so to a crawler the page declared no subject. The
   tag changed; these rules carry the h2 styling across verbatim so not a
   pixel moves. Verified by diffing computed styles before and after. */
.sec-head h1{font-family:var(--font-d);font-weight:800;font-size:clamp(32px,4vw,46px);
  text-transform:uppercase;line-height:1.06;margin-top:8px}
.pricing .sec-head h1{color:#fff}
.shots.alt .sec-head h1{color:#fff}
.tgx-watch .sec-head h1{color:#fff}
.waitcard h1{color:#fff;margin:6px 0 8px}
body.tgx-bold .sec-head h1,
body.tgx-bold .waitcard h1{font-family:var(--font-b);font-weight:800;text-transform:none}
body.tgx-bold .sec-head h1{font-size:clamp(30px,3.6vw,44px);line-height:1.05;letter-spacing:-1.3px}
body.tgx-bold .waitcard h1{font-size:34px;letter-spacing:-1px}
body.tgx-bold .every .sec-head h1,
body.tgx-bold .inds .sec-head h1,
body.tgx-bold .tgx-closer .sec-head h1{color:#fff}

/* 16:9 desktop cut of the episodes -- the stage has to change shape with the
   file, or the wide cut sits letterboxed inside a 9:16 box. */
.wt-lb-stage.is-wide{width:min(1180px,94vw,calc(86vh * 16 / 9));aspect-ratio:16/9;max-height:86vh}