/* MeSize web — the app's look, ported straight from its design tokens.
   Values mirror src/constants/Colors.ts + src/constants/Layout.ts; the blob
   backdrop mirrors src/components/ScreenBackground.tsx (460px circles fading to
   transparent at the rim, same four positions). Keep them in step by hand: the
   site can't import from the app. */

:root {
  color-scheme: light dark;

  --ink: #1a1a2e;
  --ink-soft: #3d3d52;
  --muted: #6b6b82;
  --accent: #2e7cf6;
  --accent-deep: #1f62d6;
  --accent-ink: #ffffff;
  --danger: #e5484d;

  --bg-top: #eaf1ff;
  --bg-mid: #f2f7ff;
  --bg-bottom: #e6f0ff;

  --glass: rgba(255, 255, 255, 0.72);
  --glass-soft: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-highlight: rgba(255, 255, 255, 0.9);
  --hairline: rgba(26, 26, 46, 0.08);
  --shadow: rgba(26, 26, 46, 0.18);
  --accent-glow: rgba(46, 124, 246, 0.4);
  /* Opaque twin of --glass-highlight. Everything else here can be translucent;
     a sticky table column cannot — it has to actually hide the cells sliding
     under it. Roughly what --glass-highlight composites to over a card. */
  --sticky: #ffffff;
  /* Web twin of the app's glassBar. Opaque for the same reason as --sticky: a
     sticky bar has to hide the page sliding under it. */
  --bar: #eef4ff;

  --blob-blue: rgba(46, 124, 246, 0.26);
  --blob-blue-mid: rgba(46, 124, 246, 0.18);
  --blob-sky: rgba(91, 168, 255, 0.32);
  --blob-sky-mid: rgba(91, 168, 255, 0.22);
  --blob-mint: rgba(56, 200, 220, 0.22);
  --blob-mint-mid: rgba(56, 200, 220, 0.15);
  --blob-lilac: rgba(150, 170, 255, 0.3);
  --blob-lilac-mid: rgba(150, 170, 255, 0.21);

  /* Layout.spacing / Layout.radius */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eaf0ff;
    --ink-soft: #c2c8de;
    --muted: #8a91ad;
    --accent: #5b9cff;
    --accent-deep: #3a7ae4;
    --danger: #ff6166;

    --bg-top: #11162a;
    --bg-mid: #0c1124;
    --bg-bottom: #0a0e20;

    --glass: rgba(255, 255, 255, 0.12);
    --glass-soft: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.14);
    --glass-highlight: rgba(255, 255, 255, 0.16);
    --hairline: rgba(255, 255, 255, 0.1);
    --shadow: rgba(0, 0, 0, 0.5);
    --accent-glow: rgba(91, 156, 255, 0.35);
    --sticky: #343a4c;
    --bar: #0f1428;

    --blob-blue: rgba(46, 124, 246, 0.3);
    --blob-blue-mid: rgba(46, 124, 246, 0.21);
    --blob-sky: rgba(91, 168, 255, 0.28);
    --blob-sky-mid: rgba(91, 168, 255, 0.2);
    --blob-mint: rgba(56, 200, 220, 0.18);
    --blob-mint-mid: rgba(56, 200, 220, 0.13);
    --blob-lilac: rgba(150, 170, 255, 0.26);
    --blob-lilac-mid: rgba(150, 170, 255, 0.18);
  }
}

* {
  box-sizing: border-box;
}

/* Paint the canvas too: with a shorter-than-viewport page (or overscroll) the
   body box ends before the screen does, and the browser's white shows through. */
html {
  background: var(--bg-bottom);
  /* Clears the sticky site header (~55px) so a jump link lands on its heading
     instead of behind the bar. Harmless on the pages that have no header. */
  scroll-padding-top: 72px;
}

