/* ==========================================================================
   Soil marketing site — "Strata" design system.
   Public site only (soil/web/templates/site/*). The logged-in app keeps its
   own design in soil/web/static/soil.css, untouched.
   --------------------------------------------------------------------------
   TWO THINGS HAPPENED TO THIS FILE ON 2026-10-05, both recorded in
   docs/BUILD_LOG.md.

   1. REPAIRED. The three v4 landing branches were merged by hand and the merge
      dropped six chunks of this file, each replaced by a literal "---" line: 3
      closing braces, 2 "/* ====" comment openers and, fatally, two of the three
      declarations of the --space-1..7 scale. The survivor landed inside
      `.site .lp-why__head h2 { ... }`, so --space-* resolved to nothing on every
      other element and every `padding: var(--space-5)` in 1,600 lines of v4 CSS
      was dropped by the parser. The v4 page shipped to main with no padding, no
      dark bands and no cards. It is rebuilt here as the exact concatenation of
      the three branches' own appended blocks, which are intact in git.

   2. PRUNED. 597 rules (1,512 lines) that could never match anything were
      deleted: the whole pre-v3 interactive-demo site and the dead half of the v3
      landing block. The test was mechanical, not visual -- this stylesheet is
      linked from exactly one template (site/base.html), those partials spell
      every class literally and import only brand_mark / demo_cta / btn, so the
      set of classes this file can ever style is finite and readable off the
      markup. A rule was dropped only when EVERY selector in it required a class
      or id that no site template and no imported macro can spell. Proof, not
      judgement: all 515 elements of the rendered page were compared property by
      property, at 1440 and 390, with the phone menu shut and open, and with the
      booking URL set and unset -- 4,132 element-renders, zero differences.
      tests/test_site_landing_top.py holds both halves.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Type */
  --font-head: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Core palette (exactly the set given in the design brief) */
  --ink: #0E1116;
  --graphite: #3B4150;
  --slate: #5E6472;
  --canvas: #F6F7F9;
  --line: #E4E6EB;
  --line-soft: #EEF0F3;
  --signal: #2B59FF;
  --signal-tint: #F7F9FF;
  --signal-border: #DCE3FF;
  --white: #FFFFFF;

  /* Source tints: background / text, one pair per connected-data category */
  --tint-tickets-bg: #E6ECFB;   --tint-tickets-text: #22346B;
  --tint-code-bg: #E8F0E8;      --tint-code-text: #24452A;
  --tint-conv-bg: #F3ECE1;      --tint-conv-text: #5A4222;
  --tint-docs-bg: #EEE8F5;      --tint-docs-text: #43305F;
  --tint-people-bg: #E5F0F2;    --tint-people-text: #1F4A52;

  /* Status: background / text — always paired with an icon glyph, never color alone */
  --status-ok-bg: #E7F5EE;      --status-ok-text: #0F6B4B;
  --status-risk-bg: #FFF3DF;    --status-risk-text: #8A4208;
  --status-blocked-bg: #FDECEB; --status-blocked-text: #A8231B;
  --status-idle-bg: #F6F7F9;    --status-idle-text: #3B4150;

  /* Supporting neutrals: not part of the named palette above, but needed as
     tints of ink/white for the dark ("morning brief"/"trust") bands and for
     secondary-button borders — the reference design itself uses these same
     near-black/near-white steps rather than pure black/white on dark. */
  --ink-soft: #151920;
  --ink-line: #2A2F3A;
  --ink-muted: #9AA0AD;
  --ink-text: #C9CDD6;
  --border-btn: #D5D8DF;
  --signal-on-dark: #9DB2FF;

  --radius: 8px;
  --radius-lg: 12px;
  --max-width: 1280px;
  --side-margin: 80px;

  --shadow-hero: 0 24px 48px -36px rgba(14, 17, 22, 0.35);
}

@media (max-width: 759px) {
  :root { --side-margin: 20px; }
}

/* ---------- Reset & base ---------- */

.site * { box-sizing: border-box; }

.site {
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}

.site h1, .site h2, .site h3 { margin: 0; font-family: var(--font-head); letter-spacing: -0.02em; }
.site p { margin: 0; }
.site ul, .site ol { list-style: none; margin: 0; padding: 0; }
.site a { color: inherit; text-decoration: none; }
.site a:hover { color: var(--signal); }
.site button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.site img, .site svg { display: block; max-width: 100%; }

.site button:focus-visible,
.site a:focus-visible,
.site input:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

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

.site .wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--side-margin);
  padding-right: var(--side-margin);
}

.site .visually-hidden {
  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: 12px; top: -48px;
  background: var(--ink);
  color: var(--white);
  padding: 10px 16px;
  border-radius: var(--radius);
  z-index: 100;
  transition: top 150ms;
}
.skip-link:focus { top: 12px; color: var(--white); }

/* Buttons */
.site .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 20px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}
.site .btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
.site .btn-primary { background: var(--ink); color: var(--white); border: 1px solid var(--ink); }
.site .btn-primary:hover { color: var(--white); opacity: 0.9; }
.site .btn-secondary { background: var(--white); color: var(--ink); border: 1px solid var(--border-btn); }
.site .btn-secondary:hover { color: var(--ink); border-color: var(--ink); }
.site .btn-text { height: auto; padding: 0; font-weight: 600; }


.actions-row button:not(:first-child) { background: var(--white); border: 1px solid var(--border-btn); color: var(--ink); }

@media (max-width: 759px) {

  .actions-row button:not(:first-child) { display: none; }

}

@media (max-width: 759px) {

  .agents__queue > .agent-row:not(:first-child) { display: none; }
}

/* Minimum touch targets on the marketing site (2026-10 design pass, finding H1).
   Same 44px rule the app shell uses; site.css is a separate stylesheet so it needs
   its own copy -- see CLAUDE.md's note that the tokens live in three places. */
@media (max-width: 900px) {
  .btn,
  .nav a,
  .site-nav a,
  .site-footer a,
  nav a,
  button,
  select,
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
    min-height: 44px;
  }
  p a, .lede a { min-height: 0; }
}

/* ==========================================================================
   LANDING PAGE — design/soil-design-v3.pdf, page 7 (2026-10 rebuild)
   --------------------------------------------------------------------------
   Appended as one block; nothing above this line was edited. The rules above
   still serve .wrap / .btn / .site-logo / .skip-link / .visually-hidden and the
   whole :root token set, which this block reuses rather than redeclaring — no
   new colour, font, radius or layout value is introduced here.

   The old interactive hero/demo/teams rules this paragraph used to say were
   "left in place deliberately" are gone as of 2026-10-05 -- see the prune note at
   the top of the file. What survives in this block is what v4 still builds on:
   v4 overrides properties rather than restating whole rules, so .lp-section,
   .lp-kicker, .lp-nav, .lp-hero, .lp-tools, the plan cards and the footer still
   get their base from here.

   Layout contract, from CLAUDE.md: 12 columns, 1280px max (--max-width), 24px
   gutters, 80px section margins, alternating white / Canvas sections. Phone:
   4 columns, 20px margins (--side-margin drops to 20px at 759px), 44px minimum
   touch targets (the @media (max-width: 900px) block above this one).
   ========================================================================== */

/* ---------- shared section furniture ---------- */

.site .lp-section { padding: 80px 0; }
.site .lp-section--tint {
  background: var(--canvas);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.site .lp-kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--signal);
  background: var(--signal-tint);
  border: 1px solid var(--signal-border);
  border-radius: var(--radius);
  padding: 5px 10px;
}
.site .lp-kicker--plain {
  color: var(--slate);
  background: none;
  border: 0;
  padding: 0;
}

.site .lp-section__lede {
  grid-column: 8 / span 5;
  font-size: 17px;
  line-height: 1.6;
  color: var(--graphite);
}

@media (max-width: 759px) {
  /* 4 columns at phone width: the head stops being a 12-column grid entirely
     rather than squeezing a 40px heading into half of 350px. */
  .site .lp-section { padding: 48px 0; }

  .site .lp-section__lede { margin-top: 12px; }
}

/* ==========================================================================
   Nav
   ========================================================================== */

.site .lp-nav {
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.site .lp-nav__wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 72px;
}
.site .lp-nav__links {
  display: flex;
  gap: 28px;
  font-size: 15px;
  margin-left: 24px;
}
.site .lp-nav__links a { color: var(--graphite); }
.site .lp-nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.site .lp-nav__signin { font-size: 15px; font-weight: 500; color: var(--ink); }
.site .lp-nav__more { display: none; position: relative; }
.site .lp-nav__more > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-btn);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  cursor: pointer;
}
.site .lp-nav__more > summary::-webkit-details-marker { display: none; }
.site .lp-nav__sheet {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 12px;
}
.site .lp-nav__sheet a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  color: var(--graphite);
  border-top: 1px solid var(--line-soft);
}
.site .lp-nav__sheet a:first-child { border-top: 0; }

@media (max-width: 1023px) {
  .site .lp-nav__links { display: none; }
  .site .lp-nav__more { display: block; }
}

/* ---------- shared: the demo button, and buttons on the dark band ---------- */

/* White pill on the dark band (the nav). */
.site .btn-ondark {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--white);
  border-radius: var(--radius-pill);
}
.site .btn-ondark:hover { color: var(--ink); background: var(--canvas); border-color: var(--canvas); }

/* The one blue button on the site. See the block header above. */
.site .btn-signal {
  background: var(--signal);
  color: var(--white);
  border: 1px solid var(--signal);
  border-radius: var(--radius-pill);
  height: 56px;
  padding: 0 var(--space-6);
  font-size: 16px;
}
.site .btn-signal:hover { color: var(--white); background: var(--signal-hover); border-color: var(--signal-hover); }

/* A disabled "Book a demo" is the honest state when a deployment has no booking
   URL, so it has to LOOK disabled as well as be disabled -- the reason sentence
   beside it is the other half.

   Not by opacity alone. Half-opacity white on half-opacity --signal over the dark
   band lands around 3:1, and while WCAG exempts an inactive control from the
   contrast rule, a label a visitor cannot read is still a label a visitor cannot
   read. The two buttons on the dark band get a named inert surface instead: the
   same raised step the badge uses, with --lp-on-dark-3 on it at 6.4:1. */
.site .btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.site .btn[disabled]:hover { background: inherit; }
.site .btn-signal[disabled],
.site .btn-ondark[disabled] {
  opacity: 1;
  background: var(--lp-raise);
  border-color: var(--lp-raise-line);
  color: var(--lp-on-dark-3);
}

/* ---------- nav ---------- */

.site .lp-nav {
  background: var(--lp-ink);
  border-bottom: 0;
  position: relative;
  z-index: 3;
}
.site .lp-nav__wrap {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: 76px;
}
.site .lp-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  color: var(--lp-on-dark);
  flex: none;
}
.site .lp-nav__brand:hover { color: var(--lp-on-dark); }
.site .lp-nav__word {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.site .lp-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin: 0 auto;
  font-size: 15px;
}
.site .lp-nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
  color: var(--lp-on-dark-3);
}
.site .lp-nav__links a:hover { color: var(--lp-on-dark); }
.site .lp-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-left: 0;
  flex: none;
}
.site .lp-nav__signin {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  color: var(--lp-on-dark);
}
.site .lp-nav__signin:hover { color: var(--lp-on-dark-3); }
.site .lp-nav__demo { min-height: 44px; }
/* Only rendered when this deployment has no booking URL at all. */

.site .lp-nav__more > summary {
  border-color: var(--lp-raise-line);
  color: var(--lp-on-dark);
  background: var(--lp-raise);
}
.site .lp-nav__sheet {
  background: var(--lp-ink-2);
  border-color: var(--lp-raise-line);
}
.site .lp-nav__sheet a { color: var(--lp-on-dark); border-top-color: var(--lp-raise-line); }
.site .lp-nav__sheet a:hover { color: var(--lp-on-dark-3); }

/* The focus ring at the top of this file is --signal, which measures 3.7:1 against
   the dark band -- over the 3:1 a focus indicator needs, but only just, and a
   mid-blue outline on a near-black field is hard to find. On the band it uses the
   lighter step of the same hue, which measures 9.7:1. Both numbers are asserted in
   tests/test_site_landing_top.py rather than eyeballed. */
.site .lp-nav a:focus-visible,
.site .lp-nav .btn:focus-visible,
.site .lp-nav summary:focus-visible,
.site .lp-hero a:focus-visible,
.site .lp-hero .btn:focus-visible { outline-color: var(--signal-on-dark); }

/* ---------- hero ---------- */

.site .lp-hero {
  background: linear-gradient(180deg, var(--lp-ink) 0%, var(--lp-ink-2) 100%);
  padding: var(--space-7) 0 0;
  color: var(--lp-on-dark);
}
.site .lp-hero__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: var(--space-7);
}

