/* ==========================================================================
   Keel Projects — marketing site
   Ported from the Keel Design System (tokens/, components/, ui_kits/marketing).

   Rules this file obeys:
   - No inline styles anywhere in the HTML, so the CSP can omit 'unsafe-inline'.
   - Fonts are self-hosted; see assets/css/fonts.css (generated by tools/fetch-fonts.ps1).
   - Contrast is checked to WCAG 2.1 AA. Where a design-system colour failed on
     ink surfaces it has been replaced by an AA-safe sibling and marked FIX.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — verbatim from the design system, plus three accessibility fixes
   -------------------------------------------------------------------------- */

:root {
  /* Base — Woad (brand ink; the dye of the north) */
  --woad-950:#0E1220; --woad-900:#141B30; --woad-800:#1C2642; --woad-700:#263457; --woad-600:#33456F; --woad-500:#445887;
  /* Base — Blood (brand accent; used sparingly) */
  --blood-700:#641414; --blood-600:#7A1A1A; --blood-500:#8E2222; --blood-300:#B85555; --blood-100:#EDD9D9; --blood-50:#F7ECEC;
  /* Base — Bone (parchment surfaces) */
  --bone-25:#FAF8F2; --bone-50:#F4F0E6; --bone-100:#ECE6D7; --bone-200:#DFD6C0; --bone-300:#C9BC9E; --bone-400:#A79878;
  /* Base — Iron (cool text greys) */
  --iron-600:#3F4756; --iron-500:#5A6375; --iron-400:#7A8394; --iron-300:#A2A9B8;
  /* Base — Fjord (interactive blue) */
  --fjord-700:#2E5A73; --fjord-600:#3A6E8C; --fjord-500:#4A83A4; --fjord-200:#BCD2DE; --fjord-100:#E0EAF0; --fjord-50:#EFF5F8;
  /* Base — Brass (tarnished; warnings, small honors) */
  --brass-700:#7A5C22; --brass-600:#96712A; --brass-500:#B08634; --brass-300:#D0AF6E; --brass-100:#EFE4C8; --brass-50:#F8F2E2;
  /* Base — Market semantics */
  --gain-600:#27593E; --gain-500:#2F6B4A; --gain-100:#DCEAE1;
  --loss-600:#8C2A1F; --loss-500:#A83226; --loss-100:#F2DCD8;
  --warn-500:var(--brass-500); --warn-100:var(--brass-100);

  /* Semantic aliases */
  --surface-page:var(--bone-50); --surface-card:#FFFFFF; --surface-raised:var(--bone-25);
  --surface-sunken:var(--bone-100); --surface-ink:var(--woad-900); --surface-ink-raised:var(--woad-800);
  --text-heading:var(--woad-900); --text-body:var(--iron-600); --text-muted:var(--iron-400);
  --text-on-ink:#F1EDE1; --text-on-ink-muted:#9BA4BD;
  --action-primary:var(--woad-900); --action-primary-hover:var(--woad-800);
  --action-accent:var(--blood-500); --action-accent-hover:var(--blood-600);
  --link:var(--fjord-600); --link-hover:var(--fjord-700);
  --border-default:var(--bone-200); --border-strong:var(--bone-300); --border-on-ink:rgba(241,237,225,.16);
  --focus-ring:var(--fjord-500);
  --data-gain:var(--gain-500); --data-loss:var(--loss-500);
  --data-gain-on-ink:#5FA980; --data-loss-on-ink:#D4705C;
  --data-line-1:var(--fjord-500); --data-line-2:var(--blood-500); --data-line-3:var(--woad-600);

  /* FIX (AA) — the design system uses --woad-500 (#445887) for deadpan asides,
     rune rails and step glosses on ink. That is 2.66:1 on --woad-950 and fails
     1.4.3. Same hue, lightened. Sized against the WORST case, which is not the
     flat page but ink under the torch glow: --glow-torch at full strength
     composites woad-950 up to ~#212A44, and contrast must still clear 4.5:1
     there. 4.56:1 over torch peak, 6.00:1 on woad-950, 5.49:1 on woad-900. */
  --text-on-ink-quiet:#8692B0;
  /* FIX (AA) — --blood-300 (#B85555) for runic marks on ink is 3.97:1. Runes are
     aria-hidden ornament but are still rendered text, and the hero eyebrow rune
     sits over the torch. 4.86:1 over torch peak, 6.39:1 on woad-950. */
  --rune-on-ink:#CE8383;
  /* FIX (AA) — --iron-400 is 3.36:1 on --bone-50. --iron-500 is 5.31:1 and is
     used for all small print on parchment surfaces. */
  --text-muted-on-bone:var(--iron-500);

  /* Link colour on ink surfaces. --link (#3A6E8C) is 2.4:1 on woad-950. */
  --link-on-ink:#8FBBD4;

  /* Typography.
     OWNER DECISION (2026-07-29): no webfonts. Nothing is downloaded and nothing
     is fetched at runtime, which is what keeps the "no third-party requests"
     claim on the privacy page true. The design-system families are still named
     first, so anyone who happens to have them installed locally gets them; the
     stacks below are what everyone else actually sees.

     The poster face is the one that visibly changes: Big Shoulders Display is
     condensed, so the fallbacks are condensed too. A wide fallback makes the
     hero headline noticeably broader — the clamp() sizes absorb it. */
  --font-poster:"Big Shoulders Display","Oswald","Archivo Narrow","Arial Narrow","Franklin Gothic Medium",system-ui,sans-serif;
  --font-display:"Space Grotesk","Public Sans",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-body:"Public Sans",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
  /* Elder Futhark is NOT in any default macOS or iOS font. Windows covers it via
     Segoe UI Historic. Where it is missing the glyphs would render as tofu, so
     nav.js flags .no-runic on <html> and the rules near the end of this file
     retire the ornaments rather than show empty boxes. */
  --font-runic:"Noto Sans Runic","Segoe UI Historic","Segoe UI Symbol","Apple Symbols",sans-serif;
  --text-h2:24px; --text-h3:19px; --text-body-lg:17px; --text-body-md:15px; --text-body-sm:13px; --text-caption:12px;
  --leading-heading:1.18; --leading-body:1.55;
  --tracking-display:-0.015em; --tracking-caps:0.14em;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;

  /* Poster scale — the design system's fixed px sizes, made fluid */
  --poster-hero:clamp(46px,9vw,100px);
  --poster-section:clamp(34px,5.4vw,54px);
  --poster-band:clamp(30px,4.4vw,44px);
  --poster-product:clamp(40px,7vw,64px);
  --poster-card:clamp(26px,5vw,32px);

  /* Spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  --container-max:1160px; --container-pad:24px;
  --radius-sm:3px; --radius-md:6px; --radius-lg:10px; --radius-pill:999px;

  /* Effects */
  --shadow-card:0 1px 2px rgba(20,27,48,.06),0 1px 3px rgba(20,27,48,.05);
  --shadow-raised:0 2px 6px rgba(20,27,48,.08),0 8px 24px rgba(20,27,48,.08);
  --shadow-overlay:0 12px 40px rgba(20,27,48,.22);
  --ease-standard:cubic-bezier(.32,.72,.24,1);
  --dur-fast:120ms; --dur-med:220ms;
  --glow-torch:radial-gradient(ellipse 900px 600px at 30% 30%,rgba(68,88,135,.35),transparent 65%);
  --texture-sail:repeating-linear-gradient(135deg,rgba(241,237,225,.045) 0 1px,transparent 1px 9px),
                 repeating-linear-gradient(45deg,rgba(241,237,225,.045) 0 1px,transparent 1px 9px);
  --rule-keel:linear-gradient(90deg,var(--blood-500) 0 40px,var(--border-strong) 40px 100%);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--woad-950);
  color: var(--text-on-ink);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-body);
  /* The holdco register is dark-first and theatrical. */
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
  margin: 0;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--link-on-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

