/* Kenaptic public website — shared stylesheet. Static, no framework.
   Design tokens, fonts and palette mirror the console (Inter for display + body,
   JetBrains Mono for eyebrows/code; Signal Blue #3D7BFF; Source Orange #FF6A3D is the forged cross-link). */

/* Graphite Signal — light theme re-derived from the dark moodboard (cool, not warm paper).
   Signal Blue #3D7BFF (discovery/relationships/structure) · Source Orange #FF6A3D
   (source/changes/write-back). Light deepens both a touch for contrast on white. */
:root {
  --paper:#F4F6FA; --surface:#FFFFFF; --border:#E1E6EF; --border-soft:#ECEFF5;
  --ink:#0E121B; --text:#3A4150; --muted:#5B6373; --faint:#8A93A3; --dim:#C2C9D6;
  --accent:#2D6BFF; --accent-hover:#1E54D8; --btn:#2D6BFF; --btn-hover:#1E54D8;
  --btn-ink:#0E121B; --btn-ink-text:#F4F6FA; --panel:#0E121B; --panel-text:#E6EAF0;
  --coral:#F0561F; --cta:#2D6BFF; --nav-bg:rgba(244,246,250,0.88);
  /* Source Orange, exactly as the moodboard states it. NOT redefined under a theme: --coral
     deepens on light for text contrast, but a filled button in the deepened value is no
     longer the brand orange. Same hex in both themes, by design. */
  /* Hover DEEPENS rather than lightens. The label is white, so lifting the fill would take
     contrast further down; #F0561F is the light theme's own coral, so the darker step is
     still a brand value rather than an invented one. */
  --source-orange:#FF6A3D; --source-orange-hover:#F0561F;
  --fog1:rgba(244,246,250,0.82); --fog2:rgba(244,246,250,0.25); --fog3:rgba(244,246,250,0);
  --elev:#F1F4F9; --ok:#1F9D63; --warn:#C98A0E; --bad:#D8412B;
  --gridline:rgba(45,107,255,.055); --glow:rgba(45,107,255,.09); --glow-o:rgba(240,86,31,.07);
  --stripbg:rgba(233,237,243,.75); --lshadow:rgba(15,23,42,.16); --btnshadow:rgba(45,107,255,.28);
  --relb-border:rgba(240,86,31,.45); --relb-bg:rgba(240,86,31,.05);
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --display:'Inter',var(--sans);  /* Söhne stand-in — swap this one var when the licensed files land */
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
/* Graphite Signal — dark (the moodboard). Canvas #0A0D14 → Surface #111620 → Elev #161C27;
   elevation reads via lightness + a 1px border, never drop shadows. */
html[data-theme="dark"] {
  --paper:#0A0D14; --surface:#111620; --border:#232A36; --border-soft:#1A2029;
  --ink:#E6EAF0; --text:#C3CAD6; --muted:#A3ACB9; --faint:#6B7280; --dim:#3A4250;
  --accent:#3D7BFF; --accent-hover:#6B9BFF; --btn:#3D7BFF; --btn-hover:#5A8CFF;
  --btn-ink:#E6EAF0; --btn-ink-text:#0A0D14; --panel:#161C27; --panel-text:#E6EAF0;
  --coral:#FF6A3D; --cta:#1E3F8F; --nav-bg:rgba(10,13,20,0.85);
  --elev:#161C27; --ok:#22C55E; --warn:#F5B84C; --bad:#EF4444;
  --gridline:rgba(79,107,255,.045); --glow:rgba(79,107,255,.16); --glow-o:rgba(255,106,61,.10);
  --stripbg:rgba(17,22,32,.6); --lshadow:rgba(0,0,0,.55); --btnshadow:rgba(61,123,255,.35);
  --relb-border:rgba(255,106,61,.38); --relb-bg:rgba(255,106,61,.05);
  --fog1:rgba(10,13,20,0.82); --fog2:rgba(10,13,20,0.25); --fog3:rgba(10,13,20,0);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); min-height: 100vh; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
::selection { background: var(--accent); color: #fff; }
img, svg { display: block; }
h1, h2, h3 { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
input::placeholder { color: var(--faint); }

/* layout */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.eyebrow { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .14em; color: var(--accent); text-transform: uppercase; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.coral { color: var(--coral); }
.h2 { font-family: var(--display); font-weight: 700; font-size: clamp(25px, 5.2vw, 44px); letter-spacing: -.02em; }
.lead { font-size: 18px; line-height: 1.65; color: var(--muted); text-wrap: pretty; }
.fade-up { animation: fadeUp .7s ease both; }
.d1 { animation-delay: .08s; } .d2 { animation-delay: .16s; } .d3 { animation-delay: .24s; } .d4 { animation-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .fade-up { animation: none; } }

/* announcement bar */
.banner { background: #0A0D14; color: #E6EAF0; font-family: var(--mono); font-size: 12.5px;
  letter-spacing: .04em; text-align: center; padding: 9px 16px; }
.banner a { color: var(--coral); }

/* nav */
.nav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border); }
.nav__inner { height: 68px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand__logo { display: block; flex: none; }
.brand__name { font-family: var(--display); font-weight: 700; font-size: 21px; color: var(--ink); letter-spacing: -.02em; }
.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__link { font-size: 15px; font-weight: 500; color: var(--text); }
.nav__link:hover { color: var(--accent); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  background: none; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; color: var(--text); }
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }

/* buttons */
.btn { font-family: var(--sans); font-weight: 600; border-radius: 8px; cursor: pointer; border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: background .15s, color .15s, border-color .15s; }
.btn--sm { font-size: 14.5px; padding: 10px 20px; }
.btn--lg { font-size: 16px; padding: 15px 30px; border-radius: 10px; }
.btn--dark { color: var(--btn-ink-text); background: var(--btn-ink); }
.btn--dark:hover { background: var(--btn); color: #fff; }
.btn--primary { color: #fff; background: var(--btn); box-shadow: 0 8px 24px rgba(59,91,219,.28); }
.btn--primary:hover { background: var(--btn-hover); color: #fff; }
/* The estate-scanner call to action, in Source Orange #FF6A3D — the moodboard value, used
   LITERALLY and identically in both themes. It is deliberately not var(--coral): that token
   deepens to #F0561F in light for contrast on white, which is right for text but means a filled
   button would not be the moodboard colour. This one is, so it is defined once and never
   redefined under a theme.
   NO SHADOW, unlike .btn--primary. A glow around a saturated orange in a sticky, translucent nav
   smears into whatever scrolls behind it. The colour carries the emphasis on its own.
   The LABEL is white, to sit with every other filled button in the bar. Noted for the record:
   white on #FF6A3D measures 2.8:1, under the 4.5:1 AA threshold for 14.5px text — a deliberate
   call to keep the moodboard orange exact and the button consistent with its neighbours. The
   hover step deepens rather than lightens, for the same reason. */
.btn--flame { color: #fff; background: var(--source-orange); }
.btn--flame:hover { color: #fff; background: var(--source-orange-hover); }
.btn--ghost { color: var(--ink); background: var(--surface); border-color: var(--border); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn--white { color: #0E121B; background: #fff; }
.btn--white:hover { background: #E9EDF3; color: #0E121B; }
.btn--ghost-light { color: #fff; border-color: rgba(255,255,255,.4); }
.btn--ghost-light:hover { border-color: #fff; color: #fff; }
.btn--block { width: 100%; }

/* sections */
.section { border-bottom: 1px solid var(--border); }
.section--surface { background: var(--surface); }
.section--pad { padding: 96px 0; }

/* hero */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__fog { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, var(--fog1) 0%, var(--fog2) 60%, var(--fog3) 100%); }
.hero__inner { position: relative; max-width: 1180px; margin: 0 auto; padding: 110px 32px 120px; text-align: center; }
.hero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 8vw, 76px); line-height: 1.02; letter-spacing: -.03em;
  margin: 26px auto 0; max-width: 900px; text-wrap: balance; }
.hero__lead { font-size: 20px; line-height: 1.6; color: var(--muted); max-width: 640px; margin: 26px auto 0; text-wrap: pretty; }
.hero__cta { display: flex; gap: 14px; justify-content: center; margin-top: 38px; flex-wrap: wrap; }
.trust-line { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--faint); margin-top: 56px; }

/* silos row */
.silos { display: flex; align-items: center; gap: 0; margin-top: 56px; flex-wrap: wrap; }
.silo { flex: 1; min-width: 150px; background: var(--paper); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px 16px; text-align: center; }
.silo__k { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--faint); }
.silo__name { font-weight: 600; font-size: 16px; margin-top: 6px; }
.silo__x { width: 36px; border-top: 2px dashed var(--dim); position: relative; flex-shrink: 0; }
.silo__x span { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); color: var(--coral); font-size: 13px; font-weight: 700; }

/* workflow cards */
.cards3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 52px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 32px 28px; transition: border-color .15s; }
.card:hover { border-color: var(--accent); }
.card__k { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--coral); }
.card h3 { font-family: var(--display); font-weight: 700; font-size: 24px; margin: 12px 0 10px; }
.card p { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin: 0 0 20px; }
.card__list { display: flex; flex-direction: column; gap: 9px; font-family: var(--mono); font-size: 13px; color: var(--text); }
.card__list div { display: flex; gap: 8px; align-items: center; }
.card__list span { color: var(--accent); }

/* AI grade + trust */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.grade { display: flex; align-items: center; justify-content: center; gap: 36px; background: var(--paper);
  border: 1px solid var(--border); border-radius: 20px; padding: 56px 24px; }
.grade__n { font-family: var(--display); font-weight: 800; font-size: 110px; line-height: 1; }
.grade__lbl { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; margin-top: 10px; }
.trust3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.trust3 h3 { font-family: var(--display); font-weight: 700; font-size: 21px; margin: 0 0 8px; }
.trust3 p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }

/* CTA + footer */
.cta { background: var(--cta); color: #fff; }
.cta__inner { padding: 100px 32px; text-align: center; }
.cta h2 { font-family: var(--display); font-weight: 800; font-size: 52px; letter-spacing: -.02em; line-height: 1.08;
  margin: 0 auto; max-width: 760px; text-wrap: balance; }
.footer { background: var(--paper); }
.footer__inner { padding: 56px 32px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; }
.footer__copy { font-size: 13.5px; color: var(--faint); margin-left: 10px; }
.footer__links { display: flex; gap: 26px; font-size: 14px; }
.footer__links a { color: var(--muted); }
.footer__links a:hover { color: var(--accent); }

/* modal (login) */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(18,19,26,.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal__panel { background: var(--surface); border-radius: 18px; width: 400px; max-width: 100%; padding: 36px 34px;
  box-shadow: 0 24px 64px rgba(0,0,0,.35); animation: fadeUp .25s ease both; }
.modal__head { display: flex; align-items: center; justify-content: space-between; }
.modal__close { background: none; border: none; font-size: 20px; color: var(--faint); cursor: pointer; padding: 4px; line-height: 1; }
.modal__close:hover { color: var(--ink); }
.modal h2 { font-family: var(--display); font-weight: 700; font-size: 24px; margin: 18px 0 4px; }
.modal__sub { font-size: 14.5px; color: var(--muted); margin: 0 0 24px; }
.oauth { display: flex; flex-direction: column; gap: 10px; }
.oauth-btn { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--sans);
  font-size: 14.5px; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--border);
  border-radius: 9px; padding: 12px; cursor: pointer; transition: border-color .15s; }
.oauth-btn:hover { border-color: var(--ink); }
.divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.divider span { font-size: 12.5px; color: var(--faint); }
.field { display: flex; flex-direction: column; gap: 10px; }
.field input { font-family: var(--sans); font-size: 14.5px; border: 1px solid var(--border); border-radius: 9px;
  padding: 12px 14px; background: var(--paper); color: var(--ink); outline: none; }
.field input:focus { border-color: var(--accent); }
.form-note { font-size: 13.5px; color: var(--muted); text-align: center; margin: 18px 0 0; }
.form-err { font-size: 13.5px; color: var(--coral); margin: 12px 0 0; text-align: center; min-height: 0; }
.signing { text-align: center; padding: 28px 0 12px; font-family: var(--mono); font-size: 13px; color: var(--accent); }

/* pricing */
.tiers { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 56px; align-items: stretch; }
.tier { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 34px 30px; position: relative; display: flex; flex-direction: column; }
/* Equal-height cards (align-items:stretch): the CTA pins to the same bottom line in every card. */
.tier .btn--block { margin-top: auto; }
.tier--pro { border-color: var(--accent); box-shadow: 0 12px 40px rgba(59,91,219,.14); }
.tier__flag { position: absolute; top: -12px; left: 30px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  background: var(--accent); color: #fff; border-radius: 6px; padding: 4px 10px; }
.tier__name { font-family: var(--display); font-weight: 700; font-size: 23px; }
.tier__for { font-size: 14.5px; color: var(--muted); margin: 6px 0 20px; min-height: 40px; }
.tier__price { font-family: var(--display); font-weight: 800; font-size: 44px; letter-spacing: -.02em; }
.tier__price small { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--muted); }
.flist { list-style: none; margin: 24px 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.flist li { position: relative; padding-left: 23px; font-size: 14.5px; line-height: 1.45; color: var(--text); }
.flist li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; }
.flist li.off { color: var(--faint); }
.flist li.off::before { content: "—"; color: var(--dim); }
/* Price footnote: sits under the figure, so no min-height reserving an empty box. */
.tier__note { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 8px 0 0; }
.tier__flag--wide { letter-spacing: .06em; padding: 4px 9px; }
.faqs { max-width: 780px; margin: 0 auto; }
.faq { border-bottom: 1px solid var(--border); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; cursor: pointer;
  font-size: 17px; font-weight: 600; color: var(--ink); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 22px; flex-shrink: 0; }
.faq[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--accent); }
.faq p { font-size: 15.5px; line-height: 1.7; color: var(--muted); margin: 0; padding: 0 32px 22px 0; }

/* docs */
.docs { display: grid; grid-template-columns: 240px 1fr; gap: 56px; padding: 48px 0 96px; align-items: start; }
.docs-nav { position: sticky; top: 92px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.docs-nav .grp { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--faint); margin: 18px 0 6px; }
.docs-nav a { color: var(--text); padding: 4px 0; }
.docs-nav a:hover, .docs-nav a.on { color: var(--accent); }
.docs-body { max-width: 720px; }
.docs-body h1 { font-family: var(--display); font-weight: 800; font-size: 40px; letter-spacing: -.02em; margin: 6px 0 0; }
.docs-body h2 { font-family: var(--display); font-weight: 700; font-size: 24px; margin: 40px 0 12px; }
.docs-body p { font-size: 16px; line-height: 1.7; color: var(--text); }
.code { background: var(--panel); color: var(--panel-text); border-radius: 12px; padding: 18px 20px; overflow-x: auto;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.7; margin: 16px 0; }
.code .c { color: #7FE0B0; } .code .k { color: #6B9BFF; }
.callout { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 16px 20px; margin: 24px 0; font-size: 14.5px; line-height: 1.65; color: var(--text); }

/* resources */
.res-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 48px; }
.res-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 26px 24px; transition: border-color .15s, transform .15s; }
.res-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.res-card__tag { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; }
.res-card h3 { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.25; margin: 12px 0 10px; text-wrap: pretty; }
.res-card p { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; }
.res-card__meta { margin-top: auto; font-family: var(--mono); font-size: 12px; color: var(--faint); }

/* signup */
.signup { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding: 72px 0 96px; align-items: center; }
.signup__card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 40px 38px; }
.signup__benefits { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.signup__benefits li { display: flex; gap: 12px; font-size: 15.5px; color: var(--text); list-style: none; }
.signup__benefits li::before { content: "✓"; color: var(--accent); font-weight: 700; }

/* responsive */
@media (max-width: 900px) {
  .cta h2 { font-size: clamp(24px, 5.4vw, 38px); }
  .cards3, .tiers, .res-grid, .trust3 { grid-template-columns: 1fr; }
  .split, .signup, .docs { grid-template-columns: 1fr; gap: 40px; }
  .docs-nav { position: static; }
  .nav__links { gap: 16px; } .nav__links .nav__link { display: none; }
  /* Four controls do not fit a phone-width bar. The scanner button steps out here rather
     than squeezing the others; the closing call to action carries it on narrow screens,
     which is why that button exists as well as this one. */
  .nav__links .btn--flame { display: none; }
}

/* login pop-up: 2FA / enrollment panes */
.form-err { color: #ff5a5a; font-size: 13px; min-height: 18px; margin: 8px 0 0; }
.codein { text-align: center; font-size: 20px; letter-spacing: .35em; font-family: var(--mono, ui-monospace, monospace); }
.qrbox { display: flex; justify-content: center; margin: 14px 0 6px; }
.qrbox svg { border-radius: 10px; background: #fff; padding: 6px; width: 172px; height: 172px; }
.backupcodes { font-family: var(--mono, ui-monospace, monospace); font-size: 14px; line-height: 1.9;
  background: var(--surface-2, rgba(127,127,127,.08)); border: 1px dashed var(--line, #8884);
  border-radius: 10px; padding: 14px 18px; user-select: all; column-count: 2; }


/* ==================== landing (index) — the knowledge-web page ==================== */
/* Faithful implementation of the approved 2026-07 mockups, dark AND light, driven
   entirely by the theme tokens above. No entry animations: the old hero was invisible
   until a fadeUp ran, so crawlers and no-JS visitors got an empty page. */
.lp-hud{position:relative}
.lp-hud::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  repeating-linear-gradient(0deg,transparent 0 47px,var(--gridline) 47px 48px),
  repeating-linear-gradient(90deg,transparent 0 47px,var(--gridline) 47px 48px)}
.lp-eyebrow{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--coral);display:inline-flex;align-items:center;gap:10px}
.lp-eyebrow::before{content:"";width:22px;height:1px;background:var(--coral)}
.lp-em{color:var(--coral)}
.lp-sub{color:var(--muted);font-size:17.5px;line-height:1.6;max-width:56ch}
.lp-mono{font-family:var(--mono)}

.lp-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.lp-hero::after{content:"";position:absolute;top:-340px;right:-180px;width:900px;height:900px;
  pointer-events:none;background:radial-gradient(closest-side,var(--glow),transparent 70%)}
.lp-hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
  padding:96px 0 84px;position:relative;z-index:1}
.lp-h1{font-family:var(--display);font-size:clamp(30px, 7.6vw, 64px);line-height:1.04;font-weight:800;
  letter-spacing:-.03em;margin:22px 0 20px;text-wrap:balance;color:var(--ink)}
.lp-ctas{display:flex;gap:14px;margin-top:34px}
.lp-note{margin-top:18px;font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--faint)}
.lp-note b{color:var(--ok);font-weight:600}

