/* self-hosted fonts — no third-party requests */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/archivo-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/archivo-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/archivo-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/archivo-black-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');}

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --bg:#080808;
  --surface:#121212;
  --line:#1E1E1E;
  --fg:#FFFFFF;
  --muted:#A1A1A1;

  /* BreadthBoy red — from the wordmark */
  --accent:#D93A2B;
  --accent-dim:#B82F22;
  --accent-soft:rgba(217,58,43,.3);
  --accent-glow:rgba(217,58,43,.07);

  --display:'Archivo Black', system-ui, sans-serif;
  --body:'Archivo', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, Menlo, monospace;

  --nav-h:64px;
  --pad:24px;
  --maxw:1600px;
}
@media (min-width:1024px){ :root{ --pad:40px; } }

/* Local Transcriber owns its own accent — "Signal Dark", from the app */
.theme-transcriber{
  --accent:#2E8BFF;
  --accent-dim:#1F6FD6;
  --accent-soft:rgba(46,139,255,.3);
  --accent-glow:rgba(46,139,255,.07);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
  border-radius:2px;
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
[id]{ scroll-margin-top:var(--nav-h); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:#fff; padding:12px 20px;
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.18em;
}
.skip:focus{ left:0; }

/* ============================================================
   TYPE PRIMITIVES
   ============================================================ */
.eyebrow{
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono);
  font-size:10px; font-weight:700; letter-spacing:.3em;
  text-transform:uppercase; color:var(--accent);
  margin:0 0 16px;
}
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--accent); flex:none;
}
h1,h2,h3{ font-family:var(--display); font-weight:400; text-transform:uppercase; margin:0; }
h2{ font-size:clamp(30px,5vw,60px); line-height:.95; letter-spacing:-.02em; }
h3{ font-size:clamp(20px,2.4vw,28px); line-height:1; letter-spacing:-.01em; }
.lede{ color:var(--muted); font-size:clamp(15px,1.5vw,18px); line-height:1.6; }
.lede + .lede{ margin-top:1.1em; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50; height:var(--nav-h);
  border-bottom:1px solid transparent;
  transition:background .3s, border-color .3s, backdrop-filter .3s;
}
.nav[data-scrolled="true"]{
  background:rgba(0,0,0,.9);
  backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
}
.nav__inner{
  max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad);
  height:100%; display:flex; align-items:center; justify-content:space-between;
}
.mark{
  font-family:var(--display); font-size:10px; line-height:1.05;
  letter-spacing:.12em; text-transform:uppercase; user-select:none;
}
.mark span{ display:block; }
.nav__links{ display:none; gap:40px; }
@media (min-width:900px){ .nav__links{ display:flex; } }
.nav__links a{
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.8); transition:color .2s;
}
.nav__links a:hover{ color:#fff; }
.nav__links a[aria-current="page"]{ color:var(--accent); }

.burger{
  display:grid; place-items:center; width:40px; height:40px;
  background:none; border:0; color:#fff; cursor:pointer; padding:0;
}
@media (min-width:900px){ .burger{ display:none; } }
.burger svg{ width:22px; height:22px; }
.burger .close{ display:none; }
.burger[aria-expanded="true"] .open{ display:none; }
.burger[aria-expanded="true"] .close{ display:block; }

.drawer{
  display:none;
  background:rgba(0,0,0,.97); border-bottom:1px solid var(--line);
  padding:24px var(--pad) 32px;
}
.drawer[data-open="true"]{ display:block; }
@media (min-width:900px){ .drawer{ display:none !important; } }
.drawer a{
  display:block; padding:12px 0;
  font-size:14px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.8);
}
.drawer a[aria-current="page"]{ color:var(--accent); }

.progress{
  position:fixed; top:var(--nav-h); left:0; right:0; z-index:50;
  height:2px; background:transparent; pointer-events:none;
}
.progress__bar{
  height:100%; width:0%; background:var(--accent);
  transform-origin:left; will-change:width;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; overflow:hidden;
  display:grid; place-items:center; padding:var(--nav-h) var(--pad) 0;
}
.hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 45%, var(--accent-glow), transparent 70%),
    var(--bg);
}
.hero__inner{ position:relative; z-index:2; text-align:center; }

/* the wordmark carries the hero — nothing competes with it */
.hero__wordmark{
  width:min(78vw, 860px);
  height:auto;
  margin:0 auto;
}

.thesis{
  margin:28px auto 0; max-width:44rem;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:18px 0;
  font-family:var(--mono); font-size:clamp(11px,1.15vw,13px);
  line-height:1.9; letter-spacing:.02em; color:var(--fg);
  text-align:center;
}

/* interior page headers */
.phead{
  position:relative; overflow:hidden;
  padding:calc(var(--nav-h) + 80px) 0 64px;
  border-bottom:1px solid var(--line);
}
@media (min-width:1024px){ .phead{ padding:calc(var(--nav-h) + 120px) 0 88px; } }
.phead__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, var(--accent-glow), transparent 70%),
    var(--bg);
}
.phead__inner{ position:relative; z-index:2; max-width:44rem; }
.phead h1{ font-size:clamp(40px,8vw,88px); line-height:.9; letter-spacing:-.02em; }
.phead .lede{ margin-top:24px; }

