/* ============================================================
   MOTIONEXA LABS — "THE VISIBILITY LEDGER"
   Design system v2.0 · June 2026
   Two-ink ledger stationery: blue feint rules, red margin line.
   Faces: Young Serif (display) · Newsreader (text) · Fragment Mono (utility)
   ============================================================ */

/* ---------- Fonts (self-hosted, subset) ---------- */
@font-face{font-family:'Young Serif';src:url('/assets/fonts/youngserif-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('/assets/fonts/newsreader-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('/assets/fonts/newsreader-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('/assets/fonts/newsreader-400italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Fragment Mono';src:url('/assets/fonts/fragmentmono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Fragment Mono';src:url('/assets/fonts/fragmentmono-400italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --desk:#171310;            /* leather desktop the sheet sits on */
  --desk-edge:#0e0b09;
  --paper:#f2edde;           /* bone ledger stock */
  --paper-deep:#e9e2cd;      /* aged edge */
  --ink:#23201a;             /* iron-gall warm black */
  --ink-soft:#4d473c;
  --ink-faint:#7d7666;
  --feint:rgba(110,140,168,.38);   /* light-blue ruled lines */
  --feint-strong:rgba(96,128,158,.55);
  --ledger-blue:#1f3fae;     /* stamped actions */
  --ledger-blue-deep:#16307f;
  --red:#b5261e;             /* correction / margin ink */
  --red-deep:#8e1c16;
  --ochre:#e8d98a;           /* highlighter */
  --ok:#1d6b3a;              /* registrar green for ✓ */

  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --display:'Young Serif','Newsreader',Georgia,serif;
  --mono:'Fragment Mono','Courier New',monospace;

  --sheet-max:1120px;
  --margin-col:64px;         /* width left of the red rule */
  --gutter:clamp(20px,5vw,56px);
  --rule:1px solid var(--feint);
  --shadow-sheet:0 1px 0 rgba(255,255,255,.04),0 24px 60px -18px rgba(0,0,0,.65),0 2px 6px rgba(0,0,0,.35);
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 50% -10%,rgba(255,255,255,.045),transparent 60%),
    linear-gradient(var(--desk),var(--desk-edge));
  background-color:var(--desk);
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.0625rem;       /* 17px */
  line-height:1.62;
  font-kerning:normal;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;vertical-align:middle}
a{color:inherit}
::selection{background:var(--ochre);color:var(--ink)}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;font-family:var(--mono);font-size:.8rem;z-index:100}
.skip:focus{left:8px;top:8px}

:focus-visible{outline:2px solid var(--ledger-blue);outline-offset:2px;border-radius:1px}

/* ---------- The sheet ---------- */
.sheet{
  position:relative;
  max-width:var(--sheet-max);
  margin:clamp(14px,3vw,40px) auto clamp(28px,5vw,72px);
  background:
    /* fibre noise */
    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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(140% 90% at 50% 0%,var(--paper) 55%,var(--paper-deep) 100%);
  background-color:var(--paper);
  box-shadow:var(--shadow-sheet);
  border-radius:2px;
}
/* punched filing holes, hung off the left edge of the sheet */
.sheet::before{
  content:"";
  position:absolute;left:18px;top:0;bottom:0;width:14px;
  background-image:radial-gradient(circle 7px at 7px 50%,var(--desk) 6.5px,rgba(0,0,0,.28) 7px,transparent 8px);
  background-size:14px 220px;
  background-repeat:repeat-y;
  background-position:0 110px;
  pointer-events:none;
}
/* red double margin rule, the registrar's line */
.sheet::after{
  content:"";
  position:absolute;top:0;bottom:0;left:var(--margin-col);
  width:5px;
  border-left:1.5px solid rgba(181,38,30,.78);
  border-right:1px solid rgba(181,38,30,.45);
  pointer-events:none;
}
@media (max-width:760px){
  :root{--margin-col:34px}
  .sheet::before{left:8px;background-image:radial-gradient(circle 5px at 5px 50%,var(--desk) 4.5px,rgba(0,0,0,.28) 5px,transparent 6px);background-size:10px 180px;width:10px}
}

.wrap{padding-left:calc(var(--margin-col) + var(--gutter));padding-right:var(--gutter)}

/* ---------- Cover band (top strip on the desk) ---------- */
.coverband{
  max-width:var(--sheet-max);
  margin:18px auto -6px;
  padding:0 4px;
  display:flex;justify-content:space-between;gap:16px;
  font-family:var(--mono);font-size:.69rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(242,237,222,.55);
}
.coverband b{font-weight:400;color:rgba(242,237,222,.8)}