.lp-graph{position:relative}
.lp-graph svg{width:100%;height:auto;display:block}
.lp-nlab{font-family:var(--mono);font-size:11px;font-weight:600;fill:var(--muted);letter-spacing:.08em}
.lp-elab{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.06em;fill:var(--coral)}
.lp-gedges{stroke:var(--accent)} .lp-gedge-o{stroke:var(--coral)}
.lp-gnode{fill:var(--surface);stroke:var(--accent)} .lp-gnode--o{stroke:var(--coral)}
.lp-gdots{fill:var(--accent)} .lp-gdot-o{fill:var(--coral)} .lp-nlab--o{fill:var(--coral)}
/* Anchored over the top-left "docs" node. The SVG scales fluidly, so the card is
   positioned in PERCENTAGES of the graph box rather than pixels — the node sits at
   (138,96) in a 520x420 viewBox, i.e. 26.5% / 22.9%, and the card is nudged up and
   left so its body covers the node rather than starting at it. A pixel offset would
   drift away from the node at every viewport width. */
.lp-ev{position:absolute;left:var(--evx,6%);top:var(--evy,14%);bottom:auto;width:330px;max-width:88%;
  /* An illustration, not a control surface: nothing here is clickable. */
  pointer-events:none;
  opacity:0;visibility:hidden;transform:translateY(8px) scale(.985);
  transition:opacity .55s ease,transform .55s ease,visibility 0s linear .55s;
  background:var(--elev);
  border:1px solid var(--border);border-radius:14px;padding:18px 18px 16px;
  box-shadow:0 24px 60px var(--lshadow)}