.site .lp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--lp-raise-line);
  border-radius: var(--radius-pill);
  background: var(--lp-raise);
  font-size: 14px;
  font-weight: 500;
  color: var(--lp-on-dark);
}
.site .lp-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lp-ok-on-dark);
  flex: none;
}

.site .lp-hero__head {
  width: fit-content;
  max-width: 100%;
  margin: var(--space-6) auto 0;
}
.site .lp-hero__h1 {
  font-size: clamp(38px, 7.4vw, 104px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: var(--lp-on-dark);
}
/* The three strata rules. All three start at the same point 39% across the
   headline and step their right edges in, exactly as the design draws them. */
.site .lp-strata {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-3);
}
.site .lp-strata i {
  display: block;
  height: 5px;
  margin-left: 39%;
  border-radius: 2px;
  background: var(--lp-on-dark);
}
.site .lp-strata i:nth-child(1) { width: 61%; }
.site .lp-strata i:nth-child(2) { width: 44%; }
.site .lp-strata i:nth-child(3) { width: 27%; }

.site .lp-hero__lede {
  max-width: 740px;
  margin-top: var(--space-6);
  font-size: 20px;
  line-height: 1.55;
  color: var(--lp-on-dark-2);
}
.site .lp-hero__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.site .lp-hero__fine {
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--lp-on-dark-3);
}

/* ---------- the product shot, and the two cards floating over it ---------- */

.site .lp-shot__wrap { position: relative; padding-bottom: var(--space-7); }
.site .lp-shot { position: relative; margin: 0; }

.site .lp-shot__app {
  position: relative;
  z-index: 1;
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-shot);
  box-shadow: var(--lp-shot-shadow);
  overflow: hidden;
}

.site .lp-shot__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line-soft);
}
.site .lp-shot__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
}
.site .lp-shot__count {
  font-size: 14px;
  font-weight: 600;
  color: var(--signal);
  background: var(--signal-tint);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-2);
}
.site .lp-shot__sample {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--status-risk-text);
  background: var(--status-risk-bg);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-2);
}
.site .lp-shot__watch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  font-size: 13px;
  color: var(--slate);
}

.site .lp-shot__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
}
.site .lp-shot__tab {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
}
.site .lp-shot__tab--on { background: var(--ink); color: var(--white); }

/* Module tints. These were the five Strata source-tint pairs, because CLAUDE.md's
   five --module-* colours ARE those hues re-pointed at the five modules. The owner's
   exact pass replaced them with the family the PDF actually draws -- Sales orange,
   Customers amber, Finance green, Engineering violet, People pink -- declared as
   --lp-mod-* at the foot of this file and used by the marketing site ONLY. The app's
   --module-* and soil.css are untouched. See LANDING v4 EXACT, note 4, and
   tests/test_site_landing_top.py::test_the_module_chips_use_the_landing_designs_hues. */
.site .lp-mod {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
}
.site .lp-mod--sales { background: var(--lp-mod-sales-bg); color: var(--lp-mod-sales-text); }
.site .lp-mod--customers { background: var(--lp-mod-customers-bg); color: var(--lp-mod-customers-text); }
.site .lp-mod--finance { background: var(--lp-mod-finance-bg); color: var(--lp-mod-finance-text); }
.site .lp-mod--engineering { background: var(--lp-mod-engineering-bg); color: var(--lp-mod-engineering-text); }
.site .lp-mod--people { background: var(--lp-mod-people-bg); color: var(--lp-mod-people-text); }

.site .lp-shot__body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  border-top: 1px solid var(--line-soft);
}
.site .lp-shot__feed { border-right: 1px solid var(--line-soft); min-width: 0; }
.site .lp-shot__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line-soft);
  min-width: 0;
}
.site .lp-shot__row:last-child { border-bottom: 0; }
.site .lp-shot__row--lead { background: var(--signal-tint); }
.site .lp-shot__row strong {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
  min-width: 0;
}
.site .lp-shot__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.site .lp-shot__state {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  font-size: 12px;
  font-weight: 600;
  background: var(--status-risk-bg);
  color: var(--status-risk-text);
}
.site .lp-shot__state--ok { background: var(--status-ok-bg); color: var(--status-ok-text); }

.site .lp-shot__detail { padding: var(--space-5); min-width: 0; }
.site .lp-shot__detailhead {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.site .lp-shot__detailhead strong {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  min-width: 0;
}
.site .lp-shot__due {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--slate);
}

.site .lp-shot__bararea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
}
.site .lp-shot__track {
  position: relative;
  display: block;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--line);
}
.site .lp-shot__now {
  position: absolute;
  left: 56%;
  top: -3px;
  width: 2px;
  height: 12px;
  background: var(--ink);
}
.site .lp-shot__window {
  position: absolute;
  left: 66%;
  width: 14%;
  top: 0;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--status-blocked-text);
}
.site .lp-shot__promised {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--graphite);
}
.site .lp-shot__forecast {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--status-blocked-text);
}

.site .lp-shot__chain { margin-top: var(--space-4); }
.site .lp-shot__chain li {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line-soft);
  min-width: 0;
}
.site .lp-shot__chain li p {
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  min-width: 0;
}
.site .lp-shot__chain .lp-src { flex: none; width: 72px; justify-content: center; }

.site .lp-shot__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
/* Pictures of buttons inside a labelled screenshot, never real controls: they are
   spans, so nothing here is focusable or clickable and no visitor can tab into a
   dead end. */
.site .lp-shot__act {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-btn);
  font-size: 14px;
  font-weight: 600;
}
.site .lp-shot__act--go {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--white);
}
.site .lp-shot__stamp {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--slate);
}

.site .lp-float {
  position: absolute;
  z-index: 2;
  width: 280px;
  max-width: 76%;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  box-shadow: var(--lp-float-shadow);
}
.site .lp-float strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; }
.site .lp-float p { font-size: 14px; line-height: 1.45; margin-top: var(--space-2); }

.site .lp-float--ok {
  top: calc(var(--space-7) * -1);
  right: calc(var(--space-7) * -1);
  background: var(--white);
  color: var(--ink);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-3);
}
.site .lp-float--ok .lp-float__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--status-ok-bg);
  color: var(--status-ok-text);
}
.site .lp-float--ok p { grid-column: 2; color: var(--graphite); }

.site .lp-float--msg {
  left: calc(var(--space-5) * -1);
  top: 46%;
  background: var(--lp-ink-2);
  color: var(--lp-on-dark);
  border: 1px solid var(--lp-raise-line);
}
.site .lp-float__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--lp-on-dark-3);
}
.site .lp-float--msg p { margin-top: var(--space-3); color: var(--lp-on-dark-2); }
.site .lp-float--msg p strong { display: inline; color: var(--lp-on-dark); }
.site .lp-float__btn {
  display: inline-flex;
  align-items: center;
  height: 36px;
  margin-top: var(--space-4);
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--signal);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
}

.site .lp-shot__caption {
  margin-top: var(--space-5);
  font-size: 13px;
  line-height: 1.55;
  color: var(--lp-on-dark-2);
  max-width: 900px;
}
.site .lp-shot__caption strong { color: var(--lp-on-dark); }

/* ---------- the tool row, on white ----------
   Nine chips on one row at 1440px is tight inside --max-width (1280 less two 80px
   gutters = 1120 of usable width), so the chip is sized to fit rather than the row
   being allowed to break into a ragged 7 + 2. The 44px minimum tap target is kept
   on the height; only the horizontal padding and the label size come down. */

.site .lp-tools {
  padding: var(--space-7) 0;
  border-top: 0;
  background: var(--white);
}
.site .lp-tools__wrap {
  max-width: var(--max-width-wide);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: var(--space-5);
}
.site .lp-tools__lede { font-size: 17px; color: var(--graphite); }
.site .lp-tools__list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.site .lp-tool {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
}
.site .lp-tool__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius);
  background: var(--canvas);
  flex: none;
}
/* Brand marks are the one place colour is not Soil's to choose, so they are shown
   as the vendor draws them -- no filter, no tint, no greyscale. */
.site .lp-tool__mark img { width: 17px; height: 17px; }

/* ---------- 1180px: the shot's floating cards stop floating ---------- */

@media (max-width: 1180px) {
  .site .lp-float {
    position: static;
    width: auto;
    max-width: none;
    margin-top: var(--space-4);
  }
  .site .lp-float--ok { top: auto; right: auto; }
  .site .lp-float--msg { left: auto; top: auto; }
}

@media (max-width: 1023px) {
  .site .lp-nav__links { display: none; }
  .site .lp-nav__more { display: block; }
  .site .lp-shot__body { grid-template-columns: minmax(0, 1fr); }
  .site .lp-shot__feed { border-right: 0; border-bottom: 1px solid var(--line-soft); }
}

@media (max-width: 759px) {
  .site .lp-nav__wrap { height: 64px; gap: var(--space-3); }
  .site .lp-nav__actions { gap: var(--space-2); }
  .site .lp-nav__signin { display: none; }


  .site .lp-hero { padding-top: var(--space-6); }
  .site .lp-hero__wrap { padding-bottom: var(--space-6); }
  .site .lp-badge { font-size: 13px; }
  .site .lp-hero__h1 { font-size: 34px; letter-spacing: -0.03em; }
  .site .lp-strata i { height: 4px; }
  .site .lp-hero__lede { font-size: 17px; margin-top: var(--space-5); }
  .site .lp-hero__cta { gap: var(--space-4); margin-top: var(--space-5); }
  .site .lp-hero__cta .btn-signal { width: 100%; }
  .site .lp-hero__fine { font-size: 12px; }

  .site .lp-shot__bar,
  .site .lp-shot__tabs,
  .site .lp-shot__row,
  .site .lp-shot__detail { padding-left: var(--space-4); padding-right: var(--space-4); }
  .site .lp-shot__watch { margin-left: 0; }
  .site .lp-shot__detailhead strong { font-size: 19px; }
  .site .lp-shot__due { margin-left: 0; }
  .site .lp-shot__forecast { margin-left: 0; }
  .site .lp-shot__chain li { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .site .lp-shot__chain .lp-src { width: auto; }
  .site .lp-shot__acts .lp-shot__act { flex: 1 1 100%; justify-content: center; }

  .site .lp-tools { padding: var(--space-6) 0; }
  .site .lp-tools__list { gap: var(--space-2); }
  .site .lp-tool { font-size: 13px; padding: 0 var(--space-3); }
}

/* ==========================================================================
   LANDING v4 — sections 01 WHY SOIL / 02 HOW IT WORKS / 03 THE PLATFORM
   design/landing/soil-landing-v4.pdf, pages 1-2 (2026-10-05)
   --------------------------------------------------------------------------
   Appended as one block; nothing above this line was edited. It styles exactly
   three partials — site/_week.html (01), site/_how.html (02) and
   site/_trust.html (03) — and introduces no rule that touches any other
   section.

   TOKENS. This stylesheet's :root carries colour, type, radius and width, but
   no spacing or elevation scale: every rule above spells its gaps out in raw
   px. CLAUDE.md asks for --space-1..7 and the 3-level shadow scale, and this
   file may only be appended to, so the scale is declared here on .site — the
   same thing :root does, in the one place this block is allowed to write. Every
   rule below uses var(); the only literals are inside this declaration block
   and the media-query breakpoints, which cannot take a custom property.

   --band-dark / --surface-ink are soil.css's names for "a surface that is dark
   in BOTH themes". They do not exist in this file because the marketing site
   has no dark-mode block at all, so they are aliased here onto --ink /
   --ink-soft, which already hold the identical values. Aliasing rather than
   re-typing the hex is the point: CLAUDE.md's dark-mode defect is a literal
   paired with a token that inverts, and there is no literal here to pair.
   ========================================================================== */

.site {
  /* Spacing: CLAUDE.md's --space-1..7 = 4/8/12/16/24/32/48. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Type: CLAUDE.md's scale — h2 40, h3 22, body 17, UI 14, meta 12. 15px is
     this file's existing card-body size and is kept so the new cards match the
     ones above them. */
  --fs-h2: 40px;
  --fs-h2-sm: 30px;
  --fs-h3: 22px;
  --fs-body: 17px;
  --fs-card: 15px;
  --fs-ui: 14px;
  --fs-meta: 12px;

  /* Minimum touch target (CLAUDE.md: 44px), pill radius, and the two fixed
     figure sizes the 02 diagram needs. */
  --touch: 44px;
  --radius-pill: 999px;
  --mark-size: 180px;
  --mark-size-sm: 132px;
  --measure-narrow: 320px;
  --measure-head: 760px;
  --tile: 40px;

  /* Elevation level 1, the card shadow, exactly as CLAUDE.md states it. */
  --shadow-1: 0 1px 2px rgba(14, 17, 22, 0.06), 0 1px 1px rgba(14, 17, 22, 0.04);

  /* See the header note: soil.css's dark-surface names, aliased onto the
     tokens this file already defines. No new colour is introduced. */
  --surface-ink: var(--ink);
  --band-dark: linear-gradient(180deg, var(--ink) 0%, var(--ink-soft) 100%);
}

/* ==========================================================================
   01 · Why Soil — centred head, three cards with a tinted icon tile
   ========================================================================== */

.site .lp-why__head {
  max-width: var(--measure-head);
  margin: 0 auto var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.site .lp-why__head h2 {
  font-size: var(--fs-h2);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.site .lp-why__lede {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--graphite);
}

.site .lp-why__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
.site .lp-why-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-5);
  background: var(--canvas);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}
