/* ============================================================================
   isaeo — shared stylesheet
   ----------------------------------------------------------------------------
   Single source of truth for design tokens and shared components. Templates
   previously each carried their own :root block (the same tokens copied 21-25
   times), which had already drifted: --body was #999 in most files and #777 in
   three, --hairline had two values, --gradient three different spellings.
   Those are reconciled here; page-specific rules stay in their template.

   DESIGN DIRECTION — "instrument"
   The product measures things: it crawls a site, scores it for search (SEO) and
   for answer engines (AEO), and reports the gap. The visual language is
   borrowed from measuring instruments rather than from marketing pages:

     * Type  — Fraunces (display) against Inter (body) and JetBrains Mono
               (data). The display face is a variable serif with an optical
               `soft`/`wonk` axis; used large and sparingly it reads as
               editorial authority rather than SaaS-default geometric sans.
               Mono is reserved strictly for measured values and labels, so
               numbers always look like readings.
     * Gauge — the signature device. SEO and AEO are never shown alone; they
               appear as a pair with the gap between them made visible. That
               gap IS the product's argument (see the 83-vs-13 crawl), so it
               earns the one bold element on the page.
     * Rules — hairlines and tick marks carry structure instead of cards and
               shadows. A measurement scale is the metaphor: ticks, not boxes.

   Restraint: the gauge is the loud thing. Everything around it stays quiet —
   flat surfaces, one accent, no gradient washes outside the brand mark.
   ========================================================================= */

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Surfaces. The navy is the brand's anchor and predates this stylesheet;
     it is deliberately kept so existing users and the white-label report
     stay coherent. */
  --canvas: #fff;
  --canvas-dark: #010120;
  --canvas-tint: #fafafb;          /* barely-there band separator on light */
  --surface-dark-soft: #26263a;    /* hairline on dark */
  --surface-dark-fill: #313641;    /* raised fill on dark */
  --surface-dark-deep: #0a0a22;    /* inset panel on dark */

  /* Ink */
  --ink: #000;
  --ink-soft: #444;
  --body: #6c6c7a;                 /* reconciled: was #999 (17x) and #777 (3x).
                                      #999 fails WCAG AA on white at body
                                      sizes; this passes at 4.6:1. */
  --body-dark: #b8b8c8;            /* body text on navy */
  --body-dim: #8a8aa0;             /* captions on navy */
  --on-dark: #fff;
  --hairline: #e8e8ec;             /* reconciled from #ebebeb / #e6e6e6 */
  --soft: #f2f2f2;

  /* Brand accents */
  --accent-orange: #fc4c02;
  --accent-magenta: #ef2cc1;
  --accent-periwinkle: #bdbbff;
  --accent-mint: #c8f6f9;
  --gradient: linear-gradient(105deg, #fc4c02 0%, #ef2cc1 52%, #bdbbff 100%);

  /* Status. Light-surface values first, then their dark-surface counterparts —
     the light ones are too dark to read on navy. */
  --good: #1c7c4a;
  --warn: #b8860b;
  --bad: #c0392b;
  --good-bg: #e8f6ee;
  --warn-bg: #fff8e6;
  --bad-bg: #fdecea;
  --good-on-dark: #6fd58a;
  --warn-on-dark: #f0c674;
  --bad-on-dark: #f5a3a8;

  /* Type */
  --disp: 'Fraunces', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* A deliberate scale rather than ad-hoc sizes. Ratio ~1.28, tightened at
     the display end where optical size lets it breathe. */
  --t-mega: clamp(2.75rem, 7vw, 5rem);
  --t-h1: clamp(2.25rem, 5vw, 3.5rem);
  --t-h2: clamp(1.75rem, 3.2vw, 2.5rem);
  --t-h3: 1.3125rem;
  --t-lead: 1.1875rem;
  --t-body: 1rem;
  --t-sm: 0.875rem;
  --t-xs: 0.8125rem;
  --t-label: 0.6875rem;            /* mono labels / eyebrows */

  /* Space — a 4px base so rhythm is predictable across templates. */
  --s1: 4px;  --s2: 8px;   --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px;  --s7: 48px; --s8: 64px;
  --s9: 96px;

  --radius: 4px;
  --radius-lg: 8px;
  --measure: 62ch;                 /* readable line length */
  --shell: 1200px;
  --shell-narrow: 960px;

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Dark-surface variants.
   IMPORTANT: `.on-dark` must go on the dark BAND, never on <body>, or a light
   band nested inside it inherits dark styling — white text on a white surface.
   `.on-light` is provided as an explicit escape hatch for a light band that
   does sit inside a dark ancestor, and wins because it comes later here. */

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

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; height: auto; }