body {
  margin: 0;
  min-height: 100vh;
  padding: var(--sp-lg) 18px 48px;
  display: flex;
  justify-content: center;
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg-bottom) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* The four ScreenBackground blobs, same colours, same corners. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      circle 230px at 110px 50px,
      var(--blob-blue) 0%,
      var(--blob-blue-mid) 45%,
      transparent 100%
    ),
    radial-gradient(
      circle 230px at calc(100% - 30px) 310px,
      var(--blob-sky) 0%,
      var(--blob-sky-mid) 45%,
      transparent 100%
    ),
    radial-gradient(
      circle 230px at calc(100% - 130px) calc(100% - 70px),
      var(--blob-mint) 0%,
      var(--blob-mint-mid) 45%,
      transparent 100%
    ),
    radial-gradient(
      circle 230px at 20px calc(100% - 290px),
      var(--blob-lilac) 0%,
      var(--blob-lilac-mid) 45%,
      transparent 100%
    );
}

.wrap {
  width: 100%;
  max-width: 460px;
}

/* --- brand ------------------------------------------------------------- */

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sp-lg);
}
.brand img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  box-shadow: 0 6px 14px var(--shadow);
}
.brand span {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.brand.center {
  flex-direction: column;
  gap: var(--sp-md);
  margin-bottom: var(--sp-md);
}
.brand.center img {
  width: 76px;
  height: 76px;
  border-radius: 18px;
}

/* --- type -------------------------------------------------------------- */

h1 {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-sm);
}
p {
  margin: 0;
}
.sub {
  color: var(--muted);
  margin-bottom: var(--sp-lg);
}
.hint {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin-top: var(--sp-md);
}
a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
strong {
  font-weight: 700;
}

/* --- glass card -------------------------------------------------------- */

.card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 20px var(--shadow);
  padding: var(--sp-md);
  margin-bottom: var(--sp-md);
}
.card + .hint {
  margin-top: calc(var(--sp-md) * -1 + var(--sp-sm));
}

/* --- controls ---------------------------------------------------------- */

label.field {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}

input[type='text'],
select {
  width: 100%;
  padding: 13px 14px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--glass-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  -webkit-appearance: none;
  appearance: none;
}
select {
  background-image: none;
}
input:focus,
select:focus,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

button {
  width: 100%;
  padding: 18px var(--sp-lg);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--accent-ink);
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
  border: 1px solid var(--glass-highlight);
  border-radius: var(--r-pill);
  box-shadow: 0 10px 24px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
button:active {
  transform: scale(0.97);
}
button[disabled] {
  opacity: 0.5;
  box-shadow: none;
  cursor: default;
}
button.ghost {
  color: var(--accent);
  background: var(--glass-soft);
  border: 1px solid var(--accent);
  box-shadow: none;
  padding: 13px var(--sp-md);
}

/* The "get the app" pill — a real call to action, not a text link. */
.btn {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: var(--sp-lg) auto 0;
  padding: 18px 32px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--accent-ink);
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
  border: 1px solid var(--glass-highlight);
  border-radius: var(--r-pill);
  box-shadow: 0 10px 24px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.12s ease;
}
.btn:active {
  transform: scale(0.97);
}
/* The second store. Both stores show on every device — the visitor's own
   platform takes the filled pill (swapped in JS), the other one this. */
.btn.alt {
  color: var(--accent);
  background: var(--glass-soft);
  border: 1px solid var(--accent);
  box-shadow: none;
}

/* Footer app promo: icon, one line of why, then the pill. */
.appcta {
  margin-top: var(--sp-lg);
  padding: var(--sp-lg) var(--sp-md) var(--sp-md);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 20px var(--shadow);
  text-align: center;
}
.appcta img {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  box-shadow: 0 6px 14px var(--shadow);
}
.appcta .name {
  font-weight: 800;
  font-size: 17px;
  margin-top: 10px;
}
.appcta .hint {
  margin-top: 6px;
}
.appcta .btn {
  margin-top: var(--sp-md);
}
/* Two store pills instead of one (homepage): centred under the card's text,
   side by side where there's room. */
.appcta .stores {
  justify-content: center;
  margin-top: var(--sp-md);
}

/* --- size rows --------------------------------------------------------- */

.section {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--sp-md) 0 var(--sp-sm);
}
.section:first-child {
  padding-top: 0;
}
.section + .row {
  border-top: 0;
  padding-top: 0;
}

