/* landing/depth.css — the shared skin of the depth pages (humans, now, status).
   BLOCK-160 Lane 4, 2026-09-13. Seat ruling (2): one served stylesheet instead of inlining Ali's rules three times.
   SOURCE: design/landing-v2/base/index.html (Ali's v66), sha256 ae1c1e7f74d5fbf37d55e1b552046f456a1ebb887814bb1ed01662e0a94124c7 (MANIFEST.md line 28),
   copied BY LINE RANGE by the builder in the record (BLOCK-160-artifacts/lane4/checks/build-depth-css.js);
   each range below is stamped. Ali's rules are NOT edited. NOT copied, by decision: .rv (a page must never render
   at opacity 0); the html.js-gated rules (.det, .snap, .cmp-r, .pc-*: no such elements here, so no 'js' class is added);
   the section-specific rules (.hero, .tw, .pipe, .intake, .scan, .band, .closing). Rules that are NEW in this lane are in
   the DEPTH section at the end and use only Ali's tokens. Fonts: /landing/fonts.css (loaded by each page before this file). */

/* ── base/index.html 48–87 · tokens + the beats ── */
:root{
  --void:#000000;
  --panel:#090909;
  --panel-2:#0F0F0F;
  --hairline:#1F1F1F;
  --hairline-lit:#303030;

  --emerald:#0EA675;
  --emerald-hi:#0EA675;   /* was #7BFFD0 mint — retired 13 Sep, it read as neon */
  --emerald-glow:rgba(0,178,126,.16);

  --violet:#B1B1B1;                 /* was #8B6BFF — retired from the palette */
  --violet-glow:rgba(207,207,207,.20);

  --orange:#FF6B00;
  --orange-glow:rgba(255,107,0,.08);

  --steel:#CFCFCF;
  --ink:#F0F0F0;
  --ink-dim:#878787;
  --ink-faint:#525252;
  --wordmark:#191919;

  --rail:1180px;

  /* ── THE BEATS ─────────────────────────────────────────────
     Measured at 1440. Changing any of these changes the page's
     rhythm, which is not a content edit. See DESIGN-LAW.md §5.
     Phone values live in the max-width:900px block below.     */
  --beat-hero-top:    184px;
  --beat-hero-end:    136px;
  --beat-section:     144px;  /* the standard top and bottom    */
  --beat-intake-top:  124px;
  --beat-band:        215px;  /* the one deliberate loud pause  */
  --beat-audit-end:   152px;
  --beat-head:         66px;  /* section title to its content   */
  --beat-head-wide:   104px;  /* the loop's title, and its form */
  --beat-split:        82px;  /* two-column gap                 */
  --beat-seam:        112px;  /* clip -> seam -> terminal       */
}

/* ── base/index.html 89–101 · base rules (body Barlow here is overridden by 1093 below) ── */
*{box-sizing:border-box;}
html{color-scheme:dark;-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--void);color:var(--ink);
  font-family:'Barlow',ui-sans-serif,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button,input,select{font:inherit;color:inherit;}
::selection{background:var(--emerald);color:#070707;}
:focus-visible{outline:2px solid var(--emerald);outline-offset:3px;}
h1,h2,h3{font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;text-wrap:balance;margin:0;}

/* ── base/index.html 103–115 · .rail .mono .eyebrow .sec-title .sec-lede ── */
section[id]{scroll-margin-top:80px;}
.rail{max-width:var(--rail);margin:0 auto;padding-inline:28px;}
@media (max-width:640px){ .rail{padding-inline:18px;} }
.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;}

.eyebrow{
  font-family:'Archivo',sans-serif;font-size:.76rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--hairline-lit);flex:none;}
.sec-title{font-size:clamp(1.9rem,3.5vw,2.8rem);font-weight:600;letter-spacing:-.025em;line-height:1.07;margin:18px 0 16px;}
.sec-lede{color:var(--ink-dim);font-size:1.04rem;line-height:1.7;max-width:54ch;margin:0;font-weight:300;}

/* ── base/index.html 118–118 ── */
section,footer{position:relative;z-index:2;}

