/* =========================================================================
   TORHAUS.AI · landing page styles
   Brand Guide v1.0 · Torii Orange #F4691E · Umbra #2A2320 · Creme #F5F1EC
   Red Hat Display (brand face) · Red Hat Mono (machine voice)

   One stylesheet, shared byte-for-byte by the English page at / and the
   German page at /de/. Nothing here is language-aware: if a rule needs to
   know what language it is in, the markup is wrong.

   The recurring shape is the torii itself, taken apart:
     kasagi   the wide top beam that overhangs on both sides
     nuki     the narrower tie beam below it
     hashira  the two posts
   Cards, section rules and the hero all reuse those three parts, so the mark
   and the page are visibly the same drawing. The mark itself is never
   redrawn, rotated or gradiated (Brand Guide, section 06); only the page
   furniture borrows its geometry.
   ========================================================================= */

/* =========================================================================
   TOKENS
   Umbra is the brand's dark and it is warm: 42/35/32, never a neutral black.
   The page ground sits one step below it so that a card set in true Umbra
   lifts off the page without a shadow doing the work.
   ========================================================================= */
:root {
  --ground:    #1b1613;
  --surface:   #221c19;
  --umbra:     #2a2320;   /* brand Umbra, the raised plane */
  --umbra-2:   #342b26;

  --orange:    #f4691e;   /* Torii Orange, the only signal colour on the page */
  --orange-lo: #c2410c;   /* Rost, for orange that has to carry small text */
  --orange-hi: #ff8746;

  --creme:     #f5f1ec;   /* brand Creme, never pure white */
  --creme-dim: #c8bcb2;
  --creme-mut: #9a8d84;
  --creme-far: #6f645d;

  /* EU blue and gold appear only inside the flag glyph and the hairline that
     accompanies it. They are quoted, not part of the palette. */
  --eu-blue:   #003399;
  --eu-gold:   #ffcc00;

  --ok:        #6fbf73;
  --warn:      #e8b23a;
  --stop:      #e2603f;

  --line:      #f5f1ec1a;
  --line-2:    #f5f1ec33;
  --glow:      #f4691e3d;

  --r-sm: 4px;
  --r:    8px;
  --r-lg: 14px;

  --font-display: 'Red Hat Display', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Red Hat Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ease: cubic-bezier(.2, .7, .3, 1);

  /* Set by the consent script so the page can scroll clear of the bar. */
  --consent-h: 0px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* The reset above zeroes margin on <dialog> too, and a dialog centres itself
   with the UA's `margin: auto`. Put it back rather than positioning by hand. */
dialog { margin: auto; }

/* Several elements below are given a display by a class and toggled with the
   hidden attribute from script. A class selector outranks the UA's
   [hidden] { display: none }, so without this the lead alert shows on open and
   the form never gives way to the thank-you panel. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ground);
  color: var(--creme);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  padding-bottom: var(--consent-h);
}

::selection { background: var(--orange); color: var(--umbra); }

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.2vw, 4.05rem); font-weight: 700; letter-spacing: -0.028em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.22rem; letter-spacing: -0.01em; }
h4 { font-size: 1rem; }

p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
strong, b { font-weight: 600; color: var(--creme); }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }

/* A grid or flex item's automatic minimum size is its min-content width, so a
   single long line inside the code panel drags its whole track wider than a
   phone. Every track child opts out; the boxes that actually hold wide content
   scroll inside themselves instead. */
.hero-grid > *, .split > *, .grid > *, .deliver > *, .strip-grid > *,
.footer-top > *, .actions3 > *, .eps > *, .flow > *, .auditrows > * {
  min-width: 0;
}
.console, .figure, .stages, .auditcard { min-width: 0; }
@media (max-width: 720px) { .wrap { padding: 0 20px; } }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--orange); color: var(--umbra);
  padding: 12px 20px; font-weight: 600; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }

/* =========================================================================
   THE GATE FURNITURE
   Three primitives lifted straight off the mark's 96-unit grid.
   ========================================================================= */

/* kasagi · the overhanging top beam. Sits on the top edge of a card and is
   wider than the corner radius on both sides, exactly as the real beam
   overhangs its posts. */
.kasagi {
  position: absolute;
  top: -1px; left: 14px; right: 14px; height: 2px;
  background: var(--orange);
  opacity: .55;
  transition: opacity .25s var(--ease), left .3s var(--ease), right .3s var(--ease);
  pointer-events: none;
}

