/* ============================================================
   Bold Collective — shared design system
   Used by every page. Console-specific rules live in console.css.
   ============================================================ */

:root{
  --ink:#1A1A1A;
  --ink-2:#212121;
  --ink-3:#262626;
  --red:#F70404;
  --red-dim:#7A0202;
  --red-glow:rgba(247,4,4,.18);
  --paper:#FAFAFA;
  --gray:#8A8A8A;
  --gray-2:#A8A8A8;
  --rule:rgba(250,250,250,.14);
  --rule-bright:rgba(250,250,250,.26);

  --display:'Poppins','TeX Gyre Adventor','Century Gothic','Futura',sans-serif;
  --body:'Inter','Helvetica Neue','TeX Gyre Heros',Arial,sans-serif;
  --mono:'IBM Plex Mono','DejaVu Sans Mono',ui-monospace,monospace;

  --pad:clamp(24px,5vw,88px);
  --maxw:1360px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font-family:var(--body);
  font-weight:300;-webkit-font-smoothing:antialiased}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
a{color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
::selection{background:var(--red-glow);color:var(--paper)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--ink-2)}
::-webkit-scrollbar-thumb{background:var(--rule-bright)}
::-webkit-scrollbar-thumb:hover{background:var(--red-dim)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
section{padding-block:clamp(56px,7vw,104px);border-top:1px solid var(--rule)}

/* ---------- type ---------- */
.eyebrow{font-family:var(--mono);font-size:16.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gray);display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:10px;height:10px;background:var(--red);flex:none}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.022em;line-height:1.06}
h2{font-size:clamp(28px,3.6vw,46px)}
.lead{font-size:clamp(15px,1.3vw,18px);line-height:1.6;color:var(--gray-2);max-width:56ch}
.lead b{color:var(--paper);font-weight:400}

/* ---------- nav ---------- */
nav.site{position:sticky;top:0;z-index:60;background:rgba(26,26,26,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
nav.site .bar{display:flex;align-items:center;gap:26px;padding:22px var(--pad);
  max-width:var(--maxw);margin:0 auto}
nav.site img{height:30px;width:auto}
nav.site .links{margin-left:auto;display:flex;gap:26px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gray-2)}
nav.site .links a{text-decoration:none}
nav.site .links a:hover,nav.site .links a[aria-current]{color:var(--red)}
@media(max-width:760px){nav.site .links{gap:16px;font-size:9px;letter-spacing:.12em}}

/* ---------- page header ---------- */
.pagehead{padding-block:clamp(32px,4.4vw,60px) clamp(34px,4vw,56px);border-top:none}
.pagehead .tick{width:64px;height:5px;background:var(--red);margin-bottom:clamp(24px,3.5vw,44px)}
.pagehead h1{font-size:clamp(38px,6.4vw,84px);letter-spacing:-.032em;line-height:1;max-width:18ch}
.pagehead h1 em{font-style:normal;color:var(--red)}
.pagehead .sub{margin-top:clamp(20px,2.6vw,32px);font-size:clamp(15px,1.4vw,20px);
  line-height:1.55;color:var(--gray-2);max-width:none}
.pagehead .sub b{color:var(--paper);font-weight:400}

/* ---------- stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(22px,3vw,40px);border-top:1px solid var(--rule);padding-top:clamp(28px,3.5vw,44px);
  align-items:stretch}
.stats > div{display:flex;flex-direction:column}
.stats .n{font-family:var(--display);font-weight:700;letter-spacing:-.028em;line-height:1;
  font-size:clamp(28px,3.4vw,44px);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1}
.stats .n.counting{color:var(--red)}
.stats .n.hot{color:var(--red)}
.stats .l{margin-top:auto;padding-top:9px;font-size:13px;line-height:1.4;color:var(--gray-2)}

/* ---------- columns ---------- */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0;
  margin-top:clamp(30px,4vw,52px)}
.cols .col{padding-inline:clamp(20px,2.4vw,36px);border-left:1px solid var(--rule)}
.cols .col:first-child{padding-left:0;border-left:none}
.cols .col:last-child{padding-right:0}
@media(max-width:840px){
  .cols .col{border-left:none;padding-inline:0;padding-bottom:30px;
    border-bottom:1px solid var(--rule);margin-bottom:30px}
  .cols .col:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
}
.cols h3{font-size:clamp(22px,2.2vw,29px);margin-bottom:11px}
.cols .def{color:var(--gray-2);font-size:14.5px;line-height:1.5;padding-bottom:20px;
  margin-bottom:20px;border-bottom:1px solid var(--rule)}
