/* lortnoc_tahc — shared stylesheet for the landing page and the
   integration sub-pages. Tokens live in :root; everything else is
   built from them. */

/* ── brand type ─────────────────────────────────────────────── */
@font-face { font-family:"Questrial"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/questrial/questrial-400.woff2") format("woff2"); }
@font-face { font-family:"Jost"; font-style:normal; font-weight:300; font-display:swap; src:url("fonts/jost/jost-300.woff2") format("woff2"); }
@font-face { font-family:"Jost"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/jost/jost-400.woff2") format("woff2"); }
@font-face { font-family:"Jost"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/jost/jost-500.woff2") format("woff2"); }

:root{
  --bg:#08080A;
  --ink:#EDEAE4;
  --signal:#12C4BE;
  --signal-rgb:18,196,190;
  --muted:rgba(237,234,228,0.5);
  --rule:rgba(237,234,228,0.12);
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --shell:clamp(24px,6vw,88px);
  --beat:clamp(140px,18vh,240px);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); }
body{
  color:var(--ink);
  font-family:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--signal); color:var(--bg); }

.wrap{ max-width:1560px; margin:0 auto; padding-left:var(--shell); padding-right:var(--shell); }

.eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:var(--muted); }
.eyebrow--signal{ font-size:12px; letter-spacing:0.26em; color:var(--signal); }

.lede{ margin:0; font-size:clamp(17px,1.15vw,19px); line-height:1.75; max-width:620px; color:var(--muted); }
.lede strong{ color:var(--ink); font-weight:300; }

/* ── 00–01 the film: cold open + the threat, scroll-scrubbed ── */
/* Fallback track height; JS sets the real one per section from data-track
   (~20vh of scroll per second of film). */
.film{ height:560vh; position:relative; background:#000; }
.film__pin{ position:sticky; top:0; height:100vh; overflow:hidden; }
.film__video,.film__poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.film__video{ opacity:0; transition:opacity 1.2s ease; }
.film__video.is-ready{ opacity:1; }
/* Keeps the copy legible when the searchlight blows out the left of frame. */
.film__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(8,8,10,0.88) 0%, rgba(8,8,10,0.55) 46%, rgba(8,8,10,0.15) 100%),
    linear-gradient(180deg, rgba(8,8,10,0.55) 0%, transparent 26%, transparent 68%, rgba(8,8,10,0.75) 100%);
}
.film__copy{ position:absolute; inset:0; z-index:2; }
.film__line{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--shell); max-width:1560px; margin:0 auto;
  will-change:opacity, transform;
}
.film__line--end{ align-items:flex-end; text-align:right; }
.film__line h1{
  margin:0; font-weight:400;
  font-size:clamp(48px,9vw,160px); line-height:0.95; letter-spacing:-0.035em;
  max-width:17ch; text-wrap:balance;
}
.film__line p.big{
  margin:0; font-weight:400;
  font-size:clamp(34px,5.6vw,88px); line-height:1.02; letter-spacing:-0.028em; max-width:22ch;
}
.film__line--end p.big{
  font-size:clamp(30px,4.6vw,74px); line-height:1.06; letter-spacing:-0.024em;
  color:var(--signal); max-width:24ch;
}
/* The resolving half of a sentence: same weight and alignment, signal colour. */
.film__line--signal p.big{ color:var(--signal); }
.film__date{ margin-bottom:clamp(28px,4vw,56px); }
.film__line .lede{ margin-top:clamp(32px,4vw,60px); }
.cue{
  position:absolute; left:var(--shell); bottom:clamp(28px,5vw,52px); z-index:3;
  display:flex; align-items:center; gap:14px;
}
.cue__line{ display:block; width:1px; height:46px; background:linear-gradient(to bottom,rgba(237,234,228,0.35),transparent); animation:lt-cue 2.6s ease-in-out infinite; }

/* ── 02 the reversal ────────────────────────────────────────── */
/* Taller than the flip alone needs: the strike-through takes the first third
   of the track before a single letter moves. */
.reversal{ height:420vh; position:relative; }
.reversal__pin{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 clamp(20px,5vw,80px);
}
.word{
  font-size:clamp(26px,11.2vw,168px); line-height:1; letter-spacing:-0.03em; font-weight:400;
  text-align:center; text-transform:uppercase; white-space:nowrap;
}
.word span{ display:inline-block; min-width:0.28em; will-change:filter,opacity,transform; }
.word-wrap{ position:relative; display:inline-block; }
/* viewBox is set in JS to the element's real pixel box, so user units are CSS
   pixels 1:1. That keeps stroke-dasharray honest — the reason not to stretch
   the viewBox or reach for non-scaling-stroke. */
