/* ============================================================
   AMZAA — master stylesheet for the full site
   Light glass. Warm ink on paper.
   GREEN  #2f8f5b = the deterministic floor. No switch.
   VIOLET #6a33c7 = the AI rail. Killable.
   RED    #b3402f = the kill, and a broken seal.
   Colour carries the argument. It is not decoration.
   ============================================================ */

:root{
  --ink:#1d1a17;
  --paper:#f6f3ee;
  --muted:#8a8178;
  --body:#57514a;
  --green:#2f8f5b;
  --violet:#6a33c7;
  --red:#b3402f;
  --glass:rgba(255,255,255,.66);
  --hair:rgba(29,26,23,.10);
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

.wash{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(760px 420px at 10% -6%, rgba(106,51,199,.06), transparent 62%),
    radial-gradient(700px 460px at 94% 6%, rgba(47,143,91,.06), transparent 60%);
}
.page{position:relative; z-index:1}
section{max-width:1120px; margin:0 auto; padding:84px 24px}
.narrow{max-width:820px}

.glass{
  background:var(--glass);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--hair); border-radius:18px;
}

/* ---------------- nav ---------------- */
nav{
  position:sticky; top:0; z-index:60;
  background:rgba(246,243,238,.82);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--hair);
}
.navbar{
  max-width:1200px; margin:0 auto; padding:15px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); flex-shrink:0}
.brand span{font-weight:700; font-size:18px; letter-spacing:-.02em}
.navlinks{display:flex; gap:22px; align-items:center}
.navlinks a{color:var(--muted); text-decoration:none; font-size:14px; font-weight:500; transition:color .2s; white-space:nowrap}
.navlinks a:hover, .navlinks a.on{color:var(--ink)}

/* dropdown */
.nav-dd{position:relative}
.nav-dd > a{display:inline-flex; align-items:center; gap:5px; cursor:pointer}
.nav-dd > a::after{content:"›"; transform:rotate(90deg); font-size:14px; opacity:.6; transition:transform .2s}
.nav-dd:hover > a::after{transform:rotate(90deg) translateX(1px)}
.dd-menu{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:230px; padding:8px; border-radius:14px;
  background:rgba(252,250,246,.96); border:1px solid var(--hair);
  box-shadow:0 18px 44px rgba(29,26,23,.14);
  backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
  opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease;
}
.nav-dd:hover .dd-menu,
.nav-dd.open .dd-menu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.dd-menu a{
  display:block; padding:9px 12px; border-radius:9px; color:var(--body);
  font-size:13.5px; font-weight:500; text-decoration:none; white-space:nowrap; transition:background .15s, color .15s;
}
.dd-menu a:hover{background:rgba(29,26,23,.05); color:var(--ink)}
.dd-menu a .sub{display:block; font-size:11px; color:var(--muted); font-weight:400; margin-top:1px}

.menu-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--ink)}
.menu-toggle svg{display:block}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:7px; padding:13px 22px; border-radius:999px;
  font-family:var(--sans); font-size:15px; font-weight:600;
  text-decoration:none; cursor:pointer; border:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--ink); color:var(--paper); box-shadow:0 4px 14px rgba(29,26,23,.14)}
.btn-primary:hover{box-shadow:0 10px 28px rgba(29,26,23,.24)}
.btn-ghost{
  background:var(--glass); color:var(--ink); border:1px solid var(--hair);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.btn-ghost:hover{background:rgba(255,255,255,.9)}
.btn-sm{padding:10px 18px; font-size:14px}

/* ---------------- type ---------------- */
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-bottom:18px; display:inline-flex;
}
h1{font-size:56px; line-height:1.06; letter-spacing:-.035em; font-weight:700; margin:0 0 26px}
h1 .soft{color:var(--muted); font-weight:400}
h2{font-size:35px; line-height:1.15; letter-spacing:-.028em; font-weight:700; margin:0 0 16px}
h3{font-size:21px; line-height:1.26; letter-spacing:-.02em; font-weight:650; margin:0 0 10px}
.lede{font-size:19px; line-height:1.6; color:var(--body); max-width:660px; margin:0 0 34px}
.prose{font-size:17px; line-height:1.64; color:var(--body); margin:0 0 18px}
.prose:last-child{margin-bottom:0}
.prose.strong{color:var(--ink); font-weight:600}
.prose.small{font-size:14px; color:var(--muted)}
p{margin:0}
a.inline{color:var(--green); text-decoration:none; font-weight:600}
a.inline:hover{text-decoration:underline}

