/* ==========================================================================
   KONGEN — Deep Field theme layer                                    #547
   --------------------------------------------------------------------------
   One sheet, loaded LAST in <head> on every marketing page, so it lands after
   each page's own inline <style> and wins on equal specificity without any of
   them being rewritten. It carries four things:

     1. the Deep Field tokens, including the legacy aliases (--paper, --ink,
        --red, --border ...) so the eight older pages adopt the palette
        without a single one of their own rules being touched;
     2. the seamless header and the Worlds menu;
     3. the page-wide video ground;
     4. the components the world pages are built from.

   Nothing here removes a rule. It overrides, and every override says why.

   GROUND COLOUR, 2026-09-20 (Fiz): the day ground moved off the beige
   #f4f1ea to #faf9f5, with --kg-sunken and --kg-border moved with it so the
   steps between the three hold. Measured over #faf9f5: ink 16.46:1, body
   12.46:1, muted 5.06:1, link 6.43:1, border-strong 3.77:1.

   CONSEQUENCE, and it is a real one: on a near-white ground a white card
   separates from the page by 1.05:1, which is not separation. Cards carry
   their edge with the pillow shadow instead. See .kg-card / .content-backdrop.

   CONTRAST FLOOR ON THE GROUND: over the moving ground, body #2b3040
   measures 9.39:1 at the darkest pixel of the darkest clip, but muted
   #666b78 measures 3.92 to 4.19:1 and FAILS. So muted text never sits
   directly on the ground: it sits on a card, or it takes --kg-text.
   ========================================================================== */

:root {
  /* ---- Deep Field, day ---- */
  --kg-background:#faf9f5; --kg-card:#ffffff; --kg-sunken:#efece4;
  --kg-border:#e8e4db; --kg-border-strong:#857f74;
  --kg-foreground:#141a2a; --kg-text:#2b3040; --kg-muted-foreground:#666b78;
  --kg-primary:#2f6f9f; --kg-primary-foreground:#faf9f5; --kg-primary-deep:#245a83;
  --kg-link:#2a5f8a; --kg-primary-tint:#dde8f1;
  --kg-secondary:#4f8a6a; --kg-secondary-text:#35634a; --kg-secondary-tint:#dfece4;
  --kg-warm:#c8653f; --kg-warm-text:#98431f; --kg-warm-tint:#f6e0d5;
  --kg-accent:#d9a63a; --kg-accent-text:#7a5910; --kg-accent-tint:#f3e7cc;
  --kg-dome-hi:rgba(255,255,255,.7); --kg-dome-lo:#efece4;
  --kron:#2f6f9f;
  --kg-wave-1:var(--kg-primary); --kg-wave-2:var(--kg-warm);
  --kg-wave-3:var(--kg-secondary); --kg-wave-4:var(--kg-accent);
  --kg-mark:#a3262c;
  --kg-edge:rgba(20,26,42,0.14);
  --kg-shade:rgba(20,26,42,0.16);
  --kg-shade-inset:rgba(255,255,255,0.6);
  --kg-serif:Georgia,'Times New Roman',serif;
  --kg-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --kg-mono:'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
  --kg-ease:cubic-bezier(.2,.7,.2,1);
  --kg-touch:44px;
  color-scheme: light;

  /* the world tint. Neutral here; each world page sets its own series colour. */
  --world-tint: transparent;
  --world-wash: 0;

  /* ---- aliases: the names the older stylesheets already read ---- */
  --kg-bg:var(--kg-background); --kg-surface:var(--kg-card);
  --kg-line:var(--kg-border); --kg-hair:var(--kg-border);
  --kg-ink:var(--kg-foreground); --kg-muted:var(--kg-muted-foreground);
  --kg-brand:var(--kg-mark); --kg-olive:var(--kg-secondary);
  --kg-terra:var(--kg-warm); --kg-sun:var(--kg-accent);
  --red:var(--kg-primary); --red-deep:var(--kg-primary-deep);
  --red-light:var(--kg-primary-tint);
  --black:var(--kg-foreground); --ink:var(--kg-text); --text:var(--kg-text);
  --paper:var(--kg-background); --paper-warm:var(--kg-sunken);
  --paper-light:#ffffff; --border:var(--kg-border);
  --pattern-light:rgba(47,111,159,0.10); --moss:var(--kg-secondary);
}

