/* ──────────────────────────────────────────────────────────────────────────
   kavak.run — marketing site
   Technical-paper palette, system type, no external assets.
   Brand colors remain aligned with mark.svg / favicon.svg.
   ────────────────────────────────────────────────────────────────────────── */

:root{
  --paper:#faf9f5;
  --paper-2:#f4f2ea;
  --ink:#1b1a16;
  --ink-2:#56544c;
  --ink-3:#6b695f;
  --rule:#e6e2d7;
  --rule-2:#d8d4c6;
  --control-rule:#948e7e;
  --leaf:#5c7f32;
  --leaf-ink:#466126;
  --leaf-soft:#e5eedb;
  --amber:#b8862a;
  --on-ink:#f2f0e9;
  --on-ink-2:rgba(242,240,233,.62);
  --hair-ink:rgba(242,240,233,.14);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,Arial,sans-serif;
  --mono:"SFMono-Regular","SF Mono",ui-monospace,"Cascadia Code",Menlo,Consolas,monospace;
  --shell:1160px;
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body,h1,h2,h3,p,ol,ul,dl,dd,figure{ margin:0 }
ol,ul{ padding:0 }
body{
  min-width:320px;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100% }
a{ color:var(--leaf-ink); text-decoration-thickness:1px; text-underline-offset:3px }
a:not(:hover){ text-decoration:none }
button,a{ -webkit-tap-highlight-color:transparent }
::selection{ background:var(--leaf-soft); color:var(--ink) }

:focus-visible{ outline:3px solid var(--leaf-ink); outline-offset:3px }
.flow :focus-visible,.footer :focus-visible{ outline-color:var(--on-ink) }
.cta :focus-visible{ outline-color:var(--paper) }
main[tabindex="-1"]:focus{ outline:none }

.skip-link{
  position:fixed;
  top:8px;
  left:8px;
  z-index:100;
  transform:translateY(-160%);
  border-radius:6px;
  background:var(--ink);
  color:var(--paper);
  font-weight:700;
  padding:9px 14px;
}
.skip-link:focus{ transform:none }

.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:clamp(18px,4vw,32px);
}

/* Topbar */
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.topbar .shell{
  min-height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.brand{
  min-width:0;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--ink);
  text-decoration:none;
}
.brand-mark{ width:12px; height:29px; flex:0 0 auto }
.wordmark{ font-size:16.5px; font-weight:750; letter-spacing:-.015em; white-space:nowrap }
.brand-caption{
  margin-left:2px;
  padding-left:12px;
  border-left:1px solid var(--rule-2);
  color:var(--ink-3);
  font-family:var(--mono);
  font-size:11px;
  line-height:1;
  white-space:nowrap;
}
.topnav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:20px;
  color:var(--ink-2);
  font-size:13.5px;
  white-space:nowrap;
}
.topnav .nav-link{ color:var(--ink-2) }
.topnav .nav-link:hover,.topnav .nav-link[aria-current="page"]{ color:var(--ink) }
.topnav .nav-link[aria-current="page"]{ font-weight:700 }
.lang-switch{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--ink-3);
  font-family:var(--mono);
  font-size:11.5px;
}
.lang-switch a{ color:var(--ink-3) }
.lang-switch a:hover{ color:var(--ink) }
.lang-switch strong{ color:var(--ink); font-weight:750 }
.lang-switch .divider{ color:var(--rule-2); font-style:normal }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:11px 17px;
  border:1px solid transparent;
  border-radius:7px;
  font-size:14.5px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .14s ease,border-color .14s ease,color .14s ease;
}
.btn:hover{ text-decoration:none }
.btn-primary{ background:var(--leaf-ink); color:#f7faf0 }
.btn-primary:hover{ background:#364b1e }
.btn-secondary{ background:transparent; border-color:var(--control-rule); color:var(--ink) }
.btn-secondary:hover{ background:var(--paper-2); border-color:var(--ink-3) }
.btn-paper{ background:var(--paper); color:var(--leaf-ink) }
.btn-paper:hover{ background:#fff }
.btn-sm{ min-height:34px; padding:8px 13px; border-radius:6px; font-size:12.75px }
.arrow{ font-weight:500 }

/* Type */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--ink-3);
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.075em;
  line-height:1.35;
  text-transform:uppercase;
}
.eyebrow::before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 auto;
  border-radius:2px;
  background:var(--leaf);
}
h1,h2,h3{ text-wrap:balance }
h1{
  font-size:clamp(2.65rem,6vw,4.75rem);
  font-weight:780;
  letter-spacing:-.045em;
  line-height:.99;
}
h1 .accent{ display:block; color:var(--leaf-ink) }
h2{
  font-size:clamp(1.8rem,3.6vw,2.65rem);
  font-weight:750;
  letter-spacing:-.035em;
  line-height:1.08;
}
h3{ font-size:1.08rem; font-weight:750; letter-spacing:-.015em; line-height:1.25 }

