/* Domainvane design system — served same-origin at /assets/site.css.
   No inline styles or scripts anywhere; everything is class-driven so the
   site works under a strict CSP (style-src 'self'; script-src 'none'). */

/* ---------------------------------------------------------------- Tokens */
:root {
  color-scheme: light;

  /* Neutral ink / slate scale */
  --ink-950: #080b14;
  --ink-900: #0f172a;
  --ink-800: #1e293b;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748b;
  --ink-400: #94a3b8;
  --ink-300: #cbd5e1;
  --ink-200: #e2e8f0;
  --ink-100: #f1f5f9;
  --ink-50:  #f8fafc;
  --white:   #ffffff;

  /* Semantic surfaces */
  --bg: var(--white);
  --bg-subtle: var(--ink-50);
  --bg-inset: var(--ink-100);
  --surface: var(--white);
  --surface-raised: var(--white);
  --border: #e6ebf2;
  --border-strong: var(--ink-200);
  --text: var(--ink-900);
  --text-soft: var(--ink-600);
  --text-muted: var(--ink-500);
  --heading: var(--ink-950);

  /* Accent — confident indigo */
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-press: #3730a3;
  --accent-ink: #ffffff;
  --accent-weak: #eef2ff;
  --accent-weak-border: #dfe3ff;
  --accent-text: #4338ca;

  /* Status colours (ok / warn / danger / unknown) */
  --ok: #047857;        --ok-bg: #ecfdf5;   --ok-border: #a7f3d0;
  --warn: #b45309;      --warn-bg: #fffbeb; --warn-border: #fde68a;
  --danger: #b91c1c;    --danger-bg: #fef2f2; --danger-border: #fecaca;
  --unknown: #475569;   --unknown-bg: #f1f5f9; --unknown-border: #dbe2ea;

  /* Dark ink panels (used on hero/CTA bands in light mode too) */
  --ink-panel: #0f172a;
  --ink-panel-2: #131f38;
  --on-ink: #e8edf6;
  --on-ink-soft: #a9b6cc;
  --on-ink-border: rgba(255, 255, 255, 0.10);

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", "Menlo", "Consolas",
    "Liberation Mono", monospace;

  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.075rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.9rem;
  --fs-3xl: 2.4rem;
  --fs-hero: clamp(2.3rem, 1.4rem + 3.6vw, 3.6rem);

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.6;

  /* 4 / 8 spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Radii */
  --r-sm: 7px;
  --r: 11px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow: 0 4px 12px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 12px 28px rgba(15, 23, 42, 0.10), 0 4px 10px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.16), 0 8px 20px rgba(15, 23, 42, 0.08);

  --ring: 0 0 0 3px rgba(79, 70, 229, 0.45);

  --container: 1120px;
  --container-narrow: 760px;
  --header-h: 64px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0a0f1c;
    --bg-subtle: #0d1424;
    --bg-inset: #111a2e;
    --surface: #101828;
    --surface-raised: #141d31;
    --border: #1f2b44;
    --border-strong: #27334d;
    --text: #e8edf6;
    --text-soft: #b3c0d6;
    --text-muted: #8595b0;
    --heading: #f4f7fc;

    --accent: #7c83ff;
    --accent-hover: #9096ff;
    --accent-press: #b3b7ff;
    --accent-ink: #0a0f1c;
    --accent-weak: #171f3a;
    --accent-weak-border: #2a2f5c;
    --accent-text: #aeb4ff;

    --ok: #34d399;   --ok-bg: #08271d;   --ok-border: #17513b;
    --warn: #fbbf24; --warn-bg: #2b1f06; --warn-border: #5c440f;
    --danger: #f87171; --danger-bg: #2a1113; --danger-border: #5e2327;
    --unknown: #9fb0c9; --unknown-bg: #141d31; --unknown-border: #27334d;

    --ink-panel: #0b1120;
    --ink-panel-2: #101a30;
    --on-ink: #e8edf6;
    --on-ink-soft: #a9b6cc;
    --on-ink-border: rgba(255, 255, 255, 0.08);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 14px 30px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 26px 60px rgba(0, 0, 0, 0.6);
    --border: #1f2b44;
  }
}