.cols ul{list-style:none}
.cols li{position:relative;padding:0 0 15px 19px;font-size:15px;line-height:1.45}
.cols li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;background:var(--red)}
.cols li b{font-weight:600}

/* ---------- cards / chips ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(20px,2.4vw,32px);margin-top:clamp(30px,4vw,52px)}
.card{border:1px solid var(--rule);padding:clamp(24px,2.8vw,38px)}
.card .k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--red);
  text-transform:uppercase;margin-bottom:14px}
.card .stat{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.6vw,33px);
  letter-spacing:-.02em;line-height:1.15;margin-bottom:18px}
.card .stat b{color:var(--red)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips span{border:1px solid var(--rule);padding:8px 13px;font-size:13px}

/* ---------- rule-marked items ---------- */
.marks{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(18px,2.4vw,28px);margin-top:clamp(28px,3.5vw,44px)}
.marks .m{border-left:2px solid var(--red);padding-left:14px}
.marks .mn{font-family:var(--display);font-weight:700;font-size:16px;margin-bottom:5px}
.marks .md{font-size:13px;line-height:1.45;color:var(--gray-2)}

/* ---------- timeline (story page) ---------- */
.tl{margin-top:clamp(30px,4vw,52px);border-top:1px solid var(--rule)}
.tl .row{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:clamp(18px,3vw,44px);
  padding-block:clamp(24px,3vw,38px);border-bottom:1px solid var(--rule)}
.tl .yr{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--red);padding-top:6px}
.tl h3{font-size:clamp(20px,2.1vw,27px);margin-bottom:10px}
.tl p{font-size:15px;line-height:1.6;color:var(--gray-2);max-width:62ch}
.tl p b{color:var(--paper);font-weight:400}
@media(max-width:700px){.tl .row{grid-template-columns:1fr;gap:12px}}

/* ---------- platform logo row ---------- */
.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:clamp(20px,3vw,40px);align-items:center;margin-top:clamp(24px,3vw,36px)}
.logos img{width:100%;height:44px;object-fit:contain}

/* ---------- buttons ---------- */
.btnrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,38px)}
.sbtn{display:inline-block;background:var(--paper);color:var(--ink);text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  padding:17px 28px;transition:opacity .15s;border:1px solid var(--paper)}
.sbtn:hover{opacity:.82}
.sbtn.ghost{background:transparent;color:var(--paper);border-color:var(--rule-bright)}
.sbtn.red{background:var(--red);border-color:var(--red);color:var(--paper)}

/* ---------- CTA band ---------- */
.cta{background:var(--red);color:var(--ink);border-top:none}
.cta h2{max-width:18ch}
.cta .lead{color:rgba(26,26,26,.78)}
.cta .eyebrow{color:rgba(26,26,26,.72)}
.cta .eyebrow::before{background:var(--ink)}
.cta .sbtn{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.cta .sbtn.ghost{background:transparent;color:var(--ink);border-color:rgba(26,26,26,.4)}

/* ---------- footer ---------- */
footer.site{padding-block:clamp(36px,4vw,56px);border-top:1px solid var(--rule)}
footer.site .row{display:flex;flex-wrap:wrap;gap:26px;align-items:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gray)}
footer.site .row .sp{margin-left:auto}
footer.site a{text-decoration:none}
footer.site a:hover{color:var(--red)}

/* ---------- hero splash (home) ---------- */
.splash{padding-block:clamp(34px,5vw,66px) clamp(34px,4vw,56px);border-top:none}
.splash .tick{width:64px;height:5px;background:var(--red);margin-bottom:clamp(22px,3vw,38px)}
.splash .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gray);margin-bottom:clamp(18px,2.4vw,28px)}
.splash h1{font-size:clamp(33px,5.4vw,76px);letter-spacing:-.034em;line-height:1.0;max-width:26ch}
.splash h1 em{font-style:normal;color:var(--red)}
.splash h1 .strike{position:relative;white-space:nowrap}
.splash h1 .strike::after{content:"";position:absolute;left:-3%;right:-3%;top:52%;
  height:.06em;background:var(--red);transform:rotate(-1.4deg)}
.splash .sub{margin-top:clamp(24px,3.2vw,40px);font-size:clamp(16px,1.5vw,21px);
  line-height:1.55;color:var(--gray-2);max-width:58ch}
.splash .sub b{color:var(--paper);font-weight:400}

/* ---------- then / now contrast band ---------- */
.thennow{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--rule);
  margin-top:clamp(30px,4vw,52px)}
