/* TRUE /updates — blog layer on top of the design-system kit.
   Only layout and reading typography live here. Every colour, radius, shadow
   and font comes from the kit tokens. */

.u-main { padding-block: 32px 64px; }

/* WHITE PAGE (Ben 2026-09-29: "everything on white background"). The kit's
   light theme is a soft grey; the blog reads on pure white with the cards
   one step off it. Only the surface tokens move, everything else inherits. */
html.light { --bg: #ffffff; --s2: #ffffff; --s3: #f6f6f9; --s4: #eef0f5; }
html.light body { background: #ffffff; }

/* ---------------------------------------------------------------- chrome */

.u-head {
  border-bottom: 1px solid var(--border);
  background: var(--s2);
  position: sticky;
  top: 0;
  z-index: 20;
}
.u-head-in {
  max-width: 1120px;
  margin-inline: auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.u-brand { display: inline-flex; align-items: center; }
.u-brand img { display: block; height: 24px; width: auto; }
.u-nav { display: flex; align-items: center; gap: 16px; }
.u-nav a { color: var(--t2); text-decoration: none; font-size: 14px; }
.u-nav a:hover { color: var(--t1); }
.u-nav a.btn { color: var(--on-v); }
.u-nav a.btn--secondary, .u-nav a.btn--ghost { color: var(--t2); }

.u-foot { border-top: 1px solid var(--border); background: var(--s2); margin-top: 64px; }
.u-foot-in { max-width: 1120px; margin-inline: auto; padding: 32px 20px 40px; display: grid; gap: 20px; }
.u-risk { color: var(--t3); font-size: 12px; line-height: 1.6; margin: 0; max-width: 76ch; }
.u-copy { color: var(--t3); font-size: 12px; margin: 0; }
.u-copy a { color: var(--t2); text-decoration: none; }
.u-copy a:hover { color: var(--t1); }

/* ------------------------------------------------------------------ index */

.u-hero-block { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.u-list { display: grid; gap: 20px; max-width: 880px; margin-inline: auto; }

.u-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  padding: 0;
}
/* Two columns ONLY when the card actually has an image. Without this the
   text lands in a 34% column and two thirds of the card is empty. */
@media (min-width: 720px) {
  .u-item:has(.u-itemmedia) { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); align-items: stretch; }
}
.u-item:not(:has(.u-itemmedia)) .u-itembody { padding: 24px 28px 26px; }
.u-itemmedia { display: block; overflow: hidden; background: var(--s3); }
.u-itemmedia img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center; }
.u-itembody { display: grid; gap: 10px; align-content: start; padding: 20px 20px 24px; }
.u-itemtitle { font-size: 20px; font-weight: 590; line-height: 1.3; color: var(--t1); }
.u-itemexcerpt { color: var(--t2); font-size: 15px; line-height: 1.6; }
.u-itemmore { color: var(--v-text); font-size: 14px; font-weight: 510; }
.u-item:hover .u-itemtitle { color: var(--v-text); }

/* ---------------------------------------------------------------- article */

.u-article { max-width: 720px; margin-inline: auto; }
.u-back { display: inline-block; color: var(--t3); text-decoration: none; font-size: 14px; margin-bottom: 24px; }
.u-back:hover { color: var(--t1); }

.u-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--t3); font-size: 13px; }
.u-dot { color: var(--t4); }

.u-h1 { font-size: 52px; line-height: 1.05; font-weight: 700; letter-spacing: -0.035em; color: var(--t1); margin: 20px 0 18px; }
.u-excerpt { font-size: 20px; line-height: 1.55; color: var(--t2); margin: 0 0 36px; letter-spacing: -0.01em; }

.u-hero { margin: 0 0 32px; border-radius: 16px; overflow: hidden; background: var(--s3); border: 1px solid var(--border); }
.u-hero img, .u-hero video { display: block; width: 100%; height: auto; }

.u-body { color: var(--t2); font-size: 17px; line-height: 1.7; letter-spacing: -0.008em; }
.u-body > * + * { margin-top: 20px; }
.u-lead { font-size: 21px; line-height: 1.55; color: var(--t1); letter-spacing: -0.015em; font-weight: 500; }
.u-p { margin: 0; }
.u-body > .u-p + .u-p { margin-top: 28px; }
.u-body a { color: var(--v-text); text-decoration: underline; text-underline-offset: 2px; }
.u-body code { font-family: var(--mono); font-size: 0.88em; background: var(--s3); border: 1px solid var(--border); border-radius: 10px; padding: 1px 6px; color: var(--t1); }
.u-body strong { color: var(--t1); font-weight: 590; }