/* ---------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  color: var(--heading);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-3);
  font-weight: 700;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--sp-4); }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { font-weight: 650; color: var(--heading); }
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.1em 0.4em;
}
img, svg { max-width: 100%; }
hr { border: none; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: -60px;
  z-index: 100;
  background: var(--accent);
  color: var(--accent-ink);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r);
  font-weight: 600;
  transition: top 0.15s ease;
}
.skip-link:focus { top: var(--sp-3); text-decoration: none; }

/* ---------------------------------------------------------------- Layout */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.container-narrow { max-width: var(--container-narrow); }

main { flex: 1 0 auto; width: 100%; }

.site-main--wide { display: block; }
.site-main--contained {
  display: block;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--sp-7) var(--sp-5) var(--sp-8);
}
.site-main--narrow {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding: var(--sp-7) var(--sp-5) var(--sp-8);
}

.section { padding: var(--sp-8) 0; }
.section--tight { padding: var(--sp-7) 0; }
.section--subtle { background: var(--bg-subtle); border-block: 1px solid var(--border); }

.section-head { max-width: 620px; margin-bottom: var(--sp-6); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: var(--sp-2); }
.section-head p { color: var(--text-soft); font-size: var(--fs-md); margin: 0; }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 var(--sp-3);
}

/* ---------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-5);
  border-radius: var(--r);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease,
    box-shadow 0.15s ease, color 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
  font-family: inherit;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-press); }

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { border-color: var(--ink-400); background: var(--bg-subtle); }

.btn-ghost { background: transparent; color: var(--text-soft); }
.btn-ghost:hover { background: var(--bg-inset); color: var(--text); }

.btn-danger {
  background: var(--surface);
  color: var(--danger);
  border-color: var(--danger-border);
}
.btn-danger:hover { background: var(--danger-bg); }

.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-xs); }

.btn-on-ink { background: var(--white); color: var(--ink-900); }
.btn-on-ink:hover { background: var(--ink-100); }
.btn-ghost-ink {
  background: transparent; color: var(--on-ink);
  border-color: var(--on-ink-border);
}
.btn-ghost-ink:hover { background: rgba(255, 255, 255, 0.08); }

/* ---------------------------------------------------------------- Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: -0.02em;
  color: var(--heading);
}
.brand:hover { text-decoration: none; }
.brand .mark { width: 26px; height: 26px; color: var(--accent); flex: none; }
.brand-word { font-weight: 750; }

.nav-desktop { margin-left: auto; }
.nav-mobile { display: none; }
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a.nav-link {
  color: var(--text-soft);
  font-weight: 550;
  font-size: var(--fs-sm);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}
.nav-links a.nav-link:hover { color: var(--text); background: var(--bg-inset); text-decoration: none; }
.nav-links a.nav-link[aria-current="page"] { color: var(--accent-text); }
.nav-sep { width: 1px; height: 22px; background: var(--border); margin: 0 var(--sp-1); }

/* Mobile nav via <details> — no JavaScript required */
@media (max-width: 820px) {
  .nav-desktop { display: none; }
  .nav-mobile { display: block; margin-left: auto; position: relative; }
  .nav-mobile > details { position: static; }
  .nav-mobile summary {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    list-style: none;
    cursor: pointer;
    min-height: 44px;
    padding: 0 var(--sp-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--r);
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--text);
    background: var(--surface);
  }
  .nav-mobile summary::-webkit-details-marker { display: none; }
  .nav-mobile details[open] > summary { border-color: var(--accent); }
  .nav-mobile .nav-links {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-1);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-3);
    min-width: 230px;
    z-index: 60;
  }
  .nav-mobile .nav-links a.nav-link { width: 100%; justify-content: flex-start; }
  .nav-mobile .nav-links .btn { justify-content: center; margin-top: var(--sp-1); }
  .nav-sep { display: none; }
}

