/* ============================================================
   Creator Cache™ — landing page
   ============================================================
   Everything here is scoped under `.lp`, the wrapper inside
   #landing. That scope is deliberate and load-bearing: the old
   landing rules still sitting in dashboard.css (.hero, .who-strip,
   .loop-strip, .trust-row and friends) target class names this
   markup no longer uses, so they simply never match. Nothing had
   to be ripped out of a working stylesheet to land this page.
   Those blocks are now dead and can be deleted in a follow-up —
   see the note at the foot of this file.

   No palette is declared here. Every colour comes from the tokens
   dashboard.css already sets at :root, so the landing page and the
   app stay one product — which is the property the theme
   unification bought, and the one a second palette would spend.

   MOTION BUDGET
   The buyer is on a mid-range Android over 4G. Every animation
   below therefore moves ONLY `transform` or `opacity`, which the
   compositor handles without re-running layout or paint, and the
   whole lot is cancelled under prefers-reduced-motion. The page
   reads identically with every animation off: nothing here carries
   information of its own.
   ============================================================ */

.lp { max-width: 1240px; margin: 0 auto; padding: 0 26px; }
/* Full-bleed escape for the two bars that must reach both edges of the
   window — the sticky nav and the marquee — while their contents stay
   on the same 1240px measure as everything else. Safe against a
   horizontal scrollbar because shared.css already sets
   `body { overflow-x: hidden }`. */
.lp-wide {
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 0; padding-right: 0;
}

/* ---------- shared type ---------- */
.lp .eyebrow {
  font: 600 11.5px/1 var(--font-mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}
.lp h2.sec {
  font-size: clamp(27px, 3.9vw, 40px); line-height: 1.1; letter-spacing: -0.025em;
  font-weight: 700; text-wrap: balance; margin-top: 14px;
}
.lp p.sec-sub {
  color: var(--text-muted); font-size: 17px; line-height: 1.6; margin-top: 14px; max-width: 60ch;
}
.lp .center { text-align: center; }
.lp .center p.sec-sub { margin-left: auto; margin-right: auto; }
.lp section { padding: 86px 0; }
.lp section.tight { padding-top: 0; }

/* ---------- buttons ----------
   Scoped over the shared .btn so the landing can size its own
   calls to action without touching the component the app uses. */
.lp .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 15px var(--font-body); border-radius: 11px; padding: 12px 20px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.lp .btn-solid {
  background: var(--accent-gradient); color: #fff;
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.25);
}
.lp .btn-solid:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(var(--accent-rgb), 0.32); }
.lp .btn-ghost { background: var(--bg-card); border-color: var(--border); color: var(--text-primary); }
.lp .btn-ghost:hover { border-color: var(--accent); transform: translateY(-2px); }
.lp .btn-plain { background: none; color: var(--text-muted); padding: 12px 6px; }
.lp .btn-plain:hover { color: var(--text-primary); }
.lp .btn-lg { font-size: 16.5px; padding: 15px 26px; border-radius: 12px; }

/* ---------- nav ---------- */
.lp-nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  background: var(--chrome-bg); border-bottom: 1px solid var(--border);
}
.lp-nav-in { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.lp-nav-l { display: flex; align-items: center; gap: 44px; }
.lp-nav-links { display: flex; gap: 26px; }
.lp-nav-links a { font-size: 14.5px; color: var(--text-muted); font-weight: 500; text-decoration: none; }
.lp-nav-links a:hover { color: var(--text-primary); }
.lp-nav-r { display: flex; align-items: center; gap: 10px; }

/* ============================================================
   1 · HERO
   ============================================================ */
.lp-hero { padding: 44px 0 0; position: relative; }
.lp-hero-in { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 58px; align-items: center; }
.lp .badge {
  display: inline-block; font: 600 11.5px var(--font-mono); letter-spacing: 0.06em;
  color: var(--accent); background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.18); border-radius: 999px; padding: 6px 13px;
}
/* The audience slot. One array in landing.js drives it; pin the page
   to a single audience by leaving one entry there, and this markup
   never changes. */
