/* ============================================================
   EpochAgent — EDITORIAL LIGHT theme override.
   Loaded LAST. Flips the dark/orange system to warm paper +
   heavy serif + violet accent. Recolors nothing structural —
   only tokens and the handful of hard-coded dark treatments.
   ============================================================ */

:root{
  /* surfaces — warm paper */
  --ink:#f4f0e7;          /* page background */
  --panel:#efe9db;        /* card */
  --panel-deep:#eae3d3;   /* deeper card */
  --panel-hi:#e4dcc9;     /* hover / featured */
  /* hairlines — dark on light */
  --hair:rgba(34,27,18,0.13);
  --hair-bold:rgba(34,27,18,0.24);
  /* ink — warm near-black text */
  --paper:#1b1712;
  --paper-dim:rgba(27,23,18,0.74);
  --mute:rgba(27,23,18,0.52);
  --mute-dim:rgba(27,23,18,0.34);
  /* accent — violet */
  --accent:#6a3df0;
  --accent-soft:rgba(106,61,240,0.10);
  --accent-line:rgba(106,61,240,0.32);
  /* semantic */
  --verify:#1f9d61;
  --red:#c0392b;
  /* type — editorial serif + mono labels */
  --sans:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",monospace;
}

/* paper warmth under everything */
body{ background:
  radial-gradient(120% 70% at 100% -5%, rgba(106,61,240,0.05), transparent 55%),
  var(--ink); }