/* ---------------------------------------------------------------- Notice banner */
.notice {
  margin: 0;
  background: linear-gradient(0deg, var(--warn-bg), var(--warn-bg));
  border-bottom: 1px solid var(--warn-border);
  color: var(--warn);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  padding: var(--sp-3) var(--sp-5);
  text-align: center;
}
.notice strong { color: var(--warn); }

/* ---------------------------------------------------------------- Hero */
.hero {
  position: relative;
  background:
    radial-gradient(1100px 480px at 78% -12%, rgba(79, 70, 229, 0.14), transparent 60%),
    radial-gradient(760px 420px at 8% 8%, rgba(79, 70, 229, 0.08), transparent 55%),
    var(--bg);
  overflow: hidden;
}
.hero .container { padding-block: var(--sp-9) var(--sp-8); }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp-8);
  align-items: center;
}
.hero h1 {
  font-size: var(--fs-hero);
  letter-spacing: -0.03em;
  max-width: 15ch;
  margin-bottom: var(--sp-4);
}
.hero-sub {
  font-size: var(--fs-md);
  color: var(--text-soft);
  max-width: 52ch;
  margin-bottom: var(--sp-5);
}
.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.cta-center { justify-content: center; }
.cta-note { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-muted); max-width: 48ch; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .hero .container { padding-block: var(--sp-8) var(--sp-7); }
}

/* ---------------------------------------------------------------- Product mock */
.mock {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.mock-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}
.mock-dot { width: 11px; height: 11px; border-radius: var(--r-pill); background: var(--ink-300); flex: none; }
.mock-title { margin-left: var(--sp-2); font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; letter-spacing: 0.02em; }
.mock-body { padding: var(--sp-4); }
.mock-row {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr 0.9fr;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.mock-row:last-child { border-bottom: none; }
.mock-row .host { font-weight: 600; color: var(--heading); }
.mock-row .sub { color: var(--text-muted); font-size: var(--fs-xs); }
.mock-days { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-soft); font-weight: 600; }

.report-card {
  margin-top: var(--sp-5);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: var(--sp-4);
  max-width: 340px;
}
.report-card h4 { margin: 0 0 var(--sp-1); font-size: var(--fs-sm); }
.report-card .muted { color: var(--text-muted); font-size: var(--fs-xs); margin-bottom: var(--sp-3); }
.report-card .rc-row { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-2) 0; border-top: 1px solid var(--border); font-size: var(--fs-sm); }

/* ---------------------------------------------------------------- Status pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.25em 0.65em;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 650;
  line-height: 1.5;
  border: 1px solid transparent;
  white-space: nowrap;
  text-transform: capitalize;
}
.pill::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: var(--r-pill);
  background: currentColor;
  flex: none;
}
.pill-ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-border); }
.pill-warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-border); }
.pill-danger { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-border); }
.pill-unknown { color: var(--unknown); background: var(--unknown-bg); border-color: var(--unknown-border); }
.pill .code { text-transform: none; font-family: var(--font-mono); font-size: 0.92em; }

/* ---------------------------------------------------------------- Feature grid */
.grid { display: grid; gap: var(--sp-5); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.feature .icon {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r);
  background: var(--accent-weak);
  border: 1px solid var(--accent-weak-border);
  color: var(--accent);
  margin-bottom: var(--sp-4);
}
.feature .icon svg { width: 22px; height: 22px; }
.feature h3 { margin-bottom: var(--sp-2); font-size: var(--fs-md); }
.feature p { margin: 0; color: var(--text-soft); font-size: var(--fs-sm); }

/* ---------------------------------------------------------------- Steps */
.steps { counter-reset: step; display: grid; gap: var(--sp-5); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: var(--sp-5); }
.step .num {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink);
  font-weight: 700; font-size: var(--fs-sm);
  margin-bottom: var(--sp-3);
}
.step h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.step p { color: var(--text-soft); font-size: var(--fs-sm); margin: 0; }