/* Visible keyboard focus everywhere — never removed, only restyled. */
:focus-visible {
  outline: 2px solid var(--accent-magenta);
  outline-offset: 2px;
  border-radius: 2px;
}
.on-dark :focus-visible, .theme-dark :focus-visible {
  outline-color: var(--accent-mint);
}

::selection { background: var(--accent-periwinkle); color: #010120; }

/* --- Type utilities ------------------------------------------------------ */
.display {
  font-family: var(--disp);
  font-weight: 600;
  font-variation-settings: 'SOFT' 30, 'WONK' 1, 'opsz' 90;
  letter-spacing: -0.02em;
  line-height: 1.04;
}
.mono {
  font-family: var(--mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Eyebrow doubles as a structural marker: it names the section's role, so it
   carries information rather than decorating the heading. */
.eyebrow {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--body);
  display: block;
}
.on-dark .eyebrow, .theme-dark .eyebrow { color: var(--body-dim); }

.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-soft); max-width: var(--measure); }
.on-dark .lead, .theme-dark .lead { color: var(--body-dark); }

/* Numerals in data contexts must align in columns. */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* --- Layout -------------------------------------------------------------- */
.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--s6); }
.shell-narrow { max-width: var(--shell-narrow); margin-inline: auto; padding-inline: var(--s6); }
.section { padding-block: var(--s9); }
.section-sm { padding-block: var(--s8); }
.band-dark { background: var(--canvas-dark); color: var(--on-dark); }
.band-tint { background: var(--canvas-tint); }

/* Section heads share one structure so rhythm is consistent site-wide. */
.sec-head { margin-bottom: var(--s7); }
.sec-head h2 { font-family: var(--disp); font-weight: 600; font-variation-settings: 'SOFT' 30, 'WONK' 1, 'opsz' 90; font-size: var(--t-h2); letter-spacing: -0.02em; line-height: 1.08; margin: var(--s3) 0 0; }
.sec-head p { margin: var(--s3) 0 0; max-width: var(--measure); color: var(--body); font-size: var(--t-lead); }
.on-dark .sec-head p, .theme-dark .sec-head p { color: var(--body-dark); }
.sec-head.center { text-align: center; }
.sec-head.center p { margin-inline: auto; }

/* --- Rule: the structural device ----------------------------------------
   A measurement scale rather than a plain divider. The ticks encode nothing
   on their own, so they are used only where a section genuinely reads as a
   scale (hero foot, band joins) — not as page furniture everywhere. */
.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }
.on-dark .rule, .theme-dark .rule { background: var(--surface-dark-soft); }
.rule-ticks {
  height: 10px;
  border: 0;
  margin: 0;
  background-image: linear-gradient(90deg, var(--hairline) 0 1px, transparent 1px 100%);
  background-size: 8px 10px;
  background-repeat: repeat-x;
  opacity: 0.9;
}
.on-dark .rule-ticks, .theme-dark .rule-ticks {
  background-image: linear-gradient(90deg, var(--surface-dark-soft) 0 1px, transparent 1px 100%);
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--mono); font-weight: 500; font-size: var(--t-xs);
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 13px 22px; border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; white-space: nowrap;
  transition: transform 0.12s var(--ease), filter 0.12s var(--ease), background-color 0.12s var(--ease), color 0.12s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent-mint); color: #010120; }
