/* KISS Dealer — Visitor Gateway styles · v28 */
/* ===========================================================================
   KISS Dealer — Color tokens  (reconciled to MUI SaaS Design System v1)
   See guidelines/MUI_SaaS_Design_System_v1.md — that doc is the authoritative
   accessibility + product-UI contract. All approved text pairs pass WCAG 2.1 AA.

   KEY DECISIONS (from the doc):
   • PRIMARY ACTION = #07604F (white text 7.51:1, AA pass). NOT #229E87.
   • #229E87 ("brand teal") is accent-only: logo, icons, charts, LARGE/UI text.
     White text on #229E87 is 3.33:1 — it is NEVER a small-text fill or a
     primary button colour.
   • Mint #5CE5C4 pairs ONLY with dark text (#07604F / #2B333B). Never white.
   • #95999D is disabled/decorative only (2.87:1 on white). Secondary text = #60666C.
   =========================================================================== */
:root {
  /* --- Primary ramp (deep green) — authoritative, verbatim from the doc --- */
  --primary-50:  #DBF6F0;
  --primary-100: #B7ECE3;
  --primary-200: #8FE1D4;
  --primary-300: #5CE5C4;   /* accent mint */
  --primary-400: #33B89F;
  --primary-500: #229E87;   /* brand teal — non-text accent (large/UI only) */
  --primary-600: #0E7E68;   /* hover surface w/ white text (5.00:1) */
  --primary-700: #07604F;   /* primary.main — PRIMARY ACTION (white 7.51:1) */
  --primary-800: #054D40;   /* primary hover (white 9.80:1) */
  --primary-900: #03382F;   /* primary active */

  /* --- Backwards-compatible green aliases (map onto the ramp) --- */
  --green-950: var(--primary-900);
  --green-900: var(--primary-700);  /* deepest forest used in dark sections = #07604F */
  --green-700: var(--primary-600);
  --green-600: var(--primary-800);
  --green-500: var(--primary-500);
  --green-400: var(--primary-400);
  --green-300: var(--primary-300);
  --green-200: var(--primary-200);
  --green-100: var(--primary-50);
  --green-50:  #EFFBF7;             /* faintest mint wash (UI tint) */

  /* --- Neutrals (doc ramp; brandbook values preserved) --- */
  --ink-900: #161B20;   /* high-emphasis text */
  --ink-800: #2B333B;   /* primary text (12.81:1 on white) */
  --ink-700: #414A52;   /* strong secondary text */
  --ink-600: #60666C;   /* secondary text (5.81:1 on white) */
  --ink-500: #95999D;   /* DISABLED / decorative only — not readable text */
  --ink-400: #B6B9BC;
  --ink-300: #CBCDCF;   /* borders, dividers (decorative) */
  --ink-200: #E7E9EA;   /* muted panel / hairline */
  --ink-100: #F4F5F5;   /* app background */
  --ink-50:  #FAFBFB;
  --ink-0:   #FFFFFF;   /* card surface */

  /* --- Semantic colours (functional feedback only) — standard SaaS scale ---
     Industry-standard hues: green success, amber warning, red danger, blue info.
     -500 = solid fill / icon / dot · -100 = tint surface · -text = AA text on
     tint or white · -600/-700 = hover & small-text-safe darker steps.
     AA is achieved via tint+dark-text pairs of the SAME hue — never by
     darkening the hue itself into brown/maroon. */
  --success-500: #16A34A;  --success-600: #15803D;  --success-100: #DCFCE7;  --success-text: #166534;
  --warning-500: #F59E0B;  --warning-600: #D97706;  --warning-700: #B45309;  --warning-100: #FEF3C7;  --warning-text: #92400E;
  --danger-500:  #DC2626;  --danger-600:  #B91C1C;  --danger-100:  #FEE2E2;  --danger-text:  #B91C1C;
  --info-500:    #2563EB;  --info-600:    #1D4ED8;  --info-100:    #DBEAFE;  --info-text:    #1D4ED8;

  /* Truth-state ramp (D-52, D-53). Transcribed from the ratified drawing
     (05-surfaces/kiss-os/truth-states-a.html), which stays untouched as the point-in-time
     artifact — these tokens are the source now. D-52 darkened two hexes to clear 4.5:1 on
     white at 13.5px: stale #A86A12 → #965D0F, unknown/offline #7B857F → #667069. Six KISS OS
     state words kept; "unavailable" is tokenized as offline (UI copy stays "Can't check right now"). */
  --status-verified:    #0D7A4F;
  --status-claimed:     #2563A8;
  --status-completed:   #07604F;
  --status-conflicting: #B3261E;
  --status-stale:       #965D0F;
  --status-unknown:     #667069;
  --status-offline:     #667069;

  /* ======================= Semantic aliases ======================= */
  /* Text */
  --text-strong:    var(--ink-800);    /* #2B333B */
  --text-body:      var(--ink-800);
  --text-secondary: var(--ink-600);    /* #60666C — secondary text */
  --text-muted:     var(--ink-600);    /* keep readable (was #95999D — failed AA) */
  --text-disabled:  var(--ink-500);    /* #95999D — disabled/decorative ONLY */
  --text-inverse:   var(--ink-0);
  --text-brand:     var(--primary-700);/* #07604F — links/brand text, 7.51:1 */
  --text-on-brand:  var(--ink-0);

  /* Surfaces */
  --surface-page:        var(--ink-100);   /* #F4F5F5 app background */
  --surface-subtle:      var(--ink-100);
  --surface-card:        var(--ink-0);
  --surface-sunken:      var(--ink-50);
  --surface-brand:       var(--primary-700);  /* #07604F deep-green sections */
  --surface-brand-solid: var(--primary-700);
  --surface-mint:        var(--primary-50);   /* #DBF6F0 soft panels */
  --surface-mint-strong: var(--primary-300);  /* #5CE5C4 (dark text only) */
  --surface-selected:    var(--primary-50);   /* #DBF6F0 selected rows/cards */

  /* Borders & lines */
  --border-default: var(--ink-300);    /* #CBCDCF decorative */
  --border-subtle:  var(--ink-200);    /* #E7E9EA */
  --border-strong:  var(--ink-600);    /* #60666C — functional input boundary (5.81:1) */
  --border-brand:   var(--primary-700);

  /* Interactive — PRIMARY ACTION = #07604F */
  --action-bg:        var(--primary-700);  /* #07604F */
  --action-bg-hover:  var(--primary-800);  /* #054D40 */
  --action-bg-press:  var(--primary-900);  /* #03382F */
  --action-fg:        var(--ink-0);
  --action-disabled-bg: var(--ink-200);    /* #E7E9EA */
  --action-disabled-fg: var(--ink-500);    /* #95999D */

  /* Mint secondary action (dark text only) */
  --action-mint-bg:       var(--primary-300);  /* #5CE5C4 */
  --action-mint-fg:       var(--primary-700);  /* #07604F */
  --action-mint-hover:    var(--primary-50);   /* #DBF6F0 */

  /* Accent / focus */
  --brand-accent:  var(--primary-500);          /* #229E87 — accent only */
  --accent:        var(--primary-500);
  --focus-color:        var(--primary-700);     /* on light surfaces (7.51:1) */
  --focus-color-dark:   var(--primary-300);     /* on dark green (4.82:1) */
  --focus-ring:    var(--primary-700);
}