.site .lp-why-card h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.site .lp-why-card p {
  font-size: var(--fs-card);
  line-height: 1.6;
  color: var(--graphite);
  overflow-wrap: anywhere;
}

/* The tiles are decoration: each card's meaning is in its heading, so the SVGs
   are aria-hidden and no status is carried by colour alone. */
.site .lp-why-card__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--tile);
  height: var(--tile);
  border-radius: var(--radius);
}
.site .lp-why-card__tile--tickets { background: var(--tint-tickets-bg); color: var(--tint-tickets-text); }
.site .lp-why-card__tile--risk    { background: var(--status-risk-bg);  color: var(--status-risk-text); }
.site .lp-why-card__tile--ok      { background: var(--status-ok-bg);    color: var(--status-ok-text); }

@media (max-width: 759px) {
  .site .lp-why__head { margin-bottom: var(--space-6); }
  /* The heading's hard break is a 1440 line-length choice; at 390 it forces a
     four-line ragged block, so the text wraps on its own instead. */
  .site .lp-why__head h2 { font-size: var(--fs-h2-sm); }
  .site .lp-why__head h2 br { display: none; }
  .site .lp-why__cards { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}

/* ==========================================================================
   02 · How it works — the full-bleed dark band
   --------------------------------------------------------------------------
   Full-bleed because .lp-flow is the <section> and .wrap inside it is what
   holds the page to --max-width. Text on the band is --white, --ink-text
   (7.9:1) or --ink-muted (7.3:1); the source-tint TEXT hues are never used
   here, which is the whole reason the mono labels are one colour.
   ========================================================================== */

.site .lp-flow {
  background: var(--band-dark);
  color: var(--white);
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
}

.site .lp-flow__head {
  max-width: var(--measure-head);
  margin: 0 auto var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.site .lp-flow__head h2 {
  font-size: var(--fs-h2);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--white);
}
.site .lp-flow__lede {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-text);
}

/* .lp-kicker carries the Signal tint box; on the band it is a plain mono
   label, so the box is reset rather than recoloured. */
.site .lp-kicker--onink {
  color: var(--ink-muted);
  background: none;
  border: 0;
  padding: 0;
}

.site .lp-flow__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: var(--space-5);
  align-items: center;
}
.site .lp-flow__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
.site .lp-flow__col--centre { align-items: center; text-align: center; }

.site .lp-flow__step {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.site .lp-flow__tools,
.site .lp-flow__outcomes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site .lp-flow__tools li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--touch);
  min-width: 0;
  padding: var(--space-2) var(--space-4);
  background: var(--surface-ink);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
}
.site .lp-flow__tool {
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--white);
  min-width: 0;
  overflow-wrap: anywhere;
}
.site .lp-flow__kind {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--ink-muted);
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}

.site .lp-flow__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
}

/* The preview's sphere is a live signal: a bright arc travels around it while
   a second ring expands and fades. The bars remain visible with reduced motion. */
.site .lp-flow__orb {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 136px;
  height: 136px;
  margin: 4px 0 14px;
  border: 1px solid var(--ink-line);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--lp-sphere-core), var(--lp-sphere-mid) 70%);
  box-shadow: 0 0 0 1px rgba(124,155,255,.35), 0 0 30px 6px rgba(43,89,255,.35), 0 0 70px 14px rgba(43,89,255,.18);
}
.site .lp-flow__orb::before,
.site .lp-flow__orb::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -9px;
  border-radius: 50%;
  pointer-events: none;
}
.site .lp-flow__orb::before {
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.95) 50deg, rgba(157,178,255,.6) 90deg, transparent 140deg, transparent 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  animation: lp-flow-orb-spin 3.2s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.7));
}
.site .lp-flow__orb::after {
  border: 1.5px solid rgba(157,178,255,.55);
  animation: lp-flow-orb-pulse 2.6s ease-out infinite;
}
.site .lp-flow__orb-line { position: relative; display: block; width: 54px; height: 10px; border-radius: 2px; background: #4A5168; }
.site .lp-flow__orb-line--bright { background: #F5F7FA; }
.site .lp-flow__orb-line--bright em { position: absolute; top: 1.5px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: #6E8CFF; }
.site .lp-flow__orb-line--dim { opacity: .7; }
@keyframes lp-flow-orb-spin { to { transform: rotate(360deg); } }
@keyframes lp-flow-orb-pulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }
.site .lp-flow__caption {
  max-width: var(--measure-narrow);
  font-size: var(--fs-ui);
  line-height: 1.6;
  color: var(--ink-text);
}

.site .lp-flow__outcomes li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch);
  min-width: 0;
  padding: var(--space-2) var(--space-4);
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius);
  font-size: var(--fs-ui);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.site .lp-flow__dot {
  flex: 0 0 auto;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: 50%;
}
.site .lp-flow__dot--blocked { background: var(--status-blocked-text); }
.site .lp-flow__dot--ok      { background: var(--status-ok-text); }
.site .lp-flow__dot--risk    { background: var(--status-risk-text); }
.site .lp-flow__dot--people  { background: var(--tint-people-text); }

@media (max-width: 1023px) {
  /* One column below the tablet breakpoint: three 1fr columns plus two arrows
     cannot hold a tool row and its mono label on one line. The arrows turn to
     point down rather than disappearing — they are the only thing that says
     these three columns are a sequence. */
  .site .lp-flow__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); }
  .site .lp-flow__arrow { justify-self: center; transform: rotate(90deg); }
}
@media (max-width: 759px) {
  .site .lp-flow__head { margin-bottom: var(--space-6); }
  .site .lp-flow__head h2 { font-size: var(--fs-h2-sm); }
  .site .lp-flow__orb { width: 120px; height: 120px; }
  .site .lp-flow__tools li { flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: var(--space-3) var(--space-4); }
  .site .lp-flow__kind { text-align: left; }
}

/* ==========================================================================
   03 · The platform — a pill tab bar with NO JavaScript
   --------------------------------------------------------------------------
   Four same-named radios, declared before .lp-pays__tabs and
   .lp-pays__panels so :checked and :focus-visible can reach both through the
   general sibling combinator. The inputs are .visually-hidden (clip, not
   display:none) so they keep focus and arrow-key behaviour.
   ========================================================================== */

.site .lp-pays__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  text-align: center;
}
.site .lp-pays__head h2 {
  font-size: var(--fs-h2);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.site .lp-pays__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.site .lp-pays__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch);
  padding: var(--space-2) var(--space-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--graphite);
  font-size: var(--fs-ui);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.site .lp-pays__tab:hover { border-color: var(--border-btn); color: var(--ink); }

/* Selected pill: ink, the primary-action colour. Never Signal blue. */
.site #lp-pay-1:checked ~ .lp-pays__tabs label[for="lp-pay-1"],
.site #lp-pay-2:checked ~ .lp-pays__tabs label[for="lp-pay-2"],
.site #lp-pay-3:checked ~ .lp-pays__tabs label[for="lp-pay-3"],
.site #lp-pay-4:checked ~ .lp-pays__tabs label[for="lp-pay-4"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

/* The focus ring belongs on the pill, because the input it is really on is
   clipped to one pixel. */
.site #lp-pay-1:focus-visible ~ .lp-pays__tabs label[for="lp-pay-1"],
.site #lp-pay-2:focus-visible ~ .lp-pays__tabs label[for="lp-pay-2"],
.site #lp-pay-3:focus-visible ~ .lp-pays__tabs label[for="lp-pay-3"],
.site #lp-pay-4:focus-visible ~ .lp-pays__tabs label[for="lp-pay-4"] {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.site .lp-pays__panel {
  display: none;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-7);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.site #lp-pay-1:checked ~ .lp-pays__panels .lp-pays__panel--1,
.site #lp-pay-2:checked ~ .lp-pays__panels .lp-pays__panel--2,
.site #lp-pay-3:checked ~ .lp-pays__panels .lp-pays__panel--3,
.site #lp-pay-4:checked ~ .lp-pays__panels .lp-pays__panel--4 {
  display: grid;
  animation: lp-pay-in 180ms ease both;
}

/* 180ms, inside the file's existing prefers-reduced-motion guard (.site * {
   animation: none !important }). It orients the eye after a tab changes; it
   never blocks reading. */
@keyframes lp-pay-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.site .lp-pays__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}
.site .lp-pays__copy h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.site .lp-pays__copy p {
  font-size: var(--fs-card);
  line-height: 1.6;
  color: var(--graphite);
}
/* Specificity: .site .lp-pays__copy p is (0,2,1) and would otherwise win, leaving
   the fine print at body size and body colour. */
.site .lp-pays__copy .lp-pays__fine {
  font-size: var(--fs-meta);
  line-height: 1.55;
  color: var(--slate);
}

.site .lp-mock {
  margin: 0;
  min-width: 0;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.site .lp-mock__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.site .lp-mock__title {
  font-size: var(--fs-ui);
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}
.site .lp-mock__flag {
  margin-left: auto;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  background: var(--status-risk-bg);
  color: var(--status-risk-text);
  font-size: var(--fs-meta);
  font-weight: 600;
}
.site .lp-mock__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}
.site .lp-mock__rows { display: flex; flex-direction: column; }
.site .lp-mock__rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-ui);
}
.site .lp-mock__rows li:first-child { border-top: 0; }
.site .lp-mock__k { color: var(--graphite); min-width: 0; overflow-wrap: anywhere; }
.site .lp-mock__v {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--ink);
}
.site .lp-mock__note {
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--slate);
}

@media (max-width: 1023px) {
  .site .lp-pays__panel { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
}
@media (max-width: 759px) {
  .site .lp-pays__head h2 { font-size: var(--fs-h2-sm); }
  .site .lp-pays__tab { flex: 1 1 auto; padding: var(--space-2) var(--space-4); }
  .site .lp-pays__panel { padding: var(--space-5); }
  .site .lp-mock__rows li { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  /* The auto margin wraps the flag onto its own line and then shoves it to the
     far right, which reads as a stray chip. On one line it sits beside the tag. */
  .site .lp-mock__flag { margin-left: 0; }
}

/* ==========================================================================
   LANDING v4 — sections 04-07, the closing CTA and the footer
   design/landing/soil-landing-v4.pdf pages 3-5.
   --------------------------------------------------------------------------
   Appended, like the two blocks above it; nothing before this line was edited.
   This block owns, and only owns: .lp-teams / .lp-teamcards, .lp-band,
   .lp-security / .lp-sixcards, the pricing deltas, .lp-ctaband and .lp-footer--dark.

   Conventions, matching the rest of this file and CLAUDE.md:
   * Every colour is a token. The literals below are all inside :root, which is
     where this stylesheet keeps them; the site has one theme (color-scheme:
     light at the top of this file) and the dark bands are dark in it by design,
     which is why they get --band-dark / --surface-ink and not an inverting text
     token.
   * Spacing is --space-1..7 (4/8/12/16/24/32/48), introduced here because this
     stylesheet had no spacing scale at all. Type sizes stay literal px, as the
     rest of this file and CLAUDE.md's type scale (64/40/22/17/14/12) both do.
   * No inline styles and no new utility classes: every rule below is a named
     component class.
   ========================================================================== */

:root {
  /* Spacing scale (CLAUDE.md: --space-1..7 = 4/8/12/16/24/32/48). */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* The signature dark band and the flat ink surface under it, named as CLAUDE.md
     names them. Both are dark in every theme this site has; neither inverts. */
  --band-dark: linear-gradient(180deg, #0E1116 0%, #151920 100%);
  --surface-ink: #0E1116;
  /* A card plate that reads as raised against --band-dark without a shadow, since
     a shadow is invisible on ink. */
  --ink-card: #171C25;

  /* Module colours (CLAUDE.md): one per business module, used here for the dot on
     a team card -- a chip, never a fill behind body text and never a button. */
  --module-engineering: #24452A;
  --module-sales: #22346B;
  --module-customers: #5A4222;
  --module-finance: #1F4A52;
  --module-people: #43305F;

  /* Level 1 of the three-level elevation scale: the card. */
  --shadow-1: 0 1px 2px rgba(14, 17, 22, .06), 0 1px 1px rgba(14, 17, 22, .04);

  --radius-pill: 999px;
  --dot: 10px;
}

/* ---------- centred section head (04, 05, 06, 07) ---------- */

.site .lp-sechead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: 720px;
  margin: 0 auto var(--space-7);
  text-align: center;
}
.site .lp-sechead h2 {
  font-size: 40px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.03em;
}
/* .lp-section__lede carries grid-column: 8 / span 5 for the two-column heads
   further up this file. Inside a flex column that is inert, but it is reset
   anyway so the rule cannot surprise anyone who later wraps this in a grid. */
.site .lp-sechead__lede { grid-column: auto; }
/* An auto margin on a column-flex child suppresses align-items: stretch
   (CLAUDE.md), so the pill is sized with align-self, not with a margin. */
.site .lp-sechead .lp-kicker { align-self: center; width: fit-content; }

.site .lp-kicker--index {
  font-size: 12px;
  letter-spacing: 0.14em;
}

/* ---------- the dark bands ---------- */

.site .lp-band {
  background: var(--band-dark);
  color: var(--white);
  padding: 96px 0;
}
/* On ink, the file-wide `a:hover { color: var(--signal) }` measures 3.5:1 against
   the band and fails the 4.5:1 bar. Inside a band a link goes to white on hover
   instead -- the hover state must not be the one that cannot be read. */
.site .lp-band a:hover { color: var(--white); }

@media (max-width: 759px) { .site .lp-band { padding: 56px 0; } }

/* ---------- 04 · built for every team ---------- */

.site .lp-teamcards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}
.site .lp-teamcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.site .lp-teamcard__dot {
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  /* --module is set per card below; ink is the fallback, and the one Founders
     keeps on purpose -- "the whole company" is not one of the five modules. */
  background: var(--module, var(--ink));
}
.site .lp-teamcard--sales { --module: var(--module-sales); }
.site .lp-teamcard--engineering { --module: var(--module-engineering); }
.site .lp-teamcard--finance { --module: var(--module-finance); }
.site .lp-teamcard--people { --module: var(--module-people); }

.site .lp-teamcard__name {
  font-size: 16px;
  font-weight: 600;
  /* A card name is short and ours, but the rule is cheap and the trap is real. */
  min-width: 0;
  overflow-wrap: anywhere;
}
.site .lp-teamcard p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--graphite);
}
/* CLAUDE.md's honesty rule: a module that is not built says so on the card, in
   words, rather than being quietly presented as shipped. Neutral, not a module
   tint -- the badge is about time, not about which area it belongs to. */


