/* ==========================================================================
   Lindvara — website
   White paper, near-black ink, and a lot of green: a vivid green for actions
   and a neon green for anything that should shout. The top of the home page
   sits on a cloud photo; everything below it is flat white.

   The docs page is the one exception and stays dark — see the bottom.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');

:root {
  --blur: 26px;
  --saturate: 150%;

  /* Paper */
  --paper: #ffffff;
  --paper-2: #f5f8fc;
  --line: #e4e9f1;

  /* Surfaces */
  --glass: rgba(255, 255, 255, 0.74);
  --panel-line: rgba(13, 32, 62, 0.10);
  --field: rgba(255, 255, 255, 0.92);
  --field-line: rgba(13, 32, 62, 0.14);
  --hover: rgba(13, 32, 62, 0.05);

  /* Ink */
  --ink: #0a1a30;
  --text: #16253c;
  --text-2: rgba(22, 37, 60, 0.74);
  --text-3: rgba(22, 37, 60, 0.54);

  --white: #ffffff;

  /* Greens. --accent is the loud one — a neon that leans towards yellow rather
     than a pure green — and it is always paired with dark text, because it is
     far too light to carry white. --accent-ink is the readable green used
     wherever green is TEXT on white; --accent itself is unusable there. */
  --neon: #ccff00;
  --accent: #ccff00;
  --accent-hi: #bfe600;
  --accent-ink: #4a7c00;
  --accent-deep: #0b6b3a;
  --on-accent: #0a1400;

  /* Card palette — deliberately unrelated hues so no two cards match. */
  --c-neon: #ccff00;
  --c-green: #00c853;
  --c-deep: #0b6b3a;
  --c-red: #ff5252;
  --c-blue: #86c9ff;
  --c-sand: #ffd166;

  --ok: #00c853;
  --warn: #e0a020;

  --r-lg: 20px;
  --r-md: 13px;
  --r-sm: 9px;

  --maxw: 1240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  line-height: 1.55;
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Shared glass surface ---------- */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
  backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
  border: 1px solid var(--panel-line);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.btn:active { transform: scale(0.99); }

/* Flat. A gradient, an inset highlight and a coloured glow all read as
   "shiny button"; a single solid fill of the neon green does not. */
.btn-solid {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  box-shadow: none;
}
.btn-solid:hover {
  background: var(--accent-hi);
  box-shadow: none;
}

.btn-ghost {
  background: var(--field);
  border-color: var(--field-line);
  color: var(--text);
}
.btn-ghost:hover { background: var(--hover); }

