/* Static landing page styles — generated from the app: redesign.css (brand layer)
   + landing-page.css. Self-contained for Cloudflare Pages. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#f4f5f7}

/* ============================================================================
   Model Factory — REDESIGN BRAND LAYER
   ----------------------------------------------------------------------------
   The approved visual redesign (model-factory-ds/redesign/mf.css). Two parts:

   1) TOKENS — the refined OKLCH green ramp, navy ink scale, light surfaces,
      Inter display, radii, shadows. We RE-POINT the app's existing `--pb-*`
      customer-brand tokens at these refined values so every page that already
      reads `--pb-green` / `--pb-ink` / `--pb-surface` / … inherits the refined
      look automatically — no "two greens". We ALSO expose the redesign's own
      token names (`--green`, `--ink`, `--surface`, …) so new page code can use
      either vocabulary.

   2) COMPONENT CLASSES — `.btn` / `.card` / `.badge` / `.input` / `.brand` /
      `.pilltabs` / `.trust` / `.eyebrow` / `.display` / `.wrap` / `.mono` /
      `.hr`. These names COLLIDE with the app's legacy dark globals in
      styles.css (a dark `.btn`, `.card`, `.mono`) and the shell's `.brand`, so
      the redesign component layer is NAMESPACED under a `.mf` root wrapper.
      A page opts in by putting `class="mf …"` on its root element; inside `.mf`
      the bare redesign classes are available and win over the legacy globals.

   Inter is pulled from Google Fonts (the redesign's --display / --sans). No npm
   deps, no framework changes. Pure CSS.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

/* ---------------------------------------------------------------------------
   1a) REFINED BRAND TOKENS — exposed under :root as the redesign's own names.
       These are NEW names (green ramp, ink scale, display font, radii, shadow)
       that do not feed the legacy dark board chrome, so they are safe at :root.
   --------------------------------------------------------------------------- */
:root {
  /* refined OKLCH green ramp (the single source of green for the brand) */
  --mf-green: oklch(0.72 0.155 153);
  --mf-green-press: oklch(0.66 0.16 153);
  --mf-green-soft: oklch(0.95 0.045 153);
  --mf-green-line: oklch(0.86 0.08 153);
  --mf-green-ink: oklch(0.4 0.1 153);

  /* navy ink scale */
  --mf-ink: #1f2433;
  --mf-ink-2: #3a4150;
  --mf-ink-dim: #6b7280;
  --mf-ink-faint: #9aa1ad;
  --mf-ink-deep: #14161f;

  /* light surfaces */
  --mf-bg: #f4f5f7;
  --mf-surface: #ffffff;
  --mf-line: #e9ebef;
  --mf-line-2: #d6d9df;

  /* type */
  --mf-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --mf-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --mf-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, 'Cascadia Mono', Consolas, monospace;

  /* radii + shadow */
  --mf-radius: 14px;
  --mf-radius-sm: 10px;
  --mf-shadow-sm: 0 1px 2px rgba(20, 22, 31, 0.05), 0 1px 1px rgba(20, 22, 31, 0.04);
  --mf-shadow: 0 18px 40px -28px rgba(20, 22, 31, 0.32);
}

/* ---------------------------------------------------------------------------
   1b) RECONCILE the app's existing `--pb-*` customer-brand tokens onto the
       refined values. Every page component reads these heavily; re-pointing
       them here means the refined green / ink / surfaces flow through the whole
       app with zero edits to page components. (Overrides the dark-era hexes
       defined for the same names in styles.css; this block loads after.)
   --------------------------------------------------------------------------- */
