/* ── Adlathe home — public product page ──────────────────────────────────
   Structure and content first; design iterations come after. Deliberately
   restrained: one accent, generous space, no ornament that isn't carrying meaning. */

.nav-cta{color:var(--accent)!important;font-weight:650}

/* ── HERO — iteration 3: match the target composition ───────────────────────
   Scale and composition pass, not a redesign. The brief in one line:
   smaller UI, more negative space, more of the image visible, darker left,
   machine further right, and NO centred container.

   ⚠ The single biggest change is that the hero escapes the 1080px `.wrap`.
   Everything else read as "a website inside a container" because it was one.
   The hero now uses viewport padding and is anchored to the left edge.

   ⚠ No animation in this pass — the brief asked for the static composition to
   land first. The plate drift, bloom pulse and telemetry pulse are removed, not
   merely paused, so nothing is competing while we compare against the target. */

.hero{
  position:relative;overflow:hidden;border-bottom:none;
  min-height:100svh;
  display:flex;align-items:flex-start;
  padding:clamp(124px,19vh,224px) 0 44px;   /* eyebrow lands ~205px at 1080 */
  background:#040506;
  isolation:isolate;
}
/* break out of the centred site container */
.hero > .wrap{
  position:relative;z-index:2;width:100%;
  max-width:none;margin:0;
  padding-inline:clamp(48px,3.3vw,64px);
}