/* ---------------------------------------------------------------- Callout */
.callout {
  background: var(--accent-weak);
  border: 1px solid var(--accent-weak-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--sp-4);
}
.callout .icon { color: var(--accent); }
.callout .icon svg { width: 32px; height: 32px; }
.callout h3 { margin-bottom: var(--sp-2); }
.callout p { color: var(--text-soft); font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
.callout p:last-child { margin-bottom: 0; }
.callout a { word-break: break-word; }
@media (max-width: 560px) { .callout { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Ink bands (hero-ish CTA) */
.band-ink {
  background:
    radial-gradient(700px 300px at 85% -30%, rgba(124, 131, 255, 0.28), transparent 60%),
    linear-gradient(180deg, var(--ink-panel-2), var(--ink-panel));
  color: var(--on-ink);
}
.band-ink h2, .band-ink h3 { color: var(--white); }
.band-ink p { color: var(--on-ink-soft); }
.cta-band { text-align: center; }
.cta-band .container { padding-block: var(--sp-8); }
.cta-band .cta-row { justify-content: center; }
.cta-band h2 { font-size: var(--fs-2xl); max-width: 20ch; margin-inline: auto; }
.cta-band p { max-width: 52ch; margin: 0 auto var(--sp-5); }

/* ---------------------------------------------------------------- Pricing */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  align-items: start;
}
@media (max-width: 980px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pricing-grid { grid-template-columns: 1fr; } }

.plan {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.plan--featured {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  position: relative;
}
.plan--featured::before {
  content: "Recommended";
  position: absolute;
  top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--accent-ink);
  font-size: var(--fs-xs); font-weight: 700;
  padding: 0.25em 0.85em; border-radius: var(--r-pill);
  letter-spacing: 0.02em;
}
.plan h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-1); }
.plan .price { display: flex; align-items: baseline; gap: 0.25em; margin-bottom: var(--sp-1); }
.plan .price .amt { font-size: var(--fs-2xl); font-weight: 750; color: var(--heading); letter-spacing: -0.03em; }
.plan .price .per { color: var(--text-muted); font-size: var(--fs-sm); }
.plan .avail { font-size: var(--fs-xs); font-weight: 650; margin-bottom: var(--sp-4); }
.plan .avail.now { color: var(--ok); }
.plan .avail.soon { color: var(--text-muted); }
.plan .plan-cap { font-size: var(--fs-sm); color: var(--text-soft); margin-bottom: var(--sp-4); }
.plan .plan-cap b { color: var(--heading); font-size: var(--fs-md); }
.plan .btn { margin-bottom: var(--sp-4); }
.feat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.feat-list li { display: grid; grid-template-columns: 20px 1fr; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-soft); align-items: start; }
.feat-list li svg { width: 16px; height: 16px; margin-top: 3px; }
.feat-list li.yes svg { color: var(--ok); }
.feat-list li.no { color: var(--text-muted); }
.feat-list li.no svg { color: var(--ink-300); }

/* ---------------------------------------------------------------- Data tables */
.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 640px; }
table.data th {
  text-align: left;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.data td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text-soft);
}
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: var(--bg-subtle); }
table.data .host { color: var(--heading); font-weight: 600; }
table.data .days { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--text); }
.days.days-danger { color: var(--danger); }
.days.days-warn { color: var(--warn); }
.days.days-ok { color: var(--ok); }
.days.days-unknown { color: var(--text-muted); }
.cell-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.cell-actions form { margin: 0; }

/* Prose comparison table (pricing FAQ / legal tables) */
.prose table { width: 100%; border-collapse: collapse; margin: var(--sp-5) 0; font-size: var(--fs-sm); display: block; overflow-x: auto; }
.prose table th, .prose table td { border: 1px solid var(--border); padding: var(--sp-3); text-align: left; vertical-align: top; }
.prose table th { background: var(--bg-subtle); color: var(--heading); font-weight: 650; }

