/* ============================================================
   Hzip — download page
   One motif: the zipper tooth. It comes from the mark — the H's
   crossbar is a zipper pull. Navy #0F172A and cyan #22D3EE are
   the pair in the icon; the rest is paper and ink.
   Five type sizes: 14 / 17 / 22 / 36 / 72.
   ============================================================ */

/* Self-hosted, subset to the characters this page uses (tools-subset.py).
   No third-party font request: the page renders the same on a network
   that cannot reach Google Fonts. */
@font-face{
  font-family:"Albert Sans";
  src:url("assets/fonts/albert-sans.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Noto Sans SC";
  src:url("assets/fonts/noto-sans-sc.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --paper:#EEF0F2;
  --paper-2:#E2E6E9;
  --ink:#0F172A;
  --soft:#55616C;
  --cyan:#22D3EE;
  --teal:#087F73;          /* the app's own data colour, inside fragments only */
  --white:#F8FAFC;

  --m:clamp(20px,3.2vw,44px);
  --r:3px;
  --gap:16px;

  --s:14px;
  --b:17px;
  --l:22px;
  --st:36px;
  --d:72px;

  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scrollbar-gutter:stable both-edges }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Albert Sans","Noto Sans SC","PingFang SC","Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif;
  font-size:var(--b);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block }
a{ color:inherit }
h1,h2,p,dl,dd,figure{ margin:0 }

/* the pattern library: kept rendered so the seam can reference it, but out of
   the flow — an inline 0×0 SVG still adds a line box and shifts every section
   below it onto a half pixel */
.defs{ position:absolute; width:0; height:0; overflow:hidden }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; border-radius:2px }

h1{
  font-size:var(--d);
  font-weight:600;
  line-height:1;
  letter-spacing:-.035em;
}

/* ---------- nav ---------- */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:20px var(--m) 18px;
}
.mark{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; font-weight:600; font-size:var(--b); letter-spacing:-.02em;
}
.nav-links{ display:flex; align-items:center; gap:clamp(14px,2vw,30px) }
.nav-links a{
  font-size:var(--s); text-decoration:none; color:var(--soft);
  padding:6px 2px;
  transition:color .2s var(--ease);
}
.nav-links a:hover{ color:var(--ink) }
.nav-dl{
  color:var(--white) !important;
  background:var(--ink);
  padding:9px 16px !important;
  border-radius:var(--r);
  transition:background-color .2s var(--ease), transform .15s var(--ease);
}
.nav-dl:hover{ background:#1C2B44 }
.nav-dl:active{ transform:translateY(1px) }

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  background:var(--ink);
  color:var(--white);
  text-decoration:none;
  padding:12px 22px;
  border-radius:var(--r);
  font-weight:500;
  font-size:var(--b);
  transition:background-color .2s var(--ease), transform .15s var(--ease);
}
.btn:hover{ background:#1C2B44 }
.btn:active{ transform:translateY(1px) }
.btn-lg{ padding:15px 26px }

/* ---------- hero ---------- */
.hero{
  display:grid;
  grid-template-rows:auto 1fr;
  min-height:100svh;
  padding:0 var(--m);
}
.hero-top{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gap);
  align-items:start;
  padding:clamp(18px,4vh,52px) 0 clamp(26px,4vh,46px);
}
.hero-copy{ grid-column:1 / 8 }
.lead{
  margin-top:24px;
  font-size:var(--l);
  line-height:1.45;
  color:var(--soft);
  max-width:31ch;
  text-wrap:pretty;
}
.hero-copy .btn-lg{ margin-top:30px }
.note{ margin-top:16px; font-size:var(--s); color:var(--soft) }

.hero-facts{
  grid-column:9 / 13;
  align-self:end;
  display:grid;
  gap:12px;
}
.hero-facts div{
  display:grid;
  grid-template-columns:5.6em 1fr;
  gap:12px;
  align-items:baseline;
}
.hero-facts dt{ font-size:var(--s); color:var(--soft) }
.hero-facts dd{ font-size:var(--b); font-weight:500 }

/* the stage: the motif's cut corner, with the fragment resting on it */
.stage-wrap{
  position:relative;
  min-height:44vh;
  margin-right:calc(var(--m) * -1);
}
.stage{
  position:absolute; inset:0 0 -2px;
  background:var(--ink);
  padding:clamp(72px,10vh,120px) clamp(24px,4vw,56px) 0;
  overflow:hidden;
}

