/* Shared base for the three marketing sites. Forked from landing/styles.css (tokens, base, header, buttons, footer) so the live landing is untouched. */
/* Kadensio: marketing site.

   Direction: a ledger. Ruled columns, tabular figures, wide margins, one
   green. Geist and Geist Mono, self-hosted and subset to Latin. Light and
   dark follow the system, and the whole page keeps whichever it is in.

   Shape rule: buttons and inputs are 6px. Everything else is square and is
   separated by hairlines, never by a card, a shadow or a tint.
   Space: a 4px base. 8, 12, 16, 24, 32, 48, 64, 96, 144.
   Accent: --accent on the primary button, links, the hot band and the
   winning side of the comparison. Nowhere else.
   See docs/design/2026-10-04-visual-direction.md. */

/* ---------- Fonts ---------- */

@font-face {
  font-family: "Geist";
  src: url("assets/fonts/Geist-Variable.8ee705d07f.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/GeistMono-Variable.f5107e1a85.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Arial resized to Geist's metrics, so the swap moves nothing on the page. */
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  size-adjust: 104.94%;
  ascent-override: 95.77%;
  descent-override: 28.11%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: light dark;

  --bg:         #F6F8F6;
  --bg-2:       #EDF1EE;
  --surface:    #FFFFFF;
  --ink:        #0C1F1A;
  --ink-2:      #33423D;
  --ink-3:      #55645F;
  --line:       rgba(12, 31, 26, .18);
  --line-2:     rgba(12, 31, 26, .10);
  --field-line: rgba(12, 31, 26, .48);

  --accent:      #007A47;
  --accent-hi:   #00613A;
  --accent-wash: #E1EFE7;
  --on-accent:   #FFFFFF;
  --warn:        #9A4B1E;
  --danger:      #B03A14;

  --sans: "Geist", "Geist Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1200px;
  --gut: clamp(1.25rem, 4.5vw, 3rem);
  --sec: clamp(5rem, 11vw, 9.5rem);

  --r: 6px;

  /* Motion. One vocabulary: a strong ease-out for anything entering or being
     pressed, plain ease for colour, one spring for the few things that should
     feel alive. UI stays under 300ms; the hero sequence is the one exception. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  /* { duration: 0.5, bounce: 0.15 } sampled into linear(): settles in 640ms with 0.6% overshoot. */
  --spring: linear(0, 0.035, 0.119, 0.228, 0.345, 0.46, 0.565, 0.658, 0.737, 0.802, 0.856, 0.897, 0.93, 0.954, 0.972, 0.985, 0.994, 1, 1.003, 1.005, 1.006, 1.006, 1.006, 1.005, 1.005, 1.004, 1.003, 1.003, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:         #07130F;
    --bg-2:       #0B1A16;
    --surface:    #0F221D;
    --ink:        #EAF0ED;
    --ink-2:      #B7C3BF;
    --ink-3:      #8F9C98;
    --line:       rgba(234, 240, 237, .20);
    --line-2:     rgba(234, 240, 237, .10);
    --field-line: rgba(234, 240, 237, .46);

    --accent:      #1FC07A;
    --accent-hi:   #45D394;
    --accent-wash: #0E2B21;
    --on-accent:   #04170F;
    --warn:        #E8A07A;
    --danger:      #F0A183;
  }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: "ss01" 0, "tnum" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 500; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 0.9rem + 5.4vw, 4.75rem); line-height: 1.02; letter-spacing: -0.045em; }
h2 { font-size: clamp(2rem, 1.1rem + 2.8vw, 3.25rem); line-height: 1.06; letter-spacing: -0.04em; }
h3 { font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.018em; font-weight: 550; }
p  { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }

a { color: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
.btn, .link-arrow, .nav a { touch-action: manipulation; }
::selection { background: var(--accent); color: var(--on-accent); }
input, textarea, select { caret-color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 30;
  background: var(--ink); color: var(--bg);
  padding: .65rem 1rem; border-radius: var(--r);
  font-weight: 500; text-decoration: none;
}
.skip:focus { top: 1rem; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

.icon { width: 1.1em; height: 1.1em; flex: none; fill: currentColor; }

.lead { font-size: clamp(1.125rem, 1.02rem + .4vw, 1.3125rem); line-height: 1.55; color: var(--ink-2); max-width: 36rem; }

.section { padding: var(--sec) 0; }
.section-tint { background: var(--bg-2); }
.section-head { max-width: 42rem; }
.section-head .lead { margin-top: 1.5rem; }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line-2);
}
.header-inner { display: flex; align-items: center; gap: 2rem; min-height: 4rem; }
.logo { display: inline-flex; align-items: center; line-height: 0; }
.logo img { height: 28px; width: auto; }
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .logo-light { display: none; }
  .logo-dark { display: block; }
}

.nav { display: flex; gap: 2rem; margin-left: auto; }
.nav a {
  font-size: .9375rem; font-weight: 450; color: var(--ink-2);
  text-decoration: none; padding: .35rem 0;
  transition: color .15s ease, box-shadow .15s ease;
}
.nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink); }
.header-cta { margin-left: .5rem; }
@media (max-width: 859px) { .nav { display: none; } .header-cta { margin-left: auto; } }

/* ---------- Buttons and links ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 2.75rem; padding: 0 1.15rem;
  font: inherit; font-size: .9375rem; font-weight: 550; letter-spacing: -0.01em;
  line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer;
  border-radius: var(--r); border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s var(--ease-out);
}
/* Heard the press: a 3% scale-down while held, eased back on release. */
.btn:active { transform: scale(0.97); }
.btn .icon { transition: transform .2s var(--ease-out); }
.btn-lg { min-height: 3.5rem; padding: 0 1.6rem; font-size: 1.0625rem; }

.btn-primary { background: var(--accent); color: var(--on-accent); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--ink); font-weight: 550; text-decoration: underline;
  text-decoration-color: var(--line); text-underline-offset: 6px; text-decoration-thickness: 1px;
  transition: text-decoration-color .15s ease, color .15s ease;
}
.link-lg { font-size: 1.0625rem; }

.site-footer { padding: 3rem 0 3.5rem; border-top: 1px solid var(--line); }
.footer-inner { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 760px) { .footer-inner { grid-template-columns: auto 1fr; gap: 4rem; } }
.logo-footer img { height: 22px; }
.footer-meta { font-size: .9375rem; color: var(--ink-3); }
.footer-meta a, .footer-legal a { color: var(--ink-2); text-decoration: none; }
.footer-legal { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: .75rem; font-size: .9375rem; }

/* Components that exist only in the multi-site shell. Same rules as base.css:
   6px buttons, everything else square, separated by hairlines, one accent. */

/* ---------- Parent bar (vertical sites) ----------
   First row of the sticky header, so the way back to the platform is on screen
   at every scroll position. */

.parent-bar { border-bottom: 1px solid var(--line-2); background: var(--bg-2); }
.parent-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.5rem; font-size: .875rem; }
.parent-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); font-weight: 550; text-decoration: none; padding: .5rem 0; }
.parent-link .arrow { color: var(--accent); transition: transform .2s var(--ease-out); }
.parent-link:hover .arrow { transform: translateX(-3px); }
.parent-bar .sibling { color: var(--ink-3); text-decoration: none; }
.parent-bar .sibling:hover { color: var(--ink); }
@media (max-width: 559px) { .parent-bar .sibling { display: none; } }

/* ---------- Header gateways (root site) ---------- */

.header-gateways { display: flex; gap: .5rem; margin-left: auto; }
@media (min-width: 860px) { .header-gateways { margin-left: .5rem; } }
@media (max-width: 599px) { .header-gateways { display: none; } }