/* Landing: hero */
.hero{ padding:clamp(58px,8vw,104px) 0 clamp(56px,8vw,96px) }
.hero-grid{ display:grid; gap:clamp(42px,5vw,64px); align-items:center }
.hero-copy{ max-width:690px }
.hero .eyebrow{ margin-bottom:22px }
.hero h1{ max-width:16ch; margin-bottom:26px }
.hero .lead{
  max-width:61ch;
  color:var(--ink-2);
  font-size:clamp(1.06rem,1.5vw,1.18rem);
  line-height:1.66;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px }
.release-note{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:24px;
  color:var(--ink-3);
  font-family:var(--mono);
  font-size:12px;
}
.release-note::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--leaf);
}

.path-card{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  border:1px solid var(--rule-2);
  border-top:3px solid var(--leaf);
  border-radius:9px;
  background:#fff;
  padding:18px 20px 7px;
}
.path-card figcaption{
  margin-bottom:7px;
  color:var(--ink-3);
  font-family:var(--mono);
  font-size:11px;
  font-weight:650;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.path-list{ list-style:none }
.path-list li{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:12px;
  padding:16px 0;
  border-top:1px solid var(--rule);
}
.path-index{
  color:var(--leaf-ink);
  font-family:var(--mono);
  font-size:11.5px;
  font-variant-numeric:tabular-nums;
}
.path-name{ display:block; color:var(--ink); font-size:14.5px; font-weight:750; line-height:1.25 }
.path-detail{
  display:block;
  margin-top:4px;
  color:var(--ink-3);
  font-family:var(--mono);
  font-size:11px;
  line-height:1.45;
}

@media (min-width:900px){
  .hero-grid{ grid-template-columns:minmax(0,1fr) minmax(330px,360px) }
}

/* Landing: shared stack */
.flow{ background:var(--ink); color:var(--on-ink); padding:clamp(64px,8vw,94px) 0 }
.flow .eyebrow{ color:var(--on-ink-2) }
.flow .eyebrow::before{ background:var(--amber) }
.flow-head{ display:grid; gap:18px; margin-bottom:clamp(34px,5vw,54px) }
.flow h2{ max-width:19ch; color:#fff }
.layer-list{ list-style:none; border-top:1px solid var(--hair-ink) }
.layer-list li{
  display:grid;
  gap:12px;
  padding:25px 0;
  border-bottom:1px solid var(--hair-ink);
}
.layer-label{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--on-ink-2);
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.065em;
  text-transform:uppercase;
}
.layer-label::before{ content:""; width:38px; height:3px; background:var(--leaf) }
.layer-list li:nth-child(2) .layer-label::before{ background:var(--amber) }
.layer-list li:nth-child(3) .layer-label::before{ background:#b9b5a7 }
.layer-list h3{ color:#fff; font-size:1.18rem }
.layer-list p{ max-width:69ch; color:var(--on-ink-2); font-size:14.5px; line-height:1.66 }

@media (min-width:820px){
  .flow-head{ grid-template-columns:.82fr 1.18fr; align-items:end }
  .flow-head .eyebrow{ align-self:start; margin-top:7px }
  .layer-list li{ grid-template-columns:180px 235px minmax(0,1fr); gap:28px; align-items:baseline; padding:29px 0 }
}

/* Landing: stack numbers */
.stats{ background:var(--leaf-soft); padding:clamp(54px,7vw,78px) 0 }
.stats-grid{ display:grid; gap:clamp(30px,5vw,58px); align-items:center }
.stats .eyebrow{ color:var(--leaf-ink); margin-bottom:15px }
.stats h2{ max-width:12ch }
.stats-list{ display:grid; list-style:none }
.stat{ padding:18px 0 }
.stat + .stat{ border-top:1px solid rgba(70,97,38,.18) }
.stat-number{
  display:block;
  color:var(--leaf-ink);
  font-family:var(--mono);
  font-size:clamp(2.15rem,4vw,3rem);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.stat-label{ display:block; margin-top:8px; color:var(--ink); font-weight:750; line-height:1.25 }
.stat-detail{ display:block; margin-top:5px; color:var(--ink-2); font-family:var(--mono); font-size:11.5px; line-height:1.5 }

@media (min-width:820px){
  .stats-grid{ grid-template-columns:.72fr 1.28fr }
  .stats-list{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .stat{ min-width:0; padding:8px 24px }
  .stat + .stat{ border-top:0; border-left:1px solid rgba(70,97,38,.18) }
  .stat:first-child{ padding-left:0 }
}

/* Landing: CTA */
.cta{ background:var(--leaf-ink); color:#fff; padding:clamp(54px,7vw,78px) 0 }
.cta-grid{ display:grid; gap:26px; align-items:center }
.cta .eyebrow{ color:rgba(255,255,255,.82); margin-bottom:15px }
.cta .eyebrow::before{ background:#fff }
.cta h2{ max-width:21ch; color:#fff }
.cta-copy{ margin-top:12px; color:rgba(255,255,255,.82); font-size:14.5px }
@media (min-width:760px){
  .cta-grid{ grid-template-columns:minmax(0,1fr) auto }
}

/* Footer */
.footer{ background:var(--ink); color:var(--on-ink-2); padding:27px 0 31px }
.footer .shell{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px 28px;
}
.footer-brand{ display:flex; align-items:baseline; flex-wrap:wrap; gap:9px 13px }
.footer .wordmark{ color:var(--on-ink); font-size:14.5px }
.footer-tag{ font-family:var(--mono); font-size:11.5px }
.footer nav{ display:flex; align-items:center; flex-wrap:wrap; gap:17px; font-size:13px }
.footer nav a{ color:var(--on-ink-2) }
.footer nav a:hover{ color:var(--on-ink) }

/* Languages page */
body.languages-page{ min-height:100svh; display:flex; flex-direction:column }
body.languages-page main{ flex:1 0 auto }
body.languages-page .shell{ max-width:1240px }
.status-hero{ padding:clamp(28px,4vw,46px) 0 clamp(18px,2.5vw,28px) }
.status-hero .eyebrow{ margin-bottom:13px }
.status-hero h1{
  max-width:18ch;
  font-size:clamp(2.2rem,4.6vw,3.45rem);
  letter-spacing:-.04em;
  line-height:1.02;
}
.status-hero .lead{ max-width:74ch; margin-top:15px; color:var(--ink-2); font-size:1.1rem; line-height:1.6 }
.language-board{ padding:0 0 clamp(24px,3vw,38px) }
.featured-grid{ display:grid; gap:12px }
.status-panel{
  min-width:0;
  border:1px solid var(--rule-2);
  border-radius:9px;
  background:#fff;
  padding:15px;
}
.pilot-panel{ border-top:3px solid var(--leaf) }
.flagship-panel{ border-top:3px solid var(--amber) }
.panel-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}
.panel-head h2,.queue-head h2{
  font-family:var(--mono);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.07em;
  line-height:1.3;
  text-transform:uppercase;
}
.panel-note,.queue-note{ color:var(--ink-3); font-family:var(--mono); font-size:11px; line-height:1.4 }

.chip{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--rule);
  border-radius:7px;
  background:#fff;
  color:var(--ink-2);
  font-size:14.5px;
  font-weight:650;
  line-height:1.15;
}
a.chip{ color:var(--ink); text-decoration:none; transition:border-color .14s ease,background-color .14s ease }
a.chip:hover{ border-color:var(--leaf); background:var(--paper) }
.chip-icon{ width:22px; height:22px; flex:0 0 auto; border-radius:4px; object-fit:contain }
.chip-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.chip-tag{
  margin-left:auto;
  color:var(--ink-3);
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:650;
  letter-spacing:.05em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
}
.chip-running{
  min-height:48px;
  padding:10px 13px;
  border-color:var(--leaf);
  background:var(--leaf-soft);
}
.chip-running .chip-icon{ width:26px; height:26px }
.chip-running .chip-name{ color:var(--ink); font-size:17.5px; font-weight:760 }
.chip-running .chip-tag{ display:inline-flex; align-items:center; gap:6px; color:var(--leaf-ink) }
.chip-running .chip-tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--leaf) }

.pilot-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:11px;
  border-top:1px solid var(--rule);
}
.pilot-metrics > div{ min-width:0; padding:11px 10px 2px }
.pilot-metrics > div + div{ border-left:1px solid var(--rule) }
.pilot-metrics > div:first-child{ padding-left:1px }
.pilot-metrics dt{
  color:var(--leaf-ink);
  font-family:var(--mono);
  font-size:clamp(1.55rem,2.8vw,2.05rem);
  font-weight:750;
  font-variant-numeric:tabular-nums;
  line-height:1.1;
}
.pilot-metrics dd{ margin-top:6px; color:var(--ink-3); font-size:11.5px; line-height:1.35 }
.pilot-support{
  margin-top:12px;
  padding-top:11px;
  border-top:1px solid var(--rule);
  color:var(--ink-2);
  font-size:13px;
  line-height:1.5;
}

.flagship-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; list-style:none }
.chip-flagship{
  min-height:62px;
  border-color:var(--control-rule);
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:9px;
  row-gap:3px;
  padding:9px 10px;
}
.chip-flagship .chip-icon{ grid-row:1 / 3; align-self:center; width:22px; height:22px }
.chip-flagship .chip-name{ align-self:end; color:var(--ink); font-size:14px }
.chip-flagship .chip-tag{
  align-self:start;
  margin-left:0;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--leaf-ink);
  font-size:10.5px;
  letter-spacing:.015em;
  text-transform:none;
}

.queue-section{ margin-top:clamp(18px,2.4vw,28px) }
.queue-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:10px;
}
.queue-title-group{ display:flex; align-items:baseline; flex-wrap:wrap; gap:7px 12px }
.queue-title-group p{ color:var(--ink-3); font-size:13px; line-height:1.45 }
.queue-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:7px;
  list-style:none;
}
.chip-soon{ min-height:42px; gap:7px; padding:8px 9px; font-size:13.5px }
.chip-soon .chip-tag{ font-size:9px; letter-spacing:.02em }
.chip-soon .chip-icon{ width:20px; height:20px; opacity:.86 }

