/* lintstorm.css — Lintstorm SKIN (electric scanner-tech, B2B SaaS template voice)
 * ==========================================================================
 * Palette + voice + motion layer over boutique-system.css + funnel-system.css.
 * Deep-magenta canvas, rose accent, sans display on a φ type ladder
 * (16/26/42/68). body-scoped tokens win over the system sheets regardless of
 * load order. Default = dark (tech app); light = blush toggle.
 */

/* ── Palette — deep-magenta (default) ───────────────────────────────────── */
body {
  --bg: #070409; --bg-2: #0e0712;
  --card: rgba(22, 12, 20, 0.66); --card-hi: rgba(32, 16, 28, 0.92);
  --line: rgba(255, 160, 190, 0.1); --line-gold: rgba(244, 63, 94, 0.34);
  --accent: #F43F5E; --accent-soft: rgba(244, 63, 94, 0.13);
  --text: rgba(250, 240, 244, 0.94); --muted: rgba(240, 210, 222, 0.56); --faint: rgba(240, 210, 222, 0.32);
  background: var(--bg); color: var(--text);
}

/* ── Palette — blush light (theme toggle) ───────────────────────────────── */
html[data-theme="light"] body {
  --bg: #fdf5f7; --bg-2: #f8e9ee;
  --card: rgba(255, 255, 255, 0.86); --card-hi: #ffffff;
  --line: rgba(120, 20, 45, 0.12); --line-gold: rgba(190, 30, 60, 0.34);
  --accent: #d61f44; --accent-soft: rgba(214, 31, 68, 0.12);
  --text: #2a0610; --muted: rgba(42, 6, 16, 0.62); --faint: rgba(42, 6, 16, 0.4);
}

