/* ==========================================================================
   China Administrative Boundaries — design system
   Editorial paper + one brick accent. Georgia for display, the system UI sans
   for everything else: both are installed on Windows and macOS, so there is no
   webfont to block on and nothing to flash.
   ========================================================================== */

:root{
  --paper:#FAF8F4;
  --card:#FFFFFF;
  --sand:#F1ECE3;
  --sand-2:#E9E2D6;

  --ink:#17191C;
  --ink-2:#4C5359;
  /* 3.5:1 on paper before, which fails AA for the 12–14 px text it is used
     for. This value lands at 4.5:1 on paper and 4.8:1 on white. */
  --ink-3:#6B7278;
  --ink-4:#A9AFB4;

  --line:#E4DED3;
  --line-2:#EFEAE1;

  --accent:#A9462B;
  --accent-hi:#8E3820;
  --accent-soft:#F6EBE6;

  --sage:#3E5C51;
  --sage-soft:#EBF1EE;

  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",
         Arial,"Noto Sans",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --r-sm:6px; --r:10px; --r-lg:14px;
  --shadow-1:0 1px 2px rgba(23,25,28,.05);
  --shadow-2:0 1px 2px rgba(23,25,28,.04),0 10px 28px -18px rgba(23,25,28,.35);
  --shadow-3:0 2px 4px rgba(23,25,28,.05),0 24px 48px -28px rgba(23,25,28,.45);

  --max:1180px;
  --gut:28px;
  --header:70px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 24px);
overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--ink-2);
  font:16.5px/1.62 var(--sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
h1,h2,h3,h4{color:var(--ink);margin:0;font-family:var(--serif);font-weight:400;
  letter-spacing:-.01em;line-height:1.14;text-wrap:balance}
h1{font-size:clamp(32px,3.5vw,48px);letter-spacing:-.02em;line-height:1.1}
h2{font-size:clamp(26px,2.8vw,38px)}
h3{font-size:21px;line-height:1.25}
h4{font-size:16px;font-family:var(--sans);font-weight:600;letter-spacing:0}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
img{height:auto}
/* <picture> is an inline box by default, which leaves a 4 px line box under
   every image inside a card. Making it a block keeps the old geometry. */
picture{display:block}
figure{margin:0}
hr{border:0;border-top:1px solid var(--line);margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:760px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;
  padding:12px 18px;border-radius:0 0 var(--r-sm) 0;z-index:200}
.skip:focus{left:0}
/* The landmark takes focus only so the skip link lands somewhere; it is not a
   control and should not draw a focus ring. */
main:focus{outline:none}

/* ---------- type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3)}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--accent);opacity:.85}
.lead{font-size:19px;line-height:1.6;color:var(--ink-2)}
.muted{color:var(--ink-3)}
.small{font-size:14.5px}
.tiny{font-size:13px;line-height:1.55}
.mono{font-family:var(--mono);font-size:.92em;font-variant-numeric:tabular-nums}
.serif{font-family:var(--serif)}

/* ---------- buttons ---------- */
.btn{
  --bg:transparent;--fg:var(--ink);--bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border:1px solid var(--bd);border-radius:var(--r-sm);
  background:var(--bg);color:var(--fg);font-size:15px;font-weight:500;
  cursor:pointer;white-space:nowrap;
  transition:background .18s var(--ease),border-color .18s var(--ease),
             color .18s var(--ease),transform .12s var(--ease),box-shadow .18s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn svg{width:16px;height:16px;flex:none}
.btn-primary{--bg:var(--accent);--fg:#fff;--bd:var(--accent);
  box-shadow:0 1px 2px rgba(23,25,28,.16),inset 0 1px 0 rgba(255,255,255,.14)}
.btn-primary:hover{--bg:var(--accent-hi);--bd:var(--accent-hi);
  box-shadow:0 6px 18px -8px rgba(169,70,43,.6),inset 0 1px 0 rgba(255,255,255,.16)}
.btn-ghost{--bg:#fff;--bd:var(--line);box-shadow:var(--shadow-1)}
.btn-ghost:hover{--bd:var(--ink-4);box-shadow:var(--shadow-2)}
.btn-quiet{--fg:var(--accent);padding:12px 4px}
.btn-quiet:hover{--fg:var(--accent-hi);transform:none}
.btn-quiet svg{transition:transform .18s var(--ease)}
.btn-quiet:hover svg{transform:translateX(3px)}
.btn-sm{padding:9px 15px;font-size:14px}
.btn-lg{padding:15px 28px;font-size:16px}
.btn-block{width:100%}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:60;background:rgba(250,248,244,.88);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
header.site.scrolled{border-bottom-color:var(--line);box-shadow:0 1px 18px -14px rgba(23,25,28,.5)}
.bar{display:flex;align-items:center;gap:26px;min-height:var(--header)}
.brand{display:inline-flex;align-items:center;gap:11px;flex:none;
  font-family:var(--serif);font-size:17.5px;color:var(--ink);letter-spacing:-.01em}
.brand svg{width:26px;height:26px}
.brand span{display:flex;flex-direction:column;line-height:1.1}
/* One line: the name reads as a single phrase, and a manual break would move
   with the font size rather than the available width. */
.brand b{font-weight:400;white-space:nowrap}
.brand em{font-style:normal;font-family:var(--sans);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-top:3px}
nav.main{display:flex;gap:2px;margin-left:auto;flex:none}
nav.main a{font-size:14.5px;color:var(--ink-2);padding:8px 12px;border-radius:var(--r-sm);
  white-space:nowrap;transition:color .16s var(--ease),background .16s var(--ease)}
nav.main a:hover{color:var(--ink);background:var(--sand)}
nav.main a[aria-current]{color:var(--ink);font-weight:500}
.header-cta{flex:none}
.burger{display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:#fff;align-items:center;justify-content:center;cursor:pointer}

/* ---------- hero ---------- */
.hero{padding:76px 0 0}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}
.hero h1{margin:16px 0 20px;max-width:15em}
.hero .lead{max-width:34em}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:32px 0 0}
.hero-meta{display:flex;gap:26px;flex-wrap:wrap;margin:34px 0 0;padding-top:24px;
  border-top:1px solid var(--line)}
.hero-meta div{display:flex;flex-direction:column;gap:2px}
.hero-meta b{font-family:var(--serif);font-weight:400;font-size:24px;color:var(--ink);
  font-variant-numeric:tabular-nums}
.hero-meta span{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.hero-figure{position:relative}
.hero-figure img{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-3)}
.hero-caption{margin:12px 2px 0;font-size:12.5px;color:var(--ink-3);display:flex;
  justify-content:space-between;gap:16px}

/* ---------- sections ---------- */
section{padding:84px 0}
section.tight{padding:56px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:32px;margin-bottom:40px}
.section-head h2{margin-top:14px}
.section-head p{max-width:38em;margin-top:12px}
.rule{border-top:1px solid var(--line)}

/* ---------- pricing cards ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tier{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:30px 28px 26px;display:flex;flex-direction:column;
  box-shadow:var(--shadow-1);transition:box-shadow .25s var(--ease),transform .25s var(--ease),
  border-color .25s var(--ease)}
.tier:hover{box-shadow:var(--shadow-2);transform:translateY(-2px);border-color:var(--line-2)}
.tier-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.tier-level{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
/* Two lines reserved. "China City & Prefecture Boundaries" needs two at this
   width while "China Province Boundaries" needs one, and the extra line used to
   push that card's price and bullet list out of line with its neighbours. */
.tier h3{margin:10px 0 6px;font-size:24px;min-height:2.5em}
.tier .count{color:var(--ink-3);font-size:13.5px}
.tier .price{display:flex;align-items:baseline;gap:6px;margin:22px 0 4px}
.tier .price b{font-family:var(--serif);font-weight:400;font-size:40px;color:var(--ink);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tier .price span{font-size:13.5px;color:var(--ink-3)}
.tier ul{margin:20px 0 26px;display:flex;flex-direction:column;gap:9px}
.tier li{position:relative;padding-left:22px;font-size:14.5px;color:var(--ink-2)}
.tier li::before{content:"";position:absolute;left:4px;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--accent);opacity:.65}
.tier .btn{margin-top:auto}
.tier form{flex:1;display:flex;flex-direction:column;justify-content:flex-end}
.tier-img{margin:-30px -28px 22px;border-bottom:1px solid var(--line);overflow:hidden;
  border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--paper)}
.tier-img img{width:100%;aspect-ratio:16/10;object-fit:cover}

/* ---------- province grid ---------- */
.provinces{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.province{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color .2s var(--ease),box-shadow .2s var(--ease),
  transform .2s var(--ease);display:flex;flex-direction:column}
.province:hover{border-color:var(--ink-4);box-shadow:var(--shadow-2);transform:translateY(-2px)}
.province img{width:100%;aspect-ratio:16/10;object-fit:cover;border-bottom:1px solid var(--line-2);
  background:var(--paper)}
.province-body{padding:15px 16px 16px;display:flex;flex-direction:column;gap:3px;flex:1}
.province-body b{font-weight:600;color:var(--ink);font-size:15px}
.province-body span{font-size:12.5px;color:var(--ink-3)}
.province-body .from{margin-top:auto;padding-top:9px;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent)}

/* ---------- product cards (list) ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cards-two{grid-template-columns:repeat(2,1fr)}
.cards-one{grid-template-columns:minmax(0,560px)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .22s var(--ease),
  transform .22s var(--ease),border-color .22s var(--ease)}
.card:hover{box-shadow:var(--shadow-2);transform:translateY(-2px);border-color:var(--line-2)}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-bottom:1px solid var(--line-2)}
.card-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-body h3{font-size:20px}
.card-body p{font-size:14.5px;color:var(--ink-3)}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;
  padding-top:16px;border-top:1px solid var(--line-2)}
.card-foot b{font-family:var(--serif);font-weight:400;font-size:22px;color:var(--ink)}

/* ---------- product page ---------- */
.product{padding:44px var(--gut) 0}
.crumbs{display:flex;gap:9px;align-items:center;font-size:13px;color:var(--ink-3);
  margin-bottom:26px;flex-wrap:wrap}
.crumbs a:hover{color:var(--ink)}
.crumbs span{opacity:.5}
.product-grid{display:grid;grid-template-columns:1.62fr 1fr;gap:56px;align-items:start}
.product-figure{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:#fff;box-shadow:var(--shadow-2)}
.product-title{margin:26px 0 10px}
.product-sub{font-size:17px;color:var(--ink-2);max-width:40em}
.buybox{position:sticky;top:calc(var(--header) + 24px);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;
  box-shadow:var(--shadow-2)}
.buybox .price{display:flex;align-items:baseline;gap:8px}
.buybox .price b{font-family:var(--serif);font-weight:400;font-size:42px;color:var(--ink);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.buybox .price span{color:var(--ink-3);font-size:13.5px}
.buybox .includes{margin:20px 0 22px;display:flex;flex-direction:column;gap:10px}
.buybox .includes li{display:flex;gap:10px;font-size:14px;color:var(--ink-2);line-height:1.45}
.buybox .includes svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--sage)}
.buybox .note{margin-top:14px;font-size:12.5px;color:var(--ink-3);text-align:center}
.buybox .note-links{margin-top:2px;font-size:12.5px;color:var(--ink-3);text-align:center}
.buybox .note-links a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.buybox .note-links a:hover{color:var(--accent-hi)}
.buybox .alt{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);
  font-size:13.5px;display:flex;flex-direction:column;gap:8px}
