/* ══════════════════════════════════════════════════════════════════════════
   JUMP by ADUMU — neo-brutalist draft

   Measured, not guessed:
     ink on cream            15.76      white on charcoal      13.13
     ink on amber             9.53      cream on charcoal      11.64
     ink on orange            4.84      JSON syntax on panel    5.3+
   The CTA carries a NEAR-BLACK label, not white: orange with white is 3.67 and
   fails AA. Dark text on a bright fill is this style's own convention anyway.

   Style rules, applied everywhere:
     · 3px ink borders, hard offset shadows, no soft shadows, no gradients
     · flat colour blocks only; colour never carries meaning on its own
     · amber navigates, orange acts — one job each, never swapped
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --cream:#F4F1EA; --sheet:#FFFFFF; --panel:#2B3138;
  --ink:#16181C; --ink-2:#33383F; --muted:#4E555E; --faint:#5C636C;
  --orange:#E8541F; --orange-hi:#F26A38; --amber:#F0B429; --amber-hi:#FFC64A;
  --warmline:#C9C3B6; --rowline:#E4DED2; --rule:#D9D4C8;
  /* One shade below the cream page ground, for a panel that should read as
     RECESSED rather than unstyled. transparent + a hairline just looks unfinished. */
  --tint:#EAE5D9;
  /* --warn is set against the CREAM ground, not against white. At #B4661A it
     measures 3.83 on cream and fails AA, which is how the "destination still
     needed" chip slipped through; #9C5614 clears it at 4.96. */
  --good:#0F766E; --warn:#9C5614;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --data:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --shell:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body{margin:0; background:var(--cream); color:var(--ink-2);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{margin:0; font-family:var(--sans); color:var(--ink); font-weight:800;
  letter-spacing:-.03em; line-height:1.04;}
p{margin:0;} ul,ol{margin:0; padding:0; list-style:none;}
img{max-width:100%; height:auto; display:block;}
a{color:var(--ink);}
b,strong{font-weight:800; color:var(--ink);}
code{font-family:var(--data); font-size:.92em;}
.nb{white-space:nowrap;}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink);
  color:var(--cream); padding:12px 18px; font-weight:800;}
.skip:focus{left:12px; top:12px;}
:where(a,button,input,select,summary):focus-visible{outline:3px solid var(--orange);
  outline-offset:3px;}

.wrap{max-width:var(--shell); margin:0 auto; padding-inline:clamp(18px,3.4vw,40px);}

/* ── buttons ─────────────────────────────────────────────────────────────
   line-height is pinned so height is a function of padding, not of inherited
   leading — otherwise every size change moves the height unpredictably. */
.btn{display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  border:3px solid var(--ink); border-radius:6px; font-family:var(--sans);
  font-weight:800; line-height:1.2; font-size:16px; padding:13px 22px;
  text-decoration:none; color:var(--ink); box-shadow:4px 4px 0 0 var(--ink);
  transition:background .14s ease, transform .1s ease, box-shadow .1s ease;}
.btn:active{transform:translate(2px,2px); box-shadow:2px 2px 0 0 var(--ink);}
.btn-primary{background:var(--orange);}
.btn-primary:hover{background:var(--orange-hi);}
.btn-amber{background:var(--amber);}
.btn-amber:hover{background:var(--amber-hi);}
.btn-quiet{background:var(--sheet);}
.btn-quiet:hover{background:#EFEBE1;}
/* The closing block is two columns on a wide screen: the offer on the left, the
   acts on the right. Capped at 50ch, the copy left the right half of a very wide
   amber panel empty and the buttons trailed along the bottom of it. Collapses to
   one column at the same 900px the figures strip uses. */
.cta2{display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,4vw,56px); align-items:center;}
.cta2 .acts{display:flex; flex-direction:column; gap:12px; align-items:stretch;}
.cta2 .acts .btn{justify-content:center;}
.cta2 .acts .textlink{text-align:center;}
@media (max-width:900px){
  .cta2{grid-template-columns:minmax(0,1fr); gap:24px;}
  .cta2 .acts{align-items:flex-start;}
  .cta2 .acts .btn{justify-content:flex-start;}
  .cta2 .acts .textlink{text-align:left;}
}
.btn-xl{font-size:19px; padding:18px 30px; text-transform:uppercase;
  box-shadow:5px 5px 0 0 var(--ink);}

/* ── nav ── */
.navpill{margin:18px auto 0; max-width:var(--shell);
  width:calc(100% - clamp(24px,5vw,64px));}
.navpill .inner{display:flex; align-items:center; gap:clamp(10px,1.8vw,22px);
  padding:12px 16px; border:3px solid var(--ink); border-radius:14px;
  box-shadow:6px 6px 0 0 var(--ink); background:var(--sheet); flex-wrap:wrap;}
.wordmark{font-weight:800; font-size:30px; letter-spacing:-.045em; color:var(--ink);
  text-decoration:none; line-height:1;}
.wordmark small{font-size:14px; font-weight:600; letter-spacing:-.01em;
  color:var(--muted); margin-left:7px;}
.tnav{display:flex; gap:8px; margin-left:auto; flex-wrap:wrap; align-items:center;}
/* every nav item takes the CTA's treatment: same weight, same casing, same tracking */
.tnav a{font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.01em;
  color:var(--ink); text-decoration:none; padding:9px 13px;
  border:3px solid transparent; border-radius:8px;}
.tnav a:hover{border-color:var(--ink);}
.tnav a[aria-current="page"]{border-color:var(--ink); background:var(--panel);
  color:var(--sheet);}
.tnav .btn{padding:10px 18px; font-size:15px; text-transform:uppercase;
  border-radius:8px;}
.navmob{display:none; background:var(--sheet); border:3px solid var(--ink);
  border-radius:8px; font:800 14px/1.2 var(--sans); padding:10px 14px; cursor:pointer;
  color:var(--ink); text-transform:uppercase;}

/* ── page furniture ── */
.head{padding:clamp(26px,3.6vw,52px) 0 clamp(18px,2.4vw,30px);}
.head .kick{font:800 12.5px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:14px;}
.head h1{font-size:clamp(34px,4.4vw,54px); line-height:.99; letter-spacing:-.036em;
  max-width:20ch;}
.head .lede{margin-top:18px; font-size:17.5px; color:var(--ink-2); max-width:60ch;}
.sec{padding:clamp(40px,5.2vw,72px) 0;}
.sec-h{margin-bottom:clamp(24px,3vw,38px);}
.sec-h h2{font-size:clamp(28px,3.4vw,44px);}
.sec-h p{margin-top:12px; font-size:17px; color:var(--ink-2); max-width:62ch;}
.rule{height:3px; background:var(--ink); border:0; margin:0;}

/* ── boxes ── */
.bx{border:3px solid var(--ink); box-shadow:6px 6px 0 0 var(--ink);
  background:var(--sheet); border-radius:12px;}
.bx.flat{box-shadow:none;}
.tag{display:inline-block; background:var(--amber); border:2px solid var(--ink);
  font:800 11px/1 var(--data); padding:5px 8px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink);}
.tag.plain{background:var(--sheet);}

/* ── the charcoal terminal ── */
.term{background:var(--panel); border:3px solid var(--ink); border-radius:8px;
  overflow:hidden;}
.term-bar{display:flex; align-items:center; gap:8px; padding:9px 12px;
  border-bottom:3px solid var(--ink);}