.lp-evs{position:absolute;inset:0;pointer-events:none}
.lp-ev.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .55s ease,transform .55s ease,visibility 0s}
/* Reduced motion: no cross-fade and no rotation (the script also stops), so the first
   finding simply stays put rather than flashing through six. */
@media (prefers-reduced-motion:reduce){.lp-ev{transition:none}}
.lp-ev-eyebrow{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--accent-hover)}
.lp-ev-path{display:flex;align-items:center;gap:8px;margin:10px 0 8px;
  font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.lp-ev-path .lp-rel{color:var(--coral)}
.lp-ev h3{font-family:var(--display);font-size:16.5px;line-height:1.3;font-weight:700;
  letter-spacing:-.01em;margin:0;color:var(--ink)}
.lp-ev-meta{display:flex;gap:14px;margin:9px 0 14px;font-family:var(--mono);font-size:12px}
.lp-ev-meta .lp-conf{color:var(--ok)} .lp-ev-meta .lp-imp{color:var(--warn)}
.lp-ev-meta .lp-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:6px}
.lp-ev-btns{display:flex;gap:10px}
.lp-ev-btns .btn{padding:9px 16px;font-size:12.5px;border-radius:8px}
/* Demo props. Real <button>s so they focus, hover and depress like the genuine
   article, with no href to follow and no handler behind them. */
