/* zalladin.com
   Direction adapted from the reference page Sudhir supplied. Structure and motion
   kept; three things changed and every one of them was measured, not judged:
     1. The reference display face is on the banned list. Newsreader replaces it,
        variable with an optical-size axis, so the swap keeps the display weight range.
     2. Seven colour pairs failed WCAG. Values below carry their measured ratio,
        composited to the first opaque layer by build/contrast.py.
     3. Opacity was being used as a styling dial on text. It is now used only on
        decorative strokes; text gets a solid colour. */

:root{
  --paper:#F2EEE3; --paper-hi:#FAF7EF; --ink:#191512;
  --pine:#123528; --pine-deep:#0C261D; --lime:#C9F16B;

  /* clay: two values, because one could not serve both jobs.
     #C94F2B measured 3.91:1 on paper -- fine as a stroke, illegal as text. */
  --clay:#B0401C;        /* text + focus ring. 5.04:1 on paper, 5.45:1 on paper-hi */
  --clay-stroke:#C94F2B; /* decorative strokes only, never text */

  --line:rgba(25,21,18,.16);        /* decorative rules, 1.40:1 -- not a control edge */
  --line-p:rgba(242,238,227,.16);
  --edge:#6B625B;                   /* control borders on paper, 5.14:1 */
  --edge-p:#8C948F;                 /* control borders on pine, 5.15:1 */
  --track:#6E7A73;                  /* range track on pine-deep, 3.58:1 */

  --mut:rgba(25,21,18,.62);         /* 4.81:1 on paper, 4.95:1 on paper-hi */
  --mut-p:rgba(242,238,227,.62);    /* 6.10:1 on pine-deep, 5.42:1 on pine */

  --e-out:cubic-bezier(.23,1,.32,1);
  --e-io:cubic-bezier(.77,0,.175,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;color-scheme:light;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 16px/1.6 "Instrument Sans",ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:.05;
  background-image: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.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
::selection{background:var(--lime);color:var(--ink)}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:2px}

h1,h2,h3,.serif{font-family:"Newsreader",Georgia,serif;font-variation-settings:"opsz" 42;line-height:1.06;letter-spacing:-.012em;font-weight:500;text-wrap:balance}
p{text-wrap:pretty}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:20px}
@media(min-width:760px){.wrap{padding-inline:28px}}
.kicker{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);display:inline-flex;align-items:center;gap:10px}
.kicker::before{content:"";width:22px;height:1px;background:currentColor;flex:none}
section{padding-block:80px}
@media(min-width:900px){section{padding-block:120px}}

.skip{position:absolute;left:16px;top:16px;transform:translateY(-200%);background:var(--lime);color:var(--ink);padding:10px 16px;border-radius:8px;font-weight:600;z-index:3000;text-decoration:none;transition:transform 160ms var(--e-out)}
.skip:focus{transform:translateY(0)}

