/* ─────────────────────────────────────────────────────────────────────────────
   9th Tier-3 property — visual layer.

   ⚠️⚠️ THIS FILE SHIPS. `finalize.sh` copies it into dist/ verbatim, so every word here is
   PUBLIC. The leak gate caught an earlier draft of this very comment naming an internal repo
   path — it matched a mirror's `brand_en` and would have tied this property to its operator
   from line 4 of its stylesheet. Cite rules by NAME here, never by repo path, and re-run the
   leak gate after editing any comment in this file.

   ── WHAT MUST BE DIFFERENT, AND WHAT MUST NOT ──────────────────────────────────────────
   The site-network launch checklist, §"Identity isolation", reads verbatim:
     "The fingerprint is the class vocabulary, the palette and the layout skeleton
      — NOT the reading metrics."
   So class names, colours and skeleton are unlike all eight siblings, while the TYPE SCALE is
   copied from them byte-for-byte. Letting the scale drift was measured to buy zero isolation
   and multiply the defect surface: four sibling sites ran h1 at 34 / 51 / 59 / 74px with h1:h2
   ratios from 1.06 (no hierarchy at all) to 2.00.

   SHARED SCALE — do not "improve" these:
     h1 36 / 1.30 · h2 25 / 1.40 · h3 19 · body 17 / 1.75 · rail 14 · related 16

   PALETTE — "shield dark + connected green". Every sibling is a LIGHT site; going dark is the
   cheapest unambiguous palette separation available, and it suits a security-adjacent product.

   CLASS VOCABULARY — surveying / bookbinding, checked against all eight siblings and colliding
   with none:  deck plinth beam assay cue rule gauge datum spool tally swatch beacon gloss runout
   (Taken elsewhere and therefore avoided: card grid hero btn nav cta faq foot intro panel rail
    slab tile masthead colophon kicker lead lede chapter qa shell tool topbar wrap …)

   ── ⛔ FOUR DEFECTS THAT BIT THE SIBLING SITES FOUR TIMES IN ONE BATCH ──────────────────
     1. A 4-side margin/padding SHORTHAND at equal specificity silently zeroes the axis a
        container rule owns. ⇒ `margin-block` / `padding-block` / `-inline` ONLY. There is not
        one 4-side shorthand in this file.
     2. Supplementing rather than REPLACING leaves the old declaration winning. ⇒ each box sets
        its axes once.
     3. `max-width` in `em` resolves against each element's OWN font-size — one 48-unit measure
        is 768px for a 17px paragraph and 1766px for a 36.8px h2, so the heading's cap never
        binds and the body sits inset ~182px inside its own heading. ⇒ every measure is `rem`.
     4. "No overflow" is not "the layout is right"; verify a measure at the width where the cap
        actually BINDS (here: ≥ 46rem viewport).

   ── ⚠️ NO WEBFONT, DELIBERATELY ────────────────────────────────────────────────────────
   The recommended pairing for Simplified Chinese is Noto Sans SC served from Google Fonts.
   This audience is inside mainland China, where that host is unreachable — a webfont link
   there is a render-blocking request that never resolves. System stack only.
   ───────────────────────────────────────────────────────────────────────────────────────── */

:root {
  --shield: #0f172a;        /* page ground */
  --shield-lift: #172033;   /* raised block */
  --shield-edge: rgba(255, 255, 255, .09);
  --ice: #ffffff;           /* primary text — 17.4:1 on --shield */
  --ice-dim: #a3b2c7;       /* secondary text — 8.2:1 on --shield, passes AA at body size */
  --live: #22c55e;          /* the single accent: "connected" */
  --live-deep: #16a34a;
  --live-wash: rgba(34, 197, 94, .10);
  --warn: #fbbf24;

  --t-h1: 36px;
  --t-h2: 25px;
  --t-h3: 19px;
  --t-body: 17px;
  --t-rule: 14px;
  --t-spool: 16px;

  --measure: 44rem;         /* rem, never em — defect 3 */
  --u: 8px;                 /* 8px rhythm */
  --ease: 200ms cubic-bezier(.2, .7, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--shield);
  color: var(--ice);
  font: var(--t-body)/1.75 -apple-system, BlinkMacSystemFont, "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--live); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--live-deep); }
/* Never remove the focus ring — replace it with a better one. */
:focus-visible { outline: 3px solid var(--live); outline-offset: 3px; border-radius: 3px; }

.deck { max-width: var(--measure); margin-inline: auto; padding-inline: calc(var(--u) * 2.5); }

/* ── plinth ─────────────────────────────────────────────────────────────────── */
.plinth {
  display: flex; flex-wrap: wrap; gap: var(--u);
  align-items: baseline; justify-content: space-between;
  border-block-end: 1px solid var(--shield-edge);
  padding-block: calc(var(--u) * 2.5);
  margin-block-end: calc(var(--u) * 5);
}
.plinth > a { color: var(--ice); text-decoration: none; font-weight: 700; font-size: var(--t-h3); letter-spacing: .04em; }
.plinth nav { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2); }
.plinth nav a { font-size: var(--t-rule); color: var(--ice-dim); text-decoration: none; padding-block: var(--u); }
.plinth nav a:hover, .plinth nav a[aria-current] { color: var(--live); }

/* ── beam: the hero. Headline, one line, one button. Nothing else. ──────────── */
.beam { padding-block-end: calc(var(--u) * 5); }
h1 { font-size: var(--t-h1); line-height: 1.30; font-weight: 700; margin-block: 0 calc(var(--u) * 2); letter-spacing: -.01em; }
.rule { font-size: var(--t-spool); line-height: 1.7; color: var(--ice-dim); margin-block: 0 calc(var(--u) * 3.5); }