.lp-ev-btns .btn[data-demo-noop]{cursor:pointer}
.lp-ev-btns .btn[data-demo-noop]:active{transform:translateY(1px)}

.lp-stats{border-top:1px solid var(--border);background:var(--stripbg)}
.lp-stats-in{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:18px 0;font-family:var(--mono);font-size:12.5px;color:var(--faint);
  letter-spacing:.04em;flex-wrap:wrap}
.lp-stats b{color:var(--ink);font-weight:600}
.lp-stats .lp-strip-lbl{color:var(--coral);letter-spacing:.18em}

.lp-sec{padding:104px 0;border-bottom:1px solid var(--border);position:relative}
.lp-h2{font-family:var(--display);font-size:clamp(25px, 5.1vw, 42px);font-weight:800;line-height:1.1;
  letter-spacing:-.03em;margin:18px 0 16px;text-wrap:balance;color:var(--ink)}
.lp-lead{color:var(--muted);max-width:62ch;font-size:16.5px;line-height:1.6}

.lp-silos{display:flex;gap:14px;margin-top:44px;flex-wrap:wrap}
.lp-silo{flex:1;min-width:150px;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:18px 16px;text-align:center}
.lp-silo b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.lp-silo span{font-family:var(--mono);font-size:10.5px;color:var(--faint);letter-spacing:.06em}
.lp-silo--x{border-style:dashed}
.lp-silo--x b{color:var(--faint)}

