/* ==========================================================================
   landing_system.css — Signal Glow design system for the landing variants
   (D3 / V3 / D4). Standalone pages only: no Bootstrap, no jQuery, no app CSS.
   Spec: future_plans/HOMEPAGE_FASE1_BRIEF.md §3. Calibration: Stripe/Mercury/
   Linear. Laws: one glow per viewport, headings <=550 sentence case, tabular
   numerals on every number, <1MB total page budget.
   ========================================================================== */

/* ---- Font: Inter variable, self-hosted ---- */
@font-face {
  font-family: 'InterVar';
  src: url('../fonts/InterVariable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens ---- */
:root {
  --ls-canvas: #0d1117;
  --ls-canvas-deep: #090d12;      /* privacy beat, darkest band */
  --ls-surface: #161b22;
  --ls-surface-2: #1c2330;
  --ls-border: rgba(255, 255, 255, .08);
  --ls-border-strong: rgba(255, 255, 255, .14);
  --ls-text: #e6edf3;
  --ls-text-2: #9ba7b4;
  --ls-text-3: #6e7a87;
  --ls-brand: #2E86C1;
  --ls-brand-deep: #1a5276;
  --ls-green: #10b981;
  --ls-gold: #f59e0b;
  --ls-red: #ef4444;
  --ls-radius: 10px;
  --ls-radius-lg: 14px;
  --ls-maxw: 1120px;
  --ls-measure: 65ch;
  --ls-ease: cubic-bezier(.22, .61, .36, 1);
  --ls-reveal-dur: .55s;
  color-scheme: dark;
}

/* ---- Base ---- */
/* The kit is loaded ONLY by standalone landing documents, so it may style the
   root elements directly. overflow-x: clip (not hidden) stops the glow bleed
   from creating sideways scroll without establishing a scroll container. */
html { overflow-x: clip; }
.ls-page, .ls-page *, .ls-page *::before, .ls-page *::after { box-sizing: border-box; }
.ls-page {
  margin: 0;
  background: var(--ls-canvas);
  color: var(--ls-text);
  font-family: 'InterVar', 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.ls-page ::selection { background: rgba(46, 134, 193, .35); }
.ls-page :focus-visible {
  outline: 2px solid var(--ls-brand);
  outline-offset: 3px;
  border-radius: 4px;
}
.ls-page ::-webkit-scrollbar { width: 10px; }
.ls-page ::-webkit-scrollbar-thumb { background: #2a3340; border-radius: 5px; }
.ls-page ::-webkit-scrollbar-track { background: var(--ls-canvas); }

/* Every number on the page */
.ls-num { font-variant-numeric: tabular-nums; }

/* ---- Type scale (clamps verified down to 390px) ---- */
.ls-h1 {
  font-size: clamp(2rem, 1.1rem + 3.8vw, 3.4rem);
  font-weight: 550;
  letter-spacing: -0.022em;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0 0 .6em;
}
.ls-h2 {
  font-size: clamp(1.45rem, 1rem + 1.9vw, 2.15rem);
  font-weight: 540;
  letter-spacing: -0.018em;
  line-height: 1.2;
  text-wrap: balance;
  margin: 0 0 .55em;
}
.ls-h3 {
  font-size: clamp(1.1rem, .95rem + .7vw, 1.35rem);
  font-weight: 540;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
}
.ls-sub {
  font-size: clamp(1.02rem, .9rem + .5vw, 1.2rem);
  color: var(--ls-text-2);
  max-width: var(--ls-measure);
  text-wrap: pretty;
}
.ls-body { color: var(--ls-text-2); max-width: var(--ls-measure); }
.ls-muted { color: var(--ls-text-3); }
.ls-micro { font-size: .88rem; color: var(--ls-text-3); }

/* ---- Layout shells ---- */
.ls-wrap { max-width: var(--ls-maxw); margin: 0 auto; padding: 0 24px; }
.ls-section { padding: clamp(72px, 10vw, 128px) 0; position: relative; }
.ls-section--breathe { padding: clamp(110px, 14vw, 180px) 0; }
.ls-section--deep { background: var(--ls-canvas-deep); }
.ls-section--bleed { padding-left: 0; padding-right: 0; }
.ls-center { text-align: center; }
.ls-center .ls-sub, .ls-center .ls-body { margin-left: auto; margin-right: auto; }

/* Two-column proof beat: copy + frame */
.ls-split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.ls-split--flip { grid-template-columns: 7fr 5fr; }
@media (max-width: 900px) { .ls-split, .ls-split--flip { grid-template-columns: 1fr; } }

/* ---- The glow (max ONE per viewport) ---- */
.ls-glow { position: relative; }
.ls-glow::before {
  content: '';
  position: absolute;
  inset: -12% -18%;
  background: radial-gradient(ellipse 55% 45% at 50% 42%, rgba(46, 134, 193, .14), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.ls-glow--strong::before {
  background: radial-gradient(ellipse 55% 45% at 50% 42%, rgba(46, 134, 193, .20), transparent 70%);
}
.ls-glow > * { position: relative; z-index: 1; }

/* ---- CTA pair ---- */
.ls-cta-pair { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.ls-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 26px;
  border-radius: var(--ls-radius);
  font-size: 1.02rem; font-weight: 550; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .18s var(--ls-ease), box-shadow .18s var(--ls-ease),
              background-color .18s var(--ls-ease), border-color .18s var(--ls-ease);
}
.ls-btn--primary {
  background: linear-gradient(135deg, #2E86C1 0%, #1a5276 100%);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 8px 24px -10px rgba(46,134,193,.55);
}
.ls-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 12px 28px -10px rgba(46,134,193,.65); }
.ls-btn--secondary {
  background: var(--ls-surface);
  color: var(--ls-text);
  border-color: rgba(46, 134, 193, .45);
}
.ls-btn--secondary:hover { border-color: var(--ls-brand); background: var(--ls-surface-2); }
.ls-btn:active { transform: translateY(0); }
.ls-textlink {
  color: var(--ls-brand); text-decoration: none;
  border-bottom: 1px solid rgba(46,134,193,.35);
  padding-bottom: 1px;
}
.ls-textlink:hover { border-bottom-color: var(--ls-brand); }

/* ---- Browser-chrome frame for screenshots ---- */
.ls-frame {
  background: var(--ls-surface);
  border: 1px solid var(--ls-border);
  border-radius: var(--ls-radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6);
}
.ls-frame__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ls-border);
  background: var(--ls-surface-2);
}
.ls-frame__dots { display: flex; gap: 6px; }
.ls-frame__dots span { width: 10px; height: 10px; border-radius: 50%; background: #3a4453; }
.ls-frame__url {
  flex: 1; text-align: center;
  font-size: .78rem; color: var(--ls-text-3);
  background: rgba(255,255,255,.04);
  border-radius: 6px; padding: 3px 12px;
  max-width: 320px; margin: 0 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ls-frame img { display: block; width: 100%; height: auto; }
@media (max-width: 640px) {
  .ls-frame { border-radius: 10px; }
  .ls-frame__url { max-width: 220px; }
}

/* ---- Floating annotation chip + hairline ---- */
.ls-anno {
  position: absolute;
  background: var(--ls-surface-2);
  border: 1px solid var(--ls-border-strong);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: .84rem; font-weight: 500; color: var(--ls-text);
  box-shadow: 0 10px 26px -12px rgba(0,0,0,.7);
  white-space: nowrap;
}
.ls-anno::after {
  content: '';
  position: absolute;
  width: var(--lead, 42px); height: 1px;
  background: var(--ls-border-strong);
  top: 50%; left: 100%;
}
.ls-anno--left::after { left: auto; right: 100%; }
@media (max-width: 900px) { .ls-anno { display: none; } }

/* ---- AI chat chip (mirrors the real widget styling) ---- */
.ls-chip {
  background: var(--ls-surface);
  border: 1px solid var(--ls-border);
  border-radius: var(--ls-radius-lg);
  padding: 16px 18px;
  font-size: .92rem;
  max-width: 460px;
}
.ls-chip__q {
  background: rgba(46, 134, 193, .16);
  border: 1px solid rgba(46, 134, 193, .3);
  border-radius: 999px;
  padding: 7px 15px;
  display: inline-block;
  color: var(--ls-text);
  margin-bottom: 10px;
}
.ls-chip__a { color: var(--ls-text-2); }
.ls-chip__a strong { color: var(--ls-text); font-weight: 600; }

/* ---- Cards ---- */
.ls-card {
  background: var(--ls-surface);
  border: 1px solid var(--ls-border);
  border-radius: var(--ls-radius-lg);
  padding: 26px;
}
.ls-cardgrid { display: grid; gap: 20px; }
.ls-cardgrid--3 { grid-template-columns: repeat(3, 1fr); }
.ls-cardgrid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .ls-cardgrid--3, .ls-cardgrid--2 { grid-template-columns: 1fr; } }

/* ---- Hairline question rows (pain beat) ---- */
.ls-qrow { border-top: 1px solid var(--ls-border); padding: 30px 0; }
.ls-qrow:last-child { border-bottom: 1px solid var(--ls-border); }
.ls-qrow h3 { margin: 0 0 6px; font-weight: 540; font-style: italic; }
.ls-qrow p { margin: 0; color: var(--ls-text-2); max-width: var(--ls-measure); }

/* ---- FAQ ---- */
.ls-faq details {
  border-top: 1px solid var(--ls-border);
  padding: 4px 0;
}
.ls-faq details:last-child { border-bottom: 1px solid var(--ls-border); }
.ls-faq summary {
  cursor: pointer; list-style: none;
  padding: 20px 34px 20px 0;
  font-weight: 540; font-size: 1.05rem;
  position: relative;
}
.ls-faq summary::-webkit-details-marker { display: none; }
.ls-faq summary::after {
  content: '';
  position: absolute; right: 6px; top: 50%;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--ls-text-3);
  border-bottom: 1.5px solid var(--ls-text-3);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .25s var(--ls-ease);
}
.ls-faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.ls-faq .ls-faq__a { padding: 0 0 22px; color: var(--ls-text-2); max-width: var(--ls-measure); }

/* ---- Plan cards ---- */
.ls-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 1000px) { .ls-plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ls-plans { grid-template-columns: 1fr; } }
.ls-plan { position: relative; display: flex; flex-direction: column; gap: 10px; }
.ls-plan--popular { border-color: rgba(245, 158, 11, .5); }
.ls-plan__badge {
  /* Seated inside the card (top-right), never astride the border. */
  position: absolute; top: 14px; right: 14px;
  background: var(--ls-gold); color: #1a1206;
  font-size: .72rem; font-weight: 650; letter-spacing: .02em;
  border-radius: 999px; padding: 3px 12px;
  white-space: nowrap;
}
.ls-plan__price { font-size: 1.7rem; font-weight: 560; font-variant-numeric: tabular-nums; }
.ls-plan__price small { font-size: .85rem; color: var(--ls-text-3); font-weight: 450; }

/* ---- Check statements (privacy beat) ---- */
.ls-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ls-checks li { padding-left: 30px; position: relative; max-width: var(--ls-measure); }
.ls-checks li::before {
  content: '';
  position: absolute; left: 2px; top: .42em;
  width: 12px; height: 7px;
  border-left: 2px solid var(--ls-brand);
  border-bottom: 2px solid var(--ls-brand);
  transform: rotate(-45deg);
}

/* ---- Hero mechanism diagram (built in code, never a PNG) ---- */
.ls-mech { display: grid; justify-items: center; gap: 0; }
.ls-mech__total {
  font-size: clamp(2.6rem, 1.6rem + 4.6vw, 4.4rem);
  font-weight: 580; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.ls-mech__delta { color: var(--ls-green); font-weight: 550; font-variant-numeric: tabular-nums; }
.ls-mech__rule {
  width: 1px; height: 34px;
  background: linear-gradient(to bottom, var(--ls-border-strong), transparent);
  margin: 14px 0 0;
}
.ls-mech__accounts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.ls-mech__accounts::before {
  content: '';
  display: block; width: 100%; height: 1px;
  background: var(--ls-border);
  max-width: 420px; margin: 0 auto -6px;
}
.ls-acct {
  background: var(--ls-surface);
  border: 1px solid var(--ls-border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: .84rem; color: var(--ls-text-2);
  display: inline-flex; align-items: center; gap: 7px;
}
.ls-acct::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ls-brand);
  opacity: .8;
}
.ls-tk-cell { display: inline-flex; align-items: center; gap: 6px; }
.ls-tk-cell img { width: 15px; height: 15px; border-radius: 3px; display: block; }
.ls-acct-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ls-acct--logo::before { display: none; }
.ls-acct--logo img { width: 18px; height: 18px; border-radius: 4px; display: block; }

/* ---- Reveal choreography: ONE for the whole page ---- */
.ls-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--ls-reveal-dur) var(--ls-ease), transform var(--ls-reveal-dur) var(--ls-ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.ls-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ls-reveal { opacity: 1; transform: none; transition: none; }
  .ls-page * { animation: none !important; transition-duration: .01ms !important; }
}

/* ---- Sticky mobile CTA (appears after the proof beat, JS-gated) ---- */
.ls-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  /* Solid, no backdrop-filter: blur breaks rasterization on GPU-less renders
     (blank-button paint bug caught by review) and buys little over solid. */
  background: #10151d;
  border-top: 1px solid var(--ls-border);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  display: none;
  transform: translateY(100%);
  transition: transform .3s var(--ls-ease);
}
.ls-sticky.is-on { transform: none; }
.ls-sticky .ls-btn { width: 100%; min-height: 52px; }
@media (max-width: 640px) { .ls-sticky { display: block; } }

/* ---- Nav + footer ---- */
.ls-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
}
.ls-nav__links { display: flex; gap: 26px; align-items: center; }
.ls-nav__links a { color: var(--ls-text-2); text-decoration: none; font-size: .95rem; }
.ls-nav__links a:hover { color: var(--ls-text); }
@media (max-width: 640px) { .ls-nav__links a:not(.ls-nav__keep) { display: none; } }
.ls-footer {
  border-top: 1px solid var(--ls-border);
  padding: 40px 0 60px;
  color: var(--ls-text-3); font-size: .9rem;
}

