/* site.css — the homepage design language, applied to every other page.
 *
 * The inner pages already carry good semantic markup: .hero, .sec, .wrap,
 * .kicker, .secsub, .connect-card, .faq-item, .lp-related, .cta-panel. Rather
 * than rebuild thirty pages of markup, this file re-teaches those class names
 * the homepage's rhythm — its type scale, its stone/white alternation, its
 * card and badge shapes, its mono figures.
 *
 * Every value here is taken from the homepage's own inline styles, so the two
 * halves of the site agree rather than merely resemble each other. Loads after
 * theme.css, which supplies the tokens.
 */

/* ---------- page frame ---------- */

html { overflow-x: clip; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); }

/* The same container the homepage uses, everywhere. A narrower reading
   measure is held on the prose itself rather than by shrinking the container,
   so the left and right margins agree on every page in the site. */
.wrap { width: min(var(--maxw), 100% - var(--gutter)); margin: 0 auto; }

/* ---------- section rhythm ----------
   Sections alternate stone and white against a hairline, the way the homepage
   does. Explicit .sec-stone / .sec-white win over the alternation so a page
   can pin a section's ground when the order matters. */

.sec { padding: 100px 0; background: var(--surface); border-top: 1px solid var(--line); }
.sec:nth-of-type(even) { background: var(--bg); }
.sec.sec-stone { background: var(--bg); }
.sec.sec-white { background: var(--surface); }
.sec.pt8 { padding-top: 100px; }
.sec.pb0 { padding-bottom: 100px; }

/* The green band. The homepage uses it once, as the pivot between halves of
   the page — one per page here too, never two. */
.sec.sec-band {
  background: var(--green-900);
  color: #fff;
  border-top: 0;
}
.sec-band .kicker { color: #7FCDAE; }
.sec-band h2, .sec-band h3, .sec-band b { color: #fff; }
.sec-band p, .sec-band .secsub, .sec-band li { color: #C9DCD4; }
.sec-band a:not(.btn) { color: #fff; }

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

h1, h2, h3, h4 { font-family: var(--font); letter-spacing: -.035em; font-weight: 700; text-wrap: balance; }

.hero h1, h1 {
  margin: 0 0 22px;
  font-size: clamp(38px, 6.2vw, 74px);
  line-height: 1.02;
  letter-spacing: -.042em;
}
h2 {
  margin: 0 0 18px;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.04;
  letter-spacing: -.035em;
}
h3 { margin: 0 0 8px; font-size: 19px; line-height: 1.3; letter-spacing: -.025em; }

/* A heading takes the width it needs. The measure is held on the prose under
   it, not by squeezing the headline onto extra lines. */
.hero h1, .sec > .wrap > h1, .sec > .wrap > h2 { max-width: 24ch; }

/* Nothing lands under the sticky header when an anchor is followed, and no
   heading is left stranded at the foot of a printed page. */
:is(h1, h2, h3, section, .dgm, details) { scroll-margin-top: 92px; }
:is(h1, h2, h3) { break-after: avoid-page; page-break-after: avoid; }
.dgm, .faq-item, details, .plate { break-inside: avoid; }
h4 { margin: 0 0 6px; font-size: 15px; letter-spacing: -.02em; }

/* The old theme ran an indigo-to-violet gradient through part of every
   headline. The new one carries emphasis in weight and colour, not fill. */
.grad-words { color: var(--green-700); background: none; -webkit-text-fill-color: currentColor; }

.kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-700);
  margin-bottom: 20px;
}

.secsub, .lp-prose {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-3);
  max-width: 760px;
}
.lp-prose { max-width: 820px; }
.lp-prose a { color: var(--green-700); font-weight: 500; }
.lp-prose a:hover { color: var(--ink); }

.fine, .lp-hero-fine { font-size: 13px; color: var(--ink-5); }
.lp-hero-fine { margin-top: 20px; }

/* ---------- hero ---------- */

.hero { background: var(--bg); padding: 84px 0 76px; border-bottom: 1px solid var(--line); }

.page-hero .secsub { font-size: 18px; line-height: 1.7; max-width: 720px; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-6); }
.crumbs a { color: var(--ink-5); }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { color: #C4C8CC; }

.lp-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green-900); color: #fff;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  padding: 13px 22px; border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { background: var(--green-500); color: #fff; }
.btn.sm { font-size: 14px; padding: 10px 17px; }
.btn.ghost {
  background: var(--surface); color: var(--ink);
  border-color: var(--line-4);
}
.btn.ghost:hover { background: var(--surface); border-color: var(--green-900); color: var(--ink); }
.btn.dark { background: var(--green-900); color: #fff; }
.btn.dark:hover { background: var(--green-500); }
.sec-band .btn { background: #fff; color: var(--green-900); }
.sec-band .btn:hover { background: var(--green-100); color: var(--green-900); }
.btn .ms { font-size: 18px; }

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

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(245, 245, 244, .9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header-in {
  width: min(var(--maxw), 100% - var(--gutter)); margin: 0 auto;
  height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.logo { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.logo:hover { color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 500; }
.nav-links a { color: var(--ink-4); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.head-right { display: flex; align-items: center; gap: 16px; }
.head-signin { font-size: 14px; font-weight: 500; color: var(--ink-4); }
.head-signin:hover { color: var(--ink); }

/* ---------- cards ---------- */

.connect-grid, .lp-related, .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(266px, 1fr));
  gap: 16px;
  margin-top: 36px;
}
.connect-card, .card {
  background: var(--surface);
  border: 1px solid var(--line-4);
  border-radius: 18px;
  padding: 24px;
}
.sec:nth-of-type(even) .connect-card,
.sec:nth-of-type(even) .card,
.sec.sec-stone .connect-card,
.sec.sec-stone .card { background: var(--surface); }
.connect-card b, .connect-card h3 { display: block; font-size: 19px; letter-spacing: -.025em; margin-bottom: 8px; }
.connect-card p, .connect-card span:not(.ms) { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-4); }

/* The old cards coloured each icon tile individually with inline styles. The
   new language uses one green tile, so those inline colours are overridden
   rather than edited out of thirty pages. */
/* Icon and heading share a row: on a short card, stacking them reads as three
   separate things rather than one. The tile floats the icon left and the
   heading is pulled up beside it. */
.connect-card, .card, .pillar { display: flex; flex-direction: column; }
.connect-ic, .pillar-ic {
  width: 38px; height: 38px; border-radius: var(--radius);
  display: grid; place-items: center;
  margin: 0 11px 0 0;
  background: var(--green-100) !important; color: var(--green-700) !important;
  flex: 0 0 auto;
}
.connect-ic .ms, .pillar-ic .ms { font-size: 20px; }

/* the row itself */
.connect-card > .connect-ic, .card > .connect-ic, .pillar > .pillar-ic { order: -2; }
.connect-card > h3, .connect-card > b,
.card > h3, .card > b,
.pillar > h3, .pillar > b { order: -1; }
.connect-card, .card, .pillar {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 11px;
  row-gap: 0;
}
.connect-card > .connect-ic, .card > .connect-ic, .pillar > .pillar-ic {
  grid-column: 1; grid-row: 1; margin: 0;
}
.connect-card > h3, .connect-card > b, .card > h3, .card > b, .pillar > h3, .pillar > b {
  grid-column: 2; grid-row: 1; margin: 0;
}
.connect-card > p, .connect-card > span:not(.ms),
.card > p, .pillar > p {
  grid-column: 1 / -1; grid-row: 2; margin-top: 14px;
}

.lp-related { margin-top: 36px; }
.lp-related a {
  display: block;
  background: var(--surface); border: 1px solid var(--line-4);
  border-radius: 18px; padding: 22px 24px;
  transition: border-color .2s ease;
}
.lp-related a:hover { border-color: var(--green-900); }
.lp-related b { display: block; font-size: 17px; letter-spacing: -.025em; color: var(--ink); margin-bottom: 6px; }
.lp-related span { display: block; font-size: 14px; line-height: 1.6; color: var(--ink-4); }

/* ---------- check lists ---------- */

.lp-checks { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 12px; max-width: 900px; }
.lp-checks li {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--radius-md); padding: 15px 17px;
  font-size: 15px; line-height: 1.65; color: var(--ink-3);
}
.lp-checks li b { color: var(--ink); font-weight: 600; }
.lp-checks .ms { flex: 0 0 auto; font-size: 19px; color: var(--green-500); margin-top: 1px; }

/* ---------- figures ---------- */

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-top: 36px; }
.stat {
  background: var(--surface); border: 1px solid var(--line-4);
  border-radius: 18px; padding: 22px 24px;
}
.stat .val, .val {
  display: block; font-family: var(--mono);
  font-size: 34px; font-weight: 600; letter-spacing: -.04em; color: var(--ink);
}
.stat .lab { display: block; margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--ink-5); }
.mono { font-family: var(--mono); }

