/* 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:not(.u-inapp) { --bg: #ffffff; --s2: #ffffff; --s3: #f6f6f9; --s4: #eef0f5; }
html.light:not(.u-inapp) 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 32px; text-align: center; }
/* The index is one list with rows on hairlines (Anatolii 2026-11-04: "not such
   big cards"): a 200px picture beside the text, two lines of excerpt, and the
   whole row is the link, so no "Read update" line. A post without a picture
   is a text row. */
.u-list { display: flex; flex-direction: column; max-width: 880px; margin-inline: auto; }

.u-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 24px 0;
  border: 0;
  border-radius: 0;
  background: none;
  text-decoration: none;
  color: inherit;
}
.u-item + .u-item { border-top: 1px solid var(--border); }
.u-item:has(.u-itemmedia) { grid-template-columns: 200px minmax(0, 1fr); }
.u-itemmedia { display: block; overflow: hidden; border-radius: 12px; 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: 8px; align-content: start; padding: 0; }
.u-itemtitle { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--t1); }
.u-itemexcerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--t2); font-size: 15px; line-height: 1.55; }
.u-itemmore { display: none; }
.u-item:hover .u-itemtitle { color: var(--v-text); }
.u-item:focus-visible { outline: 2px solid var(--v); outline-offset: 4px; border-radius: 12px; }
/* Phone: the picture shrinks to a thumbnail on the right, text first. */
@media (max-width: 560px) {
  .u-item { gap: 16px; padding: 20px 0; }
  .u-item:has(.u-itemmedia) { grid-template-columns: minmax(0, 1fr) 104px; }
  .u-itemmedia { order: 2; border-radius: 10px; }
  .u-itemtitle { font-size: 17px; }
}

/* ---------------------------------------------------------------- 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: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
/* Category and status read as words in the overline, not as pills (Anatolii 2026-11-04). */
.u-meta .chip { height: auto; padding: 0; border: 0; border-radius: 0; background: none; color: var(--t3); font-size: inherit; font-weight: 600; letter-spacing: inherit; }
.u-meta .chip--v { color: var(--v-text); }
.u-dot { color: var(--t4); }

.u-h1 { font-size: 44px; line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; color: var(--t1); margin: 16px 0 16px; }
.u-excerpt { font-size: 19px; line-height: 1.55; color: var(--t2); margin: 0 0 32px; 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; }
/* ++text++ in a block: a figure in green (the refund amount). Day mode gets the deep green, night the mint. */
.u-up { color: var(--mint); font-weight: 700; }
html.light .u-up { color: #17904f; }
.u-lead { font-size: 20px; line-height: 1.6; color: var(--t1); letter-spacing: -0.01em; font-weight: 500; }
/* Only the bottom margin goes: a 0 top margin here used to beat .u-body > * + *,
   so a paragraph after a list or a table had no space above it. */
.u-p { margin-bottom: 0; }
.u-body > :first-child { margin-top: 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: 30px; line-height: 1.2; font-weight: 600; color: var(--t1); margin-top: 56px; letter-spacing: -0.02em; }
.u-h3 { font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--t1); margin-top: 32px; letter-spacing: -0.01em; }
.u-emoji { font-size: 0.8em; line-height: 1; margin-right: 0.35em; }
/* The paragraph right under a heading belongs to it: closer than the gap between blocks. */
.u-body > .u-h2 + *, .u-body > .u-h3 + * { margin-top: 12px; }
.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: block; max-width: 34em; font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: 0; color: rgba(255, 255, 255, 0.86); }
@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: 8px; margin: 20px 0; }
.u-chain {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px 0 6px; border-radius: 9999px; background: var(--s3); border: 1px solid var(--border);
  font-size: 14px; font-weight: 500; line-height: 1; color: var(--t1); white-space: nowrap;
}
.u-chain img { width: 24px; height: 24px; border-radius: 50%; display: block; }
.u-tag { padding: 0 14px; }

.u-ul, .u-ol { margin-inline: 0; margin-bottom: 0; padding-left: 22px; display: grid; gap: 8px; }
.u-ul li, .u-ol li { padding-left: 4px; }
.u-ul li::marker { color: var(--t3); }
.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: 48px;
  padding: 0 24px;
  border-radius: 14px;
  background: var(--v);
  color: var(--on-v);
  font-size: 16px;
  font-weight: 590;
  text-decoration: none;
  transition: background-color .15s ease, transform .15s ease;
}
.u-body .u-cta a:hover { background: var(--vl); }
.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: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; }
.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; border-left: 1px solid var(--border); }
.u-toc a {
  position: relative; display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 0 8px 16px; color: var(--t3); text-decoration: none; line-height: 1.4;
  transition: color .15s ease;
}
.u-toc a:hover { color: var(--t1); }
.u-toc a.is-active { color: var(--t1); font-weight: 500; }
.u-toc a.is-active::before { content: ''; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--v); }
.u-toc-emoji { flex: 0 0 auto; width: 16px; font-size: 13px; line-height: 19.6px; text-align: center; }
.u-toc-title { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t3); padding: 0 0 12px; }
@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: 15px; }
  .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; }
}
.u-ended{display:flex;align-items:center;gap:10px;margin:0 0 18px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--s2);color:var(--t2);font-size:14px}

