/* ── self-hosted variable fonts ───────────────────────────────────────────────
   These used to come from fonts.googleapis.com. That sends every visitor's IP
   address to Google before they have consented to anything, which a Munich
   court found in January 2022 to be a GDPR violation — and this site now has
   sixteen European carrier pages, so "we only serve US traffic" is not a
   defence worth leaning on.

   Self-hosting also removes two DNS lookups, two TLS handshakes and a
   render-blocking request to a third-party origin from the critical path.

   Both are VARIABLE fonts, which matters for Fraunces: it carries an optical
   size axis (opsz 9–144) that the headings use via font-optical-sizing. A set
   of static weights would have changed how every headline renders.
   ────────────────────────────────────────────────────────────────────────── */
@font-face{
  font-family:'Fraunces';
  src:url('/fonts/fraunces.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Manrope';
  src:url('/fonts/manrope.woff2') format('woff2');
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Warm grey ("stone") page with white cards on it. Greys sit a few points
     warm (R > B) so the page feels soft rather than clinical — but nowhere
     near cream. Reference: cream was +8..+10 R-B and read yellow; this is +2..+8
     with no yellow accents left to amplify it. */
  --paper:#f4f4f2; --card:#ffffff; --sunk:#edebe8; --sunk2:#e4e2de;
  --ink:#232322; --ink2:#5b5a57; --ink3:#6a6764;
  --rule:#e1dfdb; --rule2:#cac7c2;

  --blue:#2670b0; --blue-soft:#eaf2fa;
  --coral:#b04836; --coral-soft:#f2eeed;
  --sun:#c8880f; --sun-soft:#f1f0ec;

  /* Semantic states, two tones each: a SATURATED tone for filled badges and a
     DEEP tone for text on a light tint. A bright green/yellow is unreadable as
     small text; a dark one looks muddy as a badge. */
  --ok:#16874a;   --ok-deep:#0f6b3c;   --ok-soft:#e6f5ec;   --ok-line:#c3e5d1;
  /* Amazon's actual CTA button colours. Kept identical in both themes on
     purpose — the recognition IS the value; a re-tinted version reads as a
     generic button. Background stays grey; only the buy button is yellow. */
  --amz:#ffd814; --amz-hi:#f7ca00; --amz-line:#fcd200; --amz-ink:#0f1111;
  --warn:#ef9007; --warn-deep:#8a6410; --warn-mid:#a8760f; --warn-soft:#fdf3e3; --warn-ink:#3d2500;
  --bad:#b5372a;

  /* Hero wash. Two very faint blooms behind the top of the page, blue on the
     photo side and a neutral warm grey on the copy side. Deliberately NOT the
     cream/amber the reference site uses — that is the exact tint we spent a
     round removing. Both fade to transparent well above the fold. */
  --wash-a:rgba(38,112,176,.14); --wash-b:rgba(176,72,54,.055);
  /* Highlighter yellow, pitched to land on the same lightness as the FREE
     chip (#e6f5ec, luminance .882) once multiply has been applied — the band
     resolves to #fff2b4 at .881. Same weight of tint, different hue, so the
     highlight and the chips read as one family. Well clear of the Amazon CTA
     yellow (#ffd814) too, so a marked headline never looks like a button. */
  --hl-mark:#fffdbe;

  --r:20px; --r2:14px;
  --sh:0 1px 2px rgba(42,37,33,.04), 0 10px 26px -14px rgba(42,37,33,.16);
  --sh2:0 2px 6px rgba(42,37,33,.06), 0 20px 42px -18px rgba(42,37,33,.26);
}
[data-theme="dark"]{
  --paper:#12151a; --card:#1a1f27; --sunk:#171c23; --sunk2:#1e242d;
  --ink:#eef2f6; --ink2:#a7b2bf; --ink3:#74808e;
  --rule:#262e39; --rule2:#36404d;

  --blue:#5fa9e8; --blue-soft:rgba(95,169,232,.13);
  --coral:#ff8168; --coral-soft:rgba(255,129,104,.13);
  --sun:#f5b451; --sun-soft:rgba(245,180,81,.13);

  --ok:#3fd68d;   --ok-deep:#54d59b;   --ok-soft:rgba(63,214,141,.14); --ok-line:rgba(63,214,141,.30);
  --amz:#ffd814; --amz-hi:#f7ca00; --amz-line:#fcd200; --amz-ink:#0f1111;
  --warn:#f0a01e; --warn-deep:#eeae56; --warn-mid:#eeae56; --warn-soft:rgba(240,160,30,.14); --warn-ink:#2a1a00;
  --bad:#ff7d70;

  --wash-a:rgba(95,169,232,.14); --wash-b:rgba(255,129,104,.05);
  /* Same .14 tint alpha the dark FREE chip uses. */
  --hl-mark:rgba(255,214,80,.14);

  --sh:0 1px 2px rgba(0,0,0,.3), 0 10px 26px -14px rgba(0,0,0,.6);
  --sh2:0 2px 6px rgba(0,0,0,.35), 0 20px 42px -18px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);
  /* Painted on <body> rather than a hero element so it spans the full window
     width without fighting .wrap's max-width. no-repeat + fixed sizes mean it
     lives only behind the hero and is gone by the first section. */
  background-color:var(--paper);
  background-image:
    radial-gradient(900px 520px at 84% 10px,  var(--wash-a), transparent 70%),
    radial-gradient(760px 430px at 4%  40px,  var(--wash-b), transparent 72%);
  background-repeat:no-repeat;
  font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;
  transition:background .25s,color .25s;
}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:Fraunces,"Iowan Old Style",Georgia,serif;font-optical-sizing:auto}