/* ---------- Masthead ---------- */
.masthead{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding-top:26px;padding-bottom:20px;
  border-bottom:var(--rule);
}
.brand{display:flex;align-items:baseline;gap:8px;text-decoration:none}
.brand .word{font-family:var(--display);font-size:1.45rem;letter-spacing:-.01em;color:var(--ink)}
.brand .word i{font-style:normal;color:var(--red)}
.brand small{font-family:var(--mono);font-size:.62rem;letter-spacing:.3em;color:var(--ledger-blue);transform:translateY(-1px)}
.nav{display:flex;align-items:center;gap:clamp(12px,2.4vw,26px)}
.nav a{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink-soft);padding:6px 2px;border-bottom:1px solid transparent}
.nav a:hover{color:var(--ink);border-bottom-color:var(--feint-strong)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--red)}
.nav .cta{color:var(--paper);background:var(--ledger-blue);border:1px solid var(--ledger-blue-deep);box-shadow:2px 2px 0 var(--ledger-blue-deep);padding:9px 14px 8px;border-bottom:1px solid var(--ledger-blue-deep)}
.nav .cta:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ledger-blue-deep);color:var(--paper)}
.menu-btn{display:none}
@media (max-width:880px){
  .nav{position:fixed;inset:0;background:var(--paper);flex-direction:column;justify-content:center;gap:26px;z-index:60;transform:translateY(-102%);transition:transform .3s ease;border-bottom:3px solid var(--red)}
  .nav.open{transform:none}
  .nav a{font-size:1rem}
  .menu-btn{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--ink-soft);color:var(--ink);font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;padding:8px 12px;cursor:pointer;z-index:70}
  .menu-btn[aria-expanded="true"]{background:var(--ink);color:var(--paper)}
}
@media (prefers-reduced-motion:reduce){.nav{transition:none}}

/* ---------- Type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.04;letter-spacing:-.012em;color:var(--ink);margin:0 0 .5em}
h1{font-size:clamp(2.6rem,7.2vw,4.9rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.12}
h3{font-size:clamp(1.18rem,2vw,1.42rem);line-height:1.2}
p{margin:0 0 1.1em;max-width:68ch}
.lede{font-size:clamp(1.12rem,1.8vw,1.3rem);line-height:1.55;color:var(--ink)}
.small{font-size:.92rem;color:var(--ink-soft)}
.mono{font-family:var(--mono)}
.eyebrow{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
  margin:0 0 1.2rem;
}
.eyebrow .no{color:var(--red);letter-spacing:.14em}
.eyebrow .dotlead{flex:1;min-width:40px;border-bottom:1px dotted var(--ink-faint);transform:translateY(-3px)}
.eyebrow time,.eyebrow .right{color:var(--ink-faint)}
a.inline{color:var(--ledger-blue);text-decoration:none;border-bottom:1px solid rgba(31,63,174,.35)}
a.inline:hover{border-bottom-color:var(--ledger-blue)}
hr{border:0;border-top:var(--rule);margin:0}

/* highlighter swipe */
.hl{background:linear-gradient(transparent 56%,var(--ochre) 56%,var(--ochre) 92%,transparent 92%);padding:0 .1em}