/* kicker · the machine voice. The lozenge is the gate opening in miniature. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--creme-mut);
}
.kicker::before {
  content: "";
  flex: none;
  width: 13px; height: 11px;
  background: var(--orange);
  clip-path: polygon(0 0, 100% 0, 100% 26%, 76% 26%, 76% 100%, 55% 100%, 55% 26%, 45% 26%, 45% 100%, 24% 100%, 24% 26%, 0 26%);
}
.kicker.center { justify-content: center; }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s var(--ease), border-color .2s var(--ease),
              box-shadow .2s var(--ease), transform .2s var(--ease), color .2s;
}
.btn .arrow { transition: translate .2s var(--ease); }
.btn:hover .arrow { translate: 3px 0; }
.btn:active { translate: 0 1px; }

.btn-primary { background: var(--orange); color: var(--umbra); }
.btn-primary:hover { background: var(--orange-hi); box-shadow: 0 12px 34px -14px var(--glow); }

.btn-ghost { background: transparent; color: var(--creme); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--umbra); border-color: var(--creme-far); }

.btn-sm { padding: 9px 17px; font-size: 14.5px; }

/* =========================================================================
   NAV
   ========================================================================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.nav[data-scrolled="true"] { border-bottom-color: var(--line); }
.nav-inner { display: flex; align-items: center; gap: 26px; height: 76px; }
.nav-logo { height: 30px; width: auto; }
.nav-home { flex: none; display: block; }

.nav-links { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.nav-links .nl {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--creme-dim);
  position: relative;
  padding: 4px 0;
  white-space: nowrap;
  transition: color .18s;
}
.nav-links .nl::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--orange);
  transition: right .25s var(--ease);
}
.nav-links .nl:hover { color: var(--creme); }
.nav-links .nl:hover::after { right: 0; }

.nav-side { display: flex; align-items: center; gap: 14px; flex: none; }

/* Lives in the drawer only: on desktop the same button sits in .nav-side. */
.nav-menu-cta { display: none; }

/* EN | DE · a gate with two openings. The current language is the one the
   light is behind. */
.lang {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
}
.lang a {
  padding: 6px 10px;
  color: var(--creme-mut);
  transition: background .18s, color .18s;
}
.lang a + a { border-left: 1px solid var(--line-2); }
.lang a:hover { color: var(--creme); background: var(--umbra); }
.lang a[aria-current="true"] { background: var(--orange); color: var(--umbra); }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; color: var(--creme);
}
.nav-toggle .bars { position: relative; width: 20px; height: 13px; }
.nav-toggle .bars span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: translate .25s var(--ease), rotate .25s var(--ease), opacity .18s;
}
.nav-toggle .bars span:nth-child(1) { top: 0; }
.nav-toggle .bars span:nth-child(2) { top: 5.5px; }
.nav-toggle .bars span:nth-child(3) { top: 11px; }
.nav[data-menu-open="true"] .bars span:nth-child(1) { translate: 0 5.5px; rotate: 45deg; }
.nav[data-menu-open="true"] .bars span:nth-child(2) { opacity: 0; }
.nav[data-menu-open="true"] .bars span:nth-child(3) { translate: 0 -5.5px; rotate: -45deg; }

@media (max-width: 1000px) {
  .nav-toggle { display: inline-flex; order: 3; }
  .nav-side { margin-left: auto; order: 2; }
  .nav-links {
    order: 4;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0;
    background: var(--surface);
    border-block: 1px solid var(--line);
    padding: 6px 28px 18px;
    display: none;
  }
  .nav[data-menu-open="true"] .nav-links { display: flex; }
  .nav-links .nl { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .nav-links .nl::after { display: none; }
  .nav-links .nav-menu-cta { display: inline-flex; margin-top: 16px; }
}
@media (max-width: 520px) {
  .nav-side .btn { display: none; }
  .nav-inner { gap: 14px; }
}

/* =========================================================================
   SECTION SCAFFOLD
   ========================================================================= */
.band { padding: 104px 0; position: relative; }
.band.tight { padding: 76px 0; }
.band.raised { background: var(--surface); border-block: 1px solid var(--line); }
@media (max-width: 720px) { .band { padding: 72px 0; } }

.band-head { max-width: 700px; margin-bottom: 52px; }
.band-head.center { margin-inline: auto; text-align: center; }
.band-head h2 { margin: 16px 0 18px; }
.band-head p { color: var(--creme-dim); font-size: 1.06rem; }

.lede { color: var(--creme-dim); font-size: 1.06rem; }
.small { font-size: 14.5px; color: var(--creme-mut); }

/* =========================================================================
   HERO
   The headline stands in the gate opening: a torii is drawn behind the copy
   at low contrast, sized so the beam sits above the first line and the posts
   run down either side of the paragraph.
   ========================================================================= */
.hero { position: relative; padding: 84px 0 96px; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute; inset: -30% -10% auto -10%; height: 620px;
  background: radial-gradient(60% 70% at 50% 30%, #f4691e21, transparent 70%);
  pointer-events: none;
}
/* The seal is not used as hero wallpaper: cropped at the corner it stops
   reading as a gate and starts reading as loose rectangles. It gets one
   deliberate appearance instead, behind the closing call to action, where the
   copy is short enough to sit inside the opening. */

.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
@media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; gap: 52px; } }

