/* ═══════════════════════════════════════════════════════════════════════
   melechashir.com — LegalShield pages
   Palette + layering lifted from the Melech Ashir brand system
   (melech-ashir-chris/tailwind.config.ts + globals.css) so this reads as the
   same property, not a bolted-on microsite.

   Two committed variants, split-tested via ab.js:
     [data-variant="B"]  Midnight Counsel — dark, grain, drifting gold light
     [data-variant="C"]  The Shield       — structural, gold as solid plane
   Each variant is a deliberate single visual world; that commitment is the
   thing being measured, so neither adapts to light/dark.
   ═════════════════════════════════════════════════════════════════════ */

:root{
  /* brand tokens — do not localize these per-variant */
  --ink:#0e0f12; --ink-soft:#16181d; --ink-line:#24272e;
  --gold:#c9a24b; --gold-soft:#e2c477; --gold-deep:#9a7a34;
  --cream:#f4efe4; --cream-dim:#cfc8b8; --muted:#8f8a7e;
  --max:1080px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--cream);
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:clip;position:relative;
}
/* faint grain over the whole page — the brand's signature texture */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background-image:var(--grain);opacity:.5;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px;position:relative;z-index:2}
a{color:var(--gold-soft)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ── header ─────────────────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--ink-line);
  background:rgba(14,15,18,.86);backdrop-filter:blur(10px)}
header .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding-block:15px;flex-wrap:wrap}
.logo{font:500 20px/1 Georgia,"Times New Roman",serif;letter-spacing:-.03em;
  text-decoration:none;color:var(--cream)}
.logo em{font-style:italic;color:var(--gold)}
nav{display:flex;gap:20px;flex-wrap:wrap}
nav a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:600}
nav a:hover,nav a[aria-current=page]{color:var(--cream)}

/* ── shared type scale ──────────────────────────────────────────────── */
.eyebrow{font:600 10.5px/1 ui-monospace,"SF Mono",Menlo,monospace;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 20px}
h1{margin:0 0 22px;text-wrap:balance}
.lede{color:var(--cream-dim);margin:0 0 18px}
h2{margin:0 0 12px;text-wrap:balance}
.sub{color:var(--muted);margin:0 0 26px;max-width:62ch}
section{padding:46px 0;border-top:1px solid var(--ink-line);position:relative;z-index:2}
.hr{height:1px;margin:44px 0 32px;
  background:linear-gradient(90deg,transparent,var(--ink-line),transparent)}

/* ── buttons ────────────────────────────────────────────────────────── */
.btn{display:inline-block;text-decoration:none;font-weight:700;cursor:pointer;
  border:1px solid transparent;transition:transform .12s ease,filter .12s ease}
.btn:hover{transform:translateY(-1px);filter:brightness(1.07)}
.btn-primary{background:var(--gold);color:#14150f}
.btn-ghost{background:transparent;color:var(--cream);border-color:var(--ink-line)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.note{font-size:13.5px;color:var(--muted);margin-top:14px}

/* ── cards / lists ─────────────────────────────────────────────────── */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));margin:32px 0}
.card{border:1px solid var(--ink-line);text-decoration:none;color:inherit;display:block;
  padding:22px;background:rgba(22,24,29,.6)}
.card:hover{border-color:var(--gold-deep)}
.card .k{font:600 9.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:11px}
.card h3{margin:0 0 7px}
.card p{margin:0;color:var(--muted);font-size:14.4px;line-height:1.55}
.pains{margin:26px 0;padding:0;list-style:none;display:grid;gap:0}
.pains li{padding:15px 0 15px 24px;border-top:1px solid var(--ink-line);
  position:relative;font-size:15.6px}
.pains li::before{content:"";position:absolute;left:0;top:23px;width:11px;height:2px;
  background:var(--gold)}
.pains li b{font-weight:700}

/* ── form ───────────────────────────────────────────────────────────── */
.form-wrap{border:1px solid var(--ink-line);padding:26px;max-width:560px;
  background:rgba(22,24,29,.6)}
label{display:block;font-weight:650;font-size:13.6px;margin:16px 0 6px;color:var(--cream-dim)}
label .opt{font-weight:400;color:var(--muted)}
input,select,textarea{width:100%;padding:12px 14px;border:1px solid var(--ink-line);
  background:var(--ink);color:var(--cream);font:inherit;font-size:15.5px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:1px;
  border-color:transparent}
