/**
 * logi-ciel marketing site — component stylesheet.
 *
 * Consumes --sv-* tokens only (see tokens.css / tokens.md). Never hardcode a
 * hex here that belongs in the token file; the exceptions are the hero and
 * deep-band compositions, where one-off alpha layers are composition, not
 * palette.
 *
 * No JS anywhere on this site: the CSP has no script-src, so every interactive
 * control (nav disclosure, trade switcher, FAQ) is CSS-only.
 *
 * NOTE: manually duplicated to internal/web/static/app.css — run
 * scripts/sync-static.sh after editing. /static/* serves from design/ in dev
 * and from the embedded internal/web/static/ in production, so an edit to only
 * one works in dev and silently reverts in prod.
 */

/* ── Reset & base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--sv-font-family-sans);
  font-size: var(--sv-font-size-300);
  font-weight: var(--sv-font-weight-regular);
  line-height: var(--sv-font-line-body);
  background: var(--sv-color-bg-canvas);
  color: var(--sv-color-text-primary);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--sv-color-text-brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--sv-motion-duration-ui) var(--sv-motion-easing-ui);
}
a:hover { color: var(--sv-color-text-brand-hover); }
:focus-visible {
  outline: var(--sv-border-width-focus) solid var(--sv-color-border-focus);
  outline-offset: var(--sv-focus-ring-offset);
}

code {
  font-family: var(--sv-font-family-mono);
  font-size: 0.9em;
  background: var(--sv-color-bg-surface-subtle);
  border: var(--sv-border-width-hairline) solid var(--sv-color-border-default);
  border-radius: 4px;
  padding: 0.05em 0.35em;
}

/* Visually hidden but still announced and still focusable. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 100; background: var(--sv-color-bg-surface); color: var(--sv-color-text-brand);
  padding: 0.7rem 1.2rem; border-radius: 0 0 var(--sv-radius-md) var(--sv-radius-md);
  font-weight: var(--sv-font-weight-semibold); text-decoration: none;
  box-shadow: var(--sv-elevation-2);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ── Typography ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--sv-font-family-display);
  font-weight: var(--sv-font-weight-semibold);
  line-height: var(--sv-font-line-tight);
  color: var(--sv-color-text-brand);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.35rem, 5vw, var(--sv-font-size-1000));
  margin: 0 0 var(--sv-space-4);
  letter-spacing: -0.03em;
}
h2 {
  font-size: clamp(1.75rem, 3.2vw, var(--sv-font-size-800));
  margin: 0 0 var(--sv-space-4);
  letter-spacing: -0.025em;
}
h3 {
  font-family: var(--sv-font-family-sans);
  font-size: var(--sv-font-size-400);
  font-weight: var(--sv-font-weight-semibold);
  margin: 0 0 var(--sv-space-2);
  letter-spacing: 0;
}
h4 {
  font-family: var(--sv-font-family-sans);
  font-size: var(--sv-font-size-300);
  font-weight: var(--sv-font-weight-semibold);
  margin: 0 0 var(--sv-space-2);
  letter-spacing: 0;
}
p { margin: 0 0 var(--sv-space-4); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--sv-font-size-400);
  line-height: var(--sv-font-line-snug);
  color: var(--sv-color-text-secondary);
  max-width: 38rem;
  text-wrap: pretty;
}
.muted { color: var(--sv-color-text-muted); font-size: var(--sv-font-size-200); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-2);
  margin: 0 0 var(--sv-space-3);
  font-size: var(--sv-font-size-100);
  font-weight: var(--sv-font-weight-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sv-color-text-muted);
}
.eyebrow::before {
  content: "";
  width: 1.6rem; height: 2px; border-radius: 2px;
  background: var(--sv-color-accent-indicator);
}
.tnum { font-variant-numeric: tabular-nums; }

/* ── Layout primitives ──────────────────────────────────────────────────────
   Sections are full-bleed and own their inner container, so a page can
   alternate light and deep bands edge to edge. Nothing wraps the page content
   globally — see the "content" slot in layout.html. */
main { flex: 1; }
.wrap {
  max-width: var(--sv-layout-max-wide);
  margin: 0 auto;
  padding-inline: var(--sv-space-gutter);
}
.wrap--tight { max-width: var(--sv-layout-max-content); }
.wrap--narrow { max-width: var(--sv-layout-max-narrow); }

.band { padding-block: var(--sv-space-band); }
.band--tight { padding-block: calc(var(--sv-space-band) * 0.62); }
.band--surface { background: var(--sv-color-bg-surface); }
.band--subtle { background: var(--sv-color-bg-surface-subtle); }
.band--hair { border-top: var(--sv-border-width-hairline) solid var(--sv-color-border-default); }

/* Inverse band: deep slate under the same dotted veil as the hero, so the two
   read as one family rather than two unrelated dark treatments. */