/* ===========================================================================
   KISS Dealer — Typography tokens & @font-face
   (reconciled to MUI SaaS Design System v1)
   Display : Sora                 (brandbook primary — headlines H1–H4)
   Body/UI : Inter                 (public demo build — Gotham withheld pending licence)
   =========================================================================== */

/* Sora — display tier (user-supplied official family, discrete weights) */
@font-face { font-family:'Sora'; font-style:normal; font-weight:100; font-display:swap; src:url('fonts/Sora-Thin.ttf') format('truetype'); }
@font-face { font-family:'Sora'; font-style:normal; font-weight:200; font-display:swap; src:url('fonts/Sora-ExtraLight.ttf') format('truetype'); }
@font-face { font-family:'Sora'; font-style:normal; font-weight:300; font-display:swap; src:url('fonts/Sora-Light.ttf') format('truetype'); }
@font-face { font-family:'Sora'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/Sora-Regular.ttf') format('truetype'); }
@font-face { font-family:'Sora'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/Sora-Medium.ttf') format('truetype'); }
@font-face { font-family:'Sora'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/Sora-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Sora'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/Sora-Bold.ttf') format('truetype'); }
@font-face { font-family:'Sora'; font-style:normal; font-weight:800; font-display:swap; src:url('fonts/Sora-ExtraBold.ttf') format('truetype'); }

/* Gotham is NOT shipped in this public demo build — web-embedding rights were not confirmed at release.
   The body stack falls through to Inter (bundled, OFL). Restore the @font-face block and the font files
   only once the licence is confirmed. */

/* Inter — variable, fallback for product UI / body if Gotham is unavailable */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/inter-variable.woff2') format('woff2');
}