/* ══ top bar ══ */
/* Full-width white strip. The .wrap inside keeps the content aligned with the
   rest of the page; the band itself has to sit outside it to reach the window
   edges. Also gives the hero wash a clean edge to start from. */
.topbar{background:var(--card);border-bottom:1px solid var(--rule)}
.top{display:flex;align-items:center;justify-content:space-between;padding:15px 0}
/* Wordmark reads as the domain — airlinebagsizes — with the middle word in
   blue. Tighter tracking than body text because it is set solid with no word
   spaces to do the separating; the colour break is what parses it. */
.mark{display:flex;align-items:center;gap:10px}
.mark .markicon{color:var(--blue);display:flex;flex:none}
/* Manrope sets tighter than Inter out of the box, so the wordmark needs much
   less negative tracking than it did — at -.032em the letters started touching.
   800 rather than 700 because Manrope's bold is comparatively light. */
.wordmark{
  font-weight:800;font-size:17.5px;letter-spacing:-.012em;color:var(--ink);
  line-height:1;white-space:nowrap;
}
.wordmark b{font-weight:800;color:var(--blue)}
.themebtn{
  background:var(--sunk);border:1px solid var(--rule);border-radius:100px;
  width:40px;height:34px;display:grid;place-items:center;cursor:pointer;color:var(--ink2);transition:.15s;
}
.themebtn:hover{border-color:var(--rule2);color:var(--ink);box-shadow:var(--sh)}
.themebtn .moon{display:none}
[data-theme="dark"] .themebtn .sun{display:none}
[data-theme="dark"] .themebtn .moon{display:block}

/* ══ hero ══ */
.hero{padding:44px 0 8px;max-width:700px}

/* Hero photo. Art-directed rather than one crop stretched two ways: a 3:2
   panel anchored to the top of the hero on desktop, a full-bleed 16:7 band
   beneath the copy on phones. The container owns the aspect-ratio so the
   space is reserved before the file arrives — no layout shift, whichever
   source the browser picks. */
.herowrap{display:grid;gap:26px;padding:34px 0 8px}
.herowrap > .hero{padding:0}
@media(min-width:880px){
  /* align-items:start pins the photo to the top of the row; the negative
     margin then lifts it up level with the top bar, so the hero reads as one
     tall block rather than a photo floating beside a paragraph. */
  .herowrap{grid-template-columns:minmax(0,1fr) 460px;gap:52px;padding:46px 0 14px;align-items:start}
  .herowrap > .heroart{margin-top:-26px}
}
/* White frame. The padding IS the border — a real border would sit outside the
   rounded corner and mitre badly against the inner radius. box-sizing:border-box
   is global, so aspect-ratio still applies to the outer box and nothing shifts. */
.heroart{
  position:relative;aspect-ratio:16/7;border-radius:20px;
  background:var(--card);padding:8px;box-shadow:var(--sh2);
}
@media(min-width:880px){.heroart{aspect-ratio:3/2}}
@media(max-width:879.98px){.heroart{padding:6px;border-radius:16px}}
.heroart img{display:block;width:100%;height:100%;object-fit:cover;border-radius:12px}
@media(max-width:879.98px){.heroart img{border-radius:10px}}
/* Hairline ring on the photo itself, inside the white frame — stops a pale
   image from bleeding into the frame with no edge. */
.heroart:after{
  content:"";position:absolute;inset:8px;border-radius:12px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.10);
}
@media(max-width:879.98px){.heroart:after{inset:6px;border-radius:10px}}
[data-theme="dark"] .heroart:after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
/* The photo is shot under warm cabin light; at full saturation it fights the
   grey palette. Knocking it back a touch settles it into the page. */
[data-theme="dark"] .heroart img{filter:brightness(.88) saturate(.94)}
/* Same green as the FREE chips in the table. It is the site's "this is
   confirmed" colour, and the verification date is the strongest trust signal
   on the page — reading it as neutral grey undersold it. */
.hero .hi{
  display:inline-flex;align-items:center;gap:8px;background:var(--ok-soft);color:var(--ok-deep);
  font-size:13px;font-weight:600;padding:6px 14px;border-radius:100px;margin-bottom:20px;
  border:1px solid var(--ok-line);
}
h1{font-weight:600;font-size:clamp(33px,5.4vw,52px);line-height:1.08;letter-spacing:-.02em;margin:0 0 16px}
h1 .hl{color:var(--blue);position:relative;white-space:nowrap}
/* Highlighter, not an underline. multiply is what makes it read as ink laid
   over paper rather than a yellow bar sitting behind the text — the paper
   texture shows through and the edges darken where they overlap. The uneven
   border-radius and the fraction of a degree of rotation stop it looking like
   a rectangle drawn by a computer. */
h1 .hl:after{
  content:"";position:absolute;left:-5px;right:-6px;bottom:.05em;height:.38em;
  background:var(--hl-mark);z-index:-1;
  border-radius:3px 8px 4px 9px / 7px 4px 9px 5px;
  transform:rotate(-.4deg);
  mix-blend-mode:multiply;
}
/* multiply against a near-black page would erase the band, so dark drops the
   blend and paints the tint directly. At this alpha it stays a wash rather than
   going olive, and the blue heading still measures 5.3:1 against it. */
[data-theme="dark"] h1 .hl:after{mix-blend-mode:normal;background:var(--hl-mark)}
.hero p{font-size:clamp(16px,2.1vw,18.5px);color:var(--ink2);margin:0}