.band--deep {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--sv-color-bg-deep);
  color: var(--sv-color-text-on-deep);
}
.band--deep::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.2px);
  background-size: 26px 26px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 75%);
}
.band--deep h1, .band--deep h2, .band--deep h3, .band--deep h4 { color: #fff; }
.band--deep .lead { color: var(--sv-color-text-on-deep-secondary); }
.band--deep .eyebrow { color: var(--sv-color-text-on-deep-muted); }
.band--deep .muted { color: var(--sv-color-text-on-deep-muted); }
.band--deep a { color: var(--sv-color-accent-on-deep); }
.band--deep code {
  background: rgba(255,255,255,.07);
  border-color: var(--sv-color-border-on-deep);
  color: var(--sv-color-text-on-deep);
}

.section-head { max-width: 40rem; margin-bottom: var(--sv-space-7); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head > :last-child { margin-bottom: 0; }

.grid { display: grid; gap: var(--sv-space-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

/* Two-column editorial split — copy beside a figure. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--wide-right { grid-template-columns: 0.85fr 1.15fr; }
.split > * { min-width: 0; }
@media (max-width: 900px) {
  .split, .split--wide-right { grid-template-columns: 1fr; }
  .split.reverse > :first-child { order: 2; }
}

/* ── Badges ─────────────────────────────────────────────────────────────────
   The roadmap vocabulary for the whole site. Every planned-but-unbuilt
   capability carries .badge--soon; nothing planned ships unlabelled. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  vertical-align: middle;
  padding: 0.2em 0.6em;
  border-radius: var(--sv-radius-pill);
  border: var(--sv-border-width-hairline) solid transparent;
  font-size: 0.6875rem;         /* 11px — a marker, never a second label */
  font-weight: var(--sv-font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.45;
  white-space: nowrap;
}
.badge--soon {
  background: var(--sv-badge-soon-bg);
  color: var(--sv-badge-soon-fg);
  border-color: var(--sv-badge-soon-border);
}
.badge--now {
  background: var(--sv-badge-now-bg);
  color: var(--sv-badge-now-fg);
  border-color: var(--sv-badge-now-border);
}
.badge--beta { background: var(--sv-color-brand-800); color: #fff; border-color: transparent; }
/* On deep grounds the light-surface inks invert. */
.band--deep .badge--soon,
.site-hero .badge--soon {
  background: rgba(176,235,82,.18);
  color: var(--sv-color-accent-300);
  border-color: rgba(176,235,82,.5);
}
.band--deep .badge--now,
.site-hero .badge--now {
  background: rgba(151,229,184,.14);
  color: var(--sv-color-success-300);
  border-color: rgba(151,229,184,.42);
}
.band--deep .badge--beta,
.site-hero .badge--beta { background: rgba(255,255,255,.14); color: #fff; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
/* Flat and tight: solid fills, hairline borders, a ring on focus, no gradient,
   no lift, no drop shadow. The only movement is a 1px press. This is the B2B
   register — the same one Stripe/Mercury/Ramp read in — and it is also the
   easiest to keep AA-clean, since a flat fill has exactly one contrast pair to
   satisfy instead of a gradient's two ends. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sv-space-2);
  min-height: var(--sv-hit-target-min);
  padding: 0.7rem 1.4rem;
  border-radius: var(--sv-button-radius);
  font: inherit;
  font-size: var(--sv-font-size-200);
  font-weight: var(--sv-font-weight-semibold);
  text-decoration: none;
  border: var(--sv-border-width-hairline) solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--sv-motion-duration-ui) var(--sv-motion-easing-ui),
    color var(--sv-motion-duration-ui) var(--sv-motion-easing-ui),
    border-color var(--sv-motion-duration-ui) var(--sv-motion-easing-ui);
}
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn:active { transform: translateY(1px); }
/* One focus treatment for every variant and every ground. accent-edge, not the
   bright accent: the accent measures 1.31:1 on canvas, so a ring drawn in it
   would vanish exactly when a keyboard user needs to see it. */
.btn:focus-visible {
  outline: var(--sv-border-width-focus) solid var(--sv-color-border-focus);
  outline-offset: var(--sv-focus-ring-offset);
}
.btn-primary {
  background: var(--sv-button-primary-bg);
  color: var(--sv-button-primary-fg);
}
.btn-primary:hover { background: var(--sv-button-primary-bg-hover); color: var(--sv-button-primary-fg); }
.btn-primary:active { background: var(--sv-button-primary-bg-press); }
.btn-secondary {
  background: transparent;
  color: var(--sv-button-secondary-fg);
  border-color: var(--sv-button-secondary-border);
}
.btn-secondary:hover { background: var(--sv-color-brand-800-a08); border-color: var(--sv-color-text-brand); }
/* Accent — the one loud action per page (replaces the retired .btn-gold). The
   border is NOT decoration: the fill is a bright accent on a near-white page,
   which leaves the button with no perceivable boundary without it. WCAG 1.4.11
   wants 3:1 there and does not round, so accent-edge is fitted to clear it. */
.btn-accent {
  background: var(--sv-button-accent-bg);
  color: var(--sv-button-accent-fg);
  border-color: var(--sv-button-accent-border);
}
.btn-accent:hover { background: var(--sv-button-accent-bg-hover); color: var(--sv-button-accent-fg); }
/* On deep grounds a transparent outline reads better than the brand fill. */
.btn-ghost { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.26); }
.btn-ghost:hover { background: rgba(255,255,255,.13); color: #fff; border-color: rgba(255,255,255,.44); }
.btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; cursor: not-allowed; }
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sv-space-3);
  margin-top: var(--sv-space-5);
}
.btn-row .note { font-size: var(--sv-font-size-200); color: var(--sv-color-text-muted); }
.band--deep .btn-row .note { color: var(--sv-color-text-on-deep-muted); }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--sv-card-bg);
  border: var(--sv-border-width-hairline) solid var(--sv-card-border);
  border-radius: var(--sv-card-radius);
  box-shadow: var(--sv-card-elevation);
  padding: var(--sv-space-5);
  transition:
    box-shadow var(--sv-motion-duration-ui) var(--sv-motion-easing-ui),
    border-color var(--sv-motion-duration-ui) var(--sv-motion-easing-ui);
}
.card > :last-child { margin-bottom: 0; }
.card p {
  color: var(--sv-color-text-secondary);
  font-size: var(--sv-font-size-200);
  line-height: var(--sv-font-line-snug);
}
.card--hover:hover { box-shadow: var(--sv-card-elevation-hover); border-color: rgba(44,51,62,.18); }
.card-head {
  display: flex; align-items: center; gap: var(--sv-space-2);
  flex-wrap: wrap; margin-bottom: var(--sv-space-2);
}
.card-head h3 { margin: 0; }
.band--deep .card {
  background: rgba(255,255,255,.045);
  border-color: var(--sv-color-border-on-deep);
  box-shadow: none;
}
.band--deep .card p { color: var(--sv-color-text-on-deep-secondary); }

/* Icon chip */
.icon {
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--sv-radius-md);
  background: var(--sv-color-bg-surface-subtle);
  border: var(--sv-border-width-hairline) solid var(--sv-color-border-default);
  display: grid; place-items: center;
  margin-bottom: var(--sv-space-4);
  color: var(--sv-color-text-brand);
  flex: none;
}
.icon svg { width: 1.3rem; height: 1.3rem; }
.band--deep .icon {
  background: rgba(176,235,82,.12);
  border-color: rgba(176,235,82,.32);
  color: var(--sv-color-accent-on-deep);
}