/* ── environment ── */
.hero-env{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-env > span{position:absolute;inset:0;display:block}

.env-plate{position:absolute;inset:0;display:block;background:#040506}
/* `contain`, not `cover`: cover fills the height and crops the sides, which is
   what made the machine feel enlarged and pressed against the top edge. contain
   shows the whole plate with room around it, and the plate's own edges are
   near-black so the letterbox is invisible against the hero background. */
.env-plate img{
  width:100%;height:100%;object-fit:contain;object-position:62% bottom;display:block;
  filter:brightness(.88) contrast(1.03);
}

/* ambient bloom behind and right of the engine — static */
.env-bloom{
  background:radial-gradient(600px 540px at 70% 48%, rgba(255,111,0,.12), transparent 70%);
}

/* READABILITY — directional, never a rectangle behind the copy */
.env-read{
  background:linear-gradient(90deg,
    rgba(2,3,4,.98) 0%,
    rgba(2,3,4,.96) 20%,
    rgba(2,3,4,.85) 34%,
    rgba(2,3,4,.50) 45%,
    rgba(2,3,4,.12) 56%,
    transparent 68%);
}
.env-vignette{
  background:radial-gradient(132% 120% at 50% 50%, transparent 56%, rgba(0,0,0,.60) 100%);
}
.env-grain{
  opacity:.026;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.env-bottom{
  background:linear-gradient(to bottom, transparent 68%, rgba(4,5,6,.66) 88%, #0b0c0e 100%);
}

/* ── header — light, no bar, wide gap between wordmark and links ── */
body:has(.hero) #nav{
  position:absolute;z-index:5;border-bottom:none;backdrop-filter:none;
  background:linear-gradient(to bottom, rgba(3,4,5,.72) 0%, rgba(3,4,5,.28) 62%, transparent 100%);
}
body:has(.hero) #nav .nav-inner{
  max-width:none;min-height:92px;padding:0 clamp(48px,3.3vw,64px);gap:64px;
}
body:has(.hero) .nav-links{gap:38px;margin-left:auto}
body:has(.hero) .nav-links a{
  font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;
  color:rgba(235,238,242,.76);
}
body:has(.hero) .nav-links a:hover{color:#fff}
body:has(.hero) .nav-links a.nav-cta{color:#ff671f!important;font-weight:600}

/* the wordmark: solid-black render keyed out by `screen` on a dark surface */
.brand{display:flex;align-items:center;line-height:0}
.brand img{width:148px;height:auto;display:block;mix-blend-mode:screen}

/* ── hero type ── */
.kicker{
  font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:#ff6a18;margin-bottom:32px;
}
.hero h1{
  font-size:clamp(2.4rem,4.5vw,4.75rem);font-weight:800;letter-spacing:-.045em;line-height:.98;
  color:#f4f5f6;max-width:660px;
}
/* same size and weight as the rest of the line — only the colour changes */
.hero h1 em{font-style:normal;color:#ff671f;font-size:inherit;font-weight:inherit}

.hero-sub{
  color:rgba(225,230,235,.70);font-size:17px;line-height:1.55;max-width:590px;margin-top:28px;
}
.hero-sub strong{
  display:block;margin-top:16px;color:#f5f7f9;font-weight:700;font-size:16px;line-height:1.45;
  max-width:610px;
}
.hero-ctas{display:flex;gap:19px;flex-wrap:wrap;margin-top:36px}

/* ── buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  height:56px;border-radius:5px;font-size:16px;font-weight:650;border:1px solid transparent;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.btn::after{content:'\2192';font-size:16px;transition:transform .2s ease}
.btn:hover{text-decoration:none}
.btn:hover::after{transform:translateX(4px)}
.btn-primary{background:#ff671f;color:#140801;border-color:#ff671f;padding:0 34px;min-width:260px}
.btn-primary:hover{background:#ff7a3a}
.btn-ghost{
  background:rgba(5,6,8,.28);border-color:rgba(255,255,255,.13);
  color:rgba(238,242,246,.68);padding:0 32px;min-width:220px;
}
.btn-ghost:hover{border-color:rgba(255,255,255,.28);color:#eef2f6}
.btn-ghost::after{opacity:.5}

/* ── trust line — detached, quiet ── */
.hero-foot{
  margin-top:clamp(46px,14.7vh,172px);font-family:var(--mono);font-size:11px;letter-spacing:.025em;
  color:rgba(200,210,220,.48);max-width:52ch;line-height:1.6;
  display:flex;gap:12px;align-items:flex-start;
}
.hero-foot::before{
  content:'';flex:0 0 11px;height:11px;margin-top:3px;border-radius:50%;
  border:1px solid rgba(255,103,31,.5);
  background:radial-gradient(circle,#ff671f 0 26%,transparent 30%);
}

/* ── responsive ── */
@media(max-width:1700px){
  .env-read{background:linear-gradient(90deg,rgba(2,3,4,.99) 0%,rgba(2,3,4,.98) 30%,
    rgba(2,3,4,.94) 46%,rgba(2,3,4,.74) 58%,rgba(2,3,4,.30) 72%,transparent 86%)}
}
@media(max-width:1180px){
  .env-plate img{object-position:66% bottom}
  .hero h1{max-width:560px}
  .hero-sub{max-width:520px}
  .env-read{background:linear-gradient(90deg,rgba(2,3,4,.995) 0%,rgba(2,3,4,.99) 34%,
    rgba(2,3,4,.96) 52%,rgba(2,3,4,.80) 64%,rgba(2,3,4,.34) 78%,transparent 92%)}
}
@media(max-width:860px){
  .hero{padding:92px 0 40px}
  .env-plate img{object-fit:cover;object-position:66% center}
  .env-read{background:linear-gradient(180deg,rgba(2,3,4,.93) 0%,rgba(2,3,4,.88) 46%,
    rgba(2,3,4,.70) 74%,rgba(2,3,4,.54) 100%)}
  .hero h1{font-size:clamp(2.3rem,6.6vw,3.2rem);max-width:none}
  .hero-sub,.hero-sub strong,.hero-foot{max-width:none}
  .hero-foot{margin-top:60px}
  body:has(.hero) #nav .nav-inner{min-height:76px;gap:24px}
  .brand img{width:126px}
}
@media(max-width:600px){
  .hero{min-height:auto;padding:104px 0 60px}
  .env-plate img{object-position:64% center}
  .btn{height:52px;font-size:15px}
  .hero-ctas .btn{flex:1 1 100%;min-width:0}
  .hero-foot{margin-top:44px}
}
@media(max-width:430px){
  .hero h1 br{display:none}
  .hero h1{font-size:clamp(2rem,8.6vw,2.4rem);letter-spacing:-.03em;line-height:1.03}
  .hero{padding:96px 0 54px}
  .kicker{margin-bottom:20px}
  .hero-sub{margin-top:20px}
  .hero-ctas{margin-top:26px}
}


/* ── THE SYSTEM LAYER ──────────────────────────────────────────────────────
   The difference between "a website with a futuristic background" and "the
   interface to a verification engine" is this layer, not the artwork.

   Governing rule: everything here lives at low opacity and tiny size. It should
   be noticed on the SECOND look, never the first. Headline, chamber, CTA and
   explanation keep the hierarchy; this is atmosphere underneath them.

   Restraint budget — industrial instrument, not gaming HUD:
     · lines 1px, mostly rgba(255,102,20,.22), key runs to .50
     · type 8-11px monospace
     · glow minimal, motion 9-18s, nothing spins or flashes            */

.hud{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
:root{--hud:#ff671f}

/* faint technical geometry behind the copy — noticed second, not first */
.hud::before{
  content:'';position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(to right, rgba(255,255,255,.028) 0 1px, transparent 1px 132px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.020) 0 1px, transparent 1px 132px);
  -webkit-mask-image:linear-gradient(90deg,#000 0 34%,rgba(0,0,0,.35) 52%,transparent 68%);
          mask-image:linear-gradient(90deg,#000 0 34%,rgba(0,0,0,.35) 52%,transparent 68%);
}

/* ── circuit network ── */
.hud-net{
  position:absolute;left:clamp(430px,41.5vw,800px);top:50%;transform:translateY(-50%);
  width:clamp(300px,27vw,530px);height:min(62vh,520px);
}
.hud-net .trace path{fill:none;stroke:rgba(255,102,20,.22);stroke-width:1;
  vector-effect:non-scaling-stroke}
.hud-net .trace path:nth-child(2),
.hud-net .trace path:nth-child(3){stroke:rgba(255,102,20,.42)}
.hud-net .node circle{fill:var(--hud);opacity:.62;
  filter:drop-shadow(0 0 3px rgba(255,102,20,.55))}
.hud-net .node circle:nth-child(odd){animation:hud-pulse 11s ease-in-out infinite}
.hud-net .node circle:nth-child(even){animation:hud-pulse 15s ease-in-out infinite 3s}
@keyframes hud-pulse{0%,100%{opacity:.34}50%{opacity:.92}}

/* ── INPUT / TRACE / VERIFY ── */
.proc{
  position:absolute;left:clamp(410px,40vw,772px);top:50%;transform:translateY(-50%);
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(38px,7vh,74px);
}
.proc li{display:grid;grid-template-columns:14px auto;grid-template-rows:auto auto;
  column-gap:9px;align-items:center}
.proc .g{grid-row:1 / 3;width:9px;height:9px;border-radius:50%;
  border:1px solid rgba(255,102,20,.55);
  background:radial-gradient(circle,var(--hud) 0 28%,transparent 32%)}
.proc b{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--hud);font-weight:600}
.proc i{font-family:var(--mono);font-size:8px;font-style:normal;letter-spacing:.05em;
  color:rgba(220,225,230,.34)}

/* ── left calibration rail ── */
.rail{position:absolute;left:clamp(20px,3.3vw,50px);top:22%;bottom:22%;width:12px}
.rail-line{position:absolute;left:5px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.10)}
.rail-t{position:absolute;left:0;width:11px;height:1px;background:rgba(255,255,255,.16)}
.rail-t.lit{background:rgba(255,102,20,.6);width:12px}
.rail-lbl{position:absolute;left:50%;font-family:var(--mono);font-size:8px;letter-spacing:.22em;
  color:rgba(255,255,255,.20);white-space:nowrap;
  transform-origin:left center;transform:rotate(-90deg) translateX(-50%)}
.rail-top{top:-6px}
.rail-bot{bottom:-6px;color:rgba(255,102,20,.34)}

/* ── telemetry blocks ── */
.tel{position:absolute;display:flex;flex-direction:column;gap:3px;font-family:var(--mono)}
.tel .on{font-size:9px;letter-spacing:.14em;color:var(--hud);display:flex;align-items:center;gap:6px}
.tel .dot{width:5px;height:5px;border-radius:50%;background:var(--hud);
  box-shadow:0 0 6px 1px rgba(255,102,20,.7);animation:hud-pulse 9s ease-in-out infinite}
.tel .sub{font-size:8px;letter-spacing:.10em;color:rgba(200,210,220,.26)}
.tel .hd{font-size:8.5px;letter-spacing:.16em;color:rgba(255,102,20,.72)}
.tel .co{font-size:8px;letter-spacing:.06em;color:rgba(210,218,228,.34)}
.tel .co.lit{color:rgba(255,102,20,.62);letter-spacing:.10em}

/* corner brackets on the bracketed blocks */
.brk{padding:9px 13px}
.brk::before,.brk::after{content:'';position:absolute;width:9px;height:9px;
  border-color:rgba(255,102,20,.42);border-style:solid}
.brk::before{top:0;left:0;border-width:1px 0 0 1px}
.brk::after{bottom:0;right:0;border-width:0 1px 1px 0}

.tel-online{top:clamp(104px,12vh,132px);right:clamp(20px,3.3vw,52px);align-items:flex-end;text-align:right}
.tel-node{top:clamp(168px,19vh,214px);right:clamp(20px,3.3vw,52px);align-items:flex-end;text-align:right;opacity:.85}
.tel-out{bottom:clamp(36px,7vh,76px);right:clamp(20px,3.3vw,52px);align-items:flex-end;text-align:right}

/* ── viewport corner marks — fragments only, never a full frame ── */
.cmark{position:absolute;width:16px;height:16px;border-color:rgba(255,102,20,.30);border-style:solid}
.cmark.tr{top:clamp(88px,10vh,112px);right:clamp(14px,2.4vw,36px);border-width:1px 1px 0 0}
.cmark.bl{bottom:clamp(22px,4vh,46px);left:clamp(14px,2.4vw,36px);border-width:0 0 1px 1px}
.cmark.br{bottom:clamp(22px,4vh,46px);right:clamp(14px,2.4vw,36px);border-width:0 1px 1px 0}

/* ── eyebrow as a HUD designation ── */
.hero .kicker{display:flex;align-items:center;gap:12px}
.hero .kicker .kx{
  position:relative;font-size:10px;letter-spacing:.12em;color:var(--hud);
  padding:3px 8px;flex:0 0 auto;
}
.hero .kicker .kx::before,.hero .kicker .kx::after{
  content:'';position:absolute;width:5px;height:5px;border-color:rgba(255,102,20,.75);border-style:solid}
.hero .kicker .kx::before{top:0;left:0;border-width:1px 0 0 1px}
.hero .kicker .kx::after{bottom:0;right:0;border-width:0 1px 1px 0}
.hero .kicker .krule{flex:1 1 auto;height:1px;max-width:150px;
  background:linear-gradient(90deg,rgba(255,102,20,.34),transparent)}

/* ── engineered buttons ── */
.hero .btn{
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.hero .btn-ghost{position:relative}
.hero .btn-ghost::before{
  content:'';position:absolute;left:0;bottom:0;width:9px;height:9px;
  border-left:1px solid rgba(255,102,20,.45);border-bottom:1px solid rgba(255,102,20,.45);
}

/* technical underline beneath the Studio nav link */
body:has(.hero) .nav-cta{position:relative;padding-bottom:7px}
body:has(.hero) .cta-rule{
  position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,103,31,.7)}
body:has(.hero) .cta-rule::after{
  content:'';position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--hud);
  box-shadow:0 0 5px 1px rgba(255,102,20,.8)}

/* ── bottom rail: SYSTEM STATUS beside the trust statement ── */
.hero-base{display:flex;align-items:flex-start;gap:clamp(26px,4vw,62px);flex-wrap:wrap;
  margin-top:clamp(30px,6.5vh,90px)}
.sys{display:flex;flex-direction:column;gap:3px;font-family:var(--mono);font-size:8px;
  line-height:1.7;letter-spacing:.04em;flex:0 0 auto}
.sys b{color:rgba(190,200,212,.44);font-weight:400;letter-spacing:.16em}
.sys span{color:rgba(210,218,228,.40);display:flex;align-items:center;gap:6px}
.sys em{font-style:normal;color:rgba(232,238,244,.72)}
.sys .dot{width:4px;height:4px;border-radius:50%;background:var(--hud);
  box-shadow:0 0 5px 1px rgba(255,102,20,.65);animation:hud-pulse 13s ease-in-out infinite}
.hero .hero-foot{margin-top:0;flex:1 1 340px}
/* targeting glyph, not a bullet */
.hero .hero-foot::before{
  content:'';flex:0 0 13px;height:13px;margin-top:2px;border-radius:50%;
  border:1px solid rgba(255,102,20,.45);
  background:
    linear-gradient(rgba(255,102,20,.55),rgba(255,102,20,.55)) center/1px 7px no-repeat,
    linear-gradient(rgba(255,102,20,.55),rgba(255,102,20,.55)) center/7px 1px no-repeat,
    radial-gradient(circle,var(--hud) 0 22%,transparent 26%);
}

/* ── the chamber should be the brightest object on screen ── */
.env-core{
  background:radial-gradient(circle at 70% 48%,
    rgba(255,95,15,.11) 0%, rgba(255,95,15,.045) 25%, transparent 48%);
  animation:core-breathe 18s ease-in-out infinite alternate;
}
@keyframes core-breathe{from{opacity:.75}to{opacity:1}}
.env-plate img{filter:brightness(.94) contrast(1.05) saturate(1.04)}

@media (prefers-reduced-motion:reduce){
  .hud-net .node circle,.tel .dot,.sys .dot,.env-core{animation:none}
}

/* ── the system layer is desktop-only: at tablet and below the copy needs the
     whole frame, and scattering telemetry across it would fight the message ── */
/* ⚠ HIS SCREEN IS 1536x864 AT dpr 1.25, so his browser viewport tops out around
   1229 CSS px — he will never see 1920. Hiding the circuit network below 1280
   meant hiding the most important element of this pass from the only person
   looking at it. So instead of hiding it, anchor it to the RIGHT edge and let it
   compress: it then always lands in the gap between the copy and the chamber
   rather than needing a gap that only exists on a huge monitor. */
@media(max-width:1280px){
  .hero h1{max-width:500px}
  .hero-sub{max-width:474px}
  .hud-net{left:auto;right:clamp(80px,10vw,180px);width:clamp(180px,22vw,300px)}
  .proc{left:auto;right:clamp(300px,34vw,470px);gap:clamp(24px,4.6vh,44px)}
  .proc b{font-size:9px}
  .proc i{font-size:7.5px}
}
/* below ~1040 the gap genuinely closes; drop the network rather than run traces
   under the text, but keep the corner telemetry which still has room */
@media(max-width:1040px){
  .hud-net,.proc{display:none}
}
@media(max-width:920px){
  .tel-node{display:none}
}
@media(max-width:860px){
  .hud{display:none}
  .hero-base{flex-direction:column;gap:22px}
}

/* bands */
.band{padding:76px 0;border-bottom:1px solid var(--border)}
.band.alt{background:var(--surface)}
.sec-title{font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:800;letter-spacing:-.025em;line-height:1.2;max-width:24ch}
.sec-sub{color:var(--muted);margin-top:14px;max-width:70ch}
.sec-foot{color:var(--dim);font-size:14.4px;margin-top:18px;max-width:78ch}

/* cards */
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px;margin-top:34px}
.card{background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:22px}
.band.alt .card{background:var(--bg)}
.card h3{font-size:1.02rem;font-weight:700;margin-bottom:9px}
.card p{color:var(--muted);font-size:14.6px}

/* steps */
.steps{list-style:none;margin-top:38px;counter-reset:s}
.steps li{display:flex;gap:22px;padding:24px 0;border-top:1px solid var(--border)}
.steps li:first-child{border-top:none}
.steps li.hl{background:linear-gradient(90deg,rgba(255,138,61,.07),transparent 62%);
  border-left:2px solid var(--accent);padding-left:20px;margin-left:-22px;border-radius:0 8px 8px 0}
.step-n{font-family:var(--mono);font-size:13px;color:var(--accent);font-weight:700;
  flex-shrink:0;width:30px;padding-top:3px}
.steps h3{font-size:1.13rem;font-weight:700;margin-bottom:8px;letter-spacing:-.012em}
.steps p{color:var(--muted);margin-bottom:9px;max-width:72ch}
.steps p:last-child{margin-bottom:0}
.steps strong{color:var(--text);font-weight:640}
.warn-inline{color:var(--warn)!important;font-size:14px}

/* truth table */
.table-wrap{overflow-x:auto;margin-top:30px;border:1px solid var(--border);border-radius:11px}
table.truth{width:100%;border-collapse:collapse;font-size:14.6px;min-width:600px}
table.truth th{background:var(--surface-2);text-align:left;padding:13px 16px;font-weight:650;
  border-bottom:1px solid var(--border);white-space:nowrap}
table.truth td{padding:12px 16px;border-bottom:1px solid var(--border);color:var(--muted)}
table.truth tr:last-child td{border-bottom:none}
.row-no td{background:rgba(248,113,113,.045)}
.src{font-family:var(--mono);font-size:12.4px}
.src.doc{color:#7dd3fc} .src.img{color:#c4b5fd} .src.web{color:#86efac}
.src.none{color:#f87171}
.ok{color:var(--ok);font-weight:600} .no{color:#f87171;font-weight:600}

/* cta band */
.cta-band{text-align:center;border-bottom:none}
.cta-band .sec-title,.cta-band .sec-sub{margin-left:auto;margin-right:auto}
.cta-band .btn{margin-top:26px}
@media(max-width:620px){
  .steps li{flex-direction:column;gap:8px}
  .steps li.hl{margin-left:0;padding-left:16px}
}

/* footer internal link — same pattern as abdialamir.com's dock link */
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.footer-internal{display:flex;align-items:center;gap:11px;border:1px solid var(--border);
  border-radius:10px;padding:11px 16px;background:var(--surface)}
.footer-internal:hover{border-color:var(--accent-dim);text-decoration:none}
.fi-icon{color:var(--accent);font-size:13px}
.fi-title{display:block;color:var(--accent);font-size:14px;font-weight:650}
.fi-sub{display:block;color:var(--dim);font-size:12.2px;margin-top:1px}

/* Short desktop viewports (laptops at 1440x900 and below) overflowed: the
   top padding and the trust-line gap are both vh-based, so on a 735px-tall
   window they still reserved ~250px between them. Compress the vertical
   rhythm when height is the constraint rather than width. Measured, not guessed. */
@media (min-width:861px) and (max-height:880px){
  .hero{padding-top:clamp(100px,14vh,150px);padding-bottom:30px}
  .hero h1{font-size:clamp(2.2rem,3.95vw,3.7rem)}
  .kicker{margin-bottom:24px}
  .hero-sub{margin-top:22px}
  .hero-sub strong{margin-top:13px}
  .hero-ctas{margin-top:28px}
  .hero-foot{margin-top:clamp(30px,6.5vh,90px)}
}

/* ── CHALLENGE — full-screen systems interface ──────────────────────────────
   Card copy untouched; this is presentation only. Wider frame than the rest of
   the site (1600px vs 1080px) because the target composes across the full
   screen rather than inside a content column. */

.challenge{
  position:relative;overflow:hidden;border-bottom:none;
  min-height:100svh;display:flex;align-items:center;
  padding:clamp(72px,9vh,120px) 0 clamp(104px,13vh,168px);
  background:#050506;isolation:isolate;
}
.challenge > .ch-wrap{
  position:relative;z-index:2;width:100%;max-width:1600px;margin:0 auto;
  padding-inline:clamp(28px,4.2vw,80px);
}

/* ── plate ── */
.ch-env{position:absolute;inset:0;z-index:0;pointer-events:none}
.ch-env > span{position:absolute;inset:0;display:block}
.ch-plate{position:absolute;inset:0;display:block;background:#050506}
.ch-plate img{
  width:100%;height:100%;object-fit:cover;object-position:74% 22%;display:block;
  /* the brief asks NOT to heavily darken this: the circuitry has to stay visible */
  filter:brightness(.96) contrast(1.04) saturate(1.05);
}
/* localised readability, not a blanket wash: dark under the headline and under
   the card row, and left almost clear over the machine */
.ch-read{
  background:
    radial-gradient(1000px 460px at 22% 34%, rgba(4,5,6,.93), rgba(4,5,6,.34) 62%, transparent 78%),
    linear-gradient(to bottom, rgba(4,5,6,.55) 0%, rgba(4,5,6,.10) 26%, rgba(4,5,6,.38) 58%, rgba(4,5,6,.74) 100%),
    linear-gradient(90deg, rgba(4,5,6,.72) 0%, rgba(4,5,6,.18) 34%, transparent 56%);
}
.ch-grain{
  opacity:.022;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── HUD placement for this section ── */
.ch-hud .rail{left:clamp(12px,2vw,34px);top:16%;bottom:26%}
.ch-id{position:absolute;top:clamp(60px,8vh,96px);left:clamp(54px,6vw,110px);
  display:flex;flex-direction:column;gap:2px}
.ch-id .co{font-size:8px;letter-spacing:.14em;color:rgba(255,102,20,.42)}
.ch-net{
  position:absolute;right:clamp(40px,7vw,150px);top:16%;
  width:clamp(220px,30vw,470px);height:min(38vh,300px);
}
.ch-hud .cmark.tl{top:clamp(26px,4vh,52px);left:clamp(12px,2vw,34px);border-width:1px 0 0 1px}
.ch-hud .cmark.br{bottom:clamp(26px,4vh,52px);right:clamp(12px,2vw,34px);border-width:0 1px 1px 0}

/* lower-left status with the concentric targeting ring from the target */
.ch-status{
  position:absolute;left:clamp(40px,5.4vw,104px);bottom:clamp(34px,6vh,86px);
  display:flex;align-items:center;gap:14px;font-family:var(--mono);
}
.ch-status .ring{
  width:34px;height:34px;border-radius:50%;flex:0 0 34px;
  border:1px solid rgba(255,102,20,.30);
  background:
    radial-gradient(circle,var(--hud) 0 12%,transparent 15%),
    radial-gradient(circle, transparent 0 40%, rgba(255,102,20,.22) 41% 43%, transparent 44%),
    radial-gradient(circle, transparent 0 66%, rgba(255,102,20,.16) 67% 69%, transparent 70%);
}
.ch-status > div{display:flex;flex-direction:column;gap:2px;font-size:9px;line-height:1.65;letter-spacing:.05em}
.ch-status b{color:rgba(255,102,20,.72);font-weight:400;letter-spacing:.15em}
.ch-status span{color:rgba(206,214,224,.44);display:flex;align-items:center;gap:6px}
.ch-status .dot{width:4px;height:4px;border-radius:50%;background:var(--hud);
  box-shadow:0 0 5px 1px rgba(255,102,20,.6);animation:hud-pulse 13s ease-in-out infinite}

.ch-out{bottom:clamp(30px,5vh,78px);right:clamp(44px,5.6vw,108px);
  align-items:flex-end;text-align:right;gap:6px;line-height:1.5}
.ch-out .hd{font-size:9px;letter-spacing:.16em;color:rgba(255,102,20,.78)}

/* ── headline block ── */
.ch-eyebrow{position:relative;display:inline-block;margin:0 0 22px;padding:7px 16px}
.ch-eyebrow span{font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:#ff6a18;font-weight:600}
.ch-eyebrow::before,.ch-eyebrow::after{
  content:'';position:absolute;width:9px;height:9px;
  border-color:rgba(255,102,20,.7);border-style:solid}
.ch-eyebrow::before{top:0;left:0;border-width:1px 0 0 1px}
.ch-eyebrow::after{bottom:0;right:0;border-width:0 1px 1px 0}

.challenge .ch-title{
  font-size:clamp(2.35rem,3.95vw,3.4rem);font-weight:800;line-height:1.08;letter-spacing:-.032em;
  color:#f4f5f6;max-width:850px;margin:0 0 clamp(34px,5vh,62px);
}
.challenge .ch-title em{font-style:normal;color:#ff671f}

/* ── cards ── */
.ch-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,34px);align-items:stretch}
.challenge .card{
  position:relative;display:flex;flex-direction:column;
  min-height:clamp(300px,42vh,390px);padding:32px;
  border-radius:3px;border:1px solid rgba(150,166,184,.20);
  background:linear-gradient(180deg, rgba(10,12,15,.80) 0%, rgba(7,9,12,.90) 100%);
  backdrop-filter:blur(7px);
  box-shadow:0 18px 46px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.035),
             inset 0 0 44px rgba(255,102,20,.035);
  /* chamfer the lower-right corner, matching the target's clipped detail */
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}
/* the orange detail sitting in the chamfer */
.ch-chamf{position:absolute;right:0;bottom:0;width:28px;height:28px;pointer-events:none}
.ch-chamf::before{
  content:'';position:absolute;right:-1px;bottom:-1px;width:38px;height:1px;
  background:rgba(255,102,20,.62);transform-origin:right bottom;transform:rotate(-45deg)}
.ch-chamf::after{
  content:'';position:absolute;right:5px;bottom:5px;width:5px;height:5px;border-radius:50%;
  background:var(--hud);box-shadow:0 0 6px 1px rgba(255,102,20,.6)}

/* icon in its hex frame */
.ch-ic{display:block;width:44px;height:44px;margin-bottom:26px}
.ch-ic svg{width:100%;height:100%;overflow:visible}
.ch-ic .hex{fill:none;stroke:rgba(255,102,20,.55);stroke-width:1.1}
.ch-ic .gl{fill:none;stroke:#ff7a2e;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ch-ic .gl.fill{fill:#ff7a2e;stroke:none}

.challenge .card h3{
  font-size:clamp(1.32rem,1.74vw,1.42rem);font-weight:750;line-height:1.35;
  color:#f4f6f8;margin:0 0 14px;letter-spacing:-.012em;
}
.challenge .card p{
  font-size:clamp(1.125rem,1.48vw,1.19rem);line-height:1.65;
  color:rgba(206,214,224,.72);margin:0;
}

@media (prefers-reduced-motion:reduce){ .ch-status .dot{animation:none} }

/* ── responsive ── */
@media(max-width:1180px){
  .ch-net{display:none}
  .challenge .card{min-height:0;padding:26px}
}
@media(max-width:940px){
  .ch-cards{grid-template-columns:1fr;gap:16px}
  .challenge{min-height:0;padding:72px 0 80px}
  .ch-id,.ch-hud .rail{display:none}
  .ch-plate img{object-position:70% 20%}
  .ch-read{background:linear-gradient(to bottom, rgba(4,5,6,.80) 0%, rgba(4,5,6,.62) 40%,
    rgba(4,5,6,.86) 100%)}
}
@media(max-width:620px){
  .ch-status,.ch-out,.ch-hud .cmark{display:none}
  .challenge .card{padding:22px}
}

/* On a short viewport the fixed card height plus the reserved HUD row cannot both
   fit, and the status block ended up over the cards. Height, not width, is the
   constraint here — so release the card minimum rather than shrink the type. */
@media (max-height:860px){
  .challenge .card{min-height:0}
  .challenge{padding-top:clamp(64px,7vh,100px)}
  .challenge .ch-title{margin-bottom:clamp(26px,3.6vh,44px)}
  .ch-ic{width:38px;height:38px;margin-bottom:20px}
}

/* ── PIPELINE — full-screen stage interface ─────────────────────────────────
   Copy untouched. The composition gives the left ~64% to the pipeline UI and
   leaves the right third to the corridor and portal, which must stay bright.

   ⚠ Type floors are tuned to a ~1229px viewport, not to the mockup's canvas.
   Twice now, vw-scaled clamps meant the specified sizes only arrived at widths
   he cannot reach. */

.pipeline{
  position:relative;overflow:hidden;border-bottom:none;
  padding:clamp(76px,9vh,132px) 0 clamp(84px,10vh,150px);
  background:#020507;isolation:isolate;
}
.pl-wrap{
  position:relative;z-index:2;
  width:min(59vw,1010px);min-width:min(100%,620px);
  margin-left:clamp(40px,7vw,150px);
  padding-right:20px;
}

/* ── plate: dark and readable left, portal bright right ── */
.pl-env{position:absolute;inset:0;z-index:0;pointer-events:none}
.pl-env > span{position:absolute;inset:0;display:block}
.pl-plate{position:absolute;inset:0;display:block;background:#020507}
.pl-plate img{
  width:100%;height:100%;object-fit:cover;object-position:88% center;display:block;
  filter:brightness(1.02) contrast(1.05) saturate(1.06);
}
/* the portal must stay visible, so this is a horizontal ramp, not a wash */
.pl-read{
  background:linear-gradient(90deg,
    rgba(2,5,7,.955) 0%,
    rgba(2,5,7,.925) 44%,
    rgba(2,5,7,.62) 64%,
    rgba(2,5,7,.18) 78%,
    rgba(2,5,7,.02) 100%);
}
.pl-grain{
  opacity:.02;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── HUD placement ── */
.pl-net{position:absolute;left:24%;top:4%;width:min(46vw,620px);height:min(22vh,200px)}
.pl-ver{top:clamp(44px,6vh,84px);right:clamp(28px,3.4vw,64px);
  align-items:flex-end;text-align:right;position:absolute;
  display:flex;flex-direction:column;gap:3px}
.pl-status{left:clamp(40px,7vw,140px);bottom:clamp(28px,5vh,74px)}
.pl-out{bottom:clamp(28px,5vh,74px);right:clamp(40px,4.4vw,92px)}
.pl-hud .cmark.tl{top:clamp(22px,3vh,44px);left:clamp(12px,1.6vw,28px);border-width:1px 0 0 1px}
.pl-hud .cmark.bl{bottom:clamp(22px,3vh,44px);left:clamp(12px,1.6vw,28px);border-width:0 0 1px 1px}

/* ── headline ── */
.pl-title{
  font-size:clamp(2.5rem,4vw,4.25rem);font-weight:750;line-height:1.03;letter-spacing:-.035em;
  color:#f4f5f6;margin:0 0 clamp(30px,4.4vh,56px);max-width:16ch;
}
.pl-title em{font-style:normal;color:#ff671f}

/* ── the rail and the stages ── */
.pl-stages{
  list-style:none;margin:0;padding:0;position:relative;
  display:flex;flex-direction:column;gap:10px;
}
/* the vertical rail, drawn behind the nodes and stopping at the last one */
.pl-stages::before{
  content:'';position:absolute;left:37px;top:26px;bottom:26px;width:1px;
  background:linear-gradient(to bottom,
    rgba(255,102,20,.10), rgba(255,102,20,.55) 12%, rgba(255,102,20,.55) 88%, rgba(255,102,20,.10));
}
.pl-stage{position:relative;display:grid;grid-template-columns:74px 1fr;align-items:stretch}
.pl-num{
  position:absolute;left:0;top:26px;width:26px;text-align:right;
  font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.02em;
  color:rgba(255,102,20,.78);
}
.pl-node{
  position:absolute;left:31px;top:29px;width:13px;height:13px;border-radius:50%;
  border:1px solid rgba(255,102,20,.55);background:#04070a;
}
.pl-node::after{
  content:'';position:absolute;inset:3px;border-radius:50%;background:var(--hud);
  box-shadow:0 0 6px 1px rgba(255,102,20,.5);
}

/* ── stage card ── */
.pl-card{
  grid-column:2;display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,1.6vw,28px);
  align-items:start;min-height:130px;padding:clamp(20px,1.7vw,28px) clamp(20px,1.9vw,32px);
  border-radius:3px;border:1px solid rgba(150,165,175,.28);
  background:rgba(8,12,15,.76);backdrop-filter:blur(10px);
  box-shadow:0 14px 38px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.03);
}
.pl-ic{display:block;width:clamp(48px,3.6vw,60px);height:clamp(48px,3.6vw,60px);flex:0 0 auto}
.pl-ic svg{width:100%;height:100%;overflow:visible}
.pl-ic .hex{fill:none;stroke:rgba(255,102,20,.52);stroke-width:1}
.pl-ic .gl{fill:none;stroke:#ff7a2e;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}

/* ── stage typography (copy unchanged, only its presentation) ── */
.pipeline .pl-body h3{
  font-size:clamp(1.26rem,1.62vw,1.44rem);font-weight:700;line-height:1.3;letter-spacing:-.014em;
  color:#f4f6f8;margin:0 0 10px;
}
.pipeline .pl-body p{
  font-size:clamp(.95rem,1.22vw,1.06rem);line-height:1.58;
  color:rgba(200,210,220,.70);margin:0 0 9px;max-width:none;
}
.pipeline .pl-body p:last-child{margin-bottom:0}
.pipeline .pl-body strong{color:#f2f5f8;font-weight:650}
/* the untrusted-input warning keeps its emphasis, now in the accent */
.pipeline .pl-body .warn-inline{color:#ff7a2e !important;font-size:clamp(.92rem,1.16vw,1.02rem)}

/* ── stage 05: the active checkpoint. Dark, but unmistakably armed. ── */
.pl-stage.is-gate .pl-card{
  border-color:rgba(255,105,0,.85);
  background:
    linear-gradient(90deg, rgba(255,95,0,.075) 0%, rgba(255,95,0,.02) 34%, transparent 62%),
    rgba(8,12,15,.80);
  box-shadow:inset 0 0 45px rgba(255,95,0,.07), 0 0 25px rgba(255,95,0,.08);
}
.pl-stage.is-gate .pl-num{color:#ff7f33}
.pl-stage.is-gate .pl-node{border-color:rgba(255,120,30,.9)}
.pl-stage.is-gate .pl-node::after{background:#ff8a3d;box-shadow:0 0 9px 2px rgba(255,120,30,.75)}
.pl-stage.is-gate .pl-ic .hex{stroke:rgba(255,120,30,.9)}
.pl-stage.is-gate .pl-ic .gl{stroke:#ff8f45;stroke-width:1.5}

/* ── responsive ── */
@media(max-width:1180px){
  .pl-wrap{width:min(66vw,1010px);margin-left:clamp(28px,5vw,80px)}
  .pl-net{display:none}
  .pl-read{background:linear-gradient(90deg,rgba(2,5,7,.97) 0%,rgba(2,5,7,.95) 52%,
    rgba(2,5,7,.72) 72%,rgba(2,5,7,.24) 88%,rgba(2,5,7,.04) 100%)}
}
@media(max-width:940px){
  .pl-wrap{width:auto;margin:0;padding-inline:clamp(20px,4vw,40px)}
  .pl-plate img{object-position:78% center}
  .pl-read{background:linear-gradient(to bottom,rgba(2,5,7,.90) 0%,rgba(2,5,7,.80) 46%,
    rgba(2,5,7,.90) 100%)}
  .pl-status,.pl-out,.pl-hud .cmark{display:none}
  .pl-card{grid-template-columns:1fr;gap:14px}
  .pl-ic{width:44px;height:44px}
}
@media(max-width:620px){
  .pl-stage{grid-template-columns:52px 1fr}
  .pl-stages::before{left:26px}
  .pl-node{left:20px}
  .pl-num{width:18px;font-size:11px}
  .pl-card{padding:18px}
}

/* ── THE ANCHOR — provenance console ────────────────────────────────────────
   Table data untouched. The console is the centrepiece; the portal on the right
   must stay visible, so the table stops around 70% and the environment owns the
   rest. Type floors tuned for a ~1229px viewport, which is his real maximum. */

.anchor{
  position:relative;overflow:hidden;border-bottom:none;
  min-height:100svh;display:flex;align-items:center;
  padding:clamp(72px,8vh,116px) 0 clamp(96px,12vh,160px);
  background:#020507;isolation:isolate;
}
.an-wrap{
  position:relative;z-index:2;
  width:min(64vw,1150px);min-width:min(100%,620px);
  margin-left:clamp(40px,7vw,160px);padding-right:20px;
}

/* ── plate: dark readable left, portal bright right ── */
.an-env{position:absolute;inset:0;z-index:0;pointer-events:none}
.an-env > span{position:absolute;inset:0;display:block}
.an-plate{position:absolute;inset:0;display:block;background:#020507}
.an-plate img{
  width:100%;height:100%;object-fit:cover;object-position:78% center;display:block;
  filter:brightness(1.0) contrast(1.05) saturate(1.05);
}
/* horizontal ramp — the doorway and the floor reflections have to survive */
.an-read{
  background:linear-gradient(90deg,
    rgba(2,5,7,.94) 0%,
    rgba(2,5,7,.88) 45%,
    rgba(2,5,7,.52) 68%,
    rgba(2,5,7,.16) 84%,
    rgba(2,5,7,.02) 100%);
}
.an-grain{
  opacity:.02;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── HUD ── */
.an-rail{left:clamp(12px,2vw,34px);top:12%;bottom:22%}
.an-ver{position:absolute;top:clamp(40px,5.5vh,78px);right:clamp(28px,3.2vw,60px);
  display:flex;flex-direction:column;gap:3px;align-items:flex-end;text-align:right}
.an-status{left:clamp(40px,6.6vw,150px);bottom:clamp(30px,5vh,78px)}
.an-out{bottom:clamp(30px,5vh,78px);right:clamp(40px,4.2vw,88px)}
.an-hud .cmark.tl{top:clamp(20px,3vh,42px);left:clamp(12px,1.6vw,28px);border-width:1px 0 0 1px}
.an-hud .cmark.bl{bottom:clamp(20px,3vh,42px);left:clamp(12px,1.6vw,28px);border-width:0 0 1px 1px}

/* ── heading block ── */
.an-title{
  font-size:clamp(2.6rem,3.9vw,4rem);font-weight:750;line-height:1.05;letter-spacing:-.03em;
  color:#f4f5f6;margin:0 0 18px;
}
.an-sub{
  font-size:clamp(1.125rem,1.46vw,1.19rem);line-height:1.55;max-width:850px;
  color:rgba(198,210,222,.72);margin:0 0 clamp(26px,3.6vh,44px);
}

/* ── the console ── */
.an-console{
  max-width:1100px;border-radius:3px;overflow:hidden;
  background:rgba(5,9,12,.78);border:1px solid rgba(155,170,180,.34);
  backdrop-filter:blur(12px);
  box-shadow:0 25px 80px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.025),
             0 0 40px rgba(255,102,20,.035);
}
.anchor table.truth{
  width:100%;border-collapse:collapse;min-width:0;font-size:clamp(1.02rem,1.32vw,1.12rem);
}
.anchor table.truth th{
  background:rgba(255,255,255,.035);color:#f2f5f8;font-weight:700;
  font-size:clamp(1.075rem,1.4vw,1.15rem);letter-spacing:-.005em;
  text-align:left;padding:clamp(16px,1.5vw,22px) clamp(16px,1.7vw,26px);
  border-bottom:1px solid rgba(155,170,180,.30);white-space:nowrap;
}
.anchor table.truth td{
  padding:clamp(14px,1.35vw,19px) clamp(16px,1.7vw,26px);
  border-bottom:1px solid rgba(155,170,180,.13);
  color:rgba(206,216,226,.80);vertical-align:middle;
}
.anchor table.truth tr:last-child td{border-bottom:none}
.anchor table.truth tbody tr:not(.row-no):hover td{background:rgba(255,255,255,.018)}

/* source column — the conceptual heart of the section, so it gets the clearest
   signal: monospace, weighted, and colour-coded by where the fact came from */
.anchor .src{font-family:var(--mono);font-weight:600;font-size:.94em;letter-spacing:.01em}
.anchor .src.doc{color:#5ad4ff}      /* spec sheet      — electric cyan */
.anchor .src.img{color:#b79bff}      /* photograph      — violet */
.anchor .src.web{color:#5fe08d}      /* product page    — green */
.anchor .src.none{color:#ff5f47}     /* nothing to cite — red */
.anchor table.truth td.ok{color:#4ff08a;font-weight:650}
.anchor table.truth td.no{color:#ff5f47;font-weight:700;letter-spacing:.01em}

/* the three refused rows have to read as dangerous at a glance */
.anchor tr.row-no td{
  background:rgba(70,18,14,.16);
  border-bottom-color:rgba(255,95,71,.16);
}
.anchor tr.row-no:first-of-type td{box-shadow:inset 0 1px 0 rgba(255,95,71,.22)}
.anchor tr.row-no td:first-child{
  box-shadow:inset 3px 0 0 rgba(255,95,71,.42);color:rgba(230,214,210,.86);
}

.an-foot{
  font-size:clamp(1.08rem,1.4vw,1.19rem);line-height:1.6;max-width:900px;
  color:rgba(190,202,214,.66);margin:clamp(22px,3vh,34px) 0 0;
}

/* ── responsive ── */
@media(max-width:1180px){
  .an-wrap{width:min(74vw,1150px);margin-left:clamp(28px,4.5vw,80px)}
  .an-read{background:linear-gradient(90deg,rgba(2,5,7,.96) 0%,rgba(2,5,7,.93) 54%,
    rgba(2,5,7,.66) 76%,rgba(2,5,7,.22) 90%,rgba(2,5,7,.04) 100%)}
}
@media(max-width:940px){
  .anchor{min-height:0;padding:76px 0 88px;align-items:flex-start}
  .an-wrap{width:auto;margin:0;padding-inline:clamp(18px,4vw,40px)}
  .an-plate img{object-position:72% center}
  .an-read{background:linear-gradient(to bottom,rgba(2,5,7,.92) 0%,rgba(2,5,7,.84) 46%,
    rgba(2,5,7,.92) 100%)}
  .an-status,.an-out,.an-hud .cmark,.an-rail{display:none}
  /* the table has four columns and cannot usefully shrink further — let it
     scroll inside the console rather than crushing the source labels */
  .an-console{overflow-x:auto}
  .anchor table.truth{min-width:660px}
}

/* Eight data rows plus a heading block will exceed a short viewport. Compress the
   row padding when height is the constraint rather than shrinking the type — the
   table is the centrepiece and small type would defeat the point of it. */
@media (min-width:941px) and (max-height:900px){
  .anchor{padding:clamp(56px,6vh,90px) 0 clamp(80px,10vh,130px)}
  .anchor table.truth td{padding-top:clamp(11px,1.05vw,15px);padding-bottom:clamp(11px,1.05vw,15px)}
  .anchor table.truth th{padding-top:clamp(13px,1.2vw,17px);padding-bottom:clamp(13px,1.2vw,17px)}
  .an-title{margin-bottom:14px}
  .an-sub{margin-bottom:clamp(20px,2.6vh,32px)}
}

/* ── THE GATE — compliance chamber ──────────────────────────────────────────
   Card copy untouched. The grid stops before the doorway on purpose: the six
   checks are what happens BEFORE something passes through the gate, so the door
   has to stay visible for the composition to mean anything. */

.gate{
  position:relative;overflow:hidden;border-bottom:none;
  min-height:100svh;display:flex;align-items:center;
  padding:clamp(75px,9vh,115px) 0 clamp(88px,11vh,140px);
  background:#020507;isolation:isolate;
}
.gt-wrap{
  position:relative;z-index:2;
  width:min(72vw,1200px);min-width:min(100%,620px);
  margin-left:clamp(40px,7vw,115px);padding-right:16px;
}

/* ── plate ── */
.gt-env{position:absolute;inset:0;z-index:0;pointer-events:none}
.gt-env > span{position:absolute;inset:0;display:block}
.gt-plate{position:absolute;inset:0;display:block;background:#020507}
.gt-plate img{
  width:100%;height:100%;object-fit:cover;object-position:82% center;display:block;
  filter:brightness(1.0) contrast(1.05) saturate(1.05);
}
/* the doorway, the floor reflections and the top-left circuitry all have to
   survive, so this ramps horizontally and never washes the whole frame */
.gt-read{
  background:linear-gradient(90deg,
    rgba(2,5,7,.93) 0%,
    rgba(2,5,7,.86) 45%,
    rgba(2,5,7,.50) 70%,
    rgba(2,5,7,.14) 86%,
    rgba(2,5,7,.02) 100%);
}
.gt-grain{
  opacity:.02;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── HUD ── */
.gt-status{left:clamp(40px,5.4vw,110px);bottom:clamp(28px,4.6vh,72px)}
.gt-out{bottom:clamp(28px,4.6vh,72px);right:clamp(40px,4vw,84px)}
.gt-hud .cmark.tl{top:clamp(20px,3vh,42px);left:clamp(12px,1.6vw,28px);border-width:1px 0 0 1px}

/* ── heading ── */
.gt-title{
  font-size:clamp(2.6rem,4vw,4rem);font-weight:750;line-height:1.03;letter-spacing:-.035em;
  color:#f5f5f3;margin:0 0 clamp(38px,5vh,50px);max-width:20ch;
}

/* ── the six modules ── */
.gt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.5vw,24px)}
.gt-card{
  position:relative;display:grid;grid-template-columns:72px 1fr;gap:22px;align-items:start;
  min-height:230px;padding:clamp(20px,1.7vw,28px);
  border-radius:2px;border:1px solid rgba(145,160,170,.30);
  background:rgba(5,9,12,.76);backdrop-filter:blur(10px);
  box-shadow:0 25px 60px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.025);
  /* angular, engineered — a small cut at the upper-left and lower-right */
  clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
/* the column nearest the doorway catches its light */
.gt-card:nth-child(3),.gt-card:nth-child(6){
  box-shadow:0 25px 60px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.025),
             8px 0 35px rgba(255,90,0,.05);
}
/* thin metal lines with a small orange accent in the cut corners */
.gt-cut{position:absolute;inset:0;pointer-events:none}
.gt-cut::before{
  content:'';position:absolute;left:-1px;top:-1px;width:22px;height:1px;
  background:rgba(255,102,20,.5);transform-origin:left top;transform:rotate(45deg)}
.gt-cut::after{
  content:'';position:absolute;right:-1px;bottom:-1px;width:22px;height:1px;
  background:rgba(255,102,20,.5);transform-origin:right bottom;transform:rotate(45deg)}

.gt-ic{display:block;width:64px;height:64px;flex:0 0 auto}
.gt-ic svg{width:100%;height:100%;overflow:visible;
  filter:drop-shadow(0 0 6px rgba(255,102,20,.22))}
.gt-ic .hex{fill:none;stroke:rgba(255,102,20,.62);stroke-width:1}
.gt-ic .gl{fill:none;stroke:#ff7a2e;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}

.gate .gt-body h3{
  font-size:clamp(1.25rem,1.63vw,1.34rem);font-weight:700;line-height:1.2;
  color:#f4f4f2;margin:0 0 12px;letter-spacing:-.012em;
}
.gate .gt-body p{
  font-size:clamp(1rem,1.26vw,1.06rem);line-height:1.7;
  color:rgba(215,220,224,.76);margin:0;
}

/* ── responsive ── */
@media(max-width:1280px){
  .gt-wrap{width:min(72vw,1200px);margin-left:clamp(32px,5vw,90px)}
  .gt-card{grid-template-columns:56px 1fr;gap:16px;min-height:0}
  .gt-ic{width:56px;height:56px}
}
@media(max-width:1040px){
  .gt-grid{grid-template-columns:repeat(2,1fr)}
  .gt-wrap{width:min(86vw,1200px)}
}
@media(max-width:820px){
  .gate{min-height:0;padding:76px 0 88px;align-items:flex-start}
  .gt-wrap{width:auto;margin:0;padding-inline:clamp(18px,4vw,40px)}
  .gt-grid{grid-template-columns:1fr}
  .gt-plate img{object-position:76% center}
  .gt-read{background:linear-gradient(to bottom,rgba(2,5,7,.92) 0%,rgba(2,5,7,.85) 46%,
    rgba(2,5,7,.93) 100%)}
  .gt-status,.gt-out,.gt-hud .cmark{display:none}
}
/* short viewports: two rows of 230px cards plus a heading will not fit 860px */
@media (min-width:1041px) and (max-height:900px){
  .gate{padding:clamp(58px,7vh,92px) 0 clamp(76px,9vh,120px)}
  .gt-card{min-height:0;padding:20px}
  .gt-title{margin-bottom:clamp(24px,3.2vh,38px)}
}

/* ── COMMAND DECK — closing CTA + footer as one environment ─────────────────
   No divider between them: the footer modules float over the same reflective
   floor the CTA stands on. The portal stays clear on the right — "Open the
   Studio" and the lit doorway are the same idea, so one must not cover the other. */

.deck{
  position:relative;overflow:hidden;
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(70px,8vh,110px) 0 clamp(28px,4vh,54px);
  background:#02060a;isolation:isolate;
}
.dk-wrap{
  position:relative;z-index:2;width:100%;
  max-width:1560px;margin:0 auto;padding-inline:clamp(28px,4vw,74px);
  display:flex;flex-direction:column;gap:clamp(34px,5vh,72px);
}

/* ── environment ── */
.dk-env{position:absolute;inset:0;z-index:0;pointer-events:none}
.dk-env > span{position:absolute;inset:0;display:block}
.dk-plate{position:absolute;inset:0;display:block;background:#02060a}
.dk-plate img{
  width:100%;height:100%;object-fit:cover;object-position:64% center;display:block;
  filter:brightness(1.02) contrast(1.04) saturate(1.05);
}
/* readable centre-left without flattening the floor or dimming the portal */
.dk-read{
  background:
    radial-gradient(920px 520px at 40% 38%, rgba(2,6,10,.90), rgba(2,6,10,.42) 58%, transparent 76%),
    linear-gradient(90deg, rgba(2,6,10,.86) 0%, rgba(2,6,10,.44) 34%, rgba(2,6,10,.06) 62%, transparent 78%);
}
.dk-grain{
  opacity:.02;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dk-rail{left:clamp(10px,1.6vw,26px);top:10%;bottom:24%}
.dk-sys{position:absolute;left:clamp(8px,1.4vw,22px);bottom:clamp(26px,5vh,74px);
  display:flex;flex-direction:column;align-items:center;gap:10px}
.dk-sys-t{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;line-height:1.5;
  color:rgba(255,102,20,.62);text-align:center}
.dk-sys-mark{width:18px;height:18px;border-radius:50%;
  border:1px solid rgba(255,102,20,.45);
  background:radial-gradient(circle,var(--hud) 0 22%,transparent 26%)}
.dk-hud .cmark.tl{top:clamp(18px,2.6vh,38px);left:clamp(10px,1.6vw,26px);border-width:1px 0 0 1px}

/* ── CTA ── */
.dk-cta{text-align:center;max-width:840px;margin:0 auto 0 clamp(0px,6vw,150px);
  display:flex;flex-direction:column;align-items:center}
.dk-title{
  font-size:clamp(2.55rem,4vw,4.15rem);font-weight:750;line-height:1.05;letter-spacing:-.035em;
  color:#f5f5f3;margin:0 0 20px;max-width:760px;
}
.dk-sub{
  font-size:clamp(1.14rem,1.42vw,1.3rem);line-height:1.55;color:rgba(205,214,224,.74);
  margin:0 0 clamp(30px,4vh,48px);max-width:620px;
}

/* the command button: a physical illuminated control, not a rounded rectangle */
.dk-btn{
  display:inline-block;min-width:min(420px,86vw);height:86px;position:relative;
  text-decoration:none;
  clip-path:polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  background:linear-gradient(180deg, rgba(255,120,30,.30) 0%, rgba(120,44,4,.42) 52%, rgba(60,20,2,.55) 100%);
  box-shadow:
    0 0 0 1px rgba(255,120,30,.85),
    inset 0 1px 0 rgba(255,205,160,.45),
    inset 0 -2px 0 rgba(0,0,0,.5),
    0 18px 40px rgba(0,0,0,.5),
    0 0 34px rgba(255,101,23,.28);
  transition:box-shadow .2s ease, background .2s ease;
}
.dk-btn::before{                       /* bright illuminated perimeter */
  content:'';position:absolute;inset:5px;pointer-events:none;
  clip-path:polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  box-shadow:0 0 0 1px rgba(255,150,70,.55);
}
.dk-btn-face{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:16px;
  font-size:clamp(1.14rem,1.4vw,1.32rem);font-weight:700;letter-spacing:-.005em;color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.dk-btn-face i{font-style:normal;font-size:1.35em;transition:transform .2s ease}
.dk-btn:hover{
  background:linear-gradient(180deg, rgba(255,140,50,.40) 0%, rgba(150,58,6,.50) 52%, rgba(72,25,3,.6) 100%);
  box-shadow:
    0 0 0 1px rgba(255,140,55,1),
    inset 0 1px 0 rgba(255,215,175,.6),
    inset 0 -2px 0 rgba(0,0,0,.5),
    0 18px 44px rgba(0,0,0,.55),
    0 0 46px rgba(255,101,23,.42);
}
.dk-btn:hover .dk-btn-face i{transform:translateX(5px)}

/* ── footer modules, floating on the floor ── */
.dk-footer{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(16px,1.8vw,30px);align-items:stretch}
.dk-panel{
  position:relative;overflow:hidden;
  padding:clamp(22px,2vw,34px) clamp(24px,2.2vw,38px);
  background:rgba(4,8,11,.78);backdrop-filter:blur(12px);
  border:1px solid rgba(255,100,0,.35);
  box-shadow:0 30px 70px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.025);
  clip-path:polygon(26px 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%, 0 26px);
}

/* brand module */
.dk-brand-top{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.dk-mark{display:block;width:clamp(38px,3vw,48px);height:clamp(38px,3vw,48px);flex:0 0 auto}
.dk-mark svg{width:100%;height:100%}
.dk-mark .hex{fill:none;stroke:rgba(255,102,20,.75);stroke-width:1.6}
.dk-mark .gl{fill:none;stroke:#ff7a2e;stroke-width:1.6}
.dk-mark .gl.fill{fill:#ff7a2e;stroke:none}
.dk-word{margin:0;font-size:clamp(2rem,2.7vw,2.9rem);font-weight:800;letter-spacing:-.03em;
  line-height:1;color:rgba(255,255,255,.5)}
.dk-word strong{font-weight:800;color:#f6f7f8}
.dk-word strong span{color:#ff671f}
.dk-brand-sub{margin:0 0 clamp(20px,2.6vh,30px);
  font-size:clamp(1.14rem,1.5vw,1.3rem);line-height:1.5;color:rgba(206,215,224,.76)}

.dk-feats{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,22px)}
.dk-feats li{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;
  column-gap:11px;align-items:center}
.dk-fi{grid-row:1 / 3;width:34px;height:34px}
.dk-fi svg{width:100%;height:100%}
.dk-fi .hex{fill:none;stroke:rgba(255,102,20,.55);stroke-width:1}
.dk-fi .gl{fill:none;stroke:#ff7a2e;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.dk-feats b{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:#ff671f;font-weight:600}
.dk-feats i{font-style:normal;font-size:12.6px;line-height:1.35;color:rgba(200,210,220,.62)}

/* AI-103 program module */
.dk-prog{display:block;text-decoration:none;transition:border-color .2s ease, box-shadow .2s ease}
.dk-prog:hover{
  border-color:rgba(255,120,30,.7);text-decoration:none;
  box-shadow:0 30px 70px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.03), 0 0 40px rgba(255,101,23,.14);
}
.dk-prog-label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  color:rgba(255,102,20,.8);margin-bottom:4px}
.dk-prog-id{
  display:block;font-size:clamp(3.4rem,5.4vw,5.6rem);font-weight:750;line-height:1;
  letter-spacing:-.035em;color:#ff6500;
  text-shadow:0 0 28px rgba(255,101,23,.35);
}
.dk-prog-name{display:block;font-size:clamp(1.65rem,2.16vw,1.92rem);font-weight:600;
  color:#eef1f4;margin-top:6px;letter-spacing:-.015em}
/* floor set for a ~1229px viewport, not the mockup canvas */
.dk-prog-rule{display:block;height:1px;margin:clamp(16px,2vh,24px) 0 clamp(12px,1.6vh,18px);
  background:linear-gradient(90deg,rgba(255,102,20,.5),rgba(255,102,20,.06) 68%,transparent)}
.dk-prog-links{display:block;font-size:clamp(.98rem,1.16vw,1.08rem);color:rgba(206,215,224,.72)}
.dk-prog-net{
  position:absolute;right:-24px;top:50%;transform:translateY(-50%);
  width:clamp(160px,15vw,250px);height:clamp(160px,15vw,250px);pointer-events:none;opacity:.5;
}
.dk-prog-net .net path{fill:none;stroke:rgba(255,102,20,.55);stroke-width:1;vector-effect:non-scaling-stroke}
.dk-prog-net .dots circle{fill:#ff7a2e;opacity:.75}

/* ── responsive ── */
@media(max-width:1180px){
  .dk-cta{margin-left:clamp(0px,4vw,80px)}
  .dk-prog-net{opacity:.32;right:-46px}
  .dk-read{background:radial-gradient(900px 520px at 42% 40%, rgba(2,6,10,.93), rgba(2,6,10,.52) 60%, transparent 80%),
    linear-gradient(90deg, rgba(2,6,10,.9) 0%, rgba(2,6,10,.6) 42%, rgba(2,6,10,.12) 72%, transparent 88%)}
}
@media(max-width:940px){
  .deck{min-height:0;padding:76px 0 40px}
  .dk-cta{margin:0 auto;max-width:none}
  .dk-footer{grid-template-columns:1fr}
  .dk-plate img{object-position:58% center}
  .dk-read{background:linear-gradient(to bottom,rgba(2,6,10,.90) 0%,rgba(2,6,10,.78) 40%,rgba(2,6,10,.92) 100%)}
  .dk-rail,.dk-sys,.dk-hud .cmark{display:none}
  .dk-prog-net{display:none}
}
@media(max-width:620px){
  .dk-feats{grid-template-columns:1fr;gap:12px}
  .dk-btn{min-width:0;width:100%;height:74px}
  .dk-panel{padding:22px}
}
/* short viewports: the CTA plus two footer modules cannot both breathe */
@media (min-width:941px) and (max-height:880px){
  .deck{padding:clamp(54px,6vh,86px) 0 clamp(22px,3vh,40px)}
  .dk-wrap{gap:clamp(26px,3.4vh,48px)}
  .dk-sub{margin-bottom:clamp(22px,2.8vh,34px)}
  .dk-btn{height:82px}
  .dk-panel{padding:20px 24px}
}