/* ==========================================================================
   landing-purple.css — assembled from hero.css + story.css + engine.css + proof.css
   Scoped under .lp / .lp-* namespaces only. Loaded by index.html and pricing.html.
   ========================================================================== */

/* ---- Manrope (the Claude Design mockup's typeface) — self-hosted variable font.
   The mockup uses Manrope for EVERYTHING (display, body, and the small
   letter-spaced "mono" labels). We remap the site's --display/--sans/--mono
   tokens to Manrope *inside the .lp scope only*, so this page matches the
   mockup 1:1 while the rest of the site keeps Fraunces/Space Grotesk/IBM Plex. */
@font-face{
  font-family:"Manrope";
  src:url(fonts/manrope-var.woff2) format("woff2");
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}

.lp,
.lp.lp-nav,
.lp.lp-footer{
  --display:"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans:"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-family:var(--sans);
  /* brand tokens available to every .lp element (idempotent with the inline
     values on the main .lp wrapper) so standalone .lp sections like the
     FAQ and final CTA inherit them too. */
  --lp-accent:#7B36FF;
  --lp-accent2:#529DFF;
  --lp-ink:#0C1430;
  --lp-navy:#020E2D;
  --lp-muted:#6E7180;
  --lp-line:#E7E5F0;
  --lp-surface:#F7F6FB;
}

/* ---- hero.css ---- */
/* ==========================================================================
   Landing-purple (.lp) — HERO + EMAIL STRIP
   Scoped visual system for the new Tracehold index.html hero.
   Local tokens are declared inline on .lp (style attribute) in hero.html;
   this file only adds semantic state colors + all structural rules.
   ========================================================================== */

.lp{
  --lp-green:#1F8A5B;
  --lp-amber:#C98A1A;
  --lp-red:#C0362C;
  --lp-blue:#529DFF;
  overflow-x:hidden;
  background:#fff;
  color:var(--lp-ink);
}

.lp *{ box-sizing:border-box; }
/* NOTE: no local ".lp a{color:inherit}" reset here — the site's global
   "a{color:inherit}" (styles.css) already covers this at lower specificity,
   so buttons like .lp-btn--primary can set their own color without a
   higher-specificity compound selector fighting them for it. */

.lp__section{ position:relative; }

/* ---------------------------------- HERO --------------------------------- */

.lp__section.lp-hero,
.lp-hero{
  position:relative;
  overflow:hidden; /* clips the big background mark to this section — position:absolute
    elements paint above later sections' plain backgrounds regardless of DOM order,
    so without this the enlarged mark would bleed into the section below. */
  border-bottom:1px solid var(--lp-line);
  background:
    radial-gradient(1100px 620px at 86% -12%, rgba(123,54,255,0.14), transparent 58%),
    radial-gradient(820px 520px at -4% 8%, rgba(82,157,255,0.12), transparent 56%),
    #ffffff;
  padding:72px 0 64px;
}

.lp-hero__grid{
  display:grid;
  grid-template-columns:1.04fr 1.18fr;
  gap:56px;
  align-items:center;
}

.lp-hero__eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  font-family:var(--mono);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--lp-muted);
  margin-bottom:28px;
}
.lp-hero__eyebrow-bar{ width:18px; height:2px; background:var(--lp-accent); display:inline-block; }
.lp-hero__eyebrow-dot{ color:#C7C4D2; }
.lp-hero__eu{ color:var(--lp-accent); text-decoration:underline; text-underline-offset:3px; }

.lp-hero__title{
  margin:0 0 24px;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.4rem,5vw,3.9rem);
  line-height:1.03;
  letter-spacing:-.015em;
  color:var(--lp-ink);
}
.lp-hero__word-line{ display:block; white-space:nowrap; }
.lp-hero__word{
  color:var(--lp-accent);
  display:inline-block;
  min-height:1.1em;
}
.lp-hero__word::after{
  content:"";
  display:inline-block;
  width:5px;
  height:.72em;
  margin-left:5px;
  vertical-align:-0.06em;
  background:var(--lp-accent);
  animation:lp-blink 1s steps(1) infinite;
}

.lp-hero__sub{
  margin:0 0 30px;
  font-family:var(--sans);
  font-size:1.05rem;
  line-height:1.62;
  color:#3A3E50;
  max-width:500px;
}