/* ---------------------------------------------------------------- Forms */
.field { display: block; margin-bottom: var(--sp-4); }
.field > span, label.field-label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--heading); margin-bottom: var(--sp-2); }
input[type="text"], input[type="email"], input[type="password"], input:not([type]),
textarea, select {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  padding: 0 var(--sp-3);
  min-height: 44px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea { padding: var(--sp-3); min-height: 120px; resize: vertical; line-height: var(--lh-snug); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
.form-inline { display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap; }
.form-inline .field { margin-bottom: 0; flex: 1 1 200px; }
.form-hint { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-2); }

/* Usage meter */
.usage { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.usage meter { width: 220px; height: 10px; }
meter {
  -webkit-appearance: none; appearance: none;
  border-radius: var(--r-pill); background: var(--bg-inset);
  border: 1px solid var(--border);
  overflow: hidden;
}
meter::-webkit-meter-bar { background: var(--bg-inset); border: none; border-radius: var(--r-pill); }
meter::-webkit-meter-optimum-value { background: var(--accent); border-radius: var(--r-pill); }
meter::-webkit-meter-suboptimum-value { background: var(--warn); }
meter::-webkit-meter-even-less-good-value { background: var(--danger); }
meter::-moz-meter-bar { background: var(--accent); border-radius: var(--r-pill); }
.usage-label { font-size: var(--fs-sm); color: var(--text-soft); font-weight: 600; }

/* Accordion (home FAQ) */
details.card { padding: var(--sp-4) var(--sp-5); }
details.card summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-md);
  color: var(--heading);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
details.card summary::-webkit-details-marker { display: none; }
details.card summary::after {
  content: "+";
  font-size: var(--fs-lg);
  color: var(--text-muted);
  font-weight: 400;
}
details.card[open] summary::after { content: "\2212"; }
details.card[open] summary { margin-bottom: var(--sp-3); }
details.card p { color: var(--text-soft); font-size: var(--fs-sm); }

/* ---------------------------------------------------------------- Auth / narrow cards */
.auth-shell {
  min-height: calc(100vh - var(--header-h) - 120px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--sp-8) var(--sp-5);
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: var(--sp-6);
}
.auth-card h1 { font-size: var(--fs-xl); text-align: center; margin-bottom: var(--sp-2); }
.auth-lede { text-align: center; color: var(--text-soft); font-size: var(--fs-sm); margin-bottom: var(--sp-5); }
.auth-alt { text-align: center; margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--text-muted); }
.form-message {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger);
  border-radius: var(--r);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}
.form-message.ok { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok); }

/* ---------------------------------------------------------------- App pages */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.page-head h1 { margin-bottom: var(--sp-1); }
.page-head .sub { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }
.meta-row { display: flex; gap: var(--sp-2) var(--sp-5); flex-wrap: wrap; align-items: center; color: var(--text-soft); font-size: var(--fs-sm); }
.meta-row .badge { background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 0.2em 0.7em; font-weight: 600; color: var(--text); text-transform: capitalize; }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--sp-5);
}
.panel h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-4); }
.panel-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 760px) { .panel-split { grid-template-columns: 1fr; } }

.empty {
  text-align: center;
  padding: var(--sp-8) var(--sp-5);
  color: var(--text-soft);
}
.empty .icon { color: var(--ink-300); margin-bottom: var(--sp-3); }
.empty .icon svg { width: 46px; height: 46px; }
.empty h3 { margin-bottom: var(--sp-2); }
.empty p { margin-inline: auto; max-width: 42ch; font-size: var(--fs-sm); }

/* ---------------------------------------------------------------- Report (client-facing) */
.report-shell { max-width: 860px; margin-inline: auto; padding: var(--sp-8) var(--sp-5); }
.report-header { border-bottom: 1px solid var(--border); padding-bottom: var(--sp-5); margin-bottom: var(--sp-6); }
.report-header .eyebrow { margin-bottom: var(--sp-2); }
.report-header h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-2); }
.report-header p { color: var(--text-soft); margin: 0; }
.report-footnote { margin-top: var(--sp-6); color: var(--text-muted); font-size: var(--fs-xs); }