/* ---------- pills and badges ---------- */

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--line-4);
  border-radius: var(--radius-pill); padding: 7px 14px;
  font-size: 13px; font-weight: 600; color: var(--green-700);
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-500); }
.tag {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  border-radius: 6px; padding: 3px 8px;
  background: var(--green-100); color: var(--green-700);
}
.tag.beta { background: var(--amber-100); color: var(--amber-700); }
.tag.soon { background: var(--surface-4); color: var(--ink-4); }

/* ---------- comparison tables ---------- */

.yes { color: var(--green-500); }
.no { color: var(--ink-6); }
.feat { font-size: 14.5px; line-height: 1.6; color: var(--ink-3); }
.soonval { color: var(--ink-6); font-size: 13px; }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line-2); font-size: 14.5px; }
th { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-5); }

/* ---------- FAQ ---------- */

.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 56px; align-items: start; margin-top: 36px; }
.faq-list { display: grid; gap: 12px; }
/* Questions are <details> so they open and close, exactly as on the homepage;
   theme.css carries the summary reset and the rotating .plus. */
.faq-list details { list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary { cursor: pointer; }

/* The aside is a column the line sticks inside, so the text travels with the
   scroll for the length of its own section and stops at the end of it. */
.faq-aside { flex: 0 0 auto; align-self: stretch; }
.faq-aside-vh {
  position: sticky; top: 96px;
  display: flex; align-items: center; justify-content: center;
  min-height: 56vh;
}
.vh-line {
  writing-mode: vertical-rl;
  margin: 0;
  font-size: clamp(31px, 2.9vw, 44px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.04;
  white-space: nowrap;
  color: var(--green-900);
  /* holds its box while the text is still being typed, so the column does not
     reflow character by character */
  min-height: 240px;
}
.vh-text { color: var(--green-900); }
/* Sized logically: in vertical-rl the inline axis runs down the column, so
   inline-size is the caret's thickness and block-size is how far it reaches
   across the text. Physical width/height put it at ninety degrees to the line
   and off to one side. */
.vh-caret {
  display: inline-block;
  inline-size: 4px;
  block-size: .5em;
  border-radius: 2px;
  /* vertical-align resolves against the line box, which is wider than the
     glyphs, so it leaves the caret off the column's centre. The nudge is in em
     so it holds at every step of the clamp. */
  vertical-align: middle;
  transform: translateX(-0.23em);
  background: var(--green-500);
  animation: vh-blink 1.05s steps(1, end) infinite;
}
@keyframes vh-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
html.no-anim .vh-caret { display: none; }

/* ---------- closing panel ---------- */

.cta-panel {
  background: var(--green-900); color: #fff;
  border-radius: 24px; padding: 64px 56px; text-align: center;
}
.cta-panel h2 { margin: 0 0 14px; color: #fff; font-size: clamp(28px, 3.4vw, 44px); }
.cta-panel p { margin: 0 auto 28px; max-width: 620px; font-size: 16px; line-height: 1.75; color: #C9DCD4; }
.cta-panel .btn { background: #fff; color: var(--green-900); }
.cta-panel .btn:hover { background: var(--green-100); color: var(--green-900); }
.cta-panel .fine { margin-top: 18px; color: #9FBFB3; }

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

.foot { background: var(--surface); border-top: 1px solid var(--line); }
.foot-in { width: min(var(--maxw), 100% - var(--gutter)); margin: 0 auto; padding: 60px 0 36px; }
.foot-dir { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 36px; }
.foot-brand p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--ink-4); max-width: 280px; }
.foot-logo { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); margin-bottom: 14px; }
.foot-col { display: grid; gap: 9px; align-content: start; }
.foot-col b { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: 3px; }
.foot-col a { font-size: 13.5px; color: var(--ink-4); }
.foot-col a:hover { color: var(--ink); }
.foot-bottom {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line-2);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  font-size: 12.5px; color: var(--ink-5);
}

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

.sr-only, .skip {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; top: 12px; left: 12px; width: auto; height: auto;
  clip: auto; margin: 0; padding: 10px 16px; z-index: 100;
  background: var(--green-900); color: #fff; border-radius: var(--radius);
}
.g2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 36px; }
.lang-switch { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.lang-opt { color: var(--ink-6); }
.lang-opt.is-active { color: var(--green-900); }
.lang-sep { color: #C4C8CC; }

/* ---------- responsive ----------
   Matches theme.css's breakpoints so the two halves of the site step down at
   the same widths. */

@media (max-width: 1100px) {
  :root { --gutter: 56px; }
  .faq-layout { grid-template-columns: 1fr; gap: 32px; }
  .faq-aside { display: none; }
}
@media (max-width: 860px) {
  :root { --gutter: 40px; }
  .sec, .sec.pt8, .sec.pb0 { padding: 72px 0; }
  .hero { padding: 56px 0 52px; }
  .nav-links { display: none; }
  .cta-panel { padding: 44px 26px; border-radius: 20px; }
}
@media (max-width: 620px) {
  /* Bare minimum at the edges — the content is worth more than the margin. */
  :root { --gutter: 20px; }
  .sec, .sec.pt8, .sec.pb0 { padding: 52px 0; }
  .connect-grid, .lp-related, .card-grid, .stat-grid { grid-template-columns: 1fr; gap: 10px; }
  .lp-hero-cta { flex-direction: column; align-items: stretch; }
  .lp-hero-cta .btn { justify-content: center; }
  .head-signin { display: none; }
  .foot-dir { grid-template-columns: 1fr 1fr; gap: 28px; }

  /* Inner padding sized for a phone rather than for a desktop card. */
  .connect-card, .card, .pillar, .bf { padding: 18px 16px; border-radius: 14px; }
  .lp-related a { padding: 16px 16px; border-radius: 14px; }
  .lp-checks li { padding: 13px 14px; }
  .faq-list details { padding: 16px 16px !important; border-radius: 14px !important; }
  .stat { padding: 16px 16px; }
  .cta-panel { padding: 32px 18px; border-radius: 18px; }
  .tier { padding: 20px 16px 18px; }
  .addon { padding: 18px 16px; }
}

/* ---------- page-specific primitives ----------
   These lived in the retired per-page stylesheets. Carried over in
   the new language rather than left behind, so no page loses a component.
*/

/* The typewriter line keeps its colour from the block above; the old rule
   here painted it white for a dark card that no longer exists. */

/* Comparison tables (compare/, alternatives/) */
.lp-cmp-scroll { overflow-x: auto; margin-top: 36px; border: 1px solid var(--line-4); border-radius: 18px; background: var(--surface); }
.lp-cmp { width: 100%; min-width: 640px; border-collapse: collapse; }
.lp-cmp th, .lp-cmp td { padding: 15px 18px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.lp-cmp thead th { background: var(--surface-2); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-5); }
.lp-cmp tbody tr:last-child td { border-bottom: 0; }
.lp-cmp tbody th { font-weight: 600; color: var(--ink); text-align: left; }
.lp-cmp .ms { font-size: 19px; vertical-align: -3px; }

/* "Best for" pair */
.lp-bestfor { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 36px; }
.bf { background: var(--surface); border: 1px solid var(--line-4); border-radius: 18px; padding: 24px; }
.bf.is-cobalt { border-color: var(--green-900); background: var(--surface); }
.bf.is-cobalt b { color: var(--green-700); }
.bf b { display: block; font-size: 17px; letter-spacing: -.02em; margin-bottom: 10px; }
.bf ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.bf li { font-size: 14.5px; line-height: 1.6; color: var(--ink-3); }

/* Pillar cards */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(266px, 1fr)); gap: 16px; margin-top: 36px; }
.pillar { background: var(--surface); border: 1px solid var(--line-4); border-radius: 18px; padding: 24px; }
.pillar h3 { font-size: 19px; }
.pillar p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-4); }
.pillar-ic {
  width: 38px; height: 38px; border-radius: var(--radius); display: grid; place-items: center;
  margin-bottom: 16px; background: var(--green-100) !important; color: var(--green-700) !important;
}
.pillar-ic .ms { font-size: 20px; }