/* ---- Deep Field, night. Untouched by the ground change. ---- */
.kg-night {
  --kg-background:#0a1020; --kg-card:#121a2e; --kg-sunken:#070c18;
  --kg-border:rgba(241,236,223,.09); --kg-border-strong:#5c667c;
  --kg-foreground:#f1ecdf; --kg-text:#e3ded2; --kg-muted-foreground:#a7adbd;
  --kg-primary:#5aa7d8; --kg-primary-foreground:#0a1020; --kg-primary-deep:#3f86b8;
  --kg-link:#8cc4ea; --kg-primary-tint:rgba(140,196,234,.16);
  --kg-secondary:#7fb69a; --kg-secondary-text:#7fb69a; --kg-secondary-tint:rgba(127,182,154,.14);
  --kg-warm:#d9775c; --kg-warm-text:#d9775c; --kg-warm-tint:rgba(217,119,92,.14);
  --kg-accent:#e2b64a; --kg-accent-text:#e2b64a; --kg-accent-tint:rgba(226,182,74,.16);
  --kron:#5aa7d8;
  --kg-edge:rgba(241,236,223,0.18); --kg-shade:rgba(0,0,0,0.62);
  --kg-shade-inset:rgba(255,255,255,0.05);
  --kg-dome-hi:#16203a; --kg-dome-lo:#070c18;
  color-scheme: dark;
}

body { background: var(--kg-background); }

/* ==========================================================================
   1 · THE PAGE-WIDE GROUND                                  Fiz, 2026-09-20
   "keep that same background for the rest of the page. so, as you scroll the
   bg video plays on the background."
   One fixed layer behind everything, so the page reads as one continuous
   world seen from directly above rather than as a video in a box.
   ========================================================================== */
.kg-ground {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  background: var(--kg-background);
  /* the hero-scoped edge mask does not apply to a page-wide ground */
  -webkit-mask-image: none; mask-image: none;

  /* the two dials. Both start at 0: Fiz asked for the scrim off and the film
     crisp, so the softening lives here rather than in the encode, and any
     page, section or world can turn its own without a re-encode. */
  --ground-blur: 0px;
  --ground-veil: 0;
}
.kg-ground-video, .kg-ground-still {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.kg-ground-still { display: none; }

/* the world wash: the organism's own series colour, felt rather than seen.
   Measured at .12 the four series read as four different rooms and the worst
   body-text contrast anywhere on any ground is still 8.40:1. */
.kg-ground::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--world-tint);
  opacity: var(--world-wash);
}
/* the softening layer, over the video rather than in it */
.kg-ground::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  backdrop-filter: blur(var(--ground-blur));
  -webkit-backdrop-filter: blur(var(--ground-blur));
  background: var(--kg-background);
  opacity: var(--ground-veil);
}

/* Everything that used to paint the page ground now lets it through. Without
   this the first opaque section covers the clip and the ground stops at the
   fold. Cards, panels and wells stay opaque: they are what carries the text. */
body > header, body > .mobile-overlay { position: relative; z-index: 100; }
body > section, body > nav, body > main, body > .kg-path-section,
body > footer, body > .kg-page { position: relative; z-index: 1; }

section.kg-hero, section.kg-band, section.kg-path-section,
section:nth-child(even), .kg-path-section { background: transparent; }

/* A band still needs to read as a band. A translucent wash does that and keeps
   the ground moving through it: composited over the darkest ground pixel this
   lands at (232,230,224), where body ink is 10.4:1 and muted is 4.71:1. */
section.kg-band.sunken { background: rgba(239, 236, 228, 0.72); }

/* ==========================================================================
   2 · THE HEADER IS THE GROUND
   It was flat-but-opaque, which was seamless against a painted page. Against
   a moving ground an opaque bar is the seam: the clip would stop at 64px.
   So it is transparent, with no border and no shadow, and the ground runs
   under it. The hide-on-scroll behaviour it already had is what keeps
   scrolling content from colliding with the links.
   ========================================================================== */