.pill{
  display:inline-flex; align-items:center; padding:5px 12px; border-radius:999px;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; white-space:nowrap;
}
.pill-green{color:var(--green); border:1px solid rgba(47,143,91,.2); background:rgba(47,143,91,.05)}
.pill-violet{color:var(--violet); border:1px solid rgba(106,51,199,.2); background:rgba(106,51,199,.05)}
.pill-red{color:var(--red); border:1px solid rgba(179,64,47,.22); background:rgba(179,64,47,.06)}
.pill-ink{color:var(--muted); border:1px solid var(--hair); background:rgba(29,26,23,.03)}

/* ---------------- the one punch ---------------- */
.punch{
  font-size:44px; line-height:1.16; letter-spacing:-.03em; font-weight:700;
  max-width:900px; padding:40px 0;
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
}
.punch .hit{color:var(--green)}

/* ---------------- grids ---------------- */
.two{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}
.two.center{align-items:center}
.twocard{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.three{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.four{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}

.card{padding:28px; border-radius:16px; border:1px solid var(--hair); background:rgba(255,255,255,.58)}
.card-green{background:linear-gradient(180deg, rgba(47,143,91,.05), var(--glass) 55%); border:1px solid rgba(47,143,91,.2)}
.card-violet{background:linear-gradient(180deg, rgba(106,51,199,.05), var(--glass) 55%); border:1px solid rgba(106,51,199,.2)}
.card-red{background:linear-gradient(180deg, rgba(179,64,47,.045), var(--glass) 55%); border:1px solid rgba(179,64,47,.2)}
.card p{font-size:15.5px; line-height:1.62; color:var(--body)}

/* chain / kv rows */
.chain{font-family:var(--mono); font-size:12.5px; line-height:1.9}
.chain > div{display:grid; grid-template-columns:118px 1fr; gap:16px; padding:12px 0; border-top:1px solid var(--hair); align-items:baseline}
.chain > div:first-child{border-top:none}
.chain .w{color:var(--muted); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase}
.chain .x{color:var(--ink)}

/* spec table */
.spec{font-family:var(--mono); font-size:12.5px; line-height:2; color:var(--body)}
.spec > div{display:grid; grid-template-columns:88px 1fr; gap:14px; padding:6px 0; border-top:1px solid var(--hair)}
.spec > div:first-child{border-top:none}
.spec .k{color:var(--muted); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; padding-top:4px}
.spec .v{color:var(--ink)}

/* claims strip */
.claims{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:18px; overflow:hidden}
.claim{background:rgba(255,255,255,.62); padding:28px 26px}
.claim .num{font-size:38px; font-weight:700; letter-spacing:-.03em; color:var(--ink); line-height:1; margin-bottom:10px}
.claim .num.g{color:var(--green)}
.claim .lab{font-size:14px; line-height:1.5; color:var(--body)}
.claim .lab b{color:var(--ink); font-weight:600}

/* why-now band */
.why-now{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.wn{padding:30px; border-radius:16px; border:1px solid var(--hair); background:rgba(255,255,255,.6)}
.wn.today{background:linear-gradient(180deg, rgba(179,64,47,.05), var(--glass) 55%); border-color:rgba(179,64,47,.2)}
.wn.soon{background:linear-gradient(180deg, rgba(106,51,199,.05), var(--glass) 55%); border-color:rgba(106,51,199,.2)}
.wn .tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px; display:inline-flex; padding:4px 11px; border-radius:999px}
.wn.today .tag{color:var(--red); background:rgba(179,64,47,.08); border:1px solid rgba(179,64,47,.25)}
.wn.soon .tag{color:var(--violet); background:rgba(106,51,199,.08); border:1px solid rgba(106,51,199,.25)}
.wn .said{font-size:21px; font-weight:650; letter-spacing:-.02em; line-height:1.32; margin-bottom:14px; color:var(--ink)}
.wn .then{font-size:15.5px; line-height:1.62; color:var(--body)}
.wn .then b{color:var(--ink); font-weight:600}

/* benefit rows */
.benefits{display:flex; flex-direction:column; gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:18px; overflow:hidden}
.benefit{background:rgba(255,255,255,.62); display:grid; grid-template-columns:1fr 1fr}
.benefit .dread{padding:26px 28px; border-right:1px solid var(--hair)}
.benefit .answer{padding:26px 28px; background:rgba(47,143,91,.03)}
.benefit .who{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:10px}
.benefit .fear{font-size:17px; font-weight:600; line-height:1.4; color:var(--ink)}
.benefit .a-tag{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--green); margin-bottom:10px}
.benefit .fix{font-size:15.5px; line-height:1.6; color:var(--body)}
.benefit .fix b{color:var(--ink); font-weight:600}

/* solution index grid */
.solgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:18px; overflow:hidden}
.sol{background:rgba(255,255,255,.62); padding:24px; transition:background .2s; text-decoration:none; display:block}
.sol:hover{background:rgba(255,255,255,.92)}
.sol .n{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:10px}
.sol .t{font-size:17px; font-weight:650; letter-spacing:-.015em; margin-bottom:6px; color:var(--ink)}
.sol .d{font-size:14px; line-height:1.55; color:var(--body)}