/* ── Promo bar ──────────────────────────────────────────────────────────── */
.promo {
  background: var(--sv-color-accent-indicator);
  color: var(--sv-color-text-brand);
  overflow: hidden;      /* the track is wider than the viewport by design */
}
.promo-track { display: flex; width: max-content; animation: promo-scroll 75s linear infinite; }
/* Let a reader stop the text to finish reading it — hover or keyboard focus. */
.promo:hover .promo-track,
.promo:focus-within .promo-track { animation-play-state: paused; }
.promo-group {
  display: flex; align-items: center; gap: var(--sv-space-4);
  padding: 0.45rem var(--sv-space-4) 0.45rem 0;
  font-size: var(--sv-font-size-100);
  font-weight: var(--sv-font-weight-medium);
  line-height: 1.2; white-space: nowrap;
}
.promo-group b { font-weight: var(--sv-font-weight-bold); }
.promo-group .sep { opacity: 0.5; }
/* Three copies and a -33.333% travel: the track always covers the viewport, so
   no gap appears on wide screens as the loop wraps. Two copies would gap on any
   display wider than a single copy. */
@keyframes promo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); }
}
@media (prefers-reduced-motion: reduce) {
  /* The global rule already zeroes the duration; this makes the frozen state
     legible — one centred copy instead of a stalled, clipped track. */
  .promo-track { animation: none; width: 100%; justify-content: center; flex-wrap: wrap; }
  .promo-group ~ .promo-group { display: none; }
  .promo-group { white-space: normal; padding-right: 0; }
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
  background: var(--sv-header-bg);
  color: var(--sv-color-text-on-inverse);
  position: sticky; top: 0; z-index: 40;
}
.site-header .inner {
  position: relative;
  max-width: var(--sv-layout-max-wide);
  margin: 0 auto;
  padding: 0 var(--sv-space-gutter);
  min-height: var(--sv-header-height);
  /* 1fr | auto | 1fr keeps the nav centred on the BAR, not on the space left
     over between the brand and the actions — those two differ in width, so a
     flex row would sit the nav visibly off-centre. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sv-space-4);
}
.brand {
  display: inline-flex; align-items: center; text-decoration: none;
  /* Fallback rendering if the SVG fails and the img alt text is shown. */
  font-family: var(--sv-font-family-display);
  font-weight: var(--sv-font-weight-semibold);
  font-size: var(--sv-font-size-500);
  letter-spacing: 0.01em;
  color: var(--sv-color-text-on-inverse);
  white-space: nowrap;
}
/* The dark variant carries the canvas wordmark, for the brand header bar.
   Height-constrained; width follows the artboard's 2.178 aspect.

   Sizing note: only ~72% of the mark's height is the "logi" letters — the cloud
   rises above them. So the rendered height is NOT the type size, and matching it
   to a 20px text brand makes the logo read smaller than what it replaced. 44px
   puts the letters at ~30px against 14px nav links. */
.brand img { display: block; height: var(--brand-logo-height, 44px); width: auto; }
.brand:hover { color: var(--sv-color-text-on-inverse); }
.brand:focus-visible { outline-color: var(--sv-color-accent-indicator); }

.primary-nav { display: flex; align-items: center; gap: 0.15rem; justify-content: center; }
.header-actions { display: flex; align-items: center; gap: var(--sv-space-2); justify-self: end; }
/* Nav links only. The header actions are .btn now, and a `.header-actions a`
   rule would outrank `.btn` on specificity and quietly repaint them. */