/* Beta markers */
.beta-tag {
  display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  border-radius: 6px; padding: 3px 8px; background: var(--amber-100); color: var(--amber-700);
  vertical-align: 3px; margin-left: 8px;
}
.acct-beta-note {
  margin-top: 24px; background: var(--amber-100); border: 1px solid #EDDFC4;
  border-radius: var(--radius-md); padding: 15px 17px; font-size: 14px; line-height: 1.65; color: var(--amber-700);
}

@media (max-width: 620px) {
  .lp-bestfor, .pillars { grid-template-columns: 1fr; }
}

/* ---------- pricing ---------- */

.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(292px, 1fr)); gap: 16px; margin-top: 40px; align-items: start; }
.tier {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-4);
  border-radius: 18px; padding: 26px 24px 24px;
}
.tier.hot { border-color: var(--green-900); box-shadow: 0 0 0 1px var(--green-900); }
.tier.soon { background: var(--surface-2); }
.tier-tag {
  position: absolute; top: -10px; left: 24px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  border-radius: 6px; padding: 4px 9px;
  background: var(--green-900); color: #fff;
}
.tier-tag.alt { background: var(--amber-500); color: #3D2A05; }
.tier-tag.wait { background: var(--surface-4); color: var(--ink-4); }
.tier-ic {
  width: 38px; height: 38px; border-radius: var(--radius);
  background: var(--green-100); color: var(--green-700);
  display: grid; place-items: center; margin-bottom: 16px;
}
.tier-ic .ms { font-size: 20px; }
.tier .n { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.025em; }
.tier .d { display: block; margin: 4px 0 18px; font-size: 13.5px; line-height: 1.55; color: var(--ink-5); min-height: 42px; }
.tier .p { display: flex; align-items: baseline; gap: 6px; margin-bottom: 20px; }
.tier .from { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-6); align-self: center; }
.tier .amt { font-family: var(--mono); font-size: 36px; font-weight: 600; letter-spacing: -.045em; color: var(--ink); }
.tier .per { font-size: 14px; color: var(--ink-5); }
.tier ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; }
.tier li { display: flex; gap: 9px; font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }
.tier li .ms { flex: 0 0 auto; font-size: 16px; color: var(--green-500); margin-top: 1px; }
.tier .tier-cta { margin-top: auto; justify-content: center; }
.tier .tier-fine { margin-top: 14px; font-size: 12px; line-height: 1.6; color: var(--ink-6); }
.price-note { margin-top: 28px; font-size: 14px; color: var(--ink-4); }

.addon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(266px, 1fr)); gap: 16px; margin-top: 36px; }
.addon { background: var(--surface); border: 1px solid var(--line-4); border-radius: 18px; padding: 24px; }
.addon .ms { font-size: 22px; color: var(--green-700); }
.addon b { display: block; margin: 14px 0 8px; font-size: 17px; letter-spacing: -.02em; }
.addon p { margin: 0 0 14px; font-size: 14px; line-height: 1.65; color: var(--ink-4); }
.addon a { font-size: 13.5px; font-weight: 600; }

.assure { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-top: 36px; }
.assure div { display: flex; gap: 11px; align-items: flex-start; }
.assure .ms { flex: 0 0 auto; font-size: 20px; color: var(--green-700); }
.assure b { display: block; font-size: 14px; letter-spacing: -.01em; margin-bottom: 3px; }
.assure span { display: block; font-size: 13px; line-height: 1.55; color: var(--ink-5); }

@media (max-width: 620px) {
  .price-grid, .addon-grid, .assure { grid-template-columns: 1fr; }
  .tier .d { min-height: 0; }
}

/* ---------- plan comparison table ----------
   Six columns and a hundred and seventy rows, so the header and the feature
   column both stick: without them you lose track of which plan a tick belongs
   to about four rows in.
*/

.cmp-layout { display: flex; align-items: flex-start; gap: 56px; margin-top: 44px; }
.cmp-scroll {
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border: 1px solid var(--line-4);
  border-radius: 18px;
}
.cmp-aside { flex: 0 0 200px; align-self: stretch; }
.cmp-aside-vh { position: sticky; top: 96px; display: flex; align-items: center; justify-content: center; min-height: 60vh; }

.cmp { width: 100%; min-width: 1020px; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.cmp th, .cmp td { padding: 12px 14px; text-align: center; vertical-align: middle; }

/* header: sticks to the top of the scroller and to the page */
.cmp thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  vertical-align: bottom;
  padding: 18px 14px 16px;
}

.cmp .plan-name {
  display: block; font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: var(--ink);
}
/* The badges live above the table, not inside its header — a header cell that
   carries a pill, a name and a price is three things fighting for one line. */
.cmp-badges {
  display: grid; grid-template-columns: 280px repeat(6, 1fr);
  min-width: 1020px; align-items: end; padding: 0 0 10px;
}
.cmp-badges > span { display: flex; justify-content: center; }
.plan-pop {
  display: inline-block;
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em;
  border-radius: 999px; padding: 4px 10px;
  background: var(--green-900); color: #fff; white-space: nowrap;
}
.plan-pop.alt { background: var(--amber-500); color: #3D2A05; }
.plan-pop.wait { background: var(--surface-4); color: var(--ink-4); }

/* the feature column sticks to the left edge of the scroller */
.cmp .feat-h, .cmp .feat {
  position: sticky; left: 0; z-index: 1;
  text-align: left;
  background: var(--surface);
  border-right: 1px solid var(--line-2);
  min-width: 260px;
}
.cmp thead .feat-h { z-index: 3; background: var(--surface-2); }
.cmp .feat { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }

.cmp tbody tr:not(.grp) { border-bottom: 1px solid var(--line-3); }
.cmp tbody tr:not(.grp) td,
.cmp tbody tr:not(.grp) th { border-bottom: 1px solid var(--line-3); }
.cmp tbody tr:not(.grp):hover td,
.cmp tbody tr:not(.grp):hover th { background: var(--surface-3); }
.cmp tbody tr:not(.grp):hover .feat { background: var(--surface-3); }

.cmp .grp td,
.cmp .grp th {
  /* Not sticky: this cell spans every column, so pinning it left makes a
     full-table-width sticky box that drags the document sideways. Only the
     feature column pins. */
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green-700); background: var(--surface);
  padding: 30px 14px 10px;
  border-bottom: 1px solid var(--line-2);
}
.cmp .grp .beta {
  display: inline-block; margin-left: 9px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--amber-700); background: var(--amber-100);
  border-radius: 999px; padding: 2px 8px; vertical-align: 1px;
}