@media (max-width: 1023px) {
  .site .lp-teamcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .site .lp-teamcards { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 06 · security, on ink ---------- */

.site .lp-security .lp-sechead h2 { max-width: 620px; }

.site .lp-sixcards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}
.site .lp-sixcard {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-5);
  background: var(--ink-card);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
}
.site .lp-sixcard strong { font-size: 16px; font-weight: 600; color: var(--white); }
/* 11.3:1 against --ink-card, measured. */
.site .lp-sixcard p { font-size: 14px; line-height: 1.6; color: var(--ink-text); }

@media (max-width: 900px) {
  .site .lp-sixcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .site .lp-sixcards { grid-template-columns: minmax(0, 1fr); }
  .site .lp-sixcard { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: var(--space-4); }
  .site .lp-sixcard__icon { grid-row: span 2; }
}
.site .lp-sixcard__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 4px; border: 1px solid color-mix(in srgb, var(--lp-ok-on-dark) 25%, transparent); border-radius: var(--radius); color: var(--lp-ok-on-dark); background: color-mix(in srgb, var(--lp-ok-on-dark) 12%, transparent); }

/* ---------- 07 · pricing, deltas only ---------- */

/* --ink-muted on white measures 2.6:1. The badge is the only text on a plan card
   that was set in it, and it has to be read, so it moves to --slate (5.9:1) and
   gains the plate the reference design draws around it. */


/* v4 sets the plan features as plain lines, not a bulleted list. */


/* The plan cards stretch to a common height and the features list is the flex child
   that grows, so on the tallest card the button was the one that shrank -- measured
   26px against the 48px the other two kept. A button is never the thing that gives
   way, and below 900px this file's own rule asks for 44px minimum. */

/* The Rs line sits under the features in v4, so it needs its own top margin
   rather than the baseline gap it had when it lived in the card head. */


/* ---------- closing CTA ---------- */

.site .lp-ctaband__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
}
.site .lp-ctaband h2 {
  flex: 0 1 auto;
  max-width: 620px;
  font-size: 48px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.035em;
}
.site .lp-ctaband__lede {
  max-width: 620px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-text);
}
.site .lp-ctaband__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
/* The reference design draws this pill in Signal blue and it now IS that pill: the
   class beside this one is .btn-signal, the single blue-button exception CLAUDE.md
   names and tests/test_site_landing.py pins. The white override that used to sit
   here is gone, so this rule only sets the shape -- the fill comes from the shared
   class, and the exception is still exactly one class wide. */
.site .lp-ctaband__btn {
  border-radius: var(--radius-pill);
  padding: 0 28px;
}
/* The no-scheduling-link state: disabled, and the reason beside it in words.
   --ink-muted on --ink-card measures 6.8:1, so "unavailable" is still readable --
   a control nobody can read is not an explanation. */
.site .lp-ctaband__btn[disabled] {
  background: var(--ink-card);
  color: var(--ink-muted);
  border-color: var(--ink-line);
  cursor: not-allowed;
  opacity: 1;
}


@media (max-width: 759px) {
  .site .lp-ctaband h2 { font-size: 32px; }
  .site .lp-ctaband__action { width: 100%; align-items: center; }
  .site .lp-ctaband__btn { width: 100%; }
}

/* ---------- footer, continuous with the CTA band ---------- */

.site .lp-footer--dark {
  padding: var(--space-6) 0;
  background: var(--surface-ink);
  border-top: 1px solid var(--ink-line);
  color: var(--ink-text);
}
.site .lp-footer__logo {
  --accent: var(--signal-on-dark);
  color: var(--white);
}
.site .lp-footer--dark .lp-footer__brand p { font-size: 14px; color: var(--ink-text); }

/* `nav a { min-height: 44px }` further up this file cannot grow an inline link, so
   the footer's links are given a box to grow. */
@media (max-width: 900px) {
}
@media (max-width: 759px) {
}

/* ==========================================================================
   LANDING v4 — EXACT.  The owner's pass over the three agents' v4 build.
   design/landing/soil-landing-v4.pdf, all five pages (2026-10-05)
   --------------------------------------------------------------------------
   Three agents built v4 and each of them, independently, took a design-system
   rule ("No glow, no neon, no rainbow gradients"; "a blue button is a bug";
   "the five module colours ARE the five source-tint hues") and deleted a piece
   of the drawing with it.  The owner looked at the result and said "I told you
   to build exactly this".  The owner's instruction outranks those judgements,
   so this block puts the drawing back.  Each departure from CLAUDE.md is named
   here and recorded in docs/BUILD_LOG.md and in CLAUDE.md itself — none of them
   is quiet.

   1. THE DARK IS NOT BLACK.  Every dark surface in the PDF samples between
      #0B0F1B and #0F131F: a deep blue-black, not the near-neutral #080A0F /
      #0E1116 that shipped.  The tokens are re-pointed, which moves the nav, the
      hero, the 02 band, the promises band, 06 security, the closing CTA and the
      footer together.  Every text token was re-measured against the new
      surfaces: the worst pair is --ink-muted on --lp-raise at 6.26:1.

   2. THE ARCS AND THE GLOW ARE THE DESIGN, NOT DECORATION.  The PDF draws
      concentric arcs of coloured light behind the hero product shot and behind
      the closing CTA, a blue pool under the primary button, a violet bloom in
      the top-right of the promises band, and a blue-violet sphere in the middle
      of the 02 diagram.  CLAUDE.md's "no glow, no neon, no rainbow gradients"
      was read as forbidding them; the owner's drawing is the authority on its
      own page.  Every arc and glow below is a token on :root, so there is one
      place to change them, and none of them sits under body text at a strength
      that costs contrast — see the measured note on --lp-glow-core.

   3. ONE BLUE BUTTON CLASS, USED THREE TIMES.  CLAUDE.md allows Signal blue on
      exactly one button class, .btn-signal, and tests/test_site_landing_top.py
      holds that.  The PDF draws three blue pills: the hero's "Book a demo", the
      closing band's "Book a demo" and the Design partner card's "Apply now".
      All three are now that same one class, so the exception is still ONE class
      and the test still pins it — the set did not widen, the class is simply
      used where the design uses it.

   4. THE MARKETING SITE'S MODULE ACCENTS ARE THE PDF'S, NOT --module-*.
      CLAUDE.md's five --module-* hues are the Strata source-tint text hues
      re-pointed at the five business modules, and they are what the APP uses.
      The PDF draws a different, lighter family for the same five modules —
      Sales orange, Customers amber, Engineering violet, Finance green, People
      pink — on the product shot's filter chips and on the 04 team-card dots.
      They are declared here as --lp-mod-* and used by the marketing site ONLY.
      soil.css and the app are untouched.  CLAUDE.md records the split.
   ========================================================================== */

:root {
  /* ---- 1. the deep blue-black the PDF actually draws --------------------- */
  --lp-ink: #0B0F1B;
  --lp-ink-2: #10141F;
  --lp-raise: #1A1F2E;
  --lp-raise-line: #2C3448;
  --ink-line: #232A3C;
  --ink-card: #161B2A;

  /* ---- 2. decorative light ---------------------------------------------- */
  /* The arc strokes.  Thin, and deliberately placed where the product shot and
     the page gutters are, not under running text. */
  --lp-arc-1: rgba(150, 140, 255, 0.34);
  --lp-arc-2: rgba(118, 132, 255, 0.26);
  --lp-arc-3: rgba(86, 110, 230, 0.18);
  /* The pools.  --lp-glow-core is the brightest thing on the page that text can
     sit on; at full strength it composites to about #292F63, where the smallest
     text token (--lp-on-dark-3) still measures 4.82:1.  It is not taken higher
     than that anywhere a sentence can land. */
  --lp-glow-core: rgba(43, 89, 255, 0.34);
  --lp-glow-violet: rgba(104, 74, 214, 0.46);
  --lp-glow-wash: rgba(60, 54, 150, 0.22);
  /* The halo under a blue pill. */
  --lp-btn-glow: 0 8px 28px rgba(43, 89, 255, 0.45), 0 18px 64px rgba(43, 89, 255, 0.28);
  /* The 02 diagram's sphere. */
  --lp-sphere-core: #1C2752;
  --lp-sphere-mid: #121A3A;

  /* ---- 4. the marketing site's module accents, read off the PDF ---------- */
  --lp-mod-sales-bg: #FEF0E7;        --lp-mod-sales-text: #8B4224;        --lp-mod-sales-dot: #EF6C3D;
  --lp-mod-customers-bg: #FEF5DA;    --lp-mod-customers-text: #795010;    --lp-mod-customers-dot: #F0A830;
  --lp-mod-finance-bg: #E1F5EA;      --lp-mod-finance-text: #126746;      --lp-mod-finance-dot: #1AA06D;
  --lp-mod-engineering-bg: #EDEAFD;  --lp-mod-engineering-text: #4734A2;  --lp-mod-engineering-dot: #6A46F2;
  --lp-mod-people-bg: #FBEAF2;       --lp-mod-people-text: #7B2B51;       --lp-mod-people-dot: #D6488D;
  /* The sixth pastel: the three Google/Slack marks in the tool row sit on it.
     It is not a module, so it has no text or dot partner. */
  --lp-tint-sky: #EDF1FD;
  /* The 02 outcome dots.  Four states, four of the hues above. */
  --lp-dot-red: #E14B52;
  --lp-dot-blue: #4680F7;
}

/* The dark bands further down the page read their surface through these three
   names, declared on .site because that is where the second v4 block put them
   and .site outranks :root. */
.site {
  --surface-ink: var(--lp-ink);
  --band-dark: linear-gradient(180deg, var(--lp-ink) 0%, var(--lp-ink-2) 100%);
  --ink-soft: var(--lp-ink-2);
}

/* ---------- the window itself ----------
   site.css had no reset for the browser's default `body { margin: 8px }`, and
   html/body kept their transparent background.  Measured at a 1440 viewport:
   body was 1424 wide at left 8, so every full-bleed dark band stopped 8px short
   of the window and the browser's white showed down both edges and across the
   top.  The page opens on the ink nav and closes on the ink footer, so html and
   body take the band colour too and an over-scroll bounce no longer flashes
   white at either end. */
html, body {
  margin: 0;
  padding: 0;
  background: var(--lp-ink);
}

/* ==========================================================================
   Page 1 · the hero: arcs, the pool under the button, the cropped shot
   ========================================================================== */

/* The arcs live on a pseudo-element rather than in .lp-hero's own background so
   the product shot, the floating cards and every word sit in front of them. */
