/* ============================================================================
   Tracehold — Design System  ·  "FORENSIC LEDGER / INSTRUMENT"
   Warm ink-on-paper · hairline ledger ruling · monospace metadata layer ·
   verdict stamps (ALLOW/OBSERVE/REDACT/BLOCK) · redaction device · sharp edges.
   Self-hosted fonts (font-src 'self'); strong system fallbacks if absent.
   No purple, no glow orbs, no glassmorphism, no pill eyebrows, no blob cards.
   ========================================================================== */

/* ----- Self-hosted faces (best-effort; system stacks if a face is missing) - */
@font-face{font-family:"Fraunces";src:url(fonts/fr-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(fonts/fr-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(fonts/fr-900.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(fonts/sg-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(fonts/sg-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(fonts/sg-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/pm-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/pm-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/pm-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ----- Tokens ----- */
:root{
  /* paper + ink */
  --bg:        #f4f1ea;   /* warm bone/paper */
  --bg-1:      #efeae0;   /* recessed band */
  --bg-2:      #e7e1d4;   /* deeper tint */
  --paper:     #fbf9f4;   /* raised card surface */
  --surface:   #fbf9f4;
  --surface-2: #f4f1ea;

  --ink:    #1a1611;      /* near-black warm ink */
  --text:   #1a1611;
  --muted:  #4a443c;      /* AA on bone */
  --faint:  #6c655b;      /* AA on bone */

  --rule:   rgba(26,22,17,.14);   /* hairline */
  --rule-2: rgba(26,22,17,.26);   /* stronger hairline */
  --rule-3: rgba(26,22,17,.40);
  --border:   var(--rule);
  --border-2: var(--rule-2);

  /* the single signal accent — Tracehold brand purple (from the icon) */
  --accent:     #7b36ff;  /* marks / fills / borders — brand violet */
  --accent-ink: #5a18d6;  /* text + links on bone (AA) */
  --accent-bg:  rgba(123,54,255,.08);
  --accent-bd:  rgba(123,54,255,.34);

  /* functional verdict semantics (data colors only) */
  --allow:   #1c7340;  --allow-bg:  rgba(28,115,64,.10);  --allow-bd:  rgba(28,115,64,.34);
  --observe: #8a5a00;  --observe-bg:rgba(138,90,0,.10);   --observe-bd:rgba(138,90,0,.32);
  --redact:  #2f5fae;  --redact-bg: rgba(47,95,174,.10);  --redact-bd: rgba(47,95,174,.32);
  --block:   #b3261e;  --block-bg:  rgba(179,38,30,.10);  --block-bd:  rgba(179,38,30,.34);

  /* severity (maps to verdict family) */
  --crit: #b3261e; --high: #c2410c; --med: #8a5a00; --low: #2f5fae; --ok: #1c7340;

  /* dark "instrument" variant (measurement readout) */
  --d-bg:    #181511;
  --d-bg-2:  #211d17;
  --d-rule:  rgba(244,241,234,.13);
  --d-rule2: rgba(244,241,234,.22);
  --d-text:  #ece7dc;
  --d-muted: rgba(236,231,220,.62);
  --d-faint: rgba(236,231,220,.42);
  --d-allow: #5fd398; --d-observe: #f0c14b; --d-redact: #7ba6ef; --d-block: #ff8d82;
  --d-accent:#8b5cf6;

  --maxw: 1180px;
  --radius: 3px;      /* sharp */
  --radius-sm: 2px;
  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

/* ----- Reset / base ----- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px; }
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  line-height:1.62;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* ruled-paper ledger texture (replaces dot-grid + glow orbs) */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:repeating-linear-gradient(180deg, rgba(26,22,17,.035) 0, rgba(26,22,17,.035) 1px, transparent 1px, transparent 33px);
}
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; }
strong,b{ font-weight:600; color:var(--ink); }
h1,h2,h3,h4{ font-family:var(--display); line-height:1.07; letter-spacing:-.01em; font-weight:700; }
::selection{ background:var(--ink); color:var(--bg); }

/* ----- Layout / ledger structure ----- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:28px; }
main{ counter-reset:sec; }
.section{ padding:88px 0; position:relative; counter-increment:sec; }
.section--tight{ padding:56px 0; }
.section + .section{ border-top:1px solid var(--rule); }
.center{ text-align:center; }
.grid{ display:grid; gap:20px; }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.divider{ height:0; border:0; border-top:1px solid var(--rule); margin:0; }
@media (max-width:880px){ .split{ grid-template-columns:1fr; gap:34px; } }
@media (max-width:860px){ .section{ padding:60px 0; } }

/* ledger margin number — sits in the outer gutter on wide screens */
@media (min-width:1340px){
  .section::before{
    content:"§" counter(sec, decimal-leading-zero);
    position:absolute; top:90px; left:calc((100% - var(--maxw)) / 2 - 18px);
    transform:translateX(-100%);
    font:500 .72rem/1 var(--mono); letter-spacing:.08em; color:var(--faint);
    white-space:nowrap;
  }
  .section::after{
    content:""; position:absolute; top:88px; left:calc((100% - var(--maxw)) / 2 - 14px);
    width:8px; height:1px; background:var(--accent);
  }
}

/* ----- Type ----- */
.h1{ font-family:var(--display); font-size:clamp(2.3rem,5vw,3.7rem); font-weight:700; letter-spacing:-.018em; line-height:1.04; }
.h2{ font-family:var(--display); font-size:clamp(1.7rem,3.2vw,2.5rem); font-weight:700; letter-spacing:-.012em; }
.h3{ font-size:1.28rem; }
.lead{ font-family:var(--sans); font-size:clamp(1.04rem,1.5vw,1.2rem); color:var(--muted); max-width:64ch; line-height:1.6; }
.muted{ color:var(--muted); }
.faint{ color:var(--faint); }
.mono{ font-family:var(--mono); }
.accent{ color:var(--accent-ink); border-bottom:1px solid var(--accent-bd); transition:border-color .15s,color .15s; }
.accent:hover{ color:var(--accent); border-color:var(--accent); }
.balance{ text-wrap:balance; }
.hl{ color:var(--ink); font-weight:600; }
/* grad kept as a token alias — flat ink (no purple gradient) */
.grad{ color:var(--accent-ink); }
.kbd{ font:600 .82rem var(--mono); padding:2px 7px; border-radius:var(--radius-sm); background:var(--bg-1); border:1px solid var(--rule-2); color:var(--ink); }

.section-head{ max-width:66ch; margin-bottom:44px; }
.section-head.center{ margin-inline:auto; }
.section-head .h2{ margin-top:14px; }
.section-head .lead{ margin-top:16px; }

/* ----- Metadata record (REPLACES the pill ◆ eyebrow) ----- */
.rec{
  display:inline-flex; align-items:center; gap:10px;
  font:500 .74rem/1 var(--mono); letter-spacing:.04em; text-transform:uppercase;
  color:var(--faint); padding:0 0 9px; position:relative;
}
.rec::before{ content:""; width:18px; height:2px; background:var(--accent); flex:none; }
.rec b{ color:var(--ink); font-weight:600; }
.rec .accent, .rec--accent{ color:var(--accent-ink); }
/* legacy .eyebrow → flattened mono label, no pill / border / background */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font:500 .74rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-ink); padding:0; border:0; background:none; border-radius:0;
}
.eyebrow::before{ content:""; width:18px; height:2px; background:var(--accent); flex:none; }

/* ----- Redaction device (█ bars) ----- */
.rdct{ background:var(--ink); color:transparent; border-radius:1px; padding:0 .15em; user-select:none; overflow-wrap:anywhere; max-width:100%; }
.rdct--accent{ background:var(--accent); }
.rdct-bar{ display:inline-block; height:1em; vertical-align:-.12em; background:var(--ink); border-radius:1px; }

/* ----- Verdict stamp ----- */
.stamp{
  display:inline-flex; align-items:center; gap:8px; flex:none;
  font:600 .75rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  padding:6px 11px; border:1px solid var(--rule-2); border-radius:var(--radius-sm);
  color:var(--ink); background:var(--paper);
}
.stamp::before{ content:""; width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; }
/* recurring "kept verbatim" example-card row: icon + growing text + a
   .stamp badge, laid out with inline style="flex:1" on the text div —
   needs min-width:0 so long copy can wrap instead of forcing the row wide,
   and needs to allow the stamp to drop to its own line on narrow phones
   rather than squeezing the copy into a one-word-per-line sliver. */
[style="flex:1"]{ min-width:0; }
[style="display:grid;gap:12px"] > div{ min-width:0; }
@media (max-width:360px){
  /* too little room for icon + copy + verdict badge on one line at the
     narrowest phone widths — let the badge drop to its own line instead
     of squeezing the copy down to a one-word-per-line sliver. */
  [style="display:grid;gap:12px"] > div{ flex-wrap:wrap; row-gap:6px; }
  [style="display:grid;gap:12px"] > div > [style="flex:1"]{ flex-basis:150px; }
  [style="display:grid;gap:12px"] > div > .stamp{ flex-basis:calc(100% - 32px); margin-left:32px; }
}
.stamp--allow  { color:var(--allow);   border-color:var(--allow-bd);   background:var(--allow-bg); }
.stamp--observe{ color:var(--observe); border-color:var(--observe-bd); background:var(--observe-bg); }
.stamp--redact { color:var(--redact);  border-color:var(--redact-bd);  background:var(--redact-bg); }
.stamp--block  { color:var(--block);   border-color:var(--block-bd);   background:var(--block-bg); }

/* ----- Buttons (sharp instrument controls) ----- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 20px; border-radius:var(--radius-sm); font:600 .96rem var(--sans);
  border:1px solid transparent; transition:background .18s,border-color .18s,color .18s,transform .1s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.btn-primary:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--rule-2); }
.btn-ghost:hover{ border-color:var(--ink); background:var(--paper); }
.btn-sm{ padding:8px 14px; font-size:.86rem; }
.btn-block{ width:100%; }
.arrow{ transition:transform .18s; color:var(--accent); }
.btn-primary .arrow{ color:inherit; }
.btn:hover .arrow{ transform:translateX(3px); }

/* ----- Navbar (solid paper, hairline — no glass/blur) ----- */
.nav{ position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid transparent; transition:border-color .25s; }
.nav.scrolled{ border-bottom-color:var(--rule-2); background:var(--bg); }
.nav__in{ display:flex; align-items:center; justify-content:space-between; height:66px; gap:24px; }
.brand{ display:flex; align-items:center; gap:11px; font-family:var(--sans); font-weight:700; letter-spacing:-.01em; font-size:1.08rem; color:var(--ink); }
.brand img,.brand .mark{ height:24px; width:auto; }
.nav__links{ display:flex; align-items:center; gap:28px; }
.nav__links a{ position:relative; color:var(--muted); font:500 .92rem var(--mono); letter-spacing:.01em; transition:color .15s; padding:4px 0; }
.nav__links a:hover,.nav__links a.active{ color:var(--ink); }
.nav__links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--accent); }
.nav__cta{ display:flex; align-items:center; gap:12px; }
.nav__toggle{ display:none; background:none; border:1px solid var(--rule-2); border-radius:var(--radius-sm); color:var(--ink); padding:7px; }
.nav__progress{ position:absolute; left:0; bottom:0; height:2px; width:100%; transform:scaleX(0); transform-origin:left center; background:var(--accent); transition:transform .08s linear; pointer-events:none; }
@media (max-width:940px){
  .nav__links,.nav__cta .btn-ghost{ display:none; }
  .nav__toggle{ display:inline-flex; }
  .nav__links.open{ display:flex; position:absolute; top:66px; left:0; right:0; flex-direction:column; align-items:flex-start;
    background:var(--bg); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule-2); padding:18px 28px; gap:16px; }
  .nav__links.open a{ font-size:1rem; }
}

/* ----- Hero ----- */
.hero{ padding:72px 0 56px; position:relative; }
/* minmax(0,…) makes the columns size by ratio ONLY — never by content. This stops
   the hero scramble word (variable width) from widening the left column and
   re-wrapping the H1, which used to shift the whole page vertically. */
.hero__grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:52px; align-items:start; }
.hero__grid > *{ min-width:0; }
.hero h1{ margin:16px 0 18px; }
.hero .lead{ margin-bottom:28px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:13px; margin-bottom:30px; }
.hero__note{ font:500 .82rem var(--mono); color:var(--faint); display:flex; gap:20px; flex-wrap:wrap; }
.hero__note span{ display:inline-flex; align-items:center; gap:8px; }
@media (max-width:960px){ .hero__grid{ grid-template-columns:1fr; gap:38px; } }