:root {
  /* Families — public demo build: Inter body (Gotham withheld, see @font-face note above) */
  --font-display: 'Sora', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SFMono-Regular', ui-monospace, 'Menlo', 'Consolas', monospace;

  /* Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Type scale (px) — aligned to the doc's hierarchy (§4.2) */
  --text-display-2xl: 72px;   /* marketing hero only */
  --text-display-xl: 56px;
  --text-h1: 40px;   /* Sora 700 / 48 / -0.5px — page title */
  --text-h2: 32px;   /* Sora 700 / 40 / -0.25px — major section */
  --text-h3: 28px;   /* Sora 700 / 36 / -0.2px — dashboard heading */
  --text-h4: 24px;   /* Sora 700 / 32 — card group title */
  --text-h5: 20px;   /* Gotham 700 / 28 — panel title */
  --text-h6: 18px;   /* Gotham 700 / 24 — dialog title */
  --text-subtitle: 16px;     /* Gotham 700 / 24 — card title */
  --text-body-lg: 18px;
  --text-size-body: 16px;   /* Gotham 400 / 24 — main body (renamed from --text-body per D-44; the color token keeps that name) */
  --text-body-sm: 14px;      /* Gotham 400 / 20 — table body */
  --text-caption: 12px;      /* Gotham 400 / 16 — helper text */
  --text-overline: 11px;     /* Gotham 700 / 16 / 0.8px — uppercase labels */

  /* Line heights */
  --leading-tight: 1.2;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight: -0.5px;
  --tracking-snug: -0.2px;
  --tracking-normal: 0;
  --tracking-overline: 0.8px;   /* uppercase label/eyebrow tracking */
  --tracking-button: 0.1px;

  /* Semantic roles */
  --role-display-font: var(--font-display);
  --role-heading-font: var(--font-display);
  --role-subhead-font: var(--font-body);
  --role-body-font: var(--font-body);
  --role-overline-font: var(--font-body);
}

/* ===========================================================================
   KISS Dealer — Spacing, radii, elevation, focus, layout, motion
   (reconciled to MUI SaaS Design System v1)
   8px spacing system · radii xs4/sm8/md12/lg16/xl24 · borders preferred over shadow
   =========================================================================== */
:root {
  /* Spacing — 8px system (4/12/20 kept as half-steps for fine UI tuning) */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radii — doc scale (§5). MUI shape.borderRadius = 12. */
  --radius-xs: 4px;    /* badges */
  --radius-sm: 8px;    /* inputs, chips, buttons */
  --radius-md: 12px;   /* menus, popovers, control surfaces */
  --radius-lg: 16px;   /* cards */
  --radius-xl: 24px;   /* panels */
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* Borders */
  --border-width: 1px;
  --border-width-strong: 2px;

  /* Elevation — prefer borders; shadows are soft & low (doc §5) */
  --shadow-xs: 0 1px 2px rgba(43, 51, 59, 0.08);
  --shadow-sm: 0 1px 2px rgba(43, 51, 59, 0.08);          /* elevation.1 */
  --shadow-md: 0 2px 6px rgba(43, 51, 59, 0.10);          /* elevation.2 */
  --shadow-lg: 0 8px 24px rgba(43, 51, 59, 0.14);         /* elevation.3 */
  --shadow-xl: 0 16px 40px rgba(43, 51, 59, 0.16);
  --shadow-brand: 0 8px 24px rgba(7, 96, 79, 0.18);       /* marketing flourish only */
  --elevation-0: none;
  --elevation-1: var(--shadow-sm);
  --elevation-2: var(--shadow-md);
  --elevation-3: var(--shadow-lg);

  /* Focus — surface-aware, SOLID (doc §6). Passes 3:1 against its surface. */
  --focus-outline:      3px solid var(--focus-color);       /* light surfaces */
  --focus-outline-dark: 3px solid var(--focus-color-dark);  /* dark green surfaces */
  --focus-offset: 2px;
  --shadow-focus: 0 0 0 3px var(--focus-color);   /* opaque ring fallback for box-shadow users */

  /* Layout */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1440px;
  --gutter: var(--space-8);

  /* Motion — quick, confident, no bounce */
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1);   /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --duration-fast: 120ms;   /* @kind other */
  --duration-base: 200ms;   /* @kind other */
  --duration-slow: 320ms;   /* @kind other */

  /* Z-index */
  --z-sticky: 100;   /* @kind other */
  --z-overlay: 800;  /* @kind other */
  --z-modal: 900;    /* @kind other */
  --z-toast: 1000;   /* @kind other */
}