/* ══ sections ══ */
.sec{padding:40px 0}
.sec-hd{margin-bottom:20px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sec-hd h2{font-weight:600;font-size:27px;letter-spacing:-.018em;margin:0}
.sec-hd .hint{color:var(--ink3);font-size:14px}

/* ══ carriers ══ */
.carriers{display:flex;flex-wrap:wrap;gap:9px}
.carrier{
  background:var(--card);border:1.5px solid var(--rule);border-radius:100px;
  padding:9px 17px;cursor:pointer;display:flex;align-items:center;gap:9px;transition:.15s;
  font-size:14.5px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;
}
.carrier:hover{border-color:var(--blue);box-shadow:var(--sh);transform:translateY(-1px)}
.carrier.on{border-color:var(--blue);background:var(--blue);color:#fff;box-shadow:0 4px 14px -4px rgba(47,126,196,.6)}
.carrier .fee{
  width:6px;height:6px;border-radius:50%;background:var(--coral);flex:none;
}
.carrier.on .fee{background:#fff;opacity:.8}
/* legend */
.legend{font-size:12.5px;color:var(--ink3);margin-top:12px;display:flex;align-items:center;gap:7px}
.legend i{width:6px;height:6px;border-radius:50%;background:var(--coral);display:inline-block}

/* ══ boarding pass ══ */
.pass{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.pass-hd{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:15px 26px;background:var(--sunk);border-bottom:1px solid var(--rule);
}
.pass-hd .who{font-weight:600;font-size:16.5px;letter-spacing:-.015em;display:flex;align-items:center;gap:9px}
.pass-hd .who svg{color:var(--blue)}
.pass-hd .stamp{font-size:12px;color:var(--ink3);display:flex;align-items:center;gap:6px}
.pass-body{display:grid;grid-template-columns:1fr 1px 1fr}
@media(max-width:740px){.pass-body{grid-template-columns:1fr}}
.perf{background:repeating-linear-gradient(to bottom,var(--rule2) 0 5px,transparent 5px 12px)}
@media(max-width:740px){.perf{height:1px;background:repeating-linear-gradient(to right,var(--rule2) 0 5px,transparent 5px 12px)}}
.slot{padding:24px 26px 26px}
.slot .lbl{
  display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:12px;
}
.slot .lbl .ic{
  width:26px;height:26px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:var(--blue-soft);color:var(--blue);
}
.slot .big{font-family:Fraunces,Georgia,serif;font-size:36px;font-weight:600;line-height:1;
  letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.slot .big u{text-decoration:none;font-size:15px;color:var(--ink3);font-family:Manrope,sans-serif;font-weight:400;letter-spacing:0}
.slot .cav{font-size:13.5px;color:var(--ink3);margin-top:10px;line-height:1.5}
.slot dl{margin:18px 0 0;padding-top:15px;border-top:1px dashed var(--rule2);
  display:grid;grid-template-columns:auto 1fr;gap:8px 15px;font-size:13.5px}
.slot dt{color:var(--ink3);font-weight:500}
.slot dd{margin:0;color:var(--ink2)}
.chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:3px 9px;border-radius:100px;vertical-align:1px}
.chip.free{background:var(--ok-soft);color:var(--ok-deep)}
.chip.paid{background:var(--coral-soft);color:var(--coral)}
.chip.est{background:var(--sunk2);color:var(--ink2)}

/* ══ good to know ══ */
.knows{margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px;align-items:start}
.knows li{
  list-style:none;font-size:14px;color:var(--ink2);line-height:1.55;background:var(--sunk);
  border-radius:var(--r2);padding:14px 16px 14px 42px;position:relative;
}
.knows li:before{
  content:"";position:absolute;left:15px;top:16px;width:15px;height:15px;border-radius:50%;
  background:var(--blue-soft);
  box-shadow:inset 0 0 0 1.5px var(--blue);
}
.knows li:after{
  content:"i";position:absolute;left:20.2px;top:15.6px;font:800 10px/15px Manrope,sans-serif;color:var(--blue);
}
.srcline{font-size:12.5px;color:var(--ink3);margin-top:16px}
.srcline a{color:var(--ink2);text-underline-offset:2px}

/* ══ measure ══ */
.measure{margin-top:22px;background:var(--blue-soft);border-radius:var(--r);padding:24px 26px}
[data-theme="dark"] .measure{border:1px solid var(--rule)}
.measure h3{font-weight:600;font-size:20px;margin:0 0 4px;letter-spacing:-.015em}
.measure > p{margin:0 0 16px;font-size:14px;color:var(--ink2)}
.fields{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.fields input{
  width:78px;background:var(--card);border:1.5px solid transparent;border-radius:12px;
  padding:11px 13px;font:inherit;font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums;
  box-shadow:var(--sh);
}
.fields input:focus{outline:0;border-color:var(--blue)}
.fields .x{color:var(--ink3)}
.fields select{
  background:var(--card);border:1.5px solid transparent;border-radius:12px;padding:11px 38px 11px 14px;
  font:inherit;font-size:14.5px;color:var(--ink);cursor:pointer;box-shadow:var(--sh);
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a6764' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
[data-theme="dark"] .fields select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2374808e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
#verdicts{margin-top:16px;display:none}
#verdicts.show{display:block}
.vd{display:flex;gap:11px;align-items:flex-start;padding:13px 16px;border-radius:var(--r2);
  font-size:15px;margin-bottom:8px;line-height:1.45;background:var(--card)}
.vd .vi{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;margin-top:1px;color:#fff}
.vd.y .vi{background:var(--ok)} .vd.m .vi{background:var(--warn);color:var(--warn-ink)} .vd.n .vi{background:var(--bad)}
.vd.y{color:var(--ok-deep)} .vd.m{color:var(--warn-deep)} .vd.n{color:var(--bad)}
.vd b{font-weight:600}
.vd-note{font-size:12.5px;color:var(--ink2);margin-top:10px;line-height:1.5;opacity:.85}

/* ══ toolbar ══ */
.toolbar{display:flex;gap:12px 20px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.seg{display:flex;background:var(--sunk2);border-radius:100px;padding:4px}
.seg button{
  background:none;border:0;padding:8px 17px;border-radius:100px;cursor:pointer;
  font-size:14px;font-weight:500;color:var(--ink2);transition:.14s;white-space:nowrap;
}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:var(--sh)}
.tog{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink2);cursor:pointer;user-select:none}
.tog input{appearance:none;width:36px;height:21px;border-radius:100px;background:var(--rule2);
  position:relative;cursor:pointer;transition:.16s;flex:none;margin:0}
.tog input:after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
  background:#fff;transition:.16s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.tog input:checked{background:var(--blue)}
.tog input:checked:after{transform:translateX(15px)}
/* The native caret sits hard against the right edge inside a pill, because the
   browser draws it in the padding box and a 100px radius eats that corner. So:
   draw our own chevron, and give it room. */
.sortsel{
  background:var(--card);border:1px solid var(--rule);border-radius:100px;
  font-size:14px;color:var(--ink2);cursor:pointer;padding:8px 38px 8px 15px;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a6764' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
[data-theme="dark"] .sortsel{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2374808e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.sortsel:hover{border-color:var(--rule2);color:var(--ink)}
.tally{font-size:14px;color:var(--ink2);padding:16px 0 20px}
.tally b{color:var(--ink);font-weight:600}

/* ══ product cards ══ */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:22px}
.bag{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:.18s;box-shadow:var(--sh);position:relative;
}
.bag:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:var(--rule2)}
.bag.hero-pick{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue), var(--sh)}

.shot{
  height:178px;background:var(--sunk);display:grid;place-items:center;position:relative;
  border-bottom:1px solid var(--rule);overflow:hidden;
}
.shot img{max-width:78%;max-height:80%;object-fit:contain;mix-blend-mode:normal}
.shot .vizwrap{display:flex;flex-direction:column;align-items:center;gap:9px}
.shot .vizcap{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.ribbon{
  position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;padding:5px 11px 5px 8px;border-radius:100px;
  backdrop-filter:blur(6px);
}
.ribbon.y{background:var(--ok);color:#fff}
.ribbon.m{background:var(--warn);color:var(--warn-ink)}
.pickflag{
  position:absolute;top:12px;right:12px;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;background:var(--card);color:var(--blue);border:1px solid var(--blue);
  padding:4px 10px;border-radius:100px;max-width:62%;text-align:right;line-height:1.3;
}

.body{padding:18px 20px 0;flex:1;display:flex;flex-direction:column}
.bag h3{font-weight:600;font-size:19px;letter-spacing:-.015em;margin:0 0 7px;line-height:1.25}
.dims{
  display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;
  font-variant-numeric:tabular-nums;background:var(--sunk2);border-radius:8px;padding:4px 10px;margin-bottom:9px;
}
.dims svg{color:var(--ink3);flex:none}
.meta{font-size:13px;color:var(--ink3);margin-bottom:10px}
.meta .sep{opacity:.5;margin:0 6px}
.kit{
  display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--ink2);line-height:1.45;
  background:var(--sunk);border:1px solid var(--rule);border-radius:10px;padding:8px 11px;margin-bottom:11px;
}
.kit svg{flex:none;color:var(--ink3);margin-top:1px}
.blurb{font-size:14px;color:var(--ink2);line-height:1.55;margin:0 0 11px}
details.heads{margin-bottom:14px}
details.heads summary{
  list-style:none;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--warn-deep);
  display:flex;align-items:center;gap:7px;
}
details.heads summary::-webkit-details-marker{display:none}
details.heads summary .arw{transition:.15s}
details.heads[open] summary .arw{transform:rotate(90deg)}
details.heads p{font-size:12.5px;color:var(--ink2);line-height:1.55;margin:8px 0 0;
  background:var(--warn-soft);border-left:2px solid var(--warn);border-radius:0 10px 10px 0;padding:10px 12px}

.foot{padding:14px 20px 18px;border-top:1px solid var(--rule);margin-top:auto;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.stars{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink3)}
.stars b{color:var(--ink2);font-weight:600;font-variant-numeric:tabular-nums}
.px{font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.cta{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  background:var(--amz);color:var(--amz-ink);border:1px solid var(--amz-line);
  text-decoration:none;font-size:14px;font-weight:650;padding:9px 16px;border-radius:100px;transition:.15s;
  box-shadow:0 2px 8px -3px rgba(252,210,0,.7);
}
.cta:hover{background:var(--amz-hi);transform:translateY(-1px);box-shadow:0 4px 14px -4px rgba(252,210,0,.85)}

.none{padding:44px 0;max-width:580px}
.none h3{font-size:23px;font-weight:600;margin:0 0 10px;letter-spacing:-.018em}
.none p{color:var(--ink2);font-size:15.5px;margin:0 0 20px;line-height:1.6}
.none button{background:var(--blue);color:#fff;border:0;border-radius:100px;padding:12px 22px;
  font-size:14.5px;font-weight:600;cursor:pointer;box-shadow:0 4px 14px -4px rgba(47,126,196,.6)}

/* ══ camera guide ══ */
.guide{display:none}
.guide.show{display:block}
.gwrap{background:var(--sunk);border-radius:var(--r);padding:34px 32px}
.gcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}
.gcard{background:var(--card);border-radius:var(--r2);padding:22px 22px 20px;border:1px solid var(--rule)}
.gcard h3{font-size:18px;font-weight:600;margin:0 0 12px;letter-spacing:-.015em;
  display:flex;align-items:center;gap:11px}
.gcard h3 .ic{width:32px;height:32px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:var(--blue-soft);color:var(--blue)}
.gcard p{font-size:14px;color:var(--ink2);line-height:1.6;margin:0 0 10px}
.gcard p:last-child{margin-bottom:0}
.gcard b{color:var(--ink);font-weight:600}
.wh{width:100%;border-collapse:collapse;font-size:13px;margin:2px 0 12px}
.wh th{text-align:left;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);
  font-weight:700;padding:0 10px 7px 0;border-bottom:1px solid var(--rule)}
.wh td{padding:8px 10px 8px 0;border-bottom:1px solid var(--rule);color:var(--ink2);vertical-align:top}
.wh td:first-child{color:var(--ink);font-weight:600;white-space:nowrap}

/* ══ reverse lookup ══ */
table.cmp.rvtable td.rv{white-space:nowrap}
.rv-idle{color:var(--rule2)}
.rv-y,.rv-m,.rv-n{
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  padding:4px 10px;border-radius:100px;white-space:nowrap;
}
.rv-y{background:var(--ok-soft);color:var(--ok-deep)}
.rv-m{background:var(--warn-soft);color:var(--warn-deep)}
.rv-n{background:var(--coral-soft);color:var(--coral)}
/* Marks the three carriers scored against our own figure rather than a
   published one — without it the verdict would imply an authority it lacks. */
.rv-est{display:block;font-size:10.5px;color:var(--ink3);margin-top:4px;font-style:italic}

/* ══ ranking tables ══ */
/* NOT `.rank` — that class already exists further down for the big numeral on
   the best-of pages, and a <table class="cmp rank"> matched it, inheriting
   Fraunces at 30px into every cell. Named distinctly on purpose. */
table.cmp.rktable td.rk{
  font-family:Fraunces,Georgia,serif;font-size:19px;font-weight:600;color:var(--rule2);
  width:1%;padding-right:0;letter-spacing:-.02em;
}
table.cmp.rktable tbody tr:first-child td.rk{color:var(--blue)}

/* ══ evidence blocks (gate enforcement) ══ */
.ev p{font-size:16px;color:var(--ink2);line-height:1.7;margin:0 0 18px;max-width:74ch}
.ev p b{color:var(--ink);font-weight:600}
.ev .ev-gap{background:var(--sunk);border-left:3px solid var(--rule2);padding:14px 18px;border-radius:0 var(--r2) var(--r2) 0}
.ev .ev-note{font-size:13.5px;color:var(--ink3)}
/* Inline citation. The type chip is the point — a government report and a
   blogger's measurement should not look identical on the page. */
.cite{
  display:inline-flex;align-items:center;gap:7px;vertical-align:baseline;
  font-size:12px;color:var(--ink3);text-decoration:none;white-space:nowrap;
  border:1px solid var(--rule);border-radius:100px;padding:2px 10px 2px 3px;margin-left:4px;
  background:var(--card);
}
.cite:hover{border-color:var(--blue);color:var(--blue)}
.cite-t{
  font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 7px;border-radius:100px;
}
.cite-t.gov{background:var(--ok-soft);color:var(--ok-deep)}
.cite-t.airline{background:var(--blue-soft);color:var(--blue)}
.cite-t.press{background:var(--sunk2);color:var(--ink2)}
.cite-t.anecdote{background:var(--warn-soft);color:var(--warn-deep)}

/* ══ printable chart ══ */
.printbtn{
  display:inline-flex;align-items:center;gap:9px;margin-top:22px;cursor:pointer;
  background:var(--ink);color:var(--paper);border:0;border-radius:100px;
  padding:11px 20px;font-size:14.5px;font-weight:600;
}
.printbtn:hover{opacity:.88}
.printsheet{border:1px solid var(--rule);border-radius:var(--r);background:var(--card);
  padding:26px 28px 22px;box-shadow:var(--sh)}
.phead{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:2px}
.phead h2{font-family:Fraunces,Georgia,serif;font-size:23px;font-weight:600;margin:0;letter-spacing:-.018em}
.phead p{font-size:12.5px;color:var(--ink3);margin:3px 0 0}
.pmeta{text-align:right;font-size:11.5px;color:var(--ink3);line-height:1.5}
.pmeta b{display:block;color:var(--ink);font-size:13px}
table.ptable{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
table.ptable th,table.ptable td{text-align:left;padding:9px 10px 9px 0;border-bottom:1px solid var(--rule);vertical-align:top}
table.ptable thead th{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);font-weight:700}
table.ptable tbody th{font-weight:600;white-space:nowrap}
table.ptable td{color:var(--ink2)}
table.ptable .ps{font-size:11px;color:var(--ink3)}
.pfoot{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule)}
.pfoot p{font-size:11.5px;color:var(--ink3);line-height:1.55;margin:0 0 6px;max-width:none}
.pfoot b{color:var(--ink2)}

/* The whole point of the page. Everything that is site furniture comes off,
   the sheet loses its card styling because a border around a printed table
   just wastes toner, and rows are kept off page breaks. */
@media print{
  .noprint,.topbar,.fine,.themebtn,.printbtn,.carriers,/* legend */
.legend{display:none !important}
  html,body{background:#fff !important;color:#000 !important}
  body{background-image:none !important;font-size:11pt}
  .wrap{max-width:none;padding:0}
  .sec{padding:0}
  .printsheet{border:0;box-shadow:none;padding:0;background:#fff}
  .phead h2{font-size:18pt}
  table.ptable{font-size:10pt}
  table.ptable th,table.ptable td{padding:6px 8px 6px 0;border-bottom:1px solid #bbb}
  table.ptable tr{break-inside:avoid;page-break-inside:avoid}
  .pmeta,.pfoot p,.phead p,table.ptable thead th,table.ptable .ps{color:#444}
  a{text-decoration:none;color:#000}
  @page{size:letter portrait;margin:14mm}
}

/* ══ provenance ══ */
/* Deliberately quiet — it sits under every figure on the page, so it has to
   read as a footnote, not as a second headline. */
.prov{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:11.5px;color:var(--ink3);margin-top:9px;letter-spacing:.005em;
}
.prov a{color:var(--ink3);text-decoration:underline;text-decoration-color:var(--rule2);text-underline-offset:2px}
.prov a:hover{color:var(--blue);text-decoration-color:var(--blue)}
.prov b{color:var(--ink2);font-weight:600}
.prov .dot{width:3px;height:3px;border-radius:100px;background:var(--rule2);flex:none}

/* "No published size" replaces the big number where there isn't one. Smaller
   than a dimension because it is a sentence, not a figure, but still the
   dominant thing in the cell — that is the whole point. */
.nopub{font-size:.62em;letter-spacing:-.01em;color:var(--ink2);font-style:italic}
.nopub-s{color:var(--ink2);font-style:italic;font-weight:500;white-space:nowrap}

/* ══ fine print ══ */
.fine{background:var(--sunk);border-top:1px solid var(--rule);margin-top:40px;padding:36px 0 30px}
.fine h4{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin:0 0 8px}
.fine p{font-size:13.5px;color:var(--ink2);line-height:1.65;margin:0 0 22px;max-width:76ch}
.fine em{font-style:italic}
.srcgrid{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;margin-top:6px}
.srcgrid a{color:var(--ink3)}

/* ══ freshness strip ══ */
.fresh{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r2);
  padding:13px 18px;margin-bottom:14px;font-size:13.5px;color:var(--ink2);
}
.fresh b{color:var(--ink);font-weight:600}
.fresh-item{display:flex;align-items:flex-start;gap:9px;min-width:0}
.fresh-i{display:inline-flex;width:20px;height:20px;border-radius:100px;flex:none;
  align-items:center;justify-content:center;margin-top:1px}
.fresh-i.ok{background:var(--ok-soft);color:var(--ok-deep)}
.fresh-i.no{background:var(--warn-soft);color:var(--warn-deep)}
.fresh-sep{width:1px;align-self:stretch;background:var(--rule);margin:0 6px}
@media(max-width:700px){.fresh-sep{display:none}.fresh{gap:8px 9px}}

/* ══ grouped footer sitemap ══ */
/* The old footer was four flat rows of ~11 links each. At 50-plus pages that
   stopped being navigation and became a wall — nobody scans 44 undifferentiated
   links. Columns with headings turn the same links into something you can find
   your way around, and keep every page one hop from every other for crawlers. */
.sitemapf{background:var(--sunk);border-top:1px solid var(--rule);padding:30px 0 40px}
.fcols{display:grid;grid-template-columns:repeat(6,1fr);gap:26px 22px}
@media(max-width:980px){.fcols{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.fcols{grid-template-columns:repeat(2,1fr);gap:22px 16px}}
.fcol{display:flex;flex-direction:column;gap:5px;min-width:0}
.fcol h5{
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 5px;
}
.fcol a{font-size:12.5px;color:var(--ink2);text-decoration:none;line-height:1.45}
.fcol a:hover{color:var(--blue);text-decoration:underline}

/* ══ nav groups (US vs international) ══ */
.navgroup{margin-bottom:0}
/* The US group ends with the "carry-on costs extra" legend, which sits tight
   under the chips — so the gap between the two groups has to be opened from
   the international side or the label reads as part of the legend. */
.navgroup + .navgroup{margin-top:32px}
.navlbl{
  display:flex;align-items:baseline;gap:10px;
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:9px;
}
.navlbl a{font-size:11px;letter-spacing:0;text-transform:none;font-weight:600;color:var(--blue);text-decoration:none}
.navlbl a:hover{text-decoration:underline}
.carriers.intl .carrier{font-weight:400}
/* CSS-only disclosure. The checkbox stays focusable rather than display:none,
   so the control is reachable by keyboard; the visible affordance is the
   label, which gets the focus ring. */
.morechk{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.carriers.intl .carrier.more{display:none}
.morechk:checked ~ .carrier.more{display:flex}
.morebtn{
  display:inline-flex;align-items:center;border:1.5px dashed var(--rule2);border-radius:100px;
  padding:9px 17px;font-size:14.5px;font-weight:500;letter-spacing:-.01em;color:var(--ink3);
  cursor:pointer;white-space:nowrap;transition:.15s;background:transparent;
}
.morebtn:hover{border-color:var(--blue);color:var(--blue)}
.morechk:focus-visible ~ .morebtn{outline:2px solid var(--blue);outline-offset:2px}
.morebtn .ml{display:none}
.morechk:checked ~ .morebtn .mo{display:none}
.morechk:checked ~ .morebtn .ml{display:inline}

/* ══ international carrier cards ══ */
.intlgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.intlcard{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r2);
  padding:20px 22px 16px;box-shadow:var(--sh);scroll-margin-top:20px;
}
.intlcard h3{font-size:18px;font-weight:600;margin:0 0 10px;letter-spacing:-.015em;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.intlcard .lowc{
  font-family:Manrope,sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;background:var(--warn-soft);color:var(--warn-deep);
  padding:3px 8px;border-radius:100px;
}
.intlspec{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--ink2);
  font-variant-numeric:tabular-nums;padding-bottom:11px;margin-bottom:11px;
  border-bottom:1px dashed var(--rule)}
.intlspec b{color:var(--ink3);font-weight:600;font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;margin-right:6px}
.intlcard p{font-size:13.5px;color:var(--ink2);line-height:1.6;margin:0 0 10px}
.intlcard .intlfare b{color:var(--ink)}

/* ══ comparison table ══ */
.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r);background:var(--card);box-shadow:var(--sh)}
table.cmp{width:100%;border-collapse:collapse;font-size:14.5px;min-width:660px}
table.cmp thead th{
  text-align:left;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);
  font-weight:700;padding:14px 18px;background:var(--sunk);border-bottom:1px solid var(--rule);white-space:nowrap;
}
table.cmp tbody th{
  text-align:left;font-weight:600;padding:14px 18px;border-bottom:1px solid var(--rule);white-space:nowrap;
}
table.cmp tbody th a{color:var(--blue);text-decoration:none}
table.cmp tbody th a:hover{text-decoration:underline}
table.cmp td{padding:14px 18px;border-bottom:1px solid var(--rule);color:var(--ink2);vertical-align:top}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp tbody tr:hover{background:var(--sunk)}
table.cmp .num{font-variant-numeric:tabular-nums;font-weight:500;color:var(--ink);white-space:nowrap}
table.cmp .sub{font-size:12px;color:var(--ink3);font-weight:400}
.est-i{font-size:11px;color:var(--ink3);font-style:italic;font-weight:400}
.rowlink{color:var(--blue);text-decoration:none;font-size:13.5px;font-weight:600;white-space:nowrap}
.rowlink:hover{text-decoration:underline}
.tnote{font-size:13px;color:var(--ink3);margin:14px 0 0;line-height:1.6}

/* ══ FAQ ══ */
.faq{max-width:820px}
.faqlist{border-top:1px solid var(--rule)}
details.fq{border-bottom:1px solid var(--rule)}
details.fq summary{
  list-style:none;cursor:pointer;padding:17px 0;display:flex;align-items:center;
  justify-content:space-between;gap:18px;font-size:16.5px;font-weight:600;letter-spacing:-.01em;
}
details.fq summary::-webkit-details-marker{display:none}
details.fq summary svg{flex:none;color:var(--ink3);transition:.18s}
details.fq[open] summary svg{transform:rotate(45deg);color:var(--blue)}
details.fq summary:hover{color:var(--blue)}
details.fq p{margin:0 0 20px;font-size:15px;color:var(--ink2);line-height:1.65;max-width:70ch}

/* ══ misc ══ */
a.mark{text-decoration:none;color:inherit}
a.carrier{text-decoration:none}
span.carrier.on{cursor:default}
.afterlist{font-size:14.5px;color:var(--ink2);margin:26px 0 0;padding:16px 20px;background:var(--blue-soft);border-radius:var(--r2)}
.afterlist a{color:var(--blue);font-weight:600}
.srcgrid a{text-decoration-color:var(--rule2)}

.fine .ver{font-size:12px;color:var(--ink3);margin:22px 0 0;font-variant-numeric:tabular-nums}
.cta:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ══ best-of pages ══ */
.picks{display:flex;flex-direction:column;gap:16px}
.pickrow{display:grid;grid-template-columns:52px 1fr;gap:18px;background:var(--card);
  border:1px solid var(--rule);border-radius:var(--r);padding:22px 24px;box-shadow:var(--sh)}
@media(max-width:600px){.pickrow{grid-template-columns:38px 1fr;gap:12px;padding:18px}}
.rank{font-family:Fraunces,Georgia,serif;font-size:30px;font-weight:600;color:var(--rule2);
  line-height:1;letter-spacing:-.03em}
.pickbody h3{font-size:20px;font-weight:600;margin:0 0 8px;letter-spacing:-.015em}
.pickbody .pick{display:inline-block;margin-bottom:9px}
.pickbody .spec{font-size:13.5px;color:var(--ink2);margin-bottom:10px;font-variant-numeric:tabular-nums}
.pickbody p{font-size:14.5px;color:var(--ink2);line-height:1.6;margin:0 0 12px;max-width:66ch}
.verdictline{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  padding:5px 11px;border-radius:100px;margin:0 12px 12px 0}
.verdictline.y{background:var(--ok-soft);color:var(--ok-deep)}
.verdictline.m{background:var(--warn-soft);color:var(--warn-deep)}
.pickbody .cta{margin-left:0}
.seeall{margin:22px 0 0;font-size:15px}
.seeall a{color:var(--blue);font-weight:600;text-decoration:none}
.seeall a:hover{text-decoration:underline}

/* ══ policy pages (privacy / terms / contact) ══ */
/* Long-form reading, so this is the one place on the site that gets a measure
   cap rather than filling the grid. 66ch matches .pickbody p, which is the
   only other sustained prose block. */
.prose{max-width:none}
.prose > *{max-width:68ch}
.prose h2{
  font-family:Fraunces,Georgia,serif;font-optical-sizing:auto;
  font-size:23px;font-weight:600;letter-spacing:-.018em;
  margin:38px 0 12px;padding-top:22px;border-top:1px solid var(--rule);
}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:16.5px;font-weight:650;letter-spacing:-.012em;margin:24px 0 8px}
.prose p{font-size:15.5px;line-height:1.68;color:var(--ink2);margin:0 0 14px}
.prose p b,.prose li b{color:var(--ink);font-weight:650}
.prose ul{margin:0 0 16px;padding-left:0;list-style:none}
.prose li{
  position:relative;padding-left:22px;font-size:15.5px;line-height:1.68;
  color:var(--ink2);margin-bottom:10px;
}
.prose li::before{
  content:"";position:absolute;left:4px;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--rule2);
}
.prose a{color:var(--blue);text-decoration:none;border-bottom:1px solid var(--blue-soft)}
.prose a:hover{border-bottom-color:var(--blue)}

/* The contact address, given room to be the point of the page.
   Scoped to .prose deliberately: `.prose p` is (0,1,1) and a bare `.bigmail`
   is (0,1,0), so the plain class loses the cascade and the address renders at
   body size. Matching the parent is the fix; !important would only mask it. */
.prose .bigmail{
  margin:6px 0 22px;
  font-family:Fraunces,Georgia,serif;font-optical-sizing:auto;
  font-size:clamp(22px,4.2vw,30px);font-weight:600;letter-spacing:-.022em;
  line-height:1.25;word-break:break-word;
}
.prose .bigmail a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--hl-mark);
  padding-bottom:1px;transition:.15s}
.prose .bigmail a:hover{border-bottom-color:var(--blue)}

.updated{
  margin-top:34px !important;padding-top:16px;border-top:1px solid var(--rule);
  font-size:13px !important;color:var(--ink3) !important;
  font-variant-numeric:tabular-nums;
}

/* ══ affiliate disclosure, adjacent to the grids ══ */
/* FTC guidance is "clear and conspicuous" — which means near the links, above
   them, and readable, not a footer line. Deliberately not muted to the point of
   disappearing: it sits at --ink2 like body copy, not --ink3 like fine print. */
.afd{
  display:flex;align-items:flex-start;gap:9px;
  margin:0 0 16px;padding:11px 14px;
  background:var(--sunk);border-radius:12px;
  font-size:13px;line-height:1.55;color:var(--ink2);max-width:76ch;
}
.afd::before{
  content:"";flex:none;width:15px;height:15px;margin-top:1px;border-radius:4px;
  background:var(--amz);border:1px solid var(--amz-line);
}
@media(max-width:600px){.afd{font-size:12.5px;padding:10px 12px}}

/* ══ "know" cards ══ */
/* These divs already existed inside .knows on the gate and reverse pages, but
   .knows only ever styled `li` — so they inherited the grid and nothing else.
   Styling them properly fixes those pages as well as the new ones. */
.knows-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:10px;
  align-items:start;margin-top:22px}