/* hero scramble = data token, monospace, brand purple */
.scramble{ font-family:var(--mono); font-weight:600; color:var(--accent-ink); display:inline-block; letter-spacing:-.01em; min-height:1em; white-space:nowrap; vertical-align:top; }
.scramble .dim{ opacity:.5; }
.scramble-cursor{ color:var(--accent); font-weight:400; animation:scrCaret 1s steps(1) infinite; }
@keyframes scrCaret{ 50%{ opacity:0; } }

/* ----- Metrics (ledger row block) ----- */
.metrics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0; border:1px solid var(--rule-2); border-radius:var(--radius); overflow:hidden; background:var(--paper); }
.metric{ padding:24px 22px; border-left:1px solid var(--rule); }
.metric:first-child{ border-left:0; }
.metric__v{ font:700 clamp(1.7rem,3vw,2.4rem)/1 var(--sans); letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.metric__l{ margin-top:9px; color:var(--muted); font-size:.88rem; line-height:1.45; }
.count{ font-variant-numeric:tabular-nums; display:inline-block; min-width:1.5ch; }
.metric__v .count{ -webkit-text-fill-color:currentColor; }
@media (max-width:640px){ .metric{ border-left:0; border-top:1px solid var(--rule); } .metric:first-child{ border-top:0; } }

/* ----- Cards / features (sharp, hairline, no glow) ----- */
.cards{ display:grid; gap:16px; }
.cards--2{ grid-template-columns:repeat(2,1fr); }
.cards--3{ grid-template-columns:repeat(3,1fr); }
.cards--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .cards--3,.cards--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .cards--2,.cards--3,.cards--4{ grid-template-columns:1fr; } }
.card{
  position:relative; background:var(--paper);
  border:1px solid var(--rule-2); border-radius:var(--radius);
  padding:26px 24px; transition:border-color .2s,background .2s;
}
.card:hover{ border-color:var(--ink); }
.card__ico{ width:40px; height:40px; border-radius:var(--radius-sm); display:grid; place-items:center; background:var(--bg-1); border:1px solid var(--rule-2); color:var(--accent-ink); margin-bottom:16px; }
.card__ico svg{ width:21px; height:21px; }
.card h3{ font-family:var(--display); margin-bottom:8px; font-size:1.14rem; font-weight:700; }
.card p{ color:var(--muted); font-size:.94rem; }
.card__num{ position:absolute; top:24px; right:24px; font:500 .76rem var(--mono); color:var(--faint); letter-spacing:.04em; }
.card ul{ margin:14px 0 0; padding:0; list-style:none; display:grid; gap:9px; }
.card ul li{ position:relative; padding-left:18px; color:var(--muted); font-size:.9rem; }
.card ul li::before{ content:""; position:absolute; left:2px; top:8px; width:7px; height:2px; background:var(--accent); }
/* standalone card (not inside .cards grid) */
.card.callout, .card--solo{ border:1px solid var(--rule-2); border-radius:var(--radius); }

/* generic icon/title/desc helpers (used by some pages) */
.icon{ width:40px; height:40px; border-radius:var(--radius-sm); display:grid; place-items:center; background:var(--bg-1); border:1px solid var(--rule-2); color:var(--accent-ink); }
.title{ font-family:var(--display); font-weight:700; }
.desc{ color:var(--muted); }

/* feature row */
.feat-list{ display:grid; gap:18px; }
.feat{ display:flex; gap:15px; align-items:flex-start; }
.feat__ico{ flex:none; width:36px; height:36px; border-radius:var(--radius-sm); display:grid; place-items:center; background:var(--bg-1); border:1px solid var(--rule-2); color:var(--accent-ink); }
.feat__ico svg{ width:18px; height:18px; }
.feat h4{ font-family:var(--sans); font-size:1.0rem; font-weight:600; margin-bottom:3px; }
.feat p{ color:var(--muted); font-size:.92rem; }
.feat-list .feat{ padding-left:16px; border-left:1px solid var(--rule-2); }

/* callout (honesty / correction) */
.callout{ border-left:3px solid var(--accent); background:var(--bg-1); padding:16px 20px; border-radius:0 var(--radius) var(--radius) 0; font-size:.92rem; color:var(--muted); }
.callout strong{ color:var(--ink); }
.note-bar{ display:inline-flex; align-items:center; gap:10px; padding:9px 14px; border:1px solid var(--rule-2); border-radius:var(--radius-sm); background:var(--paper); font:500 .85rem var(--mono); color:var(--muted); }

/* ----- Channels (3 control surfaces) ----- */
.channels{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .channels{ grid-template-columns:1fr; } }
.channel{ background:var(--paper); border:1px solid var(--rule-2); border-radius:var(--radius); overflow:hidden; }
.channel__top{ padding:22px 22px 16px; border-bottom:1px solid var(--rule); }
.channel__top h3{ display:flex; align-items:center; gap:10px; font-size:1.12rem; }
.channel__tech{ margin-top:11px; font:600 .78rem var(--mono); color:var(--accent-ink); letter-spacing:.02em; }
.channel__body{ padding:18px 22px 22px; }
.channel__body p{ color:var(--muted); font-size:.92rem; }
.channel__body ul{ list-style:none; padding:0; margin:13px 0 0; display:grid; gap:8px; }
.channel__body li{ position:relative; padding-left:16px; font-size:.89rem; color:var(--muted); }
.channel__body li::before{ content:"›"; position:absolute; left:0; color:var(--accent); font-weight:700; }

/* ----- Severity dots / tags ----- */
.dot-sev{ width:9px; height:9px; border-radius:50%; display:inline-block; flex:none; }
.sev-crit{ background:var(--crit); } .sev-high{ background:var(--high); }
.sev-med{ background:var(--med); } .sev-low{ background:var(--low); }
.sev-ok{ background:var(--ok); } .sev-warn{ background:var(--high); }
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{ display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border:1px solid var(--rule-2); border-radius:var(--radius-sm); font:500 .8rem var(--mono); color:var(--muted); background:var(--paper); }
.chip strong{ color:var(--ink); }
.tag{ display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:var(--radius-sm); font:600 .7rem var(--mono); letter-spacing:.04em; text-transform:uppercase; border:1px solid var(--rule-2); color:var(--muted); background:var(--paper); }
.tag--ok{ color:var(--allow); border-color:var(--allow-bd); background:var(--allow-bg); }
.tag--prog{ color:var(--observe); border-color:var(--observe-bd); background:var(--observe-bg); }
.tag--gated{ color:var(--redact); border-color:var(--redact-bd); background:var(--redact-bg); }
.tag--accent{ color:var(--accent-ink); border-color:var(--accent-bd); background:var(--accent-bg); }
.rulebadge{ font:600 .68rem var(--mono); padding:3px 8px; border-radius:var(--radius-sm); text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; border:1px solid var(--rule-2); }
.rulebadge--block{ color:var(--block); background:var(--block-bg); border-color:var(--block-bd); }
.rulebadge--redact{ color:var(--redact); background:var(--redact-bg); border-color:var(--redact-bd); }
.rulebadge--warn{ color:var(--observe); background:var(--observe-bg); border-color:var(--observe-bd); }
.rulerow{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 0; border-bottom:1px solid var(--rule); }
.rulerow:last-child{ border-bottom:0; }
.rulerow__l{ min-width:0; }
.rulerow__l b{ font-size:.94rem; }
.rulerow__l span{ display:block; font:500 .8rem var(--mono); color:var(--faint); margin-top:2px; }