.lp-moat{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.lp-checks{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:13px}
.lp-checks li{color:var(--muted);font-size:15.5px;padding-left:26px;position:relative}
.lp-checks li::before{content:"✓";color:var(--ok);font-weight:700;position:absolute;left:0}
.lp-checks b{color:var(--ink)}
.lp-page{background:var(--elev);border:1px solid var(--border);border-radius:14px;
  overflow:hidden;box-shadow:0 30px 80px var(--lshadow)}
.lp-pc-head{display:flex;justify-content:space-between;gap:10px;padding:11px 16px;
  border-bottom:1px solid var(--border);font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.lp-pc-badge{color:var(--coral)}
.lp-pc-body{padding:22px 24px 20px}
.lp-pc-body h4{font-family:var(--display);font-size:17px;font-weight:700;
  letter-spacing:-.01em;margin:0 0 14px;color:var(--ink)}
.lp-skel{height:9px;border-radius:5px;background:var(--border);opacity:.5;margin:10px 0}
.lp-relbox{margin-top:20px;border:1px solid var(--relb-border);background:var(--relb-bg);
  border-radius:10px;padding:14px 16px}
.lp-relbox b{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;color:var(--coral);margin-bottom:8px}
.lp-relbox a{display:block;font-size:13.5px;font-weight:500;padding:3px 0}
.lp-pc-foot{padding:10px 16px;border-top:1px solid var(--border);
  font-family:var(--mono);font-size:11.5px;color:var(--faint)}

.lp-pipe{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.lp-pcard{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:26px 24px}
.lp-pcard .lp-step{font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.18em;color:var(--accent-hover)}
.lp-pcard h3{font-family:var(--display);font-size:19px;font-weight:700;
  letter-spacing:-.02em;margin:12px 0 8px;color:var(--ink)}
.lp-pcard p{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0}
.lp-pcard .lp-g{height:2px;width:34px;background:var(--accent);margin-top:20px;border-radius:2px}
.lp-pcard:last-child .lp-g{background:var(--coral)}

.lp-ff{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:48px}
.lp-ffcard{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:26px 24px}
.lp-ffcard h3{font-family:var(--display);font-size:20px;font-weight:700;
  letter-spacing:-.02em;margin:10px 0 8px;color:var(--ink)}
.lp-ffcard>p{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0}
.lp-ff-eyebrow{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.18em}
.lp-ffex{margin-top:18px;background:var(--elev);border:1px solid var(--border);
  border-radius:10px;padding:14px 16px;display:grid;gap:7px}
.lp-ffex .lp-q{font-size:14px;font-weight:500;color:var(--ink)}
.lp-ffex .lp-cq{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.lp-ffex .lp-meta{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:3px}

.lp-graded{display:grid;grid-template-columns:1fr .9fr;gap:60px;align-items:center}
.lp-dial-wrap{display:flex;gap:34px;align-items:center;justify-content:center}
.lp-dial{width:190px;height:190px;border-radius:50%;
  background:conic-gradient(var(--ok) 0 309deg,var(--border) 309deg 360deg);
  display:grid;place-items:center;position:relative}
.lp-dial::before{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--elev)}
.lp-dial-c{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px}
.lp-dial b{font-family:var(--display);font-size:44px;font-weight:800;letter-spacing:-.03em;
  line-height:1;color:var(--ink)}
.lp-dial span{font-family:var(--mono);font-size:10.5px;color:var(--faint);letter-spacing:.14em}
.lp-chips{display:grid;gap:12px}
.lp-chip{display:flex;align-items:center;gap:11px;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;padding:12px 16px;
  font-size:13.5px;font-weight:500;color:var(--muted)}
.lp-chip .lp-n{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--ink);
  min-width:30px;text-align:right}
.lp-chip .lp-k{width:8px;height:8px;border-radius:50%;flex:none}

.lp-prin{padding:56px 0;border-bottom:1px solid var(--border);background:var(--stripbg)}
.lp-prin-in{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.lp-pr{font-size:14px;font-weight:600;color:var(--ink)}
.lp-pr::before{content:"◆ ";color:var(--coral);font-size:9px}
.lp-pr span{display:block;color:var(--faint);font-weight:500;font-size:12.5px;margin-top:3px}

.lp-cta{text-align:center;padding:120px 0;position:relative}
.lp-cta::after{content:"";position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);
  width:760px;height:560px;pointer-events:none;
  background:radial-gradient(closest-side,var(--glow-o),transparent 70%)}
.lp-cta .lp-h2{font-size:52px;max-width:19ch;margin:20px auto 18px}
.lp-cta .lp-sub{margin:0 auto 36px}
.lp-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}

@media (max-width:980px){
  .lp-hero-in,.lp-moat,.lp-graded{grid-template-columns:1fr;gap:40px}
  .lp-cta .lp-h2{font-size:clamp(24px, 5.5vw, 36px)}
  .lp-pipe,.lp-ff{grid-template-columns:1fr}
  .lp-prin-in{grid-template-columns:1fr 1fr;gap:18px}
  .lp-evs{position:static;inset:auto}
   .lp-ev{position:static;width:auto;margin-top:18px}
   .lp-ev:not(.is-on){display:none}
  .lp-stats-in{justify-content:flex-start;gap:10px 22px}
}

/* ---- long-form article pages (Resources) ---- */
.post{padding-top:8px}
.post .lp-h2{max-width:22ch;font-size:clamp(26px, 5.8vw, 40px)}
.post h2,.post h3{font-family:var(--display);font-size:22px;font-weight:700;line-height:1.25;
  color:var(--ink);margin:34px 0 12px;max-width:34ch}
.post p{color:var(--muted);font-size:16.5px;line-height:1.72;margin:0 0 18px;max-width:68ch}
.post p.lp-lead{color:var(--ink);font-size:19px;line-height:1.6;margin-bottom:28px}
.post p b{color:var(--ink);font-weight:650}
.post p i{color:var(--ink)}
.post a{color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.post a:hover{border-bottom-color:var(--accent)}
.post code{font-family:var(--mono);font-size:13.5px;color:var(--ink);
  background:var(--surface-2,rgba(127,127,127,.10));border-radius:4px;padding:1px 5px}
.post .lp-note{max-width:68ch;border-top:1px solid var(--dim);padding-top:16px}
.post .lp-note a{color:var(--faint);border-bottom-color:var(--dim)}
@media (max-width:980px){ .post p.lp-lead{font-size:17px} }
.post q{color:var(--ink);font-style:italic}

/* ---- not-yet-open controls (self-serve sign-up, federated login) ---- */
.oauth-btn:disabled { opacity: .45; cursor: not-allowed; }
.oauth-btn:disabled:hover { border-color: var(--border); }
.oauth-soon-note { font-size: 12.5px; color: var(--faint); text-align: center; margin: 10px 0 0; }

/* The card is the positioning context for the diagonal ribbon, and clips it to the corner. */
.signup__card.is-soon { position: relative; overflow: hidden; }
.soon-lock { border: 0; padding: 0; margin: 0; min-width: 0; opacity: .5; filter: saturate(.35); }
.soon-lock :disabled { cursor: not-allowed; }
.soon-lock input:disabled { background: var(--elev); color: var(--faint); }
.soon-note { margin-top: 18px; text-align: center; }

/* Ribbon: 190px wide on the diagonal, offset so its ends tuck under the clipped corner. */
.soon-ribbon { position: absolute; top: 0; right: 0; width: 150px; height: 150px;
  pointer-events: none; z-index: 2; }
.soon-ribbon span { position: absolute; display: block; width: 210px; padding: 7px 0;
  top: 34px; right: -52px; transform: rotate(45deg);
  background: var(--coral); color: #fff; text-align: center;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; box-shadow: 0 6px 18px rgba(0,0,0,.22); }
@media (max-width: 720px) {
  .soon-ribbon { width: 120px; height: 120px; }
  .soon-ribbon span { width: 180px; top: 26px; right: -50px; font-size: 10.5px; }
}

/* A control that is deliberately unavailable has to look unavailable. Without this the Log in
   button looks identical to a working one and simply fails to respond, which reads as a bug. */
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }
/* THE DISABLED LOGIN BUTTON IS THE ONE EXCEPTION, and it has to be, because `pointer-events:
   none` above means a disabled control fires NO mouse events at all — mouseenter included. The
   hover label swap simply would not run. Pointer events come back for this button only; the
   `not-allowed` cursor and the click-doing-nothing are what still say "unavailable".
   Colour is held deliberately: .btn--dark:hover turns the button Signal Blue, which on a control
   that cannot be used would promise something. Grey in, grey out — only the word changes. */
.btn--dark[disabled] { pointer-events: auto; }
.btn--dark[disabled]:hover { background: var(--btn-ink); color: var(--btn-ink-text); }

/* The closing note is a markdown blockquote now — same role as the old .lp-note, expressed in
   markup an author can actually type. */
.post blockquote{margin:34px 0 0;padding:16px 0 0;border-top:1px solid var(--dim);max-width:68ch}
.post blockquote p{font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--faint);margin:0}
.post blockquote a{color:var(--faint);border-bottom-color:var(--dim)}

/* ---- contact form ---- */
.cform{display:flex;flex-direction:column;gap:18px;margin-top:34px}
.cfield{display:flex;flex-direction:column;gap:7px}
.cfield>span{font-size:14px;font-weight:600;color:var(--ink)}
.cfield small{font-size:12.5px;color:var(--faint)}
.cform textarea.field__in{resize:vertical;min-height:130px;font-family:inherit;line-height:1.55}
/* Honeypot: off-canvas rather than display:none, because some bots skip hidden fields but
   almost none skip positioned ones. Never reachable by keyboard or screen reader. */
.cpot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform__msg{margin:0;font-size:14px;line-height:1.5;min-height:1.2em}
.cform__msg--ok{color:var(--ok)}
.cform__msg--no{color:var(--bad)}
.cform button[disabled]{opacity:.6;cursor:progress}

/* ---- Contact page -------------------------------------------------------------------------
   A form is the one page where the visitor does the work, so the layout gives the form the
   wider column and puts everything reassuring beside it rather than buried underneath. The
   previous version was a 640px centre column: six identical boxes stacked with nothing around
   them, which is why it read as a support queue rather than a way to reach people. */
.cx{position:relative;overflow:hidden}
/* The faint grid + glow the landing page uses, so Contact belongs to the same surface instead
   of being a bare white sheet at the end of the journey. */
.cx::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(var(--gridline) 1px,transparent 1px) 0 0/100% 64px,
             radial-gradient(60% 46% at 78% 8%,var(--glow),transparent 70%)}