.hero h1 { margin: 22px 0 24px; }
.hero h1 .gateword { position: relative; white-space: nowrap; color: var(--orange); }
.hero-sub { font-size: clamp(1.06rem, 1.6vw, 1.2rem); color: var(--creme-dim); max-width: 40ch; }
.hero-sub strong { color: var(--creme); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin: 34px 0 26px; }

.hero-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em;
  color: var(--creme-mut);
}
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta .tick { color: var(--orange); font-weight: 500; }

/* the terminal panel opposite the headline */
.console {
  background: var(--umbra);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  box-shadow: 0 34px 70px -40px #0009;
}
.console > .kasagi { left: 22px; right: 22px; opacity: .8; }
.console-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  background: #f5f1ec08;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em;
  color: var(--creme-mut);
}
.console-bar .seal { width: 13px; height: 13px; flex: none; }
.console-bar .grow { margin-left: auto; }
.console pre {
  margin: 0; padding: 20px 18px 22px;
  font-family: var(--font-mono); font-size: 12.9px; line-height: 1.72;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 420px) { .console pre { font-size: 11.8px; } }
.console code { white-space: pre; }
.c-cmt { color: var(--creme-far); }
.c-key { color: var(--orange); }
.c-str { color: #d8c9a0; }
.c-fn  { color: #9fc4d8; }
.c-ok  { color: var(--ok); }
.c-dim { color: var(--creme-mut); }

/* =========================================================================
   TRUST STRIP · the four load-bearing promises, stated once, in mono
   ========================================================================= */
.strip {
  border-block: 1px solid var(--line);
  background: var(--surface);
}
.strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
}
.strip-cell {
  background: var(--surface);
  padding: 26px 24px;
  display: flex; flex-direction: column; gap: 6px;
}
.strip-cell .n {
  font-family: var(--font-mono);
  font-size: clamp(1.35rem, 2.3vw, 1.7rem);
  font-weight: 500;
  color: var(--orange);
  letter-spacing: -.01em;
  line-height: 1.1;
}
.strip-cell .l { font-size: 13.5px; color: var(--creme-mut); line-height: 1.45; }
@media (max-width: 860px) { .strip-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .strip-cell { padding: 20px 18px; } }

/* =========================================================================
   CARDS
   ========================================================================= */
.grid { display: grid; gap: 20px; }
.grid.g3 { grid-template-columns: repeat(3, 1fr); }
.grid.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid.g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .grid.g3 { grid-template-columns: 1fr; } }
@media (max-width: 760px)  { .grid.g4 { grid-template-columns: 1fr; } }

.card {
  position: relative;
  background: var(--umbra);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 24px 24px;
  transition: border-color .25s var(--ease), background .25s var(--ease), translate .25s var(--ease);
}
.card:hover { border-color: var(--line-2); translate: 0 -2px; }
.card:hover > .kasagi { opacity: 1; left: 0; right: 0; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--creme-dim); font-size: 15.4px; }
.card .idx {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .16em; color: var(--creme-far);
  display: block; margin-bottom: 14px;
}

/* a bullet list that reads as a spec sheet rather than as prose */
.speclist { list-style: none; display: grid; gap: 11px; margin-top: 18px; }
/* Deliberately not a grid: an <li> here mixes <b>, <code> and bare text, and
   a grid container turns every text run between them into its own item. */