.lp-hero__ctas{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

.lp-btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--sans);
  font-size:.94rem;
  font-weight:700;
  padding:14px 22px;
  border-radius:10px;
  transition:background .2s ease, transform .2s ease, border-color .2s ease, color .2s ease;
}
.lp-btn--primary{ background:var(--lp-navy); color:#fff; }
.lp-btn--primary:hover{ background:#0A1838; transform:translateY(-1px); }
.lp-btn--ghost{ background:#fff; color:var(--lp-ink); border:1px solid #D8D5E4; }
.lp-btn--ghost:hover{ border-color:var(--lp-accent); color:var(--lp-accent); }
.lp-btn__arrow{
  display:inline-block;
  width:7px; height:7px;
  border-top:1.9px solid currentColor;
  border-right:1.9px solid currentColor;
  transform:rotate(45deg);
}

/* ---- simulation panel ---- */

.lp-hero__panel{ position:relative; }
.lp-hero__panel-mark{
  position:absolute;
  top:-118px; right:-150px;
  width:680px;
  max-width:none;
  pointer-events:none;
  opacity:.16;
  z-index:0;
}
.lp-hero__panel-mark svg{ width:100%; height:auto; display:block; fill:var(--lp-accent); }

.lp-sim{ position:relative; z-index:1; }

/* ---- "try different modes" nudge — points at the browser-bar extension icon ---- */
.lp-sim__nudge{
  position:absolute;
  top:-30px; right:24px;
  z-index:16;
  display:flex; align-items:center; gap:7px;
  pointer-events:none;
  color:var(--lp-accent);
  animation:lp-nudge-float 2.6s ease-in-out infinite;
}
.lp-sim__nudge[hidden]{ display:none; }
.lp-sim__nudge-text{ font-family:var(--sans); font-style:italic; font-size:.84rem; font-weight:700; white-space:nowrap; }
.lp-sim__nudge-arrow{ display:block; flex:none; }
@keyframes lp-nudge-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }

/* ---- mock chat webapp card ("chatly.ai"), with the extension inside it ---- */
.lp-sim__card{
  position:relative;
  background:#fff;
  border:1px solid #E2E0EC;
  border-radius:16px;
  box-shadow:0 34px 70px -40px rgba(12,20,48,.4);
  overflow:hidden;
}

.lp-sim__bar{
  display:flex; align-items:center; gap:12px;
  padding:11px 15px;
  border-bottom:1px solid var(--lp-line);
  background:var(--lp-surface);
}
.lp-sim__bar-dots{ display:flex; gap:6px; }
.lp-sim__bar-dots i{ width:11px; height:11px; border-radius:50%; background:#E2E0EC; display:inline-block; }
.lp-sim__bar-urlwrap{ flex:1; display:flex; justify-content:center; }
.lp-sim__bar-url{
  display:inline-flex; align-items:center; gap:7px;
  background:#fff; border:1px solid var(--lp-line); border-radius:999px;
  padding:5px 14px;
  font-family:var(--sans); font-size:.72rem; color:var(--lp-muted);
}
.lp-sim__bar-url-dot{ width:6px; height:6px; border-radius:50%; background:var(--lp-green); display:inline-block; }
.lp-sim__bar-ext{
  position:relative; flex:none;
  width:28px; height:28px;
  border-radius:7px; border:none; cursor:pointer;
  background:rgba(123,54,255,.10);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.lp-sim__bar-ext:hover{ background:rgba(123,54,255,.18); }
.lp-sim__bar-ext:focus-visible{ outline:2px solid var(--lp-accent); outline-offset:2px; }
.lp-sim__bar-ext svg{ height:15px; width:auto; display:block; fill:var(--lp-accent); }
.lp-sim__bar-ext-dot{
  position:absolute; top:-2px; right:-2px;
  width:8px; height:8px; border-radius:50%;
  background:var(--lp-green); border:1.5px solid var(--lp-surface);
}

.lp-sim__page{
  position:relative;
  padding:74px 26px 30px;
  min-height:474px;
  display:flex; flex-direction:column; justify-content:center;
}

.lp-sim__greeting{
  margin:0 0 30px;
  text-align:center;
  font-family:var(--sans); font-size:1.35rem; font-weight:600;
  color:#0D0D0D; letter-spacing:-.01em;
}
.lp-sim__greeting[hidden]{ display:none; }

.lp-sim__sentrow{ display:flex; justify-content:flex-end; margin:0 0 22px; animation:lp-rise .4s cubic-bezier(.22,1,.36,1); }
.lp-sim__sentrow[hidden]{ display:none; }
.lp-sim__sent-bubble{
  max-width:86%;
  background:#F4F4F8; border:1px solid #ECEAF3;
  border-radius:18px; border-top-right-radius:5px;
  padding:11px 15px;
}
.lp-sim__sent-text{ margin:0; font-family:var(--sans); font-size:.86rem; line-height:1.6; color:#0D0D0D; }
.lp-sim__sent-foot{
  display:flex; align-items:center; justify-content:flex-end; gap:6px;
  margin-top:6px;
  font-family:var(--sans); font-size:.65rem; font-weight:700;
  color:var(--lp-green);
}
.lp-sim__sent-foot svg{ display:block; }

.lp-sim__filechip-icon{
  flex:none; width:26px; height:26px; border-radius:7px;
  background:rgba(229,72,77,.12); color:#E5484D;
  display:flex; align-items:center; justify-content:center;
}
.lp-sim__filechip-icon--lg{ width:30px; height:30px; border-radius:8px; }
.lp-sim__sent-filechip{
  display:flex; align-items:center; gap:9px;
  background:#fff; border:1px solid var(--lp-line); border-radius:10px;
  padding:7px 11px 7px 8px; margin:0 0 9px;
}
.lp-sim__sent-filechip[hidden]{ display:none; }
.lp-sim__filechip-name{ flex:1; min-width:0; font-family:var(--sans); font-size:.78rem; font-weight:800; color:var(--lp-ink); }
.lp-sim__filechip-tag{
  flex:none; font-family:var(--sans); font-size:.6rem; font-weight:700; color:var(--lp-accent);
  background:rgba(123,54,255,.12); border-radius:6px; padding:2px 7px;
}
.lp-sim__filechip-tag[hidden]{ display:none; }

/* ---- composer ---- */
.lp-sim__composer{
  position:relative;
  background:#fff; border:1px solid #E2E0EC; border-radius:22px;
  box-shadow:0 12px 32px -20px rgba(12,20,48,.28);
  padding:16px 18px 12px;
}
.lp-sim__composer-filechip{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--lp-surface); border:1px solid var(--lp-line); border-radius:11px;
  padding:8px 12px 8px 9px; margin:0 0 13px; max-width:100%;
}
.lp-sim__composer-filechip[hidden]{ display:none; }
.lp-sim__filechip-meta{ min-width:0; display:flex; flex-direction:column; }
.lp-sim__filechip-sub{ font-family:var(--sans); font-size:.66rem; color:var(--lp-muted); }

.lp-sim__composer-text{ margin:0 0 16px; font-family:var(--sans); font-size:.9rem; line-height:1.62; color:#0D0D0D; min-height:46px; }
.lp-sim__placeholder{ color:#9D9AAB; }
.lp-sim__placeholder[hidden]{ display:none; }
.lp-sim__cursor{
  display:inline-block; width:2px; height:1.05em; background:#0D0D0D;
  margin-left:1px; vertical-align:-0.18em;
  animation:lp-blink 1s steps(1) infinite;
}
.lp-sim__cursor[hidden]{ display:none; }

/* severity highlights, applied live as spans finish typing */
.lp-sim__span--warn{ background:rgba(240,180,41,.32); border-radius:3px; padding:0 2px; }
.lp-sim__span--block{
  background:rgba(224,49,49,.10); border-radius:3px; padding:0 2px;
  text-decoration:underline wavy #E03131; text-underline-offset:2px;
}
.lp-sim__redact-chip{
  background:rgba(123,54,255,.14); color:var(--lp-accent);
  border-radius:4px; padding:1px 6px;
  font-family:var(--sans); font-size:.82rem; font-weight:700;
}

.lp-sim__toolbar{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.lp-sim__attach{
  flex:none; width:30px; height:30px; border-radius:50%;
  border:1px solid #D8D5E4; color:#5A5A5A;
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; line-height:0; padding-bottom:2px;
}
.lp-sim__toolbar-right{ display:flex; align-items:center; gap:12px; min-width:0; }
.lp-sim__model-chip{ display:inline-flex; align-items:center; gap:5px; font-family:var(--sans); font-size:.8rem; color:#5A5A5A; flex:none; }
.lp-sim__model-chip i{
  display:inline-block; width:6px; height:6px; margin-bottom:2px;
  border-right:1.6px solid #8A8A8A; border-bottom:1.6px solid #8A8A8A;
  transform:rotate(45deg); font-style:normal;
}
.lp-sim__mic{ flex:none; width:19px; height:19px; color:#5A5A5A; display:flex; align-items:center; justify-content:center; }

.lp-sim__review-pill{
  display:inline-flex; align-items:center; gap:6px;
  border:none; cursor:pointer; border-radius:999px;
  padding:6px 12px 6px 10px;
  font-family:var(--sans); font-size:.8rem; font-weight:800;
  color:#fff; background:var(--lp-amber);
  box-shadow:0 6px 16px -6px var(--lp-amber);
  transition:box-shadow .2s ease;
}
.lp-sim__review-pill[hidden]{ display:none; }
.lp-sim__review-pill[data-severe]{ background:#E5484D; box-shadow:0 6px 16px -6px #E5484D; }
.lp-sim__review-pill svg{ height:14px; width:auto; display:block; fill:#fff; }

.lp-sim__send{
  flex:none; width:32px; height:32px; border:none; cursor:pointer; border-radius:50%;
  background:#0D0D0D;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.lp-sim__send[data-blockmode]{ background:#E5484D; }
.lp-sim__send:focus-visible{ outline:2px solid var(--lp-accent); outline-offset:2px; }

/* ---- suggestion chips (decorative, static) ---- */
.lp-sim__suggestions{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:18px; }
.lp-sim__suggestion{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid #E2E0EC; border-radius:999px; padding:8px 14px;
  font-family:var(--sans); font-size:.78rem; color:#5A5A5A;
}

/* ---- Tracehold Review popover ---- */
.lp-sim__review{
  position:absolute; top:16px; right:16px; width:288px; z-index:5;
  background:#fff; border:1px solid #E2E0EC; border-radius:14px;
  box-shadow:0 30px 60px -28px rgba(12,20,48,.45);
  overflow:hidden;
  animation:lp-rise .35s cubic-bezier(.22,1,.36,1);
}
.lp-sim__review[hidden]{ display:none; }
.lp-sim__review-head{
  display:flex; align-items:center; gap:11px;
  padding:13px 15px; border-bottom:1px solid var(--lp-line);
  background:linear-gradient(180deg, rgba(123,54,255,.13), rgba(123,54,255,.02));
}
.lp-sim__review-icon{
  flex:none; width:30px; height:30px; border-radius:8px;
  background:rgba(123,54,255,.10);
  display:flex; align-items:center; justify-content:center;
}
.lp-sim__review-icon svg{ height:15px; width:auto; display:block; fill:var(--lp-accent); }
.lp-sim__review-headtext{ flex:1; min-width:0; }
.lp-sim__review-eyebrow{ font-family:var(--sans); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:#9D9AAB; font-weight:600; }
.lp-sim__review-count{ font-family:var(--sans); font-size:.84rem; font-weight:800; color:var(--lp-ink); letter-spacing:-.01em; }
.lp-sim__review-close{
  flex:none; width:24px; height:24px; border-radius:6px; border:none; cursor:pointer;
  background:rgba(12,20,48,.05); color:var(--lp-muted);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.lp-sim__review-close:hover{ background:rgba(12,20,48,.1); }
.lp-sim__review-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 15px; border-bottom:1px solid var(--lp-line);
}
.lp-sim__review-row-name{ font-family:var(--sans); font-size:.8rem; color:#3A3E50; }
.lp-sim__review-badge{
  flex:none; font-family:var(--sans); font-size:.68rem; font-weight:700;
  border-radius:6px; padding:3px 9px;
}
.lp-sim__review-badge[data-sev="block"]{ color:#C0362C; background:rgba(192,54,44,.10); }
.lp-sim__review-badge[data-sev="warn"]{ color:#A8740F; background:rgba(201,138,26,.16); }
.lp-sim__review-footer{ padding:12px 15px; font-family:var(--sans); font-size:.72rem; color:var(--lp-accent); font-weight:600; }

/* ---- BLOCK confirmation modal ---- */
.lp-sim__blockmodal{
  position:absolute; inset:0; z-index:30;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(20,16,40,.34);
  backdrop-filter:blur(2px);
  animation:lp-rise .25s ease;
}
.lp-sim__blockmodal[hidden]{ display:none; }
.lp-sim__blockmodal-card{
  width:340px; max-width:100%;
  background:#fff; border:1px solid #E2E0EC; border-radius:15px;
  box-shadow:0 40px 90px -30px rgba(12,20,48,.6);
  overflow:hidden;
}
.lp-sim__blockmodal-head{
  display:flex; align-items:flex-start; gap:12px;
  padding:16px 17px;
  background:linear-gradient(180deg, rgba(229,72,77,.10), rgba(229,72,77,.02));
  border-bottom:1px solid var(--lp-line);
}
.lp-sim__blockmodal-icon{
  flex:none; width:34px; height:34px; border-radius:9px;
  background:#E5484D; color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.lp-sim__blockmodal-headtext{ flex:1; min-width:0; }
.lp-sim__blockmodal-title{ font-family:var(--sans); font-size:.86rem; font-weight:800; color:var(--lp-ink); letter-spacing:-.01em; line-height:1.25; }
.lp-sim__blockmodal-sub{ font-family:var(--sans); font-size:.72rem; color:var(--lp-muted); margin-top:2px; }
.lp-sim__blockmodal-body{ padding:14px 17px; }
.lp-sim__blockmodal-eyebrow{ font-family:var(--sans); font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; color:#9D9AAB; font-weight:600; margin-bottom:9px; }
.lp-sim__blockmodal-item{
  display:flex; align-items:center; gap:10px;
  background:var(--lp-surface); border:1px solid var(--lp-line); border-radius:10px;
  padding:9px 11px; margin-bottom:7px;
}
.lp-sim__blockmodal-item:last-child{ margin-bottom:0; }
.lp-sim__blockmodal-item-icon{
  flex:none; width:26px; height:26px; border-radius:7px;
  background:rgba(229,72,77,.12); color:#E5484D;
  display:flex; align-items:center; justify-content:center;
}
.lp-sim__blockmodal-item-name{ flex:1; min-width:0; font-family:var(--sans); font-size:.78rem; font-weight:700; color:var(--lp-ink); }
.lp-sim__blockmodal-item-tag{
  flex:none; font-family:var(--sans); font-size:.6rem; font-weight:700; color:#C0362C;
  background:rgba(192,54,44,.10); border-radius:6px; padding:2px 7px;
}
.lp-sim__blockmodal-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap;
  padding:13px 17px; border-top:1px solid var(--lp-line);
}
.lp-sim__blockmodal-fp{ font-family:var(--sans); font-size:.68rem; color:var(--lp-muted); min-width:0; }
.lp-sim__blockmodal-actions{ display:flex; align-items:center; gap:8px; min-width:0; flex:1 1 auto; justify-content:flex-end; }
@media (max-width:360px){
  .lp-sim__blockmodal-actions{ flex-basis:100%; justify-content:stretch; }
  .lp-sim__blockmodal-actions > *{ flex:1; }
}
.lp-sim__btn-outline-red{
  border:1px solid rgba(229,72,77,.5); background:#fff; color:#C0362C; cursor:pointer;
  border-radius:9px; padding:8px 13px; font-family:var(--sans); font-size:.74rem; font-weight:700;
  transition:background .2s ease;
}
.lp-sim__btn-outline-red:hover{ background:rgba(229,72,77,.06); }
.lp-sim__btn-navy{
  border:none; background:var(--lp-navy); color:#fff; cursor:pointer;
  border-radius:9px; padding:8px 15px; font-family:var(--sans); font-size:.74rem; font-weight:700;
  transition:background .2s ease;
}
.lp-sim__btn-navy:hover{ background:#0A1838; }

/* ---- full Tracehold extension panel ---- */
.lp-sim__extpanel{
  position:absolute; top:2px; right:2px; width:262px; z-index:20;
  background:#fff; border:1px solid #E2E0EC; border-radius:13px;
  box-shadow:0 40px 80px -30px rgba(12,20,48,.55);
  overflow:hidden;
  animation:lp-rise .3s cubic-bezier(.22,1,.36,1);
}
.lp-sim__extpanel[hidden]{ display:none; }
.lp-sim__extpanel-head{
  display:flex; align-items:center; gap:9px; padding:12px 13px;
  background:linear-gradient(135deg, var(--lp-accent), #5A1FCC);
  color:#fff;
}
.lp-sim__extpanel-mark{ flex:none; width:22px; height:22px; display:flex; align-items:center; justify-content:center; }
.lp-sim__extpanel-mark svg{ height:17px; width:auto; display:block; fill:#fff; }
.lp-sim__extpanel-headtext{ flex:1; min-width:0; }
.lp-sim__extpanel-title{ font-family:var(--sans); font-size:.78rem; font-weight:800; letter-spacing:-.01em; }
.lp-sim__extpanel-sub{ font-family:var(--sans); font-size:.6rem; opacity:.82; }
.lp-sim__extpanel-protected{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--sans); font-size:.56rem; font-weight:600; opacity:.95; white-space:nowrap;
}
.lp-sim__extpanel-protected span{ width:5px; height:5px; border-radius:50%; background:#66D1FF; display:inline-block; }
.lp-sim__extpanel-close{
  flex:none; width:20px; height:20px; border-radius:6px; border:none; cursor:pointer;
  background:rgba(255,255,255,.16); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.lp-sim__extpanel-close:hover{ background:rgba(255,255,255,.28); }

.lp-sim__extpanel-body{ padding:12px 13px; }
.lp-sim__extpanel-eyebrow{ font-family:var(--sans); font-size:.53rem; letter-spacing:.08em; text-transform:uppercase; color:#9D9AAB; font-weight:600; margin-bottom:7px; }
.lp-sim__extpanel-body .lp-sim__extpanel-eyebrow + .lp-sim__extpanel-modes,
.lp-sim__extpanel-body .lp-sim__extpanel-eyebrow + .lp-sim__extpanel-site{ margin-bottom:13px; }

.lp-sim__extpanel-modes{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:5px; margin-bottom:13px; }
.lp-sim__extpanel-mode-btn{
  cursor:pointer; font-family:var(--sans); font-size:.72rem; font-weight:700;
  padding:8px 0; border-radius:8px; text-align:center;
  background:#F4F4F8; color:var(--lp-muted); border:1px solid var(--lp-line);
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.lp-sim__extpanel-mode-btn[aria-pressed="true"]{ background:#fff; color:var(--lp-ink); border-color:#C9C5DC; box-shadow:0 1px 3px rgba(12,20,48,.12); }
.lp-sim__extpanel-mode-btn[data-lp-panelmode="block"][aria-pressed="true"]{ background:#FCEBEA; color:#C0362C; border-color:rgba(192,54,44,.42); }
.lp-sim__extpanel-mode-btn:focus-visible{ outline:2px solid var(--lp-accent); outline-offset:2px; }

.lp-sim__extpanel-site{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--lp-line); border-radius:10px; padding:8px 10px; margin-bottom:13px;
}
.lp-sim__extpanel-site-badge{
  flex:none; width:24px; height:24px; border-radius:6px;
  background:#10A37F; color:#fff; font-weight:800; font-size:.72rem;
  display:flex; align-items:center; justify-content:center;
}
.lp-sim__extpanel-site-text{ flex:1; min-width:0; display:flex; flex-direction:column; }
.lp-sim__extpanel-site-name{ font-family:var(--sans); font-size:.72rem; font-weight:800; color:var(--lp-ink); }
.lp-sim__extpanel-site-sub{ font-family:var(--sans); font-size:.56rem; color:var(--lp-muted); }
.lp-sim__extpanel-active-pill{
  flex:none; display:inline-flex; align-items:center; gap:4px;
  font-family:var(--sans); font-size:.53rem; font-weight:700; color:var(--lp-green);
  background:rgba(31,138,91,.12); border-radius:999px; padding:2px 7px;
}
.lp-sim__extpanel-active-pill span{ width:4px; height:4px; border-radius:50%; background:var(--lp-green); display:inline-block; }

.lp-sim__extpanel-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:13px; }
.lp-sim__extpanel-stat-value{ font-family:var(--sans); font-size:1.24rem; font-weight:800; letter-spacing:-.02em; color:var(--lp-ink); line-height:1; }
.lp-sim__extpanel-stat-label{ font-family:var(--sans); font-size:.56rem; color:var(--lp-muted); margin-top:3px; }

.lp-sim__extpanel-footbtns{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.lp-sim__extpanel-footbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--lp-line); background:#fff; cursor:default;
  border-radius:9px; padding:8px 0; font-family:var(--sans); font-size:.65rem; font-weight:700; color:var(--lp-ink);
}

@media (max-width:980px){
  .lp-hero__grid{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .lp-hero__copy,.lp-hero__panel{ min-width:0; }
  .lp-hero__panel-mark{ display:none; }
}
@media (max-width:560px){
  .lp-hero{ padding:52px 0 44px; }
  .lp-sim__extpanel{ width:calc(100% - 4px); }
  /* not enough width for chip + review pill + mic + send all at once
     once the panel itself has shrunk to fit a narrow phone — the model
     label is the least essential control, so it's the one that goes. */
  .lp-sim__model-chip{ display:none; }
}

/* -------------------------------- EMAIL STRIP ----------------------------- */

.lp__section.lp-emailstrip,
.lp-emailstrip{ padding:0; border-bottom:1px solid var(--lp-line); background:var(--lp-surface); }
.lp-emailstrip__row{
  padding-block:30px;
  display:flex; align-items:center; justify-content:space-between;
  gap:28px; flex-wrap:wrap;
}
.lp-emailstrip__copy{ max-width:440px; }
.lp-emailstrip__heading{ font-family:var(--sans); font-size:1rem; font-weight:700; color:var(--lp-ink); margin-bottom:3px; }
.lp-emailstrip__note{ font-family:var(--mono); font-size:.72rem; color:var(--lp-muted); }
.lp-emailstrip__form{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; position:relative; }
.lp-emailstrip__input{
  font-family:var(--sans); font-size:.92rem; color:var(--lp-ink);
  background:#fff; border:1px solid #D8D5E4; border-radius:10px;
  padding:13px 16px; width:270px; max-width:100%;
  outline:none;
}
.lp-emailstrip__input:focus-visible{ border-color:var(--lp-accent); }
.lp-emailstrip__input[aria-invalid="true"]{ border-color:var(--lp-red); }
.lp-emailstrip__msg{
  font-family:var(--mono); font-size:.72rem; color:var(--lp-muted);
  flex-basis:100%;
}
.lp-emailstrip__msg.is-err{ color:var(--lp-red); }
.lp-emailstrip__msg.is-ok{ color:var(--lp-green); }

@media (max-width:640px){
  .lp-emailstrip__form{ width:100%; }
  .lp-emailstrip__input{ width:100%; }
  .lp-emailstrip__form .lp-btn{ width:100%; justify-content:center; }
}

/* -------------------------------- animations ------------------------------ */

@keyframes lp-blink{ 0%,48%{opacity:1} 49%,100%{opacity:0} }
@keyframes lp-spin{ to{ transform:rotate(360deg) } }
@keyframes lp-pulse{ 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes lp-rise{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)} }

@media (prefers-reduced-motion:reduce){
  .lp-hero__word::after,
  .lp-sim__cursor,
  .lp-sim__nudge{ animation:none; }
  .lp-sim__sentrow, .lp-sim__review, .lp-sim__blockmodal, .lp-sim__extpanel{ animation:none; }
}

/* ---- story.css ---- */
/* ===================================================================
   Tracehold landing purple (.lp) — European by design / Detection
   types / How it works sections. Scoped local tokens only — never
   touches global :root tokens used by the rest of the site.
   =================================================================== */

.lp{
  --lp-accent:#7B36FF;
  --lp-ink:#0C1430;
  --lp-navy:#020E2D;
  --lp-line:#E7E5F0;
  --lp-surface:#F7F6FB;
  --lp-muted:#6B6E85;
  --lp-green:#1F8A5B;
  --lp-red:#C0362C;
  --lp-blue:#2E78D6;
  --lp-amber:#A8740F;
  font-family:var(--sans);
  color:var(--lp-ink);
}

.lp__section{ padding:88px 0; border-bottom:1px solid var(--lp-line); }

.lp-eyebrow{
  font-family:var(--mono);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--lp-accent);
  margin-bottom:16px;
}

.lp-arrow{
  display:inline-block; width:6px; height:6px;
  border-top:1.8px solid currentColor; border-right:1.8px solid currentColor;
  transform:rotate(45deg);
}

/* ---------------------------------------------------------------
   EUROPEAN BY DESIGN
   --------------------------------------------------------------- */
.lp-eu{ position:relative; overflow:hidden; background:var(--lp-navy); border-bottom:1px solid var(--lp-line); }

/* rotating EU star ring — decorative only, cropped at the right edge.
   Colored with the design system's existing amber token (not the flag's
   literal blue/gold) so it reads as a subtle texture on the light surface
   rather than a loud flag graphic. */
.lp-eu__ring{
  position:absolute; right:-230px; top:50%; transform:translateY(-50%);
  width:560px; height:560px; pointer-events:none; z-index:0;
}
.lp-eu__ring-spin{ position:absolute; inset:0; animation:lp_eu_spin 90s linear infinite; }
.lp-eu__star{
  position:absolute; top:50%; left:50%;
  transform:rotate(calc(var(--i) * 30deg)) translateY(-260px);
  font-size:26px; line-height:1; color:var(--lp-amber); opacity:.22;
}
@keyframes lp_eu_spin{ to{ transform:rotate(360deg); } }

.lp-eu__grid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}

.lp-eu__intro{ max-width:480px; }

.lp-eu__title{
  margin:0 0 18px;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.7rem,3vw,2.35rem);
  line-height:1.1;
  letter-spacing:-.015em;
  color:#fff;
}

.lp-eu__body{
  margin:0;
  font-size:1.03rem;
  line-height:1.65;
  color:#A9ADBE;
}

.lp-eu__cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.lp-eu__card{
  background:#fff;
  border:1px solid var(--lp-line);
  border-radius:13px;
  padding:22px;
}

.lp-eu__icon{
  width:36px; height:36px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
}
.lp-eu__icon--blue{ background:rgba(82,157,255,.13); color:var(--lp-blue); }
.lp-eu__icon--amber{ background:rgba(201,138,26,.14); color:var(--lp-amber); }
.lp-eu__icon--green{ background:rgba(31,138,91,.12); color:var(--lp-green); }
.lp-eu__icon--purple{ background:rgba(123,54,255,.1); color:var(--lp-accent); }

.lp-eu__card-t{
  font-size:.92rem; font-weight:800; color:var(--lp-ink);
  letter-spacing:-.005em; margin-bottom:5px;
}
.lp-eu__card-d{ font-size:.8rem; line-height:1.5; color:var(--lp-muted); }

/* dark-surface overrides, scoped to the section (not the .lp-eu__card*
   classes reused standalone on pricing.html/about.html's light cards) */
.lp-eu .lp-eu__card{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.09); }
.lp-eu .lp-eu__card-t{ color:#fff; }
.lp-eu .lp-eu__card-d{ color:#B6B3C8; }
.lp-eu .lp-eu__icon--blue{ background:rgba(82,157,255,.18); }
.lp-eu .lp-eu__icon--amber{ background:rgba(201,138,26,.2); }
.lp-eu .lp-eu__icon--green{ background:rgba(31,138,91,.2); }
.lp-eu .lp-eu__icon--purple{ background:rgba(155,107,255,.22); }

/* ---------------------------------------------------------------
   DETECTION TYPES
   --------------------------------------------------------------- */
.lp-dt{ background:#F4F2FD; }

.lp-dt__head{ max-width:640px; margin-bottom:40px; }

.lp-dt__title{
  margin:0 0 14px;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.8rem,3.4vw,2.6rem);
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--lp-ink);
}

.lp-dt__sub{ margin:0; font-size:1.05rem; line-height:1.6; color:#3A3E50; }

.lp-dt__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

.lp-dt__card{
  background:#fff;
  border:1px solid var(--lp-line);
  border-radius:16px;
  padding:26px;
  display:flex;
  flex-direction:column;
}

.lp-dt__card--featured{
  border-color:rgba(123,54,255,.4);
  box-shadow:0 24px 60px -34px rgba(123,54,255,.55);
}

.lp-dt__icon{
  width:48px; height:48px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
  background:rgba(123,54,255,.1); color:var(--lp-accent);
}
.lp-dt__icon--solid{ background:var(--lp-accent); color:#fff; }

.lp-dt__card-t{
  margin:0 0 8px; font-family:var(--display);
  font-size:1.3rem; font-weight:700; letter-spacing:-.01em; color:var(--lp-ink);
}
.lp-dt__card-d{ margin:0 0 22px; font-size:.92rem; line-height:1.55; color:var(--lp-muted); }

.lp-dt__flow-wrap{ margin-top:auto; }
.lp-dt__rule{ border-top:1px solid var(--lp-line); margin-bottom:18px; }

.lp-dt__flow{
  position:relative;
  height:46px;
  display:flex;
  align-items:center;
}

.lp-dt__track{
  position:absolute; left:0; right:40px; top:50%;
  transform:translateY(-50%);
  border-top:2px dashed #D2CEE8;
}

.lp-dt__trail{
  position:absolute; left:0; right:40px; top:50%;
  transform-origin:left;
  transform:translateY(-50%) scaleX(0);
  border-top:2px solid var(--lp-green);
  animation:lp_trail 3.4s ease-in-out infinite;
}
.lp-dt__trail--purple{ border-top-color:var(--lp-accent); }

.lp-dt__end{
  position:absolute; right:0; top:50%;
  transform:translateY(-50%);
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.lp-dt__end--green{
  border:1.5px solid var(--lp-green); background:var(--lp-green); color:#fff;
  box-shadow:0 6px 16px -6px rgba(31,138,91,.5);
  animation:lp_light_green 3.4s ease-in-out infinite;
}
.lp-dt__end--observe{
  border-radius:8px; background:rgba(123,54,255,.12); color:var(--lp-accent);
  animation:lp_logpulse 3.4s ease-in-out infinite;
}
.lp-dt__end--ink{
  border-radius:8px; background:var(--lp-ink); color:#fff;
}
.lp-dt__end--block{
  border-radius:8px; background:rgba(192,54,44,.12); color:var(--lp-red);
  animation:lp_flash_red 3.4s ease-in-out infinite;
}

.lp-dt__ripple{
  position:absolute; right:0; top:50%;
  width:30px; height:30px; border-radius:50%;
  border:1.5px solid rgba(123,54,255,.5);
  transform:translateY(-50%) scale(1);
  animation:lp_ripple 3.4s ease-out infinite;
}
.lp-dt__ripple--delay{ animation-delay:.5s; }

.lp-dt__pill{
  position:absolute; top:50%; left:0;
  transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono);
  font-size:.68rem; font-weight:700; color:var(--lp-accent);
  background:#F1ECFF; border:1px solid rgba(123,54,255,.25);
  padding:3px 9px; border-radius:999px; white-space:nowrap;
  box-shadow:0 3px 10px -4px rgba(123,54,255,.45);
}
.lp-dt__pill--glide{ animation:lp_glide 3.4s ease-in-out infinite; }
.lp-dt__pill--pass{ animation:lp_pass 3.4s ease-in-out infinite; }
.lp-dt__pill--hit{ animation:lp_hit 3.4s ease-in-out infinite; }

.lp-dt__dot{ width:5px; height:5px; border-radius:50%; background:var(--lp-accent); }

.lp-dt__pill--before{
  color:var(--lp-red); background:#FCEBEA; border:1px solid rgba(192,54,44,.3);
  box-shadow:0 3px 10px -5px rgba(192,54,44,.5);
  transform:translateY(-50%) scale(1);
  animation:lp_before 3.4s ease-in-out infinite;
}
.lp-dt__pill--after{
  color:var(--lp-green); background:#E9F6EF; border:1px solid rgba(31,138,91,.4);
  box-shadow:0 3px 10px -5px rgba(31,138,91,.5);
  transform:translateY(-50%) scale(.9);
  animation:lp_after 3.4s ease-in-out infinite;
}

.lp-dt__scanline{
  position:absolute; left:0; top:50%;
  width:2.5px; height:24px; border-radius:2px;
  background:var(--lp-accent);
  box-shadow:0 0 12px 2px rgba(123,54,255,.75);
  transform:translateY(-50%);
  animation:lp_scan_line 3.4s ease-in-out infinite;
}
.lp-dt__scanline--redact{ width:2px; }

.lp-dt__barrier{
  position:absolute; right:44px; top:50%;
  width:3px; height:26px; border-radius:2px;
  background:var(--lp-red);
  transform-origin:center;
  transform:translateY(-50%) scaleY(0);
  box-shadow:0 0 10px rgba(192,54,44,.5);
  animation:lp_barrier 3.4s ease-in-out infinite;
}

.lp-dt__tag{
  position:absolute; top:6px;
  transform:translate(-50%,-50%) scale(.5);
  font-family:var(--mono);
  font-size:.62rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color:#fff; padding:3px 8px; border-radius:6px; white-space:nowrap;
}
.lp-dt__tag--green{ background:var(--lp-green); }
.lp-dt__tag--purple{ background:var(--lp-accent); }
.lp-dt__tag--red{ background:var(--lp-red); }
.lp-dt__tag--out{ left:60%; animation:lp_out 3.4s ease-in-out infinite; }
.lp-dt__tag--redact{ left:38%; animation:lp_out 3.4s ease-in-out infinite; }
.lp-dt__tag--outlate{ left:62%; animation:lp_out_late 3.4s ease-in-out infinite; }

/* Faithful to the Claude Design mockup's phase structure:
   - Allow: travels immediately, no analysis pause.
   - Observe/Redact/Block: the message HOLDS at the origin while lp_scan_line
     sweeps across it (the "on-device analysis" beat) — only after the scan
     finishes do they react, each differently:
       - Observe: continues on to the destination, log icon pulses + ripples.
       - Redact: swaps to the redacted pill IN PLACE, then that travels on.
       - Block: tries to move, hits the red barrier partway and recoils back
         to the origin (the send never completes), while the destination
         icon flashes red and the "blocked" tag appears later than the rest. */
@keyframes lp_trail{ 0%,4%{transform:translateY(-50%) scaleX(0);} 52%{transform:translateY(-50%) scaleX(1);} 64%{transform:translateY(-50%) scaleX(1);} 65%,100%{transform:translateY(-50%) scaleX(0);} }
@keyframes lp_glide{ 0%{left:0;opacity:0;} 8%{opacity:1;} 52%{left:calc(100% - 90px);opacity:1;} 64%{left:calc(100% - 90px);opacity:0;} 100%{left:0;opacity:0;} }
@keyframes lp_pass{ 0%{left:0;opacity:0;} 10%{opacity:1;} 46%{left:0;opacity:1;} 72%{left:calc(100% - 90px);opacity:1;} 84%{left:calc(100% - 90px);opacity:0;} 100%{left:0;opacity:0;} }
@keyframes lp_hit{ 0%{left:0;opacity:0;} 10%{opacity:1;} 46%{left:0;} 60%{left:calc(100% - 128px);} 66%{left:calc(100% - 106px);} 72%{left:calc(100% - 124px);} 78%{left:calc(100% - 112px);opacity:1;} 88%{opacity:0;} 100%{left:0;opacity:0;} }
@keyframes lp_light_green{ 0%,50%{transform:translateY(-50%) scale(1);box-shadow:0 6px 16px -6px rgba(31,138,91,.5);} 58%{transform:translateY(-50%) scale(1.3);box-shadow:0 10px 24px -4px rgba(31,138,91,.9);} 70%,100%{transform:translateY(-50%) scale(1);box-shadow:0 6px 16px -6px rgba(31,138,91,.5);} }
@keyframes lp_flash_red{ 0%,60%{transform:translateY(-50%) scale(1);background:rgba(192,54,44,.12);color:var(--lp-red);} 68%{transform:translateY(-50%) scale(1.22);background:var(--lp-red);color:#fff;} 78%,88%{transform:translateY(-50%) scale(1);background:var(--lp-red);color:#fff;} 94%,100%{background:rgba(192,54,44,.12);color:var(--lp-red);} }
@keyframes lp_logpulse{ 0%,46%{transform:translateY(-50%) scale(1);} 54%{transform:translateY(-50%) scale(1.22);} 66%,100%{transform:translateY(-50%) scale(1);} }
@keyframes lp_ripple{ 0%,46%{transform:translateY(-50%) scale(.5);opacity:0;} 52%{opacity:.55;} 82%,100%{transform:translateY(-50%) scale(2.4);opacity:0;} }
@keyframes lp_scan_line{ 0%,16%{opacity:0;left:4px;} 24%{opacity:1;left:4px;} 44%{left:54%;opacity:1;} 50%,100%{left:54%;opacity:0;} }
@keyframes lp_before{ 0%{opacity:0;transform:translateY(-50%) scale(.92);} 10%,46%{opacity:1;transform:translateY(-50%) scale(1);} 52%,100%{opacity:0;transform:translateY(-50%) scale(.92);} }
@keyframes lp_after{ 0%,48%{opacity:0;left:0;transform:translateY(-50%) scale(.9);} 56%{opacity:1;left:0;transform:translateY(-50%) scale(1.05);} 62%{transform:translateY(-50%) scale(1);} 76%{left:calc(100% - 52px);opacity:1;transform:translateY(-50%) scale(1);} 86%{left:calc(100% - 52px);opacity:0;transform:translateY(-50%) scale(1);} 100%{opacity:0;left:0;} }
@keyframes lp_barrier{ 0%,44%{opacity:0;transform:translateY(-50%) scaleY(0);} 50%{opacity:1;transform:translateY(-50%) scaleY(1);} 88%{opacity:1;transform:translateY(-50%) scaleY(1);} 94%,100%{opacity:0;transform:translateY(-50%) scaleY(0);} }
@keyframes lp_out{ 0%,54%{opacity:0;transform:translate(-50%,-50%) scale(.5);} 63%{opacity:1;transform:translate(-50%,-50%) scale(1.12);} 72%{transform:translate(-50%,-50%) scale(1);} 90%{opacity:1;transform:translate(-50%,-50%) scale(1);} 100%{opacity:0;transform:translate(-50%,-50%) scale(1);} }
@keyframes lp_out_late{ 0%,64%{opacity:0;transform:translate(-50%,-50%) scale(.5);} 72%{opacity:1;transform:translate(-50%,-50%) scale(1.12);} 80%{transform:translate(-50%,-50%) scale(1);} 92%{opacity:1;transform:translate(-50%,-50%) scale(1);} 100%{opacity:0;transform:translate(-50%,-50%) scale(1);} }

@media (prefers-reduced-motion:reduce){
  .lp-dt__trail,.lp-dt__end--green,.lp-dt__end--observe,.lp-dt__end--block,
  .lp-dt__ripple,.lp-dt__pill--glide,.lp-dt__pill--pass,.lp-dt__pill--hit,
  .lp-dt__pill--before,.lp-dt__pill--after,.lp-dt__scanline,.lp-dt__barrier,
  .lp-dt__tag--out,.lp-dt__tag--redact,.lp-dt__tag--outlate{
    animation:none !important;
  }
}

/* ---------------------------------------------------------------
   HOW IT WORKS
   --------------------------------------------------------------- */
.lp-how__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:54px;
  flex-wrap:wrap;
}

.lp-how__intro{ max-width:600px; }

.lp-how__title{
  margin:0 0 16px;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.9rem,3.6vw,2.75rem);
  line-height:1.05;
  letter-spacing:-.015em;
  color:var(--lp-ink);
}

.lp-how__sub{ margin:0; font-size:1.09rem; line-height:1.6; color:#3A3E50; }

.lp-how__cta{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.92rem; font-weight:700; color:var(--lp-ink);
  border-bottom:1.5px solid var(--lp-accent);
  padding-bottom:3px; white-space:nowrap;
  transition:color .2s ease;
}
.lp-how__cta:hover{ color:var(--lp-accent); }

.lp-how__grid{
  display:grid;
  grid-template-columns:0.86fr 1.14fr;
  gap:56px;
  align-items:center;
}

/* -- left: vertical timeline -- */
.lp-how__tl{ position:relative; }

.lp-how__tl-line{
  position:absolute; left:22px; top:32px; bottom:34px; width:2px;
  background:linear-gradient(180deg,#7B36FF,#2E78D6,#1F8A5B,#A8740F);
}
/* grows in from the top on scroll-reveal, same beat as the mockup's
   view()-timeline vline animation — piggybacks on the site's existing
   .reveal/.in IntersectionObserver hook instead of animation-timeline. */
.lp-how__tl-line.reveal{ opacity:1; transform:scaleY(0); transform-origin:top; transition:transform 1.1s cubic-bezier(.22,1,.36,1); }
.lp-how__tl-line.reveal.in{ transform:scaleY(1); }

.lp-how__tl-step{
  position:relative; display:grid; grid-template-columns:46px 1fr;
  gap:18px; align-items:start; padding-bottom:26px;
}
.lp-how__tl-step--last{ padding-bottom:0; }

.lp-how__tl-num{
  position:relative; z-index:1; width:46px; height:46px; border-radius:13px;
  background:#fff; border:1.5px solid; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:800; font-size:.83rem;
}
.lp-how__tl-num--purple{ border-color:#7B36FF; color:#7B36FF; box-shadow:0 8px 20px -10px #7B36FF; }
.lp-how__tl-num--blue{ border-color:#2E78D6; color:#2E78D6; box-shadow:0 8px 20px -10px #2E78D6; }
.lp-how__tl-num--green{ border-color:#1F8A5B; color:#1F8A5B; box-shadow:0 8px 20px -10px #1F8A5B; }
.lp-how__tl-num--amber{ border-color:#A8740F; color:#A8740F; box-shadow:0 8px 20px -10px #A8740F; }

.lp-how__tl-body{ padding-top:2px; }
.lp-how__tl-t{
  margin:0 0 5px; font-family:var(--display);
  font-size:1.02rem; font-weight:800; letter-spacing:-.01em; color:var(--lp-ink);
}
.lp-how__tl-d{ margin:0; font-size:.85rem; line-height:1.55; color:var(--lp-muted); }

/* -- right: illustrative security console -- */
.lp-how__panel-wrap{ position:relative; }
.lp-how__panel-wrap::before{
  content:""; position:absolute; inset:-16px; border-radius:26px;
  background:radial-gradient(440px 280px at 80% -4%, rgba(123,54,255,.14), transparent 62%);
  pointer-events:none;
}

.lp-how__panel{
  position:relative; background:#fff; border:1px solid var(--lp-line); border-radius:18px;
  box-shadow:0 44px 100px -54px rgba(12,20,48,.55); overflow:hidden;
}

.lp-how__panel-head{
  display:flex; align-items:center; gap:11px; padding:13px 18px;
  border-bottom:1px solid var(--lp-line); background:var(--lp-surface);
}
.lp-how__panel-dots{ display:flex; gap:6px; }
.lp-how__panel-dots span{ width:10px; height:10px; border-radius:50%; background:#DCD8EA; }
.lp-how__panel-kicker{ font-family:var(--display); font-size:.75rem; font-weight:700; color:var(--lp-ink); letter-spacing:-.01em; }

.lp-how__live-badge{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--display); font-size:.66rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:#1F8A5B; background:rgba(31,138,91,.10); border:1px solid rgba(31,138,91,.24);
  padding:3px 9px; border-radius:999px; white-space:nowrap;
}
.lp-how__live-dot{ width:6px; height:6px; border-radius:50%; background:#1F8A5B; animation:lp_live_pulse 1.6s ease-in-out infinite; }

.lp-how__panel-body{ padding:19px 20px 20px; }

.lp-how__panel-title-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:15px; }
.lp-how__panel-title{ margin:0; font-family:var(--display); font-size:.97rem; font-weight:800; letter-spacing:-.01em; color:var(--lp-ink); }
.lp-how__panel-range{ font-family:var(--display); font-size:.69rem; font-weight:600; color:var(--lp-muted); }

.lp-how__sev-row{ display:flex; gap:10px; margin-bottom:18px; }
.lp-how__sev-tile{ flex:1; min-width:0; background:var(--lp-surface); border:1px solid var(--lp-line); border-radius:12px; padding:11px 12px; }
.lp-how__sev-k{
  display:flex; align-items:center; gap:7px; margin-bottom:7px;
  font-family:var(--mono); font-size:.63rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--lp-muted);
}
.lp-how__sev-dot{ width:8px; height:8px; border-radius:50%; }
.lp-how__sev-dot--red{ background:#C0362C; }
.lp-how__sev-dot--amber{ background:#A8740F; }
.lp-how__sev-dot--blue{ background:#2E78D6; }
.lp-how__sev-v{ font-size:1.5rem; font-weight:800; color:var(--lp-ink); letter-spacing:-.02em; line-height:1; }

.lp-how__chart-wrap{ margin-bottom:16px; }
.lp-how__chart-label{ font-family:var(--mono); font-size:.63rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#9D9AAB; margin-bottom:11px; }
.lp-how__chart{ display:flex; align-items:flex-end; gap:6px; height:86px; }
.lp-how__chart span{ flex:1; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,#9B6BFF,#7B36FF); }
/* bars grow in, staggered, once the panel scrolls into view (mirrors the
   mockup's thp_bargrow). Guarded by .js so the no-JS fallback (which never
   adds .in) still shows full-height bars instead of collapsed ones. */
.js .lp-how__chart span{ transform:scaleY(0); transform-origin:bottom; }
.js .lp-how__grid.in .lp-how__chart span{ animation:lp_bargrow .8s cubic-bezier(.22,1,.36,1) both; }
.lp-how__chart span:nth-child(1){ animation-delay:0s; }
.lp-how__chart span:nth-child(2){ animation-delay:.05s; }
.lp-how__chart span:nth-child(3){ animation-delay:.1s; }
.lp-how__chart span:nth-child(4){ animation-delay:.15s; }
.lp-how__chart span:nth-child(5){ animation-delay:.2s; }
.lp-how__chart span:nth-child(6){ animation-delay:.25s; }
.lp-how__chart span:nth-child(7){ animation-delay:.3s; }
.lp-how__chart span:nth-child(8){ animation-delay:.35s; }
.lp-how__chart span:nth-child(9){ animation-delay:.4s; }
.lp-how__chart span:nth-child(10){ animation-delay:.45s; }
.lp-how__chart span:nth-child(11){ animation-delay:.5s; }
.lp-how__chart span:nth-child(12){ animation-delay:.55s; }
@keyframes lp_bargrow{ 0%{ transform:scaleY(0); } 55%{ transform:scaleY(1.06); } 72%{ transform:scaleY(.97); } 100%{ transform:scaleY(1); } }

.lp-how__feed-label{ font-family:var(--mono); font-size:.63rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#9D9AAB; margin-bottom:3px; }
.lp-how__feed-row{ display:flex; align-items:center; gap:11px; padding:11px 0; border-top:1px solid var(--lp-line); }
.lp-how__feed-dot{ flex:none; width:9px; height:9px; border-radius:50%; box-shadow:0 0 0 3px rgba(12,20,48,.03); }
.lp-how__feed-dot--red{ background:#C0362C; }
.lp-how__feed-dot--amber{ background:#A8740F; }
.lp-how__feed-dot--blue{ background:#2E78D6; }
.lp-how__feed-flow{ min-width:0; flex:1; display:flex; align-items:center; gap:7px; font-size:.81rem; font-weight:700; color:var(--lp-ink); }
.lp-how__feed-src{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lp-how__feed-arrow{ color:#C7C4D2; flex:none; }
.lp-how__feed-dest{ flex:none; color:var(--lp-muted); font-weight:600; }
.lp-how__feed-act{
  flex:none; font-family:var(--mono); font-size:.63rem; font-weight:700; letter-spacing:.04em;
  color:#fff; padding:3px 9px; border-radius:999px;
}
.lp-how__feed-act--red{ background:#C0362C; }
.lp-how__feed-act--amber{ background:#A8740F; }
.lp-how__feed-act--blue{ background:#2E78D6; }
.lp-how__feed-time{ flex:none; font-family:var(--mono); font-size:.68rem; color:#9D9AAB; width:28px; text-align:right; }

/* ---------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .lp-eu__ring-spin{ animation:none; }
  .lp-how__tl-line.reveal{ transition:none; transform:none; }
  .lp-how__chart span{ animation:none !important; transform:none; }
}

@media (max-width:960px){
  .lp-eu__grid{ grid-template-columns:1fr; gap:36px; }
  .lp-eu__intro{ max-width:none; }
  .lp-eu__ring{ display:none; }
  .lp-dt__grid{ grid-template-columns:1fr 1fr; }
  .lp-how__grid{ grid-template-columns:minmax(0,1fr); gap:44px; }
  .lp-how__grid > *{ min-width:0; }
  .lp-how__panel-wrap::before{ inset:-10px; }
}

@media (max-width:640px){
  .lp__section{ padding:64px 0; }
  .lp-eu__cards{ grid-template-columns:1fr; }
  .lp-dt__grid{ grid-template-columns:1fr; }
  .lp-how__sev-v{ font-size:1.3rem; }
  .lp-how__chart{ height:64px; }
  .lp-how__feed-src{ max-width:96px; }
}

/* ---- engine.css ---- */
/* ===================================================================
   Tracehold landing purple (.lp) — The Engine / Capabilities sections.
   Scoped local tokens only — never touches global :root tokens used
   by the rest of the site. Local tokens are redeclared per-file so
   this section works standalone; duplicate declarations across the
   landing-page section files are harmless (same values everywhere).
   =================================================================== */

.lp{
  --lp-accent:#7B36FF;
  --lp-ink:#0C1430;
  --lp-navy:#020E2D;
  --lp-line:#E7E5F0;
  --lp-surface:#F7F6FB;
  --lp-muted:#6B6E85;
  --lp-green:#1F8A5B;
  --lp-red:#C0362C;
  --lp-blue:#2E78D6;
  --lp-amber:#A8740F;
  font-family:var(--sans);
  color:var(--lp-ink);
}



.lp-eyebrow{
  font-family:var(--mono);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--lp-accent);
  margin-bottom:16px;
}
.lp-eyebrow--dark{ color:#9B6BFF; }

.lp-arrow{
  display:inline-block; width:6px; height:6px;
  border-top:1.8px solid currentColor; border-right:1.8px solid currentColor;
  transform:rotate(45deg);
}

/* ---------------------------------------------------------------
   THE ENGINE
   --------------------------------------------------------------- */
.lp-engine{
  background:var(--lp-navy);
  border-bottom:1px solid var(--lp-line);
  position:relative;
  overflow:hidden;
}

.lp-engine__glow{
  position:absolute; top:-160px; left:50%;
  transform:translateX(-50%);
  width:820px; height:520px; border-radius:50%;
  background:radial-gradient(circle,rgba(123,54,255,.22),transparent 66%);
  pointer-events:none;
}

.lp-engine__inner{ position:relative; }

.lp-engine__head{
  max-width:720px; margin:0 auto 54px; text-align:center;
}

.lp-engine__title{
  margin:0 0 16px;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.9rem,3.6vw,2.75rem);
  line-height:1.05;
  letter-spacing:-.018em;
  color:#fff;
}

.lp-engine__sub{
  margin:0 auto; max-width:600px;
  font-size:1.06rem; line-height:1.6; color:#A9ADBE;
}

/* -- flow grid: input / arrow / core / arrow / output -- */
.lp-engine__flow{
  display:grid;
  grid-template-columns:1fr 44px 1.16fr 44px 1fr;
  align-items:stretch;
  gap:0;
}

.lp-engine__arrow{
  display:flex; align-items:center; justify-content:center;
  color:#6C6A8A;
}

.lp-engine__panel{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  padding:22px;
  display:flex;
  flex-direction:column;
}

.lp-engine__panel-head{
  display:flex; align-items:center; gap:9px; margin-bottom:3px;
}
.lp-engine__panel-icon{ display:inline-flex; color:#9B6BFF; }
.lp-engine__panel-label{ font-size:.88rem; font-weight:800; color:#fff; }

.lp-engine__panel-note{
  font-family:var(--mono);
  font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
  color:#7C7A93; margin-bottom:18px;
}

.lp-engine__lang-list{ display:flex; flex-direction:column; gap:10px; }
.lp-engine__lang-row{
  display:flex; gap:10px; align-items:flex-start;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:11px; padding:11px 12px;
}
.lp-engine__lang-code{
  flex:none;
  font-family:var(--mono);
  font-size:.62rem; font-weight:800; letter-spacing:.04em;
  color:#9B6BFF; background:rgba(123,54,255,.16);
  border:1px solid rgba(123,54,255,.3);
  padding:3px 7px; border-radius:6px;
}
.lp-engine__lang-text{ font-size:.78rem; line-height:1.45; color:#CFCDE0; }

/* -- engine core -- */
.lp-engine__core{
  position:relative;
  background:linear-gradient(180deg,rgba(123,54,255,.18),rgba(123,54,255,.04));
  border:1px solid rgba(123,54,255,.42);
  border-radius:18px;
  padding:28px 24px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  box-shadow:0 34px 80px -34px rgba(123,54,255,.8);
}

.lp-engine__core-mark{
  width:60px; height:60px; border-radius:16px;
  background:rgba(123,54,255,.22);
  border:1px solid rgba(155,107,255,.45);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
  animation:lp_eng_float 4s ease-in-out infinite;
}
.lp-engine__core-logo{ height:30px; width:auto; display:block; }

.lp-engine__core-name{ font-size:1.09rem; font-weight:800; color:#fff; letter-spacing:-.01em; }
.lp-engine__core-desc{ font-size:.78rem; color:#B6B3C8; margin-top:4px; }

.lp-engine__core-count{
  margin:22px 0 4px; font-family:var(--display);
  font-size:3.15rem; font-weight:800; color:#fff;
  letter-spacing:-.03em; line-height:1;
}
.lp-engine__core-count-label{
  font-family:var(--mono);
  font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
  color:#9DA2B3;
}

.lp-engine__scanbar{
  position:relative; width:100%; height:5px; border-radius:3px;
  background:rgba(255,255,255,.08); overflow:hidden;
  margin:22px 0 18px;
}
.lp-engine__scanbar-sweep{
  position:absolute; top:0; bottom:0; width:40%;
  background:linear-gradient(90deg,transparent,rgba(180,146,255,.95),transparent);
  animation:lp_eng_scan 1.9s linear infinite;
}

.lp-engine__chips{
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center;
}
.lp-engine__chip{
  font-size:.66rem; font-weight:700; color:#D6D4E4;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  padding:4px 9px; border-radius:7px;
}
.lp-engine__chip--more{
  color:#9B6BFF; background:rgba(123,54,255,.14);
  border:1px solid rgba(123,54,255,.32);
}

.lp-engine__scan-status{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:18px; font-size:.7rem; font-weight:700; color:#9B6BFF;
}
.lp-engine__scan-status + .lp-engine__scan-status{ margin-top:8px; }
.lp-engine__scan-status--llm{ color:#B6B3C8; }
.lp-engine__scan-dot{
  width:6px; height:6px; border-radius:50%; background:#9B6BFF;
  animation:lp_eng_pulse 1.6s ease-in-out infinite;
}

/* -- output panel -- */
.lp-engine__out-title{
  font-family:var(--mono);
  font-size:.66rem; letter-spacing:.05em; text-transform:uppercase;
  color:#8B89A0; margin-bottom:6px;
}
.lp-engine__toggle-list{ margin-bottom:18px; }
.lp-engine__toggle-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 0; border-bottom:1px solid rgba(255,255,255,.07);
}
.lp-engine__toggle-row--last{ border-bottom:none; }
.lp-engine__toggle-label{ font-size:.81rem; font-weight:600; color:#E4E2F0; }
.lp-engine__toggle-label--muted{ color:#9A98AD; }

.lp-engine__toggle{
  flex:none; width:34px; height:19px; border-radius:999px;
  background:rgba(255,255,255,.14); position:relative;
}
.lp-engine__toggle-knob{
  position:absolute; top:2px; left:2px;
  width:15px; height:15px; border-radius:50%; background:#B8B6C8;
}
.lp-engine__toggle--on{ background:#7B36FF; }
.lp-engine__toggle--on .lp-engine__toggle-knob{ left:auto; right:2px; background:#fff; }

.lp-engine__out-note{
  margin:0 0 12px; font-size:.72rem; line-height:1.4; color:#8B89A0;
}

.lp-engine__custom-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.lp-engine__custom-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.75rem; font-weight:600; color:#E4E2F0;
  background:rgba(123,54,255,.14); border:1px solid rgba(123,54,255,.32);
  padding:6px 11px; border-radius:8px;
}
.lp-engine__custom-dot{ width:5px; height:5px; border-radius:50%; background:#9B6BFF; }

.lp-engine__add-chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.75rem; font-weight:700; color:#9B6BFF;
  background:transparent; border:1px dashed rgba(155,107,255,.55);
  padding:6px 11px; border-radius:8px;
}
.lp-engine__add-plus{ font-size:.94rem; line-height:1; margin-top:-1px; }

/* -- feature strip -- */
.lp-engine__features{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:44px;
}
.lp-engine__feature-beta{
  display:inline-block; margin-left:6px; font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:#E5B564; background:rgba(201,138,26,.16); border:1px solid rgba(201,138,26,.4); border-radius:5px; padding:2px 6px; vertical-align:1px;
}
.lp-engine__feature{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px; padding:22px;
}
.lp-engine__feature-icon{
  display:inline-flex; width:40px; height:40px; border-radius:11px;
  align-items:center; justify-content:center; margin-bottom:16px;
}
.lp-engine__feature-icon--purple{ background:rgba(123,54,255,.16); color:#9B6BFF; }
.lp-engine__feature-icon--blue{ background:rgba(82,157,255,.16); color:#7FB4FF; }
.lp-engine__feature-icon--green{ background:rgba(31,138,91,.18); color:#4FD08A; }
.lp-engine__feature-icon--amber{ background:rgba(201,138,26,.18); color:#E6A93E; }

.lp-engine__feature-t{
  margin:0 0 7px; font-family:var(--display);
  font-size:1.06rem; font-weight:700; color:#fff; letter-spacing:-.01em;
}
.lp-engine__feature-d{ margin:0; font-size:.85rem; line-height:1.55; color:#A9ADBE; }

@keyframes lp_eng_float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@keyframes lp_eng_scan{ 0%{ left:-40%; } 100%{ left:100%; } }
@keyframes lp_eng_pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.45; transform:scale(.75); } }

/* ---------------------------------------------------------------
   CAPABILITIES
   --------------------------------------------------------------- */
.lp-cap{ background:#F4F2FD; }

.lp-cap__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px; margin-bottom:44px; flex-wrap:wrap;
}
.lp-cap__intro{ max-width:560px; }

.lp-cap__title{
  margin:0;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.9rem,3.6vw,2.75rem);
  line-height:1.04;
  letter-spacing:-.015em;
  color:var(--lp-ink);
}

.lp-cap__cta{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.92rem; font-weight:700; color:var(--lp-ink);
  border-bottom:1.5px solid var(--lp-accent);
  padding-bottom:3px; white-space:nowrap;
  transition:color .2s ease;
}
.lp-cap__cta:hover{ color:var(--lp-accent); }

.lp-cap__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}

.lp-cap__card{
  background:#fff; border:1px solid var(--lp-line); border-radius:14px;
  padding:30px; display:flex; gap:18px;
  text-decoration:none;
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.lp-cap__card:hover{
  border-color:var(--lp-accent);
  transform:translateY(-3px);
  box-shadow:0 18px 44px -28px rgba(12,20,48,.4);
}

.lp-cap__icon{
  flex:none; width:48px; height:48px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
}
.lp-cap__icon--purple{ background:rgba(123,54,255,.1); color:var(--lp-accent); }
.lp-cap__icon--blue{ background:rgba(82,157,255,.13); color:var(--lp-blue); }
.lp-cap__icon--green{ background:rgba(31,138,91,.12); color:var(--lp-green); }
.lp-cap__icon--amber{ background:rgba(201,138,26,.14); color:var(--lp-amber); }

.lp-cap__card-t{
  margin:0 0 8px; font-family:var(--display);
  font-size:1.13rem; font-weight:700; color:var(--lp-ink);
}
.lp-cap__card-d{ margin:0; font-size:.91rem; line-height:1.55; color:var(--lp-muted); }

/* ---------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .lp-engine__core-mark,.lp-engine__scanbar-sweep,.lp-engine__scan-dot{
    animation:none !important;
  }
}

@media (max-width:960px){
  .lp-engine__flow{ grid-template-columns:1fr; gap:16px; }
  .lp-engine__arrow{ transform:rotate(90deg); padding:4px 0; }
  .lp-engine__features{ grid-template-columns:1fr 1fr; }
  .lp-cap__grid{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .lp__section{ padding:64px 0; }
  .lp-engine__features{ grid-template-columns:1fr; }
}

/* ---- proof.css ---- */
/* ===================================================================
   Tracehold landing purple (.lp) — Detections+Shadow AI / Why it
   matters sections. Scoped local tokens only — never touches global
   :root tokens used by the rest of the site. Local tokens are
   redeclared per-file so this section works standalone; duplicate
   declarations across the landing-page section files are harmless
   (same values everywhere).
   =================================================================== */

.lp{
  --lp-accent:#7B36FF;
  --lp-ink:#0C1430;
  --lp-navy:#020E2D;
  --lp-line:#E7E5F0;
  --lp-surface:#F7F6FB;
  --lp-muted:#6B6E85;
  --lp-green:#1F8A5B;
  --lp-red:#C0362C;
  --lp-blue:#2E78D6;
  --lp-amber:#A8740F;
  font-family:var(--sans);
  color:var(--lp-ink);
}



.lp-eyebrow{
  font-family:var(--mono);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--lp-accent);
  margin-bottom:16px;
}
.lp-eyebrow--dark{ color:#9B6BFF; }

/* ---------------------------------------------------------------
   DETECTIONS + SHADOW AI (live demo)
   --------------------------------------------------------------- */
.lp-live{
  background:var(--lp-navy);
  position:relative;
  overflow:hidden;
}

.lp-live__glow{
  position:absolute; top:-160px; left:-80px;
  width:620px; height:520px; border-radius:50%;
  background:radial-gradient(circle,rgba(123,54,255,.20),transparent 66%);
  pointer-events:none;
}

.lp-live__inner{ position:relative; }

.lp-live__head{ max-width:640px; margin-bottom:42px; }

.lp-live__title{
  margin:0 0 14px;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.9rem,3.6vw,2.75rem);
  line-height:1.06;
  letter-spacing:-.015em;
  color:#fff;
}

.lp-live__sub{ margin:0; font-size:1.06rem; line-height:1.6; color:#A9ADBE; }

.lp-live__grid{
  display:grid; grid-template-columns:1.25fr 1fr; gap:16px;
  align-items:start;
}

.lp-live__card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  padding:26px;
}

.lp-live__card-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:22px; gap:12px;
}
.lp-live__card-head--shadow{ align-items:flex-start; margin-bottom:6px; }

.lp-live__card-title-wrap{ display:flex; align-items:center; gap:11px; min-width:0; }

.lp-live__card-icon{
  flex:none; width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
}
.lp-live__card-icon--purple{ background:rgba(123,54,255,.18); color:#9B6BFF; }
.lp-live__card-icon--red{ background:rgba(224,90,80,.18); color:#FF6B5E; }

.lp-live__card-title{ font-size:1.05rem; font-weight:800; color:#fff; min-width:0; overflow-wrap:break-word; }

.lp-live__live-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono);
  font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
  color:#4FD08A; white-space:nowrap;
}
.lp-live__live-dot{
  width:7px; height:7px; border-radius:50%; background:#4FD08A;
  animation:lp_live_pulse 1.6s ease-in-out infinite;
}

.lp-live__det-grid{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;
}

.lp-live__det-tile{
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.02);
  border-radius:12px; padding:15px;
  min-width:0;
}

.lp-live__det-icon{
  display:inline-flex; width:32px; height:32px; border-radius:9px;
  align-items:center; justify-content:center; margin-bottom:12px;
}
.lp-live__det-icon--purple{ background:rgba(123,54,255,.18); color:#9B6BFF; }
.lp-live__det-icon--amber{ background:rgba(230,169,62,.18); color:#E6A93E; }
.lp-live__det-icon--blue{ background:rgba(82,157,255,.18); color:#7FB4FF; }
.lp-live__det-icon--green{ background:rgba(79,208,138,.18); color:#4FD08A; }

.lp-live__det-num{
  font-size:1.32rem; font-weight:800; letter-spacing:-.02em;
  color:#fff; font-variant-numeric:tabular-nums;
  transition:color .3s ease;
}
.lp-live__det-num.is-ticking{ color:#B492FF; }

.lp-live__det-label{ font-size:.75rem; color:#9DA2B3; font-weight:500; margin-top:2px; }

.lp-live__shadow-count{
  font-size:1.4rem; font-weight:800; letter-spacing:-.02em;
  color:#FF6B5E; font-variant-numeric:tabular-nums;
}

.lp-live__shadow-sub{ margin:0 0 14px; font-size:.82rem; color:#9DA2B3; }

.lp-live__shadow-list{ display:flex; flex-direction:column; }

.lp-live__shadow-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 0; border-top:1px solid rgba(255,255,255,.09);
  animation:lp_live_rise .45s cubic-bezier(.22,1,.36,1);
}

.lp-live__shadow-name{
  display:flex; align-items:center; gap:11px;
  font-size:.9rem; font-weight:600; color:#fff;
}

.lp-live__shadow-dot{ width:9px; height:9px; border-radius:50%; background:var(--lp-green); flex:none; }
.lp-live__shadow-row[data-lp-status="review"] .lp-live__shadow-dot{ background:#C98A1A; }
.lp-live__shadow-row[data-lp-status="shadow"] .lp-live__shadow-dot{ background:var(--lp-red); }

.lp-live__shadow-pill{
  font-family:var(--mono);
  font-size:.63rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding:5px 10px; border-radius:7px; white-space:nowrap;
}
.lp-live__shadow-pill--approved{ color:var(--lp-green); background:rgba(31,138,91,.12); }
.lp-live__shadow-pill--review{ color:#C98A1A; background:rgba(201,138,26,.14); }
.lp-live__shadow-pill--shadow{ color:var(--lp-red); background:rgba(192,54,44,.12); }

@keyframes lp_live_pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.45; transform:scale(.8); }
}
@keyframes lp_live_rise{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}

/* ---------------------------------------------------------------
   WHY IT MATTERS
   --------------------------------------------------------------- */
.lp-why{
  background:var(--lp-navy);
  position:relative;
  overflow:hidden;
}

.lp-why__glow{
  position:absolute; top:-160px; left:50%; transform:translateX(-50%);
  width:820px; height:520px; border-radius:50%;
  background:radial-gradient(circle,rgba(123,54,255,.20),transparent 66%);
  pointer-events:none;
}

.lp-why__inner{ position:relative; }

.lp-why__head{ max-width:680px; margin-bottom:44px; }

.lp-why__title{
  margin:0 0 14px;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.9rem,3.6vw,2.75rem);
  line-height:1.06;
  letter-spacing:-.015em;
  color:#fff;
}

.lp-why__sub{ margin:0; font-size:1.06rem; line-height:1.6; color:#A9ADBE; }

.lp-why__metrics{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  margin-bottom:46px;
}

.lp-why__metric{
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(123,54,255,.12),rgba(255,255,255,.02) 60%);
  border-top:3px solid var(--lp-accent);
  border-radius:14px; padding:26px;
}

.lp-why__metric-stat{
  font-family:var(--display);
  font-size:clamp(1.7rem,3vw,2.4rem);
  font-weight:800; letter-spacing:-.02em;
  color:#fff; line-height:1; margin-bottom:12px;
}

.lp-why__metric-label{ font-size:.95rem; font-weight:700; color:#fff; margin-bottom:6px; }

.lp-why__metric-sub{ margin:0; font-size:.85rem; line-height:1.5; color:#9DA2B3; }

.lp-why__regs-head{ margin-bottom:20px; }

.lp-why__regs-title{
  font-family:var(--mono);
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:#9DA2B3;
}

.lp-why__regs-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}

.lp-why__reg-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px; padding:22px;
  transition:border-color .25s ease,transform .25s ease;
}
.lp-why__reg-card:hover{ border-color:rgba(123,54,255,.5); transform:translateY(-2px); }

.lp-why__reg-top{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin-bottom:12px; flex-wrap:wrap;
}

.lp-why__reg-name{ font-size:1.02rem; font-weight:800; color:#fff; }

.lp-why__reg-date{
  font-family:var(--mono);
  font-size:.66rem; letter-spacing:.03em; text-transform:uppercase;
  color:#B492FF; white-space:nowrap;
}

.lp-why__reg-d{ margin:0; font-size:.87rem; line-height:1.55; color:#A9ADBE; }

/* ---------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .lp-live__live-dot{ animation:none !important; }
  .lp-live__shadow-row{ animation:none !important; }
  .lp-how__live-dot{ animation:none !important; }
}

@media (max-width:960px){
  .lp-live__grid{ grid-template-columns:minmax(0,1fr); }
  .lp-live__grid > *{ min-width:0; }
  .lp-why__metrics{ grid-template-columns:1fr 1fr; }
  .lp-why__regs-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:640px){
  .lp__section{ padding:64px 0; }
  .lp-live__det-grid{ grid-template-columns:1fr 1fr; }
  .lp-why__metrics{ grid-template-columns:1fr; }
  .lp-why__regs-grid{ grid-template-columns:1fr; }
}


/* ==========================================================================
   landing-purple.css — NAV + FOOTER
   Scoped under .lp / .lp-nav / .lp-footer only. Loaded by index.html only.
   Local tokens redeclared per-block (same pattern as the rest of this file):
   never touches the site's global :root tokens used by every other page.
   ========================================================================== */

.lp{
  --lp-accent:#7B36FF;
  --lp-accent2:#529DFF;
  --lp-ink:#0C1430;
  --lp-navy:#020E2D;
  --lp-line:#E7E5F0;
  --lp-surface:#F7F6FB;
  --lp-muted:#6E7180;
}

/* ---------------------------------- NAV ---------------------------------- */

.lp-nav{
  position:sticky;
  top:0;
  z-index:200;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--lp-line);
  /* .lp-nav also carries the shared ".lp" class (for design-token vars),
     which sets overflow-x:hidden for hero-style sections with bleeding
     decorative graphics. On the header that forces overflow-y:auto too,
     clipping the mega-menu panels (position:absolute, top:100%) to this
     71px bar. Reset it back to visible so dropdowns can render below. */
  overflow:visible;
}

.lp-nav__in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  height:70px;
}

.lp-nav__brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
/* Full stylized wordmark (mark + custom lettering baked into one SVG) —
   not an icon + HTML text pairing, matching the mockup's real logotype. */
.lp-nav__logo{ height:34px; width:auto; display:block; }

.lp-nav__links{
  display:flex;
  align-items:center;
  gap:4px;
  flex:1 1 auto;
  margin-left:8px;
}

/* .lp-nav__item is intentionally NOT position:relative — .lp-nav__panel below
   is nested inside it (so mobile can render it inline as an accordion) but
   needs the sticky .lp-nav header as its containing block on desktop, to
   span the full header width rather than just the trigger button's width. */

.lp-nav__trigger{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:none;
  border:0;
  padding:10px 14px;
  border-radius:8px;
  font-family:var(--sans);
  font-size:.92rem;
  font-weight:600;
  color:var(--lp-ink);
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.lp-nav__trigger:hover{ background:rgba(123,54,255,.08); }
.lp-nav__trigger[aria-expanded="true"]{ background:rgba(123,54,255,.1); color:var(--lp-accent); }
.lp-nav__caret{ flex:none; width:10px; height:6px; transition:transform .18s ease; }
.lp-nav__trigger[aria-expanded="true"] .lp-nav__caret{ transform:rotate(180deg); }

.lp-nav__link{
  padding:10px 14px;
  border-radius:8px;
  font-family:var(--sans);
  font-size:.92rem;
  font-weight:600;
  color:var(--lp-ink);
  transition:background .15s ease, color .15s ease;
}
.lp-nav__link:hover{ background:rgba(123,54,255,.08); color:var(--lp-accent); }

.lp-nav__links-cta{ display:none; }

.lp-nav__cta{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.lp-btn--sm{ padding:9px 16px; font-size:.85rem; border-radius:9px; }

/* ---- language switcher (nav): icon trigger + dropdown list ---- */
.lp-nav__item--lang{ position:relative; flex:none; }

.lp-lang-trigger{ padding:8px 10px; gap:5px; }
.lp-lang-trigger__icon{ flex:none; width:18px; height:18px; }
.lp-lang-trigger__code{
  font-family:var(--sans); font-size:.8rem; font-weight:700; letter-spacing:.02em;
}

.lp-lang-panel{
  position:absolute; top:calc(100% + 6px); right:0; z-index:20;
  min-width:150px; padding:6px;
  background:#fff; border:1px solid var(--lp-line); border-radius:12px;
  box-shadow:0 24px 48px -20px rgba(12,20,48,.22);
}
.lp-lang-panel__opt{
  display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:8px;
  font-family:var(--sans); font-size:.88rem; font-weight:600; color:var(--lp-ink);
  white-space:nowrap; transition:background .15s ease, color .15s ease;
}
a.lp-lang-panel__opt:hover{ background:rgba(123,54,255,.08); color:var(--lp-accent); }
.lp-lang-panel__opt.is-active{ color:var(--lp-accent); background:rgba(123,54,255,.06); }
.lp-lang-panel__opt-check{ flex:none; width:14px; height:14px; opacity:0; color:var(--lp-accent); }
.lp-lang-panel__opt.is-active .lp-lang-panel__opt-check{ opacity:1; }

@media (max-width:860px){
  .lp-lang-panel{ right:0; left:auto; }
}

/* ---- language suggestion banner ---- */
.lp-lang-banner{
  position:fixed; left:16px; right:16px; bottom:-100px; z-index:70;
  max-width:560px; margin:0 auto;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--lp-line); border-radius:12px;
  padding:14px 16px; box-shadow:0 24px 48px -20px rgba(12,20,48,.32);
  font-family:var(--sans); font-size:.88rem; line-height:1.4; color:var(--lp-ink);
  transition:bottom .3s ease;
}
.lp-lang-banner.is-visible{ bottom:16px; }
.lp-lang-banner__text{ flex:1 1 220px; }
.lp-lang-banner__close{
  border:0; background:none; font-size:1.3rem; line-height:1; color:var(--lp-muted);
  cursor:pointer; padding:2px 6px; border-radius:6px;
}
.lp-lang-banner__close:hover{ color:var(--lp-ink); background:rgba(12,20,48,.06); }
/* .lp-btn--primary reads var(--lp-navy), which is only declared inside .lp-
   scoped ancestors; this banner is appended straight to <body>, so hardcode
   the same literal values instead of relying on the token (see the .lp-totop
   fix for the same class of bug). */
.lp-lang-banner .lp-btn--primary{ background:#020E2D; color:#fff; }
.lp-lang-banner .lp-btn--primary:hover{ background:#0A1838; }
@media (max-width:480px){ .lp-lang-banner{ left:10px; right:10px; padding:12px 14px; } }

.lp-nav__toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  background:none;
  border:1px solid var(--lp-line);
  border-radius:8px;
  color:var(--lp-ink);
  padding:0;
  cursor:pointer;
}

/* ---- mega panels ---- */

.lp-nav__panel{
  position:absolute;
  left:0; right:0; top:100%;
  background:#fff;
  border-bottom:1px solid var(--lp-line);
  box-shadow:0 24px 48px -20px rgba(12,20,48,.22);
}

.lp-nav__panel-in{
  display:grid;
  grid-template-columns:1.15fr 1fr 1fr;
  gap:44px;
  padding:40px 28px 44px;
}

.lp-nav__panel-tag{
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--lp-accent);
  margin:0 0 12px;
}
.lp-nav__panel-title{
  display:block;
  font-family:var(--display);
  font-weight:700;
  font-size:1.5rem;
  line-height:1.15;
  color:var(--lp-ink);
  margin-bottom:12px;
}
.lp-nav__panel-title:hover{ color:var(--lp-accent); }
.lp-nav__panel-body{
  font-family:var(--sans);
  font-size:.92rem;
  line-height:1.55;
  color:var(--lp-muted);
  margin:0 0 18px;
  max-width:340px;
}
.lp-nav__panel-link-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--sans);
  font-size:.88rem;
  font-weight:700;
  color:var(--lp-accent);
}
.lp-nav__panel-link-cta .lp-btn__arrow{ width:6px; height:6px; }

.lp-nav__panel-heading{
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--lp-muted);
  margin:0 0 14px;
}
.lp-nav__panel-col{ display:flex; flex-direction:column; gap:4px; }
.lp-nav__panel-link{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:9px 10px;
  margin:0 -10px;
  border-radius:8px;
  transition:background .15s ease;
}
.lp-nav__panel-link:hover{ background:var(--lp-surface); }
.lp-nav__panel-link-label{ font-family:var(--sans); font-size:.92rem; font-weight:700; color:var(--lp-ink); }
.lp-nav__panel-link-desc{ font-family:var(--sans); font-size:.8rem; color:var(--lp-muted); }

/* -------------------------------- FOOTER --------------------------------- */

.lp-footer{
  background:var(--lp-navy);
  padding:72px 0 32px;
  color:#D3D6E0;
}

.lp-footer__top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.lp-footer__logo{ height:22px; width:auto; display:block; margin-bottom:16px; }
.lp-footer__tag{
  font-family:var(--sans);
  font-size:.88rem;
  line-height:1.55;
  color:#9DA2B3;
  max-width:260px;
  margin:0 0 18px;
}
.lp-footer__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#B7BBCB;
  transition:border-color .15s ease, color .15s ease;
}
.lp-footer__badge:hover{ border-color:var(--lp-accent2); color:#fff; }
.lp-footer__badge-dot{
  width:6px; height:6px; border-radius:50%;
  background:#3FCF8E; display:inline-block; flex:0 0 auto;
}

.lp-footer__heading{
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6E7180;
  margin:0 0 16px;
}
.lp-footer__col{ display:flex; flex-direction:column; gap:11px; }
.lp-footer__col a{
  display:block;
  padding:10px 0;
  margin:-10px 0;
  font-family:var(--sans);
  font-size:.87rem;
  color:#D3D6E0;
  transition:color .15s ease;
}
.lp-footer__col a:hover{ color:#fff; }

.lp-footer__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  padding-top:26px;
}
.lp-footer__copy{ font-family:var(--sans); font-size:.82rem; color:#6E7180; }
.lp-footer__tagline{ font-size:.78rem; letter-spacing:.02em; color:#6E7180; }
.lp-footer__legal{ display:flex; align-items:center; gap:22px; margin-left:auto; }
.lp-footer__legal a{ font-family:var(--sans); font-size:.82rem; color:#9DA2B3; transition:color .15s ease; }
.lp-footer__legal a:hover{ color:#fff; }

/* ---------------------------------------------------------------
   RESPONSIVE — NAV + FOOTER
   --------------------------------------------------------------- */
@media (max-width:960px){
  .lp-nav__panel-in{ grid-template-columns:1fr; gap:28px; }
  .lp-nav__panel-body{ max-width:none; }

  .lp-footer__top{ grid-template-columns:1fr 1fr; }
  .lp-footer__brand{ grid-column:1 / -1; }
}

@media (max-width:860px){
  .lp-nav__links{
    display:none;
    position:absolute;
    left:0; right:0; top:100%;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    background:#fff;
    border-bottom:1px solid var(--lp-line);
    padding:14px 16px 20px;
    box-shadow:0 24px 48px -20px rgba(12,20,48,.22);
  }
  .lp-nav__links.is-open{
    display:flex;
    max-height:calc(100vh - 71px);
    max-height:calc(100dvh - 71px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .lp-nav__link,.lp-nav__trigger{ width:100%; justify-content:space-between; }
  .lp-nav__item{ display:flex; flex-direction:column; width:100%; }

  /* on mobile, dropdown triggers behave as inline accordions (panel is
     nested inside .lp-nav__item, right after its trigger), not
     absolute-positioned mega panels */
  .lp-nav__panel{ position:static; box-shadow:none; border:0; }
  .lp-nav__panel-in{ display:flex; flex-direction:column; gap:20px; padding:8px 10px 20px; }

  .lp-nav__links-cta{
    display:flex; flex-direction:column; gap:10px;
    margin-top:14px; padding-top:14px;
    border-top:1px solid var(--lp-line);
  }
  .lp-nav__links-cta .lp-btn{ justify-content:center; width:100%; }

  .lp-nav__cta .lp-btn{ display:none; }
  .lp-nav__toggle{ display:inline-flex; }
}

@media (max-width:640px){
  .lp-nav__logo{ height:28px; }
  .lp-footer__top{ grid-template-columns:1fr; }
  .lp-footer__bottom{ flex-direction:column; align-items:flex-start; }
  .lp-footer__legal{ margin-left:0; }
}

/* ==========================================================================
   FAQ + final CTA — restyled into the mockup's Manrope / navy language
   (replaces the old ledger-style cream FAQ + CTA so the whole index reads
   as one coherent Claude-Design page).
   ========================================================================== */

/* shared button variants used by the CTA */
.lp-btn--accent{ background:var(--lp-accent); color:#fff; box-shadow:0 14px 34px -12px rgba(123,54,255,0.85); }
.lp-btn--accent:hover{ background:#6A26E8; transform:translateY(-1px); }
.lp-btn--ghost-light{ background:rgba(255,255,255,0.06); color:#fff; border:1px solid rgba(255,255,255,0.25); }
.lp-btn--ghost-light:hover{ border-color:#9B6BFF; color:#9B6BFF; }

.lp-eyebrow--center{ justify-content:center; text-align:center; }
.lp-eyebrow--onnavy{ color:#9B6BFF; }

.lp-sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.lp-honey{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }

/* ---- FAQ ---- */
.lp-faq{ background:#fff; border-top:1px solid var(--lp-line); padding:92px 0; }
.lp-faq__head{ max-width:840px; margin:0 auto 36px; text-align:center; }
.lp-faq__title{
  margin:14px 0 0; font-family:var(--display); font-weight:700;
  font-size:2.25rem; line-height:1.05; letter-spacing:-0.015em; color:var(--lp-ink);
}
.lp-faq__list{ max-width:840px; margin:0 auto; border-top:1px solid var(--lp-line); }
.lp-faq__item{ border-bottom:1px solid var(--lp-line); }
.lp-faq__q{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:24px 2px; font-family:var(--display); font-weight:800; font-size:1.12rem;
  letter-spacing:-0.01em; color:var(--lp-ink); transition:color .2s ease;
}
.lp-faq__q::-webkit-details-marker{ display:none; }
.lp-faq__q:hover{ color:var(--lp-accent); }
.lp-faq__plus{ position:relative; flex:none; width:16px; height:16px; }
.lp-faq__plus::before,
.lp-faq__plus::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:var(--lp-accent); transition:transform .25s ease, opacity .2s ease;
}
.lp-faq__plus::before{ width:14px; height:2px; }
.lp-faq__plus::after{ width:2px; height:14px; }
.lp-faq__item[open] .lp-faq__plus::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.lp-faq__a{
  padding:0 2px 26px; font-family:var(--sans); font-size:1rem; line-height:1.62;
  color:var(--lp-muted); max-width:66ch;
}
.lp-faq__a a{ color:var(--lp-accent); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* ---- final CTA (navy radial-glow, mockup's signature) ---- */
.lp-cta{
  position:relative; overflow:hidden; padding:108px 0; scroll-margin-top:80px;
  background:radial-gradient(920px 540px at 50% -20%, rgba(123,54,255,0.30), transparent 62%), #020E2D;
}
.lp-cta__glow{ position:absolute; top:50%; right:-150px; transform:translateY(-50%); width:520px; pointer-events:none; opacity:0.30; }
.lp-cta__glow svg{ width:100%; height:auto; display:block; }
.lp-cta__inner{ position:relative; max-width:840px; text-align:center; }
.lp-cta__title{
  margin:18px 0 18px; font-family:var(--display); font-weight:800;
  font-size:3.1rem; line-height:1.04; letter-spacing:-0.02em; color:#fff; text-wrap:balance;
}
.lp-cta__sub{ margin:0 auto 34px; font-family:var(--sans); font-size:1.1rem; line-height:1.55; color:#A9ADBE; max-width:540px; }
.lp-cta__btns{ display:flex; align-items:center; justify-content:center; gap:13px; flex-wrap:wrap; }
.lp-cta__quick{ margin-top:40px; padding-top:30px; border-top:1px solid rgba(255,255,255,0.14); }
.lp-cta__quick-kicker{ margin:0 0 14px; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:#8B89A0; }
.lp-cta__quick-form{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.lp-cta__quick-input{
  font-family:var(--sans); font-size:.94rem; color:#fff; background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.2); border-radius:10px; padding:13px 15px; width:300px; max-width:100%; outline:none;
}
.lp-cta__quick-input::placeholder{ color:#8B89A0; }
.lp-cta__quick-input:focus{ border-color:#9B6BFF; }
.lp-cta__quick-note{ margin:14px 0 0; font-family:var(--mono); font-size:.7rem; color:#8B89A0; }

.lp-cta__ext{ margin-top:36px; padding-top:30px; border-top:1px solid rgba(255,255,255,0.14); }
.lp-cta__ext-desc{ margin:0 auto 12px; max-width:480px; font-family:var(--sans); font-size:.94rem; line-height:1.55; color:#A9ADBE; }
.lp-cta__ext-limits{ margin:0 auto 22px; max-width:480px; font-family:var(--sans); font-size:.84rem; line-height:1.55; color:#8B89A0; }
.lp-cta__ext-limits strong{ color:#C7C9D6; }
.lp-cta__ext-limits a{ color:#B79CFF; text-decoration:underline; text-underline-offset:2px; }
.lp-cta__ext-stores{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.lp-cta__ext-store{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-size:.86rem; font-weight:600; color:#C7C9D6;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.16); border-radius:10px; padding:11px 16px; cursor:default;
}
.lp-cta__ext-badge{
  display:inline-block; font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:#E5B564; background:rgba(201,138,26,.16); border:1px solid rgba(201,138,26,.4); border-radius:5px; padding:3px 6px;
}

@media (max-width:860px){
  .lp-faq{ padding:60px 0; }
  .lp-faq__title{ font-size:1.8rem; }
  .lp-cta{ padding:72px 0; }
  .lp-cta__title{ font-size:2.1rem; }
  .lp-cta__glow{ display:none; }
  .lp-cta__ext-stores{ flex-direction:column; align-items:stretch; }
  .lp-cta__ext-store{ justify-content:center; }
}

/* ---- pricing.html — Precios mockup, adapted to real plans/data ---- */

.lp-pr-hero{
  padding:78px 0 56px;
  background:radial-gradient(1000px 540px at 50% -18%, rgba(123,54,255,0.12), transparent 60%), #fff;
}
.lp-pr-hero__in{ max-width:760px; margin:0 auto; text-align:center; }
.lp-pr-hero__title{
  margin:0 0 18px; font-family:var(--display); font-weight:800;
  font-size:clamp(2rem,4.4vw,3.1rem); line-height:1.06; letter-spacing:-.02em; color:var(--lp-ink);
}
.lp-pr-hero__sub{ margin:0 auto; font-size:1.08rem; line-height:1.62; color:#3A3E50; max-width:560px; }
.lp-pr-hero__sub strong{ color:var(--lp-ink); }

.lp-pr-plans{ padding-top:56px; }
.lp-pr-plans__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch;
}
.lp-pr-plan{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--lp-line); border-radius:16px; padding:32px;
}
.lp-pr-plan--dark{ background:var(--lp-navy); border-color:var(--lp-navy); }
.lp-pr-plan__top{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.lp-pr-plan__name{ font-size:15px; font-weight:800; letter-spacing:.01em; color:var(--lp-ink); }
.lp-pr-plan--dark .lp-pr-plan__name{ color:#fff; }
.lp-pr-plan__badge{
  font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; background:var(--lp-accent); border-radius:6px; padding:4px 8px;
}
.lp-pr-plan__tagline{ margin:0 0 18px; font-size:13.5px; line-height:1.5; color:var(--lp-muted); }
.lp-pr-plan--dark .lp-pr-plan__tagline{ color:#9DA2B3; }
.lp-pr-plan__price-row{ display:flex; align-items:baseline; gap:6px; margin-bottom:4px; }
.lp-pr-plan__price{ font-size:42px; font-weight:800; letter-spacing:-.03em; color:var(--lp-ink); }
.lp-pr-plan--dark .lp-pr-plan__price{ color:#fff; }
.lp-pr-plan__unit{ font-size:13px; color:var(--lp-muted); }
.lp-pr-plan--dark .lp-pr-plan__unit{ color:#9DA2B3; }
.lp-pr-plan__billed{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--lp-muted);
}
.lp-pr-plan--dark .lp-pr-plan__billed{ color:#6E7180; }
.lp-pr-plan__rule{ height:1px; background:var(--lp-line); margin:20px 0; }
.lp-pr-plan--dark .lp-pr-plan__rule{ background:rgba(255,255,255,.14); }
.lp-pr-plan__feats{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; flex:1; }
.lp-pr-plan__feats li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.45; color:#2E3242; }
.lp-pr-plan--dark .lp-pr-plan__feats li{ color:#D3D6E0; }
.lp-pr-plan__check{ flex:none; color:var(--lp-accent); font-weight:800; font-size:13px; margin-top:1px; }
.lp-pr-plan--dark .lp-pr-plan__check{ color:#9B6BFF; }
.lp-pr-plan__feats li.is-off{ color:var(--lp-muted); }
.lp-pr-plan--dark .lp-pr-plan__feats li.is-off{ color:#6E7180; }
.lp-pr-plan__feats li.is-off .lp-pr-plan__check{ color:#C7C4D2; }
.lp-pr-plan--dark .lp-pr-plan__feats li.is-off .lp-pr-plan__check{ color:#3A3E50; }
.lp-pr-plan__cta{ margin-top:24px; }
.lp-pr-plans__note{
  margin:24px 0 0; font-family:var(--mono); font-size:.78rem; color:var(--lp-muted); text-align:center;
}

.lp-pr-why{ background:var(--lp-surface); }
.lp-pr-why__head{ max-width:620px; margin:0 auto 36px; text-align:center; }
.lp-pr-why__title{
  margin:0 0 14px; font-family:var(--display); font-weight:700;
  font-size:clamp(1.6rem,2.8vw,2.1rem); line-height:1.12; letter-spacing:-.015em; color:var(--lp-ink);
}
.lp-pr-why__sub{ margin:0; font-size:1rem; line-height:1.6; color:var(--lp-muted); }
.lp-pr-why__head .lp-eyebrow{ justify-content:center; }
.lp-pr-why__cards{ grid-template-columns:repeat(3,1fr); }

.lp-pr-cmp__head{ max-width:640px; margin-bottom:32px; }
.lp-pr-cmp__title{
  margin:0 0 12px; font-family:var(--display); font-weight:700;
  font-size:clamp(1.6rem,2.8vw,2.1rem); line-height:1.12; letter-spacing:-.015em; color:var(--lp-ink);
}
.lp-pr-cmp__sub{ margin:0; font-size:1rem; line-height:1.6; color:var(--lp-muted); }
.lp-pr-cmp__wrap{ background:#fff; border:1px solid var(--lp-line); border-radius:14px; overflow:hidden; overflow-x:auto; }
.lp-pr-cmp{ width:100%; min-width:640px; border-collapse:collapse; }
.lp-pr-cmp thead th{
  background:var(--lp-navy); font-family:var(--sans); font-weight:700; font-size:13px; color:#fff;
  text-align:center; padding:14px 16px;
}
.lp-pr-cmp thead th:first-child{
  text-align:left; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#9DA2B3; font-weight:500;
}
.lp-pr-cmp thead th.is-pop{ position:relative; }
.lp-pr-cmp tbody th{
  text-align:left; padding:10px 20px; background:var(--lp-surface);
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--lp-muted);
  border-top:1px solid var(--lp-line);
}
.lp-pr-cmp tbody td{
  padding:14px 16px; font-size:13.5px; color:var(--lp-muted); text-align:center; border-top:1px solid var(--lp-line);
}
.lp-pr-cmp tbody td:first-child{ text-align:left; font-size:14px; font-weight:600; color:var(--lp-ink); }
.lp-pr-cmp tbody td.yes{ color:var(--lp-accent); font-weight:800; }
.lp-pr-cmp .col-pop{ background:rgba(123,54,255,.04); }
.lp-pr-cmp__foot{ margin:16px 0 0; font-size:.86rem; color:var(--lp-muted); text-align:center; }
.lp-pr-cmp__foot strong{ color:var(--lp-ink); }

/* ---- Beta-status badges (LLM detection engine) — visually distinct from a
   plain "included" checkmark so beta scope is never read as fully shipped. ---- */
.lp-pr-cmp__beta{
  display:inline-block; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--lp-amber); background:rgba(201,138,26,.12); border:1px solid rgba(201,138,26,.3); border-radius:6px; padding:3px 7px;
}
.lp-pr-plan__beta{
  display:inline-block; margin-left:4px; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--lp-amber); background:rgba(201,138,26,.12); border:1px solid rgba(201,138,26,.3); border-radius:5px; padding:2px 6px; vertical-align:1px;
}
.lp-pr-plan--dark .lp-pr-plan__beta{ color:#E5B564; background:rgba(201,138,26,.16); border-color:rgba(201,138,26,.4); }

@media (max-width:860px){
  .lp-pr-plans__grid{ grid-template-columns:1fr; }
  .lp-pr-why__cards{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .lp-pr-why__cards{ grid-template-columns:1fr; }
}

/* ---- contacto.html — Contact page, restyled into the purple system ---- */

.lp-ct-hero{
  padding:78px 0 40px;
  background:radial-gradient(1000px 540px at 50% -18%, rgba(123,54,255,0.12), transparent 60%), #fff;
}
.lp-ct-hero__in{ max-width:720px; margin:0 auto; text-align:center; }
.lp-ct-hero__title{
  margin:0 0 18px; font-family:var(--display); font-weight:800;
  font-size:clamp(2rem,4.4vw,3rem); line-height:1.08; letter-spacing:-.02em; color:var(--lp-ink);
}
.lp-ct-hero__sub{ margin:0 auto; font-size:1.06rem; line-height:1.62; color:#3A3E50; max-width:560px; }

.lp-ct-body{ padding:16px 0 96px; background:#fff; }
.lp-ct-wrap{ display:grid; grid-template-columns:1.55fr 1fr; gap:24px; align-items:start; }

.lp-ct-form-card{
  background:#fff; border:1px solid var(--lp-line); border-radius:16px; padding:36px;
  box-shadow:0 34px 80px -56px rgba(12,20,48,.35);
}

.lp-ct-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px; }
.lp-ct-field{ margin-bottom:18px; }
.lp-ct-field label,.lp-ct-row .lp-ct-field label{ display:block; font-family:var(--sans); font-size:.85rem; font-weight:700; color:var(--lp-ink); margin-bottom:7px; }
.lp-ct-req{ color:var(--lp-accent); }
.lp-ct-hint{ font-weight:500; color:var(--lp-muted); }

.lp-ct-input,.lp-ct-select,.lp-ct-textarea{
  width:100%; font-family:var(--sans); font-size:.94rem; color:var(--lp-ink);
  background:#fff; border:1px solid #D8D5E4; border-radius:10px; padding:12px 14px; outline:none;
  transition:border-color .15s ease;
}
.lp-ct-input::placeholder,.lp-ct-textarea::placeholder{ color:#9D9AAB; }
.lp-ct-input:focus,.lp-ct-select:focus,.lp-ct-textarea:focus{ border-color:var(--lp-accent); }
.lp-ct-input[aria-invalid="true"],.lp-ct-select[aria-invalid="true"],.lp-ct-textarea[aria-invalid="true"]{ border-color:var(--lp-red); }
.lp-ct-textarea{ resize:vertical; min-height:120px; line-height:1.5; }
.lp-ct-select{
  appearance:none; -webkit-appearance:none; padding-right:36px; background-repeat:no-repeat;
  background-image:linear-gradient(45deg,transparent 50%,var(--lp-muted) 50%),linear-gradient(135deg,var(--lp-muted) 50%,transparent 50%);
  background-size:6px 6px,6px 6px; background-position:calc(100% - 18px) 18px,calc(100% - 12px) 18px;
}

.lp-ct-choices{ display:flex; flex-wrap:wrap; gap:10px; }
.lp-ct-choice{
  display:flex; align-items:center; gap:8px; font-family:var(--sans); font-size:.86rem; color:var(--lp-ink);
  background:var(--lp-surface); border:1px solid var(--lp-line); border-radius:9px; padding:9px 13px; cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.lp-ct-choice:has(input:checked){ border-color:var(--lp-accent); background:rgba(123,54,255,.06); }
.lp-ct-choice input{ accent-color:var(--lp-accent); }

.lp-ct-checkbox-row{ display:flex; gap:10px; align-items:flex-start; margin-bottom:22px; }
.lp-ct-checkbox-row input{ margin-top:3px; accent-color:var(--lp-accent); flex:none; }
.lp-ct-checkbox-row label{ font-family:var(--sans); font-size:.85rem; line-height:1.5; color:var(--lp-muted); font-weight:500; }
.lp-ct-checkbox-row a{ color:var(--lp-accent); font-weight:600; text-decoration:underline; text-underline-offset:2px; }

.lp-ct-err{ font-family:var(--sans); font-size:.84rem; color:var(--lp-red); min-height:1.2em; margin-bottom:14px; }

.lp-ct-note{ margin:14px 0 0; text-align:center; font-family:var(--mono); font-size:.78rem; color:var(--lp-muted); }
.lp-ct-note a{ color:var(--lp-accent); font-weight:600; }

.lp-ct-success{ text-align:center; padding:20px 0; }
.lp-ct-success__icon{
  width:56px; height:56px; margin:0 auto 20px; border-radius:50%;
  background:rgba(31,138,91,.1); color:var(--lp-green);
  display:flex; align-items:center; justify-content:center;
}
.lp-ct-success h3{ margin:0 0 10px; font-family:var(--display); font-size:1.3rem; font-weight:700; color:var(--lp-ink); }
.lp-ct-success p{ margin:0 auto; font-size:.95rem; line-height:1.6; color:var(--lp-muted); max-width:440px; }
.lp-ct-success .lp-ct-note{ margin-top:16px; }

.lp-ct-aside{ display:flex; flex-direction:column; gap:16px; }
.lp-ct-card{ background:#fff; border:1px solid var(--lp-line); border-radius:16px; padding:26px; }
.lp-ct-card h3{ margin:0 0 16px; font-family:var(--display); font-size:1.1rem; font-weight:700; color:var(--lp-ink); }
.lp-ct-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.lp-ct-card li{ display:flex; gap:11px; align-items:flex-start; font-size:.87rem; line-height:1.55; color:#2E3242; }
.lp-ct-card li svg{ flex:none; width:16px; height:16px; margin-top:2px; color:var(--lp-accent); }
.lp-ct-card a{ color:var(--lp-accent); font-weight:600; }

.lp-ct-callout{
  background:linear-gradient(180deg,rgba(123,54,255,.07),rgba(123,54,255,.02) 60%);
  border:1px solid rgba(123,54,255,.22); border-radius:16px; padding:24px;
  font-size:.88rem; line-height:1.6; color:#2E3242;
}
.lp-ct-callout strong{ color:var(--lp-ink); }
.lp-ct-callout a{ color:var(--lp-accent); font-weight:700; }
@media (max-width:640px){
  /* overrides the inline flex:1;min-width:260px on the callout's text
     child — that fixed min-width doesn't fit the callout's own 24px
     padding at narrow widths (compliance/security/use-cases/how-it-works). */
  .lp-ct-callout > div{ min-width:0 !important; }
}

@media (max-width:900px){
  .lp-ct-wrap{ grid-template-columns:1fr; }
  .lp-ct-row{ grid-template-columns:1fr; gap:0; }
}
@media (max-width:640px){
  .lp-ct-hero{ padding:56px 0 32px; }
  .lp-ct-form-card{ padding:24px; }
}

/* ---- legal.css ---- */
/* ==========================================================================
   Landing-purple (.lp) — LEGAL / LONG-FORM DOCUMENT PAGES
   Scoped visual system for terms.html. Sidebar TOC + prose content, reusing
   the existing .lp-ct-card / .lp-ct-callout / .lp-eyebrow components. Only
   terms.html loads these rules today — appended here as a pure addition, no
   other page's already-used selectors changed.
   ========================================================================== */

.lp-legal-hero{
  padding:56px 0 40px;
  border-bottom:1px solid var(--lp-line);
  background:
    radial-gradient(900px 460px at 90% -20%, rgba(123,54,255,.10), transparent 60%),
    #fff;
}
.lp-legal-hero__in{ max-width:78ch; }
.lp-legal-hero__title{
  margin:0 0 16px;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2rem,4vw,2.9rem);
  line-height:1.08;
  letter-spacing:-.01em;
  color:var(--lp-ink);
}
.lp-legal-hero__sub{ margin:0 0 14px; font-size:1.02rem; line-height:1.62; color:#3A3E50; max-width:68ch; }
.lp-legal-hero__sub a{ color:var(--lp-accent); font-weight:600; }
.lp-legal-hero__meta{ font-family:var(--mono); font-size:.76rem; letter-spacing:.02em; color:var(--lp-muted); }

.lp-legal-body{ padding:48px 0 96px; background:#fff; }
.lp-legal-wrap{ display:grid; grid-template-columns:240px 1fr; gap:48px; align-items:start; }

.lp-legal-toc{ position:sticky; top:96px; }
.lp-legal-toc h4{ margin:0 0 14px; font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--lp-muted); }
.lp-legal-toc ol{ list-style:none; counter-reset:lp-toc; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.lp-legal-toc li{ counter-increment:lp-toc; }
.lp-legal-toc a{
  display:flex; gap:8px; padding:7px 8px; margin-inline:-8px; border-radius:8px;
  font-size:.85rem; line-height:1.4; color:#3A3E50; text-decoration:none;
  min-width:0; overflow-wrap:break-word;
}
.lp-legal-toc a::before{ content:counter(lp-toc) "."; color:var(--lp-muted); font-family:var(--mono); font-size:.78rem; flex:none; }
.lp-legal-toc a:hover{ background:var(--lp-surface); color:var(--lp-ink); }

.lp-legal-content{ max-width:74ch; color:#2E3242; }
.lp-legal-content h2{
  scroll-margin-top:96px;
  margin:44px 0 14px;
  font-family:var(--display);
  font-weight:700;
  font-size:1.4rem;
  color:var(--lp-ink);
}
.lp-legal-content h2:first-child{ margin-top:0; }
.lp-legal-content h3{ scroll-margin-top:96px; margin:24px 0 10px; font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--lp-ink); }
.lp-legal-content p{ margin:0 0 16px; line-height:1.7; }
.lp-legal-content ul{ margin:0 0 16px; padding-left:1.2rem; list-style:disc; }
.lp-legal-content ul li{ margin:0 0 8px; line-height:1.65; color:#3A3E50; }
.lp-legal-content ul li::marker{ color:var(--lp-accent); }
.lp-legal-content a{ color:var(--lp-accent); text-decoration:underline; text-underline-offset:2px; font-weight:600; }
.lp-legal-content strong{ color:var(--lp-ink); }
.lp-legal-content .lp-ct-callout{ margin:0 0 32px; }
.lp-legal-content .lp-legal-muted{ font-size:.85rem; color:var(--lp-muted); }

@media (max-width:900px){
  .lp-legal-wrap{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .lp-legal-toc{ position:static; min-width:0; }
  .lp-legal-toc ol{ flex-direction:row; flex-wrap:wrap; column-gap:4px; }
  .lp-legal-toc a{ padding:6px 8px; max-width:100%; }
  .lp-legal-content{ min-width:0; }
}
@media (max-width:640px){
  .lp-legal-hero{ padding:40px 0 28px; }
}

/* ---- security.html ---- */
/* ==========================================================================
   Landing-purple (.lp) — SECURITY PAGE
   Scoped additions for security.html. Reuses existing .lp-cap__card,
   .lp-dt__* (Allow/Observe/Redact/Block), .lp-why__* (metrics), .lp-faq__*,
   .lp-cta__*, .lp-ct-callout and .lp-eyebrow components wherever the shape
   matched; only a hero, a two-column split layout and a 3-up card grid
   (none of which existed yet) are new. Only security.html loads these rules
   today — pure addition, no other page's already-used selectors changed.
   ========================================================================== */

.lp-sec-hero{
  padding:78px 0 56px;
  background:radial-gradient(1000px 540px at 50% -18%, rgba(123,54,255,0.12), transparent 60%), #fff;
}
.lp-sec-hero__in{ max-width:760px; margin:0 auto; text-align:center; }
.lp-sec-hero__title{
  margin:0 0 18px; font-family:var(--display); font-weight:800;
  font-size:clamp(2rem,4.4vw,3.1rem); line-height:1.06; letter-spacing:-.02em; color:var(--lp-ink);
}
.lp-sec-hero__sub{ margin:0 auto; font-size:1.08rem; line-height:1.62; color:#3A3E50; max-width:600px; }
.lp-sec-hero__sub strong{ color:var(--lp-ink); }
.lp-sec-hero__badges{ display:flex; justify-content:center; gap:24px; flex-wrap:wrap; margin:26px 0 0; }
.lp-sec-hero__badge{ display:inline-flex; align-items:center; gap:8px; font-size:.85rem; color:#3A3E50; }
.lp-sec-hero__badge-dot{ width:7px; height:7px; border-radius:50%; background:#1F8A5B; flex:0 0 auto; }
.lp-sec-hero__ctas{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:30px; }

.lp-sec-split{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:start; }
.lp-sec-feat-list{ display:flex; flex-direction:column; gap:14px; margin-top:26px; }
.lp-sec-side{ position:sticky; top:96px; }

.lp-sec-cards3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }

.lp-sec-strip{ padding:44px 0; }

/* ---- illustrative severity scale (compliance risk score): a plain,
   typographic gradient bar — deliberately not a "live" gauge widget, so it
   can't be read as a real-time reading. Reuses the --ok/--med/--high/--crit
   tokens already defined in styles.css and used by .dot-sev sitewide. ---- */
.lp-sev-gauge{ margin:0 0 30px; }
.lp-sev-gauge__track{ display:flex; height:14px; border-radius:999px; overflow:hidden; border:1px solid rgba(12,20,48,.10); }
.lp-sev-gauge__seg{ flex:1; }
.lp-sev-gauge__seg--ok{ background:var(--ok); }
.lp-sev-gauge__seg--med{ background:var(--med); }
.lp-sev-gauge__seg--high{ background:var(--high); }
.lp-sev-gauge__seg--crit{ background:var(--crit); }
.lp-sev-gauge__labels{ display:flex; margin-top:10px; font:600 .78rem/1.2 var(--sans); color:var(--lp-muted,#6E7180); }
.lp-sev-gauge__labels span{ flex:1; text-align:center; }
.lp-sev-gauge__labels span:first-child{ text-align:left; }
.lp-sev-gauge__labels span:last-child{ text-align:right; }
@media (max-width:560px){ .lp-sev-gauge__labels{ font-size:.68rem; } }

/* ---- product-demo video card: reuses the .card/.chrome browser-mockup
   idiom already used by the hero example cards, wrapped around a real
   short screen recording instead of a static markup mockup. ---- */
.lp-demo-card{ padding:0; overflow:hidden; }
.lp-demo-video{ display:block; width:100%; height:auto; background:#0C1430; }
.lp-demo-caption{ margin-top:12px; font-size:.82rem; line-height:1.5; color:var(--lp-muted,#6E7180); text-align:center; }
.lp-demo-caption code{ font:500 .82em var(--mono); background:rgba(12,20,48,.06); padding:1px 5px; border-radius:4px; }

@media (max-width:900px){
  .lp-sec-split{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .lp-sec-split > *{ min-width:0; }
  .lp-sec-side{ position:static; }
  .lp-sec-cards3{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .lp-sec-hero{ padding:52px 0 36px; }
  .lp-sec-hero__ctas{ flex-direction:column; align-items:stretch; }
  .lp-sec-hero__badges{ gap:14px 20px; }
}

/* ==========================================================================
   Landing-purple (.lp) — "Back to top" scroll button.
   Fixed bottom-right, hidden until the page is scrolled down; JS toggles the
   `is-visible` class and handles the smooth-scroll click. See landing-purple.js.
   ========================================================================== */
.lp-totop{
  position:fixed; right:24px; bottom:24px; z-index:60;
  width:46px; height:46px; border-radius:50%; border:1px solid #E7E5F0;
  background:#020E2D; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(12,20,48,.22);
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, background .2s ease;
}
.lp-totop.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.lp-totop:hover{ background:#7B36FF; }
.lp-totop:focus-visible{ outline:2px solid #7B36FF; outline-offset:3px; }
.lp-totop svg{ width:18px; height:18px; fill:currentColor; }
@media (max-width:640px){
  .lp-totop{ right:16px; bottom:16px; width:42px; height:42px; }
}
@media print{
  .lp-totop{ display:none; }
}

/* ==========================================================================
   Landing-purple (.lp) — Reporting & analytics dashboard simulation
   (platform.html #reporting). Reuses the existing .lp-how__panel browser-
   chrome shell (dots/kicker/head) from the "security console" widget, and
   adds a KPI grid + two chart cards. Data-driven: a small guarded IIFE in
   landing-purple.js renders the 24h/7d/30d datasets into these elements and
   redraws on range-toggle click, so this is a working simulation rather than
   a static screenshot. See landing-purple.js.
   ========================================================================== */
.lp-how__panel-kicker--mono{
  font-family:var(--mono); font-weight:600; font-size:.72rem; letter-spacing:0; text-transform:none; color:var(--lp-muted);
}
.lp-rpt__range{ margin-left:auto; display:flex; gap:6px; }
.lp-rpt__range-btn{
  font-family:var(--mono); font-size:.75rem; font-weight:700; padding:8px 12px; border-radius:7px;
  min-height:40px;
  border:1px solid var(--lp-line); background:#fff; color:var(--lp-muted); cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.lp-rpt__range-btn:hover{ border-color:#7B36FF; color:#7B36FF; }
.lp-rpt__range-btn:focus-visible{ outline:2px solid #7B36FF; outline-offset:2px; }
.lp-rpt__range-btn.is-active{ background:#7B36FF; border-color:#7B36FF; color:#fff; }

.lp-rpt__body{ padding:22px 20px; background:var(--lp-surface); }

.lp-rpt__kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:14px; }
.lp-rpt__kpi{ background:#fff; border:1px solid var(--lp-line); border-radius:12px; padding:15px 16px; min-width:0; }
.lp-rpt__kpi-label{ font-size:.75rem; color:var(--lp-muted); font-weight:600; }
.lp-rpt__kpi-row{ display:flex; align-items:baseline; gap:8px; margin:6px 0 8px; flex-wrap:wrap; min-width:0; }
.lp-rpt__kpi-val{
  font-family:var(--display); font-size:1.5rem; font-weight:800; letter-spacing:-.02em;
  color:var(--lp-ink); font-variant-numeric:tabular-nums; min-width:0;
}
.lp-rpt__kpi-delta{ font-size:.75rem; font-weight:700; }
.lp-rpt__kpi-delta--up{ color:#1F8A5B; }
.lp-rpt__kpi-delta--down{ color:#C0362C; }
.lp-rpt__spark{ width:100%; height:28px; display:block; }
.lp-rpt__spark-line{ stroke-dasharray:var(--dash,240); stroke-dashoffset:var(--dash,240); }
.js .lp-rpt__spark-line.in{ animation:lp_rpt_draw 1s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes lp_rpt_draw{ to{ stroke-dashoffset:0; } }

.lp-rpt__charts{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:14px; }
.lp-rpt__chart-card{ background:#fff; border:1px solid var(--lp-line); border-radius:12px; padding:16px 18px; min-width:0; }
.lp-rpt__chart-title{ font-family:var(--display); font-size:.84rem; font-weight:700; color:var(--lp-ink); margin-bottom:14px; }
.lp-rpt__line{ width:100%; height:auto; display:block; }
.lp-rpt__line-path{
  fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:var(--dash,1440); stroke-dashoffset:var(--dash,1440);
}
.js .lp-rpt__line-path.in{ animation:lp_rpt_draw 1.2s cubic-bezier(.22,1,.36,1) forwards; }
.lp-rpt__line-a{ stroke:#7B36FF; }
.lp-rpt__line-b{ stroke:#1F8A5B; }
.lp-rpt__line-x{ display:flex; justify-content:space-between; margin-top:8px; }
.lp-rpt__line-x span{ font-family:var(--mono); font-size:.62rem; color:#9D9AAB; }
.lp-rpt__legend{ display:flex; gap:16px; margin-top:12px; }
.lp-rpt__legend span{ display:inline-flex; align-items:center; gap:6px; font-size:.74rem; color:var(--lp-muted); }
.lp-rpt__legend i{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.lp-rpt__legend i.a{ background:#7B36FF; }
.lp-rpt__legend i.b{ background:#1F8A5B; }

.lp-rpt__bars{ display:flex; align-items:flex-end; gap:10px; height:150px; }
.lp-rpt__bar{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.lp-rpt__bar-fill{ width:74%; border-radius:5px 5px 2px 2px; transform-origin:bottom; }
/* Guarded by .js so the no-JS fallback (which never adds .in) still shows the
   static inline height instead of a collapsed bar — mirrors .lp-how__chart. */
.js .lp-rpt__bar-fill{ transform:scaleY(0); }
.js .lp-rpt__bar-fill.in{ animation:lp_rpt_bargrow .8s cubic-bezier(.22,1,.36,1) both; }
.lp-rpt__bar:nth-child(1) .lp-rpt__bar-fill{ animation-delay:0s; }
.lp-rpt__bar:nth-child(2) .lp-rpt__bar-fill{ animation-delay:.05s; }
.lp-rpt__bar:nth-child(3) .lp-rpt__bar-fill{ animation-delay:.1s; }
.lp-rpt__bar:nth-child(4) .lp-rpt__bar-fill{ animation-delay:.15s; }
.lp-rpt__bar:nth-child(5) .lp-rpt__bar-fill{ animation-delay:.2s; }
@keyframes lp_rpt_bargrow{ 0%{ transform:scaleY(0); } 55%{ transform:scaleY(1.06); } 72%{ transform:scaleY(.97); } 100%{ transform:scaleY(1); } }
.lp-rpt__bar-label{ font-family:var(--mono); font-size:.63rem; color:#9D9AAB; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

@media (prefers-reduced-motion:reduce){
  .lp-rpt__spark-line, .lp-rpt__line-path{ animation:none !important; stroke-dashoffset:0 !important; }
  .lp-rpt__bar-fill{ animation:none !important; transform:scaleY(1) !important; }
}
@media (max-width:960px){
  .lp-rpt__charts{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .lp-how__panel-head{ flex-wrap:wrap; row-gap:8px; }
  .lp-rpt__range{ margin-left:0; width:100%; justify-content:flex-end; }
  .lp-rpt__kpis{ grid-template-columns:1fr 1fr; gap:10px; }
  .lp-rpt__kpi{ padding:12px; }
  .lp-rpt__kpi-val{ font-size:1.25rem; }
  .lp-rpt__bars{ height:120px; }
}

/* ---- language switcher: neutralize the drawer-accordion width:100% rules
   (.lp-nav__item / .lp-nav__trigger) that don't apply to this CTA-row control ---- */
@media (max-width:860px){
  .lp-nav__item--lang{ display:inline-flex; width:auto; flex:none; }
  .lp-lang-trigger{ width:auto; justify-content:center; }
  .lp-nav__toggle{ flex:none; }
}

/* ============ PROOF / EVIDENCE — independent third-party data (index only) ============ */
.lp-proof{ background:var(--lp-surface); border-bottom:1px solid var(--lp-line); }
.lp-proof__head{ max-width:720px; margin:0 auto 44px; text-align:center; }
.lp-proof__title{ font-size:clamp(1.7rem,3.4vw,2.4rem); line-height:1.15; letter-spacing:-.02em; margin:14px 0 12px; color:var(--lp-ink); }
.lp-proof__sub{ font-size:1rem; line-height:1.6; color:var(--lp-muted); }
.lp-proof__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.lp-proof__card{ background:#fff; border:1px solid var(--lp-line); border-radius:13px; padding:22px; display:flex; flex-direction:column; }
.lp-proof__stat{ font-size:clamp(1.55rem,2.6vw,2.05rem); font-weight:800; letter-spacing:-.02em; color:var(--lp-accent); white-space:nowrap; }
.lp-proof__label{ font-weight:700; font-size:.92rem; color:var(--lp-ink); margin:6px 0 8px; }
.lp-proof__d{ font-size:.8rem; line-height:1.5; color:var(--lp-muted); margin:0 0 14px; }
.lp-proof__src{ margin-top:auto; align-self:flex-start; font-size:.72rem; font-weight:600; letter-spacing:.02em; color:var(--lp-accent); text-decoration:none; border-bottom:1px dashed rgba(123,54,255,.35); padding-bottom:1px; }
.lp-proof__src:hover{ border-bottom-style:solid; }
.lp-proof__case{ margin-top:18px; background:#fff; border:1px solid var(--lp-line); border-left:3px solid var(--lp-accent); border-radius:13px; padding:26px 28px; }
.lp-proof__case-kicker{ font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--lp-accent); margin-bottom:8px; }
.lp-proof__case-t{ font-size:1.15rem; letter-spacing:-.01em; margin:0 0 10px; color:var(--lp-ink); }
.lp-proof__case-d{ font-size:.9rem; line-height:1.65; color:var(--lp-muted); margin:0 0 12px; }
.lp-proof__case-src{ font-size:.78rem; color:var(--lp-muted); margin:0; }
.lp-proof__case-src a{ color:var(--lp-accent); text-decoration:none; border-bottom:1px dashed rgba(123,54,255,.35); }
.lp-proof__case-src a:hover{ border-bottom-style:solid; }
.lp-proof__note{ margin:18px 0 0; text-align:center; font-size:.72rem; color:var(--lp-muted); }
@media (max-width:1020px){ .lp-proof__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .lp-proof__grid{ grid-template-columns:1fr; } }