/* ------------------------------------------------- cover art presets */
/* hero.art (build.mjs COVER_ART, Anatolii 2026-11-03): the PnL share-card
   look. Brand artwork like the drawn cover above, so the surface and the glow
   are fixed values, the same in day and night: #0b0a12 is the share card's
   own surface, the four glows are its four blurred circles (template.svg). */
.u-cover--art { min-height: 320px; align-items: center; background: #0b0a12; }
.u-cover--art::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 78% at 8% 0%, rgba(124, 92, 255, 0.5), transparent 72%),
    radial-gradient(40% 70% at 20% 84%, rgba(91, 47, 230, 0.34), transparent 72%),
    radial-gradient(28% 48% at 34% 18%, rgba(179, 161, 255, 0.18), transparent 72%),
    radial-gradient(32% 56% at 98% 104%, rgba(63, 31, 176, 0.28), transparent 72%);
}
.u-cover-visual {
  position: absolute;
  top: 50%;
  right: 3%;
  width: auto;
  height: 104%;
  max-width: 52%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transform: translateY(-50%);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 98%);
          mask-image: linear-gradient(to bottom, #000 72%, transparent 98%);
}
.u-cover--art .u-cover-in { max-width: 58%; }
.u-cover--art .u-cover-title { font-size: 34px; line-height: 1.12; }
/* Phone: the object on top, the text under it; only the faded foot of the
   object runs behind the title. 560, not the blog's 720: the web app's
   article column is 720 at most and keeps the side-by-side cover. */
@media (max-width: 560px) {
  .u-cover--art { flex-direction: column; align-items: stretch; min-height: 0; }
  .u-cover-visual { position: relative; top: auto; right: auto; align-self: flex-end; width: 64%; height: auto; max-width: none; margin: 0 2% -16% 0; transform: none; }
  .u-cover--art .u-cover-in { max-width: 100%; }
  .u-cover--art .u-cover-title { font-size: 28px; }
}

/* ------------------------------------------------- in the apps (embed) */
/* The embed edition is read inside the web app (iframe) and the mobile app
   (WebView), next to 14px interface text. At the blog's reading scale (52px
   title, 17px body, 34px sections) the article looked like another site in
   a frame (Anatolii 2026-11-03), so the embed reads at the app's scale. The
   site keeps the blog scale: every rule here is under .u-embed. */
.u-embed .u-meta { gap: 8px; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t3); }
.u-embed .u-meta .chip { height: auto; padding: 0; border-radius: 0; background: none; color: var(--v-text); font-size: inherit; font-weight: inherit; letter-spacing: inherit; }
.u-embed .u-h1 { font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; margin: 12px 0 8px; }
.u-embed .u-excerpt { font-size: 15px; line-height: 1.6; letter-spacing: 0; margin: 0 0 24px; }
.u-embed .u-hero { margin-bottom: 24px; }

/* The drawn cover keeps more height than a preset: its moon and rocket are
   cropped from a square scene, and a flatter box cuts them off. */
.u-embed .u-cover { min-height: 300px; margin: 12px 0 24px; border-radius: 24px; }
.u-embed .u-cover--art { min-height: 280px; }
.u-embed .u-cover-in { gap: 8px; padding: 24px 28px; max-width: 520px; }
.u-embed .u-cover--art .u-cover-in { max-width: 56%; }
.u-embed .u-cover-logo { width: 120px; margin-bottom: 12px; }
.u-embed .u-cover-kicker { font-size: 11px; letter-spacing: 0.14em; }
.u-embed .u-cover-title { font-size: 28px; line-height: 1.15; }
.u-embed .u-cover-sub { font-size: 14px; }

.u-embed .u-body { font-size: 15px; line-height: 1.6; letter-spacing: 0; }
.u-embed .u-body > * + * { margin-top: 16px; }
.u-embed .u-body > .u-p + .u-p { margin-top: 16px; }
.u-embed .u-lead { font-size: 16px; line-height: 1.6; letter-spacing: 0; }
.u-embed .u-h2 { font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; margin-top: 40px; }
.u-embed .u-h3 { font-size: 16px; line-height: 1.4; font-weight: 600; letter-spacing: 0; margin-top: 24px; }
.u-embed .u-badge { padding: 2px 8px; font-size: 11px; top: -2px; }
.u-embed .u-ul, .u-embed .u-ol { gap: 8px; }