/* reveal -- visible without JS */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .9s var(--e-out)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border-radius:999px;background:var(--ink);color:var(--paper);font:500 15px/1 "Instrument Sans",sans-serif;text-decoration:none;transition:background-color .25s ease,transform .25s var(--e-out),border-color .25s ease;white-space:nowrap}
.btn svg{width:16px;height:16px;transition:transform .25s var(--e-out);flex:none}
.btn:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){
  .btn:hover{background:var(--pine);transform:translateY(-2px)}
  .btn:hover svg{transform:translateX(4px)}
  .btn.lime:hover{background:#DCFF8A}
  .btn.ghost:hover{border-color:var(--paper);background:rgba(242,238,227,.08)}
}
.btn.lime{background:var(--lime);color:var(--ink);border-color:var(--ink)}
.btn.ghost{background:transparent;color:var(--paper);border:1px solid var(--edge-p)}
.btn.outline{background:transparent;color:var(--ink);border:1px solid var(--edge)}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:900;transition:background-color .3s ease,border-color .3s ease}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;gap:16px}
header.scrolled{background:rgba(242,238,227,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.logo-mark{width:34px;height:34px;border-radius:10px;background:var(--pine-deep);display:grid;place-items:center;flex:none}
.logo-mark svg{width:16px;height:16px;fill:var(--lime)}
.logo b{font-family:"Newsreader",Georgia,serif;font-size:19px;font-weight:600;letter-spacing:-.01em}
nav.main{display:none;gap:28px}
@media(min-width:1080px){nav.main{display:flex}}
nav.main a{text-decoration:none;font-size:15px;font-weight:500;color:var(--mut);transition:color .2s ease}
@media(hover:hover) and (pointer:fine){nav.main a:hover{color:var(--ink)}}
nav.main a[aria-current="page"]{color:var(--ink)}
.hdr-cta{display:flex;align-items:center;gap:12px}
.hdr-cta .btn{display:none;padding:12px 20px;font-size:14px}
@media(min-width:1080px){.hdr-cta .btn{display:inline-flex}}
#menuBtn{display:grid;width:44px;height:44px;place-items:center;border:1px solid var(--edge);border-radius:999px}
@media(min-width:1080px){#menuBtn{display:none}}
#menuBtn svg{width:22px;height:22px;stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round}
#menuBtn span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

#mobileNav{position:fixed;inset:0;background:var(--pine-deep);z-index:950;display:flex;flex-direction:column;justify-content:center;padding:40px 24px;opacity:0;visibility:hidden;transition:opacity .35s var(--e-out),visibility .35s}
#mobileNav.open{opacity:1;visibility:visible}
#mobileNav a{font-family:"Newsreader",Georgia,serif;font-size:32px;line-height:1.15;color:var(--paper);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--line-p);opacity:0;transform:translateY(16px);transition:opacity .5s var(--e-out),transform .5s var(--e-out)}
#mobileNav.open a{opacity:1;transform:none}
#mobileNav.open a:nth-child(2){transition-delay:.05s}#mobileNav.open a:nth-child(3){transition-delay:.1s}
#mobileNav.open a:nth-child(4){transition-delay:.15s}#mobileNav.open a:nth-child(5){transition-delay:.2s}
#mobileNav.open a:nth-child(6){transition-delay:.25s}#mobileNav.open a:nth-child(7){transition-delay:.3s}
#mobileNav .mono{color:var(--lime);margin-bottom:18px}
#mClose{position:absolute;top:18px;right:18px;width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--edge-p);border-radius:999px}
#mClose svg{width:24px;height:24px;stroke:var(--paper);stroke-width:2;fill:none;stroke-linecap:round}

/* ---------- hero ---------- */
.hero{padding:112px 0 56px}
@media(min-width:900px){.hero{padding:140px 0 80px}}
.hero-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:1080px){.hero-grid{grid-template-columns:1.02fr .98fr;gap:56px}}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.25rem);margin:20px 0 20px;max-width:19ch}
.ul{position:relative;white-space:nowrap}
/* A long hero phrase cannot use the drawn underline: the svg is absolutely
   positioned across the span, so the span must not wrap, and a 30-character phrase
   at 68px is wider than the hero column. Measured: /for/law-firms/ h1 was 796px in
   a 760px box. Long phrases get a real underline that wraps with the text. */
.ul-rule{white-space:normal;text-decoration:underline;text-decoration-color:var(--clay-stroke);text-decoration-thickness:5px;text-underline-offset:8px;text-decoration-skip-ink:none}
@media(max-width:640px){.ul-rule{text-decoration-thickness:4px;text-underline-offset:6px}}
@media(max-width:640px){
  .ul{white-space:normal;text-decoration:underline;text-decoration-color:var(--clay-stroke);
      text-decoration-thickness:4px;text-underline-offset:6px;text-decoration-skip-ink:none}
  .ul svg{display:none}
}
.ul svg{position:absolute;left:-2%;bottom:-.08em;width:104%;height:.22em;overflow:visible}
.ul path{fill:none;stroke:var(--clay-stroke);stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1s .7s var(--e-io) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero .lead{font-size:19px;color:var(--mut);max-width:52ch;margin-bottom:32px}
@media(min-width:760px){.hero .lead{font-size:21px;line-height:1.5}}
.hero .lead b{color:var(--ink);font-weight:600}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero-note{margin-top:24px;font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--mut);max-width:44ch;line-height:1.65}

