/* 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: #F6F7F9;
  --ink: #0A1220;
  /* 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: #2E4057;
  --low: #47576F;
  --line: rgba(28, 52, 96, .12);
  --line-hot: rgba(28, 52, 96, .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(16, 34, 68, .09),
    0 1px 3px 0 rgba(16, 34, 68, .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(16, 34, 68, .10),
    0 2px 6px 0 rgba(16, 34, 68, .05);
  --blue: #1F5EFF;
  --blue-soft: #8FB4FF;
  --blue-wash: #EEF3FF;
  --yes: #1F5EFF;
  --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%, #DCE6FA 0%, rgba(220,230,250,0) 60%),
    linear-gradient(180deg, #EEF2FA 0%, #E4EAF6 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;
  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; }
.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; gap: 16px; flex-wrap: wrap; justify-content: space-between; }

/* 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: 42px; 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, #3B72FF, #1F5EFF); border-color: rgba(20, 60, 170, .5); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 18px rgba(31, 94, 255, .35);
}
.btn.solid:hover { background: linear-gradient(180deg, #5686FF, #2F69FF); color: #fff; }
.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; }
.tape__run { display: flex; gap: 26px; padding: 12px 16px; white-space: nowrap; width: max-content; }
.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; }
/* 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(16, 34, 68, .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: 34px; 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(16, 34, 68, .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; }
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(16, 34, 68, .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(16, 34, 68, .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 says these are
     live reads on Robinhood 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; }
.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; } }