.row {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
}
.row:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.row label {
  flex: 1;
  font-size: 15px;
}
.row input {
  flex: 0 0 116px;
  width: 116px;
  text-align: center;
  padding: 11px 8px;
}

/* --- segmented chips (mirrors the app's Chip) -------------------------- */

.seg {
  display: flex;
  gap: var(--sp-sm);
}
.seg input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.seg label {
  flex: 1;
  text-align: center;
  padding: 11px 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  background: var(--glass-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all 0.12s ease;
}
.seg input:checked + label {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 4px 10px var(--accent-glow);
}

/* --- misc -------------------------------------------------------------- */

.gap {
  height: var(--sp-md);
}
.error {
  color: var(--danger);
  font-size: 14px;
  font-weight: 600;
  margin-top: var(--sp-md);
  text-align: center;
}
.center {
  text-align: center;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.spinner {
  width: 32px;
  height: 32px;
  margin: 40px auto;
  border-radius: 50%;
  border: 3px solid var(--hairline);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
[hidden] {
  display: none !important;
}

/* Splash pages are a single centred card, not a scrolling form. */
body.splash {
  align-items: center;
  text-align: center;
}
body.splash .wrap {
  max-width: 420px;
}

/* ======================================================================
   Marketing + size-chart pages
   ----------------------------------------------------------------------
   The apex page and everything under /size-chart. Same tokens as above —
   these only add layouts the splash pages never needed: a wider column, a
   real data table, and content sections that stack.
   ====================================================================== */

/* Reading pages carry a full-bleed site header, so they drop the base body's
   flex centring: the header spans the viewport and .wrap centres itself under it.
   Splash pages and the /sizes form keep the base layout untouched. */
body.doc {
  display: block;
  padding: 0 0 var(--sp-xl);
}
body.doc .wrap {
  margin: 0 auto;
  padding: 0 18px;
}
.wrap.wide {
  max-width: 760px;
}

/* --- site header ------------------------------------------------------- */

.site {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bar);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--sp-lg);
}
.site .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  max-width: 760px;
  margin: 0 auto;
  padding: 10px 18px;
}
/* The header's own lockup is smaller than the standalone one, and carries no
   bottom margin — the bar's padding does that job. */
.site .brand {
  margin-bottom: 0;
  gap: 8px;
}
.site .brand img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  box-shadow: none;
}
.site .brand span {
  font-size: 16px;
}
.site nav {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}
.site nav a {
  font-size: 14px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.site nav a:hover {
  color: var(--accent);
}
/* The bar is brand + two text links + language picker: "Size charts" and
   "Guides" on the marketing page, "Guides" and "Get MeSize" on the generated
   ones. It used to also carry a "Get MeSize" pill, which had to be
   hidden-or-hide-the-link at phone widths; the store pills in the hero say it
   better, so the bar keeps its own job. Two short text links plus the 84px
   picker still fit at 375px — a third would not, so add nothing else here. */
@media (max-width: 419px) {
  .site .bar {
    gap: var(--sp-sm);
  }
}

/* Language picker: a plain <select> dressed as a glass pill. The homepage
   swaps window.MS_LOCALE + re-applies [data-i18n] in place; the size-chart
   pages render one <option value="URL"> per locale at build time and just
   navigate on change — no JS framework either way needs the pill itself to
   know which. */
.lang-select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--glass-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 6px 26px 6px 12px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.lang-select:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.lang-select option {
  color: initial;
  background: var(--card, #fff);
}
@media (max-width: 419px) {
  .lang-select {
    max-width: 84px;
    padding-right: 22px;
    font-size: 12px;
  }
}

/* The brand lockup doubles as the home link on these pages. */
a.brand {
  color: var(--ink);
  font-weight: inherit;
}

h2 {
  font-size: 21px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: var(--sp-xl) 0 var(--sp-md);
}
h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
}
p + p {
  margin-top: var(--sp-md);
}

.crumbs {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: var(--sp-md);
}
.crumbs span {
  padding: 0 var(--sp-xs);
}

/* --- conversion table -------------------------------------------------- */

/* The table is the content, and six columns never fit a phone. It scrolls
   inside its own box so the page itself never scrolls sideways. */
.tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 20px var(--shadow);
}
.tablewrap table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
/* Named for screen readers; the <h2> right above already says it on screen. */
.tablewrap caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Two tables under one heading are two cards, and with nothing between them
   they read as one broken box. Only the guides ever stack them — every chart
   page separates its tables with an <h2>, which brings its own margin — so the
   adjacent-sibling selector reaches exactly those pairs and nothing else. */