/* Ambient mesh — rose glow, grid wash. */
body .fx-mesh {
  background:
    radial-gradient(58% 46% at 82% 4%, var(--accent-soft), transparent 62%),
    radial-gradient(64% 56% at 8% 100%, var(--accent-soft), transparent 68%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}

/* ── Type voice — sans display on the φ ladder, tight display tracking ──── */
body .hero h1, body .b-sec-head h2, body .b-split h2, body .b-story h2,
body .b-cta-band h2, body .overlay-hero h2, body .b-step h3,
body .panel h2 {
  font-family: var(--sans); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
}
body .b-sec-head h2, body .b-cta-band h2, body .b-story h2 { font-size: var(--fs-2); }
body .b-split h2 { font-size: var(--fs-2); }
body .panel h2 { font-size: var(--fs-1); }
body .b-vprop .stat, body .b-metric .stat, body .b-step-n {
  font-family: var(--sans); font-weight: 700; letter-spacing: -0.02em; font-size: var(--fs-2); line-height: 1;
}
body .hero-tagline {
  font-family: var(--sans); font-style: normal; font-weight: 600; font-size: var(--fs-1);
  line-height: 1.35; color: var(--accent); margin: -2px 0 18px;
}
body .panel-kick, body .hero-eyebrow, body .b-eyebrow { color: var(--accent); letter-spacing: .22em; }
/* Measure caps — no prose line longer than ~72ch anywhere. */
body .b-sec-head p, body .b-story p, body .b-split p, body .b-faq .a,
body .b-quote p, body .panel .lede, body .b-cta-band p { max-width: 72ch; }
body .b-story p { margin-left: auto; margin-right: auto; }

/* ── Topbar ─────────────────────────────────────────────────────────────── */
body .tb { background: rgba(7, 4, 9, 0.72); border-bottom: 1px solid var(--line); }
body .tb-brand { color: var(--text); font-family: var(--sans); font-weight: 700; letter-spacing: -0.01em; }
body .tb-brand .mark { color: var(--accent); }
body .tb .b-nav a { color: var(--muted); }
body .tb .b-nav a:hover { color: var(--accent); }
html[data-theme="light"] body .tb { background: rgba(255, 255, 255, 0.82); }

/* ── Button contrast on the rose accent ─────────────────────────────────── */
body .btn-primary { color: #2a0610; }
body .b-bottombar .b-bb-btn.book { color: #2a0610; }
body .bill-opt.on, body .plan-badge { color: #2a0610; }
html[data-theme="light"] body .btn-primary,
html[data-theme="light"] body .bill-opt.on,
html[data-theme="light"] body .plan-badge { color: #fff; }

/* ── Radii + glow on panels/cards ───────────────────────────────────────── */
body .panel { border-radius: 18px; box-shadow: 0 24px 60px rgba(8, 2, 6, 0.42); }
body .b-vprop, body .b-gcard, body .b-quote, body .b-step, body .b-metric { border-radius: 14px; }
body .overlay-hero { background: linear-gradient(180deg, var(--accent-soft), transparent); }

/* ── Hero art — golden rectangle, thirds-anchored glow, scan-sweep ──────── */
body .b-hero-art {
  position: relative; border-radius: 18px; aspect-ratio: 1.618 / 1; max-width: 460px;
  overflow: hidden;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(70% 60% at 33.3% 33.3%, var(--accent-soft), transparent 60%),
    radial-gradient(60% 60% at 66.6% 66.6%, var(--accent-soft), transparent 62%),
    linear-gradient(160deg, var(--card-hi), var(--card));
  border: 1px solid var(--line-gold);
  box-shadow: 0 30px 80px color-mix(in srgb, var(--accent) 20%, transparent), inset 0 0 60px color-mix(in srgb, var(--accent) 8%, transparent);
}
body .b-hero-art svg.b-motif { position: absolute; inset: 12%; width: 76%; height: 76%; filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--accent) 35%, transparent)); }
/* Scan-sweep line (::before) + glow node on the lower thirds intersection (::after). */
body .b-hero-art::before {
  content: ""; position: absolute; left: 0; right: 0; top: 66.6%; height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 75%, transparent), transparent);
  box-shadow: 0 0 18px 2px color-mix(in srgb, var(--accent) 45%, transparent);
}
body .b-hero-art::after {
  content: ""; position: absolute; width: 10px; height: 10px; top: 33.3%; left: 33.3%;
  border-radius: 999px; background: var(--accent);
  box-shadow: 0 0 0 6px var(--accent-soft), 0 0 28px 4px color-mix(in srgb, var(--accent) 60%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  body .b-hero-art::before { animation: ls-sweep 4.5s cubic-bezier(.45, 0, .55, 1) infinite; }
  @keyframes ls-sweep { 0% { top: 4%; opacity: 0; } 12% { opacity: 1; } 66% { top: 66.6%; opacity: 1; } 82% { opacity: .4; } 100% { top: 66.6%; opacity: 0; } }
  body .b-hero-art::after { animation: ls-pulse 3.2s ease-in-out infinite; }
  @keyframes ls-pulse { 0%, 100% { box-shadow: 0 0 0 6px var(--accent-soft), 0 0 28px 4px color-mix(in srgb, var(--accent) 60%, transparent); } 50% { box-shadow: 0 0 0 10px var(--accent-soft), 0 0 36px 8px color-mix(in srgb, var(--accent) 70%, transparent); } }
}

/* Gallery / overlay motif tiles. */
body .b-gart { background: linear-gradient(160deg, var(--card-hi), var(--card)); aspect-ratio: 1.618 / 1; display: grid; place-items: center; }
body .b-gart svg.b-motif, body .overlay-art svg.b-motif { width: 46%; height: 72%; opacity: .9; }

/* ── Hero CTA cluster (rendered by boutique-render.js from config) ──────── */
body .hero-cta-note { font-size: 13px; color: var(--muted); margin-top: var(--sp2); }
body .hero-trust { display: flex; flex-wrap: wrap; gap: var(--sp2); margin-top: var(--sp3); }
body .hero-trust .chip {
  font-size: 12px; color: var(--muted); border: 1px solid var(--line-gold);
  border-radius: 999px; padding: 5px 13px; letter-spacing: .02em; white-space: nowrap;
}
body .hero.hero--noart .hero-trust { justify-content: center; }

/* ── Hero geometry re-assert (L12) — funnel-system.css ships `.hero` at
 * 1.4fr and the inline critical CSS's `.hero` is equal-specificity to it, so
 * whichever loads last wins the cascade on a fresh paint; body-scoped here
 * beats both regardless of load order. φ split + φ fold height, restated. */
body .hero { grid-template-columns: 1.618fr 1fr; min-height: 61.8vh; }
/* Motif tuning (L14) — same shared `motif-breathe` engine, tighter amplitude
 * and faster period than the 6px/9s default: reads "electric" against the
 * scan-sweep art already in motion, without a second keyframe block. */
body .hero-art svg { --motif-amp: 8px; --motif-dur: 5.5s; }

/* ── Funnel: rail motion + conversion elements ──────────────────────────── */
body .rail-node { transition: background .25s, border-color .25s, transform .25s; }
body .rail-step.active .rail-node { transform: scale(1.08); }
body .rail-link { transition: background .4s; }
body .rail-step.done ~ .rail-link { background: var(--line-gold); }
body .plans-hi { color: var(--accent); font-weight: 600; margin: 0 0 var(--sp3); }
body .plans-hi:empty { display: none; }
body .plans-proof { border-top: 1px solid var(--line); margin-top: var(--sp4); padding-top: var(--sp3); }
body .plans-proof:empty { display: none; }
body .plans-proof .q { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.5; max-width: 60ch; }
body .plans-proof .who { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-top: var(--sp1); }
#plans { transition: opacity .15s ease; }
#plans.plans--swap { opacity: .25; }
body .plan--featured { transform: translateY(-4px); box-shadow: 0 18px 48px color-mix(in srgb, var(--accent) 22%, transparent); }
body .next-steps-h { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: var(--sp4) 0 var(--sp2); }
body .next-steps { list-style: none; counter-reset: ns; margin: 0; padding: 0; text-align: left; max-width: 34em; margin-inline: auto; }
body .next-steps li {
  counter-increment: ns; position: relative; padding: var(--sp1) 0 var(--sp1) 42px;
  color: var(--text); border-bottom: 1px solid var(--line); line-height: 1.5;
}
body .next-steps li::before {
  content: counter(ns); position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; display: grid; place-items: center; font-weight: 700; font-size: 13px;
  color: var(--accent); border: 1px solid var(--line-gold); border-radius: 999px; background: var(--accent-soft);
}

/* Confirmed seal — draw-on when the step activates. */
@media (prefers-reduced-motion: no-preference) {
  body .step.active .seal path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: ls-seal .6s .15s ease forwards; }
  @keyframes ls-seal { to { stroke-dashoffset: 0; } }
}

/* ── Overlay dialog fade ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  body dialog.overlay[open] { animation: ls-ov .22s cubic-bezier(.4, 0, .2, 1); }
  @keyframes ls-ov { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
  body dialog.overlay::backdrop { background: rgba(7, 4, 9, .62); }
}

/* ── Mobile polish ──────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  body .b-hero-art { aspect-ratio: 2.2 / 1; max-width: none; }
  body .hero-trust .chip { font-size: 11px; padding: 5px 11px; }
  body .b-foot { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Light-theme parity for skin additions ──────────────────────────────── */
html[data-theme="light"] body .demo-card { background: #ffffff; }
html[data-theme="light"] body .demo-code { color: #2a0610; }
html[data-theme="light"] body .hero-trust .chip { color: var(--muted); }
html[data-theme="light"] body dialog.overlay::backdrop { background: rgba(42, 6, 16, .3); }