.dot{width:11px; height:11px; border-radius:50%; border:2px solid rgba(0,0,0,.45);}
.term-tab{margin-left:10px; background:#3A424B; color:var(--cream);
  font:800 11px/1 var(--data); padding:5px 10px; border:2px solid #12161A;}
/* 227px is where the finished request and response settle, at every width. */
.term pre{margin:0; padding:13px; font-family:var(--data); font-size:11.6px;
  line-height:1.58; color:#C7D0D9; white-space:pre-wrap; word-break:break-word;
  min-height:227px;}
.term .k{color:#8FD0F0;} .term .s{color:#7FD4C1;} .term .n{color:#E9B871;}
.term .c{color:#9AA6B2;} .term .g{color:#8FE0A8;}
.caret{display:inline-block; width:7px; height:13px; background:#C7D0D9;
  vertical-align:-2px; animation:blink 1.1s steps(1) infinite;}
@keyframes blink{50%{opacity:0}}

/* ── the node flow ── */
.flow{display:flex; flex-direction:column; align-items:flex-start;}
.frow{display:flex; align-items:flex-start; gap:4px;}
.nodewrap{display:flex; flex-direction:column; align-items:center; gap:6px; width:58px;}
.tile{width:46px; height:46px; border:2.5px solid var(--ink); border-radius:8px;
  background:var(--sheet); display:flex; align-items:center; justify-content:center;
  color:var(--ink); transition:background .24s ease, transform .24s ease;}
.tile svg{width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;}
.nodewrap b{font-size:10.5px; font-weight:800; line-height:1.15; text-align:center;}
.nodewrap.on .tile{background:var(--amber); transform:translateY(-2px);}
.nodewrap.done .tile{background:#DFF3E4;}
.hop{width:18px; height:46px; display:flex; align-items:center; justify-content:center;}
.hop svg{width:18px; height:12px; overflow:visible;}
.elbow{height:26px;}
.elbow svg{display:block; overflow:visible;}
/* connector colour lives in CSS: var() is not valid inside an SVG presentation
   attribute, and CSS beats presentation attributes, so a class toggle is correct */
.flow path.ln{stroke:var(--warmline);}
.flow path.hd{fill:var(--warmline);}
.flow path.ln.lit{stroke:var(--amber);}
.flow path.hd.lit{fill:var(--amber);}

/* ── figures ─────────────────────────────────────────────────────────────
   A bordered box like everything else, NOT a full-bleed band. The first version
   painted --ink edge to edge and let it show through 3px grid gaps: outside the
   content width that read as a black bar running off both sides, which is the
   only full-bleed element in a design where every other block is an object
   sitting on the cream. The dividers are borders on the cells now, so the ink
   appears only between figures. */
.figs{padding:clamp(16px,2.2vw,30px) 0;}
.figs ul{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border:3px solid var(--ink); border-radius:12px; box-shadow:6px 6px 0 0 var(--ink);
  background:var(--sheet); overflow:hidden;}
.figs li{padding:20px 18px; border-right:3px solid var(--ink);}
.figs li:last-child{border-right:0;}
/* the grid is fixed at four; a strip with three would otherwise leave an empty
   fourth cell that reads as one double-width tile */
.figs ul.n3{grid-template-columns:repeat(3,minmax(0,1fr));}

.figs b{display:block; font-size:clamp(26px,3vw,34px); font-weight:800; color:var(--ink);
  letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums;}
.figs span{display:block; margin-top:8px; font-size:13.5px; color:var(--muted);
  line-height:1.4;}

/* ── the braid ────────────────────────────────────────────────────────────
   The brochure cover's infographic. It is the one raster on the site and it is
   glossy — gradients, glow, soft shadow — none of which this design does. It
   earns its place by being framed the way every other object is: an ink border
   and a hard offset shadow, with the mono caption sitting outside the frame.

   The frame is a `span` set to `line-height:0`. An inline image inside a box
   otherwise leaves a descender-sized strip of --sheet along the bottom edge,
   which reads as a mis-cropped picture rather than as padding.

   The image's own ground is #F4F1EA — the same --cream as the page — so the
   artwork bleeds into the frame's interior with no visible seam. That is
   deliberate: the frame, not a background change, is what contains it.

   The figure is 1800x842. Scaled to fit a phone it becomes 340px wide and its
   labels drop to about 5px — present, unreadable, and therefore decoration
   pretending to be information. So it keeps a 760px MINIMUM and scrolls inside
   its own frame below that, the same device tables use here. 760 is where
   "Needs a sign-in" still sets at ~10px; measured, not guessed. The hint is
   shown only while the scroll can actually happen, because a picture does not
   afford sideways scrolling the way a table does. */
.braid{margin:0;}
.braid .frame{display:block; line-height:0; overflow-x:auto; overflow-y:hidden;
  background:var(--cream); border:3px solid var(--ink); border-radius:12px;
  box-shadow:6px 6px 0 0 var(--ink);}
.braid img{width:100%; min-width:760px; height:auto;}
.braid figcaption{margin-top:14px; font:800 12px/1.5 var(--data); letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint);}
.braid figcaption .hint{display:none;}
@media (max-width:824px){
  /* Below the switch the portrait source fits the column, so nothing scrolls
     and the "scroll the figure sideways" hint has nothing to point at. */
  .braid img{min-width:0;}
  .braid .frame{overflow-x:hidden;}
}
@media (max-width:620px){
  .braid figcaption{font-size:11px; letter-spacing:.09em;}
}

/* ── dark cards ── */
/* ── capability cards ────────────────────────────────────────────────────
   White boxes on the cream, like every other block. They were charcoal, which
   made them the only dark surfaces on a page otherwise built from light boxes —
   a second design language sitting inside the first. The colour now lives where
   it belongs: an amber tile behind ink line art, so the accent still marks them
   without turning each card into a slab. */
.dcards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;}
.dcard{background:var(--sheet); border:3px solid var(--ink);
  box-shadow:6px 6px 0 0 var(--ink); border-radius:12px; padding:18px;
  display:grid; grid-template-columns:92px minmax(0,1fr); gap:16px; align-items:start;}
.dcard .thumb{width:92px; height:70px; border:2.5px solid var(--ink);
  border-radius:8px; background:var(--amber); overflow:hidden; color:var(--ink);}
.dcard .thumb svg{width:100%; height:100%; display:block;}
.dcard h3{color:var(--ink); font-size:16px; text-transform:uppercase;
  line-height:1.16; margin-bottom:7px;}
.dcard p{color:var(--muted); font-size:13.8px; line-height:1.52;}

/* ── light cards ── */
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px;}
.card{padding:22px; display:flex; flex-direction:column;}
.card .tag{align-self:flex-start; margin-bottom:14px;}
.card h3{font-size:23px; margin-bottom:9px;}
.card p{font-size:15px; color:var(--muted); line-height:1.55; flex:1 1 auto;}
.card .go{margin-top:18px; align-self:flex-start; background:var(--ink);
  color:var(--cream); border:3px solid var(--ink); padding:10px 16px;
  font-weight:800; font-size:14.5px; text-decoration:none; border-radius:4px;}
.card .go:hover{background:#2E343B;}

/* ── tables ── */
.scroll{overflow-x:auto;}
table.grid{width:100%; border-collapse:collapse; background:var(--sheet);
  border:3px solid var(--ink);}
table.grid th{text-align:left; font:800 12.5px/1.2 var(--data); text-transform:uppercase;
  letter-spacing:.06em; padding:13px 14px; border-bottom:3px solid var(--ink);
  background:var(--amber); color:var(--ink); white-space:nowrap;}
table.grid td{padding:13px 14px; border-bottom:2px solid var(--rowline);
  font-size:15px; color:var(--ink-2); vertical-align:top;}
table.grid tr:last-child td{border-bottom:0;}
table.grid td b{color:var(--ink);}
table.grid .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
/* Opt-in: hold a comparison table's row labels on one line. An inline
   width on the first cell is only a HINT under auto layout, so a long value
   cell wins the negotiation and takes the label column with it — adding one
   78-character cell to the marketplace table pulled the labels from 200px to
   154px and broke "Why it is cheaper" and "Change the shape" across two lines
   each. The table already sits in .scroll, so a narrow screen scrolls it
   rather than being pushed wide. Longest label using this is 17 characters. */
table.grid.labels td:first-child{white-space:nowrap;}

/* ── the marketplace catalogue ── */
.mkt{display:grid; grid-template-columns:190px minmax(0,1fr); gap:clamp(18px,2.4vw,30px);
  align-items:start;}
.fgrp+.fgrp{margin-top:20px;}
.fgrp>b{display:block; font:800 11.5px/1 var(--data); text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); margin-bottom:8px;}
.facet{display:grid; gap:4px;}
.facet button{appearance:none; cursor:pointer; font:800 13.5px/1.2 var(--sans);
  text-align:left; background:var(--sheet); border:2.5px solid var(--ink);
  border-radius:6px; padding:8px 10px; color:var(--ink);
  display:flex; align-items:center; gap:9px; width:100%;}
.facet button .ct{margin-left:auto; font:700 11.5px/1 var(--data); color:var(--muted);}
.facet button:hover{background:#EFEBE1;}
.facet button[aria-pressed="true"]{background:var(--amber);}
.facet button[aria-pressed="true"] .ct{color:var(--ink);}
.cat{border:3px solid var(--ink); border-radius:10px; overflow:hidden;
  background:var(--sheet);}
.cat li{display:grid; grid-template-columns:minmax(0,1fr) auto auto auto;
  gap:8px 18px; align-items:center; padding:14px 16px;
  border-bottom:2px solid var(--rowline);}
.cat li:last-child{border-bottom:0;}
.cat li[hidden]{display:none;}
.cat h4{font-size:16px; display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin-bottom:3px;}
.cat p{font-size:13.6px; color:var(--muted); line-height:1.45;}
.kind{font:800 10px/1 var(--data); text-transform:uppercase; letter-spacing:.06em;
  border:2px solid var(--ink); border-radius:3px; padding:3px 5px; background:var(--cream);}
.fresh{display:inline-flex; align-items:center; gap:6px; font:700 12px/1 var(--data);
  color:var(--muted); white-space:nowrap;}
/* A neutral marker, NOT a status light. It was --good on eleven rows and
   --amber on one, directly above a note saying freshness is the published
   cadence and not a live status — a green/amber LED is the one thing a reader
   reads as health. Identical on every row, it can only be a bullet. */
.fresh::before{content:""; width:8px; height:8px; border-radius:50%;
  border:1.5px solid var(--ink); background:var(--ink);}
.price{font:800 13px/1 var(--data); white-space:nowrap; color:var(--ink);}
.cat .empty{display:block; padding:26px 16px; text-align:center; color:var(--muted);
  font-size:15px;}
.cat .empty[hidden]{display:none;}
/* A facet that would return nothing stays clickable — the empty state is an
   honest answer — but it should not look as available as one that would not. */
.facet button.zero{opacity:.5;}
.mkt-count{font:700 12.5px/1 var(--data); color:var(--muted); margin-bottom:11px;}
.mkt-count b{color:var(--ink);}

/* ── five, or one ─────────────────────────────────────────────────────────
   Two panels rather than one strip that resolves. The first version merged the
   five cards into a single dim pile, which meant the argument only existed
   WHILE the transition ran — and the settled frame is what almost everyone
   sees. The five stay five now; they tidy into a fanned deck instead.

   Then is flat on the cream with a warm hairline and no shadow. Now is white
   with the 3px ink edge and the hard offset shadow every healthy object on this
   site wears. Both panels are labelled, so the weight difference is never the
   only thing carrying the meaning.

   Scatter and settle are both TRANSFORMS — animating top/left would relayout
   every frame; transform and opacity are the two properties that do not. */
/* No max-width: every other section on this page runs the full 1100px content
   column, and capping these two at 880 and 820 left them looking like something
   had failed to load. Reading measure is held by the elements inside instead. */
.becomes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.4vw,28px); align-items:stretch;}
.becomes .pane{border:3px solid var(--ink); border-radius:12px;
  padding:clamp(16px,2vw,24px); display:flex; flex-direction:column;}
/* Both panels keep the full 3px ink edge, so neither looks half-finished. The
   contrast is RAISED vs RECESSED: Now sits above the page on its hard shadow,
   Then is pressed into a tint one shade below the cream. Against transparent
   the Then panel was the page ground with a faint outline, which read as
   "not styled yet" instead of "the worse option". */
.becomes .then{background:var(--tint); box-shadow:inset 3px 3px 0 0 rgba(22,24,28,.07);}
.becomes .now{background:var(--sheet); box-shadow:6px 6px 0 0 var(--ink);}
.becomes .pane > b{display:block; font:800 11.5px/1 var(--data); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink);}
.becomes .art{position:relative; height:208px; margin:14px 0 18px;}

.becomes .frag{position:absolute; width:260px; background:var(--sheet);
  border:3px solid var(--ink); border-radius:7px; box-shadow:4px 4px 0 0 var(--ink);
  padding:13px 14px;
  transition:transform .7s cubic-bezier(.3,.7,.3,1);}
.becomes .frag i{display:block; height:6px; background:var(--rowline);
  border-radius:2px; margin-bottom:6px;}
.becomes .frag i:nth-child(2){width:88%;}
.becomes .frag i:nth-child(3){width:64%; margin-bottom:0;}
.becomes .frag:nth-child(1){top:0;     left:6px;   transform:rotate(-5deg);}
.becomes .frag:nth-child(2){top:34px;  left:130px; transform:rotate(4deg);}
.becomes .frag:nth-child(3){top:70px;  left:22px;  transform:rotate(-3deg);}
.becomes .frag:nth-child(4){top:102px; left:118px; transform:rotate(6deg);}
.becomes .frag:nth-child(5){top:132px; left:44px;  transform:rotate(-4deg);}

/* settled: a fanned deck on one diagonal, still countable as five */
/* every card lands on the same 65px centre line, stepped 20px right each time,
   so the settled deck is 276px wide and still countable as five */
.becomes.go .frag:nth-child(1){transform:translate(-6px,51px)  rotate(0deg);}
.becomes.go .frag:nth-child(2){transform:translate(-92px,27px) rotate(0deg);}
.becomes.go .frag:nth-child(3){transform:translate(54px,1px)   rotate(0deg);}
.becomes.go .frag:nth-child(4){transform:translate(-4px,-21px) rotate(0deg);}
.becomes.go .frag:nth-child(5){transform:translate(108px,-41px) rotate(0deg);}
.becomes.go .frag:nth-child(2){transition-delay:.05s;}
.becomes.go .frag:nth-child(3){transition-delay:.1s;}
.becomes.go .frag:nth-child(4){transition-delay:.15s;}
.becomes.go .frag:nth-child(5){transition-delay:.2s;}

.becomes .one{position:absolute; top:44px; left:0; right:auto; width:min(100%,448px); background:var(--sheet);
  border:3px solid var(--ink); border-radius:9px; box-shadow:6px 6px 0 0 var(--ink);
  overflow:hidden; opacity:0; transform:scale(.92);
  transition:opacity .4s ease .5s, transform .5s cubic-bezier(.3,1.3,.5,1) .5s;}
.becomes.go .one{opacity:1; transform:scale(1);}
/* The card is a Jump Line row rebuilt in the site's own CSS, not a screenshot
   and not an abstraction. Then stays abstract on purpose: five interchangeable
   scripts against one named, monitored thing is a second axis of contrast. */
.becomes .one .bar{display:flex; align-items:center; justify-content:space-between;
  gap:10px; background:var(--amber); border-bottom:3px solid var(--ink);
  padding:8px 12px; font:800 10.5px/1 var(--data); letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink);}
.becomes .one .bar .tick{font-weight:600; opacity:.72;}
.becomes .one .body{padding:12px;}
.becomes .one .nm{font:800 15px/1.25 var(--sans); color:var(--ink);}
.becomes .one .meta{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:7px;
  font:700 11.5px/1 var(--data);}
/* --good is 5.1:1 on the sheet, and the state is spelled out beside it, so the
   colour is never the only thing saying the run finished. */
.becomes .one .st{color:var(--good);}
.becomes .one .cad{color:var(--muted);}
.becomes .one .rules{margin-top:12px;}
.becomes .one .rules i{display:block; height:6px; background:var(--rowline);
  border-radius:2px; margin-bottom:6px;}
.becomes .one .rules i:nth-child(2){width:64%; margin-bottom:0;}

.becomes ul{margin-top:0;}
.becomes li{font-size:14.5px; line-height:1.5; color:var(--ink-2);
  padding-left:16px; position:relative; margin-bottom:9px;}
.becomes li::before{content:''; position:absolute; left:0; top:.62em;
  width:7px; height:7px; background:var(--ink);}
.becomes .then li::before{background:var(--muted);}
.becomes li:last-child{margin-bottom:0;}

/* The deck is fixed geometry — a 260px card fanned 152px across needs about
   410px of pane. Two columns stop providing that below 1000px, where the pane
   falls to 367px and the pile spilled out of its own panel. MEASURED: 106% of
   the pane at 900px and 125% at 768px, neither of which shows up in a desktop
   screenshot. So the collapse moved from 720 to 1000 rather than the cards
   shrinking back. */