.primary-nav a {
  color: rgba(255,255,255,.72);
  text-decoration: none;
  padding: 0.45rem 0.7rem;
  border-radius: var(--sv-radius-sm);
  font-size: var(--sv-font-size-200);
  font-weight: var(--sv-font-weight-medium);
  min-height: var(--sv-hit-target-min);
  display: inline-flex; align-items: center;
  white-space: nowrap;
  transition:
    color var(--sv-motion-duration-ui) var(--sv-motion-easing-ui),
    background var(--sv-motion-duration-ui) var(--sv-motion-easing-ui);
}
.primary-nav a:hover { color: var(--sv-color-text-on-inverse); background: rgba(255,255,255,.08); }
/* Active page: a filled chip, not an accent underline. Colour alone was the only
   cue before; the tint adds a non-colour affordance, and aria-current carries it
   for assistive tech either way. */
.primary-nav a.active {
  color: var(--sv-color-text-on-inverse);
  background: rgba(255,255,255,.10);
}
/* The header pair are .btn instances, not a parallel implementation. They used
   to be styled from scratch here, which is how the header drifted out of step
   with every button below it. Only the size differs — a header bar is tighter
   than a page CTA — so that is all this overrides. */
.header-actions .btn { min-height: 38px; padding: 0.42rem 1.15rem; }
.header-actions .cta {
  background: var(--sv-color-bg-surface);
  color: var(--sv-color-text-brand);
  border-color: var(--sv-color-bg-surface);
}
/* This button is inline-flex, so each child is a flex item and the whitespace
   BETWEEN items is dropped — "Try now" would render "Trynow". Keeping the whole
   label in one element makes the space ordinary inline text again. */
.header-actions .cta .label { white-space: nowrap; }
.header-actions .cta:hover { background: var(--sv-color-bg-surface-subtle); color: var(--sv-color-text-brand); }
/* The tag pins to the top-right corner of the word, not to the button, so it
   stays put regardless of the button's padding. */
.header-actions .cta .word { position: relative; display: inline-block; }
.header-actions .cta .tag {
  position: absolute; top: 0; left: 100%;
  transform: translate(-55%, -50%);
  font-size: 0.5rem;       /* 8px — a mark, not a second label */
  font-weight: var(--sv-font-weight-bold);
  letter-spacing: 0.05em; text-transform: uppercase; line-height: 1;
  padding: 0.25em 0.4em;
  border-radius: var(--sv-radius-pill);
  background: var(--sv-color-accent-indicator);
  color: var(--sv-color-text-brand);
}

/* Mobile nav disclosure — checkbox only; there is no JS available. The input
   stays in the a11y tree and keyboard-reachable (never display:none), it is just
   moved out of sight. */
.nav-check { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.nav-burger { display: none; }
.nav-burger .bars, .nav-burger .bars::before, .nav-burger .bars::after {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: #fff; content: ""; position: relative;
}
.nav-burger .bars::before { position: absolute; top: -6px; }
.nav-burger .bars::after { position: absolute; top: 6px; }
.nav-check:focus-visible ~ .nav-burger {
  outline: var(--sv-border-width-focus) solid var(--sv-color-accent-indicator);
  outline-offset: var(--sv-focus-ring-offset);
}

@media (max-width: 940px) {
  .site-header .inner {
    grid-template-columns: auto 1fr;
    padding-block: var(--sv-space-2);
  }
  .nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    justify-self: end;
    width: var(--sv-hit-target-min); height: var(--sv-hit-target-min);
    border-radius: var(--sv-radius-sm); cursor: pointer;
  }
  .nav-burger:hover { background: rgba(255,255,255,.08); }
  /* Both panels collapse; :checked reveals them as a stacked sheet. */
  .primary-nav, .header-actions {
    display: none;
    grid-column: 1 / -1;
    justify-self: stretch;
    flex-direction: column;
    align-items: stretch;
  }
  .nav-check:checked ~ .primary-nav,
  .nav-check:checked ~ .header-actions { display: flex; }
  .nav-check:checked ~ .primary-nav {
    padding-top: var(--sv-space-3);
    border-top: var(--sv-border-width-hairline) solid rgba(255,255,255,.12);
    margin-top: var(--sv-space-2);
  }
  .primary-nav a { padding: 0.7rem 0.75rem; }
  .header-actions { padding-bottom: var(--sv-space-3); gap: var(--sv-space-3); }
  .header-actions .btn { justify-content: center; }
}

/* ── Hero ───────────────────────────────────────────────────────────────────
   Everything is scoped under .site-hero: the page also carries generic .card /
   .btn / .badge rules, and unscoped names here would collide. */
.site-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(1100px 520px at 82% -6%, rgba(176,235,82,.20), transparent 62%),
    radial-gradient(760px 420px at 10% 110%, rgba(65,72,84,.30), transparent 65%),
    linear-gradient(168deg, #2C333E 0%, #1E252D 52%, #0E1217 100%);
}
.site-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1.2px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, #000 5%, transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, #000 5%, transparent 78%);
}
.site-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  box-shadow: inset 0 -90px 90px -60px rgba(0,0,0,.55);
}
.site-hero .inner {
  position: relative;
  max-width: var(--sv-layout-max-wide); margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) var(--sv-space-gutter) clamp(3.5rem, 6vw, 5.5rem);
  display: grid; grid-template-columns: 1.02fr 1.05fr;
  gap: clamp(2.5rem, 4vw, 3.6rem); align-items: center;
}