/* ---------- call console ---------- */
.console-wrap{position:relative}
.console-wrap::before{content:"";position:absolute;inset:10px -10px -10px 10px;background:var(--lime);border-radius:24px}
@media(min-width:760px){.console-wrap::before{inset:16px -16px -16px 16px;border-radius:26px}}
.console{position:relative;z-index:1;background:var(--pine-deep);color:var(--paper);border:1px solid var(--line-p);border-radius:22px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(12,38,29,.55)}
.c-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line-p)}
.c-live{display:flex;align-items:center;gap:10px;min-width:0}
.c-dot{width:9px;height:9px;border-radius:50%;background:var(--clay-stroke);position:relative;flex:none}
.console.playing .c-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--clay-stroke);animation:pulse 1.4s infinite}
@keyframes pulse{from{transform:scale(.5);opacity:1}to{transform:scale(1.5);opacity:0}}
.c-live span{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;color:var(--mut-p)}
.console.playing .c-live span{color:var(--paper)}
.c-timer{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--mut-p);display:flex;gap:10px;align-items:center;flex:none}
#cLat{color:var(--lime);opacity:0;transition:opacity .4s ease}
#cLat.on{opacity:1}
.c-meta{padding:16px 20px 0}
.c-meta .num{font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.04em}
.c-meta .when{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut-p);margin-top:2px}
.sc-tabs{display:flex;gap:8px;padding:14px 20px 4px;flex-wrap:wrap}
.sc-tab{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:10px 14px;min-height:40px;display:inline-flex;align-items:center;border:1px solid var(--edge-p);border-radius:999px;color:var(--mut-p);transition:color .2s ease,border-color .2s ease,background-color .2s ease}
@media(hover:hover) and (pointer:fine){
  .sc-tab:hover{color:var(--paper);border-color:var(--paper)}
  /* The active tab is lime-filled. The generic hover above would put cream on
     lime at 1.3:1, so the selected state keeps its ink label. */
  .sc-tab.on:hover{color:var(--ink);border-color:var(--ink);background:#DCFF8A}
}
.sc-tab.on{background:var(--lime);color:var(--ink);border-color:var(--lime)}
#wave{width:100%;height:64px;padding:0 20px}
.c-status{padding:2px 20px 12px}
#cStatus{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut-p)}
#transcript{height:236px;overflow-y:auto;padding:14px 20px;border-block:1px solid var(--line-p);scrollbar-width:thin;scrollbar-color:var(--edge-p) transparent}
@media(min-width:760px){#transcript{height:252px}}
#transcript::-webkit-scrollbar{width:4px}
#transcript::-webkit-scrollbar-thumb{background:var(--edge-p);border-radius:4px}
.tl{margin-bottom:14px;animation:tlIn .45s var(--e-out) both}
@keyframes tlIn{from{opacity:0;transform:translateY(10px)}}
.tl-h{display:flex;gap:10px;align-items:baseline;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.18em;margin-bottom:4px}
.tl-h .who{color:var(--lime)}
.tl.caller .tl-h .who{color:var(--mut-p)}
.tl-h .tc{color:var(--mut-p)}          /* was rgba(...,.35) = 2.88:1 */
.tl p{font-size:14px;line-height:1.55;color:#F2EEE3}
.tl.caller p{color:var(--mut-p)}
.c-steps{display:flex;gap:8px;padding:14px 20px 0;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:6px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:8px 12px;border:1px solid var(--line-p);border-radius:999px;color:var(--mut-p);transition:color .4s ease,border-color .4s ease}
.step svg{width:12px;height:12px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.step.done{color:var(--lime);border-color:var(--lime)}   /* was opacity .4 = 2.09:1 */
.c-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px 18px;flex-wrap:wrap}
.c-foot .btn{padding:10px 18px;font-size:13px}
#skipBtn{opacity:0;pointer-events:none;transition:opacity .3s ease}
.console.playing #skipBtn{opacity:1;pointer-events:auto}
#outcome{margin:0 20px 16px;padding:16px 18px;background:rgba(201,241,107,.09);border:1px solid var(--lime);border-radius:14px;opacity:0;transform:translateY(12px);transition:opacity .5s var(--e-out),transform .5s var(--e-out);pointer-events:none}
#outcome.show{opacity:1;transform:none;pointer-events:auto}
#ocTag{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;background:var(--lime);color:var(--ink);padding:4px 10px;border-radius:999px;margin-bottom:10px}
#ocRows div{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:#F2EEE3;padding:3.5px 0}
#ocRows svg{width:14px;height:14px;stroke:var(--lime);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:4px}

/* ---------- marquee ---------- */
.mq{border-block:1px solid var(--line);padding:16px 0;overflow:hidden}
.mq-track{display:flex;gap:40px;width:max-content;animation:mq 40s linear infinite}
.mq[data-off="true"] .mq-track{animation-play-state:paused}
@media(hover:hover) and (pointer:fine){.mq:hover .mq-track{animation-play-state:paused}}
.mq-track span{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.2em;color:var(--mut);display:flex;align-items:center;gap:40px;white-space:nowrap}
.mq-track svg{width:12px;height:12px;fill:var(--clay-stroke);flex:none}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- section heads ---------- */
.sec-head{display:grid;grid-template-columns:1fr;gap:18px;align-items:end;margin-bottom:48px}
@media(min-width:1000px){.sec-head{grid-template-columns:1.2fr .8fr;gap:48px;margin-bottom:64px}}
.sec-head h2{font-size:clamp(2rem,3.9vw,3rem);margin-top:18px}
.sec-head p{color:var(--mut);font-size:17px}

/* ---------- leak / log ---------- */
.leak-grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:start}
@media(min-width:1000px){.leak-grid{grid-template-columns:1fr 1fr;gap:56px}}
.leak-grid h2{font-size:clamp(1.95rem,3.6vw,2.75rem)}
.leak-grid h2 em{font-style:italic;color:var(--clay)}
.log{background:var(--paper-hi);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.log-h{display:flex;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;color:var(--mut);text-transform:uppercase}
/* Flex, not grid. The grid handed the 4th child (the status pill) the 66px first
   column, and "Unanswered" needs 93px, so the text burst out of its own border.
   Flex lets each child take its natural width; the note drops to its own line. */
.ll{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;padding:14px 18px;border-bottom:1px solid var(--line);font-size:13px}
.ll>span:not([class]){flex:1 1 auto;min-width:0}
@media(min-width:760px){.ll{gap:8px 14px;padding:14px 20px;font-size:14px}}
.ll:last-child{border:none}
.ll .t{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;color:var(--mut);flex:none}
.ll .tag{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.14em;color:var(--clay);border:1px solid var(--clay);padding:4px 8px;border-radius:999px;white-space:nowrap;flex:none;align-self:center}
.ll .note{flex-basis:100%;font-size:13px;line-height:1.5;color:var(--clay);font-style:italic;font-family:"Newsreader",Georgia,serif}
.leak-cap{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--mut);padding:16px 4px 0;line-height:1.65}

/* ---------- how ---------- */
.how-row{display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start;padding:40px 16px;border-top:1px solid var(--line);transition:background-color .35s ease}
@media(min-width:1000px){.how-row{grid-template-columns:130px 1fr 240px;gap:44px;align-items:center;padding:56px 20px}}
.how-row:last-of-type{border-bottom:1px solid var(--line)}
.how-row .n{font-family:"Newsreader",Georgia,serif;font-size:clamp(2.6rem,6vw,5.4rem);font-weight:300;color:var(--pine);line-height:1;transition:color .35s ease}
.how-row h3{font-size:clamp(1.35rem,2.4vw,2rem);margin-bottom:10px}
.how-row p{color:var(--mut);max-width:56ch;transition:color .35s ease}
@media(hover:hover) and (pointer:fine){
  .how-row:hover{background:var(--pine)}
  .how-row:hover .n{color:var(--lime)}
  .how-row:hover p{color:var(--mut-p)}
  .how-row:hover h3{color:var(--paper)}
  .how-row:hover .hv-chip{border-color:var(--edge-p);color:var(--paper)}
  .how-row:hover .hv-chip svg{stroke:var(--lime)}
}
.hv{grid-column:2;justify-self:start;margin-top:6px}
@media(min-width:1000px){.hv{grid-column:auto;justify-self:end;margin-top:0}}
.hv-chip{display:flex;align-items:center;gap:10px;border:1px solid var(--edge);border-radius:14px;padding:14px 18px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;transition:border-color .35s ease,color .35s ease}
.hv-chip svg{width:17px;height:17px;stroke:var(--clay);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:stroke .35s ease}
.rings{position:relative;width:64px;height:64px}
.rings i{position:absolute;inset:0;border:1.5px solid var(--clay-stroke);border-radius:50%;animation:ring 2.2s infinite}
.rings i:nth-child(2){animation-delay:.7s}.rings i:nth-child(3){animation-delay:1.4s}
@keyframes ring{from{transform:scale(.35);opacity:1}to{transform:scale(1.15);opacity:0}}
.rings b{position:absolute;inset:0;display:grid;place-items:center;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em}

/* ---------- explorer ---------- */
#does{background:var(--paper-hi);border-block:1px solid var(--line)}
.ex-grid{display:grid;grid-template-columns:1fr;gap:32px;align-items:start}
@media(min-width:1000px){.ex-grid{grid-template-columns:380px 1fr;gap:56px}}
#featList{border-top:1px solid var(--line)}
#featList button{display:flex;align-items:center;gap:16px;width:100%;text-align:left;padding:18px 6px;border-bottom:1px solid var(--line);font-size:17px;font-weight:500;color:var(--mut);transition:color .25s ease,transform .25s var(--e-out);position:relative}
#featList button .fl-n{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--clay);flex:none}
#featList button svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-left:auto;opacity:0;transform:translateX(-6px);transition:opacity .25s ease,transform .25s var(--e-out);flex:none}
@media(hover:hover) and (pointer:fine){#featList button:hover{color:var(--ink);transform:translateX(10px)}}
#featList button[aria-selected="true"]{color:var(--ink)}
#featList button[aria-selected="true"]::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:7px;height:7px;background:var(--lime);border:1px solid var(--ink);border-radius:2px}
#featList button[aria-selected="true"] svg{opacity:1;transform:none}
.fpanel{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:28px;display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
@media(min-width:760px){.fpanel{padding:40px}}
@media(min-width:1180px){.fpanel{grid-template-columns:1fr 300px;gap:44px;min-height:430px}}
.fpanel>div{animation:fpIn .55s var(--e-out) both}
@keyframes fpIn{from{opacity:0;transform:translateY(16px)}}
.fpanel h3{font-size:clamp(1.4rem,2.3vw,1.95rem);margin:14px 0 12px}
.fpanel .fp-text p{color:var(--mut)}
.fp-mock{background:var(--paper-hi);border:1px solid var(--line);border-radius:14px;padding:20px}
.mk-note{font-family:"IBM Plex Mono",monospace;font-size:13px;text-transform:uppercase;color:var(--mut);margin-top:14px;line-height:1.65}
.mk-row{display:grid;grid-template-columns:88px 1fr auto;gap:10px;align-items:center;margin-bottom:12px;font-size:13px}
.mk-row span{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--mut)}
.mk-row i{height:6px;border-radius:3px;background:var(--pine);width:var(--w);animation:grow .9s var(--e-out) both}
.mk-row.hi i{background:var(--lime);border:1px solid var(--ink)}
.mk-row.hi b{color:var(--pine)}
.mk-row b{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:500}
@keyframes grow{from{width:0}}
.mk-cal-h{display:flex;justify-content:space-between;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;margin-bottom:14px;color:var(--mut)}
.mk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mk-grid i{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:11px;text-align:center;padding:8px 2px;border:1px solid var(--line);border-radius:8px;color:var(--mut);animation:fpIn .4s both}
.mk-grid i.bk{color:var(--mut);text-decoration:line-through}   /* was opacity .35 = 2.23:1 */
.mk-grid i.sel{background:var(--lime);border-color:var(--ink);color:var(--ink);font-weight:500}
.mk-q-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;padding:10px 2px;border-bottom:1px solid var(--line);animation:fpIn .5s both}
.mk-q-row:nth-child(2){animation-delay:.15s}.mk-q-row:nth-child(3){animation-delay:.3s}
.mk-q-row svg{width:15px;height:15px;stroke:var(--pine);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mk-q-tag{margin-top:14px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;background:var(--ink);color:var(--lime);display:inline-block;padding:8px 12px;border-radius:999px;animation:fpIn .5s .5s both}
.mk-nodes{display:flex;align-items:center;margin:8px 0 4px}
.mk-nodes .nd{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--paper)}
.mk-nodes .nd.hot{background:var(--pine);color:var(--lime);border-color:var(--pine)}
.mk-nodes .lnk{flex:1;min-width:18px;height:1px;background:var(--edge);position:relative;margin:0 4px}
.mk-nodes .lnk::after{content:"";position:absolute;top:-2.5px;left:0;width:6px;height:6px;border-radius:50%;background:var(--clay-stroke);animation:travel 1.5s infinite}
@keyframes travel{to{left:100%}}
.mk-tl{font-size:13px;padding:6px 0;border-bottom:1px dashed var(--line);color:var(--mut)}
.mk-tl b{color:var(--ink);font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:500;letter-spacing:.08em}
.mk-sum{margin-top:14px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;background:var(--lime);border:1px solid var(--ink);border-radius:9px;padding:8px 12px;color:var(--ink);line-height:1.7}
.mk-s-row{font-size:13px;padding:8px 2px;border-bottom:1px solid var(--line)}
.mk-s-row.dead{color:var(--mut);text-decoration:line-through;text-decoration-color:var(--clay)}
.mk-s-row:last-of-type{border:none}
.mk-s-count{margin-top:12px;font-size:13px;color:var(--mut)}
.mk-s-count b{font-family:"Newsreader",Georgia,serif;font-size:26px;color:var(--clay);font-weight:500;margin-right:6px}

/* ---------- ROI ---------- */
#math{background:var(--pine);color:var(--paper)}
#math .kicker{color:var(--lime)}
#math .kicker::before{background:var(--lime)}
.roi-grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
@media(min-width:1000px){.roi-grid{grid-template-columns:1fr 1.05fr;gap:64px}}
.roi-grid h2{font-size:clamp(1.95rem,3.6vw,2.75rem);margin:18px 0 20px}
.roi-grid h2 em{font-style:italic;color:var(--lime)}
.roi-grid .body p{color:var(--mut-p);font-size:17px;max-width:46ch}
.roi-note{margin-top:24px;font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--mut-p);line-height:1.65;max-width:46ch}
.calc{background:var(--pine-deep);border:1px solid var(--line-p);border-radius:22px;padding:24px}
@media(min-width:760px){.calc{padding:40px}}
.c-row{margin-bottom:24px}
.c-row .cl{display:flex;justify-content:space-between;gap:12px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut-p);margin-bottom:6px}
.c-row .cl b{color:var(--paper);font-weight:500}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--track);border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--lime);border:5px solid var(--pine-deep);margin-top:-8px;transition:transform .2s var(--e-out)}
@media(hover:hover) and (pointer:fine){input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}}
input[type=range]::-moz-range-track{height:2px;background:var(--track)}
input[type=range]::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:var(--lime);border:5px solid var(--pine-deep)}
.res{border-top:1px solid var(--line-p);padding-top:24px;margin-top:6px}
.res .lbl{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut-p)}
#outMonth{font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:clamp(2.6rem,4.6vw,4.2rem);color:var(--lime);line-height:1.1;letter-spacing:-.02em;margin:8px 0 4px;font-variant-numeric:tabular-nums}
.res .sub{display:flex;gap:24px;flex-wrap:wrap;margin-top:12px;font-size:14px;color:var(--mut-p)}
.res .sub b{color:var(--paper);font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:500}
.res .pay{margin-top:18px;font-family:"Newsreader",Georgia,serif;font-style:italic;font-size:16px;color:#F2EEE3;line-height:1.5}
.res .pay b{color:var(--lime);font-style:normal}

/* ---------- the principle (replaces testimonials) ---------- */
.quote{max-width:900px}
.quote q{quotes:none;font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(1.45rem,3vw,2.4rem);line-height:1.32;display:block}
.quote q em{color:var(--pine);font-style:italic;font-weight:500}
.q-who{display:flex;align-items:center;gap:14px;margin-top:24px;flex-wrap:wrap}
.q-who span{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.q-who a{color:var(--clay)}

/* ---------- pricing ---------- */
#pricing{background:var(--paper-hi);border-block:1px solid var(--line)}
.price-row{display:grid;grid-template-columns:1fr;gap:18px;align-items:center;padding:32px 8px;border-top:1px solid var(--line);transition:background-color .3s ease}
@media(min-width:1000px){.price-row{grid-template-columns:1.1fr 1.7fr .8fr auto;gap:32px;padding:40px 8px}}
.price-row:last-of-type{border-bottom:1px solid var(--line)}
@media(hover:hover) and (pointer:fine){.price-row:hover{background:var(--paper)}}
.price-row .pt{font-family:"Newsreader",Georgia,serif;font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.15;font-weight:500}
.price-row .tag{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;background:var(--lime);border:1px solid var(--ink);border-radius:999px;padding:4px 10px;margin-bottom:8px}
.price-row .pd{font-size:14px;color:var(--mut);margin-top:6px}
.price-row .inc{font-size:14px;color:var(--mut);line-height:1.85}
.price-row .inc b{color:var(--ink);font-weight:600}
.price-row .pr{font-family:"Newsreader",Georgia,serif;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.1;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.price-row .pr small{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;color:var(--mut);display:block;white-space:normal}
.src{grid-column:1/-1;font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--mut);border-top:1px dashed var(--line);padding-top:10px;margin-top:4px;line-height:1.65}
.p-foot{margin-top:24px;font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--mut);display:flex;gap:14px;flex-wrap:wrap;align-items:center;line-height:1.65}
.p-foot svg{width:13px;height:13px;stroke:var(--pine);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.p-foot i{display:flex;gap:8px;align-items:center;font-style:normal}

/* ---------- comparison table ---------- */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:16px;background:var(--paper-hi);padding:8px}
table{width:100%;border-collapse:collapse;min-width:600px}
caption{text-align:left;font-size:14px;line-height:1.6;color:var(--mut);padding:12px 12px 8px;caption-side:top}
th,td{text-align:left;padding:12px 12px;border-bottom:1px solid var(--line);font-size:14px;line-height:1.55}
th{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);font-weight:500}
td{color:var(--mut)}
td.n{font-variant-numeric:tabular-nums;color:var(--ink)}
tr:last-child td{border-bottom:none}
tr.us td{color:var(--ink)}
tr.us td.n{color:var(--pine);font-weight:600}
tr.us{background:rgba(201,241,107,.16)}