.speclist li {
  position: relative;
  padding-left: 21px;
  font-size: 14.8px; color: var(--creme-dim); line-height: 1.5;
}
.speclist li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 10px; height: 8px;
  background: var(--orange);
  clip-path: polygon(0 0, 100% 0, 100% 34%, 72% 34%, 72% 100%, 56% 100%, 56% 34%, 44% 34%, 44% 100%, 28% 100%, 28% 34%, 0 34%);
}
/* Inline code, everywhere except inside a <pre>, which scrolls instead.
   overflow-wrap: anywhere rather than break-word, because only the former
   lowers the element's min-content width, which is what keeps a long constant
   like GATEWAY_FX_SOURCE=none from widening the page on a 320px screen. */
:not(pre) > code, .speclist li .m {
  font-family: var(--font-mono); font-size: .9em;
  color: var(--creme); background: #f5f1ec12;
  padding: 1px 5px; border-radius: var(--r-sm);
  overflow-wrap: anywhere;
}

/* =========================================================================
   SPLIT · copy beside a figure
   ========================================================================= */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split.wide-right { grid-template-columns: .88fr 1.12fr; }
.split.wide-left  { grid-template-columns: 1.12fr .88fr; }
@media (max-width: 980px) {
  .split, .split.wide-right, .split.wide-left { grid-template-columns: 1fr; gap: 44px; }
  .split .figure { order: 2; }
}
.split h2 { margin: 16px 0 18px; }
.split > div > p { color: var(--creme-dim); }

/* =========================================================================
   EU MARKS
   The flag is drawn, not typed: an emoji renders as a beige rectangle on
   most of Windows, and this claim is too load-bearing to leave to a font.
   ========================================================================= */
.euflag { width: 21px; height: 14px; border-radius: 2px; flex: none; display: block; }
.euflag.lg { width: 30px; height: 20px; }

.eubadge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  background: #0033991f;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--creme-dim);
}

/* =========================================================================
   LATENCY STAGES · the gateway's own overhead, drawn honestly
   ========================================================================= */
.stages {
  background: var(--umbra);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 22px;
  position: relative;
}
.stagebar {
  display: flex; height: 30px; border-radius: var(--r-sm); overflow: hidden;
  background: #f5f1ec0d;
  margin: 18px 0 20px;
}
.stagebar span {
  display: block; height: 100%;
  border-right: 1px solid var(--umbra);
  transition: filter .2s;
}
.stagebar span:last-child { border-right: 0; }
.stagebar .s-gw { background: var(--orange); }
.stagebar .s-up { background: #f5f1ec1f; }

.stagekey { display: grid; gap: 9px; font-family: var(--font-mono); font-size: 12.4px; }
.stagekey div { display: grid; grid-template-columns: 11px 1fr auto; gap: 10px; align-items: center; color: var(--creme-mut); }
.stagekey .v { min-width: 0; overflow-wrap: anywhere; }
/* The raw column names are longer than a narrow phone can hold beside their
   label, so below this they sit under it instead of squeezing it. */
@media (max-width: 560px) {
  .stagekey { gap: 12px; }
  .stagekey div { grid-template-columns: 11px 1fr; row-gap: 2px; align-items: start; }
  .stagekey .v { grid-column: 2; font-size: 11.4px; color: var(--creme-far); }
}
.stagekey i { width: 11px; height: 11px; border-radius: 2px; }
.stagekey b { color: var(--creme); font-weight: 500; }
.stagekey .v { color: var(--creme-dim); }
.stagekey .hi b, .stagekey .hi .v { color: var(--orange); }

/* =========================================================================
   AUDIT ROW · one request, as the gateway records it
   ========================================================================= */
.auditcard {
  background: var(--umbra);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
}
.auditcard .head {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  background: #f5f1ec08;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .07em;
  color: var(--creme-mut);
}
.auditcard .head .grow { margin-left: auto; }
.auditrows { font-family: var(--font-mono); font-size: 12.9px; }
.auditrows > div {
  display: grid; grid-template-columns: 168px 1fr; gap: 14px;
  padding: 9px 18px;
  border-bottom: 1px solid #f5f1ec0d;
}
.auditrows > div:last-child { border-bottom: 0; }
.auditrows dt, .auditrows .k { color: var(--creme-far); }
.auditrows dd, .auditrows .v { color: var(--creme-dim); margin: 0; overflow-wrap: anywhere; }
.auditrows .v b { color: var(--creme); font-weight: 500; }
.auditrows .v .on { color: var(--orange); }
.auditrows .v .ok { color: var(--ok); }
@media (max-width: 520px) {
  .auditrows > div { grid-template-columns: 1fr; gap: 2px; }
  .auditrows { font-size: 12.2px; }
}

/* =========================================================================
   GUARDRAIL CHIPS
   ========================================================================= */
.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.chip {
  font-family: var(--font-mono); font-size: 12.2px;
  padding: 6px 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--creme-dim);
  background: #f5f1ec08;
}