.thennow > div{padding:clamp(24px,3vw,40px)}
.thennow .then{border-right:1px solid var(--rule);color:var(--gray-2)}
.thennow .now{background:var(--ink-2)}
.thennow .lab{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:16px}
.thennow .then .lab{color:var(--gray)}
.thennow .now .lab{color:var(--red)}
.thennow ul{list-style:none}
.thennow li{position:relative;padding:0 0 13px 20px;font-size:15px;line-height:1.45}
.thennow li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px}
.thennow .then li::before{background:var(--gray)}
.thennow .now li::before{background:var(--red)}
.thennow .now li b{font-weight:600}
@media(max-width:760px){
  .thennow{grid-template-columns:1fr}
  .thennow .then{border-right:none;border-bottom:1px solid var(--rule)}
}

/* ---------- nav lockup ---------- */
nav.site .lockup{display:flex;align-items:center;gap:16px;text-decoration:none}
nav.site .lockup img{height:68px;width:auto}
nav.site .lockup span{font-family:var(--display);font-weight:700;font-size:27px;
  letter-spacing:-.028em;text-transform:uppercase;color:var(--paper);white-space:nowrap}
@media(max-width:900px){
  nav.site .bar{padding-block:15px}
  nav.site .lockup img{height:46px}
  nav.site .lockup span{font-size:19px}
}
@media(max-width:560px){nav.site .lockup span{display:none}}

/* ---------- inventory cards ---------- */
.invcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:clamp(20px,2.4vw,32px);margin-top:clamp(30px,4vw,52px)}
.invcard{border:1px solid var(--rule);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column}
.invcard .k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--red);
  text-transform:uppercase;margin-bottom:18px}
.invcard .big{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1;
  font-size:clamp(34px,4.2vw,56px)}
.invcard .big em{font-style:normal;color:var(--red)}
.invcard .biglab{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gray-2);margin-top:12px;padding-bottom:24px;border-bottom:1px solid var(--rule)}
.ivrow{padding-block:22px;border-bottom:1px solid var(--rule)}
.ivrow:last-child{border-bottom:none;padding-bottom:0}
.ivl{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gray-2);margin-bottom:16px}
.tygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px 14px}
.ty{display:flex;align-items:center;gap:11px}
.ty .ic{width:38px;height:38px;flex:none;border:1px solid var(--rule-bright);color:var(--red);
  display:flex;align-items:center;justify-content:center}
.ty .ic svg{width:20px;height:20px;display:block}
.ty span{font-size:14px;line-height:1.25}
.pl-logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));
  gap:14px 18px;align-items:center}
.pl-logos img{width:100%;height:30px;object-fit:contain}
.splash .sub b.hot{color:var(--red);font-weight:600}

/* hero sub picks up the display face so it reads as one lockup with the headline */
.splash .sub{font-family:var(--display);font-weight:400;letter-spacing:-.006em;line-height:1.45}
.splash .sub b{font-weight:600}

/* core pillar names in red */
#platform .cols h3{color:var(--red)}

/* the long-form stat value needs room to breathe */
.stats .n{overflow-wrap:normal}

/* big category title on the inventory cards */
.invcard .cat{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1;
  font-size:clamp(30px,3.4vw,44px);color:var(--red);text-transform:uppercase;margin-bottom:20px}

/* platform names, pending real logo files */
.pl-names{display:flex;flex-wrap:wrap;gap:8px}
.pl-names span{border:1px solid var(--rule-bright);padding:9px 14px;font-size:14px;
  font-family:var(--display);font-weight:600;letter-spacing:-.005em}

/* ---------- HBX reveal ---------- */
.reveal{margin-top:clamp(30px,3.8vw,50px)}
.reveal .said{font-family:var(--display);font-weight:700;letter-spacing:-.026em;line-height:1;
  font-size:clamp(24px,3vw,40px);color:var(--paper)}
.reveal .mark{display:block;width:auto;height:clamp(70px,8.4vw,117px);
  filter:blur(16px);opacity:0;transform:scale(1.06);transform-origin:left center}
.reveal .mark.sharp{filter:blur(0);opacity:1;transform:scale(1);
  transition:filter 1100ms cubic-bezier(.2,.7,.2,1),
             opacity 700ms ease-out,
             transform 1100ms cubic-bezier(.2,.7,.2,1)}
.reveal .gloss{margin-top:clamp(18px,2.2vw,28px);font-family:var(--display);font-weight:400;
  font-size:clamp(15px,1.4vw,20px);line-height:1.5;color:var(--gray-2);max-width:54ch;
  opacity:0;transform:translateY(8px)}