/* horizon */
.horizon{display:grid; gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:18px; overflow:hidden}
.hz{background:rgba(255,255,255,.62); padding:26px 28px; display:grid; grid-template-columns:130px 1fr; gap:24px; align-items:baseline}
.hz .when{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.hz .when.now{color:var(--green)}
.hz .what h3{margin-bottom:6px; font-size:19px}
.hz .what p{font-size:15px; line-height:1.6; color:var(--body)}

/* ---------------- kill-switch demo ---------------- */
.switchbar{padding:22px 26px; border-bottom:1px solid var(--hair); display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; background:rgba(106,51,199,.03); transition:background .5s ease}
.switchbar.dead{background:rgba(179,64,47,.03)}
.status{display:flex; align-items:center; gap:12px}
.dot{width:9px; height:9px; border-radius:999px; background:var(--violet); box-shadow:0 0 0 5px rgba(106,51,199,.12); transition:all .4s ease}
.switchbar.dead .dot{background:var(--red); box-shadow:0 0 0 5px rgba(179,64,47,.12)}
.statustext{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--violet); font-weight:600; transition:color .4s}
.switchbar.dead .statustext{color:var(--red)}
.killbtn{font-family:var(--sans); font-size:14px; font-weight:650; padding:11px 20px; border-radius:999px; cursor:pointer; border:1px solid rgba(179,64,47,.27); background:rgba(179,64,47,.06); color:var(--red); transition:all .25s ease}
.killbtn:hover{background:rgba(179,64,47,.11)}
.killbtn.resume{border-color:rgba(47,143,91,.27); background:rgba(47,143,91,.06); color:var(--green)}
.killbtn:disabled{cursor:wait; opacity:.7}
.split{display:grid; grid-template-columns:1fr 1fr}
.rail{padding:24px 26px 28px; min-height:238px}
.rail-left{border-right:1px solid var(--hair)}
.rail-right{background:linear-gradient(180deg, rgba(47,143,91,.04), transparent 70%)}
.railhead{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; flex-wrap:wrap}
.railtag{font-family:var(--mono); font-size:10.5px; color:var(--muted)}
.railtag.on{color:var(--green)}
.log{font-family:var(--mono); font-size:11.5px; line-height:1.7; color:var(--body); padding:5px 0; border-bottom:1px solid var(--hair); animation:row .3s ease both}
@keyframes row{from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none}}
.notrace{font-family:var(--mono); font-size:12px; line-height:1.9; color:var(--muted); padding-top:8px}
.notrace .head{color:var(--red); margin-bottom:10px}
.notrace .kicker{color:var(--ink); display:block; padding-top:8px}
.floornote{font-size:13.5px; line-height:1.6; color:var(--muted); padding-top:14px; transition:color .5s ease}
.floornote.dead{color:var(--green); font-weight:600}

