/* ─────────────────────────────────────────────────────────────
   CapraSEO landing — premium refinement pass (2026-07-20)
   Loaded AFTER landing.css. Reversible: delete this file + its
   <link> in index.html to fully revert. Nothing in landing.css
   is edited. Overrides token values globally (custom-property
   redefinition cascades) + a focused set of scoped rules.

   Goal: restrained, layered, LIT — desaturate the accent and use
   it as light, standardize radii, deepen the surface ladder,
   sharpen the text hierarchy, and add air. Structure / copy /
   mascot untouched.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Surface ladder — depth via luminance, not opaque blocks.
     Base near-black (faint hue kept), a clearer step up to raised
     cards, plus a mid tier for grouped sub-surfaces. ── */
  --bg: #08080c;
  --surface: #0e0e15;         /* NEW mid tier: ask-composer / price-old / mcp */
  --card-top: #15151d;
  --card-bot: #0b0c13;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.12);
  --edge-hi: rgba(255, 255, 255, 0.045);   /* ~4% "catches light" top highlight */

  /* ── Text — 3-tier ladder, off-white primary, faint cool hue ── */
  --text: #f4f4f8;
  --muted: #a1a2ad;
  --muted-2: #71727e;

  /* ── Accent = light, not paint. Desaturated emerald; every glow
     reads through --green-rgb so this propagates everywhere. ── */
  --accent: #1fbf63;
  --accent-strong: #159a50;
  --accent-bright: #3ad27f;
  --accent-glow: rgba(31, 191, 99, 0.30);
  --green: #1fbf63;
  --green-rgb: 31, 191, 99;

  /* ── Radius scale — one consistent system (was 20/15/13/12/11/9) ── */
  --r-lg: 20px;   /* cards, panels, board, price panels */
  --r-md: 12px;   /* every button, shards, media frames, endpoint */
  --r-sm: 8px;    /* badges, small chips */
}

/* Selection + brand mark carry hardcoded old-green literals in the
   base sheet — realign them to the desaturated accent. */
::selection { background: rgba(31, 191, 99, 0.28); }
.nav-brand img {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 0 14px -2px var(--accent-glow);
}

/* ── Radius standardization ─────────────────────────────────── */
.card,
.panel,
.veil,
.market-board,
.price-panel,
.price-new,
.price-old { border-radius: var(--r-lg); }

.btn-primary,
.btn-ghost,
.btn-lg,
.shard,
.panel-media img,
.mcp-endpoint { border-radius: var(--r-md); }

.mcp-badge { border-radius: var(--r-sm); }

/* ── Cards — calm the gradient-border edge (peaked at ~18% white →
   ~12%) so it reads as a clean lit hairline, not busy chrome. The
   retuned --card-top/bot already give the top→bottom gradient fill,
   inset top highlight and soft drop shadow. ── */
.card::before,
.veil::before {
  background: linear-gradient(140deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.03) 26%,
    rgba(255, 255, 255, 0.06) 60%,
    rgba(255, 255, 255, 0.13) 100%);
}

/* ── Buttons ────────────────────────────────────────────────── */
/* White primary CTA kept as-is (deliberate premium choice). Ghost
   button gains a subtle gradient, a 1px inner highlight and a
   smooth hover lift + shadow to match. */
.btn-ghost {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.18s var(--ease), background 0.15s ease,
    border-color 0.15s ease, box-shadow 0.18s var(--ease);
}
.btn-ghost:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 30px -16px rgba(0, 0, 0, 0.85);
}