/* ---------------------------------------------------------------- Prose (legal/faq) */
.prose { max-width: var(--container-narrow); }
.prose h1 { font-size: var(--fs-3xl); margin-bottom: var(--sp-5); }
.prose h2 { font-size: var(--fs-xl); margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.prose > h2:first-of-type, .prose h1 + h2 { border-top: none; padding-top: 0; }
.prose h3 { font-size: var(--fs-md); margin-top: var(--sp-5); }
.prose p, .prose li { color: var(--text-soft); }
.prose ul, .prose ol { padding-left: var(--sp-5); margin: 0 0 var(--sp-4); }
.prose li { margin-bottom: var(--sp-2); }
.prose > p:first-of-type { font-size: var(--fs-md); color: var(--text); }

/* ---------------------------------------------------------------- Footer */
.site-footer {
  flex-shrink: 0;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
  padding: var(--sp-8) 0 var(--sp-6);
  margin-top: var(--sp-8);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--sp-6);
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
/* Narrower phones are handled by the intentional compact-footer block below
   (<=620px): brand spans full width, link groups stay two-up. */
.footer-brand .brand { margin-bottom: var(--sp-3); }
.footer-brand p { color: var(--text-muted); font-size: var(--fs-sm); max-width: 34ch; }
.footer-col h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: var(--sp-3); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.footer-col a { color: var(--text-soft); font-size: var(--fs-sm); }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
/* Compact footer on phones so it doesn't dwarf the page content. */
@media (max-width: 620px) {
  .site-footer { padding: var(--sp-6) 0 var(--sp-5); margin-top: var(--sp-6); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-4); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { max-width: none; margin-bottom: 0; }
  .footer-bottom { margin-top: var(--sp-5); padding-top: var(--sp-4); gap: var(--sp-1); }
}

/* ---------------------------------------------------------------- Utilities */
.stack > * + * { margin-top: var(--sp-4); }
.muted { color: var(--text-muted); }
.sub { color: var(--text-muted); font-size: var(--fs-xs); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.lead { font-size: var(--fs-md); color: var(--text-soft); }

/* ---------------------------------------------------------------- Days unit */
.days-unit { font-weight: 600; font-size: 0.85em; margin-left: 1px; opacity: 0.7; }

/* ---------------------------------------------------------------- Form message variants */
.form-message.warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn); }
.form-message .code { text-transform: none; }
.bulk-line { margin-top: var(--sp-2); display: flex; gap: var(--sp-2); align-items: baseline; flex-wrap: wrap; }
.copy-field {
  display: block; width: 100%; margin-top: var(--sp-3); font-family: var(--font-mono);
  font-size: var(--fs-xs); background: var(--surface); color: var(--text);
}
.report-open { display: inline-block; margin-top: var(--sp-3); font-weight: 600; font-size: var(--fs-sm); }

/* -------------------------------------------------------- Hostname checklist */
.check-list { border: 0; margin: 0; padding: 0; min-width: 0; }
.check-list legend { font-weight: 600; font-size: var(--fs-sm); color: var(--heading); padding: 0; }
.check-grid {
  margin-top: var(--sp-2); display: grid; gap: var(--sp-1);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  max-height: 320px; overflow: auto;
  border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-2);
  background: var(--surface);
}
.check-option {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-sm);
}
.check-option:hover { background: var(--bg-inset); }
.check-option input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.check-option .host { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- Dashboard triage cards */
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 620px) { .stat-cards { grid-template-columns: repeat(2, 1fr); } }
.stat {
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-4); border-radius: var(--r); border: 1px solid var(--border);
  background: var(--bg-subtle);
}
.stat-num { font-size: var(--fs-2xl); font-weight: 750; line-height: 1; color: var(--heading); font-variant-numeric: tabular-nums; }
.stat-label { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; }
.stat-danger { border-color: var(--danger-border); background: var(--danger-bg); }
.stat-danger .stat-num { color: var(--danger); }
.stat-warn { border-color: var(--warn-border); background: var(--warn-bg); }
.stat-warn .stat-num { color: var(--warn); }
.stat-ok { border-color: var(--ok-border); background: var(--ok-bg); }
.stat-ok .stat-num { color: var(--ok); }
.stat-unknown .stat-num { color: var(--unknown); }

/* ---------------------------------------------------------------- Public SSL checker */
.checker-panel {
  max-width: 560px; margin: var(--sp-5) auto 0; text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: var(--sp-5);
}
.checker-form { display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap; }
.checker-form .field { margin-bottom: 0; flex: 1 1 260px; }
.checker-form .btn { flex: 0 0 auto; }
.check-result { margin: var(--sp-4) 0 0; }
.check-result .code { font-family: var(--font-mono); }