.reveal .gloss.in{opacity:1;transform:none;transition:opacity 700ms ease-out 500ms,
  transform 700ms cubic-bezier(.2,.7,.2,1) 500ms}
.reveal .gloss b{color:var(--paper);font-weight:600}
.reveal .gloss em{font-style:normal;color:var(--red);font-weight:600}
@media (prefers-reduced-motion:reduce){
  .reveal .mark{filter:none;opacity:1;transform:none}
  .reveal .gloss{opacity:1;transform:none}
}

/* quiet route from the hero to the story */
.storylink{margin-top:clamp(16px,2vw,24px)}
.storylink a{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gray-2);text-decoration:none;border-bottom:1px solid var(--rule-bright);
  padding-bottom:4px;transition:color .15s,border-color .15s}
.storylink a:hover{color:var(--red);border-color:var(--red)}

/* ---------- partnerships ---------- */
.ptnrs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:clamp(22px,3vw,40px);margin-top:clamp(30px,4vw,50px)}
.pt{border-top:1px solid var(--rule);padding-top:20px}
.pt .pk{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);margin-bottom:18px}
.pt img{height:auto;width:auto;max-height:56px;max-width:170px;
  object-fit:contain;object-position:left center}

/* marks read on the red band */
.cta .marks .m{border-left-color:var(--ink)}
.cta .marks .mn{color:var(--ink)}
.cta .marks .md{color:rgba(26,26,26,.74)}
.cta .lead b{color:var(--ink);font-weight:600}
.ctafoot{margin-top:clamp(34px,4.4vw,56px);padding-top:clamp(28px,3.4vw,42px);
  border-top:1px solid var(--rule)}

/* ---------- strategic partnerships ---------- */
.plogos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(24px,3.2vw,44px);margin-top:clamp(32px,4vw,52px)}
.pl{border-top:1px solid var(--rule);padding-top:22px}
.pl .pk{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);margin-bottom:20px}
.pl img{height:42px;width:auto;max-width:100%;object-fit:contain;object-position:left center}

/* ================= FOOTER ================= */
footer.site{padding-block:clamp(52px,6vw,84px) clamp(28px,3vw,40px);
  border-top:1px solid var(--rule);background:var(--ink-2)}
.ftop{display:grid;grid-template-columns:minmax(230px,1fr) 2.5fr;
  gap:clamp(30px,4vw,64px);align-items:start}
@media(max-width:820px){.ftop{grid-template-columns:1fr;gap:38px}}

.fbrand .lock{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.fbrand .lock img{height:52px;width:auto}
.fbrand .lock span{font-family:var(--display);font-weight:700;font-size:21px;
  letter-spacing:-.028em;text-transform:uppercase;color:var(--paper)}
.fbrand .tag{font-family:var(--display);font-weight:400;font-size:15px;line-height:1.5;
  color:var(--gray-2);max-width:34ch}
.fbrand .tag em{font-style:normal;color:var(--red);font-weight:600}

.social{display:flex;gap:10px;margin-top:26px}
.social a{width:42px;height:42px;border:1px solid var(--rule-bright);display:flex;
  align-items:center;justify-content:center;color:var(--gray-2);
  transition:color .15s,border-color .15s,background .15s}
.social a:hover{color:var(--red);border-color:var(--red);background:transparent}
.social svg{width:18px;height:18px;display:block}

.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:clamp(20px,2.4vw,34px)}
.fcols h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);font-weight:400;margin-bottom:16px}
.fcols ul{list-style:none}
.fcols li{margin-bottom:11px}
.fcols a{font-size:14.5px;color:var(--gray-2);text-decoration:none;transition:color .15s}
.fcols a:hover{color:var(--paper)}

.fbot{margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray)}
.fbot .addr{text-transform:none;letter-spacing:.06em}
.fbot .sp{margin-left:auto}
.fbot a{text-decoration:none}
.fbot a:hover{color:var(--red)}

/* partner logo sitting inside a pillar column */
.pillarlogo{margin-top:26px;padding-top:20px;border-top:1px solid var(--rule)}
.pillarlogo .pk{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gray);margin-bottom:14px}
.pillarlogo img{height:34px;width:auto;object-fit:contain;object-position:left center}

/* credential line above the hero headline */
.preline{font-family:var(--display);font-weight:700;letter-spacing:-.018em;line-height:1.1;
  font-size:clamp(20px,2.5vw,34px);color:var(--gray-2);margin-bottom:clamp(14px,1.8vw,22px)}
.preline b{color:var(--paper);font-weight:700}