/* ---------- Top navigation ---------- */
/* Two states. Over the hero the header has no background at all, so the photo
   runs right up behind it; once you scroll past, JS adds .is-floating and it
   becomes the rounded pill. Pages with no hero start floating, so they never
   see the transparent state. */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  max-width: none;
  margin: 0;
  border-bottom: none;
  border-radius: 0;
  background: transparent;
  transition: width 0.32s ease, margin 0.32s ease, top 0.32s ease,
              border-radius 0.32s ease, background 0.32s ease,
              box-shadow 0.32s ease, border-color 0.32s ease;
}
/* Over the photo both the type and the mark have to be white. */
.nav:not(.is-floating) .brand span,
.nav:not(.is-floating) .nav-links,
.nav:not(.is-floating) .nav-links a,
.nav:not(.is-floating) .nav-signin { color: #fff; }
.nav:not(.is-floating) .brand img { filter: brightness(0) invert(1); }
.nav.is-floating {
  top: 14px;
  width: calc(100% - 36px);
  max-width: var(--maxw);
  margin: 0 auto;
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  box-shadow: 0 12px 36px rgba(13, 32, 62, 0.13);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: 58px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}
.nav .btn { padding: 9px 20px; border-radius: 999px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand img { height: 26px; width: auto; filter: brightness(0); }
.brand span {
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 2.6px;
  color: var(--ink);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  color: var(--text-2);
}
.nav-links a:hover { color: var(--text); }
.nav-right { display: flex; align-items: center; gap: 18px; }
.nav-signin {
  font-size: 13.5px;
  font-weight: 300;
  color: var(--text-2);
  white-space: nowrap;
}
.nav-signin:hover { color: var(--text); }
@media (max-width: 720px) { .nav-links { display: none; } .nav-signin { display: none; } }

/* ---------- Hero ---------- */
/* The only photo on the site. Everything below it is flat white, so the image
   fades out at the bottom into the paper colour and the join is invisible. */
.hero {
  position: relative;
  /* Pulled up behind the transparent header so the photo starts at y=0. The
     extra 58px of top padding puts the content back where it would have sat.
     The 1px overlap is deliberate: matching the header's height exactly left a
     hairline of white showing through at some zoom levels. */
  margin-top: -59px;
  padding: 151px 0 68px;
  text-align: center;
  /* The photo is used as-is — there is no white wash over it any more, which
     is what had bleached the colour out of it. */
  background-color: #cfe6fb;
  background-image: url('assets/clouds.jpg');
  background-size: cover;
  background-position: center 34%;
  background-repeat: no-repeat;
}
/* Only the last quarter fades, so the photo meets the white page without a
   hard edge. The white type carries its own shadow instead. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 74%,
    rgba(255, 255, 255, 0.6) 91%,
    var(--paper) 100%);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero-logo {
  height: 150px;
  width: auto;
  margin: 0 auto 20px;
  display: block;
  /* White, to match the type — the drop shadow is what stops it dissolving
     into the bright parts of the clouds. */
  filter: drop-shadow(0 6px 22px rgba(6, 24, 50, 0.55));
}
.hero h1 {
  font-size: clamp(34px, 5.2vw, 62px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -1px;
  color: #fff;
  max-width: 18ch;
  margin: 0 auto 18px;
}
.hero p {
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.94);
  max-width: 46ch;
  margin: 0 auto 30px;
  text-shadow: 0 1px 16px rgba(6, 24, 50, 0.5);
}
.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
/* Scoped to .hero on purpose: `.hero p` above sets `margin: 0 auto 34px` and
   is more specific than a bare `.hero-price`, so it would zero the top margin
   and squash this against the buttons. */
.hero .hero-price {
  margin-top: 20px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 14px rgba(6, 24, 50, 0.5);
}
/* The neon reads well against the blue sky, and it is the one green that is
   legible over a photo. */
.hero .hero-price strong { color: var(--neon); font-weight: 600; }

/* The app preview — it fills the container rather than sitting in a narrow
   column, so the product shot reads as the biggest thing on the page. Pulled
   up close to the hero copy so its top edge is visible without scrolling. */
.preview {
  margin: 32px auto 0;
  max-width: none;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--panel-line);
  box-shadow: 0 30px 70px rgba(13, 32, 62, 0.16);
}
.preview img { width: 100%; }

/* ---------- Sections ---------- */
.section { padding: 104px 0; }
.section-head {
  text-align: center;
  max-width: 58ch;
  margin: 0 auto 52px;
}
.section-head h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 200;
  letter-spacing: -0.3px;
  color: var(--ink);
  margin-bottom: 14px;
}
.section-head p {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-2);
}

/* ---------- Why — plain columns, no boxes ---------- */
.why {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 960px;
  margin: 0 auto;
}
.why > div {
  padding: 0 36px;
  border-left: 1px solid var(--panel-line);
}
.why > div:first-child { padding-left: 0; border-left: none; }
.why > div:last-child { padding-right: 0; }
.why h3 {
  font-size: 16.5px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 9px;
}
.why p {
  font-size: 13.5px;
  font-weight: 300;
  color: var(--text-3);
  line-height: 1.65;
}
@media (max-width: 760px) {
  .why { grid-template-columns: 1fr; }
  .why > div {
    padding: 0 0 22px;
    margin-bottom: 22px;
    border-left: none;
    border-bottom: 1px solid var(--panel-line);
  }
  .why > div:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
}

/* ---------- Feature index — a spec list, not a wall of boxes ---------- */
p.legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--text-3);
}
/* --accent-ink, not --accent: a 5px neon dot on white is effectively
   invisible, and these are the only markers in the spec list. */