/* rail diagram */
.railbox{padding:40px; border-radius:18px; background:linear-gradient(160deg, rgba(106,51,199,.05), var(--glass) 50%); border:1px solid rgba(106,51,199,.16); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4)}
.flow{display:flex; align-items:center; flex-wrap:wrap; font-family:var(--mono); font-size:12px; margin-bottom:32px}
.node{padding:12px 16px; border-radius:12px; background:rgba(255,255,255,.85); text-align:center; min-width:116px}
.node .l{font-weight:600; margin-bottom:3px}
.node .n{color:var(--muted); font-size:10px}
.node.v{border:1px solid rgba(106,51,199,.2)} .node.v .l{color:var(--violet)}
.node.i{border:1px solid var(--hair)} .node.i .l{color:var(--ink)}
.node.g{border:1px solid rgba(47,143,91,.2)} .node.g .l{color:var(--green)}
.link{width:24px; height:1px; background:var(--hair); flex-shrink:0}
.facts{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.fact{padding:20px 22px; border-radius:14px; background:rgba(255,255,255,.66); border:1px solid var(--hair)}
.fact .h{font-size:15px; font-weight:650; margin-bottom:7px; letter-spacing:-.01em}
.fact .p{font-size:14px; line-height:1.6; color:var(--body)}
.statement{font-size:25px; line-height:1.44; letter-spacing:-.015em; color:var(--ink); margin:0 0 22px; font-weight:500; max-width:820px}

/* ---------------- tamper ledger ---------------- */
.ledger{font-family:var(--mono); font-size:12px; line-height:1.5}
.ledger .row{display:grid; grid-template-columns:70px 1fr auto; gap:16px; padding:12px 16px; border-bottom:1px solid var(--hair); align-items:center; transition:background .3s ease}
.ledger .row:last-child{border-bottom:none}
.ledger .row.tampered{background:rgba(179,64,47,.07)}
.ledger .seq{color:var(--muted); font-size:10.5px}
.ledger .body{color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ledger .body .edit{color:var(--red); font-weight:600}
.ledger .hash{font-size:10px; color:var(--green); white-space:nowrap; letter-spacing:.02em}
.ledger .hash.broken{color:var(--red)}
.ledger .hash .lbl{color:var(--muted); margin-right:6px}
.verdict{padding:18px 26px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid var(--hair); background:rgba(47,143,91,.05); transition:background .4s ease}
.verdict.broken{background:rgba(179,64,47,.06)}
.verdict .v-text{font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--green); letter-spacing:.02em}
.verdict.broken .v-text{color:var(--red)}
.verdict .v-actions{display:flex; gap:10px; flex-wrap:wrap}
.tbtn{font-family:var(--sans); font-size:13.5px; font-weight:650; padding:10px 18px; border-radius:999px; cursor:pointer; border:1px solid rgba(179,64,47,.27); background:rgba(179,64,47,.06); color:var(--red); transition:all .2s ease}
.tbtn:hover{background:rgba(179,64,47,.12)}
.tbtn.verify{border-color:rgba(47,143,91,.3); background:rgba(47,143,91,.07); color:var(--green)}
.tbtn.ghost{border-color:var(--hair); background:rgba(255,255,255,.7); color:var(--ink)}
.tbtn:disabled{opacity:.5; cursor:not-allowed}

/* ---------------- page hero band (inner pages) ---------------- */
.hero-band{padding-top:96px; padding-bottom:40px}
.kicker-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px}

/* section divider label */
.divider{display:flex; align-items:center; gap:16px; margin:0 auto; max-width:1120px; padding:0 24px}
.divider .line{flex:1; height:1px; background:var(--hair)}
.divider .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}

/* ---------------- form ---------------- */
form{max-width:520px}
.field{margin-bottom:16px}
.field label{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; display:block}
.field input, .field textarea{width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--hair); background:rgba(255,255,255,.85); color:var(--ink); font-family:var(--sans); font-size:15px; outline:none}
.field textarea{resize:vertical; min-height:88px}
.namerow{display:grid; grid-template-columns:1fr 1fr; gap:16px}
/* honeypot — hidden from humans, catches bots */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ---------------- modal ---------------- */
.modal-overlay{
  position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(29,26,23,.42); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  animation:fadein .2s ease;
}
.modal-overlay.open{display:flex}
@keyframes fadein{from{opacity:0} to{opacity:1}}
.modal{
  max-width:460px; width:100%; border-radius:20px; padding:36px 34px;
  background:rgba(252,250,246,.98); border:1px solid var(--hair);
  box-shadow:0 30px 80px rgba(29,26,23,.3);
  animation:pop .25s cubic-bezier(.2,.9,.3,1.2);
  position:relative;
}
@keyframes pop{from{opacity:0; transform:translateY(12px) scale(.98)} to{opacity:1; transform:none}}
.modal .close{position:absolute; top:16px; right:18px; background:none; border:none; font-size:22px; line-height:1; color:var(--muted); cursor:pointer; padding:4px}
.modal .close:hover{color:var(--ink)}
.modal .tick{width:44px; height:44px; border-radius:999px; background:rgba(47,143,91,.1); border:1px solid rgba(47,143,91,.3); display:flex; align-items:center; justify-content:center; margin-bottom:18px}
.modal .tick svg{display:block}
.modal h3{font-size:23px; margin-bottom:10px}
.modal p{font-size:15.5px; line-height:1.62; color:var(--body); margin-bottom:14px}
.modal .echo{
  font-family:var(--mono); font-size:12.5px; line-height:1.7; color:var(--ink);
  background:rgba(29,26,23,.04); border:1px solid var(--hair); border-radius:12px;
  padding:14px 16px; margin:16px 0; white-space:pre-wrap; word-break:break-word;
}
.modal .echo .k{color:var(--muted)}
.modal .mailrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px}
.modal .mailrow code{font-family:var(--mono); font-size:14px; color:var(--green)}