.lp .badge .word {
  background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text;
  color: transparent; font-weight: 600; display: inline-block;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.lp .badge .word.out { opacity: 0; transform: translateY(-4px); }
.lp h1 {
  font-size: clamp(34px, 4.6vw, 55px); line-height: 1.04; letter-spacing: -0.03em;
  font-weight: 700; margin-top: 20px; max-width: 13ch; text-wrap: balance;
}
/* background-position only — the text never re-lays out. */
.lp h1 .grad {
  background: linear-gradient(100deg, #7c3aed, #0891b2, #7c3aed);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: lpRamp 7s linear infinite;
}
@keyframes lpRamp { to { background-position: 220% 0; } }
.lp-hero-sub {
  color: var(--text-muted); font-size: 17.5px; line-height: 1.6; margin-top: 18px; max-width: 44ch;
}
.lp-hero-sub b { color: var(--text-primary); font-weight: 600; }

.lp-claim { display: flex; gap: 10px; margin-top: 28px; max-width: 492px; }
.lp-field {
  flex: 1; display: flex; align-items: center; background: var(--input-bg);
  border: 1.5px solid var(--border); border-radius: 12px; padding: 0 8px 0 14px; height: 52px;
  box-shadow: 0 1px 3px rgba(23, 23, 46, 0.05);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.lp-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.12); }
.lp-field .pre { color: var(--text-muted); font: 400 14px var(--font-mono); white-space: nowrap; }
.lp-field input {
  border: 0; outline: 0; font: 600 14px var(--font-mono); color: var(--text-primary);
  background: none; width: 100%; min-width: 0; padding: 0 2px;
}
/* Availability is never asserted before an answer comes back — see
   the handle block in landing.js. */
.lp-field .avail {
  font: 600 11px var(--font-mono); border-radius: 6px; padding: 4px 8px;
  letter-spacing: 0.04em; white-space: nowrap; opacity: 0; transition: opacity 0.3s ease;
}
.lp-field .avail.ok { color: var(--success); background: rgba(var(--success-rgb), 0.10); opacity: 1; }
.lp-field .avail.no { color: var(--danger); background: rgba(var(--danger-rgb), 0.10); opacity: 1; }
.lp-field .avail.wait { color: var(--text-muted); background: var(--surface-sunken); opacity: 1; }
.lp-micro { font-size: 13px; color: var(--text-muted); margin-top: 11px; }
.lp-founding {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 17px; font-size: 13px;
  color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 13px;
}
.lp-founding b { color: var(--text-primary); font-weight: 600; }
.lp-founding .dia { color: var(--accent); font-size: 10px; }
.lp-trust { display: flex; margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--border); }
.lp-trust .ti {
  display: flex; align-items: baseline; gap: 7px;
  padding-right: 22px; margin-right: 22px; border-right: 1px solid var(--border);
}
.lp-trust .ti:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.lp-trust .tn { font: 600 15px var(--font-mono); letter-spacing: -0.02em; }
.lp-trust .tl { font-size: 12.5px; color: var(--text-muted); }

/* ---------- the composition ----------
   One flat card on an empty field is what reads as static. Six
   layered pieces read as a working app, which is the whole trick. */
.lp-art { position: relative; display: grid; place-items: center; }
.lp-bloom {
  position: absolute; width: 540px; height: 540px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.14), transparent 68%);
}
.lp-frag {
  position: absolute; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 13px; box-shadow: 0 14px 40px rgba(23, 23, 46, 0.14);
  padding: 10px 13px; display: flex; align-items: center; gap: 10px; z-index: 3;
}
.lp-frag .ic {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  color: #fff; font-size: 12px; flex: none; background: var(--accent-gradient);
}
.lp-frag b { font-size: 12.5px; font-weight: 600; display: block; white-space: nowrap; }
.lp-frag em { font-style: normal; font: 500 11px var(--font-mono); color: var(--text-muted); white-space: nowrap; }
/* Offsets are tuned so each fragment overlaps the card's EDGE and
   never its text — layering should read as depth, not as something
   sitting on top of the words. Each one also stays inside the gutter
   the .lp container leaves, so nothing is clipped at 1240px. */
.lp-f-radar { top: -34px; left: -48px; animation: lpFloat1 7s ease-in-out infinite; }
.lp-f-enq { bottom: -46px; right: -48px; animation: lpFloat2 9s ease-in-out infinite; }
.lp-f-plat {
  top: 74px; right: -62px; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 11px 12px; animation: lpFloat3 8s ease-in-out infinite;
}
.lp-f-plat span {
  font: 600 11px var(--font-mono); color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08); border-radius: 6px; padding: 3px 8px;
}
/* Three phases, three distances — so the field never resolves into
   one object drifting as a block. */