header {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
header a, .mobile-overlay a { color: var(--kg-text); }
header a.logo { color: var(--kg-foreground); }
header a:focus-visible, .mobile-overlay a:focus-visible,
.hamburger:focus-visible, .kg-worlds-toggle:focus-visible {
  outline: 2px solid var(--kg-primary); outline-offset: 3px; border-radius: 4px;
}
.hamburger { min-width: var(--kg-touch); min-height: var(--kg-touch); }
/* 44px on every menu item, desktop included. The earlier pass left the desktop
   row at 26px on the grounds that it is hidden below 768px and so is not the
   touch surface; a 44px target is a pointer-accuracy and motor-accessibility
   floor, not only a touch one, and the bar absorbs it without growing because
   the Sign In button was already 44. */
header .nav-links > a, header .nav-links > .kg-worlds > .kg-worlds-toggle {
  min-height: var(--kg-touch); display: inline-flex; align-items: center;
}
.mobile-overlay {
  background: var(--kg-background);
}
.mobile-overlay a { min-height: var(--kg-touch); display: flex; align-items: center; justify-content: center; }

/* ==========================================================================
   3 · THE WORLDS MENU
   Thirteen worlds behind one menu item, by domain name. It opens on hover for
   a pointer, on click or Enter for everything else, and closes on Escape.
   ========================================================================== */
.kg-worlds { position: relative; display: inline-flex; }
.kg-worlds-toggle {
  font: inherit; color: var(--kg-text); background: none; border: 0;
  padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  min-height: var(--kg-touch);
  font-family: var(--kg-sans); font-size: .95rem; letter-spacing: .02em;
}
.kg-worlds-toggle svg { width: 10px; height: 10px; transition: transform .2s var(--kg-ease); }
.kg-worlds[data-open="true"] .kg-worlds-toggle svg { transform: rotate(180deg); }
.kg-worlds-panel {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 460px; padding: 14px;
  background: var(--kg-card); border: 1px solid var(--kg-border); border-radius: 12px;
  box-shadow: 0 18px 44px var(--kg-shade), 0 2px 0 var(--kg-shade-inset) inset;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px;
  opacity: 0; visibility: hidden; pointer-events: none;
  /* visibility is deliberately NOT transitioned. It interpolates discretely, so
     putting it in the list makes the open state depend on a transition finishing
     and gives a stale computed value to anything reading the style mid-flight.
     opacity and pointer-events carry the animation; visibility flips at once. */
  transition: opacity .18s var(--kg-ease), transform .18s var(--kg-ease);
  z-index: 200;
}
/* THE 10px ABOVE THIS PANEL IS A DEAD ZONE, AND IT CLOSED THE MENU.
   `top: calc(100% + 10px)` sets the panel ten pixels clear of the toggle, so a
   pointer travelling from one to the other is briefly over neither -- and
   kongen-nav.js closes the whole component on the wrapper's `mouseleave`. The
   menu shut while the pointer was still on its way down, which is exactly
   "the Worlds Menu when opened, can't be clicked" (Fiz, 2026-09-30).

   This bridges the gap with hit area rather than removing the visual offset,
   so the panel still sits clear of the toggle and the pointer never leaves the
   component. It is part of the panel, so it is inert whenever the panel is --
   `pointer-events: none` when closed, live only when open. (#639) */
.kg-worlds-panel::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -10px; height: 10px;
}
.kg-worlds[data-open="true"] .kg-worlds-panel,
.kg-worlds:hover .kg-worlds-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.kg-worlds-panel a {
  display: flex; align-items: center; gap: 9px;
  min-height: var(--kg-touch); padding: 0 10px; border-radius: 8px;
  font-family: var(--kg-sans); font-size: .92rem; color: var(--kg-text); text-decoration: none;
}
.kg-worlds-panel a:hover { background: var(--kg-sunken); color: var(--kg-foreground); }
.kg-worlds-panel a .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--kg-primary); }
.kg-worlds-panel a.s-warm .dot { background: var(--kg-warm); }
.kg-worlds-panel a.s-secondary .dot { background: var(--kg-secondary); }
.kg-worlds-panel a.s-accent .dot { background: var(--kg-accent); }
.kg-worlds-panel .kg-worlds-all {
  grid-column: 1 / -1; margin-top: 4px; border-top: 1px solid var(--kg-border);
  color: var(--kg-link); font-size: .88rem;
}
@media (max-width: 900px) { .kg-worlds-panel { min-width: 320px; grid-template-columns: 1fr; } }