/* hero pitch line, sits under the mark */
.pitch{font-family:var(--display);font-weight:400;letter-spacing:-.014em;line-height:1.35;
  font-size:clamp(18px,2vw,28px);color:var(--gray-2);max-width:none;
  margin-top:clamp(30px,3.6vw,48px)}
.pitch em{font-style:normal;color:var(--red);font-weight:600}
.eyebrow i{color:var(--red);font-style:normal;padding:0 2px}

/* ---------- partner logo wall ---------- */
.pwall{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:14px;margin-top:clamp(32px,4vw,52px)}
.pcell{border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;
  padding:22px 20px;min-height:104px}
.pcell img{max-width:100%;max-height:46px;width:auto;height:auto;object-fit:contain}
.pcell.pending{border-style:dashed;border-color:rgba(250,250,250,.22)}
.pcell.pending span{font-family:var(--display);font-weight:600;font-size:16px;
  color:var(--gray-2);letter-spacing:-.006em;text-align:center}
h2 em{font-style:normal;color:var(--red)}

/* ---------- legal pages ---------- */
.legal{max-width:78ch}
.legal .dates{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray);margin-top:22px;padding-top:18px;border-top:1px solid var(--rule)}
.legal h3{font-family:var(--display);font-weight:700;font-size:clamp(19px,2vw,25px);
  letter-spacing:-.018em;margin:clamp(38px,4vw,54px) 0 16px;
  padding-top:clamp(26px,3vw,36px);border-top:1px solid var(--rule)}
.legal h3 span{color:var(--red);font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  display:block;margin-bottom:10px;font-weight:400}
.legal p{font-size:15.5px;line-height:1.7;color:var(--gray-2);margin-bottom:16px}
.legal p b{color:var(--paper);font-weight:600}
.legal ul{list-style:none;margin:0 0 18px}
.legal li{font-size:15.5px;line-height:1.6;color:var(--gray-2);
  padding:0 0 12px 20px;position:relative}
.legal li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;background:var(--red)}
.legal li b{color:var(--paper);font-weight:600}
.legal a{color:var(--paper);text-decoration:none;border-bottom:1px solid var(--rule-bright)}
.legal a:hover{color:var(--red);border-color:var(--red)}
.legal .addr{margin-top:clamp(30px,3.4vw,44px);padding:26px 28px;border:1px solid var(--rule)}
.legal .addr p{margin:0;line-height:1.65}

/* Inc. 5000 badge, sits beside the social icons */
.social{align-items:center}
.social .badge{width:auto;height:auto;border:none;padding:0;margin-left:14px;background:none}
.social .badge:hover{background:none;border:none;opacity:.75}
.social .badge img{height:44px;width:auto;display:block}

/* ---------- partner badges row (Inc. 5000 + Sounds Profitable) ---------- */
.badges{display:flex;align-items:center;gap:22px;margin-top:22px;flex-wrap:wrap}
.badges a{display:block;opacity:.85;transition:opacity .15s}
.badges a:hover{opacity:1}
.badges img{width:auto;display:block}
.badges .inc img{height:44px}
.badges .sp img{height:22px}

/* ---------- newsletter strip ---------- */
.newsbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:clamp(30px,3.6vw,46px);padding-top:clamp(24px,2.8vw,32px);
  border-top:1px solid var(--rule)}
.newsbar .nl{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);white-space:nowrap}
.newsbar input{width:260px;max-width:100%;background:transparent;border:1px solid var(--rule-bright);
  color:var(--paper);font-family:var(--body);font-size:14px;padding:11px 14px;border-radius:0}
.newsbar input::placeholder{color:var(--gray)}
.newsbar input:focus{outline:none;border-color:var(--red)}
.newsbar button{background:var(--paper);color:var(--ink);border:1px solid var(--paper);cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:11px 18px;transition:opacity .15s}
.newsbar button:hover{opacity:.82}
.newsbar .msg{font-size:13px;line-height:1.4;color:var(--gray-2)}
.newsbar .msg.ok{color:var(--paper)}
.newsbar .msg.err{color:var(--red)}

/* ---------- cookie notice ---------- */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--ink-2);
  border-top:1px solid var(--rule-bright);padding:20px var(--pad);
  display:flex;align-items:center;gap:clamp(16px,3vw,40px);flex-wrap:wrap;
  transform:translateY(115%);opacity:0;pointer-events:none;visibility:hidden;
  transition:transform .38s cubic-bezier(.2,.7,.2,1),opacity .28s ease,visibility 0s linear .38s}
.cookie.show{transform:none;opacity:1;pointer-events:auto;visibility:visible;
  transition:transform .38s cubic-bezier(.2,.7,.2,1),opacity .28s ease,visibility 0s}