/* ── base/index.html 138–162 · buttons ── */
/* ============ BUTTONS — glass, lit from behind ============ */
.btn{
  position:relative;isolation:isolate;cursor:pointer;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:.92rem;
  padding:15px 28px;border-radius:3px;color:var(--ink);
  background:rgba(207,207,207,.05);border:1px solid var(--hairline-lit);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .25s,background .25s,transform .25s;
}
.btn::before{
  content:"";position:absolute;left:8%;right:8%;top:-70%;bottom:-70%;
  z-index:-1;border-radius:50%;pointer-events:none;filter:blur(18px);
  opacity:.5;transition:opacity .3s;
}
.btn:hover{transform:translateY(-1px);background:rgba(207,207,207,.085);}
.btn:hover::before{opacity:.95;}
.btn-em{border-color:rgba(0,178,126,.38);}
.btn-em::before{background:radial-gradient(ellipse at center,var(--emerald-glow),transparent 70%);}
.btn-em:hover{border-color:rgba(0,178,126,.72);}
.btn-vi{border-color:rgba(207,207,207,.42);}
.btn-vi::before{background:radial-gradient(ellipse at center,var(--violet-glow),transparent 70%);}
.btn-vi:hover{border-color:rgba(207,207,207,.8);}
.btn-steel::before{background:radial-gradient(ellipse at center,rgba(207,207,207,.18),transparent 70%);}
.btn-steel:hover{border-color:var(--steel);}
.btn-sm{padding:9px 18px;font-size:.82rem;font-weight:500;}

/* ── base/index.html 164–222 · header (position:fixed + .stuck), .nav, brand, .nav-mid ── */
/* ============================ NAV ============================ */
header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease;
}
header.stuck{
  background:rgba(7,7,7,.78);border-bottom-color:rgba(207,207,207,.09);
  backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:12px;}

/* the wordmark gets a mark, a glow and real tracking so it stops
   reading as plain default text next to everything else */
.brand{display:inline-flex;align-items:center;gap:12px;position:relative;isolation:isolate;}
.brand-mark{
  width:32px;height:32px;flex:none;position:relative;border-radius:4px;
  border:1px solid var(--hairline-lit);
  background:linear-gradient(155deg,#212121 0%,#121212 46%,#080808 100%);
  box-shadow:inset 0 1px 0 rgba(207,207,207,.16),inset 0 -1px 0 rgba(0,0,0,.8),0 6px 14px -8px #000;
  display:grid;place-items:center;transition:border-color .3s,box-shadow .3s;
}
.brand-mark::after{
  content:"";position:absolute;inset:0;border-radius:4px;pointer-events:none;
  background:linear-gradient(160deg,rgba(207,207,207,.16),transparent 46%);
}
.brand-mark svg{width:17px;height:17px;display:block;position:relative;z-index:1;}
.brand:hover .brand-mark{border-color:rgba(0,178,126,.45);}

/* machined wordmark: brushed-steel fill, engraved bottom edge, RA struck in orange */
.brand-word{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:1.26rem;
  letter-spacing:-.012em;line-height:1;display:inline-flex;align-items:baseline;
  position:relative;padding-bottom:3px;
}
.brand-word .seg,.brand-word .ra{
  display:inline-block;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.brand-word .seg{
  background-image:linear-gradient(180deg,#FFFFFF 0%,#E8E8E8 38%,#9F9F9F 100%);
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.95));
}
.brand-word .ra{
  background-image:linear-gradient(180deg,#FFC49A 0%,#FF6B00 50%,#C24F04 100%);
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.95));
}
/* etched baseline that lights on hover */
.brand-word::after{
  content:"";position:absolute;left:1px;right:1px;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(207,207,207,.34),rgba(0,178,126,.5),transparent);
  opacity:.5;transition:opacity .3s;
}
.brand:hover .brand-word::after{opacity:1;}

.nav-mid{display:flex;gap:28px;align-items:center;}
.nav-mid a{font-size:.86rem;color:var(--ink-dim);transition:color .18s;}
.nav-mid a:hover{color:var(--ink);}
@media (max-width:900px){ .nav-mid{display:none;} }

