/* ==========================================================================
   home.css — homepage, "the audit file" (2026-10-26)
   --------------------------------------------------------------------------
   Loaded only on / (index.php sets $PAGE_CSS). Every rule is scoped to .hx so
   nothing here can change another page. Builds on the global tokens in
   nx-pro.css (--bg, --ink, --accent …) and adds the homepage's own:

   Direction: the product's output, a security report, is the hero. A light
   "paper" sheet sits on the dark graphite site; sections are divided by
   hairline rules and typographic rhythm instead of stacks of cards. One
   accent (azure) marks actions and links; green, amber and red appear only
   as status. Numbers use tabular figures; evidence and references use mono.

   Contents
     1 Tokens            6 Finding → fix (band, tabs, code, verification)
     2 Base & type       7 Timeline, scope, plans, commitments
     3 Buttons, links,   8 Tools, FAQ accordion, closing section
       form              9 Reveal motion, reduced motion
     4 Hero              10 Breakpoints: 600 · 768 · 960 · 1200
     5 Report sheet
   ========================================================================== */

/* 1 · TOKENS ------------------------------------------------------------- */
.hx {
  /* surfaces (dark site) */
  --hx-bg: var(--bg, #0B0E14);
  --hx-band: var(--panel-2, #0F141D);
  --hx-raised: var(--panel, #131924);
  --hx-code-bg: #090C11;
  --hx-line: var(--line, #232C3A);
  --hx-line-soft: var(--line-soft, #1B2330);
  --hx-line-strong: var(--line-strong, #334054);
  --hx-line-input: var(--line-input, #5C6B85);

  /* text */
  --hx-ink: var(--ink, #E8ECF3);
  --hx-ink-2: var(--ink-2, #B3BECD);
  --hx-muted: var(--muted, #8B97A8);

  /* one accent */
  --hx-accent: var(--accent, #5AA9FF);
  --hx-accent-strong: var(--accent-strong, #2E6FE0);
  --hx-accent-hover: var(--accent-hover, #3D7FEC);

  /* status (only for status) */
  --hx-ok: var(--ok, #3FB950);
  --hx-warn: var(--warn, #E3A008);
  --hx-crit: var(--crit, #F0616D);
  --hx-high: var(--high, #F0883E);
  --hx-info: var(--info, #6CB6FF);

  /* paper (the report sheet) — contrast on #F5F6F8: ink 17:1, muted 7.4:1 */
  --hx-paper: #F5F6F8;
  --hx-paper-2: #E9EDF2;
  --hx-paper-ink: #0E1420;
  --hx-paper-muted: #475467;
  --hx-paper-line: #D9DEE5;

  /* type */
  --hx-sans: var(--sans, system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", sans-serif);
  --hx-mono: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  --hx-fs-display: clamp(2.125rem, 1.45rem + 2.5vw, 3.375rem);
  --hx-fs-h2: clamp(1.5rem, 1.22rem + 0.95vw, 2.125rem);
  --hx-fs-h3: 1.0625rem;
  --hx-fs-lede: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --hx-fs-body: 1rem;
  --hx-fs-small: 0.875rem;
  --hx-fs-label: 0.75rem;
  --hx-lh-body: 1.65;

  /* spacing scale (4-based) */
  --hx-1: 4px;  --hx-2: 8px;  --hx-3: 12px; --hx-4: 16px; --hx-5: 24px;
  --hx-6: 32px; --hx-7: 48px; --hx-8: 64px; --hx-9: 96px;
  --hx-section: clamp(56px, 2.25rem + 3.5vw, 96px);

  /* shape & motion */
  --hx-r-control: 8px;
  --hx-r-sheet: 10px;
  --hx-ease: cubic-bezier(.2, .7, .2, 1);
  --hx-fast: 160ms;
  --hx-med: 300ms;

  color: var(--hx-ink);
  font-family: var(--hx-sans);
  font-size: var(--hx-fs-body);
  line-height: var(--hx-lh-body);
}

/* 2 · BASE & TYPE -------------------------------------------------------- */
.hx *, .hx *::before, .hx *::after { box-sizing: border-box; }
.hx ol, .hx ul { margin: 0; padding: 0; list-style: none; }
.hx p { margin: 0; }
.hx dl, .hx dd { margin: 0; }
.hx h1, .hx h2, .hx h3, .hx h4 { margin: 0; color: var(--hx-ink); }

.hx .hx-eyebrow {
  font-family: var(--hx-mono);
  font-size: var(--hx-fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hx-accent);
  margin-bottom: var(--hx-4);
}
.hx .hx-display {
  font-size: var(--hx-fs-display);
  line-height: 1.06;
  font-weight: 650;
  letter-spacing: -0.024em;
  max-width: 16ch;
  text-wrap: balance;
}
.hx .hx-h2 {
  font-size: var(--hx-fs-h2);
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.016em;
  text-wrap: balance;
  max-width: 24ch;
}
.hx .hx-h2--small { font-size: 1.25rem; max-width: none; }
.hx .hx-h3 {
  font-size: var(--hx-fs-h3);
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.hx .hx-lede {
  font-size: var(--hx-fs-lede);
  color: var(--hx-ink-2);
  max-width: 54ch;
  margin-top: var(--hx-5);
}
.hx .hx-lead { color: var(--hx-ink-2); max-width: 60ch; }
.hx .hx-muted { color: var(--hx-muted); font-size: var(--hx-fs-small); max-width: 52ch; margin-top: var(--hx-2); }
.hx .hx-mono { font-family: var(--hx-mono); font-size: .92em; letter-spacing: 0; }
.hx .hx-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Japanese: no negative tracking, taller lines, phrase-aware wrapping. */
.hx:lang(ja) { --hx-lh-body: 1.85; }
.hx:lang(ja) .hx-display {
  font-size: clamp(1.875rem, 1.35rem + 2vw, 2.875rem);
  line-height: 1.3;
  letter-spacing: 0.01em;
  max-width: 18em;
  word-break: auto-phrase;
}
.hx:lang(ja) .hx-h2 { letter-spacing: 0.01em; line-height: 1.4; max-width: 22em; word-break: auto-phrase; }
.hx:lang(ja) .hx-h3 { letter-spacing: 0.01em; line-height: 1.5; }
.hx:lang(ja) .hx-eyebrow { letter-spacing: .08em; }
.hx:lang(ja) .hx-lede, .hx:lang(ja) .hx-lead { max-width: 38em; }

/* section rhythm: hairline rules, not boxes */
.hx .hx-section { padding-block: var(--hx-section); border-top: 1px solid var(--hx-line-soft); }
.hx .hx-head { margin-bottom: var(--hx-7); }
.hx .hx-head--split { display: grid; gap: var(--hx-4); }
.hx .hx-after { margin-top: var(--hx-6); }

/* 3 · BUTTONS, LINKS, FORM ---------------------------------------------- */
.hx .hx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--hx-2);
  min-height: 48px; padding: 0 var(--hx-5);
  border-radius: var(--hx-r-control); border: 1px solid transparent;
  font: 600 1rem/1.2 var(--hx-sans);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--hx-fast) var(--hx-ease), border-color var(--hx-fast) var(--hx-ease), color var(--hx-fast) var(--hx-ease), transform var(--hx-fast) var(--hx-ease);
}
.hx .hx-btn:active { transform: translateY(1px); }
.hx .hx-btn--primary { background: var(--hx-accent-strong); color: #fff; }
.hx .hx-btn--primary:hover { background: var(--hx-accent-hover); color: #fff; text-decoration: none; }
.hx .hx-btn--secondary { background: transparent; color: var(--hx-ink); border-color: var(--hx-line-strong); }
.hx .hx-btn--secondary:hover { background: rgba(255,255,255,.05); border-color: #6E7C96; text-decoration: none; }
.hx .hx-btn--tertiary { background: transparent; color: var(--hx-accent); padding-inline: var(--hx-3); }
.hx .hx-btn--tertiary:hover { background: rgba(90,169,255,.08); }
.hx .hx-btn--danger { background: transparent; color: var(--hx-crit); border-color: rgba(240,97,109,.55); }
.hx .hx-btn--danger:hover { background: rgba(240,97,109,.1); }
.hx .hx-btn[disabled], .hx .hx-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }

.hx .hx-link {
  color: var(--hx-accent); font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.hx .hx-link span { display: inline-block; margin-left: .35em; transition: transform var(--hx-fast) var(--hx-ease); }  /* flex drops the leading space */
.hx .hx-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.hx .hx-link:hover span { transform: translateX(3px); }

.hx a:focus-visible, .hx button:focus-visible, .hx summary:focus-visible, .hx input:focus-visible, .hx pre:focus-visible {
  outline: 2px solid var(--hx-accent); outline-offset: 3px; border-radius: 4px;
}

.hx .hx-scan { margin-top: var(--hx-6); max-width: 620px; }
.hx .hx-scan__label { display: block; font-size: var(--hx-fs-small); color: var(--hx-ink-2); margin-bottom: var(--hx-2); font-weight: 500; }
.hx .hx-scan__row { display: flex; flex-direction: column; gap: var(--hx-3); }
.hx .hx-scan__input {
  width: 100%; min-height: 52px; padding: 0 var(--hx-4);
  background: var(--hx-band); color: var(--hx-ink);
  border: 1px solid var(--hx-line-input); border-radius: var(--hx-r-control);
  font: 400 1rem/1.2 var(--hx-mono);  /* 16px: no zoom on iOS */
  transition: border-color var(--hx-fast) var(--hx-ease), background-color var(--hx-fast) var(--hx-ease);
}
.hx .hx-scan__input::placeholder { color: #7A8698; opacity: 1; }
.hx .hx-scan__input:hover { border-color: #7A88A2; }
.hx .hx-scan__input:focus { border-color: var(--hx-accent); background: #0C1119; }
.hx .hx-scan .hx-btn { min-height: 52px; }
.hx .hx-scan__hint { margin-top: var(--hx-3); font-size: var(--hx-fs-small); color: var(--hx-muted); }

/* 4 · HERO --------------------------------------------------------------- */
.hx .hx-hero {
  display: grid; gap: var(--hx-7);
  padding-block: clamp(16px, 3vw, 56px) var(--hx-section);
  align-items: center;
}
.hx .hx-hero__alt { margin-top: var(--hx-2); }
.hx .hx-facts {
  margin-top: var(--hx-5); padding-top: var(--hx-5);
  border-top: 1px solid var(--hx-line-soft);
  display: grid; gap: var(--hx-2);
  font-size: var(--hx-fs-small); color: var(--hx-ink-2);
}
.hx .hx-facts li { position: relative; padding-left: 22px; }
.hx .hx-facts li::before {          /* small check, drawn with borders */
  content: ""; position: absolute; left: 2px; top: .55em;
  width: 9px; height: 5px;
  border-left: 2px solid var(--hx-ok); border-bottom: 2px solid var(--hx-ok);
  transform: rotate(-45deg);
}

/* 5 · REPORT SHEET ------------------------------------------------------- */
.hx .hx-sheet {
  position: relative; margin: 0;
  background: var(--hx-paper); color: var(--hx-paper-ink);
  border-radius: var(--hx-r-sheet);
  padding: var(--hx-5);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.75), 0 2px 6px rgba(0,0,0,.35);
  isolation: isolate;
}
.hx .hx-sheet::before {             /* the next page of the report, behind */
  content: ""; position: absolute; inset: 10px -10px -10px 10px; z-index: -1;
  background: var(--hx-paper-2); border-radius: var(--hx-r-sheet); opacity: .18;
}
.hx .hx-sheet a { color: #1D4ED8; text-decoration: underline; text-underline-offset: 3px; }
.hx .hx-sheet a:focus-visible { outline-color: #1D4ED8; }
.hx .hx-sheet__head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--hx-4);
  padding-bottom: var(--hx-4); border-bottom: 2px solid var(--hx-paper-ink);
}
.hx .hx-sheet__kicker { font-family: var(--hx-mono); font-size: var(--hx-fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--hx-paper-muted); }
.hx .hx-sheet__target { font-size: 1.0625rem; font-weight: 650; margin-top: var(--hx-1); overflow-wrap: anywhere; }
.hx .hx-sheet__meta { font-size: .8125rem; color: var(--hx-paper-muted); margin-top: 2px; }
.hx .hx-score { text-align: right; white-space: nowrap; line-height: 1; }
.hx .hx-score__num { font-size: 2.75rem; font-weight: 650; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hx .hx-score__of { font-size: .875rem; color: var(--hx-paper-muted); margin-left: 2px; }
.hx .hx-score__grade {
  display: block; margin-top: var(--hx-2); margin-left: auto; width: fit-content;
  font: 700 .8125rem/1 var(--hx-mono); padding: 5px 9px;
  border: 1.5px solid var(--hx-paper-ink); border-radius: 4px;
}
.hx .hx-sheet__list { margin-top: var(--hx-2); }
.hx .hx-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-areas: "ref sev state" "title title title";
  align-items: center; column-gap: var(--hx-3); row-gap: 2px;
  padding: var(--hx-3) 0;
  border-bottom: 1px solid var(--hx-paper-line);
  font-size: .9375rem; line-height: 1.4;
}
.hx .hx-row:last-child { border-bottom: 0; }
.hx .hx-row__ref { grid-area: ref; font-size: .75rem; color: var(--hx-paper-muted); }
.hx .hx-row .hx-sev { grid-area: sev; }
.hx .hx-row__title { grid-area: title; }
.hx .hx-row .hx-state { grid-area: state; justify-self: end; }
.hx .hx-row.is-fixed .hx-row__title { color: var(--hx-paper-muted); }

.hx .hx-sev {
  display: inline-block; font: 700 .75rem/1 var(--hx-sans); letter-spacing: .02em;
  padding: 4px 7px; border-radius: 4px; white-space: nowrap;
}
.hx .hx-sheet .hx-sev--critical { background: #FDE2E4; color: #9F1239; }
.hx .hx-sheet .hx-sev--high     { background: #FFE6D5; color: #9A3412; }
.hx .hx-sheet .hx-sev--medium   { background: #FEF0C7; color: #7A4B00; }
.hx .hx-sheet .hx-sev--low      { background: #E0ECFF; color: #1E40AF; }
.hx .hx-sheet .hx-sev--info     { background: #EEF0F3; color: #374151; }
.hx .hx-state { font-size: .75rem; font-weight: 600; color: var(--hx-paper-muted); white-space: nowrap; }
.hx .hx-state--fixed { color: #1A7F37; }
.hx .hx-state--fixed::before { content: "✓ "; }
.hx .hx-sheet__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--hx-2) var(--hx-4);
  margin-top: var(--hx-4); padding-top: var(--hx-3); border-top: 1px solid var(--hx-paper-line);
  font-size: .8125rem;
}
.hx .hx-sheet__demo { color: #7A4B00; font-weight: 600; }
/* HERO-2026-11: real scan of NeoShield's own website */
.hx .hx-sheet__sum { font-size: .8125rem; color: var(--hx-paper-muted); margin-top: var(--hx-2); }
.hx .hx-sheet__more { font-size: .8125rem; color: var(--hx-paper-muted); margin-top: var(--hx-1); }
.hx .hx-sheet__real { color: #166534; font-weight: 600; }
.hx .hx-sheet__note, .hx .hx-sheet__id { font-size: .75rem; color: var(--hx-paper-muted); }
.hx .hx-sheet__id .hx-mono { overflow-wrap: anywhere; }
.hx .hx-sheet__foot--own { flex-direction: column; justify-content: flex-start; gap: var(--hx-1); }
.hx .hx-sheet__links { color: var(--hx-paper-muted); }

/* 6 · FINDING → FIX ------------------------------------------------------ */
.hx .hx-band {
  background: var(--hx-band);
  box-shadow: 0 0 0 100vmax var(--hx-band);  /* full-bleed colour, no overflow */
  clip-path: inset(0 -100vmax);
  border-top: 0;
}
.hx .hx-trace { display: grid; gap: var(--hx-6); align-items: start; }
.hx .hx-finding { padding-top: var(--hx-4); border-top: 2px solid var(--hx-warn); }
.hx .hx-finding__ref { display: flex; align-items: center; gap: var(--hx-3); color: var(--hx-muted); font-size: var(--hx-fs-small); margin-bottom: var(--hx-3); }
.hx .hx-band .hx-sev--medium { background: rgba(227,160,8,.16); color: #F2C14E; }
.hx .hx-dl { margin-top: var(--hx-5); display: grid; gap: var(--hx-5); }
.hx .hx-dl dt {
  font-family: var(--hx-mono); font-size: var(--hx-fs-label); letter-spacing: .1em; text-transform: uppercase;
  color: var(--hx-muted); margin-bottom: var(--hx-2);
}
.hx .hx-dl dd { color: var(--hx-ink-2); }
.hx .hx-evidence {
  font-family: var(--hx-mono); font-size: .8125rem; line-height: 1.6; color: var(--hx-ink) !important;
  background: var(--hx-code-bg); border: 1px solid var(--hx-line); border-left: 2px solid var(--hx-warn);
  border-radius: 6px; padding: var(--hx-3) var(--hx-4);
}

.hx .hx-code {
  background: var(--hx-code-bg); border: 1px solid var(--hx-line); border-radius: var(--hx-r-sheet);
  overflow: hidden; min-width: 0;
}
.hx .hx-code__label { font-size: var(--hx-fs-small); color: var(--hx-ink-2); padding: var(--hx-4) var(--hx-4) 0; font-weight: 500; }
.hx .hx-tabs {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  padding: var(--hx-2) var(--hx-2) 0; border-bottom: 1px solid var(--hx-line);
}
.hx .hx-tab:last-child { margin-right: 32px; }
.hx .hx-tab {
  flex: none; min-height: 44px; padding: 0 var(--hx-3);
  background: transparent; color: var(--hx-muted); border: 0; border-bottom: 2px solid transparent;
  font: 500 .875rem/1 var(--hx-sans); cursor: pointer; white-space: nowrap;
  transition: color var(--hx-fast) var(--hx-ease), border-color var(--hx-fast) var(--hx-ease);
}
.hx .hx-tab:hover { color: var(--hx-ink); }
.hx .hx-tab[aria-selected="true"] { color: var(--hx-ink); border-bottom-color: var(--hx-accent); }
.hx .hx-panel { padding: var(--hx-4); }
.hx .hx-panel + .hx-panel { border-top: 1px solid var(--hx-line); }       /* no-JS: all panels in a column */
.hx .hx-panel__name { font-size: .8125rem; font-weight: 600; color: var(--hx-ink-2); margin-bottom: var(--hx-2); }
.hx .hx-pre {
  margin: 0; padding: var(--hx-4); overflow-x: auto;
  background: #06080C; border: 1px solid var(--hx-line-soft); border-radius: 6px;
  font: 400 .8125rem/1.65 var(--hx-mono); color: #D6DEEB; white-space: pre; tab-size: 2;
}
.hx .hx-pre code { font: inherit; background: none; padding: 0; color: inherit; }
.hx .hx-panel__note { margin-top: var(--hx-3); font-size: .8125rem; color: var(--hx-muted); max-width: 70ch; }
.hx .hx-code__caveat { padding: 0 var(--hx-4) var(--hx-4); font-size: .75rem; color: var(--hx-muted); }
/* with JS: a real tab interface */
.hx .hx-code.is-ready .hx-panel[data-inactive] { display: none; }
.hx .hx-code.is-ready .hx-panel + .hx-panel { border-top: 0; }
.hx .hx-code.is-ready .hx-panel__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.hx .hx-verify {
  margin-top: var(--hx-7); padding-top: var(--hx-5); border-top: 1px solid var(--hx-line);
  display: grid; gap: var(--hx-5);
}
.hx .hx-verify__state { display: flex; align-items: center; gap: var(--hx-3); font-weight: 600; color: var(--hx-ink); }
.hx .hx-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--hx-ok); box-shadow: 0 0 0 4px rgba(63,185,80,.18); flex: none; }
.hx .hx-verify__scores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hx-4); }
.hx .hx-verify__scores dt { font-size: .75rem; color: var(--hx-muted); margin-bottom: var(--hx-1); line-height: 1.4; }
.hx .hx-verify__scores dd { font-size: 1.75rem; font-weight: 650; letter-spacing: -0.02em; color: var(--hx-ink); line-height: 1.1; }
.hx .hx-grade { font: 700 .8125rem/1 var(--hx-mono); color: var(--hx-ink-2); vertical-align: middle; }
.hx .hx-verify__note { font-size: .8125rem; color: var(--hx-muted); max-width: 72ch; }

/* 7 · TIMELINE, SCOPE, PLANS, COMMITMENTS ------------------------------- */
.hx .hx-outcomes { display: grid; gap: var(--hx-6); counter-reset: none; }
.hx .hx-outcomes li { padding-top: var(--hx-4); border-top: 1px solid var(--hx-line-strong); }
.hx .hx-outcomes p { color: var(--hx-ink-2); margin-top: var(--hx-3); }
.hx .hx-index { display: block; font: 500 .8125rem/1 var(--hx-mono); color: var(--hx-accent); margin-bottom: var(--hx-4); }

.hx .hx-timeline { position: relative; display: grid; gap: var(--hx-6); padding-left: 52px; }
.hx .hx-timeline li { position: relative; }
.hx .hx-timeline li:not(:last-child)::after {   /* segment to the next step */
  content: ""; position: absolute; left: -35px; top: 36px; bottom: calc(-1 * var(--hx-6) - 4px);
  width: 1px; background: var(--hx-line-strong);
}
.hx .hx-timeline p { color: var(--hx-ink-2); margin-top: var(--hx-2); max-width: 40ch; }
.hx .hx-node {
  position: absolute; left: -52px; top: -4px;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font: 600 .875rem/1 var(--hx-mono); color: var(--hx-ink);
  background: var(--hx-bg); border: 1px solid var(--hx-line-strong);
}
.hx .hx-timeline li:last-child .hx-node { border-color: var(--hx-ok); color: var(--hx-ok); }

.hx .hx-scope { display: grid; gap: var(--hx-6); }
.hx .hx-scope ul { margin-top: var(--hx-4); display: grid; gap: var(--hx-3); color: var(--hx-ink-2); }
.hx .hx-scope li { position: relative; padding-left: 26px; }
.hx .hx-ticks li::before {
  content: ""; position: absolute; left: 3px; top: .55em; width: 10px; height: 5px;
  border-left: 2px solid var(--hx-ok); border-bottom: 2px solid var(--hx-ok); transform: rotate(-45deg);
}
.hx .hx-dashes li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 12px; height: 2px; background: var(--hx-muted); }
.hx .hx-scope__col--no { color: var(--hx-ink-2); }

.hx .hx-plans { display: grid; gap: 0; border-top: 1px solid var(--hx-line-strong); }
.hx .hx-plan { padding: var(--hx-5) 0; border-bottom: 1px solid var(--hx-line-soft); }
.hx .hx-plan__name { font-size: 1.0625rem; font-weight: 600; }
.hx .hx-plan__price { margin-top: var(--hx-3); }
.hx .hx-plan__price .hx-num { font-size: 2rem; font-weight: 650; letter-spacing: -0.02em; }
.hx .hx-plan__per { color: var(--hx-muted); font-size: var(--hx-fs-small); }
.hx .hx-plan__limits { margin-top: var(--hx-3); color: var(--hx-ink-2); font-size: .9375rem; }
.hx .hx-plan__planned { margin-top: var(--hx-3); color: var(--hx-muted); font-size: .8125rem; }

.hx .hx-commit { display: grid; gap: var(--hx-6); }
.hx .hx-commit > div { position: relative; padding-top: var(--hx-5); }
.hx .hx-commit > div::before { content: ""; position: absolute; left: 0; top: 0; width: 32px; height: 2px; background: var(--hx-accent); }
.hx .hx-commit p { color: var(--hx-ink-2); margin-top: var(--hx-3); }
.hx .hx-inline-links { display: flex; flex-wrap: wrap; gap: 0 var(--hx-5); margin-top: var(--hx-7); padding-top: var(--hx-4); border-top: 1px solid var(--hx-line-soft); }
.hx .hx-inline-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--hx-accent); font-size: .9375rem; }

/* 8 · TOOLS, FAQ, CLOSE -------------------------------------------------- */
.hx .hx-tools { display: grid; gap: var(--hx-5); }
.hx .hx-tool-list { display: flex; flex-wrap: wrap; gap: var(--hx-2); align-content: start; }
.hx .hx-tool-list a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--hx-4);
  border: 1px solid var(--hx-line); border-radius: 999px; color: var(--hx-ink); font-size: .9375rem; text-decoration: none;
  transition: border-color var(--hx-fast) var(--hx-ease), background-color var(--hx-fast) var(--hx-ease);
}
.hx .hx-tool-list a:hover { border-color: var(--hx-line-input); background: rgba(255,255,255,.04); }
.hx .hx-tool-list .hx-tool-list__all { border-color: transparent; color: var(--hx-accent); font-weight: 600; }

.hx .hx-faq__list { border-top: 1px solid var(--hx-line-strong); max-width: 880px; }
.hx .hx-qa { border-bottom: 1px solid var(--hx-line-soft); }
.hx .hx-qa summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--hx-4);
  min-height: 60px; padding: var(--hx-4) 0;
  font-weight: 600; color: var(--hx-ink);
}
.hx .hx-qa summary::-webkit-details-marker { display: none; }
.hx .hx-qa summary::after {          /* plus → minus */
  content: ""; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  color: var(--hx-muted);
  transition: transform var(--hx-med) var(--hx-ease), background-size var(--hx-med) var(--hx-ease);
}
.hx .hx-qa[open] summary::after { transform: rotate(90deg); background-size: 14px 2px, 2px 0; }
.hx .hx-qa summary:hover { color: var(--hx-accent); }
.hx .hx-qa__a { padding: 0 var(--hx-6) var(--hx-5) 0; color: var(--hx-ink-2); max-width: 72ch; }
.hx .hx-qa[open] .hx-qa__a { animation: hx-open var(--hx-med) var(--hx-ease); }
@keyframes hx-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.hx .hx-close {
  display: grid; gap: var(--hx-6); align-items: end;
  margin-top: var(--hx-4);
  padding: var(--hx-7) 0 var(--hx-4);
  border-top: 2px solid var(--hx-accent-strong);
}
.hx .hx-close .hx-lead { margin-top: var(--hx-3); }
.hx .hx-close__alt { margin-top: var(--hx-2); }
.hx .hx-close .hx-scan { margin-top: 0; }

/* 9 · REVEAL MOTION ------------------------------------------------------ */
/* Content is visible without JavaScript; home.js adds .hx-js to <html> and
   .is-in as each block scrolls into view. */
.hx-js .hx [data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity var(--hx-med) var(--hx-ease), transform var(--hx-med) var(--hx-ease); }
.hx-js .hx [data-reveal].is-in { opacity: 1; transform: none; }
.hx-js .hx .hx-outcomes > [data-reveal]:nth-child(2), .hx-js .hx .hx-timeline > [data-reveal]:nth-child(2),
.hx-js .hx .hx-plans > [data-reveal]:nth-child(2), .hx-js .hx .hx-commit > [data-reveal]:nth-child(2) { transition-delay: 60ms; }
.hx-js .hx .hx-outcomes > [data-reveal]:nth-child(3), .hx-js .hx .hx-timeline > [data-reveal]:nth-child(3),
.hx-js .hx .hx-plans > [data-reveal]:nth-child(3), .hx-js .hx .hx-commit > [data-reveal]:nth-child(3) { transition-delay: 120ms; }
.hx-js .hx .hx-timeline > [data-reveal]:nth-child(4) { transition-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  .hx *, .hx *::before, .hx *::after { transition: none !important; animation: none !important; }
  .hx-js .hx [data-reveal] { opacity: 1; transform: none; }
}

/* 10 · BREAKPOINTS ------------------------------------------------------- */
@media (min-width: 600px) {
  .hx .hx-scan__row { flex-direction: row; }
  .hx .hx-scan__input { flex: 1 1 auto; min-width: 0; }
  .hx .hx-sheet { padding: var(--hx-6); }
  .hx .hx-row { grid-template-columns: 2.6rem 4.25rem 1fr auto; grid-template-areas: "ref sev title state"; }
  .hx .hx-row .hx-sev { justify-self: start; }   /* fixed badge column: titles align whatever the severity word */
}

@media (min-width: 768px) {
  .hx .hx-outcomes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx .hx-scope { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .hx .hx-scope__col--no { border-left: 1px solid var(--hx-line-soft); padding-left: var(--hx-6); }
  .hx .hx-scope__col:first-child { padding-right: var(--hx-6); }
  .hx .hx-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hx-line-strong); }
  .hx .hx-plan { padding: var(--hx-5) var(--hx-5) var(--hx-5) 0; border-bottom: 0; }
  .hx .hx-plan + .hx-plan { border-left: 1px solid var(--hx-line-soft); padding-left: var(--hx-5); }
  .hx .hx-commit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx .hx-tools { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }
}

@media (min-width: 900px) {
  /* the timeline turns horizontal: steps sit on one line */
  .hx .hx-timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-left: 0; padding-top: 56px; gap: var(--hx-5); }
  .hx .hx-timeline li:not(:last-child)::after { left: 44px; right: calc(-1 * var(--hx-5) + 8px); top: -38px; bottom: auto; width: auto; height: 1px; }
  .hx .hx-node { left: 0; top: -56px; }
  .hx .hx-head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--hx-6); }
  .hx .hx-head--split .hx-lead { justify-self: end; }
}

@media (min-width: 960px) {
  .hx .hx-hero { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(40px, 5vw, 80px); }
  .hx .hx-trace { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--hx-7); }
  .hx .hx-verify { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; column-gap: var(--hx-7); }
  .hx .hx-verify__note { grid-column: 2; }
  .hx .hx-close { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--hx-7); }
}

@media (min-width: 1200px) {
  .hx .hx-sheet { padding: var(--hx-6) var(--hx-6) var(--hx-5); }
}

@media (max-width: 599px) {
  .hx .hx-scan .hx-btn { width: 100%; white-space: normal; text-align: center; }
  .hx .hx-score__num { font-size: 2.25rem; }
  .hx .hx-verify__scores { grid-template-columns: 1fr 1fr; }
  .hx .hx-verify__scores > div:last-child { grid-column: 1 / -1; }
  .hx .hx-sheet::before { inset: 8px -6px -8px 6px; }
}

@media print {
  .hx .hx-sheet { box-shadow: none; border: 1px solid #ccc; }
  .hx .hx-sheet::before, .hx .hx-scan { display: none; }
}

/* 2026-10-26 QA: narrow phones (<400px) — keep the report id on one line and
   let the domain break only at its dots rather than mid-word. */
.hx .hx-nowrap { white-space: nowrap; }
@media (max-width: 399px) {
  .hx .hx-sheet__target { font-size: 1rem; }
  .hx .hx-score__num { font-size: 2.25rem; }
}
.hx:lang(ja) .hx-sheet__kicker, .hx :lang(ja) .hx-sheet__kicker { word-break: keep-all; }

/* WEDGE-2026-10 · trust strip, CTA group, demo tag, trust facts --------- */
.hx .hx-strip {
  margin: var(--hx-4) 0 0; padding: var(--hx-2) var(--hx-4);
  border: 1px solid var(--hx-line-soft); border-radius: var(--hx-r-control);
  background: var(--hx-band); color: var(--hx-ink-2);
  font-size: var(--hx-fs-small); line-height: 1.5; text-align: center;
}
.hx .hx-ctas { display: flex; flex-wrap: wrap; gap: var(--hx-3); margin-top: var(--hx-6); }
.hx .hx-ctas .hx-btn { min-height: 48px; }
.hx .hx-micro { margin-top: var(--hx-3); color: var(--hx-muted); font-size: var(--hx-fs-small); }
.hx .hx-demo-tag {
  display: inline-block; margin-left: var(--hx-1); padding: 0 var(--hx-2);
  border: 1px solid var(--hx-line-strong); border-radius: 999px;
  font-size: var(--hx-fs-label); color: var(--hx-ink-2); white-space: nowrap; vertical-align: middle;
}
.hx .hx-facts-grid { display: grid; gap: var(--hx-5) var(--hx-6); margin: 0; }
.hx .hx-facts-grid > div { border-top: 1px solid var(--hx-line-soft); padding-top: var(--hx-3); }
.hx .hx-facts-grid dt { font-weight: 600; color: var(--hx-ink); font-size: .9375rem; }
.hx .hx-facts-grid dd { margin: var(--hx-1) 0 0; color: var(--hx-ink-2); }
.hx .hx-facts-grid a, .hx .hx-ticks a { color: var(--hx-accent); }
@media (min-width: 768px) { .hx .hx-facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .hx .hx-facts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 420px) { .hx .hx-ctas .hx-btn { width: 100%; justify-content: center; } }
/* WEDGE-2026-10: long CTA labels wrap instead of widening the hero grid at 320px. */
.hx .hx-hero > * { min-width: 0; }
.hx .hx-ctas .hx-btn { white-space: normal; text-align: center; max-width: 100%; }

/* CONVERSION-2026-11 · personas, product tour, free-tools comparison,
   monthly summary (planned), early-customer section ------------------- */
.hx .hx-lead--wide { max-width: 72ch; margin-top: var(--hx-3); }
.hx .hx-scope--single { grid-template-columns: minmax(0, 1fr); }
.hx .hx-scope--single .hx-scope__col--no { border-left: 0; padding-left: 0; }

.hx .hx-personas { display: grid; gap: var(--hx-5); }
.hx .hx-persona { border: 1px solid var(--hx-line); border-radius: var(--hx-r-control); background: var(--hx-raised); padding: var(--hx-5); display: flex; flex-direction: column; }
.hx .hx-persona__dl { display: grid; gap: var(--hx-3); margin-top: var(--hx-4); flex: 1 1 auto; }
.hx .hx-persona__dl dt { font-family: var(--hx-mono); font-size: var(--hx-fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--hx-muted); }
.hx .hx-persona__dl dd { margin-top: 2px; color: var(--hx-ink-2); }
.hx .hx-persona__dl > div:last-child dd { color: var(--hx-ink); }
.hx .hx-persona__more { margin-top: var(--hx-4); }
.hx .hx-persona__more a, .hx .hx-cmp__note a, .hx .hx-early a, .hx .hx-after a { color: var(--hx-accent); }

.hx .hx-tour { display: grid; gap: var(--hx-6); }
.hx .hx-shot { margin: 0; }
.hx .hx-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--hx-line); border-radius: var(--hx-r-control); background: var(--hx-raised); }
.hx .hx-shot__ph { aspect-ratio: 16 / 10; display: grid; place-items: center; border: 1px dashed var(--hx-line-strong); border-radius: var(--hx-r-control); background: var(--hx-band); color: var(--hx-muted); font-family: var(--hx-mono); font-size: var(--hx-fs-small); }
.hx .hx-shot figcaption { margin-top: var(--hx-3); color: var(--hx-ink-2); font-size: .9375rem; }
.hx .hx-shot figcaption strong { display: block; color: var(--hx-ink); }

.hx .hx-cmp-wrap { overflow-x: auto; border: 1px solid var(--hx-line); border-radius: var(--hx-r-control); }
.hx .hx-cmp-wrap:focus-visible { outline: 2px solid var(--hx-accent); outline-offset: 2px; }
.hx .hx-cmp { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .9375rem; }
.hx .hx-cmp th, .hx .hx-cmp td { padding: var(--hx-3) var(--hx-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--hx-line-soft); }
.hx .hx-cmp thead th { font-weight: 600; color: var(--hx-ink); background: var(--hx-band); }
.hx .hx-cmp tbody th { font-weight: 600; color: var(--hx-ink); width: 15%; }
.hx .hx-cmp td { color: var(--hx-ink-2); }
.hx .hx-cmp tr:last-child th, .hx .hx-cmp tr:last-child td { border-bottom: 0; }
.hx .hx-cmp .hx-cmp__ns { background: rgba(90,169,255,.08); color: var(--hx-ink); width: 27%; }
.hx .hx-cmp thead .hx-cmp__ns { color: var(--hx-accent); }
.hx .hx-cmp__note { margin-top: var(--hx-3); color: var(--hx-muted); font-size: var(--hx-fs-small); max-width: 90ch; }

.hx .hx-summary { display: grid; gap: var(--hx-7); align-items: start; }
.hx .hx-summary__uses { margin: var(--hx-5) 0 var(--hx-4); display: grid; gap: var(--hx-3); color: var(--hx-ink-2); }
.hx .hx-summary__uses li { position: relative; padding-left: 26px; }
.hx .hx-summary .hx-muted { max-width: 60ch; }
.hx .hx-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: var(--hx-fs-label); letter-spacing: .06em; }
.hx .hx-badge--planned { border: 1px solid var(--hx-warn); color: var(--hx-warn); }
.hx .hx-demo-tag--paper { border-color: #7A4B00; color: #7A4B00; margin-left: 0; }
.hx .hx-sumsheet__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hx-4); margin-top: var(--hx-4); }
.hx .hx-sumsheet__grid dt { font-size: .8125rem; color: var(--hx-paper-muted); }
.hx .hx-sumsheet__grid dd { font-size: 1.75rem; font-weight: 650; letter-spacing: -0.02em; margin-top: 2px; }
.hx .hx-sumsheet__line { display: flex; align-items: center; gap: var(--hx-3); margin-top: var(--hx-4); font-weight: 600; color: #1A7F37; }

.hx .hx-early__list { display: grid; gap: var(--hx-5); }
.hx .hx-early__list li { border-top: 1px solid var(--hx-line-strong); padding-top: var(--hx-4); }
.hx .hx-early__list p { margin-top: var(--hx-2); color: var(--hx-ink-2); }

@media (min-width: 768px) {
  .hx .hx-personas, .hx .hx-early__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx .hx-tour { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
  .hx .hx-sumsheet__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .hx .hx-summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hx .hx-sumsheet__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .hx .hx-cmp { min-width: 640px; font-size: .875rem; }
}
.hx .hx-summary .hx-lead { margin-top: var(--hx-3); }