:root {
  --pb-bg: var(--mf-bg);
  --pb-surface: var(--mf-surface);
  --pb-surface-2: #fbfbfc;
  --pb-line: var(--mf-line);
  --pb-line-strong: var(--mf-line-2);

  --pb-ink: var(--mf-ink);
  --pb-ink-2: var(--mf-ink-2);
  --pb-ink-dim: var(--mf-ink-dim);
  --pb-ink-faint: var(--mf-ink-faint);

  /* the signature green — now the refined OKLCH ramp, not the old flat hex */
  --pb-green: var(--mf-green);
  --pb-green-strong: var(--mf-green-press);
  --pb-green-ink: var(--mf-green-ink);
  --pb-green-soft: var(--mf-green-soft);

  --pb-radius: var(--mf-radius);
  --pb-radius-sm: var(--mf-radius-sm);
  --pb-sans: var(--mf-sans);

  --pb-shadow-sm: var(--mf-shadow-sm);
  --pb-shadow: var(--mf-shadow);
  --pb-focus: 0 0 0 3px var(--mf-green-soft);
}

/* ============================================================================
   2) REDESIGN COMPONENT LAYER — namespaced under `.mf`.
   ----------------------------------------------------------------------------
   Inside `.mf`, the redesign's local token names (--green, --ink, --surface, …)
   alias the --mf-* values, so the component rules below read exactly like the
   original mf.css. A page root carrying `class="mf"` (alongside or in place of
   `.pb`) gets the full refined brand surface + bare component classes.
   ========================================================================== */
.mf {
  /* local aliases so the redesign component rules read like the source mf.css */
  --green: var(--mf-green);
  --green-press: var(--mf-green-press);
  --green-soft: var(--mf-green-soft);
  --green-line: var(--mf-green-line);
  --green-ink: var(--mf-green-ink);
  --ink: var(--mf-ink);
  --ink-2: var(--mf-ink-2);
  --ink-dim: var(--mf-ink-dim);
  --ink-faint: var(--mf-ink-faint);
  --ink-deep: var(--mf-ink-deep);
  --bg: var(--mf-bg);
  --surface: var(--mf-surface);
  --line: var(--mf-line);
  --line-2: var(--mf-line-2);
  --display: var(--mf-display);
  --sans: var(--mf-sans);
  --mono: var(--mf-mono);
  --radius: var(--mf-radius);
  --radius-sm: var(--mf-radius-sm);
  --shadow-sm: var(--mf-shadow-sm);
  --shadow: var(--mf-shadow);

  background: var(--mf-bg);
  color: var(--mf-ink);
  font-family: var(--mf-sans);
  -webkit-font-smoothing: antialiased;
}
.mf a {
  color: inherit;
}

/* ---- display type ---- */
.mf .display {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
}
.mf .eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-ink);
  font-weight: 500;
}
.mf .eyebrow.muted {
  color: var(--ink-faint);
}

/* ---- brand lockup ---- */
.mf .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.mf .brand .mk {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: #fff;
  border-radius: 9px;
  width: 30px;
  height: 30px;
}
.mf .brand .mk svg {
  width: 20px;
  height: 20px;
  display: block;
  overflow: visible;
}
.mf .brand .wm {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-size: 18px;
}
.mf .brand .wm b {
  font-weight: 700;
}
.mf .brand.lg .mk {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}
.mf .brand.lg .mk svg {
  width: 27px;
  height: 27px;
}
.mf .brand.lg .wm {
  font-size: 24px;
}
.mf .brand.rev .mk {
  background: #fff;
  color: var(--ink);
}
.mf .brand.rev .wm {
  color: #fff;
}

/* ---- buttons ---- */
.mf .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  /* Sentence case — the redesign buttons are NOT uppercased (reset the legacy
     global `.btn { text-transform: uppercase }` that would otherwise leak in). */
  text-transform: none;
  letter-spacing: normal;
  padding: 11px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: 0.15s;
  white-space: nowrap;
}
.mf .btn-primary {
  background: var(--green);
  color: var(--ink);
}
.mf .btn-primary:hover {
  background: var(--green-press);
}
.mf .btn-ghost {
  background: var(--surface);
  border-color: var(--line-2);
  color: var(--ink);
}
.mf .btn-ghost:hover {
  border-color: var(--ink-faint);
}
.mf .btn-login {
  background: transparent;
  border-color: var(--line-2);
  color: var(--ink);
  border-radius: 999px;
  padding: 9px 20px;
}
.mf .btn-login:hover {
  border-color: var(--ink-faint);
}
.mf .btn-lg {
  font-size: 15.5px;
  padding: 15px 26px;
  border-radius: 12px;
}
.mf .btn-block {
  width: 100%;
}
.mf .btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- badges ---- */
.mf .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--sans);
  line-height: 1.3;
  white-space: nowrap;
}
.mf .badge-green {
  background: var(--green-soft);
  color: var(--green-ink);
}
.mf .badge-neutral {
  background: var(--surface);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
}
.mf .badge-solid {
  background: var(--green);
  color: var(--ink);
}
.mf .badge-mono {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.03em;
  font-size: 11px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  color: var(--ink-dim);
  padding: 3px 9px;
  text-transform: uppercase;
}