.cx__grid{position:relative;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:56px;align-items:start;max-width:1080px}
.cx__h{margin:14px 0 0;max-width:15ch}
.cx__lead{margin:16px 0 0;max-width:52ch}
.cx__form{margin-top:30px;gap:16px}
.cx__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cx__hint{margin:-4px 0 0;font-size:12.5px;color:var(--faint)}
.cx__hint a{color:var(--muted)}

/* Inputs get a visible focus ring in the accent, not the browser default — on a dark ground the
   UA outline is nearly invisible, and this is the page where losing your place costs a message. */
.cx__form .field__in{background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:11px 13px;font-size:14.5px;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.cx__form .field__in::placeholder{color:var(--dim)}
.cx__form .field__in:hover{border-color:var(--dim)}
.cx__form .field__in:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.cx__form .field__in:user-invalid{border-color:var(--bad)}

/* The widget needs a labelled home. Unlabelled it appears late and reads as a glitch; when it
   fails to load it used to leave a stray "Troubleshoot" link floating with nothing to explain it. */
.cx__verify{display:flex;flex-direction:column;gap:9px;padding:14px;border-radius:12px;
  border:1px dashed var(--border);background:var(--elev)}
.cx__verify-lbl{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint)}
.cx__verify .cf-turnstile{min-height:65px}
.cx__send{padding:14px;font-size:15px}
.cx__note{text-align:left;margin-top:6px;font-size:12.5px}

