/* SELF-HOSTED FONTS. They were a Google Fonts stylesheet, which meant the first
   paint used system fallbacks and the real faces swapped in a few hundred ms
   later: the strip text got a line shorter, the nav links slid sideways, and
   every page opened with a layout shift (0.18 on the phone portfolio, all of
   it fonts, measured by blocking them). Latin subsets only, ~98KB for all four,
   preloaded from each page head so they are there for the first paint. */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/fonts/Figtree-400-900.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/Inter-300-700.woff2) format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/DMMono-400.woff2) format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/DMMono-500.woff2) format('woff2'); }

/* CLOSECALL.
 *
 * Light, typographic, with a 3D plane behind the hero. Unbounded carries the
 * display type and Inter does everything else, including the numbers: Inter's
 * tabular figures hold their width, so a price gaining a digit never reflows
 * the row. DM Mono is left as the machine voice for labels and clocks only,
 * which keeps the prices in one typeface instead of two.
 *
 * YES is the accent blue and NO is a warm red. They are not green and red,
 * because green/red says one side is the correct one and in a binary market
 * neither is.
 */

:root {
  --paper: #F6F8F2;
  --ink: #0F1A0A;
  /* Darker than they were. These sit on glass over a moving blue field now,
     not on flat white, so the old greys lost their contrast the moment a slab
     drifted underneath. */
  --mid: #2F4126;
  --low: #4C5C42;
  --line: rgba(30, 60, 20, .12);
  --line-hot: rgba(30, 60, 20, .26);
  --card: rgba(255, 255, 255, .62);

  /* liquid glass ---------------------------------------------------------
     Three parts, and all three have to be there or it reads as a flat white
     box at 60% opacity: the BLUR that bends what is behind it, the SATURATION
     boost that keeps the colour alive through the blur, and the specular EDGE
     that catches light along the top. */
  --glass: linear-gradient(150deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.24) 48%, rgba(255,255,255,.28) 100%);
  --glass-large: linear-gradient(150deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.28) 48%, rgba(255,255,255,.30) 100%);
  --glass-small: linear-gradient(150deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.24) 48%, rgba(255,255,255,.26) 100%);
  /* Label chips carry TEXT with nothing but blocks behind them, and the blocks
     move: a slab that is pale now is dark in twenty seconds. A panel can sit at
     28% because it has its own light content inside it; a chip cannot, so it
     runs about half white. It still shows the field through it, it just does
     not gamble on which face is passing underneath. */
  --glass-label: linear-gradient(150deg, rgba(255,255,255,.54) 0%, rgba(255,255,255,.46) 50%, rgba(255,255,255,.50) 100%);
  /* A NAV is the exception: page content slides underneath it, so it needs
     enough body to hide a scrolling table. Everything else is glass you can
     genuinely see through. */
  --glass-nav: linear-gradient(150deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.38) 50%, rgba(255,255,255,.42) 100%);
  /* 8px, not 18. A big blur turns the blocks into white fog, and fog is what
     "milky" is; a small one keeps their colour and their edges while still
     softening the detail. Brightness lifts it a touch, saturation keeps the
     blue alive through the blur. */
  --blur: blur(8px) saturate(125%) brightness(1.04);
  --blur-lite: blur(6px) saturate(130%) brightness(1.04);
  --edge: rgba(255, 255, 255, .55);
  /* A single even white outline reads as a drawn border. Real glass catches
     light on the top and left and almost none underneath, so the four sides
     get four different alphas. */
  --edges: rgba(255,255,255,.78) rgba(255,255,255,.36) rgba(255,255,255,.22) rgba(255,255,255,.52);
  --lift:
    inset 0 1px 0 0 rgba(255,255,255,.62),
    inset 1px 0 0 0 rgba(255,255,255,.24),
    inset 0 -1px 0 0 rgba(255,255,255,.12),
    0 8px 24px 0 rgba(24, 44, 12, .09),
    0 1px 3px 0 rgba(24, 44, 12, .06);
  --lift-large:
    inset 0 1px 0 0 rgba(255,255,255,.62),
    inset 1px 0 0 0 rgba(255,255,255,.24),
    inset 0 -1px 0 0 rgba(255,255,255,.12),
    0 12px 32px 0 rgba(24, 44, 12, .10),
    0 2px 6px 0 rgba(24, 44, 12, .05);
  --blue: #4F8A0B;          /* lime, deep enough to read on paper: links, focus, on-states */
  --blue-soft: #C9F07A;
  --blue-wash: #F1FBDD;
  --yes: #4F8A0B;
  --lime: #B9F23C;          /* the Robinhood lime: fills and caps, never small text */
  --lime-ink: #16240A;      /* text on lime */
  --no: #E8365D;
  /* The pool bar repeats forty-four times. At full saturation it becomes the
     loudest thing on the page, and it is the least important number on it. */
  --yes-soft: #6B8EFF;
  --no-soft: #CF8A9E;
  --no-wash: #FFEFF2;
  --up: #17864F;
  --down: #C42B48;
  --gold: #A8730B;
  --r: 14px;
  --shadow: var(--lift);

  --display: 'Figtree', 'Inter', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink); font-family: var(--body);
  font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased;
  /* Only the fallback now: with WebGL off this gradient is the background,
     and every glass surface simply blurs it instead of the blocks. */
  background:
    radial-gradient(1200px 700px at 50% -8%, #E9F7CF 0%, rgba(233,247,207,0) 60%),
    linear-gradient(180deg, #F5F8F0 0%, #EEF3E6 100%);
  background-attachment: fixed;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* The blocks are the page. Fixed to the viewport so the field stays put while
   the content slides over it, and behind everything, because every surface on
   top of it is translucent. */
#bg {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh;
  z-index: -1; pointer-events: none; display: block;
}

/* Figtree at 900 is the display voice, matched to the reference: a heavy
   geometric grotesque, set tight. It is reserved for the hero, the wordmark and
   the one big number on a panel; the interface runs on Inter, because wide
   heavy type in a repeating row is harder to scan than it is handsome. */
h1, h2, h3 { margin: 0; font-family: var(--body); font-weight: 650; letter-spacing: -0.022em; }
.hero h1, .brand, .big { font-family: var(--display); font-weight: 900; letter-spacing: -0.045em; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 60; background: var(--blue); color: #fff; padding: 10px 14px; border-radius: 8px; }

/* chrome ------------------------------------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--glass-nav);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-bottom: 1px solid rgba(255,255,255,.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 6px 22px rgba(16, 34, 68, .08);
}
.nav__in { max-width: 1140px; margin: 0 auto; padding: 9px 18px; display: flex; align-items: center; gap: 12px; }
.brand {
  display: flex; align-items: center; gap: 9px; min-height: 44px; color: var(--ink);
  font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; font-size: 15px;
}
.brand:hover { text-decoration: none; }
/* The mark itself, not an anonymous dot. Just the C: a slab is mush at 17px. */
.brand .dot { width: 17px; height: 17px; display: block; flex: 0 0 17px; }
.nav__links { display: flex; gap: 2px; margin-left: 8px; flex: 1; }
.nav__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--mid); font-size: 14px; border-radius: 9px; white-space: nowrap; }
.nav__links a:hover { color: var(--ink); background: rgba(255, 255, 255, .5); text-decoration: none; }
.nav__links a.on { color: var(--blue); }
.chainpill {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px;
  background: var(--glass-small); -webkit-backdrop-filter: var(--blur-lite); backdrop-filter: var(--blur-lite);
  border: 1px solid; border-color: var(--edges); border-radius: 999px; color: var(--mid); font-size: 12px;
  box-shadow: var(--lift);
}
.chainpill i { width: 7px; height: 7px; border-radius: 50%; background: var(--up); font-style: normal; }

/* main is full width so a section can bleed to the edges. Every block inside
   it sets its own measure instead, which is what lets the hero run the whole
   window while the cards stay on the 1140 grid. No vw anywhere: 100vw includes
   the scrollbar and quietly puts the page 15px into horizontal overflow. */