/* Phones: the two gateways are pinned to the bottom edge instead. */
.gateway-bar {
  position: fixed; inset: auto 0 0 0; z-index: 25;
  display: none; grid-template-columns: 1fr 1fr; gap: .5rem;
  padding: .625rem var(--gut) calc(.625rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-top: 1px solid var(--line);
}
.gateway-bar .btn { min-height: 3rem; }
@media (max-width: 599px) {
  .gateway-bar { display: grid; }
  body.has-gateway-bar { padding-bottom: 4.5rem; }
}

/* ---------- Hero gateways ---------- */

.gateways { display: grid; border: 1px solid var(--ink); margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 760px) { .gateways { grid-template-columns: 1fr 1fr; } .gateway + .gateway { border-left: 1px solid var(--ink); } }
.gateway + .gateway { border-top: 1px solid var(--ink); }
@media (min-width: 760px) { .gateway + .gateway { border-top: 0; } }
.gateway {
  display: grid; gap: .75rem; padding: clamp(1.25rem, 3vw, 2rem);
  color: inherit; text-decoration: none;
  transition: background-color .15s ease;
}
.gateway:hover { background: var(--accent-wash); }
.gateway-host { font-family: var(--mono); font-size: .8125rem; color: var(--ink-3); letter-spacing: .01em; }
.gateway-name { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.gateway-name .icon { color: var(--accent); width: 1.25rem; height: 1.25rem; transition: transform .2s var(--ease-out); }
.gateway:hover .gateway-name .icon { transform: translate(3px, -3px); }
.gateway-line { color: var(--ink-2); font-size: 1rem; line-height: 1.5; max-width: 26rem; }

/* ---------- Sections ---------- */

.eyebrow { font-family: var(--mono); font-size: .8125rem; color: var(--ink-3); letter-spacing: .02em; margin-bottom: 1.25rem; }
.hero .lead { margin-top: 1.5rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; margin-top: 2rem; }
.proof { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: 2.5rem; font-family: var(--mono); font-size: .8125rem; color: var(--ink-3); }

/* Ruled ledger: label column, statement column. */
.ledger { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--ink); }
.ledger-row { display: grid; gap: .5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .ledger-row { grid-template-columns: 14rem 1fr; gap: 3rem; } }
.ledger-row dt { font-weight: 550; letter-spacing: -0.015em; }
.ledger-row dd { color: var(--ink-2); max-width: 40rem; }

/* Pipeline: numbered, ruled steps. */
.pipeline { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--ink); counter-reset: step; }
.pipeline li { counter-increment: step; display: grid; grid-template-columns: 2.5rem 1fr; gap: .25rem 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .pipeline li { grid-template-columns: 3rem 14rem 1fr; gap: 1.5rem; align-items: baseline; } }
.pipeline li::before { content: counter(step, decimal-leading-zero); font-family: var(--mono); font-size: .8125rem; color: var(--ink-3); padding-top: .2rem; }
.pipeline strong { font-weight: 550; letter-spacing: -0.015em; }
.pipeline span { color: var(--ink-2); grid-column: 2; }
@media (min-width: 760px) { .pipeline span { grid-column: auto; } }

