/* Shared Mihkel Rembel design system — matches the homepage (paper / ink / butter). */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Archivo:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  --paper:#f8f6e3;
  --ink:#1d1d1b;
  --ink-60:rgba(29,29,27,.66);
  --ink-35:rgba(29,29,27,.46);
  --hair:rgba(29,29,27,.16);
  --charcoal:#202020;
  --cream-on-dark:#f2f1e2;
  --dim-on-dark:rgba(242,241,226,.62);
  --hair-dark:rgba(242,241,226,.15);
  --butter:#f2e388;
  --gold:#b0a057;
  --mono:'JetBrains Mono','Courier New',monospace;
  --sans:'Archivo',Arial,sans-serif;

  /* legacy token remaps so existing markup inherits the new system */
  --cream:#f8f6e3; --cream-2:#f2f0dc; --cream-dark:#f2f0dc; --white:#fdfcf1; --bg:#f8f6e3; --panel:#f2f0dc;
  --ink-soft:rgba(29,29,27,.66); --ink-2:rgba(29,29,27,.66); --ink-3:rgba(29,29,27,.46);
  --soft:rgba(29,29,27,.66); --ink-deep:#202020;
  --line:rgba(29,29,27,.16); --line-strong:rgba(29,29,27,.28);
  --orange:#1d1d1b; --orange-2:#1d1d1b; --orange-3:#b0a057; --orange-dark:#000; --orange-deep:#000; --orange-soft:#b0a057;
  --or:#1d1d1b; --ordark:#000; --green:#1d1d1b; --greendark:#000;
  --radius:0px;
  --shadow:3px 3px 0 rgba(29,29,27,1);
  --shadow-lg:5px 5px 0 rgba(29,29,27,1);
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  background-image:radial-gradient(rgba(25,25,25,.05) 1px,transparent 1px);
  background-size:22px 22px;
}
h1,h2,h3,.kicker,.eyebrow,.s-kick{font-family:var(--mono);letter-spacing:-.01em}
h1,h2,h3{font-weight:500}
.eyebrow,.kicker,.s-kick{font-weight:500;color:var(--ink-35);letter-spacing:.2em;text-transform:uppercase}
h1 .hl,.hero h1 em{background:var(--butter);color:var(--ink);font-style:normal;padding:0 .12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* squared, hard-shadow surfaces */
.card,.chip,.stage-box,.verdict,.tab,.strip .s{border-radius:0 !important}
.card,.stage-box{background:var(--paper);border:1.5px solid var(--ink);box-shadow:none}
.verdict{background:var(--paper);border:1.5px solid var(--ink);border-left:5px solid var(--ink);box-shadow:none}
.chip,.strip .s{background:var(--paper);border:1px solid var(--ink);box-shadow:none}
.chip .cv{color:var(--ink)}

/* buttons */
.btn,.nav-back,.tab{border-radius:0 !important;font-family:var(--mono);letter-spacing:.04em}
.btn{border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-weight:700;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}
.btn.solid,.buy,.go{background:var(--butter) !important;color:var(--ink) !important;border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink) !important;border-radius:0 !important;font-family:var(--mono);font-weight:700}
.btn.ghost,.btn.line{background:transparent !important;color:var(--ink) !important;border:1px solid var(--ink);box-shadow:none}
.tab{border:1px solid var(--ink);color:var(--ink);font-weight:500}
.tab.active{background:var(--ink);color:var(--cream-on-dark)}
.tab.active .n{color:var(--butter)}

/* dark bands get the homepage grid-paper treatment */
.close,.band,.dark{background:var(--charcoal) !important;color:var(--cream-on-dark) !important;
  background-image:linear-gradient(rgba(242,237,226,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(242,237,226,.035) 1px,transparent 1px) !important;
  background-size:44px 44px !important;background-position:center}
.close h2,.close h2 .hl{color:var(--cream-on-dark)}
.close h2 .hl{background:var(--butter);color:var(--ink)}

/* shared top nav (same cluster as homepage) */
.mrnav{position:sticky;top:0;z-index:80;background:rgba(248,246,227,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--hair)}
.mrnav .mrwrap{max-width:1180px;margin:0 auto;padding:0 40px;display:flex;justify-content:space-between;align-items:center;height:64px}
.mrnav .wordmark{font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:.02em;color:var(--ink);text-decoration:none}
.mrnav .wordmark span{color:var(--ink-35)}
.mrnav .cluster{display:flex;align-items:stretch}
.mrnav .cluster nav{display:flex;align-items:center;background:var(--ink);padding:0 6px;position:static;border:none;box-shadow:none;height:auto}
.mrnav .cluster nav a{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--cream-on-dark);text-decoration:none;padding:10px 12px}
.mrnav .cluster nav a:hover,.mrnav .cluster nav a[aria-current="page"]{color:var(--butter)}
.mrnav .cluster .mrcta{display:flex;align-items:center;background:var(--butter);color:var(--ink);border:1.5px solid var(--ink);border-left:none;
  font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.04em;padding:0 20px;text-decoration:none}
@media(max-width:900px){.mrnav .mrwrap{padding:0 22px}.mrnav .cluster nav{display:none}}
.close h2,.band h2{line-height:1.3}
.close h2 em,.band h2 em{background:var(--butter);color:var(--ink) !important;font-style:normal;padding:0 .12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.prompt{border-radius:0 !important;border:1.5px solid var(--ink) !important;background:var(--paper) !important;box-shadow:none !important}
.blank{color:var(--ink) !important;border-bottom-color:var(--ink) !important}
.blank:empty::before{color:var(--ink-35) !important}
.chip:hover{border-color:var(--ink) !important;color:var(--ink) !important}
.proto{background:var(--ink) !important;color:var(--butter) !important;font-family:var(--mono)}
.preview,.offer{border-radius:0 !important;border:1.5px solid var(--ink) !important;box-shadow:none !important}
/* shared footer nav row */
.mrfoot{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;text-align:center;color:var(--ink-35);padding:26px 20px 40px;background:var(--paper);border-top:1px solid var(--hair)}
.mrfoot a{color:var(--ink-60);text-decoration:none;padding:0 2px}
.mrfoot a:hover,.mrfoot a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
/* mobile hamburger (subpages) */
.navtoggle{display:none;align-items:center;justify-content:center;gap:4px;flex-direction:column;width:46px;background:var(--ink);border:1.5px solid var(--ink);cursor:pointer;padding:0}
.navtoggle span{display:block;width:18px;height:2px;background:var(--butter);transition:transform .2s,opacity .2s}
.cluster.open .navtoggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.cluster.open .navtoggle span:nth-child(2){opacity:0}
.cluster.open .navtoggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:960px){
  .navtoggle{display:flex}
  .mrnav .cluster nav{display:none !important;position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--ink);padding:6px 0;border-bottom:1.5px solid var(--ink);z-index:90}
  .mrnav .cluster.open nav{display:flex !important}
  .mrnav .cluster nav a{padding:13px 22px;font-size:13px;border-left:3px solid transparent}
  .mrnav .cluster nav a[aria-current="page"]{color:var(--butter);border-left-color:var(--butter);background:rgba(255,255,255,.06);font-weight:700}
  .mrnav .cluster .mrcta{padding:0 14px;font-size:12px}

}
@media (prefers-reduced-motion: reduce){.navtoggle span{transition:none}}
.mrnav .cluster{align-items:stretch}
.mrnav .navtoggle{min-height:40px}