.u-h2 { font-size: 34px; line-height: 1.15; font-weight: 700; color: var(--t1); margin-top: 64px; letter-spacing: -0.03em; }
.u-h3 { font-size: 22px; line-height: 1.25; font-weight: 650; color: var(--t1); margin-top: 36px; letter-spacing: -0.02em; }
.u-emoji { font-size: 0.9em; line-height: 1; margin-right: 0.3em; }
.u-badge {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: var(--gradient-accent); border-radius: 9999px; padding: 4px 10px;
  vertical-align: middle; margin-left: 8px; position: relative; top: -3px;
}
/* Feature cards: two wide columns, emoji on the left, a bold title and a
   short line. Wide and short reads; a narrow tall column of text does not. */
.u-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin: 24px 0; }
.u-card {
  display: flex; flex-direction: row; align-items: flex-start; gap: 14px;
  padding: 18px 20px; border-radius: 18px; background: var(--s3); border: 1px solid var(--border);
  font-size: 16px; line-height: 1.5; color: var(--t2);
}
.u-card-emoji { font-size: 28px; line-height: 1.1; flex: 0 0 auto; }
.u-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.u-card b { color: var(--t1); font-size: 17px; letter-spacing: -0.01em; }
@media (max-width: 720px) { .u-cards { grid-template-columns: 1fr; } }

/* Feature rows: phone on the left, text on the right (builders section). */
.u-feats { display: flex; flex-direction: column; gap: 20px; margin: 28px 0; }
.u-feat {
  display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: center;
  padding: 24px; border-radius: 22px; background: var(--s3); border: 1px solid var(--border);
}
.u-feat-media .u-phone { flex-basis: 200px; max-width: 200px; }
.u-feat-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.u-feat-emoji { font-size: 30px; line-height: 1.1; }
.u-feat-body b { font-size: 22px; line-height: 1.2; color: var(--t1); letter-spacing: -0.02em; }
.u-feat-body p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--t2); }
@media (max-width: 720px) {
  .u-feat { grid-template-columns: 1fr; gap: 16px; padding: 18px; }
  .u-feat-media { display: flex; justify-content: center; }
  .u-feat-media .u-phone { flex-basis: min(60vw, 220px); max-width: min(60vw, 220px); }
}

/* Cover banner at the top of the article. Brand violet, fixed values on
   purpose (a mark and its surface are not theme tokens). */
.u-cover {
  position: relative; overflow: hidden; margin: 12px 0 28px; border-radius: 28px;
  min-height: 380px; display: flex; align-items: flex-end;
  background: linear-gradient(160deg, #9263FF 0%, #733CEC 32%, #3b1f8f 68%, #141127 100%);
  color: #fff;
}
.u-cover-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.u-cover-in { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 36px 40px; max-width: 560px; }
.u-cover-logo { display: block; width: 176px; height: auto; margin-bottom: 18px; }
.u-cover-kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; }
.u-cover-title { color: #fff; margin: 0; text-shadow: 0 2px 24px rgba(20, 17, 39, 0.35); }
.u-cover-sub { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 15px; font-weight: 700; letter-spacing: 0.02em; color: #fff; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.35); border-radius: 9999px; padding: 8px 14px; }
@media (max-width: 720px) {
  .u-cover { min-height: 340px; border-radius: 22px; margin: 4px 0 24px; }
  .u-cover-in { padding: 28px 22px; }
  .u-cover-logo { width: 140px; margin-bottom: 40px; }
}
.u-chains { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.u-chain {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px; border-radius: 9999px; background: var(--s3); border: 1px solid var(--border);
  font-size: 15px; font-weight: 600; color: var(--t1);
}
.u-chain img { width: 28px; height: 28px; border-radius: 50%; display: block; }
.u-tag { padding: 10px 16px; }

.u-ul, .u-ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.u-ul li::marker { color: var(--t4); }
.u-ol li::marker { color: var(--t3); font-variant-numeric: tabular-nums; }

.u-fig { margin: 32px 0; }
.u-fig img, .u-fig video {
  display: block; width: 100%; height: auto;
  border-radius: 16px; border: 1px solid var(--border); background: var(--s3);
}
.u-fig figcaption { color: var(--t3); font-size: 13px; line-height: 1.6; margin-top: 10px; }
.u-embed { position: relative; }
.u-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--border); border-radius: 16px; }

.u-quote { margin: 32px 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--v); }
.u-quote p { margin: 0; font-size: 19px; line-height: 1.6; color: var(--t1); }
.u-quote cite { display: block; margin-top: 10px; color: var(--t3); font-size: 14px; font-style: normal; }