/* ---------------- footer ---------------- */
footer{border-top:1px solid var(--hair); margin-top:20px}
.foot{max-width:1120px; margin:0 auto; padding:52px 24px 40px}
.foot-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px}
.foot-col h4{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; font-weight:500}
.foot-col a{display:block; color:var(--body); text-decoration:none; font-size:14px; margin-bottom:9px; transition:color .15s}
.foot-col a:hover{color:var(--ink)}
.foot-brand .brand{margin-bottom:12px}
.foot-brand p{font-size:13.5px; line-height:1.6; color:var(--muted); max-width:240px}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding-top:26px; border-top:1px solid var(--hair)}
.foot-bottom .mark{font-family:var(--mono); font-size:12px; color:var(--muted)}
.foot-bottom .mail{font-family:var(--mono); font-size:13px; color:var(--green); text-decoration:none}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{outline:2px solid var(--violet); outline-offset:3px; border-radius:8px}
.rise{animation:rise .7s ease both}
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rise,.log{animation:none !important}
  .btn:hover{transform:none}
}

/* ---------------- responsive ---------------- */
@media (max-width:1000px){
  .navlinks{gap:16px}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .solgrid, .three{grid-template-columns:repeat(2,1fr)}
  .four{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  section{padding:56px 20px}
  .hero-band{padding-top:80px}
  .two,.twocard,.facts,.namerow,.why-now,.benefit,.split{grid-template-columns:1fr}
  .rail-left{border-right:none; border-bottom:1px solid var(--hair)}
  .benefit .dread{border-right:none; border-bottom:1px solid var(--hair)}
  .navlinks{display:none}
  .navlinks.mobile-open{
    display:flex; flex-direction:column; align-items:flex-start; gap:4px;
    position:absolute; top:100%; left:0; right:0; padding:16px 24px 22px;
    background:rgba(250,248,244,.98); border-bottom:1px solid var(--hair);
    box-shadow:0 20px 40px rgba(29,26,23,.12);
  }
  .navlinks.mobile-open .nav-dd{width:100%}
  /* on mobile, sub-menu is hidden until its parent is tapped (.open) */
  .navlinks.mobile-open .dd-menu{
    position:static; transform:none; box-shadow:none; background:none; border:none;
    padding:0 0 0 14px; min-width:auto; max-height:0; overflow:hidden;
    opacity:1; visibility:visible; transition:max-height .25s ease, padding .25s ease;
  }
  .navlinks.mobile-open .nav-dd.open .dd-menu{max-height:420px; padding:4px 0 8px 14px}
  .navlinks.mobile-open .nav-dd > a{padding:10px 0; display:flex; justify-content:space-between; width:100%}
  .navlinks.mobile-open .nav-dd > a::after{display:inline; transform:rotate(90deg)}
  .navlinks.mobile-open .nav-dd.open > a::after{transform:rotate(-90deg)}
  .menu-toggle{display:block}
  h1{font-size:37px}
  h2{font-size:27px}
  .punch{font-size:29px; padding:32px 0}
  .statement{font-size:20px}
  .railbox{padding:24px}
  .foot-top{grid-template-columns:1fr 1fr}
  .ledger .row{grid-template-columns:44px 1fr; gap:8px}
  .ledger .hash{grid-column:1 / -1; padding-top:4px}
}
@media (max-width:560px){
  .solgrid, .three, .four, .foot-top{grid-template-columns:1fr}
  .claims{grid-template-columns:1fr}
  .hz{grid-template-columns:1fr; gap:10px}
}