/* ── beacon: the one primary action per page. ───────────────────────────────── */
.beacon {
  display: inline-flex; align-items: center; gap: var(--u);
  min-height: 48px;                      /* ≥44pt touch target */
  background: var(--live); color: #06210f;
  font-size: var(--t-spool); font-weight: 700; text-decoration: none;
  padding-block: calc(var(--u) * 1.5); padding-inline: calc(var(--u) * 3.5);
  border-radius: 6px; cursor: pointer;
  transition: background var(--ease), transform var(--ease);
}
.beacon:hover { background: #4ade80; color: #06210f; }
.beacon:active { transform: translateY(1px); }   /* transform only — no layout shift */
.beacon svg { width: 18px; height: 18px; flex: none; }
.cue { font-size: var(--t-rule); color: var(--ice-dim); margin-block: calc(var(--u) * 1.5) 0; }

/* ── assay: the trust row. Three blocks, no more. ───────────────────────────── */
.assay { display: grid; gap: calc(var(--u) * 1.5); grid-template-columns: repeat(3, 1fr); margin-block-end: calc(var(--u) * 6); }
.assay > div { background: var(--shield-lift); border: 1px solid var(--shield-edge); border-radius: 8px; padding-block: calc(var(--u) * 2); padding-inline: calc(var(--u) * 2); }
.assay b { display: block; font-size: var(--t-h3); color: var(--live); line-height: 1.3; font-variant-numeric: tabular-nums; }
.assay span { display: block; font-size: var(--t-rule); color: var(--ice-dim); margin-block-start: 4px; }

h2 { font-size: var(--t-h2); line-height: 1.40; font-weight: 700; margin-block: calc(var(--u) * 6) calc(var(--u) * 2); }
h3 { font-size: var(--t-h3); line-height: 1.45; font-weight: 700; margin-block: calc(var(--u) * 3) var(--u); }
p { margin-block: 0 calc(var(--u) * 2.5); }
ul, ol { margin-block: 0 calc(var(--u) * 2.5); padding-inline-start: calc(var(--u) * 3); }
li { margin-block-end: var(--u); }
b, strong { color: var(--ice); font-weight: 700; }

/* ── swatch: platform blocks. ───────────────────────────────────────────────── */
.swatch {
  background: var(--shield-lift); border: 1px solid var(--shield-edge);
  border-inline-start: 3px solid var(--live); border-radius: 8px;
  padding-block: calc(var(--u) * 2); padding-inline: calc(var(--u) * 2.5);
  margin-block-end: calc(var(--u) * 1.5);
}
.swatch h3 { margin-block-start: 0; }
.swatch p:last-child { margin-block-end: 0; }

/* ── gauge / datum: the numbers, stated plainly and placed AFTER the pitch. ─── */
.gauge { border: 1px solid var(--shield-edge); border-radius: 8px; overflow: hidden; margin-block-end: calc(var(--u) * 4); }
.datum { display: flex; flex-wrap: wrap; gap: var(--u); justify-content: space-between; align-items: baseline; background: var(--shield-lift); padding-block: calc(var(--u) * 1.75); padding-inline: calc(var(--u) * 2.5); }
.datum + .datum { border-block-start: 1px solid var(--shield-edge); }
.datum dt { font-size: var(--t-rule); color: var(--ice-dim); margin: 0; }
.datum dd { font-size: var(--t-spool); margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* ── gloss: a limit, stated in amber. Amber not red — these are bounds, not errors. */
.gloss { background: var(--live-wash); border-inline-start: 3px solid var(--warn); border-radius: 0 8px 8px 0; padding-block: calc(var(--u) * 2); padding-inline: calc(var(--u) * 2.5); font-size: var(--t-spool); margin-block-end: calc(var(--u) * 4); }
.gloss p:last-child { margin-block-end: 0; }

/* ── tally: FAQ. Real <details> so the FAQPage JSON-LD mirrors visible text. ── */
.tally details { border-block-end: 1px solid var(--shield-edge); }
.tally summary { cursor: pointer; font-weight: 700; font-size: var(--t-spool); padding-block: calc(var(--u) * 2); list-style: none; display: flex; justify-content: space-between; gap: var(--u); transition: color var(--ease); }
.tally summary::-webkit-details-marker { display: none; }
.tally summary::after { content: "+"; color: var(--live); font-weight: 400; flex: none; }
.tally details[open] summary { color: var(--live); }
.tally details[open] summary::after { content: "−"; }
.tally details p { color: var(--ice-dim); margin-block: 0 calc(var(--u) * 2); }

/* ── spool: read-next. ──────────────────────────────────────────────────────── */
.spool { font-size: var(--t-spool); margin-block-start: calc(var(--u) * 6); }
.spool ul { list-style: none; padding-inline-start: 0; }
.spool li { margin-block-end: calc(var(--u) * 1.5); color: var(--ice-dim); }

/* ── runout: the foot. The operator disclosure lives here and is NOT optional — an
      undisclosed network of sites pointing at one product is the doorway shape. ── */
.runout { border-block-start: 1px solid var(--shield-edge); margin-block-start: calc(var(--u) * 7); padding-block: calc(var(--u) * 3) calc(var(--u) * 6); font-size: var(--t-rule); color: var(--ice-dim); }
.runout p { margin-block-end: var(--u); }
.runout a { color: var(--ice-dim); }

@media (max-width: 46rem) {
  :root { --t-h1: 30px; --t-h2: 22px; }
  .assay { grid-template-columns: 1fr; }
  .datum dd { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}