/* Access Hub public site. One shared stylesheet, no build step.
   Breakpoints: desktop >= 1200 (1440 artboards), tablet 768-1199, phone < 768 (390 artboards).
   The header switches to the phone header below 960px. */

:root {
  /* surfaces and text */
  --bg: #f5f6fa;
  --surface: #ffffff;
  --footer-bg: #eeeff4;
  --ink: #16181d;
  --muted: #5b5f6b;
  --faint: #a3a7b3;
  --line: #e5e7ee;
  --line-strong: #d9dce6;
  --line-soft: #eeeff4;
  --placeholder-line: #c9cdd9;
  --placeholder-ink: #8a8f9c;

  /* brand */
  --accent: #3556f0;
  --accent-hover: #2442d0;
  --accent-soft: #eaeeff;
  --accent-tint: #f7f8ff;
  --accent-border: #c9d2ff;
  --focus-ring: rgba(53, 86, 240, 0.45);

  /* product colours */
  --c-hub: #3556f0;
  --c-agent: #0b9a88;
  --c-collector: #6d4fe0;
  --c-scan: #b36b00;
  --c-mobile: #16181d;

  /* status */
  --amber: #b36b00;
  --amber-ink: #8a5200;
  --amber-soft: #f7e6c8;
  --ok: #047857;
  --off: #8a8f9c;
  --danger-soft: #f08a8a;

  /* dark band */
  --dark-bg: #16181d;
  --on-dark: #f2f2f2;
  --on-dark-muted: #a3a7b3;
  --on-dark-text: #c3c6cf;
  --accent-on-dark: #7c93ff;
  --dark-line: rgba(255, 255, 255, 0.14);
  --dark-line-strong: rgba(255, 255, 255, 0.3);

  /* product UI mock palette (the Access Hub app look) */
  --m-ink: #0a0a0a;
  --m-text: #404040;
  --m-muted: #737373;
  --m-faint: #a3a3a3;
  --m-line: #ededed;
  --m-line-2: #e5e5e5;
  --m-dark: #171717;
  --m-on-dark: #fafafa;
  --m-subtle: #fafafa;
  --m-chip: #f5f5f5;
  --m-chart: #2a78d6;
  --m-chart-fill: rgba(42, 120, 214, 0.1);
  --m-track: rgba(11, 11, 11, 0.06);
  --m-blue: #2563eb;
  --m-blue-soft: rgba(59, 130, 246, 0.1);
  --m-amber: #b45309;
  --m-amber-2: #d97706;
  --m-amber-dot: #fab219;
  --m-amber-soft: rgba(245, 158, 11, 0.1);
  --m-amber-pill: rgba(251, 191, 36, 0.12);
  --m-amber-border: rgba(245, 158, 11, 0.35);
  --m-green: #047857;
  --m-green-dot: #0ca30c;
  --m-green-soft: rgba(16, 185, 129, 0.1);
  --m-green-border: rgba(5, 150, 105, 0.3);
  --m-red: #d03b3b;
  --m-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);

  /* type */
  --f-display: 'Schibsted Grotesk', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --f-app: Tahoma, Verdana, 'Segoe UI', ui-sans-serif, system-ui, sans-serif;
  --f-code: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* layout */
  --wrap: 1200px;
  --gutter: 40px;
  --shadow-pop: 0 24px 48px -24px rgba(22, 24, 29, 0.28);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
}
img, svg { max-width: 100%; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
button, input, select, textarea { font-family: inherit; letter-spacing: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }

.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i5 { width: 20px; height: 20px; }
.i-sm { width: 14px; height: 14px; }
.i-xs { width: 12px; height: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  padding: 10px 16px; border-radius: 4px; background: var(--ink); color: #fff;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; color: #fff; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--f-mono); }
.accent { color: var(--accent); }
.muted { color: var(--muted); }
.eyebrow {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent);
}

/* desktop/phone content variants (the 390 artboards use their own copy) */
@media (min-width: 768px) { .only-m { display: none !important; } }
@media (max-width: 767.98px) { .only-d { display: none !important; } }

/* ---------- header ---------- */
.site-header { position: relative; z-index: 5; border-bottom: 1px solid var(--line); background: var(--bg); }
.hdr {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  height: 72px; display: flex; align-items: center; gap: 40px;
}
.brand {
  display: flex; align-items: center; gap: 10px; flex: none;
  color: var(--ink); text-decoration: none;
  font-family: var(--f-display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em;
}
.brand:hover { color: var(--ink); }
.nav { display: flex; align-items: center; gap: 4px; font-size: 16px; }
.navl {
  height: 40px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-radius: 4px; background: transparent;
  color: var(--muted); text-decoration: none; font-size: 16px; white-space: nowrap; cursor: pointer;
}
.navl:hover { background: var(--accent-soft); color: var(--ink); }
.navl[aria-current="page"] { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.menu-btn { color: var(--ink); }
.menu-btn[aria-expanded="true"] { background: var(--accent-soft); }
.menu-btn .chev { transition: transform 0.15s ease; }
.menu-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.hdr-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.navl-login { padding: 0 14px; color: var(--ink); }
.btn-hdr {
  height: 40px; padding: 0 18px; display: inline-flex; align-items: center; gap: 8px;
  border-radius: 4px; background: var(--accent); color: #fff; text-decoration: none; white-space: nowrap;
  font-family: var(--f-display); font-weight: 600; font-size: 15px;
}
.btn-hdr:hover { background: var(--accent-hover); color: #fff; }

.mega {
  position: absolute; left: 0; right: 0; top: 72px;
  background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-pop);
}
.mega-in {
  max-width: var(--wrap); margin: 0 auto; padding: 28px var(--gutter) 24px;
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px;
}
.mega-intro { display: flex; flex-direction: column; gap: 8px; }
.mega-title { font-family: var(--f-display); font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.mega-open { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; text-decoration: none; }
.mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mega-item { display: flex; gap: 14px; padding: 14px; border-radius: 6px; color: var(--ink); text-decoration: none; }
.mega-item > svg { flex: none; }
.mega-item:hover, .mega-item[aria-current="page"] { background: var(--accent-soft); color: var(--ink); }
.mega-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega-txt b { font-size: 16px; }
.mega-txt b.ext { display: inline-flex; align-items: center; gap: 6px; }
.mega-txt > span { font-size: 14px; line-height: 1.45; color: var(--muted); }
.soon { margin-left: 4px; font-family: var(--f-mono); font-size: 11px; font-weight: 500; color: var(--amber); letter-spacing: 0.04em; white-space: nowrap; }
.doc-ic {
  width: 40px; height: 40px; flex: none; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--ink);
}

/* phone header */
.mhdr { display: none; height: 60px; padding: 0 16px 0 20px; align-items: center; gap: 10px; }
.brand-m { gap: 8px; font-size: 17px; letter-spacing: 0; }
.m-try {
  margin-left: auto; height: 36px; padding: 0 14px; display: inline-flex; align-items: center;
  border-radius: 4px; background: var(--accent); color: #fff; text-decoration: none; white-space: nowrap;
  font-family: var(--f-display); font-weight: 600; font-size: 14px;
}
.m-try:hover { background: var(--accent-hover); color: #fff; }
.m-toggle {
  width: 40px; height: 40px; flex: none; border: 1px solid var(--ink); border-radius: 4px;
  background: var(--surface); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.m-toggle .ic-close { display: none; }
.m-toggle[aria-expanded="true"] .ic-open { display: none; }
.m-toggle[aria-expanded="true"] .ic-close { display: inline; }
.mnav {
  position: absolute; left: 0; right: 0; top: 60px; padding: 8px 20px 20px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 48px -24px rgba(22, 24, 29, 0.3);
  max-height: calc(100vh - 60px); overflow-y: auto;
}
.mnav-label { margin: 8px 0 4px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.mnav-prod {
  display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft);
  color: var(--ink); text-decoration: none; font-weight: 600;
}
.mnav-prod:hover, .mnav-prod[aria-current="page"] { color: var(--accent); }
.dot { width: 10px; height: 10px; flex: none; border-radius: 3px; }
.dot-hub { background: var(--c-hub); }
.dot-agent { background: var(--c-agent); }
.dot-collector { background: var(--c-collector); }
.dot-scan { background: var(--c-scan); }
.dot-mobile { background: var(--c-mobile); }
.mnav-soon { margin-left: auto; font-family: var(--f-mono); font-size: 10px; font-weight: 500; color: var(--amber-ink); }
.mnav-big {
  display: flex; align-items: center; gap: 6px; padding: 14px 0 10px; border-bottom: 1px solid var(--line-soft);
  color: var(--ink); text-decoration: none; font-family: var(--f-display); font-size: 20px; font-weight: 700;
}
.mnav-big:hover { color: var(--ink); }
.mnav-big[aria-current="page"] { color: var(--accent); }
.mnav-login {
  margin-top: 16px; height: 48px; display: flex; align-items: center; justify-content: center;
  border-radius: 4px; border: 1px solid var(--ink); color: var(--ink); text-decoration: none;
  font-family: var(--f-display); font-weight: 600;
}
.mnav-login:hover { color: var(--ink); background: var(--bg); }

@media (max-width: 1100px) {
  .hdr { gap: 20px; }
}
@media (max-width: 959.98px) {
  .hdr, .mega { display: none !important; }
  .mhdr { display: flex; }
}
@media (min-width: 960px) {
  .mnav { display: none !important; }
}

/* ---------- buttons ---------- */
.btn {
  height: 52px; padding: 0 22px; display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid transparent; border-radius: 4px; text-decoration: none; white-space: nowrap;
  font-family: var(--f-display); font-weight: 600; font-size: 17px; line-height: 1.2;
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { color: var(--ink); background: var(--surface); }
.btn-split { display: flex; justify-content: space-between; }
.btn-md { height: 48px; padding: 0 20px; font-size: 16px; gap: 8px; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.link-quiet { color: var(--muted); }
.link-quiet:hover { color: var(--ink); }

/* ---------- section scaffolding ---------- */
.sec { padding: 120px 0 0; }
.sec-head {
  border-top: 2px solid var(--ink); padding-top: 14px;
  display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
}
.sec-head .num { color: var(--accent); }
.sec-head .note { color: var(--muted); text-align: right; }
.sec-intro { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 64px; align-items: end; }
.sec-intro > p { color: var(--muted); }
.sec-row { margin-top: 28px; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.h2 { font-family: var(--f-display); font-size: 52px; line-height: 1.04; font-weight: 700; letter-spacing: -0.03em; }
.h2-760 { max-width: 760px; }
.h2-720 { max-width: 720px; }

.dark { background: var(--dark-bg); color: var(--on-dark); }
.dark .sec-head { border-top-color: var(--on-dark); }
.dark .sec-head .num { color: var(--accent-on-dark); }
.dark .sec-head .note { color: var(--on-dark-muted); }
.dark-band { margin-top: 120px; padding: 96px 0; }

.check-list { display: flex; flex-direction: column; gap: 8px; }
.check-list li { display: flex; gap: 10px; }
.check-list .i { margin-top: 4px; color: var(--accent); }

/* tabs / segmented control */
.seg {
  display: inline-flex; padding: 4px; gap: 4px; flex: none;
  border: 1px solid var(--ink); border-radius: 6px; background: var(--surface);
}
.seg-btn {
  height: 40px; padding: 0 18px; border: 0; border-radius: 4px; background: transparent; color: var(--muted);
  font-family: var(--f-display); font-weight: 600; font-size: 15px; cursor: pointer;
}
.seg-btn:hover { color: var(--ink); }
.seg-btn[aria-selected="true"] { background: var(--ink); color: #fff; }

/* FAQ */
.faq-grid { margin-top: 28px; display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 72px; }
.faq-side { display: flex; flex-direction: column; gap: 20px; }
.faq-side p { color: var(--muted); }
.faq { border-top: 1px solid var(--ink); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer;
  font-family: var(--f-display); font-size: 21px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em;
}
.faq-ic {
  width: 32px; height: 32px; flex: none; border: 1px solid var(--ink); border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
}
.faq-q[aria-expanded="true"] .faq-v { display: none; }
.faq-a { padding: 0 64px 24px 0; font-size: 17px; line-height: 1.6; color: var(--muted); }
.faq-more { margin-top: 16px; font-size: 15px; color: var(--muted); }

/* closing call to action */
.cta-box {
  padding: 64px; border: 2px solid var(--ink); border-radius: 6px; background: var(--surface);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: end;
}
.cta-box h2 { font-family: var(--f-display); font-size: 56px; line-height: 1.02; font-weight: 800; letter-spacing: -0.035em; max-width: 760px; }
.cta-box .eyebrow + h2 { margin-top: 16px; }
.cta-actions { display: flex; flex-direction: column; gap: 12px; width: 260px; }
.sec-cta { padding: 120px 0; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--footer-bg); }
.ft { max-width: var(--wrap); margin: 0 auto; padding: 56px var(--gutter) 32px; }
.ft-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.ft-brand { display: flex; flex-direction: column; gap: 14px; }
.ft-brand p { max-width: 300px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.ft-col { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.ft-col a { color: var(--ink); text-decoration: none; }
.ft-col a:hover { color: var(--ink); text-decoration: underline; }
.ft-h { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ft-bottom {
  margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line-strong);
  display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--muted);
}
.ft-domain { font-family: var(--f-mono); font-size: 12px; }

/* =========================================================
   Home page
   ========================================================= */
.hero { padding: 72px 0 0; }
.hero-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pill-link {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 4px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--ink); text-decoration: none; font-size: 14px;
}
.pill-link:hover { color: var(--ink); border-color: var(--ink); }
.badge-new {
  height: 20px; padding: 0 8px; display: inline-flex; align-items: center; flex: none; border-radius: 999px;
  background: var(--amber-soft); color: var(--amber-ink);
  font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
}
.hero-h1 {
  margin-top: 28px; max-width: 1080px;
  font-family: var(--f-display); font-size: 80px; line-height: 0.98; font-weight: 800; letter-spacing: -0.04em;
}
.hero-h1 .accent { color: var(--accent); }
.hero-row { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 64px; align-items: end; }
.hero-lede { max-width: 640px; font-size: 21px; line-height: 1.55; color: var(--muted); }
.hero-ctas { display: flex; flex-direction: column; gap: 14px; }
.hero-btns { display: flex; gap: 12px; }
.hero-btns .btn-primary { padding: 0 24px; }
.hero-note { font-family: var(--f-mono); font-size: 13px; color: var(--muted); }
.scan-banner { display: none; }

/* the four questions under the mock */
.legend { padding-top: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.legend li { display: flex; gap: 12px; }
.legend .t { font-family: var(--f-display); font-weight: 700; font-size: 18px; }
.legend .t + p { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.mk {
  width: 24px; height: 24px; flex: none; border-radius: 999px; background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0;
}
.mk-sm { width: 18px; height: 18px; font-size: 10px; }

/* customers */
.customers { padding: 80px 0 0; }
.customers .wrap { display: flex; align-items: center; gap: 40px; }
.customers p { width: 220px; flex: none; font-size: 15px; line-height: 1.45; color: var(--muted); }
.logos { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.logos li {
  height: 56px; border: 1px dashed var(--placeholder-line); border-radius: 4px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--f-mono); font-size: 12px; color: var(--placeholder-ink);
}

/* 01 before / after */
.cmp { margin-top: 48px; border-top: 1px solid var(--ink); }
.cmp-row {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr); gap: 32px;
  padding: 26px 0; border-bottom: 1px solid var(--line); align-items: start;
}
.cmp-row.cmp-head { padding: 14px 0; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cmp-head .accent { color: var(--accent); }
.cmp-n { font-family: var(--f-mono); font-size: 14px; color: var(--muted); }
.cmp-cell { display: flex; gap: 12px; font-size: 20px; line-height: 1.4; }
.cmp-cell .i { margin-top: 4px; }
.cmp-before { color: var(--muted); }
.cmp-before .i { color: var(--faint); }
.cmp-after .i { color: var(--accent); }
.cmp-list { margin-top: 28px; border-top: 1px solid var(--ink); }
.cmp-list li { padding: 18px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.cmp-list .n { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.cmp-list p { display: flex; gap: 10px; line-height: 1.45; }
.cmp-list .before { font-size: 15px; color: var(--muted); }
.cmp-list .before .i { margin-top: 3px; color: var(--faint); }
.cmp-list .after { font-size: 17px; }
.cmp-list .after .i { margin-top: 4px; color: var(--accent); }

/* 02 product family */
.family { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  padding: 28px; display: flex; flex-direction: column; gap: 16px;
}
.card:hover { border-color: var(--ink); }
.card-wide { grid-column: span 2; padding: 32px; gap: 20px; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-id { display: flex; align-items: center; gap: 16px; }
.kicker { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.card h3 { margin-top: 2px; font-family: var(--f-display); font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
.card-wide h3 { font-size: 30px; line-height: 1.1; }
.card-lede { font-size: 16px; line-height: 1.5; }
.card-wide .card-lede { font-size: 19px; max-width: 620px; }
.card-points { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--muted); }
.card-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; font-size: 16px; }
.card-checks li { display: flex; gap: 10px; }
.card-checks .i { margin-top: 4px; color: var(--accent); }
.card-links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 24px; font-size: 16px; font-weight: 600; }
.card > .link-arrow { margin-top: auto; font-size: 16px; }
.tag-soon {
  height: 24px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 999px;
  background: var(--amber-soft); color: var(--amber-ink);
  font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; white-space: nowrap;
}
.family-m { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.fam-main {
  background: var(--surface); border: 2px solid var(--ink); border-radius: 6px; padding: 20px;
  display: flex; flex-direction: column; gap: 12px; color: var(--ink); text-decoration: none;
}
.fam-main:hover { color: var(--ink); }
.fam-main .id { display: flex; align-items: center; gap: 12px; }
.fam-main .k { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.fam-main .n { display: block; font-family: var(--f-display); font-size: 24px; line-height: 1.15; font-weight: 700; }
.fam-main .d { font-size: 16px; line-height: 1.5; }
.fam-main .go { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; }
.fam-row {
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 16px;
  display: flex; gap: 14px; align-items: center; color: var(--ink); text-decoration: none;
}
.fam-row:hover { color: var(--ink); border-color: var(--ink); }
.fam-row > svg:first-child { flex: none; }
.fam-row .txt { flex: 1; min-width: 0; }
.fam-row b { display: block; font-family: var(--f-display); font-size: 18px; }
.fam-row .txt > span { display: block; font-size: 14px; line-height: 1.4; color: var(--muted); }
.fam-row .soon-m { font-family: var(--f-mono); font-size: 10px; font-weight: 500; color: var(--amber-ink); }
.fam-row > .i { color: var(--muted); }

/* 03 how it works */
.steps { margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.step { display: flex; flex-direction: column; gap: 18px; padding-right: 28px; }
.step-mark { display: flex; align-items: center; gap: 12px; }
.step-n {
  width: 44px; height: 44px; flex: none; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--surface);
  display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 14px; font-weight: 600;
}
.step-line { flex: 1; height: 1.5px; background: var(--ink); }
.step:last-child .step-line { display: none; }
.step-body { display: flex; flex-direction: column; gap: 8px; }
.step h3 { font-family: var(--f-display); font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
.step p { font-size: 16px; line-height: 1.55; color: var(--muted); }
.step p.owner { line-height: 1.6; }
.step .owner { margin-top: 4px; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }

.flow {
  margin-top: 48px; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  display: grid; grid-template-columns: 1fr 120px 1.2fr 120px 1fr; align-items: center;
}
.flow-box { border: 1px solid var(--line); border-radius: 4px; padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.flow-box .k { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--muted); }
.flow-box b { font-family: var(--f-display); font-size: 18px; }
.flow-box .d { font-size: 14px; color: var(--muted); }
.flow-box-main { border: 1.5px solid var(--accent); background: var(--accent-tint); gap: 8px; }
.flow-box-main .k { color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--f-mono); font-size: 12px; }
.chips span { padding: 2px 8px; border: 1px solid var(--accent-border); border-radius: 3px; background: var(--surface); }
.flow-arrow {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-family: var(--f-mono); font-size: 11px; color: var(--muted); text-align: center;
}
.flow-arrow svg { width: 100%; height: 12px; }

.feature-trio { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.feature {
  padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; display: flex; gap: 16px;
}
.feature > .i { color: var(--accent); margin-top: 3px; }
.feature b { font-family: var(--f-display); font-size: 18px; }
.feature p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--muted); }

/* 04 security */
.sec-grid { margin-top: 28px; display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 72px; }
.sec-side { display: flex; flex-direction: column; gap: 28px; }
.sec-side > p { color: var(--on-dark-muted); }
.dir-diagram {
  border: 1px solid var(--dark-line); border-radius: 6px; padding: 22px;
  display: flex; flex-direction: column; gap: 14px; font-family: var(--f-mono); font-size: 12px;
}
.dir-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 110px; align-items: center; gap: 10px; }
.dir-row-muted { color: var(--on-dark-muted); }
.dir-node { padding: 10px; border: 1px solid var(--dark-line-strong); border-radius: 4px; text-align: center; }
.dir-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.dir-mid-on { color: var(--accent-on-dark); }
.dir-mid svg { width: 100%; height: 12px; }
.dir-c { text-align: center; }
.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--dark-line); }
.principles li { padding: 28px 0 28px 28px; border-bottom: 1px solid var(--dark-line); display: flex; flex-direction: column; gap: 10px; }
.principles li:nth-child(odd) { padding: 28px 28px 28px 0; border-right: 1px solid var(--dark-line); }
.principles .n { font-family: var(--f-mono); font-size: 13px; color: var(--accent-on-dark); }
.principles .b { display: flex; flex-direction: column; gap: 10px; }
.principles h3 { font-family: var(--f-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.principles p { font-size: 16px; line-height: 1.55; color: var(--on-dark-text); }
.sec-assure {
  margin-top: 48px; padding: 18px 22px; border: 1px solid var(--dark-line); border-radius: 6px;
  display: flex; align-items: center; gap: 14px; font-size: 16px; color: var(--on-dark-text);
}
.sec-assure .i { color: var(--accent-on-dark); }

/* 05 plans teaser */
.plans-2 { margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
.plans-2 h3 { margin-bottom: 8px; font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.price-row { display: flex; align-items: baseline; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.price-row b { font-family: var(--f-display); font-size: 24px; letter-spacing: -0.01em; }
.price-row .d { font-size: 15px; color: var(--muted); }
.price-row .lead { flex: 1; min-width: 12px; border-bottom: 1px dotted var(--faint); transform: translateY(-5px); }
.price-row .p { font-family: var(--f-display); font-size: 18px; font-weight: 600; white-space: nowrap; }
.price-row .p-lg { font-size: 20px; }
.price-row .p-tbd { font-family: var(--f-mono); font-size: 15px; font-weight: 500; color: var(--amber-ink); }

/* =========================================================
   Pricing page
   ========================================================= */
.price-hero { padding: 72px 0 0; }
.price-hero-row { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 64px; align-items: end; }
.price-h1 { font-family: var(--f-display); font-size: 72px; line-height: 1; font-weight: 800; letter-spacing: -0.04em; }
.price-h1 .accent { color: var(--accent); }
.price-lede { font-size: 19px; line-height: 1.55; color: var(--muted); }
.aud-bar {
  margin-top: 48px; padding-top: 24px; border-top: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.aud-btn {
  height: 56px; padding: 0 22px; border: 0; border-radius: 4px; background: transparent; color: var(--muted);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; cursor: pointer;
}
.aud-btn:hover { color: var(--ink); }
.aud-btn[aria-selected="true"] { background: var(--ink); color: #fff; }
.aud-btn .l { font-family: var(--f-display); font-weight: 700; font-size: 17px; line-height: 1.2; }
.aud-btn .h { font-family: var(--f-mono); font-size: 12px; line-height: 1.3; opacity: 0.8; }
.aud-note { font-family: var(--f-mono); font-size: 13px; color: var(--muted); }

.plans { padding: 32px 0 0; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; display: flex; flex-direction: column; overflow: hidden; }
.plan-pick { border: 2px solid var(--ink); }
.plan-strip {
  height: 36px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between;
  background: var(--footer-bg); color: var(--muted);
  font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
}
.plan-pick .plan-strip { background: var(--ink); color: #fff; }
.plan-body { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 20px; flex: 1; }
.plan h2 { font-family: var(--f-display); font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
.plan-for { margin-top: 6px; font-size: 16px; line-height: 1.5; color: var(--muted); min-height: 48px; }
.plan-price { padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.plan-price .v { font-family: var(--f-display); font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
.plan-price .v-long { font-size: 32px; }
.plan-price .v-tbd { font-family: var(--f-mono); font-size: 26px; color: var(--amber-ink); }
.plan-price .note { margin-top: 6px; font-size: 14px; color: var(--muted); }
.stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
}
.stats > div { background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column-reverse; gap: 2px; }
.stats dt { font-size: 13px; color: var(--muted); }
.stats dd { font-family: var(--f-display); font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
.stats dd.long { font-size: 17px; }
.plan .check-list { font-size: 16px; }
.plan .btn { margin-top: auto; }
.plan .btn-outline:hover { background: var(--bg); }

.cmp-title { margin-top: 28px; }
.table-box { margin-top: 40px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.ptable { width: 100%; border-collapse: collapse; font-size: 16px; }
.ptable th, .ptable td { padding: 14px 24px; text-align: left; border-bottom: 1px solid var(--line); }
.ptable thead th { padding: 18px 24px; border-bottom: 1px solid var(--ink); }
.ptable thead th.cat { width: 40%; font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ptable thead th.plan-col { width: 20%; }
.ptable .pn { display: block; font-family: var(--f-display); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.ptable .pp { display: block; font-family: var(--f-mono); font-size: 12px; font-weight: 500; color: var(--muted); }
.ptable .hl { background: var(--accent-tint); }
.ptable td.hl { font-weight: 600; }
.ptable tbody th[scope="row"] { font-weight: 400; }
.ptable .grp th {
  padding: 22px 24px 10px; font-family: var(--f-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}
.ptable .cv { display: inline-flex; align-items: center; gap: 8px; }
.ptable .yes { color: var(--ok); }
.ptable .no { color: var(--off); }

.rules {
  margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink);
}
.rules li { padding: 28px 28px 32px 28px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.rules li:nth-child(3n+1) { padding-left: 0; }
.rules li:nth-child(3n) { padding-right: 0; border-right: 0; }
.rules .top { display: flex; align-items: center; gap: 10px; }
.rules .n { font-family: var(--f-mono); font-size: 13px; color: var(--accent); }
.rules .top .i { color: var(--ink); }
.rules .b { display: flex; flex-direction: column; gap: 10px; }
.rules h3 { font-family: var(--f-display); font-size: 21px; line-height: 1.25; font-weight: 700; }
.rules p { font-size: 16px; line-height: 1.55; color: var(--muted); }
.rules-note { margin-top: 20px; display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--muted); }
.rules-note .i { color: var(--amber); }

.always {
  padding: 40px; border-radius: 6px; display: grid; grid-template-columns: 300px repeat(3, minmax(0, 1fr)); gap: 40px;
}
.always .eyebrow { color: var(--accent-on-dark); }
.always h2 { margin-top: 12px; font-family: var(--f-display); font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
.always-item { display: flex; flex-direction: column; gap: 10px; }
.always-item > .i { color: var(--accent-on-dark); }
.always-item .b { display: flex; flex-direction: column; gap: 10px; }
.always-item h3 { font-family: var(--f-display); font-size: 19px; font-weight: 700; }
.always-item p { font-size: 15px; line-height: 1.55; color: var(--on-dark-text); }
.sec-112 { padding-top: 112px; }
.sec-cta-112 { padding: 112px 0 120px; }
.cta-box-sm { padding: 56px 64px; }
.cta-box-sm h2 { font-size: 48px; line-height: 1.04; max-width: 720px; }

/* ---------- responsive: shared, home, pricing ---------- */
@media (max-width: 1199.98px) {
  .hero-h1 { font-size: clamp(56px, 6.6vw, 80px); }
  .price-h1 { font-size: clamp(52px, 6vw, 72px); }
  .h2 { font-size: clamp(40px, 4.4vw, 52px); }
  .cta-box h2 { font-size: clamp(40px, 4.6vw, 56px); }
  .cta-box-sm h2 { font-size: clamp(36px, 4vw, 48px); }
  .sec-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .sec-side { max-width: 640px; }
  .always { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .always > :first-child { grid-column: 1 / -1; }
  .steps, .steps-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .step-line { display: none; }
}
@media (max-width: 1023.98px) {
  :root { --gutter: 32px; }
  .hero-row, .sec-intro, .price-hero-row { grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
  .sec-row { flex-wrap: wrap; align-items: flex-start; }
  .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customers .wrap { flex-direction: column; align-items: stretch; gap: 16px; }
  .customers p { width: auto; }
  .cmp-cell { font-size: 18px; }
  .family { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .flow-arrow { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 4px 12px; }
  .flow-arrow svg { width: 120px; }
  .feature-trio { grid-template-columns: minmax(0, 1fr); }
  .plans-2 { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cta-box, .cta-box-sm { grid-template-columns: minmax(0, 1fr); padding: 48px; gap: 32px; align-items: start; }
  .cta-actions { width: auto; max-width: 360px; }
  .ft-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ft-brand { grid-column: 1 / -1; }
  .plan-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .plan-for { min-height: 0; }
  .aud-bar { flex-direction: column; align-items: flex-start; }
  .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rules li, .rules li:nth-child(3n+1), .rules li:nth-child(3n) { padding: 28px 28px 32px 0; border-right: 1px solid var(--line); }
  .rules li:nth-child(even) { padding: 28px 0 32px 28px; border-right: 0; }
  .always { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ptable th, .ptable td { padding: 12px 14px; }
  .ptable thead th { padding: 16px 14px; }
  .ptable .grp th { padding: 18px 14px 8px; }
}

/* phone (390 artboards) */
@media (max-width: 767.98px) {
  :root { --gutter: 20px; }
  body { font-size: 16px; }
  .sec { padding: 72px 0 0; }
  .sec-head { padding-top: 12px; font-size: 11px; }
  .sec-head .note { display: none; }
  .sec-intro, .sec-row { margin-top: 20px; display: block; }
  .sec-intro > p { margin-top: 14px; }
  .h2 { font-size: 32px; line-height: 1.06; }
  .dark-band { margin-top: 72px; padding: 56px 0; }
  .eyebrow { font-size: 11px; }

  .seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-top: 24px; }
  .seg-btn { height: 44px; padding: 0 8px; font-size: 14px; }

  .faq { margin-top: 24px; }
  .faq-grid { margin-top: 20px; display: block; }
  .faq-q { padding: 18px 0; gap: 16px; font-size: 17px; line-height: 1.3; }
  .faq-ic { width: 28px; height: 28px; }
  .faq-ic .i { width: 14px; height: 14px; }
  .faq-a { padding: 0 0 18px; font-size: 15px; line-height: 1.55; }

  .sec-cta, .sec-cta-112 { padding: 72px 0; }
  .cta-box, .cta-box-sm { display: block; padding: 28px 22px; }
  .cta-box h2 { font-size: 30px; line-height: 1.05; }
  .cta-actions { margin-top: 24px; gap: 10px; width: 100%; max-width: none; }
  .btn-split { padding: 0 20px; }

  .ft { padding: 40px var(--gutter) 28px; }
  .ft-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .ft-brand { gap: 10px; }
  .ft-brand .brand { gap: 8px; font-size: 17px; letter-spacing: 0; }
  .ft-brand .brand svg { width: 26px; height: 26px; }
  .ft-brand p { max-width: none; font-size: 14px; }
  .ft-col { gap: 8px; }
  .ft-h { font-size: 11px; }
  .ft-col-wrap { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 8px 20px; }
  .ft-col-wrap .ft-h { display: none; }
  .ft-bottom { margin-top: 28px; padding-top: 16px; font-size: 13px; }
  .ft-domain { display: none; }

  /* home */
  .hero { padding: 40px 0 0; }
  .hero-h1 { margin-top: 16px; font-size: 42px; line-height: 1; }
  .hero-row { margin-top: 20px; display: block; }
  .hero-lede { font-size: 18px; }
  .hero-ctas { margin-top: 24px; gap: 0; }
  .hero-btns { flex-direction: column; gap: 10px; }
  .hero-btns .btn, .hero-btns .btn-primary { padding: 0 20px; justify-content: space-between; }
  .hero-note { margin-top: 12px; font-size: 12px; }
  .scan-banner {
    margin-top: 20px; display: flex; align-items: center; gap: 8px; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
    color: var(--ink); text-decoration: none; font-size: 14px; line-height: 1.35;
  }
  .scan-banner:hover { color: var(--ink); }
  .scan-banner .badge-new { font-size: 10px; letter-spacing: 0; }
  .scan-banner .t { flex: 1; }
  .legend { padding-top: 20px; grid-template-columns: 1fr 1fr; gap: 16px 14px; }
  .legend li { gap: 8px; }
  .legend .mk { width: 20px; height: 20px; font-size: 10px; }
  .legend .t { font-size: 15px; }
  .legend .t + p { margin-top: 2px; font-size: 13px; line-height: 1.45; }
  .customers { padding: 48px 0 0; }
  .customers .wrap { gap: 14px; }
  .customers p { font-size: 14px; line-height: 1.6; }
  .logos { grid-template-columns: 1fr 1fr; gap: 10px; }
  .logos li { height: 48px; font-size: 11px; }
  .logos li:nth-child(5) { display: none; }
  .steps, .steps-5 { margin-top: 28px; display: block; }
  .step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 0; }
  .step-mark { flex-direction: column; align-items: center; gap: 0; }
  .step-n { width: 40px; height: 40px; font-size: 13px; }
  .step-line { display: block; width: 1.5px; height: auto; flex: 1; min-height: 16px; }
  .step:last-child .step-line { display: none; }
  .step-body { padding: 8px 0 24px; gap: 0; }
  .step h3 { font-size: 19px; letter-spacing: 0; }
  .step p { margin-top: 6px; font-size: 15px; line-height: 1.5; }
  .step .owner { margin-top: 6px; font-size: 11px; }
  .sec-side { gap: 0; }
  .sec-side > p { margin-top: 14px; }
  .sec-grid { margin-top: 20px; gap: 0; }
  .principles { display: block; margin-top: 28px; }
  .principles li, .principles li:nth-child(odd) {
    padding: 18px 0; border-right: 0; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px;
  }
  .principles .n { font-size: 12px; padding-top: 3px; }
  .principles .b { gap: 4px; }
  .principles h3 { font-size: 19px; letter-spacing: 0; }
  .principles p { font-size: 15px; line-height: 1.5; }
  .plans-2 { margin-top: 28px; gap: 24px; }
  .plans-2 h3 { margin-bottom: 4px; font-size: 11px; }
  .price-row { gap: 10px; padding: 14px 0; }
  .price-row b { font-size: 20px; letter-spacing: 0; }
  .price-row .d { font-size: 13px; }
  .price-row .lead { transform: none; }
  .price-row .p, .price-row .p-lg { font-size: 16px; }
  .price-row .p-tbd { font-size: 13px; font-weight: 400; }
  .plans-cta { margin-top: 20px; height: 48px; padding: 0 18px; font-size: 16px; }

  /* pricing */
  .price-hero { padding: 40px 0 0; }
  .price-hero-row { margin-top: 16px; display: block; }
  .price-h1 { font-size: 40px; }
  .price-lede { margin-top: 18px; font-size: 17px; }
  .aud-bar { margin-top: 28px; padding-top: 0; border-top: 0; display: block; }
  .aud-bar .seg { margin-top: 0; }
  .aud-btn { height: 56px; padding: 0 12px; }
  .aud-btn .l { font-size: 16px; }
  .aud-btn .h { font-size: 11px; }
  .aud-note { margin-top: 12px; font-size: 12px; line-height: 1.5; }
  .plans { padding: 24px 0 0; }
  .plan-grid { gap: 14px; max-width: none; }
  .plan-strip { height: 34px; padding: 0 18px; font-size: 11px; }
  .plan-body { padding: 18px 18px 20px; gap: 16px; }
  .plan h2 { font-size: 24px; }
  .plan-for { margin-top: 4px; font-size: 15px; line-height: 1.45; }
  .plan-price { padding: 12px 0; }
  .plan-price .v { font-size: 32px; }
  .plan-price .v-long { font-size: 26px; }
  .plan-price .v-tbd { font-size: 22px; }
  .plan-price .note { margin-top: 4px; font-size: 13px; }
  .stats > div { padding: 10px 12px; }
  .stats dt { font-size: 12px; }
  .stats dd { font-size: 22px; letter-spacing: 0; }
  .stats dd.long { font-size: 15px; }
  .plan .check-list { gap: 6px; font-size: 15px; }
  .plan .check-list li { gap: 8px; }
  .plan .btn { padding: 0 18px; }
  .sec-112 { padding-top: 64px; }
  .cmp-title { margin-top: 20px; font-size: 30px; }
  .table-box { margin-top: 20px; }
  .ptable { table-layout: fixed; font-size: 13px; line-height: 1.35; }
  .ptable th, .ptable td { padding: 10px 6px; overflow-wrap: anywhere; }
  .ptable tbody th[scope="row"] { padding: 10px; }
  .ptable thead th { padding: 12px 6px; }
  .ptable thead th.cat { width: 38%; padding: 12px 10px; font-size: 10px; letter-spacing: 0.1em; }
  .ptable thead th.plan-col { width: auto; }
  .ptable .pn { font-size: 14px; letter-spacing: 0; }
  .ptable .pp { display: none; }
  .ptable .grp th { padding: 16px 10px 6px; font-size: 10px; letter-spacing: 0.1em; }
  .ptable .cv { gap: 4px; }
  .ptable .cv .i { width: 12px; height: 12px; }
  .rules { margin-top: 24px; display: block; }
  .rules li, .rules li:nth-child(3n+1), .rules li:nth-child(3n), .rules li:nth-child(even) {
    padding: 16px 0; border-right: 0;
    display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px;
  }
  .rules .top { align-self: start; padding-top: 3px; }
  .rules .top .i { display: none; }
  .rules .n { font-size: 12px; }
  .rules .b { display: block; }
  .rules h3 { font-size: 18px; line-height: 1.6; }
  .rules p { margin-top: 4px; font-size: 15px; line-height: 1.5; }
  .rules-note { margin-top: 16px; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.5; }
  .rules-note .i { margin-top: 3px; }
  .sec-always { padding-top: 56px; }
  .always { display: flex; flex-direction: column; gap: 18px; padding: 24px 20px; }
  .always h2 { margin-top: 8px; font-size: 24px; line-height: 1.15; letter-spacing: 0; }
  .always-item { flex-direction: row; gap: 12px; padding-top: 16px; border-top: 1px solid var(--dark-line); }
  .always-item .b { display: block; }
  .always-item h3 { font-family: var(--f-body); font-size: 16px; }
  .always-item p { margin-top: 2px; font-size: 14px; line-height: 1.5; }
  .cta-box-sm h2 { font-size: 28px; line-height: 1.06; }
}

/* =========================================================
   Product UI mocks (drawn in the Access Hub app style)
   ========================================================= */
.am {
  margin-top: 56px; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden;
  background: var(--bg); box-shadow: 0 32px 64px -32px rgba(22, 24, 29, 0.35);
  font-family: var(--f-app); font-size: 13px; line-height: 18px; letter-spacing: 0.012em; color: var(--m-ink);
}
.am b, .amm b { font-weight: 700; }
.am-layout { display: grid; grid-template-columns: 56px minmax(0, 1fr); }
.am-rail { background: var(--surface); border-right: 1px solid var(--m-line); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; }
.am-rail-logo { margin-bottom: 10px; }
.am-rail-i { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--m-muted); }
.am-rail-i .i { width: 18px; height: 18px; }
.am-rail-i.is-on { background: var(--accent-soft); color: var(--accent); }
.am-main { min-width: 0; display: flex; flex-direction: column; }
.am-top {
  height: 52px; padding: 0 20px; display: flex; align-items: center; gap: 12px;
  background: var(--surface); border-bottom: 1px solid var(--m-line); white-space: nowrap;
}
.am-muted { color: var(--m-muted); }
.am-faint { color: var(--m-faint); }
.am-strong { font-weight: 600; }
.am-search {
  margin-left: auto; width: 220px; height: 32px; border: 1px solid var(--m-line-2); border-radius: 6px;
  display: flex; align-items: center; gap: 8px; padding: 0 10px; color: var(--m-faint);
}
.am-tbtn { height: 32px; border: 1px solid var(--m-line-2); border-radius: 6px; display: flex; align-items: center; gap: 8px; padding: 0 10px; }
.am-bell { position: relative; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--m-text); }
.am-bell-dot { position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border-radius: 999px; background: var(--m-red); }
.am-avatar {
  width: 30px; height: 30px; flex: none; border-radius: 999px; background: var(--m-dark); color: var(--m-on-dark);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.am-body { padding: 20px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.am-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.am-card {
  background: var(--surface); border: 1px solid var(--m-line); border-radius: 12px; box-shadow: var(--m-shadow);
  padding: 20px; display: flex; flex-direction: column; gap: 18px;
}
.am-card-sm { padding: 16px 20px; gap: 10px; }
.am-card-side { padding: 18px 20px; gap: 14px; }
.am-title { display: flex; align-items: center; gap: 8px; }
.am-req-head { display: flex; align-items: flex-start; gap: 12px; }
.am-ic40 {
  width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--m-blue-soft); color: var(--m-blue);
  display: flex; align-items: center; justify-content: center;
}
.am-ic32 {
  width: 32px; height: 32px; flex: none; border-radius: 8px; background: var(--m-blue-soft); color: var(--m-blue);
  display: flex; align-items: center; justify-content: center;
}
.am-req-title { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.am-h { font-size: 16px; line-height: 22px; font-weight: 600; }
.am-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.am-code { font-family: var(--f-code); font-size: 12px; background: var(--m-chip); border-radius: 4px; padding: 1px 6px; }
.am-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px;
  border: 1px solid; font-size: 12px; white-space: nowrap;
}
.am-pdot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.am-pill-amber { border-color: var(--m-amber-border); background: var(--m-amber-pill); color: var(--m-amber); }
.am-pill-amber .am-pdot { background: var(--m-amber-dot); }
.am-pill-green { border-color: var(--m-green-border); background: var(--m-green-soft); color: var(--m-green); }
.am-pill-green .am-pdot { background: var(--m-green-dot); }
.am-actions { display: flex; gap: 8px; }
.am-b {
  height: 32px; padding: 0 12px; border: 1px solid var(--m-line-2); border-radius: 6px; background: var(--surface);
  display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
}
.am-b-dark { padding: 0 14px; border-color: var(--m-dark); background: var(--m-dark); color: var(--m-on-dark); }
.am-dl {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; padding: 14px 16px;
  background: var(--m-subtle); border: 1px solid var(--m-line); border-radius: 8px;
}
.am-dl dt, .amm-dl dt { font-size: 12px; color: var(--m-muted); display: flex; align-items: center; gap: 6px; }
.am-dl dd, .amm-dl dd { margin-top: 2px; font-weight: 600; }
.am-dl dd.sub { margin-top: 0; font-size: 12px; font-weight: 400; color: var(--m-muted); }
.am-dl dd.code, .amm-dl dd.code { font-family: var(--f-code); }
.am-dl dd.plain { font-weight: 400; }
.am-dl .span2, .amm-dl .span2 { grid-column: span 2; }
.am-chain { display: flex; flex-direction: column; gap: 10px; }
.am-label {
  font-size: 12px; font-weight: 500; letter-spacing: 0.025em; text-transform: uppercase; color: var(--m-muted);
  display: flex; align-items: center; gap: 6px;
}
.am-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.am-steps li { display: flex; flex-direction: column; gap: 8px; }
.am-sm { display: flex; align-items: center; gap: 6px; }
.am-d, .am-d24 {
  width: 28px; height: 28px; flex: none; border-radius: 999px; display: flex; align-items: center; justify-content: center;
}
.am-d24 { width: 24px; height: 24px; }
.am-d-done { background: var(--m-dark); color: var(--m-on-dark); }
.am-d-wait { border: 2px solid var(--m-amber-2); background: var(--m-amber-soft); color: var(--m-amber-2); }
.am-d-todo { border: 1px solid var(--m-line); background: var(--surface); color: var(--m-faint); font-size: 12px; font-weight: 700; }
.am-ln { flex: 1; height: 2px; background: var(--m-dark); margin-right: 6px; }
.am-ln-off { background: var(--m-line); }
.am-small { font-size: 12px; color: var(--m-muted); }
.am-warn { color: var(--m-amber); }
.am-log { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 6px 12px; font-size: 12px; }
.am-log .t { font-family: var(--f-code); color: var(--m-muted); }
.am-spread { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.am-name { font-size: 15px; font-weight: 600; }
.am-metric { display: flex; flex-direction: column; gap: 4px; }
.am-metric-bar { gap: 6px; }
.am-small-row { font-size: 12px; }
.am-spark { width: 100%; height: 44px; display: block; }
.am-spark-fill { fill: var(--m-chart-fill); }
.am-spark-line { fill: none; stroke: var(--m-chart); stroke-width: 2; stroke-linejoin: round; }
.am-bar { height: 6px; border-radius: 999px; background: var(--m-track); }
.am-bar > span { display: block; height: 6px; border-radius: 999px; background: var(--m-chart); }
.am-foot { font-size: 12px; color: var(--m-muted); border-top: 1px solid var(--m-line); padding-top: 10px; }
.am-att { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; }
.am-att b { font-size: 13px; }
.am-ic28 {
  width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--m-chip); color: var(--m-muted);
  display: flex; align-items: center; justify-content: center;
}
.am-ic28-amber { background: var(--m-amber-soft); color: var(--m-amber-2); }
.mk-xs { width: 16px; height: 16px; font-size: 9px; }

/* compact phone mock */
.amm {
  margin-top: 32px; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; background: var(--bg);
  box-shadow: 0 24px 48px -24px rgba(22, 24, 29, 0.35);
  font-family: var(--f-app); font-size: 12px; line-height: 17px; letter-spacing: 0.012em; color: var(--m-ink);
}
.amm-top {
  height: 44px; padding: 0 12px; display: flex; align-items: center; gap: 8px;
  background: var(--surface); border-bottom: 1px solid var(--m-line); white-space: nowrap; overflow: hidden;
}
.amm-avatar { margin-left: auto; width: 24px; height: 24px; font-size: 9px; }
.amm-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.amm-card {
  background: var(--surface); border: 1px solid var(--m-line); border-radius: 12px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  padding: 14px; display: flex; flex-direction: column; gap: 12px;
}
.amm-head { display: flex; gap: 10px; align-items: flex-start; }
.amm-ttl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.amm-h { font-size: 14px; line-height: 19px; font-weight: 600; }
.amm-pill { align-self: flex-start; height: 20px; font-size: 11px; }
.amm-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 12px; background: var(--m-subtle); border: 1px solid var(--m-line); border-radius: 8px; }
.amm-dl dt { font-size: 11px; gap: 4px; }
.amm-dl dd.code { font-size: 11px; font-weight: 400; }
.amm-chain { display: flex; flex-direction: column; }
.amm-chain li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; }
.amm-chain .rail { display: flex; flex-direction: column; align-items: center; }
.amm-chain .v { width: 2px; height: 12px; background: var(--m-dark); }
.amm-chain .v-off { background: var(--m-line); }
.amm-chain .inl { display: flex; align-items: center; gap: 6px; }
.amm-chain .am-d-todo { font-size: 12px; }
.amm-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.amm-acts .am-b { height: 34px; }
.amm-srv { padding: 12px 14px; flex-direction: row; align-items: center; gap: 12px; }
.amm-srv-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.amm-srv-t .lbl { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--m-muted); }
.amm-11 { font-size: 11px; }
.amm-spark { width: 90px; height: 36px; flex: none; }

@media (max-width: 1199.98px) {
  .am-body { grid-template-columns: minmax(0, 1fr) 260px; }
}
@media (max-width: 1023.98px) {
  .am-body { grid-template-columns: minmax(0, 1fr); }
  .am-search { display: none; }
  .am-tbtn { margin-left: auto; }
}
@media (max-width: 767.98px) {
  .h2-m30 { font-size: 30px; }
  .faq-m20 { margin-top: 20px; }
  .cta-box-sm .cta-actions { margin-top: 22px; }
}


/* =========================================================
   Shared helpers for product pages
   ========================================================= */
.tone-green { border-color: var(--m-green-border); background: var(--m-green-soft); color: var(--m-green); --dot: var(--m-green-dot); }
.tone-amber { border-color: var(--m-amber-border); background: var(--m-amber-pill); color: var(--m-amber); --dot: var(--m-amber-dot); }
.tone-red { border-color: rgba(220, 38, 38, 0.3); background: rgba(239, 68, 68, 0.1); color: #b91c1c; --dot: var(--m-red); }
.tone-orange { border-color: rgba(234, 88, 12, 0.3); background: rgba(249, 115, 22, 0.1); color: #c2410c; --dot: #ec835a; }
.tone-grey { border-color: var(--m-line); background: var(--m-chip); color: var(--m-muted); --dot: #898781; }
.am-pill-amber { --dot: var(--m-amber-dot); }
.am-pill-green { --dot: var(--m-green-dot); }
.am-pdot { background: var(--dot, currentColor); }
.am-pill-amber .am-pdot, .am-pill-green .am-pdot { background: var(--dot); }

.tile { display: flex; align-items: center; justify-content: center; flex: none; border-radius: 8px; }
.t32 { width: 32px; height: 32px; }
.t36 { width: 36px; height: 36px; border-radius: 10px; }
.t40 { width: 40px; height: 40px; }
.t44 { width: 44px; height: 44px; }
.tint-blue { background: rgba(59, 130, 246, 0.1); color: #2563eb; }
.tint-green { background: rgba(16, 185, 129, 0.1); color: #059669; }
.tint-amber { background: rgba(245, 158, 11, 0.1); color: #d97706; }
.tint-red { background: rgba(239, 68, 68, 0.1); color: #dc2626; }
.tint-violet { background: rgba(139, 92, 246, 0.1); color: #7c3aed; }
.tint-sky { background: rgba(14, 165, 233, 0.1); color: #0284c7; }
.tint-lime { background: rgba(132, 204, 22, 0.12); color: #4d7c0f; }
.tint-cyan { background: rgba(6, 182, 212, 0.1); color: #0891b2; }
.tint-teal { background: rgba(20, 184, 166, 0.1); color: #0d9488; }
.tint-accent { background: var(--accent-soft); color: var(--accent); }
.tint-grey { background: var(--m-chip); color: var(--m-text); }
.tint-grey2 { background: var(--m-chip); color: var(--m-muted); }
.tint-soft { background: var(--footer-bg); color: var(--ink); }

.inline-code { font-family: var(--f-mono); font-size: 14px; background: var(--footer-bg); padding: 0 4px; border-radius: 3px; }
.kw { color: var(--accent-on-dark); }
.cm { color: var(--placeholder-ink); }

/* product hero */
.pp-hero { padding: 72px 0 0; }
.pp-id { display: flex; align-items: center; gap: 14px; }
.pp-id > svg { flex: none; }
.pp-id .n { font-family: var(--f-display); font-weight: 700; font-size: 20px; }
.pp-id-stack { display: flex; flex-direction: column; gap: 6px; }
.pp-id-stack .tag-soon { align-self: flex-start; }
.eyebrow-amber { color: var(--amber); }
.pp-h1 { margin-top: 28px; max-width: 1000px; font-family: var(--f-display); font-size: 68px; line-height: 1; font-weight: 800; letter-spacing: -0.04em; }
.pp-h1 .accent { color: var(--accent); }
.pp-h1-free { max-width: none; }
.pp-row { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 64px; align-items: end; }
.pp-row-460 { grid-template-columns: minmax(0, 1fr) 460px; }
.pp-lede { max-width: 640px; font-size: 21px; line-height: 1.55; color: var(--muted); }
.pp-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.pp-btns .btn-primary { padding: 0 24px; }
.pp-note { font-family: var(--f-mono); font-size: 13px; color: var(--muted); }
.pp-caption { margin-top: 16px; }
.pp-split { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 56px; align-items: start; }
.pp-split-420 { grid-template-columns: minmax(0, 1fr) 420px; gap: 64px; }
.pp-stack { display: flex; flex-direction: column; gap: 24px; }

.sec-head + .h2 { margin-top: 28px; }
.h2-860 { max-width: 860px; }
.h2-820 { max-width: 820px; }
.h2-44 { font-size: 44px; line-height: 1.06; }
.mt-40 { margin-top: 40px; }
.mt-48 { margin-top: 48px; }
.mt-20 { margin-top: 20px; }
.note-p { margin-top: 20px; font-size: 15px; color: var(--muted); }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.card-sm { padding: 24px; gap: 10px; }
.card-26 { padding: 26px; gap: 14px; }
.card-28 { padding: 28px; gap: 10px; }
.card-static:hover { border-color: var(--line); }
.card .t19 { font-family: var(--f-display); font-size: 19px; font-weight: 700; }
.card h3.h21 { margin: 0; font-size: 21px; line-height: 1.6; letter-spacing: 0; }
.card h3.h22 { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; }
.card h3.h20 { margin: 0; font-size: 20px; line-height: 1.6; letter-spacing: 0; }
.card p.m { font-size: 16px; line-height: 1.55; color: var(--muted); }
.card p.s { font-size: 15px; line-height: 1.5; color: var(--muted); }
.card .foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.card > .i { color: var(--accent); }
.card > .i.c-teal { color: var(--c-agent); }

/* column rows separated by vertical rules */
.colrow { display: grid; border-top: 1px solid var(--ink); }
.colrow-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.colrow-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.colrow > li, .colrow > div { padding: 28px 24px 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.colrow > :first-child { padding-left: 0; }
.colrow > :last-child { padding-right: 0; border-right: 0; }
.colrow .n { font-family: var(--f-mono); font-size: 13px; color: var(--accent); }
.colrow h3 { font-family: var(--f-display); font-size: 21px; font-weight: 700; }
.colrow p { font-size: 16px; line-height: 1.55; color: var(--muted); }
.colrow-violet .n { color: var(--c-collector); }
.colrow-fn > div { padding: 24px 20px 28px; gap: 14px; }
.colrow-fn > :first-child { padding-left: 0; }
.colrow-fn > :last-child { padding-right: 0; }
.colrow-fn h3 { font-size: 22px; letter-spacing: -0.01em; }
.colrow-fn ul { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--muted); }

/* spec tables (agent, collector) */
.spec-table { margin-top: 40px; width: 100%; border-collapse: collapse; font-size: 17px; }
.spec-table thead th {
  padding: 12px 0; text-align: left; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line);
  font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.spec-table tbody th { padding: 20px 0; text-align: left; border-bottom: 1px solid var(--line); font-family: var(--f-display); font-weight: 700; vertical-align: top; }
.spec-table td { padding: 20px 24px 20px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table td:last-child { padding-right: 0; }
.spec-table .w220 { width: 220px; }
.spec-table .w260 { width: 260px; }
.spec-table .w380 { width: 380px; }
.spec-table-18 tbody th, .spec-table-18 td { padding-top: 18px; padding-bottom: 18px; }
.spec-table .why { color: var(--muted); }
.stage {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border: 1px solid; border-radius: 999px;
  font-size: 14px; white-space: nowrap;
}
.stage .am-pdot { width: 7px; height: 7px; border-radius: 999px; }
.stage-sm {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; margin-left: 6px; border: 1px solid; border-radius: 999px;
  font-size: 13px; white-space: nowrap; vertical-align: middle;
}
.stage-sm .am-pdot { width: 6px; height: 6px; border-radius: 999px; }

/* dark code block */
.code-card { background: var(--dark-bg); color: #e8e9ee; border-radius: 6px; overflow: hidden; font-family: var(--f-mono); font-size: 13px; line-height: 1.7; }
.code-card-head { padding: 10px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; color: var(--on-dark-muted); font-size: 12px; }
.code-card pre { margin: 0; padding: 16px; white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; }
.code-card pre.out { padding: 0 16px 16px; color: var(--on-dark-muted); }

/* =========================================================
   Access Hub product page
   ========================================================= */
.am-hub { margin-top: 56px; }
.am-content { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.am-pagehead { display: flex; align-items: center; gap: 12px; }
.am-pagehead .t { flex: 1; min-width: 0; }
.am-pagehead .ttl { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.025em; }
.am-b36 { height: 36px; }
.am-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.am-tile {
  background: var(--surface); border: 1px solid var(--m-line); border-radius: 12px; padding: 12px 16px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); display: flex; align-items: center; gap: 12px; min-width: 0;
}
.am-tile .v { font-size: 22px; line-height: 28px; font-weight: 600; }
.am-tile .l { font-size: 12px; color: var(--m-muted); }
.am-tablecard { background: var(--surface); border: 1px solid var(--m-line); border-radius: 12px; box-shadow: var(--m-shadow); overflow: hidden; }
.am-filter { padding: 12px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--m-line); }
.am-env { display: inline-flex; padding: 3px; gap: 2px; background: var(--m-chip); border-radius: 8px; flex: none; }
.am-env button {
  height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--m-muted);
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-app); font-size: 13px; cursor: pointer; white-space: nowrap;
}
.am-env button .c { padding: 0 6px; border-radius: 999px; background: #ebebeb; font-size: 11px; line-height: 16px; }
.am-env button[aria-selected="true"] { background: var(--surface); color: var(--m-ink); }
.am-env button[aria-selected="true"] .c { background: var(--m-chip); }
.am-search-240 { width: 240px; }
.am-tbtn-sm { height: 32px; padding: 0 10px; gap: 6px; }
.am-scroll { overflow-x: auto; }
.am-table { width: 100%; border-collapse: collapse; }
.am-table th {
  height: 38px; padding: 0 12px; text-align: left; font-size: 12px; font-weight: 500; letter-spacing: 0.025em;
  text-transform: uppercase; color: var(--m-muted); background: var(--m-subtle); border-bottom: 1px solid var(--m-line); white-space: nowrap;
}
.am-table td { padding: 10px 12px; border-bottom: 1px solid var(--m-line); }
.am-table th:first-child, .am-table td:first-child { padding-left: 16px; }
.am-table th:last-child, .am-table td:last-child { padding-right: 16px; }
.am-table td.nm { font-weight: 600; }
.am-table td.ip { font-family: var(--f-code); font-size: 12px; }
.am-table td.os, .am-table td.ow { color: var(--m-text); }
.am-cpu { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.am-cpu .bar { width: 64px; height: 6px; flex: none; border-radius: 999px; background: var(--m-track); }
.am-cpu .bar > span { display: block; height: 6px; border-radius: 999px; background: var(--m-chart); }
.am-cpu .bar > span.hot { background: #eda100; }
.am-cpu .lb { font-size: 12px; color: var(--m-text); }
.am-pager { padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; color: var(--m-muted); }
.am-pager .pg { display: flex; gap: 6px; }
.am-pager .pg span { width: 28px; height: 28px; border: 1px solid var(--m-line-2); border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.am-pager .pg span.on { background: var(--m-dark); color: var(--m-on-dark); }

.split-520 { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 72px; align-items: start; }
.split-col { display: flex; flex-direction: column; gap: 24px; }
.split-col > p { color: var(--muted); }
.abc { border-top: 1px solid var(--line); }
.abc li { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
.abc .k { font-family: var(--f-mono); font-size: 13px; color: var(--accent); }
.abc .d { display: block; font-size: 15px; color: var(--muted); }
.chain-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 28px;
  font-family: var(--f-app); font-size: 13px; line-height: 18px; color: var(--m-ink); display: flex; flex-direction: column; gap: 18px;
}
.chain-head { display: flex; align-items: center; gap: 12px; }
.chain-head .t { flex: 1; min-width: 0; }
.chain-head .ttl { font-weight: 600; font-size: 15px; }
.chain-head .code { font-size: 12px; color: var(--m-muted); font-family: var(--f-code); }
.vchain li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; }
.vchain .rail { display: flex; flex-direction: column; align-items: center; }
.vchain .rail .v { flex: 1; width: 2px; min-height: 22px; background: var(--m-dark); }
.vchain .txt { padding-bottom: 16px; }
.vchain li:last-child .txt { padding-bottom: 0; }
.vchain .txt b { display: block; font-weight: 600; }
.vchain .txt span { display: block; font-size: 12px; color: var(--m-muted); }
.am-d-ok { border: 2px solid #059669; background: rgba(16, 185, 129, 0.1); color: #059669; }

.org-grid { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; }
.org-map { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 32px; display: flex; flex-direction: column; align-items: center; }
.org-parent { padding: 16px 22px; border: 2px solid var(--ink); border-radius: 6px; background: var(--surface); display: flex; align-items: center; gap: 12px; }
.org-parent .k { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--muted); }
.org-parent b { font-family: var(--f-display); font-size: 18px; }
.org-lines { width: 100%; max-width: 600px; height: 70px; display: block; }
.org-subs { width: 100%; max-width: 680px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.org-sub { padding: 14px 16px; border: 1.5px solid var(--accent); border-radius: 6px; background: var(--accent-tint); display: flex; flex-direction: column; gap: 4px; }
.org-sub b { font-size: 16px; }
.org-sub .d { font-size: 14px; color: var(--muted); }
.org-sub .s { font-family: var(--f-mono); font-size: 12px; color: var(--accent); }
.org-sub-off { border: 1.5px dashed var(--faint); background: transparent; color: var(--muted); }
.org-sub-off b { color: var(--ink); }
.org-sub-off .d { color: var(--muted); }
.org-sub-off .s { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.org-sub-off .s .i { width: 13px; height: 13px; }
.org-map > p { margin-top: 24px; font-size: 15px; color: var(--muted); text-align: center; }
.switcher {
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 20px;
  font-family: var(--f-app); font-size: 13px; line-height: 18px; color: var(--m-ink); display: flex; flex-direction: column; gap: 10px;
}
.switcher .k { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--muted); }
.switcher .sel { height: 36px; border: 1px solid var(--m-dark); border-radius: 6px; display: flex; align-items: center; gap: 8px; padding: 0 10px; }
.switcher .sel .end { margin-left: auto; }
.switcher .menu { border: 1px solid var(--m-line); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.switcher .menu > span { padding: 8px 10px; border-radius: 6px; }
.switcher .menu > span.on { background: var(--m-chip); display: flex; align-items: center; justify-content: space-between; }
.switcher .menu > span.grp { padding: 4px 10px 2px; font-size: 11px; color: var(--m-faint); text-transform: uppercase; letter-spacing: 0.025em; }
.switcher > p { margin-top: 4px; font-size: 12px; color: var(--m-muted); }

.two-col { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
.two-col > div { display: flex; flex-direction: column; gap: 20px; }
.two-col > div > p { color: var(--muted); }
.two-col .check-list { gap: 10px; font-size: 16px; }
.links-row { display: flex; flex-wrap: wrap; gap: 24px; font-size: 16px; font-weight: 600; }

/* =========================================================
   Agent page
   ========================================================= */
.agent-lede { margin-top: 28px; max-width: 560px; }
.agent-btns { margin-top: 32px; }
.agent-note { margin-top: 20px; }
.term {
  margin-top: 8px; background: var(--dark-bg); color: #e8e9ee; border-radius: 8px; overflow: hidden;
  box-shadow: 0 32px 64px -32px rgba(22, 24, 29, 0.45);
}
.term-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.term-tabs button {
  height: 38px; padding: 0 14px; border: 0; border-radius: 4px 4px 0 0; background: transparent; color: var(--on-dark-muted);
  font-family: var(--f-mono); font-size: 12px; cursor: pointer;
}
.term-tabs button:hover { color: #fff; }
.term-tabs button[aria-selected="true"] { background: rgba(255, 255, 255, 0.1); color: #fff; }
.term-body { padding: 20px; font-family: var(--f-mono); font-size: 13px; line-height: 1.75; }
.term-body pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; }
.term-body p { margin-top: 16px; color: var(--on-dark-muted); font-size: 12px; line-height: 1.6; }
.term-foot { padding: 14px 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--on-dark-text); }
.term-foot .i { margin-top: 3px; color: var(--accent-on-dark); }

.budget { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.budget > div { padding: 28px 28px 0; border-right: 1px solid var(--line); }
.budget > div:first-child { padding-left: 0; }
.budget > div:last-child { padding-right: 0; border-right: 0; }
.budget dt { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.budget dd.big { margin-top: 10px; font-family: var(--f-display); font-size: 120px; line-height: 0.95; font-weight: 800; letter-spacing: -0.05em; }
.budget .pre { font-size: 32px; letter-spacing: -0.01em; font-weight: 600; color: var(--muted); }
.budget .unit { font-size: 48px; letter-spacing: -0.02em; }
.budget dd.sub { margin-top: 12px; font-size: 16px; color: var(--muted); }

.wal { margin-top: 40px; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.wal-bars { display: flex; align-items: flex-end; gap: 4px; height: 72px; }
.wal-bars span { flex: 1; min-width: 0; border-radius: 2px; }
.wal-bars .s { background: var(--c-agent); }
.wal-bars .w { background: transparent; border: 1.5px dashed var(--amber); }
.wal-bars .b { background: var(--accent); }
.wal-legend { margin-top: 14px; display: grid; grid-template-columns: 14fr 12fr 14fr; gap: 4px; font-family: var(--f-mono); font-size: 12px; }
.wal-legend span { padding-top: 8px; }
.wal-legend .s { border-top: 2px solid var(--c-agent); color: var(--ink); }
.wal-legend .w { border-top: 2px dashed var(--amber); color: var(--amber-ink); }
.wal-legend .b { border-top: 2px solid var(--accent); color: var(--accent); }

.lic-steps { margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); font-family: var(--f-mono); font-size: 13px; }
.lic-steps li { padding: 14px 16px; border: 1px solid var(--ink); border-left: 0; display: flex; flex-direction: column; gap: 4px; }
.lic-steps li:first-child { border-left: 1px solid var(--ink); border-radius: 4px 0 0 4px; }
.lic-steps li:last-child { border-radius: 0 4px 4px 0; background: var(--ink); color: #fff; }
.lic-steps .n { color: var(--accent); }
.lic-steps li:last-child .n { color: var(--accent-on-dark); }
.lic-card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.lic-card .kicker { letter-spacing: 0.12em; }
.lic-card h3 { font-family: var(--f-display); font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
.lic-card .check-list { font-size: 16px; }
.check-teal .i { color: var(--c-agent); }

.oos-grid { margin-top: 28px; display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 72px; }
.oos-side { display: flex; flex-direction: column; gap: 20px; }
.oos-side > p { color: var(--muted); }
.oos-side .link-arrow { font-size: 16px; }
.oos-big { border-top: 1px solid var(--ink); }
.oos-big li {
  padding: 22px 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 18px;
  font-family: var(--f-display); font-size: 26px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3;
}
.oos-big .i { width: 24px; height: 24px; color: #b91c1c; }

/* =========================================================
   Collector page
   ========================================================= */
.pipe {
  margin-top: 56px; padding: 32px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px;
  box-shadow: 0 32px 64px -32px rgba(22, 24, 29, 0.3);
}
.pipe-grid { display: grid; grid-template-columns: 170px 70px 180px 70px minmax(0, 1fr) 80px 190px; align-items: center; }
.pipe-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; transition: opacity 0.2s ease; }
.pipe-col-10 { gap: 10px; }
.pipe-k { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--muted); }
.pipe-srv { font-family: var(--f-mono); font-size: 12px; }
.pipe-srv .h { padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; display: flex; align-items: center; gap: 8px; }
.pipe-srv .h::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c-agent); flex: none; }
.pipe-srv .more { color: var(--muted); }
.pipe-arrow { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 6px; font-family: var(--f-mono); font-size: 10px; color: var(--muted); text-align: center; }
.pipe-arrow svg { width: 100%; height: 12px; display: block; }
.pipe-arrow svg.gap { margin-top: 18px; }
.pipe-node {
  padding: 12px; border: 1.5px solid var(--c-collector); border-radius: 4px; background: rgba(109, 79, 224, 0.06);
  display: flex; flex-direction: column; gap: 2px; transition: opacity 0.2s ease;
}
.pipe-node b { font-family: var(--f-mono); font-size: 13px; }
.pipe-node .d { font-size: 13px; color: var(--muted); }
.pipe-worker { padding: 14px; gap: 8px; }
.pipe-chips { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--f-mono); font-size: 11px; }
.pipe-chips span { padding: 2px 8px; border: 1px solid #d4cbf7; border-radius: 3px; background: var(--surface); }
.pipe-stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font-family: var(--f-mono); font-size: 12px; }
.pipe-stores span { padding: 10px; border: 1px solid var(--line); border-radius: 4px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.pipe-stores .i { width: 14px; height: 14px; color: var(--muted); }
.pipe-hub { padding: 16px; border: 1px solid var(--ink); border-radius: 4px; display: flex; align-items: center; gap: 10px; }
.pipe-hub > svg { flex: none; }
.pipe-hub b { font-family: var(--f-display); font-size: 16px; display: block; }
.pipe-hub .d { display: block; font-size: 12px; color: var(--muted); }
.is-dim { opacity: 0.3; }

.cmd {
  margin-top: 40px; padding: 16px 20px; background: var(--dark-bg); color: #e8e9ee; border-radius: 6px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-family: var(--f-mono); font-size: 15px;
}
.cmd .p { color: var(--accent-on-dark); }
.cmd .f { color: var(--amber-soft); }
.cmd .note { margin-left: auto; font-size: 12px; color: var(--on-dark-muted); }
.role-card { background: var(--surface); border: 1.5px solid var(--c-collector); border-radius: 6px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.role-card.is-off { border: 1px dashed var(--placeholder-line); }
.role-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.role-head code { font-family: var(--f-mono); font-size: 22px; font-weight: 600; }
.role-btn {
  height: 32px; padding: 0 12px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: #fff;
  font-size: 14px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap;
}
.role-btn .i { width: 14px; height: 14px; }
.role-btn .ic-off, .role-btn .lb-off { display: none; }
.role-btn[aria-pressed="false"] { background: var(--surface); color: var(--ink); }
.role-btn[aria-pressed="false"] .ic-on, .role-btn[aria-pressed="false"] .lb-on { display: none; }
.role-btn[aria-pressed="false"] .ic-off { display: inline; }
.role-btn[aria-pressed="false"] .lb-off { display: inline; }
.role-card > p { font-size: 16px; line-height: 1.55; }
.role-card > p.trait { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--c-collector); line-height: 1.6; }

.tiers { margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: end; }
.tier { display: flex; flex-direction: column; gap: 14px; }
.tier .bar { border-radius: 4px 4px 0 0; border-bottom: 2px solid var(--ink); }
.tier .k { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-collector); }
.tier b { font-family: var(--f-display); font-size: 20px; line-height: 1.25; }
.tier p { font-size: 15px; line-height: 1.5; color: var(--muted); }
.tier-1 .bar { height: 64px; background: rgba(109, 79, 224, 0.15); }
.tier-2 .bar { height: 120px; background: rgba(109, 79, 224, 0.3); }
.tier-3 .bar { height: 184px; background: rgba(109, 79, 224, 0.55); }
.tier-4 .bar { height: 248px; background: var(--c-collector); }
.cloud-band {
  margin-top: 40px; padding: 28px 32px; border-radius: 6px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: center;
}
.cloud-band .eyebrow { color: var(--accent-on-dark); }
.cloud-band .t { margin-top: 8px; font-family: var(--f-display); font-size: 22px; line-height: 1.2; font-weight: 700; }
.cloud-band .r { display: flex; flex-direction: column; gap: 12px; }
.cloud-band .r p { font-size: 16px; line-height: 1.55; color: var(--on-dark-text); }
.cloud-chips { display: flex; gap: 8px; flex-wrap: wrap; font-family: var(--f-mono); font-size: 13px; }
.cloud-chips span { padding: 4px 10px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 3px; }
.cloud-chips span.hl { border-color: var(--accent-on-dark); color: var(--accent-on-dark); }

.retention { margin-top: 40px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.retention > div { padding: 18px 20px; background: var(--surface); }
.retention dt { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.retention dd { margin-top: 6px; font-family: var(--f-display); font-size: 26px; font-weight: 700; }
.retention dd.sm { font-size: 22px; line-height: 1.6; }
.timeline { margin-top: 20px; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.timeline-bar, .timeline-legend { display: grid; grid-template-columns: 1fr 3fr 1.4fr; }
.timeline-bar { height: 14px; }
.timeline-bar span:nth-child(1) { background: var(--ink); border-radius: 3px 0 0 3px; }
.timeline-bar span:nth-child(2) { background: var(--amber-soft); border-top: 2px dashed var(--amber); border-bottom: 2px dashed var(--amber); }
.timeline-bar span:nth-child(3) { background: var(--line); border-radius: 0 3px 3px 0; }
.timeline-legend { margin-top: 14px; gap: 16px; }
.timeline-legend b { font-family: var(--f-mono); font-size: 13px; }
.timeline-legend b.am { color: var(--amber-ink); }
.timeline-legend p { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--muted); }

/* =========================================================
   Access Hub Scanner page
   ========================================================= */
.scan-hero-l { padding-top: 8px; }
.scan-h1 { font-family: var(--f-display); font-size: 80px; line-height: 0.98; font-weight: 800; letter-spacing: -0.04em; }
.scan-sub { font-family: var(--f-display); font-size: 30px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }
.scan-sub .amb { color: var(--amber); }
.scan-lede { font-size: 20px; line-height: 1.55; color: var(--muted); }
.am-scan { margin-top: 0; }
.am-top-48 { height: 48px; padding: 0 18px; gap: 10px; }
.am-top-48 .am-tbtn { margin-left: auto; height: 30px; gap: 6px; font-size: 12px; }
.am-pad18 { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.am-card-16 { gap: 16px; }
.am-dl-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.am-dl dd.code12 { font-family: var(--f-code); font-size: 12px; font-weight: 400; }
.am-dl dd.red { color: #b91c1c; font-weight: 600; }
.am-dl dd.n { font-weight: 400; }
.am-dl .mask { color: var(--m-faint); }
.am-hosts { display: flex; flex-wrap: wrap; gap: 6px; }
.am-hosts span { height: 26px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--m-line); border-radius: 6px; background: var(--surface); }
.am-hosts .i { width: 13px; height: 13px; color: #7c3aed; }
.am-info { padding: 12px 14px; border: 1px solid var(--m-line); border-radius: 8px; display: flex; gap: 10px; }
.am-info .i { color: #0284c7; margin-top: 1px; }
.am-end { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.am-lockline { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--m-muted); }
.am-lockline .i { width: 14px; height: 14px; }

.flowbox-grid { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1fr); align-items: stretch; }
.flowbox { border: 1px solid var(--dark-line-strong); border-radius: 6px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.flowbox-out { border: 1.5px solid var(--accent-on-dark); background: rgba(124, 147, 255, 0.06); }
.flowbox-head { display: flex; align-items: center; gap: 12px; }
.flowbox-head .tile { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.08); }
.flowbox-head .k { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--on-dark-muted); }
.flowbox-out .flowbox-head .k { color: var(--accent-on-dark); }
.flowbox-head .t { font-family: var(--f-display); font-size: 22px; font-weight: 700; }
.flowbox ul { font-size: 17px; }
.flowbox li { padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; gap: 10px; }
.flowbox li .i { margin-top: 5px; color: var(--on-dark-muted); }
.flowbox-out li { justify-content: space-between; gap: 16px; }
.flowbox-out li .v { font-family: var(--f-mono); font-size: 13px; color: var(--on-dark-muted); white-space: nowrap; }
.flowbox-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; font-family: var(--f-mono); font-size: 11px; color: var(--accent-on-dark); text-align: center; }
.flowbox-mid svg { width: 100%; height: 12px; }
.dark-note { margin-top: 32px; font-size: 16px; color: var(--on-dark-text); max-width: 860px; }
.dark .sec-intro > p { color: var(--on-dark-muted); }

.rules-22 h3 { font-size: 22px; line-height: 1.6; letter-spacing: -0.01em; }
.rules-22 li { padding-bottom: 28px; }

.road { margin-top: 48px; display: grid; grid-template-columns: 1.15fr 1.15fr 0.85fr; }
.road > li { display: flex; flex-direction: column; gap: 18px; padding-right: 28px; }
.road > li:last-child { padding-right: 0; }
.road-mark { display: flex; align-items: center; gap: 12px; }
.road-mark .c {
  width: 52px; height: 52px; flex: none; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 15px; font-weight: 600;
}
.road-mark .c1 { background: var(--ink); color: #fff; }
.road-mark .c2 { border: 1.5px solid var(--ink); background: var(--surface); }
.road-mark .c3 { border: 1.5px dashed var(--muted); color: var(--muted); }
.road-mark .ln { flex: 1; height: 1.5px; background: var(--ink); }
.road-body { display: flex; flex-direction: column; gap: 10px; }
.road-body .when {
  align-self: flex-start; height: 24px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 4px;
  border: 1px dashed var(--amber); color: var(--amber-ink); font-family: var(--f-mono); font-size: 12px;
}
.road-body .when-soft { border: 0; background: var(--footer-bg); color: var(--muted); }
.road-body h3 { font-family: var(--f-display); font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.road-body > p { font-size: 16px; color: var(--muted); }
.road-body > p.l { line-height: 1.55; }
.road-body .check-list { font-size: 16px; }
.callout { margin-top: 40px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; display: flex; align-items: center; gap: 16px; }
.callout p { font-size: 16px; }

.oos-rows { border-top: 1px solid var(--ink); }
.oos-rows li { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.oos-rows .i { margin-top: 3px; color: var(--faint); }
.oos-rows b { font-size: 18px; line-height: 1.5; }
.oos-rows span { font-size: 16px; color: var(--muted); }

.ea-grid { margin-top: 28px; display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 64px; align-items: start; }
.ea-side { display: flex; flex-direction: column; gap: 24px; }
.ea-side > p { color: var(--muted); }
.ea-side .check-list { gap: 10px; font-size: 16px; }
.ea-side .dashed { padding: 14px 16px; border: 1px dashed var(--placeholder-line); border-radius: 4px; font-size: 15px; color: var(--muted); }
.ea-side .dashed .mono { color: var(--amber-ink); }
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 32px; display: flex; flex-direction: column; gap: 22px; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-wide { grid-column: span 2; }
.field label, .fs legend { font-size: 15px; font-weight: 600; }
.input {
  height: 44px; width: 100%; padding: 0 14px; border: 1px solid var(--placeholder-line); border-radius: 4px;
  background: var(--surface); color: var(--ink); font-size: 16px;
}
.input::placeholder { color: var(--placeholder-ink); }
.input:focus-visible { border-color: var(--accent); }
.fs { margin: 0; padding: 0; border: 0; min-width: 0; }
.fs legend { padding: 0; margin-bottom: 8px; }
.choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input, .chip input, .consent input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.choice-body {
  height: 100%; padding: 14px; display: flex; align-items: flex-start; gap: 10px; text-align: left;
  border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink);
}
.choice-body .tile { width: 32px; height: 32px; border-radius: 6px; background: var(--footer-bg); }
.choice-body .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.choice-body b { font-size: 16px; }
.choice-body .h { font-size: 13px; color: var(--muted); }
.choice-body .ok { color: var(--accent); visibility: hidden; }
.choice input:checked + .choice-body { border-color: var(--ink); background: rgba(22, 24, 29, 0.04); }
.choice input:checked + .choice-body .ok { visibility: visible; }
.choice input:focus-visible + .choice-body, .chip input:focus-visible + span, .consent input:focus-visible + .box { box-shadow: 0 0 0 3px var(--focus-ring); }
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip > span {
  height: 38px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--placeholder-line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 15px;
}
.chip .i { width: 14px; height: 14px; }
.chip .ic-on { display: none; }
.chip input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip input:checked + span .ic-on { display: inline; }
.chip input:checked + span .ic-off { display: none; }
.consent { position: relative; display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; cursor: pointer; }
.consent .box {
  width: 20px; height: 20px; flex: none; margin-top: 1px; border: 1.5px solid var(--faint); border-radius: 4px;
  background: var(--surface); color: #fff; display: flex; align-items: center; justify-content: center;
}
.consent .box .i { width: 14px; height: 14px; visibility: hidden; }
.consent input:checked + .box { border-color: var(--accent); background: var(--accent); }
.consent input:checked + .box .i { visibility: visible; }
.ok-msg {
  padding: 14px 16px; border: 1px solid var(--m-green-border); background: var(--m-green-soft); border-radius: 4px;
  color: var(--ok); font-size: 15px; display: flex; gap: 10px; align-items: center;
}
.ok-msg:focus { outline: none; }
.form-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 6px; border-top: 1px solid var(--line); }
.form-foot > span { font-size: 14px; color: var(--muted); }
button.btn { cursor: pointer; }
.btn[aria-disabled="true"], .btn[aria-disabled="true"]:hover { background: #9aa8f2; border-color: #9aa8f2; }
.btn:disabled { cursor: default; }

/* =========================================================
   Mobile app page
   ========================================================= */
.app-hero-l { padding-top: 24px; }
.app-h1 { font-family: var(--f-display); font-size: 76px; line-height: 0.98; font-weight: 800; letter-spacing: -0.04em; }
.app-lede { max-width: 600px; font-size: 21px; line-height: 1.55; color: var(--muted); }
.badges { display: flex; gap: 12px; flex-wrap: wrap; }
.badge-ph {
  width: 180px; height: 56px; border: 1.5px dashed var(--faint); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--f-mono); font-size: 12px; color: var(--muted);
}
.app-hero-l > .link-arrow { align-self: flex-start; font-size: 17px; }
.app-hero-r { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.seg-sm .seg-btn { height: 36px; padding: 0 16px; font-size: 14px; }

.phone {
  width: 300px; height: 620px; padding: 10px; border-radius: 46px; background: var(--ink);
  box-shadow: 0 40px 80px -40px rgba(22, 24, 29, 0.55); flex: none;
}
.phone-scr {
  position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: var(--bg);
  display: flex; flex-direction: column; font-family: -apple-system, 'Segoe UI', system-ui, sans-serif; font-size: 12px; line-height: 16px; color: var(--m-ink);
}
.ph-status { height: 38px; flex: none; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; }
.ph-notch { position: absolute; left: 50%; top: 9px; width: 86px; height: 24px; margin-left: -43px; border-radius: 999px; background: var(--ink); }
.ph-sig { display: flex; align-items: center; gap: 5px; }
.ph-top { padding: 4px 16px 10px; display: flex; align-items: center; justify-content: space-between; }
.ph-co { height: 28px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--m-line-2); border-radius: 999px; background: var(--surface); font-size: 11px; font-weight: 600; }
.ph-co .i { width: 12px; height: 12px; }
.ph-co .i.mu { color: var(--m-muted); }
.ph-bell { position: relative; width: 32px; height: 32px; border-radius: 999px; background: var(--surface); border: 1px solid var(--m-line-2); display: flex; align-items: center; justify-content: center; }
.ph-bell .i { width: 15px; height: 15px; }
.ph-bell .d { position: absolute; top: 5px; right: 6px; width: 7px; height: 7px; border-radius: 999px; background: var(--m-red); }
.ph-body { flex: 1; min-height: 0; padding: 0 14px; display: flex; flex-direction: column; gap: 10px; }
.ph-title { font-size: 24px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; }
.ph-segm { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 10px; background: #e9eaef; font-size: 11px; font-weight: 600; }
.ph-segm > span { height: 26px; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--m-muted); }
.ph-segm > span.on { border-radius: 8px; background: var(--surface); color: var(--m-ink); }
.ph-segm .c { padding: 0 6px; border-radius: 999px; background: var(--m-dark); color: #fff; }
.ph-card { background: var(--surface); border: 1px solid var(--m-line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ph-card-hot { border-color: rgba(220, 38, 38, 0.4); }
.ph-card .r1 { display: flex; gap: 10px; }
.ph-card .r1 .tile { width: 32px; height: 32px; border-radius: 9px; }
.ph-card .r1 .tile .i { width: 15px; height: 15px; }
.ph-card .r1 .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ph-card .r1 b { font-size: 12px; line-height: 15px; }
.ph-card .r1 .cd { font-family: ui-monospace, Menlo, monospace; font-size: 10px; color: var(--m-muted); }
.ph-card .r2 { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11px; }
.ph-card .r2 > span:first-child { color: var(--m-muted); }
.ph-pill { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 999px; border: 1px solid; font-size: 10px; white-space: nowrap; }
.ph-pill .am-pdot { width: 5px; height: 5px; border-radius: 999px; }
.ph-pill-sm { height: 18px; font-size: 9px; align-self: flex-start; }
.ph-push {
  position: absolute; top: 44px; left: 8px; right: 8px; z-index: 2; padding: 10px 12px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.97); box-shadow: 0 10px 30px -8px rgba(22, 24, 29, 0.35); display: flex; flex-direction: column; gap: 3px;
}
.ph-push .h { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--m-muted); }
.ph-push .h .when { margin-left: auto; }
.ph-push b { font-size: 12px; }
.ph-push .s { font-size: 11px; color: var(--m-text); }
.ph-filters { display: flex; gap: 6px; font-size: 11px; }
.ph-filters span { height: 26px; padding: 0 10px; display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--m-line-2); white-space: nowrap; }
.ph-filters span.on { background: var(--m-dark); color: #fff; border-color: var(--m-dark); }
.ph-list { background: var(--surface); border: 1px solid var(--m-line); border-radius: 14px; overflow: hidden; }
.ph-list > div { padding: 11px 12px; border-bottom: 1px solid var(--m-line); display: flex; flex-direction: column; gap: 4px; }
.ph-list > div:last-child { border-bottom: 0; }
.ph-list .top { display: flex; justify-content: space-between; align-items: center; }
.ph-list .top .t { font-size: 10px; color: var(--m-muted); }
.ph-list b { font-size: 12px; }
.ph-list .s { font-size: 11px; color: var(--m-muted); }
.ph-tabbar {
  flex: none; height: 64px; padding: 0 6px 8px; background: var(--surface); border-top: 1px solid var(--m-line);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; font-size: 9px; text-align: center; color: var(--m-muted);
}
.ph-tabbar span { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ph-tabbar .i { width: 18px; height: 18px; }
.ph-tabbar .on { color: var(--accent); }

.feat { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 28px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.feat-txt { display: flex; flex-direction: column; gap: 12px; }
.feat-txt .n { font-family: var(--f-mono); font-size: 13px; color: var(--accent); }
.feat-txt h3 { font-family: var(--f-display); font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
.feat-txt > p { font-size: 16px; line-height: 1.55; color: var(--muted); }
.feat-txt .check-list { font-size: 15px; }
.mini { width: 220px; height: 450px; padding: 7px; border-radius: 36px; background: var(--ink); flex: none; }
.mini-scr {
  height: 100%; border-radius: 29px; overflow: hidden; background: var(--bg); display: flex; flex-direction: column;
  font-family: -apple-system, 'Segoe UI', system-ui, sans-serif; font-size: 10px; line-height: 13px; color: var(--m-ink);
}
.mini-status { height: 28px; flex: none; padding: 0 18px; display: flex; align-items: center; font-size: 10px; font-weight: 600; }
.mini-back { padding: 2px 12px 8px; display: flex; align-items: center; gap: 6px; color: var(--m-muted); }
.mini-back .i { width: 13px; height: 13px; }
.mini-back .cd { font-family: ui-monospace, Menlo, monospace; font-size: 9px; }
.mini-body { flex: 1; padding: 0 12px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.mini-body-top { padding-top: 2px; }
.mini-body-6 { gap: 6px; }
.mini-h { font-size: 13px; line-height: 16px; }
.mini-box { background: var(--surface); border: 1px solid var(--m-line); border-radius: 10px; padding: 9px; display: flex; flex-direction: column; gap: 7px; }
.mini-box .row { display: flex; gap: 6px; align-items: center; }
.mini-box .dd { width: 16px; height: 16px; flex: none; border-radius: 999px; background: var(--m-dark); color: #fff; display: flex; align-items: center; justify-content: center; }
.mini-box .dd .i { width: 9px; height: 9px; }
.mini-box .row.wait { color: var(--m-amber); }
.mini-box .row.wait .dd { background: transparent; border: 2px solid var(--m-amber-2); }
.mini-lbl { font-size: 9px; font-weight: 600; color: var(--m-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.mini-lbl-2 { margin-top: 2px; }
.mini-note { min-height: 46px; padding: 7px 8px; background: var(--surface); border: 1px solid var(--m-line-2); border-radius: 8px; }
.mini-net { display: flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 8px; background: rgba(14, 165, 233, 0.1); color: #0369a1; font-size: 9px; }
.mini-net .i { width: 11px; height: 11px; }
.mini-acts { padding: 10px 12px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mini-acts span { height: 32px; border: 1px solid var(--m-line-2); border-radius: 8px; background: var(--surface); display: flex; align-items: center; justify-content: center; font-weight: 600; }
.mini-acts span.dk { background: var(--m-dark); border-color: var(--m-dark); color: var(--m-on-dark); }
.mini-muted { color: var(--m-muted); }
.mini-chart { background: var(--surface); border: 1px solid var(--m-line); border-radius: 10px; padding: 8px; }
.mini-chart svg { width: 100%; height: 60px; display: block; }
.mini-chart .lg { display: flex; justify-content: space-between; font-size: 9px; color: var(--m-muted); }
.mini-chart .lg b { color: var(--m-ink); }
.mini-sil { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.mini-sil button {
  height: 28px; padding: 0; border: 1px solid var(--m-line-2); border-radius: 8px; background: var(--surface);
  color: var(--m-ink); font-size: 10px; font-family: inherit; cursor: pointer;
}
.mini-sil button[aria-pressed="true"] { border-color: var(--m-dark); background: rgba(23, 23, 23, 0.06); }
.mini-title { font-size: 18px; line-height: 22px; letter-spacing: -0.02em; }
.mini-title-16 { font-size: 16px; line-height: 20px; }
.mini-search { height: 28px; border: 1px solid var(--m-line-2); border-radius: 8px; background: var(--surface); display: flex; align-items: center; gap: 6px; padding: 0 8px; color: var(--m-faint); }
.mini-search .i { width: 12px; height: 12px; }
.mini-list { background: var(--surface); border: 1px solid var(--m-line); border-radius: 10px; overflow: hidden; }
.mini-list > div { padding: 9px; border-bottom: 1px solid var(--m-line); display: flex; flex-direction: column; gap: 5px; }
.mini-list > div:last-child { border-bottom: 0; }
.mini-list .top { display: flex; justify-content: space-between; }
.mini-list .st { display: inline-flex; align-items: center; gap: 4px; }
.mini-list .st::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--dot); }
.st-green { color: var(--m-green); --dot: var(--m-green-dot); }
.st-red { color: #b91c1c; --dot: var(--m-red); }
.st-amber { color: var(--m-amber); --dot: var(--m-amber-dot); }
.st-grey { color: var(--m-muted); --dot: #898781; }
.mini-bars { display: grid; grid-template-columns: 28px 1fr; gap: 3px 6px; align-items: center; font-size: 9px; color: var(--m-muted); }
.mini-bars .tr { height: 4px; border-radius: 999px; background: var(--m-track); }
.mini-bars .tr > span { display: block; height: 4px; border-radius: 999px; background: var(--m-chart); }
.mini-bars .tr > span.r { background: #e34948; }
.mini-bars .tr > span.a { background: #eda100; }
.mini-nav { height: 44px; flex: none; background: var(--surface); border-top: 1px solid var(--m-line); display: flex; align-items: center; justify-content: space-around; color: var(--m-muted); }
.mini-nav .i { width: 15px; height: 15px; }
.mini-nav .on { color: var(--accent); }
.mini-ws { padding: 8px; border: 1px solid var(--m-line); border-radius: 10px; background: var(--surface); display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.mini-ws.sel { border: 1.5px solid var(--m-dark); }
.mini-ws .col { display: flex; flex-direction: column; }
.mini-ws .ok { width: 13px; height: 13px; color: var(--accent); }
.mini-ws.sub { margin-left: 12px; padding: 7px 8px; display: block; }
.mini-ws.blocked { background: var(--m-subtle); justify-content: flex-start; color: var(--m-muted); }
.mini-ws.blocked b { color: var(--m-text); }
.mini-ws.blocked .i { width: 12px; height: 12px; }
.mini-ws.invite { border: 1px dashed var(--placeholder-line); background: transparent; }
.mini-ws .acc { height: 22px; padding: 0 8px; border-radius: 6px; background: var(--m-dark); color: var(--m-on-dark); display: flex; align-items: center; }

.privacy {
  padding: 16px 18px; border: 1px solid var(--dark-line); border-radius: 6px; display: flex; gap: 12px; font-size: 16px; color: var(--on-dark-text);
}
.privacy .i { color: var(--accent-on-dark); margin-top: 2px; }
.privacy b { color: var(--on-dark); }
.sec-side-24 { gap: 24px; }
.principles-26 li { padding: 26px 0 26px 26px; }
.principles-26 li:nth-child(odd) { padding: 26px 26px 26px 0; }

.cta-notify { padding: 56px 64px; grid-template-columns: minmax(0, 1fr) 440px; gap: 56px; }
.cta-notify h2 { font-size: 52px; line-height: 1.04; }
.cta-notify .lead-p { margin-top: 16px; color: var(--muted); }
.notify { display: flex; flex-direction: column; gap: 12px; }
.notify label { font-size: 15px; font-weight: 600; }
.notify-row { display: flex; gap: 8px; }
.notify-row .input { flex: 1; min-width: 0; height: 52px; }
.notify-row .btn { height: 52px; padding: 0 20px; font-size: 16px; }
.ok-msg-sm { padding: 10px 14px; display: block; }

/* ---------- responsive: product pages ---------- */
@media (max-width: 1199.98px) {
  .pp-h1 { font-size: clamp(48px, 5.8vw, 68px); }
  .scan-h1 { font-size: clamp(56px, 6.6vw, 80px); }
  .app-h1 { font-size: clamp(52px, 6.3vw, 76px); }
  .pp-split, .pp-split-420 { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .term, .am-scan { max-width: 640px; }
  .app-hero-r { align-items: flex-start; }
  .colrow-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .colrow-5 > div { padding: 24px 20px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .colrow-5 > div:nth-child(3n+1) { padding-left: 0; }
  .colrow-5 > div:nth-child(3n) { padding-right: 0; border-right: 0; }
  .colrow-5 > div:last-child { border-right: 0; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipe-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; max-width: 520px; margin: 0 auto; }
  .pipe-arrow { flex-direction: row; justify-content: center; gap: 10px; padding: 4px 0; min-height: 44px; }
  .pipe-arrow svg { width: 40px; flex: none; transform: rotate(90deg); }
  .pipe-arrow svg.gap { margin-top: 0; }
  .feat-grid { grid-template-columns: minmax(0, 1fr); }
  .budget dd.big { font-size: clamp(72px, 9vw, 120px); }
  .oos-big li { font-size: 22px; }
}
@media (max-width: 1023.98px) {
  .pp-row, .pp-row-460, .split-520, .org-grid, .two-col, .oos-grid, .ea-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
  .am-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .am-search-240 { display: none; }
  .am-filter .am-tbtn-sm { margin-left: auto; }
  .am-table .c-ow { display: none; }
  .colrow-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .colrow-4 > li { padding: 28px 24px 28px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .colrow-4 > li:nth-child(odd) { border-right: 1px solid var(--line); }
  .colrow-4 > li:nth-child(even) { padding: 28px 0 28px 24px; }
  .budget { grid-template-columns: minmax(0, 1fr); }
  .budget > div, .budget > div:first-child, .budget > div:last-child { padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .lic-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lic-steps li, .lic-steps li:first-child, .lic-steps li:last-child { border: 1px solid var(--ink); margin: 0 -1px -1px 0; border-radius: 0; }
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .cloud-band { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .retention { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flowbox-grid { grid-template-columns: minmax(0, 1fr); }
  .flowbox-mid { flex-direction: row; padding: 16px 0; gap: 10px; }
  .flowbox-mid svg { width: 48px; flex: none; transform: rotate(90deg); }
  .road { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .road > li { padding-right: 0; }
  .road-mark .ln { display: none; }
  .cta-notify { grid-template-columns: minmax(0, 1fr); padding: 48px; gap: 32px; }
  .cta-notify h2 { font-size: clamp(36px, 5vw, 52px); }
  .notify { max-width: 520px; }
}
@media (max-width: 767.98px) {
  .pp-hero { padding: 40px 0 0; }
  .pp-id > svg { width: 44px; height: 44px; }
  .pp-h1 { margin-top: 20px; font-size: 38px; line-height: 1.02; }
  .pp-row, .pp-row-460 { margin-top: 20px; gap: 24px; }
  .pp-lede, .agent-lede, .app-lede { font-size: 18px; }
  .agent-lede { margin-top: 20px; }
  .agent-btns { margin-top: 24px; }
  .pp-btns { flex-direction: column; gap: 10px; }
  .pp-btns .btn { padding: 0 20px; justify-content: space-between; }
  .pp-note { font-size: 12px; }
  .pp-split, .pp-split-420 { gap: 32px; }
  .pp-stack { gap: 20px; }
  .scan-h1 { font-size: 44px; }
  .scan-sub { font-size: 22px; }
  .scan-lede { font-size: 17px; }
  .app-h1 { font-size: 40px; line-height: 1.02; }
  .app-hero-l { padding-top: 0; }
  .app-hero-r { align-items: center; }
  .badge-ph { width: 160px; }
  .sec-head + .h2 { margin-top: 20px; }
  .h2-44 { font-size: 30px; }
  .mt-48, .mt-40 { margin-top: 28px; }

  .am-hub, .pipe { margin-top: 32px; }
  .am-layout { grid-template-columns: minmax(0, 1fr); }
  .am-rail { display: none; }
  .am-top { padding: 0 12px; }
  .am-top .am-tbtn, .am-top .am-bell { display: none; }
  .am-top .am-avatar { margin-left: auto; }
  .am-content, .am-pad18 { padding: 12px; }
  .am-card { padding: 14px; }
  .am-pagehead { flex-wrap: wrap; }
  .am-pagehead .t { flex-basis: calc(100% - 52px); }
  .am-tiles { gap: 8px; }
  .am-tile { padding: 10px 12px; gap: 10px; }
  .am-tile .tile { display: none; }
  .am-filter { flex-wrap: wrap; }
  .am-env { max-width: 100%; overflow-x: auto; }
  .am-table .c-ip, .am-table .c-os, .am-table .c-cpu { display: none; }
  .am-req-head { flex-wrap: wrap; }
  .am-dl-2 { grid-template-columns: minmax(0, 1fr); }
  .am-dl .span2 { grid-column: auto; }
  .am-dl dd { overflow-wrap: anywhere; }

  .colrow-5 { grid-template-columns: minmax(0, 1fr); }
  .colrow-5 > div, .colrow-5 > div:nth-child(3n+1), .colrow-5 > div:nth-child(3n) { padding: 20px 0; border-right: 0; }
  .colrow-4 { grid-template-columns: minmax(0, 1fr); }
  .colrow-4 > li, .colrow-4 > li:nth-child(odd), .colrow-4 > li:nth-child(even) { padding: 20px 0; border-right: 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .card-28, .card-26, .lic-card { padding: 22px; }
  .chain-card { padding: 20px; }
  .org-map { padding: 20px; }
  .org-lines { display: none; }
  .org-subs { margin-top: 16px; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .org-parent { padding: 14px 16px; }

  .spec-table { margin-top: 28px; font-size: 16px; }
  .spec-table thead { display: none; }
  .spec-table tr { display: block; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .spec-table tbody tr:first-child { border-top: 1px solid var(--ink); }
  .spec-table tbody th, .spec-table td { display: block; padding: 0; border: 0; }
  .spec-table td { margin-top: 6px; }
  .spec-table .stage-sm { margin-left: 0; }

  .term-body { padding: 16px; }
  .budget dd.big { font-size: 72px; }
  .budget .pre { font-size: 22px; }
  .budget .unit { font-size: 32px; }
  .wal { padding: 18px; }
  .wal-bars { gap: 2px; height: 56px; }
  .wal-legend { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .lic-steps { grid-template-columns: minmax(0, 1fr); }
  .oos-big li { padding: 16px 0; gap: 12px; font-size: 19px; }
  .oos-big .i { width: 20px; height: 20px; }

  .pipe { padding: 18px; }
  .cmd { font-size: 13px; padding: 14px 16px; }
  .cmd .note { margin-left: 0; flex-basis: 100%; }
  .role-card { padding: 22px; }
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .tier-1 .bar { height: 40px; }
  .tier-2 .bar { height: 70px; }
  .tier-3 .bar { height: 100px; }
  .tier-4 .bar { height: 130px; }
  .cloud-band { padding: 22px; }
  .retention { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline { padding: 18px; }
  .timeline-legend { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  .flowbox { padding: 20px; }
  .flowbox ul { font-size: 16px; }
  .flowbox-out li { flex-direction: column; gap: 2px; }
  .flowbox-out li .v { white-space: normal; }
  .callout { align-items: flex-start; padding: 18px; }
  .oos-rows li { grid-template-columns: 24px minmax(0, 1fr); gap: 4px 12px; padding: 16px 0; }
  .oos-rows li > span { grid-column: 2; }
  .oos-rows b { font-size: 17px; }
  .ea-side { gap: 20px; }
  .form-card { padding: 20px; gap: 20px; }
  .fields, .choice-grid { grid-template-columns: minmax(0, 1fr); }
  .field-wide { grid-column: auto; }
  .form-foot { flex-direction: column-reverse; align-items: stretch; }
  .form-foot .btn { justify-content: space-between; }

  .feat { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 24px; justify-items: center; }
  .feat-txt { justify-self: stretch; }
  .feat-txt h3 { font-size: 23px; }
  .principles-26 li, .principles-26 li:nth-child(odd) { padding: 18px 0; }
  .cta-notify { padding: 28px 22px; }
  .cta-notify h2 { font-size: 30px; line-height: 1.05; }
  .notify-row { flex-direction: column; }
}
@media (max-width: 359.98px) {
  .phone { width: 280px; height: 590px; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- small phone adjustments shared by product pages ---------- */
@media (max-width: 767.98px) {
  .seg-sm { display: inline-flex; width: auto; margin-top: 0; }
  .form-foot { padding-top: 16px; }
}
@media (max-width: 767.98px) {
  .pipe-stores { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 399.98px) {
  .ptable .pn { font-size: 13px; }
  .ptable thead th.plan-col, .ptable td { padding-left: 4px; padding-right: 4px; }
}