/* compliance badge strip */
.cstrip__kicker{ font:500 .8rem var(--mono); letter-spacing:.04em; color:var(--faint); margin-bottom:20px; text-transform:uppercase; }
.cstrip{ position:relative; overflow:hidden; padding:4px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.cstrip__track{ display:flex; gap:12px; width:max-content; animation:cmarq 38s linear infinite; }
.cstrip:hover .cstrip__track{ animation-play-state:paused; }
.cbadge{ display:inline-flex; align-items:center; gap:9px; padding:10px 18px; border:1px solid var(--rule-2); border-radius:var(--radius-sm); background:var(--paper); font:600 .9rem var(--mono); color:var(--ink); white-space:nowrap; }
.cbadge svg{ width:16px; height:16px; color:var(--accent); flex:none; }
@keyframes cmarq{ from{ transform:translateX(0); } to{ transform:translateX(calc(-50% - 6px)); } }
@media (prefers-reduced-motion:reduce){
  .cstrip{ -webkit-mask-image:none; mask-image:none; }
  .cstrip__track{ animation:none; width:auto; flex-wrap:wrap; justify-content:center; }
}

/* ----- Tables / legal ----- */
.tbl-wrap{ border:1px solid var(--rule-2); border-radius:var(--radius); overflow:hidden; overflow-x:auto; }
table.tbl{ width:100%; border-collapse:collapse; font-size:.92rem; min-width:560px; }
.tbl th,.tbl td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--rule); vertical-align:top; }
.tbl thead th{ background:var(--bg-1); font:600 .74rem var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl tbody tr:hover{ background:var(--bg-1); }
.tbl td strong{ color:var(--ink); }
.tbl .yes{ color:var(--allow); font-weight:700; }
.tbl .no{ color:var(--faint); }
.tbl .partial{ color:var(--observe); }
.tbl-group th{ background:var(--ink) !important; color:var(--bg) !important; font:700 .76rem var(--mono) !important; letter-spacing:.05em; text-transform:uppercase; }
.tbl col.col-pop,.tbl .col-pop{ background:var(--accent-bg); }
.tbl th.col-pop{ color:var(--accent-ink); }
.tbl td.txt{ color:var(--muted); font-size:.86rem; }
.plus{ color:var(--accent); }

/* legal / prose / toc */
.legal{ max-width:62rem; }
.prose{ max-width:72ch; }
.prose p,.legal p,.txt{ color:var(--muted); }
.prose h2,.prose h3,.legal h2,.legal h3{ margin:1.6em 0 .5em; }
.toc{ border:1px solid var(--rule-2); border-radius:var(--radius); padding:20px 22px; background:var(--paper); }
.toc a{ color:var(--muted); display:block; padding:4px 0; font:500 .9rem var(--mono); }
.toc a:hover{ color:var(--accent-ink); }
.updated{ font:500 .8rem var(--mono); color:var(--faint); }

/* stat strip */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0; border:1px solid var(--rule-2); border-radius:var(--radius); overflow:hidden; }
.stat{ padding:24px; background:var(--paper); border-left:1px solid var(--rule); }
.stat:first-child{ border-left:0; }
.stat__v{ font:700 clamp(1.7rem,3vw,2.4rem)/1 var(--sans); color:var(--ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stat__v.crit{ color:var(--block); }
.stat__l{ margin-top:9px; color:var(--muted); font-size:.9rem; }
.stat__src{ margin-top:9px; font:500 .72rem var(--mono); color:var(--faint); }

/* timeline */
.timeline{ display:grid; gap:0; border-left:1px solid var(--rule-2); margin-left:6px; }
.tl{ position:relative; padding:0 0 26px 26px; }
.tl:last-child{ padding-bottom:0; }
.tl::before{ content:""; position:absolute; left:-5px; top:5px; width:9px; height:9px; border-radius:50%; background:var(--accent); }
.tl__date{ font:600 .78rem var(--mono); color:var(--accent-ink); }
.tl h4{ margin:5px 0 6px; font-size:1.04rem; }
.tl p{ color:var(--muted); font-size:.92rem; }
.tl a{ color:var(--accent-ink); border-bottom:1px solid var(--accent-bd); }

/* flow nodes */
.flow{ display:grid; gap:13px; }
.flow__row{ display:flex; align-items:stretch; gap:13px; flex-wrap:wrap; }
.flow__node{ flex:1 1 200px; min-width:180px; border:1px solid var(--rule-2); border-radius:var(--radius); padding:18px; background:var(--paper); }
.flow__node h4{ font-size:.96rem; display:flex; align-items:center; gap:9px; }
.flow__node p{ font-size:.84rem; color:var(--muted); margin-top:6px; }
.flow__node.accent{ border-color:var(--accent-bd); background:var(--accent-bg); border-bottom:0; }
.flow__arrow{ align-self:center; color:var(--accent); font-size:1.3rem; }

/* ----- Pricing ----- */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start; }
@media (max-width:960px){ .plans{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; } }
.plan{ background:var(--paper); border:1px solid var(--rule-2); border-radius:var(--radius); padding:28px 24px; position:relative; }
.plan.featured{ border-color:var(--ink); border-width:1px; box-shadow:4px 4px 0 var(--ink); }
.plan__badge{ position:absolute; top:-11px; left:24px; background:var(--accent); color:#fff; font:700 .68rem var(--mono); letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:var(--radius-sm); }
.plan__name{ font-family:var(--display); font-size:1.3rem; font-weight:700; }
.plan__aud{ color:var(--faint); font:500 .86rem var(--mono); margin-top:4px; }
.plan__price{ margin:18px 0 6px; font:700 2.1rem/1 var(--sans); letter-spacing:-.02em; color:var(--ink); }
.plan__price small,.plan__price .per{ font:500 .9rem var(--mono); color:var(--muted); }
.plan__desc{ color:var(--muted); font-size:.9rem; min-height:2.6em; margin:6px 0 4px; }
.plan__billed{ font:500 .76rem var(--mono); color:var(--faint); margin-top:2px; min-height:1em; }
.plan__note{ font:500 .76rem var(--mono); color:var(--faint); margin-top:14px; }
.plan__feats{ list-style:none; padding:0; margin:20px 0; display:grid; gap:11px; }
.plan__feats li{ position:relative; padding-left:22px; font-size:.91rem; color:var(--muted); }
.plan__feats li::before{ content:""; position:absolute; left:0; top:7px; width:10px; height:2px; background:var(--accent); }
.plan__feats li.no{ color:var(--faint); }
.plan__feats li.no::before{ background:var(--rule-3); width:8px; }
.plans--4{ grid-template-columns:repeat(4,1fr); align-items:stretch; }
.plans--4 .plan{ padding:24px 20px; display:flex; flex-direction:column; }
.plans--4 .plan .plan__feats{ flex:1 0 auto; }
@media (max-width:1100px){ .plans--4{ grid-template-columns:repeat(2,1fr); max-width:780px; margin-inline:auto; } }
@media (max-width:620px){ .plans--4{ grid-template-columns:1fr; max-width:420px; } }
.plans .price-annual{ display:none; }
.plans[data-billing="annual"] .price-monthly{ display:none; }
.plans[data-billing="annual"] .price-annual{ display:inline; }

/* billing toggle (dormant hook, kept styleable) */
.billing{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:38px; }
.billing-toggle{ display:inline-flex; gap:0; padding:0; border:1px solid var(--rule-2); border-radius:var(--radius-sm); background:var(--paper); overflow:hidden; }
.billing-toggle button{ padding:9px 20px; border:0; background:transparent; color:var(--muted); font:600 .9rem var(--mono); transition:background .15s,color .15s; }
.billing-toggle button[aria-pressed="true"]{ background:var(--ink); color:var(--bg); }
.billing-save{ font:600 .8rem var(--mono); color:var(--allow); }

/* ----- CTA band ----- */
.cta{ border:1px solid var(--ink); border-radius:var(--radius); padding:52px 40px; text-align:center; background:var(--paper); position:relative; }
.cta::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent); }
.cta h2{ margin-bottom:14px; }
.cta .lead{ margin:0 auto 26px; }
.cta__btns{ display:flex; gap:13px; justify-content:center; flex-wrap:wrap; }

/* ----- FAQ (ledger rows) ----- */
.faq{ display:grid; gap:0; max-width:860px; border-top:1px solid var(--rule-2); }
.faq__item{ border-bottom:1px solid var(--rule); background:transparent; }
.faq__item[open]{ background:var(--paper); }
.faq__q{ list-style:none; cursor:pointer; padding:20px 4px 20px 0; display:flex; justify-content:space-between; align-items:center; gap:16px; font:600 1.04rem var(--sans); color:var(--ink); }
.faq__q::-webkit-details-marker{ display:none; }
.faq__item[open] .faq__q{ padding-left:18px; padding-right:18px; }
.faq__q .plus{ flex:none; width:24px; height:24px; position:relative; transition:transform .25s; color:var(--accent); }
.faq__q .plus svg{ width:20px; height:20px; }
.faq__item[open] .plus{ transform:rotate(45deg); }
.faq__a{ padding:0 18px 22px; color:var(--muted); font-size:.96rem; line-height:1.7; max-width:74ch; }
.faq__item:not([open]) .faq__a{ padding-left:0; }

/* ----- Compliance accordion (.acc) ----- */
.acc{ display:grid; gap:0; max-width:900px; margin-inline:auto; border-top:1px solid var(--rule-2); }
.acc__item{ border-bottom:1px solid var(--rule); background:transparent; }
.acc__item[open]{ background:var(--paper); }
.acc__head{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:15px; padding:18px 14px; font:600 1.04rem var(--sans); color:var(--ink); }
.acc__head::-webkit-details-marker{ display:none; }
.acc__ico{ width:40px; height:40px; border-radius:var(--radius-sm); display:grid; place-items:center; background:var(--bg-1); border:1px solid var(--rule-2); color:var(--accent-ink); flex:none; }
.acc__ico svg{ width:20px; height:20px; }
.acc__title{ flex:1; min-width:0; }
.acc__title small{ display:block; font:500 .82rem var(--mono); color:var(--faint); margin-top:2px; }
.acc__tag{ font:600 .68rem var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--accent-ink); border:1px solid var(--accent-bd); padding:4px 9px; border-radius:var(--radius-sm); flex:none; }
.acc__chev{ flex:none; color:var(--accent); transition:transform .25s; }
.acc__item[open] .acc__chev{ transform:rotate(180deg); }
.acc__body{ padding:2px 14px 22px 69px; color:var(--muted); font-size:.96rem; line-height:1.7; max-width:74ch; }
.acc__body p{ margin-bottom:10px; }
.acc__body .hl{ color:var(--ink); font-weight:600; }
@media (max-width:600px){ .acc__head{ gap:12px; } .acc__body{ padding-left:14px; } .acc__tag{ display:none; } }

/* ----- Forms ----- */
.form-wrap{ display:grid; grid-template-columns:1.3fr .85fr; gap:40px; align-items:start; }
@media (max-width:920px){ .form-wrap{ grid-template-columns:1fr; gap:32px; } }
.form-card{ background:var(--paper); border:1px solid var(--rule-2); border-radius:var(--radius); padding:30px; }
.form{ display:grid; gap:18px; }
.form__row{ display:grid; gap:18px; grid-template-columns:1fr 1fr; }
@media (max-width:640px){ .form__row{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font:600 .85rem var(--sans); color:var(--ink); }
.field label .req,.req{ color:var(--accent-ink); }
.field .hint,.hint{ font-size:.76rem; color:var(--faint); }
.input,.select,.textarea{ width:100%; padding:11px 13px; border:1px solid var(--rule-2); border-radius:var(--radius-sm); background:var(--bg); color:var(--ink); font:500 .95rem var(--sans); transition:border-color .15s,box-shadow .15s; }
.input::placeholder,.textarea::placeholder{ color:var(--faint); }
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(123,54,255,.4); }
.input:user-invalid,.textarea:user-invalid{ border-color:var(--block); }
.textarea{ resize:vertical; min-height:120px; font-family:var(--sans); line-height:1.6; }
.select{ appearance:none; -webkit-appearance:none; padding-right:36px; background-repeat:no-repeat;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-size:6px 6px,6px 6px; background-position:calc(100% - 18px) 18px,calc(100% - 12px) 18px; }
.choices{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (max-width:520px){ .choices{ grid-template-columns:1fr; } }
.choice{ display:flex; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--rule-2); border-radius:var(--radius-sm); background:var(--bg); cursor:pointer; font-size:.9rem; color:var(--muted); transition:border-color .15s; }
.choice:hover{ border-color:var(--ink); }
.choice input{ accent-color:var(--accent); width:16px; height:16px; flex:none; }
.checkbox-row,.cb-row{ display:flex; gap:11px; align-items:flex-start; }
.checkbox-row input{ margin-top:3px; width:16px; height:16px; accent-color:var(--accent); flex:none; }
.checkbox-row label{ font-size:.88rem; color:var(--muted); font-weight:500; }
.checkbox-row a{ color:var(--accent-ink); border-bottom:1px solid var(--accent-bd); }
.honey{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__err{ color:var(--block); font:500 .82rem var(--mono); min-height:1.1em; }
.form-success{ text-align:center; padding:42px 28px; border:1px solid var(--allow-bd); border-radius:var(--radius); background:var(--allow-bg); }
.form-success .ok-ico{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center; margin:0 auto 18px; background:var(--allow-bg); border:1px solid var(--allow-bd); color:var(--allow); }
.form-success h3{ font-size:1.4rem; margin-bottom:10px; }
.form-success p{ color:var(--muted); max-width:46ch; margin:0 auto 18px; }
.form-aside .card{ margin-bottom:16px; border:1px solid var(--rule-2); border-radius:var(--radius); }
.form-aside ul{ list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.form-aside li{ display:flex; gap:12px; align-items:flex-start; font-size:.9rem; color:var(--muted); }
.form-aside li svg{ width:20px; height:20px; color:var(--accent); flex:none; margin-top:1px; }
.field > fieldset,fieldset.field{ border:0; margin:0; padding:0; min-inline-size:0; }
fieldset.field > legend{ padding:0; }

/* ----- Footer ----- */
.footer{ border-top:1px solid var(--rule-2); padding:60px 0 40px; background:var(--bg-1); }
.footer__grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px; }
@media (max-width:820px){ .footer__grid{ grid-template-columns:1fr 1fr; gap:32px; } }
.footer__brand img{ height:28px; margin-bottom:16px; }
.footer__brand p{ color:var(--muted); font-size:.9rem; max-width:34ch; }
.footer__col h5{ font:600 .74rem var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:15px; }
.footer__col a{ display:block; color:var(--muted); font-size:.9rem; padding:5px 0; transition:color .15s; }
.footer__col a:hover{ color:var(--accent-ink); }
.footer__bot{ margin-top:46px; padding-top:22px; border-top:1px solid var(--rule); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--faint); font:500 .82rem var(--mono); }
.footer__bot .mono{ color:var(--muted); }

/* ----- Reveal on scroll ----- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease,transform .5s ease; }
html:not(.js) .reveal{ opacity:1; transform:none; transition:none; }
.reveal.in{ opacity:1; transform:none; }
.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; }

/* skip link */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:0 0 var(--radius) 0; font:600 .9rem var(--sans); }
.skip-link:focus{ left:0; outline:2px solid var(--accent); outline-offset:2px; }

/* focus rings (a11y) */
.btn:focus-visible,a:focus-visible,.faq__q:focus-visible,.acc__head:focus-visible,
.billing-toggle button:focus-visible,.nav__toggle:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-sm);
}
.choice:focus-within,.input:focus-visible,.select:focus-visible,.textarea:focus-visible{ outline:none; }

