/* ==========================================================================
   Zelo Algoritmico — brand stylesheet
   Palette + type derived from the company deck: graphite ground, acid lime,
   hand-drawn marker annotation, exposed hairline grid, zero radius.
   ========================================================================== */

:root{
  /* Ground — graphite with an olive bias so it sits under the lime */
  --ink:      #131410;
  --ink-2:    #1B1D17;
  --ink-3:    #23261E;
  --rule:     #31352B;
  --rule-soft:#22251D;

  /* Paper — warm bone for reading-dense bands */
  --bone:     #F1F0E9;
  --bone-2:   #E4E3D8;
  --bone-rule:#CFCEC1;

  /* Accent */
  --lime:     #D6F84B;
  --lime-dim: #B4D63C;
  --olive:    #8FB43A;

  /* Type colour */
  --on-ink:      #FFFFFF;
  --on-ink-dim:  #A5A89C;
  --on-ink-faint:#6E7266;
  --on-bone:     #1A1C15;
  --on-bone-dim: #55584C;

  /* Type */
  --display: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --body:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Rhythm */
  --wrap: 1280px;
  --pad: 32px;
  --band: clamp(64px, 8vw, 120px);
}

*,*::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:var(--ink);
  color:var(--on-ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100%; display:block; }
a{ color:inherit; }

::selection{ background:var(--lime); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:3px;
}

/* ---------- Layout primitives -------------------------------------------- */

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.band{
  border-top:1px solid var(--rule);
  padding-block:var(--band);
  position:relative;
}
.band--bone{
  background:var(--bone);
  color:var(--on-bone);
  border-top-color:var(--bone-rule);
}
.band--tight{ padding-block:clamp(48px,5vw,72px); }
.band--flush{ padding-block:0; }

/* Exposed hairline grid: 1px gaps rendered by the rule colour showing through */
.panels{
  display:grid;
  gap:1px;
  background:var(--rule);
  border-block:1px solid var(--rule);
}
.band--bone .panels{ background:var(--bone-rule); border-block-color:var(--bone-rule); }
.panels > *{
  background:var(--ink);
  padding:clamp(28px,3.4vw,48px);
}
.band--bone .panels > *{ background:var(--bone); }
.panels--2{ grid-template-columns:repeat(2,1fr); }
.panels--3{ grid-template-columns:repeat(3,1fr); }
.panels--4{ grid-template-columns:repeat(4,1fr); }

/* Two-up editorial split: sticky heading beside flowing content */
.split{
  display:grid;
  grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:clamp(32px,5vw,88px);
  align-items:start;
}
.split__aside{ position:sticky; top:104px; }

.stack{ display:grid; gap:20px; }
.stack--sm{ gap:12px; }
.stack--lg{ gap:36px; }

/* ---------- Type ---------------------------------------------------------- */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-0.028em;
  text-wrap:balance;
  margin:0;
}

.d1{ font-size:clamp(3rem, 8.2vw, 6.6rem); font-weight:700; }
.d2{ font-size:clamp(2.3rem, 5.2vw, 4rem); }
.d3{ font-size:clamp(1.6rem, 2.6vw, 2.25rem); letter-spacing:-0.022em; }
.d4{ font-size:clamp(1.12rem, 1.5vw, 1.32rem); letter-spacing:-0.015em; line-height:1.22; }

/* The deck ends its headlines in a full stop. Keep it. */
.dot{ color:var(--lime); }
.lime{ color:var(--lime); }

.eyebrow{
  font-family:var(--mono);
  font-size:0.688rem;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--lime);
  margin:0;
}
.eyebrow--muted{ color:var(--on-ink-faint); }
.band--bone .eyebrow{ color:var(--on-bone); }
.band--bone .eyebrow--muted{ color:var(--on-bone-dim); }

.lede{
  font-size:clamp(1.06rem,1.5vw,1.28rem);
  line-height:1.55;
  color:var(--on-ink-dim);
  max-width:62ch;
  margin:0;
}
.band--bone .lede{ color:var(--on-bone-dim); }

p{ margin:0; max-width:68ch; }
.muted{ color:var(--on-ink-dim); }
.band--bone .muted{ color:var(--on-bone-dim); }
.small{ font-size:0.875rem; line-height:1.6; }
.xs{ font-size:0.78rem; line-height:1.55; }