@media (max-width:1000px){
  .becomes{grid-template-columns:minmax(0,1fr);}
}
/* One column is wide enough to keep all five until the phone. Below 560 the
   pane is ~300px: five 260px cards overlapping is a smear, so it drops to
   three on a tighter fan. */
@media (max-width:560px){
  .becomes .art{height:176px;}
  .becomes .frag{width:min(200px,62%);}
  .becomes .frag:nth-child(n+4){display:none;}
  /* The REST scatter is what spills on a phone, not the settled fan — a card
     pinned at left:130px is already past a 301px art box before anything
     animates. Percentages here so the pile scales with the pane. */
  .becomes .frag:nth-child(1){left:2%;}
  .becomes .frag:nth-child(2){left:36%;}
  .becomes .frag:nth-child(3){left:8%;}
  .becomes.go .frag:nth-child(1){transform:translate(-6px,44px) rotate(0deg);}
  .becomes.go .frag:nth-child(2){transform:translate(-104px,20px) rotate(0deg);}
  .becomes.go .frag:nth-child(3){transform:translate(14px,-2px) rotate(0deg);}
}

/* ── the spec plate ───────────────────────────────────────────────────────
   One object, not a journey. The previous version numbered these rows and hung
   "Your job" and "The source" off the ends, which asserts that a request passes
   through them in order — and it does not: Hosting is a fact about who operates
   the box, Engines and Browsers are alternatives rather than consecutive steps,
   Getting through only happens when something blocks. What IS true of all nine
   is that they sit inside the machine ADUMU runs, so the amber bar names the
   container and the rows are simply its contents. Two of them (Isolation, Your
   people) then say the answer differs between a lane and a machine of your own,
   which is why the bar names the machine rather than an instance.

   The bar matches the Jump Line card in the section above it, on purpose: both
   are "a real thing ADUMU runs", and they should look related. */
.spec{border:3px solid var(--ink); border-radius:12px; background:var(--sheet);
  box-shadow:6px 6px 0 0 var(--ink); overflow:hidden;}
.spec-bar{background:var(--amber); border-bottom:3px solid var(--ink);
  padding:12px 20px; font:800 11.5px/1 var(--data); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink);}
.spec-rows{margin:0;}
.spec-rows > div{display:grid; grid-template-columns:190px minmax(0,1fr);
  gap:0 24px; padding:15px 20px; border-bottom:2px solid var(--rowline);}
.spec-rows dt{font:800 16px/1.5 var(--sans); color:var(--ink);}
/* the column stays wide, the sentence keeps a readable measure */
.spec-rows dd{margin:0; font-size:14.5px; line-height:1.5; color:var(--ink-2);
  max-width:72ch;}
.spec-foot{padding:15px 20px; background:var(--tint); border-top:3px solid var(--ink);
  font-size:14.5px; line-height:1.5; color:var(--ink-2);}

@media (max-width:680px){
  /* Two columns become one: a 190px term against a 120px description is four
     words a line. */
  .spec-rows > div{grid-template-columns:minmax(0,1fr); gap:5px;}
  .spec-bar,.spec-rows > div,.spec-foot{padding-inline:16px;}
}

/* ── the pricing hero bandwidth tile ──────────────────────────────────────
   The Deck's Calls & Bandwidth tile. Two figures, both real: 170 GB measured on
   ADUMU's own production gateway, and 0 invoiced. NO SERIES IS DRAWN — every
   point on one would be invented, on the page whose two amounts read "not set"
   because inventing them is forbidden. The empty track carries the argument. */
.bwcard{border:3px solid var(--ink); border-radius:12px; background:var(--sheet);
  box-shadow:6px 6px 0 0 var(--ink); overflow:hidden;}
.bwcard .bar{display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--amber); border-bottom:3px solid var(--ink); padding:10px 16px;
  font:800 10.5px/1 var(--data); letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink);}
.bwcard .bar .tick{font-weight:600; opacity:.72;}
.bwcard .body{padding:18px;}
.bwcard .lbl{font:800 10px/1 var(--data); letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin-bottom:9px;}
.bwcard .lbl + .row{margin-bottom:20px;}
.bwcard .row{display:flex; align-items:center; gap:14px;}
.bwcard .track{position:relative; display:block; flex:1 1 auto; height:38px;
  border:3px solid var(--ink); border-radius:7px; background:var(--tint); overflow:hidden;}
.bwcard .row b{flex:0 0 auto; width:76px; text-align:right; font:800 15px/1 var(--data);
  color:var(--ink);}
/* the fill is the only moving thing on the page: one pass, on load, because the
   tile is above the fold and has nothing to reveal on scroll */
.bwcard .fill{position:absolute; left:0; top:0; bottom:0; width:0;
  background:var(--amber); border-right:3px solid var(--ink);
  transition:width 1.1s cubic-bezier(.25,.8,.3,1) .25s;}
.bwcard.go .fill{width:88%;}
.bwcard.go .row:nth-of-type(2) .fill{width:82%; transition-delay:.4s;}
.bwcard .track.empty{background:repeating-linear-gradient(135deg,
  var(--tint) 0 7px, var(--sheet) 7px 14px);}
.bwcard .row:last-of-type b{color:var(--muted);}
.bwcard .pnote{margin-top:16px; padding-top:13px; border-top:3px solid var(--ink);
  font-size:13px; line-height:1.45; color:var(--muted);}

@media (prefers-reduced-motion:reduce){
  .bwcard .fill{transition:none; width:88%;}
}

/* ── the marketplace hero card ────────────────────────────────────────────
   The hero was text in a narrow measure with two-thirds of the band empty. This
   is one published item drawn as the console row it is, sharing its bar with
   index's Jump Line card on purpose — both are a real thing ADUMU runs. */
.head .hgrid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px); align-items:center;}
/* .hgrid h1 and .head h1 tie on specificity and .hgrid wins on source order,
   which would push this headline from 54px to 58px in a column that just got
   narrower. Pin it back. */
.head .hgrid h1{font-size:clamp(30px,3.4vw,46px); max-width:none;}
.head .hgrid .lede{font-size:16.5px; max-width:42ch;}

.itemcard{border:3px solid var(--ink); border-radius:12px; background:var(--sheet);
  box-shadow:6px 6px 0 0 var(--ink); overflow:hidden;}
.itemcard .bar{display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--amber); border-bottom:3px solid var(--ink); padding:10px 16px;
  font:800 10.5px/1 var(--data); letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink);}
.itemcard .bar .tick{font-weight:600; opacity:.72;}
.itemcard .body{padding:18px;}
.itemcard h3{font-size:18px; display:flex; align-items:center; gap:9px; flex-wrap:wrap;}
.itemcard .body > p{font-size:14px; color:var(--muted); margin-top:5px;}
.itemcard dl{margin:16px 0 0; border-top:2px solid var(--rowline);}
.itemcard dl > div{display:grid; grid-template-columns:92px minmax(0,1fr); gap:0 14px;
  padding:9px 0; border-bottom:2px solid var(--rowline);}
.itemcard dt{font:700 12px/1.4 var(--data); color:var(--muted); text-transform:uppercase;
  letter-spacing:.06em;}
.itemcard dd{margin:0; font-size:14px; color:var(--ink-2);}

/* ── the two kinds ────────────────────────────────────────────────────────
   Was a five-row table, which forced a dash into the one cell where the two
   kinds are not parallel. As panels each kind says what it is on its own terms.
   BOTH are white with the hard shadow: unlike Then/Now these are equals, and
   recessing one would say a Feed is the lesser buy. */
.kinds{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.4vw,28px); align-items:stretch;}
.kind-pane{border:3px solid var(--ink); border-radius:12px; background:var(--sheet);
  box-shadow:6px 6px 0 0 var(--ink); padding:clamp(18px,2.2vw,26px);}
.kind-h{font:800 clamp(22px,2.4vw,30px)/1.1 var(--sans); color:var(--ink);
  letter-spacing:-.03em;}
.kind-sub{margin-top:6px; font:800 11.5px/1 var(--data); letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted);}
.kind-pane ul{margin-top:18px;}
.kind-pane li{font-size:14.5px; line-height:1.5; color:var(--ink-2);
  padding-left:16px; position:relative; margin-bottom:11px;}
.kind-pane li::before{content:''; position:absolute; left:0; top:.62em;
  width:7px; height:7px; background:var(--ink);}
.kind-pane li:last-child{margin-bottom:0;}

@media (max-width:860px){
  .head .hgrid{grid-template-columns:minmax(0,1fr);}
  .kinds{grid-template-columns:minmax(0,1fr);}
}

/* ── pricing ── */
.tiers{border:3px solid var(--ink); border-radius:12px; overflow:hidden;
  background:var(--sheet); box-shadow:6px 6px 0 0 var(--ink);}
.draft{display:flex; align-items:baseline; gap:10px 14px; flex-wrap:wrap;
  padding:12px 18px; background:var(--amber); border-bottom:3px solid var(--ink);
  font-size:13.5px; color:var(--ink);}
.draft b{text-transform:uppercase; font:800 11.5px/1 var(--data); letter-spacing:.06em;}
.tiers li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 20px;
  align-items:baseline; padding:18px; border-bottom:2px solid var(--rowline);}
.tiers li:last-child{border-bottom:0;}
.tiers h4{font-size:17px;}
.tiers li>div p{margin-top:5px; font-size:14px; color:var(--muted); max-width:64ch;}
.amt{font:800 27px/1 var(--sans); letter-spacing:-.03em; color:var(--ink);
  white-space:nowrap; font-variant-numeric:tabular-nums; text-align:right;}
.amt small{display:block; margin-top:6px; font:700 12px/1 var(--data);
  color:var(--muted); letter-spacing:.02em;}

/* ── footer ── */
.foot{background:var(--ink); color:#C3BFB3; border-top:3px solid var(--ink);
  padding:clamp(34px,4.4vw,56px) 0 26px; margin-top:clamp(30px,4vw,56px);}
/* .foot-cols is the same thing under the name the three generated pages emit.
   It had no rule at all, so security, build-vs-buy and vs-metered were stacking
   their footer columns instead of laying them out. Aliased rather than renamed
   in three generators, and named here so the next page picks either and works. */
.foot-grid,.foot-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:28px clamp(20px,3vw,44px); padding-bottom:28px;}
.foot h4{color:var(--sheet); font:800 12.5px/1 var(--data); text-transform:uppercase;
  letter-spacing:.08em; margin-bottom:12px;}