svg { display: block; }

/* --------------------------------------------------------------------------
   3. Accessibility
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--blood-500);
  color: var(--text-on-ink);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-sm);
  /* Deliberately not transitioned — a keyboard user tabbing in should see it
     land immediately, not slide in over 120ms. */
}
.skip-link:focus { top: var(--space-4); text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Only suppress the default ring where :focus-visible is supported. */
:focus:not(:focus-visible) { outline: none; }

.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;
}

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

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.section { padding-top: 72px; padding-bottom: 72px; }
.section--ink { background: var(--woad-900); border-top: 1px solid var(--border-on-ink); }
.section--rel { position: relative; overflow: hidden; }

/* --------------------------------------------------------------------------
   5. Brand furniture — eyebrow, poster type, keel rule, shields, runes
   -------------------------------------------------------------------------- */

.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow__rune { font-family: var(--font-runic); font-size: 15px; color: var(--rune-on-ink); }
.eyebrow__text {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  color: var(--text-on-ink-muted);
  text-transform: uppercase;
}
.eyebrow__tick { flex: none; width: 40px; height: 2px; background: var(--blood-500); }

.poster {
  font-family: var(--font-poster);
  font-weight: 800;
  line-height: .92;
  margin: 0;
  color: var(--text-on-ink);
  text-transform: uppercase;
  letter-spacing: .005em;
}
.poster--hero    { font-size: var(--poster-hero); }
.poster--section { font-size: var(--poster-section); }
.poster--band    { font-size: var(--poster-band); }
.poster--product { font-size: var(--poster-product); }
.poster--card    { font-size: var(--poster-card); font-weight: var(--weight-bold); color: var(--woad-900); }