/* the most-popular column, marked the way the plan cards are */
.cmp thead th:nth-child(4), .cmp tbody tr:not(.grp) td:nth-child(4) { background: #FAFCFB; }
.cmp tbody tr:not(.grp):hover td:nth-child(4) { background: #F4FAF7; }

.cmp .yes { color: var(--green-500); font-size: 19px; line-height: 1; }
.cmp .no { color: #8E9499; font-weight: 700; }
.cmp .val { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink); }
.cmp .soonval {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--amber-700); background: var(--amber-100); border: 1px solid #EDDFC4;
  border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.cmp-note { margin-top: 20px; font-size: 13px; line-height: 1.65; color: var(--ink-5); }

@media (max-width: 1100px) {
  .cmp-layout { display: block; }
  .cmp-aside { display: none; }
}

/* the show-all-features control that sits between the two tbodies */
.cmp-expand-row td { padding: 0; border: 0 !important; background: var(--surface-2); }
.cmp-expand-btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: none; border: 0; border-top: 1px solid var(--line-2); cursor: pointer;
  padding: 16px; font-family: var(--font); font-size: 13.5px; font-weight: 600; color: var(--green-700);
}
.cmp-expand-btn:hover { color: var(--ink); }
.cmp-expand-icon { font-size: 18px; }
.cmp .cmp-note { font-weight: 500; color: var(--ink-5); font-size: 12.5px; }

/* ---------- diagrams ----------
   Inline SVG, drawn from the same tokens as everything else. Each one shows a
   mechanism rather than decorating a section, so it sits on the stone ground
   with a hairline and its own caption.
*/

.dgm {
  /* <figure> carries a UA default of margin: 1em 40px. On a phone that is
     eighty pixels of the screen gone before any content is drawn. */
  margin: 40px 0 0;
  background: var(--surface);
  border: 1px solid var(--line-4);
  border-radius: 18px;
  padding: 30px 30px 24px;
}
.dgm-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.dgm-head b { font-size: 15px; letter-spacing: -.02em; color: var(--ink); }
.dgm-head span { font-size: 13px; color: var(--ink-5); }
.dgm-body { overflow-x: auto; }
.dgm svg { display: block; width: 100%; height: auto; min-width: 620px; }
.dgm-note {
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line-2);
  font-size: 13px; line-height: 1.65; color: var(--ink-5);
}
.dgm-note b { color: var(--ink-2); font-weight: 600; }

.dgm-key { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.dgm-key span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-5); }
.dgm-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; font-style: normal; }

@media (max-width: 620px) {
  .dgm { padding: 18px 14px 14px; border-radius: 14px; }
  .dgm-head { margin-bottom: 16px; }
  .dgm-note { margin-top: 16px; padding-top: 13px; }
}

/* ---------- links inside running prose ----------
   The link green (#0D5B45) and the body ink (#54595F) sit 1.14:1 apart, so in a
   paragraph the only thing marking a link is a hue difference two readers in a
   hundred cannot see. WCAG asks for 3:1 or a second cue; an underline is the
   second cue, and only running prose needs it — a nav item, a card and a button
   are already obviously controls. */
.secsub a,
.lp-prose a,
.lp-checks li a,
.faq-list p a,
.dgm-note a,
.hero p a,
.page-hero p a,
.cmp-note a,
.card p a,
.connect-card p a,
.foot-brand p a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.secsub a:hover,
.lp-prose a:hover,
.lp-checks li a:hover,
.faq-list p a:hover,
.dgm-note a:hover,
.hero p a:hover,
.page-hero p a:hover,
.cmp-note a:hover,
.card p a:hover,
.connect-card p a:hover,
.foot-brand p a:hover { text-decoration-color: currentColor; }

/* A container that scrolls has to be reachable by keyboard, or its content is
   only available to a pointer. tabindex is set in the markup so the element is
   focusable; this gives that focus somewhere visible to land. */
.cmp-scroll:focus-visible,
.lp-cmp-scroll:focus-visible {
  outline: 3px solid var(--green-500);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Figures
   ───────────────────────────────────────────────────────────────────────────
   The diagrams used to be inline SVG on a fixed 1000-unit canvas: every label
   drawn at 10.5px, column headers rotated 52 degrees, nothing able to reflow.
   They shrank to unreadable on a phone and offered a screen reader one
   aria-label for the whole picture.

   These are HTML — real tables where the content is tabular, real headings,
   real text at real sizes. Three rules hold the typography together:

     · one scale. 10.5 / 11.5 / 12.5 / 13.5 / 15 / 17 / 20, nothing between.
     · the mono face is for identifiers and money only. A word set in JetBrains
       Mono beside a word set in Space Grotesk reads as a mistake.
     · every flex child that holds text carries min-width: 0, or a long label
       pushes its own row past the edge of the card instead of wrapping.
   ═══════════════════════════════════════════════════════════════════════════ */

.fig {
  margin: 44px 0 0;
  background: var(--surface);
  border: 1px solid var(--line-4);
  border-radius: 20px;
  padding: 32px;
  container-type: inline-size;
}
.fig * { min-width: 0; }

/* ---------- head ---------- */
.fig-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px 40px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.fig-head > div { flex: 1 1 330px; min-width: 0; }
.fig-head h3 {
  margin: 0 0 10px;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -.028em;
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
  max-width: 30ch;
}
.fig-head h3 em { font-style: normal; color: var(--green-700); }
.fig-head > div > p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ink-3);
  max-width: 64ch;
  text-wrap: pretty;
}

/* ---------- legend ---------- */
.fig-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  flex: 0 1 auto;
  padding: 14px 20px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--surface-3);
}
.fig-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--ink-3);
  white-space: nowrap;
}
.fig-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 2px solid var(--green-500);
  background: var(--green-500);
}
.fig-dot.support { background: transparent; }
.fig-dot.off { border-color: #DCDDD9; background: #DCDDD9; }

/* ---------- the chip strip: bordered cards, not a pill row ---------- */
.fig-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
  gap: 10px;
  flex: 1 1 700px;
}
.fig-chip {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 13px;
  background: var(--surface-3);
}
.fig-chip > span { min-width: 0; }
.fig-chip b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}
.fig-chip i {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-5);
}