/* ── TYPE ────────────────────────────────────────────────── */
.hero h1{ font-weight:800; letter-spacing:-1px; font-size:clamp(33px,4.2vw,62px); line-height:1.05; max-width:15ch; }
.hero h1 .ac{
  background:linear-gradient(100deg,#5a2fe0 0%,#7d5bf4 55%,#a896f7 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.sec-head h2,.enforce h2,.cake-head h2,.close-sec h2,.reveal h2{ font-weight:800; letter-spacing:-0.9px; }
.layer-body h3{ font-weight:700; letter-spacing:-0.4px; }
.how-t,.foot h3{ font-weight:700; letter-spacing:-0.4px; }
.price-amt .pa{ font-weight:700; }
/* brand stays mono, like a masthead slug */
.brand b{ font-family:var(--mono); font-weight:700; font-size:15px; letter-spacing:1.4px; text-transform:uppercase; }
/* italic "in plain English" lead-in */
.lede-lead{ font-style:italic; color:var(--mute); font-weight:500; }

/* ── NAV ─────────────────────────────────────────────────── */
.nav{ background:rgba(244,240,231,0.82); border-bottom:1px solid var(--hair); }

/* ── HEADLIGHT glow → violet, calm ───────────────────────── */
.headlight::before{ background:radial-gradient(circle,rgba(106,61,240,0.10) 0,transparent 60%); }
.headlight::after{ background:radial-gradient(circle,rgba(63,79,196,0.06) 0,transparent 60%); }

/* ── BUTTONS — primary = solid near-black, ghost = hairline ─ */
.btn.primary,.run-btn,.nav-cta,.price-btn.primary,.vbtn{
  background:#1b1712; color:#f6f2ea; border:1px solid #1b1712;
}
.btn.primary:hover,.nav-cta:hover{ background:#332b20; filter:none; }
.run-btn:hover:not(:disabled),.vbtn:hover:not(:disabled),.price-btn.primary:hover{ background:#332b20; filter:none; transform:translateY(-1px); }
.run-btn.busy{ background:var(--panel-hi); color:var(--accent); border-color:var(--hair-bold); }
.btn.ghost{ border:1px solid var(--hair-bold); color:var(--paper); }
.btn.ghost:hover{ border-color:var(--accent); color:var(--accent); }
.price-flag{ color:#f6f2ea; }
.price-btn.ghost{ color:var(--paper); border-color:var(--hair-bold); }
.price-btn.ghost:hover{ background:var(--panel-hi); border-color:var(--accent); color:var(--accent); }

/* ── CAKE / PIPELINE on light ────────────────────────────── */
.cake{ background:var(--panel-deep); border-color:var(--hair-bold); }
.layer{ border-bottom:1px solid var(--hair);
  box-shadow:inset 0 -5px 0 -1px color-mix(in srgb,var(--lc) 24%,#ffffff); }
.layer:last-child{ border-bottom:none; }
.layer-no{ border-right:1px solid var(--hair); }
.layer-spec{ border-left:1px solid var(--hair); background:var(--panel-deep); }
.layer.base{
  border-top:2px solid color-mix(in srgb,var(--lc) 50%,#ffffff);
  background:linear-gradient(180deg,color-mix(in srgb,var(--lc) 12%,var(--panel-deep)),var(--panel-deep));
  box-shadow:inset 0 -8px 0 -1px color-mix(in srgb,var(--lc) 26%,#ffffff);
}
.cake.live .layer.is-active{ background:var(--panel-hi); }
.cake-plate{ background:linear-gradient(180deg,var(--panel-hi),transparent); }

/* ── INPUTS — inset near-white fields ────────────────────── */
.demo-field,.vfield{ background:#fffdf8; color:var(--paper); border:1px solid var(--hair-bold); }
.demo-field:focus,.vfield:focus{ border-color:var(--accent-line); }
.demo-input{ background:var(--panel-deep); }
.how-code{ background:#fffdf8; border:1px solid var(--hair-bold); }
.preset.active{ box-shadow:inset 0 -2px 0 var(--accent); }

/* ── REVEAL band — soft pull-quote panel, not black ──────── */
.reveal{
  background:linear-gradient(180deg,var(--panel-deep),var(--panel));
  border-top:1px solid var(--hair-bold); border-bottom:1px solid var(--hair-bold);
}
.reveal h2{ letter-spacing:-1px; }

/* ── FOOT ────────────────────────────────────────────────── */
.foot{ background:var(--ink); }

/* keep the green checks crisp on cream */
.pillar .ck svg path,.price-points .pp-c svg path{ stroke:#062b18; }

/* preset tabs — serif title needs breathing room from mono sub */
.preset .pt{ line-height:1.2; }
.preset .ps{ margin-top:5px; }

/* ── SIGNATURE TYPEWRITER HEADLINE ───────────────────────── */
.tw{ position:relative; cursor:pointer; }
.tw-ghost{ visibility:hidden; }
.tw-live{ position:absolute; inset:0; }
.tw-blk{ color:var(--paper); }
.tw-vio{
  background:linear-gradient(100deg,#5a2fe0 0%,#7d5bf4 55%,#a896f7 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
/* caret */
.tw-caret{ display:inline-block; width:0.055em; height:0.9em; background:currentColor;
  margin-left:0.04em; vertical-align:-0.04em; animation:tw-blink 1.05s steps(1) infinite; }
.tw-vio + .tw-caret{ background:#7d5bf4; }
@keyframes tw-blink{ 50%{ opacity:0; } }

/* the sealed word + its overlays */
.tw-seal{ position:relative; display:inline-block; vertical-align:baseline; }
.tw-seal-txt{ color:var(--paper); }

/* cursive signature — bold, light halo so it reads on any tone */
.tw-sig{ position:absolute; left:-6%; top:0; width:120%; height:120%; overflow:visible; pointer-events:none;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.75)) drop-shadow(0 0 2px rgba(255,255,255,.55)); }
.tw-sig path{ fill:none; stroke:#241a6e; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1100; stroke-dashoffset:1100; opacity:0; }
.tw.sealing .tw-sig .tw-sig-main{ opacity:1; animation:tw-draw 900ms cubic-bezier(.6,.05,.25,1) forwards; }
.tw.sealing .tw-sig .tw-sig-line{ opacity:1; animation:tw-draw 520ms 720ms ease-out forwards; }
@keyframes tw-draw{ to{ stroke-dashoffset:0; } }

/* watermark stamp — upper-right of the word, clearly visible */
.tw-wm{ position:absolute; left:92%; top:-8%; width:0.9em; height:0.9em;
  transform:translate(-50%,0) rotate(-28deg) scale(.3); opacity:0; pointer-events:none;
  filter:drop-shadow(0 0 1px rgba(255,255,255,.85)); }
.tw-wm svg{ width:100%; height:100%; }
.tw-wm-ring,.tw-wm-ring2{ fill:none; stroke:var(--accent); }
.tw-wm-ring{ stroke-width:2.4; stroke-dasharray:5 4; }
.tw-wm-ring2{ stroke-width:1.4; opacity:.75; }
.tw-wm-check{ fill:none; stroke:var(--accent); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
.tw.sealing .tw-wm{ animation:tw-stamp 520ms 520ms cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes tw-stamp{
  from{ opacity:0; transform:translate(-50%,0) rotate(-32deg) scale(.3); }
  55%{ opacity:1; }
  to{ opacity:.95; transform:translate(-50%,0) rotate(-11deg) scale(1); }
}
/* during sealing the word fades back so the mark reads over it */
.tw.sealing .tw-seal-txt{ animation:tw-fade 560ms 220ms ease forwards; }
@keyframes tw-fade{ to{ color:rgba(40,30,72,0.20); } }

/* dissolve the whole sealed group, then the rest types on */
.tw.dissolve .tw-seal{ animation:tw-dissolve 660ms ease forwards; }
@keyframes tw-dissolve{
  0%{ opacity:1; filter:blur(0); transform:translateY(0) scale(1); }
  100%{ opacity:0; filter:blur(8px); transform:translateY(-14px) scale(1.07); letter-spacing:.16em; }
}
@media (prefers-reduced-motion:reduce){
  .tw{ cursor:default; }
  .tw-caret{ display:none; }
}