/* hand-drawn red underline under the key phrase */
.uline{position:relative;white-space:nowrap}
.uline svg{position:absolute;left:-2%;bottom:-.18em;width:104%;height:.34em;overflow:visible}
.uline svg path{fill:none;stroke:var(--red);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:draw .7s .55s cubic-bezier(.6,0,.3,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.uline svg path{animation:none;stroke-dashoffset:0}}

/* circled red annotation */
.circled{position:relative;display:inline-block;padding:0 .15em}
.circled svg{position:absolute;inset:-22% -10%;width:120%;height:144%;overflow:visible;pointer-events:none}
.circled svg ellipse{fill:none;stroke:var(--red);stroke-width:2.4;opacity:.85}

/* ---------- Stamps ---------- */
.stamp{
  display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red);border:2px solid currentColor;border-radius:3px;padding:.42em .7em .36em;
  transform:rotate(-3deg);opacity:.92;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .92 .08'/%3E%3CfeComposite operator='over' in2='SourceGraphic'/%3E%3C/filter%3E%3Crect width='120' height='60' fill='%23fff' filter='url(%23r)'/%3E%3C/svg%3E");
  mask-size:cover;
}
.stamp.blue{color:var(--ledger-blue)}
.stamp.green{color:var(--ok)}
.stamp.big{font-size:.9rem;padding:.5em .9em .44em;border-width:3px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  color:var(--paper);background:var(--ledger-blue);
  border:1px solid var(--ledger-blue-deep);
  box-shadow:3px 3px 0 var(--ledger-blue-deep);
  padding:14px 22px 13px;border-radius:2px;
  transition:transform .12s ease,box-shadow .12s ease;
}
.btn:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ledger-blue-deep)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ledger-blue-deep)}
.btn.ghost{color:var(--ink);background:transparent;border:1px solid var(--ink-soft);box-shadow:3px 3px 0 rgba(35,32,26,.25)}
.btn.ghost:hover{box-shadow:1px 1px 0 rgba(35,32,26,.25)}
.btn.red{background:var(--red);border-color:var(--red-deep);box-shadow:3px 3px 0 var(--red-deep)}
.btn.red:hover{box-shadow:1px 1px 0 var(--red-deep)}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* ---------- Sections as ledger entries ---------- */
.entry{padding-top:clamp(44px,7vw,86px);padding-bottom:clamp(44px,7vw,86px);border-bottom:var(--rule)}
.entry:last-of-type{border-bottom:0}

/* hero gets visible feint ruling like real ledger paper */
.hero{
  position:relative;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 35px,var(--feint) 35px,var(--feint) 36px);
  background-origin:content-box;
}
.hero .hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:clamp(28px,4.5vw,64px);align-items:start}
@media (max-width:980px){.hero .hero-grid{grid-template-columns:1fr}}
.hero h1{margin-bottom:.45em}
.hero .lede{background:var(--paper);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero p{background:var(--paper)}
.platforms{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;color:var(--ink-soft);background:var(--paper);display:inline-block;padding:2px 0}
.platforms b{font-weight:400;color:var(--ink)}

/* marginalia — italic red notes hanging in the left margin */
.mnote{
  position:absolute;left:calc(-1 * (var(--margin-col) - 4px) - var(--gutter));width:calc(var(--margin-col) + var(--gutter) - 18px);
  font-family:var(--serif);font-style:italic;font-size:.78rem;line-height:1.35;color:var(--red);
  transform:rotate(-1.6deg);text-align:right;padding-right:10px;
}
@media (max-width:1180px){.mnote{display:none}}

/* ---------- THE LEDGER (signature element) ---------- */
.ledger{
  position:relative;
  background:var(--paper);
  border:1px solid rgba(35,32,26,.35);
  box-shadow:4px 4px 0 rgba(35,32,26,.16);
  border-radius:2px;
}
.ledger .tape{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-1.2deg);
  width:118px;height:26px;background:rgba(214,200,160,.55);
  border-left:1px dashed rgba(35,32,26,.25);border-right:1px dashed rgba(35,32,26,.25);
  box-shadow:0 1px 2px rgba(0,0,0,.12)
}
.ledger header{
  display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  padding:16px 18px 12px;border-bottom:2px solid var(--ink);
}
.ledger header .t{font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase}
.ledger header .t b{font-weight:400;color:var(--red)}
.ledger table{width:100%;border-collapse:collapse;font-size:.86rem}
.ledger thead th{
  font-family:var(--mono);font-weight:400;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);text-align:left;padding:10px 10px 8px;border-bottom:var(--rule);
}
.ledger tbody td{padding:11px 10px;border-bottom:1px solid var(--feint);vertical-align:middle}
.ledger tbody tr:last-child td{border-bottom:0}
.ledger .q{font-family:var(--serif);font-style:italic;color:var(--ink)}
.ledger .q::before{content:"“"}.ledger .q::after{content:"”"}
.ledger .who{font-family:var(--mono);font-size:.72rem;color:var(--ink-soft);white-space:nowrap}
.ledger .who .redact{display:inline-block;background:var(--ink);border-radius:1px;height:.8em;vertical-align:baseline}
.mark{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;white-space:nowrap}
.mark.absent{color:var(--red);border:1.5px solid currentColor;padding:2px 7px 1px;border-radius:2px;display:inline-block;transform:rotate(-2deg)}
.mark.cited{color:var(--ok);border:1.5px solid currentColor;padding:2px 7px 1px;border-radius:2px;display:inline-block;transform:rotate(-1deg)}
.ledger tfoot td{padding:12px 14px;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);border-top:2px solid var(--ink)}
.ledger tfoot .sum{color:var(--red)}
/* stamp-in animation for rows */
.ledger tbody tr{opacity:0;transform:translateY(4px)}
.ledger.inked tbody tr{opacity:1;transform:none;transition:opacity .35s ease,transform .35s ease}
.ledger.inked tbody tr:nth-child(1){transition-delay:.1s}
.ledger.inked tbody tr:nth-child(2){transition-delay:.32s}
.ledger.inked tbody tr:nth-child(3){transition-delay:.54s}
.ledger.inked tbody tr:nth-child(4){transition-delay:.76s}
.ledger.inked tbody tr:nth-child(5){transition-delay:.98s}
@media (prefers-reduced-motion:reduce){.ledger tbody tr{opacity:1;transform:none;transition:none}}
@media (max-width:560px){
  .ledger thead th:nth-child(2),.ledger tbody td:nth-child(2){display:none}
}