.num{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.01em;
}

/* ---------- Marker annotation (the deck's signature) ---------------------- */

.marker{ position:relative; display:inline-block; }
.marker svg{
  position:absolute;
  left:-4%;
  width:108%;
  height:auto;
  overflow:visible;
  pointer-events:none;
}
.marker--under svg{ bottom:-0.2em; }
.marker--circle svg{ top:50%; transform:translateY(-50%); left:-9%; width:119%; }

.marker path{
  fill:none;
  stroke:var(--lime);
  stroke-width:5;
  stroke-linecap:round;
}
/* On paper bands the acid lime washes out, so the annotation drops to the
   deck's secondary green — the way a highlighter reads on a printed page. */
.band--bone .marker path{ stroke:#7FA32E; }

html.js .marker path{
  stroke-dasharray:var(--len,1400);
  stroke-dashoffset:var(--len,1400);
  transition:stroke-dashoffset 1.05s cubic-bezier(.5,.1,.25,1);
}
html.js .marker path:nth-child(2){ transition-delay:.16s; }
html.js .marker.is-drawn path{ stroke-dashoffset:0; }
@media (prefers-reduced-motion: reduce){
  html.js .marker path{ transition:none; stroke-dashoffset:0; }
}

/* ---------- Buttons ------------------------------------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:0.75rem;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  text-decoration:none;
  padding:15px 26px;
  border:1px solid var(--lime);
  background:var(--lime);
  color:var(--ink);
  cursor:pointer;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover{ background:transparent; color:var(--lime); }
.btn:active{ transform:translateY(1px); }
.btn--ghost{
  background:transparent;
  color:var(--on-ink);
  border-color:var(--rule);
}
.btn--ghost:hover{ border-color:var(--lime); color:var(--lime); background:transparent; }
.band--bone .btn--ghost{ color:var(--on-bone); border-color:var(--bone-rule); }
.band--bone .btn--ghost:hover{ color:var(--on-bone); border-color:var(--on-bone); }

.btn__arrow{ transition:transform .18s ease; }
.btn:hover .btn__arrow{ transform:translateX(4px); }

.btnrow{ display:flex; flex-wrap:wrap; gap:12px; }

/* Text link with the deck's underline stroke */
.tlink{
  font-family:var(--mono);
  font-size:0.75rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--lime);
  display:inline-flex;
  align-items:center;
  gap:9px;
  border-bottom:1px solid transparent;
  padding-bottom:3px;
  transition:border-color .18s ease, gap .18s ease;
}
.tlink:hover{ border-bottom-color:var(--lime); gap:14px; }
.band--bone .tlink{ color:var(--on-bone); }
.band--bone .tlink:hover{ border-bottom-color:var(--on-bone); }

/* ---------- Masthead ------------------------------------------------------ */

.masthead{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(19,20,16,.86);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--rule);
}
.masthead__in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:72px;
}

.logo{ text-decoration:none; display:block; line-height:1; flex:none; }
.logo__word{
  display:block;
  font-family:var(--display);
  font-weight:700;
  font-size:1.02rem;
  letter-spacing:0.01em;
  color:#fff;
  white-space:nowrap;
}
.logo__word em{ font-style:normal; color:var(--lime); }
.logo__sub{
  display:block;
  font-family:var(--mono);
  font-size:0.5rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--on-ink-faint);
  margin-top:5px;
}