main { max-width: none; margin: 0; padding: 0 0 90px; }
.sec, .mk { max-width: 1140px; margin-left: auto; margin-right: auto; padding-left: 18px; padding-right: 18px; }
main > p { max-width: 1140px; margin-left: auto; margin-right: auto; padding-left: 18px; padding-right: 18px; }
.foot {
  border-top: 1px solid var(--edge); margin-top: 64px; padding: 26px 18px 48px;
  color: var(--mid); font-size: 13px;
  background: var(--glass-small);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.foot__in { max-width: 1140px; margin: 0 auto; display: flex; align-items: center; gap: 0 28px; flex-wrap: wrap; }
/* Every item is a 44px line box, the same height as the X link, so the row has
   ONE baseline. Before this the spans were bare text and the link a 44px flex
   item, and the words sat visibly higher than the handle beside them. */
.foot__in > span, .foot__link { display: inline-flex; align-items: center; min-height: 44px; }
.foot__link { color: var(--blue); text-decoration: none; }
.foot__link:hover { text-decoration: underline; }
.foot a.xlink { margin-left: auto; }
@media (max-width: 700px) {
  .foot__in { flex-direction: column; align-items: flex-start; gap: 0; }
  .foot a.xlink { margin-left: 0; }
}
/* The X link sits in the footer row as one more item, not as a button. It is a
   way to check who runs this, which is a footer job; making it a call to action
   would be the site asking for a follow on a page that has nothing to sell. */
.foot a.xlink {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--mid); text-decoration: none;
  /* 44 high so it is a real target on a phone, without changing the row's look */
  min-height: 44px;
}
.foot a.xlink:hover { color: var(--ink); text-decoration: underline; }
.foot a.xlink svg { flex: none; opacity: .85; }

/* the honest strip, above the navigation on every page ---------------------- */
/* Dark glass, not a dark bar. It still has to be the most sober thing on the
   page, but a solid black slab across the top killed the field underneath it. */
.strip {
  background: rgba(10, 18, 32, .58);
  -webkit-backdrop-filter: blur(8px) saturate(130%); backdrop-filter: blur(8px) saturate(130%);
  color: #D6DEEC; font-size: 12.5px;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.12);
}
.strip__in { max-width: 1140px; margin: 0 auto; padding: 9px 18px; line-height: 1.5; }
.strip b { color: #fff; font-weight: 600; }

/* kept for the offline message, which is still a card-shaped warning */
.demo {
  display: flex; gap: 12px; border-radius: var(--r); padding: 14px 16px; margin: 20px 0 0;
  color: #5A4405; font-size: 13.5px; border-color: rgba(214, 168, 46, .55);
}
.demo b { color: #3E2E02; }

/* hero -------------------------------------------------------------------- */
/* Centred and full width, on top of the blocks. No companion card: the one
   that used to sit here showed the first market of the grid immediately below
   it, with the same price, split and countdown. */
/* The hero has no panel, so the type sits straight on the blocks. The
   highlight that used to be burned into the shader is painted here instead,
   where it stays with the hero when the page scrolls. */
.hero { padding: 0; text-align: center; position: relative; }
.hero__in { max-width: 1000px; margin: 0 auto; padding: 104px 18px 132px; position: relative; }
.hero__in::before {
  /* No negative LEFT/RIGHT inset. On a phone the container is already the full
     width, so bleeding the highlight sideways pushed the document 23px into
     horizontal scroll for a glow nobody can see. */
  /* Strong enough to carry 17px text, which is the number that decides it:
     measured across six frames of the animation, the lead paragraph was down
     at 2.78:1 over a dark slab with the softer version of this. */
  content: ''; position: absolute; inset: -10% 0 -4%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 26% at 50% 62%, rgba(255,255,255,.86) 0%, rgba(255,255,255,.42) 55%, rgba(255,255,255,0) 100%),
    radial-gradient(72% 52% at 50% 46%, rgba(255,255,255,.62) 0%, rgba(255,255,255,.30) 45%, rgba(255,255,255,0) 78%);
}
/* The type sits ON the blocks, so it carries its own halo rather than asking
   the background to bleach a hole for it. */
.hero h1 { font-size: clamp(38px, 6.2vw, 72px); line-height: 1.02; text-shadow: 0 2px 30px rgba(255, 255, 255, .78); }
.hero h1 span { color: var(--blue); }
.hero p.lead {
  color: #1B2536; font-size: 17px; line-height: 1.5; max-width: 46ch; margin: 20px auto 0;
  text-shadow: 0 1px 20px rgba(255, 255, 255, .82);
}
/* On the blocks, letterspaced grey text disappears. It becomes a chip, which
   is legible over anything and reads as a status rather than a caption. */
.hero .eyebrow {
  display: inline-flex; align-items: center; background: var(--glass-small);
  border: 1px solid; border-color: var(--edges); color: #30425A;
  padding: 6px 13px; border-radius: 999px; box-shadow: var(--lift);
  -webkit-backdrop-filter: var(--blur-lite); backdrop-filter: var(--blur-lite);
}
.hero .eyebrow::before { content: none; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; justify-content: center; }
/* Small, like the reference. A hero button that is as tall as a form field
   reads as a form field. */
.hero__cta .btn { min-height: 44px; padding: 0 20px; border-radius: 9px; font-size: 14px; }
.hero .eyebrow { margin-bottom: 14px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 18px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--edge); color: var(--ink);
  background: var(--glass-small);
  -webkit-backdrop-filter: var(--blur-lite); backdrop-filter: var(--blur-lite);
  box-shadow: var(--lift);
  font-family: var(--body); font-size: 14.5px; font-weight: 550;
}
.btn:hover:not(:disabled) { color: var(--blue); text-decoration: none; background: rgba(255,255,255,.44); }
/* The one solid thing on the page. Glass everywhere means the primary action
   has to be the exception, or nothing on screen looks pressable. */