/* ===========================================================================
   KISS Dealer — Base element defaults
   Applies the tokens to bare HTML so specimens & kits inherit the brand.
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-size-body);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); letter-spacing: 0; }
h5 { font-size: var(--text-h5); font-family: var(--font-body); letter-spacing: 0; }
h6 { font-size: var(--text-h6); font-family: var(--font-body); letter-spacing: 0; }

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--text-brand); text-decoration: none; }
a:hover { text-decoration: underline; }

small { font-size: var(--text-caption); color: var(--text-muted); }

strong { font-weight: var(--weight-semibold); }

code, pre { font-family: var(--font-mono); font-size: 0.9em; }

::selection { background: var(--primary-300); color: var(--primary-700); }

/* Overline / eyebrow — the brandbook's signature wide-spaced caps */
.kd-overline {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-overline);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--text-brand);
}

/* Shared focus treatment — surface-aware SOLID ring (doc §6, passes 3:1) */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}


/* KISS Dealer — Back Office V3 Blue · Corporate Navy theme overlay.
   Applied when <html data-theme="navy">. Redefines ONLY the brand ramp and the
   aliases that carry a literal green; every other token (semantic status,
   neutrals, spacing, type) is inherited from the design system unchanged.
   Ramp: direction B "Corporate Navy" from the V3 Blue colour directions doc.
   Primary action #24407E carries white text at 9.4:1 (AA / AAA for body). */
:root[data-theme="navy"]{
  --primary-50:  #EDF2FA;
  --primary-100: #DAE4F5;
  --primary-200: #B6C9EA;
  --primary-300: #8FAEE3;   /* active nav / selected — dark text only */
  --primary-400: #5F82C7;
  --primary-500: #3F63AC;   /* accent — icons, charts, large UI */
  --primary-600: #2E4E93;   /* hover surface w/ white text (7.6:1) */
  --primary-700: #24407E;   /* PRIMARY ACTION (white 9.4:1) */
  --primary-800: #1B3164;   /* primary hover */
  --primary-900: #121F42;   /* rail / primary active */

  /* the one green alias defined as a literal rather than off the ramp */
  --green-50: #F3F7FC;
}