.aside-deadpan {
  font-style: italic;
  font-size: var(--text-body-sm);
  color: var(--text-on-ink-quiet);
}

/* Clinker divider — three stacked hairlines, hull planking. */
.clinker { border: 0; height: 5px; margin: 0; background:
  linear-gradient(var(--border-on-ink) 1px, transparent 1px 2px,
                  var(--border-on-ink) 2px 3px, transparent 3px 4px,
                  var(--border-on-ink) 4px 5px); }

/* Round CSS shield — concentric ring + boss, rune centred. */
.shield {
  border-radius: 50%;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--woad-800);
  border: 2px solid var(--woad-500);
  box-shadow: inset 0 0 0 7px var(--woad-700), 0 4px 14px rgba(0,0,0,.35);
  color: var(--text-on-ink);
  font-family: var(--font-runic);
  line-height: 1;
}
.shield--blood { background: var(--blood-600); border-color: var(--blood-300); box-shadow: inset 0 0 0 7px var(--blood-500), 0 4px 14px rgba(0,0,0,.35); }
.shield--44 { width: 44px; height: 44px; font-size: 15px; }
.shield--48 { width: 48px; height: 48px; font-size: 16px; }
.shield--52 { width: 52px; height: 52px; font-size: 18px; }
.shield--56 { width: 56px; height: 56px; font-size: 19px; }
.shield--84 { width: 84px; height: 84px; font-size: 29px; }

/* Oversized rune watermark, ink surfaces only. */
.rune-mark {
  position: absolute;
  font-family: var(--font-runic);
  color: rgba(241,237,225,.045);
  line-height: 1;
  pointer-events: none;
}
.rune-mark--card { right: -14px; bottom: -30px; font-size: 130px; }
.rune-mark--band { right: 20px; top: 50%; transform: translateY(-50%); font-size: 150px; color: rgba(241,237,225,.05); }

.torch { position: absolute; inset: 0; background: var(--glow-torch); pointer-events: none; }

/* --------------------------------------------------------------------------
   6. Components
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  font-size: 14px;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-sm);
  cursor: pointer;
  line-height: 1.2;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard);
}
.btn:hover { text-decoration: none; }
.btn--sm { padding: 6px 12px; font-size: 13px; }
.btn--lg { padding: 12px 24px; font-size: 15px; }

.btn--primary { background: var(--action-primary); color: var(--text-on-ink); border: 1px solid var(--action-primary); }
.btn--primary:hover { background: var(--action-primary-hover); color: var(--text-on-ink); }

.btn--accent { background: var(--action-accent); color: var(--text-on-ink); border: 1px solid var(--action-accent); }
.btn--accent:hover { background: var(--action-accent-hover); color: var(--text-on-ink); }

.btn--secondary { background: var(--surface-card); color: var(--text-heading); border: 1px solid var(--border-strong); }
.btn--secondary:hover { background: var(--bone-25); color: var(--text-heading); }

.btn--ghost { background: transparent; color: var(--text-on-ink); border: 1px solid transparent; }
.btn--ghost:hover { background: var(--woad-800); color: var(--text-on-ink); }

.badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  font-family: var(--font-body);
  border-radius: var(--radius-pill);
  line-height: 1.4;
}
.badge--fjord { background: var(--fjord-100); color: var(--fjord-700); }
.badge--ink { background: var(--woad-900); color: var(--text-on-ink); }

/* Stat — label / value / delta */
.stat__label {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  color: var(--text-on-ink-muted);
  text-transform: uppercase;
}
.stat__value { font-family: var(--font-mono); font-size: 28px; color: var(--text-on-ink); margin-top: 4px; }
.stat__delta { font-family: var(--font-mono); font-size: 13px; margin-top: 2px; color: var(--text-on-ink-muted); }
.stat__delta--up { color: var(--data-gain-on-ink); }
.stat__delta--down { color: var(--data-loss-on-ink); }