.actions3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
@media (max-width: 620px) { .actions3 { grid-template-columns: 1fr; } }
.action {
  border: 1px solid var(--line);
  border-left: 3px solid var(--c);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  background: var(--umbra);
}
.action .t { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--c); font-weight: 500; }
.action p { font-size: 14px; color: var(--creme-mut); margin-top: 5px; }
.action.stop { --c: var(--stop); }
.action.redact { --c: var(--warn); }
.action.warn { --c: var(--creme-mut); }

/* =========================================================================
   ROUTING FLOW
   ========================================================================= */
.flow {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 18px;
  align-items: start;
  font-family: var(--font-mono);
  font-size: 12.9px;
}
.flow .tier {
  display: flex; align-items: center; gap: 9px;
  color: var(--creme-far); letter-spacing: .08em; white-space: nowrap;
  padding-top: 11px;
}
.flow .targets { display: flex; flex-wrap: wrap; gap: 9px; }
.flow .target {
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  color: var(--creme-dim);
  background: var(--umbra);
  display: flex; align-items: center; gap: 9px;
}
.flow .target .w { color: var(--creme-far); }
.flow .target.live { border-color: #f4691e66; color: var(--creme); }
.flow .target.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; }
.flow .target.open { opacity: .55; text-decoration: line-through var(--stop); }
@media (max-width: 560px) {
  .flow { grid-template-columns: 1fr; gap: 4px; }
  .flow .tier { padding-top: 14px; }
  .flow .target { min-width: 0; }
}

/* =========================================================================
   DELIVERY MODELS
   ========================================================================= */
.deliver { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 940px) { .deliver { grid-template-columns: 1fr; } }
.model {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--umbra);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 24px 24px;
}
.model.featured { border-color: #f4691e5c; background: linear-gradient(180deg, #f4691e0f, transparent 46%), var(--umbra); }
.model .tag {
  position: absolute; top: -1px; right: 20px;
  background: var(--orange); color: var(--umbra);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 10px 5px; border-radius: 0 0 var(--r-sm) var(--r-sm);
}
.model .top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.model h3 { margin: 0; }
.model > p { color: var(--creme-dim); font-size: 15.2px; }
.model .speclist { margin-top: 18px; margin-bottom: 22px; }
.model .foot { margin-top: auto; }
.model .foot .btn { width: 100%; }

/* =========================================================================
   COMPATIBILITY ENDPOINT LIST
   ========================================================================= */
.eps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 22px; font-family: var(--font-mono); font-size: 13px; }
@media (max-width: 560px) { .eps { grid-template-columns: 1fr; } }
.eps div { display: flex; gap: 11px; align-items: baseline; color: var(--creme-dim); padding: 5px 0; border-bottom: 1px solid #f5f1ec0d; }
.eps .verb { color: var(--orange); width: 42px; flex: none; font-weight: 500; }

.logos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.logos span {
  font-family: var(--font-mono); font-size: 12.4px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 7px 12px; color: var(--creme-mut); background: var(--umbra);
}

/* =========================================================================
   FAQ
   ========================================================================= */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 20px 40px 20px 0;
  position: relative;
  font-size: 1.05rem; font-weight: 600;
  transition: color .18s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--orange); }
.faq summary::after {
  content: "";
  position: absolute; right: 6px; top: 50%; translate: 0 -50%;
  width: 11px; height: 11px;
  border-right: 2px solid var(--creme-mut); border-bottom: 2px solid var(--creme-mut);
  rotate: 45deg;
  transition: rotate .25s var(--ease), border-color .18s;
}
.faq details[open] summary::after { rotate: -135deg; border-color: var(--orange); }
.faq details p { color: var(--creme-dim); padding-bottom: 22px; max-width: 78ch; font-size: 15.6px; }
.faq details p + p { margin-top: 12px; }

/* =========================================================================
   CLOSING CTA · the whole gate, drawn once, at size
   ========================================================================= */