/* ---------- icon tiles ---------- */
.fig-ic {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 11px;
  background: var(--a-green-bg);
  color: var(--a-green);
}
.fig-ic .ms,
.fig-ic > .ms {
  display: block;
  line-height: 1;
  font-size: 19px;
  /* The glyph box carries ascent and descent beyond the em square. Trimming to
     the cap box is what actually centres it; without this every icon on the
     site sits a few pixels low inside its tile. */
  text-box: trim-both cap alphabetic;
}
.fig-ic.sm { width: 30px; height: 30px; border-radius: 9px; }
.fig-ic.sm .ms { font-size: 16px; }
.fig-ic.violet { background: var(--a-violet-bg); color: var(--a-violet); }
.fig-ic.blue   { background: var(--a-blue-bg);   color: var(--a-blue); }
.fig-ic.amber  { background: var(--a-amber-bg);  color: var(--a-amber); }
.fig-ic.rose   { background: var(--a-rose-bg);   color: var(--a-rose); }
.fig-ic.teal   { background: var(--a-teal-bg);   color: var(--a-teal); }
.fig-ic.indigo { background: var(--a-indigo-bg); color: var(--a-indigo); }
.fig-ic.slate  { background: var(--a-slate-bg);  color: var(--a-slate); }
.fig-ic.plum   { background: var(--a-plum-bg);   color: var(--a-plum); }
.fig-ic.moss   { background: var(--a-moss-bg);   color: var(--a-moss); }
.fig-ic.clay   { background: var(--a-clay-bg);   color: var(--a-clay); }

/* ---------- scroll containers ---------- */
.fig-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.fig-scroll:focus-visible { outline: 3px solid var(--green-500); outline-offset: 3px; }

/* ═══ 1. the engine matrix ═══ */
.fig-matrix { width: 100%; min-width: 1454px; border-collapse: collapse; table-layout: fixed; }
/* 380 + 11x64 + 320. Sized so no question and no engine chain is ever
   ellipsised: the table scrolls inside .fig-scroll instead, which is the
   trade the reference design makes too. */
.fig-matrix col.c-q { width: 430px; }
.fig-matrix col.c-e { width: 64px; }
.fig-matrix col.c-l { width: 320px; }
.fig-matrix .grp-h th {
  padding: 0 0 12px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-5); text-align: left; border: 0;
}
.fig-matrix .grp-h .mid { text-align: center; color: var(--green-700); }
.fig-matrix .grp-h .end { text-align: left; padding-left: 20px; }
.fig-matrix thead .cols th {
  vertical-align: bottom;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--line-2);
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-5); text-align: left;
}
.fig-matrix .cols .eng { padding-inline: 2px; text-align: center; }
.fig-matrix .cols .eng .eng-label {
  display: block; margin-top: 9px; padding-inline: 1px;
  font-size: 10px; font-weight: 600; letter-spacing: 0; text-transform: none;
  line-height: 1.25; color: var(--ink-3);
}
.fig-matrix .cols .eng .fig-ic { margin: 0 auto; }
.fig-matrix tbody th,
.fig-packs tbody th {
  /* The global `th` default is 12px, .1em tracking, uppercase. Uppercasing a row
     header breaks the Material Symbol inside it — the font resolves a ligature
     on the exact lowercase name. */
  font-size: 14px; letter-spacing: normal; text-transform: none; color: var(--ink);
}
.fig-matrix tbody th {
  text-align: left; font-weight: 500;
  padding: 13px 24px 13px 0;
  border-bottom: 1px solid var(--line-3);
  vertical-align: middle;
}
.fig-matrix tbody td {
  padding: 13px 2px; text-align: center;
  border-bottom: 1px solid var(--line-3);
  vertical-align: middle;
}
/* The dot is a pseudo-element: 88 fewer nodes than a span per cell, and the
   cell still carries the words a screen reader reads. */
.fig-matrix tbody td::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid #DCDDD9; background: #DCDDD9;
}
.fig-matrix tbody td.p::before { border-color: var(--green-500); background: var(--green-500); }
.fig-matrix tbody td.s::before { border-color: var(--green-500); background: transparent; }
.fig-matrix tbody td.lead::before { content: none; }
.fig-matrix .sep { border-left: 1px solid var(--line-2); }
.fig-matrix tbody tr:hover th,
.fig-matrix tbody tr:hover td { background: var(--surface-3); }

.fig-q { display: flex; align-items: center; gap: 13px; }
.fig-q > span { min-width: 0; }
.fig-q b {
  display: block; font-size: 14.5px; font-weight: 600;
  letter-spacing: -.012em; line-height: 1.3; color: var(--ink);
  white-space: nowrap;
}
.fig-q i {
  display: block; margin-top: 3px; font-style: normal;
  font-size: 11.5px; color: var(--ink-5);
}
.fig-matrix .lead { text-align: left; padding-left: 20px; padding-right: 0; }
.fig-lead { display: flex; align-items: center; gap: 11px; }
.fig-lead-t { flex: 1 1 auto; min-width: 0; }
.fig-lead-t b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--ink); white-space: nowrap; }
.fig-lead-t i {
  display: block; margin-top: 3px; font-style: normal;
  font-size: 11px; line-height: 1.3; color: var(--ink-5);
  white-space: nowrap;
}
.fig-count { flex: 0 0 auto; text-align: right; }
.fig-count b { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.fig-meter { display: flex; gap: 2px; margin-top: 6px; justify-content: flex-end; }
.fig-meter i { display: block; width: 6px; height: 5px; border-radius: 1px; background: #DCDDD9; }
.fig-meter i.on { background: var(--green-500); }

/* ═══ 2. the split comparison ═══ */
.fig-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.fig-panel { border: 1px solid var(--line-2); border-radius: 18px; padding: 22px; }
.fig-panel.warn { background: linear-gradient(#FEFBF6, #FDFCFA); border-color: #F1E5D3; }
.fig-panel.good { background: linear-gradient(#F7FCFA, #FBFDFC); border-color: #DBEBE3; }
.fig-panel-h { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.fig-panel-h > span { min-width: 0; }
.fig-panel-h b {
  display: block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--a-amber);
}
.fig-panel.good .fig-panel-h b { color: var(--green-700); }
.fig-panel-h span span { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.fig-rows { display: grid; gap: 0; }
.fig-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 13px; padding: 13px 15px;
}
.fig-panel.good .fig-rows { gap: 9px; }
.fig-row-t { flex: 1 1 auto; min-width: 0; }
.fig-row-t b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -.012em; color: var(--ink); }
.fig-row-t span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--ink-5); }
.fig-flag { flex: 0 1 auto; text-align: right; font-size: 11.5px; line-height: 1.4; }
.fig-flag b { display: block; font-weight: 600; color: var(--a-amber); }
.fig-flag span { color: var(--ink-5); }
.fig-tick { flex: 0 0 auto; display: grid; place-items: center; color: var(--green-500); }
.fig-tick .ms { font-size: 21px; }
.fig-join {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  margin: 8px 0; font-size: 11px; font-weight: 600; letter-spacing: .01em;
  color: var(--a-amber);
}
.fig-join::before, .fig-join::after { content: ""; flex: 0 0 40px; border-top: 1px dashed #DFC49A; }
.fig-tally {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 0; padding: 12px 15px;
  border-radius: 12px; font-size: 13.5px; font-weight: 600;
  background: var(--a-amber-bg); color: var(--a-amber);
}
.fig-panel.good .fig-tally { background: var(--a-green-bg); color: var(--green-700); }
.fig-tally .ms { font-size: 18px; flex: 0 0 auto; }
.fig-tally em { font-style: normal; font-weight: 400; opacity: .5; padding: 0 5px; }

/* ═══ 3. the posting timeline ═══ */
.fig-panel-wrap {
  border: 1px solid var(--line-2); border-radius: 18px;
  padding: 22px 24px 24px; background: var(--surface-3);
}
.fig-panel-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 6px;
}
.fig-panel-top b {
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-5);
}
.fig-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  background: var(--a-green-bg); color: var(--green-700);
  font-size: 12.5px; font-weight: 600;
}
.fig-pill .ms { font-size: 16px; }
.fig-rail { position: relative; margin: 18px 0 24px; }
.fig-rail::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 42px;
  border-top: 2px solid var(--green-500);
}
.fig-rail ol { display: flex; margin: 0; padding: 0; list-style: none; }
.fig-rail li { position: relative; flex: 1 1 0; min-width: 0; text-align: center; }
.fig-rail time { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--ink-5); }
.fig-rail .node {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 24px; height: 24px; margin: 8px auto 10px;
  border-radius: 50%; background: var(--green-500); color: #fff;
}
.fig-rail .node .ms { font-size: 15px; }
.fig-rail li.now .node { box-shadow: 0 0 0 5px var(--a-green-bg); }
.fig-rail b { font-size: 13px; font-weight: 600; color: var(--ink-2); }