/* the mobile overlay lists the worlds inline rather than in a panel */
.mobile-overlay .kg-worlds-mob { font-size: .95rem; opacity: .95; }

/* ==========================================================================
   4 · CARDS SEPARATE BY SHADOW, NOT BY FILL
   White on #faf9f5 is 1.05:1. The pillow shadow is what makes a card an
   object now, so it is stated once here and every card surface takes it.
   ========================================================================== */
.kg-card, .kg-panel, .content-backdrop, .kg-well {
  box-shadow: 0 1px 2px rgba(20,26,42,.06), 0 10px 30px rgba(20,26,42,.09);
  border: 1px solid var(--kg-border);
}
.kg-card, .kg-panel, .content-backdrop { background: var(--kg-card); }

/* ==========================================================================
   5 · THE WORLD PAGES
   Hero text on the left, the organism's glyph expanded in a card on the
   right, over that world's own ground.
   ========================================================================== */
.kg-page { font-family: var(--kg-serif); color: var(--kg-text); }
.kg-wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }

.kg-world-hero { padding: 132px 0 64px; }
.kg-world-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 40px; align-items: center;
}
.kg-world-hero h1 {
  font-family: var(--kg-serif); font-weight: 400; margin: 0 0 14px;
  font-size: clamp(2.1rem, 4.4vw, 3rem); line-height: 1.18;
  color: var(--kg-foreground); letter-spacing: -.01em; text-wrap: balance;
}
.kg-world-hero h1 em { font-style: italic; }
/* The eyebrow sits directly on the ground, so it takes --kg-text and not
   --kg-muted-foreground, which measures 3.92 to 4.19:1 there and fails. */
.kg-eyebrow, .kg-world-eyebrow {
  font-family: var(--kg-sans); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--kg-text); margin: 0 0 14px;
}
.kg-world-lead {
  font-size: 1.18rem; line-height: 1.66; color: var(--kg-text);
  max-width: 54ch; margin: 0 0 24px;
}
.kg-world-hero .kg-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
/* MEASURED, not assumed. The world ground carries a 12% wash of the organism's
   own series colour, and at the darkest pixel of the darkest clip that puts
   --kg-link at 4.34:1 and --kg-accent-text at 4.12:1, both of which fail. The
   two pieces of copy that sit directly on the ground therefore take --kg-text,
   which measures 8.41:1 at that same worst case, and the link keeps its
   underline so it still reads as a link without leaning on colour.
   Inside a card --kg-link is on #ffffff and is unaffected. */
.kg-world-hero .kg-mlink { color: var(--kg-text); text-decoration: underline; text-underline-offset: 3px; }
/* The legacy section eyebrow was --kg-primary, which is a 3:1 GRAPHIC colour and
   measures 3.86:1 as text on the hero ground. On the pages that now carry the
   ground it sits directly on the clip, so it takes --kg-link: 4.84:1 there, and
   6.43:1 where it sits on a card. Same family, one step darker. */
.section-eyebrow { color: var(--kg-link); }
/* Muted text inside a band that is NOT sunken sits directly on the clip, where
   it measures 3.81:1 and fails. Inside a card or a sunken band it is fine and is
   left alone. Found by sweeping the built pages, not by reading the source. */
/* !important here only because the rule it has to beat carries one: index.html
   writes `.kg-receipt-body { ... color: var(--kg-muted-foreground) !important }`,
   and an !important declaration can only be overridden by another. */
section.kg-band:not(.sunken) .kg-receipt-body,
section.kg-band:not(.sunken) .kg-install-hint { color: var(--kg-text) !important; }
/* pricing.html's .price-sub was #64748b, a slate that is in no Kongen palette at
   all and measures 4.24:1 on the ground. It takes --kg-text. */
.price-sub, .pricing-hero .price-sub { color: var(--kg-text); }