.panel{
  width:min(620px,100%);
  background:var(--white);
  color:var(--ink);
  border-radius:var(--r);
  padding:22px 24px 26px;
}
.panel-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px }
.panel-title{ font-size:var(--b); font-weight:600; letter-spacing:-.01em }
.panel-sub{ margin-top:5px; font-size:var(--s); color:var(--soft) }
.panel-btn{
  font:inherit; font-size:var(--s); font-weight:500;
  flex:none; white-space:nowrap;
  padding:7px 14px; border:0; border-radius:var(--r);
  background:var(--paper-2); color:var(--ink);
  cursor:pointer;
  transition:background-color .18s var(--ease), color .18s var(--ease);
}
.panel-btn:hover{ background:#D3DADE }
.panel-btn[aria-pressed="true"]{ background:var(--teal); color:#fff }
.panel-bar{
  margin:22px 0 20px;
  height:4px; border-radius:2px;
  background:#DCE2E6;
  overflow:hidden;
}
.panel-bar span{ display:block; height:100%; background:var(--teal); transition:width .12s linear }
.panel-rows{ display:grid; gap:9px }
.panel-rows p{ display:flex; justify-content:space-between; gap:16px; font-size:var(--s) }
.panel-rows .k{ color:var(--soft) }
.panel-rows .v{ font-variant-numeric:tabular-nums }
.panel-state{ margin-top:20px; font-size:var(--s); color:var(--soft) }

/* ---------- capability bands ---------- */
.bands{ background:var(--paper) }
.band{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gap);
  align-items:center;
  min-height:19vh;
  padding:clamp(26px,3.4vh,44px) var(--m);
  background:var(--paper);
  color:var(--ink);
}
.band-lead{ background:var(--ink); color:var(--white) }
.sentence{
  grid-column:1 / 6;
  font-size:var(--st);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.03em;
  color:inherit;
  text-wrap:balance;
}
.consequence{
  grid-column:6 / 13;
  font-size:var(--b);
  line-height:1.6;
  color:var(--soft);
  max-width:46ch;
}
.band-lead .consequence{ color:#C3CDD6 }
.consequence b{ font-weight:600; color:var(--ink) }
.band-lead .consequence b{ color:var(--cyan) }

.shots{ padding:clamp(88px,11vh,160px) var(--m) 0 }
.shots-head{ max-width:34ch; margin-bottom:clamp(40px,5vh,68px) }
.shots h2{
  font-size:var(--st); font-weight:600; letter-spacing:-.03em; line-height:1.1; text-wrap:pretty;
}
.shots-note{ margin-top:16px; font-size:var(--s); color:var(--soft) }
.shots-grid{
  display:grid;
  grid-template-columns:minmax(0,780px) minmax(0,559px);
  justify-content:space-between;
  gap:clamp(24px,3vw,44px);
  align-items:start;
}
.shot-a img{ width:780px }
.shot-b img{ width:519px }
.shot-c img{ width:589px }
.shot-d img{ width:559px }
.shot-col{ display:grid; gap:clamp(36px,5vh,64px); min-width:0 }
.shot{ min-width:0 }
.shot img{ border-radius:var(--r); background:var(--white) }
.shot figcaption{ margin-top:14px; font-size:var(--s); color:var(--soft); max-width:44ch }
.shot-inline{ display:block }
.shot-inline img{ width:589px }
.shot-inline figcaption{ margin-top:14px; padding-bottom:0 }

/* ---------- zipper seam ---------- */
.seam{
  margin:clamp(72px,9vh,124px) 0;
  line-height:0;
  overflow:hidden;
}
.seam svg{ display:block }

/* ---------- formats ---------- */
.formats{ padding:0 var(--m) }
.group{
  font-size:var(--l);
  font-weight:500;
  margin:clamp(36px,5vh,60px) 0 16px;
  letter-spacing:-.01em;
}
.group:first-of-type{ margin-top:0 }
.lineup{
  width:100%;
  border-collapse:collapse;
  font-size:var(--l);
  letter-spacing:-.015em;
}
.lineup td{ padding:.42em 0; vertical-align:baseline }
.lineup th{
  padding:0 0 .5em;
  text-align:left;
  font-size:var(--b);
  font-weight:500;
  letter-spacing:0;
  color:var(--soft);
}
.lineup th:first-child{ width:26% }
.lineup th:nth-child(2),
.lineup th:nth-child(3){ width:11% }
.lineup td:first-child{ width:26%; font-weight:500 }
.lineup td:nth-child(2),
.lineup td:nth-child(3){ width:11%; color:var(--soft) }
.lineup td:last-child{ color:var(--soft) }
.formats-note{
  margin-top:clamp(32px,4vh,52px);
  max-width:56ch;
  font-size:var(--s);
  color:var(--soft);
  line-height:1.6;
}

/* ---------- proof ---------- */
.proof{ padding:clamp(88px,11vh,160px) var(--m) 0 }
.tiles{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.tile{
  min-height:200px;
  min-width:0;
  background:var(--paper-2);
  border-radius:var(--r);
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.tile-head{ grid-column:span 2; background:var(--cyan); justify-content:space-between }
.tile-head h2{
  font-size:var(--st); font-weight:600; letter-spacing:-.03em; line-height:1.1;
  max-width:9em;
}
.tile-head .proof-note{
  color:#0B2A33; opacity:.86; max-width:28ch;
  margin-top:0; font-size:var(--s); line-height:1.55;
}
.fig{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.14em .3em;
  font-size:var(--st);
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1.1;
}
.fig > b{ font-weight:600; font-variant-numeric:tabular-nums }
.fig .u{ font-size:.52em; font-weight:500; letter-spacing:0; margin-left:.05em }
.fig > span{ font-size:var(--b); font-weight:400; letter-spacing:0; color:var(--soft); line-height:1.4 }
.proof-note{
  margin-top:clamp(24px,3vh,38px);
  max-width:52ch;
  font-size:var(--s);
  color:var(--soft);
  line-height:1.6;
}
/* ---------- limits: filed rows ---------- */
.faq{ padding:clamp(100px,13vh,180px) var(--m) 0 }
.faq h2{
  font-size:var(--st);
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1.1;
  max-width:20ch;
  margin-bottom:clamp(30px,4vh,52px);
}
.cards{ display:block }
.card{
  padding:24px 22px;
  margin:0 -22px;
  border-radius:var(--r);
  background:transparent;
  color:var(--ink);
  transition:background-color .35s var(--ease), color .35s var(--ease);
}
.card[data-open="true"]{ background:var(--ink); color:var(--white) }
.card-head{
  display:grid;
  grid-template-columns:clamp(88px,10vw,124px) 1fr;
  gap:clamp(16px,2.4vw,32px);
  align-items:baseline;
  width:100%;
  background:none; border:0; padding:0;
  font:inherit; color:inherit; text-align:left;
  cursor:pointer;
}
.tab{ font-size:var(--s); color:var(--soft); letter-spacing:.02em }
.card[data-open="true"] .tab{ color:var(--cyan) }
.q{
  font-size:var(--l);
  font-weight:500;
  letter-spacing:-.01em;
  line-height:1.3;
}
.card-body{
  max-height:0; overflow:hidden; opacity:0;
  margin-left:calc(clamp(88px,10vw,124px) + clamp(16px,2.4vw,32px));
  transition:max-height .4s var(--ease), opacity .3s var(--ease), margin .3s var(--ease);
}
.card[data-open="true"] .card-body{ max-height:24em; opacity:1; margin-top:14px }
.card-body p{
  max-width:58ch;
  font-size:var(--b);
  line-height:1.6;
  color:var(--soft);
}
.card[data-open="true"] .card-body p{ color:#C6D0DA }
.card[data-open="false"] .card-body b{ color:var(--ink) }
.card[data-open="true"] .card-body b{ color:var(--white) }
/* ---------- download ---------- */
.close{ padding:clamp(110px,15vh,210px) var(--m) 0 }
.close-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gap);
  align-items:start;
}
.close-sentence{
  grid-column:1 / 7;
  font-size:var(--st);
  font-weight:500;
  line-height:1.45;
  letter-spacing:-.02em;
  max-width:22ch;
}
.btn-inline{
  padding:.2em .6em;
  margin-left:.1em;
  font-size:1em;
  vertical-align:baseline;
}
.close-facts{
  grid-column:8 / 13;
  display:grid;
  gap:14px;
}
.close-facts div{ display:grid; gap:4px }
.close-facts dt{ font-size:var(--s); color:var(--soft) }
.close-facts dd{ font-size:var(--b) }
.close-facts .hash{ font-size:var(--s); letter-spacing:.04em; color:var(--soft) }
.close-facts .hash span{ display:block; white-space:nowrap; font-variant-numeric:tabular-nums }

/* ---------- footer ---------- */
.foot{
  margin-top:clamp(72px,9vh,120px);
  background:var(--ink);
  color:var(--white);
  padding:clamp(52px,7vh,88px) var(--m) clamp(32px,4vh,52px);
}
.foot-mark svg{ width:min(520px,44vw); height:auto }
.foot-cols{
  margin-top:clamp(36px,5vh,64px);
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gap);
}
.foot-links{ grid-column:1 / 6; display:flex; flex-wrap:wrap; gap:24px }
.foot-links a{ font-size:var(--b); text-decoration:none; color:#C6D0DA }
.foot-links a:hover{ color:var(--white) }
.foot-meta{ grid-column:7 / 13; font-size:var(--s); color:#95A2AE; line-height:1.7 }
.foot-end{ margin-top:clamp(40px,5vh,68px); font-size:var(--s); color:#7F8C99 }

/* ---------- motion ---------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .32s var(--ease), transform .32s var(--ease) }
.reveal.in{ opacity:1; transform:none }

/* the panel rises into the stage on load — only when a script is running, so a
   failed script leaves the panel visible instead of hidden */
.js .panel{ opacity:0; transform:translateY(18px) }
.js .stage-wrap.in .panel{
  opacity:1; transform:none;
  transition:opacity .55s var(--ease), transform .9s var(--ease);
}
.pull{ animation:pull 3.4s var(--ease) infinite alternate }
@keyframes pull{
  from{ transform:translateY(0) }
  to{ transform:translateY(-14px) }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important }
  .reveal{ opacity:1; transform:none }
  .js .panel{ opacity:1; transform:none }
}

/* ---------- tablet ---------- */
@media (max-width:1080px){
  :root{ --d:52px; --st:30px }
  .hero-copy{ grid-column:1 / -1 }
  .hero-facts{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:14px 44px; margin-top:34px; align-self:start }
  .hero-facts div{ grid-template-columns:auto 1fr; gap:8px }
  .shots-grid{ grid-template-columns:1fr; gap:44px }
  .shot-inline{ grid-template-columns:minmax(0,500px) minmax(0,1fr) }
  .close-sentence{ grid-column:1 / 8 }
  .close-facts{ grid-column:8 / 13 }
}
/* ---------- phone ---------- */
@media (max-width:760px){
  :root{ --m:20px; --s:14px; --b:16px; --l:19px; --st:24px; --d:36px }

  .nav{ padding:16px var(--m) }
  .nav-links a:not(.nav-dl){ display:none }

  .hero-top{ padding-top:20px; padding-bottom:26px }
  .hero-copy{ grid-column:1 / -1 }
  .lead{ margin-top:18px; font-size:var(--l) }
  .hero-facts{ display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; margin-top:28px }
  .hero-facts div{ grid-template-columns:1fr; gap:2px }

  .stage-wrap{ margin-inline:calc(var(--m) * -1); min-height:58vh }
  .stage{ padding:56px 16px 0 }
  .panel{ width:100%; max-width:none; padding:18px }

  .band{ grid-template-columns:1fr; gap:14px; padding:26px var(--m); min-height:0 }
  .sentence{ grid-column:1 }
  .consequence{ grid-column:1 }
  .aside{ grid-column:1; gap:12px }

  .shots-grid{ grid-template-columns:1fr; gap:36px }
  .shot-inline{ grid-template-columns:1fr; gap:14px }
  .shot-inline img{ width:100% }
  .shot-inline figcaption{ padding-bottom:0 }

  .lineup{ font-size:var(--b) }
  .lineup th:first-child,
  .lineup td:first-child{ width:30% }
  .lineup th:nth-child(2),.lineup th:nth-child(3),
  .lineup td:nth-child(2),.lineup td:nth-child(3){ width:14% }

  .tiles{ display:block }
  .tile{ min-height:0; background:none; padding:14px 0; border-radius:0 }
  .tile + .tile{ margin-top:6px }
  .tile-head{ background:var(--cyan); padding:18px 16px; margin-bottom:10px; border-radius:var(--r) }
  .fig{ padding:6px 0 }
  .fig{ font-size:var(--st) }
  .fig > span{ font-size:var(--s) }

  .card{ padding:20px 16px; margin:0 -16px }
  .card-head{ grid-template-columns:1fr; gap:8px }
  .card-body{ margin-left:0 }
  .q{ font-size:var(--b) }

  .close-sentence{ grid-column:1 / -1 }
  .close-facts{ grid-column:1 / -1; margin-top:30px; grid-template-columns:1fr 1fr; gap:18px }
  .close-facts .hash{ grid-column:span 2 }
  .close-facts .hash span{ white-space:normal; word-break:break-all }

  .foot-links{ grid-column:1 / -1 }
  .foot-meta{ grid-column:1 / -1; margin-top:24px }
  .foot-mark svg{ width:64vw }
}
@media (max-width:420px){
  :root{ --d:28px }
}
@media (prefers-reduced-motion: reduce){
  .stage-teeth svg{ display:block }
}