/* ----- Browser/app chrome bar (reused by mockups) ----- */
.chrome{ display:flex; align-items:center; gap:7px; padding:12px 15px; border-bottom:1px solid var(--rule); background:var(--bg-1); }
.chrome i{ width:10px; height:10px; border-radius:50%; background:var(--rule-3); display:inline-block; }
.chrome span{ font:500 .78rem var(--mono); color:var(--faint); margin-left:9px; }

/* ============================================================================
   ANIMATED WIDGETS  —  extension demo · console (dark instrument) · pipe
   driven by app.js via data-anim; reduced-motion → static state
   ========================================================================== */

/* ---- Extension scan demo (paper instrument) ---- */
.demo{ border:1px solid var(--rule-2); border-radius:var(--radius); background:var(--paper); overflow:hidden; }
.demo__body{ padding:20px; position:relative; }
.demo__label{ font:500 .76rem var(--mono); color:var(--faint); margin-bottom:8px; text-transform:uppercase; letter-spacing:.04em; }
.demo__msg{ position:relative; background:var(--bg); border:1px solid var(--rule-2); border-radius:var(--radius-sm); padding:14px 15px; min-height:84px; font:500 .95rem/1.6 var(--sans); color:var(--ink); overflow:hidden; }
.demo__msg .tok{ border-radius:1px; padding:0 2px; transition:background .25s,color .25s,box-shadow .25s; }
.demo__msg .tok.hit{ background:var(--accent-bg); box-shadow:inset 0 0 0 1px var(--accent-bd); color:var(--accent-ink); font-weight:600; }
.demo__msg .tok.red{ background:var(--ink); color:var(--ink); font-weight:600; border-radius:1px; }
.demo__caret{ display:inline-block; width:2px; height:1.05em; background:var(--accent); margin-left:1px; vertical-align:-2px; animation:caret 1s steps(1) infinite; }
@keyframes caret{ 50%{ opacity:0; } }
.demo__scan{ position:absolute; left:0; top:0; bottom:0; width:40px; pointer-events:none; opacity:0; background:linear-gradient(90deg,transparent,rgba(123,54,255,.18),transparent); }
.demo__scan.run{ opacity:1; animation:scansweep 1.1s ease-in-out; }
@keyframes scansweep{ 0%{ transform:translateX(-40px); } 100%{ transform:translateX(var(--scanw,420px)); } }
.demo__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; min-height:24px; }
.demo__status{ font:600 .78rem var(--mono); color:var(--faint); display:inline-flex; align-items:center; gap:8px; }
.demo__status .dotp{ width:8px; height:8px; border-radius:50%; background:var(--accent); animation:scanPulse 1.2s ease-in-out infinite; }
.demo__conf{ font:700 .74rem var(--mono); color:var(--allow); opacity:0; transition:opacity .3s; }
.demo__conf.show{ opacity:1; }
.demo__alert{ display:flex; gap:11px; align-items:flex-start; margin-top:12px; padding:13px 14px; border:1px solid var(--accent-bd); background:var(--accent-bg); border-radius:var(--radius-sm); border-left-width:3px; opacity:0; transform:translateY(6px); transition:opacity .3s,transform .3s; }
.demo__alert.show{ opacity:1; transform:none; }
.demo__alert svg{ width:22px; height:22px; color:var(--accent-ink); flex:none; }
.demo__alert b{ display:block; color:var(--ink); font-size:.94rem; }
.demo__alert span{ font-size:.85rem; color:var(--muted); }
@keyframes scanPulse{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }

/* ---- Platform console (DARK instrument readout) ---- */
.console{ border:1px solid var(--rule-3); border-radius:var(--radius); background:var(--d-bg); overflow:hidden; color:var(--d-text); }
.console .chrome{ background:var(--d-bg-2); border-color:var(--d-rule); }
.console .chrome i{ background:var(--d-rule2); }
.console .chrome span{ color:var(--d-muted); }
.console .chrome .scramble{ color:var(--d-accent); }
.console__grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:0; }
@media (max-width:720px){ .console__grid{ grid-template-columns:1fr; } }
.console__feed{ padding:6px 0; border-right:1px solid var(--d-rule); min-height:236px; }
@media (max-width:720px){ .console__feed{ border-right:0; border-bottom:1px solid var(--d-rule); } }
.console__row{ display:flex; align-items:center; gap:11px; padding:11px 18px; border-bottom:1px solid var(--d-rule); font:500 .82rem var(--mono); opacity:0; transform:translateY(-8px); }
.console__row.in{ animation:rowin .45s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes rowin{ to{ opacity:1; transform:none; } }
.console__row:last-child{ border-bottom:0; }
.console__row .who{ color:var(--d-faint); margin-left:auto; font-size:.76rem; }
.console__row .ev{ color:var(--d-text); }
.console__row .sev-crit{ background:var(--d-block); } .console__row .sev-high{ background:#ffb27a; }
.console__row .sev-med{ background:var(--d-observe); } .console__row .sev-low{ background:var(--d-redact); }
.console__row .sev-ok{ background:var(--d-allow); }
.console__side{ padding:22px; display:flex; flex-direction:column; gap:20px; align-items:center; justify-content:center; }
.ring{ position:relative; width:128px; height:128px; }
.ring svg{ transform:rotate(-90deg); }
.ring__bg{ fill:none; stroke:var(--d-rule); stroke-width:10; }
.ring__fg{ fill:none; stroke:var(--d-accent); stroke-width:10; stroke-linecap:butt; transition:stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1); }
.ring__num{ position:absolute; inset:0; display:grid; place-items:center; }
.ring__num b{ font:700 1.7rem/1 var(--sans); color:var(--d-text); font-variant-numeric:tabular-nums; }
.ring__num span{ font:500 .62rem var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--d-faint); margin-top:3px; }
.bars{ display:flex; align-items:flex-end; gap:6px; height:54px; width:100%; max-width:200px; }
.bars i{ flex:1; background:var(--d-accent); border-radius:1px; height:6%; transition:height 1s cubic-bezier(.16,1,.3,1); }
@media (prefers-reduced-motion:reduce){
  .demo__caret,.demo__status .dotp{ animation:none; }
  .console__row{ opacity:1; transform:none; animation:none; }
}

/* ---- Pipe widget (how-it-works) ---- */
.pipe{ position:relative; border:1px solid var(--rule-2); border-radius:var(--radius); background:var(--paper); padding:28px 26px 20px; overflow:hidden; }
.pipe__lane{ position:relative; height:48px; }
.pipe__rail{ position:absolute; left:8%; right:8%; bottom:6px; height:2px; background:var(--rule-2); overflow:hidden; }
.pipe__rail::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 9px,var(--accent) 9px 15px); background-size:30px 100%; opacity:.5; animation:railflow 1s linear infinite; }
@keyframes railflow{ to{ background-position:30px 0; } }
.pkt{ position:absolute; top:3px; left:10%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 12px; border-radius:var(--radius-sm); font:600 .72rem var(--mono); white-space:nowrap; z-index:3;
  transition:left .8s cubic-bezier(.4,.05,.3,1),opacity .35s,transform .35s,background .25s,color .25s,border-color .25s; }
.pkt .pk-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.pkt--data{ background:var(--ink); color:var(--bg); }
.pkt--meta{ background:var(--allow-bg); color:var(--allow); border:1px solid var(--allow-bd); }
.pkt--blocked{ background:var(--block-bg); color:var(--block); border:1px solid var(--block-bd); }
.pipe__stations{ display:flex; }
.pipe__node{ flex:1; min-width:0; text-align:center; position:relative; padding-top:13px; }
.pipe__node::before{ content:""; position:absolute; top:-7px; left:50%; width:1px; height:9px; background:var(--rule-2); transform:translateX(-50%); }
.pipe__ico{ width:48px; height:48px; border-radius:var(--radius-sm); display:grid; place-items:center; margin:0 auto 10px; background:var(--bg); border:1px solid var(--rule-2); color:var(--faint); transition:border-color .3s,color .3s,transform .3s; }
.pipe__ico svg{ width:22px; height:22px; }
.pipe__node.on .pipe__ico{ border-color:var(--accent); color:var(--accent-ink); transform:translateY(-2px); }
.pipe__node h4{ font-family:var(--sans); font-size:.86rem; font-weight:600; overflow-wrap:break-word; }
.pipe__node p{ font-size:.74rem; color:var(--faint); margin-top:2px; min-height:2.2em; }
.pipe__scan{ position:absolute; top:13px; left:50%; width:48px; height:48px; margin-left:-24px; border-radius:50%; border:2px solid var(--accent); opacity:0; pointer-events:none; z-index:1; }
.pipe__scan.go{ animation:scanring .9s ease-out; }
@keyframes scanring{ 0%{ opacity:.8; transform:scale(.45); } 100%{ opacity:0; transform:scale(3); } }
.pipe__verdict{ position:absolute; top:-2px; left:70%; transform:translateX(-50%) translateY(5px); font:700 .72rem var(--mono); padding:4px 10px; border-radius:var(--radius-sm); opacity:0; transition:opacity .3s,transform .3s; z-index:5; white-space:nowrap; pointer-events:none; text-transform:uppercase; letter-spacing:.04em; }
.pipe__verdict.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.pipe__verdict.block{ color:var(--block); background:var(--block-bg); border:1px solid var(--block-bd); }
.pipe__verdict.redact{ color:var(--redact); background:var(--redact-bg); border:1px solid var(--redact-bd); }
.pipe__stats{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px 28px; margin-top:18px; padding-top:18px; border-top:1px solid var(--rule); font:600 .84rem var(--mono); color:var(--faint); }
.pipe__stats span{ display:inline-flex; align-items:center; gap:8px; }
.pipe__stats b{ color:var(--ink); font-size:1rem; font-variant-numeric:tabular-nums; }
.pipe__stats .ic{ width:9px; height:9px; border-radius:50%; flex:none; }
.pipe__stats .ic.scan{ background:var(--accent); } .pipe__stats .ic.red{ background:var(--redact); } .pipe__stats .ic.block{ background:var(--block); }
@media (max-width:680px){
  .pipe__node p{ display:none; }
  .pipe__node h4{ font-size:.75rem; }
  .pipe__ico{ width:36px; height:36px; }
  .pipe__ico svg{ width:18px; height:18px; }
  .pipe__scan{ width:36px; height:36px; margin-left:-18px; }
  .pkt{ font-size:.7rem; padding:0 9px; }
}
@media (prefers-reduced-motion:reduce){ .pipe__rail::after{ animation:none; opacity:.4; } .pkt{ transition:none; } }

/* scan highlight + scanPulse (how-it-works inline token) */
.scan-hl{ background:var(--accent-bg); border:1px solid var(--accent-bd); border-radius:var(--radius-sm); padding:1px 6px; color:var(--accent-ink); font-weight:600; }

/* ============================================================================
   VERDICT CARDS (BLOQUE 4) — instrument "stamps", functional verdict colors
   ALLOW=green · OBSERVE=amber · REDACT=blue · BLOCK=red
   ========================================================================== */