.cta {
  position: relative;
  text-align: center;
  padding: 76px 32px 72px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: radial-gradient(70% 120% at 50% 0%, #f4691e17, transparent 62%), var(--umbra);
  overflow: hidden;
}
.cta .kasagi { left: 30%; right: 30%; opacity: 1; height: 3px; }
.cta-seal {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: 560px; height: 560px;
  opacity: .055;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 620px) { .cta-seal { width: 400px; height: 400px; } }
.cta h2 { margin: 18px auto 16px; max-width: 18ch; }
.cta p { color: var(--creme-dim); max-width: 56ch; margin: 0 auto; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; margin-top: 30px; }
.cta-note { margin-top: 22px !important; font-family: var(--font-mono); font-size: 12.3px; color: var(--creme-far); }
@media (max-width: 620px) { .cta { padding: 56px 20px 52px; } }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer { border-top: 1px solid var(--line); background: var(--surface); padding: 62px 0 34px; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } }
.footer-brand .footer-logo { height: 27px; width: auto; margin-bottom: 16px; }
.footer-brand p { color: var(--creme-mut); font-size: 14.6px; max-width: 42ch; }
.fcol h4 {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--creme-far);
  margin-bottom: 15px;
}
.fcol a, .fcol button {
  display: block; font-size: 14.6px; color: var(--creme-dim);
  padding: 5px 0; transition: color .18s;
  background: none; border: 0; font-family: inherit; text-align: left; cursor: pointer;
}
.fcol a:hover, .fcol button:hover { color: var(--orange); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center;
  margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 13.6px; color: var(--creme-far);
}
.footer-bottom a { color: var(--creme-mut); }
.footer-bottom a:hover { color: var(--orange); }
.footer-bottom .made { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 8px; }

/* =========================================================================
   REVEAL · off only when the visitor asked for less motion, and gated on a
   .js class so a scripting-disabled visitor is never left with blank bands.
   ========================================================================= */
.js .reveal { opacity: 0; translate: 0 16px; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { transition: opacity .6s var(--ease), translate .6s var(--ease); }
}
.js .reveal.in { opacity: 1; translate: 0 0; }

/* =========================================================================
   ANALYTICS CONSENT BAR
   ========================================================================= */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: color-mix(in srgb, var(--umbra) 96%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-2);
  translate: 0 100%;
  transition: translate .35s var(--ease);
}
.consent.in { translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .consent { transition: none; } }
.consent-inner {
  display: flex; align-items: center; gap: 22px;
  padding-block: 15px;
}
.consent-text { font-size: 14.4px; color: var(--creme-dim); max-width: 82ch; }
.consent-text a { color: var(--orange); text-decoration: underline; text-underline-offset: 2px; }
.consent-actions { display: flex; gap: 10px; margin-left: auto; flex: none; }
.consent-actions .btn { padding: 10px 18px; font-size: 14.5px; }
@media (max-width: 820px) {
  .consent-inner { flex-direction: column; align-items: stretch; gap: 14px; }
  .consent-actions { margin-left: 0; }
  .consent-actions .btn { flex: 1; }
}
/* While a menu or the modal is open the bar would fight for the same corner. */
.nav[data-menu-open="true"] ~ .consent { display: none; }
body:has(dialog[open]) .consent { display: none; }

/* =========================================================================
   LEAD MODAL · native <dialog>, so the top layer, the focus trap, Esc and
   the backdrop are the browser's job rather than a library's.
   ========================================================================= */
.lead-modal {
  padding: 0; border: 0; background: transparent;
  max-width: min(640px, calc(100vw - 32px));
  width: 100%;
  max-height: calc(100dvh - 32px);
  color: var(--creme);
  overflow: visible;
}
.lead-modal::backdrop { background: #100c0ac2; backdrop-filter: blur(4px); }
.lead-panel {
  position: relative;
  background: var(--umbra);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  max-height: calc(100dvh - 32px);
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 40px 90px -40px #000c;
}
.lead-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--creme-mut); cursor: pointer;
  transition: color .18s, border-color .18s;
}
.lead-close:hover { color: var(--creme); border-color: var(--line-2); }
.lead-close svg { width: 17px; height: 17px; }