/* ---- card ---- */
.mf .card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ---- inputs ---- */
.mf .input {
  width: 100%;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  outline: none;
  transition: 0.15s;
}
.mf .input::placeholder {
  color: var(--ink-faint);
}
.mf .input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}

/* ---- pill tabs (segmented) ---- */
.mf .pilltabs {
  display: inline-flex;
  background: #eceef2;
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.mf .pilltabs button {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-dim);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 8px 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.mf .pilltabs button.on {
  background: var(--green);
  color: var(--ink);
}

/* ---- trust line ---- */
.mf .trust {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-dim);
}
.mf .trust .sh {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 6px;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mf .trust .sh svg {
  width: 11px;
  height: 11px;
  color: #fff;
}

/* ---- misc ---- */
.mf .wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 40px;
}
.mf .mono {
  font-family: var(--mono);
}
.mf .hr {
  height: 1px;
  background: var(--line);
  border: 0;
}


/* ===== landing-page.css ===== */
/* model-factory — customer-facing landing surface.
   The approved consumer redesign (model-factory-ds/redesign/01-landing.html):
   a clean LIGHT canvas, navy ink, one confident refined-green accent, Inter
   display, the Portal mark lockup. The page root carries `class="mf lp"`, so the
   redesign component classes (.btn / .card / .brand / .eyebrow / .display /
   .trust …, all scoped under `.mf`) supply the chrome; the lp-* rules below own
   page-specific layout only. Pure CSS — no new dependencies.

   Tokens used here are the redesign's local names (--green, --ink, --surface, …)
   which `.mf` aliases onto the global --mf-* ramp (src/styles/redesign.css). */

.lp {
  --lp-max: 1120px;
  --lp-pad: clamp(20px, 5vw, 40px);
  position: relative;
  min-height: 100vh;
  overflow-x: clip;
  /* Paint the light canvas explicitly so the page never falls through to the
     body's dark legacy background. (`.mf` already sets this, belt-and-braces.) */
  background: var(--bg);
}

/* The redesign `.wrap` (max 1120 / 40px pad) carries the page gutter. On small
   screens tighten it to the page pad. */
.lp .wrap {
  padding-left: var(--lp-pad);
  padding-right: var(--lp-pad);
}

/* ── top navigation ───────────────────────────────────────────────── */
.lp-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
}
.lp-nav-in {
  /* Three columns — brand | centered links | CTAs — so the nav links sit in the
     true center of the bar regardless of brand/CTA width. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 64px;
  max-width: var(--lp-max);
  margin: 0 auto;
  padding: 0 var(--lp-pad);
}
.lp-brand {
  justify-self: start;
}
.lp-nav-links {
  display: flex;
  gap: 28px;
  justify-self: center;
}
.lp-nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.15s ease;
}
.lp-nav-links a:hover {
  color: var(--ink);
}
.lp-nav-cta {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 10px;
}

/* ── hero ─────────────────────────────────────────────────────────── */
.lp-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(56px, 8vw, 78px) 0 clamp(28px, 4vw, 44px);
}
.lp-title {
  margin: 18px auto 0;
  max-width: 760px;
  font-size: clamp(40px, 5.6vw, 62px);
  color: var(--ink);
}
.lp-title .g {
  color: var(--green);
}
.lp-lede {
  margin: 20px auto 0;
  max-width: 540px;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.5;
  color: var(--ink-2);
}
.lp-hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.lp-trust {
  margin-top: 18px;
}