.tablewrap + .tablewrap {
  margin-top: var(--sp-lg);
}

/* Hidden is right when an <h2> directly above already names the table — every
   chart page. It is wrong when two tables share one heading, which happens in
   the guides: then the caption is the only thing telling them apart, and it has
   to be readable. build-site.mjs adds .shown to exactly those. */
.tablewrap caption.shown {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  /* The hidden rule sets nowrap; a real caption must wrap, or a long one in
     German or Japanese widens the table's own horizontal scroll. */
  white-space: normal;
  padding: var(--sp-sm) var(--sp-md) 0;
  /* `start`, not `left`: on the Arabic guide pages this table sits in a
     `dir="rtl"` document, and `text-align: left` anchored the caption at the
     table's physical left edge — off past where an RTL table rests at scroll
     position zero, so the caption opened already scrolled out of view.
     `start` follows the reading direction the same as `inset-inline-start`
     does for the sticky column just above, so both land on the visible side. */
  text-align: start;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.tablewrap thead th {
  padding: 10px 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  background: var(--sticky);
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
.tablewrap thead th .code {
  display: block;
  letter-spacing: 0.04em;
}
.tablewrap thead th .cn {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.tablewrap tbody th,
.tablewrap tbody td {
  padding: 11px 14px;
  text-align: center;
  font-size: 15px;
  white-space: nowrap;
  border-top: 1px solid var(--hairline);
}
/* First column is the one you scroll away from — pin it so a row stays readable
   once JP and KR are on screen. Only the horizontal axis is pinned: the page
   itself is the vertical scroller, so a sticky header would float over the rest
   of the page rather than over its own table.
   `inset-inline-start` (not `left`), on purpose: Arabic renders `dir="rtl"`, and
   in an RTL table the first DOM column — the one this rule targets — sits at
   the table's visual RIGHT edge, not its left. `left: 0` pinned nothing there:
   scrolling to reveal KR/CN pushed the anchor column clean off the right side
   of the viewport instead of keeping it in view, confirmed against the live
   /ar/size-chart/ pages. The logical property tracks the reading direction —
   inline-start is left in LTR, right in RTL — so one rule is correct both ways.
   `border-inline-end` for the same reason: the divider belongs on the anchor
   column's trailing edge, which is its right in LTR and its left in RTL. */
.tablewrap tbody th,
.tablewrap thead th:first-child {
  position: sticky;
  inset-inline-start: 0;
  background: var(--sticky);
  border-inline-end: 1px solid var(--hairline);
}
.tablewrap tbody th {
  font-weight: 800;
}
.tablewrap tbody tr:hover td {
  background: var(--glass-soft);
}

/* Sits tight under its <h2>, ahead of the table it describes. */
.hint.range {
  margin-top: 0;
  margin-bottom: var(--sp-md);
}

/* --- jump links + chip nav --------------------------------------------- */

.jump,
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
}
.jump {
  margin-bottom: var(--sp-md);
}
.jump a,
.chips a {
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--glass-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
}
.jump a:hover,
.chips a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* --- definition list (how to measure / what each system counts) --------- */

.how {
  margin: 0;
}
.how dt {
  font-size: 15px;
  font-weight: 700;
  margin-top: var(--sp-md);
}
.how dt:first-child {
  margin-top: 0;
}
.how dt .unit {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding-left: 6px;
}
.how dd {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}

/* --- tile grid (chart index + homepage features) ----------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-sm);
}
/* Feature cards carry a sentence, not a label — they need the wider track, and
   more air between them than the chart index's one-line tiles. */
.grid.two {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-md);
}
.tile {
  display: block;
  padding: 14px var(--sp-md);
  color: var(--ink);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.tile:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}
.tile-name {
  display: block;
  font-weight: 700;
  font-size: 15px;
}
.tile-sub {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding-top: 2px;
}

/* --- homepage ---------------------------------------------------------- */

.hero {
  padding: var(--sp-lg) 0 var(--sp-sm);
}
.hero h1 {
  font-size: 34px;
  margin-bottom: var(--sp-md);
}
.hero .sub {
  font-size: 18px;
  color: var(--ink-soft);
  margin-bottom: 0;
}
@media (min-width: 600px) {
  .hero h1 {
    font-size: 42px;
  }
}

/* Store buttons: left-aligned rather than the splash pages' centred pill, and
   side by side — App Store and Google Play, both on every device. */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-top: var(--sp-lg);
}
/* A store's own badge wording ("Download on the App Store") is far longer than
   "Get MeSize", and longer again in most of the 68 locales — hence the smaller
   type and roomier line height, so a two-line label still sits in the pill. */