/* Rune bullet list */
.rune-list { display: grid; gap: 8px; }
.rune-list li { display: flex; gap: 10px; font-size: 14px; align-items: baseline; color: var(--text-on-ink); }
.rune-list li::before {
  content: "\16EC";           /* ᛬ — runic multiple punctuation, used as a bullet */
  font-family: var(--font-runic);
  font-size: 11px;
  color: var(--rune-on-ink);
  flex: none;
}

/* --------------------------------------------------------------------------
   7. Navigation
   -------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(14,18,32,.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-on-ink);
  border-top: 3px solid var(--blood-500);   /* the wax-seal line */
}
.nav__bar {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav__logo { display: flex; align-items: center; }
.nav__logo img { height: 34px; width: auto; }
.nav__menu { display: flex; align-items: center; gap: 28px; flex: 1; }
.nav__links { display: flex; gap: 4px; }
.nav__link {
  padding: 8px 12px;
  font-size: 14px;
  font-weight: var(--weight-medium);
  border-radius: var(--radius-sm);
  color: var(--text-on-ink-muted);
}
.nav__link:hover { color: var(--text-on-ink); background: var(--woad-800); text-decoration: none; }
.nav__link[aria-current="page"] { color: var(--text-on-ink); background: var(--woad-800); }
.nav__cta { margin-left: auto; display: flex; gap: 12px; align-items: center; }

.nav__toggle {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--border-on-ink);
  border-radius: var(--radius-sm);
  color: var(--text-on-ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.nav__toggle-bars { display: inline-flex; flex-direction: column; gap: 3px; }
.nav__toggle-bars span { display: block; width: 16px; height: 2px; background: currentColor; }

@media (max-width: 780px) {
  .nav__bar { flex-wrap: wrap; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
  .nav__toggle { display: inline-flex; }
  /* Default is open. nav.js sets data-open="false" to collapse it, so with the
     script blocked or broken the navigation stays reachable. */
  .nav__menu {
    display: flex;
    flex-basis: 100%;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 10px;
  }
  .nav__menu[data-open="false"] { display: none; }
  .nav__links { flex-direction: column; margin-left: 0; gap: 2px; }
  .nav__link { padding: 10px 12px; }
  .nav__cta { margin-left: 0; padding-top: 6px; }
  .nav__cta .btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   8. Hero and waves
   -------------------------------------------------------------------------- */

.hero { position: relative; overflow: hidden; }
.hero__grid {
  position: relative;
  padding-top: 84px;
  padding-bottom: 24px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
}
.hero__title { margin-top: 22px; }
.section-title { margin-top: 14px; }
.hero__lede { font-size: 17px; line-height: 1.6; max-width: 460px; margin-top: 24px; color: var(--text-on-ink-muted); }
.hero__actions { display: flex; gap: 14px; margin-top: 30px; align-items: center; flex-wrap: wrap; }
.hero__aside { margin-top: 32px; }

.waves { position: relative; height: 170px; overflow: hidden; }
.waves__ship {
  position: absolute;
  left: 44%;
  top: 26px;
  height: 74px;
  width: auto;
  animation: keelBob 7s ease-in-out infinite;
}
.waves__swell { position: absolute; width: 1500px; max-width: none; }
.waves__swell--front { bottom: -6px; left: -60px; animation: keelSwell 11s ease-in-out infinite; }
.waves__swell--back  { bottom: -26px; left: -30px; animation: keelSwell 8s ease-in-out infinite reverse; }

@keyframes keelBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes keelSwell { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-40px); } }

/* Weather map — drawdown lines with blood-tinted squall bands */
.weathermap {
  position: relative;
  background: var(--woad-900);
  border: 1px solid var(--border-on-ink);
  border-radius: var(--radius-md);
  padding: 26px;
}
.weathermap__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.weathermap__title {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  color: var(--text-on-ink-muted);
  text-transform: uppercase;
}
.weathermap__flag { font-family: var(--font-mono); font-size: 11px; color: var(--rune-on-ink); }
.weathermap__svg { width: 100%; margin-top: 14px; }
.weathermap__key { display: flex; gap: 18px; margin-top: 12px; font-family: var(--font-mono); font-size: 11px; flex-wrap: wrap; }
.weathermap__key-loss { color: var(--data-loss-on-ink); }
.weathermap__key-gain { color: var(--data-gain-on-ink); }
.weathermap__note { font-size: 11px; color: var(--text-on-ink-quiet); margin-top: 10px; }

/* --------------------------------------------------------------------------
   9. Stat bar
   -------------------------------------------------------------------------- */

.statbar { border-top: 1px solid var(--border-on-ink); border-bottom: 1px solid var(--border-on-ink); background: var(--woad-900); }
.statbar__grid { max-width: var(--container-max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; }
.statbar__cell { padding: 26px var(--container-pad); border-right: 1px solid var(--border-on-ink); }
.statbar__cell:last-child { border-right: none; }
.statbar__value { font-family: var(--font-mono); font-size: 26px; color: var(--text-on-ink); }
.statbar__label {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  color: var(--text-on-ink-muted);
  margin-top: 4px;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   10. Product grid
   -------------------------------------------------------------------------- */

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }

.product-card {
  background: var(--woad-900);
  border: 1px solid var(--border-on-ink);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.product-card__head { display: flex; align-items: center; gap: 14px; position: relative; flex-wrap: wrap; }
.product-card__name {
  font-family: var(--font-poster);
  font-weight: var(--weight-bold);
  font-size: 30px;
  letter-spacing: .02em;
  color: var(--text-on-ink);
  text-transform: uppercase;
}
.product-card__desc { font-size: 15px; line-height: 1.6; margin-top: 14px; color: var(--text-on-ink-muted); position: relative; }
.product-card__points { margin-top: 14px; position: relative; }
.product-card__more { margin-top: auto; padding-top: 20px; position: relative; }
.product-card__link {
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--text-on-ink);
  border-bottom: 2px solid var(--blood-500);
  padding-bottom: 2px;
}
.product-card__link:hover { color: var(--text-on-ink); border-bottom-color: var(--blood-300); text-decoration: none; }

/* --------------------------------------------------------------------------
   11. Shield wall
   -------------------------------------------------------------------------- */

.shieldwall { position: relative; overflow: hidden; background: var(--woad-900); border-top: 1px solid var(--border-on-ink); }
.shieldwall__glow { position: absolute; inset: 0; background: radial-gradient(ellipse 800px 500px at 72% 20%, rgba(68,88,135,.22), transparent 65%); pointer-events: none; }
.shieldwall__inner { position: relative; }
.shieldwall__title { margin-top: 14px; max-width: 760px; }
.shieldwall__lede { font-size: 15px; color: var(--text-on-ink-muted); max-width: 520px; margin-top: 18px; }
.shieldwall__row { display: flex; margin-top: 40px; padding-left: 14px; align-items: center; flex-wrap: wrap; }
.shieldwall__row .shield { margin-left: -14px; }
.shieldwall__row .shield:first-child { margin-left: 0; }
.shieldwall__caption { align-self: center; margin-left: 22px; font-family: var(--font-mono); font-size: 12px; color: var(--text-on-ink-quiet); }
.shieldwall__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 36px; }
.shieldwall__item { border-top: 2px solid var(--blood-500); padding-top: 14px; }
.shieldwall__item h3 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 16px; color: var(--text-on-ink); }
.shieldwall__item p { font-size: 13px; line-height: 1.55; color: var(--text-on-ink-muted); margin-top: 8px; }
.shieldwall__cta { margin-top: 36px; }

/* --------------------------------------------------------------------------
   12. Method
   -------------------------------------------------------------------------- */

.trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin-top: 32px; }
.step {
  background: var(--woad-900);
  border: 1px solid var(--border-on-ink);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.step__head { display: flex; justify-content: space-between; align-items: center; }
.step__num { font-family: var(--font-mono); font-size: 12px; color: var(--text-on-ink-quiet); }
.step__title { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 19px; color: var(--text-on-ink); margin-top: 16px; }
.step__gloss { font-size: 11px; font-style: italic; color: var(--text-on-ink-quiet); margin-top: 2px; }
.step__body { font-size: 14px; line-height: 1.6; margin-top: 10px; color: var(--text-on-ink-muted); }

/* --------------------------------------------------------------------------
   13. Ink band (CTA)
   -------------------------------------------------------------------------- */

.inkband { background: var(--woad-900); border-top: 1px solid var(--border-on-ink); position: relative; overflow: hidden; }
.inkband__inner {
  padding-top: 64px;
  padding-bottom: 64px;
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  position: relative;
}
.inkband__copy { flex: 1; min-width: 320px; }
.inkband__lede { color: var(--text-on-ink-muted); font-size: 15px; margin-top: 12px; }

/* --------------------------------------------------------------------------
   14. Product pages
   -------------------------------------------------------------------------- */

.producthead { position: relative; overflow: hidden; }
.producthead__inner { position: relative; padding-top: 64px; padding-bottom: 48px; }
.producthead__title { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.producthead__lede { font-family: var(--font-display); font-size: 21px; color: var(--text-on-ink); margin-top: 18px; }
.producthead__desc { font-size: 15px; line-height: 1.6; max-width: 560px; margin-top: 10px; color: var(--text-on-ink-muted); }
.producthead__actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }

.overview { border-top: 1px solid var(--border-on-ink); background: var(--woad-900); }
.overview__inner { padding-top: 40px; padding-bottom: 72px; }
.overview__title { font-family: var(--font-display); font-size: var(--text-h2); color: var(--text-on-ink); margin-top: 14px; }
.overview__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 32px; }
.overview__cell { background: var(--woad-950); border: 1px solid var(--border-on-ink); border-radius: var(--radius-md); padding: var(--space-5); }
.overview__note { margin-top: 16px; font-size: 12px; color: var(--text-on-ink-muted); }
.overview__detail { margin-top: 40px; max-width: 640px; }
.overview__detail h3 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-h3); color: var(--text-on-ink); }
.overview__detail p { font-size: 15px; line-height: 1.6; color: var(--text-on-ink-muted); margin-top: 10px; }

