/* ============================================================================
   llm.kezu.co — public site layer (marketing + pricing)
   ----------------------------------------------------------------------------
   Surfaces: DECIDE/LEARN for home & about (so a hero IS correct here), and
   COMPARE for pricing (aligned numeric columns, parity of structure).

   Visual language deliberately extends the console's tokens from app.css, so the
   product and the site feel like one thing rather than a marketing skin bolted
   onto an app. Restraint over decoration:
     - no gradients, no glassmorphism, no icon-topper tiles, no emoji
     - one accent, used for links / focus / active only
     - depth comes from 1px hairlines and spacing, not shadows
     - numbers get tabular figures and right alignment
   The one strong visual anchor is a dark code sample — appropriate for an API
   product and it gives the hero a focal point without decorating it.
   ========================================================================== */

/* ------------------------------------------------------------- code tokens -- */
:root {
  --code-bg:   #0e1014;
  --code-bar:  #171a20;
  --code-line: #262b34;
  --code-fg:   #d7dae1;
  --code-com:  #6d747f;
  --code-key:  #8ab4f8;
  --code-str:  #7ddcb0;
  --code-num:  #f0b775;
  --code-fn:   #C08FD8;
  --code-dim:  #9aa1ac;
}

/* ------------------------------------------------------------------ shell --- */
.mk { overflow-x: hidden; }
.mk-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.mk-narrow { max-width: 760px; }

.pub-head {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.pub-head-in {
  display: flex; align-items: center; gap: 20px;
  max-width: 1100px; margin: 0 auto; padding: 0 24px; height: 60px;
}
.pub-brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 15px; letter-spacing: -0.012em;
  color: var(--fg); text-decoration: none;
}
.pub-brand:hover { text-decoration: none; }
.pub-brand .dot {
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--btn); color: var(--btn-fg);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: 0;
}
.pub-nav { display: flex; align-items: center; gap: 2px; }
.pub-nav a {
  padding: 6px 11px; border-radius: var(--r-sm);
  color: var(--fg-2); font-size: 13.5px; font-weight: 500;
}
.pub-nav a:hover { background: var(--sunken); color: var(--fg); text-decoration: none; }
.pub-nav a.active { color: var(--fg); font-weight: 600; }
.pub-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.pub-toggle { display: none; }

/* ------------------------------------------------------------------- hero --- */
.hero { padding: 78px 0 64px; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 56px; align-items: center;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); margin-bottom: 22px;
}
/* The eyebrow dot is DECORATION — a bullet before "Pricing" / "About kezu", not a status
   light. It used to take --ok (status green) with a glow, which read as "operational" next
   to a section label and put a second hue in a view the system reserves for ONE chromatic
   element. It is neutral now, and --ok stays reserved for real status (.pill.ok, .alert.ok,
   .st.ok, .copied). */