.cookie p{font-size:14px;line-height:1.5;color:var(--gray-2);max-width:74ch;flex:1;min-width:260px}
.cookie a{color:var(--paper);text-decoration:none;border-bottom:1px solid var(--rule-bright)}
.cookie a:hover{color:var(--red);border-color:var(--red)}
.cookie .acts{display:flex;gap:10px;flex-wrap:wrap}
.cookie button{cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;padding:13px 22px;border:1px solid var(--rule-bright);
  background:transparent;color:var(--paper);transition:opacity .15s,background .15s}
.cookie button.accept{background:var(--red);border-color:var(--red);color:var(--paper)}
.cookie button:hover{opacity:.85}

/* ---------- calculator ---------- */
.calc{border:1px solid var(--rule);padding:clamp(26px,3.4vw,46px);margin-top:clamp(30px,4vw,50px)}
.calcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(20px,2.6vw,34px)}
.field label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gray-2);margin-bottom:12px}
.field .wrap2{display:flex;align-items:center;border:1px solid var(--rule-bright);
  transition:border-color .15s}
.field .wrap2:focus-within{border-color:var(--red)}
.field .pre{font-family:var(--mono);font-size:15px;color:var(--gray);padding:0 0 0 14px}
.field input{flex:1;min-width:0;background:transparent;border:none;color:var(--paper);
  font-family:var(--display);font-weight:700;font-size:clamp(19px,2vw,26px);
  padding:14px;border-radius:0;letter-spacing:-.01em}
.field input:focus{outline:none}
.field input::placeholder{color:var(--gray);font-weight:400}
.field .hint{font-size:12.5px;color:var(--gray);margin-top:9px;line-height:1.4}

.result{margin-top:clamp(28px,3.4vw,42px);padding-top:clamp(26px,3vw,36px);
  border-top:1px solid var(--rule);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(22px,3vw,40px)}
.result .rk{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);margin-bottom:12px}
.result .rv{font-family:var(--display);font-weight:700;letter-spacing:-.028em;line-height:1;
  font-size:clamp(30px,3.8vw,50px);font-variant-numeric:tabular-nums}
.result .rv.muted{color:var(--gray)}
.result .rd{font-size:13px;color:var(--gray-2);margin-top:10px;line-height:1.45}

.formula{margin-top:clamp(26px,3vw,38px);padding:20px 24px;background:var(--ink-2);
  border-left:3px solid var(--red);font-family:var(--mono);font-size:14px;line-height:1.7;
  color:var(--paper);overflow-x:auto}
.formula span{color:var(--red)}
.cookie p b{color:var(--paper);font-weight:600}

/* ---------- team ---------- */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:clamp(20px,2.4vw,32px);margin-top:clamp(34px,4.2vw,56px);max-width:880px}
.member img{width:100%;height:auto;display:block;filter:grayscale(1);
  transition:filter .3s ease,opacity .3s ease}
.member:hover img{filter:grayscale(.15)}
.member .nm{font-family:var(--display);font-weight:700;font-size:clamp(17px,1.7vw,21px);
  letter-spacing:-.014em;margin-top:18px}
.member .rl{font-size:13.5px;line-height:1.45;color:var(--gray-2);margin-top:6px}
.member .li{display:inline-flex;align-items:center;justify-content:center;margin-top:14px;
  width:34px;height:34px;border:1px solid var(--rule-bright);color:var(--gray-2);
  text-decoration:none;transition:color .15s,border-color .15s,background .15s}
.member .li:hover{color:var(--red);border-color:var(--red);background:transparent}
.member .li svg{width:15px;height:15px;display:block}
.teamnote{margin-top:clamp(30px,3.6vw,46px);padding-top:clamp(24px,3vw,34px);
  border-top:1px solid var(--rule);font-size:15px;line-height:1.65;color:var(--gray-2)}
.teamnote b{color:var(--paper);font-weight:600}

/* two-sentence page headlines: keep leading tight inside a sentence,
   give the second sentence room to breathe */
.pagehead h1 em{display:block;margin-top:.24em}
.splash h1 em{display:inline}

/* ---------- HBX mark, shown large ---------- */
.markshow{display:flex;align-items:center;gap:clamp(28px,4vw,64px);flex-wrap:wrap;
  margin-top:clamp(34px,4.4vw,58px);padding-top:clamp(30px,3.8vw,48px);border-top:1px solid var(--rule)}