.fig-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@container (max-width: 1160px) { .fig-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A reference like PO-22841 has nowhere to break, so it is allowed to break
   anywhere rather than push its own card open. */
.fig-card-h i, .fig-link-h i { overflow-wrap: anywhere; }
.fig-card-h b { overflow-wrap: break-word; }
.fig-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-2); border-radius: 16px;
  overflow: hidden; background: var(--surface);
}
.fig-card-h { display: flex; align-items: center; gap: 11px; padding: 14px 15px 12px; }
.fig-card-h > span { min-width: 0; }
.fig-card-h b { display: block; font-size: 14.5px; letter-spacing: -.02em; color: var(--ink); }
.fig-card-h i { display: block; margin-top: 2px; font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--ink-5); }
.fig-tag {
  margin-left: auto; flex: 0 0 auto;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 9px; border-radius: 999px;
  background: var(--a-green-bg); color: var(--green-700);
}
.fig-tag.live { background: var(--a-blue-bg); color: var(--a-blue); }
.fig-card dl { flex: 1 1 auto; margin: 0; padding: 12px 15px 13px; border-top: 1px solid var(--line-3); }
.fig-card dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 4px 0; font-size: 12.5px; }
.fig-card dt { flex: 0 0 auto; color: var(--ink-5); }
.fig-card dd { margin: 0; text-align: right; font-family: var(--mono); font-size: 12px; color: var(--ink); }
/* The mono face is for identifiers and money. A word set in it beside a word
   set in the text face reads as a mistake. */
.fig-card dd.word { font-family: var(--font); font-size: 12.5px; }
.fig-card dd em { display: block; font-style: normal; }
.fig-card-f {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 15px; border-top: 1px solid var(--line-3);
  background: var(--surface-3); font-size: 11px; color: var(--ink-5);
}
.fig-card-f > span { min-width: 0; }
.fig-card-f > span:last-child { text-align: right; }
.fig-card-f b { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }

.fig-key { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; }
.fig-key span { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.fig-key i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* ═══ 4. the pack table ═══ */
.fig-aside { border: 1px solid var(--line-2); border-radius: 18px; padding: 22px; background: var(--surface-3); }
.fig-aside > b { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--green-700); }
.fig-aside h4 { margin: 10px 0 5px; font-size: 20px; letter-spacing: -.028em; line-height: 1.2; }
.fig-aside > p { margin: 0 0 16px; font-size: 13px; line-height: 1.5; color: var(--ink-5); }
.fig-aside dl { margin: 0; padding-top: 14px; border-top: 1px solid var(--line-2); }
.fig-aside dl > div {
  display: flex; align-items: center; gap: 6px 11px; padding: 8px 0; flex-wrap: wrap;
}
.fig-aside dt {
  /* Not min-width: 0 — that is what let the label be squeezed to 24px of the
     57 it needs. It keeps its width and the value wraps to the next line.
     The icon lives inside the <dt>, because a <div> in a <dl> may hold only
     dt/dd pairs. */
  display: flex; align-items: center; gap: 11px;
  flex: 1 1 auto; min-width: max-content;
  font-size: 13.5px; line-height: 1.35; color: var(--ink-3);
}
.fig-aside dd {
  flex: 0 1 auto; margin: 0 0 0 auto;
  font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--ink);
  text-align: right;
}
.fig-aside dl > div.stack { align-items: flex-start; row-gap: 2px; }
.fig-aside dl > div.stack dt { flex: 1 1 100%; order: 1; font-weight: 600; color: var(--ink); }
.fig-aside dl > div.stack dd {
  flex: 1 1 100%; order: 2; margin: 0; padding-left: 41px;
  font-size: 12.5px; font-weight: 400; color: var(--ink-5); text-align: left;
}

.fig-with-aside { display: grid; grid-template-columns: minmax(0, 244px) minmax(0, 1fr); gap: 20px; align-items: start; }

.fig-packs { width: 100%; min-width: 940px; border-collapse: collapse; table-layout: fixed; }
.fig-packs col.c-pack   { width: 224px; }
.fig-packs col.c-change { width: 232px; }
.fig-packs col.c-depth  { width: 108px; }
.fig-packs col.c-setup  { width: 136px; }
.fig-packs thead th {
  padding: 0 16px 13px 0; text-align: left;
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-5); border-bottom: 1px solid var(--line-2); vertical-align: bottom;
}
.fig-packs thead th span {
  display: block; margin-top: 5px;
  font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-6);
}
.fig-packs tbody th { text-align: left; font-weight: 400; padding: 15px 16px 15px 0; border-bottom: 1px solid var(--line-3); vertical-align: top; }
.fig-packs tbody td { padding: 15px 16px 15px 0; border-bottom: 1px solid var(--line-3); vertical-align: top; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.fig-packs tbody tr:hover th, .fig-packs tbody tr:hover td { background: var(--surface-3); }
.fig-pack { display: flex; align-items: flex-start; gap: 11px; }
.fig-pack > span:last-child { min-width: 0; }
.fig-no {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 8px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  background: var(--a-slate-bg); color: var(--a-slate);
}
.fig-pack b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.012em; line-height: 1.3; color: var(--ink); }
.fig-pack i {
  display: block; margin-top: 4px; font-style: normal;
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--green-700);
}
.fig-pack i.tmpl { color: var(--ink-6); }
.fig-depth b { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.fig-bars { display: flex; gap: 3px; margin-top: 7px; }
.fig-bars i { display: block; width: 15px; height: 5px; border-radius: 2px; background: #DCDDD9; }
.fig-bars i.on { background: var(--green-500); }
.fig-caps { display: flex; flex-wrap: wrap; gap: 6px; }
.fig-caps > span {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px 4px 5px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line-2); background: var(--surface);
  font-size: 11.5px; color: var(--ink-2);
}
.fig-caps .ms { font-size: 14px; }
.fig-effort { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.fig-effort .ms { font-size: 16px; color: var(--ink-5); flex: 0 0 auto; }

/* ═══ shared footers ═══ */
.fig-foot {
  display: flex; align-items: center; gap: 20px 32px; flex-wrap: wrap;
  margin-top: 22px; padding: 18px 22px;
  border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface-3);
}
.fig-foot.good { border-color: #DBEBE3; background: linear-gradient(#F7FCFA, #FBFDFC); }
.fig-foot-t { flex: 1 1 340px; min-width: 0; display: flex; align-items: flex-start; gap: 13px; }
.fig-foot-t > div { min-width: 0; }
.fig-foot-t b { display: block; font-size: 14.5px; letter-spacing: -.02em; color: var(--ink); margin-bottom: 5px; }
.fig-foot-t p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-3); text-wrap: pretty; }
.fig-stats { display: flex; gap: 26px; flex-wrap: wrap; }
.fig-stat { display: flex; align-items: center; gap: 11px; }
.fig-stat .fig-ic {
  background: transparent;
  border: 1.5px solid var(--green-500);
  border-radius: 50%;
  color: var(--green-700);
}
.fig-stat > div { min-width: 0; }
.fig-stat em {
  display: block; font-style: normal;
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-6); margin-bottom: 3px;
}
.fig-stat b { display: block; font-size: 16px; letter-spacing: -.02em; line-height: 1.2; color: var(--green-700); }
.fig-stat span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--ink-5); }
.fig-note {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 18px; padding: 15px 18px;
  border: 1px solid var(--a-blue-bg); border-radius: 14px; background: #F7FAFD;
  font-size: 13px; line-height: 1.65; color: var(--ink-3);
}
.fig-note > .ms { flex: 0 0 auto; font-size: 18px; color: var(--a-blue); margin-top: 1px; }
.fig-note b { color: var(--ink); font-weight: 600; }
.fig-note p { margin: 0; text-wrap: pretty; }