.u-callout-body { color: var(--t2); font-size: 15px; line-height: 1.65; }
.u-hr { border: 0; border-top: 1px solid var(--border); margin: 40px 0; }
.u-cta { margin: 40px 0 8px; }
.u-body .u-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 28px;
  border-radius: 14px;
  background-image: var(--gradient-accent);
  color: var(--on-v);
  font-size: 16px;
  font-weight: 590;
  text-decoration: none;
  box-shadow: var(--shadow-accent-glow);
  transition: filter .15s ease, transform .15s ease;
}
.u-body .u-cta a:hover { filter: brightness(1.06); transform: translateY(-1px); }
.u-body .u-cta a:active { transform: translateY(0); }
@media (max-width: 560px) {
  .u-cta { margin-inline: 0; }
  .u-body .u-cta a { display: flex; width: 100%; height: 56px; font-size: 17px; }
}

.u-cite { font-size: 11px; line-height: 0; vertical-align: super; margin-left: 1px; }
.u-cite a { color: var(--v-text); text-decoration: none; font-variant-numeric: tabular-nums; }
.u-cite a:hover { text-decoration: underline; }

.u-refs { max-width: 720px; margin: 48px auto 0; padding-top: 8px; border-top: 1px solid var(--border); }
.u-reflist { margin: 16px 0 0; padding-left: 22px; display: grid; gap: 10px; color: var(--t2); font-size: 14px; line-height: 1.6; }
.u-reflist a { color: var(--v-text); }
.u-backref { margin-left: 6px; color: var(--t4); text-decoration: none; }

.u-byline { margin-top: 40px; color: var(--t3); font-size: 14px; }