.nav{ display:flex; align-items:center; gap:4px; }
.nav a{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--on-ink-dim);
  padding:9px 13px;
  transition:color .16s ease;
  white-space:nowrap;
}
.nav a:hover{ color:#fff; }
.nav a.is-active{ color:var(--lime); }
/* The in-nav Contact button exists only for the mobile drawer. */
.nav .btn{ display:none; }
.masthead .btn{ padding:12px 20px; }

.burger{
  display:none;
  width:44px; height:44px;
  border:1px solid var(--rule);
  background:transparent;
  cursor:pointer;
  padding:0;
  place-items:center;
}
.burger span{
  display:block; width:18px; height:1.5px; background:#fff;
  transition:transform .22s ease, opacity .18s ease;
}
.burger span + span{ margin-top:5px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ---------- Hero ---------------------------------------------------------- */

.hero{
  position:relative;
  padding-block:clamp(72px,10vw,132px) clamp(56px,7vw,92px);
  overflow:hidden;
}
.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(115% 85% at 78% 12%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(115% 85% at 78% 12%, #000 0%, transparent 72%);
  pointer-events:none;
}
.hero__in{ position:relative; }

/* "Algoritmico" signal bars — the one ambient motion on the page */
.signal{
  display:flex; align-items:flex-end; gap:5px; height:56px;
}
.signal i{
  display:block; width:5px; background:var(--lime); opacity:.85;
  animation:sig 2.4s ease-in-out infinite;
  transform-origin:bottom;
}
@keyframes sig{ 0%,100%{ height:12%; } 50%{ height:100%; } }
@media (prefers-reduced-motion: reduce){ .signal i{ animation:none; height:56%; } }

/* ---------- Stat strip ---------------------------------------------------- */

.stat__k{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.1rem,3.6vw,3.1rem);
  line-height:1;
  letter-spacing:-0.035em;
  color:var(--lime);
  font-variant-numeric:tabular-nums;
}
.band--bone .stat__k{ color:var(--on-bone); }
.stat__l{
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.11em;
  text-transform:uppercase;
  color:var(--on-ink-dim);
  margin-top:14px;
  line-height:1.5;
}
.band--bone .stat__l{ color:var(--on-bone-dim); }

/* ---------- Service / feature panels -------------------------------------- */

.svc{ display:grid; gap:16px; align-content:start; }
.svc__ix{
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.14em;
  color:var(--on-ink-faint);
}
.band--bone .svc__ix{ color:var(--on-bone-dim); }
.svc__ico{ color:var(--lime); }
.band--bone .svc__ico{ color:var(--on-bone); }
.svc ul{ margin:0; padding:0; list-style:none; display:grid; gap:9px; }
.svc ul li{
  font-size:0.875rem;
  color:var(--on-ink-dim);
  padding-left:18px;
  position:relative;
}
.band--bone .svc ul li{ color:var(--on-bone-dim); }
.svc ul li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:1.5px; background:var(--lime);
}
.band--bone .svc ul li::before{ background:var(--olive); }

/* Panel that lifts on hover */
.panels > .svc{ transition:background .2s ease; }
.panels > .svc:hover{ background:var(--ink-2); }
.band--bone .panels > .svc:hover{ background:var(--bone-2); }

/* ---------- Checklist ----------------------------------------------------- */

.checks{ margin:0; padding:0; list-style:none; display:grid; gap:20px; }
.checks li{ display:grid; grid-template-columns:26px 1fr; gap:16px; align-items:start; }
.checks svg{ margin-top:3px; color:var(--lime); flex:none; }
.band--bone .checks svg{ color:var(--olive); }
.checks b{ font-weight:600; color:inherit; }
.checks span{ color:var(--on-ink-dim); }
.band--bone .checks span{ color:var(--on-bone-dim); }

/* ---------- Journey timeline ---------------------------------------------- */

.journey{ display:grid; gap:1px; background:var(--bone-rule); border-block:1px solid var(--bone-rule); }
.stage{
  background:var(--bone);
  display:grid;
  grid-template-columns:minmax(120px,168px) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,3vw,48px);
  padding:clamp(28px,3.2vw,44px) clamp(24px,3vw,40px);
  transition:background .2s ease;
}
.stage:hover{ background:var(--bone-2); }
.stage__no{
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--on-bone-dim);
  display:grid; gap:10px; align-content:start;
}
.stage__dot{
  width:34px; height:34px; border:1.5px solid var(--on-bone);
  border-radius:50%;
  display:grid; place-items:center;
  font-size:0.8rem; font-weight:600; color:var(--on-bone);
  background:var(--lime);
}
.stage__when{ color:var(--on-bone-dim); }
.stage__body{ display:grid; gap:12px; align-content:start; }
.stage__out{
  display:grid; gap:10px; align-content:start;
  border-left:1px solid var(--bone-rule);
  padding-left:clamp(20px,2.4vw,32px);
}
.stage__out .eyebrow{ color:var(--on-bone-dim); }
.stage__out ul{ margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.stage__out li{
  font-size:0.85rem; color:var(--on-bone-dim);
  padding-left:16px; position:relative;
}
.stage__out li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:6px; height:6px; background:var(--olive);
}