/* PRE-EXISTING, found rather than caused: privacy.html's data tables are 374 to
   420px wide inside a 342px content box at 390px, which is the only horizontal
   page scroll left on the site. The legal pages have no `overflow-x: hidden` on
   body, so it reached the document. The table scrolls inside its own box now
   instead of dragging the page with it. Nothing is hidden and no column is
   dropped. */
article table, .legal table, main table {
  display: block; max-width: 100%; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.kg-world-eyebrow strong { color: var(--kg-text); }

.kg-glyph-card {
  background: var(--kg-card); border: 1px solid var(--kg-border); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(20,26,42,.06), 0 18px 48px rgba(20,26,42,.12);
  padding: 30px; display: grid; gap: 18px; justify-items: center;
}
.kg-glyph-card svg { width: 100%; max-width: 300px; aspect-ratio: 1/1; display: block; }
.kg-glyph-card .kg-glyph-name {
  font-family: var(--kg-sans); font-size: .74rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--kg-muted-foreground); text-align: center;
}
.kg-glyph-card .kg-glyph-line {
  font-family: var(--kg-serif); font-size: 1rem; line-height: 1.55;
  color: var(--kg-text); text-align: center; margin: 0; max-width: 34ch;
}

.kg-world-body { padding: 8px 0 72px; display: grid; gap: 22px; }
.kg-panel {
  border-radius: 16px; padding: 30px 32px;
}
.kg-panel h2 {
  font-family: var(--kg-serif); font-weight: 400; font-size: 1.5rem;
  color: var(--kg-foreground); margin: 0 0 12px; line-height: 1.3;
}
.kg-panel p { margin: 0 0 12px; line-height: 1.72; color: var(--kg-text); }
.kg-panel p:last-child { margin-bottom: 0; }
.kg-panel a { color: var(--kg-link); }
.kg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.kg-receipt {
  border-left: 3px solid var(--kg-primary); background: var(--kg-sunken);
  border-radius: 0 10px 10px 0; padding: 16px 18px; margin: 4px 0 0;
}
.kg-receipt .kg-receipt-label {
  font-family: var(--kg-sans); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--kg-muted-foreground); margin: 0 0 6px;
}
.kg-receipt p { margin: 0; font-size: .97rem; line-height: 1.65; }

.kg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--kg-touch); padding: 0 26px; border-radius: 999px;
  font-family: var(--kg-sans); font-size: .95rem; letter-spacing: .01em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
}
.kg-btn.primary {
  background: var(--kg-primary); color: var(--kg-primary-foreground);
  box-shadow: 0 2px 10px rgba(47,111,159,.28);
}
.kg-btn.primary:hover { background: var(--kg-primary-deep); }
.kg-btn.ghost {
  background: var(--kg-card); color: var(--kg-text); border-color: var(--kg-border-strong);
}
.kg-mlink {
  font-family: var(--kg-sans); font-size: .95rem; color: var(--kg-link);
  min-height: var(--kg-touch); display: inline-flex; align-items: center;
}
.kg-page a:focus-visible, .kg-btn:focus-visible {
  outline: 2px solid var(--kg-primary); outline-offset: 3px; border-radius: 6px;
}

.kg-world-nav {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 72px;
}
.kg-world-nav a {
  font-family: var(--kg-sans); font-size: .86rem; text-decoration: none;
  color: var(--kg-text); background: var(--kg-card);
  border: 1px solid var(--kg-border); border-radius: 999px;
  padding: 0 16px; min-height: var(--kg-touch); display: inline-flex; align-items: center;
  box-shadow: 0 1px 2px rgba(20,26,42,.05);
}
.kg-world-nav a:hover { border-color: var(--kg-border-strong); }
.kg-world-nav a[aria-current="page"] { background: var(--kg-primary); color: var(--kg-primary-foreground); border-color: transparent; }

@media (max-width: 860px) {
  .kg-world-grid { grid-template-columns: 1fr; gap: 28px; }
  .kg-two { grid-template-columns: 1fr; }
  .kg-world-hero { padding: 112px 0 44px; }
  .kg-panel { padding: 24px 20px; }
}

/* ==========================================================================
   6 · REDUCED MOTION
   The ground must not play, not merely be hidden. The poster takes its place.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .kg-ground-video { display: none !important; }
  .kg-ground-still { display: block; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}