/* dotted-leader rows (ledger style lists, used for pricing & specs) */
.leaders{list-style:none;margin:0;padding:0}
.leaders li{display:flex;align-items:baseline;gap:10px;padding:10px 0;border-bottom:1px solid var(--feint)}
.leaders li:last-child{border-bottom:0}
.leaders .k{flex-shrink:0}
.leaders .dots{flex:1;border-bottom:1px dotted var(--ink-faint);transform:translateY(-4px);min-width:24px}
.leaders .v{flex-shrink:0;font-family:var(--mono);font-size:.8rem;color:var(--ink)}

/* ---------- Exhibits (tipped-in cards) ---------- */
.exhibit{
  position:relative;background:#fbf8ee;border:1px solid rgba(35,32,26,.3);
  box-shadow:3px 4px 0 rgba(35,32,26,.14);padding:22px 22px 18px;border-radius:2px;
}
.exhibit .label{
  position:absolute;top:-11px;left:16px;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;padding:4px 9px 3px;
}
.exhibit.tilt-l{transform:rotate(-.6deg)}
.exhibit.tilt-r{transform:rotate(.5deg)}

/* answer-engine transcript card */
.transcript{font-size:.92rem}
.transcript .prompt{font-family:var(--mono);font-size:.74rem;color:var(--ledger-blue);margin-bottom:10px}
.transcript .prompt::before{content:"> "}
.transcript ol{margin:.4em 0 0;padding-left:1.3em}
.transcript ol li{margin:.34em 0}
.transcript .you-missing{color:var(--red);font-style:italic}
.transcript .src{font-family:var(--mono);font-size:.62rem;color:var(--ink-faint);letter-spacing:.06em}

/* ---------- Grids ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,32px)}
@media (max-width:880px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}

/* numbered ledger lines for the method (order is real) */
.lines{counter-reset:line;list-style:none;margin:0;padding:0}
.lines>li{
  counter-increment:line;position:relative;
  padding:22px 0 22px 70px;border-bottom:1px solid var(--feint);
}
.lines>li:last-child{border-bottom:0}
.lines>li::before{
  content:counter(line,decimal-leading-zero);
  position:absolute;left:0;top:24px;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;color:var(--red);
}
.lines>li::after{
  content:"";position:absolute;left:38px;top:30px;bottom:26px;border-left:1px dotted var(--ink-faint);
}
.lines h3{margin-bottom:.3em}
.lines p{margin-bottom:.3em}
.lines .out{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ledger-blue)}
.lines .out::before{content:"⟶ filed: "}