.hero-eyebrow .live {
  width: 6px; height: 6px; border-radius: 50%; background: var(--fog);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fog) 18%, transparent);
}
.hero h1 {
  font-size: clamp(34px, 4.6vw, 52px); line-height: 1.04;
  letter-spacing: -0.028em; font-weight: 600; margin: 0 0 18px;
  text-wrap: balance;
}
.hero-lead {
  font-size: 17px; line-height: 1.6; color: var(--fg-2);
  max-width: 30em; margin: 0 0 26px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hero-note {
  margin-top: 18px; font-size: 13px; color: var(--muted);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.hero-note .sep { color: var(--line); }

/* ------------------------------------------------------------------ facts --- */
.facts {
  display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); overflow: hidden;
}
.facts > div {
  flex: 1 1 150px; padding: 14px 18px;
  border-right: 1px solid var(--line-soft);
}
.facts > div:last-child { border-right: 0; }
.facts dt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 5px;
}
.facts dd {
  margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.008em;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- sections --- */
/* Scoped to section.sec: `class="sec"` is ALSO a button variant (.btn.sec), and
   section.sec outranks .btn, so an unscoped rule put 62px 0 of section padding on
   secondary buttons (147px tall instead of 41px, and no horizontal padding). */
section.sec { padding: 62px 0; border-top: 1px solid var(--line-soft); }
section.sec:first-of-type { border-top: 0; }
section.sec-alt { background: var(--sunken); border-top: 1px solid var(--line-soft); }
.sec-head { max-width: 640px; margin-bottom: 30px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
section.sec h2 {
  font-size: clamp(23px, 2.9vw, 32px); line-height: 1.15;
  letter-spacing: -0.022em; font-weight: 600; margin: 0 0 12px;
  text-wrap: balance;
}
.sec-sub { font-size: 15.5px; line-height: 1.6; color: var(--fg-2); margin: 0; }
section.sec h3 {
  font-size: 16px; letter-spacing: -0.01em; font-weight: 600; margin: 0 0 7px;
}
section.sec p { color: var(--fg-2); }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.grid-2.asym { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }

.panel {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: 24px;
}
.panel.plain { background: transparent; }

/* Upright list with real hierarchy — replaces the icon-tile grid. */
.defs { display: grid; gap: 20px; margin: 0; }
.defs > div { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; }
.defs .n {
  font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--muted);
  padding-top: 3px;
}
.defs h3 { margin-bottom: 5px; }
.defs p { margin: 0; font-size: 14.5px; line-height: 1.6; }

/* ------------------------------------------------------------------ code ---- */
.codeblock {
  border: 1px solid var(--code-line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--code-bg);
  box-shadow: 0 1px 2px rgba(10,12,16,.16), 0 12px 32px -12px rgba(10,12,16,.28);
}
.codeblock-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; background: var(--code-bar);
  border-bottom: 1px solid var(--code-line);
}
.codeblock-bar .d {
  width: 9px; height: 9px; border-radius: 50%; background: #3a4049; flex: none;
}
.codeblock-name {
  font-family: var(--mono); font-size: 11.5px; color: var(--code-dim);
  margin-left: 4px;
}
.codeblock-copy {
  margin-left: auto; font-family: var(--mono); font-size: 11px;
  color: var(--code-dim); background: transparent; cursor: pointer;
  border: 1px solid var(--code-line); border-radius: 5px;
  padding: 3px 9px; transition: color .12s, border-color .12s;
}
.codeblock-copy:hover { color: var(--code-fg); border-color: #454c58; }
.codeblock pre {
  margin: 0; padding: 16px 18px; overflow-x: auto;
  font-family: var(--mono); font-size: 12.6px; line-height: 1.72;
  color: var(--code-fg); tab-size: 2;
}
.codeblock code { font: inherit; }
.c-com { color: var(--code-com); }
.c-key { color: var(--code-key); }
.c-str { color: var(--code-str); }
.c-num { color: var(--code-num); }
.c-fn  { color: var(--code-fn); }
.c-dim { color: var(--code-dim); }

.tabs { display: flex; gap: 2px; margin-bottom: 0; }
.tabs button {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .01em;
  padding: 7px 13px; background: transparent; cursor: pointer;
  border: 1px solid transparent; border-bottom: 0;
  border-radius: var(--r-sm) var(--r-sm) 0 0; color: var(--muted);
}
.tabs button[aria-selected="true"] {
  background: var(--code-bg); border-color: var(--code-line);
  color: var(--code-fg);
}
.tabs + .codeblock { border-radius: 0 var(--r-lg) var(--r-lg) var(--r-lg); }

/* ----------------------------------------------------------------- tables --- */
/* COMPARE surface: aligned columns, parity of structure, one differentiator
   (cached input) emphasised. */
.rtable-wrap {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
}
.rtable-scroll { overflow-x: auto; }
table.rtable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.rtable th, table.rtable td {
  padding: 11px 16px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line-soft);
}
table.rtable thead th {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  background: var(--sunken); border-bottom: 1px solid var(--line);
}
table.rtable th:first-child, table.rtable td:first-child {
  text-align: left; white-space: normal;
}
table.rtable tbody tr:last-child td { border-bottom: 0; }
table.rtable tbody tr:hover td { background: var(--sunken); }
table.rtable td.num {
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12.8px;
}
table.rtable .mname { font-weight: 600; letter-spacing: -0.006em; }
table.rtable .mprov {
  display: block; font-family: var(--mono); font-size: 10.5px;
  color: var(--muted); font-weight: 400; margin-top: 2px;
}
td.hl { background: color-mix(in srgb, var(--accent) 5%, transparent); }
thead th.hl { color: var(--accent); }
.rtable-foot {
  padding: 11px 16px; border-top: 1px solid var(--line);
  background: var(--sunken); font-size: 12.5px; color: var(--muted);
}