/* ---------- Route board (visa data) --------------------------------------- */

.boardwrap{ overflow-x:auto; border:1px solid var(--rule); }
.board{
  width:100%;
  min-width:720px;
  border-collapse:collapse;
  font-size:0.875rem;
}
.board th,.board td{
  text-align:left;
  padding:16px 20px;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
}
.board thead th{
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--on-ink-faint);
  font-weight:500;
  background:var(--ink-2);
  white-space:nowrap;
}
.board tbody tr:last-child td{ border-bottom:0; }
.board tbody tr{ transition:background .16s ease; }
.board tbody tr:hover{ background:var(--ink-2); }
.board td:first-child{ font-weight:600; white-space:nowrap; }
.board .fig{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  color:var(--lime);
  white-space:nowrap;
}
.board .note{ color:var(--on-ink-dim); }

.pill{
  display:inline-block;
  font-family:var(--mono);
  font-size:0.63rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:4px 9px;
  border:1px solid currentColor;
  white-space:nowrap;
}
.pill--open{ color:var(--lime); }
.pill--shut{ color:#E4735E; }

/* ---------- Pricing ------------------------------------------------------- */

.tier{ display:grid; gap:20px; align-content:start; }
.tier__price{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.9rem,3vw,2.5rem);
  letter-spacing:-0.03em;
  line-height:1;
}
.tier__price small{
  display:block;
  font-family:var(--mono);
  font-size:0.68rem;
  font-weight:500;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--on-ink-dim);
  margin-top:12px;
  letter-spacing:.12em;
}
.tier--feature{ background:var(--ink-2) !important; }
.tier--feature .tier__price{ color:var(--lime); }
/* Sits on the index line so every tier's title and price stay on one baseline. */
.svc__ix{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tier__flag{
  font-family:var(--mono);
  font-size:0.6rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--lime);
  padding:4px 8px;
}

/* ---------- Quote / callout ----------------------------------------------- */

.callout{
  border-left:2px solid var(--lime);
  padding:6px 0 6px 24px;
}
.band--bone .callout{ border-left-color:var(--olive); }

.notice{
  border:1px solid var(--rule);
  background:var(--ink-2);
  padding:24px 26px;
  display:grid;
  gap:10px;
}
.band--bone .notice{ border-color:var(--bone-rule); background:var(--bone-2); }

/* ---------- Accordion (FAQ) ----------------------------------------------- */

.faq{ border-top:1px solid var(--rule); }
.band--bone .faq{ border-top-color:var(--bone-rule); }
.faq details{ border-bottom:1px solid var(--rule); }
.band--bone .faq details{ border-bottom-color:var(--bone-rule); }
.faq summary{
  list-style:none;
  cursor:pointer;
  padding:22px 44px 22px 0;
  position:relative;
  font-family:var(--display);
  font-weight:600;
  font-size:1.06rem;
  letter-spacing:-0.015em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+";
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:1.25rem; color:var(--lime);
  transition:transform .2s ease;
}
.band--bone .faq summary::after{ color:var(--olive); }
.faq details[open] summary::after{ content:"–"; }
.faq details > div{ padding:0 44px 26px 0; color:var(--on-ink-dim); font-size:0.94rem; }
.band--bone .faq details > div{ color:var(--on-bone-dim); }

/* ---------- Form ---------------------------------------------------------- */

