/* LicenseLiaison - design system.
   Idea: a license is a certificate and its status is a rubber stamp.
   The guilloche band, double-ruled certificate frame and ink stamps carry the identity;
   everything else stays quiet so the data reads first. */

/* ---- fonts (bundled, subset to Latin) ---------------------------------- */
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/inter-400.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/inter-500.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/inter-600.woff") format("woff"); }
@font-face { font-family: "IBM Plex Serif"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/plexserif-400.woff") format("woff"); }
@font-face { font-family: "IBM Plex Serif"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/plexserif-400i.woff") format("woff"); }
@font-face { font-family: "IBM Plex Serif"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/plexserif-700.woff") format("woff"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/plexmono-400.woff") format("woff"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/plexmono-700.woff") format("woff"); }

/* ---- tokens -------------------------------------------------------------- */
:root {
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --paper: #f3f6fa;
  --paper-2: #e9eef6;
  --surface: #ffffff;
  --ink: #14213d;
  --ink-2: #3f4b66;
  --muted: #5b6783;
  --line: #dce3ee;
  --line-strong: #b9c4d6;

  --accent: #2b55a0;
  --accent-hover: #214585;
  --accent-ink: #1f4a92;
  --accent-soft: #e4ecf9;
  --on-accent: #ffffff;

  --good: #1d7048;  --good-soft: #e0f2e8;
  --warn: #8a5300;  --warn-soft: #fbefd2;
  --bad: #a3282f;   --bad-soft: #fbe4e5;
  --mute: #4a5568;  --mute-soft: #e7ebf1;
  --info: #2b55a0;  --info-soft: #e4ecf9;

  --stamp-good: #1f7a4d;
  --stamp-warn: #b06a00;
  --stamp-bad: #b5393c;
  --stamp-mute: #55607a;
  --stamp-info: #2b55a0;

  --guilloche: #a9bedf;
  --code-bg: #0f1b36;
  --code-ink: #dce6f8;
  --radius: 6px;
  --shadow-cert: 0 1px 2px rgba(20, 33, 61, .08), 0 18px 40px -22px rgba(20, 33, 61, .35);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0c1424; --paper-2: #111c31; --surface: #142038;
    --ink: #e7edf8; --ink-2: #b7c2d8; --muted: #93a0ba;
    --line: #25324d; --line-strong: #364869;
    --accent: #8cb0f0; --accent-hover: #a6c3f5; --accent-ink: #bcd0f7; --accent-soft: #1b2c4f; --on-accent: #0c1424;
    --good: #6fd3a0; --good-soft: #123325;
    --warn: #f2c26b; --warn-soft: #3a2c0e;
    --bad: #ff9a9f;  --bad-soft: #3e1a1d;
    --mute: #b0bace; --mute-soft: #202c44;
    --info: #8cb0f0; --info-soft: #1b2c4f;
    --stamp-good: #6fd3a0; --stamp-warn: #f2c26b; --stamp-bad: #ff9a9f; --stamp-mute: #b0bace; --stamp-info: #8cb0f0;
    --guilloche: #2e4270; --code-bg: #0a111f; --code-ink: #dce6f8;
    --shadow-cert: 0 18px 40px -22px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0c1424; --paper-2: #111c31; --surface: #142038;
  --ink: #e7edf8; --ink-2: #b7c2d8; --muted: #93a0ba;
  --line: #25324d; --line-strong: #364869;
  --accent: #8cb0f0; --accent-hover: #a6c3f5; --accent-ink: #bcd0f7; --accent-soft: #1b2c4f; --on-accent: #0c1424;
  --good: #6fd3a0; --good-soft: #123325;
  --warn: #f2c26b; --warn-soft: #3a2c0e;
  --bad: #ff9a9f;  --bad-soft: #3e1a1d;
  --mute: #b0bace; --mute-soft: #202c44;
  --info: #8cb0f0; --info-soft: #1b2c4f;
  --stamp-good: #6fd3a0; --stamp-warn: #f2c26b; --stamp-bad: #ff9a9f; --stamp-mute: #b0bace; --stamp-info: #8cb0f0;
  --guilloche: #2e4270; --code-bg: #0a111f; --code-ink: #dce6f8;
  --shadow-cert: 0 18px 40px -22px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

/* ---- base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.site { font-size: 16px; display: flex; flex-direction: column; min-height: 100vh; }
body.site > main { flex: 1 0 auto; }
h1, h2, h3, h4 { margin: 0; }
h1, h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; text-wrap: balance; }
h3 { font-weight: 600; line-height: 1.3; }
p { margin: 0 0 1em; }
a { color: var(--accent-ink); text-underline-offset: .18em; }
a:hover { color: var(--accent-hover); }
code, pre, .mono { font-family: var(--font-mono); }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--accent-soft); color: var(--ink); }

.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: .6em 1em; border-radius: var(--radius); }
.skip:focus { top: 12px; }
.muted { color: var(--muted); }
.mono { font-size: .92em; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 24px; }
.icon { flex: none; }

/* ---- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .55em 1.05em; font: 600 14.5px/1.3 var(--font-ui);
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--paper-2); color: var(--ink); border-color: var(--muted); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn-danger { color: var(--bad); border-color: var(--bad); background: transparent; }
.btn-danger:hover { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.btn-small { padding: .4em .8em; font-size: 13.5px; }
.btn-large { padding: .75em 1.4em; font-size: 16px; }
.btn-block { display: flex; width: 100%; }
.icon-btn {
  display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0;
  color: var(--ink-2); background: transparent; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer;
}
.icon-btn:hover { background: var(--paper-2); color: var(--ink); }
.inline-form { display: inline; margin: 0; }

/* ---- alerts, pills, stamps ---------------------------------------------- */
.alert { margin: 0 0 20px; padding: 11px 14px; border-radius: 4px; border-left: 4px solid var(--mute); background: var(--mute-soft); color: var(--ink); font-weight: 500; }
.alert.is-success { border-color: var(--good); background: var(--good-soft); }
.alert.is-error { border-color: var(--bad); background: var(--bad-soft); }
.flash-wrap { padding-top: 20px; }

.pill { display: inline-flex; align-items: center; gap: .45em; padding: .15em .65em; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1.5; white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.is-good { color: var(--good); background: var(--good-soft); }
.pill.is-warn { color: var(--warn); background: var(--warn-soft); }
.pill.is-bad  { color: var(--bad);  background: var(--bad-soft); }
.pill.is-info { color: var(--info); background: var(--info-soft); }
.pill.is-mute { color: var(--mute); background: var(--mute-soft); }

.expiry { font-size: 13.5px; white-space: nowrap; }
.expiry.is-soon { color: var(--warn); font-weight: 600; }
.expiry.is-past { color: var(--bad); font-weight: 600; }
.expiry.is-none, .expiry.is-ok { color: var(--ink-2); }

.stamp {
  display: inline-block; padding: .28em .7em;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
  color: var(--stamp-mute); border: 2px solid currentColor; border-radius: 3px; outline: 1px solid currentColor; outline-offset: 2px;
  transform: rotate(-4deg); opacity: .92; filter: url(#ink); user-select: none;
}
.stamp.is-good { color: var(--stamp-good); }
.stamp.is-warn { color: var(--stamp-warn); }
.stamp.is-bad  { color: var(--stamp-bad); }
.stamp.is-info { color: var(--stamp-info); }
.stamp.is-mute { color: var(--stamp-mute); }

/* ---- guilloche + certificate -------------------------------------------- */
.guilloche {
  height: 56px; background: var(--guilloche);
  -webkit-mask: url("../images/guilloche.svg") center / 640px 72px repeat-x;
          mask: url("../images/guilloche.svg") center / 640px 72px repeat-x;
}
.certificate {
  position: relative; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden;
  box-shadow: inset 0 0 0 5px var(--surface), inset 0 0 0 6px var(--line-strong), var(--shadow-cert);
  padding: 6px;
}
.certificate-body { position: relative; padding: 18px 28px 30px; }
.certificate-kicker { margin: 0 0 4px; font-size: 13.5px; color: var(--muted); font-style: italic; font-family: var(--font-display); }
.certificate h2 { font-size: 1.7rem; margin-bottom: 18px; }
.certificate-facts { margin: 0; display: grid; gap: 10px; }
.certificate-facts > div { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px dotted var(--line-strong); }
.certificate-facts dt { color: var(--muted); font-size: 13.5px; }
.certificate-facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.certificate-facts dd.mono { font-size: .8rem; }
.certificate-stamp { position: absolute; right: 26px; top: 66px; font-size: 1.6rem; transform: rotate(-7deg); opacity: .9; mix-blend-mode: multiply; }
.certificate-wide { margin-bottom: 36px; }
.certificate-wide .certificate-body { padding-top: 14px; }
.certificate-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.certificate-head h2 { margin-bottom: 8px; }
.certificate-stamp-inline { flex: none; font-size: 1.5rem; transform: rotate(-6deg); margin-top: 6px; }
.certificate-facts-wide { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px 28px; margin-top: 14px; }
.certificate-facts-wide > div { grid-template-columns: 1fr; gap: 2px; }
:root[data-theme="dark"] .certificate-stamp { mix-blend-mode: normal; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .certificate-stamp { mix-blend-mode: normal; } }

/* the one animated moment: the stamp lands on the certificate */
@keyframes stamp-down { from { opacity: 0; transform: rotate(-6deg) scale(1.7); } 60% { opacity: .95; } to { opacity: .92; transform: rotate(-6deg) scale(1); } }
.hero .certificate-stamp-inline { animation: stamp-down .38s cubic-bezier(.2, .9, .3, 1.1) .5s both; }
@media (prefers-reduced-motion: reduce) { .hero .certificate-stamp-inline { animation: none; } }

/* code samples */
.payload { margin: 0; }
.payload figcaption { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.payload pre { margin: 0; padding: 16px 18px; background: var(--code-bg); color: var(--code-ink); border-radius: var(--radius); font-size: 13px; line-height: 1.6; overflow-x: auto; }
.payload code { font-family: var(--font-mono); }

/* ---- site frame ---------------------------------------------------------- */
.site-header { border-bottom: 1px solid var(--line); background: var(--surface); }
.site-header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand .mark { color: var(--accent); flex: none; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; }
.site-nav { display: flex; align-items: center; gap: 6px; }
.site-nav .nav-opt { padding: .45em .8em; color: var(--ink-2); text-decoration: none; font-weight: 500; border-radius: var(--radius); }
.site-nav .nav-opt:hover { background: var(--paper-2); color: var(--ink); }
.site-nav .btn { margin-left: 6px; }

.site-footer { margin-top: 0; border-top: 1px solid var(--line); background: var(--surface); padding: 28px 0 36px; color: var(--muted); font-size: 14px; }
.site-footer-row { display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: baseline; }
.site-footer p { margin: 0; }
.site-footer .fine { flex-basis: 100%; font-size: 13px; }

/* ---- home ---------------------------------------------------------------- */
.hero { padding: 72px 0 80px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 64px; align-items: center; }
.hero h1 { font-size: clamp(2rem, 3.8vw, 3rem); max-width: 20ch; margin-bottom: 20px; }
.lead { font-size: 1.15rem; line-height: 1.6; color: var(--ink-2); max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-visual { display: grid; gap: 22px; }
.hero-visual .payload { padding-inline: 6px; }

.features { position: relative; padding: 88px 0 72px; background: var(--surface); border-block: 1px solid var(--line); }
.features::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 56px; background: var(--guilloche); opacity: .55;
  -webkit-mask: url("../images/guilloche.svg") center / 640px 72px repeat-x; mask: url("../images/guilloche.svg") center / 640px 72px repeat-x; transform: translateY(-50%); }
.section-title { font-size: clamp(1.6rem, 3vw, 2.1rem); max-width: 24ch; margin-bottom: 44px; }
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-block: 36px; border-top: 1px solid var(--line); }
.feature:first-of-type { border-top: 0; }
.feature h3 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; margin-bottom: 10px; }
.feature p { color: var(--ink-2); max-width: 54ch; margin: 0; }
.stamps-row { display: flex; flex-wrap: wrap; gap: 20px 22px; align-items: center; padding: 8px 0; }
.stamps-row .stamp { font-size: 1.05rem; }
.stamps-row .stamp:nth-child(2) { transform: rotate(3deg); }
.stamps-row .stamp:nth-child(3) { transform: rotate(-2deg); }
.stamps-row .stamp:nth-child(4) { transform: rotate(4deg); }
.stamps-row .stamp:nth-child(5) { transform: rotate(-5deg); }
.stamps-row .stamp:nth-child(6) { transform: rotate(2deg); }
.feature-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.feature-list li { padding-left: 1.6em; position: relative; color: var(--ink-2); }
.feature-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: .7em; height: .38em; border-left: 2px solid var(--good); border-bottom: 2px solid var(--good); transform: rotate(-45deg) translateY(-30%); }

.steps-section { padding: 80px 0; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; counter-reset: step; }
.steps li { position: relative; padding-top: 52px; counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; top: 0; left: 0; width: 38px; height: 38px; display: grid; place-items: center;
  font: 700 1.1rem var(--font-display); color: var(--accent-ink); border: 1.5px solid var(--accent); border-radius: 50%; outline: 1px solid var(--accent); outline-offset: 3px; }
.steps h3 { margin-bottom: 6px; font-size: 1.05rem; }
.steps p { color: var(--ink-2); margin: 0; }

.cta-band { background: var(--ink); color: var(--paper); padding: 56px 0; }
:root[data-theme="dark"] .cta-band { background: var(--surface); color: var(--ink); border-top: 1px solid var(--line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cta-band { background: var(--surface); color: var(--ink); border-top: 1px solid var(--line); } }
.cta-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-band h2 { font-size: 1.7rem; margin-bottom: 6px; }
.cta-band p { margin: 0; opacity: .85; }
.cta-band .btn-primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.cta-band .btn-primary:hover { background: #fff; color: var(--ink); }
:root[data-theme="dark"] .cta-band .btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cta-band .btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } }

/* ---- auth + narrow pages ------------------------------------------------ */
.auth { padding: 64px 24px 88px; }
.auth-card { max-width: 420px; margin-inline: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden;
  box-shadow: inset 0 0 0 5px var(--surface), inset 0 0 0 6px var(--line), var(--shadow-cert); padding: 6px; }
.auth-card-wide { max-width: 500px; }
.guilloche-strip { height: 48px; }
.auth-body { padding: 6px 26px 30px; }
.auth-body .mark { color: var(--accent); margin-bottom: 8px; }
.auth-body h1 { font-size: 1.7rem; margin-bottom: 18px; }
.auth-alt { margin: 18px 0 0; text-align: center; color: var(--ink-2); }
.narrow-page { max-width: 620px; margin: 0 auto; padding: 72px 24px 96px; }
.narrow-page h1 { font-size: 2rem; margin-bottom: 12px; }
.intro-video { width: 100%; border-radius: var(--radius); margin-top: 12px; }

/* ---- forms --------------------------------------------------------------- */
.field { margin: 0 0 20px; border: 0; padding: 0; min-width: 0; }
.field label, .field legend { display: block; margin: 0 0 6px; padding: 0; font-weight: 600; font-size: 14px; }
.field input:not([type="radio"]), .field select, .field textarea {
  display: block; width: 100%; max-width: 520px; padding: .62em .8em;
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.field input.mono, .field textarea.mono { font-family: var(--font-mono); font-size: 14px; }
.field textarea { max-width: 680px; line-height: 1.5; resize: vertical; }
.field.is-narrow input:not([type="radio"]), .field.is-narrow select { max-width: 200px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.field .help { margin: 6px 0 0; font-size: 13px; color: var(--muted); max-width: 60ch; }
.field .error { margin: 6px 0 0; font-size: 13.5px; font-weight: 500; color: var(--bad); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--bad); }
.auth-body .field input { max-width: none; }
.field-row { display: flex; flex-wrap: wrap; gap: 0 28px; }
.field-row .field { flex: 0 1 auto; }
.field-row .field .help { max-width: 24ch; }

.segmented { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.segmented label { margin: 0; padding: .5em 1.1em; font-weight: 500; cursor: pointer; color: var(--ink-2); border-left: 1px solid var(--line-strong); }
.segmented label:first-of-type { border-left: 0; }
.segmented input:checked + label { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.segmented input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: -3px; }

.section { border: 0; margin: 0 0 36px; padding: 0; min-width: 0; }
.section > legend { float: left; width: 100%; padding: 0 0 8px; margin: 0 0 18px; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; border-bottom: 1px solid var(--line); }
.section > legend + * { clear: both; }
.section-note { margin: -6px 0 18px; color: var(--muted); font-size: 14px; }
.form-card { max-width: 640px; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.settings-form { max-width: 760px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.sticky-actions { position: sticky; bottom: 0; z-index: 5; padding: 14px 0; margin-top: 0; background: var(--paper); border-top: 1px solid var(--line); }

.confirm-dialog { max-width: 420px; padding: 24px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.confirm-dialog::backdrop { background: rgba(10, 17, 31, .55); }
.confirm-text { margin: 0 0 18px; font-weight: 500; }
.confirm-dialog .form-actions { margin: 0; }

/* ---- app shell ----------------------------------------------------------- */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.rail { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column; gap: 22px; padding: 20px 14px; background: var(--surface); border-right: 1px solid var(--line); }
.rail .brand { padding: 4px 8px; }
.rail-nav { display: grid; gap: 2px; }
.rail-link { display: flex; align-items: center; gap: 10px; padding: .55em .75em; color: var(--ink-2); text-decoration: none; font-weight: 500; border-radius: var(--radius); }
.rail-link:hover { background: var(--paper-2); color: var(--ink); }
.rail-link[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.rail-foot { margin-top: auto; display: grid; gap: 10px; }
.trial-note { margin: 0; padding: .5em .75em; font-size: 13px; font-weight: 600; color: var(--warn); background: var(--warn-soft); border-radius: var(--radius); }
.who { margin: 0; padding: 0 8px; display: grid; line-height: 1.35; }
.who span { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.rail-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.rail-actions .rail-link { flex: 1; }
.app-main { min-width: 0; padding: 34px 44px 0; max-width: 1180px; width: 100%; }

.page-head { margin-bottom: 24px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; padding: 0; list-style: none; font-size: 13.5px; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 4px; color: var(--line-strong); }
.crumbs a { color: var(--ink-2); }
.page-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head h1 { font-size: 1.95rem; overflow-wrap: anywhere; }
.page-sub { margin: 6px 0 0; color: var(--muted); }
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.panel { margin: 0 0 32px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.panel h2 { font-size: 1.15rem; margin-bottom: 2px; }
.panel-sub { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.panel-attention { border-left: 4px solid var(--stamp-warn); }
.attention-list { list-style: none; margin: 0; padding: 0; }
.attention-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 9px 0; border-top: 1px solid var(--line); }
.attention-list li:first-child { border-top: 0; }
.attention-list a { font-weight: 600; }
.attention-list .expiry { margin-left: auto; }

.id-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: -8px 0 22px; }
.id-label { color: var(--muted); font-size: 13.5px; }
.key { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.key code { padding: .18em .55em; font-size: 12.5px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 4px; overflow-wrap: anywhere; }
.key-copy { flex: none; white-space: nowrap; padding: .2em .65em; font: 500 12.5px var(--font-ui); color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; cursor: pointer; }
.key-copy:hover { background: var(--paper-2); color: var(--ink); }
.key-copy.is-copied { color: var(--good); border-color: var(--good); }

.tabs { display: flex; gap: 26px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.tab { padding: .6em .1em; margin-bottom: -1px; color: var(--ink-2); font-weight: 500; text-decoration: none; border-bottom: 2px solid transparent; }
.tab:hover { color: var(--ink); }
.tab[aria-current="page"] { color: var(--ink); font-weight: 600; border-color: var(--accent); }

.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-head h2 { font-size: 1.3rem; }
.seats { margin-top: 12px; }
.facts { display: grid; gap: 14px; margin: 0; }
.facts > div { display: grid; grid-template-columns: 12em 1fr; gap: 12px; align-items: baseline; }
.facts dt { color: var(--muted); font-size: 14px; }
.facts dd { margin: 0; overflow-wrap: anywhere; }

.empty { padding: 36px 28px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface); max-width: 620px; }
.empty h3 { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 6px; }
.empty p { color: var(--ink-2); max-width: 52ch; }

.danger-zone { border: 1px solid var(--bad); margin: 52px 0 36px; padding: 20px 22px; max-width: 760px; border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); border-radius: var(--radius); }
.danger-zone h2 { font-family: var(--font-ui); font-size: 1rem; font-weight: 600; letter-spacing: 0; margin-bottom: 6px; color: var(--bad); }
.danger-zone p { color: var(--ink-2); margin-bottom: 14px; }

/* ---- tables -------------------------------------------------------------- */
.table-tools { margin-bottom: 12px; }
.table-tools input { width: 100%; max-width: 320px; padding: .55em .8em; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.data th, .data td { padding: .75em 1em; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.data thead th { font-size: 13px; font-weight: 600; color: var(--muted); background: var(--paper-2); white-space: nowrap; }
.data tbody tr:last-child > * { border-bottom: 0; }
.data tbody tr:hover { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.data tbody th[scope="row"] { font-weight: 600; }
.data td.num, .data th.num { text-align: right; }
.data tr[hidden] { display: none; }

/* pricing */
.pricing { padding-block: 56px 88px; }
.pricing h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin-bottom: 12px; }
.pricing .lead { margin-bottom: 32px; }
.plans th, .plans td { text-align: center; }
.plans tbody th[scope="row"] { text-align: left; font-weight: 500; }
.plans thead td { background: var(--paper-2); }
.plan-name { display: block; font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
.plan-price { display: block; font-weight: 500; color: var(--ink-2); }
.plans .group th { text-align: left; font-family: var(--font-display); font-size: 1rem; color: var(--ink); background: var(--paper); }
.tick { color: var(--good); font-weight: 700; }
.dash { color: var(--line-strong); }
.notes { margin: 24px 0 8px; padding-left: 1.4em; color: var(--ink-2); font-size: 14px; }
.notes li { margin-bottom: 4px; }
.pricing sup a { text-decoration: none; padding-left: 2px; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .feature { grid-template-columns: 1fr; gap: 24px; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .rail-nav { display: flex; flex-wrap: wrap; gap: 2px; order: 3; width: 100%; }
  .rail-foot { margin: 0 0 0 auto; display: flex; align-items: center; gap: 8px; }
  .who, .trial-note { display: none; }
  .rail-actions .rail-link { flex: none; }
  .app-main { padding: 22px 16px 0; }
}
@media (max-width: 640px) {
  .wrap { padding-inline: 16px; }
  .hero { padding: 40px 0 52px; }
  .features { padding-block: 64px 48px; }
  .site-nav .nav-opt { display: none; }
  .certificate-body { padding-inline: 18px; }
  .certificate-facts > div { grid-template-columns: 1fr; gap: 2px; }
  .certificate-stamp { position: static; display: inline-block; margin: 0 0 14px; }
  .facts > div { grid-template-columns: 1fr; gap: 2px; }
  .cta-row .btn { width: 100%; }
  .auth { padding: 32px 16px 56px; }
  .page-head h1 { font-size: 1.6rem; }
  .form-card { padding: 20px; }
}