.foot li{line-height:2;}
.foot a{color:#C3BFB3; text-decoration:none; font-size:14.5px; font-weight:650;}
.foot a:hover{color:var(--amber); text-decoration:underline;}
.foot p{font-size:14px; line-height:1.6;}
.foot-end{display:flex; flex-wrap:wrap; gap:8px 24px; padding-top:20px;
  border-top:2px solid #3A3F46; font-size:13px; color:#9A968C;}
.foot-end .wordmark{color:var(--sheet); font-size:22px; margin-right:auto;}
.foot-end .wordmark small{color:#9A968C; font-size:11px;}
.foot :where(a,button):focus-visible{outline-color:var(--amber);}

/* ── motion ─────────────────────────────────────────────────────────────
   Everything that moves is opt-in on scroll and cancelled entirely under
   prefers-reduced-motion, where the finished state renders immediately. */
.rise{opacity:0; transform:translateY(10px);
  transition:opacity .5s ease, transform .5s ease;}
.rise.in{opacity:1; transform:none;}
.rollup{font-variant-numeric:tabular-nums;}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1; transform:none; transition:none;}
  .caret{animation:none;}
  .tile{transition:none;}
}

/* ── highlighted display type ──────────────────────────────────────────────
   A flat amber block behind the words, ink on top. Amber because the brief
   gives it four jobs and HIGHLIGHT is one of them — orange acts, and the one
   orange thing in this view is the button underneath, which a coloured word
   above it would compete with. Ink on amber measures 9.53.

   THE BLOCK IS DRAWN, NOT PAINTED AS A BACKGROUND. A background fills the
   font's em box, which at display sizes is far taller than the letters: on the
   hero it ran 22px into the line above, and loosening line-height to 1.12 still
   left 14px while costing 30px of hero height. So the block is a ::before sized
   in em against the type, tuned to sit between the cap height and the baseline.

   No z-index anywhere: the ::before is positioned and the text is wrapped in a
   positioned span that comes after it, so paint order alone puts the words on
   top. A negative z-index would work until something up the tree became a
   stacking context, and then it would vanish behind the page.

   FLUSH LEFT, BLEEDING RIGHT. The left edge was inset by -.07em for symmetry,
   which hung the block 4px outside the heading's own left margin — and a
   heading's left edge is the spine every other element on the page lines up
   against. The right keeps its bleed so the block does not clip the last glyph.

   The vertical gap is deliberate too: two stacked highlights that touch read as
   one slab with a step cut out of it, rather than as two marks. */
mark.hl{background:none; color:var(--ink); position:relative;}
mark.hl::before{content:''; position:absolute; left:0; right:-.08em;
  top:.22em; bottom:.1em; background:var(--amber); border-radius:3px;}
/* display:inline is not redundant, and the extra element in the selector is not
   decoration. `.hgrid h1 span{display:block}` puts one sentence per line in the
   hero and matches this wrapper too — which threw "fight back" onto its own
   line and collapsed the block to a vertical bar. At equal specificity that
   rule wins on source order, since it appears later in this file, so this one
   has to outrank it rather than merely disagree with it. */
h1 mark.hl > span{position:relative; display:inline;}

/* The asterisk on a figure. Muted so it does not compete with the number, but a
   real link to the note rather than decoration — an unexplained mark beside a
   claim is worse than no mark. */
.ast{text-decoration:none; color:var(--muted); font-weight:800; padding-left:2px;}
.ast:hover{color:var(--ink);}

/* ── numbered steps ───────────────────────────────────────────────────────
   A sequence, where a table would say "matrix". The numeral is the mark, so it
   takes the amber and nothing else on the row competes with it. Lives here
   rather than in a page's own <style> because two pages use it, and a class
   copied between files arrives without the rule that made it work. */
.steps{counter-reset:s; display:grid; gap:14px; margin:0; padding:0;}
.steps li{list-style:none; display:grid; grid-template-columns:44px minmax(0,1fr); gap:16px;
  align-items:start;}
.steps li::before{counter-increment:s; content:counter(s); display:flex; align-items:center;
  justify-content:center; width:44px; height:44px; background:var(--amber);
  border:3px solid var(--ink); border-radius:8px; font:800 19px/1 var(--sans); color:var(--ink);}
.steps h3{font:800 18px/1.25 var(--sans); color:var(--ink); margin:9px 0 5px;}
.steps p{font:400 15px/1.55 var(--sans); color:var(--muted); max-width:62ch;}

/* ── expandable notes ─────────────────────────────────────────────────────
   The same move as the mockups': a long cell keeps its first sentence and the
   rest goes behind a disclosure. Sized down inside a table, where it sits under
   a line of a row rather than under a panel.

   The affordance is a text control, not a button: a filled button in a table
   cell would compete with the row's own content, and §6 allows one action per
   view. Ink on the sheet with the amber it navigates with on hover. */
.more{display:block; margin-top:6px;}
.more > summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center;
  gap:6px; font:800 10.5px/1 var(--sans); letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); padding:2px 0;}
.more > summary::-webkit-details-marker{display:none;}
.more > summary::marker{content:'';}
.more > summary:hover{color:var(--ink);}
.more > summary:focus-visible{outline:3px solid var(--orange); outline-offset:2px;}
.more > summary .mv{width:6px; height:6px; flex:0 0 auto; margin-bottom:1px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(-45deg);}
.more[open] > summary .mv{transform:rotate(45deg); margin-bottom:3px;}
.more .mb{display:block; margin-top:6px; padding-left:11px;
  border-left:2px solid var(--rowline);}

/* ── responsive ── */
@media (max-width:920px){
  .dcards,.cards{grid-template-columns:minmax(0,1fr);}
}
/* THE NAV COLLAPSES AT 980px, WHICH IS WHERE IT MEASURES AS NOT FITTING.
   The six uppercase items need 931px inside the pill and the pill stops
   offering that at a 970px viewport. Two faults met here: .navmob had no
   display rule anywhere in this sheet, so the Menu button never appeared at
   any width and jump.js's toggle was unreachable; and the collapse rule below
   fired at 900, so between 901 and 970 the bar wrapped to two rows on its own.
   Uppercase runs about 15% wider than sentence case, which is why the
   breakpoint inherited from the old bar was too low. */
@media (max-width:980px){
  .navmob{display:block; margin-left:auto;}
  .navmob[aria-expanded="true"]{background:var(--panel); color:var(--sheet);}
  .tnav{display:none; width:100%; margin-left:0;}
  .tnav.open{display:flex; flex-direction:column; align-items:stretch; gap:6px;
    margin-top:12px; padding-top:12px; border-top:2px solid var(--warmline);}
  .tnav.open a{padding:11px 12px;}
  .tnav.open .btn{justify-content:center; margin-top:4px;}
}
@media (max-width:900px){
  .navpill .inner{gap:10px;}
  .dcards,.cards{grid-template-columns:minmax(0,1fr);}
  .figs ul{grid-template-columns:repeat(2,minmax(0,1fr));}
  .figs li:nth-child(2n){border-right:0;}
  .figs li:nth-child(-n+2){border-bottom:3px solid var(--ink);}
  .mkt{grid-template-columns:minmax(0,1fr);}
  .cat li{grid-template-columns:minmax(0,1fr); justify-items:start;}
}
@media (max-width:620px){
  .btn-xl{font-size:16px; padding:14px 20px;}
  .tiers li{grid-template-columns:minmax(0,1fr);}
  .amt{text-align:left;}
}

/* ── the Designer agent conversation ─────────────────────────────────────
   The front page. Rebuilt from the components the console ships, so it stays
   sharp, reflows, and can be read and copied like the rest of the page.
   Controls here are DRAWN, never live: the page contains no control that does
   nothing. Every frame says which it is. */
.agent{background:var(--sheet); border:3px solid var(--ink); border-radius:12px;
  box-shadow:6px 6px 0 0 var(--ink); overflow:hidden;}
.agent-bar{display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:3px solid var(--ink); background:var(--sheet);}
.agent-bar b{font-size:15px; font-weight:800;}
.agent-bar .right{margin-left:auto; font:700 10.5px/1 var(--data);
  text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
  border:2px solid var(--warmline); border-radius:4px; padding:5px 7px;}
/* The interior is the cream GROUND, not white. Previously the body was white and
   the Jump bubbles were white too, so a bubble was defined only by its outline and
   dissolved into the panel — the same fault the figures band had, one level down.
   Bubbles are white objects sitting on cream now, which is what every other block
   in this design does. */
/* Reserved, not grown. Measured settled heights: the chat lands at 507-524px
   between 960 and 1920, so 524 covers the tallest and the panel never resizes
   mid-run. Below 940 the hero stacks and the agent takes the full width, where
   bubbles wrap much more — reserving that much empty space before the animation
   starts would be worse than the shift, so the reservation is desktop-only. */
.agent-body{padding:clamp(14px,1.8vw,20px); background:#EAE5D9;}
@media (min-width:941px){ .agent-body{min-height:524px;} }
.chat{display:grid; gap:16px; align-content:start;}
.msg{display:grid; grid-template-columns:30px minmax(0,1fr); gap:11px;
  align-items:start;}
.av{width:30px; height:30px; border:2.5px solid var(--ink); border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--sheet);}
.av svg{width:16px; height:16px; fill:none; stroke:var(--ink); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;}
.av.jump{background:var(--amber);}
.msg .who{display:block; font:800 10.5px/1 var(--data); text-transform:uppercase;
  letter-spacing:.07em; color:var(--muted); margin-bottom:6px;}
.bubble{border:2.5px solid var(--ink); border-radius:8px; padding:12px 14px;
  font-size:14.5px; color:var(--ink-2); line-height:1.5; background:var(--sheet);
  box-shadow:3px 3px 0 0 var(--ink);}
/* the speaker is carried by the avatar, not by the bubble fill — a cream bubble
   on a cream ground was the thing that read as bleeding */
.msg.you .bubble{background:var(--sheet);}
.msg.soon .bubble{border-style:dashed; color:var(--muted);}
.msg.thinking .bubble{padding:14px;}
.bubble p+.facts,.bubble p+.qline{margin-top:11px;}
/* same correction as the figures strip: dividers are borders on the cells, so ink
   shows only between rows rather than as a slab behind them */
.facts{border:2.5px solid var(--ink); border-radius:6px; overflow:hidden;
  background:var(--sheet);}
.fact{display:flex; gap:14px; padding:8px 11px; font-size:13px;
  border-bottom:2px solid var(--rowline);}
.fact:last-child{border-bottom:0;}
.fact .k{color:var(--muted); flex:0 0 76px; font-weight:700;}
.fact .v{color:var(--ink); font-weight:800; min-width:0;}
.qline{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; font-size:13px;
  margin-top:11px;}
.qline .qa{color:var(--muted);}
.qline .ans{color:var(--ink); font-weight:800;}
.qline .chg{font:800 11.5px/1 var(--data); text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted); border-bottom:2px solid var(--warmline);}
.dots{display:inline-flex; gap:5px; align-items:center;}
.dots i{width:7px; height:7px; border-radius:50%; background:var(--muted);
  animation:bob 1s ease-in-out infinite;}
.dots i:nth-child(2){animation-delay:.15s;}
.dots i:nth-child(3){animation-delay:.3s;}
@keyframes bob{0%,60%,100%{opacity:.28; transform:translateY(0)}
  30%{opacity:1; transform:translateY(-3px)}}
.agent-foot{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 16px; border-top:3px solid var(--ink); background:var(--sheet);}
.chips{display:flex; gap:8px 16px; flex-wrap:wrap; font:700 12px/1 var(--data);}
.chips .ok{color:var(--good);} .chips .no{color:var(--warn);}
.replay{margin-left:auto; background:var(--sheet); border:2.5px solid var(--ink);
  border-radius:6px; font:800 12.5px/1 var(--sans); padding:9px 13px; cursor:pointer;
  color:var(--ink); box-shadow:3px 3px 0 0 var(--ink); text-transform:uppercase;}
.replay:active{transform:translate(2px,2px); box-shadow:1px 1px 0 0 var(--ink);}
.simnote{margin-top:12px; font-size:12.5px; color:var(--muted); max-width:74ch;}

/* Band rows split the table into its two real halves: the five shared lanes
   ascend on capacity, the three below ascend on isolation and then on rights.
   Same visual weight would read as one ladder and invite "same thing, more
   money" — the per-1,000 column rises across the break and needs the boundary
   to explain itself. */
table.grid.rate tr.band td{background:var(--tint); border-bottom:3px solid var(--ink);
  border-top:3px solid var(--ink); font:800 11.5px/1 var(--data); letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink); padding:10px 14px;}
table.grid.rate .rowsub{display:block; margin-top:4px; font:400 12.5px/1.35 var(--sans);
  color:var(--muted); text-transform:none; letter-spacing:0;}

/* ── the rate card ────────────────────────────────────────────────────────
   `est.` is set apart because the number beside it is a PROJECTION — what the
   capacity carries, not what anyone has been measured using — and the honesty
   rules do not let a projection sit in the same face as a measured figure.
   It stays inside the .num cell so the digits above it still line up. */
table.grid.rate td{font-variant-numeric:tabular-nums;}
table.grid.rate .est{font:700 11px/1 var(--data); color:var(--muted);
  letter-spacing:.04em; text-transform:uppercase;}
/* Wider than .simnote and set in body ink, because these two paragraphs carry
   the two conditions on the table above them rather than a footnote about it. */
.ratefoot{margin-top:16px; font-size:15px; line-height:1.55; color:var(--ink-2);
  max-width:78ch;}
.ratefoot + .ratefoot{margin-top:10px;}

/* the delivered-rows panel, used by the docs simulation */
.out{margin-top:14px; border:2.5px solid var(--ink); border-radius:8px; overflow:hidden;}
.out-h{display:flex; align-items:center; gap:8px; background:var(--ink);
  color:var(--cream); font:800 11px/1 var(--data); text-transform:uppercase;
  letter-spacing:.06em; padding:9px 11px;}
.out-h .count{margin-left:auto; color:var(--amber);}
.out ul{min-height:130px;}  /* four rows, settled */
.out li{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px;
  padding:8px 11px; font:700 11.5px/1.3 var(--data); color:var(--ink-2);
  border-bottom:2px solid var(--rowline); opacity:0; transform:translateY(-4px);
  animation:rowin .3s ease forwards;}