.form{ display:grid; gap:20px; }
.field{ display:grid; gap:9px; }
.field label{
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--on-ink-dim);
}
.field input,.field select,.field textarea{
  font-family:var(--body);
  font-size:0.95rem;
  color:#fff;
  background:var(--ink-2);
  border:1px solid var(--rule);
  padding:14px 16px;
  width:100%;
  border-radius:0;
  transition:border-color .16s ease;
}
.field textarea{ min-height:132px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--lime);
}
.field input::placeholder,.field textarea::placeholder{ color:var(--on-ink-faint); }
.field select{ appearance:none; cursor:pointer; }
.fieldrow{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.formnote{ font-size:0.8rem; color:var(--on-ink-faint); }
.formok{
  border:1px solid var(--lime);
  background:rgba(214,248,75,.07);
  padding:18px 20px;
  color:var(--lime);
  font-size:0.9rem;
}
.formerr{
  border:1px solid #E4735E;
  background:rgba(228,115,94,.08);
  padding:18px 20px;
  color:#E4735E;
  font-size:0.9rem;
}
.formerr a{ color:inherit; }
/* Honeypot: present for bots, never shown to or focusable by a person. */
.hp{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* ---------- Contact rows -------------------------------------------------- */

.crow{
  display:flex; align-items:center; gap:16px;
  padding:20px 0;
  border-bottom:1px solid var(--rule);
  text-decoration:none;
}
.crow:last-child{ border-bottom:0; }
.crow__ico{
  width:38px; height:38px; flex:none;
  display:grid; place-items:center;
  background:var(--lime); color:var(--ink);
}
/* Icons here sit on the lime chip, so they must not inherit the lime accent. */
.crow__ico .svc__ico{ color:var(--ink); }
.crow > span:last-child{ display:block; }
.crow__l{ display:block; font-family:var(--mono); font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--on-ink-faint); }
.crow__v{ display:block; font-size:1rem; margin-top:3px; transition:color .16s ease; }
a.crow:hover .crow__v{ color:var(--lime); }

/* ---------- Footer -------------------------------------------------------- */

.foot{ border-top:1px solid var(--rule); background:var(--ink); }
.foot__top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:48px;
  padding-block:clamp(48px,6vw,80px);
}
.foot h4{
  font-family:var(--mono);
  font-size:0.68rem;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--on-ink-faint);
  margin:0 0 18px;
}
.foot ul{ margin:0; padding:0; list-style:none; display:grid; gap:11px; }
.foot a{ color:var(--on-ink-dim); text-decoration:none; font-size:0.9rem; transition:color .16s ease; }
.foot a:hover{ color:var(--lime); }
.foot__bot{
  border-top:1px solid var(--rule);
  padding-block:24px;
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between;
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.09em;
  text-transform:uppercase;
  color:var(--on-ink-faint);
}

/* ---------- Reveal on scroll ---------------------------------------------- */

/* Hidden only when scripting is available, so a failed script never blanks the page. */
html.js .rv{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
html.js .rv.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html.js .rv{ opacity:1; transform:none; transition:none; }
}

/* ---------- Responsive ---------------------------------------------------- */

@media (max-width:1080px){
  .panels--4{ grid-template-columns:repeat(2,1fr); }
  .foot__top{ grid-template-columns:1fr 1fr; gap:40px 32px; }
}

@media (max-width:900px){
  :root{ --pad:22px; }
  .nav{
    position:fixed;
    inset:72px 0 auto 0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--ink);
    border-bottom:1px solid var(--rule);
    padding:8px 22px 24px;
    transform:translateY(-115%);
    transition:transform .3s cubic-bezier(.3,.8,.3,1);
    max-height:calc(100dvh - 72px);
    overflow-y:auto;
  }
  .nav.is-open{ transform:none; }
  .nav a{ padding:16px 0; border-bottom:1px solid var(--rule-soft); font-size:0.85rem; }
  .nav .btn{ display:inline-flex; margin-top:18px; justify-content:center; }
  .burger{ display:grid; }
  .masthead__in > .btn{ display:none; }
  .masthead .logo__sub{ display:none; }
  .masthead .logo__word{ font-size:0.95rem; }

  .split{ grid-template-columns:1fr; gap:28px; }
  .split__aside{ position:static; }
  .panels--3,.panels--2{ grid-template-columns:1fr; }
  .stage{ grid-template-columns:1fr; gap:20px; }
  .stage__out{ border-left:0; border-top:1px solid var(--bone-rule); padding-left:0; padding-top:20px; }
  .stage__no{ grid-auto-flow:column; justify-content:start; align-items:center; gap:14px; }
}

@media (max-width:640px){
  .masthead__in{ gap:12px; }
  .masthead .logo__word{ font-size:0.86rem; }
  .panels--4{ grid-template-columns:1fr; }
  .fieldrow{ grid-template-columns:1fr; }
  .foot__top{ grid-template-columns:1fr; gap:34px; }
  .board{ min-width:620px; }
}