.stores .btn {
  flex: 1 1 250px;
  width: auto;
  margin: 0;
  padding: 15px var(--sp-md);
  font-size: 16px;
  line-height: 1.25;
}

/* One feature per card: name, then what it does for the reader. */
.feature {
  padding: var(--sp-md);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 20px var(--shadow);
}
.feature p {
  color: var(--ink-soft);
  font-size: 15px;
}
.feature .hint {
  margin-top: var(--sp-sm);
}

/* The "ask for sizes" block — the one mechanic nothing else has. Carries its own
   top margin: it follows a .grid, and a grid's gap does not extend past its last
   row, so without this the block sits flush against the cards above it. */
.spotlight {
  margin-top: var(--sp-xl);
  padding: var(--sp-lg) var(--sp-md);
  background: var(--glass);
  border: 1px solid var(--accent);
  border-radius: var(--r-xl);
  box-shadow: 0 10px 24px var(--accent-glow);
}
.spotlight h2 {
  margin-top: 0;
}
.steps {
  margin: var(--sp-md) 0 0;
  padding-left: 1.2em;
  color: var(--ink-soft);
  font-size: 15px;
}
.steps li + li {
  margin-top: var(--sp-sm);
}

/* --- footer ------------------------------------------------------------ */

.foot {
  margin-top: var(--sp-xl);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.foot p + p {
  margin-top: var(--sp-sm);
}
.foot a {
  color: var(--muted);
  font-weight: 600;
}
.foot a:hover {
  color: var(--accent);
}

/* --- legal prose (privacy / terms) -------------------------------------- */

/* The legal documents are authored as plain semantic HTML in
   docs/legal-drafts/ and injected whole, so everything they use has to be
   styled here rather than per-page: headings, lists, rules and one table. */
.prose {
  color: var(--ink-soft);
}
.prose h2 {
  font-size: 19px;
  color: var(--ink);
  margin: var(--sp-lg) 0 var(--sp-sm);
}
.prose h3 {
  font-size: 16px;
  color: var(--ink);
  margin: var(--sp-md) 0 var(--sp-xs);
}
.prose p {
  margin: 0 0 var(--sp-md);
}
.prose ul {
  margin: 0 0 var(--sp-md);
  padding-left: 1.3em;
}
.prose li {
  margin-bottom: var(--sp-sm);
}
.prose strong {
  color: var(--ink);
}
/* The drafts use <hr> as a section divider before every <h2>. A visible rule
   every few paragraphs is noise once the headings are styled, so it becomes
   plain spacing instead of a line. */
.prose hr {
  border: 0;
  height: var(--sp-md);
  margin: 0;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--sp-md);
  font-size: 14px;
}
.prose th,
.prose td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hairline);
}
.prose th {
  color: var(--ink);
  font-weight: 700;
}
/* A bare horizontal escape hatch, with none of .tablewrap's conversion-table
   chrome — prose cells hold sentences and must be free to wrap. */
.scroller {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}