/* Grid children default to min-width:auto, which lets long unbroken strings
   push the column wider than its track. */
.site-hero .hero-copy, .site-hero .stage { min-width: 0; }

.site-hero h1 {
  margin: 0 0 1.15rem; color: #fff;
  font-size: clamp(2.4rem, 4.6vw, 3.65rem);
  font-weight: var(--sv-font-weight-bold);
  line-height: 1.04; letter-spacing: -0.03em;
}
.site-hero h1 .accent { position: relative; white-space: nowrap; color: var(--sv-color-accent-300); }
.site-hero h1 .accent::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .30em; z-index: -1;
  border-radius: 2px; background: linear-gradient(90deg, rgba(176,235,82,.42), rgba(176,235,82,.10));
}
.site-hero .lede {
  margin: 0 0 2rem; font-size: 1.075rem; line-height: 1.55;
  color: rgba(255,255,255,.70); max-width: 37rem;
}
.site-hero .lede b { color: rgba(255,255,255,.94); font-weight: var(--sv-font-weight-semibold); }
.site-hero .actions { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; }
.site-hero .note { font-size: .78rem; color: rgba(255,255,255,.45); }

.site-hero .hero-trust {
  display: flex; gap: 2.1rem; margin-top: 2.6rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.10); flex-wrap: wrap;
}
.site-hero .hero-trust div { font-size: .74rem; color: rgba(255,255,255,.46); line-height: 1.45; }
.site-hero .hero-trust b {
  display: block; font-family: var(--sv-font-family-display); font-size: .86rem;
  font-weight: var(--sv-font-weight-semibold); color: rgba(255,255,255,.90); letter-spacing: -0.01em;
}

/* ── Trade switcher ─────────────────────────────────────────────────────────
   CSS-only tabs: the radios precede the panels, because :checked can only
   select a FOLLOWING sibling. This is what makes the trade pills real rather
   than decorative — each swaps the till contents beside them. */
.trades { display: flex; gap: .4rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.trade-radio { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.trades label {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .72rem; font-weight: 600; padding: .42rem .85rem;
  border-radius: var(--sv-radius-pill); cursor: pointer;
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.62); background: rgba(255,255,255,.04);
  transition:
    background var(--sv-motion-duration-ui) var(--sv-motion-easing-ui),
    border-color var(--sv-motion-duration-ui) var(--sv-motion-easing-ui),
    color var(--sv-motion-duration-ui) var(--sv-motion-easing-ui);
}
.trades label:hover { color: rgba(255,255,255,.88); border-color: rgba(255,255,255,.3); }
.trades label svg { width: .95rem; height: .95rem; flex: none; opacity: .8; }
/* Every selector below crosses from the radios into .hero-copy or .stage.
   Both are SIBLINGS of the radios, which is the whole reason the inputs sit
   directly under .inner — see the note in home.html. */
#trade-retail:checked ~ .hero-copy .trades label[for="trade-retail"],
#trade-phone:checked  ~ .hero-copy .trades label[for="trade-phone"],
#trade-cafe:checked   ~ .hero-copy .trades label[for="trade-cafe"] {
  background: rgba(176,235,82,.16); border-color: rgba(176,235,82,.55); color: #CEFDAA;
}
#trade-retail:focus-visible ~ .hero-copy .trades label[for="trade-retail"],
#trade-phone:focus-visible  ~ .hero-copy .trades label[for="trade-phone"],
#trade-cafe:focus-visible   ~ .hero-copy .trades label[for="trade-cafe"] {
  outline: var(--sv-border-width-focus) solid var(--sv-color-accent-indicator);
  outline-offset: var(--sv-focus-ring-offset);
}
/* The line under the pills swaps with the selection. */
.trade-note { display: none; font-size: .78rem; color: rgba(255,255,255,.52); margin: 0 0 1.5rem; line-height: 1.5; }
.trade-note .badge { margin-right: .4rem; }
#trade-retail:checked ~ .hero-copy .trade-note[data-trade="retail"],
#trade-phone:checked  ~ .hero-copy .trade-note[data-trade="phone"],
#trade-cafe:checked   ~ .hero-copy .trade-note[data-trade="cafe"] { display: block; }
/* Panels — hide all, reveal the selected one. */
.trade-panel { display: none; }
#trade-retail:checked ~ .stage .trade-panel[data-trade="retail"],
#trade-phone:checked  ~ .stage .trade-panel[data-trade="phone"],
#trade-cafe:checked   ~ .stage .trade-panel[data-trade="cafe"] { display: block; }