.markshow img{height:clamp(84px,11vw,150px);width:auto;flex:none}
.markshow .say{font-family:var(--display);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(16px,1.7vw,23px);line-height:1.45;color:var(--gray-2);max-width:36ch}
.markshow .say b{color:var(--paper);font-weight:600}

/* ---------- product screenshot ---------- */
.shotwrap{margin-top:clamp(32px,4vw,52px);border:1px solid var(--rule-bright);
  background:var(--ink-2);padding:clamp(10px,1.2vw,16px)}
.shotwrap img{width:100%;height:auto;display:block}
.shotbar{display:flex;align-items:center;gap:8px;padding:0 4px 12px}
.shotbar i{width:9px;height:9px;border-radius:50%;background:var(--rule-bright);display:block}
.shotbar span{margin-left:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gray)}
.readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:clamp(20px,2.6vw,34px);margin-top:clamp(28px,3.4vw,42px);
  padding-top:clamp(24px,3vw,34px);border-top:1px solid var(--rule)}
.readout .rk{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);margin-bottom:11px}
.readout .rv{font-family:var(--display);font-weight:700;letter-spacing:-.026em;line-height:1;
  font-size:clamp(24px,2.6vw,34px)}
.readout .rd{font-size:13px;line-height:1.45;color:var(--gray-2);margin-top:10px}

/* teaser + CTA under the product screenshot */
.tease{margin-top:clamp(30px,3.6vw,46px);padding-top:clamp(26px,3vw,36px);
  border-top:1px solid var(--rule);display:flex;align-items:center;
  gap:clamp(20px,3vw,48px);flex-wrap:wrap}
.tease p{font-size:15.5px;line-height:1.6;color:var(--gray-2);flex:1;min-width:280px;max-width:62ch}
.tease p b{color:var(--paper);font-weight:600}

/* stack layer titles pick up the accent, like the core pillars */
#hbx-stack .cols h3{color:var(--red)}

/* social + accreditation marks sit at the right of the newsletter row */
.fmarks{margin-left:auto;display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);flex-wrap:wrap}
.fmarks .social{margin-top:0}
.fmarks .badges{margin-top:0}
@media(max-width:820px){
  .fmarks{margin-left:0;width:100%;padding-top:6px}
}
.fbrand .lock a{display:flex;align-items:center;gap:14px;text-decoration:none}

/* ---------- inventory page ---------- */
.invhead{display:flex;align-items:flex-end;gap:clamp(20px,3vw,44px);flex-wrap:wrap;
  padding-bottom:clamp(22px,2.6vw,32px);border-bottom:1px solid var(--rule)}
.invhead .cat{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1;
  font-size:clamp(38px,5.4vw,74px);color:var(--red);text-transform:uppercase}
.invhead .big{font-family:var(--display);font-weight:700;letter-spacing:-.028em;line-height:1;
  font-size:clamp(26px,3.2vw,44px)}
.invhead .big span{color:var(--gray-2);font-weight:400;font-size:.5em;display:block;
  letter-spacing:.2em;text-transform:uppercase;font-family:var(--mono);margin-top:12px}

.specrow{display:grid;grid-template-columns:minmax(120px,180px) 1fr;
  gap:clamp(16px,3vw,44px);padding-block:clamp(20px,2.6vw,30px);border-bottom:1px solid var(--rule)}
.specrow .sl{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);padding-top:6px}
@media(max-width:640px){.specrow{grid-template-columns:1fr;gap:12px}}

.publogos{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;
  margin-top:clamp(22px,2.6vw,30px)}
.publogos .cell{border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;
  padding:16px 14px;min-height:74px}
.publogos .cell img{max-width:100%;max-height:34px;width:auto;height:auto;object-fit:contain}
.pubnote{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gray);margin-top:16px}

/* ---------- inventory packages ---------- */
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0;
  margin-top:clamp(32px,4vw,52px)}
.packs .pk{padding-inline:clamp(20px,2.4vw,36px);border-left:1px solid var(--rule)}
.packs .pk:first-child{padding-left:0;border-left:none}
.packs .pk:last-child{padding-right:0}
@media(max-width:840px){
  .packs .pk{border-left:none;padding-inline:0;padding-bottom:28px;
    border-bottom:1px solid var(--rule);margin-bottom:28px}
  .packs .pk:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
}
.packs .pn{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);margin-bottom:12px}
.packs h3{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.1vw,27px);
  letter-spacing:-.018em;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.packs ul{list-style:none}
.packs li{font-size:15px;line-height:1.4;color:var(--gray-2);padding:9px 0;
  border-bottom:1px solid rgba(250,250,250,.06)}