.th-verdict{ padding:88px 28px; background:var(--bg-1); color:var(--ink); border-top:1px solid var(--rule); }
.th-verdict__head{ max-width:760px; margin:0 auto 44px; }
.th-verdict__head .eyebrow{ display:inline-flex; }
.th-verdict__head h2{ font-family:var(--display); font:700 clamp(1.8rem,3.4vw,2.6rem)/1.05 var(--display); letter-spacing:-.015em; margin:16px 0 12px; }
.th-verdict__head h2 span{ color:var(--muted); }
.th-verdict__head p{ font:400 1.05rem/1.55 var(--sans); color:var(--muted); max-width:580px; margin:0; }
.th-pipeline{ max-width:1120px; margin:0 auto; }
.th-pipeline .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:1040px){ .th-pipeline .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .th-pipeline .grid{ grid-template-columns:1fr; } }
.th-pipeline .card{
  background:var(--paper); border:1px solid var(--rule-2); border-radius:var(--radius); padding:22px;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s; margin:0;
}
.th-pipeline .card.is-active{ transform:translateY(-4px); box-shadow:4px 4px 0 var(--ink); }
.th-pipeline .card .icon{ width:46px; height:46px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; background:var(--bg-1); border:1px solid var(--rule-2); color:var(--ink); transition:background .4s,color .4s,border-color .4s; }
.th-pipeline .card .icon svg{ width:23px; height:23px; }
.th-pipeline .card .title{ font-family:var(--display); font:700 1.4rem/1.1 var(--display); letter-spacing:-.01em; margin:15px 0 8px; }
.th-pipeline .card .desc{ font:400 .94rem/1.45 var(--sans); color:var(--muted); min-height:66px; margin:0; }
.th-pipeline .anim{ position:relative; height:66px; margin-top:18px; padding-top:18px; border-top:1px solid var(--rule); overflow:hidden; }
/* per-verdict color scheme */
.th-pipeline .grid .card:nth-child(1).is-active{ border-color:var(--allow-bd); }
.th-pipeline .grid .card:nth-child(1).is-active .icon{ background:var(--allow); color:#fff; border-color:var(--allow); }
.th-pipeline .grid .card:nth-child(2).is-active{ border-color:var(--observe-bd); }
.th-pipeline .grid .card:nth-child(2).is-active .icon{ background:var(--observe); color:#fff; border-color:var(--observe); }
.th-pipeline .grid .card:nth-child(3).is-active{ border-color:var(--redact-bd); }
.th-pipeline .grid .card:nth-child(3).is-active .icon{ background:var(--redact); color:#fff; border-color:var(--redact); }
.th-pipeline .grid .card:nth-child(4).is-active{ border-color:var(--block-bd); }
.th-pipeline .grid .card:nth-child(4).is-active .icon{ background:var(--block); color:#fff; border-color:var(--block); }

/* ALLOW anim */
.a-track{ position:absolute; left:0; right:0; top:50%; border-top:1px dashed var(--rule-2); }
.a-chip{ position:absolute; top:calc(50% - 12px); left:0; display:inline-flex; align-items:center; height:24px; padding:0 11px; border-radius:var(--radius-sm); background:var(--bg-1); color:var(--muted); font:600 11px/1 var(--mono); border:1px solid var(--rule-2); }
.a-gate{ position:absolute; right:6px; top:calc(50% - 13px); width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--rule-3); color:var(--faint); background:var(--paper); }
.a-gate svg{ width:13px; height:13px; }
@keyframes a-travel{ 0%{ left:0; opacity:0; } 10%{ opacity:1; } 62%{ left:calc(100% - 84px); } 80%{ left:calc(100% - 38px); } 92%{ left:calc(100% - 26px); opacity:0; } 100%{ opacity:0; } }
@keyframes a-gate{ 0%,70%{ border-color:var(--rule-3); color:var(--faint); background:var(--paper); } 80%,94%{ border-color:var(--allow); color:#fff; background:var(--allow); } 100%{ border-color:var(--rule-3); color:var(--faint); background:var(--paper); } }
.anim-a-chip{ animation:a-travel 3.2s cubic-bezier(.55,.1,.3,1) infinite; }
.anim-a-gate{ animation:a-gate 3.2s ease infinite; }
/* OBSERVE anim */
.o-rows{ position:absolute; left:0; right:38px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:6px; }
.o-row{ height:5px; border-radius:1px; background:var(--rule-2); }
.o-scan{ position:absolute; top:0; bottom:0; left:0; width:46px; background:linear-gradient(90deg,transparent,var(--observe-bg),transparent); }
.o-eye{ position:absolute; right:4px; top:calc(50% - 13px); width:26px; height:26px; border-radius:50%; background:var(--observe); color:#fff; display:flex; align-items:center; justify-content:center; }
.o-eye svg{ width:14px; height:14px; }
.o-ping{ position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--observe); transform:scale(0); }
@keyframes o-scan{ 0%{ left:0; opacity:0; } 12%{ opacity:1; } 70%{ left:calc(100% - 84px); } 82%{ opacity:0; } 100%{ left:calc(100% - 84px); opacity:0; } }
@keyframes o-ping{ 0%,72%{ transform:scale(0); opacity:.7; } 80%{ transform:scale(1.25); opacity:.35; } 90%,100%{ transform:scale(1); opacity:0; } }
.anim-o-scan{ animation:o-scan 3s ease-in-out infinite; }
.anim-o-ping{ animation:o-ping 3s ease infinite; }
/* REDACT anim — uses the █ redaction cover (slate/blue) */
.r-token{ position:absolute; left:0; top:calc(50% - 12px); height:24px; display:inline-flex; align-items:center; padding:0 11px; border-radius:var(--radius-sm); background:var(--block-bg); color:var(--block); font:600 12px/1 var(--mono); }
.r-cover{ position:absolute; left:0; top:calc(50% - 12px); height:24px; min-width:128px; border-radius:var(--radius-sm); background:var(--ink); transform:scaleX(0); transform-origin:left center; display:flex; align-items:center; padding:0 11px; overflow:hidden; }
.r-cover span{ color:var(--bg); font:600 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; opacity:0; white-space:nowrap; }
.r-send{ position:absolute; right:6px; top:calc(50% - 12px); width:24px; height:24px; border-radius:var(--radius-sm); background:var(--redact); color:#fff; display:flex; align-items:center; justify-content:center; }
.r-send svg{ width:13px; height:13px; }
@keyframes r-cover{ 0%,6%{ transform:scaleX(0); } 26%{ transform:scaleX(1); } 100%{ transform:scaleX(1); } }
@keyframes r-label{ 0%,18%{ opacity:0; } 30%,100%{ opacity:1; } }
@keyframes r-send{ 0%,34%{ opacity:0; transform:translateX(-4px); } 46%,86%{ opacity:1; transform:translateX(0); } 96%,100%{ opacity:0; transform:translateX(-4px); } }
.anim-r-cover{ animation:r-cover 3.6s cubic-bezier(.6,0,.2,1) infinite; }
.anim-r-label{ animation:r-label 3.6s ease infinite; }
.anim-r-send{ animation:r-send 3.6s ease infinite; }
/* BLOCK anim */
.b-chip{ position:absolute; top:calc(50% - 12px); left:0; display:inline-flex; align-items:center; height:24px; padding:0 11px; border-radius:var(--radius-sm); background:var(--bg-1); border:1px solid var(--rule-2); color:var(--ink); font:600 11px/1 var(--mono); }
.b-bar{ position:absolute; right:36px; top:calc(50% - 16px); width:3px; height:32px; border-radius:1px; background:var(--block); transform:scaleY(.4); }
.b-stop{ position:absolute; right:4px; top:calc(50% - 13px); width:26px; height:26px; border-radius:50%; background:var(--block-bg); color:var(--block); display:flex; align-items:center; justify-content:center; }
.b-stop svg{ width:14px; height:14px; }
@keyframes b-travel{ 0%{ left:0; opacity:0; } 12%{ opacity:1; } 46%{ left:calc(100% - 92px); } 54%{ left:calc(100% - 86px); } 58%{ left:calc(100% - 92px); } 62%{ left:calc(100% - 88px); } 72%{ left:8px; } 86%{ left:0; opacity:0; } 100%{ opacity:0; } }
@keyframes b-bar{ 0%,40%{ transform:scaleY(.4); opacity:.4; } 50%,62%{ transform:scaleY(1); opacity:1; } 100%{ transform:scaleY(.4); opacity:.4; } }
@keyframes b-stop{ 0%,42%{ transform:scale(.85); opacity:.55; } 52%{ transform:scale(1.12); opacity:1; } 64%,100%{ transform:scale(1); opacity:.8; } }
.anim-b-chip{ animation:b-travel 3s cubic-bezier(.5,.2,.3,1) infinite; }
.anim-b-bar{ animation:b-bar 3s ease infinite; }
.anim-b-stop{ animation:b-stop 3s ease infinite; }
@media (prefers-reduced-motion:reduce){
  .anim-a-chip,.anim-a-gate,.anim-o-scan,.anim-o-ping,
  .anim-r-cover,.anim-r-label,.anim-r-send,
  .anim-b-chip,.anim-b-bar,.anim-b-stop{ animation:none !important; }
  .th-pipeline .card{ transition:none; }
  .r-cover{ transform:scaleX(1); }
  .r-cover span{ opacity:1; }
  .a-chip,.b-chip{ opacity:0; }
}

/* ============================================================================
   BLOQUE 7 · How-it-works scene (DARK instrument state machine)
   ========================================================================== */
.thld-scene{ background:var(--d-bg); color:var(--d-text); padding:72px 28px; font-family:var(--sans); border-top:1px solid var(--rule); }
.thld-scene__head{ max-width:760px; margin:0 auto 42px; text-align:center; }
.thld-scene__head .eyebrow{ color:var(--d-accent); justify-content:center; }
.thld-scene__head .eyebrow::before{ background:var(--d-accent); }
.thld-scene__head h2{ font-family:var(--display); font:700 clamp(1.7rem,3.2vw,2.3rem)/1.08 var(--display); letter-spacing:-.015em; margin:16px 0 0; }
.thld-stage{ max-width:1040px; margin:0 auto; display:grid; grid-template-columns:1fr 64px minmax(280px,330px) 64px 1fr; align-items:center; row-gap:0; }
.thld-card{ background:var(--d-bg-2); border:1px solid var(--d-rule); border-radius:var(--radius); padding:16px; }
.thld-label{ font:600 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--d-faint); }
.thld-node-sub{ margin-top:8px; font:400 13px/1.35 var(--sans); color:var(--d-muted); }
.thld-prompt{ grid-column:1; grid-row:1; }
.thld-conn--in{ grid-column:2; grid-row:1; }
.thld-engine{ grid-column:3; grid-row:1; }
.thld-conn--out{ grid-column:4; grid-row:1; }
.thld-vendors{ grid-column:5; grid-row:1; }
.thld-conn--meta{ grid-column:3; grid-row:2; justify-self:center; }
.thld-meta{ grid-column:3; grid-row:3; margin-top:0; }
.thld-conn{ position:relative; height:2px; background:var(--d-rule); border-radius:1px; overflow:hidden; }
.thld-conn i{ position:absolute; inset:0; transform:scaleX(0); transform-origin:left center; border-radius:1px; background:var(--d-accent); }
.thld-conn--v{ width:2px; height:40px; justify-self:center; }
.thld-conn--v i{ transform:scaleY(0); transform-origin:top center; background:var(--d-accent); }
.thld-prompt{ min-height:104px; display:flex; flex-direction:column; gap:14px; overflow:hidden; }
.thld-token{ align-self:flex-start; max-width:100%; background:var(--d-bg-2); border:1px solid var(--d-rule); border-radius:var(--radius-sm); padding:10px 12px; font:500 13px/1.35 var(--mono); white-space:nowrap; transform:translateX(-130%); opacity:0; transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .45s ease; }
#thld-hl{ padding:1px 5px; border-radius:var(--radius-sm); transition:background .3s,color .3s; }
.thld-hl-red{ background:rgba(255,141,130,.18); color:var(--d-block); }
.thld-hl-green{ background:rgba(95,211,152,.18); color:var(--d-allow); }
.thld-engine{ display:flex; flex-direction:column; gap:14px; text-align:center; background:var(--d-bg-2); border-color:var(--d-rule2); }
.thld-verdict{ display:inline-flex; align-items:center; gap:9px; justify-content:center; opacity:0; transition:opacity .4s ease; font:600 14px/1 var(--sans); min-height:18px; }
.thld-dot{ width:9px; height:9px; border-radius:50%; background:var(--d-faint); transition:background .3s,box-shadow .3s; }
.thld-actions{ display:flex; gap:8px; }
.thld-btn{ flex:1; border:1px solid var(--d-rule); border-radius:var(--radius-sm); padding:9px 4px; cursor:default; font:600 12px/1 var(--mono); background:var(--d-bg); color:var(--d-muted); transition:transform .35s cubic-bezier(.4,0,.2,1),background .35s,color .35s,box-shadow .35s; }
.thld-btn.is-on{ transform:scale(1.05); color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.4); }
.thld-meta{ opacity:0; }
.thld-vendors{ font-size:13px; }
@keyframes thld-fillx{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes thld-filly{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@keyframes thld-meta{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }
@keyframes thld-pulse-meta{ 0%,100%{ box-shadow:0 0 0 0 rgba(139,92,246,0); } 50%{ box-shadow:0 0 0 5px rgba(139,92,246,.16); } }
@keyframes thld-pulse-vendor{ 0%,100%{ box-shadow:0 0 0 0 rgba(95,211,152,0); } 50%{ box-shadow:0 0 0 5px rgba(95,211,152,.16); } }
#thld-meta-box[style*="thld-meta"]{ opacity:1; }
@media (max-width:860px){
  .thld-stage{ grid-template-columns:1fr; row-gap:14px; }
  .thld-prompt,.thld-engine,.thld-vendors,.thld-meta{ grid-column:1; grid-row:auto; }
  .thld-conn{ grid-column:1; width:2px; height:28px; justify-self:center; }
  .thld-conn i{ transform:scaleY(0); transform-origin:top center; background:var(--d-accent); }
  .thld-conn--in,.thld-conn--out,.thld-conn--meta{ grid-row:auto; }
}
@media (prefers-reduced-motion:reduce){ .thld-token,.thld-btn,.thld-conn i{ transition:none; } }

/* ---- BLOQUE 6 · Compliance accordion bar ---- */
#compliance-bar{ max-width:1040px; margin:0 auto; background:var(--paper); border:1px solid var(--rule-2); border-radius:var(--radius); overflow:hidden; }
#compliance-bar > button{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; background:transparent; border:0; cursor:pointer; padding:20px 22px; text-align:left; color:var(--ink); font:600 1.12rem var(--display); }
#compliance-bar .cb-chevron{ flex:none; width:20px; height:20px; color:var(--accent); transition:transform .42s cubic-bezier(.22,.61,.36,1); }
#compliance-bar[data-open="true"] .cb-chevron{ transform:rotate(180deg); }
#compliance-panel{ height:0; overflow:hidden; }
#compliance-panel .cb-inner{ padding:4px 22px 22px; }
#compliance-panel .cb-row{ display:grid; grid-template-columns:170px 1fr; gap:18px; align-items:baseline; padding:14px 0; border-top:1px solid var(--rule); }
#compliance-panel .cb-reg{ font:600 .88rem var(--mono); color:var(--accent-ink); }
#compliance-panel .cb-desc{ font:400 .95rem/1.55 var(--sans); color:var(--muted); margin:0; }
@media (prefers-reduced-motion:reduce){ #compliance-bar .cb-chevron{ transition:none; } }
@media (max-width:560px){ #compliance-panel .cb-row{ grid-template-columns:1fr; gap:4px; } }

/* ---- BLOQUE 8/10 · misc instrument micro-anims ---- */
.thld-caret{ display:inline-block; width:2px; height:1.05em; margin-left:2px; vertical-align:text-bottom; background:var(--accent); animation:thld-caret 1s steps(1) infinite; }
@keyframes thld-caret{ 0%,50%{ opacity:1; } 51%,100%{ opacity:0; } }
.thld-scan-wrap{ position:relative; overflow:hidden; }
@keyframes thld-scan{ 0%{ transform:translateX(-120%); } 100%{ transform:translateX(320%); } }
.thld-scan{ position:absolute; top:0; bottom:0; left:0; width:38%; pointer-events:none; background:linear-gradient(90deg,transparent,var(--accent-bg),transparent); animation:thld-scan 2.6s linear infinite; }
@keyframes thld-spin{ to{ transform:rotate(360deg); } }
.thld-spin{ display:inline-block; width:18px; height:18px; border-radius:50%; border:2px solid var(--accent-bd); border-top-color:var(--accent); animation:thld-spin .85s linear infinite; }
@keyframes thld-beam{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }
.thld-beam{ animation:thld-beam 1.6s ease-in-out infinite; }
.cli-caret{ display:inline-block; color:var(--d-allow); font-weight:400; animation:thld-blink 1s steps(1) infinite; }
@keyframes thld-blink{ 0%,50%{ opacity:1; } 51%,100%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){
  .thld-caret,.thld-scan,.thld-spin,.thld-beam,.cli-caret{ animation:none; }
  .thld-caret,.cli-caret{ opacity:1; } .thld-scan{ display:none; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .scramble-cursor{ animation:none; }
}

/* protected videos */
video[data-protected]{ -webkit-user-select:none; user-select:none; }
video[data-protected]::-webkit-media-controls-download-button{ display:none; }

/* ============================================================================
   HOME · comment-driven additions
   hero compliance dropdown · shadow-AI module · verdict swap · quick contact
   ========================================================================== */

/* verdict heading — keep the swap word in brand purple (beats the muted span) */
.th-verdict__head h2 .scramble{ color:var(--accent-ink); }
/* verdict scene runs on a dark instrument bg — use the light brand violet */
.thld-scene__head h2 .scramble{ color:var(--d-accent); }

/* ---- Hero compliance band, folded into the hero as a collapsible ---- */
.hero__compliance{ margin-top:34px; border:1px solid var(--rule-2); border-radius:var(--radius); background:var(--paper); }
.hero__compliance > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; font:500 .9rem var(--mono); color:var(--muted); }
.hero__compliance > summary::-webkit-details-marker{ display:none; }
.hero__compliance .hc-label b{ color:var(--ink); font-weight:600; }
.hero__compliance .hc-chevron{ flex:none; width:18px; height:18px; color:var(--accent); transition:transform .35s cubic-bezier(.22,.61,.36,1); }
.hero__compliance[open] .hc-chevron{ transform:rotate(180deg); }
.hero__compliance-body{ padding:6px 18px 20px; border-top:1px solid var(--rule); }
.hc-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.hc-fine{ margin-top:16px; font:500 .82rem var(--mono); color:var(--faint); max-width:74ch; }
.hc-lead{ margin-top:12px; color:var(--muted); font-size:.96rem; max-width:74ch; }
@media (max-width:560px){ .hero__compliance > summary{ font-size:.82rem; } }

/* ---- Shadow-AI module panel (paper instrument) ---- */
.shadow{ border:1px solid var(--rule-2); border-radius:var(--radius); background:var(--paper); overflow:hidden; }
.shadow__body{ padding:20px; }
.shadow__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.shadow__title{ font:600 .78rem var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); }
.shadow__add{ font:600 .76rem var(--mono); color:var(--accent-ink); border:1px solid var(--accent-bd); background:var(--accent-bg); border-radius:var(--radius-sm); padding:6px 11px; white-space:nowrap; }
.shadow__sub{ font:500 .72rem var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin:18px 0 10px; }
.shadow__sub:first-of-type{ margin-top:0; }
.shadow__tools{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:420px){ .shadow__tools{ grid-template-columns:1fr; } }
.stool{ display:flex; align-items:center; gap:9px; padding:11px 13px; border:1px solid var(--rule-2); border-radius:var(--radius-sm); background:var(--bg); font:600 .88rem var(--sans); color:var(--ink); }
.stool b{ margin-left:auto; font:600 .82rem var(--mono); color:var(--faint); }
.stool--new{ border-style:dashed; border-color:var(--accent-bd); }
.shadow__feed{ list-style:none; padding:0; margin:0; }
.shadow__feed li{ display:flex; align-items:center; gap:11px; padding:11px 2px; border-top:1px solid var(--rule); font-size:.88rem; }
.shadow__feed li:first-child{ border-top:0; }
.shadow__feed b{ color:var(--ink); font-weight:600; min-width:74px; }
.shadow__feed .stool-app{ color:var(--muted); font:500 .84rem var(--mono); }
.shadow__feed time{ margin-left:auto; color:var(--faint); font:500 .76rem var(--mono); }
.shadow__feed .flag{ font:600 .64rem var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--block); background:var(--block-bg); border:1px solid var(--block-bd); border-radius:var(--radius-sm); padding:2px 7px; }

/* ---- Quick contact under the demo CTA ---- */
.cta__quick-wrap{ margin-top:30px; padding-top:26px; border-top:1px solid var(--rule); }
.cta__quick-kicker{ font:500 .82rem var(--mono); letter-spacing:.03em; color:var(--faint); margin-bottom:14px; }
.cta__quick{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; max-width:520px; margin:0 auto; }
.cta__quick .input{ flex:1 1 240px; min-width:0; max-width:340px; text-align:left; }
.cta__quick .btn{ flex:none; }
.cta__quick-note{ margin-top:14px; font:500 .82rem var(--mono); color:var(--faint); }
.cta__quick-note.is-ok{ color:var(--allow); }
.cta__quick-note.is-err{ color:var(--block); }

/* hero mini contact form — sits directly under the hero demo */
.hero__contact{ margin-top:18px; }
.hero__contact-lead{ font:500 .9rem var(--sans); color:var(--muted); margin-bottom:10px; }
.hero__contact-row{ display:flex; gap:10px; flex-wrap:wrap; }
.hero__contact-row .input{ flex:1 1 220px; min-width:0; }
.hero__contact-row .btn{ flex:none; }
.hero__contact-note{ margin-top:10px; font:500 .78rem var(--mono); color:var(--faint); }
.hero__contact-note.is-ok{ color:var(--allow); }
.hero__contact-note.is-err{ color:var(--block); }
video[data-protected]::-internal-media-controls-download-button{ display:none; }

/* ============================================================================
   IMPORTED FROM CLAUDE DESIGN · project 'Tracehold Demo' (ec6092c4)
   Signature artifacts: animated hero product demo + Tracehold loader
   ============================================================================ */

/* ============================================================================
   TRACEHOLD DEMO — mock de producto animado (reemplaza tracehold-demo.mp4)
   Pieza insignia del hero. Self-contained (CSS + JS), CSP-friendly.
   Pegar en assets/styles.css + cargar tracehold-demo.js. Markup en .html.
   Tema claro (la app), sobre fondo navy de marca.
   ============================================================================ */

.td{
  --td-ink:#16171c; --td-mut:#6b6b78; --td-faint:#9a9aa6;
  --td-line:#e8e7ee; --td-line-2:#f1f0f6; --td-paper:#ffffff; --td-panel:#faf9fe;
  --td-purple:#7b36ff; --td-purple-deep:#5b1fd6;
  --td-purple-soft:#f1ebff; --td-purple-ink:#4d1fb0;
  --td-green:#1fa855; --td-green-soft:#e6f6ed; --td-green-ink:#127a3c;
  --td-amber:#d9892b; --td-amber-soft:#fbf0df;
  --td-danger:#e0463e; --td-danger-soft:#fdecea; --td-danger-ink:#b62b25;
  --td-mono:ui-monospace,SFMono-Regular,Menlo,"SF Mono",monospace;
  --td-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-family:var(--td-sans);color:var(--td-ink);
  width:940px;max-width:100%;
}

/* ---- Ventana ------------------------------------------------------------- */
.td__win{
  background:var(--td-paper);border:1px solid var(--td-line);
  border-radius:16px;overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(8,10,40,.65), 0 8px 24px -16px rgba(8,10,40,.4);
}
.td__bar{
  height:46px;display:flex;align-items:center;gap:14px;padding:0 16px;
  background:linear-gradient(180deg,#fbfaff,#f4f2fb);border-bottom:1px solid var(--td-line);
}
.td__lights{display:flex;gap:8px}
.td__lights i{width:12px;height:12px;border-radius:50%;display:block}
.td__lights i:nth-child(1){background:#ec6a5e}
.td__lights i:nth-child(2){background:#f4be4f}
.td__lights i:nth-child(3){background:#61c554}
.td__title{font-size:13px;font-weight:600;color:var(--td-mut);display:flex;align-items:center;gap:8px}
.td__title svg{width:13px;height:16px;opacity:.85}
.td__shield{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  font:600 11.5px/1 var(--td-sans);color:var(--td-purple-ink);
  background:var(--td-purple-soft);border:1px solid #e2d6ff;
  padding:6px 11px;border-radius:999px;
}
.td__shield .dot{width:7px;height:7px;border-radius:50%;background:var(--td-green);box-shadow:0 0 0 0 rgba(31,168,85,.5);animation:td-pulse 2.4s ease-out infinite}

.td__body{display:grid;grid-template-columns:1fr 290px;height:460px}

/* ---- Chat ---------------------------------------------------------------- */
.td__chat{display:flex;flex-direction:column;border-right:1px solid var(--td-line);min-height:0}
.td__thread{flex:1;padding:24px 26px 12px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;min-height:0}
.td__row{display:flex;gap:12px;max-width:88%;opacity:0;transform:translateY(8px);animation:td-rise .5s cubic-bezier(.2,.7,.2,1) forwards}
.td__row.user{align-self:flex-end;flex-direction:row-reverse}
.td__av{width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;font:700 12px/1 var(--td-mono);color:#fff}
.td__av.ai{background:#1b1c2b}
.td__av.me{background:linear-gradient(135deg,#9a6bff,#5b1fd6)}
.td__bubble{padding:11px 14px;border-radius:13px;font-size:14.5px;line-height:1.5;border:1px solid var(--td-line)}
.td__row.ai .td__bubble{background:var(--td-panel);border-top-left-radius:4px}
.td__row.user .td__bubble{background:#13141d;color:#eef;border-color:#13141d;border-top-right-radius:4px}
.td__row.user .td__bubble .td-red{background:rgba(31,168,85,.22);color:#7df0b4;border:1px solid rgba(31,168,85,.5);border-radius:5px;padding:0 5px;font:600 12.5px/1.6 var(--td-mono)}
.td__dots{display:inline-flex;gap:4px;align-items:center;height:18px}
.td__dots i{width:6px;height:6px;border-radius:50%;background:var(--td-faint);animation:td-dot 1.1s ease-in-out infinite}
.td__dots i:nth-child(2){animation-delay:.16s}
.td__dots i:nth-child(3){animation-delay:.32s}

/* system note (block) */
.td__note{align-self:center;display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:var(--td-danger-ink);background:var(--td-danger-soft);border:1px solid #f6cfcc;padding:8px 13px;border-radius:999px;opacity:0;transform:translateY(6px);animation:td-rise .45s ease forwards}
.td__note svg{width:14px;height:14px}

/* ---- Composer ------------------------------------------------------------ */
.td__composer{position:relative;margin:0 18px 18px;border:1.5px solid var(--td-line);border-radius:14px;background:var(--td-paper);transition:border-color .3s, box-shadow .3s}
.td__composer.is-armed{border-color:#d9c8ff;box-shadow:0 0 0 4px rgba(123,54,255,.08)}
.td__composer.is-flagged{border-color:#f3c6c2;box-shadow:0 0 0 4px rgba(224,70,62,.08)}
.td__inwrap{position:relative;padding:15px 56px 6px 16px}
.td__scanwrap{position:absolute;inset:0;overflow:hidden;border-radius:13px;pointer-events:none}
.td__input{font-size:15px;line-height:1.55;min-height:24px;color:var(--td-ink);white-space:pre-wrap;word-break:break-word}
.td__input:empty::before{content:"Message your AI assistant…";color:var(--td-faint)}
.td-caret{display:inline-block;width:2px;height:1.05em;background:var(--td-purple);vertical-align:-2px;margin-left:1px;animation:td-blink 1.05s steps(1) infinite}
.td__composer.is-sending .td-caret,.td__composer.is-done .td-caret{display:none}

/* entidad detectada inline (solo resaltado; el control es el emblema fijo) */
.td-ent{position:relative;display:inline;border-radius:4px;padding:0 2px;font-family:var(--td-mono);font-size:13.5px;
  background:var(--td-danger-soft);color:var(--td-danger-ink);box-shadow:inset 0 -2px 0 0 rgba(224,70,62,.55);
  transition:background .3s,color .3s,box-shadow .3s}
.td-ent[data-k="redact"]{background:var(--td-amber-soft);color:#8a5713;box-shadow:inset 0 -2px 0 0 rgba(217,137,43,.6)}
.td-ent__text{transition:opacity .2s}
.td-ent.is-redacting .td-ent__text{opacity:.35}
.td-ent.is-redacted{background:var(--td-green-soft);color:var(--td-green-ink);box-shadow:inset 0 -2px 0 0 rgba(31,168,85,.6)}
.td-ent.is-blocked{background:var(--td-danger);color:#fff;box-shadow:inset 0 -2px 0 0 rgba(0,0,0,.18)}
.td-ent.is-blocked .td-ent__text{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.55)}

/* indicador fijo: emblema Tracehold arriba-derecha, encima del botón enviar */
.td__status{position:absolute;top:11px;right:12px;z-index:9;width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;cursor:pointer;padding:0;background:#fff;border:1.5px solid var(--td-line);
  color:var(--td-faint);transition:color .35s,border-color .35s,background .35s,box-shadow .35s}
.td__status svg{width:18px;height:23px;display:block}
.td__status .sevdot{position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;
  border:2px solid #fff;background:currentColor;transform:scale(0);transition:transform .25s cubic-bezier(.2,1.4,.4,1)}
.td__status.scanning{color:var(--td-purple);border-color:#d9c8ff;background:#faf7ff;box-shadow:0 0 0 0 rgba(123,54,255,.4);animation:td-statpulse 1.1s ease-out infinite}
.td__status.safe{color:var(--td-green);border-color:#bfe6cd;background:var(--td-green-soft)}
.td__status.redact{color:var(--td-amber);border-color:#f0d8ad;background:var(--td-amber-soft)}
.td__status.block{color:var(--td-danger);border-color:#f3c6c2;background:var(--td-danger-soft)}
.td__status.safe .sevdot,.td__status.redact .sevdot,.td__status.block .sevdot{transform:scale(1)}
.td__status.is-open{box-shadow:0 0 0 4px rgba(20,20,40,.06)}

/* tarjeta de detalle, anclada al emblema, se abre hacia arriba */
.td__statcard{position:absolute;bottom:calc(100% + 12px);right:-2px;width:290px;z-index:12;
  background:#fff;border:1px solid var(--td-line);border-radius:14px;text-align:left;
  box-shadow:0 22px 50px -18px rgba(8,10,40,.5),0 4px 12px -8px rgba(8,10,40,.3);
  padding:14px 15px 15px;opacity:0;transform:translateY(7px) scale(.96);transform-origin:calc(100% - 16px) bottom;
  pointer-events:none;transition:opacity .27s cubic-bezier(.2,.8,.25,1),transform .27s cubic-bezier(.2,.8,.25,1)}
.td__status.is-open .td__statcard{opacity:1;transform:none;pointer-events:auto}
.td__statcard::after{content:"";position:absolute;top:100%;right:16px;width:14px;height:14px;background:#fff;
  border-right:1px solid var(--td-line);border-bottom:1px solid var(--td-line);transform:translateY(-7px) rotate(45deg)}
.ec-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.ec-ic{width:26px;height:26px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center;background:var(--td-danger-soft);color:var(--td-danger)}
.td__statcard[data-k="redact"] .ec-ic{background:var(--td-amber-soft);color:var(--td-amber)}
.td__statcard[data-k="safe"] .ec-ic{background:var(--td-green-soft);color:var(--td-green-ink)}
.ec-ic svg{width:14px;height:14px}
.ec-title{font:700 14px/1.15 var(--td-sans);color:var(--td-ink);letter-spacing:-.01em}
.ec-act{margin-left:auto;font:700 9.5px/1 var(--td-sans);letter-spacing:.05em;text-transform:uppercase;padding:5px 8px;border-radius:999px;
  background:var(--td-amber-soft);color:#8a5713;white-space:nowrap}
.td__statcard[data-k="safe"] .ec-act{background:var(--td-green-soft);color:var(--td-green-ink)}
.td__statcard[data-k="block"] .ec-act{background:var(--td-danger-soft);color:var(--td-danger-ink)}
.ec-meta{font:600 10.5px/1.2 var(--td-mono);color:var(--td-mut);margin-bottom:10px;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.ec-meta b{color:var(--td-purple-ink)}.ec-meta .mdot{color:var(--td-faint)}
.ec-meta .mc{color:var(--td-green-ink)}.ec-meta .ml{color:#a06a16}
.ec-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.ec-tag{font:600 10.5px/1 var(--td-mono);padding:5px 8px;border-radius:7px;background:var(--td-panel);border:1px solid var(--td-line);color:var(--td-ink);display:inline-flex;align-items:center;gap:6px}
.ec-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sev,var(--td-danger))}
.ec-desc{font:400 12px/1.45 var(--td-sans);color:var(--td-mut);margin-bottom:11px}
.ec-bar{height:5px;border-radius:999px;background:var(--td-line-2);overflow:hidden}
.ec-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#1fa855,#3ccb74);transition:width .8s cubic-bezier(.3,.9,.3,1)}
.td__statcard[data-k="block"] .ec-bar i{background:linear-gradient(90deg,#e0463e,#f0726b)}
.td__statcard[data-k="redact"] .ec-bar i{background:linear-gradient(90deg,#d9892b,#f0b15e)}
.td__status.is-open .ec-bar i{width:var(--cw,99%)}

/* scanner sweep sobre el composer */
.td__scan{position:absolute;top:0;bottom:0;width:120px;left:-140px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(123,54,255,.18),rgba(123,54,255,.32),rgba(123,54,255,.18),transparent);
  opacity:0}
.td__scan.run{animation:td-sweep 1s cubic-bezier(.4,0,.2,1)}

/* fila de acción */
.td__act{display:flex;align-items:center;gap:10px;padding:9px 12px 12px;border-top:1px solid var(--td-line-2)}
.td__pat{display:inline-flex;align-items:center;gap:7px;font:500 11.5px/1 var(--td-sans);color:var(--td-faint)}
.td__pat svg{width:13px;height:13px}
.td__verdict{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font:600 12px/1 var(--td-sans);
  padding:7px 11px;border-radius:999px;opacity:0;transform:translateY(3px);transition:opacity .3s,transform .3s,background .3s,color .3s}
.td__verdict.show{opacity:1;transform:translateY(0)}
.td__verdict .vd{width:7px;height:7px;border-radius:50%}
.td__verdict.safe{background:var(--td-green-soft);color:var(--td-green-ink)} .td__verdict.safe .vd{background:var(--td-green)}
.td__verdict.redact{background:var(--td-amber-soft);color:#8a5713} .td__verdict.redact .vd{background:var(--td-amber)}
.td__verdict.block{background:var(--td-danger-soft);color:var(--td-danger-ink)} .td__verdict.block .vd{background:var(--td-danger)}
.td__send{width:34px;height:34px;border-radius:10px;border:0;background:var(--td-purple);color:#fff;display:grid;place-items:center;cursor:default;transition:transform .2s,background .3s,opacity .3s}
.td__send svg{width:16px;height:16px}
.td__send.block{background:#e0463e}
.td__send.is-push{transform:scale(.86)}

/* ---- Rail ---------------------------------------------------------------- */
.td__rail{background:var(--td-panel);padding:20px 18px;display:flex;flex-direction:column;gap:18px}
.td__guard{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--td-line)}
.td__emblem{width:34px;height:43px;flex:0 0 auto}
.td__guard b{font-size:13.5px;display:block}
.td__guard span{font-size:11.5px;color:var(--td-mut);display:block;margin-top:2px}
.td__sectit{font:600 10.5px/1 var(--td-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--td-faint)}

.td__stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.td__stat{background:var(--td-paper);border:1px solid var(--td-line);border-radius:11px;padding:11px 8px;text-align:center}
.td__stat b{display:block;font:700 21px/1 var(--td-sans);color:var(--td-ink);font-variant-numeric:tabular-nums}
.td__stat b.bump{animation:td-bump .5s ease}
.td__stat span{display:block;font-size:10px;color:var(--td-mut);margin-top:5px;line-height:1.25}

.td__log{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.td__ev{display:flex;align-items:flex-start;gap:9px;padding:8px 4px;border-bottom:1px solid var(--td-line-2);opacity:0;transform:translateX(6px);animation:td-evin .4s ease forwards}
.td__ev .ed{width:7px;height:7px;border-radius:50%;margin-top:5px;flex:0 0 auto}
.td__ev.safe .ed{background:var(--td-green)} .td__ev.redact .ed{background:var(--td-amber)} .td__ev.block .ed{background:var(--td-danger)}
.td__ev .et{font-size:12px;line-height:1.35;color:var(--td-ink)}
.td__ev .es{font-size:11px;color:var(--td-mut);margin-top:1px}
.td__ev .etime{margin-left:auto;font:500 10.5px/1 var(--td-mono);color:var(--td-faint);white-space:nowrap}

/* --- Énfasis: motor NER + LLM en tiempo real ------------------------------ */
.td__pat .bz{display:none;align-items:center;gap:7px;color:var(--td-purple-ink);font-weight:600}
.td__pat .bzdot{width:7px;height:7px;border-radius:50%;background:var(--td-purple);animation:td-pulse 1s ease-out infinite}
.td__pat.is-busy>svg,.td__pat.is-busy .lbl{display:none}
.td__pat.is-busy .bz{display:inline-flex}

.td__rgrp{margin-left:auto;display:flex;align-items:center;gap:9px}
.td__verdict{margin-left:0}
.td__lat{font:600 11px/1 var(--td-mono);color:var(--td-mut);background:var(--td-line-2);padding:6px 9px;border-radius:999px;opacity:0;transform:translateY(3px);transition:opacity .3s,transform .3s;display:inline-flex;align-items:center;gap:6px}
.td__lat.show{opacity:1;transform:none}
.td__lat::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--td-green)}

.td__metric{margin-top:11px;padding-top:12px;border-top:1px solid var(--td-line);font:600 11px/1.4 var(--td-mono);color:var(--td-mut);display:flex;align-items:center;justify-content:center;gap:8px}
.td__metric b{color:var(--td-green-ink)}
.td__metric .sep{color:var(--td-faint)}

/* ---- Keyframes ----------------------------------------------------------- */
@keyframes td-pulse{0%{box-shadow:0 0 0 0 rgba(31,168,85,.5)}70%{box-shadow:0 0 0 6px rgba(31,168,85,0)}100%{box-shadow:0 0 0 0 rgba(31,168,85,0)}}
@keyframes td-rise{to{opacity:1;transform:translateY(0)}}
@keyframes td-evin{to{opacity:1;transform:translateX(0)}}
@keyframes td-blink{0%,50%{opacity:1}51%,100%{opacity:0}}
@keyframes td-sweep{0%{left:-140px;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
@keyframes td-dot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
@keyframes td-bump{0%{transform:scale(1)}40%{transform:scale(1.28);color:var(--td-purple)}100%{transform:scale(1)}}
@keyframes td-statpulse{0%{box-shadow:0 0 0 0 rgba(123,54,255,.36)}70%{box-shadow:0 0 0 7px rgba(123,54,255,0)}100%{box-shadow:0 0 0 0 rgba(123,54,255,0)}}

/* ---- Reduced motion: estado resuelto estático ---------------------------- */
@media (prefers-reduced-motion: reduce){
  .td *{animation:none !important;transition:none !important}
  .td__row,.td__note,.td__verdict,.td__ev{opacity:1;transform:none}
  .td-caret,.td__scan{display:none}
  .td__statcard{display:none}
}


/* ============================================================================
   TRACEHOLD LOADER v2 — animación insignia reutilizable
   El emblema se traza solo, se rellena, se inspecciona y se asienta. En bucle.
   --------------------------------------------------------------------------
   Uso:
     <link rel="stylesheet" href="assets/tracehold-loader.css">
     ...markup en tracehold-loader.html...  (clases .thld-loader__*)
   Tamaños:  .thld-loader--xl (carga de página)
             .thld-loader--md (inline / estados vacíos)
             .thld-loader--sm (botones / spinner)
   Variables: --lo-size (ancho del emblema)  ·  --lo-dur (duración del bucle)
   ============================================================================ */

.thld-loader{
  --lo-size:124px;
  --lo-dur:3.4s;
  --lo-stroke:#c4b5fd;
  display:inline-flex;flex-direction:column;align-items:center;
  gap:calc(var(--lo-size) * .18);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
.thld-loader--xl{--lo-size:124px}
.thld-loader--md{--lo-size:64px;--lo-dur:3s}
.thld-loader--sm{--lo-size:30px;--lo-dur:2.4s}

/* --- Escenario (emblema + glow) -------------------------------------------- */
.thld-loader__stage{
  position:relative;width:var(--lo-size);
  height:calc(var(--lo-size) * 1.2657);   /* ratio 432.89/342.03 */
  display:grid;place-items:center;
}
.thld-loader__glow{
  position:absolute;inset:-34%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(123,54,255,.5), rgba(123,54,255,0) 66%);
  filter:blur(6px);opacity:0;
  animation:thld-glow var(--lo-dur) ease-in-out infinite;
}
.thld-loader__emblem{
  position:relative;width:100%;height:100%;overflow:visible;
  transform-origin:50% 50%;
  animation:thld-settle var(--lo-dur) cubic-bezier(.4,0,.2,1) infinite;
}

/* --- Relleno (degradado de marca) + barrido + línea de escaneo ------------- */
.thld-loader__fill{opacity:0;animation:thld-fill var(--lo-dur) ease infinite}
.thld-loader__sweep{mix-blend-mode:screen}        /* el degradado se mueve vía SMIL en el SVG */
.thld-loader__scan{
  transform-box:fill-box;transform-origin:center;opacity:0;
  animation:thld-scan var(--lo-dur) ease-in-out infinite;
}

/* --- Trazo de la silueta (contorno 3372 · F 318) -------------------------- */
.thld-loader__stroke polygon{
  fill:none;stroke:var(--lo-stroke);stroke-width:6;
  stroke-linejoin:round;stroke-linecap:round;
}
.thld-lo-main{stroke-dasharray:3372;stroke-dashoffset:3372;animation:thld-draw-main var(--lo-dur) ease-in-out infinite}
.thld-lo-f   {stroke-dasharray:318; stroke-dashoffset:318; animation:thld-draw-f   var(--lo-dur) ease-in-out infinite}

/* --- Punta del trazador (sigue el contorno) -------------------------------- */
.thld-loader__tip{
  fill:#fff;filter:drop-shadow(0 0 5px rgba(214,198,255,.95));
  offset-path:path('M342.03 87.07 L176.1 182.67 L176.1 432.89 L0 331.22 L0 110.42 L191.23 0 L207.08 9.17 L45.54 102.24 L40.84 104.96 L40.84 188.17 L66.75 203.34 L67.63 121.04 L234.4 24.95 L252.05 35.11 L84.67 131.59 L84.67 329.38 L111.99 345.32 L111.99 147.37 L279.37 50.89 L297.02 61.09 L130.36 157.11 L130.36 354.95 L157.68 370.84 L157.68 172.89 L324.38 76.87 Z');
  offset-rotate:0deg;offset-distance:0%;opacity:0;
  animation:thld-tip var(--lo-dur) ease-in-out infinite;
}

/* --- Wordmark + barra de progreso (solo xl) -------------------------------- */
.thld-loader__word{
  font:700 calc(var(--lo-size) * .12)/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.42em;text-transform:uppercase;color:rgba(255,255,255,.62);
  padding-left:.42em;opacity:0;animation:thld-word var(--lo-dur) ease infinite;
}
.thld-loader__bar{
  width:calc(var(--lo-size) * 1.15);height:2px;border-radius:2px;
  background:rgba(255,255,255,.12);overflow:hidden;
}
.thld-loader__bar > i{
  display:block;height:100%;width:100%;transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg,#7b36ff,#b89bff);
  animation:thld-bar var(--lo-dur) ease infinite;
}
.thld-loader--md .thld-loader__word,.thld-loader--md .thld-loader__bar,
.thld-loader--sm .thld-loader__word,.thld-loader--sm .thld-loader__bar{display:none}

/* === Keyframes (porcentajes sobre --lo-dur) ================================ */
@keyframes thld-draw-main{0%{stroke-dashoffset:3372;opacity:1}38%{stroke-dashoffset:0;opacity:1}82%{opacity:1}90%{opacity:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes thld-draw-f   {0%,34%{stroke-dashoffset:318;opacity:1}50%{stroke-dashoffset:0;opacity:1}82%{opacity:1}90%{opacity:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes thld-fill     {0%,46%{opacity:0}62%{opacity:1}86%{opacity:1}100%{opacity:0}}
@keyframes thld-tip      {0%{offset-distance:0%;opacity:0}3%{opacity:1}38%{offset-distance:100%;opacity:1}45%{offset-distance:100%;opacity:0}100%{offset-distance:100%;opacity:0}}
@keyframes thld-scan     {0%,54%{opacity:0;transform:translateY(-205px)}58%{opacity:.85}72%{opacity:.85}77%{opacity:0;transform:translateY(205px)}100%{opacity:0;transform:translateY(205px)}}
@keyframes thld-glow     {0%,42%{opacity:0}66%{opacity:.95}84%{opacity:.55}100%{opacity:0}}
@keyframes thld-settle   {0%,60%{transform:scale(1)}68%{transform:scale(1.05)}76%{transform:scale(.99)}82%,100%{transform:scale(1)}}
@keyframes thld-word     {0%,50%{opacity:0;letter-spacing:.7em}66%{opacity:.62;letter-spacing:.42em}86%{opacity:.62;letter-spacing:.42em}100%{opacity:0;letter-spacing:.7em}}
@keyframes thld-bar      {0%{transform:scaleX(0)}82%{transform:scaleX(1)}90%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}

/* === Reduced motion: estado final estático (emblema resuelto) ============= */
@media (prefers-reduced-motion: reduce){
  .thld-loader__glow{opacity:.5;animation:none}
  .thld-loader__emblem{animation:none;transform:none}
  .thld-loader__fill{opacity:1;animation:none}
  .thld-lo-main,.thld-lo-f{animation:none;stroke-dashoffset:0}
  .thld-loader__tip,.thld-loader__scan{display:none}
  .thld-loader__word{opacity:.62;letter-spacing:.42em;animation:none}
  .thld-loader__bar > i{transform:scaleX(1);animation:none}
}

/* ----- Trust strip ----- */
.trust-strip{ text-align:center; }
.trust-partners{ display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:center; margin:20px 0 32px; }
.trust-partner{ font:600 .72rem var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding:6px 16px; border:1px solid var(--rule-2); border-radius:var(--radius-sm); }
.trust-quote{ max-width:620px; margin:0 auto; text-align:left; padding:20px 20px 20px 24px; border-left:3px solid var(--accent-bd); background:var(--paper); }
.trust-quote p{ font:500 1rem/1.6 var(--sans); color:var(--ink); }
.trust-quote cite{ display:block; margin-top:10px; font:600 .72rem var(--mono); color:var(--faint); text-transform:uppercase; letter-spacing:.08em; font-style:normal; }