/* ── base/index.html 813–826 · footer, .foot-links, .foot-copy, .ra, .dome, #cursorDot, .foot-bottom ── */
/* ==================== FOOTER ==================== */
footer{border-top:1px solid var(--hairline);padding-top:34px;overflow:hidden;}
.foot-top{display:flex;flex-wrap:wrap;gap:18px 36px;justify-content:space-between;align-items:baseline;padding-bottom:26px;}
.foot-links{display:flex;flex-wrap:wrap;gap:26px;}
.foot-links a{font-size:.85rem;color:var(--ink-dim);transition:color .18s;}
.foot-links a:hover{color:var(--emerald);}
.foot-copy{font-size:.8rem;color:var(--ink-faint);line-height:1.6;}
.ra{color:var(--orange);}
.foot-copy .ra{color:var(--orange);}
.dome{position:relative;cursor:default;}
.dome svg{width:100%;height:auto;display:block;}
.dome text{font-family:'Michroma','Archivo',ui-sans-serif,sans-serif;font-weight:400;font-size:88px;letter-spacing:2px;}
#cursorDot{transition:opacity .35s ease;}
.foot-bottom{border-top:1px solid var(--hairline);margin-top:4px;padding-block:18px 26px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.09em;color:#363636;}

/* ── base/index.html 1093–1098 · the Inter override INCLUDING *{text-transform:none!important} (1096 .hero h1 matches nothing here) ── */
body{font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;}
h1,h2,h3{font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;}
*{text-transform:none!important;}
.hero h1{font-weight:600;letter-spacing:-.035em;}
.sec-title{font-weight:600;letter-spacing:-.03em;font-size:clamp(1.9rem,3.4vw,2.6rem);}
.sec-lede{font-family:'Inter',sans-serif;font-weight:400;font-size:1.0625rem;line-height:1.65;}

/* ── base/index.html 1102–1102 · eyebrow in Inter ── */
.eyebrow{font-family:'Inter',sans-serif;font-weight:500;font-size:12.5px;letter-spacing:.05em;color:rgba(255,255,255,.62);}

/* ── base/index.html 1148–1152 · footer / nav / btn in Inter ── */
.foot-bottom{font-family:'Inter',sans-serif;font-size:12px;letter-spacing:.02em;}
.foot-copy{font-family:'Inter',sans-serif;font-size:13.5px;}
.foot-links a{font-family:'Inter',sans-serif;font-size:14px;}
.nav-mid a{font-family:'Inter',sans-serif;font-size:14px;}
.btn{font-family:'Inter',sans-serif;font-weight:500;font-size:14.5px;}

/* ── base/index.html 1193–1205 · the flat brand-mark + the rebuilt .btn (no glow), .btn-sm ── */
.brand-mark{box-shadow:none;background:transparent;border-color:rgba(255,255,255,.16);border-radius:8px;}
.btn{
  -webkit-backdrop-filter:none;backdrop-filter:none;border-radius:10px;padding:14px 26px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border-color:rgba(255,255,255,.16);
}
.btn::before{display:none;}
.btn:hover{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));transform:none;}
.btn-em{border-color:rgba(0,178,126,.34);}
.btn-em:hover{border-color:rgba(0,178,126,.62);}
.btn-vi,.btn-steel{border-color:rgba(255,255,255,.16);}
.btn-vi:hover,.btn-steel:hover{border-color:rgba(255,255,255,.34);}
.btn-sm{padding:9px 16px;font-size:13px;}

/* ── base/index.html 1455–1457 · reduced motion (1458 omitted: html.js-gated .det/.det-tag/.snap/.cmp-r — none on depth pages) ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
}

/* ── base/index.html 1478–1479 · v59 scale: .btn 16px, .btn-sm 13px ── */
.btn{font-size:16px;padding:16px 30px;}
.btn-sm{padding:9px 16px;font-size:13px;}