.buybox .alt a{color:var(--accent)}
.buybox .alt a:hover{text-decoration:underline}

.spec{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:22px}
.spec th,.spec td{text-align:left;padding:11px 0;border-bottom:1px solid var(--line-2);
  vertical-align:top}
.spec th{width:38%;font-weight:500;color:var(--ink-3);font-size:13px;letter-spacing:.02em}
.spec td{color:var(--ink)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}

.units{margin-top:26px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:#fff}
.units table{width:100%;border-collapse:collapse;font-size:14px}
.units th{text-align:left;padding:11px 16px;background:var(--sand);color:var(--ink-3);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  border-bottom:1px solid var(--line)}
.units td{padding:10px 16px;border-bottom:1px solid var(--line-2);color:var(--ink)}
.units tr:last-child td{border-bottom:0}
.units td:first-child{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);width:82px}
.units-wrap{max-height:520px;overflow:auto}
.units-foot{padding:12px 16px;background:var(--sand);border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-3)}

/* ---------- comparison table (FAQ) ---------- */
.compare-wrap{margin-top:26px;border:1px solid var(--line);border-radius:var(--r);
  overflow-x:auto;background:#fff}
.compare{width:100%;border-collapse:collapse;font-size:14px;min-width:680px}
.compare thead th{text-align:left;padding:12px 16px;background:var(--sand);
  color:var(--ink-2);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;border-bottom:1px solid var(--line);white-space:nowrap}
/* Our own column is the second: the first cell of every row is the row label. */
.compare thead th:nth-child(2){background:var(--accent-soft);color:var(--ink)}
.compare tbody th{text-align:left;padding:12px 16px;font-weight:500;color:var(--ink-3);
  font-size:13px;border-bottom:1px solid var(--line-2);vertical-align:top;width:20%}
.compare tbody td{width:20%}
.compare .corner{width:20%}
.compare td{padding:12px 16px;border-bottom:1px solid var(--line-2);
  color:var(--ink-2);vertical-align:top}
.compare td:nth-child(2){color:var(--ink);background:#FEFCFA}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}

/* ---------- features / steps ---------- */
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:36px 56px}
.feature{display:flex;gap:18px}
.feature-num{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;font-size:12.5px;color:var(--accent);
  font-variant-numeric:tabular-nums;background:#fff}
.feature h3{font-size:18px;margin-bottom:6px;font-family:var(--sans);font-weight:600;letter-spacing:-.01em}
.feature p{font-size:14.5px;color:var(--ink-3)}

/* ---------- callout ---------- */
.callout{background:var(--sand);border:1px solid var(--sand-2);border-radius:var(--r-lg);
  padding:44px 48px;display:flex;align-items:center;justify-content:space-between;gap:40px}
.callout h2{font-size:clamp(24px,2.4vw,32px)}
.callout p{margin-top:10px;max-width:34em;color:var(--ink-2)}
.callout .actions{display:flex;gap:12px;flex-wrap:wrap;flex:none}

/* ---------- faq ---------- */
.faq{max-width:820px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
/* The padding sits on the summary, not the details: padding on the container
   is not clickable, so the row looked 66 px tall and responded on 27 px. */
.faq summary{cursor:pointer;font-size:16.5px;color:var(--ink);font-weight:500;
  padding:20px 0;list-style:none;display:flex;justify-content:space-between;
  gap:20px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--serif);font-size:22px;color:var(--ink-3);
  line-height:1;transition:transform .2s var(--ease)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:-4px 0 20px;font-size:15px;color:var(--ink-2);max-width:62ch}

/* ---------- prose (legal pages) ---------- */
.prose{max-width:760px;font-size:16px;line-height:1.7;color:var(--ink-2)}
.prose h2{font-size:26px;margin:44px 0 14px}
.prose h3{font-family:var(--sans);font-size:16.5px;font-weight:600;margin:28px 0 8px;color:var(--ink)}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 16px;display:flex;flex-direction:column;gap:8px}
.prose li{position:relative;padding-left:20px}
.prose li::before{content:"";position:absolute;left:2px;top:11px;width:4px;height:4px;
  border-radius:50%;background:var(--ink-4)}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.prose code{font-family:var(--mono);font-size:13.5px;background:var(--sand);padding:2px 6px;
  border-radius:4px}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line);padding:60px 0 44px;margin-top:20px;
  background:#fff}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.foot-brand p{margin-top:14px;font-size:14px;color:var(--ink-3);max-width:26em}