/* ═══ narrow ═══ */
@container (max-width: 880px) {
  .fig-split { grid-template-columns: 1fr; }
  .fig-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig-with-aside { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* The flag takes its own line rather than crushing the name beside it. */
  .fig-row { flex-wrap: wrap; row-gap: 8px; }
  .fig-row-t { flex: 1 1 100%; }
  .fig-flag { margin-left: 45px; text-align: left; }
  .fig-tick { margin-left: auto; }
}
@media (max-width: 620px) {
  .fig { padding: 20px 15px 16px; border-radius: 16px; margin-top: 30px; }
  .fig-head { gap: 16px; margin-bottom: 18px; }
  .fig-head h3 { font-size: 21px; }
  .fig-head > div > p { font-size: 14px; }
  .fig-legend { gap: 10px 18px; padding: 12px 14px; }
  .fig-chips { grid-template-columns: 1fr 1fr; gap: 8px; }
  .fig-chip { padding: 10px 11px; gap: 9px; }
  .fig-cards { grid-template-columns: 1fr; }
  .fig-panel, .fig-panel-wrap, .fig-aside { padding: 16px 14px; }
  .fig-foot { padding: 15px 16px; gap: 16px; }
  .fig-stats { gap: 16px; }
  .fig-rail { margin: 12px 0 18px; }
  .fig-rail ol { flex-direction: column; gap: 12px; }
  .fig-rail::before { display: none; }
  .fig-rail li { display: flex; align-items: center; gap: 12px; text-align: left; }
  .fig-rail time { flex: 0 0 auto; min-width: 56px; }
  .fig-rail .node { margin: 0; }
}
@media (max-width: 420px) {
  .fig-chips { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Figure components, part two
   ───────────────────────────────────────────────────────────────────────────
   Four more shapes, replacing the remaining inline SVG. Same rules as part one:
   one type scale, the mono face for identifiers and figures only, min-width: 0
   on anything holding text, and every tile in a component the same size as
   every other tile in that component.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------- the matrix column heads ----------
   The labels sat directly under their tiles, so a one-word engine and a
   two-word engine put their tiles on different baselines and the row of icons
   looked scattered. The label box is a fixed height now and the tiles align. */
.fig-matrix .cols .eng .fig-ic { width: 34px; height: 34px; border-radius: 10px; }
.fig-matrix .cols .eng .fig-ic .ms { font-size: 18px; }
.fig-matrix .cols .eng .eng-label {
  display: flex; align-items: flex-start; justify-content: center;
  min-height: 26px; margin-top: 10px; padding-inline: 1px;
  font-size: 10px; font-weight: 600; letter-spacing: 0; text-transform: none;
  line-height: 1.3; color: var(--ink-3); text-align: center;
}

/* ═══ a board of numbered capability cards ═══ */
.fig-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 12px;
}
.fig-item {
  display: flex; flex-direction: column;
  padding: 16px 17px 15px;
  border: 1px solid var(--line-2);
  border-radius: 15px;
  background: var(--surface);
}
.fig-item:hover { border-color: var(--line-4); background: var(--surface-3); }
.fig-item-h { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.fig-num {
  flex: 0 0 auto;
  padding: 4px 9px; border-radius: 7px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  background: var(--a-green-bg); color: var(--a-green);
}
.fig-num.violet { background: var(--a-violet-bg); color: var(--a-violet); }
.fig-num.blue   { background: var(--a-blue-bg);   color: var(--a-blue); }
.fig-num.amber  { background: var(--a-amber-bg);  color: var(--a-amber); }
.fig-num.rose   { background: var(--a-rose-bg);   color: var(--a-rose); }
.fig-num.teal   { background: var(--a-teal-bg);   color: var(--a-teal); }
.fig-num.indigo { background: var(--a-indigo-bg); color: var(--a-indigo); }
.fig-num.slate  { background: var(--a-slate-bg);  color: var(--a-slate); }
.fig-num.plum   { background: var(--a-plum-bg);   color: var(--a-plum); }
.fig-num.moss   { background: var(--a-moss-bg);   color: var(--a-moss); }
.fig-num.clay   { background: var(--a-clay-bg);   color: var(--a-clay); }
.fig-item h4 {
  margin: 0 0 7px; font-size: 14.5px; font-weight: 600;
  letter-spacing: -.015em; line-height: 1.3; color: var(--ink);
}
.fig-item p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--ink-5); }
.fig-out {
  margin-top: auto; padding-top: 11px; border-top: 1px solid var(--line-3);
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--ink-5);
}
.fig-out b { font-weight: 500; color: var(--ink-3); }
.fig-out .ms { font-size: 14px; color: var(--ink-6); flex: 0 0 auto; }

/* ═══ a bounded run: numbered steps with a gate ═══ */
.fig-run { position: relative; }
.fig-run-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.fig-run-top b,
.fig-run-top em {
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  font-style: normal;
}
.fig-run-top b { color: var(--ink-5); }
.fig-run-top em { color: var(--a-amber); }
.fig-steps { display: flex; margin: 0; padding: 0; list-style: none; gap: 0; }
.fig-step { position: relative; flex: 1 1 0; min-width: 0; padding: 0 8px; text-align: center; }
/* The rail sits behind the numbers rather than under the labels. */
.fig-step::before {
  content: ""; position: absolute; top: 17px; left: -50%; right: 50%;
  border-top: 2px solid var(--line);
}
.fig-step:first-child::before { display: none; }
.fig-step.gate::before { border-top-style: dashed; border-top-color: #DFC49A; }
.fig-step > b {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 34px; height: 34px; margin: 0 auto 12px;
  border-radius: 50%;
  border: 2px solid var(--a-green-bg); background: var(--a-green-bg);
  font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--a-green);
}
.fig-step.gate > b { border-color: var(--a-amber-bg); background: var(--a-amber-bg); color: var(--a-amber); }
.fig-step.open > b { border-color: var(--line-4); background: var(--surface); color: var(--ink-3); }
.fig-step.done > b { border-color: var(--green-900); background: var(--green-900); color: #fff; }
.fig-step h4 {
  margin: 0 0 6px; font-size: 13px; font-weight: 600; overflow-wrap: break-word;
  letter-spacing: -.012em; line-height: 1.3; color: var(--ink);
}
.fig-step p { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--ink-5); }
.fig-rules {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 14px 22px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-2);
}
.fig-rules > div { min-width: 0; }
.fig-rules b {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-6); margin-bottom: 5px;
}
.fig-rules span { font-size: 13px; line-height: 1.45; color: var(--ink-2); }