/* Product composition: till window, storefront card, printed receipt. */
.site-hero .stage { position: relative; min-height: 470px; }
.site-hero .pane {
  position: absolute; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.13);
  background: linear-gradient(180deg, rgba(30,37,45,.97), rgba(14,18,23,.97));
  box-shadow: 0 1px 0 rgba(255,255,255,.09) inset, 0 34px 70px -26px rgba(0,0,0,.85), 0 8px 22px -14px rgba(0,0,0,.6);
}
.site-hero .chrome {
  display: flex; align-items: center; gap: .5rem; padding: .6rem .85rem;
  border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035);
}
.site-hero .chrome i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.16); display: block; }
.site-hero .chrome .title {
  margin-left: .35rem; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.42); font-weight: 600;
}
.site-hero .chrome .url {
  margin-left: auto; font-size: .68rem; color: rgba(255,255,255,.40); background: rgba(255,255,255,.06);
  padding: .18rem .55rem; border-radius: var(--sv-radius-pill); font-family: var(--sv-font-family-mono);
}
.site-hero .till { left: 0; top: 22px; width: 70%; z-index: 2; }
.site-hero .till .body { padding: 1.15rem 1.2rem 1.25rem; }
.site-hero .rowline {
  display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; font-size: .84rem;
  color: rgba(255,255,255,.62); border-bottom: 1px solid rgba(255,255,255,.07);
}
.site-hero .rowline:last-of-type { border-bottom: 0; }
.site-hero .rowline span:last-child { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.site-hero .rowline .sub { display: block; font-size: .68rem; color: rgba(255,255,255,.38); font-weight: 400; }
.site-hero .totalrow {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.12);
}
.site-hero .totalrow .lbl {
  font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,255,255,.42); font-weight: 600;
}
.site-hero .totalrow .amt {
  font-family: var(--sv-font-family-display); font-size: 2.15rem; font-weight: var(--sv-font-weight-bold);
  color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1;
}
.site-hero .totalrow .amt em { font-style: normal; font-size: .95rem; color: var(--sv-color-accent-300); margin-left: .3rem; font-weight: 600; }
.site-hero .keys { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; margin-top: 1.1rem; }
.site-hero .keys b {
  text-align: center; font-size: .74rem; font-weight: 600; padding: .62rem .3rem; border-radius: 8px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); color: rgba(255,255,255,.72);
}
.site-hero .keys b.pay { background: linear-gradient(180deg,var(--sv-color-accent-500),var(--sv-color-accent-600)); color: var(--sv-color-accent-ink); border-color: transparent; }

.site-hero .shop { right: 0; top: 0; width: 52%; z-index: 3; }
.site-hero .shop .body { padding: .9rem 1rem 1rem; }
.site-hero .prod { display: flex; gap: .7rem; align-items: center; padding: .5rem 0; }
.site-hero .thumb {
  width: 38px; height: 38px; border-radius: 8px; flex: 0 0 38px;
  background: linear-gradient(145deg, rgba(176,235,82,.34), rgba(255,255,255,.07));
  border: 1px solid rgba(255,255,255,.10);
}
.site-hero .prod .n { font-size: .78rem; color: rgba(255,255,255,.86); font-weight: 600; }
.site-hero .prod .s { font-size: .7rem; color: rgba(255,255,255,.42); }
.site-hero .prod .p { margin-left: auto; font-size: .8rem; color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }

.site-hero .receipt {
  position: absolute; right: 6%; bottom: -6px; width: 33%; z-index: 4; transform: rotate(-5.2deg);
  background: var(--sv-color-canvas-100); color: var(--sv-color-ink-900); border-radius: 4px; padding: .95rem 1rem 1.25rem;
  box-shadow: 0 26px 44px -18px rgba(0,0,0,.75), 0 3px 10px -4px rgba(0,0,0,.5);
}
.site-hero .receipt::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px;
  background:
    linear-gradient(-45deg, transparent 7px, #EDEFF2 0) 0 0/14px 14px repeat-x,
    linear-gradient(45deg,  transparent 7px, #EDEFF2 0) 0 0/14px 14px repeat-x;
}
.site-hero .receipt .rh {
  font-family: var(--sv-font-family-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  color: #68717D; text-align: center; padding-bottom: .5rem; border-bottom: 1px dashed #C1C4C9;
}
.site-hero .receipt .rr {
  display: flex; justify-content: space-between; font-family: var(--sv-font-family-mono);
  font-size: .66rem; color: var(--sv-color-ink-600); padding: .28rem 0;
}
.site-hero .receipt .rt {
  display: flex; justify-content: space-between; font-family: var(--sv-font-family-mono); font-size: .78rem;
  font-weight: 700; color: var(--sv-color-text-brand); border-top: 1px dashed #C1C4C9; margin-top: .35rem; padding-top: .4rem;
}
.site-hero .receipt .sig {
  margin-top: .5rem; font-family: var(--sv-font-family-mono); font-size: .54rem;
  color: var(--sv-color-ink-400); word-break: break-all; line-height: 1.35;
}

.site-hero .status {
  position: absolute; left: 2%; bottom: 56px; z-index: 5; display: flex; align-items: center; gap: .55rem;
  padding: .55rem .9rem; border-radius: var(--sv-radius-pill); font-size: .74rem; font-weight: 600; color: var(--sv-color-accent-300);
  background: rgba(14,18,23,.90); border: 1px solid rgba(176,235,82,.45); box-shadow: 0 14px 30px -12px rgba(0,0,0,.85);
}
.site-hero .status .led {
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--sv-color-accent-500);
  animation: hero-pulse 2.4s ease-out infinite;
}
@keyframes hero-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(176,235,82,.6); }
  70%  { box-shadow: 0 0 0 9px rgba(176,235,82,0); }
  100% { box-shadow: 0 0 0 0 rgba(176,235,82,0); }
}
.site-hero .link {
  position: absolute; z-index: 1; left: 56%; top: 96px; width: 16%; height: 2px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(176,235,82,.75) 0 7px, transparent 7px 14px);
  background-size: 14px 2px; animation: hero-flow 1.1s linear infinite;
}
@keyframes hero-flow { to { background-position: 14px 0; } }
.site-hero .float-a { animation: hero-floatA 7.5s ease-in-out infinite alternate; }
.site-hero .float-b { animation: hero-floatB 9s ease-in-out infinite alternate; }
@keyframes hero-floatA { from { transform: translateY(0); } to { transform: translateY(-11px); } }
@keyframes hero-floatB { from { transform: translateY(0); } to { transform: translateY(9px); } }

