/* 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; margin:0 auto; }
.phead__inner--wide{ max-width:56rem; }
.phead__inner--full{ max-width:none; margin:0; }
.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; }

/* vertical button stack — store link above, learn more below */
.btn-stack{
  display:flex; flex-direction:column; align-items:center;
  gap:12px; margin-top:36px;
}
.btn-stack .cta{ margin-top:0; }
.section__inner--left .btn-stack{ align-items:flex-start; }

/* app-store listing name, under the hero pitch */
.storename{
  margin:20px 0 0;
  font-family:var(--mono); font-size:11px; line-height:1.6;
  letter-spacing:.06em; color:var(--muted);
}
.storename strong{ color:var(--fg); font-weight:400; }

/* ============================================================
   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 BOARD — floating cards, built by build_news.py
   ------------------------------------------------------------
   Layers, back to front:
     .ncard-slot   grid placement, a hair of resting tilt, slow float
     .ncard        the card itself; JS tilts it toward the cursor
     .ncard__date  the red tab, pushed forward in 3D so it parallaxes
   ============================================================ */
.nboard-wrap{
  display:grid; grid-template-columns:1fr auto;
  align-items:end; column-gap:32px; row-gap:56px;
}
.nboard-head h2{ margin:0; }
.nboard{ grid-column:1 / -1; }

/* month groups: with JS, one shows at a time; without JS, all show labelled */
.nboard__month + .nboard__month{ margin-top:72px; }
.nboard__month[hidden]{ display:none; }
.nboard__month-label{
  margin:0 0 20px;
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
}
.nboard-wrap.is-paged .nboard__month-label{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
}