.out li:last-child{border-bottom:0;}
.out li b{color:var(--ink);}
@keyframes rowin{to{opacity:1; transform:none}}
.status{font:800 12px/1 var(--data); text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted);}

/* the two-column workbench used on the docs page */
.bench-grid{display:grid; grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);
  gap:16px; align-items:start;}
.bench-grid h4{font-size:14.5px; font-weight:800; margin-bottom:10px;}
.bench-grid h4 .right{float:right; font:700 10px/1 var(--data);
  text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
  border:2px solid var(--warmline); border-radius:4px; padding:4px 6px;}

@media (prefers-reduced-motion:reduce){
  .dots i{animation:none; opacity:.6;}
  .out li{animation:none; opacity:1; transform:none;}
}
@media (max-width:1100px){ .bench-grid{grid-template-columns:minmax(0,1fr);} }
@media (max-width:620px){ .fact{flex-direction:column; gap:2px;} .fact .k{flex:none;} }

/* ── the hero ────────────────────────────────────────────────────────────
   In the stylesheet rather than inline: an inline style cannot carry a media
   query, so a two-column hero declared inline would still be two columns on a
   phone. */
.hgrid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);
  gap:clamp(24px,3.2vw,44px); align-items:center;}
/* One sentence per line. Left to wrap on its own the break fell mid-thought —
   "One gateway. / Every source. Clean / web data." — so the three sentences did
   not line up with the three lines, which is what read as wrong. Each is its own
   block, so the structure holds at every width. */
.hgrid h1{font-size:clamp(32px,4.7vw,58px); line-height:1.0; letter-spacing:-.038em;}
.hgrid h1 span{display:block;}
/* The payoff line carries the highlight, and it is set smaller so the phrase
   fits on ONE line. At full size "We paved their road." needs 557px in a 484px
   column, which forced a break and left two stacked marks 266px and 278px wide:
   near-matching widths, both far shorter than the 95-99% of the column the two
   lines above fill, so the pair read as an accident rather than a device. One
   bar at 92-93% reads as the deliberate thing it is. MEASURED one line at every
   width from 320 to 1920 — a second line would put the step back, and worse,
   mark.hl::before would then draw a single box spanning both lines, which is
   the slab the .hl comment above says was rejected. */
.hgrid h1 .payoff{font-size:.82em;}
/* The deck was 16.5px at 34ch — the smallest and narrowest on the site, sitting
   directly under the largest heading, a 3.5x cliff with nothing between. .lede
   elsewhere is 17.5px at 60ch. And .kick was scoped to .head, so index (a .hgrid
   hero, not a .head one) was the only page with no eyebrow at all — pasting the
   class in without this selector rendered it as unstyled body text. */
.hgrid .kick{font:800 12.5px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:14px;}
.hgrid .hlede{margin-top:18px; font-size:18px; max-width:38ch; line-height:1.5;}
.hgrid .hacts{display:flex; flex-direction:row; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:28px; width:100%;}
.hgrid .hacts .btn{font-size:16.5px; padding:15px 24px; text-transform:uppercase;}
.textlink{font:800 15px/1.2 var(--sans); text-transform:uppercase; letter-spacing:.02em;
  color:var(--ink); text-decoration:none; border-bottom:3px solid var(--ink);
  padding-bottom:4px;}
.textlink:hover{border-bottom-color:var(--orange); color:var(--orange);}
.textlink::after{content:" \2192";}
@media (max-width:940px){
  .hgrid{grid-template-columns:minmax(0,1fr);}
  .hgrid .hlede{max-width:56ch;}
}

@media (max-width:620px){
  .figs ul{grid-template-columns:minmax(0,1fr);}
  .figs li{border-right:0; border-bottom:3px solid var(--ink);}
  .figs li:last-child{border-bottom:0;}
}
/* ── the simulation panel, brought in line with the agent ────────────────
   Same correction: the outer box is the GROUND and the things inside it are
   objects sitting on that ground with hard shadows. On a white interior the
   terminal and the results panel floated with nothing behind them. */
.simpanel{background:#EAE5D9;}
.simpanel .term{box-shadow:3px 3px 0 0 var(--ink);}
.simpanel .out{box-shadow:3px 3px 0 0 var(--ink); background:var(--sheet);}
.simpanel .flow{background:var(--sheet); border:2.5px solid var(--ink);
  border-radius:8px; box-shadow:3px 3px 0 0 var(--ink); padding:14px 12px;
  align-items:center;}
/* .simpanel .agent-foot needs no override any more: it took var(--cream) to
   restate what the base rule used to be, and the base is now sheet for both. */
/* ── the rate card on a phone ──────────────────────────────────────────────
   Seven columns need 830px. At 375 the .scroll wrapper showed three of them and
   cut the price mid-digit — a buyer saw Starter costing "$". A scroll wrapper is
   a fallback, not a mobile design, so below 700px the table stops being a table:
   each plan becomes a card, the two prices lead at full size, and the capacity
   figures fall in underneath as labelled rows. The labels come from data-l,
   which is why every numeric cell carries one. */
@media (max-width:700px){
  table.grid.rate,
  table.grid.rate tbody,
  table.grid.rate tr,
  table.grid.rate td{display:block; width:auto;}
  table.grid.rate thead{position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;}
  table.grid.rate tr{border-bottom:3px solid var(--ink); padding:2px 0 10px;}
  table.grid.rate tr:last-child{border-bottom:0;}
  table.grid.rate tr.band{padding:0;}
  table.grid.rate tr.band td{border-top:0;}
  table.grid.rate td{border:0; text-align:left; padding:5px 14px;}
  /* the plan name */
  table.grid.rate td:first-child{padding-top:14px; font-size:18px;}
  table.grid.rate td:first-child b{font-size:19px;}
  /* the two prices, side by side and large — the reason anyone opened the page */
  table.grid.rate td[data-l="Your addresses"],
  table.grid.rate td[data-l="Ours"]{display:inline-block; width:49%; padding-top:10px;
    font:800 26px/1 var(--sans); letter-spacing:-.02em; vertical-align:top;}
  table.grid.rate td[data-l="Your addresses"]::before,
  table.grid.rate td[data-l="Ours"]::before{content:attr(data-l); display:block;
    font:700 10.5px/1.4 var(--data); letter-spacing:.07em; text-transform:uppercase;
    color:var(--muted); margin-bottom:6px;}
  /* the rest, as quiet labelled rows */
  table.grid.rate td[data-l="Slots"],
  table.grid.rate td[data-l="HTTP"],
  table.grid.rate td[data-l="Requests a month"],
  table.grid.rate td[data-l="Per 1,000"]{display:flex; justify-content:space-between;
    gap:16px; font-size:14px; color:var(--ink-2); padding-top:3px; padding-bottom:3px;}
  table.grid.rate td[data-l]::before{content:attr(data-l); color:var(--muted);
    font-weight:650;}
  table.grid.rate td[data-l="Your addresses"]::before{content:"Your own addresses"; color:var(--muted);}
  table.grid.rate td[data-l="Ours"]::before{content:"On our addresses"; color:var(--muted);}
  table.grid.rate td[data-l="Slots"]::before{content:"Running at once";}
  table.grid.rate td[data-l="HTTP"]::before{content:"HTTP connections";}
  /* the wrapper has nothing left to scroll */
  .scroll:has(table.grid.rate){overflow-x:visible;}
}

/* ── the data-flow figure on a phone ───────────────────────────────────────
   .chart svg{min-width:640px} is right for a dense chart and wrong for a
   three-step flow: at 375 the third box of BOTH lanes sat off-screen with no
   visible scrollbar, and the caption's whole claim is a comparison of two
   COMPLETE lanes — which a mobile reader could not make. Two drawings, one
   wide and one stacked, swapped at 760. Below the swap the table view is
   redundant, because the stack already is the table. */
.chart svg.tall{display:none;}
@media (max-width:760px){
  .chart svg.wide{display:none;}
  .chart svg.tall{display:block; min-width:0;}
  #fig-flow .tableview{display:none;}
}

/* ── framed figures ────────────────────────────────────────────────────────
   The same treatment as .braid — an ink border and a hard offset shadow, with
   the mono caption outside the frame — but without the 760px minimum, because
   these are vector and stay legible all the way down. Used for the drawn
   figures that replace a paragraph doing a picture's job. */
.figbox{margin:0;}
.figbox .frame{display:block; line-height:0; background:var(--sheet);
  border:3px solid var(--ink); border-radius:12px; box-shadow:6px 6px 0 0 var(--ink);
  overflow:hidden;}
.figbox img{width:100%; height:auto;}
.figbox figcaption{margin-top:13px; font:800 12px/1.5 var(--data); letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint);}
@media (max-width:620px){
  .figbox figcaption{font-size:11px; letter-spacing:.09em;}
}

/* ── console panels, reconstructed ─────────────────────────────────────────
   These replace hand-drawn SVG diagrams with the components the product
   actually ships, the way the Designer panel on the front page already does.
   The Deck draws capacity as a SEMAPHORE GRID — one cell per slot, filled when
   held — and carries its own definition of a slot beside it. Redrawing that in
   the marketing palette says the same thing in the customer's eventual
   vocabulary instead of inventing a second one.

   The Deck's four-condition colours (teal / gold / orange / crimson) are its
   own semantic scale and do NOT come across: this site has amber and orange
   and they mean navigates and acts. Held is amber, free is the page ground. */
.panel{border:3px solid var(--ink); border-radius:12px; background:var(--sheet);
  box-shadow:6px 6px 0 0 var(--ink); overflow:hidden;}
.panel-bar{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 16px; background:var(--amber); border-bottom:3px solid var(--ink);
  font:800 12px/1 var(--data); letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink);}
.panel-bar .tick{font-weight:700; color:var(--ink-2); letter-spacing:.05em;}
.panel-body{padding:clamp(16px,2vw,22px);}
.panel-body > .lead{font-size:15px; color:var(--ink-2); max-width:62ch;}
.panel-body > .lead b{color:var(--ink);}
.panel-k{display:block; margin:18px 0 9px; font:800 11px/1 var(--data);
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted);}

/* the semaphore grid — one cell per slot */
.sem{display:grid; grid-template-columns:repeat(auto-fill,minmax(0,1fr)); gap:4px;
  border:2.5px solid var(--ink); background:var(--tint); padding:6px;}
.sem i{display:block; aspect-ratio:1; background:var(--sheet);
  border:1.5px solid var(--warmline);}
.sem i.on{background:var(--amber); border-color:var(--ink);}
/* the browser is not one of the eight — it is the other thing in the pair, so it
   is drawn as a different object rather than a ninth connection */
.sem i.br{background:var(--panel); border-color:var(--ink);}
.sem-read i.br{background:var(--panel);}
/* the reserve is hatched rather than coloured: it is not a state you can buy */
.sem i.rsv{background:repeating-linear-gradient(45deg,var(--rule) 0 3px,var(--sheet) 3px 7px);
  border-color:var(--warmline);}
.sem.n40{grid-template-columns:repeat(20,1fr);}
.sem.n50{grid-template-columns:repeat(25,1fr);}
@media (max-width:620px){
  .sem.n40{grid-template-columns:repeat(10,1fr);}
  .sem.n50{grid-template-columns:repeat(10,1fr);}
}
/* the readout under a grid */
.sem-read{display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:12px;}
.sem-read span{display:flex; align-items:center; gap:8px; font-size:13.5px;
  color:var(--ink-2);}
.sem-read i{width:13px; height:13px; flex:0 0 13px; border:2px solid var(--ink);
  background:var(--sheet);}
.sem-read i.on{background:var(--amber);}
.sem-read i.rsv{background:repeating-linear-gradient(45deg,var(--rule) 0 3px,var(--sheet) 3px 7px);
  border-color:var(--warmline);}
.sem-read b{color:var(--ink);}

/* the console's row list — a bordered stack of rows, mono identifier on the
   left, uppercase mono state on the right. The Deck's Lookup panel is the
   canonical instance; several figures on this site are that shape. */
.rows{display:grid; gap:0; border:2.5px solid var(--ink); background:var(--sheet);}
.rows > div{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 14px; border-bottom:2px solid var(--rowline);}
.rows > div:last-child{border-bottom:0;}
.rows .nm{font:800 14px/1.3 var(--sans); color:var(--ink);}
.rows .nm small{display:block; margin-top:3px; font:400 12.5px/1.35 var(--sans);
  color:var(--muted);}