.legend i,
.spec-row dt i {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-ink);
}
.spec { max-width: 880px; margin: 0 auto; }
.spec-group { margin-bottom: 46px; }
.spec-group:last-child { margin-bottom: 0; }
.spec-group > h3 {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-3);
  padding-bottom: 13px;
  border-bottom: 1px solid var(--panel-line);
}
.spec-row {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 26px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--panel-line);
}
.spec-row:last-child { border-bottom: none; }
.spec-row dt {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--text);
}
.spec-row dd {
  font-size: 13.5px;
  font-weight: 300;
  color: var(--text-3);
  line-height: 1.6;
}
@media (max-width: 640px) {
  .spec-row { grid-template-columns: 1fr; gap: 5px; }
}

/* ---------- Pricing ---------- */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 720px;
  margin: 0 auto;
}
.plan {
  padding: 32px 28px;
  border-radius: var(--r-lg);
  background: var(--field);
  border: 1px solid var(--field-line);
  text-align: center;
  position: relative;
}
.plan.featured {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(204, 255, 0, 0.22), rgba(204, 255, 0, 0.06));
}
.plan .badge {
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%);
  padding: 4px 13px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
}
.plan h3 {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 18px;
}
.plan .amount {
  font-size: 46px;
  font-weight: 200;
  color: var(--ink);
  line-height: 1;
}
.plan .amount small {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-3);
}
.plan .note {
  margin: 14px 0 22px;
  font-size: 12.5px;
  color: var(--text-3);
}
.plan .btn { width: 100%; }

/* ---------- Comparison ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); }
table.compare {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
  font-size: 14px;
}
table.compare th,
table.compare td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--panel-line);
}
table.compare thead th {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-3);
}
table.compare thead th.us { color: var(--accent-ink); }
table.compare tbody tr:last-child td { border-bottom: none; }
table.compare td:first-child { color: var(--text-2); font-weight: 300; }
table.compare td:not(:first-child) { color: var(--text); }
table.compare .yes { color: var(--accent-ink); }
table.compare .no { color: var(--text-3); }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 0 auto; }
details.qa {
  border-bottom: 1px solid var(--panel-line);
  padding: 20px 0;
}
details.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
  list-style: none;
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after {
  content: '';
  flex: 0 0 auto;
  width: 8px; height: 8px;
  margin-right: 4px;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
details.qa[open] summary::after { transform: rotate(-135deg); }
details.qa p {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 300;
  color: var(--text-2);
  max-width: 68ch;
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--panel-line);
  padding: 56px 0 40px;
  margin-top: 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }
.footer .brand { margin-bottom: 16px; }
.footer .brand img { opacity: 0.9; }
.footer p.small {
  font-size: 12.5px;
  color: var(--text-3);
  max-width: 42ch;
  line-height: 1.6;
}
.footer h4 {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 16px;
}
.footer ul { list-style: none; }
.footer li { margin-bottom: 11px; }
.footer li a {
  font-size: 13.5px;
  font-weight: 300;
  color: var(--text-2);
}
.footer li a:hover { color: var(--text); }
.footer .legal {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--panel-line);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-3);
}

/* ==========================================================================
   Numbers — KPI cards, sliding bars, timeline
   --------------------------------------------------------------------------
   Five cards, five designs. They are deliberately NOT a repeating grid: each
   one carries a different figure size, layout and colour, because a row of
   identical tiles reads as filler. The colours are neon green, green, dark
   green, light blue and red so no two neighbours look related.
   ========================================================================== */

.section-tint { background: var(--paper-2); }
/* The cards are easier to take in at a narrower measure than the rest of the
   page — spread across the full 1240px the row became hard to scan. */
#numbers .wrap { max-width: 990px; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
/* Deliberately uneven spans: 5/4/3 then 7/5, not five equal columns. */
.kpi:nth-child(1) { grid-column: span 5; }
.kpi:nth-child(2) { grid-column: span 4; }
.kpi:nth-child(3) { grid-column: span 3; }
.kpi:nth-child(4) { grid-column: span 7; }
.kpi:nth-child(5) { grid-column: span 5; }

.kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  min-height: 196px;
  padding: 26px;
  border-radius: var(--r-lg);
  color: var(--ink);            /* black text inside every card */
  overflow: hidden;
}
.kpi-note { font-size: 12.5px; line-height: 1.6; opacity: 0.8; }