/* "Illustrative figures" caption — sits near every sample number so the site
   claims nothing the products cannot yet support. */
.illustrative {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-on-ink-muted);
  border-left: 2px solid var(--brass-500);
  padding-left: 10px;
}

/* --------------------------------------------------------------------------
   15. Parchment card — waitlist, thanks, privacy, 404
   -------------------------------------------------------------------------- */

.parchment { min-height: 480px; position: relative; overflow: hidden; }
.parchment__inner { max-width: 560px; margin: 0 auto; padding: 80px var(--container-pad); position: relative; }
.parchment__wide { max-width: 780px; }

.card-bone {
  background: var(--bone-50);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
  padding: var(--space-6);
  color: var(--text-body);
}
.card-bone a { color: var(--link); }
.card-bone a:hover { color: var(--link-hover); }
.card-bone h1, .card-bone h2, .card-bone h3 { color: var(--text-heading); }
.card-bone__lede { font-size: 14px; margin-top: 10px; color: var(--iron-600); }
.card-bone__note { font-size: 12px; color: var(--text-muted-on-bone); margin-top: 14px; }

/* Form */
.form { display: grid; gap: 14px; margin-top: 20px; }
.field { display: block; font-family: var(--font-body); }
.field__label { font-size: 13px; font-weight: var(--weight-semibold); color: var(--text-heading); margin-bottom: 6px; }
.field__control {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  transition: box-shadow var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.field__control:focus-within { border-color: var(--focus-ring); box-shadow: 0 0 0 3px var(--fjord-100); }
.field input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-heading);
  background: transparent;
  min-width: 0;
}
.field__hint { font-size: 12px; margin-top: 5px; color: var(--text-muted-on-bone); }