.rows .stt{font:700 11px/1 var(--data); letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;}
.rows .stt.go{color:var(--good);}
.rows .stt.no{color:var(--warn);}
.rows .kindchip{display:inline-block; margin-left:9px; font:800 10px/1 var(--data);
  letter-spacing:.07em; text-transform:uppercase; border:2px solid var(--ink);
  border-radius:4px; padding:4px 6px; background:var(--sheet); color:var(--ink);
  vertical-align:2px;}
/* two panels side by side, for a this-versus-that figure */
.pair2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.2vw,26px);}
@media (max-width:760px){ .pair2{grid-template-columns:minmax(0,1fr);} }

/* the console's nav rail, reconstructed. The three ways in are not three
   products — they are three screens of one console, which is what the rail
   says and a row of cards cannot. */
.rail{display:grid; grid-template-columns:200px minmax(0,1fr); gap:0;
  border:2.5px solid var(--ink); background:var(--sheet);}
.rail-nav{border-right:2.5px solid var(--ink); background:var(--tint); padding:10px;}
.rail-nav a,.rail-nav span{display:block; padding:10px 12px; margin-bottom:4px;
  font:800 12.5px/1 var(--data); letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); border:2px solid transparent; border-radius:7px;
  text-decoration:none;}
.rail-nav a{color:var(--ink); background:var(--sheet); border-color:var(--ink);}
.rail-nav a:hover{background:var(--amber);}
.rail-body{padding:clamp(16px,2.2vw,24px); display:flex; flex-direction:column;
  justify-content:center;}
.rail-body b{display:block; font-size:clamp(18px,2vw,22px); color:var(--ink);
  letter-spacing:-.02em;}
.rail-body p{margin-top:10px; font-size:15px; color:var(--ink-2); max-width:52ch;}
@media (max-width:700px){
  .rail{grid-template-columns:minmax(0,1fr);}
  .rail-nav{border-right:0; border-bottom:2.5px solid var(--ink);
    display:flex; flex-wrap:wrap; gap:6px;}
  .rail-nav a,.rail-nav span{margin:0;}
}

/* the console's state vocabulary, borrowed for the hiring process. A state name
   sits left in mono uppercase like the Deck's job rows; the row that names a
   state we DO NOT have is tinted and struck, because its absence is the claim. */
.rows > div.divide{display:block; background:var(--tint); padding:9px 14px;
  font:800 11px/1.4 var(--data); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); border-bottom:2px solid var(--rowline);}
.rows .jst{flex:0 0 auto; min-width:152px; font:800 12.5px/1.35 var(--data);
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink);}
.rows .jst small{display:block; margin-top:4px; font:400 12.5px/1.4 var(--sans);
  letter-spacing:0; text-transform:none; color:var(--muted);}
.rows > div.stateful{align-items:flex-start;}
.rows > div.stateful .say{font-size:14px; color:var(--ink-2); text-align:right;}
.rows > div.gone{background:var(--tint);}
.rows > div.gone .jst{color:var(--muted);}
.rows > div.gone .jst b{text-decoration:line-through; text-decoration-thickness:2px;
  font-weight:inherit;}
.rows > div.gone .jst small{color:var(--ink-2);}
@media (max-width:620px){
  .rows > div.stateful{flex-direction:column; align-items:flex-start; gap:6px;}
  .rows > div.stateful .say{text-align:left;}
}

/* the price, in the hero. It was at 89% page depth — a buyer should not travel
   seven screens to learn the order of magnitude. */
.hgrid .heroprice{margin-top:18px; font-size:17px; color:var(--ink-2); max-width:44ch;}
.hgrid .heroprice b{color:var(--ink);}

/* the cloud hero's actions — a row, not the hero's stacked column, because this
   page's hero is single-column and a stacked pair reads as two false starts */
.cloudacts{display:flex; flex-wrap:wrap; align-items:center; gap:18px 24px; margin-top:26px;}
.ctanote{margin-top:14px; max-width:62ch; font-size:14.5px; line-height:1.5; color:var(--muted);}

/* b,strong is ink site-wide, which inside a terminal is ink on charcoal — 1.35:1,
   invisible. The sim never hit it because every bold string there sits in a
   coloured token span; the first bare <b> in a .term was the HTTP verb. */
.term pre b{color:#EDF1F5;}

/* ══════════════════════════════════════════════════════════════════════════
   SHARED NEO-BRUTALIST INTERACTIVE DESIGN UTILITIES
   ══════════════════════════════════════════════════════════════════════════ */
.hero-badge{display:inline-flex; align-items:center; gap:8px; background:var(--sheet);
  border:2.5px solid var(--ink); border-radius:30px; padding:6px 14px;
  font:800 11.5px/1 var(--data); text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink); box-shadow:3px 3px 0 0 var(--ink); margin-bottom:18px;}
.hero-badge .dot-live{width:8px; height:8px; border-radius:50%; background:#10b981;
  display:inline-block; box-shadow:0 0 6px #10b981;}

/* Dual-Mode Address Tier Switcher (BYOP vs Managed) */
.addr-toggle-wrap{display:flex; flex-direction:column; gap:8px; margin-bottom:18px;}
.addr-toggle{display:inline-flex; background:var(--tint); border:2.5px solid var(--ink);
  border-radius:8px; padding:4px; gap:4px; box-shadow:3px 3px 0 0 var(--ink);}
.addr-btn{background:transparent; border:2px solid transparent; border-radius:5px;
  padding:8px 14px; font:800 12px/1.2 var(--sans); text-transform:uppercase;
  letter-spacing:.04em; color:var(--ink-2); cursor:pointer; transition:all .14s ease;}
.addr-btn:hover{color:var(--ink); background:rgba(255,255,255,.5);}
.addr-btn.active{background:var(--amber); color:var(--ink); border-color:var(--ink);
  box-shadow:2px 2px 0 0 var(--ink);}

/* Interactive Terminal & Tabs */
.demo-tabs{display:flex; gap:6px; flex-wrap:wrap;}
.demo-tab{background:#3A424B; border:2px solid #16181C; border-radius:5px;
  color:var(--cream); font:800 11px/1 var(--data); padding:7px 12px; cursor:pointer;
  text-transform:uppercase; letter-spacing:.05em; transition:all .15s ease;}
.demo-tab:hover{background:#4E5763;}
.demo-tab.active{background:var(--amber); color:var(--ink); border-color:var(--ink);
  box-shadow:2px 2px 0 0 var(--ink);}

/* 3 Stealth Layers Grid */
.stealth-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:22px;}
.stealth-card{background:var(--sheet); border:3px solid var(--ink); border-radius:12px;
  box-shadow:6px 6px 0 0 var(--ink); padding:24px; display:flex; flex-direction:column;
  position:relative; transition:transform .15s ease, box-shadow .15s ease;}
.stealth-card:hover{transform:translate(-2px, -2px); box-shadow:8px 8px 0 0 var(--ink);}
.stealth-num{font:800 38px/1 var(--sans); color:var(--amber); letter-spacing:-.04em;
  margin-bottom:10px; display:block;}
.stealth-card h3{font-size:20px; line-height:1.2; margin-bottom:10px;}
.stealth-card p{font-size:14.5px; color:var(--muted); line-height:1.55; flex:1;}
.stealth-tag{margin-top:14px; font:800 11px/1 var(--data); text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink); background:var(--tint); padding:5px 8px;
  border:2px solid var(--ink); border-radius:4px; align-self:flex-start;}

/* Telemetry Metrics Strip */
.metrics-strip{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  border:3px solid var(--ink); border-radius:12px; box-shadow:6px 6px 0 0 var(--ink);
  background:var(--sheet); overflow:hidden; margin-top:32px;}
.metric-tile{padding:22px 20px; border-right:3px solid var(--ink);}
.metric-tile:last-child{border-right:0;}
.metric-tile b{display:block; font-size:clamp(28px, 3.2vw, 38px); font-weight:800;
  color:var(--ink); letter-spacing:-.03em; line-height:1;}
.metric-tile span{display:block; margin-top:8px; font-size:13.5px; color:var(--muted); line-height:1.4;}

