/* IPOYOGI site: the app's lime/forest language (Source/static/yogi-ui.css), dark and in 3D. */
@font-face { font-family: "Yogi Sans"; src: url(fonts/dm-sans-regular.woff2) format("woff2"), url(fonts/dm-sans-regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Yogi Sans"; src: url(fonts/dm-sans-semibold.woff2) format("woff2"), url(fonts/dm-sans-semibold.ttf) format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Yogi Sans"; src: url(fonts/dm-sans-bold.woff2) format("woff2"), url(fonts/dm-sans-bold.ttf) format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --bg: #08110a; --bg-2: #0d1a10; --panel: rgba(255, 255, 255, .045); --line: rgba(183, 236, 125, .14);
  --text: #e9f2e4; --ink: #ffffff; --muted: #a3b39c;
  --lime: #b7ec7d; --lime-strong: #9edd5c; --forest: #1c4a2b; --forest-strong: #143720;
  --focus: 0 0 0 4px rgba(183, 236, 125, .6);
  --accent: #b7ec7d; color-scheme: dark;
  --font: "Yogi Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 10px; }
h1, h2, h3 { color: var(--ink); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 16px; }
h1 { font-size: clamp(40px, 9vw, 96px); font-weight: 700; }
h2 { font-size: clamp(32px, 6vw, 64px); font-weight: 700; }
h3 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
p { margin: 0 0 12px; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; position: relative; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--lime); color: var(--forest-strong); padding: 8px 14px; border-radius: 999px; z-index: 50; }
.skip:focus { left: 16px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.lead { font-size: clamp(17px, 2.2vw, 21px); color: var(--muted); max-width: 680px; }
.muted { color: var(--muted); }
.lime { color: var(--accent); }
.glow { background: linear-gradient(100deg, var(--lime), #e8ffc9 45%, var(--lime-strong)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Header */
/* Header: a floating pill (4 links + one button) over a calm page. */
.top { position: fixed; inset: 10px 0 auto; z-index: 20; pointer-events: none; }
.top .wrap { pointer-events: auto; display: flex; align-items: center; gap: 10px; min-height: 60px; width: min(1120px, calc(100% - 20px)); padding: 0 8px 0 16px; border-radius: 999px;
  background: rgba(8, 17, 10, .66); -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px); box-shadow: inset 0 0 0 1px var(--line), 0 16px 40px -22px rgba(0, 0, 0, .8); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 20px; letter-spacing: -.02em; margin-right: auto; }
.brand img { width: 36px; height: 36px; border-radius: 50%; background: #fff; }
.nav { display: flex; gap: 4px; }
.nav a { text-decoration: none; color: var(--muted); font-size: 15px; font-weight: 500; padding: 8px 12px; border-radius: 999px; min-height: 40px; display: inline-flex; align-items: center; }
.nav a:hover { color: var(--ink); background: var(--panel); }
.top .btn { min-height: 40px; padding: 10px 18px; font-size: 14px; }
/* Phones: only the first link (IPO Data) stays in the header. */
.nav a, .top .btn { white-space: nowrap; }
@media (max-width: 380px) { .top .wrap { gap: 6px; } .brand { font-size: 17px; gap: 8px; } .brand img { width: 30px; height: 30px; } .top .btn { padding: 10px 12px; font-size: 13px; } .nav a { padding: 8px 6px; font-size: 13px; } }
main { padding-top: 80px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 14px 26px; border-radius: 999px; font: 600 16px/1 var(--font); text-decoration: none; border: 0; cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.btn-lime { background: var(--lime); color: var(--forest-strong); box-shadow: 0 10px 40px rgba(183, 236, 125, .25); }
.btn-lime:hover { transform: translateY(-2px); box-shadow: 0 16px 50px rgba(183, 236, 125, .4); }
.btn-ghost { background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--lime); }
.btn-primary { background: var(--lime); color: var(--forest-strong); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

section { padding: 110px 0; position: relative; }

/* Hero: one headline and one button, the app screen in a frame below, WebGL coins around it */
.hero { padding: 48px 0 88px; overflow: hidden; perspective: 1400px; }
/* Layers: dark vignette (1) < app scene (2) < coins (3) < headline text (4), so coins fly over the app but never over the words. */
#coins { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
/* Phones: text runs edge to edge, so coins glow softly behind it and come in at full strength over the app window. */
@media (max-width: 979px) { #coins { -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .45) 0 66%, #000 80%); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .45) 0 66%, #000 80%); } }
.hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 80% at 50% 45%, transparent 45%, rgba(8, 17, 10, .55)); pointer-events: none; z-index: 1; }
/* A soft shadow keeps the headline readable when a coin drifts behind it. */
.hero h1, .hero .lead, .hero .note, .invite-pill { text-shadow: 0 2px 18px rgba(8, 17, 10, .95), 0 0 2px rgba(8, 17, 10, .8); }
.hero .glow { text-shadow: none; filter: drop-shadow(0 2px 14px rgba(8, 17, 10, .9)); }
.hero .wrap { z-index: auto; display: grid; gap: 48px; }
.hero-copy { position: relative; z-index: 4; max-width: 1120px; margin: 0 auto; text-align: center; }
.hero-copy h1 { font-size: clamp(40px, 7vw, 88px); } .hero-copy .lead { margin: 0 auto; } .hero-copy .actions { justify-content: center; }
.hero .scene { position: relative; z-index: 2; }
.invite-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: rgba(183, 236, 125, .08); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; color: var(--text); margin-bottom: 24px; }
.invite-pill b { background: var(--lime); color: var(--forest-strong); border-radius: 999px; padding: 4px 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }





/* Hero scene: one app window with glass cards floating at different depths */
.scene { width: 100%; max-width: 1040px; margin: 0 auto; perspective: 1600px; }
.scene-inner { position: relative; transform-style: preserve-3d; transform: rotateX(calc(10deg - var(--my, 0) * 6deg)) rotateY(calc(var(--mx, 0) * 8deg)); transition: transform .8s var(--ease); }
.device { margin: 0; border-radius: 18px; overflow: hidden; background: #0d1a10; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 60px 120px rgba(0, 0, 0, .6), 0 0 120px rgba(183, 236, 125, .12); }
:root[data-theme="light"] .device { background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 40px 90px rgba(20, 40, 20, .2); }
.scene-inner .hero-board { position: absolute; left: -4%; bottom: -8%; width: min(360px, 42%); transform: translateZ(90px); }
.shot-note { margin: 18px 0 0 auto; max-width: 54%; text-align: right; font-size: 13px; color: var(--muted); }
@media (max-width: 699px) { .scene-inner .hero-board, .scene-inner .float { display: none; } .shot-note { max-width: none; text-align: center; } }
.window { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 60px 120px rgba(0, 0, 0, .65), 0 0 120px rgba(183, 236, 125, .12); }
.chrome { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; background: #eceee9; }
.chrome i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.chrome i:nth-child(2) { background: #febc2e; } .chrome i:nth-child(3) { background: #28c840; }
.chrome span { margin: 0 auto; padding-right: 50px; font-size: 12px; font-weight: 600; color: #6b7068; }
.float { position: absolute; transform-style: preserve-3d; }
.float > div { padding: 12px 16px; border-radius: 16px; background: rgba(14, 26, 17, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(183, 236, 125, .35), 0 24px 50px rgba(0, 0, 0, .5); animation: bob 6s ease-in-out infinite; white-space: nowrap; }
.float small { display: block; font-size: 12px; color: var(--muted); letter-spacing: .02em; }
.float b { font-size: clamp(14px, 1.6vw, 20px); color: var(--ink); letter-spacing: -.02em; }
.float em { font-style: normal; color: var(--accent); font-size: .8em; margin-left: 4px; }
.lime-card > div { background: var(--lime); box-shadow: 0 24px 60px rgba(183, 236, 125, .35); }
.lime-card small { color: var(--forest); } .lime-card b { color: var(--forest-strong); }
.f1 { top: 10%; right: -5%; transform: translateZ(160px); }
.f4 { bottom: 12%; right: -3%; transform: translateZ(190px); } .f4 > div { animation-delay: -3s; }
@keyframes bob { 50% { transform: translateY(-10px); } }



/* Invite */
.invite { perspective: 1400px; }
.invite-card { position: relative; border-radius: 32px; padding: 40px 20px; background: radial-gradient(120% 120% at 0% 0%, #1f5531, #0d2414 60%); box-shadow: inset 0 0 0 1px rgba(183, 236, 125, .35), 0 50px 120px rgba(0, 0, 0, .5); transform: rotateX(calc((1 - var(--p, 1)) * 18deg)); transform-origin: 50% 100%; display: grid; gap: 32px; }
@media (min-width: 900px) { .invite-card { grid-template-columns: 1fr 1fr; padding: 56px; } }
.invite-card .seal { width: 96px; height: 96px; border-radius: 28px; box-shadow: 0 20px 50px rgba(0, 0, 0, .4); margin-bottom: 20px; }
form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
input, select { min-height: 50px; border-radius: 14px; border: 1px solid rgba(183, 236, 125, .3); background: rgba(0, 0, 0, .3); color: var(--ink); padding: 12px 16px; font: 400 16px var(--font); }
input::placeholder { color: #7f8f78; }
.form-note { font-size: 13px; color: var(--muted); }
.form-status { min-height: 1.4em; font-size: 14px; color: var(--accent); }

/* FAQ */
.faq { margin-top: 40px; display: grid; gap: 12px; max-width: 860px; }
details { background: var(--panel); border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); }
summary { cursor: pointer; padding: 20px 22px; font-weight: 600; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 16px; min-height: 48px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--accent); transition: transform .3s var(--ease); }
details[open] summary::after { transform: rotate(45deg); }
details > div { padding: 0 22px 20px; color: var(--muted); }
.notice { border-radius: 18px; padding: 16px 20px; font-size: 14px; color: var(--muted); margin-top: 28px; box-shadow: inset 0 0 0 1px var(--line); max-width: 860px; }

/* Footer: links in columns, then the trust block (contact, grievances, market-risk line). */
footer { padding: 56px 0; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); }
footer .wrap { display: grid; gap: 20px; }
.foot-grid { display: grid; gap: 28px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.4fr repeat(3, 1fr) 1.3fr; } }
.foot-brand { grid-column: 1 / -1; } @media (min-width: 900px) { .foot-brand { grid-column: auto; } }
.foot-brand .brand { font-size: 18px; } .foot-brand p { margin-top: 8px; max-width: 300px; }
footer nav { display: flex; flex-direction: column; align-items: flex-start; }
.foot-h { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
footer a { color: var(--muted); text-decoration: none; } footer a:hover { color: var(--ink); }
.foot-contact { grid-column: 1 / -1; } @media (min-width: 900px) { .foot-contact { grid-column: auto; } }
.foot-contact p { margin: 8px 0 0; } .foot-contact a { color: var(--accent); }
footer .risk { padding: 16px 18px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); margin: 0; }
footer .fine { margin: 0; font-size: 13px; }


/* Planner: slider drives a 3D stack of applicant chips */
.planner { margin-top: 40px; display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .planner { grid-template-columns: 1fr 1fr; } }
.planner-controls { display: grid; gap: 20px; }
.planner-controls > label { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; }
.planner-controls output { font-size: 40px; font-weight: 700; color: var(--accent); letter-spacing: -.03em; }
input[type="range"] { width: 100%; min-height: 32px; padding: 0; border: 0; background: transparent; accent-color: var(--lime); }
.seg { border: 0; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.seg legend { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 8px; padding: 0; }
.seg label { display: block; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.seg span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-weight: 600; cursor: pointer; }
.seg input:checked + span { background: var(--lime); color: var(--forest-strong); }
.seg input:focus-visible + span { box-shadow: var(--focus); }
.planner-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.planner-stats div { background: var(--panel); border-radius: 20px; padding: 16px 12px; box-shadow: inset 0 0 0 1px var(--line); }
.planner-stats strong { display: block; font-size: clamp(20px, 3vw, 30px); color: var(--ink); letter-spacing: -.03em; line-height: 1.1; }
.planner-stats span { font-size: 13px; color: var(--muted); }
.small { font-size: 14px; }
.planner-stage { perspective: 1200px; min-height: 340px; display: grid; place-items: center; overflow: hidden; padding: 90px 0 40px; } /* top room so raised HNI tiles are not cut off */
.chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; transform: rotateX(48deg) rotateZ(-28deg); transform-style: preserve-3d; width: min(78%, 380px); }
.chip { aspect-ratio: 1; border-radius: 16px; background: linear-gradient(150deg, var(--lime), var(--lime-strong)); color: var(--forest-strong); display: grid; place-items: center; font-weight: 700; font-size: 15px; box-shadow: 0 18px 30px rgba(0, 0, 0, .45); transform: translateZ(calc(var(--h, 1) * 14px)); animation: chipIn .5s var(--ease) backwards; animation-delay: calc(var(--i) * 25ms); }
.chip.off { background: var(--panel); color: transparent; box-shadow: inset 0 0 0 1px var(--line); transform: none; animation: none; }
@keyframes chipIn { from { transform: translateZ(160px); opacity: 0; } }


/* Invite perks */
.perks { list-style: none; margin: 8px 0 16px; padding: 0; display: grid; gap: 12px; }
.perks li { padding-left: 30px; position: relative; color: var(--muted); }
.perks li::before { content: "✦"; position: absolute; left: 0; color: var(--accent); }
.perks b { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .chip, .float > div { animation: none; }
  .mobile-cta { transition: none; }
  .scene-inner { transform: rotateX(6deg); }
  .chips, .chip { transform: none; }
}

/* Phones: tilt button, sticky invite */
.tilt-btn { margin-top: 16px; min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 0; background: rgba(183, 236, 125, .12); color: var(--accent); font: 600 14px var(--font); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.tilt-btn::before { content: "📱 "; }
.planner .chip { cursor: pointer; }
.planner-stage { -webkit-tap-highlight-color: transparent; }
.mobile-cta { display: none; }
@media (max-width: 639px) {
  section { padding: 72px 0; }
  .invite-pill { font-size: 13px; }
  .invite-pill b { white-space: nowrap; }
}
@media (max-width: 859px) {
  .mobile-cta { display: inline-flex; position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 30; transform: translateY(140%); transition: transform .45s var(--ease); box-shadow: 0 12px 40px rgba(0, 0, 0, .5), 0 0 30px rgba(183, 236, 125, .3); }
  .mobile-cta.show { transform: none; }
  footer { padding-bottom: 110px; }
}

/* Brokerage calculator page */
.bc-top { padding-top: 64px; }
.bc { display: grid; gap: 20px; margin-top: 36px; align-items: start; }
@media (min-width: 900px) { .bc { grid-template-columns: 1fr 1fr; } }
.bc-form { display: grid; gap: 14px; background: var(--panel); border-radius: 28px; padding: 24px; box-shadow: inset 0 0 0 1px var(--line); }
.bc-form .seg { margin-bottom: 4px; }
.bc-form select { width: 100%; appearance: auto; }
.bc-custom { display: grid; gap: 12px; padding: 14px; border-radius: 18px; background: rgba(183, 236, 125, .06); box-shadow: inset 0 0 0 1px var(--line); }
.bc-custom[hidden] { display: none; }
.bc-out { border-radius: 28px; padding: 24px; background: radial-gradient(120% 120% at 0% 0%, #1f5531, #0d2414 65%); box-shadow: inset 0 0 0 1px rgba(183, 236, 125, .35), 0 40px 100px rgba(0, 0, 0, .4); display: grid; gap: 18px; }
@media (min-width: 900px) { .bc-out { position: sticky; top: 88px; } }
.bc-net span, .bc-two span { display: block; font-size: 14px; color: var(--muted); }
.bc-net strong { display: block; font-size: clamp(40px, 8vw, 64px); color: var(--accent); letter-spacing: -.04em; line-height: 1.05; }
.bc-net strong.neg { color: #f08a89; }
.bc-net small, .bc-two small { color: var(--muted); font-size: 13px; }
.bc-two small { display: block; }
.bc-rank .warn { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 190, 110, .14); color: #ffd79a; font-size: 11px; font-weight: 600; white-space: nowrap; }
.bc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bc-two > div { background: rgba(0, 0, 0, .25); border-radius: 18px; padding: 14px; }
.bc-two b { font-size: 22px; color: var(--ink); letter-spacing: -.02em; }
.bc-rows { margin: 0; display: grid; gap: 0; }
.bc-rows div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.bc-rows dt { color: var(--muted); } .bc-rows dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.bc-note { margin: 0; font-size: 13px; color: var(--muted); }
.bc-note:empty { display: none; }
.bc-src { font-size: 13px; color: var(--accent); }
.bc-rank { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 8px; max-width: 860px; }
.bc-rank button { width: 100%; min-height: 52px; display: grid; grid-template-columns: 28px minmax(90px, 1.2fr) 2fr auto; align-items: center; gap: 12px; padding: 10px 16px; border: 0; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: 500 15px var(--font); text-align: left; cursor: pointer; transition: box-shadow .2s; }
.bc-rank button:hover { box-shadow: inset 0 0 0 1px rgba(183, 236, 125, .45); }
.bc-rank button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--lime); background: rgba(183, 236, 125, .08); }
.bc-rank .rk { color: var(--muted); font-weight: 700; }
.bc-rank li:first-child .rk { color: var(--accent); }
.bc-rank .bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.bc-rank .bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--lime-strong), var(--lime)); transition: width .4s var(--ease); }
.bc-rank b { font-variant-numeric: tabular-nums; color: var(--ink); }
@media (max-width: 520px) { .bc-rank button { grid-template-columns: 24px 1fr auto; } .bc-rank .bar { grid-column: 2 / -1; grid-row: 2; } }

/* Home teaser for the calculator */
.teaser-card { display: block; text-decoration: none; color: inherit; border-radius: 32px; padding: 40px 24px; background: linear-gradient(140deg, rgba(183, 236, 125, .14), rgba(183, 236, 125, .03)); box-shadow: inset 0 0 0 1px rgba(183, 236, 125, .4); transition: transform .4s var(--ease), box-shadow .4s; }
.teaser-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--lime), 0 30px 80px rgba(0, 0, 0, .4); }
.teaser-card .btn { margin-top: 20px; }
@media (min-width: 900px) { .teaser-card { padding: 56px; } }

/* IPO Data: hub, per-IPO pages and the home strip */
.ipo-hero { padding: 48px 0 24px; }
.ipo-sec { padding: 28px 0; }
.ipo-strip { padding: 72px 0 40px; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }
.tagp { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--panel); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.tagp.st-open { background: var(--lime); color: var(--forest-strong); box-shadow: none; }
.tagp.st-open::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--forest-strong); animation: pulse 1.6s ease-in-out infinite; }
.tagp.st-upcoming { color: #ffd79a; box-shadow: inset 0 0 0 1px rgba(255, 190, 110, .4); }
.tagp.st-closed, .tagp.st-allotted { color: var(--text); }
@keyframes pulse { 50% { opacity: .3; } }
.ipo-card-top { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 28px; }
@media (min-width: 820px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile { display: block; text-decoration: none; color: inherit; background: var(--panel); border-radius: 22px; padding: 18px; box-shadow: inset 0 0 0 1px var(--line); }
.tile span { display: block; font-size: 13px; color: var(--muted); }
.tile strong { display: block; font-size: clamp(26px, 4.5vw, 38px); color: var(--ink); letter-spacing: -.03em; line-height: 1.15; }
.tile small { font-size: 13px; color: var(--muted); }
.tile.lime { background: var(--lime); box-shadow: none; }
.tile.lime span, .tile.lime small, .tile.lime strong { color: var(--forest-strong); }
a.tile:hover { box-shadow: inset 0 0 0 1px var(--lime); }
.up { color: var(--accent); font-weight: 600; } .flat { color: var(--muted); font-weight: 600; }
.ipo-two { display: grid; gap: 16px; }
@media (min-width: 900px) { .ipo-two { grid-template-columns: 1fr 1fr; } }
.panel-card { background: var(--panel); border-radius: 26px; padding: 24px; box-shadow: inset 0 0 0 1px var(--line); }
.panel-card h2, .ipo-sec h2 { font-size: clamp(22px, 3vw, 28px); letter-spacing: -.02em; }
.bars { list-style: none; margin: 16px 0 10px; padding: 0; display: grid; gap: 10px; }
.bars li { display: grid; grid-template-columns: minmax(92px, 1fr) 2fr auto; align-items: center; gap: 12px; font-size: 15px; }
.bars.gmp li { grid-template-columns: minmax(92px, 1fr) 2fr auto; grid-template-areas: "n b v" ". t t"; row-gap: 2px; }
.bars.gmp a { grid-area: n; color: var(--text); } .bars.gmp .bar { grid-area: b; } .bars.gmp b { grid-area: v; } .bars.gmp small { grid-area: t; font-size: 12px; color: var(--muted); }
.bars .bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.bars .bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--lime-strong), var(--lime)); }
.bars b { color: var(--ink); font-variant-numeric: tabular-nums; }
.timeline { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; position: relative; }
.timeline li { padding-top: 26px; position: relative; font-size: 14px; color: var(--muted); }
.timeline li::before { content: ""; position: absolute; top: 6px; left: 0; right: -6px; height: 3px; background: var(--line); }
.timeline li::after { content: ""; position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--line); }
.timeline li.done::before { background: var(--lime); }
.timeline li.done::after { background: var(--lime); box-shadow: 0 0 12px rgba(183, 236, 125, .6); }
.timeline b { display: block; color: var(--ink); font-size: 14px; }
.facts { margin: 12px 0 0; display: grid; }
.facts div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.facts dt { color: var(--muted); } .facts dd { margin: 0; color: var(--ink); text-align: right; }
.family-calc { border-radius: 32px; padding: 32px 20px; background: radial-gradient(120% 120% at 0% 0%, #1f5531, #0d2414 65%); box-shadow: inset 0 0 0 1px rgba(183, 236, 125, .35), 0 40px 100px rgba(0, 0, 0, .4); }
@media (min-width: 900px) { .family-calc { padding: 48px; } }
.family-calc label { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; color: var(--ink); font-weight: 600; }
.family-calc output { font-size: 36px; font-weight: 700; color: var(--accent); }
.fam-out { display: grid; gap: 10px; margin: 16px 0; }
@media (min-width: 700px) { .fam-out { grid-template-columns: 1fr 1fr; } }
.fam-out div { background: rgba(0, 0, 0, .25); border-radius: 18px; padding: 16px; }
.fam-out span { display: block; font-size: 13px; color: var(--muted); }
.fam-out b { font-size: clamp(24px, 4vw, 34px); color: var(--ink); letter-spacing: -.03em; }
.ipo-grid { display: grid; gap: 14px; margin-top: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ipo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ipo-grid { grid-template-columns: repeat(3, 1fr); } }
.ipo-card { display: block; text-decoration: none; color: inherit; background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); border-radius: 24px; padding: 20px; box-shadow: inset 0 0 0 1px var(--line); transition: transform .35s var(--ease), box-shadow .35s; }
.ipo-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(183, 236, 125, .5), 0 24px 60px rgba(0, 0, 0, .4); }
.ipo-card[hidden] { display: none; }
.ipo-card h3 { font-size: 19px; margin-bottom: 12px; }
.ipo-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 0; }
.ipo-kv dt { font-size: 12px; color: var(--muted); } .ipo-kv dd { margin: 0; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.ipo-kv small { color: var(--muted); font-weight: 500; }
.ipo-more { display: block; margin-top: 14px; font-size: 14px; color: var(--accent); font-weight: 600; }
.filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.filters button { flex: none; min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 0; background: var(--panel); color: var(--muted); font: 600 14px var(--font); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--lime); color: var(--forest-strong); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .tagp.st-open::before { animation: none; } .ipo-card { transition: none; } }