/* ── base/index.html 1491–1492 · v59 scale: .sec-title 56/400, .sec-lede 18/28 #A1A4A5 ── */
.sec-title,.audit-head h2{font-size:clamp(2.1rem,3.9vw,56px);font-weight:400;letter-spacing:-.03em;line-height:1.05;}
.sec-lede,.audit-head .ah-r .sec-lede{font-size:18px;line-height:28px;color:#A1A4A5;font-weight:400;}

/* ── base/index.html 1510–1510 · v60 seam ── */
section+section{border-top:1px solid rgba(255,255,255,.07);}

/* ── base/index.html 1560–1560 ── */
footer{border-top:0;}

/* ── base/index.html 1582–1600 · v61 phone menu + the 900px panel rules ── */
.nav-menu{display:none;width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;}
.nav-menu i{display:block;width:16px;height:1.5px;background:#F0F0F0;border-radius:1px;transition:transform .25s,opacity .25s;}
.nav-menu[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-menu[aria-expanded="true"] i:nth-child(2){opacity:0;}
.nav-menu[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
@media (max-width:900px){
  .nav-menu{display:flex;}
  .nav .btn-sm{display:none;}
  .nav-mid{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    padding:8px 18px 14px;background:rgba(7,7,7,.96);border-bottom:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
  header.menu-open .nav-mid{display:flex;}
  .nav-mid a{font-size:17px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.07);color:#F0F0F0;}
  .nav-mid a:last-child{border-bottom:0;}
  header.menu-open{background:rgba(7,7,7,.96);border-bottom-color:transparent;}
  .nav{position:relative;}
}

/* ── base/index.html 1609–1609 · v66 ── */
.foot-bottom{justify-content:flex-start;}


/* ══════════════════════════════════════════════════════════════════════════════
   DEPTH — rules that are NOT Ali's. New in Lane 4. Tokens only from :root above.
   ══════════════════════════════════════════════════════════════════════════════ */
/* the header is position:fixed (base 165); main needs a top offset. The named beat is --beat-hero-top (184px),
   the same token Ali's hero uses for its top (base 1235). Stated on the card for Ali's gate. */
main{display:block;padding-top:var(--beat-hero-top);}
.depth{padding-block:0 var(--beat-section);}
.depth-head{max-width:700px;}                       /* the same cap as .intake-head (base 1499) */
.depth-head .sec-lede{margin-top:var(--beat-head);}
a.btn{display:inline-flex;align-items:center;text-decoration:none;}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:44px;}
.entity{margin:26px 0 0;font-size:12.5px;letter-spacing:.05em;color:var(--ink-dim);}
/* /humans — the one wide 4:3 figure: a hairline, no fill, no image. Capped at 700px (the .depth-head cap) so the empty slot is a
   reserved frame, not a viewport-tall void (measured 1124×843 px at 1440 uncapped). Ali's call, flagged. */
.figure{margin:var(--beat-head) 0 0;max-width:700px;}
.figure .frame{aspect-ratio:4/3;max-width:100%;border:1px solid var(--hairline-lit);border-radius:10px;background:transparent;}
.figure figcaption{margin-top:14px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.6);max-width:52ch;}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--beat-split);margin-top:var(--beat-head-wide);}
.card{border-top:1px solid rgba(255,255,255,.07);padding-top:24px;}
.card h2{font-size:28px;font-weight:400;letter-spacing:-.02em;line-height:1.1;margin:0 0 12px;}
.card p{margin:0;font-size:16px;line-height:1.6;color:#A1A4A5;}
/* /now — date + line, nothing else */
.now-list{list-style:none;margin:var(--beat-head) 0 0;padding:0;}
.now-list li{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:22px 0;border-top:1px solid rgba(255,255,255,.07);}
.now-list li:last-child{border-bottom:1px solid rgba(255,255,255,.07);}
.now-list time{font-size:12.5px;letter-spacing:.04em;color:var(--ink-dim);padding-top:5px;}
.now-list p{margin:0;font-size:18px;line-height:28px;color:#A1A4A5;max-width:60ch;}
.now-count{margin:var(--beat-head) 0 0;font-size:12.5px;letter-spacing:.05em;color:var(--ink-faint);}
/* /status — rows; every colour is EARNED in the browser. The ring: 1px currentColor, transparent, no fill, no glow.
   unchecked = hairline ring + mono text (ink-faint) · answering = emerald 1px ring · not answering = orange 1px stroke ·
   neutral (the door refused us) = ink-dim · paused (budget) = steel. No red exists in the palette; none is used. */
.rows{list-style:none;margin:var(--beat-head) 0 0;padding:0;}
.rows li{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:22px 0;border-top:1px solid rgba(255,255,255,.07);align-items:start;}
.rows li:last-child{border-bottom:1px solid rgba(255,255,255,.07);}
.rows .what{font-size:16px;color:var(--ink);}
.rows .what small{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--ink-dim);}
.rows .read{font-size:14px;line-height:1.6;color:#A1A4A5;}
.ring{display:inline-flex;align-items:center;gap:8px;border:1px solid currentColor;background:transparent;border-radius:999px;padding:4px 12px;font-size:12px;letter-spacing:.03em;color:var(--ink-faint);margin-bottom:8px;}
.ring[data-state="answering"]{color:var(--emerald);}
.ring[data-state="not-answering"]{color:var(--orange);}
.ring[data-state="neutral"]{color:var(--ink-dim);}
.ring[data-state="paused"]{color:var(--steel);}
.headline{font-size:18px;line-height:28px;color:#A1A4A5;margin:var(--beat-head) 0 0;max-width:60ch;}
.headline[data-state="not-answering"]{color:var(--orange);}
.headline[data-state="unreached"]{color:var(--ink-dim);}   /* "could not reach anything" is its own state, distinguishable from the all-answering grey */
.tap{margin-top:var(--beat-head-wide);border-top:1px solid rgba(255,255,255,.07);padding-top:32px;}
.tap .note{font-size:12.5px;line-height:1.6;color:var(--ink-dim);max-width:52ch;margin:14px 0 0;}
.tap .read{margin-top:18px;}
/* the footer's second link row (Lane 4's .legal, not in Ali's bytes): full width under the links, right-aligned like them —
   without a rule it wraps under the copy block at 1440 (measured at 1440). Lane 1 needs the same one-line rule beside its paste. */
.foot-links.legal{flex-basis:100%;justify-content:flex-end;}
@media (max-width:900px){
  main{padding-top:130px;}                          /* the phone value of Ali's hero top (base 1569) */
  .cards{grid-template-columns:1fr;gap:36px;}
  .now-list li,.rows li{grid-template-columns:1fr;gap:8px;}
}