.packs li:last-child{border-bottom:none}

/* ---------- ad experience timelines ---------- */
.fmt{padding-block:clamp(44px,5.4vw,74px);border-top:1px solid var(--rule)}
.fmt:first-of-type{border-top:none;padding-top:0}
.fmthead{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.fmthead .ic{width:46px;height:46px;flex:none;border:1px solid var(--rule-bright);color:var(--red);
  display:flex;align-items:center;justify-content:center}
.fmthead .ic svg{width:24px;height:24px;display:block}
.fmthead h3{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.3vw,30px);
  letter-spacing:-.02em}
.fmthead .tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gray);margin-left:auto}
.fmt .say{font-size:15px;line-height:1.6;color:var(--gray-2);margin-top:16px;max-width:70ch}
.fmt .say b{color:var(--paper);font-weight:600}

/* the session track */
.track{margin-top:clamp(26px,3.2vw,38px);position:relative;
  border:1px solid var(--rule);background:var(--ink-2);overflow:hidden}
.track .lanes{display:flex;height:64px}
.track .seg{display:flex;align-items:center;justify-content:center;position:relative;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  border-right:1px solid var(--rule);color:var(--gray)}
.track .seg:last-child{border-right:none}
.track .seg.ad{background:rgba(247,4,4,.14);color:var(--paper);border-color:var(--red)}
.track .seg.ad::before{content:"";position:absolute;inset:0;background:var(--red);opacity:0;
  animation:adpulse 9s linear infinite}
.track .seg.ad span{position:relative;z-index:1}
.track .head{position:absolute;top:0;bottom:0;width:2px;background:var(--paper);
  box-shadow:0 0 12px rgba(250,250,250,.5);animation:sweep 9s linear infinite}
.track .scale{display:flex;border-top:1px solid var(--rule)}
.track .scale div{flex:1;padding:8px 10px;font-family:var(--mono);font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gray);border-right:1px solid var(--rule)}
.track .scale div:last-child{border-right:none}
@keyframes sweep{from{left:0}to{left:100%}}
@keyframes adpulse{
  0%,100%{opacity:0} 38%{opacity:0} 42%{opacity:.22} 56%{opacity:.22} 60%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .track .head{animation:none;left:42%}
  .track .seg.ad::before{animation:none;opacity:.18}
}

.fmtmeta{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:clamp(20px,2.6vw,34px);margin-top:clamp(28px,3.2vw,38px)}
.fmtmeta .mk{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);margin-bottom:9px}
.fmtmeta .mv{font-size:14px;line-height:1.5;color:var(--gray-2)}
.fmtmeta .mv b{color:var(--paper);font-weight:600}

/* ---------- format scenes ---------- */
.fmtbody{display:grid;grid-template-columns:1fr minmax(260px,380px);
  gap:clamp(28px,4vw,64px);align-items:center;
  margin-top:clamp(20px,2.4vw,28px);margin-bottom:clamp(26px,3.2vw,40px)}
@media(max-width:860px){.fmtbody{grid-template-columns:1fr}}
.scene{border:1px solid var(--rule);background:var(--ink-2);padding:22px}
.scene svg{width:100%;height:auto;display:block}
/* stroke + fill roles inside the scenes */
.scene .ln{stroke:var(--gray);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.scene .ln-b{stroke:var(--paper);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.scene .fig{fill:var(--rule-bright)}
.scene .glass{fill:var(--ink)}
/* the screen/wave swaps to the ad state on the same 9s cycle as the track */
.scene .content{animation:stateA 9s linear infinite}
.scene .adstate{animation:stateB 9s linear infinite}
@keyframes stateA{0%,38%{opacity:1} 42%,56%{opacity:0} 60%,100%{opacity:1}}
@keyframes stateB{0%,38%{opacity:0} 42%,56%{opacity:1} 60%,100%{opacity:0}}
.scene .beam{animation:beam 9s linear infinite;transform-origin:center}
@keyframes beam{0%,38%{opacity:.18} 42%,56%{opacity:.5} 60%,100%{opacity:.18}}
@media (prefers-reduced-motion:reduce){
  .scene .content{animation:none;opacity:0}
  .scene .adstate{animation:none;opacity:1}
  .scene .beam{animation:none;opacity:.4}
}

/* inline pointer to a related page */
.seealso{margin-top:clamp(18px,2.2vw,26px)}
.seealso a{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gray-2);text-decoration:none;border-bottom:1px solid var(--rule-bright);
  padding-bottom:4px;transition:color .15s,border-color .15s}
.seealso a:hover{color:var(--red);border-color:var(--red)}