/* 1 — solid neon. The loudest thing on the page. */
.kpi-neon { background: var(--c-neon); }
.kpi-neon .kpi-num {
  font-size: 78px;
  font-weight: 300;
  line-height: 0.85;
  letter-spacing: -4px;
}
.kpi-neon .kpi-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* 2 — solid green. Same family as the neon card, so the difference has to come
   from the layout: a mid-size figure over a rule, not a giant numeral. */
.kpi-green { background: var(--c-green); }
.kpi-green .kpi-num {
  font-size: 46px;
  font-weight: 300;
  letter-spacing: -2.5px;
}
.kpi-green .kpi-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.3px;
}
.kpi-green .kpi-note {
  padding-top: 12px;
  border-top: 1px solid rgba(4, 36, 15, 0.22);
}

/* 3 — inverted dark green, with its own mini bar */
.kpi-deep { background: var(--c-deep); color: #fff; }
.kpi-deep .kpi-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.7px;
  opacity: 0.72;
}
.kpi-deep .kpi-num { font-size: 36px; font-weight: 300; letter-spacing: -1.5px; }
.kpi-deep .kpi-note { opacity: 0.82; }
.kpi-deep .bar-track { background: rgba(255, 255, 255, 0.2); }

/* 4 — light blue, figure set inside a dial */
.kpi-blue { background: var(--c-blue); }
.kpi-dial {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.58);
  border: 2px dashed rgba(10, 26, 48, 0.3);
}
.kpi-dial span { font-size: 34px; font-weight: 300; line-height: 1; }
.kpi-dial small {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  opacity: 0.72;
}

/* 5 — solid red, and the only card whose content is a list, not a figure */
.kpi-red { background: var(--c-red); }
.kpi-red .kpi-num {
  font-size: 30px;
  font-weight: 300;
  letter-spacing: -1px;
}
.kpi-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 12.5px;
}
.kpi-list li { display: flex; align-items: center; gap: 9px; }
.kpi-list li::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(10, 26, 48, 0.5);
}

/* ---------- Sliding bars ---------- */

.bars {
  display: grid;
  gap: 22px;
  margin-top: 18px;
  padding: 30px 32px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--paper);
}
.bars-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.bar-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 9px;
  font-size: 12.5px;
}
.bar-top b { font-weight: 600; }
.bar-track {
  height: 9px;
  border-radius: 999px;
  background: var(--hover);
  overflow: hidden;
}
/* Bars start at zero and grow when scrolled into view (see ui.js). The --pct
   is set inline per bar; the fallback keeps a forgotten one at zero rather
   than letting the width declaration go invalid. */
.bar-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--fill, var(--accent));
  transition: width 1.2s cubic-bezier(0.22, 0.7, 0.3, 1);
}
.bars.is-shown .bar-fill { width: var(--pct, 0%); }
.bar.neon { --fill: var(--c-neon); }
.bar.green { --fill: var(--c-green); }
.bar.blue { --fill: var(--c-blue); }
.bar.red { --fill: var(--c-red); }

/* ---------- Timeline ---------- */

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 26px;
  list-style: none;
}
/* The rail is drawn per item, from just right of its own dot to the next one
   (the -24px bridges the grid gap). The last item has nothing to connect to. */
.timeline li { position: relative; padding-top: 38px; }
.timeline li::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 22px;
  right: -24px;
  height: 2px;
  background: var(--line);
}
.timeline li:nth-child(1)::before { background: linear-gradient(90deg, var(--accent), var(--c-blue)); }
.timeline li:nth-child(2)::before { background: linear-gradient(90deg, var(--c-blue), var(--line)); }
.timeline li:last-child::before { display: none; }
.tl-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 5px rgba(0, 200, 83, 0.14);
}
.timeline li:last-child .tl-dot { background: var(--accent); }
.tl-step {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent-deep);
}
.tl-body h4 { font-size: 15px; font-weight: 600; margin-bottom: 5px; color: var(--ink); }
.tl-body p { font-size: 12.5px; line-height: 1.6; color: var(--text-2); }