/* ---------------------------------------------------------------- Report summary + pricing notify */
.report-summary { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }
.plan-notify { display: block; text-align: center; font-size: var(--fs-xs); margin: calc(-1 * var(--sp-2)) 0 var(--sp-4); }
.feat-list li.soon { color: var(--text-soft); }
.feat-list li.soon svg { color: var(--warn); }

/* ---------------------------------------------------------------- Responsive data cards (mobile) */
@media (max-width: 640px) {
  table.data.cards { min-width: 0; }
  table.data.cards thead {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); padding: 0; border: 0;
  }
  table.data.cards tr { display: block; border-bottom: 6px solid var(--bg-subtle); }
  table.data.cards tr:last-child { border-bottom: none; }
  table.data.cards td {
    display: block; position: relative; border: none; text-align: right;
    padding: var(--sp-2) var(--sp-4) var(--sp-2) 42%; min-height: 40px;
  }
  table.data.cards td::before {
    content: attr(data-label); position: absolute; left: var(--sp-4); top: var(--sp-2);
    width: 36%; text-align: left; font-size: var(--fs-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted);
  }
  table.data.cards td[data-label="Actions"] { text-align: left; padding: var(--sp-3) var(--sp-4); }
  table.data.cards td[data-label="Actions"]::before {
    position: static; display: block; width: auto; margin-bottom: var(--sp-2);
  }
  table.data.cards .cell-actions { gap: var(--sp-2); }
  table.data.cards .cell-actions form { flex: 1 1 auto; margin: 0; }
  table.data.cards .cell-actions .btn { width: 100%; min-height: 44px; }
  table.data.cards .sub, table.data.cards .pill { white-space: normal; word-break: break-word; }
  table.data.cards .pill { display: inline-flex; }
  .checker-form .btn { width: 100%; }
}

/* ---------------------------------------------------------------- Print (report pages) */
@media print {
  .site-header, .site-footer, .notice, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .report-shell { padding: 0; }
  .table-wrap, .panel { box-shadow: none; border-color: #ccc; }
  a { color: #000; text-decoration: none; }
}

/* ---------------------------------------------------------------- SSL checker result (SEO channel 1) */
.field-help { display: block; font-size: var(--fs-xs); color: var(--text-muted); font-weight: 400; margin: var(--sp-1) 0 0; }
.checker-help { flex: 1 1 100%; margin-top: 0; }
.checker-privacy { flex: 1 1 100%; margin: 0; font-size: var(--fs-sm); color: var(--text-soft); }
.checker-loading { flex: 1 1 100%; margin: 0; font-size: var(--fs-sm); }
.check-result h2 { font-size: var(--fs-lg); margin-top: var(--sp-4); }
.result-status { margin: var(--sp-2) 0 var(--sp-3); }
.result-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.result-table th, .result-table td { border-top: 1px solid var(--border); padding: var(--sp-2) var(--sp-2) var(--sp-2) 0; text-align: left; vertical-align: top; }
.result-table th { width: 42%; color: var(--heading); font-weight: 600; }
.result-table td { word-break: break-word; }
.chain-list { margin: var(--sp-1) 0 0; padding-left: 1.2em; }
.san-all summary { cursor: pointer; color: var(--accent-text); }
.checker-diagnostic { margin-top: var(--sp-4); }
.checker-diagnostic h3 { font-size: var(--fs-base, 1rem); margin-bottom: var(--sp-1); }
.diagnostic-actions { display: flex; gap: var(--sp-3); align-items: center; margin: var(--sp-2) 0; }
.copy-note { font-size: var(--fs-xs); color: var(--text-muted); }
pre.diagnostic, .prose pre {
  font-family: var(--font-mono); font-size: var(--fs-xs); background: var(--bg-inset);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--sp-3);
  overflow-x: auto; white-space: pre; user-select: text; text-align: left;
}
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.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; }