/* ---------- demo card ---------- */
.demo{background:var(--pine-deep);color:var(--paper);border-radius:22px;padding:28px;display:grid;gap:24px}
@media(min-width:900px){.demo{grid-template-columns:1.1fr .9fr;gap:44px;padding:44px}}
.demo h3{font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--paper)}
.demo p{color:var(--mut-p);font-size:15px;margin-top:12px;max-width:48ch}
.demo .kicker{color:var(--lime)}.demo .kicker::before{background:var(--lime)}
.demo-brief{background:rgba(242,238,227,.05);border:1px solid var(--line-p);border-radius:14px;padding:20px}
.demo-brief h4{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);margin-bottom:12px;font-weight:500}
.demo-brief li{list-style:none;font-size:13px;color:#F2EEE3;padding:6px 0 6px 20px;position:relative;line-height:1.55}
.demo-brief li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;border-radius:2px;background:var(--lime)}
.demo-dial{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px}
.demo-dial a.tel{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:20px;letter-spacing:.02em;color:var(--lime);text-decoration:none;border-bottom:2px solid var(--lime);display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.demo-note{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--mut-p);margin-top:14px;line-height:1.65}

/* ---------- FAQ ---------- */
.faq{max-width:860px}
.fq{border-top:1px solid var(--line)}
.fq:last-child{border-bottom:1px solid var(--line)}
.fq-q{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;text-align:left;padding:24px 4px;font-family:"Newsreader",Georgia,serif;font-size:clamp(1.1rem,1.8vw,1.4rem);font-weight:500;transition:transform .2s var(--e-out)}
@media(hover:hover) and (pointer:fine){.fq-q:hover{transform:translateX(10px)}}
.fq-q svg{width:18px;height:18px;stroke:var(--clay);stroke-width:2.2;fill:none;stroke-linecap:round;flex:none;transition:transform .35s var(--e-out)}
.fq[open] .fq-q svg,.fq.open .fq-q svg{transform:rotate(45deg)}
.fq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--e-out)}
.fq.open .fq-a{grid-template-rows:1fr}
.fq-a>div{overflow:hidden}
.fq-a p{color:var(--mut);max-width:64ch;padding:0 4px 24px;font-size:15px}
.no-js .fq-a{grid-template-rows:1fr}