.u-pager { max-width: 880px; margin: 48px auto 0; display: grid; gap: 16px; }
@media (min-width: 720px) { .u-pager { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.u-pagelink { display: grid; gap: 6px; padding: 20px; text-decoration: none; color: inherit; }
.u-pagelink--next { text-align: right; }
.u-pagelabel { color: var(--t3); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.u-pagetitle { color: var(--t1); font-size: 16px; font-weight: 510; line-height: 1.4; }
.u-pagelink:hover .u-pagetitle { color: var(--v-text); }

@media (max-width: 560px) {
  /* Phone: bigger type, more air, shorter blocks. Ben 2026-09-29: "too much
     text, people don't read it, a bit larger fonts". */
  .u-h1 { font-size: 36px; }
  .u-h2 { font-size: 29px; margin-top: 56px; margin-bottom: 18px; line-height: 1.12; }
  .u-h3 { font-size: 22px; margin-top: 36px; }
  .u-lead { font-size: 22px; line-height: 1.5; }
  .u-body { font-size: 18px; line-height: 1.72; }
  .u-body > * + * { margin-top: 24px; }
  .u-ul, .u-ol { gap: 12px; }
  .u-card { font-size: 17px; padding: 18px; }
  .u-feat-body p { font-size: 18px; }
  .u-stat b { font-size: 30px; }
  .u-stat small { font-size: 14px; }
  .u-table { font-size: 15px; }
  .u-nav > a:not(.btn) { display: none; }
}


/* ------------------------------------------------- product screenshots */
/* App screens sit inside a device frame at a believable phone size. The frame
   supplies the phone context, so the screenshot goes in whole: nothing is
   cropped and nothing is stretched. Radii stay on the token scale (24 outer,
   16 screen), which reads as a phone at this size. */

.u-screens { margin: 40px 0; }
.u-screenrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 28px;
  padding: 36px 24px;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--s3);
}

.u-phone {
  position: relative;
  display: block;
  flex: 0 1 250px;
  max-width: 250px;
  padding: 8px;
  border-radius: 24px;
  background: var(--t1);
  box-shadow: var(--shadow-menu);
}
.u-phone-island {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 10px;
  border-radius: 9999px;
  background: var(--t1);
  z-index: 2;
}
.u-phone-screen {
  display: block;
  overflow: hidden;
  border-radius: 16px;
  background: var(--s2);
}
.u-phone-screen img, .u-phone-screen video { display: block; width: 100%; height: auto; }

/* Milestone tiles, timeline, banner (Q3 2026 update). */
.u-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 28px 0;
}
.u-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 16px;
  border-radius: 16px;
  background: var(--s2);
  border: 1px solid var(--border);
}
.u-stats:has(> .u-stat:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .u-stats:has(> .u-stat:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } }
.u-stat-emoji { font-size: 24px; line-height: 1; margin-bottom: 6px; }
.u-stat b { font-size: 32px; font-weight: 700; line-height: 1.1; color: var(--t1); letter-spacing: -0.01em; }
.u-stat small { font-size: 13px; color: var(--t3); line-height: 1.35; }
.u-timeline {
  list-style: none;
  margin: 24px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--border);
}
.u-timeline li { display: flex; gap: 16px; padding: 0 0 22px 20px; position: relative; }
.u-timeline li::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--v);
  box-shadow: 0 0 0 3px var(--bg);
}
.u-timeline li:last-child { padding-bottom: 4px; }
.u-tl-when { flex: 0 0 96px; font-size: 13px; font-weight: 700; color: var(--v); text-transform: uppercase; letter-spacing: 0.04em; padding-top: 2px; }
.u-tl-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.u-tl-body b { font-size: 16px; color: var(--t1); }
.u-tl-body span { font-size: 15px; line-height: 1.55; color: var(--t2); }
.u-banner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 32px 0;
  padding: 32px 28px;
  border-radius: 24px;
  background: var(--gradient-accent, linear-gradient(135deg, #7c68d6, #6e56cf));
  color: #fff;
}
.u-banner-kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.u-banner strong { font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.u-banner-text { font-size: 16px; line-height: 1.55; opacity: 0.92; }
.u-fig--narrow { max-width: 480px; margin-left: auto; margin-right: auto; }
@media (max-width: 720px) {
  .u-timeline li { flex-direction: column; gap: 4px; }
  .u-tl-when { flex-basis: auto; }
  .u-banner strong { font-size: 24px; }
}

/* Comparison table (telemetry). */
.u-tblwrap { overflow-x: auto; margin: 24px 0; border: 1px solid var(--border); border-radius: 16px; background: var(--s2); min-width: 0; max-width: 100%; -webkit-overflow-scrolling: touch; }
.u-article, .u-body { min-width: 0; }

.u-table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.45; }
.u-table th, .u-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.u-table thead th { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t3); background: var(--s3); font-weight: 700; }
.u-table tbody th { color: var(--t1); font-weight: 600; width: 34%; }
.u-table td { color: var(--t2); font-variant-numeric: tabular-nums; }
.u-table td:last-child { color: var(--t1); font-weight: 600; }
.u-table tr:last-child th, .u-table tr:last-child td { border-bottom: 0; }

/* Left/right row: three or more phones scroll horizontally with snap points,
   one phone per swipe on a phone, arrow buttons on a pointer device. */
.u-screens--swipe { position: relative; }
.u-screenrow--swipe {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.u-screenrow--swipe::-webkit-scrollbar { display: none; }
.u-screenrow--swipe .u-phone { flex: 0 0 250px; scroll-snap-align: center; }
.u-swipe-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--s2);
  color: var(--t1);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-menu);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 0 3px;
}
.u-swipe-btn--prev { left: 8px; }
.u-swipe-btn--next { right: 8px; }
@media (hover: hover) and (pointer: fine) { .u-screens--swipe .u-swipe-btn { display: inline-flex; } }
.u-swipe-btn:hover { background: var(--s3); }

/* One screen on its own gets a little more presence, but never billboard size. */
.u-screenrow:has(.u-phone:only-child) .u-phone { flex-basis: 274px; max-width: 274px; }

.u-hero--screens { border: 0; background: none; border-radius: 0; overflow: visible; }
.u-hero--screens .u-screenrow { padding: 40px 24px; }

@media (max-width: 720px) {
  .u-screens { margin: 32px calc(-1 * clamp(16px, 4vw, 24px)); width: auto; }
  .u-screenrow { border-radius: 0; border-left: 0; border-right: 0; padding: 28px 16px; gap: 16px; }
  .u-screens figcaption { padding-inline: 20px; }
  .u-phone { flex: 0 1 min(46vw, 230px); max-width: min(46vw, 230px); }
  .u-screenrow--swipe { scroll-padding-inline: 16px; }
  .u-screenrow--swipe .u-phone { flex: 0 0 min(72vw, 280px); max-width: min(72vw, 280px); }
  .u-screenrow:has(.u-phone:only-child) .u-phone { flex-basis: min(66vw, 280px); max-width: min(66vw, 280px); }
}