/* Mapping table (one primitive, two presentations). */
.mapping { width: 100%; border-collapse: collapse; margin-top: clamp(2rem, 4vw, 3rem); font-size: .9375rem; }
.mapping caption { text-align: left; color: var(--ink-3); font-family: var(--mono); font-size: .8125rem; padding-bottom: .75rem; }
.mapping th, .mapping td { text-align: left; padding: .85rem 1rem .85rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.mapping thead th { border-bottom: 1px solid var(--ink); font-weight: 550; }
.mapping tbody th { font-weight: 450; color: var(--ink-3); }
.mapping td a { color: var(--ink); }

.footer-gateways { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: .75rem; font-size: .9375rem; }
.footer-gateways a { color: var(--ink); font-weight: 550; text-decoration: none; }
.footer-gateways a:hover { color: var(--accent); }
.footer-platform { display: inline-flex; gap: .5rem; align-items: center; color: var(--ink); font-weight: 550; text-decoration: none; margin-bottom: .75rem; }
.footer-platform .arrow { color: var(--accent); }

/* ---------- Hero spacing and header CTA alignment ---------- */

.hero { padding: clamp(3rem, 5.5vw, 4.5rem) 0 clamp(4.5rem, 9vw, 8rem); }
.hero h1 { max-width: 15em; }

/* With no nav (a vertical site whose sections are not written yet) the CTA still
   sits on the right; with a nav, the nav takes the free space instead. */
.header-inner .header-cta { margin-left: auto; }
@media (min-width: 860px) { .header-inner .nav + .header-cta { margin-left: .5rem; } }

/* ---------- Data tables, questions, screenshots, FAQ ---------- */

.table-wrap { overflow-x: auto; }
.mapping.data { min-width: 0; }
.mapping.data .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 1.25rem; }
.mapping.data tbody th { color: var(--ink); font-weight: 550; }
.mapping.data tfoot th, .mapping.data tfoot td { border-top: 1px solid var(--ink); border-bottom: 0; font-weight: 600; color: var(--ink); }
.mapping.data td:last-child { color: var(--ink-2); }
.mapping.data tfoot td:last-child { color: var(--ink); }

.sub { margin-top: clamp(3rem, 6vw, 4.5rem); }
.sub h3 { font-size: 1.375rem; letter-spacing: -0.025em; }
.sub .lead { margin-top: .75rem; font-size: 1.0625rem; }

.questions { display: grid; counter-reset: q; border-top: 1px solid var(--ink); margin-top: clamp(2rem, 4vw, 3rem); }
.questions li { counter-increment: q; display: flex; gap: 1rem; align-items: baseline; padding: .9rem 0; border-bottom: 1px solid var(--line); font-weight: 500; letter-spacing: -0.01em; }
.questions li::before { content: counter(q, decimal-leading-zero); font-family: var(--mono); font-size: .8125rem; color: var(--ink-3); font-weight: 400; }
@media (min-width: 760px) {
  .questions { grid-template-columns: repeat(var(--cols, 3), 1fr); column-gap: 3rem; }
}

.shot { margin: clamp(2rem, 4vw, 3rem) 0 0; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.shot figcaption { margin-top: .75rem; font-family: var(--mono); font-size: .8125rem; color: var(--ink-3); }

.faq { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--ink); max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 1.1rem 2rem 1.1rem 0; font-weight: 550; letter-spacing: -0.015em; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: 1rem; font-family: var(--mono); color: var(--accent); font-size: 1.25rem; line-height: 1.2; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 2rem 1.25rem 0; color: var(--ink-2); max-width: 40rem; }

/* ---------- Score bands, and data tables on a phone ---------- */

.bands { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(2rem, 4vw, 3rem); border: 1px solid var(--ink); }
.bands li { display: grid; gap: .25rem; padding: 1rem 1.25rem; }
.bands li + li { border-left: 1px solid var(--ink); }
.bands strong { font-weight: 550; letter-spacing: -0.015em; }
.bands span { font-family: var(--mono); font-size: .8125rem; color: var(--ink-3); }

/* A narrow screen cannot give a prose column to a three-column table. Each row
   becomes: label and number on one line, the explanation underneath. */
@media (max-width: 639px) {
  .mapping.data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mapping.data, .mapping.data tbody, .mapping.data tfoot, .mapping.data caption { display: block; }
  .mapping.data tr { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
  .mapping.data th, .mapping.data td { border: 0; padding: 0; }
  .mapping.data .num { padding-right: 0; }
  .mapping.data td:last-child { grid-column: 1 / -1; margin-top: .2rem; font-size: .9375rem; }
  .mapping.data tfoot tr { border-top: 1px solid var(--ink); border-bottom: 0; }
  .mapping.data tfoot th, .mapping.data tfoot td { border: 0; }
}

.note { margin-top: 1.25rem; color: var(--ink-3); font-size: .9375rem; max-width: 40rem; }