/* Right column: the dark panel is the landing page's own device for "this is the considered
   part", reused here so the answer to "what happens if I send this" is visible while typing. */
.cx__aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px}
.cx__panel{background:var(--panel);color:var(--panel-text);border-radius:16px;padding:28px 26px;
  border:1px solid transparent}
html[data-theme="dark"] .cx__panel{border-color:var(--border)}
.cx__panel-eyebrow{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--coral)}
.cx__steps{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:20px}
.cx__steps li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.cx__steps b{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--coral);
  padding-top:3px}
.cx__steps h3{font-family:var(--display);font-size:15px;font-weight:700;margin:0 0 5px;
  color:var(--panel-text)}
.cx__steps p{margin:0;font-size:13.5px;line-height:1.6;color:var(--dim)}
html[data-theme="dark"] .cx__steps p{color:var(--muted)}

/* Same coral relationship box the landing page uses for a link Kenaptic DISCOVERED between two
   silos. Reused deliberately: the other routes to us are exactly that shape. */
.cx__rel{border:1px solid var(--relb-border);background:var(--relb-bg);border-radius:12px;
  padding:16px 18px}
.cx__rel b{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--coral);margin-bottom:8px}
.cx__rel a{display:block;font-size:13.5px;font-weight:500;padding:4px 0;color:var(--text);
  text-decoration:none}