/* ------------------------------------------------------ language picker */
/* Flags mirror the app's LanguagePicker. Built on <details> so it opens
   without JavaScript and every option stays a real, crawlable link. */

.u-flag {
  display: block; width: 20px; height: 15px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid var(--border);
  flex: none;
}
.u-globe { display: block; width: 16px; height: 16px; color: var(--t3); flex: none; }

.u-lang { position: relative; }
.u-lang > summary { list-style: none; }
.u-lang > summary::marker { content: ""; }
.u-lang > summary::-webkit-details-marker { display: none; }
.u-langbtn {
  display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--s3);
  color: var(--t2);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.u-langbtn:hover { color: var(--t1); border-color: var(--border-strong); }
.u-chev { width: 14px; height: 14px; flex: none; color: var(--t3); transition: transform .15s ease; }
.u-lang[open] .u-chev { transform: rotate(180deg); }

.u-langmenu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  min-width: 200px;
  max-height: 60vh;
  max-height: 60dvh;
  overflow-y: auto;
  padding: 6px;
  display: grid;
  gap: 2px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--s2);
  box-shadow: var(--shadow-menu);
}
.u-langopt {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--t2);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.u-langopt:hover { background: var(--s3); color: var(--t1); }
.u-langopt.is-on { color: var(--t1); }
.u-langopt .u-check { width: 15px; height: 15px; margin-left: auto; flex: none; color: var(--v-text); }

@media (max-width: 560px) {
  .u-langname { display: none; }
  .u-langbtn { padding: 0 8px; }
}


/* Table of contents: sticky rail beside the article on wide screens, a
   floating pill + sheet on everything narrower. */
.u-article { position: relative; }
.u-toc-rail { display: none; }
.u-toc { font-size: 14px; }
.u-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.u-toc a {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 10px; border-radius: 10px; color: var(--t3); text-decoration: none; line-height: 1.35;
  border-left: 2px solid transparent;
}
.u-toc a:hover { color: var(--t1); background: var(--s3); }
.u-toc a.is-active { color: var(--v-text); background: var(--s3); border-left-color: var(--v); font-weight: 600; }
.u-toc-emoji { flex: 0 0 auto; width: 18px; text-align: center; }
.u-toc-title { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3); padding: 0 10px 10px; }
@media (min-width: 1200px) {
  .u-toc-rail { display: block; position: absolute; top: 0; bottom: 0; right: 100%; width: 220px; margin-right: 36px; }
  .u-toc-rail .u-toc { position: sticky; top: 92px; max-height: calc(100vh - 120px); overflow-y: auto; padding-right: 4px; }
}
.u-h2, .u-h3 { scroll-margin-top: 84px; }
@media (max-width: 720px) { .u-stats { grid-template-columns: repeat(2, 1fr); } .u-stat b { font-size: 26px; } }


/* ---------------------------------------------------------- phone overhaul */
/* Nothing inside the article may widen the page. `contain: inline-size`
   zeroes the min-content contribution of the body, so a wide table or a
   phone row can never push the layout viewport (the iOS "zoomed out" page,
   Ben 2026-09-29). */
html, body { overflow-x: clip; }
.u-main, .u-body { min-width: 0; max-width: 100%; }
.u-article { width: 100%; max-width: 720px; min-width: 0; }
.u-body { contain: inline-size; }
.u-body img, .u-body svg, .u-body video { max-width: 100%; height: auto; }
.u-body > * { max-width: 100%; }
.u-cover-in, .u-banner, .u-card, .u-feat-body, .u-stat, .u-tl-body, .u-table { overflow-wrap: anywhere; }
.u-table { table-layout: fixed; width: 100%; }
.u-table tbody th { width: 30%; }
.u-tblwrap { contain: inline-size; }