/* category chips */
.lp-chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.lp-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}
.lp-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

/* social proof */
.lp-proof {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-top: 26px;
  color: var(--ink-dim);
  font-size: 13.5px;
  font-weight: 500;
}
.lp-proof b {
  color: var(--ink);
  font-weight: 700;
}
.lp-avs {
  display: flex;
}
.lp-avs span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  margin-left: -8px;
  background: var(--green-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--green-ink);
  font-family: var(--mono);
}
.lp-avs span:first-child {
  margin-left: 0;
}

/* ── hero showcase: models you can build ──────────────────────────── */
.lp-spot {
  max-width: 720px;
  width: 100%;
  margin: clamp(36px, 6vw, 42px) auto 0;
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
  text-align: left;
}
.lp-spot-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: #fbfbfc;
}
.lp-spot-title {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}
.lp-spot-badge {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--green-ink);
  background: var(--green-soft);
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}
.lp-arow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.lp-arow:last-child {
  border-bottom: 0;
}
.lp-arow-tag {
  font-size: 10px;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--ink-dim);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 4px 7px;
  flex: none;
  width: 84px;
  text-align: center;
}
.lp-arow-meta b {
  display: block;
  font-size: 14.5px;
  color: var(--ink);
  font-weight: 600;
}
.lp-arow-meta span {
  display: block;
  font-size: 12.5px;
  color: var(--ink-dim);
  margin-top: 1px;
}
.lp-arow-dl {
  margin-left: auto;
  font-size: 11px;
  color: var(--green-ink);
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.lp-arow-dl::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

/* ── stats band ───────────────────────────────────────────────────── */
.lp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: clamp(48px, 9vw, 60px) auto 0;
}
.lp-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px;
}
.lp-stat-value {
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--green-ink);
}
.lp-stat-label {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-dim);
}

/* ── generic section ──────────────────────────────────────────────── */
.lp-section {
  padding: clamp(64px, 11vw, 84px) 0;
}
/* sections that follow another, tightened up top (mockup uses padding-top:0) */
.lp-section-tight {
  padding-top: 0;
}
.lp-section-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 44px;
}
.lp-h2 {
  margin: 12px 0 0;
  font-size: clamp(28px, 3.6vw, 42px);
  color: var(--ink);
}
.lp-section-sub {
  margin: 14px auto 0;
  max-width: 560px;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.55;
  color: var(--ink-2);
}

/* ── runs anywhere (copy + phone) ─────────────────────────────────── */
.lp-anywhere {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 64px;
  align-items: center;
}
.lp-anywhere .lp-h2 {
  font-size: clamp(28px, 3.4vw, 40px);
}
.lp-anywhere-lede {
  margin: 16px 0 0;
  max-width: 430px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}