@media (max-width: 900px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi:nth-child(n) { grid-column: span 1; }
  .kpi:nth-child(1) { grid-column: span 2; }
}
@media (max-width: 620px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi:nth-child(n) { grid-column: span 1; }
  /* Rail turns vertical: left of the dots instead of along the top. */
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .timeline li { padding: 0 0 28px 38px; }
  .timeline li::before { top: 22px; left: 9px; right: auto; bottom: -28px; width: 2px; height: auto; }
  .timeline li:nth-child(1)::before { background: linear-gradient(180deg, var(--accent), var(--c-blue)); }
  .timeline li:nth-child(2)::before { background: linear-gradient(180deg, var(--c-blue), var(--line)); }
  .bars { padding: 24px 20px; }
}


/* ==========================================================================
   Phone
   --------------------------------------------------------------------------
   The desktop spacing is generous on purpose, but on a phone it pushes the
   content off the first screen. This trims the vertical rhythm rather than
   the type sizes — the text clamps already handle themselves.
   ========================================================================== */
@media (max-width: 720px) {
  .hero { padding: 126px 0 52px; }
  .hero-logo { height: 104px; margin-bottom: 14px; }
  .hero .hero-price { margin-top: 16px; }
  .preview { margin-top: 24px; }

  .section { padding: 62px 0; }
  .section-head { margin-bottom: 34px; }

  .kpi { min-height: 0; padding: 22px; }
  .kpi-neon .kpi-num { font-size: 62px; letter-spacing: -3px; }
  .bars { padding: 22px 18px; gap: 18px; }
  .dl-card { max-width: none; }
  .footer-grid { gap: 24px; }
}

/* ==========================================================================
   Documentation page — black, plain text, grey-highlighted sidebar
   ========================================================================== */
/* The rest of the site is white now, so the dark palette is restored here for
   this page only. Custom properties cascade, so redefining them on body.docs
   is enough — which is why NO rule below this line may hardcode a colour. The
   account page reuses these same rules on white paper (see body.account at the
   end), and a hardcoded white was exactly what made that page invisible. */
body.docs {
  background: #000;
  color: #f4f7fd;
  --glass: rgba(16, 26, 51, 0.55);
  --panel-line: rgba(255, 255, 255, 0.10);
  --field: rgba(255, 255, 255, 0.07);
  --field-line: rgba(255, 255, 255, 0.14);
  --hover: rgba(255, 255, 255, 0.09);
  --ink: #ffffff;
  --text: #f4f7fd;
  --text-2: rgba(232, 239, 251, 0.66);
  --text-3: rgba(232, 239, 251, 0.42);
  --line: rgba(255, 255, 255, 0.14);
}
body.docs .nav { background: rgba(0, 0, 0, 0.85); border-color: rgba(255, 255, 255, 0.10); }
body.docs .brand img { filter: none; }   /* white mark on black */

.docs-layout {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 56px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 44px 24px 120px;
  align-items: start;
}
@media (max-width: 900px) { .docs-layout { grid-template-columns: 1fr; gap: 28px; } }

.docs-nav {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
.docs-nav h5 {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 22px 0 10px;
}
.docs-nav h5:first-child { margin-top: 0; }
.docs-nav a {
  display: block;
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 300;
  color: var(--text-2);
  transition: background 0.15s ease, color 0.15s ease;
}
.docs-nav a:hover { color: var(--ink); background: var(--hover); }
/* The highlight for whichever section you're reading */
.docs-nav a.active {
  background: var(--hover);
  color: var(--ink);
  font-weight: 400;
}

.docs-body { max-width: 760px; }
.docs-body h1 {
  font-size: 40px;
  font-weight: 200;
  letter-spacing: -0.4px;
  color: var(--ink);
  margin-bottom: 10px;
}
.docs-body .lede {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-2);
  margin-bottom: 44px;
}
.docs-body section { padding-top: 44px; scroll-margin-top: 90px; }
.docs-body h2 {
  font-size: 25px;
  font-weight: 300;
  color: var(--ink);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--panel-line);
}
.docs-body h3 {
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
  margin: 30px 0 10px;
}
.docs-body p {
  font-size: 14.5px;
  font-weight: 300;
  color: var(--text-2);
  margin-bottom: 14px;
}
.docs-body ol, .docs-body ul {
  margin: 0 0 16px 20px;
  font-size: 14.5px;
  font-weight: 300;
  color: var(--text-2);
}
.docs-body li { margin-bottom: 9px; }
.docs-body strong { font-weight: 500; color: var(--ink); }
.docs-body a.inline { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.docs-body code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--field);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--ink);
}
.docs-body pre {
  margin: 0 0 18px;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--field);
  border: 1px solid var(--field-line);
  overflow-x: auto;
}
.docs-body pre code { border: none; background: none; padding: 0; font-size: 12.5px; line-height: 1.7; }