.site .lp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.site .lp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 104%, transparent 52.6%, var(--lp-arc-1) 54.0%, transparent 55.6%),
    radial-gradient(circle at 50% 104%, transparent 59.4%, var(--lp-arc-2) 60.8%, transparent 62.6%),
    radial-gradient(circle at 50% 104%, transparent 66.6%, var(--lp-arc-3) 68.2%, transparent 70.2%),
    radial-gradient(circle at 50% 104%, var(--lp-glow-wash) 0%, transparent 56%),
    radial-gradient(48% 22% at 50% 40%, var(--lp-glow-core) 0%, transparent 74%);
}
.site .lp-hero__wrap,
.site .lp-shot__wrap { position: relative; z-index: 1; }

/* The glow under the primary pill.  The PDF draws it; the first build dropped
   it under "no glow".  Anchored to the button so it tracks it at any width. */
.site .lp-hero__demo:not([disabled]) { box-shadow: var(--lp-btn-glow); }

/* The PDF crops the product shot at the fold: the band's bottom edge cuts
   straight through the panel, with no bottom rounding and no gap.  The build
   showed the panel whole and floating.  Below 1024px the panel is a single
   stacked column and a crop there would hide the half of it that carries the
   why-chain, so the crop is the desktop composition only — which is the one the
   PDF draws. */
@media (min-width: 1024px) {
  .site .lp-shot__wrap { padding-bottom: var(--space-3); }
  .site .lp-shot__app {
    max-height: 505px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  /* One line, in the band's mono fine print, exactly where the PDF puts its own
     mono line.  The full paragraph it replaces is still on the page — it is the
     panel's own stamp and the chip in its header bar — but five lines of grey
     body copy under the shot is not what the drawing shows. */
  .site .lp-shot__caption {
    max-width: none;
    margin-top: var(--space-4);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0;
    color: var(--lp-on-dark-3);
    text-align: center;
  }
  .site .lp-shot__caption strong { font-weight: 500; color: var(--lp-on-dark-2); }
}

/* ==========================================================================
   Page 1 · the tool row's holders
   --------------------------------------------------------------------------
   The product shot's own module chips are not here: the rule that paints them
   is where it has always been, next to the rest of the shot, and it now spends
   the --lp-mod-* tokens declared above.
   ========================================================================== */

/* The PDF draws every connector mark in a soft rounded square tinted towards
   that brand's own colour.  The build used one neutral --canvas square for all
   nine, reasoning that the real logos carry the colour; the drawing disagrees,
   and nine grey squares is what made the row read as a list instead of a shelf.
   Five tints cover nine brands, which is why they are named by colour. */
.site .lp-tool__mark--peach { background: var(--lp-mod-sales-bg); }
.site .lp-tool__mark--lilac { background: var(--lp-mod-engineering-bg); }
.site .lp-tool__mark--sky { background: var(--lp-tint-sky); }
.site .lp-tool__mark--mint { background: var(--lp-mod-finance-bg); }
.site .lp-tool__mark--butter { background: var(--lp-mod-customers-bg); }

/* ==========================================================================
   Page 2 · 02 how it works — the sphere, and the outcome dots
   ========================================================================== */

.site .lp-flow__orb { border-color: var(--ink-line); }

/* The PDF's four outcome dots are red, green, amber and blue.  The build used
   the Strata STATUS text hues, which are correct on white and nearly black on
   a white card inside a dark band — the dots read as four grey specks. */
.site .lp-flow__dot--blocked { background: var(--lp-dot-red); }
.site .lp-flow__dot--ok { background: var(--lp-mod-finance-dot); }
.site .lp-flow__dot--risk { background: var(--lp-mod-customers-dot); }
.site .lp-flow__dot--people { background: var(--lp-dot-blue); }

/* ==========================================================================
   Page 3 · 04 team cards, and the promises band's violet bloom
   ========================================================================== */

.site .lp-teamcard--sales { --module: var(--lp-mod-sales-dot); }
.site .lp-teamcard--engineering { --module: var(--lp-mod-engineering-dot); }
.site .lp-teamcard--finance { --module: var(--lp-mod-finance-dot); }
.site .lp-teamcard--people { --module: var(--lp-mod-people-dot); }

/* ==========================================================================
   Page 4 · 07 pricing — the badge, and the Design partner card
   ========================================================================== */

/* The PDF sets "Most companies" in Signal blue on a Signal tint, in the body font
   at sentence case -- not a grey mono all-caps key.  It is the one mark on the grid
   that says which plan is the answer, so it is the one place on this page that
   Signal blue paints a label.  4.68:1 on the tint, measured. */


/* The Design partner card carries a blue bloom from its lower edge, behind the
   button.  Same pool token as the hero's. */


/* ==========================================================================
   Page 5 · the closing CTA — the big arc, the tile, the blue pill
   ========================================================================== */

.site .lp-ctaband {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.site .lp-ctaband::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 132%, transparent 55.0%, var(--lp-arc-1) 56.6%, transparent 58.4%),
    radial-gradient(circle at 50% 132%, transparent 62.0%, var(--lp-arc-2) 63.8%, transparent 65.8%),
    radial-gradient(circle at 50% 132%, transparent 69.4%, var(--lp-arc-3) 71.4%, transparent 73.6%),
    radial-gradient(circle at 50% 126%, var(--lp-glow-core) 0%, transparent 52%),
    radial-gradient(circle at 50% 132%, var(--lp-glow-wash) 0%, transparent 70%);
}
.site .lp-ctaband__wrap { position: relative; z-index: 1; }

/* The PDF sets this headline larger and on a narrower measure, so it breaks into
   the three lines the drawing shows rather than two. */
.site .lp-ctaband h2 { max-width: 560px; font-size: 54px; }

/* The PDF's closing pill is blue because it is .btn-signal, the one blue button
   class.  Nothing here repaints it -- this adds the halo the PDF draws under it,
   and nothing else. */
.site .lp-ctaband__btn:not([disabled]) { box-shadow: var(--lp-btn-glow); }
/* On the glow, the mono fine print moves one step up the scale: --ink-muted
   measures 4.22:1 against the brightest part of the pool and --lp-on-dark-2
   measures 6.26:1 there. */
.site .lp-hero__fine { color: var(--lp-on-dark-2); }

/* ---------- the footer, on the same ink as the band above it ---------- */
.site .lp-footer--dark { border-top-color: var(--ink-line); }

/* ==========================================================================
   THE 30-SECOND TOUR — site/_tour.html (docs/SOIL_CHIEF.md Step 9)

   Four numbered steps: copy on the left, a labelled sample panel on the right,
   alternating sides above 1023px so the eye zig-zags down the four rather than
   reading four identical rows.

   This block keeps the same three promises the LANDING PAGE v4 block's header
   makes, and tests/test_trust_page.py applies two of them to THIS block by name
   (the third, the dark-band contrast check, has nothing to check here -- there is
   no dark surface in the tour):
     * no literal colour outside :root -- every colour is a token declared above;
     * no raw pixel spacing -- margin/padding/gap are --space-1..7 only.
   Type sizes, hairlines and the one fixed panel width stay in px, exactly as the
   rest of this stylesheet does.

   No new token is declared here at all. --canvas / --line / --line-soft / --ink /
   --graphite / --slate / --white / --signal and the --space-*, --fs-* and
   --radius* scales all come from the blocks above.
   ========================================================================== */

.site .lp-tour__head {
  max-width: var(--measure-head);
  margin: 0 auto var(--space-7);
  text-align: center;
}
.site .lp-tour__head h2 {
  font-size: var(--fs-h2);
  line-height: 1.1;
  margin: var(--space-3) 0 var(--space-4);
}
.site .lp-tour__lede {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--graphite);
  margin: 0;
}

.site .lp-tour__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.site .lp-tour__step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6);
}
/* The zig-zag: on the even steps the panel is drawn first, so it lands on the
   left. Order, never direction, so the reading order in the DOM -- copy, then the
   panel it describes -- is the order a screen reader gets on every step. */
.site .lp-tour__step:nth-child(even) .lp-tour__panel { order: -1; }

.site .lp-tour__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--slate);
  margin-bottom: var(--space-2);
}
.site .lp-tour__copy h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  margin: 0 0 var(--space-3);
}
.site .lp-tour__copy p {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--graphite);
  margin: 0;
}

/* ---------- the sample panel ---------- */

.site .lp-tour__panel {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.site .lp-tour__panelhead {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
}
.site .lp-tour__screen {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate);
  min-width: 0;
  overflow-wrap: anywhere;
}
/* The "Sample data" chip is pushed to the far edge of the panel's own header, so
   it is the last thing read on the line that names the screen -- the label has to
   be beside the data, not only in the section lede a screen above it. */
.site .lp-tour__panelhead .lp-tag { margin-left: auto; flex: none; }

.site .lp-tour__body {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
}
.site .lp-tour__line {
  font-size: var(--fs-card);
  line-height: 1.5;
  color: var(--graphite);
  margin: 0;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line-soft);
  min-width: 0;
  overflow-wrap: anywhere;
}
.site .lp-tour__line:first-child { border-top: 0; padding-top: 0; }
.site .lp-tour__line--lead { color: var(--ink); }
.site .lp-tour__line strong { color: var(--ink); font-weight: 600; }

.site .lp-tour__when {
  display: inline-block;
  min-width: 56px;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--slate);
}

/* The asked question, set apart from the answer under it the way /ask sets it
   apart: the question is the reader's words, the lines below are Soil's. */
.site .lp-tour__ask {
  font-size: var(--fs-card);
  line-height: 1.5;
  color: var(--ink);
  font-weight: 600;
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line-soft);
}

.site .lp-tour__cites {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
}
.site .lp-tour__fresh {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--slate);
}

/* The exact words a tap would send. Quoted, indented off a rule, and never
   restyled into something that could be mistaken for Soil's own prose. */
.site .lp-tour__quote {
  font-size: var(--fs-card);
  line-height: 1.6;
  color: var(--ink);
  margin: var(--space-3) 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--line);
  min-width: 0;
  overflow-wrap: anywhere;
}

.site .lp-tour__stamp {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--slate);
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
}

