:root{
    --ink:#05070D; --ink-2:#090D16; --surface:#0E1420; --surface-2:#131A28;
    --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
    --fg:#FFFFFF; --fg-2:#A7B0C0; --fg-3:#6C778A;
    --blue:#4DA3FF; --blue-deep:#1F5FD0; --amber:#FFB43C; --green:#4ADE80;
    --max:1160px;
    --font:system-ui,-apple-system,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box}
  /* The decorative glows bleed past their containers on purpose. On desktop
     body's clip caught them; on mobile the html element scrolls instead and
     the page slid sideways. clip rather than hidden, because hidden would make
     a scroll container and break the sticky nav. */
  html{overflow-x:clip}
  body{
    background:var(--ink); color:var(--fg); font-family:var(--font);
    font-size:17px; line-height:1.55; margin:0; padding:0;
    -webkit-font-smoothing:antialiased; overflow-x:clip;
  }
  a{color:inherit}
  .wrap{max-width:var(--max); margin:0 auto; padding-inline:22px}

  /* ---------- type ---------- */
  h1,h2,h3{font-weight:700; letter-spacing:-.033em; line-height:1.035; margin:0; text-wrap:balance}
  h1{font-size:clamp(2.7rem,7.2vw,5.1rem)}
  h2{font-size:clamp(2rem,4.6vw,3.35rem); letter-spacing:-.03em}
  h3{font-size:clamp(1.12rem,1.7vw,1.32rem); letter-spacing:-.018em; line-height:1.25}
  .lede{color:var(--fg-2); font-size:clamp(1rem,1.35vw,1.16rem); line-height:1.6; margin:20px 0 0; max-width:62ch}
  .eyebrow{
    font-size:.735rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
    color:var(--blue); margin:0 0 16px;
  }
  .muted{color:var(--fg-2)}

  /* ---------- nav ---------- */
  .nav{position:sticky; top:0; z-index:50; background:rgba(5,7,13,.72); backdrop-filter:blur(18px); border-bottom:1px solid var(--line)}
  .nav .wrap{display:flex; align-items:center; gap:28px; height:64px}
  .brand{display:flex; align-items:center; gap:11px; font-weight:700; letter-spacing:-.02em; text-decoration:none; font-size:1.06rem}
  .brand img{width:28px; height:28px; border-radius:7px; display:block}
  .navlinks{display:flex; gap:26px; margin-left:auto; font-size:.93rem; color:var(--fg-2)}
  .navlinks a{text-decoration:none}
  .navlinks a:hover{color:var(--fg)}
  .navcta{
    background:var(--fg); color:var(--ink); text-decoration:none; font-weight:600; font-size:.9rem;
    padding:9px 17px; border-radius:100px; white-space:nowrap;
  }
  /* hamburger, mobile only */
  .menubtn{display:none; position:relative; width:38px; height:38px; flex:0 0 auto;
    border:0; background:transparent; color:var(--fg); cursor:pointer; padding:0; margin-left:2px}
  .menubtn i{position:absolute; left:9px; right:9px; height:2px; background:currentColor;
    border-radius:2px; transition:transform .22s ease, opacity .18s ease}
  .menubtn i:nth-child(1){top:13px}
  .menubtn i:nth-child(2){top:19px}
  .menubtn i:nth-child(3){top:25px}
  .menubtn[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .menubtn[aria-expanded="true"] i:nth-child(2){opacity:0}
  .menubtn[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .menubtn:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:8px}

  @media(max-width:820px){
    .nav .wrap{gap:10px; position:relative}
    .menubtn{display:block}
    .getwrap{margin-left:auto}
    .navlinks{
      display:none; position:absolute; top:100%; left:0; right:0; margin:0;
      flex-direction:column; gap:0; font-size:1rem; color:var(--fg);
      /* solid, not blurred: a backdrop-filter nested inside the nav's own
         backdrop-filter composites wrong and the page shows through */
      background:var(--ink); box-shadow:0 18px 40px -12px rgba(0,0,0,.75);
      border-bottom:1px solid var(--line); padding:4px 22px 14px;
      max-height:calc(100dvh - 64px); overflow-y:auto;
    }
    .navlinks.open{display:flex}
    .navlinks a{padding:14px 2px; border-top:1px solid var(--line)}
    .navlinks a:first-child{border-top:0}
  }

  /* ---------- hero ---------- */
  .hero{position:relative; padding-block:clamp(64px,10vw,120px) 0; text-align:center; overflow:hidden}
  /* the Apple TV top shelf artwork, reused as a faint card-grid texture and
     faded out before it reaches the content */
  .hero::before{
    content:""; position:absolute; inset:0 0 auto; height:min(760px,78vw); z-index:0; pointer-events:none;
    background:url(/img/texture.webp) center top / auto 300px repeat-x;
    opacity:.42;
    -webkit-mask-image:linear-gradient(#000 0%, rgba(0,0,0,.6) 46%, transparent 86%);
    mask-image:linear-gradient(#000 0%, rgba(0,0,0,.6) 46%, transparent 86%);
  }
  .hero::after{
    content:""; position:absolute; inset:-26% 0 auto; height:1000px; z-index:1; pointer-events:none;
    background:radial-gradient(58% 50% at 50% 44%, rgba(31,95,208,.34), transparent 72%);
  }
  .hero .wrap{position:relative; z-index:2}
  .hero h1{margin-inline:auto; max-width:19ch}
  .hero .lede{margin-inline:auto; text-align:center; max-width:56ch}
  .badges{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px}
  .badges img{height:50px; width:auto; display:block}
  .badges a{display:block; transition:transform .18s ease}
  .badges a:hover{transform:translateY(-2px)}
  .free{margin-top:16px; font-size:.87rem; color:var(--fg-3)}

  /* stat strip */
  .stats{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:52px;
    background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  }
  .stat{background:var(--ink-2); padding:22px 14px}
  .stat b{display:block; font-size:clamp(1.5rem,3.1vw,2.1rem); font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
  .stat span{display:block; font-size:.74rem; letter-spacing:.11em; text-transform:uppercase; color:var(--fg-3); margin-top:6px; font-weight:600}
  @media(max-width:620px){ .stats{grid-template-columns:repeat(2,1fr)} }

  /* hero art: the hand photo */
  .hero-art{margin-top:44px; max-width:520px; margin-inline:auto; position:relative}
  /* the glow the photo used to carry, rebuilt here so it can be re-tinted with
     whatever screen is on the phone. --glow is the binder's own brand colour. */
  .hero-art{--glow:229,26,54}
  .hero-art::before{
    content:""; position:absolute; z-index:0; inset:-22% -34% -14%;
    border-radius:50%; pointer-events:none;
    background:radial-gradient(closest-side, rgba(var(--glow),.85), rgba(var(--glow),.40) 45%, rgba(var(--glow),.12) 70%, transparent 84%);
    filter:blur(70px);
  }
  .hero-art picture, .hero-art img{position:relative; z-index:1}
  .hero-art img{width:100%; height:auto; display:block; filter:drop-shadow(0 40px 70px rgba(0,0,0,.75))}
  @media(max-width:1080px){ .hero-art{max-width:400px} }

  /* hero shot */
  .shot{margin-top:56px; position:relative}
  .shot img{
    width:100%; height:auto; display:block; border-radius:clamp(10px,1.6vw,20px);
    border:1px solid var(--line-2); box-shadow:0 40px 120px -30px rgba(31,95,208,.55), 0 0 0 1px rgba(0,0,0,.4);
  }
  .caption{margin-top:16px; font-size:.82rem; color:var(--fg-3); text-align:center}

  /* ---------- sections ---------- */
  section{padding-block:clamp(72px,9vw,128px)}
  section.tight{padding-block:clamp(56px,7vw,92px)}
  .rule{border-top:1px solid var(--line)}
  /* the phone row runs to the section edge, so the divider crops it */
  section.flush{padding-bottom:0}
  section.flush .phones{margin-bottom:0}
  .sec-head{max-width:24ch}
  .sec-head.wide{max-width:32ch}

  /* two-up cards */
  .duo{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:52px}
  @media(max-width:860px){ .duo{grid-template-columns:1fr} }
  .card{
    background:var(--surface); border:1px solid var(--line); border-radius:20px;
    padding:clamp(24px,3vw,34px); position:relative; overflow:hidden;
  }
  .card p{margin:12px 0 0; color:var(--fg-2); font-size:.97rem; line-height:1.6}
  .card p b{color:var(--fg); font-weight:600}
  .card.glow-blue{background:linear-gradient(165deg,rgba(31,95,208,.22),var(--surface) 62%)}
  .card.glow-green{background:linear-gradient(165deg,rgba(74,222,128,.14),var(--surface) 62%)}
  /* #FFCC00, the app's variant pill yellow (iOS system yellow, Android PtcYellow).
     Stronger at the corner than the blue and green glows and faded sooner:
     a faint yellow over this navy mixes to olive rather than reading as yellow. */
  .card.glow-yellow{background:linear-gradient(165deg,rgba(255,204,0,.26),rgba(255,204,0,.06) 40%,var(--surface) 70%)}

  /* feature list */
  .feats{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px}
  @media(max-width:900px){ .feats{grid-template-columns:repeat(2,1fr)} }
  @media(max-width:600px){ .feats{grid-template-columns:1fr} }
  .feat{border-top:1px solid var(--line); padding-top:20px}
  .feat h3{font-size:1.04rem}
  .feat p{margin:9px 0 0; color:var(--fg-2); font-size:.93rem; line-height:1.6}

  /* privacy */
  .privacy{background:var(--ink-2); border-block:1px solid var(--line)}
  .priv-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px 40px; margin-top:44px}
  @media(max-width:760px){ .priv-grid{grid-template-columns:1fr} }
  .priv{display:flex; gap:14px; align-items:flex-start; padding-block:12px; border-top:1px solid var(--line)}
  .priv .tick{color:var(--green); font-weight:700; font-size:1.05rem; line-height:1.5; flex:none}
  .priv p{margin:0; font-size:.95rem; color:var(--fg-2)}
  .priv p b{color:var(--fg); font-weight:600; display:block; letter-spacing:-.01em}

  /* binder tickers */
  .wall{margin-top:44px; display:flex; flex-direction:column; gap:11px; width:100%; overflow:hidden}
  .ticker{
    overflow:hidden; width:100%;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  }
  .track{display:flex; gap:11px; width:max-content; will-change:transform}
  .track.left{animation:ticker-left 78s linear infinite}
  .track.right{animation:ticker-right 94s linear infinite}
  .ticker:hover .track{animation-play-state:paused}
  @keyframes ticker-left{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }
  @keyframes ticker-right{ from{transform:translate3d(-50%,0,0)} to{transform:translate3d(0,0,0)} }
  .binder{
    display:inline-flex; align-items:center; border-radius:100px;
    padding:10px 18px; font-size:.88rem; font-weight:600; letter-spacing:-.01em;
    color:var(--fg); white-space:nowrap; background:var(--surface);
    border:1px solid var(--line);
  }
  /* each pill opens its binder's page; the row stops while a pill has focus
     too, not only under the mouse, so a keyboard user is not chasing it */
  a.binder{text-decoration:none; transition:filter .18s ease}
  a.binder:hover{filter:brightness(1.3)}
  a.binder:focus-visible{outline:2px solid var(--blue); outline-offset:-2px}
  .ticker:focus-within .track{animation-play-state:paused}
  .sec-more{margin:14px 0 0; font-size:.95rem}
  .sec-more a{color:var(--blue); font-weight:600; text-decoration:none}
  .sec-more a:hover{text-decoration:underline; text-underline-offset:3px}
  @media(prefers-reduced-motion:reduce){
    .track{animation:none}
    .ticker{overflow-x:auto; -webkit-mask-image:none; mask-image:none}
  }

  /* catalog donut, cropped from the app's own Dashboard */
  .catalog{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(28px,4vw,56px); align-items:center}
  @media(max-width:900px){ .catalog{grid-template-columns:1fr} }
  .donut{margin:0; justify-self:center; max-width:290px; width:100%}
  .donut img{
    width:100%; height:auto; display:block; border-radius:22px;
    border:1px solid var(--line); background:#151517;
  }

  /* phone shots */
  .phones{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; position:relative}
  /* the screens sink into the divider rather than stopping at it */
  .phones::after{
    content:""; position:absolute; z-index:2; left:-4vw; right:-4vw; bottom:0; height:190px;
    pointer-events:none;
    background:linear-gradient(to top, var(--ink) 0%, rgba(5,7,13,.92) 22%, rgba(5,7,13,.55) 55%, transparent 100%);
  }
  @media(max-width:760px){ .phones{grid-template-columns:1fr; max-width:340px; margin-inline:auto} }
  .phone figure{margin:0; position:relative}
  /* each screen's own dominant colour, blooming from behind it */
  .phone figure::before{
    content:""; position:absolute; z-index:0; inset:-20% -30% -6%;
    border-radius:50%; pointer-events:none; filter:blur(58px);
    background:radial-gradient(closest-side, rgba(var(--g),.95), rgba(var(--g),.45) 48%, rgba(var(--g),.14) 72%, transparent 86%);
  }
  .phone img{
    position:relative; z-index:1;
    width:100%; display:block; border-radius:18px 18px 0 0;
    border:1px solid var(--line-2); border-bottom:0;
    aspect-ratio:9/13.7; height:auto; object-fit:cover; object-position:top;
    background:#000; box-shadow:0 24px 60px -24px rgba(0,0,0,.9);
  }
  .phone figcaption{margin-top:14px; font-size:.9rem; color:var(--fg-2)}
  .phone figcaption b{display:block; color:var(--fg); font-weight:600; letter-spacing:-.01em; margin-bottom:3px}

  /* camera split */
  .split{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(24px,3.5vw,48px); align-items:center; margin-top:52px}
  @media(max-width:860px){ .split{grid-template-columns:1fr} }
  /* The 9:12 frame shows 1040 of shot-scan.jpg's 1543 rows. 24% down skips the
     Done/Scan result bar and ends under the whole Open Card button (Pablo,
     2026-10-05); re-tune it when the screenshot changes. */
  .split .shotcol img{
    width:100%; display:block; border-radius:20px; border:1px solid var(--line-2);
    aspect-ratio:9/12; height:auto; object-fit:cover; object-position:50% 24%; background:#000;
    box-shadow:0 30px 80px -30px rgba(31,95,208,.6);
  }
  .split .stack{display:flex; flex-direction:column; gap:20px}

  /* tv band */
  .tvband{text-align:center; background:linear-gradient(180deg,var(--ink),#0A1020 55%,var(--ink))}
  .tvband h2{max-width:20ch; margin-inline:auto}
  .tvband .lede{margin-inline:auto; text-align:center}

  /* guides */
  .guides{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:52px}
  @media(max-width:860px){ .guides{grid-template-columns:1fr} }
  .guide{
    display:block; text-decoration:none; background:var(--surface); border:1px solid var(--line);
    border-radius:20px; padding:clamp(24px,3vw,32px); transition:border-color .2s ease, transform .2s ease;
  }
  .guide:hover{border-color:var(--line-2); transform:translateY(-2px)}
  .guide .kicker{font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-3); font-weight:700}
  .guide h3{margin-top:14px}
  .guide p{margin:12px 0 0; color:var(--fg-2); font-size:.93rem}
  .guide .go{margin-top:18px; font-size:.9rem; color:var(--blue); font-weight:600}
  .guides-all{margin:24px 0 0; font-size:.9rem; font-weight:600}
  .guides-all a{color:var(--blue); text-decoration:none}
  .guides-all a:hover{text-decoration:underline; text-underline-offset:3px}
  .guides-all a:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:4px}

  /* tv */
  .tv{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center}
  @media(max-width:860px){ .tv{grid-template-columns:1fr} }
  .tv img{width:100%; height:auto; border-radius:16px; border:1px solid var(--line-2); display:block}

  /* cta */
  .cta{text-align:center; background:linear-gradient(180deg,var(--ink),#0A1020)}
  .cta .badges{margin-top:38px}

  /* footer */
  footer{border-top:1px solid var(--line); padding-block:52px 44px; font-size:.88rem; color:var(--fg-3)}
  .fgrid{display:flex; flex-wrap:wrap; gap:36px 56px; justify-content:space-between}
  .fcol h4{font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-2); margin:0 0 14px; font-weight:700}
  .fcol a{display:block; text-decoration:none; margin-bottom:9px; color:var(--fg-3)}
  .fcol a:hover{color:var(--fg)}
  .legal{margin-top:44px; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
  .legal .marks{flex-basis:100%; max-width:90ch}

  /* ---------- floating hero chips ---------- */
  .stage{position:relative}
  .chip{
    position:absolute; z-index:3; display:flex; gap:10px; align-items:center;
    background:rgba(14,20,32,.86); backdrop-filter:blur(14px);
    border:1px solid var(--line-2); border-radius:14px;
    padding:10px 14px; text-align:left; white-space:nowrap;
    box-shadow:0 18px 40px -18px rgba(0,0,0,.9);
    animation:float 7s ease-in-out infinite;
  }
  .chip b{display:block; font-size:.86rem; font-weight:600; letter-spacing:-.01em}
  .chip span{display:block; font-size:.76rem; color:var(--fg-3); margin-top:1px}
  .chip .mark{width:26px; height:26px; border-radius:7px; flex:none}
  .chip .chipicon{font-size:1.2rem; line-height:1.25; flex:none; width:26px; text-align:center}
  .chip .ok{color:var(--green); font-size:1rem; line-height:1}
  .chip.c1{top:6%;  left:-3%;  animation-delay:-.4s}
  .chip.c2{top:26%; right:-4%; animation-delay:-2.1s}
  .chip.c3{bottom:20%; left:-5%; animation-delay:-3.6s}
  .chip.c4{bottom:6%; right:-2%; animation-delay:-5.2s}
  @keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
  @media(max-width:1080px){ .chip{display:none} }

  /* ---------- logos in the ticker ---------- */

  /* ---------- store menu ---------- */
  .getwrap{position:relative; margin-left:auto}
  .getmenu{
    position:absolute; right:0; top:calc(100% + 10px); z-index:60;
    background:var(--surface); border:1px solid var(--line-2); border-radius:14px;
    padding:8px; min-width:210px; box-shadow:0 24px 50px -20px rgba(0,0,0,.95);
  }
  .getmenu a{
    display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px;
    text-decoration:none; font-size:.9rem; font-weight:500; color:var(--fg-2);
  }
  .getmenu a:hover{background:var(--surface-2); color:var(--fg)}
  .getmenu a span{font-size:.75rem; color:var(--fg-3); display:block; font-weight:400}

  /* ---------- reveal on scroll (visible by default) ---------- */
  .r-armed .reveal{opacity:0; transform:translateY(14px)}
  .r-armed .reveal.seen{opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1)}
  @media(prefers-reduced-motion:reduce){ .r-armed .reveal{opacity:1; transform:none} }

  /* ---------- section color wash ---------- */
  .wash{position:relative; overflow:hidden}
  .wash::before{
    content:""; position:absolute; inset:auto 0 auto 0; top:-40%; height:520px; pointer-events:none;
    background:radial-gradient(48% 46% at 22% 40%, var(--wash-a), transparent 70%),
               radial-gradient(44% 44% at 82% 30%, var(--wash-b), transparent 70%);
    opacity:.5;
  }
  .wash > .wrap{position:relative}

  @media(prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }

/* ============================================================
   Content pages: guides, policies, and the short utility pages.
   The home page is a layout; these are documents, so they get a
   single readable column and a tighter type scale.
   ============================================================ */

.page{padding-block:clamp(52px,7vw,86px) clamp(64px,8vw,110px)}
/* Search drops people onto the guides before they have seen anything else, so
   they get the home page's arrival: the card texture and the blue bloom behind
   the header. Lighter than the hero's, because these pages are for reading.
   overflow:clip rather than hidden, so no scroll container is created. */
.arrival{position:relative; overflow:clip}
.arrival::before{
  content:""; position:absolute; inset:0 0 auto; height:min(520px,62vw); z-index:0; pointer-events:none;
  background:url(/img/texture.webp) center top / auto 300px repeat-x; opacity:.34;
  -webkit-mask-image:linear-gradient(#000 0%, rgba(0,0,0,.55) 42%, transparent 84%);
  mask-image:linear-gradient(#000 0%, rgba(0,0,0,.55) 42%, transparent 84%);
}
.arrival::after{
  content:""; position:absolute; inset:-16% 0 auto; height:700px; z-index:1; pointer-events:none;
  background:radial-gradient(56% 46% at 50% 36%, rgba(var(--bloom,31,95,208),.26), transparent 72%);
}
.arrival > .wrap{position:relative; z-index:2}
.page .wrap{max-width:760px}
.page-wide .wrap{max-width:var(--max)}

.pagehead{border-bottom:1px solid var(--line); padding-bottom:clamp(26px,3vw,38px); margin-bottom:clamp(30px,4vw,46px)}
.pagehead h1{font-size:clamp(2.1rem,5vw,3.3rem); letter-spacing:-.03em; line-height:1.04}
.pagehead .lede{margin-top:18px}
.pagehead .updated{
  margin-top:20px; font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  font-size:.76rem; letter-spacing:.06em; color:var(--fg-3); text-transform:uppercase;
}

/* long-form body copy */
.prose{color:var(--fg-2); font-size:1.02rem; line-height:1.72}
.prose > *:first-child{margin-top:0}
/* A heading that sits alone in its own .prose block is always a first child, so
   the rule above was stripping the space before every section heading. Put it
   back on the block itself, except straight after the page header, which already
   carries its own bottom margin. */
.page .wrap > :not(.pagehead) + .prose{margin-top:clamp(38px,4.5vw,56px)}
.prose h2{
  color:var(--fg); font-size:clamp(1.3rem,2.4vw,1.72rem); letter-spacing:-.022em;
  margin:clamp(38px,4.5vw,56px) 0 0; scroll-margin-top:84px;
}
.prose h3{color:var(--fg); font-size:1.08rem; letter-spacing:-.015em; margin:30px 0 0}
.prose p{margin:16px 0 0; max-width:68ch}
.prose ul,.prose ol{margin:16px 0 0; padding-left:1.25em; max-width:68ch}
.prose li{margin-top:9px}
.prose li::marker{color:var(--rule, var(--fg-3))}
.prose strong{color:var(--fg); font-weight:600}
.prose a{color:var(--blue); text-underline-offset:3px}
.prose hr{border:0; border-top:1px solid var(--line); margin:clamp(40px,5vw,60px) 0 0}

/* a short list of plain facts, as on Contact */
.facts-list{list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.facts-list li{margin:0; background:var(--ink-2); padding:16px 20px; display:flex; gap:16px; flex-wrap:wrap; align-items:baseline}
.facts-list b{color:var(--fg); font-weight:600; min-width:9ch}
.facts-list span,.facts-list a{color:var(--fg-2); text-decoration:none}
.facts-list a:hover{color:var(--fg)}
/* opt-in bloom, the 404 board's trick in the brand blue. A box-shadow because
   .facts-list clips its own overflow to round the rows. */
.facts-list.glow{box-shadow:0 0 90px -6px rgba(77,163,255,.24),
                            0 0 34px -12px rgba(77,163,255,.20),
                            0 26px 60px -34px rgba(0,0,0,.9)}

/* the guides' pull-out blocks */
.note-card{
  margin-top:clamp(26px,3vw,36px); padding:clamp(20px,2.4vw,28px);
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
}
.note-card h3{margin-top:0}
.note-card p{color:var(--fg-2)}

.split-list{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:28px}
@media(max-width:700px){ .split-list{grid-template-columns:1fr} }
.split-list section{padding:0; border:0}
.split-list .col{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:clamp(20px,2.4vw,26px)}
.split-list .col h3{margin:0 0 4px}
.split-list .col ul{margin-top:10px}

.steps{list-style:none; margin:28px 0 0; padding:0; counter-reset:step}
.steps li{
  margin:0; padding:22px 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:auto 1fr; gap:0 20px; align-items:start;
}
.steps li::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  font-family:var(--font); font-weight:700; font-size:1.42rem;
  color:var(--rule-strong); line-height:1; font-variant-numeric:tabular-nums;
}
.steps b{display:block; color:var(--fg); font-weight:600; margin-bottom:5px; letter-spacing:-.01em}
.steps p{margin:0}
/* the donate page labels its own steps, so the counter would repeat it */
.steps.plain{counter-reset:none}
.steps.plain li{grid-template-columns:1fr}
.steps.plain li::before{content:none}

/* the airline programme rundown in the beginner's guide */
.programs{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:28px}
@media(max-width:700px){ .programs{grid-template-columns:1fr} }
.program{background:var(--surface); border:1px solid var(--line); border-left:3px solid rgb(var(--c)); border-radius:0 16px 16px 0; padding:clamp(18px,2.2vw,24px)}
.program h3{margin:0}
.program p{margin-top:9px; font-size:.96rem}

/* page-level call to action */
.page-cta{margin-top:clamp(48px,6vw,72px); padding-top:clamp(34px,4vw,48px); border-top:1px solid var(--line); text-align:center}
.page-cta h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.page-cta .badges{margin-top:26px}

.facts-list + .prose{margin-top:clamp(24px,3vw,34px)}

/* value tiers in the beginner's guide */
.tiers{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:28px;
  background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden}
@media(max-width:780px){ .tiers{grid-template-columns:repeat(2,1fr)} }
@media(max-width:420px){ .tiers{grid-template-columns:1fr} }
.tier{background:var(--ink-2); padding:20px 18px}
.tier .label{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); font-weight:700}
.tier b{display:block; font-size:1.12rem; margin-top:8px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.tier p{margin-top:8px; font-size:.88rem; color:var(--fg-2); line-height:1.55}

/* three-up cards used for marketplaces */
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px}
@media(max-width:760px){ .trio{grid-template-columns:1fr} }

/* a link through to the sibling guide */
.next-guide{display:block; text-decoration:none; margin-top:clamp(40px,5vw,60px);
  background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:clamp(22px,2.6vw,30px);
  transition:border-color .2s ease, transform .2s ease}
.next-guide:hover{border-color:var(--line-2); transform:translateY(-2px)}
.next-guide .kicker{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); font-weight:700}
.next-guide h3{margin-top:10px; font-size:1.22rem}
.next-guide .go{margin-top:12px; color:var(--blue); font-weight:600; font-size:.92rem}

.note-card .emoji{display:block; font-size:1.65rem; line-height:1; margin-bottom:12px}

/* the condition scale. Badge colours match the app's own icons, so the guide
   teaches the badge someone will actually see on a card. */
.grades{list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.grades li{margin:0; background:var(--ink-2); padding:18px 20px;
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start}
.grades .badge{width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  font-weight:800; font-size:.8rem; letter-spacing:.02em; flex:0 0 auto;
  background:rgba(var(--c),.16); color:rgb(var(--c)); border:1px solid rgba(var(--c),.34)}
.grades b{display:block; color:var(--fg); font-weight:600; letter-spacing:-.01em}
.grades p{margin:6px 0 0; color:var(--fg-2); font-size:.95rem; line-height:1.6; max-width:62ch}
.grades .m{--c:255,199,60}
.grades .lw{--c:74,222,128}
.grades .mw{--c:255,180,60}
.grades .hw{--c:248,113,113}
.grades .d{--c:148,163,184}
.grades .ns{--c:108,119,138}
@media(max-width:520px){ .grades li{padding:15px 14px; gap:12px} }

/* difficulty squares, taken from the app's own dark-mode values so the guide
   teaches the badge a collector will actually see. Letter colour follows the
   app's contrast rule: black on the light violet, white on the other three. */
.dsq{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:6px;
  font-weight:700; font-size:.82rem; line-height:1; font-family:var(--font)}
.dsq.e{background:#B79CF0; color:#0B0713}
.dsq.m{background:#8F6AD8; color:#fff}
.dsq.h{background:#6742B0; color:#fff}
.dsq.v{background:#432A7A; color:#fff}

/* the scale as the app draws it, with the marker over the median */
.dscale{margin:30px auto 0; padding:22px 24px; display:block; width:fit-content; text-align:center;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  /* the violet the squares are drawn from, bloomed the way the 404 board and
     the contact table are. A box-shadow because .dscale rounds its own corners. */
  box-shadow:0 0 90px -6px rgba(143,106,216,.30),
             0 0 34px -12px rgba(143,106,216,.24),
             0 26px 60px -34px rgba(0,0,0,.9)}
.dscale .dsmark, .dscale .dsrow{display:grid; grid-template-columns:repeat(4,26px); gap:4px;
  justify-items:center; justify-content:center}
.dscale .dsmark{margin-bottom:5px}
.dscale .dsmark span{width:0; height:0}
.dscale .dsmark span.on{border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:6px solid var(--fg)}
.dscale figcaption{margin:16px auto 0; font-size:.86rem; color:var(--fg-3); max-width:44ch}

/* ---------- donate ---------- */

/* a real button, for the two actions that leave the site */
.btn{display:inline-flex; align-items:center; gap:9px; margin-top:14px;
  background:var(--fg); color:var(--ink); text-decoration:none; font-weight:600; font-size:.92rem;
  padding:11px 20px; border-radius:100px; transition:transform .18s ease, opacity .18s ease}
.btn:hover{transform:translateY(-1px); opacity:.9}
.btn.ghost{background:transparent; color:var(--fg); border:1px solid var(--line-2)}
.btn.ghost:hover{border-color:var(--fg-3)}

/* the card on offer, and the video, share one framed-media treatment */
.media{margin-top:clamp(30px,4vw,44px); border-radius:18px; overflow:hidden;
  border:1px solid var(--line); background:var(--surface); position:relative}
.media img{display:block; width:100%; height:auto}

/* click-to-load video: nothing reaches YouTube until the play button is used */
.video{cursor:pointer; aspect-ratio:16/9}
.video img{height:100%; object-fit:cover}
.video iframe{width:100%; height:100%; border:0; display:block}
.video .play{position:absolute; inset:0; display:grid; place-items:center; background:rgba(5,7,13,.34);
  transition:background .2s ease}
.video:hover .play{background:rgba(5,7,13,.18)}
.video .play span{width:68px; height:68px; border-radius:50%; background:rgba(255,255,255,.94);
  display:grid; place-items:center; box-shadow:0 8px 30px rgba(0,0,0,.4)}
.video .play span::after{content:""; margin-left:5px; border-style:solid;
  border-width:11px 0 11px 18px; border-color:transparent transparent transparent var(--ink)}
.video .note{position:absolute; left:0; right:0; bottom:0; padding:10px 14px; font-size:.76rem;
  color:var(--fg-2); background:linear-gradient(180deg,transparent,rgba(5,7,13,.86))}

/* the three organisations behind the offer */
.partners{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(26px,5vw,56px);
  margin-top:clamp(40px,5vw,60px); padding-top:clamp(30px,4vw,42px); border-top:1px solid var(--line)}
.partners a{display:block; opacity:.85; transition:opacity .2s ease}
.partners a:hover{opacity:1}
.partners img{display:block; height:68px; width:auto}
.partners img.wide{height:50px}
@media(max-width:520px){ .partners img{height:54px} .partners img.wide{height:40px} }
/* at the top of the page it introduces the three, so it carries no divider */
.partners.top{margin-top:clamp(26px,3vw,36px); padding-top:0; border-top:0}

/* 404 */
.notfound{min-height:52vh; display:flex; align-items:center}
.notfound .wrap{width:100%; text-align:center}
.notfound .lede{margin-inline:auto}
/* the rows are label/value pairs: centring those would be unreadable */
.notfound .golist{text-align:left}

/* 404 destinations. The whole row is the link, and it looks like one: the old
   version was muted grey text with no underline, which reads as a caption. */
.golist{list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.golist li{margin:0}
.golist a{display:grid; grid-template-columns:9rem 1fr auto; gap:16px; align-items:center;
  background:var(--ink-2); padding:16px 20px; text-decoration:none; color:var(--fg-2);
  transition:background .18s ease, color .18s ease}
.golist a:hover{background:var(--surface-2); color:var(--fg)}
.golist b{color:var(--fg); font-weight:600}
.golist a::after{content:"\2192"; color:var(--blue); font-size:1.05rem;
  transition:transform .18s ease}
.golist a:hover::after{transform:translateX(3px)}
.golist a:focus-visible{outline:2px solid var(--blue); outline-offset:-2px; color:var(--fg)}
@media(prefers-reduced-motion:reduce){ .golist a, .golist a::after{transition:none} }
@media(max-width:520px){
  .golist a{grid-template-columns:1fr auto; gap:3px 12px; padding:14px 16px}
  .golist b{grid-column:1 / -1}
}

/* 404: an airport departure board, because a missing page is a delay, not a crash */
.board{margin:0 auto clamp(26px,3.5vw,38px); max-width:620px;
  /* the amber bloom the hero does in red. A box-shadow rather than a pseudo
     element because .board clips its own overflow to round the rows. */
  box-shadow:0 0 90px -6px rgba(255,180,60,.30),
             0 0 34px -10px rgba(255,180,60,.24),
             0 26px 60px -34px rgba(0,0,0,.9);
  border:1px solid var(--line-2); border-radius:14px; overflow:hidden; background:#07090E}
.board-head, .board-row{display:grid; grid-template-columns:5.6rem 1fr 3.4rem 7rem;
  gap:14px; align-items:center; padding:11px 16px}
.board-head{font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-3); border-bottom:1px solid var(--line)}
.board-row{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  font-size:.92rem; color:var(--fg-2); font-variant-numeric:tabular-nums}
.board-row .dest{color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.board .status{display:inline-flex; align-items:center; gap:8px; color:var(--amber);
  font-weight:700; letter-spacing:.05em; text-transform:uppercase}
.board .status::before{content:""; width:7px; height:7px; border-radius:50%;
  background:var(--amber); flex:0 0 auto; animation:blip 1.6s steps(1,end) infinite}
@keyframes blip{0%,55%{opacity:1} 55.01%,100%{opacity:.2}}
@media(prefers-reduced-motion:reduce){ .board .status::before{animation:none} }
@media(max-width:560px){
  .board-head, .board-row{grid-template-columns:4.4rem 1fr 6rem; gap:10px; padding:10px 12px}
  .board-head span:nth-child(3), .board-row span:nth-child(3){display:none}
  .board-row{font-size:.82rem}
}
.notfound .code{font-family:var(--font); font-weight:800;
  font-size:clamp(4.5rem,16vw,9rem); line-height:.9; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1.5px var(--line-2); margin-bottom:8px}

/* download page (/get/, /es/descargar/): a short pitch for anyone who lands
   here instead of being forwarded straight to their store */
.getpage .gethero{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,56px); align-items:center}
@media(max-width:860px){ .getpage .gethero{grid-template-columns:1fr; text-align:center} }
.getpage .gethero h1{font-size:clamp(2.3rem,5.4vw,3.6rem); letter-spacing:-.03em; line-height:1.02; margin-top:12px; text-wrap:balance}
.getpage .gethero .badges{justify-content:flex-start; margin-top:30px}
@media(max-width:860px){ .getpage .gethero .badges{justify-content:center} }
.getpage .getart{margin-top:0; max-width:420px}
@media(max-width:860px){ .getpage .getart{max-width:300px} }
.getpage .feats{margin-top:clamp(48px,6vw,80px); position:relative; z-index:3}
.getpage .getprice{max-width:620px; margin:clamp(56px,7vw,88px) auto 0; text-align:center}
.getpage .getprice h2{font-size:clamp(1.5rem,3vw,2rem); letter-spacing:-.02em}
.getpage .getprice .lede{margin-inline:auto}
.getpage .getprice .badges{margin-top:26px}
.getpage .note-card{max-width:520px; margin:clamp(40px,5vw,60px) auto 0}
/* the home page's fade over the phone row sinks the screens into a divider;
   here it would cover the captions, so the images fade themselves instead */
.getpage .phones::after{display:none}
.getpage .phone img{-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent);mask-image:linear-gradient(to bottom,#000 72%,transparent)}
/* the hand photo fades out at the bottom through an overlay, not a mask: a mask
   clips the photo's drop shadow to its rectangle, which then shows as a box */
.getpage .getart::after{content:""; position:absolute; z-index:2; left:-40%; right:-40%; top:62%; bottom:-34%; pointer-events:none; background:linear-gradient(to bottom, transparent, var(--ink) 48%)}
/* on a phone the three shots stack into five screens of scrolling; swipe instead */
@media(max-width:760px){
  .getpage .phones{display:flex; max-width:none; gap:16px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; padding:8px 4px 6px; margin-inline:-4px}
  .getpage .phone{flex:0 0 72%; scroll-snap-align:center}
  /* the glow behind each shot reached below the row and gave it a little vertical travel */
  .getpage .phone figure::before{inset:-20% -30% 0}
}

/* ---------- read from inside the app ---------- */
/* The app opens pages with ?in=app and the script at the top of every page marks
   them. The reader already has the app, so nothing on the page offers it. */
.in-app .getwrap, .in-app .badges, .in-app .page-cta, .in-app .cta,
.in-app footer a[href="/get/"], .in-app footer a[href="/es/descargar/"]{display:none}
/* the Get the app button was what pushed the menu button to the right edge */
.in-app .menubtn{margin-left:auto}

/* ---------- a list in two columns, one on phones ---------- */
.cols2{columns:2; column-gap:28px}
.cols2 li{break-inside:avoid}
@media(max-width:600px){ .cols2{columns:1} }

/* the "which airlines" groups on /pilot-trading-cards/, built on .program */
.programs .program.wide{grid-column:1/-1}
.program .gi{margin-right:8px}
.program ul{margin:12px 0 0; padding-left:1.15em; color:var(--fg-2); font-size:.96rem}
.program li{margin-top:6px}
.program li::marker{color:rgb(var(--c))}
/* each name opens its binder's page (binder_pages.py); underlined in the group's colour */
.program li a{color:var(--fg); text-decoration-color:rgba(var(--c),.55); text-underline-offset:3px}
.program li a:hover{text-decoration-color:rgb(var(--c))}
.program p a{color:var(--blue); text-underline-offset:3px; white-space:nowrap}
/* a guide's programme titles link to the binder's page, underlined in its colour */
.program h3 a{text-decoration-color:rgba(var(--c),.55); text-underline-offset:4px}
.program h3 a:hover{text-decoration-color:rgb(var(--c))}
/* spacing below, not above, so both columns of a .cols2 list start level */
.program .cols2 li{margin:0 0 6px}

/* ---------- app screenshots inside a guide ----------
   The home page's phone shots (.phone, and its glow from --g), shown whole
   rather than sinking into a divider, centred, with room for a second or third
   shot beside the first. First used for the variants guide (2026-10-10), where
   the glow is the app's variant yellow. */
.guide-shots{display:flex; flex-wrap:wrap; justify-content:center; gap:32px 28px; margin-top:clamp(30px,4vw,44px)}
.guide-shots .phone{flex:0 1 290px; max-width:290px}
.guide-shots .phone img{aspect-ratio:auto; border-radius:22px; border-bottom:1px solid var(--line-2)}
.guide-shots .phone figure::before{opacity:.8}
.guide-shots figcaption{text-align:center}
@media(max-width:600px){ .guide-shots .phone{flex-basis:260px; max-width:260px} }

/* ---------- read by screen readers only ---------- */
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ---------- a binder's page (/pilot-trading-cards/<binder>/) ----------
   Generated by tools/binder_pages.py. A shop window for the app: the cards
   by number and aircraft, the rest teased. Not .binder, which is the home
   ticker's pill. The arrival bloom takes the binder's brand colour through
   --bloom, as the home hero's glow does. */
.checklist-page .wrap{max-width:940px}
/* .arrival places its bloom by a percentage of the page's height, which on a
   page this long puts it above the top of the screen; pin it to the header */
.checklist-page.arrival::after{top:-200px}
.eyebrow a{color:inherit; text-decoration:none}
.eyebrow a:hover{text-decoration:underline; text-underline-offset:3px}
.eyebrow span{color:var(--fg-3); margin-inline:4px}
.checklist-page .pagehead .badges{justify-content:flex-start; margin-top:26px}
.checklist-page .pagehead .free{margin-top:12px}
.badges.small{margin-top:0; gap:10px}
.badges.small img{height:40px}

/* the home page's stats row, one per binder: 2 to 4 numbers, centred as on
   the home page, between the header's divider and How to get these cards */
.checklist-page .stats{margin:0 0 20px; text-align:center}
.stats.n2{grid-template-columns:repeat(2,1fr)}
.stats.n3{grid-template-columns:repeat(3,1fr)}
@media(max-width:620px){
  .stats.n3{grid-template-columns:repeat(2,1fr)}
  .stats.n3 .stat:last-child{grid-column:1/-1}
}

.binder-intro{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start}
@media(max-width:760px){ .binder-intro{grid-template-columns:1fr} }
.binder-intro .note-card{margin-top:0}
.binder-intro p{margin:10px 0 0; font-size:.95rem; line-height:1.6}
.howget{list-style:none; margin:14px 0 0; padding:0; color:var(--fg-2); font-size:.95rem; line-height:1.5}
.howget li{display:flex; gap:10px; margin-top:10px}
.howget .gi, .adds .gi{flex:0 0 auto; width:1.4em; text-align:center}
.adds .gi{display:inline-block; margin-right:8px}

/* the collectors' levels, as counts only: the app says which card is which.
   The violet bloom is the rarity guide's scale's. */
.votes{box-shadow:0 0 90px -6px rgba(143,106,216,.26), 0 0 34px -12px rgba(143,106,216,.2), 0 26px 60px -34px rgba(0,0,0,.9);
  border-color:rgba(143,106,216,.34)}
.votes .lvls{list-style:none; margin:16px 0 0; padding:0}
.votes .lvls li{display:grid; grid-template-columns:auto 6.6em 1fr auto; gap:12px; align-items:center; margin-top:9px; font-size:.92rem}
.votes .lvls b{color:var(--fg); font-weight:600}
.votes .bar{height:8px; border-radius:4px; background:var(--line)}
.votes .bar i{display:block; height:100%; border-radius:4px; background:var(--c)}
.votes .ct{color:var(--fg-3); font-variant-numeric:tabular-nums; text-align:right; min-width:5.4em}
.votes .tease{color:var(--fg); font-weight:600}
.votes .small{font-size:.86rem; color:var(--fg-3)}
.votes .small a{color:var(--blue); text-underline-offset:3px}
@media(max-width:640px){ .votes .lvls li{grid-template-columns:auto 6em 1fr auto; gap:10px} }

/* four squares, as many filled as the level is hard: the app's filledSteps.
   The violets are the app's dark-mode values, as on .dsq. */
.pips{display:inline-flex; gap:3px; vertical-align:middle}
.pips i{width:9px; height:9px; border-radius:2px; background:var(--c)}
.pips i.off{background:var(--line-2)}
.pips.e, .bar .e{--c:#B79CF0} .pips.m, .bar .m{--c:#8F6AD8} .pips.h, .bar .h{--c:#6742B0} .pips.v, .bar .v{--c:#432A7A}
/* the deepest violet nearly vanishes on the page; a hairline keeps its squares visible */
.pips.v i:not(.off){box-shadow:inset 0 0 0 1px rgba(183,156,240,.45)}

.jump{margin-top:clamp(34px,4vw,48px)}
.jump-h{font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-3); font-weight:700}
.jump div{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.jump a{display:inline-flex; align-items:baseline; gap:7px; padding:7px 13px; border-radius:999px; text-decoration:none;
  background:var(--surface); border:1px solid var(--line-2); color:var(--fg-2); font-size:.88rem}
.jump a:hover{color:var(--fg); border-color:var(--fg-3)}
.jump a span{color:var(--fg-3); font-size:.8rem; font-variant-numeric:tabular-nums}

/* a collection: the cards as number and aircraft, in columns */
.coll{margin-top:clamp(40px,5vw,60px); padding:0; scroll-margin-top:84px}
.coll-head{display:flex; align-items:baseline; justify-content:space-between; gap:6px 16px; flex-wrap:wrap}
.coll-head h2{font-size:clamp(1.3rem,2.4vw,1.72rem); letter-spacing:-.022em}
.coll-head span{color:var(--fg-3); font-size:.9rem; font-variant-numeric:tabular-nums}
.cardlist{list-style:none; margin:14px 0 0; padding:14px 22px; columns:3; column-gap:30px;
  background:var(--ink-2); border:1px solid var(--line); border-radius:16px; color:var(--fg); font-size:.95rem}
.cardlist li{break-inside:avoid; display:flex; gap:12px; padding:6px 0; line-height:1.4}
.cardlist .n{flex:0 0 4.2em; color:var(--fg-3); font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  font-size:.86rem; font-variant-numeric:tabular-nums; padding-top:1px}
@media(max-width:760px){
  .cardlist{columns:2; column-gap:18px; padding:12px 16px; font-size:.92rem}
  /* a fixed number column left too little room for B767-300ER on a phone */
  .cardlist li{gap:9px}
  .cardlist .n{flex:0 0 auto; min-width:2.4em; font-size:.8rem}
}
@media(max-width:360px){ .cardlist{columns:1} }
.vnote{margin:12px 0 0; font-size:.9rem; color:var(--fg-2)}
.vnote b{color:var(--fg); font-weight:600}
.vnote a{color:var(--blue); text-underline-offset:3px}

/* the nudge to the app between collections */
.nudge{margin-top:clamp(36px,4.5vw,52px); padding:18px 22px; display:flex; align-items:center; justify-content:space-between;
  gap:16px 24px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line-2); border-radius:18px}
.nudge b{color:var(--fg); font-weight:600; letter-spacing:-.01em}
.nudge p{margin:4px 0 0; color:var(--fg-2); font-size:.93rem; max-width:52ch}

.adds{margin-top:clamp(52px,6vw,76px)}
.adds h2{font-size:clamp(1.4rem,2.8vw,1.9rem); letter-spacing:-.022em}
.adds .feats{margin-top:26px}