@media (max-width: 1000px) {
  .site-hero .inner { grid-template-columns: 1fr; }
  .site-hero .stage { min-height: 430px; }
}
@media (max-width: 560px) {
  /* Below this the three stacked panes overlap into mush. Drop the receipt and
     let the two windows run closer to full width. */
  .site-hero .stage { min-height: 375px; }
  .site-hero .receipt, .site-hero .link { display: none; }
  .site-hero .till { width: 86%; }
  .site-hero .shop { width: 60%; }
  .site-hero .status { bottom: 10px; }
}

/* ── Proof row ──────────────────────────────────────────────────────────── */
.proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--sv-space-5); }
.proof-item { display: flex; flex-direction: column; gap: 0.3rem; }
.proof-item strong {
  font-family: var(--sv-font-family-display);
  font-size: var(--sv-font-size-500);
  font-weight: var(--sv-font-weight-semibold);
  color: var(--sv-color-text-brand);
  letter-spacing: -0.015em;
}
.proof-item span { font-size: var(--sv-font-size-200); color: var(--sv-color-text-muted); line-height: var(--sv-font-line-snug); }
.band--deep .proof-item strong { color: #fff; }
.band--deep .proof-item span { color: var(--sv-color-text-on-deep-muted); }

/* ── Checklist ──────────────────────────────────────────────────────────── */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sv-space-3); }
.checklist li { display: flex; gap: var(--sv-space-3); align-items: flex-start; font-size: var(--sv-font-size-200); }
.checklist li > svg { width: 1.15rem; height: 1.15rem; flex: none; margin-top: .12rem; color: var(--sv-color-status-success); }
.checklist .t { display: block; color: var(--sv-color-text-primary); font-weight: var(--sv-font-weight-medium); }
.checklist .d { display: block; color: var(--sv-color-text-muted); }
.band--deep .checklist .t { color: var(--sv-color-text-on-deep); }
.band--deep .checklist .d { color: var(--sv-color-text-on-deep-muted); }
.band--deep .checklist li > svg { color: var(--sv-color-success-300); }

/* ── Feature matrix ─────────────────────────────────────────────────────── */
.matrix-scroll { overflow-x: auto; }
.matrix { width: 100%; border-collapse: collapse; min-width: 34rem; font-size: var(--sv-font-size-200); }
.matrix caption { text-align: left; margin-bottom: var(--sv-space-4); color: var(--sv-color-text-muted); font-size: var(--sv-font-size-200); }
.matrix th, .matrix td {
  text-align: left; padding: var(--sv-space-3);
  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border-default);
  vertical-align: top;
}
.matrix thead th {
  font-family: var(--sv-font-family-sans);
  font-size: var(--sv-font-size-100); text-transform: uppercase; letter-spacing: .07em;
  color: var(--sv-color-text-muted); font-weight: var(--sv-font-weight-semibold);
  border-bottom-color: var(--sv-color-text-brand);
}
.matrix tbody th { font-weight: var(--sv-font-weight-medium); color: var(--sv-color-text-primary); }
.matrix tbody th .d { display: block; font-weight: 400; color: var(--sv-color-text-muted); font-size: var(--sv-font-size-100); margin-top: .15rem; }
.matrix td { color: var(--sv-color-text-secondary); }
.matrix .grp th {
  background: var(--sv-color-bg-surface-subtle);
  font-family: var(--sv-font-family-display);
  font-size: var(--sv-font-size-300); color: var(--sv-color-text-brand);
  font-weight: var(--sv-font-weight-semibold); letter-spacing: -0.01em;
}
.matrix .yes { color: var(--sv-color-status-success); }
.matrix .no  { color: var(--sv-color-text-muted); }
.matrix .yes svg, .matrix .no svg { width: 1.05rem; height: 1.05rem; }