/* ---------- final CTA ---------- */
#final{background:var(--pine-deep);color:var(--paper);position:relative;overflow:hidden}
#final .bigstar{position:absolute;right:-200px;top:50%;transform:translateY(-50%);width:480px;height:480px;fill:none;stroke:var(--lime);stroke-width:.6;opacity:.14;animation:spin 90s linear infinite}
@media(min-width:900px){#final .bigstar{right:-140px;width:620px;height:620px}}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}
#final .kicker{color:var(--lime)}#final .kicker::before{background:var(--lime)}
#final h2{font-size:clamp(2.2rem,4.6vw,3.75rem);margin:24px 0 28px;max-width:17ch;position:relative}
#final h2 em{font-style:italic;color:var(--lime)}
#final .note{margin-top:20px;font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--mut-p);line-height:1.65}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:48px 0 32px}
.ft{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:700px){.ft{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.ft{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}}
.ft p{color:var(--mut);font-size:14px;max-width:34ch;margin-top:14px}
.ft h4,.ft .ft-h{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:14px;font-weight:500;font-variation-settings:normal}
.ft a{display:block;text-decoration:none;color:var(--ink);font-size:15px;padding:4px 0;transition:transform .2s var(--e-out)}
@media(hover:hover) and (pointer:fine){.ft a:hover{transform:translateX(5px)}}
.ft .mono-l{font-family:"IBM Plex Mono",monospace;font-size:13px;line-height:2.1;color:var(--mut)}
.ft-b{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:44px;padding-top:20px;border-top:1px solid var(--line);font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.ft-b a{display:inline}

/* ---------- modal ---------- */
#modal{position:fixed;inset:0;z-index:1500;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
#modal.open{opacity:1;visibility:visible}
#modal .bg{position:absolute;inset:0;background:rgba(12,38,29,.8);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.m-panel{position:relative;background:var(--paper-hi);border-radius:22px;padding:32px;width:min(480px,100%);max-height:90vh;overflow:auto;transform:translateY(20px) scale(.98);transition:transform .4s var(--e-out)}
@media(min-width:600px){.m-panel{padding:44px}}
#modal.open .m-panel{transform:none}
#mClose2{position:absolute;top:16px;right:16px;width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--edge);border-radius:50%;transition:background-color .2s ease}
@media(hover:hover) and (pointer:fine){#mClose2:hover{background:var(--ink)}#mClose2:hover svg{stroke:var(--paper)}}
#mClose2 svg{width:16px;height:16px;stroke:var(--ink);stroke-width:2;stroke-linecap:round;fill:none;transition:stroke .2s ease}
.m-panel h3{font-size:1.75rem;margin:14px 0 8px}
.m-panel .sub{color:var(--mut);font-size:15px;margin-bottom:24px}
.field{margin-bottom:16px}
.field label{display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.field input,.field select{width:100%;padding:14px 16px;border:1px solid var(--edge);border-radius:12px;background:var(--paper);font:15px "Instrument Sans",sans-serif;color:var(--ink);transition:border-color .2s ease;appearance:none}
.field input:focus,.field select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(176,64,28,.25)}
.field.err input{border-color:var(--clay)}
.field .msg{display:none;color:var(--clay);font-size:12px;margin-top:4px}
.field.err .msg{display:block}
#leadForm .btn{width:100%;justify-content:center;margin-top:8px}
#formOk{display:none;text-align:center;padding:20px 0 6px}
#formOk .ok-ic{width:60px;height:60px;border-radius:50%;background:var(--lime);border:1px solid var(--ink);display:grid;place-items:center;margin:0 auto 20px}
#formOk .ok-ic svg{width:24px;height:24px;stroke:var(--ink);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
#formOk p{color:var(--mut);font-size:15px}

/* ---------- vertical index cards ---------- */
.vgrid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:700px){.vgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1050px){.vgrid{grid-template-columns:repeat(3,1fr)}}
.vcard{display:block;text-decoration:none;background:var(--paper-hi);border:1px solid var(--line);border-radius:18px;padding:24px;transition:transform .3s var(--e-out),border-color .3s ease,background-color .3s ease}
@media(hover:hover) and (pointer:fine){.vcard:hover{transform:translateY(-3px);border-color:var(--edge);background:var(--paper)}}
.vcard:active{transform:scale(.99)}
.vcard .vn{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay)}
.vcard h3{font-size:1.4rem;margin:12px 0 8px}
.vcard p{color:var(--mut);font-size:14px}
.vcard .go{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.vcard .go svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--e-out)}
@media(hover:hover) and (pointer:fine){.vcard:hover .go svg{transform:translateX(4px)}}

/* ---------- 404 ---------- */
.lost{min-height:70vh;display:grid;place-items:center;text-align:center;padding-block:120px}
.lost h1{font-size:clamp(2.4rem,8vw,5rem);margin-bottom:16px}
.lost p{color:var(--mut);margin-bottom:28px;max-width:44ch;margin-inline:auto}

@media(prefers-reduced-motion:reduce){
  .mq-track{animation:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .ul path{stroke-dashoffset:0}
}

/* Coarse pointers need a real target. Inline source links inside tables and
   price rows measured 18px tall at 768px, which is not tappable. */
@media(pointer:coarse){
  td a,.src a,.q-who a,footer .ft-b a{display:inline-block;min-height:32px;padding-block:6px}
}