/* month pager */
.nboard__pager{ display:flex; align-items:center; gap:20px; }
.nboard__pager[hidden]{ display:none; }
.nboard__current{
  min-width:11.5em; text-align:center;
  font-family:var(--mono); font-size:13px; font-weight:700;
  letter-spacing:.3em; text-transform:uppercase;
}
.nboard__btn{
  display:grid; place-items:center; width:44px; height:44px;
  background:linear-gradient(180deg,#161616,#0d0d0d);
  border:1px solid #262626; border-radius:10px; color:var(--fg); cursor:pointer;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .2s, transform .2s, opacity .2s;
}
.nboard__btn:hover:not(:disabled){ border-color:var(--accent-soft); transform:translateY(-2px); }
.nboard__btn:disabled{ opacity:.3; cursor:default; }
.nboard__btn svg{ width:18px; height:18px; }

/* the grid — 6 columns; build_news.py assigns each card s2..s6 */
.nboard__grid{
  display:grid; grid-template-columns:repeat(6, minmax(0,1fr));
  gap:36px 28px; padding-top:20px;
}
.ncard-slot{ grid-column:span 6; min-width:0; container-type:inline-size; }
.ncard-slot.s2{ grid-column:span 2; }
.ncard-slot.s3{ grid-column:span 3; }
.ncard-slot.s4{ grid-column:span 4; }
.ncard-slot.s5{ grid-column:span 5; }
@media (max-width:900px){
  .nboard__grid{ grid-template-columns:minmax(0,1fr); gap:40px; }
  /* every width, s6 included -- a leftover span 6 makes 5 empty implicit columns */
  .ncard-slot, .ncard-slot.s2, .ncard-slot.s3, .ncard-slot.s4, .ncard-slot.s5{ grid-column:auto; }
  .nboard-wrap{ grid-template-columns:1fr; row-gap:28px; }
  .nboard__pager{ justify-content:space-between; }
}

/* resting pose: a slight, varied lean, and a slow float */
.ncard-slot{ rotate:-.35deg; animation:nfloat 7s ease-in-out infinite; }
.ncard-slot:nth-child(2n){ rotate:.4deg;  animation-duration:8s;   animation-delay:-2.5s; }
.ncard-slot:nth-child(3n){ rotate:-.2deg; animation-duration:9s;   animation-delay:-5s; }
@keyframes nfloat{ 0%,100%{ translate:0 0; } 50%{ translate:0 -7px; } }

/* the card */
.ncard{
  --mx:50%; --my:0%;
  position:relative; height:100%;
  display:grid; grid-template-columns:minmax(0,1fr);
  border-radius:16px;
  background:linear-gradient(180deg,#171717 0%,#0d0d0d 100%);
  border:1px solid #242424;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 2px 4px rgba(0,0,0,.5),
    0 22px 44px -18px rgba(0,0,0,.95),
    0 44px 80px -40px rgba(0,0,0,.9);
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
}
.ncard.is-tilting{ transition:transform .08s linear, box-shadow .35s, border-color .35s; }
.ncard:hover{
  border-color:rgba(217,58,43,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 2px 4px rgba(0,0,0,.5),
    0 34px 60px -22px rgba(0,0,0,.95),
    0 30px 70px -36px rgba(217,58,43,.35);
}
/* light sheen that follows the cursor (position set by site.js) */
.ncard::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(520px circle at var(--mx) var(--my), rgba(255,255,255,.06), transparent 45%);
  opacity:0; transition:opacity .35s; z-index:3;
}
.ncard:hover::after{ opacity:1; }

.ncard__body{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start;
  padding:0 32px 32px;
  transform-style:preserve-3d;
}

/* date tab + tag; the tab pokes up past the card's top edge */
.ncard__meta{ display:flex; align-items:flex-end; gap:18px; margin:-20px 0 24px; transform-style:preserve-3d; }
.ncard__date{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:62px; padding:9px 10px 8px; border-radius:7px;
  background:linear-gradient(180deg,#e5462f 0%,#c4301f 100%);
  color:#fff; line-height:1;
  box-shadow:0 14px 22px -10px rgba(217,58,43,.55), 0 4px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.28);
  transform:translateZ(16px);
}
.ncard__mon{ font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.22em; margin:0 0 5px .22em; }
.ncard__day{ font-family:var(--display); font-size:31px; letter-spacing:-.02em; }
.ncard__day--year{ font-size:17px; letter-spacing:.02em; padding-top:2px; }
.ncard__tag{
  padding-bottom:6px;
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.28em; text-transform:uppercase; color:var(--muted);
}

.ncard__title{
  margin:0 0 14px;
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(22px, 1.1rem + 1vw, 34px); line-height:.98; letter-spacing:-.015em;
  transform:translateZ(8px);
}
.ncard__blurb{ margin:0; color:#b4b4b4; font-size:15px; line-height:1.62; max-width:38rem; }
.ncard__cta{
  margin-top:auto; padding-top:22px;
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
}
.ncard__cta{ background:linear-gradient(var(--accent),var(--accent)) 0 100% / 100% 1px no-repeat; padding-bottom:4px; }
.ncard__cta span{ display:inline-block; transition:transform .25s; }
.ncard__cta:hover span{ transform:translateX(4px); }

/* image — narrow cards: faded in behind the text on the right */
.ncard__media{
  position:absolute; inset:0; z-index:1;
  border-radius:inherit; overflow:hidden;
  -webkit-mask-image:linear-gradient(100deg, transparent 40%, #000 95%);
          mask-image:linear-gradient(100deg, transparent 40%, #000 95%);
  opacity:.3;
}
.ncard__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* (absolute, so the image fills the height the text needs instead of setting it) */
.ncard__media--contain img{ object-fit:contain; object-position:right center; padding:24px; }

/* narrow image cards (phones, half-width slots): art as a banner on top, so it
   stays visible instead of fading behind the text */
@container (max-width:779px){
  .ncard--image .ncard__media{
    position:relative; inset:auto; order:-1; opacity:1;
    aspect-ratio:16 / 9; margin:10px 10px 0; border-radius:11px;
    -webkit-mask-image:linear-gradient(180deg, #000 70%, transparent 100%);
            mask-image:linear-gradient(180deg, #000 70%, transparent 100%);
  }
  .ncard--image .ncard__meta{ margin-top:-24px; }
  .ncard--image .ncard__media--contain img{ object-position:center; }
}

/* wide cards: text left, image right, edge fading into the card */
@container (min-width:780px){
  .ncard--image{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); }
  .ncard--image .ncard__media{
    position:relative; inset:auto; opacity:1;
    margin:12px 12px 12px 0; border-radius:11px;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 22%);
            mask-image:linear-gradient(90deg, transparent 0, #000 22%);
    min-height:260px;
  }
  .ncard__media--contain{ background:radial-gradient(closest-side, rgba(46,139,255,.08), transparent); }
  .ncard__media--contain img{ object-position:center; padding:28px; }
  .ncard__body{ padding:0 40px 36px; }
}

/* home page: the "All news" link under the board */
.nboard__more{ grid-column:1 / -1; margin:8px 0 0; display:flex; justify-content:center; }
.nboard__more .cta{ margin-top:0; }
.nboard__none{ margin:0; color:var(--muted); }

/* /blog: no section heading beside the pager, so it sits on the right */
.nboard-wrap--page{ grid-template-columns:1fr; row-gap:28px; }
.nboard-wrap--page .nboard__pager{ justify-self:end; }
@media (max-width:900px){ .nboard-wrap--page .nboard__pager{ justify-self:stretch; } }

/* ============================================================
   POST PAGE — /blog/<post>/
   ============================================================ */
.post__meta{ display:flex; align-items:flex-end; gap:18px; margin:4px 0 28px; }
.post__meta .ncard__date{ transform:none; }
.post__title{ font-size:clamp(36px,6.4vw,76px) !important; line-height:.92 !important; }

.post{ max-width:44rem; margin:0 auto; padding:56px 0 96px; }
@media (min-width:1024px){ .post{ padding:72px 0 120px; } }

.post__hero{
  margin:0 0 56px; border-radius:16px; overflow:hidden;
  border:1px solid #242424; background:#0d0d0d;
  box-shadow:0 2px 4px rgba(0,0,0,.5), 0 30px 60px -24px rgba(0,0,0,.95);
}
.post__hero img{ width:100%; height:auto; }
.post__hero--contain img{ max-height:420px; width:auto; margin:0 auto; padding:32px; }

.post__body h2{
  font-size:clamp(20px,2.6vw,28px); line-height:1.05;
  margin:56px 0 18px;
}
.post__body h3{
  font-family:var(--body); font-weight:700; text-transform:uppercase;
  font-size:13px; letter-spacing:.16em; margin:40px 0 14px;
}
.post__body > :first-child{ margin-top:0; }
.post__body p, .post__body li{ color:var(--muted); font-size:17px; line-height:1.75; }
.post__body p{ margin:0 0 22px; }
.post__body ul, .post__body ol{ margin:0 0 22px; padding-left:22px; }
.post__body li{ margin-bottom:8px; }
.post__body strong{ color:var(--fg); font-weight:700; }
.post__body a{
  color:var(--accent); border-bottom:1px solid var(--accent-soft);
  transition:border-color .2s;
}
.post__body a:hover{ border-bottom-color:var(--accent); }

.post__cta{
  margin-top:48px; padding:32px;
  border:1px solid #242424; border-radius:16px;
  background:linear-gradient(180deg,#151515,#0d0d0d);
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
}
.post__cta .cta{ margin-top:0; }
.post__cta-note{ margin:0; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--muted); }

/* pixel art: keep every art pixel a hard-edged square when scaled */
.is-pixel img{ image-rendering:pixelated; image-rendering:crisp-edges; }

/* motion off: no float, no lean, no tilt */
@media (prefers-reduced-motion:reduce){
  .ncard-slot{ animation:none; rotate:none; }
}

/* ============================================================
   PRODUCT CARD — the library index at /products
   ============================================================ */
.prodlist{ margin:0; padding:0; list-style:none; width:100%; }
.prodlist li + li{ margin-top:20px; }

.prodcard{
  display:flex; align-items:center; gap:24px;
  padding:28px 32px;
  border:1px solid var(--line);
  transition:border-color .25s, background .25s, transform .25s;
}
.prodcard:hover{
  border-color:var(--accent-soft);
  background:var(--surface);
  transform:translateY(-2px);
}
.prodcard__icon{ width:64px; height:64px; border-radius:22%; flex:none; }
.prodcard__text{ flex:1 1 auto; min-width:0; }
.prodcard__name{
  font-family:var(--display); font-size:clamp(16px,2vw,22px);
  line-height:1.1; letter-spacing:-.01em; text-transform:uppercase;
  margin:0 0 8px; color:var(--fg);
}
.prodcard__meta{
  margin:0;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  color:var(--muted);
}
.prodcard__go{
  flex:none; width:18px; height:18px; color:var(--accent);
  transition:transform .25s;
}
.prodcard:hover .prodcard__go{ transform:translateX(4px); }

@media (max-width:560px){
  .prodcard{ padding:24px; gap:18px; }
  .prodcard__icon{ width:48px; height:48px; }
  .prodcard__go{ display:none; }
}

/* secondary links under a card */
.prodsub{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 24px;
  margin:24px 0 0;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
}
.section__inner--left .prodsub{ justify-content:flex-start; }
.prodsub a{
  color:var(--muted);
  border-bottom:1px solid var(--line);
  transition:color .2s, border-color .2s;
}
.prodsub a:hover{ color:var(--accent); border-bottom-color:var(--accent-soft); }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty{
  width:100%; max-width:44rem; margin:0 auto;
  border:1px solid var(--line);
  padding:64px 32px; text-align:center;
}
.empty__label{
  font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.3em; text-transform:uppercase; color:#555;
  margin:0;
}
.empty p{ margin:0; color:var(--muted); font-size:15px; line-height:1.7; }

/* ============================================================
   POLICY / LONG-FORM PROSE
   ============================================================ */
.policy{ max-width:44rem; margin:0 auto; padding:80px 0; }
@media (min-width:1024px){ .policy{ padding:112px 0; } }
.policy__meta{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:#555;
  margin:0 0 56px; padding-bottom:24px;
  border-bottom:1px solid var(--line);
}
.policy h2{
  font-size:clamp(20px,2.6vw,28px); line-height:1.05;
  margin:64px 0 20px;
}
.policy h2:first-of-type{ margin-top:0; }
.policy p{
  margin:0 0 20px; color:var(--muted);
  font-size:16px; line-height:1.75;
}
.policy strong{ color:var(--fg); font-weight:700; }
.policy a{
  color:var(--accent);
  border-bottom:1px solid var(--accent-soft);
  transition:border-color .2s;
}
.policy a:hover{ border-bottom-color:var(--accent); }
.policy ul, .policy ol{
  margin:0 0 20px; padding-left:22px;
  color:var(--muted); font-size:16px; line-height:1.8;
}
.policy li{ margin-bottom:10px; }
.policy__lead{
  color:var(--fg) !important;
  font-size:18px !important; line-height:1.7 !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:#000; border-top:1px solid var(--line); }
.foot__cta{
  display:flex; flex-direction:column; gap:40px;
  padding:64px 0; border-bottom:1px solid var(--line);
}
@media (min-width:1024px){
  .foot__cta{ flex-direction:row; align-items:flex-end; justify-content:space-between; padding:96px 0 64px; }
}
.foot__cta h2{ font-size:clamp(40px,7vw,84px); line-height:.9; }
.foot__cta .cta{ margin-top:0; }
.foot__meta{
  display:flex; flex-direction:column; gap:8px;
  padding:48px 0;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:#555;
}
@media (min-width:768px){ .foot__meta{ flex-direction:row; justify-content:space-between; } }
.foot__meta p{ margin:0; }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(24px); }
.reveal[data-seen]{ opacity:1; transform:none; transition:opacity .7s ease-out, transform .7s ease-out; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } }