:root{
    --paper:#e9ebee;
    --card:#ffffff;
    --ink:#14171c;
    --muted:#666e7a;
    --rule:#d3d7dd;
    --rule-strong:#a8aeb8;
    --live:#0b4fb0;
    --live-bg:#e3ecfa;
    --gone:#8b919b;

    /* one accent per product line — used on column headers, mobile cards and
       the line filters, so colour carries information rather than decoration */
    --l-ipad:#0b4fb0;
    --l-air:#0e7c86;
    --l-mini:#6b46a8;
    --l-pro:#b5651d;
    --accent:#b5651d;      /* the warm note against all the cool grey */
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;overflow-x:hidden;-webkit-text-size-adjust:100%}
  body{
    margin:0;
    background-color:var(--paper);
    background-image:url("/paper.svg?v=1");
    background-repeat:repeat;
    color:var(--ink);
    font:400 15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    padding:24px 0 64px;
  }
  .wrap{max-width:1180px;margin:0 auto;padding:0 16px}

  header{margin-bottom:22px}
  h1{
    font-size:clamp(28px,6vw,44px);
    line-height:1.02;
    letter-spacing:-0.025em;
    font-weight:700;
    margin:0 0 8px;
  }
  .sub{color:var(--muted);font-size:14px;max-width:68ch;margin:0}
  .stamp{
    display:inline-block;font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
    letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
    border:1px solid var(--rule-strong);border-radius:2px;padding:5px 8px;margin-bottom:14px;
  }

  .legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin:16px 0 10px;font-size:12.5px;color:var(--muted)}
  .pill{
    display:inline-block;font:600 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
    letter-spacing:.09em;text-transform:uppercase;padding:3px 6px;border-radius:3px;
    background:var(--live-bg);color:var(--live);white-space:nowrap;
  }
  .pill.off{background:#e5e7ea;color:var(--gone)}

  .scroller{
    background:var(--card);
    border:1px solid var(--rule-strong);
    border-radius:4px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  table{border-collapse:collapse;width:100%;min-width:940px}
  thead th{
    position:sticky;top:0;z-index:3;
    background:var(--ink);color:#fff;
    font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
    letter-spacing:.13em;text-transform:uppercase;
    text-align:left;padding:11px 14px;white-space:nowrap;
  }
  thead th:first-child{z-index:4}
  th.yr,td.yr{
    position:sticky;left:0;z-index:2;
    background:#f2f3f5;
    width:74px;min-width:74px;
    border-right:1px solid var(--rule-strong);
    font:700 17px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
    color:var(--ink);
    vertical-align:top;padding:14px 10px;
  }
  thead th.yr{background:var(--ink);color:#fff;font-size:11px}
  tbody tr{border-top:1px solid var(--rule)}
  tbody tr:hover td{background:#f7f8fa}
  tbody tr:hover td.yr{background:#eceef1}
  td{vertical-align:top;padding:14px;width:23%}
  .none{color:#b9bec6;font-size:20px;line-height:1;padding-top:2px}

  .m + .m{margin-top:14px;padding-top:14px;border-top:1px dashed var(--rule)}
  .name{
    font-weight:650;font-size:14.5px;letter-spacing:-0.01em;margin-bottom:5px;
    display:flex;align-items:flex-end;gap:9px;
  }
  .nm{flex:1 1 auto;min-width:0;padding-bottom:1px}
  .dev{flex:0 0 auto;display:block}   /* drawn to scale against each other */
  .name .gen{color:var(--muted);font-weight:400}
  .rel{
    font:400 11.5px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
    color:var(--muted);margin:-2px 0 7px;letter-spacing:.01em;
  }
  .rel .rl{color:#9aa0aa}
  .rel .age{color:#9aa0aa}
  dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:2px 8px;font-size:12.5px}
  dt{
    font:600 10px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;
    letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:2px;
  }
  dd{margin:0;color:#2a2f37}
  dd.nopen{color:#9aa0aa}
  .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
  .price{margin-top:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:#1c2027;line-height:1.7;border-left:2px solid var(--live);padding-left:9px}
  .price.used{border-left-color:#c3c8d0;color:#414852}
  .price .lbl{display:block;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
  .price b{font-weight:700}
  .price .fine{color:var(--muted)}
  .status{margin-top:7px}

  /* Notes stay at a readable measure — long lines are genuinely harder to
     read — but on a wide screen they run in two columns so the block fills
     the page instead of leaving half of it empty. */
  .notes{margin-top:26px;font-size:13px;color:var(--muted);max-width:74ch}
  .notes ul{padding-left:18px;margin:0}
  .notes h2{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);margin:0 0 8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
  .notes li{margin-bottom:7px}
  @media (min-width:900px){
    .notes{max-width:none}
    .notes ul{
      column-count:2;column-gap:52px;max-width:1010px;
    }
    .notes li{
      break-inside:avoid;-webkit-column-break-inside:avoid;
      margin-bottom:11px;
    }
  }
  @media (min-width:1400px){
    .notes ul{column-count:3;max-width:none}
  }
  .notes strong{color:var(--ink)}


  /* ---- site chrome ---- */
  .topbar{border-bottom:1px solid var(--rule-strong);background:var(--card);margin:-24px 0 24px;padding:11px 0}
  .topbar .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  /* brand lockup: lineage mark + wordmark + tagline */
  .brand{
    display:inline-flex;align-items:center;gap:9px;
    text-decoration:none;color:var(--ink);
  }
  .brand .mark{flex:0 0 auto;display:block}
  .wm{
    font:700 15px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
    letter-spacing:.02em;color:var(--live);
  }
  .wm b{color:var(--ink);font-weight:700}          /* PAD reads first, then the pun */
  .tag-line{
    font-size:11.5px;color:var(--muted);letter-spacing:.01em;
    padding-left:9px;margin-left:2px;border-left:1px solid var(--rule-strong);
  }
  .brand:hover .wm{color:#0a3f8f}
  @media (max-width:560px){ .tag-line{display:none} }
  .nav{margin-left:auto;display:flex;gap:16px}
  .nav a{font-size:13px;color:var(--muted);text-decoration:none;padding-bottom:2px;border-bottom:1.5px solid transparent}
  .nav a:hover{color:var(--ink)}
  .nav a[aria-current]{color:var(--ink);border-bottom-color:var(--live);font-weight:600}

  /* ---- filter toolbar ---- */
  .toolbar{
    background:var(--card);border:1px solid var(--rule-strong);border-radius:4px;
    padding:12px 14px;margin-bottom:14px;
    display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap;
  }
  .field{position:relative;flex:1 1 210px;min-width:0}
  .field input{
    width:100%;font:400 14px/1.4 inherit;color:var(--ink);
    border:1px solid var(--rule-strong);border-radius:3px;background:#fbfbfc;
    padding:8px 30px 8px 10px;
  }
  .field input:focus{outline:none;border-color:var(--live);background:#fff}
  .field .clr{
    position:absolute;right:6px;top:50%;transform:translateY(-50%);
    border:0;background:none;color:var(--muted);font-size:17px;line-height:1;cursor:pointer;padding:2px 5px;display:none;
  }
  .chips{display:flex;gap:6px;flex-wrap:wrap;padding-right:4px;border-right:1px solid var(--rule);margin-right:2px}
  .chip{
    font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.07em;text-transform:uppercase;
    padding:7px 11px;border:1px solid var(--rule-strong);border-radius:3px;
    background:#fbfbfc;color:var(--muted);cursor:pointer;
  }
  .chip:hover{color:var(--ink);border-color:var(--gone)}
  .chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
  .chip.solo[aria-pressed="true"]{background:var(--live);border-color:var(--live)}
  .count{font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);letter-spacing:.06em;white-space:nowrap}

  .empty{display:none;padding:26px 16px;text-align:center;color:var(--muted);font-size:14px;background:var(--card);border:1px solid var(--rule-strong);border-top:0;border-radius:0 0 4px 4px}
  .m[hidden]{display:none}
  tr[hidden]{display:none}
  td.blank::after{content:'\2014';color:#b9bec6;font-size:20px;line-height:1}

  /* ---- guide page ---- */
  .prose{background:var(--card);border:1px solid var(--rule-strong);border-radius:4px;padding:26px 28px;max-width:none}
  .prose h2{font-size:20px;letter-spacing:-0.02em;margin:30px 0 8px}
  .prose h2:first-child{margin-top:0}
  .prose p{margin:0 0 12px;font-size:14.5px;max-width:70ch}
  .prose ul{margin:0 0 14px;padding-left:20px;font-size:14.5px;max-width:70ch}
  .check ol{max-width:74ch}
  .prose li{margin-bottom:6px}
  .rank{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--rule)}
  .rank:first-of-type{border-top:0;padding-top:4px}
  .rank .n{font:700 20px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--live);min-width:28px;padding-top:2px}
  .rank h3{margin:0 0 4px;font-size:16px;letter-spacing:-0.015em}
  .rank h3 a{color:inherit}
  .rank p{margin:0 0 6px;font-size:14px;color:#2a2f37;max-width:66ch}
  .tag{font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.09em;text-transform:uppercase;padding:3px 6px;border-radius:3px;background:var(--live-bg);color:var(--live)}
  .tag.warn{background:#fbe9e7;color:#a3311f}
  .tag.mid{background:#f0ede3;color:#7a6a35}
  .check{background:#f4f6f8;border:1px solid var(--rule);border-radius:4px;padding:16px 18px;margin:18px 0}
  .check.hard{background:#fdf6f4;border-color:#e8c9c0}
  .check.hard h3{color:#a3311f}
  .check h3{margin:0 0 10px;font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;text-transform:uppercase}
  .check ol{margin:0;padding-left:19px;font-size:14px}
  .check li{margin-bottom:8px}

  footer{margin-top:34px;padding-top:16px;border-top:1px solid var(--rule-strong);font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
  a{color:var(--live)}

  @media (max-width:640px){
    .toolbar{padding:10px}
    .prose{padding:18px 16px}
    .nav{width:100%;margin-left:0}
  }

  /* colour swatches */
  .sws{display:inline-flex;gap:3px;vertical-align:-2px;margin-right:6px}
  .sw{width:11px;height:11px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.22);box-shadow:inset 0 -1px 1px rgba(0,0,0,.07)}
  .cnames{font-size:11.5px;color:var(--muted)}

  /* still-current OS indicator */
  .dot{
    width:8px;height:8px;border-radius:50%;display:inline-block;
    background:#1f9d55;vertical-align:1px;margin-right:6px;
    box-shadow:0 0 0 2px rgba(31,157,85,.16);
  }
  .dot.warn{background:#c8811f;box-shadow:0 0 0 2px rgba(200,129,31,.18)}

  /* ============================================================
     MOBILE — the table reflows into a stack of cards, one per
     model, with a sticky year header. Same markup, no JS changes.
     ============================================================ */
  @media (max-width:720px){

    body{padding-bottom:48px}

    /* unwrap the table */
    .scroller{overflow:visible;background:transparent;border:0;border-radius:0}
    table{display:block;min-width:0;width:100%}
    thead{display:none}                 /* column headers become card labels */
    tbody{display:block}
    tbody tr{display:block;border-top:0;margin-bottom:20px}
    tbody tr:hover td,tbody tr:hover td.yr{background:inherit}

    /* year becomes a sticky section header */
    td.yr{
      position:sticky;top:0;z-index:5;
      display:block;width:auto;min-width:0;
      background:var(--ink);color:#fff;
      border:0;border-radius:3px;
      padding:8px 12px;
      font-size:14px;letter-spacing:.12em;
    }

    td{display:block;width:auto;padding:0}
    td.none{display:none}               /* an empty cell is just noise here */
    td.blank{display:none}
    td.blank::after{content:none}

    /* each model becomes its own card, tagged with its product line */
    .m{
      background:var(--card);
      border:1px solid var(--rule-strong);
      border-radius:4px;
      padding:12px 13px 13px;
      margin-top:8px;
    }
    .m + .m{border-top:1px solid var(--rule-strong);padding-top:12px;margin-top:8px}
    .m::before{
      display:block;margin-bottom:7px;
      font:600 9.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
      letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
    }

    /* on mobile the column header is gone, so each card carries its line's
       colour on the left edge and in its tag */
    tr td:nth-child(2) .m{border-left:3px solid var(--l-ipad)}
    tr td:nth-child(3) .m{border-left:3px solid var(--l-air)}
    tr td:nth-child(4) .m{border-left:3px solid var(--l-mini)}
    tr td:nth-child(5) .m{border-left:3px solid var(--l-pro)}
    tr td:nth-child(2) .m::before{color:var(--l-ipad)}
    tr td:nth-child(3) .m::before{color:var(--l-air)}
    tr td:nth-child(4) .m::before{color:var(--l-mini)}
    tr td:nth-child(5) .m::before{color:var(--l-pro)}
    tr td:nth-child(2) .m::before{content:"iPad"}
    tr td:nth-child(3) .m::before{content:"iPad Air"}
    tr td:nth-child(4) .m::before{content:"iPad mini"}
    tr td:nth-child(5) .m::before{content:"iPad Pro"}

    .name{font-size:16px;margin-bottom:5px}
    .rel{font-size:12px;margin-bottom:8px}

    /* spec list stacks label-over-value instead of side by side */
    dl{grid-template-columns:1fr;gap:0}
    dt{padding-top:7px}
    dd{font-size:13.5px}
    .cnames{display:inline}             /* room for colour names again */

    .price{font-size:12px;margin-top:9px;padding:8px 0 0 9px;border-top:1px solid var(--rule);border-left:2px solid var(--live);padding-bottom:1px}
    .price.used{border-left-color:#c3c8d0}

    /* the 2023 "no releases" row */
    td[colspan]{
      background:var(--card);border:1px solid var(--rule-strong);
      border-radius:4px;margin-top:8px;padding:14px 13px !important;
    }

    /* toolbar reflows: full-width search, chips scroll sideways */
    .toolbar{padding:10px;gap:9px}
    .field{flex:1 1 100%}
    .chips{
      flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
      scrollbar-width:none;margin:0 -10px;padding:1px 10px;
    }
    .chips::-webkit-scrollbar{display:none}
    .chip{flex:0 0 auto;padding:8px 12px}
    #newonly{flex:0 0 auto}
    .count{width:100%;text-align:right;margin-top:-2px}

    .legend{gap:6px 14px;font-size:12px}
    .empty{border-radius:4px;border-top:1px solid var(--rule-strong)}
    .stamp{margin-bottom:11px}
  }

  /* very narrow phones */
  @media (max-width:380px){
    .wrap{padding:0 11px}
    .m{padding:11px}
    .name{font-size:15px}
  }

  /* ---- advanced filter panel ----
     Its own inset region, one labelled row per dimension, hairline
     separators for vertical rhythm, and an "Any" chip that reads as
     the absence of a filter rather than an active one. */
  .adv{
    flex:1 1 100%;order:9;
    margin:13px -14px -12px;
    padding:2px 14px 12px;
    background:#f5f6f8;
    border-top:1px solid var(--rule-strong);
  }
  .adv[hidden]{display:none}

  .grp{
    display:flex;align-items:flex-start;gap:0;flex-wrap:wrap;
    padding:13px 0 14px;
    border-bottom:1px solid #e4e7ea;
  }
  .opts{
    display:flex;flex-wrap:wrap;gap:8px;
    flex:1 1 auto;min-width:0;    /* wrapped rows align under the first chip */
  }
  .grp:first-of-type{padding-top:10px}
  .grp:last-of-type{border-bottom:0;padding-bottom:8px}
  .glab{
    flex:0 0 88px;                 /* fixed column keeps every Any button on one vertical line */
    text-align:right;padding:8px 10px 0 0;   /* top pad aligns label with the first chip row */
    font:600 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
    letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
  }

  .chip.sm{
    padding:6px 11px;font-size:10.5px;line-height:1.15;
    letter-spacing:.05em;text-transform:none;background:#fff;
  }
  .grp .chip[aria-pressed="true"]{background:var(--live);border-color:var(--live);color:#fff}

  /* "Any" is selected by default, so it carries the same blue as any other
     active choice; it just sits slightly apart from the real options. */
  .grp .chip[data-v=""]{margin-right:6px}

  /* the colour row is the longest — tighten it enough to hold one line */
  .grp[data-key="colors"] .opts{gap:6px}
  .grp[data-key="colors"] .chip{padding:5px 8px;letter-spacing:.02em}
  .grp[data-key="colors"] .chip .sw{margin-right:4px}

  .reset{
    margin:12px 0 0 97px;border:0;background:none;cursor:pointer;
    font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
    letter-spacing:.06em;color:var(--live);padding:4px 0;text-decoration:underline;
  }
  .reset[hidden]{display:none}

  .chip.sm .sw{width:9px;height:9px;margin-right:5px;vertical-align:-1px;border-color:rgba(0,0,0,.3)}
  .grp .chip[aria-pressed="true"] .sw{border-color:rgba(255,255,255,.65)}

  /* panel on small screens — must come last to override the desktop rules above */
  @media (max-width:720px){
    #more,#newonly{min-width:0}
    .count{min-width:0}
    .adv{margin:12px -10px -10px;padding:2px 10px 10px}
    .grp{gap:7px;padding:11px 0 12px}
    .glab{flex:0 0 100%;text-align:left;padding:0 0 4px}
    .opts{flex:1 1 100%;gap:7px}
    .chip.sm{padding:7px 11px}
    .grp .chip[data-v=""]{margin-right:3px}
    .reset{margin-left:0}
  }

  /* Toolbar stability: every element that changes content reserves its width,
     so toggling a filter never reflows the row. */
  #more{min-width:132px;text-align:center;position:relative}
  #more.on{background:var(--ink);border-color:var(--ink);color:#fff}
  .badge{
    display:inline-block;margin-left:7px;min-width:16px;padding:0 4px;
    background:var(--live);color:#fff;border-radius:8px;
    font:700 10px/16px ui-monospace,SFMono-Regular,Menlo,monospace;
    text-align:center;vertical-align:1px;
  }
  #more.on .badge{background:#fff;color:var(--ink)}
  .badge[hidden]{display:none}
  .count{min-width:78px;display:inline-block;text-align:right}
  #newonly{min-width:118px;text-align:center}

  .fineprint{
    font-size:12px;color:var(--muted);margin:9px 2px 0;
  }

  /* size comparison strip */
  .sizes-cmp{
    background:var(--card);border:1px solid var(--rule-strong);border-radius:4px;
    margin-bottom:14px;padding:0 14px;
  }
  .sizes-cmp summary{
    cursor:pointer;padding:11px 0;list-style:none;
    font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
    letter-spacing:.12em;text-transform:uppercase;color:var(--live);
  }
  .sizes-cmp summary::-webkit-details-marker{display:none}
  .sizes-cmp summary::before{content:'+ ';font-weight:700}
  .sizes-cmp[open] summary::before{content:'\2212 '}
  .sizes-cmp[open] summary{border-bottom:1px solid var(--rule);margin-bottom:4px}
  .szrow{
    position:relative;
    display:flex;align-items:flex-start;justify-content:center;
    gap:6px;flex-wrap:wrap;
    padding:18px 4px 6px;
  }
  /* graph paper behind the drawings only — reinforces that these are measurements */
  .szrow::before{
    content:'';position:absolute;left:0;right:0;top:8px;height:96px;
    background-image:
      repeating-linear-gradient(to right, rgba(20,23,28,.075) 0 1px, transparent 1px 8px),
      repeating-linear-gradient(to bottom, rgba(20,23,28,.075) 0 1px, transparent 1px 8px);
    border-bottom:1.5px solid rgba(20,23,28,.34);   /* the ground line */
    -webkit-mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent);
    mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent);
    pointer-events:none;
  }
  .szitem{
    position:relative;z-index:1;
    flex:0 0 104px;margin:0;padding:6px 2px 5px;
    display:flex;flex-direction:column;align-items:center;
    background:none;border:1px solid transparent;border-radius:4px;
    font:inherit;color:inherit;cursor:pointer;text-align:center;
    -webkit-tap-highlight-color:transparent;
  }
  .szitem:hover{background:rgba(11,79,176,.05);border-color:rgba(11,79,176,.22)}
  .szitem:focus-visible{outline:2px solid var(--live);outline-offset:1px}
  .szitem[aria-pressed="true"]{
    background:rgba(11,79,176,.09);border-color:var(--live);
  }
  .szitem[aria-pressed="true"] b{color:var(--live)}

  /* fixed-height stage so every device stands on the same ground line,
     regardless of how many lines its caption runs to */
  .szpad{
    height:86px;margin-bottom:9px;
    display:flex !important;align-items:flex-end;justify-content:center;
  }
  .szcap{display:block;line-height:1.35}
  .szcap b{
    display:block;font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
    color:var(--ink);margin-bottom:2px;
  }
  .szcap span{display:block;font-size:10.5px;color:var(--muted)}
  .sizes-cmp .fineprint{margin:4px 0 14px}
  @media (max-width:720px){
    .szrow{gap:4px 2px;padding:14px 0 4px}
    .szrow::before{height:78px;background-size:6px 6px}
    .szitem{flex:0 0 31%;padding:5px 1px}
    .szpad{height:68px;margin-bottom:7px}
    .szpad .dev{max-height:64px;width:auto}
    .szcap span{font-size:10px}
  }

  /* printable template link */
  .pdflink{margin:2px 0 14px;font-size:13px}
  .pdflink a{font-weight:650;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
  .pdflink a:hover{text-decoration:underline}
  .pdfbadge{
    font:700 9.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;
    background:var(--live);color:#fff;padding:4px 6px;border-radius:3px;
  }
  .pdfnote{display:block;font-size:11.5px;color:var(--muted);margin-top:4px;max-width:74ch}

  /* swatch colours as classes, so the CSP can forbid inline styles */
  .sw-silver{background:#d8dade}
  .sw-gray{background:#57585c}
  .sw-black{background:#1c1c1e}
  .sw-white{background:#f4f4f2}
  .sw-gold{background:#e6d0ad}
  .sw-rosegold{background:#e6bfae}
  .sw-starlight{background:#efe7dc}
  .sw-blue{background:#8aa9c9}
  .sw-purple{background:#bfb6d6}
  .sw-pink{background:#e7c0c2}
  .sw-green{background:#9fb8a4}
  .sw-yellow{background:#e8dca6}
  .sw-spaceblack{background:#33343a}
  .sw-skyblue{background:#a8c4d8}
  .tail-link{margin-top:22px;font-size:14px}
  .norelease{color:var(--muted);font-size:13px;font-style:italic;padding:16px 14px}
  .pad-top{margin-top:40px}
  .cnote{margin:0 0 8px;font-size:14px}
  .cnote.last{margin:0}
  .device{margin:0}

  /* mobile preview page */
  .stage{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start}
  .device{flex:0 0 auto;margin:0}
  .device figcaption{font:600 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 9px}
  .bezel{background:#1b1d21;border-radius:34px;padding:11px;box-shadow:0 14px 34px rgba(20,23,28,.24);position:relative}
  .bezel::before{content:'';position:absolute;top:19px;left:50%;transform:translateX(-50%);width:74px;height:5px;border-radius:3px;background:#3a3d44;z-index:2}
  .bezel iframe{display:block;border:0;border-radius:24px;background:var(--paper)}
  .sizes{display:flex;gap:7px;margin-bottom:16px;flex-wrap:wrap}
  .sizes button{font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.07em;padding:8px 11px;border:1px solid var(--rule-strong);border-radius:3px;background:#fbfbfc;color:var(--muted);cursor:pointer}
  .sizes button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
  .panel{flex:1 1 300px;min-width:280px;background:var(--card);border:1px solid var(--rule-strong);border-radius:4px;padding:20px 22px}
  .panel h2{font-size:15px;margin:0 0 10px;letter-spacing:-0.01em}
  .panel p,.panel li{font-size:13.5px;color:#2a2f37}
  .panel ul{padding-left:18px;margin:0 0 16px}
  .panel li{margin-bottom:7px}
  .panel hr{border:0;border-top:1px solid var(--rule);margin:18px 0}
  @media (max-width:820px){ .stage{flex-direction:column} }

  /* about + funding statement */
  .about{
    margin-top:30px;padding:20px 22px;
    background:var(--card);border:1px solid var(--rule-strong);border-radius:4px;
    max-width:74ch;
  }
  .about h2{font-size:12px;letter-spacing:.13em;text-transform:uppercase;margin:0 0 10px;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}
  .about p{font-size:13.5px;color:#2a2f37;margin:0 0 10px}
  .about .pledge{padding:10px 12px;background:#eef4ec;border-left:2px solid #1f9d55;border-radius:2px}
  .about .support{margin-bottom:0;color:var(--muted)}

  /* Buy Me a Coffee — rebuilt locally rather than using their embed script,
     which would load third-party JS and break both the CSP and the promise
     that this page contacts no other domain. */
  .bmc{
    display:inline-flex;align-items:center;gap:9px;
    background:#5F7FFF;color:#fff;text-decoration:none;
    padding:10px 16px;border-radius:6px;
    font:600 14px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    border:1px solid #3f60e0;
    box-shadow:0 1px 0 rgba(20,23,28,.14);
    margin-top:4px;
  }
  .bmc:hover{background:#4b6cf0}
  .bmc:active{transform:translateY(1px)}
  .bmc:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .bmc svg{flex:0 0 auto;display:block}
  .bmc-note{font-size:11.5px;color:var(--muted);margin:9px 0 0}

  /* visitor count — a figure read off server logs and typed in during the
     weekly update, so the page itself still requests nothing to display it */
  .fstat{flex:1 1 100%;order:-1;padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--rule)}
  .fstat b{
    font:700 15px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
    color:var(--ink);letter-spacing:.01em;
  }
  .fasof{color:var(--muted)}
  .fhow{display:inline-block;margin-top:3px;font-size:11.5px;color:var(--muted)}

  /* ---- colour system ---------------------------------------------------
     A single warm accent against the cool greys, plus one hue per product
     line. Nothing here is decorative: every colour identifies something. */

  /* brand bar, four segments in the line colours */
  .topbar{
    border-top:3px solid transparent;
    border-image:linear-gradient(to right,
      var(--l-ipad) 0 25%, var(--l-air) 25% 50%,
      var(--l-mini) 50% 75%, var(--l-pro) 75% 100%) 1;
  }

  /* the eyebrow stamp picks up the warm accent */
  .stamp{color:var(--accent);border-color:var(--accent)}

  /* column headers get their line's colour as an underline */
  thead th:nth-child(2){box-shadow:inset 0 -3px 0 var(--l-ipad)}
  thead th:nth-child(3){box-shadow:inset 0 -3px 0 var(--l-air)}
  thead th:nth-child(4){box-shadow:inset 0 -3px 0 var(--l-mini)}
  thead th:nth-child(5){box-shadow:inset 0 -3px 0 var(--l-pro)}

  /* the line filter chips carry a matching dot */
  .chip[data-line]:not([data-line="0"])::before{
    content:'';display:inline-block;width:7px;height:7px;border-radius:50%;
    margin-right:6px;vertical-align:0;
  }
  .chip[data-line="1"]::before{background:var(--l-ipad)}
  .chip[data-line="2"]::before{background:var(--l-air)}
  .chip[data-line="3"]::before{background:var(--l-mini)}
  .chip[data-line="4"]::before{background:var(--l-pro)}
  .chip[data-line][aria-pressed="true"]::before{box-shadow:0 0 0 1.5px rgba(255,255,255,.85)}

  /* cards keep the page's texture from showing through */
  .toolbar,.scroller,.about,.sizes-cmp,.empty,.prose,.notes{
    background-color:var(--card);
  }
  .notes{padding:18px 20px;border:1px solid var(--rule);border-radius:4px}

  /* support strip — same lockup on every page */
  .tipstrip{
    display:flex;align-items:center;gap:18px;flex-wrap:wrap;
    background:var(--card);border:1px solid var(--rule-strong);
    border-left:3px solid var(--accent);
    border-radius:4px;padding:16px 18px;margin-top:26px;
  }
  .tipcopy{flex:1 1 300px;min-width:0}
  .tipcopy strong{display:block;font-size:14.5px;color:var(--ink);margin-bottom:3px}
  .tipcopy span{font-size:12.5px;color:var(--muted)}
  .tipstrip .bmc{margin-top:0;flex:0 0 auto}
  @media (max-width:520px){ .tipstrip .bmc{width:100%;justify-content:center} }