/* ==========================================================================
   Landing page only — purple + white, minimal.

   Loaded after aigence.css and scoped to body.lp, so none of it reaches the
   other fourteen pages.

   Minimal here means subtraction, not less content: every section stays, and
   what goes is decoration carrying no information — confetti, drifting
   sparkles, film grain, gradient fills, drop shadows, hover lifts, and the
   marquee, whose six capability names are the same six named in the section
   directly beneath it.

   What is left does the work: one purple, one weight of hairline, and space.
   ========================================================================== */

body.lp {
  /* dark grounds — the hero and the footer only */
  --navy:      #2A1152;
  --navy-2:    #241046;
  --navy-3:    #1B0B36;
  --navy-4:    #150829;
  --navy-card: #351A66;

  /* light grounds carry the page */
  --light:     #FFFFFF;
  --light-soft:#FBF9FE;
  --light-2:   #F3EDFC;
  --line-lt:   #E9E3F5;
  --white:     #FFFFFF;

  /* one accent, three depths — no second hue anywhere */
  --magenta:   #8B5CF6;
  --violet:    #7C3AED;
  --blue:      #6D28D9;
  --grad:      linear-gradient(90deg, #7C3AED, #7C3AED);
  --grad-135:  linear-gradient(135deg, #7C3AED, #7C3AED);

  --txt:       #A99BC4;
  --txt-2:     #C3B4E0;
  --txt-dark:  #6B5E88;

  --border:    rgba(233, 227, 245, .14);
  --border-lt: #E9E3F5;

  --sec-y:     clamp(5rem, 9vw, 132px);
}

/* ====================================================== 1. subtractions === */

body.lp .confetti,
body.lp .spark-float,
body.lp .marquee { display: none; }

/* film grain */
body.lp .hero-c::after,
body.lp .site-footer::after,
body.lp .page-hero::after { background-image: none; }

/* one soft rise behind the hero; nothing anywhere else */
body.lp .hero-c::before {
  background: radial-gradient(70% 55% at 50% 0%, rgba(124, 58, 237, .34) 0%, transparent 72%);
}
body.lp .site-footer::before { background: none; }

/* shadows and lifts */
body.lp .card, body.lp .stat, body.lp .step, body.lp .use-card,
body.lp .tier, body.lp .faq details, body.lp .shot, body.lp .fan-card,
body.lp .cta, body.lp .prompt-box, body.lp .tiers-lt .tier,
body.lp .tiers-lt .tier-hi { box-shadow: none; }
body.lp .card:hover, body.lp .use-card:hover, body.lp .tier:hover,
body.lp .shot:hover { transform: none; }
body.lp .use-card::after { display: none; }

/* ========================================================= 2. type ======== */

body.lp .hero-c h1 { letter-spacing: -.04em; font-weight: 700; }
body.lp .sec-head h2, body.lp .split-copy h2 { letter-spacing: -.03em; }
body.lp .section-light .deck,
body.lp .section-light-soft .deck { color: var(--txt-dark); }

/* the accent word is one flat purple, not a gradient */
body.lp .grad-text,
body.lp .reveal-words .grad-text .w {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #C4A5FF;
}
body.lp .section-light .grad-text,
body.lp .section-light .reveal-words .grad-text .w,
body.lp .section-light-soft .grad-text,
body.lp .section-light-soft .reveal-words .grad-text .w { color: var(--violet); }

/* eyebrows become plain labels — a pill around two words was doing nothing */
body.lp .eyebrow {
  background: none; border: 0; padding: 0;
  font-size: .75rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--txt-2);
}
body.lp .section-light .eyebrow,
body.lp .section-light-soft .eyebrow { color: var(--violet); }
body.lp .eyebrow .spark { display: none; }

/* ====================================================== 3. surfaces ======= */

body.lp .card, body.lp .stat, body.lp .step, body.lp .use-card, body.lp .tier {
  background: none;
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color .25s ease;
}
body.lp .card:hover, body.lp .use-card:hover, body.lp .tier:hover { border-color: rgba(196,165,255,.42); }
body.lp .section-light .card, body.lp .section-light .stat,
body.lp .section-light .step, body.lp .section-light-soft .card,
body.lp .section-light-soft .step, body.lp .tiers-lt .tier {
  background: #fff; border-color: var(--line-lt);
}
body.lp .tiers-lt .tier-hi { border-color: var(--violet); }
body.lp .tiers-lt .tier-hi::before { display: none; }
body.lp .faq details { background: none; border-color: var(--border); }
body.lp .section-light .faq details { background: #fff; border-color: var(--line-lt); }

/* icon badges: a hairline ring, not a filled gradient disc */
body.lp .icon-badge {
  background: none; border: 1px solid var(--border); color: #C4A5FF;
}
body.lp .section-light .icon-badge,
body.lp .section-light-soft .icon-badge {
  border-color: var(--line-lt); color: var(--violet);
}
body.lp .tick { background: none; color: var(--violet); }
body.lp .pill-tag, body.lp .pill-tag.now {
  background: none; border-color: var(--line-lt); color: var(--violet);
}

/* ======================================================= 4. controls ====== */

body.lp .btn-grad {
  background: var(--violet); background-image: none;
  border: 1px solid var(--violet); box-shadow: none;
}
body.lp .btn-grad:hover { background: #6D28D9; border-color: #6D28D9; }
body.lp .btn-line { border-color: var(--border); }
body.lp .section-light .btn-line,
body.lp .section-light-soft .btn-line { border-color: var(--line-lt); color: var(--violet); }

body.lp .prompt-box {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(233,227,245,.20);
}
body.lp .chip-btn { background: none; border: 1px solid var(--border); }

/* the CTA is a flat purple block; the photograph behind it was texture only */
body.lp .cta {
  background-image: none !important;
  background-color: var(--violet);
}

/* code sample: one purple, one neutral, no traffic lights */
body.lp .code { background: var(--navy-4); }
body.lp .code-dots { display: none; }
body.lp .code pre { color: #D6C9F0; }
body.lp .code .c { color: #6E5F93; }
body.lp .code .k { color: #C4A5FF; }
body.lp .code .s { color: #EDE4FF; }
body.lp .code .p { color: #9B7BE0; }

/* ==================================================== 5. hero images ====== */
/* straightened into a plain three-up row — the fan was the last flourish */
body.lp .fan { gap: 1rem; }
body.lp .fan-card,
body.lp .fan-card:nth-child(1),
body.lp .fan-card:nth-child(2),
body.lp .fan-card:nth-child(3),
body.lp .fan-card:hover {
  transform: none; margin: 0; border-radius: 14px;
  border: 1px solid rgba(233,227,245,.18);
}

/* ======================================================== 6. chrome ======= */
/* a plain translucent bar: heavy glass was a lot of treatment for a surface
   whose job is to hold five links */
body.lp .site-header.pill .header-inner {
  background: rgba(42, 17, 82, .55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(233,227,245,.14);
  box-shadow: none;
}
body.lp .site-header.pill .header-inner::before { display: none; }
body.lp .site-header.pill.stuck .header-inner {
  background: rgba(42, 17, 82, .90);
  box-shadow: none;
}
body.lp .mobile-menu { background: rgba(27, 11, 54, .97); }
body.lp ::selection { background: var(--violet); color: #fff; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.lp .site-header.pill .header-inner { background: rgba(42, 17, 82, .95); }
}

/* --------------------------------------------- header sits ON the hero ----
   The pill is transparent but occupies ~93px of flow between the topbar and
   <main>, and the hero wash starts at <main> — so that strip painted as raw
   body colour, a flat bar across the full width. Pulling <main> up puts the
   hero behind the pill; the hero takes the height back as top padding. The
   offset must equal the header's real height or a sliver survives. */
body.lp { --hdr: 93px; }
body.lp .site-header.pill { margin-bottom: calc(var(--hdr) * -1); }
body.lp .hero-c { padding-top: calc(var(--hdr) + clamp(1.5rem, 4vw, 3.5rem)); }

@media (max-width: 600px) {
  /* below this "Start free" wrapped to two lines and made the header 114px.
     The mobile menu carries both buttons anyway. */
  body.lp .site-header.pill .header-cta { display: none; }
  body.lp { --hdr: 87px; }
}

/* the pill floats, so it needs the page gutter at every width — its own
   padding replaces .wrap's, which left it flush to the screen edges */
body.lp .site-header.pill { padding-inline: var(--gutter); }

/* ========================================================= 7. rhythm ====== */
/* white carries the page; purple is the hero, the CTA and the footer */
body.lp .section-light,
body.lp .section-light-soft { background: var(--light); }

/* Cards stretch to a common height, so their trailing action should sit on a
   common baseline too — otherwise it tracks the length of each paragraph. */
body.lp .card { align-content: space-between; }
body.lp .circle-cta { box-shadow: none; }

/* On the flat purple CTA block a purple button disappears into its ground, so
   the actions invert there: solid white primary, hairline white secondary. */
body.lp .cta::before { display: none; }
body.lp .cta .btn-grad {
  background: #fff; border-color: #fff; color: var(--violet);
}
body.lp .cta .btn-grad:hover { background: #F3EDFC; border-color: #F3EDFC; color: #6D28D9; }
body.lp .cta .btn-line { border-color: rgba(255,255,255,.55); color: #fff; }
body.lp .cta .btn-line:hover { border-color: #fff; background: rgba(255,255,255,.1); }

/* the card's trailing arrow shares one baseline across a row */
body.lp .card { align-content: space-between; }
body.lp .arrow-btn { box-shadow: none; }

body.lp .card-num { color: rgba(233,227,245,.30); }
body.lp .section-light .card-num,
body.lp .section-light-soft .card-num { color: #B6A6D4; }

/* ==========================================================================
   This build's own homepage sections.

   feature-story / upscale / api-code are custom to this build and hard-code
   the old navy palette, so the purple layer above does not reach them. Left
   alone they render as navy islands in a purple page.
   ========================================================================== */
body.lp .topbar { background: var(--navy-4); }

body.lp .deck.text-motion { color: var(--txt); }
body.lp .section-light .deck.text-motion,
body.lp .section-light-soft .deck.text-motion { color: var(--txt-dark); }

body.lp .feature-story-visual {
  background: linear-gradient(135deg, #150829, #351A66);
  box-shadow: none;
}
body.lp .upscale-visual { background: var(--navy-3); }
body.lp .upscale-label { background: rgba(27, 11, 54, .62); }

body.lp .api-code-visual { background: var(--navy-4); color: #D6C9F0; }
/* the three traffic lights were the only red/amber/green on the page */
body.lp .api-code-top span,
body.lp .api-code-top span:nth-child(2),
body.lp .api-code-top span:nth-child(3) { background: rgba(233, 227, 245, .26); }
body.lp .api-code-top b { color: rgba(233, 227, 245, .60); }
body.lp .api-typed-code { color: #D6C9F0; }
body.lp .api-typed-code .tok-key    { color: #C4A5FF; }
body.lp .api-typed-code .tok-prop   { color: #9B7BE0; }
body.lp .api-typed-code .tok-string { color: #EDE4FF; }
body.lp .api-typed-code .tok-number { color: #B98CFF; }
body.lp .api-typed-code .tok-fn     { color: #D8BFFF; }
body.lp .api-cursor { background: #A855F7; box-shadow: none; }