.lead-form { display: flex; flex-direction: column; min-height: 0; }
.lead-head { padding: 26px 26px 0; }
.lead-head h2 { font-size: 1.6rem; margin-top: 12px; }
.lead-body { padding: 18px 26px 22px; overflow-y: auto; min-height: 0; }
.lead-intro { color: var(--creme-dim); font-size: 15px; margin-bottom: 20px; }

.lead-alert {
  display: flex; gap: 11px; align-items: flex-start;
  border: 1px solid #e2603f66; background: #e2603f1a;
  border-radius: var(--r); padding: 12px 14px; margin-bottom: 18px;
  font-size: 14.4px; color: var(--creme-dim);
}
.lead-alert .bang {
  flex: none; width: 19px; height: 19px; border-radius: 50%;
  background: var(--stop); color: var(--umbra);
  font-size: 13px; font-weight: 700; line-height: 19px; text-align: center;
}
.lead-alert a { color: var(--orange); text-decoration: underline; }

.lead-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
@media (max-width: 560px) { .lead-fields { grid-template-columns: 1fr; } }
.lead-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lead-field.wide { grid-column: 1 / -1; }
.lead-field label { font-size: 13.4px; font-weight: 500; color: var(--creme-dim); }
.lead-field .opt { color: var(--creme-far); font-weight: 400; }

.lead-control {
  font-family: var(--font-display); font-size: 15.4px;
  color: var(--creme);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 11px 13px;
  width: 100%;
  transition: border-color .18s, background .18s;
  appearance: none;
}
.lead-control::placeholder { color: var(--creme-far); }
.lead-control:hover { border-color: var(--creme-far); }
.lead-control:focus { outline: 0; border-color: var(--orange); background: var(--ground); }
.lead-select { position: relative; display: block; }
.lead-select::after {
  content: ""; position: absolute; right: 14px; top: 50%; translate: 0 -70%;
  width: 8px; height: 8px; rotate: 45deg;
  border-right: 2px solid var(--creme-mut); border-bottom: 2px solid var(--creme-mut);
  pointer-events: none;
}
select.lead-control { padding-right: 34px; }
select.lead-control option { background: var(--umbra); color: var(--creme); }

/* Validation messages appear once the visitor has actually tried to submit,
   never while they are still typing the first character. */
.lead-msg { font-size: 12.8px; color: var(--stop); display: none; }
.is-validated .lead-control:invalid { border-color: var(--stop); }
.is-validated .lead-control:invalid ~ .lead-msg { display: block; }

/* Honeypot. Off-screen rather than display:none, which some bots skip. */
.lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lead-terms { font-size: 13.2px; color: var(--creme-mut); line-height: 1.55; }
.lead-terms a { color: var(--orange); text-decoration: underline; text-underline-offset: 2px; }

.lead-foot {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 26px 22px;
  border-top: 1px solid var(--line);
  background: #f5f1ec06;
}
.lead-submit { min-width: 200px; }
.lead-note {
  font-family: var(--font-mono); font-size: 11.8px; letter-spacing: .06em;
  color: var(--creme-far); margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
}
@media (max-width: 480px) {
  .lead-head, .lead-body, .lead-foot { padding-inline: 20px; }
  .lead-foot { flex-direction: column; align-items: stretch; }
  .lead-submit { width: 100%; }
  .lead-note { margin-left: 0; justify-content: center; }
}

.lead-spin {
  width: 15px; height: 15px; flex: none;
  border: 2px solid #2a232059; border-top-color: var(--umbra);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .lead-spin { animation-duration: 2.4s; } }

.lead-done { padding: 46px 30px 40px; text-align: center; }
.lead-done .tick {
  width: 54px; height: 54px; margin: 0 auto 20px;
  color: var(--orange);
}
.lead-done .tick svg { width: 100%; height: 100%; }
.lead-done h2 { font-size: 1.5rem; margin-bottom: 12px; }
.lead-done h2:focus { outline: none; }
.lead-done p { color: var(--creme-dim); font-size: 15.2px; max-width: 44ch; margin: 0 auto 26px; }
.lead-done .em { color: var(--creme); font-weight: 600; overflow-wrap: anywhere; }

/* =========================================================================
   PRINT · someone will send this to a procurement officer
   ========================================================================= */
@media print {
  .nav, .consent, .lead-modal, .cta-seal, .cta-actions, .hero-actions { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .band, .hero { padding: 24px 0; }
  .card, .model, .stages, .auditcard, .console { border-color: #ccc; background: #fff; }
  .js .reveal { opacity: 1; translate: none; }
}