.docs-body .callout {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-left: 2px solid var(--text-3);
  background: var(--field);
  font-size: 13.5px;
  font-weight: 300;
  color: var(--text-2);
}

.docs-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}
.docs-card {
  display: block;
  padding: 18px;
  border-radius: 12px;
  border: 1px solid var(--field-line);
  background: var(--field);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.docs-card:hover { background: var(--hover); border-color: var(--text-3); }
.docs-card strong { display: block; font-size: 14px; font-weight: 400; color: var(--ink); margin-bottom: 4px; }
.docs-card span { font-size: 12.5px; font-weight: 300; color: var(--text-3); }

/* ==========================================================================
   Account area
   --------------------------------------------------------------------------
   The same layout as the docs page, on white paper instead of black. Every
   rule above this point is driven by the custom properties, so this page only
   has to set the light surfaces — but it does need the LINES spelled out.
   The docs page gets its structure for free (light on black reads as blocks);
   white on white reads as nothing, which is how this page shipped blank.
   ========================================================================== */
body.account .docs-body { max-width: 720px; }

/* A hairline between the sidebar and the page, so the two read as two. Scoped
   to this page: the docs page is unchanged by any of this. */
@media (min-width: 901px) {
  body.account .docs-nav { padding-right: 22px; border-right: 1px solid var(--line); }
}

/* The active section gets a green edge as well as a tint, because a 5% tint
   is nearly nothing on white. */
body.account .docs-nav a.active {
  background: var(--paper-2);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Pale blue-grey panels rather than translucent white, which is invisible
   against paper. */
body.account .docs-body pre,
body.account .docs-card {
  background: var(--paper-2);
  border-color: var(--line);
}
/* Scoped to code that is NOT inside a pre: the block-level code boxes are
   already paper-2, and a nested box inside one would show as a seam. The
   outline is only here — on the black page an inline code box has a tint of its
   own and does not want a border. */
body.account .docs-body :not(pre) > code {
  background: var(--paper-2);
  border: 1px solid var(--line);
}
body.account .docs-body .callout {
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--text-2);
}
body.account .docs-body h2 { border-bottom-color: var(--line); }

/* This page's header is not a header bar — it is the logo and the name, top
   left, and a way home. So the floating pill is taken away: with nothing else
   in it, the pill is an empty outlined box with one word in the corner. It is
   static too, rather than sticky, or it would sit over the text while you
   scroll. ui.js still adds .is-floating (there is no hero to scroll past); the
   rules that make .is-floating look like something are the ones removed. */
body.account .nav.is-floating {
  position: static;
  top: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.account .nav-inner { padding: 0 clamp(28px, 7vw, 130px); }
/* The hover is the only affordance this link has, so it gets one. */
body.account .brand:hover span { opacity: 0.7; }
body.account .brand span { transition: opacity 0.15s ease; }

/* Plan status line */
.plan-status {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px 20px;
  margin-bottom: 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--field-line);
  background: var(--field);
}
.plan-status .dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 0 4px rgba(240, 180, 95, 0.16);
}
.plan-status.is-active .dot {
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.16);
}
.plan-status strong {
  display: block;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 2px;
}
.plan-status span {
  font-size: 13px;
  font-weight: 300;
  color: var(--text-3);
}

.acct-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

/* Access code */
.code-box {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  margin-bottom: 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--accent);
  background: rgba(204, 255, 0, 0.16);
}
.code-box code {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px;
  letter-spacing: 1.5px;
  white-space: nowrap;
  overflow-x: auto;
  color: var(--ink);
  user-select: all;
}
.code-box .btn { flex: 0 0 auto; padding: 8px 16px; font-size: 13px; }