/* KISS Dealer — Visitor Gateway styles. Isolated kg- namespace over the shared tokens (tokens.css is prepended at build). */
html,body{margin:0;min-height:100%;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
button{font-family:inherit}
.kg{min-height:100vh;display:flex;flex-direction:column}
.kg-top{flex:none;height:52px;display:flex;align-items:center;gap:12px;padding:0 22px;border-bottom:1px solid var(--border-subtle);background:var(--surface-card)}
.kg-brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:15px;color:var(--text-strong);letter-spacing:-.01em}
.kg-brand__m{width:24px;height:24px;border-radius:6px;background:var(--primary-700);display:inline-flex;align-items:center;justify-content:center}
.kg-brand__m img{width:15px;height:15px;display:block}
.kg-top__x{margin-left:auto;font-size:12px;color:var(--text-secondary)}
.kg-prog{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-secondary);font-weight:var(--weight-medium)}
.kg-bar{width:140px;height:4px;border-radius:var(--radius-pill);background:var(--ink-200);overflow:hidden}
.kg-bar i{display:block;height:100%;background:var(--primary-700);border-radius:var(--radius-pill);transition:width .35s ease}
.kg-body{flex:1;min-height:0;display:flex;align-items:safe center;justify-content:center;padding:28px 40px}
.kg-small{flex:none;text-align:center;font-size:12px;color:var(--text-secondary);padding:10px 20px 16px}
.kg-card{width:min(980px,100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:center;animation:kg-in .3s ease both;margin:auto 0}
.kg-card--one{grid-template-columns:minmax(0,620px);justify-content:center;text-align:center}
.kg-card--one .kg-acts{justify-content:center}
.kg-card--col{grid-template-columns:minmax(0,680px);justify-content:center}
.kg-card--hub{grid-template-columns:minmax(0,560px);justify-content:center;text-align:center}
@keyframes kg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.kg-kick{font-size:11.5px;font-weight:var(--weight-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--primary-700);margin-bottom:12px}
.kg-h{font-family:var(--font-display);font-weight:var(--weight-bold);color:var(--text-strong);letter-spacing:-.025em;line-height:1.1;font-size:34px;margin:0 0 14px;text-wrap:balance}
.kg-h--xl{font-size:50px}
.kg-h--big{font-size:42px}
.kg-lead{font-size:21px;line-height:1.35;color:var(--text-strong);margin:0 0 10px;font-weight:var(--weight-medium)}
.kg-p{font-size:15.5px;line-height:1.5;color:var(--text-body);margin:0 0 10px}
.kg-p b{color:var(--text-strong);font-weight:var(--weight-semibold)}
.kg-mono{font-family:var(--font-mono);font-size:14.5px;background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-xs);padding:2px 6px}
.kg-land{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:21px;color:var(--text-strong);margin:16px 0 0;letter-spacing:-.01em;line-height:1.25}
.kg-quote{margin:14px 0 0;padding:12px 16px;border-left:3px solid var(--primary-200);background:var(--surface-card);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:17px;font-style:italic;color:var(--text-strong)}
.kg-link{border:none;background:none;padding:0;font-size:inherit;color:var(--primary-800);font-weight:var(--weight-semibold);text-decoration:underline;text-underline-offset:2px;cursor:pointer;border-radius:3px}
.kg-link:hover{color:var(--primary-900,var(--primary-800))}
/* buttons — same scale as the product (.bo-btn): 8px radius, semibold */
.kg-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:44px;padding:0 20px;font-size:14.5px;font-weight:var(--weight-semibold);border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;white-space:nowrap}
.kg-btn--pri{background:var(--action-bg);color:#fff}
.kg-btn--pri:hover{background:var(--action-bg-hover)}
.kg-btn--gh{background:#fff;color:var(--ink-800);border-color:var(--border-default)}
.kg-btn--gh:hover{background:var(--ink-100)}
.kg-btn--qt{background:none;color:var(--ink-700);padding:0 12px}
.kg-btn--qt:hover{background:var(--ink-100)}
.kg-btn--dgr{background:#fff;color:var(--danger-text);border-color:var(--danger-500)}
.kg-btn--dgr:hover{background:var(--danger-100)}
.kg-btn--xl{height:48px;padding:0 24px;font-size:15px}
.kg-btn:focus-visible,.kg-rb:focus-visible,.kg-link:focus-visible,.kg-path:focus-visible,.kg input:focus-visible,.kg select:focus-visible{outline:2px solid var(--primary-700);outline-offset:2px}
.kg-acts{display:flex;align-items:center;gap:10px;margin-top:24px;flex-wrap:wrap}
/* reactions */
.kg-react{display:flex;align-items:center;gap:8px;margin-top:20px;flex-wrap:wrap}
.kg-react__l{font-size:12.5px;color:var(--text-secondary);margin-right:2px}
.kg-react__ok{font-size:12px;color:var(--success-text);display:inline-flex;align-items:center;gap:4px}
.kg-rb{height:36px;padding:0 14px;border-radius:var(--radius-pill);border:1px solid var(--border-default);background:var(--surface-card);font-size:13px;font-weight:var(--weight-semibold);color:var(--ink-800);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.kg-rb:hover{background:var(--ink-100)}
.kg-rb--on{background:var(--surface-selected);border-color:var(--primary-700);color:var(--primary-800);animation:kg-pop .28s ease}
@keyframes kg-pop{40%{transform:scale(1.06)}}
.kg-react .kg-link{font-size:12.5px}
.kg-why{flex-basis:100%;max-width:420px;height:36px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:0 10px;font-family:inherit;font-size:13.5px;color:var(--text-body);background:#fff;outline:none;animation:kg-in .2s ease}
.kg-why:focus{border-color:var(--primary-700);box-shadow:0 0 0 2px var(--primary-50)}
/* visuals */
.kg-vis{min-width:0;max-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.kg-xl{width:100%;max-width:440px;background:#fff;border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);overflow:hidden;font-size:12px}
.kg-xl__bar{height:32px;display:flex;align-items:center;gap:6px;padding:0 10px;background:var(--ink-100);border-bottom:1px solid var(--border-subtle)}
.kg-xl__bar i{width:10px;height:10px;border-radius:50%;background:var(--ink-300);display:block}
.kg-xl__bar span{margin-left:8px;font-weight:var(--weight-semibold);color:var(--ink-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kg-xl__grid{display:grid;grid-template-columns:34px repeat(4,1fr);border-bottom:1px solid var(--border-subtle)}
.kg-xl__grid span{height:22px;border-right:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);padding:0 6px;display:flex;align-items:center;color:var(--ink-700);white-space:nowrap;overflow:hidden;font-size:11px}
.kg-xl__grid span.h{background:var(--ink-50);color:var(--ink-600);font-weight:var(--weight-semibold);justify-content:center}
.kg-xl__grid span.r{background:var(--ink-50);color:var(--ink-500);justify-content:center}
.kg-xl__grid span.w{color:var(--warning-text,#8a5a00);font-weight:var(--weight-semibold)}
.kg-xl__tabs{display:flex;gap:2px;padding:6px 6px 8px;background:var(--ink-50);overflow:hidden}
.kg-xl__tabs span{flex:none;padding:4px 9px;border:1px solid var(--border-default);border-radius:4px 4px 0 0;background:#fff;color:var(--ink-700);font-size:11px;white-space:nowrap;opacity:0;animation:kg-show .35s ease forwards}
.kg-xl__tabs span.on{background:var(--primary-50);border-color:var(--primary-200);color:var(--primary-800);font-weight:var(--weight-semibold)}
@keyframes kg-show{to{opacity:1}}
.kg-pile{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:440px}
.kg-pile span{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:#fff;font-size:12px;color:var(--ink-800);box-shadow:var(--shadow-sm);opacity:0;animation:kg-drop .35s ease forwards}
.kg-pile span em{font-style:normal;font-size:9.5px;font-weight:var(--weight-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-600);background:var(--ink-100);border-radius:var(--radius-xs);padding:1px 4px}
.kg-pile span.note{background:#fff7d6;border-color:#f1dd8a}
@keyframes kg-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.kg-mail{width:100%;max-width:460px;background:#fff;border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);overflow:hidden;font-size:12.5px;display:block}
.kg-mail__h{padding:12px 14px;border-bottom:1px solid var(--border-subtle)}
.kg-mail__h b{display:block;font-size:14px;color:var(--text-strong);font-weight:var(--weight-semibold)}
.kg-mail__row{display:flex;gap:8px;padding:8px 14px;border-bottom:1px solid var(--border-subtle);line-height:1.45;opacity:0;animation:kg-in .35s ease forwards}
.kg-mail__row .k{flex:none;width:44px;font-weight:var(--weight-bold);color:var(--ink-600);font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding-top:2px}
.kg-mail__row .v i{font-style:normal;color:var(--text-secondary)}
.kg-mail__re{display:flex;gap:8px;padding:9px 14px;border-bottom:1px solid var(--border-subtle);opacity:0;animation:kg-in .35s ease forwards}
.kg-av{width:24px;height:24px;border-radius:50%;background:var(--primary-100);color:var(--primary-800);font-size:10px;font-weight:var(--weight-bold);display:flex;align-items:center;justify-content:center;flex:none}
.kg-mail__re span b{font-weight:var(--weight-semibold);color:var(--text-strong)}
.kg-mail__n{padding:8px 14px;font-size:11.5px;color:var(--text-secondary);background:var(--ink-50)}
.kg-five{gap:16px}
.kg-clock{width:150px;height:150px;border-radius:50%;background:#fff;border:2px solid var(--ink-800);position:relative;box-shadow:var(--shadow-md)}
.kg-clock i{position:absolute;left:50%;top:50%;transform-origin:50% 100%;background:var(--ink-800);border-radius:2px}
.kg-clock .h{width:4px;height:42px;margin:-42px 0 0 -2px;transform:rotate(150deg)}
.kg-clock .m{width:3px;height:58px;margin:-58px 0 0 -1.5px;transform:rotate(0deg);animation:kg-min 1.6s ease-out forwards}
.kg-clock .d{width:8px;height:8px;border-radius:50%;margin:-4px 0 0 -4px;background:var(--primary-700)}
.kg-clock .n{position:absolute;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:12px;color:var(--ink-800)}
@keyframes kg-min{from{transform:rotate(-40deg)}to{transform:rotate(0deg)}}
.kg-done{width:100%;max-width:300px;display:flex;flex-direction:column;gap:5px}
.kg-done span{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary);text-decoration:line-through;opacity:0;animation:kg-in .35s ease forwards}
.kg-done span svg{color:var(--success-text)}
.kg-out{background:var(--primary-800);color:#fff;border-radius:var(--radius-md);padding:14px 18px;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:17px;letter-spacing:-.01em;text-align:center;box-shadow:var(--shadow-md);animation:kg-in .5s 1.8s ease both;max-width:300px;width:100%}
.kg-out small{display:block;font-family:var(--font-body);font-weight:var(--weight-medium);font-size:11px;opacity:.75;margin-top:5px;letter-spacing:0}
/* help screen */
.kg-asks{display:grid;grid-template-columns:1fr;gap:8px;margin:14px 0 16px}
.kg-asks span{padding:10px 12px;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--surface-card);font-size:14px;color:var(--text-strong);display:flex;gap:8px;align-items:center;font-weight:var(--weight-medium)}
.kg-asks span svg{color:var(--primary-700)}
/* form */
.kg-form{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin-top:8px}
.kg-form label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:var(--weight-semibold);color:var(--text-strong)}
.kg-form label em{font-style:normal;font-weight:400;color:var(--text-secondary)}
.kg-form input,.kg-form select{height:40px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:0 11px;font-family:inherit;font-size:14px;color:var(--text-body);background:#fff;outline:none}
.kg-form input:focus,.kg-form select:focus{border-color:var(--primary-700);box-shadow:0 0 0 2px var(--primary-50)}
.kg-form .bad input,.kg-form .bad select{border-color:var(--danger-500)}
.kg-form .err{font-size:12px;color:var(--danger-text);font-weight:var(--weight-medium)}
.kg-form__note{grid-column:1/-1;font-size:12.5px;color:var(--text-secondary);margin-top:2px;line-height:1.45}
/* entry (same screen, revealed when the form is valid) */
.kg-enter{margin-top:22px;padding-top:18px;border-top:1px solid var(--border-subtle);animation:kg-in .3s ease both}
.kg-enter__h{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:18px;color:var(--text-strong);margin-bottom:12px;letter-spacing:-.01em}
.kg-paths{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kg-path{text-align:left;padding:16px 18px 14px;border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--surface-card);cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:border-color .12s,box-shadow .12s}
.kg-path:hover{border-color:var(--primary-700);box-shadow:var(--shadow-md)}
.kg-path b{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:17px;color:var(--text-strong);letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.kg-path b svg{color:var(--primary-700)}
.kg-path span{font-size:13px;color:var(--text-secondary);line-height:1.45}
.kg-path--pri{background:var(--primary-800);border-color:var(--primary-800)}
.kg-path--pri b,.kg-path--pri span{color:#fff}
.kg-path--pri b svg{color:#fff}
.kg-path--pri span{opacity:.85}
.kg-path--pri:hover{background:var(--primary-900,var(--primary-800))}
.kg-as{margin-top:14px;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-body);flex-wrap:wrap}
.kg-as b{color:var(--text-strong);font-weight:var(--weight-semibold)}
.kg-as select{height:32px;border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:0 8px;font-family:inherit;font-size:13px;color:var(--text-body);background:#fff}
/* telemetry disclosure */
.kg-priv{margin-top:18px;padding:10px 12px;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--surface-card);font-size:12px;line-height:1.5;color:var(--text-secondary);text-align:left}
.kg-priv--c{margin-top:22px;max-width:560px;margin-left:auto;margin-right:auto}
.kg-priv__h{display:inline}.kg-priv__h b{color:var(--text-strong);font-weight:var(--weight-semibold)}.kg-priv__h svg{vertical-align:-2px;margin-right:4px;color:var(--primary-700)}
.kg-priv .kg-link{font-size:12px;margin-left:4px}
.kg-priv__l{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:3px}
/* return hub */
.kg-hub__acts{display:flex;gap:10px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.kg-hub__links{margin-top:22px;display:flex;gap:10px;justify-content:center;align-items:center;font-size:13px;color:var(--text-secondary)}
/* switch-visitor confirm */
.kg-modal{position:fixed;inset:0;z-index:50;background:rgba(22,27,32,.28);display:flex;align-items:center;justify-content:center;padding:20px}
.kg-modal__box{width:min(480px,100%);background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);padding:20px 22px 18px;animation:kg-in .18s ease}
.kg-modal__t{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:18px;color:var(--text-strong);margin:0 0 8px;letter-spacing:-.01em}
/* responsive: the gateway reads fine well below the product's 900px floor */
@media (max-width:1100px){.kg-card{gap:28px}.kg-h{font-size:30px}.kg-h--xl{font-size:42px}.kg-h--big{font-size:34px}.kg-body{padding:20px 28px}}
@media (max-width:820px){.kg-card{grid-template-columns:minmax(0,1fr)}.kg-vis{order:-1}.kg-form{grid-template-columns:1fr}.kg-paths{grid-template-columns:1fr}.kg-body{padding:18px 18px}.kg-top{padding:0 14px}.kg-bar{width:80px}}
@media (max-width:520px){.kg-h{font-size:26px}.kg-h--xl{font-size:34px}.kg-h--big{font-size:30px}.kg-lead{font-size:18px}.kg-hub__acts{flex-direction:column;align-items:stretch}}
@media (prefers-reduced-motion:reduce){.kg *,.kg *::before,.kg *::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}.kg-xl__tabs span,.kg-pile span,.kg-mail__row,.kg-mail__re,.kg-done span,.kg-out{opacity:1}.kg-clock .m{transform:rotate(0deg)}}
/* what-is-KISS visual (g5) */
.kg-sys{gap:14px}
.kg-sys__row{display:flex;align-items:center;gap:18px;width:100%;max-width:480px}
.kg-sys__col{display:flex;flex-direction:column;gap:9px;flex:1;min-width:0}
.kg-sys__col span{position:relative;display:block;padding:9px 6px;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:#fff;font-size:12.5px;font-weight:var(--weight-semibold);color:var(--text-strong);text-align:center;box-shadow:var(--shadow-sm);line-height:1.2;overflow-wrap:anywhere;opacity:0;animation:kg-in .35s ease forwards}
.kg-sys__col span::after{content:'';position:absolute;top:50%;width:18px;border-top:1.5px dashed var(--ink-300)}
.kg-sys__col--l span::after{right:-19px}.kg-sys__col--r span::after{left:-19px}
.kg-sys__hub{flex:none;width:200px;background:var(--primary-800);color:#fff;border-radius:var(--radius-md);padding:16px 14px 14px;text-align:center;box-shadow:var(--shadow-lg);animation:kg-in .5s .7s ease both;position:relative;z-index:1}
.kg-sys__hub b{display:block;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:17px;letter-spacing:-.01em}
.kg-sys__hub small{display:block;font-size:12px;color:#fff;margin-top:4px}
.kg-sys__work{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:12px;padding:0 2px}
.kg-sys__work span{font-size:11.5px;font-weight:var(--weight-semibold);padding:4px 8px;border-radius:var(--radius-pill);background:#fff;color:var(--primary-800);opacity:0;animation:kg-in .3s ease forwards}
.kg-sys__cap{font-size:13px;color:var(--text-body);text-align:center;max-width:400px;line-height:1.45}
.kg-p--close{margin-top:16px}
.kg-sys__cap b{color:var(--text-strong);font-weight:var(--weight-semibold)}
@media (max-width:520px){.kg-sys__hub{width:160px}.kg-sys__col span{font-size:11.5px}}
@media (prefers-reduced-motion:reduce){.kg-sys__col span,.kg-sys__work span{opacity:1}}