/* A figure whose rows are mostly prose does not want to be 1,900px wide: past
   about 75 characters a line stops being readable, and the space left over
   reads as a mistake rather than as air. */
.fig-narrow { max-width: 1180px; }

/* ═══ an ascending ladder of levels ═══ */
.fig-ladder { display: grid; gap: 3px; }
.fig-rung {
  /* Four columns rather than two with a bar pushed to the far edge: at 1600px
     that left thirteen hundred pixels of nothing in the middle of every row. */
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) minmax(0, 216px) 104px;
  align-items: center; gap: 16px;
  padding: 12px 16px; border-radius: 12px;
  background: var(--surface-3); border: 1px solid var(--line-3);
}
.fig-rung-scope {
  font-size: 12.5px; line-height: 1.4; color: var(--ink-3);
  padding-left: 16px; border-left: 1px solid var(--line-2);
}
.fig-rung.high .fig-rung-scope { border-left-color: #EEDFC6; color: var(--a-amber); }
.fig-rung-n {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  background: var(--a-green-bg); color: var(--a-green);
}
.fig-rung.high { background: var(--a-amber-bg); border-color: #F1E5D3; }
.fig-rung.high .fig-rung-n { background: #F6E2C2; color: var(--a-amber); }
.fig-rung-t { flex: 1 1 auto; min-width: 0; }
.fig-rung-t b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.012em; color: var(--ink); }
.fig-rung-t span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--ink-5); }
.fig-rung-bar { display: flex; gap: 2px; align-items: center; }
.fig-rung-bar i { display: block; flex: 1 1 0; height: 5px; border-radius: 2px; background: #E4E5E2; }
.fig-rung-bar i.on { background: var(--green-500); }
.fig-rung.high .fig-rung-bar i.on { background: var(--amber-500); }
.fig-split-note {
  display: flex; align-items: center; gap: 11px;
  margin: 8px 0; font-size: 11px; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--a-amber);
}
.fig-split-note::before, .fig-split-note::after {
  content: ""; flex: 1 1 auto; border-top: 1px dashed #DFC49A;
}

/* ═══ the execution cascade ═══ */
.fig-layers { display: grid; gap: 8px; }
.fig-layer {
  display: grid;
  grid-template-columns: minmax(168px, auto) minmax(0, 1fr) 168px 96px;
  align-items: center; gap: 18px;
  padding: 14px 17px; border-radius: 14px;
  border: 1px solid var(--line-2); background: var(--surface);
}
.fig-layer-n { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fig-layer-n b { font-size: 13.5px; font-weight: 600; letter-spacing: -.012em; color: var(--ink); }
.fig-layer p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-5); }
.fig-share { display: flex; align-items: center; gap: 11px; }
.fig-share-bar { flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--surface-4); overflow: hidden; }
.fig-share-bar i { display: block; height: 100%; border-radius: 3px; background: var(--green-500); }
.fig-share b { flex: 0 0 auto; font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.fig-cost {
  justify-self: end; padding: 5px 11px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  background: var(--a-green-bg); color: var(--a-green); white-space: nowrap;
}
.fig-cost.paid { background: var(--a-amber-bg); color: var(--a-amber); }

/* ═══ a document chain ═══ */
.fig-chain { display: flex; align-items: stretch; gap: 0; }
.fig-link { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.fig-link-card {
  flex: 1 1 auto; display: flex; flex-direction: column;
  padding: 15px 16px; border: 1px solid var(--line-2);
  border-radius: 15px; background: var(--surface);
}
.fig-link-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fig-link-h b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; color: var(--ink); }
.fig-link-h i { display: block; margin-top: 2px; font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--ink-5); }
.fig-link-card p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-5); }
.fig-link-card ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.fig-link-card li { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.fig-link-card li .ms { font-size: 14px; color: var(--green-500); flex: 0 0 auto; margin-top: 1px; }
.fig-arrow {
  flex: 0 0 auto; align-self: center;
  display: grid; place-items: center; width: 34px;
  color: var(--ink-6);
}
.fig-arrow .ms { font-size: 20px; }
.fig-carry {
  display: block; margin-top: 5px; text-align: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: .02em; color: var(--ink-6);
}

/* ═══ narrow ═══ */
@container (max-width: 900px) {
  .fig-layer { grid-template-columns: 1fr; gap: 10px; }
  .fig-cost { justify-self: start; }
  .fig-steps { flex-wrap: wrap; row-gap: 22px; }
  .fig-step { flex: 1 1 33%; }
  .fig-step::before { display: none; }
}
@media (max-width: 860px) {
  .fig-chain { flex-direction: column; gap: 8px; }
  .fig-arrow { width: auto; transform: rotate(90deg); }
  .fig-rung { grid-template-columns: 30px minmax(0, 1fr); row-gap: 10px; }
  .fig-rung-scope { grid-column: 2; padding-left: 0; border-left: 0; }
  .fig-rung-bar { grid-column: 2; }
}
@media (max-width: 620px) {
  .fig-board { grid-template-columns: 1fr; }
  .fig-steps { flex-direction: column; row-gap: 14px; }
  .fig-step { flex: 1 1 auto; padding: 0; text-align: left; display: flex; gap: 12px; align-items: flex-start; }
  .fig-step > div, .fig-step h4, .fig-step p { min-width: 0; }
  .fig-step > b { margin: 0; }
  .fig-run-top { margin-bottom: 16px; }
}

/* ═══ a revenue movement waterfall ═══ */
.fig-waterfall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
  align-items: end; gap: 12px;
  min-height: 220px;
}
.fig-bar { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.fig-bar b {
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  margin-bottom: 8px; color: var(--ink);
}
.fig-bar-fill { display: block; border-radius: 8px 8px 0 0; }
.fig-bar.base .fig-bar-fill { height: 150px; background: var(--a-slate-bg); }
.fig-bar.up   .fig-bar-fill { height: 92px;  background: var(--a-green-bg); }
.fig-bar.down .fig-bar-fill { height: 68px;  background: var(--a-rose-bg); }
.fig-bar.base b { color: var(--ink); }
.fig-bar.up b   { color: var(--a-green); }
.fig-bar.down b { color: var(--a-rose); }
.fig-bar-l {
  display: block; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line-2);
  font-size: 12.5px; color: var(--ink-3);
}

/* ═══ the buy / stock / sell loop ═══ */
.fig-loop {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 12px; margin: 0; padding: 0; list-style: none;
}
.fig-loop-n {
  position: relative; min-width: 0;
  padding: 18px 18px 16px;
  border: 1px solid var(--line-2); border-radius: 15px; background: var(--surface);
}
/* The loop closes: an arrow between each pair, and the last wraps to the first. */
.fig-loop-n::after {
  content: "→"; position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  z-index: 1; font-size: 15px; color: var(--ink-6);
}
.fig-loop-n:last-child::after { content: "↺"; right: 14px; top: 18px; transform: none; }
.fig-loop-n .fig-ic { margin-bottom: 12px; }
.fig-loop-n b { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.fig-loop-n i {
  display: block; margin-top: 3px; font-style: normal;
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-5);
}
.fig-loop-n span { display: block; margin-top: 9px; font-size: 12.5px; line-height: 1.5; color: var(--ink-5); }

/* The eyebrow above a board. */
.fig-eyebrow {
  margin: 0 0 14px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-5);
}

@media (max-width: 620px) {
  .fig-waterfall { grid-template-columns: 1fr 1fr; min-height: 0; }
  .fig-loop-n::after { display: none; }
}