@media (max-width: 720px) {
  .u-cover { min-height: 300px; }
  .u-cover-in { padding: 24px 20px; gap: 12px; }
  .u-cover-logo { width: 128px; margin-bottom: 28px; }
  .u-cover-title { font-size: 30px; line-height: 1.1; }
  .u-cover-sub { font-size: 14px; padding: 7px 12px; }
  .u-banner { padding: 24px 20px; border-radius: 20px; }
  .u-banner strong { font-size: 22px; }
  /* The comparison table becomes a stack of cards: one card per row,
     each value labelled with its column header. No sideways scrolling. */
  .u-tblwrap { border: 0; background: none; overflow: visible; }
  .u-table, .u-table tbody, .u-table tr, .u-table th, .u-table td { display: block; width: auto; }
  .u-table thead { display: none; }
  .u-table tr { border: 1px solid var(--border); border-radius: 16px; background: var(--s2); padding: 14px 16px; margin-bottom: 12px; }
  .u-table tbody th { width: auto; padding: 0 0 8px; border: 0; font-size: 17px; }
  .u-table td { padding: 6px 0 0; border: 0; display: flex; gap: 10px; align-items: baseline; font-size: 15px; }
  .u-table td::before { content: attr(data-th); flex: 0 0 74px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t3); font-weight: 700; }
  .u-table td:last-child { color: var(--v-text); }
  .u-table tr:last-child { margin-bottom: 0; }
  .u-tl-body b { font-size: 17px; }
  .u-feat { padding: 16px; }
  .u-chains { gap: 8px; }
}
@media (max-width: 400px) {
  .u-cover-title { font-size: 27px; }
  .u-h1 { font-size: 30px; }
  .u-h2 { font-size: 25px; }
}
@media (min-width: 721px) {
  .u-table thead th:nth-child(1) { width: 32%; }
  .u-table thead th:nth-child(2) { width: 23%; }
  .u-table thead th:nth-child(3) { width: 29%; }
  .u-table thead th:nth-child(4) { width: 16%; }
}

/* Phone cover: the rocket flies past the moon in the top-right, clear of
   the title (Ben 2026-09-29: "the word 'for' is inside the white rocket"). */
@media (max-width: 720px) {
  .u-cover-art .cv-moon { transform: translate(6px, -6px) scale(0.85); transform-origin: 78px 30px; }
  .u-cover-art .cv-rocket { transform: translate(64px, 22px) rotate(-38deg) scale(0.62); }
  .u-cover-in { padding-top: 22px; }
  .u-cover-logo { margin-bottom: 64px; }
}

/* ── the index (Ben 2026-10-21) ──────────────────────────────────────────
   "we need a real index ... so we can tap and scroll if somebody wants to
   see an overview, and then tap and get to the section." Built from the
   headings, so every row is a real jump link. Scrollable on a phone rather
   than eighteen full-width rows before the first word of the post. */
.u-index {
  margin: 28px 0 36px; padding: 18px 18px 8px;
  border: 1px solid var(--u-line, rgba(0,0,0,.08)); border-radius: 18px;
  background: var(--u-s2, rgba(0,0,0,.02));
}
.u-index-h {
  margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--t3);
}
.u-index-list { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.u-index-list li { margin: 0; padding: 0; border-top: 1px solid var(--u-line, rgba(0,0,0,.06)); }
.u-index-list li:first-child { border-top: 0; }
.u-index-list a {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 11px 2px; text-decoration: none; color: inherit;
}
.u-index-list a:hover .u-index-t { text-decoration: underline; }
.u-index-e { flex: none; font-size: 17px; line-height: 1; }
/* A SECTION TITLE IS NEVER CUT: it wraps, the badge beside it never shrinks. */
.u-index-t { flex: 1 1 auto; min-width: 0; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.u-index-b {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 9999px;
  background: var(--u-accent-weak, rgba(110,86,207,.12)); color: var(--u-accent, #6e56cf);
}
.u-index-list a::after {
  content: "›"; flex: none; color: var(--t3); font-size: 18px; line-height: 1;
}

/* A PHONE SCREENSHOT IS READ, NOT ADMIRED (Ben 2026-10-21: "80% of our users
   are mobile and this looks extremely bad ... the screenshots are almost not
   readable"). Portrait shots run full width on a phone, where that is the
   whole point, and are capped on a desktop so they do not become a tower. */
.u-fig--phoneshot { max-width: 420px; margin-left: auto; margin-right: auto; }

@media (min-width: 1200px) { .u-index { display: none; } }
/* Eighteen rows is 1,180px before the first word of the article, so the index
   scrolls inside itself on a phone instead of pushing the post down. */
@media (max-width: 1199px) {
  .u-index-list { max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}