/* Narrow screens: stack the three pilot metrics full-width so the "126 / 157"
   ratio keeps its own line instead of breaking mid-value in a cramped column. */
@media (max-width:560px){
  .pilot-metrics{ grid-template-columns:1fr }
  .pilot-metrics > div{ padding:11px 2px }
  .pilot-metrics > div + div{ border-left:0; border-top:1px solid var(--rule) }
  .pilot-metrics > div:first-child{ padding-top:3px }
}

@media (min-width:520px){
  .queue-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (min-width:700px){
  .queue-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) }
}
@media (min-width:900px){
  .queue-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) }
}
@media (min-width:1040px){
  .featured-grid{ grid-template-columns:minmax(0,1.55fr) minmax(360px,.85fr) }
  .queue-grid{ grid-template-columns:repeat(6,minmax(0,1fr)) }
}

/* Gentle laptop tightening. Larger displays are the norm now, so this only trims
   a little — it no longer squeezes the page down to 1440×900 at the cost of size. */
@media (min-width:1040px) and (min-height:780px){
  body.languages-page .topbar .shell{ min-height:60px }
  body.languages-page .status-hero{ padding-top:32px; padding-bottom:22px }
  body.languages-page .status-hero .eyebrow{ margin-bottom:11px }
  body.languages-page .status-hero .lead{ margin-top:13px }
  body.languages-page .status-panel{ padding:15px }
  body.languages-page .panel-head{ margin-bottom:11px }
  body.languages-page .chip-running{ min-height:46px; padding-block:9px }
  body.languages-page .pilot-metrics{ margin-top:10px }
  body.languages-page .pilot-metrics > div{ padding-top:10px }
  body.languages-page .pilot-support{ margin-top:11px; padding-top:10px }
  body.languages-page .chip-flagship{ min-height:58px; padding-block:8px }
  body.languages-page .queue-section{ margin-top:22px }
  body.languages-page .chip-soon{ min-height:35px; padding-block:6px }
  body.languages-page .footer{ padding-top:20px; padding-bottom:22px }
}

/* Small screens */
@media (max-width:760px){
  .brand-caption,.topnav .nav-link{ display:none }
  .topbar .shell{ min-height:58px; gap:10px }
  .topnav{ gap:10px }
  .btn-sm{ padding-inline:11px }
  .hero{ padding-top:54px }
  .path-card{ padding-inline:16px }
  .footer .shell{ align-items:flex-start; flex-direction:column }
}
@media (max-width:420px){
  .shell{ padding-inline:18px }
  .wordmark{ font-size:16px }
  .topnav{ gap:8px }
  .btn-sm{ min-height:33px; padding:8px 10px; font-size:12px }
  .hero-actions{ display:grid; grid-template-columns:1fr 1fr }
  .hero-actions .btn{ padding-inline:12px }
  .queue-head{ align-items:flex-start; flex-direction:column; gap:4px }
  .pilot-metrics dd{ font-size:9.75px }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
}