/* ---------------------------------------------------------------- pricing --- */
/* Flex + max-width rather than a fixed 2-column grid: with one live plan a 2-col grid
   renders a half-width card beside an empty hole, which reads as unfinished. This
   centres 1, 2 or 3 plans and keeps card width sane at any count. */
.plans { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; }
.plan {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: 26px;
  display: flex; flex-direction: column;
  flex: 1 1 340px; max-width: 460px; min-width: 0;
}
.plan.feature { border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg); }
.plan-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.plan-name { font-size: 15px; font-weight: 600; letter-spacing: -0.012em; }
.plan-price {
  font-size: 40px; font-weight: 600; letter-spacing: -0.03em; line-height: 1;
  margin: 16px 0 4px; font-variant-numeric: tabular-nums;
}
.plan-price .cur { font-size: 22px; vertical-align: 7px; margin-right: 2px; }
.plan-price .per { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan-get {
  font-size: 14px; color: var(--fg-2); margin: 0 0 20px;
}
.plan-get b { color: var(--fg); font-variant-numeric: tabular-nums; }
.plan hr { border: 0; border-top: 1px solid var(--line-soft); margin: 0 0 18px; }
.plan ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.plan li {
  font-size: 13.8px; color: var(--fg-2); padding-left: 22px; position: relative;
}
.plan li::before {
  content: ""; position: absolute; left: 4px; top: 7px;
  width: 8px; height: 4px; border-left: 1.6px solid var(--ok);
  border-bottom: 1.6px solid var(--ok); transform: rotate(-45deg);
}
.plan li b { color: var(--fg); }
.plan .btn { margin-top: auto; width: 100%; }

.credit {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 14px; padding: 18px 20px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--surface); margin-bottom: 26px;
}
.credit .side { text-align: center; }
.credit .side .lbl {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 5px;
}
.credit .side .val {
  font-size: 26px; font-weight: 600; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.credit .arrow { color: var(--faint); font-size: 18px; }

/* -------------------------------------------------------------------- faq --- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 34px 18px 0;
  font-size: 15px; font-weight: 600; letter-spacing: -0.008em;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%); font-weight: 400; font-size: 19px;
  color: var(--muted); font-family: var(--mono);
}
.faq details[open] summary::after { content: "−"; }
.faq .ans { padding: 0 40px 20px 0; color: var(--fg-2); font-size: 14.5px; line-height: 1.65; }
.faq .ans p:last-child { margin-bottom: 0; }
.faq .ans code {
  font-family: var(--mono); font-size: 12.6px; background: var(--sunken);
  border: 1px solid var(--line-soft); border-radius: 4px; padding: 1px 5px;
}

/* ------------------------------------------------------------------ steps --- */
.steps { counter-reset: s; display: grid; gap: 0; }
.step {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px;
  padding: 22px 0; border-bottom: 1px solid var(--line-soft);
}
.step:last-child { border-bottom: 0; }
.step-n {
  counter-increment: s; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line); display: grid; place-items: center;
  font-family: var(--mono); font-size: 11.5px; color: var(--fg-2);
  background: var(--surface);
}
.step-n::before { content: counter(s); }
.step h3 { margin-bottom: 6px; }
.step p { margin: 0 0 12px; font-size: 14.5px; }
.step p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------- footer --- */
.pub-foot {
  border-top: 1px solid var(--line); background: var(--surface);
  padding: 44px 0 34px; margin-top: 0;
}
.foot-cols {
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px;
  padding-bottom: 30px; border-bottom: 1px solid var(--line-soft);
}
.foot-col h4 {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 12px;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-col a { color: var(--fg-2); font-size: 13.5px; }
.foot-col a:hover { color: var(--fg); }
.foot-about p { font-size: 13.5px; color: var(--muted); margin: 12px 0 0; max-width: 30em; }
.foot-bottom {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding-top: 20px; font-size: 12.5px; color: var(--muted);
}
.foot-bottom .spacer { margin-left: auto; }
.foot-mono { font-family: var(--mono); font-size: 11.5px; }

/* ------------------------------------------------------------------- misc --- */
.anchor-h { position: relative; }
/* A neutral note. Deliberately NOT a coloured left rail: a coloured strip is
   decoration pretending to be organisation, and this is a plain aside. The bold lead
   word carries the emphasis instead. */
.note {
  border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  background: var(--sunken);
  padding: 13px 16px; font-size: 13.5px; color: var(--fg-2); margin: 0 0 20px;
}
.note strong { color: var(--fg); }
.ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.ul li { padding-left: 20px; position: relative; font-size: 14.4px; color: var(--fg-2); }
.ul li::before {
  content: ""; position: absolute; left: 3px; top: 8px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--line);
  box-shadow: inset 0 0 0 1px var(--faint);
}
.ul li b { color: var(--fg); }
.ul.tick li::before { display: none; }
.ul.tick li { padding-left: 23px; }
.ul.tick li::after {
  content: ""; position: absolute; left: 3px; top: 6px; width: 8px; height: 4px;
  border-left: 1.6px solid var(--ok); border-bottom: 1.6px solid var(--ok);
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------- responsive -- */
@media (max-width: 940px) {
  .hero { padding: 54px 0 48px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .grid-2, .grid-2.asym { grid-template-columns: minmax(0, 1fr); }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 26px; }
  .facts > div { flex-basis: 50%; }
}
@media (max-width: 720px) {
  /* Touch targets. The console's compact 30px buttons are right for a dense app, but
     on a phone the header actions need to be thumb-reachable (~44px is the guideline).
     Scoped to the public shell so the console keeps its density. */
  .pub-actions .btn, .pub-actions .btn.sm {
    min-height: 40px; padding: 10px 13px; font-size: 13px;
  }
  .pub-brand { min-height: 40px; align-items: center; }
  .pub-toggle { width: 40px; height: 40px; font-size: 16px; }
  .pub-head-in { gap: 10px; }
  .hero-cta .btn { min-height: 44px; padding: 12px 18px; font-size: 14.5px; width: 100%; }
  .hero-cta { gap: 8px; }
  .plan .btn, section.sec .btn { min-height: 44px; padding: 12px 18px; font-size: 14.5px; }
  .mk .step .foot-mono { word-break: break-all; }
  .pub-nav { display: none; }
  .pub-nav.open {
    display: flex; position: absolute; top: 60px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 8px; z-index: 61;
  }
  .pub-nav.open a { padding: 14px 12px; border-radius: var(--r-sm); }
  .pub-toggle {
    display: inline-grid; place-items: center; order: 2;
    width: 34px; height: 34px; border: 1px solid var(--line);
    border-radius: var(--r-sm); background: var(--surface); cursor: pointer;
    color: var(--fg-2); font-size: 15px;
  }
  .pub-actions { margin-left: auto; }
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
  section.sec { padding: 46px 0; }
  .grid-2 { gap: 20px; }
  .facts > div { flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .facts > div:last-child { border-bottom: 0; }
  .credit { grid-template-columns: 1fr; gap: 8px; }
  .credit .arrow { transform: rotate(90deg); }
  .foot-cols { grid-template-columns: 1fr; }
  .codeblock pre { font-size: 12px; padding: 14px; }
  .plan-price { font-size: 34px; }
  .plan { flex-basis: 100%; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mk * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------------------
   Override a console convention that would otherwise hijack this site.

   app.css styles every `h2` as a small uppercase section label (13px, uppercase,
   .07em tracking) because in a dense console tabular section headings should recede.
   On a marketing page an h2 IS the section heading, so it must be large, sentence-case
   and prominent. Scoped to .mk (the public shell) so the console keeps its convention.
   --------------------------------------------------------------------------- */
.mk h2 {
  font-size: clamp(23px, 2.9vw, 32px);
  font-weight: 600;
  letter-spacing: -0.022em;
  text-transform: none;
  color: var(--fg);
  margin: 0 0 12px;
}
.mk .sec-head h2 { margin-bottom: 12px; }
.mk .plan-name, .mk h3, .mk h4 { text-transform: none; }

/* Visible on focus only: keyboard users get it, mouse users never see it. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--btn); color: var(--btn-fg); padding: 10px 16px;
  border-radius: 0 0 var(--r-sm) 0; font-size: 13.5px; font-weight: 600;
}
.skip:focus { left: 0; text-decoration: none; }

/* ---------------------------------------------------------------------------
   The local --muted override that used to live here is GONE. It existed only
   because the console's palette had --muted at 4.49:1 and --faint at 2.63:1;
   those values are now fixed in app.css, so the public site inherits a correct
   palette instead of patching one. One source of truth for both audiences.
   --------------------------------------------------------------------------- */