.btn.solid {
  background: linear-gradient(180deg, #C8F75A, #B3EE2E); color: var(--lime-ink); border-color: rgba(30,60,20,.18);
}
.btn.solid:hover { background: linear-gradient(180deg, #D3FA74, #BEF23F); color: var(--lime-ink); }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.yes { border-color: var(--yes); color: var(--yes); }
.btn.yes.on { background: var(--yes); color: #fff; }
.btn.no { border-color: var(--no); color: var(--no); }
.btn.no.on { background: var(--no); color: #fff; }

/* the tape ---------------------------------------------------------------- */
.tape { overflow: hidden; border-radius: 12px; margin-top: 22px; }
/* min-height matches the filled tape (measured 45px), so the page does not
   jump when prices land. Before this it was a 19px shift on every load. */
.tape__run { display: flex; gap: 26px; padding: 12px 16px; white-space: nowrap; width: max-content; min-height: 45px; box-sizing: border-box; }
.tape__run span { color: var(--low); font-size: 12px; font-family: var(--mono); }
/* Neutral, not green: a bare price with no change value beside it has not
   earned a colour that says it went up. */
.tape__run b { color: var(--mid); font-weight: 500; margin-left: 6px; }

/* market cards ------------------------------------------------------------ */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
/* Placeholders that hold a card's footprint (measured 296px) until the real
   ones render. They adapt to the column count on their own, which a min-height
   on the grid would not. Quiet on purpose: a loading state should not shimmer. */
.card.skel { min-height: 296px; opacity: .55; }
/* Every panel on the site is this. There is no broad white sheen any more:
   a wipe of white across the whole face is exactly what made it milky. The
   brightness lives in the 1px edges instead, which is where light actually
   catches on glass. */
.card, .panel, .step, .ltable, .tape, .demo {
  position: relative; isolation: isolate;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid; border-color: var(--edges);
  box-shadow: var(--lift);
}
.ltable, .tape { background: var(--glass-large); box-shadow: var(--lift-large); }
.card { border-radius: var(--r); padding: 16px; display: block; color: inherit; }
a.card { transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
a.card:hover {
  text-decoration: none; transform: translateY(-2px);
  background: linear-gradient(150deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.36) 48%, rgba(255,255,255,.42) 100%);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,.8), 0 16px 36px 0 rgba(16, 34, 68, .16);
}
.card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tick { display: flex; align-items: center; gap: 9px; font-weight: 650; font-size: 15px; letter-spacing: -0.01em; }
/* The logo tile. Near-white rather than blue-tinted, because the marks bring
   their own colours and a coloured tile fights every one of them. The monogram
   sits underneath and the mark sits on top, so a missing file degrades to the
   letters instead of to a hole. */
.av {
  position: relative; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px;
  display: grid; place-items: center; overflow: hidden;
  background: rgba(255, 255, 255, .82); border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 1px 3px rgba(24, 44, 12, .10);
}
.av i { font-style: normal; font-family: var(--mono); font-size: 9.5px; color: #35507F; letter-spacing: -0.02em; }
/* Centred by the grid, not stacked on top of anything. A wide wordmark uses
   the full width and a square mark uses the full height. */
.av img { max-width: 22px; max-height: 20px; display: block; }
/* An app-icon square fills the tile and inherits its corner radius, so it
   reads as the logo rather than as a coloured stamp floating in a white box. */
.av img.full { max-width: none; max-height: none; width: 100%; height: 100%; object-fit: cover; }
.av:has(img.full) { background: none; border-color: transparent; box-shadow: 0 1px 3px rgba(16, 34, 68, .16); }
.clock { font-family: var(--mono); font-size: 12px; color: var(--mid); white-space: nowrap; }
.clock.soon { color: var(--gold); }
/* Two aligned rows, so the strike and the live price are compared rather than
   decoded out of a sentence. Values are monospace and width-reserved: a price
   gaining a digit must not shift the row. */
.rows { margin: 14px 0 16px; display: grid; gap: 7px; }
.rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rows > div.gap { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(28, 52, 96, .18); }
.rows dt { color: var(--mid); font-size: 13px; }
.rows dd { margin: 0; font-size: 15px; }
.num { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.rows .strike { font-weight: 500; }
/* The one number the card was making the reader work out. It is a price
   distance and NOT a probability, which is why the word "above" or "below" is
   written out and the colour is only a second signal. */
.dist { font-weight: 600; }
.dist.up { color: var(--blue); }
.dist.dn { color: var(--mid); }
.dist.at { color: var(--ink); }
.bar-label { margin: 0 0 7px; color: var(--mid); font-size: 11.5px; letter-spacing: .04em; }
.settled-line { margin: -6px 0 12px; }
.pct { display: inline-block; min-width: 4ch; text-align: right; }

.split { display: flex; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(28, 52, 96, .16); }
.split i { display: block; height: 100%; }
.split .y { background: var(--yes-soft); }
.split .n { background: var(--no-soft); }
.pcts { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--mid); }
.pcts b { font-weight: 500; }
.card__foot { display: flex; justify-content: space-between; margin-top: 13px; padding-top: 12px; border-top: 1px solid rgba(28, 52, 96, .13); font-size: 12.5px; color: var(--mid); }

/* sections ---------------------------------------------------------------- */
.sec { padding-top: 52px; }
.sec__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.sec h2 { font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.03em; }
.eyebrow { color: var(--low); font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.sub { color: var(--mid); max-width: 62ch; margin: 0 0 22px; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.step { border-radius: var(--r); padding: 18px; }
.step .n { font-family: var(--mono); color: var(--blue); font-size: 12px; }
.step h3 { font-size: 16px; margin: 10px 0 7px; }
.step p { margin: 0; color: var(--mid); font-size: 13.5px; }

/* market page ------------------------------------------------------------- */
.mk { display: grid; grid-template-columns: 1fr 370px; gap: 18px; align-items: start; padding-top: 24px; }
/* min(), so the tape keeps the 1104 measure on a desktop and still has a
   gutter on a phone. Plain auto margins gave it none and it ran edge to edge
   while every card beside it was inset. */
.tape { max-width: min(1104px, calc(100% - 36px)); margin-left: auto; margin-right: auto; }
.panel { border-radius: var(--r); padding: 20px; }
.panel h3 { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--low); margin-bottom: 14px; font-weight: 400; }
.big { font-family: var(--display); font-size: clamp(26px, 4vw, 40px); line-height: 1.1; letter-spacing: -0.03em; }
.kv { display: grid; }
.kv > div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(28, 52, 96, .11); font-size: 14px; }
.kv > div:last-child { border-bottom: 0; }
.kv .k { color: var(--low); }
.kv .v { color: var(--ink); }
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.amt { display: flex; gap: 11px; align-items: center; margin-top: 16px; }
.amt input {
  flex: 1; min-height: 46px; border: 1px solid; border-color: var(--edges);
  background: var(--glass-small);
  -webkit-backdrop-filter: var(--blur-lite); backdrop-filter: var(--blur-lite);
  box-shadow: var(--lift);
  color: var(--ink); border-radius: 11px; padding: 0 12px; font-family: var(--mono); font-size: 16px;
}
.filters { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.fgroup { display: flex; align-items: center; gap: 12px; }
.fgroup > span { color: #1E2B44; font-size: 12px; font-weight: 600; }
.seg {
  display: inline-flex; border-radius: 12px; padding: 4px; gap: 6px;
  background: var(--glass-small); border: 1px solid; border-color: var(--edges);
  -webkit-backdrop-filter: var(--blur-lite); backdrop-filter: var(--blur-lite);
  box-shadow: var(--lift);
}
.seg button {
  min-height: 44px; padding: 0 15px; border: 0; border-radius: 8px; background: transparent;
  color: var(--mid); font-family: var(--body); font-size: 13px; cursor: pointer;
}
.seg button:hover { color: var(--ink); background: rgba(255,255,255,.26); }
/* Selected, not primary. Solid blue is reserved for the one action a page
   wants you to take; a filter that is merely on should not shout as loudly as
   "Open markets". */
.seg button[aria-pressed="true"] {
  background: rgba(255,255,255,.72); color: #12409E; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 8px rgba(24, 44, 12, .10);
}

.chips { display: flex; gap: 9px; margin-top: 12px; flex-wrap: wrap; }
.chips button {
  min-height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid; border-color: var(--edges);
  background: var(--glass-small); -webkit-backdrop-filter: var(--blur-lite); backdrop-filter: var(--blur-lite); box-shadow: var(--lift);
  color: var(--mid); font-family: var(--mono); font-size: 12.5px; cursor: pointer;
}
.chips button:hover, .chips button.on { border-color: var(--blue); color: var(--blue); }
.quote {
  margin-top: 13px; padding: 13px; border-radius: 11px; font-size: 13.5px; color: #21304A;
  background: linear-gradient(150deg, rgba(226,236,255,.55), rgba(226,236,255,.34));
  border: 1px solid rgba(255,255,255,.5); box-shadow: inset 0 1px 0 0 rgba(255,255,255,.6);
}
.quote b { color: var(--ink); font-family: var(--mono); }

.res { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 550; }
.res.yes { background: rgba(224, 234, 255, .9); color: #1544C4; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.res.no { background: rgba(255, 227, 234, .9); color: #C21B45; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.res.open { background: rgba(255, 255, 255, .62); color: var(--mid); font-family: var(--mono); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }

table.tbl { width: 100%; border-collapse: collapse; }
/* A five-column table with a 44px button in the last cell is 375px of
   min-content, and a phone is 390 with gutters. It scrolls inside this box; the
   page itself never scrolls sideways. */
.tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tbl th { text-align: left; font-family: var(--mono); font-size: 11.5px; color: var(--mid); font-weight: 400; padding: 0 10px 12px 0; text-transform: uppercase; letter-spacing: .08em; }
/* A table is content, and content on this site lives on a surface. Left on the
   raw blocks it was the one block on the page with nothing under it. */
.panel > table.tbl tr:first-child td { border-top: 0; }
table.tbl td { border-top: 1px solid rgba(28, 52, 96, .11); padding: 13px 10px 13px 0; font-size: 14px; }
.empty { color: var(--low); padding: 28px 0; text-align: center; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: rgba(10, 18, 32, .78); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff; border-radius: 13px; padding: 12px 17px;
  font-size: 14px; opacity: 0; pointer-events: none; z-index: 70;
  transition: opacity .18s ease, transform .18s ease; box-shadow: 0 10px 30px rgba(11,15,20,.18);
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(-4px); }

@media (max-width: 900px) {
  .hero__in { padding: 68px 18px 90px; }
  .mk { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .nav__in { flex-wrap: wrap; }
  /* Its own row, always. Sharing a line with the balance put a number in the
     middle of the navigation, which is neither a link nor a heading. */
  .nav__links { order: 3; flex: 0 0 100%; margin-left: 0; overflow-x: auto; }
  #bal { margin-left: auto; }
  .grid { grid-template-columns: 1fr; }
}


/* the markets workspace ---------------------------------------------------- */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mhead h2 .count { font-family: var(--body); font-size: 15px; font-weight: 400; color: var(--low); letter-spacing: 0; }
/* One surface, two rows, a divider between them, and everything on it lined up
   to the same left edge as the table underneath. */
.toolbar {
  position: relative; isolation: isolate; border-radius: 16px; margin-bottom: 20px;
  background: var(--glass-large);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid; border-color: var(--edges);
  box-shadow: var(--lift-large);
}
.tbrow { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; padding: 14px 16px; }
.tbrow--foot { border-top: 1px solid rgba(255, 255, 255, .34); justify-content: space-between; padding: 11px 16px; }
.tbend { display: flex; align-items: center; gap: 18px; }
.toolbar .filters { margin-bottom: 0; }
/* Inside the toolbar the surface IS the backdrop, so the labels drop their own
   chips. Two glass layers stacked on the same 12px word is what made this
   corner of the page look busy however well spaced it was. */
.toolbar .fgroup > span::before, .toolbar .sortbox > span::before, .toolbar .shown::before { content: none; }
.toolbar .fgroup, .toolbar .sortbox, .toolbar .shown { margin-left: 0; }
.toolbar .fgroup > span, .toolbar .sortbox > span { margin-right: 0; }
.search input {
  width: 240px; height: 40px; padding: 0 12px; border-radius: 10px;
  border: 1px solid; border-color: var(--edges); color: var(--ink);
  background: var(--glass-small);
  -webkit-backdrop-filter: var(--blur-lite); backdrop-filter: var(--blur-lite);
  box-shadow: var(--lift);
  font-family: var(--body); font-size: 13px;
}
.search input::placeholder { color: var(--low); }

.shown { margin: 0; color: #1E2B44; font-size: 13px; font-weight: 500; }
.sortbox { display: inline-flex; align-items: center; gap: 11px; color: #1E2B44; font-size: 12px; font-weight: 600; }
.sortbox select {
  height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid; border-color: var(--edges);
  background: var(--glass-small); color: var(--ink);
  -webkit-backdrop-filter: var(--blur-lite); backdrop-filter: var(--blur-lite);
  box-shadow: var(--lift);
  font-family: var(--body); font-size: 13px; font-weight: 500;
}
.mgroup + .mgroup { margin-top: 26px; }
/* The group title belongs INSIDE the table it heads. Floating above it as a
   separate pill, it read as a stray label rather than the heading of the thing
   directly beneath it. */
.lgroup, .ghead {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 14px; font-weight: 600; color: #1D2B3D; letter-spacing: -0.008em;
}
.lgroup {
  padding: 15px 16px 13px; border-bottom: 1px solid rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .26);
}
.lgroup .count, .ghead .count { color: var(--mid); font-size: 12px; font-weight: 500; }
.ghead { margin: 0 0 12px; padding: 0 2px; }

/* the list ----------------------------------------------------------------- */
/* Seven columns, one grid template shared by the header and every row, so a
   column cannot drift between them the way it does when a header is styled
   separately from its rows. */
.ltable { border-radius: 14px; overflow: hidden; }
.lhead, .lrow {
  display: grid; grid-template-columns: 84px 1fr 1fr 132px 96px 172px 104px;
  gap: 14px; align-items: center; padding: 0 16px;
}
.lhead { height: 38px; background: rgba(255,255,255,.34); border-bottom: 1px solid var(--edge); font-size: 12px; font-weight: 500; color: var(--mid); }
.lhead span:not(:first-child):not(:nth-child(6)) { text-align: right; }
.lrow { min-height: 64px; border-top: 1px solid rgba(28, 52, 96, .09); color: inherit; }
.lrow:first-of-type { border-top: 0; }
.lrow:hover { background: rgba(255,255,255,.30); text-decoration: none; }
.lrow:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.lrow .c { min-width: 0; }
/* The label is a DIRECT child of the cell. Selecting every <i> in the cell
   also hid the two <i> fills inside the pool bar, which left a grey stub where
   the split should be. */
.lrow .c > i { display: none; }
.lrow .tk { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.lrow .av { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 7px; }
.lrow .av img { max-width: 18px; max-height: 16px; }
.lrow .av img.full { max-width: none; max-height: none; }
.lrow .av i { font-size: 8px; }
.lrow .n { text-align: right; font-size: 14px; color: #172336; }
.lrow .n b { font-weight: 500; }
.lrow .num.dist { font-weight: 600; }
.lrow .clock { font-family: var(--mono); font-weight: 400; }
.lrow .res { font-size: 12px; font-weight: 600; padding: 3px 9px; }
.lbar { display: flex; align-items: center; gap: 9px; }
.lbar .split { flex: 1; max-width: 64px; }
.lbar .pct { font-size: 12px; font-weight: 500; color: var(--mid); }

/* Below this width seven columns cannot survive, so each row becomes a small
   labelled block rather than seven columns squeezed to nothing. */
@media (max-width: 860px) {
  .lhead { display: none; }
  .lrow {
    grid-template-columns: repeat(2, 1fr); gap: 10px 14px;
    padding: 14px 16px; align-items: start;
  }
  .lrow .tk { grid-column: 1 / -1; }
  .lrow .n, .lrow .sp { text-align: left; }
  .lrow .c > i { display: block; font-style: normal; font-size: 11.5px; color: var(--mid); margin-bottom: 2px; }
  .lbar .split { max-width: none; }
}
@media (max-width: 620px) {
  .tbrow { gap: 12px; }
  .search input { width: 100%; }
  .search { flex: 1; }
}


/* the page header, on the inner pages ------------------------------------- */
/* The same block field as the hero, in a band. It is what makes /markets and
   /portfolio look like the same product as the landing rather than a plain
   table someone bolted on. */
/* Left, and on the same 1140 measure as everything below it. Centred inside a
   1000px box, the page title was both indented ~70px from the content and on a
   different axis to it, which is the loudest thing that says a layout was
   assembled rather than drawn. */
.pagehead { position: relative; text-align: left; }
.pagehead__in { max-width: 1140px; margin: 0 auto; padding: 62px 18px 40px; position: relative; }
.pagehead__in::before {
  content: ''; position: absolute; inset: -24% 0 -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(30% 28% at 24% 76%, rgba(255,255,255,.88) 0%, rgba(255,255,255,.44) 55%, rgba(255,255,255,0) 100%),
    radial-gradient(46% 58% at 26% 52%, rgba(255,255,255,.74) 0%, rgba(255,255,255,.34) 46%, rgba(255,255,255,0) 78%);
}
.pagehead h1 {
  font-family: var(--display); font-weight: 900; letter-spacing: -0.04em;
  font-size: clamp(30px, 4.6vw, 50px); line-height: 1.05;
  text-shadow: 0 2px 26px rgba(255, 255, 255, .8);
}
.pagehead h1 .count { font-family: var(--body); font-size: 15px; font-weight: 500; color: #38424F; letter-spacing: 0; vertical-align: middle; }
.pagehead p {
  margin: 12px 0 0; max-width: 56ch; color: #1B2536; font-size: 15.5px; line-height: 1.5;
  text-shadow: 0 1px 20px rgba(255, 255, 255, .82);
}
@media (max-width: 620px) { .pagehead__in { padding: 40px 18px 28px; } }


/* Glass costs a compositor pass per surface. Where a device says it cannot
   afford animation, drop the blur to a plain translucent fill as well: the
   look degrades, the page stays usable, and nothing depends on the effect. */
@media (prefers-reduced-motion: reduce) {
  .card, .panel, .step, .ltable, .tape, .demo, .nav, .foot, .seg, .btn,
  .search input, .sortbox select, .amt input, .chainpill, .toast, .strip {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .card, .panel, .step, .ltable, .tape { background: rgba(255, 255, 255, .88); }
}


/* Text that sits on the blocks, not on glass ------------------------------- */
/* Section headings, group titles and the small control labels have no panel
   under them. They get the same halo the hero uses: cheaper than giving every
   caption its own glass chip, and it keeps the field visible behind them. */
/* Text with no panel under it.
   Two dead ends before this one. A halo drawn on the GLYPHS made every letter
   carry a white outline and looked stamped on. Replacing it with a patch that
   was blurred by its own `filter` fixed the stamping and introduced something
   worse: a soft-edged smudge with no shape, which around three words of label
   reads as a smear rather than a surface.
   So it is a real chip: the same glass as everything else on the page, with a
   crisp 1px edge and a defined radius. Tidy at any size, and it stops being a
   special effect and becomes part of the same material. */
.softbg { position: relative; isolation: isolate; text-shadow: none; }
.softbg::before {
  content: ''; position: absolute; inset: -5px -11px; z-index: -1; pointer-events: none;
  border-radius: 999px;
  background: var(--glass-small);
  -webkit-backdrop-filter: var(--blur-lite); backdrop-filter: var(--blur-lite);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.62),
    inset 0 0 0 1px rgba(255,255,255,.34),
    0 3px 12px 0 rgba(24, 44, 12, .09);
}

/* ONE plaque for a whole section head, not three stacked boxes. An eyebrow, a
   heading and a caption are one thing; chipping each of them separately was
   tidy per element and cluttered as a group. */
.head, .sec > .sub.loose,
.shown, .fgroup > span, .sortbox > span {
  position: relative; isolation: isolate; text-shadow: none;
}
.head::before, .sec > .sub.loose::before,
.shown::before, .fgroup > span::before,
.sortbox > span::before {
  content: ''; position: absolute; inset: -5px -11px; z-index: -1; pointer-events: none;
  border-radius: 999px;
  background: var(--glass-label);
  -webkit-backdrop-filter: var(--blur-lite); backdrop-filter: var(--blur-lite);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.62),
    inset 0 0 0 1px rgba(255,255,255,.34),
    0 3px 12px 0 rgba(24, 44, 12, .09);
}
/* A block that wraps is a PANEL, not a pill with a pseudo-element behind it.
   The pseudo hung 20px to the left of its own text, so the plaque's edge sat
   20px outside the column every card below it lines up to. Real padding puts
   the box on the grid and the text inside it. */
.head, .sec > .sub.loose, .empty {
  padding: 17px 20px 19px; border-radius: 16px;
  background: var(--glass-label);
  -webkit-backdrop-filter: var(--blur-lite); backdrop-filter: var(--blur-lite);
  border: 1px solid; border-color: var(--edges);
  box-shadow: var(--lift);
}
.head::before, .sec > .sub.loose::before, .empty::before { content: none; }
.empty { width: -moz-fit-content; width: fit-content; margin: 26px auto; text-align: center; }

/* fit-content, so a panel hugs its words instead of stretching to the column.
   Not inline-block: that puts the eyebrow, heading and caption on ONE line. */
.head, .sec > .sub.loose, .shown {
  display: block; width: -moz-fit-content; width: fit-content; max-width: 100%;
}
.head .sub { max-width: 58ch; margin: 6px 0 0; }
.head .eyebrow { margin-bottom: 8px; }

/* Room for the chips and plaques, which sit outside the text box. */
.sec__head { margin-bottom: 30px; }
.head + * { margin-top: 0; }


.sec .head { margin-bottom: 30px; }

/* And the type itself stays light: the chip carries the contrast now, so the
   weight does not have to. */
.sec h2 { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; color: #1D2B3D; }
.sec .sub { color: #22314A; font-weight: 400; }
.eyebrow { color: #2A3B54; font-weight: 500; letter-spacing: .13em; }

.shown { color: #22314A; font-weight: 450; }
.fgroup > span, .sortbox { color: #22314A; font-weight: 500; }
/* The chip behind a label extends 11px past the text on both sides, so a 12px
   flex gap left one pixel of daylight and the label looked welded to the
   control beside it. Pay the overhang back where it is spent, rather than
   inflating every gap and losing track of why they are odd numbers. */
.fgroup > span, .sortbox > span { margin-right: 11px; }
.fgroup, .sortbox { margin-left: 11px; }
.shown { margin-left: 11px; }
/* A link on the blocks needs a surface, not a halo: blue on blue is the one
   pairing a shadow cannot rescue. */
.sec__head a, main > p > a {
  display: inline-flex; align-items: center; padding: 7px 13px; border-radius: 999px;
  background: var(--glass-small); border: 1px solid; border-color: var(--edges);
  -webkit-backdrop-filter: var(--blur-lite); backdrop-filter: var(--blur-lite);
  box-shadow: var(--lift);
  color: #123E9E; font-size: 13.5px; font-weight: 550; text-shadow: none;
}
.sec__head a:hover, main > p > a:hover { background: rgba(255,255,255,.44); text-decoration: none; }


/* the phone ---------------------------------------------------------------- */
@media (max-width: 700px) {
  /* The heading plaque and the "All markets" pill cannot share a row at this
     width: the pill collapses to three stacked words. */
  .sec__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .head .sub { max-width: none; }
}
@media (max-width: 620px) {
  /* The plaque sits 20px outside its text box, and the page gutter is only
     18px, so at full width it hung 2px past the viewport. Caught by qa, which
     measures the document rather than trusting the eye. */
  .head, .sec > .sub.loose, .empty { padding: 14px 16px 16px; }
  /* A long expiry line ("Ends in 23h 59m · 08 Sep 2026 00:37") is one word too
     wide for a 390px row. Let the value drop under its label rather than push
     the panel sideways. */
  .kv > div { flex-wrap: wrap; gap: 4px 12px; }
  .kv .v { margin-left: auto; }
  /* The chain pill goes. The strip above every page already names the chain,
     and dropping it puts the brand and the balance on one row instead of
     spilling the balance onto its own. */
  .chainpill { display: none; }
  .nav__in { padding: 7px 18px; gap: 10px; }
  .hero__cta .btn { flex: 1; }
  .tbrow--foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .tbend { flex-wrap: wrap; width: 100%; justify-content: space-between; }
  /* Sort and the view toggle fit one row at 390px only just: 170px of select
     plus a 15px-padded segment is 25px too wide and the toggle drops to a line
     of its own. */
  /* Measured, not guessed: the row has 320px and the two controls came to 322.
     A shorter select and a 14px gap put them at 310 and on one line. */
  .sortbox select { max-width: 140px; }
  .seg button { padding: 0 12px; }
  .sortbox { gap: 9px; }
  .tbend { gap: 14px; }
}

/* the wallet control ------------------------------------------------------ */
/* One button in the nav. It is a glass pill like everything else up there,
   and it becomes an address once somebody is connected. */
.wallet { position: relative; display: inline-flex; }
.wallet__btn { min-height: 34px; padding: 0 14px; font-size: 13px; border-radius: 9px; }
.wallet__btn.on { font-family: var(--mono); letter-spacing: -.01em; }
/* Connect is the only control in the nav a finger has to hit, and 34px is under
   every platform's minimum. The nav links already reserve 44, so this matches
   them without changing the button's width.
   It has to sit AFTER the base rule above, not in the earlier mobile block:
   same specificity, so the later declaration wins, and higher up it was
   silently overridden straight back to 34. */
@media (max-width: 620px) {
  .wallet__btn { min-height: 44px; }
}
.wallet__panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: 268px;
  display: grid; gap: 8px; padding: 14px; border-radius: 14px;
  background: var(--glass-nav); border: 1px solid; border-color: var(--edges);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--lift-large);
}
.wallet__addr { font-size: 12.5px; word-break: break-all; color: var(--ink); margin: 0; }
.wallet__note { font-size: 12px; color: var(--mid); margin: 0 0 4px; line-height: 1.45; }
.wallet__panel .btn { width: 100%; min-height: 40px; }
/* A phone bar already carries the brand and the balance; the address is the
   one that gives, since it is one tap away inside the panel anyway. */
@media (max-width: 560px) { .wallet__btn.on { max-width: 104px; overflow: hidden; } }

/* While a page's main container is still empty the footer would sit inside the
   first viewport and then jump off it when the rows or panels arrive - the
   single largest shift left on /markets and /market once the frame and the
   fonts were fixed. Reserve the space until the first render, and only until
   then, so a filtered-down list does not carry a viewport of blank space. */
#list.loading { min-height: 100vh; }
#mk.loading { min-height: 70vh; }

/* /submit. One form, the site's own surfaces. Inputs are glass like a chip,
   44px tall so they are targets on a phone, and the label sits above the field
   because a placeholder is not a label once you have typed. */
.field { display: block; margin-bottom: 16px; }
.field__k { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.field__k i { font-style: normal; font-weight: 400; color: var(--low); }
.field__n { display: block; font-size: 12px; color: var(--low); margin-top: 6px; }
.field input, .field textarea {
  display: block; width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 13px;
  border: 1px solid; border-color: var(--edges); border-radius: 10px;
  background: var(--glass-small); -webkit-backdrop-filter: var(--blur-lite); backdrop-filter: var(--blur-lite);
  color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.5; box-shadow: var(--lift);
}
.field textarea { resize: vertical; min-height: 150px; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.field input::placeholder, .field textarea::placeholder { color: var(--low); }
/* Off screen, not display:none: some bots skip hidden fields and fill the rest. */
.hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

/* /docs. A contents rail and a column of panels. The rail sticks on wide
   screens and becomes a wrapped row of chips on a phone. */
.docs { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; }
.toc { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 2px; padding: 14px; }
.toc b { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--low); margin-bottom: 8px; }
.toc a { display: block; padding: 7px 8px; border-radius: 8px; color: var(--mid); font-size: 13.5px; text-decoration: none; }
.toc a:hover { background: rgba(255,255,255,.35); color: var(--ink); }
.docs__body { display: grid; gap: 14px; min-width: 0; }
.docs article h2 { font-size: 20px; margin: 0 0 12px; letter-spacing: -.01em; }
.docs article h3 { font-size: 15px; margin: 16px 0 8px; }
.docs article p, .docs article li, .docs article dd { font-size: 14.5px; line-height: 1.65; color: var(--ink); }
.docs article p { margin: 0 0 10px; }
.docs article ul, .docs article ol { margin: 0 0 10px 20px; padding: 0; }
.docs article li { margin-bottom: 6px; }
.docs dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0; }
.docs dt { font-weight: 600; font-size: 13.5px; color: var(--ink); padding-top: 2px; }
.docs dd { margin: 0; color: var(--mid); overflow-wrap: anywhere; }
.docs pre { font-family: var(--mono); font-size: 13px; line-height: 1.6; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.5); border: 1px solid var(--edges); overflow-x: auto; margin: 0 0 12px; }
.docs code { font-family: var(--mono); font-size: 12.5px; background: rgba(255,255,255,.45); padding: 1px 5px; border-radius: 5px; overflow-wrap: anywhere; }
.docs .mono { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
.docs details { border-top: 1px solid rgba(28,52,96,.11); padding: 10px 0; }
.docs details:first-of-type { border-top: 0; }
.docs summary { cursor: pointer; font-weight: 600; font-size: 14.5px; min-height: 44px; display: flex; align-items: center; }
.docs details p { margin: 8px 0 0; color: var(--mid); }
.docs .note { border-left: 3px solid var(--blue); padding-left: 12px; color: var(--mid); }
.docs article.event { border-color: rgba(31,94,255,.35); }
@media (max-width: 860px) {
  /* minmax(0, 1fr), not 1fr: a bare 1fr has an auto minimum, and one
     unbreakable token (a contract address, a pre block) widened every article
     to 606px on a 390px phone. */
  .docs { grid-template-columns: minmax(0, 1fr); }
  .docs article { min-width: 0; }
  .toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .toc b { width: 100%; }
  .toc a { padding: 9px 10px; border: 1px solid var(--edges); background: var(--glass-small); }
  .docs dl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .docs dd { margin-bottom: 8px; }
}

/* Five links on a phone: the row scrolls sideways inside itself rather than
   wrapping a label onto two lines or pushing the page wide. */
@media (max-width: 620px) {
  .nav__links { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links a { padding: 0 9px; font-size: 13.5px; }
}

/* Event panel on /docs. */
.evstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 0; }
.evstats div { border: 1px solid var(--edges); border-radius: 10px; padding: 12px 14px; background: rgba(255,255,255,.4); }
.evstats b { display: block; font-size: 26px; letter-spacing: -.02em; }
.evstats span { display: block; font-size: 12px; color: var(--low); margin-top: 2px; }
.evcheck { display: flex; gap: 8px; margin: 6px 0 10px; }
.evcheck input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid; border-color: var(--edges); border-radius: 10px; background: var(--glass-small); font-family: var(--mono); font-size: 13.5px; color: var(--ink); }
.evcheck .btn { min-height: 44px; }
.evresult { border: 1px solid var(--edges); border-radius: 10px; padding: 12px 14px; background: rgba(255,255,255,.4); }
.evrow { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: 13.5px; }
.evrow span { color: var(--mid); }
.evpill { flex: none; font-family: var(--mono); font-size: 11.5px; padding: 3px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.evpill.ok { color: #0F6E2E; border-color: rgba(15,110,46,.35); background: rgba(15,110,46,.08); }
.evpill.no { color: #A33A2A; border-color: rgba(163,58,42,.35); background: rgba(163,58,42,.08); }
.evpill.na { color: var(--low); border-color: var(--edges); }
.evverdict { margin: 10px 0 0; font-weight: 600; font-size: 14px; }
.evverdict.ok { color: #0F6E2E; }
@media (max-width: 620px) { .evstats { grid-template-columns: 1fr; } .evcheck { flex-direction: column; } }




/* ======================================================================
   HEXCOMB additions. Everything above is the CLOSECALL glass system,
   re-tinted; everything below is this site's own furniture.
   ====================================================================== */
.hx-strip { font-size: 12.5px; color: var(--mid); background: var(--glass-label); backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite); border-bottom: 1px solid var(--line); }
.hx-strip__in { max-width: 1140px; margin: 0 auto; padding: 8px 18px; }
.hx-strip b { color: var(--ink); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; background: var(--lime); color: var(--lime-ink); }
.pill.quiet { background: var(--glass-label); color: var(--mid); border: 1px solid var(--line); }
.pill.designed { background: #FFF4CF; color: #5E4300; }
.hx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .hx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hx-grid { grid-template-columns: 1fr; } }
.feat { padding: 20px 22px; border-radius: var(--r); background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--lift); border: 1px solid; border-color: var(--edges); }
.feat .hex { width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 12px; }
.feat h3 { font-size: 16px; margin-bottom: 6px; }
.feat p { margin: 0; color: var(--mid); font-size: 14px; }
.feat .st { margin-top: 12px; }
.hx-sec { padding: 56px 0 8px; }
.hx-sec h2 { font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -0.03em; margin-bottom: 8px; }
.hx-sec .sub { color: var(--mid); max-width: 66ch; margin: 0 0 22px; }
.two { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; align-items: start; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.steps li { position: relative; padding: 12px 14px 12px 48px; border-radius: 12px; background: var(--glass-small); border: 1px solid; border-color: var(--edges); color: var(--mid); font-size: 14px; }
.steps li::before { counter-increment: s; content: counter(s, decimal-leading-zero); position: absolute; left: 14px; top: 12px; font-family: var(--mono); color: var(--blue); font-size: 12px; letter-spacing: .06em; }
.steps li b { color: var(--ink); }
.why { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 640px) { .why { grid-template-columns: 1fr; } }
.why div { padding: 16px 18px; border-radius: 12px; background: var(--glass-small); border: 1px solid; border-color: var(--edges); font-size: 14px; color: var(--mid); }
.why b { display: block; color: var(--ink); margin-bottom: 4px; }
.cta-band { margin: 56px auto 70px; text-align: center; padding: 34px 22px; border-radius: 18px; background: var(--glass-large); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--lift-large); border: 1px solid; border-color: var(--edges); }
.cta-band h2 { font-family: var(--display); font-weight: 900; letter-spacing: -0.04em; font-size: clamp(26px, 4vw, 40px); margin-bottom: 10px; }
.cta-band p { color: var(--mid); margin: 0 auto 18px; max-width: 58ch; }
.cta-band .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* the terminal, on the home page and in the comb ------------------------ */
.term { font-family: var(--mono); font-size: 13px; line-height: 1.5; background: rgba(15, 26, 10, .92); color: #E6F2D8; border-radius: 12px; padding: 14px 16px; min-height: 220px; max-height: 420px; overflow: auto; box-shadow: var(--lift); }
.term .ln { white-space: pre-wrap; word-break: break-word; }
.term .ln.in { color: var(--lime); }
.term .ln.dim { color: #93A88A; }
.term form { display: flex; gap: 8px; margin-top: 8px; }
.term input { flex: 1; background: transparent; border: 0; border-top: 1px solid rgba(255,255,255,.12); color: #fff; font: inherit; padding: 8px 0 0; outline: none; }
.term input::placeholder { color: #7E9273; }

/* the comb: the workbench --------------------------------------------- */
.comb { display: grid; grid-template-columns: 220px 1fr; gap: 18px; max-width: 1180px; margin: 22px auto 60px; padding: 0 18px; min-height: 70vh; }
@media (max-width: 800px) { .comb { grid-template-columns: 1fr; } }
.rail { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: var(--r); background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--lift); border: 1px solid; border-color: var(--edges); align-self: start; position: sticky; top: 76px; }
@media (max-width: 800px) { .rail { position: static; flex-direction: row; flex-wrap: wrap; } }
.rail button { text-align: left; background: transparent; border: 0; border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--mid); cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 40px; }
.rail button:hover { background: rgba(255,255,255,.5); color: var(--ink); }
.rail button.on { background: var(--lime); color: var(--lime-ink); font-weight: 600; }
.rail .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--low); padding: 10px 12px 4px; }
.pane { border-radius: var(--r); background: var(--glass-large); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--lift-large); border: 1px solid; border-color: var(--edges); padding: 20px 22px; min-height: 560px; }
.pane h2 { font-size: 20px; margin-bottom: 4px; }
.pane .sub { color: var(--mid); font-size: 13.5px; margin: 0 0 16px; }
.pane .hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.field { display: grid; gap: 6px; margin-bottom: 12px; }
.field label { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--low); }
.field input, .field select, .field textarea { font: inherit; font-size: 14px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-hot); background: rgba(255,255,255,.72); color: var(--ink); min-height: 40px; }
.field textarea { min-height: 110px; resize: vertical; font-family: var(--mono); font-size: 13px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.list { display: grid; gap: 10px; }
.item { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.55); border: 1px solid var(--line); }
.item b { display: block; }
.item small { color: var(--low); font-family: var(--mono); font-size: 11.5px; }
.item .row { gap: 6px; }
.btn.small { padding: 6px 10px; min-height: 32px; font-size: 13px; }
.btn.danger { color: #A62828; border-color: rgba(166,40,40,.4); }
.chat { display: grid; grid-template-rows: 1fr auto; min-height: 480px; }
.msgs { display: grid; gap: 10px; align-content: start; overflow: auto; max-height: 56vh; padding: 4px 2px; }
.msg { max-width: 82%; padding: 10px 14px; border-radius: 14px; font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.msg.me { justify-self: end; background: var(--lime); color: var(--lime-ink); border-bottom-right-radius: 4px; }
.msg.ai { justify-self: start; background: rgba(255,255,255,.72); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg.sys { justify-self: center; background: transparent; color: var(--low); font-family: var(--mono); font-size: 12px; }
.compose { display: flex; gap: 8px; margin-top: 12px; }
.compose textarea { flex: 1; min-height: 44px; max-height: 160px; resize: vertical; font: inherit; font-size: 14px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-hot); background: rgba(255,255,255,.8); }
.code { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .code { grid-template-columns: 1fr; } }
.code textarea { width: 100%; min-height: 320px; font-family: var(--mono); font-size: 13px; padding: 12px; border-radius: 12px; border: 1px solid var(--line-hot); background: rgba(255,255,255,.8); resize: vertical; }
.out { font-family: var(--mono); font-size: 12.5px; background: rgba(15, 26, 10, .92); color: #E6F2D8; border-radius: 12px; padding: 12px 14px; min-height: 320px; white-space: pre-wrap; word-break: break-word; overflow: auto; }
.out .err { color: #FFB4A8; }
.reader { font-size: 14px; line-height: 1.6; max-height: 50vh; overflow: auto; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,.62); border: 1px solid var(--line); white-space: pre-wrap; word-break: break-word; }
.stat { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--glass-label); border: 1px solid var(--line); color: var(--mid); }
.stat.ok { background: var(--lime); color: var(--lime-ink); border-color: transparent; }
.stat.warn { background: #FFF4CF; color: #5E4300; border-color: transparent; }
.stat.bad { background: #FFE3DE; color: #7A1F12; border-color: transparent; }

/* docs and roadmap ------------------------------------------------------ */
.doc { max-width: 820px; margin: 0 auto; padding: 0 18px 70px; }
.doc .panel { margin-bottom: 18px; }
.doc h2 { font-size: 22px; margin: 34px 0 10px; letter-spacing: -0.02em; }
.doc h3 { font-size: 16px; margin: 20px 0 6px; }
.doc p, .doc li { color: var(--mid); font-size: 14.5px; }
.doc code { font-family: var(--mono); font-size: 12.5px; background: rgba(255,255,255,.7); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line); }
.doc pre { font-family: var(--mono); font-size: 12.5px; background: rgba(15, 26, 10, .92); color: #E6F2D8; padding: 14px 16px; border-radius: 12px; overflow-x: auto; }
.doc table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.doc td, .doc th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--low); }
.phase { display: grid; grid-template-columns: 90px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.phase .n { font-family: var(--display); font-weight: 900; font-size: 28px; letter-spacing: -0.04em; color: var(--blue); }
.phase h3 { margin: 2px 0 8px; font-size: 18px; }
.phase ul { margin: 8px 0 0; padding-left: 18px; }
.panel { padding: 20px 22px; border-radius: var(--r); background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--lift); border: 1px solid; border-color: var(--edges); }
.hexmark { display: inline-block; vertical-align: middle; }
.doc .title, .title { font-family: var(--display); font-weight: 900; letter-spacing: -0.045em; line-height: 1.02; margin: 6px 0 12px; }
.doc .lead { font-size: 17px; color: var(--mid); margin: 0 0 8px; }
.doc .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.doc .lead { text-align: left; margin-left: 0; }

/* tables scroll sideways on a phone instead of breaking the page: the table
   stays a table, its box scrolls, and cells keep a floor width so a column
   never collapses to one word per line */
.doc table { display: block; overflow-x: auto; max-width: 100%; }
.doc td, .doc th { min-width: 120px; }
.doc td:first-child, .doc th:first-child { min-width: 90px; }

/* the phone pass ------------------------------------------------------- */
@media (max-width: 600px) {
  .hx-strip .more { display: none; }
  .hx-strip__in { padding: 7px 14px; }
  .pane { min-height: 0; padding: 16px 14px; }
  .item { flex-wrap: wrap; }
  .item > div:first-child { flex: 1 1 100%; }
  .item .row { flex: 1 1 100%; justify-content: flex-start; }
  .item .row .btn { flex: 1 1 auto; text-align: center; }
  .field textarea { min-height: 90px; }
  .compose { flex-wrap: wrap; } .compose .btn { width: 100%; }
  .code textarea, .out { min-height: 220px; }
  .rail { padding: 8px; gap: 3px; }
  .rail button { padding: 8px 10px; min-height: 38px; font-size: 13.5px; }
  .rail .k { flex: 1 1 100%; padding: 6px 10px 2px; }
  .cta-band { margin: 40px auto 50px; padding: 26px 16px; }
  .hx-sec { padding: 40px 0 6px; }
  .two { gap: 16px; }
  .term { min-height: 180px; }
}
@media (max-width: 800px) {
  .comb { margin-top: 14px; }
}
@media (max-width: 600px) { .doc td, .doc th { white-space: nowrap; min-width: 0; } }

/* chat rendering, the board, the on-chain cell -------------------------- */
.msg.ai p { margin: 0 0 8px; } .msg.ai p:last-child { margin-bottom: 0; }
.msg.ai ul, .msg.ai ol { margin: 4px 0 8px; padding-left: 20px; }
.msg.ai code { font-family: var(--mono); font-size: 12.5px; background: rgba(30,60,20,.08); padding: 1px 5px; border-radius: 5px; }
.msg.ai pre.md-code { font-family: var(--mono); font-size: 12.5px; background: rgba(15, 26, 10, .92); color: #E6F2D8; padding: 10px 12px; border-radius: 10px; overflow-x: auto; margin: 6px 0 8px; position: relative; }
.msg.ai pre.md-code[data-lang]::before { content: attr(data-lang); position: absolute; right: 10px; top: 6px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #93A88A; }
.cursor::after { content: '▍'; color: var(--blue); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.board { display: grid; gap: 6px; }
.brow { display: grid; grid-template-columns: 72px 1fr auto; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.55); border: 1px solid var(--line); font-size: 14px; }
.brow span { font-family: var(--mono); letter-spacing: .06em; color: var(--low); font-size: 12px; }
.brow b { font-variant-numeric: tabular-nums; }
.brow small { color: var(--low); font-family: var(--mono); font-size: 11px; }
.brow small.stale { color: #8A6A00; }
.tk { color: var(--low); font-size: 12.5px; min-height: 16px; display: block; }
#walletpill { font-family: var(--mono); font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--glass-label); border: 1px solid var(--line); }

.msg.ai pre.md-code { cursor: copy; }
.msg.ai pre.md-code:hover::after { content: 'click to copy'; position: absolute; right: 10px; bottom: 6px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #93A88A; }
.compose label.btn { min-width: 44px; text-align: center; }

/* ======================================================================
   Precision pass, 2026-09-10. One accent, solid surfaces for content,
   glass only where something scrolls underneath it, icons instead of
   emoji, and a first fold that puts the product and its action in view.
   ====================================================================== */
:root {
  --surface: rgba(255, 255, 255, .90);
  --surface-2: rgba(255, 255, 255, .72);
  --hair: 1px solid var(--line);
  --shadow-1: 0 1px 2px rgba(24, 44, 12, .06), 0 8px 24px rgba(24, 44, 12, .06);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 160ms; --t-base: 240ms;
}
/* the strip is one line and stays out of the way */
.hx-strip { font-size: 12.5px; }
.hx-strip__in { padding: 6px 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the nav: 44px targets, and on a phone one scrolling row instead of a wrapped block */
.nav__links a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 8px; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.nav__links a:hover { background: rgba(255,255,255,.55); text-decoration: none; }
@media (max-width: 800px) {
  .nav__in { row-gap: 2px; }
  .nav__links { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; width: 100%; gap: 2px; padding-bottom: 2px; }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links a { padding: 0 9px; white-space: nowrap; }
  .chainpill { display: none; }
}
/* content surfaces: solid paper with a hairline, no blur. Glass stays on the
   nav, where page content slides underneath it, and nowhere else. */
.feat, .why div, .steps li, .panel, .cta-band, .pane, .rail, .item, .term-frame {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: var(--surface); border: var(--hair); box-shadow: var(--shadow-1);
}
.why div, .steps li, .item { box-shadow: none; background: var(--surface-2); }
.feat { transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.feat:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(24,44,12,.06), 0 14px 32px rgba(24,44,12,.09); }
/* headings and leads that sit straight on the field carry a paper glow so
   the moving prisms never fight the letters */
.hx-sec h2, .hx-sec .sub, .hero .lead, .hero .eyebrow { text-shadow: 0 0 18px rgba(246,248,242,.95), 0 0 6px rgba(246,248,242,.9); }
.hero .lead { max-width: 56ch; }
/* icons replace emoji: one stroke weight, one size */
.ico { width: 22px; height: 22px; display: inline-block; vertical-align: middle; color: var(--deep, #4F8A0B); }
.feat .hex { width: 40px; height: 40px; border-radius: 10px; background: var(--blue-wash); display: grid; place-items: center; margin-bottom: 14px; }
.feat .hex .ico { color: var(--blue); }
.rail button .ico { width: 18px; height: 18px; color: currentColor; opacity: .85; }
.rail button.on .ico { opacity: 1; }
/* the proof line under the hero: real numbers from the chain, nothing else */
.proof { display: inline-flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; margin-top: 18px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--low); text-shadow: 0 0 14px rgba(246,248,242,.95); }
.proof b { color: var(--ink); font-weight: 500; }
.proof i { font-style: normal; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); display: inline-block; margin-right: 6px; box-shadow: 0 0 0 3px rgba(185,242,60,.28); }
/* the docs get a table of contents */
.toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 6px; }
.toc a { font-size: 12.5px; padding: 6px 10px; border-radius: 999px; border: var(--hair); background: var(--surface-2); color: var(--mid); min-height: 32px; display: inline-flex; align-items: center; }
.toc a:hover { color: var(--blue); text-decoration: none; border-color: var(--blue); }
/* focus is visible on every control, in the accent, with room */
.btn:focus-visible, .rail button:focus-visible, .nav__links a:focus-visible, .toc a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
/* interaction timing, one curve everywhere */
.btn { transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.btn:active:not(:disabled) { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .feat:hover { transform: none; } .btn:active { transform: none; } }
.nav .btn.small { min-height: 40px; padding: 0 14px; }
.rail button { min-height: 44px; }
/* the seventh cell is the differentiator: it takes the full row instead of sitting alone */
@media (min-width: 861px) { .hx-grid .feat:nth-child(7) { grid-column: 1 / -1; display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; align-items: start; } .hx-grid .feat:nth-child(7) .hex { margin: 0; } .hx-grid .feat:nth-child(7) h3 { grid-column: 2; } .hx-grid .feat:nth-child(7) p { grid-column: 2; max-width: 70ch; } }
/* the footer disclaimer is its own quiet row */
.foot__in > span:first-child { flex: 1 1 100%; font-size: 12.5px; color: var(--low); }
@media (max-width: 600px) { .hero .eyebrow { font-size: 10.5px; letter-spacing: .12em; } }

/* fixes from the 2026-09-10 review ------------------------------------ */
/* the docs table of contents is a row of chips; the older sticky-column rule is overridden here */
.toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 0; }
.toc a { display: inline-flex; width: auto; }
/* text pages sit on a paper sheet, so no paragraph ever lies on the moving prisms */
.doc { background: rgba(255, 255, 255, .94); border: var(--hair); border-radius: 18px; padding: 26px 28px 40px; margin-top: 18px; margin-bottom: 40px; box-shadow: var(--shadow-1); max-width: 880px; }
@media (max-width: 600px) { .doc { padding: 18px 16px 30px; border-radius: 14px; margin-left: 10px; margin-right: 10px; } }
/* frames are dimmer and more opaque, so type reads first and the field second */
:root { --surface: rgba(255, 255, 255, .96); --surface-2: rgba(255, 255, 255, .86); }
.feat, .panel, .cta-band, .pane, .rail { background: var(--surface); }
.doc .panel { background: rgba(247, 249, 244, 1); box-shadow: none; }
.hero__in { background: rgba(246, 248, 242, .66); border-radius: 26px; padding: 26px 22px 28px; border: 1px solid rgba(255,255,255,.7); }
@media (max-width: 600px) { .hero__in { padding: 18px 12px 22px; border-radius: 18px; } }
.hero .eyebrow { background: rgba(255,255,255,.86); }
/* cards are links now: a pointer, a lift, and a trailing action */
a.feat { color: inherit; display: block; cursor: pointer; }
a.feat:hover { text-decoration: none; border-color: rgba(79,138,11,.45); }
a.feat .go { display: block; margin-top: 12px; font-size: 13px; color: var(--blue); font-weight: 600; }
a.feat:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (min-width: 861px) { .hx-grid a.feat:nth-child(7) .go { grid-column: 2; } }
.compose label.btn .ico { width: 20px; height: 20px; color: var(--mid); }
/* an element hidden by attribute stays hidden whatever its display class says */
.btn[hidden], [hidden] { display: none !important; }