@keyframes lpFloat1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes lpFloat2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@keyframes lpFloat3 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* A second cursor: the product is where a client and a freelancer
   meet, so somebody else is already on the page. */
.lp-cur {
  position: absolute; left: -38px; bottom: 118px; z-index: 5;
  display: flex; align-items: center; gap: 6px; animation: lpCur 11s ease-in-out infinite;
}
.lp-cur svg { width: 17px; height: 17px; filter: drop-shadow(0 2px 4px rgba(23, 23, 46, 0.3)); }
.lp-cur span {
  font: 600 11px var(--font-body); color: #fff; background: var(--accent);
  border-radius: 5px; padding: 3px 7px; white-space: nowrap;
}
@keyframes lpCur {
  0%, 100% { transform: translate(0, 0); }
  35% { transform: translate(28px, -18px); }
  70% { transform: translate(9px, 11px); }
}

/* ---------- the loop card ---------- */
.lp-lc {
  position: relative; width: 100%; max-width: 454px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 26px 70px rgba(23, 23, 46, 0.15); padding: 16px 20px 19px; z-index: 2;
}
.lp-lc-head {
  display: flex; align-items: center; gap: 9px; font: 600 11px var(--font-mono);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
  padding-bottom: 13px; border-bottom: 1px solid var(--border);
}
.lp-lc-head .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.lp-lc-head .r { margin-left: auto; color: var(--accent); letter-spacing: 0.08em; }
.lp-beat { display: grid; grid-template-columns: 24px 1fr; gap: 0 13px; padding-top: 15px; }
.lp-beat + .lp-beat { border-top: 1px dashed var(--border); margin-top: 14px; }
.lp-beat .n {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font: 600 11px var(--font-mono); background: var(--surface-sunken); color: var(--text-muted);
  transition: background 0.35s ease, color 0.35s ease;
}
.lp-beat.on .n { background: var(--accent-gradient); color: #fff; }
.lp-beat-t { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.lp-beat-t b { font-size: 14px; font-weight: 600; }
.lp-beat-t span { margin-left: auto; font: 500 11px var(--font-mono); color: var(--text-muted); }
/* Dimmed, never hidden: all three beats stay readable, so the card
   makes its whole argument even if the walk never runs. */
.lp-beat-b { transition: opacity 0.35s ease; }
.lp-beat:not(.on) .lp-beat-b { opacity: 0.5; }

.lp-dm { background: var(--surface-sunken); border-radius: 11px; padding: 11px 13px; }
.lp-dm i { font-style: normal; display: block; font: 500 11px var(--font-mono); color: var(--text-muted); margin-bottom: 5px; }
.lp-dm p { font-size: 13.5px; line-height: 1.48; }
.lp-dm mark {
  background: rgba(var(--accent-rgb), 0.14); color: var(--accent);
  font-weight: 600; border-radius: 3px; padding: 0 2px;
}
.lp-chips { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.lp-chips span { font: 600 11.5px var(--font-mono); border: 1px solid var(--border); border-radius: 7px; padding: 4px 8px; }
.lp-chips span.k {
  color: var(--accent); border-color: rgba(var(--accent-rgb), 0.28); background: rgba(var(--accent-rgb), 0.06);
}
.lp-mini { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.lp-mini-top { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-bottom: 1px solid var(--border); }
.lp-av {
  width: 32px; height: 32px; border-radius: 50%; background: var(--accent-gradient); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none;
}
.lp-mini-top b { display: block; font-size: 13.5px; }
.lp-mini-top em { font-style: normal; font-size: 12px; color: var(--text-muted); }
.lp-mini-top .url { margin-left: auto; font: 500 11px var(--font-mono); color: var(--text-muted); }
.lp-svc { display: flex; justify-content: space-between; align-items: center; padding: 9px 13px; font-size: 13px; }
.lp-svc b { font: 600 13.5px var(--font-mono); }
.lp-result {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(var(--success-rgb), 0.07); border: 1px solid rgba(var(--success-rgb), 0.2);
  border-radius: 11px; padding: 10px 13px;
}
.lp-result .amt { font: 600 17px var(--font-mono); color: var(--success); }
.lp-result .to { font-size: 12px; color: var(--text-muted); display: block; margin-top: 1px; }
.lp-result .fee {
  font: 600 11px var(--font-mono); color: var(--success);
  background: rgba(var(--success-rgb), 0.12); border-radius: 6px; padding: 4px 8px;
}
.lp-attr { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 12.5px; color: var(--text-muted); }
.lp-attr .ic {
  width: 22px; height: 22px; border-radius: 6px; background: var(--accent-gradient); color: #fff;
  display: grid; place-items: center; font-size: 11px; flex: none;
}
.lp-attr b { color: var(--text-primary); font-weight: 600; }
.lp .count { font-variant-numeric: tabular-nums; }

/* ---------- the marquee ----------
   The formats this actually writes. A row of partner logos here
   would be other people's marks implying partnerships that do not
   exist; this is true, and it is also the pitch. */
.lp-ticker {
  margin-top: 62px; overflow: hidden; padding: 15px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--chrome-bg);
}
.lp-ticker-t { display: flex; width: max-content; animation: lpSlide 34s linear infinite; }
.lp-ticker-t span {
  font: 500 14px var(--font-body); color: var(--text-muted); padding: 0 26px;
  white-space: nowrap; display: flex; align-items: center; gap: 10px;
}
.lp-ticker-t span i { font-style: normal; color: var(--accent); font-size: 8px; }
@keyframes lpSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   2 · WHAT AN AGENCY CHARGES
   The page's central argument: name the real alternative.
   ============================================================ */
.lp-cost-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 44px; }
.lp-cost {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 20px; display: flex; flex-direction: column; gap: 9px; text-align: left;
}
.lp-cost .who { font: 600 11px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.lp-cost .amt {
  font: 700 clamp(22px, 2.6vw, 29px)/1.1 var(--font-body);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.lp-cost .per { font-size: 13px; color: var(--text-muted); font-weight: 400; }
.lp-cost .note { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; margin-top: auto; padding-top: 6px; }
.lp-cost.us {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.07), rgba(var(--accent-2-rgb), 0.05));
  border-color: rgba(var(--accent-rgb), 0.32); box-shadow: 0 14px 40px rgba(var(--accent-rgb), 0.14);
}
.lp-cost.us .who { color: var(--accent); }
.lp-cost.us .amt { background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-cost.us .note { color: var(--text-primary); }
.lp-cost-foot { margin-top: 20px; font-size: 14.5px; color: var(--text-muted); }
.lp-cost-foot b { color: var(--text-primary); font-weight: 600; }

/* ============================================================
   3 · THE LOOP
   ============================================================ */
.lp-loop {
  display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 46px;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-card);
}
.lp-step {
  padding: 26px 24px; border-left: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px; text-align: left;
}
.lp-step:first-child { border-left: 0; }
.lp-step .sn {
  width: 28px; height: 28px; border-radius: 50%; background: var(--accent-gradient); color: #fff;
  display: grid; place-items: center; font: 600 12px var(--font-mono);
}
.lp-step h3 { font-size: 17px; letter-spacing: -0.01em; }
.lp-step p { font-size: 14px; color: var(--text-muted); line-height: 1.55; }
.lp-step .them { font: 500 11.5px var(--font-mono); color: var(--warning); margin-top: auto; padding-top: 8px; }
.lp-step .them.us { color: var(--success); }

/* ============================================================
   4 · WHO IT'S FOR
   ============================================================ */
.lp-tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 34px; }
.lp-tab {
  font: 600 14px var(--font-body); background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-muted); border-radius: 999px; padding: 10px 20px; cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.lp-tab:hover { color: var(--text-primary); border-color: var(--accent); }
.lp-tab[aria-selected="true"] { background: var(--accent-gradient); border-color: transparent; color: #fff; }
.lp-panel {
  display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; margin-top: 34px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 34px; text-align: left;
}
.lp-panel[hidden] { display: none; }
.lp-panel h3 { font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -0.02em; line-height: 1.2; }
.lp-panel .pain { font-size: 16px; color: var(--text-muted); line-height: 1.6; margin-top: 12px; }
.lp-gets { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.lp-gets div { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; }
.lp-gets .tick { color: var(--success); font-weight: 700; flex: none; }
.lp-samp { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
.lp-samp .lab {
  font: 600 10.5px var(--font-mono); letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 11px;
}
/* white-space: pre-line so the sample posts keep the line breaks
   that make them read as posts rather than as paragraphs. */
.lp-samp p { font-size: 14px; line-height: 1.62; white-space: pre-line; }

/* ============================================================
   5 · SEE THE OUTPUT
   The section that answers "zero images on the page" — and the
   only honest way to sell writing is to show the writing.
   ============================================================ */
.lp-out-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.lp-out {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column; gap: 12px; text-align: left;
  transition: transform 0.22s ease, border-color 0.22s ease;
}
.lp-out:hover { transform: translateY(-4px); border-color: var(--accent); }
.lp-out-top { display: flex; align-items: center; gap: 9px; }
.lp-out .plat {
  font: 600 10.5px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); background: rgba(var(--accent-rgb), 0.08); border-radius: 5px; padding: 4px 8px;
}
.lp-out .forwho { font: 500 11.5px var(--font-mono); color: var(--text-muted); margin-left: auto; }
.lp-out .body { font-size: 14px; line-height: 1.62; white-space: pre-line; color: var(--text-primary); }
.lp-out .foot {
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--border);
  font-size: 12.5px; color: var(--text-muted);
}

/* ============================================================
   6 · FEATURES
   ============================================================ */
.lp-feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.lp-f {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; text-align: left; transition: transform 0.22s ease, border-color 0.22s ease;
}
.lp-f:hover { transform: translateY(-4px); border-color: var(--accent); }
.lp-f .fi {
  width: 38px; height: 38px; border-radius: 10px; background: rgba(var(--accent-rgb), 0.09);
  color: var(--accent); display: grid; place-items: center; font-size: 17px; margin-bottom: 13px;
}
.lp-f h3 { font-size: 16.5px; letter-spacing: -0.01em; margin-bottom: 7px; }
.lp-f p { font-size: 14px; color: var(--text-muted); line-height: 1.55; }

/* ============================================================
   7 · PRICING
   Prices are in the static HTML, not painted in by script — a
   crawler and a link preview both used to see an em-dash here.
   geo.js still overwrites them for a non-India visitor.
   ============================================================ */
.lp-price { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; align-items: start; }
.lp-plan {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; display: flex; flex-direction: column; gap: 14px; text-align: left;
}
.lp-plan.pop {
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 18px 50px rgba(var(--accent-rgb), 0.14); position: relative;
}
.lp-pop-tag {
  position: absolute; top: -11px; left: 26px; font: 600 10.5px var(--font-mono);
  letter-spacing: 0.1em; text-transform: uppercase; background: var(--accent-gradient);
  color: #fff; border-radius: 5px; padding: 4px 10px;
}
.lp-plan .pn { font: 600 12px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.lp-plan .pp { font-size: 38px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.lp-plan .pp span { font-size: 15px; font-weight: 400; color: var(--text-muted); letter-spacing: 0; }
.lp-plan .pd { font-size: 14px; color: var(--text-muted); line-height: 1.55; }
.lp-plan ul { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.lp-plan li { display: flex; gap: 9px; font-size: 14px; line-height: 1.5; }
.lp-plan li .tick { color: var(--success); font-weight: 700; flex: none; }
.lp-plan .btn { margin-top: auto; width: 100%; }

/* ============================================================
   8 · FOUNDING BAND
   ============================================================ */
.lp-band {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.09), rgba(var(--accent-2-rgb), 0.07));
  border: 1px solid rgba(var(--accent-rgb), 0.24); border-radius: 18px; padding: 34px;
  display: flex; gap: 26px; align-items: center; flex-wrap: wrap; text-align: left;
}
.lp-band-l { flex: 1 1 380px; }
.lp-band h3 { font-size: clamp(21px, 2.6vw, 27px); letter-spacing: -0.02em; line-height: 1.2; }
.lp-band p { color: var(--text-muted); font-size: 15px; line-height: 1.6; margin-top: 10px; max-width: 56ch; }
.lp-band-r { display: flex; flex-direction: column; gap: 10px; min-width: 210px; }

/* ============================================================
   9 · FAQ — native <details>, no script, no library
   ============================================================ */
.lp-faq {
  max-width: 820px; margin: 44px auto 0; border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; background: var(--bg-card); text-align: left;
}
.lp-faq details { border-top: 1px solid var(--border); }
.lp-faq details:first-child { border-top: 0; }
.lp-faq summary {
  cursor: pointer; padding: 18px 22px; font-size: 16px; font-weight: 600;
  list-style: none; display: flex; align-items: center; gap: 14px;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; margin-left: auto; color: var(--accent); font-size: 19px; font-weight: 400; flex: none; }
.lp-faq details[open] summary::after { content: "\2212"; }
.lp-faq summary:hover { background: var(--surface-sunken); }
.lp-faq details p { padding: 0 22px 20px; color: var(--text-muted); font-size: 15px; line-height: 1.65; max-width: 70ch; }

/* ============================================================
   10 · CLOSE
   ============================================================ */
.lp-final {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px;
  padding: 56px 34px; text-align: center; box-shadow: var(--shadow);
}
.lp-final h2 { font-size: clamp(26px, 3.6vw, 38px); letter-spacing: -0.025em; line-height: 1.12; text-wrap: balance; }
.lp-final p { color: var(--text-muted); font-size: 17px; margin: 14px auto 0; max-width: 52ch; line-height: 1.6; }
.lp-final .btn { margin-top: 26px; }

/* ============================================================
   MOTION OFF
   Asked once, honoured everywhere. Every rule below removes
   decoration only — no information lives in any of it.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .lp-f-radar, .lp-f-enq, .lp-f-plat, .lp-cur, .lp-ticker-t, .lp h1 .grad { animation: none; }
  .lp .btn, .lp-out, .lp-f, .lp-beat .n, .lp-beat-b { transition: none; }
}
/* Paused once the hero has scrolled away, so a long scroll on a
   cheap phone stops paying for motion nobody can see. landing.js
   puts .lp-still on the hero with one IntersectionObserver. */
.lp-hero.lp-still .lp-f-radar,
.lp-hero.lp-still .lp-f-enq,
.lp-hero.lp-still .lp-f-plat,
.lp-hero.lp-still .lp-cur,
.lp-hero.lp-still .lp-ticker-t,
.lp-hero.lp-still h1 .grad { animation-play-state: paused; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1020px) {
  .lp-cost-grid, .lp-loop, .lp-out-grid, .lp-feat, .lp-price { grid-template-columns: repeat(2, 1fr); }
  .lp-step { border-left: 0; border-top: 1px solid var(--border); }
  .lp-step:nth-child(1), .lp-step:nth-child(2) { border-top: 0; }
  .lp-step:nth-child(even) { border-left: 1px solid var(--border); }
}
@media (max-width: 900px) {
  .lp section { padding: 64px 0; }
  .lp-hero-in { grid-template-columns: 1fr; gap: 44px; }
  .lp h1, .lp-hero-sub { max-width: none; }
  .lp-nav-links { display: none; }
  /* The floating fragments are depth, not information — they crowd a
     phone, and everything they say is repeated inside the card. */
  .lp-frag, .lp-cur { display: none; }
  .lp-panel { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
}
@media (max-width: 640px) {
  .lp { padding: 0 18px; }
  .lp-cost-grid, .lp-loop, .lp-out-grid, .lp-feat, .lp-price { grid-template-columns: 1fr; }
  .lp-step, .lp-step:nth-child(even) { border-left: 0; border-top: 1px solid var(--border); }
  .lp-step:first-child { border-top: 0; }
  .lp-claim { flex-direction: column; max-width: none; }
  .lp-claim .btn { width: 100%; }
  .lp-trust { flex-wrap: wrap; gap: 12px 0; }
  .lp-trust .ti { padding-right: 16px; margin-right: 16px; }
  .lp-band { padding: 26px; }
  .lp-band-r { width: 100%; }
  .lp-final { padding: 40px 22px; }
}

/* ------------------------------------------------------------
   FOLLOW-UP: dead rules in dashboard.css
   ------------------------------------------------------------
   The old landing is no longer rendered, so these selectors in
   css/dashboard.css now match nothing and can be deleted:
     .landing, .landing-nav, .hero, .hero-cta, .features,
     .feature-card, .section-title, .section-sub, .trust-row,
     .trust-item, .who-strip, .who-grid, .who-card, .loop-strip,
     .loop-steps, .loop-step, .loop-line, .final-cta, .final-note
   plus the #landing motion block (heroDrift and the .grad ramp).
   Left in place for this change so one commit does one thing and
   a rollback is a single revert. ~150 lines when it goes.
   ------------------------------------------------------------ */