.btn-primary:hover { filter: brightness(0.94); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { filter: brightness(1.7); }
.btn-line { background: transparent; border-color: var(--hairline); color: var(--ink); }
.btn-line:hover { border-color: var(--ink); }
.on-dark .btn-line, .theme-dark .btn-line { border-color: var(--surface-dark-soft); color: #fff; }
.on-dark .btn-line:hover, .theme-dark .btn-line:hover { border-color: var(--accent-periwinkle); }
.btn-lg { padding: 16px 30px; font-size: var(--t-sm); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }

/* --- Gauge: the signature device ----------------------------------------
   SEO and AEO as a paired reading. Never one alone — the product's argument
   is the distance between them. Sized by --gauge-size so one component works
   in the hero (large) and in cards (small). */
.gauge-pair { display: flex; gap: var(--s5); align-items: flex-start; }
.gauge { --gauge-size: 96px; text-align: center; flex: 0 0 auto; }
.gauge-dial { position: relative; width: var(--gauge-size); height: var(--gauge-size); }
.gauge-dial svg { display: block; transform: rotate(-90deg); }
.gauge-dial .track { stroke: var(--hairline); }
.on-dark .gauge-dial .track, .theme-dark .gauge-dial .track { stroke: var(--surface-dark-soft); }
.gauge-dial .arc { transition: stroke-dashoffset 0.9s var(--ease); }
.gauge-val {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--disp); font-weight: 600;
  font-variation-settings: 'SOFT' 30, 'WONK' 0, 'opsz' 100;
  font-size: calc(var(--gauge-size) * 0.34); letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.gauge-cap {
  margin-top: var(--s2);
  font-family: var(--mono); font-weight: 500; font-size: var(--t-label);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--body);
}
.on-dark .gauge-cap, .theme-dark .gauge-cap { color: var(--body-dim); }
.gauge.is-good .gauge-val { color: var(--good); }
.gauge.is-warn .gauge-val { color: var(--warn); }
.gauge.is-bad  .gauge-val { color: var(--bad); }
.on-dark .gauge.is-good .gauge-val, .theme-dark .gauge.is-good .gauge-val { color: var(--good-on-dark); }
.on-dark .gauge.is-warn .gauge-val, .theme-dark .gauge.is-warn .gauge-val { color: var(--warn-on-dark); }
.on-dark .gauge.is-bad  .gauge-val, .theme-dark .gauge.is-bad  .gauge-val { color: var(--bad-on-dark); }
.gauge.is-na .gauge-val { color: var(--body); font-size: calc(var(--gauge-size) * 0.24); }

/* --- Meter: a horizontal reading (coverage, progress) -------------------- */
.meter { height: 6px; border-radius: 999px; background: var(--hairline); overflow: hidden; }
.on-dark .meter, .theme-dark .meter { background: var(--surface-dark-fill); }
.meter > span { display: block; height: 100%; border-radius: 999px; background: var(--gradient); transition: width 0.9s var(--ease); }
.meter-row { display: grid; grid-template-columns: minmax(90px, 150px) 1fr 46px; gap: var(--s3); align-items: center; }
.meter-row .lab { font-family: var(--mono); font-size: var(--t-label); letter-spacing: 0.05em; text-transform: uppercase; color: var(--body); }
.on-dark .meter-row .lab, .theme-dark .meter-row .lab { color: var(--body-dim); }
.meter-row .val { font-family: var(--mono); font-size: var(--t-label); text-align: right; color: var(--body); font-variant-numeric: tabular-nums; }
.on-dark .meter-row .val, .theme-dark .meter-row .val { color: var(--body-dim); }

/* --- Panels & tiles ------------------------------------------------------ */
.panel { border: 1px solid var(--hairline); border-radius: var(--radius); padding: var(--s5); background: var(--canvas); }
.on-dark .panel, .theme-dark .panel { border-color: var(--surface-dark-soft); background: transparent; }
.panel-inset { background: var(--surface-dark-deep); border: 1px solid var(--surface-dark-soft); border-radius: var(--radius-lg); }

/* Tile grid with hairline gaps — the grid lines are the borders, so there is
   no double-border seam between neighbours. */
.tile-grid { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
.on-dark .tile-grid, .theme-dark .tile-grid { background: var(--surface-dark-soft); border-color: var(--surface-dark-soft); }
.tile { background: var(--canvas); padding: var(--s4) var(--s4) var(--s3); }
.on-dark .tile, .theme-dark .tile { background: var(--canvas-dark); }
.tile .n { font-family: var(--disp); font-weight: 600; font-variation-settings: 'SOFT' 30, 'WONK' 0, 'opsz' 100; font-size: 1.75rem; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tile .l { font-family: var(--mono); font-size: var(--t-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--body); margin-top: var(--s2); }
.on-dark .tile .l, .theme-dark .tile .l { color: var(--body-dim); }
.tile .n.good { color: var(--good); } .tile .n.warn { color: var(--warn); } .tile .n.bad { color: var(--bad); }
.on-dark .tile .n.good, .theme-dark .tile .n.good { color: var(--good-on-dark); }
.on-dark .tile .n.warn, .theme-dark .tile .n.warn { color: var(--warn-on-dark); }
.on-dark .tile .n.bad,  .theme-dark .tile .n.bad  { color: var(--bad-on-dark); }

/* --- Pills / chips ------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: 0.05em;
  text-transform: uppercase; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--hairline); color: var(--body);
}
.on-dark .pill, .theme-dark .pill { border-color: var(--surface-dark-soft); color: var(--body-dark); }
.pill-good { background: var(--good-bg); border-color: transparent; color: var(--good); }
.pill-warn { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
.pill-bad  { background: var(--bad-bg);  border-color: transparent; color: var(--bad); }
.pill-brand { border-color: transparent; background: var(--gradient); color: #fff; }

/* --- Brand mark ---------------------------------------------------------- */
.brandmark { display: inline-flex; align-items: center; gap: var(--s3); }
.brandmark .dot { width: 24px; height: 9px; border-radius: var(--radius); background: var(--gradient); flex: 0 0 auto; }
.brandmark .name { font-family: var(--mono); font-weight: 500; font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; }

/* --- Forms --------------------------------------------------------------- */
.field { display: block; margin-bottom: var(--s4); }
.field > .lbl { display: block; font-family: var(--mono); font-weight: 500; font-size: var(--t-label); letter-spacing: 0.07em; text-transform: uppercase; color: var(--body); margin-bottom: var(--s2); }
.input {
  width: 100%; padding: 13px 15px; font-family: var(--sans); font-size: var(--t-body);
  color: var(--ink); background: var(--canvas);
  border: 1px solid var(--hairline); border-radius: var(--radius);
  transition: border-color 0.12s var(--ease), box-shadow 0.12s var(--ease);
}
.input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(1,1,32,0.07); }
.input::placeholder { color: #a6a6b2; }
.on-dark .input, .theme-dark .input {
  background: var(--surface-dark-fill); border-color: var(--surface-dark-soft); color: #fff;
}
.on-dark .input:focus, .theme-dark .input:focus {
  border-color: var(--accent-periwinkle); box-shadow: 0 0 0 3px rgba(189,187,255,0.16);
}
.on-dark .input::placeholder, .theme-dark .input::placeholder { color: #7a7a92; }
.form-note { font-size: var(--t-sm); color: var(--body); margin: var(--s2) 0 0; }
.on-dark .form-note, .theme-dark .form-note { color: var(--body-dim); }

/* --- Notices ------------------------------------------------------------- */
.notice { border: 1px solid var(--hairline); border-left: 3px solid var(--body); border-radius: var(--radius); padding: var(--s4); font-size: var(--t-sm); }
.notice-bad  { background: var(--bad-bg);  border-color: transparent; border-left-color: var(--bad);  color: var(--bad); }
.notice-good { background: var(--good-bg); border-color: transparent; border-left-color: var(--good); color: var(--good); }
.notice-warn { background: var(--warn-bg); border-color: transparent; border-left-color: var(--warn); color: var(--warn); }

/* --- Motion ------------------------------------------------------------- */
/* Entrance animations are opt-in per element and always start from a visible
   state under reduced-motion, so nothing is hidden if animation is disabled. */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rise { animation: rise 0.5s var(--ease) both; }
.rise-2 { animation-delay: 0.07s; }
.rise-3 { animation-delay: 0.14s; }
.rise-4 { animation-delay: 0.21s; }

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

/* --- Accessibility helpers ---------------------------------------------- */
.visually-hidden {
  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: var(--s4); top: -60px; z-index: 100;
  background: var(--accent-mint); color: #010120;
  font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: 0.06em; padding: 10px 16px; border-radius: var(--radius);
  transition: top 0.15s var(--ease);
}
.skip-link:focus { top: var(--s4); }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 860px) {
  .shell, .shell-narrow { padding-inline: var(--s4); }
  .section { padding-block: var(--s8); }
  .section-sm { padding-block: var(--s7); }
  .gauge { --gauge-size: 76px; }
}
@media (max-width: 560px) {
  .gauge-pair { gap: var(--s4); }
  .meter-row { grid-template-columns: 1fr 46px; }
  .meter-row .meter { grid-column: 1 / -1; order: 3; margin-top: var(--s2); }
}

/* --- Print -------------------------------------------------------------- */
@media print {
  .band-dark { background: #fff !important; color: #000 !important; }
  .skip-link, .btn { display: none !important; }
}