textarea{min-height:92px;resize:vertical}
.form-wrap .btn{width:100%;margin-top:22px;text-align:center;padding:14px 26px}
.legal{font-size:12.4px;color:var(--muted);margin-top:14px;line-height:1.55}
.msg{margin-top:14px;padding:12px 14px;font-size:14.5px;display:none}
.msg.ok{display:block;background:rgba(201,162,75,.12);border:1px solid var(--gold)}
.msg.err{display:block;background:rgba(224,90,90,.12);border:1px solid #e05a5a}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── compliance + footer ────────────────────────────────────────────── */
.disclosure{border:1px solid var(--ink-line);border-left:3px solid var(--gold);
  padding:15px 18px;font-size:12.9px;color:var(--muted);margin:30px 0;
  background:rgba(22,24,29,.5);line-height:1.6}
footer{border-top:1px solid var(--ink-line);margin-top:44px;padding:32px 0 54px;
  color:var(--muted);font-size:13.3px;position:relative;z-index:2}
footer p{margin:0 0 10px;max-width:76ch}

/* ═══ VARIANT B — MIDNIGHT COUNSEL ══════════════════════════════════
   Serif display, drifting gold light, glass cards, staggered rise. */
[data-variant="B"] .hero{padding:70px 0 44px;position:relative}
[data-variant="B"] .glow,[data-variant="B"] .glow2{
  position:absolute;border-radius:50%;pointer-events:none;z-index:0}
[data-variant="B"] .glow{left:44%;top:-34%;width:62vh;height:62vh;
  background:rgba(201,162,75,.16);filter:blur(115px);animation:drift 18s ease-in-out infinite}
[data-variant="B"] .glow2{right:-8%;bottom:-26%;width:38vh;height:38vh;
  background:rgba(201,162,75,.10);filter:blur(96px)}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-4%,3%)}}
[data-variant="B"] h1{font:500 clamp(33px,6.2vw,64px)/.98 Georgia,serif;letter-spacing:-.04em;max-width:19ch}
[data-variant="B"] h1 em{font-style:italic;
  background:linear-gradient(100deg,var(--gold),var(--gold-soft),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent}
[data-variant="B"] .lede{font-size:17.5px;max-width:52ch}
[data-variant="B"] h2{font:500 clamp(23px,3.6vw,32px)/1.15 Georgia,serif;letter-spacing:-.025em}
[data-variant="B"] .card{border-radius:16px;backdrop-filter:blur(6px)}
[data-variant="B"] .card h3{font:500 18.5px/1.25 Georgia,serif;letter-spacing:-.015em}
[data-variant="B"] .btn{border-radius:999px;padding:13px 28px;font-size:15px}
[data-variant="B"] .form-wrap{border-radius:16px;backdrop-filter:blur(6px)}
[data-variant="B"] input,[data-variant="B"] select,[data-variant="B"] textarea{border-radius:10px}
[data-variant="B"] .disclosure,[data-variant="B"] .msg{border-radius:10px}
[data-variant="B"] .rise{animation:rise .7s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ═══ VARIANT C — THE SHIELD ════════════════════════════════════════
   Heavy sans, hard edges, gold as a solid plane. No glow, no radius. */
[data-variant="C"]{--ink:#0a0b0d}
[data-variant="C"] body,[data-variant="C"]{background:#0a0b0d}
[data-variant="C"] .hero{padding:60px 0 40px}
[data-variant="C"] .eyebrow{display:inline-block;background:var(--gold);color:#14150f;
  padding:7px 12px;letter-spacing:.16em;font-family:system-ui;font-weight:700;font-size:10.5px}
[data-variant="C"] h1{font:800 clamp(32px,6vw,60px)/.94 system-ui,-apple-system,sans-serif;
  letter-spacing:-.042em;max-width:20ch}
[data-variant="C"] h1 em{font-style:normal;color:var(--gold)}
[data-variant="C"] .lede{font-size:16.8px;max-width:48ch}
[data-variant="C"] h2{font:800 clamp(21px,3.2vw,29px)/1.1 system-ui,sans-serif;letter-spacing:-.035em}
[data-variant="C"] .btn{padding:14px 28px;font-size:15px;font-weight:700}
[data-variant="C"] .btn-ghost{box-shadow:inset 0 0 0 2px #2b2f36;border-color:transparent}
[data-variant="C"] .card{background:#101215;box-shadow:inset -1px 0 0 #23262c}
[data-variant="C"] .card h3{font:800 17.5px/1.2 system-ui,sans-serif;letter-spacing:-.02em}
[data-variant="C"] .card .k{font-family:system-ui;font-weight:700}
[data-variant="C"] .form-wrap{background:#101215}
[data-variant="C"] section{border-top-width:2px;border-top-color:var(--gold-deep)}
/* an evidence strip — numbers treated as proof, only rendered in C */
[data-variant="C"] .strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  border-top:2px solid var(--gold);margin:34px 0 0}
[data-variant="C"] .strip .cell{padding:24px 20px;background:#101215;
  box-shadow:inset -1px 0 0 #23262c}
[data-variant="C"] .strip b{display:block;font:800 26px/1 system-ui;letter-spacing:-.03em;
  color:var(--gold);margin-bottom:6px;font-variant-numeric:tabular-nums}
[data-variant="C"] .strip span{font:600 10.6px/1.45 system-ui;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
[data-variant="B"] .strip{display:none}

@media (prefers-reduced-motion: reduce){
  [data-variant="B"] .glow{animation:none}
  .rise{animation:none!important}
  .btn:hover{transform:none}
}
@media (max-width:640px){
  nav{gap:14px} nav a{font-size:13px}
  .hero{padding-top:44px!important}
}