/* breadcrumb back-link on interior pages */
.crumb{
  display:inline-block; margin-bottom:24px;
  font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
  transition:color .2s;
}
.crumb:hover{ color:var(--accent); }

.cta{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:36px; padding:16px 32px; border-radius:999px;
  background:var(--accent); color:#fff; border:0; cursor:pointer;
  font-family:var(--body); font-size:11px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  transition:background .3s, transform .3s;
}
.cta:hover{ background:var(--accent-dim); transform:scale(1.03); }
.cta svg{ width:14px; height:14px; transition:transform .3s; }
.cta:hover svg{ transform:translateY(2px); }

.cta--ghost{
  background:transparent; color:var(--fg);
  border:1px solid var(--line);
}
.cta--ghost:hover{ background:var(--surface); border-color:var(--accent); }

.cta[aria-disabled="true"]{
  background:var(--surface); color:var(--muted);
  border:1px solid var(--line);
  cursor:default; pointer-events:none;
}

.btn-row{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.btn-row .cta{ margin-top:0; }
.btn-row--wrap{ margin-top:36px; }
.btn-row--left{ justify-content:flex-start; }

/* ============================================================
   SECTION
   ============================================================ */
.section{ border-top:1px solid var(--line); padding:80px 0; }
@media (min-width:1024px){ .section{ padding:128px 0; } }
.section__inner{
  max-width:44rem; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.section__inner h2{ margin-bottom:24px; }
.section__inner .lede{ max-width:36rem; }
.section__inner .eyebrow{ justify-content:center; }

.section__inner--left{ text-align:left; align-items:flex-start; }
.section__inner--left .eyebrow{ justify-content:flex-start; }
.section__inner--left .lede{ max-width:44rem; }

/* wider inner for the policy library rows */
.section__inner--wide{ max-width:56rem; }

.spec{
  width:100%; max-width:32rem;
  margin:48px 0 0; padding:0; list-style:none;
  border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--muted);
  text-align:left;
}
.spec li{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.spec b{
  color:#555; font-weight:400; text-transform:uppercase; letter-spacing:.18em;
  font-size:10px;
}
.spec span{ color:var(--fg); text-align:right; }

/* identity mark */
.mark-img{
  height:clamp(72px,9vw,112px); width:auto;
  margin:0 0 28px;
}
.mark-img--app{ border-radius:22%; }

/* status pill */
.pill{
  display:inline-block; margin-left:10px; padding:3px 8px; border-radius:999px;
  border:1px solid var(--line);
  font-family:var(--mono); font-size:9px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  vertical-align:middle;
}
.pill[data-live]{ color:var(--accent); border-color:var(--accent-soft); }

/* ============================================================
   FEATURES
   ============================================================ */
.features{
  width:100%; max-width:56rem;
  margin:56px 0 0; padding:0; list-style:none;
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line);
  text-align:left;
}
@media (min-width:700px){ .features{ grid-template-columns:1fr 1fr; } }
.features li{ background:var(--bg); padding:28px 24px; }
.features h3{
  font-family:var(--body); font-weight:700; text-transform:uppercase;
  font-size:11px; letter-spacing:.18em; color:var(--accent);
  margin:0 0 12px;
}
.features p{ margin:0; color:var(--muted); font-size:14px; line-height:1.65; }

/* ============================================================
   NEWS — sits directly under the hero on the home page
   ============================================================ */
.news{ margin:0; padding:0; list-style:none; width:100%; }
.news__item{ border-top:1px solid var(--line); padding:48px 0; }
.news__item:first-child{ border-top:0; padding-top:0; }
.news__item:last-child{ padding-bottom:0; }
.news__date{
  font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.3em; text-transform:uppercase; color:#555;
  margin:0 0 14px;
}
.news__item h3{ margin:0 0 16px; }
.news__item .lede{ font-size:15px; }
.news__link{
  display:inline-block; margin-top:22px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent);
  border-bottom:1px solid var(--accent-soft);
  transition:border-color .2s;
}
.news__link:hover{ border-bottom-color:var(--accent); }

/* ============================================================
   PRODUCTS & POLICIES — the library rows
   ============================================================ */
.prod{ margin:0; padding:0; list-style:none; width:100%; }
.prod__item{ padding:36px 0; border-top:1px solid var(--line); text-align:left; }
.prod__item:last-child{ border-bottom:1px solid var(--line); }
.prod__head{
  display:flex; align-items:center; gap:16px; margin:0 0 22px;
}
.prod__icon{ width:48px; height:48px; border-radius:22%; flex:none; }
.prod__name{ margin:0; }
.prod__rows{ margin:0; }
.prod__row{
  display:flex; flex-wrap:wrap; gap:8px 12px;
  padding:8px 0;
  font-family:var(--mono); font-size:12px; line-height:1.6;
}
.prod__row dt{ color:#555; flex:none; min-width:9rem; }
.prod__row dd{ margin:0; color:var(--fg); }
.prod__row dd a{
  color:var(--accent);
  border-bottom:1px solid var(--accent-soft);
  transition:border-color .2s;
}
.prod__row dd a:hover{ border-bottom-color:var(--accent); }

/* ============================================================