.know{background:var(--sunk);border-radius:var(--r2);padding:16px 18px}
.know h3{font-size:15px;font-weight:650;letter-spacing:-.012em;margin:0 0 6px;color:var(--ink)}
.know p{margin:0;font-size:14px;line-height:1.55;color:var(--ink2)}
.know p + p{margin-top:9px}
.know.regional{background:var(--blue-soft);padding:18px 20px}
[data-theme="dark"] .know.regional{border:1px solid var(--rule)}
.know.nopub-lead{background:var(--warn-soft);padding:20px 22px}
[data-theme="dark"] .know.nopub-lead{border:1px solid var(--rule)}

/* ══ fare-class table ══ */
.farewrap{padding-top:0}
table.cmp.faretable{min-width:520px}
table.cmp.faretable tbody th{white-space:normal;min-width:170px}
.fmark{width:34px;text-align:center;vertical-align:top}
.fmark span{
  display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;
  font-size:12px;font-weight:800;line-height:1;
}
.fmark.yes span{background:var(--ok-soft);color:var(--ok-deep)}
.fmark.no  span{background:var(--warn-soft);color:var(--bad)}
.fmark.warn span{background:var(--warn-soft);color:var(--warn-deep)}

/* ══ overhead bin table ══ */
table.cmp.bintable{min-width:720px}
table.cmp.bintable tbody th{white-space:normal;min-width:150px}
.bintable .means{color:var(--ink3);font-size:13px;font-style:italic;min-width:150px}

/* ══ corrections log ══ */
/* Numbered because the count is the point — a log with seven entries reads
   differently from a log with one. */
.prose ol.corrections{margin:18px 0 0;padding:0;list-style:none;counter-reset:corr}
.prose ol.corrections li{
  position:relative;padding:0 0 0 20px;margin:0 0 22px;max-width:68ch;
  border-left:2px solid var(--rule);
}
.prose ol.corrections li::before{content:none}
.prose ol.corrections li b{display:block;font-size:16px;font-weight:650;color:var(--ink);
  letter-spacing:-.012em;line-height:1.4;margin-bottom:5px}
.prose ol.corrections li p{margin:0;font-size:14.5px;line-height:1.62}
.cdate{
  display:block;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink3);font-weight:700;font-variant-numeric:tabular-nums;margin-bottom:4px;
}