.lp-ailist {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}
.lp-ai {
  display: flex;
  gap: 11px;
  align-items: center;
  font-size: 14.5px;
  color: var(--ink-2);
}
.lp-ai-check {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.lp-ai-check svg {
  width: 12px;
  height: 12px;
  color: #fff;
}

/* phone mock */
.lp-phone {
  width: 286px;
  height: 580px;
  border-radius: 42px;
  background: var(--ink-deep);
  padding: 11px;
  box-shadow: 0 40px 80px -40px rgba(20, 22, 31, 0.55);
  flex: none;
  position: relative;
}
.lp-phone-notch {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 104px;
  height: 24px;
  border-radius: 14px;
  background: #000;
  z-index: 2;
}
.lp-screen {
  width: 100%;
  height: 100%;
  border-radius: 32px;
  background: var(--bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.lp-scrhd {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 30px 18px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.lp-scrhd-mk {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-scrhd-mk svg {
  width: 17px;
  height: 17px;
  overflow: visible;
}
.lp-scrhd-nm {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.lp-scrhd-st {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--green-ink);
}
.lp-scrhd-st::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.lp-scrbody {
  flex: 1;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lp-bub {
  max-width: 80%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.45;
}
.lp-bub-me {
  align-self: flex-end;
  background: var(--green);
  color: var(--ink);
  border-bottom-right-radius: 4px;
}
.lp-bub-ai {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
  border-bottom-left-radius: 4px;
}
.lp-plan {
  display: grid;
  gap: 4px;
}
.lp-plan-r {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.4;
}
.lp-plan-r-new {
  color: var(--green-ink);
  font-weight: 600;
}
.lp-scrin {
  margin: 0 12px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 9px 12px;
}
.lp-scrin-ph {
  flex: 1;
  font-size: 12.5px;
  color: var(--ink-faint);
}
.lp-scrin-snd {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: 13px;
}

/* ── use-case / why grid ──────────────────────────────────────────── */
.lp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.lp-uccard {
  display: flex;
  flex-direction: column;
  padding: 26px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.lp-uccard:hover {
  border-color: var(--line-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.lp-uc-prof {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--green-ink);
}
.lp-uc-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  margin: 6px 0 8px;
  color: var(--ink);
}
.lp-uc-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-dim);
}
.lp-uc-ex {
  margin-top: auto;
  font-size: 12px;
  color: var(--ink-2);
  background: #f6f7f9;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 12px;
  line-height: 1.45;
}
/* the "why" grid has no example chips — push the body to fill */
.lp-grid-3 .lp-uccard {
  justify-content: flex-start;
}

.lp-ucmore {
  text-align: center;
  margin-top: 32px;
  font-size: 14px;
  color: var(--ink-dim);
}
.lp-ucmore a {
  color: var(--green-ink);
  font-weight: 600;
  text-decoration: none;
}
.lp-ucmore a:hover {
  color: var(--ink);
}

/* ── get started / final CTA ──────────────────────────────────────── */
.lp-cta-section {
  padding: clamp(64px, 11vw, 84px) 0;
}
.lp-cta {
  position: relative;
  overflow: hidden;
  background: var(--ink-deep);
  border-radius: 24px;
  padding: clamp(44px, 6vw, 64px);
  text-align: center;
}
.lp-cta-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.lp-cta-eyebrow {
  position: relative;
  color: #7fe3b0;
}
.lp-cta-title {
  position: relative;
  margin: 14px auto 0;
  max-width: 560px;
  color: #fff;
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -0.02em;
}
.lp-cta-sub {
  position: relative;
  margin: 14px auto 30px;
  max-width: 460px;
  color: #aab2c6;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.5;
}
.lp-cta-actions {
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
/* the second CTA on the dark panel: transparent with a light hairline */
.lp-cta-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.lp-cta-ghost:hover {
  border-color: rgba(255, 255, 255, 0.6);
}
.lp-cta-trust {
  position: relative;
  justify-content: center;
  color: #8b93a7;
}

/* ── footer ───────────────────────────────────────────────────────── */
.lp-footer {
  border-top: 1px solid var(--line);
  padding: 30px 0;
  margin-top: 20px;
}
.lp-footer-in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.lp-footer-tag {
  font-size: 12.5px;
  color: var(--ink-faint);
}
.lp-footer-meta {
  font-size: 12.5px;
  color: var(--ink-faint);
}
.lp-footer-link {
  color: var(--green-ink);
  text-decoration: none;
  font-weight: 500;
}
.lp-footer-link:hover {
  color: var(--ink);
}

/* ── staggered page-load reveal ───────────────────────────────────── */
.lp-reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: lp-reveal-in 0.6s ease forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes lp-reveal-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .lp-nav-links {
    display: none;
  }
  .lp-grid {
    grid-template-columns: 1fr 1fr;
  }
  .lp-stats {
    grid-template-columns: 1fr 1fr;
  }
  .lp-anywhere {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .lp-anywhere-lede {
    margin-left: auto;
    margin-right: auto;
  }
  .lp-ailist {
    justify-content: center;
  }
}
@media (max-width: 600px) {
  .lp-grid {
    grid-template-columns: 1fr;
  }
  .lp-footer-in {
    justify-content: center;
    text-align: center;
  }
}

/* ── reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lp-reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* "Coming soon" CTAs — styled like the primary button but not clickable. */
.mf .lp-soon { cursor: default; }
.mf .lp-soon:hover { background: var(--green); }