/* ---- Mobile touch floor ---- */
@media (max-width: 640px) {
  .ls-btn { min-height: 52px; width: 100%; }
  .ls-cta-pair { flex-direction: column; align-items: stretch; }
  .ls-section { padding: 56px 0; }
  .ls-section--breathe { padding: 88px 0; }
}

/* ---- Testimonial quote ---- */
.ls-quote {
  max-width: 620px; margin: 28px auto 0; padding: 18px 22px;
  border-left: 3px solid var(--ls-brand); background: var(--ls-surface);
  border-radius: 0 var(--ls-radius) var(--ls-radius) 0; text-align: left;
}
.ls-quote p { font-size: 1.02rem; line-height: 1.55; color: var(--ls-text-2); margin: 0; }
.ls-quote cite { display: block; font-style: normal; font-size: .82rem; color: var(--ls-text-3); margin-top: 10px; }

/* ---- Directory footer (site-wide links, shared partial) ---- */
.ls-fatfooter { border-top: 1px solid var(--ls-border); padding: 46px 0 0; }
.ls-fatfooter__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px 26px; }
.ls-fatfooter h4 {
  font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ls-text-3); margin: 0 0 11px;
}
.ls-fatfooter ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ls-fatfooter li { min-width: 0; }
.ls-fatfooter__grid a { color: var(--ls-text-2); text-decoration: none; font-size: .86rem; }
.ls-fatfooter__grid a:hover { color: var(--ls-text); }
.ls-fatfooter__bottom {
  display: flex; gap: 12px 26px; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--ls-border); margin-top: 38px; padding: 20px 0 56px;
  color: var(--ls-text-3); font-size: .84rem;
}
.ls-fatfooter__bottom a { color: var(--ls-text-3); text-decoration: none; }
.ls-fatfooter__bottom a:hover { color: var(--ls-text); }
@media (max-width: 900px) { .ls-fatfooter__grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Store badges (footer + app beats) ---- */
.ls-store {
  display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 18px;
  border-radius: var(--ls-radius); background: var(--ls-surface); border: 1px solid var(--ls-border);
  color: var(--ls-text); text-decoration: none; font-size: .92rem;
}
.ls-store:hover { border-color: rgba(46, 134, 193, .5); }
.ls-fatfooter__apps { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }

/* ---- Narrow frame: a small product card must not upscale to column width ---- */
.ls-frame--narrow { max-width: 560px; margin-left: auto; margin-right: auto; }
/* Inside a narrow frame the mobile-scroll min-width must not force a crop. */
.ls-frame--narrow img { min-width: 0 !important; width: 100%; height: auto; }