.strike{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; opacity:0; pointer-events:none; will-change:opacity;
}
.strike line{ stroke:var(--signal); stroke-linecap:round; }
.reversal__caption{ margin-top:clamp(36px,5vw,72px); text-align:center; }
.reversal__caption p:first-child{ margin:0; font-size:clamp(20px,2.2vw,34px); line-height:1.2; letter-spacing:-0.015em; font-weight:400; }
.reversal__caption p:last-child{ margin:16px auto 0; font-size:clamp(17px,1.15vw,19px); line-height:1.75; color:var(--muted); max-width:36ch; }

/* ── 03 the trick ───────────────────────────────────────────── */
.trick{ padding-top:var(--beat); padding-bottom:var(--beat); }
.panes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:clamp(14px,1.6vw,24px); align-items:stretch; }
.pane{
  border:1px solid var(--rule); padding:clamp(20px,2vw,30px);
  min-height:clamp(200px,26vh,280px); display:flex; flex-direction:column; gap:22px;
}
.pane p{ margin:0; font-size:clamp(17px,1.35vw,21px); line-height:1.55; letter-spacing:-0.005em; color:var(--ink); }
.pane--watched{ position:relative; overflow:hidden; border-color:rgba(var(--signal-rgb),0.4); animation:lt-pulse 3.4s ease-in-out infinite; }
.pane--watched .eyebrow{ color:var(--signal); }
.pane--watched p{ min-height:3em; }
.pane--out p{ min-height:3em; }
.scan{ position:absolute; left:0; right:0; top:0; height:12%; pointer-events:none; background:linear-gradient(to bottom,transparent,rgba(var(--signal-rgb),0.13),transparent); animation:lt-scan 4.6s linear infinite; }

.trick__claim{ margin-top:clamp(80px,10vh,150px); display:flex; flex-direction:column; gap:22px; }
.trick__claim h2{ margin:0; font-size:clamp(30px,4.4vw,72px); line-height:1.04; letter-spacing:-0.03em; font-weight:400; }
.trick__kicker{ margin-top:clamp(120px,16vh,220px); border-top:1px solid var(--rule); padding-top:clamp(36px,4vw,60px); }
.trick__kicker p{ margin:0; font-size:clamp(24px,3.2vw,52px); line-height:1.1; letter-spacing:-0.024em; font-weight:400; max-width:30ch; }

/* ── 04 the line ────────────────────────────────────────────── */
.line{ min-height:100vh; padding-top:var(--beat); padding-bottom:var(--beat); display:flex; flex-direction:column; justify-content:center; }
.line h2{ margin:0; font-size:clamp(44px,8.4vw,150px); line-height:0.96; letter-spacing:-0.038em; font-weight:400; max-width:19ch; }
.line .lede{ margin-top:clamp(44px,6vw,88px); }

/* ── 05 the trojan horse ────────────────────────────────────── */
.horse{ padding-top:var(--beat); padding-bottom:var(--beat); }
.horse__states{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(28px,4vw,72px); border-top:1px solid var(--rule); padding-top:clamp(36px,4vw,64px); }
.horse__states p{ margin:0; font-size:clamp(26px,3.4vw,54px); line-height:1.08; letter-spacing:-0.026em; font-weight:400; }
.horse__states p:first-child{ color:var(--muted); }
.horse__body{ margin-top:clamp(110px,14vh,200px); display:flex; flex-direction:column; gap:26px; }

/* ── 06 the stack ───────────────────────────────────────────── */
.stack{ padding-top:var(--beat); padding-bottom:var(--beat); }
.stack__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(36px,4vw,64px); }
.stack__item{ border-top:1px solid var(--rule); padding-top:26px; display:flex; flex-direction:column; gap:18px; }
.stack__item h3{ margin:0; font-size:clamp(21px,1.8vw,29px); line-height:1.16; letter-spacing:-0.018em; font-weight:400; color:var(--signal); }
.stack__item p{ margin:0; font-size:clamp(16px,1.05vw,18px); line-height:1.75; color:var(--muted); }