/* Long-form pages (privacy, 404) */
.doc { max-width: 760px; padding-top: 40px; }
.doc h2 { font-size: 26px; margin-top: 40px; }
.doc li { margin-bottom: 8px; color: var(--muted); }


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .invite-card { transform: none !important; opacity: 1 !important; }
}

/* ---------- Light theme: <html data-theme="light">, set by the header toggle or the device setting ---------- */
:root[data-theme="light"] {
  --bg: #f3f4f1; --bg-2: #e8ebe4; --panel: #ffffff; --line: rgba(28, 74, 43, .14);
  --text: #17201a; --ink: #111813; --muted: #5b6159; --accent: #1c6b3a;
  --focus: 0 0 0 4px rgba(28, 107, 58, .35); color-scheme: light;
}
:root[data-theme="light"] .top .wrap { background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px var(--line), 0 16px 40px -24px rgba(20, 40, 20, .35); }
:root[data-theme="light"] .glow { background: linear-gradient(100deg, #1c4a2b, #2f8a4f 50%, #1c6b3a); -webkit-background-clip: text; background-clip: text; }
:root[data-theme="light"] .hero::after { background: radial-gradient(80% 80% at 50% 45%, transparent 45%, rgba(243, 244, 241, .6)); }
:root[data-theme="light"] :is(.hero h1, .hero .lead, .hero .note, .invite-pill) { text-shadow: 0 2px 18px rgba(243, 244, 241, .95), 0 0 2px rgba(243, 244, 241, .9); }
:root[data-theme="light"] .hero .glow { text-shadow: none; filter: drop-shadow(0 2px 12px rgba(243, 244, 241, .95)); }
:root[data-theme="light"] :is(.ipo-card, .feat) { background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 10px 30px rgba(20, 40, 20, .06); }
:root[data-theme="light"] :is(input, select) { background: #fff; border-color: rgba(28, 74, 43, .25); }
:root[data-theme="light"] input::placeholder { color: #8a9186; }
:root[data-theme="light"] :is(.bars .bar, .bc-rank .bar) { background: rgba(0, 0, 0, .07); }
:root[data-theme="light"] .tagp.st-upcoming { color: #8a5300; box-shadow: inset 0 0 0 1px rgba(164, 82, 0, .35); }
:root[data-theme="light"] .bc-rank .warn { color: #8a5300; background: #fff1dc; }
:root[data-theme="light"] .up { color: #1c7a3c; }
:root[data-theme="light"] .tile.lime :is(span, small, strong) { color: #143720; }
/* Brand panels stay dark in both themes. */
:root[data-theme="light"] :is(.invite-card, .bc-out, .family-calc, .float > div) {
  --text: #e9f2e4; --ink: #fff; --muted: #a3b39c; --line: rgba(183, 236, 125, .14); --panel: rgba(255, 255, 255, .045); --accent: #b7ec7d;
  color: var(--text);
}
:root[data-theme="light"] :is(.invite-card, .family-calc, .bc-out) :is(input, select) { background: rgba(0, 0, 0, .3); border-color: rgba(183, 236, 125, .3); color: #fff; }
:root[data-theme="light"] :is(.invite-card, .family-calc) .glow { background: linear-gradient(100deg, #b7ec7d, #e8ffc9 45%, #9edd5c); -webkit-background-clip: text; background-clip: text; filter: none; }

/* Theme toggle button */
.theme-btn { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; font-size: 18px; line-height: 1; }
.theme-btn:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.theme-btn::before { content: "☀︎"; }
:root[data-theme="light"] .theme-btn::before { content: "☾"; }
@media (max-width: 380px) { .theme-btn { width: 34px; height: 34px; font-size: 16px; } }
@media (max-width: 600px) { .brand { font-size: 0; } }

/* Log in link + short invite label on phones */
.login-link { flex: none; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 12px; border-radius: 999px; white-space: nowrap; }
.login-link:hover { background: var(--panel); }
.btn .short { display: none; }
@media (max-width: 600px) { .btn .long { display: none; } .btn .short { display: inline; } .login-link { padding: 8px 6px; font-size: 14px; } }

/* Header never overlaps: the logo keeps its size and the nav link clips instead (large Android text sizes). */
.brand { flex-shrink: 0; }
.top .nav { min-width: 0; overflow: hidden; }
/* Phone menu (☰): under 861px the header shows the menu button instead of the nav; it opens as a full-width panel. */
.menu-btn { display: none; }
@media (max-width: 860px) {
  .menu-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; }
  .top .nav { display: none; }
  .top.menu-open .nav { display: grid; gap: 2px; position: absolute; top: calc(100% + 8px); left: 0; right: 0; padding: 8px; background: var(--bg); border-radius: 24px; box-shadow: inset 0 0 0 1px var(--line), 0 24px 40px -20px rgba(0, 0, 0, .6); overflow: visible; }
  .top.menu-open .nav a { display: flex !important; min-height: 48px; padding: 0 12px; font-size: 17px; color: var(--ink); }
}
.menu-btn { -webkit-tap-highlight-color: transparent; } .menu-btn:focus-visible { border-radius: 50%; }
/* Header in 3D: links lift toward you, a lime pill glides under the pointer, the logo turns, Invite shines.
   Presses never move a button (a moving target drops taps). */
.nav { position: relative; perspective: 600px; isolation: isolate; }
.nav::after { content: ""; position: absolute; z-index: -1; left: 0; top: 50%; height: 40px; width: var(--w, 0); opacity: var(--o, 0); pointer-events: none;
  transform: translate(var(--x, 0), -50%); border-radius: 999px; background: rgba(183, 236, 125, .12);
  box-shadow: inset 0 0 0 1px rgba(183, 236, 125, .28), 0 8px 24px -10px rgba(183, 236, 125, .55);
  transition: transform .45s var(--ease), width .45s var(--ease), opacity .25s; }
:root[data-theme="light"] .nav::after { background: rgba(28, 107, 58, .08); box-shadow: inset 0 0 0 1px rgba(28, 107, 58, .2), 0 8px 24px -12px rgba(28, 107, 58, .35); }
.nav a { position: relative; transition: transform .35s var(--ease), color .2s, text-shadow .2s; }
.nav a:hover, .nav a:focus-visible { background: none; transform: translateZ(18px) rotateX(10deg); color: var(--ink); text-shadow: 0 6px 14px rgba(183, 236, 125, .35); }
.nav a[aria-current="page"] { color: var(--accent); }
.brand { perspective: 500px; }
.brand img { animation: logo-sway 7s ease-in-out infinite; transition: transform .9s var(--ease); box-shadow: 0 6px 18px -6px rgba(183, 236, 125, .55); }
.brand:hover img { animation: none; transform: rotateY(360deg) scale(1.08); }
@keyframes logo-sway { 0%, 100% { transform: rotateY(-14deg) translateY(0); } 50% { transform: rotateY(14deg) translateY(-2px); } }
.top .btn-lime { position: relative; overflow: hidden; isolation: isolate; }
.top .btn-lime::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%);
  transform: translateX(-120%); animation: btn-shine 4.5s ease-in-out infinite 1.5s; }
.top .btn-lime:hover { transform: none; box-shadow: 0 0 0 4px rgba(183, 236, 125, .18), 0 14px 44px rgba(183, 236, 125, .45); }
@keyframes btn-shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.theme-btn::before { display: inline-block; transition: transform .6s var(--ease); }
.theme-btn:hover::before { transform: rotate(40deg) scale(1.15); }
:root[data-theme="light"] .theme-btn::before { transform: rotate(-360deg); }
.login-link { position: relative; }
.login-link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transition: transform .3s var(--ease); }
.login-link:hover { background: none; }
.login-link:hover::after { transform: scaleX(1); }
.menu-btn svg path { transition: transform .35s var(--ease), opacity .2s; transform-origin: center; }
.top.menu-open .menu-btn svg path { transform: scaleX(.7); }
@media (max-width: 860px) {
  .top.menu-open .nav { animation: menu-in .35s var(--ease); transform-origin: top; }
  .top.menu-open .nav a { animation: menu-link .4s var(--ease) both; }
  .top.menu-open .nav a:nth-child(2) { animation-delay: .03s; } .top.menu-open .nav a:nth-child(3) { animation-delay: .06s; }
  .top.menu-open .nav a:nth-child(4) { animation-delay: .09s; } .top.menu-open .nav a:nth-child(5) { animation-delay: .12s; }
  .top.menu-open .nav a:nth-child(6) { animation-delay: .15s; } .top.menu-open .nav a:nth-child(n+7) { animation-delay: .18s; }
  .nav::after { display: none; }
}
@keyframes menu-in { from { opacity: 0; transform: perspective(800px) rotateX(-12deg) translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes menu-link { from { opacity: 0; transform: translateX(-12px) translateZ(-20px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .brand img, .top .btn-lime::after, .top.menu-open .nav, .top.menu-open .nav a { animation: none !important; }
  .nav a:hover, .nav a:focus-visible { transform: none; }
}

/* Countdown chip on IPO cards (filled by ipo.js): neutral for days away, warm when it is today or tomorrow. */
.tagp.when::before { content: ""; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(currentColor, currentColor) 50% 25% / 1.5px 35% no-repeat, linear-gradient(currentColor, currentColor) 62% 50% / 30% 1.5px no-repeat; box-sizing: border-box; flex: none; }
.tagp.when.soon { color: #ffd79a; box-shadow: inset 0 0 0 1px rgba(255, 190, 110, .45); background: rgba(255, 170, 60, .08); }
:root[data-theme="light"] .tagp.when.soon { color: #8a5300; box-shadow: inset 0 0 0 1px rgba(164, 82, 0, .35); background: rgba(255, 170, 60, .1); }

/* Family calculator: Retail / sHNI / bHNI picker and bullet notes. */
.fam-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0 4px; }
.fam-cats button { min-height: 52px; padding: 8px 6px; border-radius: 16px; border: 0; background: rgba(0, 0, 0, .25); color: var(--ink); font: 700 15px var(--font); box-shadow: inset 0 0 0 1px rgba(183, 236, 125, .25); cursor: pointer; display: grid; place-items: center; line-height: 1.2; -webkit-tap-highlight-color: transparent; }
.fam-cats button small { font-weight: 500; font-size: 12px; color: var(--muted); }
.fam-cats button[aria-pressed="true"] { background: var(--lime); color: var(--forest-strong); box-shadow: none; }
.fam-cats button[aria-pressed="true"] small { color: var(--forest-strong); }
.fam-notes { margin: 0 0 8px; padding-left: 18px; display: grid; gap: 4px; }
:root[data-theme="light"] .family-calc .fam-cats button:not([aria-pressed="true"]) { color: #fff; }

/* Shareholder quota cards on /ipo/ (not links, so no hover lift). */
.quota-card ul { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; color: var(--muted); }
.quota-card ul b { color: var(--ink); }
.quota-card a { color: var(--accent); }
.quota-card:hover { transform: none; box-shadow: inset 0 0 0 1px var(--line); }

/* Tap targets of at least 44px on phones (footer links, Log in, breadcrumbs) and no text under 12px. */
footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
.login-link { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.ipc-week span, .ipc-page .ipc-stats span, .bc-rank .warn { font-size: 12px; }
.brand { min-height: 44px; }
.quota-card a { display: inline-flex; align-items: center; min-height: 44px; }

/* Allotment: the box on each IPO page and the rows on /ipo-allotment-status/. */
.allot-bar { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; padding: 16px 20px; border-radius: 22px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.allot-bar b { display: block; font-size: 18px; color: var(--ink); }
.allot-bar span { font-size: 14px; color: var(--muted); }
.allot-bar.is-out { box-shadow: inset 0 0 0 1.5px rgba(183, 236, 125, .7); }
.allot-bar .actions, .allot-row .actions { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.allot-bar .btn, .allot-row .btn { min-height: 44px; padding: 10px 16px; font-size: 14px; }
.allot-row:hover { transform: none; box-shadow: inset 0 0 0 1px var(--line); }
.allot-row h3 a { color: inherit; text-decoration: none; }
.allot-row ul { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 4px; color: var(--muted); }
.allot-row ul b { color: var(--ink); }

/* Home: the live GMP board floats over the app screen in the hero. */
.hero-board { background: linear-gradient(160deg, #13281b, #08110a); }
.hero-board ol { list-style: none; margin: 0; padding: 6px 18px 12px; }
.hero-board li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 0; border-top: 1px solid rgba(183, 236, 125, .14); }
.hero-board li:first-child { border-top: 0; }
.hero-board b { color: #f4f8ef; font-size: clamp(14px, 1.5vw, 18px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-board li > span { color: #b7ec7d; font-weight: 700; font-size: clamp(14px, 1.5vw, 18px); text-align: right; }
.hero-board em { font-style: normal; font-weight: 600; opacity: .85; }
.hero-board small { grid-column: 1 / -1; color: #a9bfa4; font-size: 12px; }
:root[data-theme="light"] .hero-board { background: #fff; }
:root[data-theme="light"] .hero-board b { color: #111813; }
:root[data-theme="light"] .hero-board li > span { color: #1c6b3a; }
:root[data-theme="light"] .hero-board small { color: #5b6159; }


/* GMP trend chart (one series: median line, range band across trackers). Line colours validated per theme. */
:root { --chart-line: #62a83a; }
:root[data-theme="light"] { --chart-line: #1c6b3a; }
.tr-title { margin: 22px 0 8px; font-size: 18px; }
.tr-title small { font-size: 13px; font-weight: 500; color: var(--muted); }
.trend { position: relative; }
.trend svg { display: block; width: 100%; height: auto; overflow: visible; }
.tr-grid line { stroke: var(--line); stroke-width: 1; }
.tr-grid text, .tr-x text { fill: var(--muted); font-size: 12px; }
.tr-band { fill: var(--chart-line); opacity: .14; }
.tr-line { fill: none; stroke: var(--chart-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tr-dot { fill: var(--chart-line); stroke: var(--bg); stroke-width: 2; }
.tr-hit { fill: transparent; cursor: pointer; outline: none; }
.tr-hit:focus-visible { stroke: var(--ink); stroke-width: 2; }
.tr-last { fill: var(--ink); font-size: 13px; font-weight: 700; }
.tr-tip { position: absolute; z-index: 3; max-width: min(320px, 100%); padding: 8px 12px; border-radius: 12px; background: var(--ink); color: var(--bg); font-size: 13px; line-height: 1.4; pointer-events: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.tr-table summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--accent); font-weight: 600; }
.tr-scroll { overflow-x: auto; }
.tr-scroll table, .lg-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tr-scroll th, .tr-scroll td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tr-scroll th { color: var(--muted); font-weight: 600; }
.lg-table td small { display: block; color: var(--muted); font-size: 12px; }
@media (max-width: 640px) {
  .lg-recent tr:first-child { display: none; }
  .lg-recent tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .lg-recent td { padding: 0; border: 0; white-space: normal; }
  .lg-recent td:first-child, .lg-recent td:last-child { grid-column: 1 / -1; }
  .lg-recent td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: 12px; }
}

/* Daily IPO brief (/ipo/brief/): numbered sections, one line per IPO, "Brief vs reality" up top. */
.brief { padding-bottom: 8px; }
.brief-sec { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 16px; padding: 28px 0; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.brief-num { font-size: 28px; font-weight: 700; color: var(--accent); letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.brief-sec h2 { font-size: clamp(22px, 3vw, 28px); letter-spacing: -.02em; margin: 0 0 14px; }
.brief-sec h2 small { font-size: 15px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.brief-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.brief-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 16px; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.brief-list li > a:first-child, .brief-real li > a { color: var(--ink); font-weight: 600; text-decoration: none; }
.brief-list li > a:first-child:hover, .brief-real li > a:hover { color: var(--accent); }
.b-meta { flex-basis: 100%; color: var(--muted); font-size: 14px; }
@media (min-width: 760px) { .b-meta { flex-basis: auto; margin-left: auto; text-align: right; } }
.tagp.up { color: var(--accent); } .tagp.down { color: var(--muted); }
.brief-real { margin-top: 20px; padding: 18px 20px; border-radius: 22px; background: var(--panel); box-shadow: inset 0 0 0 1.5px var(--accent); }
.brief-real .eyebrow { margin-bottom: 10px; }
.brief-real ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.brief-real li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.brief-real li .b-meta { flex-basis: auto; margin: 0; text-align: left; }
.brief-archive { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.brief-archive a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-decoration: none; font-size: 14px; }
@media (max-width: 600px) { .brief-sec { grid-template-columns: 1fr; padding: 22px 0; } .brief-num { font-size: 15px; } }

/* IPO calendar (ipo-calendar.html): chips with counts, a month view with busy days, rows grouped by day.
   One accent: the four kinds differ by shape and tone (filled, ring, grey, square), and every row also says it in words. */
.cal [hidden] { display: none !important; }
.cal-wrap { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .cal-wrap { grid-template-columns: 340px minmax(0, 1fr); } .cal-side { position: sticky; top: 88px; } }
.cal-chips { flex-wrap: wrap; overflow: visible; margin-bottom: 8px; }
.cal-chips button b { margin-left: 4px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cal-chips button[aria-pressed="true"] b { color: var(--forest); }
.cal-month { margin-top: 8px; padding: 14px; border-radius: 24px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.cm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cm-head b { color: var(--ink); }
.cm-head button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; color: var(--ink); font-size: 22px; cursor: pointer; }
.cm-head button:disabled { opacity: .25; cursor: default; }
.cm-week, .cm-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.cm-week span { padding: 4px 0; font-size: 12px; color: var(--muted); }
.cm-day { display: grid; place-items: center; align-content: center; gap: 3px; min-height: 44px; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--muted); font: 500 14px var(--font); }
.cm-day.busy { color: var(--ink); font-weight: 700; background: rgba(183, 236, 125, .08); cursor: pointer; }
.cm-day.busy:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.cm-day.is-today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.cm-day[aria-pressed="true"] { background: var(--lime); color: var(--forest-strong); }
.cm-day span { display: flex; gap: 2px; height: 6px; }
.cm-day i, .cal-legend i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
i.cal-open { background: var(--accent); } i.cal-close { box-shadow: inset 0 0 0 1.5px var(--accent); }
i.cal-allotment { background: var(--muted); } i.cal-listing { background: var(--ink); border-radius: 1px; }
.cm-day[aria-pressed="true"] i { --accent: var(--forest-strong); --muted: var(--forest); --ink: var(--forest-strong); }
.tagp.cal-open { background: var(--lime); color: var(--forest-strong); box-shadow: none; }
.tagp.cal-close { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tagp.cal-listing { color: var(--ink); }
.cal-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--muted); }
.cal-note button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--panel); color: var(--accent); font: 600 14px var(--font); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.cal-list { scroll-margin-top: 90px; }
.cal-day { padding: 0; margin-bottom: 20px; }
.ipo-sec .cal-day h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 20px; }
.cal-day h2 span { color: var(--muted); font-weight: 500; }
.cal-day h2 em { font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--lime); color: var(--forest-strong); }
.cal-day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cal-day li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.mono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: 15px; font-weight: 700; }
:root[data-theme="light"] .mono { background: var(--bg); }
.cal-main { display: grid; gap: 6px; min-width: 0; }
.cal-main > a { overflow: hidden; color: var(--ink); font-weight: 600; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.cal-main > a:hover { color: var(--accent); }
.cal-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cal-band { font-size: 13px; color: var(--muted); }
.cal-gmp { text-align: right; white-space: nowrap; color: var(--ink); font-size: 15px; font-weight: 700; }
.cal-gmp small { display: block; color: var(--accent); font-size: 12px; font-weight: 600; }
@media (max-width: 520px) {
  .cal-day li { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; }
  .mono { width: 40px; height: 40px; grid-row: span 2; }
  .cal-gmp { grid-column: 2; text-align: left; font-size: 14px; } .cal-gmp small { display: inline; margin-left: 4px; }
}

/* Home: numbered sections (01 Plan · 02 Apply · 03 Track). Each tile: icon, one-line promise, one button; app tiles show a real screen (demo data). */
.feat-sec { padding: 96px 0 16px; }
.feats { display: grid; gap: 16px; margin-top: 36px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feat-big { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .feats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .feat-big { grid-column: span 2; grid-row: span 2; } .feat-big ~ .feat:last-child:nth-child(5) { grid-column: span 2; } }
.feat { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 24px; border-radius: 28px; overflow: hidden; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: inherit; text-decoration: none; transition: transform .35s var(--ease), box-shadow .3s; }
.feat:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--accent), 0 24px 60px -30px rgba(0, 0, 0, .6); }
.feat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.feat-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(183, 236, 125, .12); color: var(--accent); font-size: 20px; font-weight: 800; }
:root[data-theme="light"] .feat-ico { background: rgba(28, 107, 58, .08); }
.feat-app .tagp { color: var(--accent); }
.feat h3 { margin: 0; font-size: 20px; }
.feat p { margin: 0; color: var(--muted); font-size: 15px; }
.feat-btn { margin-top: auto; padding-top: 10px; color: var(--accent); font-weight: 600; font-size: 15px; }
.feat img { width: 100%; margin-top: 18px; border-radius: 14px; box-shadow: 0 0 0 1px var(--line), 0 24px 50px -28px rgba(0, 0, 0, .7); }
.feat-big { padding: 28px; }
.feat-big h3 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.02em; }
.feat-big .feat-ico { background: var(--lime); color: var(--forest-strong); }
.feat-big img { margin-top: 24px; }
.feat:not(.feat-big) img { aspect-ratio: 16 / 7; object-fit: cover; object-position: top; }  /* small tiles show the top of the screen only */
@media (prefers-reduced-motion: reduce) { .feat, .feat:hover { transition: none; transform: none; } }

/* Home: founder note. */
.story-note { max-width: 760px; margin-top: 28px; padding: 28px; border-radius: 28px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); font-size: 18px; line-height: 1.65; }
.story-note p { margin: 0 0 16px; }
.story-note .story-sign { margin: 0; color: var(--muted); font-size: 15px; }
.story-sign::before { content: "— "; }