/* ---------- FAQ / footnote details ---------- */
.qa{border-top:var(--rule)}
.qa details{border-bottom:var(--rule)}
.qa summary{
  cursor:pointer;list-style:none;display:flex;gap:14px;align-items:baseline;
  padding:18px 0;font-family:var(--serif);font-weight:600;font-size:1.05rem;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary .qno{font-family:var(--mono);font-size:.7rem;color:var(--red);flex-shrink:0;letter-spacing:.1em}
.qa summary::after{content:"+";margin-left:auto;font-family:var(--mono);color:var(--ink-faint);font-size:1rem;transition:transform .2s}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa .a{padding:0 0 18px 44px}
.qa .a p:last-child{margin-bottom:0}
@media (prefers-reduced-motion:reduce){.qa summary::after{transition:none}}

/* footnotes */
.fn{font-size:.72em;vertical-align:super;line-height:0;color:var(--red);text-decoration:none;font-family:var(--mono)}
.footnotes{border-top:2px solid var(--ink);margin-top:2.4rem;padding-top:1rem;font-size:.84rem;color:var(--ink-soft)}
.footnotes ol{margin:0;padding-left:1.2rem}
.footnotes li{margin:.45em 0}
.footnotes .fnback{text-decoration:none;color:var(--ledger-blue);font-family:var(--mono);font-size:.8em}

/* ---------- Pricing cards (rate card) ---------- */
.rates{align-items:stretch}
.rate{
  position:relative;display:flex;flex-direction:column;
  background:#fbf8ee;border:1px solid rgba(35,32,26,.32);border-radius:2px;
  box-shadow:3px 4px 0 rgba(35,32,26,.14);padding:26px 24px 22px;
}
.rate.flag{border:2px solid var(--ink);box-shadow:5px 6px 0 rgba(35,32,26,.2)}
.rate .tier{font-family:var(--mono);font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint)}
.rate h3{margin:.4rem 0 .2rem}
.rate .price{font-family:var(--display);font-size:2rem;margin:.4rem 0 .1rem}
.rate .per{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.rate .leaders{margin:18px 0 22px;font-size:.92rem;flex:1}
.rate .corner{position:absolute;top:-13px;right:14px}

/* ---------- INTAKE FORM 7-A ---------- */
.formsheet{max-width:880px}
.tabs{display:flex;gap:4px;margin-bottom:-1px;flex-wrap:wrap}
.tab{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid rgba(35,32,26,.35);border-bottom:0;background:var(--paper-deep);
  color:var(--ink-faint);padding:10px 16px 9px;border-radius:6px 6px 0 0;cursor:default;
  position:relative;top:1px;
}
.tab.done{color:var(--ok)}
.tab.done::after{content:" ✓"}
.tab.now{background:#fbf8ee;color:var(--ink);border-color:rgba(35,32,26,.45);box-shadow:0 -2px 0 var(--red) inset}
@media (max-width:640px){.tab{padding:8px 10px 7px;font-size:.6rem}}

.formcard{
  background:#fbf8ee;border:1px solid rgba(35,32,26,.45);border-radius:0 2px 2px 2px;
  box-shadow:4px 5px 0 rgba(35,32,26,.16);
  padding:clamp(22px,4vw,40px);
}
.formhead{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:8px;flex-wrap:wrap}
.formhead .ttl{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase}
.formhead .ttl b{font-weight:400;color:var(--red)}

.fstep{display:none}
.fstep.now{display:block;animation:stepin .3s ease}
@keyframes stepin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fstep.now{animation:none}}

.field{position:relative;margin:26px 0 6px;counter-increment:field}
.field>label{
  display:flex;gap:10px;align-items:baseline;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:2px;
}
.field>label .fno{color:var(--red)}
.field>label .req{color:var(--red);letter-spacing:0}
.field input[type=text],.field input[type=email],.field input[type=url],.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1.5px solid var(--feint-strong);
  font-family:var(--serif);font-size:1.18rem;color:var(--ink);padding:8px 2px 9px;border-radius:0;
}
.field textarea{line-height:1.5;resize:vertical;min-height:84px;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 34px,var(--feint) 34px,var(--feint) 35px)}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--ledger-blue)}
.field input::placeholder,.field textarea::placeholder{color:rgba(125,118,102,.55);font-style:italic}
.field .err{
  display:none;margin-top:7px;font-family:var(--serif);font-style:italic;font-size:.82rem;color:var(--red)
}
.field.bad input,.field.bad textarea{border-bottom-color:var(--red)}
.field.bad .err{display:block}
.field.bad .err::before{content:"✗ "}

/* stamp-chip choices */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips .chip{
  display:inline-block;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  border:1.5px solid var(--ink-soft);color:var(--ink-soft);border-radius:3px;padding:9px 13px 8px;
  transition:transform .12s ease;
  background:#fbf8ee;
}
.chips label:hover .chip{border-color:var(--ink);color:var(--ink)}
.chips input:checked + .chip{
  border-color:var(--ledger-blue);color:var(--ledger-blue);
  transform:rotate(-1.5deg);
  box-shadow:2px 2px 0 rgba(31,63,174,.25);
}
.chips input:checked + .chip::before{content:"✓ "}
.chips input:focus-visible + .chip{outline:2px solid var(--ledger-blue);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.chips .chip{transition:none}}