@media (max-width: 1023px) {
  /* One column, and the zig-zag has to be reset with it: `order: -1` on a
     single-column grid would put every even step's panel ABOVE the sentence that
     explains it. */
  .site .lp-tour__step { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .site .lp-tour__step:nth-child(even) .lp-tour__panel { order: 0; }
}
@media (max-width: 759px) {
  .site .lp-tour__head { margin-bottom: var(--space-6); text-align: left; }
  .site .lp-tour__head h2 { font-size: var(--fs-h2-sm); }
  .site .lp-tour__steps { gap: var(--space-6); }
  /* At 390px "Sample data" and the screen name do not fit on one line, and the
     auto margin would hold the chip at the far right of its own second line. */
  .site .lp-tour__panelhead { flex-wrap: wrap; }
  .site .lp-tour__panelhead .lp-tag { margin-left: 0; }
}

@media (max-width: 759px) {
  .site .lp-nav__wrap { height: 64px; gap: var(--space-3); }
  .site .lp-nav__actions { gap: var(--space-2); }
  .site .lp-nav__signin { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.site .lp-hero { padding: 72px 0 80px; }

.site .lp-hero h1 {
  font-size: 64px;
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.site .lp-hero__fine { font-size: 13px; line-height: 1.55; color: var(--slate); }

@media (max-width: 759px) {
  .site .lp-hero { padding: 40px 0 48px; }
  .site .lp-hero h1 { font-size: 40px; letter-spacing: -0.03em; }

}

.site .lp-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--status-ok-text);
  flex-shrink: 0;
}

.site .lp-briefcard span:not([class]) { font-size: 13px; color: var(--ink-muted); }
.site .lp-briefcard--lead span:not([class]) { color: var(--slate); }

.site .lp-why {
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.site .lp-why__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }

.site .lp-src {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.site .lp-src--tickets { background: var(--tint-tickets-bg); color: var(--tint-tickets-text); }
.site .lp-src--code { background: var(--tint-code-bg); color: var(--tint-code-text); }

@media (max-width: 759px) {

  .site .lp-why { padding: 16px; }

}

/* ==========================================================================
   Tool row
   ========================================================================== */

.site .lp-tools { padding: 32px 0; border-top: 1px solid var(--line-soft); }
.site .lp-tools__wrap {
  max-width: var(--max-width-wide);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.site .lp-tools__lede { font-size: 14px; color: var(--slate); }
.site .lp-tools__list {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.site .lp-tools__list li {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

@media (max-width: 759px) {
  .site .lp-tools { padding: 28px 0; }
  .site .lp-tools__list { gap: 12px 20px; }
  .site .lp-tools__list li { font-size: 16px; }
}

.site .lp-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
  background: var(--white);
  border: 1px solid var(--border-btn);
  border-radius: var(--radius);
  padding: 3px 7px;
}

/* ==========================================================================
   Pricing
   ========================================================================== */

















/* .lp-plan__cta--light is gone: the Design partner button is the blue .btn-signal
   the PDF draws, so the white-pill override it carried has nothing left to style. */



@media (max-width: 1023px) { .site .lp-plans { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 759px) {

  .site .lp-plan { padding: 20px; }

}

/* ==========================================================================
   Closing CTA + footer
   ========================================================================== */

.site .lp-ctaband { padding-top: 0; }

.site .lp-ctaband h2 {
  flex: 1 1 420px;
  max-width: 560px;
  font-size: 48px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.035em;
}
.site .lp-ctaband__action { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.site .lp-ctaband__btn { background: var(--white); color: var(--ink); border: 1px solid var(--white); }
.site .lp-ctaband__btn:hover { color: var(--ink); opacity: 0.9; }

.site .lp-footer { padding: 40px 0 48px; border-top: 1px solid var(--line); }
.site .lp-footer__brand { display: flex; flex-direction: column; gap: 12px; }
.site .lp-footer__brand p { font-size: 14px; color: var(--slate); }

@media (max-width: 759px) {

  .site .lp-ctaband h2 { flex: 1 1 100%; font-size: 32px; }
  .site .lp-ctaband__action { width: 100%; align-items: stretch; }
  .site .lp-ctaband__btn { width: 100%; }
}

@media (max-width: 759px) {
  .site .lp-why__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

}

/* The phone menu is a <summary>, which the focus-visible rule near the top of this
   file (button / a / input) does not cover. It is the only keyboard-operable
   control on the page that is neither a link nor a button, so it needs the ring
   named explicitly rather than inherited. */
.site summary:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

/* At 390px the footer's three links plus the copyright do not fit one row, and the
   copyright wrapped to a second line still indented to where it had been — reading
   as a stray fourth link rather than a legal line. It gets its own full-width row
   below the links instead. */
@media (max-width: 759px) {
}

/* The tools strip carries the real brand marks beside each name. A logo needs a bit
   more room than a word, so the row gets its own alignment and gap rather than
   inheriting the text-only spacing it had when these were just names. */
.site .lp-tools__list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.site .lp-tools__list img {
  width: 20px;
  height: 20px;
  flex: none;
  /* Brand marks are the one place colour is not Soil's to choose, so they are shown
     as the vendor draws them -- no filter, no tint, no greyscale. */
}

/* ==========================================================================
   LANDING PAGE v4 — the top of the page (nav, hero, product shot, tool row)
   design/landing/soil-landing-v4.pdf page 1.  Appended as one clearly-marked
   block, as three agents were rebuilding this stylesheet at once and an append
   is the one edit that cannot collide mid-file.

   SINGLE THEME, STATED OUT LOUD.  This stylesheet declares `color-scheme: light`
   at the top and has no `prefers-color-scheme: dark` block and no
   `[data-theme="dark"]` block; site/base.html does not load theme.js either. The
   marketing site is deliberately one theme, so the "correct in both themes" rule
   has nothing to bite on here. That is also why tests/test_css_theming.py reads
   soil/web/static/soil.css and not this file. The dark band below is therefore
   dark in the only theme there is -- it is painted from tokens all the same, so
   that if this site ever gains a theme there is one place to change.

   Everything new below is a token declared in the :root block that opens this
   section. No literal colour sits on a rule, and no raw pixel value is used for
   spacing.

   ONE DELIBERATE DEPARTURE FROM CLAUDE.md, flagged rather than hidden.
   CLAUDE.md's design system says of the Signal blue: "Never a button colour,
   never decoration. A blue button is a bug." The v4 design's primary call to
   action is a blue pill, and the brief for this rebuild names it twice. It is
   built as designed, in `--signal` so at least it is the brand's own blue and not
   a second one, under a class named `btn-signal` so it is greppable. The glow
   behind it in the PDF is NOT reproduced (CLAUDE.md: "No glow, no neon"), and
   neither are the coloured arcs behind the product shot; the band uses the
   sanctioned "subtle top-to-bottom gradient" instead. Someone has to reconcile
   the rule and the design -- see docs/BUILD_LOG.md.
   ========================================================================== */

:root {
  /* Spacing, named the way CLAUDE.md names it. This stylesheet predates the
     scale and still carries raw pixels above; everything in THIS block uses the
     tokens. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* The dark band. Darker than --ink so the white product shot lifts off it,
     with the gradient CLAUDE.md allows for the signature band. */
  --lp-ink: #080A0F;
  --lp-ink-2: #111520;
  --lp-raise: #1A1E29;          /* badge and message-card surface */
  --lp-raise-line: #2C3342;
  --lp-on-dark: #F5F7FA;        /* 18.9:1 on --lp-ink */
  --lp-on-dark-2: #BCC3D1;      /* 10.4:1 — the lede */
  --lp-on-dark-3: #99A1B2;      /* 6.9:1 — nav links, mono fine print */
  /* --status-ok-text is 2.6:1 on the dark band: correct on white, invisible here.
     The status dot keeps the same meaning in the lighter step of the same hue. */
  --lp-ok-on-dark: #3FCF8E;

  /* The chip row is the one strip on this page that is wider than the reading
     column, exactly as the design draws it: nine chips do not fit inside
     --max-width, and breaking them 8 + 1 reads as an accident. */
  --max-width-wide: 1440px;

  --radius-pill: 999px;
  --radius-shot: 16px;

  --lp-shot-shadow: 0 40px 90px -40px rgba(4, 6, 10, 0.85);
  --lp-float-shadow: 0 18px 40px -18px rgba(14, 17, 22, 0.40);
  --signal-hover: #1E42C8;
}

/* ========================================================================== */
/* ---------- landing page content additions ---------- */
.site .lp-announcement { background: var(--ink); color: var(--white); }
.site .lp-announcement__inner { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 44px; padding-block: 6px; }
.site .lp-announcement p { font-size: 13px; line-height: 1.4; }
.site .lp-announcement a { color: var(--ink); background: var(--white); border-radius: 999px; padding: 7px 14px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.site .lp-problem__tools { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; list-style: none; }
.site .lp-problem__tools li { padding: 11px 8px; text-align: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; color: var(--graphite); }
.site .lp-does__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.site .lp-does-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.site .lp-does-card__tag,.site .lp-does-card__soon { color: var(--slate); font: 11px var(--font-mono); }
.site .lp-does-card h3 { font: 600 18px/1.25 var(--font-head); }
.site .lp-does-card p { color: var(--graphite); font-size: 14px; line-height: 1.55; }
.site .lp-does-card small { margin-top: auto; color: var(--slate); font: 10px var(--font-mono); }
.site .lp-does-card b { width: 100%; padding: 12px; border-radius: var(--radius); background: var(--signal-tint); font-size: 13px; line-height: 1.4; }
.site .lp-day__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; list-style: none; margin-top: 24px; }
.site .lp-day__list li { min-width: 0; padding: 20px; border-top: 2px solid var(--signal); background: var(--white); box-shadow: var(--shadow-1); }
.site .lp-day__list time { color: var(--signal); font: 12px var(--font-mono); }
.site .lp-day__list h3 { margin: 14px 0 8px; font: 600 16px/1.3 var(--font-head); }
.site .lp-day__list p { color: var(--graphite); font-size: 13px; line-height: 1.55; }
.site .lp-what { background: var(--signal-tint); }
.site .lp-what h2 { max-width: 760px; margin: 12px 0; font: 600 28px/1.2 var(--font-head); }
.site .lp-what p { max-width: 850px; color: var(--graphite); font-size: 16px; line-height: 1.7; }
.site .lp-security__checks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; list-style: none; }
.site .lp-security__checks li { padding: 12px; border: 1px solid var(--ink-line); border-radius: var(--radius); color: var(--ink-text); font-size: 13px; }
.site .lp-security__checks li::before { content: "✓"; margin-right: 8px; color: var(--signal-on-dark); }
.site .lp-teamcards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.site .lp-teamcard { grid-column: span 2; }
.site .lp-teamcard:nth-child(4) { grid-column: 2 / span 2; }
.site .lp-teamcard:nth-child(5) { grid-column: 4 / span 2; }
.site .lp-teamcard--founders { --module: var(--signal); --module-tint: var(--signal-tint); }
.site .lp-teamcard--sales { --module: var(--tint-tickets-text); --module-tint: var(--tint-tickets-bg); }
.site .lp-teamcard--engineering { --module: var(--tint-code-text); --module-tint: var(--tint-code-bg); }
.site .lp-teamcard--finance { --module: var(--tint-people-text); --module-tint: var(--tint-people-bg); }
.site .lp-teamcard--people { --module: var(--tint-docs-text); --module-tint: var(--tint-docs-bg); }
.site .lp-teamcard__dot { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius); color: var(--white); background: var(--module); box-shadow: 0 6px 16px color-mix(in srgb, var(--module) 25%, transparent); }
.site .lp-teamcard__who { color: var(--slate); font-size: 12px; }
.site .lp-teamcard__example { display: flex; flex-direction: column; gap: 5px; margin-top: auto; padding: 10px 12px; border-radius: var(--radius); background: var(--module-tint); color: var(--module); }
.site .lp-teamcard__example small { font: 10px var(--font-mono); }
.site .lp-teamcard__example b { font-size: 12px; line-height: 1.4; }
.site .lp-teamcard--has-example { gap: 10px; }



.site .lp-faq__list { max-width: 850px; margin-inline: auto; border-top: 1px solid var(--line); }
.site .lp-faq__item { border-bottom: 1px solid var(--line); }
.site .lp-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; cursor: pointer; list-style: none; font-weight: 600; }
.site .lp-faq__item summary h3 { font-size: 16px; font-weight: 600; }
.site .lp-faq__item summary::-webkit-details-marker { display: none; }
.site .lp-faq__icon::before { content: "+"; color: var(--signal); font-size: 22px; }
.site .lp-faq__item[open] .lp-faq__icon::before { content: "−"; }
.site .lp-faq__item p { padding: 0 36px 18px 0; color: var(--graphite); font-size: 14px; line-height: 1.65; }
.site .lp-ctaband__checks { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 22px; margin-top: 14px; list-style: none; color: var(--ink-text); font-size: 12px; }
.site .lp-ctaband__checks li::before { content: "✓"; margin-right: 7px; color: var(--signal-on-dark); }
.site [data-more] > .is-more-hidden { display: none; }
.site .lp-more-button { display: block; margin: 16px auto 0; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--white); cursor: pointer; font: 600 13px var(--font-body); }
.site .lp-security .lp-more-button { color: var(--white); background: var(--ink-soft); border-color: var(--ink-line); }
@media (max-width: 1023px) {
  .site .lp-day__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site .lp-teamcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site .lp-teamcard, .site .lp-teamcard:nth-child(4), .site .lp-teamcard:nth-child(5) { grid-column: auto; }
}
@media (max-width: 759px) {
  .site .lp-announcement__inner { justify-content: space-between; gap: 8px; }
  .site .lp-announcement p { font-size: 11px; }
  .site .lp-problem__tools { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .site .lp-problem__tools li { padding: 9px 4px; font-size: 11px; }
  .site .lp-does__grid { grid-template-columns: minmax(0, 1fr); }
  .site .lp-day__list { grid-template-columns: minmax(0, 1fr); }
  .site .lp-security__checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site .lp-teamcards { grid-template-columns: minmax(0, 1fr); }
  .site .lp-teamcard, .site .lp-teamcard:nth-child(4), .site .lp-teamcard:nth-child(5) { grid-column: auto; }
  .site .lp-ctaband__checks { align-items: flex-start; flex-direction: column; width: fit-content; margin-inline: auto; }
}

/* Landing preview alignment: preserve the site's own type and colour tokens while
   bringing the newly added sections closer to the supplied composition. */
.site .lp-announcement { background: var(--signal); color: var(--white); }
.site .lp-announcement a { color: var(--signal); }
.site .lp-problem__tools { position: relative; z-index: 1; }
.site .lp-problem__tools li { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 8px; background: transparent; border: 0; font-weight: 600; }
.site .lp-problem__tools img { width: 20px; height: 20px; flex: none; }
.site .lp-does-card { box-shadow: var(--shadow-1); }
.site .lp-does-card:nth-child(1) { border-top: 3px solid var(--tint-code-text); }
.site .lp-does-card:nth-child(2) { border-top: 3px solid var(--signal); }
.site .lp-does-card:nth-child(3) { border-top: 3px solid var(--tint-tickets-text); }
.site .lp-does-card:nth-child(4) { border-top: 3px solid var(--tint-people-text); }
.site .lp-does-card:nth-child(5) { border-top: 3px solid var(--status-risk-text); }
.site .lp-does-card:nth-child(6) { border-top: 3px solid var(--status-ok-text); }
.site .lp-does-card b { display: block; }
.site .lp-does-card { --does-color: var(--signal); --does-tint: var(--signal-tint); --does-line: var(--signal-border); gap: 12px; padding: 22px; border-color: var(--does-line); box-shadow: 0 8px 24px var(--does-tint); }
.site .lp-does-card:nth-child(1) { --does-color: var(--tint-docs-text); --does-tint: var(--tint-docs-bg); --does-line: var(--tint-docs-bg); border-top: 1px solid var(--does-line); }
.site .lp-does-card:nth-child(2) { --does-color: var(--signal); --does-tint: var(--signal-tint); --does-line: var(--signal-border); border-top: 1px solid var(--does-line); }
.site .lp-does-card:nth-child(3) { --does-color: var(--tint-conv-text); --does-tint: var(--tint-conv-bg); --does-line: var(--tint-conv-bg); border-top: 1px solid var(--does-line); }
.site .lp-does-card:nth-child(4) { --does-color: var(--tint-people-text); --does-tint: var(--tint-people-bg); --does-line: var(--tint-people-bg); border-top: 1px solid var(--does-line); }
.site .lp-does-card:nth-child(5) { --does-color: var(--status-risk-text); --does-tint: var(--status-risk-bg); --does-line: var(--status-risk-bg); border-top: 1px solid var(--does-line); }
.site .lp-does-card:nth-child(6) { --does-color: var(--tint-tickets-text); --does-tint: var(--tint-tickets-bg); --does-line: var(--tint-tickets-bg); border-top: 1px solid var(--does-line); }
.site .lp-does-card__head { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; }
.site .lp-does-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: none; border-radius: var(--radius); color: var(--white); background: var(--does-color); box-shadow: 0 6px 16px var(--does-tint); }
.site .lp-does-card__tag { color: var(--does-color); }
.site .lp-does-card small { color: var(--does-color); }
.site .lp-does-card b { border: 1px solid var(--does-line); background: var(--does-tint); color: var(--does-color); }
.site .lp-day { background: var(--canvas); border-block: 1px solid var(--line); }
.site .lp-day__list li { display: flex; flex-direction: column; gap: 8px; border-radius: var(--radius-lg); border: 1px solid var(--line); border-top: 3px solid var(--signal); }
.site .lp-day__list li > div { display: flex; flex-direction: column; gap: 8px; }
.site .lp-day__list h3 { margin: 0; }
.site .lp-day__list li:nth-child(2) { border-top-color: var(--tint-tickets-text); }
.site .lp-day__list li:nth-child(3) { border-top-color: var(--status-risk-text); }
.site .lp-day__list li:nth-child(4) { border-top-color: var(--status-blocked-text); }
.site .lp-day__list li:nth-child(5) { border-top-color: var(--status-ok-text); }
.site .lp-teamcard__dot { width: 40px; height: 40px; border-radius: var(--radius); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--module) 28%, transparent); }
.site .lp-teamcard--founders { --module: var(--signal); }
.site .lp-teamcard--sales { --module-tint: var(--tint-tickets-bg); }
.site .lp-teamcard--engineering { --module-tint: var(--tint-code-bg); }
.site .lp-teamcard--finance { --module-tint: var(--tint-people-bg); }
.site .lp-teamcard--people { --module-tint: var(--tint-docs-bg); }
.site .lp-teamcard__dot { background: var(--module-tint, var(--signal-tint)); color: var(--module); }










.site .lp-faq__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; border: 0; }
.site .lp-faq__item { padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.site .lp-faq__item summary { min-height: 64px; }
.site .lp-ctaband h2 { max-width: 760px; }
.site .lp-ctaband { padding: 80px 0; }
.site .lp-ctaband__wrap { gap: var(--space-4); }
.site .lp-ctaband > .wrap > .lp-kicker { align-self: center; }
.site .lp-ctaband__checks { margin-top: var(--space-3); }
.site .lp-ctaband h2 { flex: 0 1 auto; }
.site .lp-what__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: var(--space-7); }
.site .lp-what__heading h2 { max-width: 430px; margin-top: var(--space-3); font: 600 32px/1.15 var(--font-head); }
.site .lp-what__body { display: flex; flex-direction: column; gap: var(--space-4); }
.site .lp-what__body p { max-width: none; margin: 0; color: var(--graphite); font-size: 15px; line-height: 1.7; }
.site .lp-what__topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 4px 0 0; padding: 0; list-style: none; }
.site .lp-what__topics li { display: flex; align-items: baseline; gap: 8px; color: var(--graphite); font-size: 13px; }
.site .lp-what__topics li::before { content: "✓"; flex: none; color: var(--signal); font-weight: 700; }
.site .lp-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--space-6); align-items: start; }
.site .lp-footer__brand { max-width: 270px; align-items: flex-start; }
.site .lp-footer__logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.site .lp-footer__logo strong { color: var(--white); font: 700 22px var(--font-head); }
.site .lp-footer__brand p { color: var(--ink-text); line-height: 1.6; }
.site .lp-footer__group { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.site .lp-footer__group h3 { margin-bottom: 5px; color: var(--white); font: 600 14px var(--font-head); }
.site .lp-footer__group a { color: var(--ink-text); font-size: 13px; }
.site .lp-footer__group a:hover { color: var(--white); }
.site .lp-footer__demo { min-height: 40px; margin-top: 2px; }
.site .lp-footer__demo-reason { max-width: 210px; color: var(--ink-text); font-size: 12px; }
.site .lp-footer__bottom { grid-column: 1 / -1; padding-top: var(--space-4); border-top: 1px solid var(--ink-line); color: var(--ink-muted); font-size: 12px; }
.site .lp-teamcard,.site .lp-does-card,.site .lp-day__list li,.site .lp-sixcard,.site .lp-plan,.site .lp-faq__item { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.site .lp-teamcard:hover,.site .lp-does-card:hover,.site .lp-day__list li:hover,.site .lp-plan:hover { transform: translateY(-2px); border-color: var(--signal-border); box-shadow: 0 0 0 1px var(--signal-border), 0 14px 36px var(--signal-border); }
.site .lp-sixcard:hover { transform: translateY(-2px); border-color: var(--signal-border); box-shadow: 0 0 0 1px var(--signal-border), 0 0 28px var(--signal-border); }
.site .lp-faq__item:hover { border-color: var(--signal); }
.site .lp-more-button { transition: border-color .15s ease, background-color .15s ease; }
.site .lp-more-button:hover { border-color: var(--signal); }
.site .lp-hero .lp-tools { padding: var(--space-4) 0 var(--space-5); border: 0; background: transparent; }
.site .lp-hero .lp-tools__wrap { justify-content: center; gap: 12px 24px; }
.site .lp-hero .lp-tools__lede { flex: 1 1 100%; text-align: center; color: var(--lp-on-dark-2); }
.site .lp-hero .lp-tools__list { justify-content: center; gap: 16px 22px; }
.site .lp-hero .lp-tools__list li { color: var(--lp-on-dark); background: transparent; border-color: transparent; padding-inline: 0; font-size: 14px; }
.site .lp-hero .lp-tool__mark { background: transparent; }

@media (max-width: 759px) {
  .site .lp-ctaband { padding: 56px 0; }
  .site .lp-ctaband h2 { flex: 0 1 auto; }
  /* At phone width the reference uses the three compact Today cards, not the
     desktop tabs, cross-tool detail pane and approval callouts. Keep the same
     sample cards and dark hero, while letting the next section begin at the
     same fold as the preview. */
  .site .lp-shot__wrap { padding-bottom: 0; }
  .site .lp-shot__bar { gap: 8px; padding: 12px; }
  .site .lp-shot__brand { font-size: 15px; }
  .site .lp-shot__count { margin-left: auto; font-size: 12px; }
  .site .lp-shot__watch,
  .site .lp-shot__tabs,
  .site .lp-shot__row:nth-child(n + 4),
  .site .lp-shot__detail,
  .site .lp-shot__wrap .lp-float { display: none; }
  .site .lp-shot__body { display: block; }
  .site .lp-shot__feed { border: 0; }
  .site .lp-shot__row { padding: 12px; }
  .site .lp-shot__caption { margin-top: 12px; font-size: 11px; line-height: 1.4; }
  .site .lp-what__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .site .lp-what__heading h2 { max-width: 100%; font-size: 28px; }
  .site .lp-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
  .site .lp-footer__brand { grid-column: 1 / -1; max-width: 340px; }
  .site .lp-footer__bottom { grid-column: 1 / -1; }
  .site .lp-footer__demo { width: 100%; }
  .site .lp-faq__list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .site .lp-problem__tools li { justify-content: flex-start; }
  .site .lp-day { background: var(--canvas); }
}
@media (max-width: 759px) {
  .site .lp-day { padding-block: 44px; }
  .site .lp-day .lp-sechead { margin-bottom: 24px; }
  .site .lp-day__list li { padding: 16px; }
  .site .lp-day__list li,
  .site .lp-day__list li > div { gap: 6px; }
  .site .lp-security { padding: 44px 0; }
  .site .lp-security .lp-sechead { margin-bottom: 24px; }
  .site .lp-security .lp-sixcard { padding: 12px; }
  .site .lp-footer--dark { padding-block: 24px; }
  .site .lp-footer__grid { row-gap: 16px; }
  .site .lp-footer__group { gap: 6px; }
  .site .lp-footer__group h3 { margin-bottom: 2px; }
}
@media (min-width: 760px) {
  .site { position: relative; }
  .site .lp-announcement__inner { min-height: 50px; }
  .site .lp-nav { position: absolute; z-index: 5; top: 50px; right: 0; left: 0; }
}
@media (max-width: 1100px) {
}
@media (max-width: 759px) {
}
@media (prefers-reduced-motion: reduce) {
  .site .lp-flow__orb::before,
  .site .lp-flow__orb::after { animation: none; }
  .site .lp-teamcard:hover,.site .lp-does-card:hover,.site .lp-day__list li:hover,.site .lp-sixcard:hover,.site .lp-plan:hover { transform: none; }
}

/* Updated problem screen: four example cards in the supplied bento layout. */
.site .lp-problem__bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1120px; margin: 40px auto 0; }
.site .lp-problem__card { display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow: hidden; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); box-shadow: 0 12px 36px var(--signal-tint); transition: transform .2s, box-shadow .2s; }
.site .lp-problem__card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--signal-border), 0 20px 50px var(--signal-tint); }
.site .lp-problem__card--tools,.site .lp-problem__card--promises { grid-column: span 2; }
.site .lp-problem__tag { align-self: flex-start; padding: 3px 9px; border: 1px solid var(--status-blocked-bg); border-radius: 999px; color: var(--status-blocked-text); background: var(--status-blocked-bg); font: 500 10px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.site .lp-problem__card h3 { margin: 0; font: 700 22px/1.15 var(--font-head); letter-spacing: -.02em; }
.site .lp-problem__sub { margin: 0; color: var(--graphite); font-size: 14px; line-height: 1.5; }
.site .lp-problem__silo { margin-top: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--canvas); }
.site .lp-problem__tools { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; list-style: none; }
.site .lp-problem__tools li { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; color: var(--graphite); font-size: 11px; }
.site .lp-problem__tools img { width: 18px; height: 18px; flex: none; }
.site .lp-problem__tools li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site .lp-problem__bus { display: flex; align-items: center; gap: 0; margin: 10px -12px 0; }
.site .lp-problem__busline { flex: 1; height: 3px; border-radius: 2px; background-image: linear-gradient(90deg, rgba(43,89,255,.15), var(--signal)); box-shadow: 0 0 12px 1px rgba(43,89,255,.55); }
.site .lp-problem__busline:last-child { background-image: linear-gradient(90deg, var(--signal), rgba(43,89,255,.15)); }
.site .lp-problem__hub { position: relative; z-index: 0; display: inline-flex; align-items: center; gap: 10px; width: fit-content; margin: 0 auto; padding: 12px 22px; border: 1px solid rgba(124,155,255,.7); border-radius: 999px; color: #C9CDD6; background: var(--ink); font-size: 14px; box-shadow: 0 0 0 4px rgba(43,89,255,.18), 0 0 24px 4px rgba(43,89,255,.55), 0 0 60px 12px rgba(43,89,255,.35), 0 16px 40px rgba(43,89,255,.3); animation: lp-problem-hubglow 2.8s ease-in-out infinite; }
.site .lp-problem__hub::before { content: ""; position: absolute; inset: -14px; z-index: -1; border-radius: 999px; background: radial-gradient(closest-side, rgba(43,89,255,.35), rgba(43,89,255,0)); filter: blur(8px); }
.site .lp-problem__hub strong { color: var(--white); font: 700 20px var(--font-head); letter-spacing: -.03em; }
.site .lp-problem__hub span { color: #C9CDD6; font-size: 14px; }
@keyframes lp-problem-hubglow { 0%,100% { box-shadow: 0 0 0 4px rgba(43,89,255,.18), 0 0 24px 4px rgba(43,89,255,.5), 0 0 60px 12px rgba(43,89,255,.3), 0 16px 40px rgba(43,89,255,.3); } 50% { box-shadow: 0 0 0 6px rgba(43,89,255,.24), 0 0 34px 8px rgba(43,89,255,.7), 0 0 90px 20px rgba(43,89,255,.45), 0 16px 40px rgba(43,89,255,.35); } }
@media (prefers-reduced-motion: reduce) { .site .lp-problem__hub { animation: none; } }
.site .lp-problem__fix { display: flex; align-items: flex-start; gap: 9px; margin: auto 0 0; padding-top: 12px; border-top: 1px dashed var(--line); color: var(--ink); font-size: 13px; line-height: 1.5; }
.site .lp-problem__fix > span:first-child,.site .lp-problem__approval > span { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; border-radius: 50%; color: var(--white); background: var(--signal); font-weight: 700; }
.site .lp-problem__fix b { color: var(--signal); }
.site .lp-problem__viz { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 10px; margin-top: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--canvas); }
.site .lp-problem__sample { color: var(--slate); font: 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.site .lp-problem__invoice { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; padding: 12px 14px; border: 1px solid var(--status-blocked-bg); border-radius: 12px; background: var(--white); }
.site .lp-problem__invoice > span { display: flex; flex-direction: column; }
.site .lp-problem__invoice > span b { font-size: 14px; }
.site .lp-problem__invoice em { color: var(--slate); font-size: 12px; font-style: normal; }
.site .lp-problem__invoice > strong { font: 700 18px var(--font-head); }
.site .lp-problem__overdue { grid-column: 1 / -1; justify-self: start; padding: 3px 9px; border-radius: 999px; color: var(--status-blocked-text); background: var(--status-blocked-bg); font-size: 11px; }
.site .lp-problem__connector { width: 2px; height: 12px; margin: 0 auto; background: var(--signal-border); }
.site .lp-problem__approval { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid var(--signal-border); border-radius: 12px; background: var(--white); color: var(--ink); font-size: 13px; font-weight: 600; }
.site .lp-problem__chat { align-items: flex-start; gap: 7px; }
.site .lp-problem__bubble { max-width: 100%; padding: 7px 11px; border: 1px solid var(--line); border-radius: 12px 12px 12px 4px; background: var(--white); color: var(--slate); font-size: 13px; }
.site .lp-problem__bubble:nth-of-type(3) { margin-left: 18px; }
.site .lp-problem__bubble:nth-of-type(4) { margin-left: 36px; }
.site .lp-problem__answer { align-self: stretch; margin-left: 0 !important; border-color: var(--signal-border); border-radius: 12px 12px 4px 12px; box-shadow: 0 6px 18px var(--signal-tint); color: var(--ink); font-weight: 600; line-height: 1.45; }
.site .lp-problem__answer b { margin-right: 4px; color: var(--signal); font: 700 14px var(--font-head); }
.site .lp-problem__answer em { display: block; margin-top: 4px; color: var(--slate); font: 10px var(--font-mono); font-style: normal; letter-spacing: .08em; }
.site .lp-problem__promise-row { display: flex; align-items: stretch; gap: 14px; margin-top: 4px; }
.site .lp-problem__timeline { flex: 1.3; }
.site .lp-problem__track { position: relative; height: 10px; border-radius: 6px; background: var(--line); }
.site .lp-problem__track i:first-child { position: absolute; top: -5px; left: 58%; width: 2px; height: 20px; border-radius: 1px; background: var(--ink); }
.site .lp-problem__track i:last-child { position: absolute; top: 0; right: 6%; bottom: 0; left: 62%; border-radius: 6px; background: linear-gradient(90deg, var(--status-risk-bg), var(--status-blocked-text)); }
.site .lp-problem__dates { display: flex; justify-content: space-between; gap: 8px; color: var(--slate); font: 10px var(--font-mono); }
.site .lp-problem__dates b { color: var(--status-blocked-text); }
.site .lp-problem__promise-copy { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 6px; }
@media (max-width: 1000px) {
  .site .lp-problem__bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site .lp-problem__card--tools { grid-column: 1 / -1; }
  .site .lp-problem__card--promises { grid-column: auto; }
  .site .lp-problem__promise-row { flex-direction: column; }
}
@media (max-width: 759px) {
  .site .lp-problem__bento { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 28px; }
  .site .lp-problem__card,.site .lp-problem__card--tools,.site .lp-problem__card--promises { grid-column: auto; padding: 20px; }
  .site .lp-problem__card h3 { font-size: 19px; }
  .site .lp-problem__tools { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site .lp-problem__tools li { flex-direction: column; gap: 4px; font-size: 10px; }
  .site .lp-problem__bus { flex-direction: column; margin: 0 auto; }
  .site .lp-problem__busline { display: none; }
  .site .lp-problem__bus::before { content: ""; width: 3px; height: 26px; border-radius: 2px; background-image: linear-gradient(var(--signal), var(--signal)); box-shadow: 0 0 12px 1px rgba(43,89,255,.55); }
  .site .lp-problem__hub { padding: 10px 18px; font-size: 13px; }
  .site .lp-problem__hub strong { font-size: 18px; }
  .site .lp-problem__promise-row { flex-direction: column; }
  .site .lp-problem__chat { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .site .lp-problem__card:hover { transform: none; }
}

/* Team cards follow the reference's inline identity row and 3+2 bento. */
.site .lp-teams { padding: 64px 0; }
.site .lp-teams .lp-sechead { margin-bottom: 33px; }
.site .lp-teams .lp-sechead h2 { font-size: 44px; line-height: 1.08; }
.site .lp-teamcards { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; max-width: 1080px; margin-inline: auto; }
.site .lp-teamcard { grid-column: span 2; gap: 12px; padding: 22px; border-radius: 14px; box-shadow: 0 1px 2px rgba(14, 17, 22, .04); transition: transform .15s, box-shadow .15s, border-color .15s; }
.site .lp-teamcard:nth-child(n+4) { grid-column: span 3; }
.site .lp-teamcard__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.site .lp-teamcard__identity { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.site .lp-teamcard__dot { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: none; border: 1px solid var(--module-line); border-radius: 12px; color: var(--module); background: var(--module-tint); }
.site .lp-teamcard__name { font-size: 18px; line-height: 1.55; }
.site .lp-teamcard__who { margin-top: 1px; color: var(--slate); font-size: 12.5px; line-height: 1.55; }
.site .lp-teamcard p { color: var(--graphite); font-size: 14.5px; line-height: 1.6; }

.site .lp-teamcard__example { display: flex; flex-direction: column; gap: 5px; margin-top: auto; padding: 10px 12px; border: 1px solid var(--module-line); border-radius: 10px; color: var(--ink); background: var(--module-tint); }
.site .lp-teamcard__example small { color: var(--module); font: 10.5px/1.55 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.site .lp-teamcard__example b { display: flex; align-items: flex-start; gap: 8px; color: var(--ink); font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.site .lp-teamcard__example b::before { width: 7px; height: 7px; flex: none; margin-top: 6px; border-radius: 50%; background: var(--module); content: ""; }
.site .lp-teamcard--founders { --module: var(--signal); --module-tint: var(--signal-tint); --module-line: var(--signal-border); }
.site .lp-teamcard--sales { --module: var(--lp-mod-sales-text); --module-tint: var(--lp-mod-sales-bg); --module-line: color-mix(in srgb, var(--module) 24%, var(--white)); }
.site .lp-teamcard--engineering { --module: var(--lp-mod-engineering-text); --module-tint: var(--lp-mod-engineering-bg); --module-line: color-mix(in srgb, var(--module) 24%, var(--white)); }
.site .lp-teamcard--finance { --module: var(--lp-mod-finance-text); --module-tint: var(--lp-mod-finance-bg); --module-line: color-mix(in srgb, var(--module) 24%, var(--white)); }
.site .lp-teamcard--people { --module: var(--lp-mod-people-text); --module-tint: var(--lp-mod-people-bg); --module-line: color-mix(in srgb, var(--module) 24%, var(--white)); }
.site .lp-teamcard:hover { transform: translateY(-2px); border-color: var(--module-line); box-shadow: 0 0 0 1px var(--module-line), 0 16px 44px color-mix(in srgb, var(--module) 16%, transparent); }
@media (max-width: 900px) {
  .site .lp-teamcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site .lp-teamcard,.site .lp-teamcard:nth-child(n+4) { grid-column: auto; }
  .site .lp-teamcard:last-child { grid-column: 1 / -1; }
}
@media (max-width: 759px) {
  .site .lp-teams { padding: 56px 0; }
  .site .lp-teams .lp-sechead h2 { font-size: 32px; }
  .site .lp-teamcards { grid-template-columns: minmax(0, 1fr); }
  .site .lp-teamcard,.site .lp-teamcard:nth-child(n+4),.site .lp-teamcard:last-child { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .site .lp-teamcard:hover { transform: none; }
}

/* Pilot request */
/* Pilot inquiry shares the public site's typography and palette. */
.site.lp-pilot-page { margin: 0; min-height: 100vh; background: var(--canvas); }
.site .lp-pilot-nav, .site .lp-pilot-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1120px; margin: 0 auto; padding: 28px 32px; }
.site .lp-pilot-nav > a:last-child, .site .lp-pilot-footer { font-size: 14px; color: var(--slate); }
.site .lp-pilot-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; gap: 72px; max-width: 1120px; margin: 48px auto 80px; padding: 0 32px; }
.site .lp-pilot-intro h1 { margin: 16px 0; font-size: clamp(36px, 4vw, 52px); line-height: 1.1; letter-spacing: -.04em; }
.site .lp-pilot-intro > p { max-width: 480px; color: var(--slate); }
.site .lp-pilot-intro .lp-pilot-lede { margin-bottom: 12px; color: var(--graphite); font-size: 21px; }
.site .lp-pilot-steps { display: grid; gap: 24px; margin-top: 36px; }
.site .lp-pilot-steps li { display: flex; align-items: start; gap: 16px; }
.site .lp-pilot-steps li > span { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid var(--signal-border); border-radius: var(--radius); color: var(--signal); background: var(--signal-tint); font: 12px var(--font-mono); }
.site .lp-pilot-steps h2 { margin-bottom: 4px; font-size: 16px; letter-spacing: -.01em; }
.site .lp-pilot-steps p { font-size: 14px; color: var(--slate); }
.site .lp-pilot-card { padding: 36px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-hero); }
.site .lp-pilot-eyebrow { color: var(--signal); font-size: 12px; font-weight: 600; }
.site .lp-pilot-card h2 { margin: 12px 0; font-size: 25px; line-height: 1.25; }
.site .lp-pilot-card-lede { color: var(--slate); font-size: 15px; }
.site .lp-pilot-form { display: grid; gap: 22px; margin: 28px 0 22px; }
.site .lp-pilot-field { display: grid; gap: 8px; }
.site .lp-pilot-field label { font-size: 14px; font-weight: 600; }
.site .lp-pilot-form input[type=email] { width: 100%; min-width: 0; height: 48px; padding: 12px 14px; border: 1px solid var(--border-btn); border-radius: var(--radius); background: var(--white); color: var(--ink); font: inherit; }
.site .lp-pilot-form input[aria-invalid=true] { border-color: var(--status-blocked-text); }
.site .lp-pilot-field > p, .site .lp-pilot-note { color: var(--slate); font-size: 12px; line-height: 1.6; }
.site .lp-pilot-field #pilot-email-error { color: var(--status-blocked-text); }
.site .lp-pilot-card .btn { width: 100%; max-width: 100%; }
.site .lp-pilot-card > .btn { margin-top: 24px; }
.site .lp-pilot-message { margin: 20px 0; padding: 14px 16px; border-radius: var(--radius); font-size: 14px; }
.site .lp-pilot-message--saved { color: var(--status-ok-text); background: var(--status-ok-bg); }
.site .lp-pilot-message--error { color: var(--status-blocked-text); background: var(--status-blocked-bg); }
.site .lp-pilot-booking { display: block; margin-top: 22px; font-size: 14px; text-align: center; color: var(--signal); }
.site .lp-pilot-footer { border-top: 1px solid var(--line); }
@media (max-width: 759px) {
  .site .lp-pilot-nav, .site .lp-pilot-footer { padding: 22px 20px; }
  .site .lp-pilot-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; margin: 24px auto 40px; padding: 0 20px; }
  .site .lp-pilot-card { padding: 24px; }
  .site .lp-pilot-footer { flex-wrap: wrap; }
}

.site .lp-pilot-nav .lp-nav__brand, .site .lp-pilot-nav .lp-nav__brand:hover { color: var(--ink); }
.site .lp-pilot-card { grid-column: 2; grid-row: 1 / span 2; }
.site .lp-pilot-steps { grid-column: 1; grid-row: 2; margin-top: 0; }
@media (max-width: 759px) {
  .site .lp-pilot-card { grid-column: 1; grid-row: 2; }
  .site .lp-pilot-steps { grid-column: 1; grid-row: 3; }
}