/* ── 07 the close ───────────────────────────────────────────── */
.close{ min-height:100vh; padding-top:var(--beat); padding-bottom:clamp(40px,5vw,64px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.wordmark{ font-family:"Questrial","Jost",system-ui,sans-serif; font-size:clamp(44px,10vw,175px); line-height:0.94; letter-spacing:-0.04em; font-weight:400; }
.close__claim{ margin:clamp(44px,5vw,80px) auto 0; font-size:clamp(22px,2.4vw,38px); line-height:1.18; letter-spacing:-0.02em; font-weight:400; max-width:24ch; }
.actions{ margin-top:clamp(44px,5vw,72px); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(20px,3vw,40px); }
.btn{
  background:var(--signal); color:var(--bg); text-decoration:none;
  font-size:clamp(16px,1.1vw,18px); letter-spacing:0.01em; font-weight:400;
  padding:20px 38px; min-height:44px; display:inline-flex; align-items:center;
  transition:background .35s ease, color .35s ease;
}
.btn:hover,.btn:focus-visible{ background:var(--ink); color:var(--bg); }
.btn--ghost{
  background:none; color:var(--muted); padding:0;
  font-size:clamp(15px,1vw,17px); text-decoration:underline; text-underline-offset:6px;
  transition:color .35s ease;
}
.btn--ghost:hover,.btn--ghost:focus-visible{ background:none; color:var(--ink); }
.signoff{ margin:clamp(110px,14vh,190px) 0 0; }

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

/* ── motion ─────────────────────────────────────────────────── */
@keyframes lt-scan{ 0%{ transform:translateY(-120%); } 100%{ transform:translateY(920%); } }
@keyframes lt-pulse{
  0%,100%{ box-shadow:0 0 0 1px rgba(var(--signal-rgb),0.35), 0 0 44px -18px rgba(var(--signal-rgb),0.5); }
  50%{ box-shadow:0 0 0 1px rgba(var(--signal-rgb),0.85), 0 0 60px -14px rgba(var(--signal-rgb),0.75); }
}
@keyframes lt-cue{ 0%,100%{ transform:translateY(0); opacity:0.35; } 50%{ transform:translateY(9px); opacity:0.9; } }

/* JS drives the film copy; hide it up front only when JS is actually running,
   so a failed script leaves the words on screen rather than a black hole. */
.js .film__line{ opacity:0; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reversal{ height:auto !important; }
  .reversal__pin{ position:static; height:auto; min-height:100vh; }
  /* Static tier: each film collapses to its poster frame with the copy
     stacked underneath in normal document flow. */
  .film{ height:auto !important; }
  .film__pin{ position:relative; height:auto; padding:0 0 6vh; background:#000; }
  .film__video,.film__scrim,.cue{ display:none; }
  .film__poster{ position:static; width:100%; height:auto; display:block; }
  .film__copy{ position:static; }
  .film__line{
    position:static; opacity:1 !important; transform:none !important;
    padding:8vh var(--shell); margin:0 auto;
  }
}

/* ══════════════════════════════════════════════════════════════
   INTEGRATIONS — the three iconic bands on the landing page,
   each linking to its own sub-page.
   ══════════════════════════════════════════════════════════════ */

.integrations{ padding-top:var(--beat); padding-bottom:var(--beat); }
.integrations__intro{ margin-bottom:clamp(56px,7vw,110px); }
.integrations__intro h2{
  margin:0; font-weight:400;
  font-size:clamp(34px,5.4vw,86px); line-height:1.0; letter-spacing:-0.032em; max-width:16ch;
}
.integrations__intro .lede{ margin-top:clamp(24px,3vw,40px); }

.integration{ border-top:1px solid var(--rule); padding:clamp(44px,6vw,88px) 0; }
.integration__row{
  display:grid; grid-template-columns:1.05fr 0.95fr;
  gap:clamp(32px,5vw,88px); align-items:center;
}
.integration--flip .integration__figure{ order:-1; }
.integration__body{ display:flex; flex-direction:column; gap:20px; }
.integration__index{
  font-family:var(--mono); font-size:11px; letter-spacing:0.24em;
  text-transform:uppercase; color:var(--signal);
}
.integration__body h3{
  margin:0; font-weight:400;
  font-size:clamp(26px,3.4vw,54px); line-height:1.06; letter-spacing:-0.026em; max-width:18ch;
}
.integration__body p{
  margin:0; font-size:clamp(16px,1.1vw,19px); line-height:1.75; color:var(--muted); max-width:52ch;
}
.integration__partner{
  font-family:var(--mono); font-size:11px; letter-spacing:0.2em;
  text-transform:uppercase; color:rgba(237,234,228,0.42);
}
.arrow{
  align-self:flex-start; margin-top:6px; color:var(--signal); text-decoration:none;
  font-size:clamp(15px,1.05vw,17px); border-bottom:1px solid rgba(var(--signal-rgb),0.35);
  padding-bottom:3px; transition:border-color .3s ease, color .3s ease;
}
.arrow:hover,.arrow:focus-visible{ color:var(--ink); border-color:var(--ink); }

/* Figures are inline SVG diagrams — no external assets, theme-driven. */
.integration__figure{
  border:1px solid var(--rule); background:rgba(237,234,228,0.02);
  aspect-ratio:16/10; display:grid; place-items:center; padding:clamp(20px,3vw,44px);
}
.integration__figure svg{ width:100%; height:100%; overflow:visible; }
.dg-line{ stroke:rgba(237,234,228,0.28); stroke-width:1.25; fill:none; }
.dg-line--on{ stroke:var(--signal); stroke-width:1.75; }
.dg-fill{ fill:rgba(237,234,228,0.13); }
.dg-fill--on{ fill:var(--signal); }
.dg-dim{ fill:rgba(237,234,228,0.06); }
.dg-text{
  font-family:var(--mono); font-size:8px; letter-spacing:0.16em;
  fill:rgba(237,234,228,0.45); text-transform:uppercase;
}
.dg-text--on{ fill:var(--signal); }

@media (max-width:820px){
  .integration__row{ grid-template-columns:1fr; gap:32px; }
  .integration--flip .integration__figure{ order:0; }
}

/* ══════════════════════════════════════════════════════════════
   SUB-PAGES — the per-integration deep dives.
   ══════════════════════════════════════════════════════════════ */

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:18px var(--shell);
  background:rgba(8,8,10,0.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
}
.topbar a{ text-decoration:none; }
.topbar__home{
  font-family:var(--mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--muted); transition:color .3s ease;
}
.topbar__home:hover,.topbar__home:focus-visible{ color:var(--ink); }
.topbar__mark{ font-family:var(--font-wordmark,"Questrial"),sans-serif; font-size:17px; letter-spacing:-0.01em; color:var(--ink); }

.doc{ max-width:920px; margin:0 auto; padding:0 var(--shell); }
.doc__hero{ padding:clamp(72px,11vh,150px) 0 clamp(40px,5vw,72px); border-bottom:1px solid var(--rule); }
.doc__hero h1{
  margin:0; font-weight:400;
  font-size:clamp(38px,6.4vw,92px); line-height:0.98; letter-spacing:-0.034em; max-width:17ch;
}
.doc__hero .lede{ margin-top:clamp(26px,3vw,44px); max-width:60ch; }
.doc__partner{ margin-bottom:clamp(20px,2.5vw,34px); }

.doc section{ padding:clamp(52px,7vw,96px) 0; border-bottom:1px solid var(--rule); }
.doc section:last-of-type{ border-bottom:0; }
.doc h2{
  margin:0 0 clamp(22px,2.6vw,38px); font-weight:400;
  font-size:clamp(25px,3vw,44px); line-height:1.1; letter-spacing:-0.024em; max-width:22ch;
}
.doc h3{
  margin:36px 0 14px; font-weight:400;
  font-size:clamp(18px,1.5vw,23px); line-height:1.3; letter-spacing:-0.012em; color:var(--signal);
}
.doc p{ margin:0 0 20px; font-size:clamp(16px,1.08vw,18px); line-height:1.8; color:var(--muted); max-width:66ch; }
.doc p:last-child{ margin-bottom:0; }
.doc strong{ color:var(--ink); font-weight:400; }
.doc code{
  font-family:var(--mono); font-size:0.88em; color:var(--ink);
  background:rgba(237,234,228,0.07); padding:2px 6px; border-radius:2px;
  overflow-wrap:anywhere;
}

.pull{
  margin:0 0 28px; font-size:clamp(20px,2.3vw,34px); line-height:1.24;
  letter-spacing:-0.018em; color:var(--ink); max-width:24ch;
}

.steps{ list-style:none; margin:0; padding:0; counter-reset:s; }
.steps li{
  counter-increment:s; position:relative;
  padding:0 0 26px 54px; margin:0 0 26px; border-bottom:1px solid var(--rule);
  font-size:clamp(16px,1.08vw,18px); line-height:1.8; color:var(--muted); max-width:66ch;
}
.steps li:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
.steps li::before{
  content:counter(s,decimal-leading-zero); position:absolute; left:0; top:1px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.14em; color:var(--signal);
}
.steps b{ color:var(--ink); font-weight:400; }

.spec{ width:100%; border-collapse:collapse; font-size:15px; }
.spec th,.spec td{
  text-align:left; padding:13px 16px 13px 0; border-bottom:1px solid var(--rule);
  vertical-align:top; line-height:1.6;
}
.spec th{
  font-family:var(--mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  color:rgba(237,234,228,0.42); font-weight:400; white-space:nowrap;
}
.spec td{ color:var(--muted); }
.spec td:first-child{ color:var(--ink); white-space:nowrap; padding-right:28px; }
.spec-wrap{ overflow-x:auto; }

/* Honest-limits callout. The claims we don't make. */
.note{ border-left:2px solid var(--signal); padding:4px 0 4px 24px; margin:34px 0 0; }
.note .eyebrow{ display:block; margin-bottom:12px; color:var(--signal); }
.note p{ margin-bottom:14px; }

.docnav{ padding:clamp(56px,7vw,100px) 0 clamp(72px,9vw,128px); }
.docnav__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; }
.docnav a{
  display:flex; flex-direction:column; gap:9px; text-decoration:none;
  border:1px solid var(--rule); padding:24px; transition:border-color .3s ease;
}
.docnav a:hover,.docnav a:focus-visible{ border-color:var(--signal); }
.docnav span{ font-family:var(--mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(237,234,228,0.42); }
.docnav b{ font-weight:400; font-size:18px; line-height:1.3; color:var(--ink); }

/* ══════════════════════════════════════════════════════════════
   BRAND LOCKUPS — partner logos. Official assets, unmodified
   geometry, sized by height so the differing aspect ratios
   (two square marks, one wide lockup) sit on a common baseline.
   ══════════════════════════════════════════════════════════════ */

.brand{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.brand__logo{ height:clamp(34px,3.6vw,52px); width:auto; display:block; }
.brand__name{
  font-family:var(--mono); font-size:11px; letter-spacing:0.2em;
  text-transform:uppercase; color:rgba(237,234,228,0.55);
}

/* Sub-page hero: the partner leads the page. */
.doc__brand{ margin-bottom:clamp(26px,3vw,44px); }
.doc__brand .brand__logo{ height:clamp(54px,7vw,92px); }
.doc__brand .brand__name{ font-size:12px; color:var(--muted); }

/* Sub-page sticky bar. */
.topbar__logo{ height:22px; width:auto; display:block; }
.topbar__brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }


/* Small pill for time-sensitive framing above a film line. */
.badge{
  align-self:flex-start; display:inline-block; margin-bottom:clamp(18px,2.2vw,30px);
  font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--signal); border:1px solid rgba(var(--signal-rgb),0.45);
  border-radius:999px; padding:7px 16px 6px;
}

/* Second half of the hero line: same sentence, clearly subordinate. */
.h1__sub{
  display:block; margin-top:0.3em;
  font-size:0.36em; line-height:1.14; letter-spacing:-0.02em;
  color:rgba(237,234,228,0.72);
}

/* Landing wordmark — fixed over the film, above the copy's optical centre. */
.sitemark{
  position:fixed; top:clamp(20px,3vw,34px); left:var(--shell); z-index:20;
  display:block; line-height:0;
}
.sitemark img{
  height:clamp(52px,6.5vw,96px); width:auto; display:block;
  transition:opacity .3s ease;
}
.sitemark:hover img,.sitemark:focus-visible img{ opacity:0.75; }

/* Sub-page back link carries the mark instead of its name in text. */
.topbar__back{ display:flex; align-items:center; gap:10px; }
.topbar__back img{ height:26px; width:auto; display:block; }
.topbar__back span{ font-size:14px; color:var(--muted); }

@media (max-width:640px){
  .sitemark{ top:16px; }
  .sitemark img{ height:44px; }
}