.kit{border:1px solid var(--line);border-radius:12px;background:var(--surface);
  box-shadow:var(--shadow);margin:0 0 16px;overflow:hidden}
.kit-head{padding:18px 22px 14px;display:flex;flex-wrap:wrap;gap:12px;align-items:baseline}
.kit-head h3{font-family:var(--serif);font-size:21px;font-weight:600;margin:0;flex:1 1 auto}
.kit[id]{scroll-margin-top:calc(var(--navh,38px) + 14px)}
.kit-price{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--accent-ink)}
.kit-price.soon{color:var(--muted)}
.kit p.why{margin:0;padding:0 22px 14px;font-size:14px;color:var(--ink-2);max-width:72ch;
  line-height:1.6}
.kit-what{border-top:1px solid var(--line-2);background:var(--surface-2);padding:14px 22px 16px}
.kit-what h4{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 8px}
.kit-what ul{margin:0;padding-left:17px;font-size:13.5px;line-height:1.62;color:var(--ink-2)}
.kit-buy{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  border-top:1px solid var(--line-2);padding:13px 22px}
.kit-buy a{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  border:1px solid var(--accent);color:var(--accent-ink);border-radius:6px;
  padding:7px 14px;text-decoration:none}
.kit-buy a:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.kit-buy span{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--muted)}
.kit-dl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  border-top:1px solid var(--line-2);padding:12px 22px}
.kit-dl a{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);
  border:1px solid var(--line);border-radius:6px;padding:6px 11px;text-decoration:none}
.kit-dl a:hover{color:var(--accent-ink);
  border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.kit-dl svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.kit-dl em{font-style:normal;color:var(--muted);font-size:9.5px;letter-spacing:.04em}
/* Not a link, and it must not look like one. Same metrics as .kit-dl a so the row
   does not go ragged - the button-beside-anchor trap, one more time. */
.kit-dl .kit-paid{display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.1;color:var(--muted)}
.kit-eds .ed-size{font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  color:var(--muted);white-space:nowrap;align-self:center}
.counts{display:flex;flex-wrap:wrap;gap:20px;margin:0;padding:0 22px 16px}
.counts div{min-width:82px}
.counts b{display:block;font-family:var(--serif);font-size:22px;font-weight:600;line-height:1}
.counts span{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
/* margin-top was 0 via the shorthand, so the callout sat flush against the lede above
   it with no gap at all - most obvious on a phone, where the lede wraps to the edge */
.linehold{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;
  background:var(--surface);padding:15px 19px;margin:24px 0 26px}
.linehold p{margin:0;font-size:13.5px;line-height:1.62;color:var(--ink-2)}
.how{margin:0 0 30px}
.how h2,section h2{font-family:var(--serif);font-size:24px;font-weight:600;margin:0 0 8px}
.howlead{font-size:14.5px;line-height:1.65;color:var(--ink-2);max-width:74ch;margin:0 0 16px}
.steps{counter-reset:s;list-style:none;margin:0 0 22px;padding:0}
.steps li{counter-increment:s;position:relative;padding:0 0 0 40px;margin:0 0 14px;
  font-size:13.5px;line-height:1.65;color:var(--ink-2);max-width:78ch}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:26px;height:26px;
  border-radius:50%;border:1px solid var(--accent);color:var(--accent-ink);
  font-family:var(--mono);font-size:12px;display:flex;align-items:center;
  justify-content:center}
.steps b{color:var(--ink)}
.howgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.howgrid div{border:1px solid var(--line);border-radius:10px;background:var(--surface);
  padding:14px 16px}
/* h3: directly under the section's h2, so h4 skipped a level. Both default to
   bold, and the rule pins everything else. */
.howgrid h3{font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent-ink);margin:0 0 6px;font-weight:700}
.howgrid p{margin:0;font-size:13px;line-height:1.6;color:var(--ink-2)}
.kit-files{border-top:1px solid var(--line-2);padding:12px 22px}
.kit-files h4{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.fsum{font-size:13px;color:var(--ink-2);margin:0}
.fsum b{color:var(--ink);font-weight:600}
/* The toggle is a <button> and inherits nothing from the anchors around it, so font,
   padding and colour are all restated - the same trap the edition chooser hit. */
.filetog{appearance:none;background:none;border:0;padding:4px 0 0;margin:0;
  font:inherit;font-size:11.5px;color:var(--muted);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px}
.filetog:hover{color:var(--ink-2)}
.filetog .chev{width:5px;height:5px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .12s}
.filetog[aria-expanded="true"] .chev{transform:rotate(-135deg) translate(-1px,-1px)}
.kit-flist[hidden]{display:none}
.kit-flist{padding-top:8px}
.kit-files table{width:100%;border-collapse:collapse}
.kit-files td{padding:5px 0;font-size:13px;color:var(--ink-2);
  border-bottom:1px solid var(--line-2)}
.kit-files tr:last-child td{border-bottom:0}
.kit-files td.fname{font-family:var(--mono);font-size:11px;color:var(--muted);width:31%}
.kit-files td.fp{font-family:var(--mono);font-size:11px;color:var(--muted);
  text-align:right;width:13%}
.kit-files td.ff{font-family:var(--mono);font-size:10px;color:var(--muted);
  text-align:right;width:19%;letter-spacing:.05em}
.ftot{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--muted);
  margin:9px 0 0}
/* On a phone the four columns cannot fit, and the format cell wrapped and clipped.
   Restacked rather than made scrollable: a horizontal scroll inside a page is easy to
   miss and awkward to use. The title leads, everything else becomes one meta line. */
@media (max-width:620px){
  .kit-files table,.kit-files tbody{display:block;width:100%}
  .kit-files tr{display:flex;flex-wrap:wrap;align-items:baseline;
    padding:10px 0;border-bottom:1px solid var(--line-2)}
  .kit-files tr:last-child{border-bottom:0}
  .kit-files td{display:block;border:0;padding:0;width:auto;text-align:left}
  .kit-files td:nth-child(2){order:1;flex:1 0 100%;font-size:13.5px;color:var(--ink);
    margin-bottom:4px}
  /* flex:0 0 auto, or the cells shrink and "2 pp" breaks over two lines. A rule as
     the separator rather than a generated character: a CSS escape in `content` has to
     survive being written out as ASCII, and this one did not - it rendered as "b7". */
  .kit-files td.fname,.kit-files td.fp,.kit-files td.ff{flex:0 0 auto;white-space:nowrap}
  .kit-files td.fname{order:2}
  .kit-files td.fp{order:3;margin-left:10px;padding-left:10px;
    border-left:1px solid var(--line)}
  .kit-files td.ff{order:4;margin-left:10px;padding-left:10px;
    border-left:1px solid var(--line)}
}
.kit-eds{border-top:1px solid var(--line-2);padding:14px 22px 16px}
/* the toggle is a <button>, so it inherits none of the anchor styling in .kit-dl a -
   every property it shares has to be restated or it renders as a default button */
.kit-dl .edtog{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-2);background:none;border:1px solid var(--line);border-radius:6px;
  padding:6px 11px;line-height:1.6}
.kit-dl .edtog:hover{color:var(--accent-ink);
  border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.kit-dl .edtog:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.kit-dl .edtog .chev{width:6px;height:6px;flex:none;margin-left:2px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px)}
.kit-dl .edtog[aria-expanded="true"] .chev{transform:rotate(-135deg) translate(-1px,-1px)}
.kit-eds[hidden]{display:none}
.kit-eds h4{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.kit-eds .ed{display:grid;grid-template-columns:1fr auto;gap:10px 16px;
  align-items:start;padding:10px 0;border-bottom:1px solid var(--line-2)}
.kit-eds .ed:last-child{border-bottom:0}
.ed-t{font-size:13.5px;font-weight:600;color:var(--ink);grid-column:1}
.kit-eds .ed p{grid-column:1;margin:3px 0 0;font-size:12.5px;line-height:1.55;
  color:var(--muted);max-width:62ch}
.kit-eds .ed a{grid-column:2;grid-row:1 / span 2;align-self:center;
  display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  border:1px solid var(--accent);color:var(--accent-ink);border-radius:6px;
  padding:8px 14px;text-decoration:none;white-space:nowrap}
.kit-eds .ed a:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.kit-eds .ed a em{font-style:normal;font-size:9px;color:var(--muted);letter-spacing:.03em}
.kit.bundle{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}