.cx__rel a:hover{color:var(--accent)}

@media (max-width:900px){
  .cx__grid{grid-template-columns:1fr;gap:36px}
  /* Sticky is worse than useless once the panel is below the form — it would pin the wrong
     thing to the viewport while the visitor is typing above it. */
  .cx__aside{position:static}
  .cx__h{max-width:none}
}
@media (max-width:560px){
  .cx__row{grid-template-columns:1fr}
}
.cf-turnstile{min-height:65px}


/* =============================================================================================
   PHONES. The site had breakpoints at 980/900/720/560, but the landing page's smallest was 980 —
   so a 375px phone rendered a layout designed for a tablet. Headings are fluid now (clamp above);
   what remains here is spacing, column collapse and touch ergonomics.
   ============================================================================================= */
@media (max-width: 640px) {
  /* 32px of gutter on each side removes 17% of a 375px screen before a word is set. */
  .wrap { padding: 0 20px; }

  /* Vertical rhythm scaled to the viewport. 96px of section padding is a third of a phone
     screen spent on nothing, and it makes the page feel empty rather than spacious. */
  .section--pad { padding: 56px 0; }
  .hero__inner { padding: 64px 20px 72px; }

  /* Four principles at two-up is two words per line. One column, always. */
  .lp-prin-in { grid-template-columns: 1fr; gap: 22px; }

  /* Wrap rather than squeeze: these strips overflowed horizontally, which is most of what
     "things do not align" looks like in practice. */
  .lp-stats-in { flex-wrap: wrap; row-gap: 8px; }
  .lp-cta-btns { flex-direction: column; align-items: stretch; }
  .lp-cta-btns .btn { width: 100%; }
  .lp-ctas { flex-wrap: wrap; }

  /* TOUCH TARGETS. .btn--sm computed to ~40px tall; the platform guidance is 44. Applies to the
     nav buttons a phone user is most likely to be aiming at with a thumb. */
  .btn--sm { min-height: 44px; padding: 11px 18px; }
  .icon-btn { width: 44px; height: 44px; }

  /* A long URL or an unbroken token in prose pushes the whole page sideways; nothing else on the
     page can shrink to compensate. */
  .post p, .post li, .lead, .lp-sub { overflow-wrap: anywhere; }

  /* Body copy is set for a wide column; on a phone it wants to be a touch smaller and tighter. */
  .lead { font-size: 16.5px; }
  .post p { font-size: 16px; }
}

@media (max-width: 400px) {
  .wrap { padding: 0 16px; }
  .brand__name { font-size: 19px; }
  /* Two small buttons plus a theme toggle do not fit beside the wordmark at 375px. */
  .nav__links { gap: 12px; }
}

/* iOS inflates font sizes in landscape unless told not to; the result is a layout that is
   correct in portrait and broken when the phone turns. */
html { -webkit-text-size-adjust: 100%; }

/* A tap should not leave a grey box behind on iOS. */
a, button { -webkit-tap-highlight-color: transparent; }

/* Grid and flex children default to min-width:auto, so a wide child (a code block, a long
   heading, an SVG) refuses to shrink and pushes its parent past the viewport. This is the single
   most common cause of a page that scrolls sideways on a phone. */
.lp-hero-in > *, .split > *, .signup > *, .docs > *, .lp-moat > *, .lp-graded > * { min-width: 0; }