/* Syntax Highlighting */
.hl-kw, .hl-key{color:#FF7B72; font-weight:700;}
.hl-str{color:#A5D6FF;}
.hl-num{color:#79C0FF;}
.hl-prop{color:#7EE787;}
.hl-fn{color:#D2A8FF;}
.hl-comm{color:#8B949E; font-style:italic;}

/* Fast ROI Calculator Box */
.calc-card {
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--sheet);
  box-shadow: 6px 6px 0 0 var(--ink);
  overflow: hidden;
}

.calc-card-head {
  padding: 16px 24px 0 24px;
  background: var(--amber);
  border-bottom: 3px solid var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.calc-card-head h3 {
  font: 800 clamp(18px, 2vw, 22px)/1.2 var(--sans);
  color: var(--ink);
  margin: 0 0 14px 0;
}

/* Physical Folder / Filing Tabs */
.calc-model-toggle {
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  margin-bottom: -3px;
  background: transparent;
  border: 0;
  padding: 0;
}
.calc-model-btn {
  font: 800 13px/1 var(--sans);
  color: var(--ink);
  background: #DEAA5C;
  border: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  border-radius: 8px 8px 0 0;
  padding: 9px 18px 7px;
  cursor: pointer;
  transition: all 0.15s ease;
  opacity: 0.88;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
}
.calc-model-btn:hover {
  opacity: 1;
  background: #E5B76F;
}
.calc-model-btn.active {
  background: #F1F3F5;
  border: 3px solid var(--ink);
  border-bottom: 3px solid #F1F3F5;
  color: var(--ink);
  font-weight: 800;
  opacity: 1;
  z-index: 4;
  padding: 12px 20px 8px;
  margin-top: -4px;
}

.calc-card-body {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
}
@media (max-width: 880px) {
  .calc-card-body {
    grid-template-columns: 1fr;
  }
}

.calc-pane-left {
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #FFFFFF;
}
.calc-pane-right {
  padding: 28px;
  background: #F1F3F5;
  border-left: 3px solid var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (max-width: 880px) {
  .calc-pane-right {
    border-left: 0;
    border-top: 3px solid var(--ink);
  }
}

.calc-field-lbl {
  font: 800 12px/1 var(--data);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 8px;
}

.calc-vol-display {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 20px;
}
.calc-vol-num {
  font: 800 clamp(32px, 4vw, 42px)/1 var(--sans);
  color: var(--orange);
  letter-spacing: -0.02em;
}
.calc-vol-unit {
  font: 700 14.5px/1.2 var(--sans);
  color: var(--muted);
}

.calc-slider-wrap {
  margin: 12px 0 24px;
}
.calc-slider {
  width: 100%;
  height: 10px;
  accent-color: var(--orange);
  cursor: pointer;
  margin: 0;
}
.calc-slider-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font: 700 11.5px/1 var(--data);
  color: var(--muted);
}

.calc-mode-explainer {
  background: #F1F3F5;
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: 2px 2px 0 0 var(--ink);
  font: 400 13.5px/1.5 var(--sans);
  color: var(--ink-2);
}
.calc-mode-explainer b {
  color: var(--ink);
  font-weight: 800;
}

.calc-plan-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}
.calc-plan-title {
  font: 800 clamp(22px, 2.5vw, 26px)/1.2 var(--sans);
  color: var(--ink);
  margin: 0;
}
.calc-plan-spec {
  font: 700 13px/1.3 var(--data);
  color: var(--muted);
  margin-bottom: 20px;
}

.calc-rates-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 16px 0;
  border-top: 2px solid var(--rowline);
  border-bottom: 2px solid var(--rowline);
  margin-bottom: 20px;
}
.calc-rate-tile span {
  display: block;
  font: 700 11px/1 var(--data);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 6px;
}
.calc-rate-tile b {
  display: block;
  font: 800 22px/1.2 var(--sans);
  color: var(--ink);
}
.calc-rate-tile b.comp {
  color: #DC2626;
}

.calc-savings-box {
  background: #D1FAE5;
  border: 2px solid #059669;
  border-radius: 8px;
  padding: 14px 16px;
  text-align: center;
  font: 800 15.5px/1.3 var(--sans);
  color: #065F46;
  box-shadow: 2px 2px 0 0 #059669;
}

@media (max-width:940px){
  .calc-grid{grid-template-columns:minmax(0, 1fr);}
  .stealth-grid{grid-template-columns:minmax(0, 1fr);}
  .metrics-strip{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .metric-tile:nth-child(2n){border-right:0;}
  .metric-tile:nth-child(-n+2){border-bottom:3px solid var(--ink);}
}
@media (max-width:560px){
  .metrics-strip{grid-template-columns:minmax(0, 1fr);}
  .metric-tile{border-right:0; border-bottom:3px solid var(--ink);}
  .metric-tile:last-child{border-bottom:0;}
}
/* Responsive Rate Card Table (Zero Desktop Overflow) */
table.grid.rate {
  width: 100% !important;
  table-layout: fixed !important;
  border: 3px solid var(--ink);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 6px 6px 0 0 var(--ink);
}

table.grid.rate th {
  white-space: normal !important;
  line-height: 1.2 !important;
  vertical-align: bottom !important;
  padding: 10px 8px !important;
  font-size: 11px !important;
  letter-spacing: .04em;
  text-align: left;
}

table.grid.rate th.num {
  text-align: right;
}

table.grid.rate td {
  padding: 10px 8px !important;
  font-size: 13px !important;
  vertical-align: middle !important;
  line-height: 1.35;
}

table.grid.rate .num {
  white-space: normal !important;
  font-size: 12.5px !important;
  font-family: var(--data);
  text-align: right;
}

table.grid.rate tr.band td {
  white-space: normal !important;
  font-size: 11px !important;
  letter-spacing: .08em;
  padding: 10px 12px !important;
}

/* ══════════ CONTACT & DEPLOYMENT SYSTEM ══════════ */
.contact-card {
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--sheet);
  box-shadow: 6px 6px 0 0 var(--ink);
  overflow: hidden;
  margin-top: 10px;
}

.contact-card-head {
  padding: 16px 24px 0 24px;
  background: var(--amber);
  border-bottom: 3px solid var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.contact-card-head h2 {
  font: 800 clamp(20px, 2.2vw, 24px)/1.2 var(--sans);
  color: var(--ink);
  margin: 0 0 14px 0;
}

.intent-toggle {
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  margin-bottom: -3px;
  background: transparent;
  border: 0;
  padding: 0;
}
.intent-btn {
  font: 800 13.5px/1.2 var(--sans);
  color: var(--ink);
  background: #DEAA5C;
  border: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  border-radius: 8px 8px 0 0;
  padding: 10px 18px 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
  opacity: 0.88;
}
.intent-btn:hover {
  opacity: 1;
  background: #E5B76F;
}
.intent-btn.active {
  background: #F1F3F5;
  border: 3px solid var(--ink);
  border-bottom: 3px solid #F1F3F5;
  color: var(--ink);
  font-weight: 800;
  opacity: 1;
  z-index: 4;
  padding: 13px 20px 9px;
  margin-top: -4px;
}
.intent-btn.active.purchase {
  background: #F1F3F5;
  border: 3px solid var(--ink);
  border-bottom: 3px solid #F1F3F5;
  color: #065F46;
  opacity: 1;
  z-index: 4;
  padding: 13px 20px 9px;
  margin-top: -4px;
}
.intent-btn.active.purchase span {
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.1));
}

/* In-Form Proxy Selection Cards */
.proxy-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
}
@media (max-width: 600px) {
  .proxy-card-grid {
    grid-template-columns: 1fr;
  }
}
.proxy-card {
  display: block;
  padding: 14px 16px;
  background: var(--sheet);
  border: 2px solid var(--rule);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  user-select: none;
}
.proxy-card:hover {
  border-color: var(--ink);
  background: #FFFFFF;
}
.proxy-card.active {
  border: 2.5px solid var(--ink);
  background: #FFFFFF;
  box-shadow: 3px 3px 0 0 var(--ink);
  transform: translate(-1px, -1px);
}
.proxy-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 800 13.5px/1.2 var(--sans);
  color: var(--ink);
  margin-bottom: 6px;
}
.proxy-radio-dot {
  width: 14px;
  height: 14px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #FFFFFF;
}
.proxy-card.active .proxy-radio-dot::after {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--orange);
  border-radius: 50%;
}
.proxy-card-desc {
  font: 500 12px/1.45 var(--sans);
  color: var(--muted);
  margin: 0;
}
.proxy-card.active .proxy-card-desc {
  color: var(--ink-2);
}

.contact-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
}
@media (max-width: 960px) {
  .contact-card-body {
    grid-template-columns: 1fr;
  }
}

.contact-pane-left {
  padding: clamp(20px, 3vw, 36px);
  border-right: 3px solid var(--ink);
}
@media (max-width: 960px) {
  .contact-pane-left {
    border-right: 0;
    border-bottom: 3px solid var(--ink);
  }
}

.contact-pane-right {
  padding: clamp(20px, 3vw, 36px);
  background: #F1F3F5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.form-sec {
  margin-bottom: 24px;
  padding-bottom: 22px;
  border-bottom: 2px solid var(--rowline);
}
.form-sec:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.form-sec-title {
  font: 800 13px/1 var(--data);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-sec-title span.num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 4px;
  font-size: 11px;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 580px) {
  .form-grid-2 {
    grid-template-columns: 1fr;
  }
}

.form-group {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}
.form-lbl {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font: 700 13.5px/1.3 var(--sans);
  color: var(--ink);
  margin-bottom: 7px;
  min-height: 18px;
}
.form-lbl span.lbl-main {
  font-weight: 700;
  color: var(--ink);
}
.form-lbl small, .form-lbl span.lbl-hint {
  font-weight: 500;
  color: var(--muted);
  font-size: 11.5px;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  height: 44px;
  padding: 10px 14px;
  font: 500 14px/1.4 var(--sans);
  color: var(--ink);
  background: var(--sheet);
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: 2px 2px 0 0 var(--ink);
  outline: none;
  transition: all 0.15s ease;
  box-sizing: border-box;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--orange);
  box-shadow: 3px 3px 0 0 var(--orange);
}
.form-textarea {
  height: auto;
  min-height: 110px;
  resize: vertical;
}

/* Topic Pills for Inquiry Mode */
.topic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}
@media (max-width: 600px) {
  .topic-grid {
    grid-template-columns: 1fr;
  }
}
.topic-card {
  padding: 12px 14px;
  background: var(--sheet);
  border: 2px solid var(--rule);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 13px/1.3 var(--sans);
  color: var(--ink);
  user-select: none;
}
.topic-card:hover {
  border-color: var(--ink);
  background: #FFF;
}
.topic-card.active {
  border: 2.5px solid var(--ink);
  background: #FFF;
  box-shadow: 3px 3px 0 0 var(--ink);
  color: var(--ink);
}
.topic-radio-dot {
  width: 14px;
  height: 14px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #FFFFFF;
}
.topic-card.active .topic-radio-dot::after {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--orange);
  border-radius: 50%;
}

/* Feed Selection Grid */
.feed-select-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
@media (max-width: 600px) {
  .feed-select-grid {
    grid-template-columns: 1fr;
  }
}
.feed-select-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background: var(--tint);
  border: 1.5px solid var(--rule);
  border-radius: 6px;
  cursor: pointer;
  font: 600 12.5px/1.3 var(--sans);
  color: var(--ink);
  transition: all 0.15s ease;
}
.feed-select-label:hover {
  background: #FFF;
  border-color: var(--ink);
}
.feed-select-label input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--orange);
  cursor: pointer;
}

/* Destination Pills */
.dest-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.dest-pill {
  padding: 8px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  background: var(--sheet);
  font: 700 12px/1 var(--sans);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s ease;
}
.dest-pill.active {
  background: var(--ink);
  color: var(--cream);
}

/* Right Summary Panel */
.summary-box {
  background: var(--sheet);
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  padding: 22px;
  box-shadow: 4px 4px 0 0 var(--ink);
  margin-bottom: 20px;
}
.summary-intent-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font: 800 11.5px/1 var(--data);
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1.5px solid var(--ink);
  margin-bottom: 12px;
}
.summary-intent-badge.purchase {
  background: #D1FAE5;
  color: #065F46;
  border-color: #059669;
}
.summary-intent-badge.inquiry {
  background: #FEF3C7;
  color: #92400E;
  border-color: #D97706;
}

.summary-tier-title {
  font: 800 22px/1.2 var(--sans);
  color: var(--ink);
  margin: 0 0 6px;
}
.summary-spec {
  font: 700 12.5px/1.3 var(--data);
  color: var(--muted);
  margin-bottom: 16px;
}
.summary-price-tag {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 0;
  border-top: 2px solid var(--rowline);
  border-bottom: 2px solid var(--rowline);
  margin-bottom: 16px;
}
.summary-price-num {
  font: 800 28px/1 var(--sans);
  color: var(--ink);
}
.summary-price-sub {
  font: 600 13px/1.2 var(--sans);
  color: var(--muted);
}

.summary-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.summary-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font: 500 13px/1.4 var(--sans);
  color: var(--ink-2);
  margin-bottom: 8px;
}
.summary-checklist li::before {
  content: "✓";
  color: #059669;
  font-weight: 800;
}

.submit-btn-wrap {
  margin-top: 10px;
}
.submit-btn {
  width: 100%;
  padding: 14px 20px;
  font: 800 16px/1.2 var(--sans);
  color: var(--cream);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 4px 4px 0 0 var(--orange);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.submit-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 0 var(--orange);
}
.submit-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--orange);
}

.submit-btn.purchase-style {
  background: #059669;
  border-color: var(--ink);
  box-shadow: 4px 4px 0 0 var(--ink);
}
.submit-btn.purchase-style:hover {
  background: #047857;
  box-shadow: 5px 5px 0 0 var(--ink);
}

/* Success Card */
.contact-success {
  display: none;
  padding: 36px 24px;
  text-align: center;
  background: #D1FAE5;
  border: 3px solid #059669;
  border-radius: 12px;
  box-shadow: 6px 6px 0 0 #059669;
  margin: 20px 0;
}
.contact-success h3 {
  font: 800 24px/1.2 var(--sans);
  color: #065F46;
  margin: 0 0 10px;
}
.contact-success p {
  font: 500 15px/1.5 var(--sans);
  color: #064E3B;
  max-width: 50ch;
  margin: 0 auto 18px;
}

/* ═══════════════════════════════════════════════════════════
   BEFORE VS AFTER ARCHITECTURE & PIPELINE VISUALIZER (DOCS)
   ═══════════════════════════════════════════════════════════ */
.arch-visualizer-card {
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--sheet);
  box-shadow: 8px 8px 0 0 var(--ink);
  overflow: hidden;
  margin-bottom: 36px;
}

.arch-card-head {
  background: var(--amber);
  border-bottom: 3px solid var(--ink);
  padding: 16px 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.arch-head-title-wrap {
  padding-bottom: 14px;
}
.arch-head-kicker {
  font: 800 11px/1 var(--data);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink);
  opacity: 0.85;
  margin-bottom: 4px;
}
.arch-card-head h3 {
  font: 800 clamp(18px, 2.2vw, 22px)/1.2 var(--sans);
  color: var(--ink);
  margin: 0;
}

.arch-mode-toggle {
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  margin-bottom: -3px;
  position: relative;
  z-index: 2;
}

.arch-tab-btn {
  background: #DEAA5C;
  border: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  border-radius: 8px 8px 0 0;
  color: var(--ink);
  font: 800 13px/1 var(--sans);
  padding: 10px 18px 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.9;
}
.arch-tab-btn:hover {
  background: #E5B76F;
  opacity: 1;
}
.arch-tab-btn.active {
  background: #F1F3F5;
  border: 3px solid var(--ink);
  border-bottom: 3px solid #F1F3F5;
  color: var(--ink);
  font-weight: 800;
  opacity: 1;
  z-index: 4;
  padding: 12px 20px 8px;
  margin-top: -4px;
}
.arch-tab-btn.active.after {
  color: #065F46;
}
.arch-tab-btn.active.before {
  color: #991B1B;
}

.arch-visualizer-body {
  background: #F1F3F5;
  padding: clamp(20px, 3vw, 32px);
}

.arch-view-pane {
  display: none;
}
.arch-view-pane.active {
  display: block;
}