.u-embed .u-chains { gap: 8px; margin: 16px 0; }
.u-embed .u-chain { height: 32px; gap: 8px; padding: 0 12px 0 4px; font-size: 13px; font-weight: 500; }
.u-embed .u-chain img { width: 24px; height: 24px; }
.u-embed .u-tag { padding: 0 12px; }

.u-embed .u-cards { gap: 12px; margin: 16px 0; }
.u-embed .u-card { gap: 12px; padding: 16px; border-radius: 16px; font-size: 14px; }
.u-embed .u-card b { font-size: 15px; letter-spacing: 0; }
.u-embed .u-card-emoji { font-size: 20px; }
.u-embed .u-feats { gap: 12px; margin: 16px 0; }
.u-embed .u-feat { grid-template-columns: 160px 1fr; gap: 20px; padding: 20px; border-radius: 16px; }
.u-embed .u-feat-media .u-phone { flex-basis: 160px; max-width: 160px; }
.u-embed .u-feat-emoji { font-size: 20px; }
.u-embed .u-feat-body b { font-size: 16px; letter-spacing: 0; }
.u-embed .u-feat-body p { font-size: 14px; }
.u-embed .u-stats { gap: 8px; margin: 16px 0; }
.u-embed .u-stat { padding: 16px; }
.u-embed .u-stat b { font-size: 24px; }
.u-embed .u-stat small { font-size: 12px; }
.u-embed .u-banner { margin: 24px 0; padding: 24px; }
.u-embed .u-banner strong { font-size: 20px; }
.u-embed .u-banner-text { font-size: 14px; }
.u-embed .u-fig, .u-embed .u-screens { margin: 24px 0; }
.u-embed .u-screenrow { gap: 20px; padding: 24px 16px; }
.u-embed .u-phone { flex-basis: 220px; max-width: 220px; }
.u-embed .u-quote p { font-size: 16px; }
.u-embed .u-table { font-size: 13px; }
.u-embed .u-hr { margin: 32px 0; }
.u-embed .u-cta { margin: 32px 0 8px; }
.u-embed .u-body .u-cta a { height: 44px; padding: 0 20px; border-radius: 10px; background: var(--v); background-image: none; box-shadow: none; font-size: 14px; }
.u-embed .u-body .u-cta a:hover { background: var(--vl); filter: none; transform: none; }
.u-embed .u-refs { margin-top: 32px; }
.u-embed .u-byline { margin-top: 32px; font-size: 13px; }

@media (max-width: 560px) {
  .u-embed .u-h1, .u-embed .u-cover-title { font-size: 24px; }
  .u-embed .u-cover--art { min-height: 0; }
  .u-embed .u-cover--art .u-cover-in { max-width: 100%; padding-top: 0; }
  .u-embed .u-body { font-size: 16px; }
  .u-embed .u-lead { font-size: 17px; }
  .u-embed .u-h2 { font-size: 19px; margin-top: 32px; margin-bottom: 0; }
  .u-embed .u-card, .u-embed .u-feat-body p { font-size: 15px; }
  .u-embed .u-feat { grid-template-columns: 1fr; }
}

/* Web app (embed/?frame=app): the frame sits in the page's own 720 column,
   which already has its gutters, and it takes the article's height. So no
   side padding, the app's own light surface (not the blog's white page),
   and no top or bottom space of its own. */
.u-inapp .u-embed-main { max-width: none; padding: 0; }
/* ...and no background of its own. The app's content area is not --bg
   (#13121e in dark, #f5f6fa in light, measured on prod 2026-11-03), so a
   painted page read as a darker slab behind the article. A transparent frame
   only stays transparent while the frame and its document share one
   color-scheme (otherwise the browser paints an opaque backdrop), and the
   kit sets none in dark, so it is stated here for both themes. */
html.u-inapp { color-scheme: dark; }
html.u-inapp.light { color-scheme: light; }
html.u-inapp, html.u-inapp body { background: transparent; }
/* That column is 720 or a little less, so the blog's <=720 phone rules fire
   in it. The one that breaks there is the edge-to-edge screenshot row: its
   negative margins reach past the frame and get clipped. */
.u-inapp .u-screens { margin-inline: 0; }
.u-inapp .u-screenrow { border: 1px solid var(--border); border-radius: 24px; }