.fnav{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:34px;border-top:var(--rule);padding-top:20px;flex-wrap:wrap}
.fnav .hint{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;color:var(--ink-faint);text-transform:uppercase}

/* case-file abstract that fills as you type */
.casefile{position:sticky;top:24px}
.casefile .exhibit{font-size:.9rem}
.casefile dl{margin:0}
.casefile dt{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin-top:12px}
.casefile dd{margin:2px 0 0;border-bottom:1px dotted var(--feint-strong);padding-bottom:4px;min-height:1.4em;font-style:italic;color:var(--ink-soft)}
.casefile dd.filled{font-style:normal;color:var(--ink)}
@media (max-width:980px){.casefile{display:none}}

/* filed state */
.filed{display:none;text-align:center;padding:40px 10px 26px}
.filed.show{display:block}
.filed .bigstamp{
  display:inline-block;font-family:var(--mono);letter-spacing:.3em;text-transform:uppercase;
  font-size:clamp(1.4rem,4vw,2.2rem);color:var(--red);border:4px solid currentColor;border-radius:6px;
  padding:.5em .8em .42em;transform:rotate(-6deg);
  animation:thunk .35s cubic-bezier(.2,1.6,.4,1) both;
}
@keyframes thunk{from{transform:rotate(-6deg) scale(2.2);opacity:0}to{transform:rotate(-6deg) scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.filed .bigstamp{animation:none}}

/* ---------- Field-notes (blog) ---------- */
.notecard{display:block;text-decoration:none;padding:22px 0;border-bottom:var(--rule)}
.notecard:hover h3{color:var(--red-deep)}
.notecard .meta{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);display:flex;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.notecard .meta .no{color:var(--red)}
.notecard p{color:var(--ink-soft);margin:0;max-width:64ch}

/* article body */
.article{max-width:760px}
.article h2{margin-top:2.2em;padding-top:.6em;border-top:var(--rule)}
.article h3{margin-top:1.8em}
.article ul,.article ol{padding-left:1.3em;margin:0 0 1.2em}
.article li{margin:.4em 0}
.article table{width:100%;border-collapse:collapse;font-size:.92rem;margin:1.4em 0}
.article th{font-family:var(--mono);font-weight:400;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);text-align:left;padding:9px 10px;border-bottom:2px solid var(--ink)}
.article td{padding:10px;border-bottom:1px solid var(--feint);vertical-align:top}
.article blockquote{margin:1.6em 0;padding:.2em 0 .2em 1.2em;border-left:3px solid var(--red);font-style:italic;color:var(--ink-soft)}
.tldr{
  background:#fbf8ee;border:1px solid rgba(35,32,26,.32);box-shadow:3px 3px 0 rgba(35,32,26,.12);
  padding:18px 20px;margin:1.6em 0;border-radius:2px;
}
.tldr .t{font-family:var(--mono);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.tldr p{margin:0;font-size:.98rem}
.keyfig{font-family:var(--display);font-size:1.5em;color:var(--ink)}

/* ---------- Footer ---------- */
.colophon{padding-top:clamp(36px,5vw,60px);padding-bottom:34px;border-top:2px solid var(--ink)}
.colophon .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px}
@media (max-width:760px){.colophon .cols{grid-template-columns:1fr}}
.colophon h4{font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 10px;font-weight:400}
.colophon a{text-decoration:none;color:var(--ink-soft)}
.colophon a:hover{color:var(--ink)}
.colophon ul{list-style:none;margin:0;padding:0}
.colophon li{margin:.4em 0;font-size:.92rem}
.colophon .legal{margin-top:30px;padding-top:16px;border-top:var(--rule);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--ink-faint)}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* breadcrumb */
.crumb{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);padding-top:18px}
.crumb a{color:inherit;text-decoration:none}
.crumb a:hover{color:var(--ink)}
.crumb .sep{margin:0 8px;color:var(--feint-strong)}

/* utility */
.mt0{margin-top:0}.mb0{margin-bottom:0}
.tar{text-align:right}
.stack-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:26px;background:var(--paper);width:fit-content;padding:4px 0}

/* print: it is paper, after all */
@media print{
  body{background:#fff}
  .sheet{box-shadow:none;margin:0;max-width:none}
  .sheet::before{display:none}
  .coverband,.nav,.menu-btn,.btn,.stack-cta{display:none!important}
  .entry{border-bottom-color:#bbb}
}

/* ---------- form split layout (request-audit) ---------- */
.formsplit{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:980px){.formsplit{grid-template-columns:1fr}}
.pot{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}