/* Checkbox — real input, visually styled box. Keeps native keyboard behaviour. */
.check { position: relative; display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; color: var(--text-heading); }
/* The real input sits transparent directly over its painted box — not shoved
   off-screen — so the hit target and the visual stay in the same place. */
.check input { position: absolute; left: 0; top: 2px; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.check__box {
  width: 18px; height: 18px;
  flex: none;
  margin-top: 2px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  background: var(--surface-card);
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.check__box svg { opacity: 0; }
.check input:checked + .check__box { background: var(--action-primary); border-color: var(--action-primary); }
.check input:checked + .check__box svg { opacity: 1; }
.check input:focus-visible + .check__box { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Honeypot — off-screen, never shown, never announced. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice {
  border-left: 2px solid var(--loss-500);
  padding: 8px 0 8px 12px;
  font-size: 13px;
  color: var(--loss-600);
  margin-bottom: 4px;
}

/* Long-form prose, parchment register */
.prose h2 { font-size: var(--text-h2); margin-top: var(--space-6); }
.prose h3 { font-size: var(--text-h3); margin-top: var(--space-5); }
.prose p { font-size: 15px; line-height: var(--leading-body); margin-top: 10px; }
.prose ul { margin-top: 10px; display: grid; gap: 6px; }
.prose li { font-size: 15px; line-height: var(--leading-body); display: flex; gap: 10px; align-items: baseline; }
.prose li::before { content: "\16EC"; font-family: var(--font-runic); font-size: 10px; color: var(--blood-500); flex: none; }
.prose .keel-rule { border: 0; height: 2px; background: var(--rule-keel); margin: var(--space-6) 0 0; }
.prose__meta { font-size: 12px; color: var(--text-muted-on-bone); margin-top: 6px; }

/* Definition-style rows for the privacy disclosure table */
.disclose { margin-top: 14px; display: grid; gap: 12px; }
.disclose__row { border-top: 1px solid var(--border-default); padding-top: 12px; }
.disclose__key { font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted-on-bone); }
.disclose__val { font-size: 14px; margin-top: 4px; }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.footer { background: var(--woad-950); border-top: 3px solid var(--blood-500); }
.footer__inner { padding-top: 48px; padding-bottom: 40px; }
.footer__top { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer__logo { height: 44px; width: auto; }
.footer__runes { margin-left: auto; display: flex; gap: 26px; font-family: var(--font-runic); font-size: 15px; color: var(--text-on-ink-quiet); flex-wrap: wrap; }
.footer__nav { display: flex; gap: 20px; margin-top: 24px; flex-wrap: wrap; }
.footer__nav a { font-size: 13px; color: var(--text-on-ink-muted); }
.footer__nav a:hover { color: var(--text-on-ink); }
.footer__base { display: flex; gap: 24px; align-items: baseline; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border-on-ink); flex-wrap: wrap; }
.footer__legal { font-size: 13px; color: var(--text-on-ink-muted); }
.footer__sign { margin-left: auto; font-size: 12px; font-style: italic; color: var(--text-on-ink-quiet); }

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; gap: 36px; padding-top: 56px; }
  .hero__lede { max-width: none; }
  .overview__grid { grid-template-columns: 1fr 1fr; }
  .shieldwall__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .duo { grid-template-columns: 1fr; }
  .trio { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .section { padding-top: 56px; padding-bottom: 56px; }
  .statbar__grid { grid-template-columns: 1fr; }
  .statbar__cell { border-right: none; border-bottom: 1px solid var(--border-on-ink); }
  .statbar__cell:last-child { border-bottom: none; }
  .waves { height: 120px; }
  .waves__ship { height: 54px; left: 38%; }
  .parchment__inner { padding-top: 48px; padding-bottom: 56px; }
  .card-bone { padding: var(--space-5); }
  .footer__runes { margin-left: 0; flex-basis: 100%; }
  .footer__sign { margin-left: 0; flex-basis: 100%; }
}

/* --------------------------------------------------------------------------
   18. No Runic coverage (set by nav.js)

   Applies where the platform has no Elder Futhark font — notably macOS and iOS.
   Purely ornamental runes are retired; nothing here carries meaning, so removing
   them costs decoration only. Bullets fall back to a drawn square rather than a
   glyph, so they cannot tofu either. Shields keep their ring and boss, which is
   the actual motif.
   -------------------------------------------------------------------------- */

.no-runic .eyebrow__rune,
.no-runic .rune-mark,
.no-runic .footer__runes { display: none; }

.no-runic .shield { font-size: 0; }

.no-runic .rune-list li::before,
.no-runic .prose li::before {
  content: "";
  width: 4px;
  height: 4px;
  margin-top: .5em;
  background: var(--rune-on-ink);
}
.no-runic .prose li::before { background: var(--blood-500); }

@media (max-width: 520px) {
  .overview__grid { grid-template-columns: 1fr; }
  .shieldwall__grid { grid-template-columns: 1fr; }
  .shieldwall__caption { margin-left: 0; margin-top: 14px; flex-basis: 100%; }
  .hero__actions .btn { width: 100%; justify-content: center; }
}