/* Banner Indicator */
.arch-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 10px;
  border: 2.5px solid var(--ink);
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.arch-banner.after {
  background: #D1FAE5;
  border-color: #059669;
}
.arch-banner.before {
  background: #FEE2E2;
  border-color: #DC2626;
}
.arch-banner-title {
  font: 800 15px/1.3 var(--sans);
  display: flex;
  align-items: center;
  gap: 8px;
}
.arch-banner.after .arch-banner-title { color: #065F46; }
.arch-banner.before .arch-banner-title { color: #991B1B; }
.arch-banner-desc {
  font: 500 13px/1.45 var(--sans);
  color: var(--ink-2);
  margin: 0;
}

/* Pipeline Step Flow Grid */
.arch-pipeline-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
  position: relative;
}
@media (max-width: 980px) {
  .arch-pipeline-flow {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .arch-pipeline-flow {
    grid-template-columns: 1fr;
  }
}

.arch-step-card {
  background: #FFFFFF;
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  padding: 16px;
  box-shadow: 3px 3px 0 0 var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.arch-step-card.danger {
  border-color: #DC2626;
  background: #FFF5F5;
  box-shadow: 3px 3px 0 0 #DC2626;
}
.arch-step-card.success {
  border-color: #059669;
  background: #F0FDF4;
  box-shadow: 3px 3px 0 0 #059669;
}
.arch-step-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 800 11px/1 var(--data);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 10px;
  width: fit-content;
}
.arch-step-badge.fail {
  background: #FEE2E2;
  color: #B91C1C;
  border: 1.5px solid #F87171;
}
.arch-step-badge.pass {
  background: #D1FAE5;
  color: #065F46;
  border: 1.5px solid #34D399;
}
.arch-step-card h4 {
  font: 800 15px/1.3 var(--sans);
  color: var(--ink);
  margin: 0 0 8px;
}
.arch-step-card p {
  font: 400 12.5px/1.45 var(--sans);
  color: var(--ink-2);
  margin: 0 0 12px;
}
.arch-step-alert {
  padding: 8px 10px;
  border-radius: 6px;
  font: 700 11.5px/1.35 var(--data);
  margin-top: auto;
}
.arch-step-alert.warn {
  background: #FEF2F2;
  border: 1.5px solid #FCA5A5;
  color: #991B1B;
}
.arch-step-alert.ok {
  background: #ECFDF5;
  border: 1.5px solid #A7F3D0;
  color: #065F46;
}

/* Telemetry & Spec Strip */
.arch-telemetry-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 800px) {
  .arch-telemetry-row {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .arch-telemetry-row {
    grid-template-columns: 1fr;
  }
}

.arch-telemetry-tile {
  background: #FFFFFF;
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: 2px 2px 0 0 var(--ink);
}
.arch-telemetry-tile span {
  display: block;
  font: 800 11px/1 var(--data);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 6px;
}
.arch-telemetry-tile b {
  display: block;
  font: 800 clamp(18px, 2vw, 22px)/1.2 var(--sans);
  color: var(--ink);
}
.arch-telemetry-tile b.danger { color: #DC2626; }
.arch-telemetry-tile b.success { color: #059669; }

/* Interactive Code / Payload Comparison Box */
.arch-code-contrast {
  background: #12161A;
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  box-shadow: 4px 4px 0 0 var(--ink);
  overflow: hidden;
}
.arch-code-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1C2127;
  padding: 10px 16px;
  border-bottom: 2px solid #2B3138;
}
.arch-code-tag {
  font: 800 11px/1 var(--data);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.arch-code-tag.red { color: #F87171; }
.arch-code-tag.green { color: #34D399; }
.arch-code-body {
  padding: 16px 20px;
  font: 400 12.5px/1.55 var(--data);
  color: #E6EDF3;
  overflow-x: auto;
}
.arch-code-body pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* SDK Release & Specification Notice */
.sdk-release-note {
  margin-top: 22px;
  padding: 16px 20px;
  background: #F8FAFC;
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  box-shadow: 4px 4px 0 0 var(--ink);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.sdk-release-note-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.sdk-release-note-text {
  font: 400 13.5px/1.55 var(--sans);
  color: var(--ink-2);
  margin: 0;
}
.sdk-release-note-text b {
  color: var(--ink);
  font-weight: 700;
}

/* ── LEGAL & GOVERNANCE DOCUMENT SYSTEM ── */
.legal-pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.legal-pillar-card {
  border: 3px solid var(--ink);
  background: var(--sheet);
  box-shadow: 5px 5px 0 0 var(--ink);
  border-radius: 12px;
  padding: 22px 24px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.legal-pillar-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 0 var(--ink);
}
.legal-pillar-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.legal-pillar-icon {
  font-size: 24px;
  line-height: 1;
}
.legal-pillar-title {
  font: 800 16px/1.2 var(--sans);
  color: var(--ink);
}
.legal-pillar-desc {
  font: 400 14px/1.55 var(--sans);
  color: var(--ink-2);
  margin: 0;
}

.legal-layout {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 36px;
  align-items: start;
  margin-top: 36px;
}

.legal-sidebar {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.legal-toc-card {
  border: 3px solid var(--ink);
  background: var(--sheet);
  box-shadow: 6px 6px 0 0 var(--ink);
  border-radius: 12px;
  padding: 20px;
}
.legal-toc-title {
  font: 800 12px/1 var(--data);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
}
.legal-toc-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.legal-toc-link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  font: 700 13.5px/1.35 var(--sans);
  color: var(--ink-2);
  text-decoration: none;
  border: 2px solid transparent;
  transition: all 0.15s ease;
}
.legal-toc-link .toc-num {
  font: 800 11px/1 var(--data);
  color: var(--muted);
}
.legal-toc-link:hover {
  background: var(--tint);
  border-color: var(--ink);
  color: var(--ink);
}
.legal-toc-link.active {
  background: var(--amber);
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: 2px 2px 0 0 var(--ink);
}
.legal-toc-link.active .toc-num {
  color: var(--ink);
}

.legal-meta-card {
  border: 2.5px solid var(--ink);
  background: #F4EEDC;
  border-radius: 10px;
  padding: 16px 18px;
  font: 500 13px/1.5 var(--sans);
  color: var(--ink);
}
.legal-meta-item {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px dashed rgba(18,22,26,0.2);
}
.legal-meta-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.legal-meta-label {
  font: 700 11px/1 var(--data);
  text-transform: uppercase;
  color: #6C727A;
}
.legal-meta-val {
  font-weight: 700;
  text-align: right;
}

.legal-content {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.legal-sec-card {
  border: 3px solid var(--ink);
  background: var(--sheet);
  box-shadow: 6px 6px 0 0 var(--ink);
  border-radius: 12px;
  padding: clamp(24px, 3.5vw, 36px);
  scroll-margin-top: 100px;
}
.legal-sec-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid #E2E4E8;
}
.legal-sec-num {
  font: 800 12px/1 var(--data);
  background: var(--ink);
  color: var(--sheet);
  padding: 6px 9px;
  border-radius: 6px;
  letter-spacing: 0.05em;
}
.legal-sec-card h2 {
  font-size: clamp(20px, 2.2vw, 24px);
  margin: 0;
  color: var(--ink);
}
.legal-sec-card h3 {
  font-size: 16.5px;
  font-weight: 800;
  margin-top: 22px;
  margin-bottom: 8px;
  color: var(--ink);
}
.legal-sec-card p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  margin-top: 0;
  margin-bottom: 14px;
}
.legal-sec-card ul {
  margin: 10px 0 18px 22px;
  padding: 0;
}
.legal-sec-card li {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.legal-sec-card li b {
  color: var(--ink);
}

.legal-callout {
  border-left: 5px solid var(--amber);
  background: var(--tint);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin: 18px 0;
  border-top: 2px solid var(--ink);
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.legal-callout.emerald {
  border-left-color: #059669;
  background: #ECFDF5;
}
.legal-callout p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
}

.legal-table-wrap {
  margin: 20px 0;
  border: 2px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  text-align: left;
}
.legal-table th {
  background: var(--panel);
  color: var(--sheet);
  font: 800 12px/1 var(--data);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 12px 16px;
}
.legal-table td {
  padding: 12px 16px;
  border-top: 1px solid #E2E4E8;
  color: var(--ink-2);
  vertical-align: top;
  line-height: 1.5;
}
.legal-table tr:nth-child(even) td {
  background: #F9FAFB;
}

@media (max-width: 960px) {
  .legal-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .legal-sidebar {
    position: static;
  }
  .legal-toc-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 6px;
  }
}

/* ── SECURITY & COMPLIANCE STYLES ── */
.compliance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.compliance-card {
  border: 3px solid var(--ink);
  background: var(--sheet);
  box-shadow: 6px 6px 0 0 var(--ink);
  border-radius: 12px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.compliance-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 0 var(--ink);
}
.compliance-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.compliance-framework {
  font: 800 11px/1 var(--data);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.compliance-pill {
  font: 800 10px/1 var(--data);
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1.5px solid var(--ink);
  white-space: nowrap;
}
.compliance-pill.active {
  background: #D1FAE5;
  color: #065F46;
  border-color: #059669;
}
.compliance-pill.addressed {
  background: #E0E7FF;
  color: #3730A3;
  border-color: #6366F1;
}
.compliance-pill.provider {
  background: #CCFBF1;
  color: #115E59;
  border-color: #0D9488;
}
.compliance-pill.scope {
  background: #F3F4F6;
  color: #4B5563;
  border-color: #9CA3AF;
}
.compliance-status-title {
  font: 800 clamp(17px, 1.8vw, 20px)/1.2 var(--sans);
  color: var(--ink);
  margin: 0 0 8px;
}
.compliance-desc {
  font: 400 13.5px/1.55 var(--sans);
  color: var(--ink-2);
  margin: 0;
}

/* 6 Core Security Controls Grid */
.sec-controls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}
.sec-control-card {
  border: 3px solid var(--ink);
  background: var(--sheet);
  box-shadow: 5px 5px 0 0 var(--ink);
  border-radius: 12px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sec-control-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 0 var(--ink);
}
.sec-control-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.sec-control-icon-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sec-control-icon {
  font-size: 22px;
  line-height: 1;
}
.sec-control-title {
  font: 800 16px/1.2 var(--sans);
  color: var(--ink);
}
.sec-control-badge {
  font: 800 10.5px/1 var(--data);
  padding: 3px 7px;
  border-radius: 4px;
  background: #ECFDF5;
  color: #065F46;
  border: 1.5px solid #059669;
  letter-spacing: .05em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.sec-control-desc {
  font: 400 14px/1.6 var(--sans);
  color: var(--ink-2);
  margin: 0 0 14px;
}
.sec-control-meta {
  background: var(--tint);
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  padding: 8px 12px;
  font: 700 12px/1.4 var(--data);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ══════════════════════════════════════════════════════════════
   CODE BOX & SDK TAB SWITCHER (DOCS.HTML)
   ══════════════════════════════════════════════════════════════ */
.code-box {
  background: #14181D;
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 8px 8px 0 0 var(--ink);
  overflow: hidden;
  margin: 20px 0 28px;
}

.code-head {
  background: #1E242B;
  border-bottom: 3px solid var(--ink);
  padding: 10px 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.code-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-bottom: -3px;
  position: relative;
  z-index: 2;
}

.code-tabs::-webkit-scrollbar {
  display: none;
}

.code-tab {
  background: #2A323D;
  color: #9AA6B2;
  border: 2px solid var(--ink);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  font: 800 12px/1 var(--data);
  padding: 10px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.code-tab:hover {
  background: #36404D;
  color: #FBF9F4;
}

.code-tab.active {
  background: #14181D;
  color: var(--amber);
  border-color: var(--ink);
  border-bottom: 3px solid #14181D;
  margin-bottom: -3px;
  padding-bottom: 12px;
}

.code-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
}

.code-content {
  background: #14181D;
  padding: 24px;
  overflow-x: auto;
}

.code-content pre {
  margin: 0;
  font-family: var(--data);
  font-size: 13.5px;
  line-height: 1.65;
  color: #E2E8F0;
  white-space: pre-wrap;
  word-break: break-word;
  tab-size: 2;
}

/* Syntax Highlighting Tokens */
.hl-comm { color: #828E9B; font-style: italic; }
.hl-kw   { color: #8FD0F0; font-weight: 700; }
.hl-fn   { color: #E9B871; }
.hl-str  { color: #7FD4C1; }
.hl-prop { color: #FCD34D; }
.hl-attr { color: #F472B6; }