/* Platform downloads */
.dl-wrap {
  margin-top: 56px;
  padding-top: 44px;
  border-top: 1px solid var(--panel-line);
  text-align: center;
}
.dl-title {
  font-size: 22px;
  font-weight: 300;
  color: var(--ink);
  margin-bottom: 9px;
}
.dl-sub {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-3);
  max-width: 46ch;
  margin: 0 auto 26px;
}
/* One card, centred. It used to be a two-column grid of Mac and Windows; now
   the platform script shows a single card for the visitor's own machine. */
.dl-grid {
  display: flex;
  justify-content: center;
  max-width: 620px;
  margin: 0 auto;
  text-align: left;
}
.dl-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 430px;
  padding: 22px;
  border-radius: var(--r-md);
  border: 1px solid var(--field-line);
  background: var(--field);
}
.dl-head strong {
  display: block;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 4px;
}
.dl-head span {
  font-size: 12.5px;
  font-weight: 300;
  color: var(--text-3);
  line-height: 1.5;
}
.dl-card .btn { width: 100%; }
/* The detected-platform button carries the weight; the other is a quiet link. */
.dl-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
.dl-main svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.dl-link {
  text-align: center;
  font-size: 12.5px;
  font-weight: 300;
  color: var(--text-3);
}
.dl-link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.dl-note {
  font-size: 11.5px;
  font-weight: 300;
  color: var(--text-3);
  line-height: 1.55;
  text-align: center;
  padding-top: 12px;
  border-top: 1px solid var(--panel-line);
}
.dl-note strong { color: var(--text-2); font-weight: 400; }
.dl-note a { color: var(--accent-ink); }
.dl-note a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Sign in / sign up — a full page, not a floating card
   --------------------------------------------------------------------------
   This used to be a small dark translucent box centred on a white page. On the
   white theme it read as a grey slab, and its input placeholders were still
   near-white from the midnight theme, so the form was close to unreadable.

   It is now a full-height split: a neon green side carrying the brand, and a
   white side carrying the form. Black on white for anything you read or type.
   ========================================================================== */

.auth-page { background: var(--paper); }

.auth-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* The header is 58px and sits in flow above this. */
  min-height: calc(100vh - 58px);
}

/* ---- Left: the loud half ---- */
.auth-aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 44px;
  padding: 60px clamp(28px, 4vw, 64px) 52px;
  background: var(--accent);
  color: var(--on-accent);
}
.auth-aside .brand img { filter: brightness(0); }
.auth-aside .brand span { color: var(--on-accent); font-weight: 500; }
.auth-aside h2 {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -1.2px;
  max-width: 15ch;
}
.auth-aside .lede {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  max-width: 32ch;
  opacity: 0.72;
}
.auth-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 14px;
}
.auth-points li { display: flex; align-items: center; gap: 11px; }
.auth-points li::before {
  content: '';
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--on-accent);
  opacity: 0.8;
}

/* ---- Right: the form ---- */
.auth-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px clamp(24px, 5vw, 72px) 64px;
  background: var(--paper);
}
.auth-card {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}
.auth-card h1 {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -0.8px;
  color: var(--ink);
  margin-bottom: 10px;
}
.auth-card .sub {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 28px;
}
.auth-card label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 8px;
}
.auth-card input {
  width: 100%;
  padding: 14px 15px;
  margin-bottom: 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
/* Was near-white on white — completely invisible. */
.auth-card input::placeholder { color: rgba(22, 37, 60, 0.38); }
.auth-card input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(204, 255, 0, 0.45);
}
.auth-card .btn { width: 100%; }
.auth-card .hint {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-2);
  margin-bottom: 18px;
}
.auth-error {
  margin-bottom: 15px;
  font-size: 13px;
  font-weight: 500;
  color: #c02626;
}
.auth-alt {
  margin-top: 22px;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-2);
}
.auth-alt a { color: var(--accent-ink); font-weight: 600; }
.auth-alt a:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-card #paneCode .btn { margin-top: 4px; }
.auth-card #paneCode .hint { margin-top: -6px; }

@media (max-width: 860px) {
  .auth-split { grid-template-columns: 1fr; min-height: 0; }
  .auth-aside { padding: 38px 24px 34px; gap: 24px; }
  .auth-aside h2 { font-size: 27px; }
  .auth-aside .lede { font-size: 14px; }
  /* Three bullets would push the form off the first screen on a phone. */
  .auth-points { display: none; }
  .auth-main { padding: 40px 24px 64px; }
}