.foot-head{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;margin-bottom:14px}
/* Card headings sit at the h2 level so the outline does not skip, but they keep
   the card's own type scale. */
.card-body h2{font-size:20px}
.foot-col a{display:block;font-size:14.5px;color:var(--ink-2);padding:5px 0}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:48px;padding-top:22px;border-top:1px solid var(--line-2);
  font-size:12.5px;color:var(--ink-3)}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-grid>*,.product-grid>*{min-width:0}
  .hero-figure{order:-1}
  .product-grid{grid-template-columns:1fr;gap:36px}
  .buybox{position:static}
  .provinces{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  :root{--gut:20px}
  section{padding:60px 0}
  nav.main,.header-cta{display:none}
  .burger{display:inline-flex;flex:none}
  .bar{gap:12px}
  .brand{font-size:15px;min-width:0}
  .brand em{display:none}
  .brand span{min-width:0;overflow:hidden}
  /* One line, so a narrow screen truncates instead of re-wrapping the name. */
  .brand b{overflow:hidden;text-overflow:ellipsis}
  header.site nav.open{display:flex;position:absolute;top:var(--header);left:0;right:0;
    flex-direction:column;background:#fff;border-bottom:1px solid var(--line);padding:10px var(--gut) 18px}
  header.site nav.open a{padding:11px 4px;border-bottom:1px solid var(--line-2)}
  .tiers,.features{grid-template-columns:1fr}
  .provinces{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  /* 33 px rows are hard to hit with a thumb; these are links, not text. */
  .foot-col a{padding:10px 0}
  .callout{flex-direction:column;align-items:flex-start;padding:32px 26px}
  .units-wrap{max-height:400px}
  /* A four-column table cannot be read at 360 px, so each row becomes its own
     block and the column name moves into the cell as a label. */
  .compare-wrap{border:0;background:transparent;overflow:visible;margin-top:20px}
  .compare{min-width:0;display:block}
  .compare thead{display:none}
  /* The desktop percentage widths are on th/td; they have to go too, or each
     stacked row collapses into a fifth of the card. */
  .compare tbody,.compare tr,.compare th,.compare td,
  .compare .corner,.compare tbody th,.compare tbody td{display:block;width:auto}
  .compare tr{border:1px solid var(--line);border-radius:var(--r);background:#fff;
    margin-bottom:12px;overflow:hidden}
  .compare tbody th{padding:12px 16px 8px;background:var(--sand);font-size:12px;
    letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);border:0}
  .compare td{padding:6px 16px 0;border:0}
  .compare td:nth-child(2){background:var(--accent-soft);border-radius:0}
  .compare td:last-child{padding-bottom:14px}
  .compare td::before{content:attr(data-col) " · ";color:var(--ink-3);font-size:12px}
}
@media (max-width:520px){
  .provinces{grid-template-columns:1fr}
  .hero-meta{gap:18px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* ---------- format grid ---------- */
.formats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fmt{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:17px 18px 15px;
  display:flex;flex-direction:column;gap:8px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.fmt:hover{border-color:var(--line-2);box-shadow:var(--shadow-1)}
.fmt-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.fmt-head b{font-size:15px;color:var(--ink);font-weight:600;letter-spacing:-.005em}
.fmt-head code{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.fmt p{font-size:13px;line-height:1.5;color:var(--ink-3)}
.fmt-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--line-2);
  display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--ink-3)}
.fmt-foot .mono{color:var(--ink-3);white-space:nowrap}

/* ---------- code block ---------- */
pre.code{background:#1B1E21;color:#E7E2D8;border-radius:var(--r);padding:22px 24px;
  overflow:auto;font-family:var(--mono);font-size:12.5px;line-height:1.7;margin:18px 0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
pre.code::selection{background:var(--accent)}
.prose pre.code+p{margin-top:20px}

/* ---------- sample download list ---------- */
.sample-links{display:flex;flex-direction:column;gap:8px}
.sample-link{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;
  font-size:14.5px;color:var(--ink);transition:border-color .18s var(--ease),background .18s var(--ease)}
.sample-link:hover{border-color:var(--accent);background:#FDF8F5}
.sample-link svg{width:15px;height:15px;color:var(--accent);flex:none}

@media (max-width:1020px){
  .formats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .formats{grid-template-columns:1fr}
  pre.code{font-size:11.5px;padding:16px}
}

/* Units table: give the two name columns a predictable width so a three-column
   table of short names does not leave a canyon in the middle. */
.units th:nth-child(2),.units td:nth-child(2){width:42%}
.units th:nth-child(3),.units td:nth-child(3){width:30%}

/* The format card footer carries a use case and a CRS; in a narrow column they
   must be allowed to stack rather than clip. */
.fmt-foot{flex-wrap:wrap}

/* ---------- figures ---------- */
/* Georgia carries old-style figures only: the 9 descends below the baseline and
   the 1 sits at x-height, so "$19.99" reads as though it were mis-set, beside a
   "$" that does sit on the line. It ships no lining alternate either, which
   makes the existing tabular-nums a no-op. Prices and standalone counts are
   therefore set in the UI sans, which has lining tabular figures on every
   platform — and lining figures are what a price looks like in the US and UK.
   Old-style figures stay in prose and headings, which is where editorial
   typography wants them; there is no inconsistency, this is the normal split.
   Declared at equal specificity after the component rules, so it wins. */
.tier .price b,.buybox .price b,.card-foot b,.hero-meta b{
  font-family:var(--sans);font-weight:500;
  font-variant-numeric:lining-nums tabular-nums;
  letter-spacing:-.022em}