/* ── Accent surfaces: gradient + faint glow (light, not flat fill) ── */
.door-dot {
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
  box-shadow: 0 0 8px -1px var(--accent-glow);
}
/* Re-declare the pulse with the desaturated green (base literal was neon). */
@keyframes door-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(58, 210, 127, 0.40); }
  50%      { box-shadow: 0 0 0 5px rgba(58, 210, 127, 0); }
}
.shard-row b.fix {
  color: var(--accent-bright);
  border: 1px solid rgba(58, 210, 127, 0.35);
  background: linear-gradient(180deg, rgba(31, 191, 99, 0.12), rgba(31, 191, 99, 0.05));
}
.mcp-badge {
  border: 1px solid rgba(31, 191, 99, 0.32);
  background: linear-gradient(180deg, rgba(31, 191, 99, 0.14), rgba(31, 191, 99, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 18px -10px var(--accent-glow);
}
.ask-composer { background: linear-gradient(180deg, #191b26 0%, #111320 100%); }
.ask-composer:hover { border-color: rgba(58, 210, 127, 0.40); }

/* price-new accent edge + top rule realigned to the new green. */
.price-new::before {
  background: linear-gradient(140deg,
    rgba(255, 255, 255, 0.18),
    rgba(58, 210, 127, 0.12) 40%,
    rgba(31, 191, 99, 0.38));
}

/* ── Ambient glows — a touch stronger + softer, still 6–10% band,
   still painted as background (never a positioned box → no iOS pan). ── */
.section:nth-of-type(odd) {
  background: radial-gradient(48% 50% at -12% 38%, rgba(var(--green-rgb), 0.065), transparent 72%) no-repeat;
}
.section:nth-of-type(even) {
  background: radial-gradient(48% 50% at 112% 38%, rgba(var(--green-rgb), 0.065), transparent 72%) no-repeat;
}
/* Pricing = one anchored "key section" glow (top-centered, warmer). */
#pricing {
  background: radial-gradient(58% 46% at 50% -4%, rgba(var(--green-rgb), 0.08), transparent 70%) no-repeat;
}
/* Hero: lift the green wash under the headline a little. */
.hero-spotlight {
  background:
    radial-gradient(120% 80% at 50% -12%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 26%, rgba(255, 255, 255, 0) 56%),
    radial-gradient(90% 62% at 50% 0%, rgba(var(--green-rgb), 0.08) 0%, rgba(var(--green-rgb), 0) 54%);
}

/* ── Grain — settle to ~3%. ── */
.grain { opacity: 0.03; }

/* ── Typography — larger, airier body copy (16–18px, ~1.6). ── */
.section-sub { font-size: 16.5px; line-height: 1.65; margin-bottom: 56px; }
.card p,
.panel p,
.panel-text p,
.price-panel p { font-size: 14.5px; line-height: 1.6; }
.hero-sub { color: #c6c8d6; }

/* ── Spacing & rhythm — more air; snap touched values to 8px. ── */
.section { padding: clamp(120px, 15vh, 208px) clamp(20px, 4.5vw, 56px) 0; }
.hero { padding: clamp(96px, 12vh, 150px) 0 clamp(140px, 17vh, 208px); }
.grid { gap: 16px; }
.split { gap: 16px; }
.stats { padding-top: 16px; padding-bottom: 16px; }

/* ── Data-viz — thinner, cleaner strokes; calmer glows (refined
   instruments, not neon). Blue stays the secondary data palette. ── */
.shard-bars i {
  border-radius: 4px 4px 2px 2px;
  box-shadow: 0 0 8px -5px rgba(0, 144, 231, 0.4);
}
.ol-row i {
  height: 6px;
  box-shadow: 0 0 8px -4px rgba(0, 144, 231, 0.45);
}
.shard-gauge { filter: drop-shadow(0 0 12px rgba(0, 144, 231, 0.18)); }
.shard { border-color: rgba(255, 255, 255, 0.08); }

/* ── Mobile — keep the extra air proportional. ── */
@media (max-width: 720px) {
  .section { padding-top: clamp(84px, 12vh, 120px); }
  .section-sub { font-size: 15.5px; margin-bottom: 40px; }
}


/* ═══════════════════════════════════════════════════════════════════
   Align to the app  (2026-07-27)
   ═══════════════════════════════════════════════════════════════════

   capraseo.com and app.capraseo.com were drifting: the app went green
   the same week, but landed on different values for the same ideas, and
   the landing was still on Geist while the product is on Inter. A
   visitor moving from here into the demo should not feel the handoff.

   Source of truth is the app — /root/capraseo-hello/css/main.css
   (colour) and css/theme.css (radius). Values below are copied from
   there; if the app's tokens move, move these with them.

   Reversible: delete this block to return to the standalone palette.
   ─────────────────────────────────────────────────────────────────── */

:root {
  /* ── Accent ────────────────────────────────────────────────────
     The hue already matched (--green-rgb 31,191,99 is exactly the
     app's --accent-rgb — the app took it from here). What differed is
     lightness, and the two sheets use the tokens for opposite jobs:
     the app's --accent is a FILL that carries white text, while this
     page uses --accent-bright as green INK. So they map crosswise
     rather than name-to-name. */
  --accent: #158444;          /* app --accent — deep fill, white text clears AA */
  --accent-strong: #106534;   /* app --accent-strong — gradient bottom */
  --accent-bright: #59cf8b;   /* app --accent-text — green as ink, 10:1 on the canvas */
  --accent-glow: rgba(31, 191, 99, 0.38);

  /* ── Surfaces — the app's ladder exactly (main.css) ──────────── */
  --bg: #08080d;              /* app --bg */
  --surface: #0f0f18;         /* app --panel */
  --card-top: #14141f;        /* app --panel-2 */
  --card-bot: #0f0f18;        /* app --panel */
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.10);
  --edge-hi: rgba(255, 255, 255, 0.05);

  /* ── Text ladder — the app's cool greys ─────────────────────── */
  --text: #eeeef5;
  --muted: #a3a4b6;
  --muted-2: #6f7188;

  /* ── Data-viz ───────────────────────────────────────────────────
     The sharp #0090e7 read as a different product next to the app's
     charts. These are the app's --chart-2 / --positive: desaturated
     on purpose, because a chart should read as information rather
     than as something you can click. */
  --blue: #6f95c4;
  --blue-bright: #8fb0d8;
  --blue-strong: #51709b;
  --positive: #5aa8c4;

  /* ── Radius — the app's scale (theme.css) ───────────────────── */
  --r-lg: 20px;   /* app --r-card */
  --r-md: 13px;   /* app --r-control / --r-input */
  --r-sm: 6px;    /* app --r-chip */

  /* ── Type — the product is Inter / JetBrains Mono ───────────── */
  --display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* landing.css sets the body stack literally rather than through
   --display, so the token change alone wouldn't reach it. */
body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Hardcoded literals of the old brighter green, realigned. */
::selection { background: rgba(31, 191, 99, 0.26); }

/* The data-viz glows were tuned to the sharp blue; at the muted value
   a coloured halo just muddies the stroke. Keep the shapes, drop the
   neon. */
.shard-bars i { box-shadow: 0 0 8px -5px rgba(111, 149, 196, 0.35); }
.ol-row i { box-shadow: 0 0 8px -4px rgba(111, 149, 196, 0.4); }
.shard-gauge { filter: drop-shadow(0 0 12px rgba(111, 149, 196, 0.16)); }

/* ── Landing tail: the ask section's floor, and the wash meeting the footer ──
   Both live HERE rather than in landing.css because the `.section` rule above
   re-declares `padding: … 0` and this file loads last — a padding-bottom set in
   landing.css is silently reset.

   Every .section carries top padding and ZERO bottom padding: the gap between
   two sections is the NEXT one's top padding, not the previous one's foot. That
   holds until the next section is `.closing`, whose green wash begins at its top
   edge — so once its top padding was tightened for short viewports, "Open the
   chat" sat flush on the gradient with nothing beneath it. Give the ask section
   its own floor instead of borrowing the next one's. */
.section-ask { padding-bottom: clamp(40px, 6vh, 72px); }

/* …and the wash then runs all the way into the footer instead of stopping 64px
   short and showing a dark band of page background between them. That 64px is
   the SHARED footer's own margin (css/site-footer.css, also used by the 12
   feature pages and the legal pages), so it is cleared here rather than there —
   this file is loaded by the landing page and nothing else, which is what makes
   that safe. */
.sf-foot { margin-top: 0; }