/* ── Pricing plans ──────────────────────────────────────────────────────── */
.plans { display: grid; gap: var(--sv-space-4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); align-items: stretch; }
.plan { display: flex; flex-direction: column; }
.plan--featured { border-color: var(--sv-color-accent-indicator); box-shadow: var(--sv-elevation-2); }
.plan .plan-name {
  font-family: var(--sv-font-family-display); font-size: var(--sv-font-size-500);
  font-weight: var(--sv-font-weight-semibold); color: var(--sv-color-text-brand); margin: 0 0 var(--sv-space-1);
}
.plan .plan-for { font-size: var(--sv-font-size-200); color: var(--sv-color-text-muted); margin: 0 0 var(--sv-space-4); }
.plan .plan-price {
  font-family: var(--sv-font-family-display); font-size: var(--sv-font-size-600);
  color: var(--sv-color-text-brand); font-weight: var(--sv-font-weight-semibold);
  margin: 0; letter-spacing: -0.02em;
}
.plan .plan-price .sub {
  display: block; font-family: var(--sv-font-family-sans); font-size: var(--sv-font-size-200);
  font-weight: 400; color: var(--sv-color-text-muted); letter-spacing: 0; margin-top: .25rem;
}
.plan hr { border: 0; border-top: var(--sv-border-width-hairline) solid var(--sv-color-border-default); margin: var(--sv-space-5) 0; }
.plan .checklist { margin-bottom: var(--sv-space-5); }
.plan .btn { width: 100%; margin-top: auto; }

/* ── FAQ (native disclosure — no JS) ────────────────────────────────────── */
.faq { display: grid; gap: var(--sv-space-2); }
.faq details {
  background: var(--sv-color-bg-surface);
  border: var(--sv-border-width-hairline) solid var(--sv-color-border-default);
  border-radius: var(--sv-radius-md);
  padding: 0 var(--sv-space-5);
}
.faq summary {
  cursor: pointer; list-style: none;
  padding: var(--sv-space-4) 0;
  font-weight: var(--sv-font-weight-semibold);
  color: var(--sv-color-text-brand);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sv-space-4);
  min-height: var(--sv-hit-target-min);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: .62rem; height: .62rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--sv-motion-duration-ui) var(--sv-motion-easing-ui);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq .answer {
  padding-bottom: var(--sv-space-5);
  color: var(--sv-color-text-secondary);
  font-size: var(--sv-font-size-200);
  max-width: 46rem;
}

/* ── Banners ────────────────────────────────────────────────────────────── */
.banner {
  padding: var(--sv-space-3) var(--sv-space-4);
  border-radius: var(--sv-radius-md);
  margin: var(--sv-space-5) 0 0;
  border: var(--sv-border-width-hairline) solid;
  font-size: var(--sv-font-size-200);
}
.banner.err { background: rgba(191,63,56,.08); border-color: var(--sv-color-status-danger); color: var(--sv-color-status-danger); }
.banner.ok  { background: rgba(26,127,81,.08); border-color: var(--sv-color-status-success); color: var(--sv-color-status-success); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-card { max-width: 32rem; }
.form-card label {
  display: block; font-size: var(--sv-font-size-200);
  font-weight: var(--sv-font-weight-medium);
  color: var(--sv-color-text-secondary); margin: 0 0 var(--sv-space-1);
}
.form-card .field { margin-bottom: var(--sv-space-4); }
.form-card input, .form-card textarea {
  width: 100%; min-height: var(--sv-hit-target-min);
  padding: .65rem .8rem;
  border: var(--sv-border-width-hairline) solid var(--sv-input-border);
  border-radius: var(--sv-input-radius);
  background: var(--sv-input-bg);
  color: var(--sv-color-text-primary);
  font: inherit;
  transition: border-color var(--sv-motion-duration-ui) var(--sv-motion-easing-ui);
}
.form-card input:focus, .form-card textarea:focus { border-color: var(--sv-color-text-brand); }
.form-card textarea { min-height: 10rem; resize: vertical; }
.form-card .btn { width: 100%; }

/* ── Steps ──────────────────────────────────────────────────────────────── */
.step-num {
  font-variant-numeric: tabular-nums; font-size: var(--sv-font-size-100);
  font-weight: var(--sv-font-weight-bold); letter-spacing: .07em;
  color: var(--sv-color-accent-indicator); margin-bottom: var(--sv-space-2);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: var(--sv-border-width-hairline) solid var(--sv-color-border-default);
  background: var(--sv-color-bg-surface);
  margin-top: auto;
}
.site-footer .cols {
  display: grid; gap: var(--sv-space-6);
  grid-template-columns: 1.6fr repeat(3, 1fr);
  padding-block: var(--sv-space-8) var(--sv-space-6);
}
@media (max-width: 800px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .site-footer .cols { grid-template-columns: 1fr; } }
.site-footer .about img { height: 40px; width: auto; display: block; margin-bottom: var(--sv-space-3); }
.site-footer .about p { font-size: var(--sv-font-size-200); color: var(--sv-color-text-muted); max-width: 24rem; }
.site-footer h4 {
  font-family: var(--sv-font-family-sans); font-size: var(--sv-font-size-100);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--sv-color-text-muted); margin-bottom: var(--sv-space-3);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sv-space-2); }
.site-footer li { font-size: var(--sv-font-size-200); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.site-footer a { color: var(--sv-color-text-secondary); text-decoration: none; }
.site-footer a:hover { color: var(--sv-color-text-brand); text-decoration: underline; }
.site-footer .colophon {
  border-top: var(--sv-border-width-hairline) solid var(--sv-color-border-default);
  padding-block: var(--sv-space-4) var(--sv-space-6);
  display: flex; flex-wrap: wrap; gap: var(--sv-space-3) var(--sv-space-5);
  justify-content: space-between; align-items: center;
  font-size: var(--sv-font-size-100); color: var(--sv-color-text-muted);
}