/* Eggd · Violet (the owner's pick, 19 Oct 2026: "make it more simple and sleek like ottr, but also yellow and purple").
   ottr's way of being clean: a pale tinted page with white cards on 1px lines and big soft radii, one heavy sans
   (Figtree 800) with small mono labels, one bold colour field for the brand moments (the hero, the closing band, the
   footer), and the main action in yolk. The pictures are one painted mascot, chick A in its golden egg (web/art/v,
   brand/mascot). Loaded after clear.css (light) and watchb.css (the watchdog), so it restyles both. */
:root {
  color-scheme: light;
  --violet: #9055FD;         /* the paintings' own field */
  --violet-text: #7C42EE;    /* the field behind small white words: 5.4:1 */
  --violet-2: #6B35E8;       /* violet on white: buttons, links, the second beat (6.4:1 for white text) */
  --violet-deep: #3C1C97;    /* the paintings' deep waves: the footer */
  --violet-wash: #F0EAFF;
  --yolk: #FFC93C; --yolk-2: #FFD76A; --yolk-ink: #6B4700; --yolk-wash: #FFF5D6;
  --bg: #F7F5FE; --bg-2: #EFEBFC; --surface: #FFFFFF; --surface-2: #FAF9FF;
  --ink: #1B1240; --ink-2: #3D3466; --muted: #675F8E;
  --line: #E8E3F7; --line-2: #D9D1F1; --line-3: #BDB1E6;
  --border: 1px solid var(--line);
  --accent: #6B35E8; --on-accent: #FFFFFF;
  --gold: #FFC93C; --gold-2: #FFD76A; --gold-deep: #E9A20F;
  --gold-text: #8A5A00; --gold-display: #6B35E8; --gold-wash: #FFF5D6; --gold-glow: rgba(255, 201, 60, 0.35);
  --cream: #FFFFFF; --ivory: #FFFFFF; --carton: #F4F1FF; --carton-2: #E4DCFA;
  --good: #0A7A55; --good-wash: #E2F5EC; --bad: #C8283A; --bad-wash: #FDECEE; --warn: #8A5A00;
  --font-display: 'Figtree', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'Figtree', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display-weight: 800; --display-tracking: -0.03em;
  --r-sm: 12px; --r: 16px; --r-lg: 20px; --r-xl: 26px;
  --shadow: 0 1px 2px rgba(27, 18, 64, 0.05), 0 12px 32px -14px rgba(27, 18, 64, 0.16);
  --shadow-lg: 0 2px 4px rgba(27, 18, 64, 0.06), 0 28px 60px -24px rgba(67, 32, 201, 0.32);
  --top-h: 68px;
}
html, body { background: var(--bg); color: var(--ink); }
body { font-family: var(--font-text); }
::selection { background: var(--violet-2); color: #fff; }
:focus-visible { outline-color: var(--violet-2); }

/* ---------- type: one heavy sans, violet for the second beat, mono labels ---------- */
h1, h2, .display, .page-head h1, .coin-title h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; }
h1 { line-height: 1.02; }
h2 { line-height: 1.06; }
h3, .h3, .cstep h3, .access-card h3, .how-steps h2.h3, .signs h3, .steps3 h3, .example-head h3 { font-family: var(--font-text); font-weight: 750; letter-spacing: -0.015em; }
.beat, h1 em, h2 em, .foil, .csec-head .beat, .cinvite-copy h2 .beat { font-style: normal; color: var(--violet-2); background: none; -webkit-text-fill-color: currentColor; padding-right: 0; }
.kicker, .ckicker, .eyebrow, .cleyebrow { color: var(--violet-2); font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.14em; }
.kicker-dot { background: var(--violet-2); box-shadow: 0 0 0 3px var(--violet-wash); }
.lede { color: var(--ink-2); }
.label { color: var(--muted); }
.num.gold, .gold { color: var(--gold-text); }
.link-arrow, .link { color: var(--violet-2); font-weight: 700; }
.link-arrow:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- the header: white, one hairline, the mascot tile ---------- */
#top { background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--line); }
.top-bar { height: var(--top-h); }
.brand, .nav a { color: var(--ink); }
.nav a { color: var(--ink-2); font-weight: 600; font-size: 15.5px; }
.nav a:hover { color: var(--ink); background: var(--bg); }
.nav a[aria-current] { color: var(--violet-2); background: var(--violet-wash); }
#top .btn:not(.primary) { background: var(--surface); border-color: var(--line-2); color: var(--ink); }
#top .ca.small, .phone-menu-foot .ca.small { background: var(--surface-2); border: 1px dashed var(--line-2); color: var(--muted); }
#top .ca-soon, .ca-soon { color: var(--violet-2); }
.menu-btn { border-color: var(--line-2); background: var(--surface); }
.menu-btn i { background: var(--ink); }
.phone-menu { background: var(--surface); border-top: 1px solid var(--line); }
.phone-menu nav a { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); border-bottom-color: var(--line); }
.demo-strip { background: var(--violet-deep); color: #fff; border-bottom: 0; }
.demo-strip b { color: var(--yolk); }
/* the logo: the mascot's tile and the wordmark (logo.mjs) */
.lockup { display: inline-flex; align-items: center; }
.lockup .mark { flex: none; display: block; border-radius: 28%; box-shadow: 0 6px 14px -8px rgba(67, 32, 201, 0.55); }
.lockup .wordmark { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--ink); padding: 0; }

/* ---------- buttons: violet on white, yolk on violet, one per screen ---------- */
.btn { background: var(--surface); border-color: var(--line-2); color: var(--ink); font-weight: 700; }
.btn:hover { background: var(--surface); border-color: var(--line-3); color: var(--ink); }
.btn.primary, .access-btn.primary { background: var(--violet-2); color: #fff; border-color: var(--violet-2); box-shadow: 0 10px 24px -12px rgba(107, 53, 232, 0.65); }
.btn.primary:hover, .access-btn.primary:hover { background: #5C27DA; color: #fff; border-color: #5C27DA; filter: none; }
.btn.yolk, .access-btn.primary.yolk { background: var(--yolk); color: var(--ink); border-color: var(--yolk); box-shadow: 0 10px 24px -12px rgba(233, 162, 15, 0.8); }
.btn.yolk:hover, .access-btn.primary.yolk:hover { background: var(--yolk-2); color: var(--ink); border-color: var(--yolk-2); }
.btn.ghost-btn { background: var(--surface); border-color: var(--line-2); color: var(--ink); }
.btn.ghost-btn:hover { background: var(--surface); border-color: var(--line-3); }
.access-btn.on-list { background: var(--surface); border-color: var(--violet-2); color: var(--ink); }
.access-btn.let-in { background: var(--good-wash); border-color: color-mix(in srgb, var(--good) 40%, transparent); color: var(--good); }
.access-dot { background: var(--violet-2); }
.access-btn.on-list .access-dot { box-shadow: 0 0 0 3px var(--violet-wash); }
.icon-btn:hover { background: var(--bg); }

/* ---------- chips, segments, inputs, cards ---------- */
.chip { background: var(--surface-2); border-color: var(--line); color: var(--ink-2); }
.chip.done { background: var(--good-wash); color: var(--good); border-color: transparent; }
.chip.demo { background: var(--yolk-wash); color: var(--yolk-ink); border-color: transparent; }
.chip.stage, .chip.gold-chip, .chip.stage-cracking, .chip.stage-peeking { background: var(--yolk-wash); color: var(--yolk-ink); border-color: transparent; }
.chip.stage-hatched { background: var(--good-wash); color: var(--good); }
.seg { background: var(--bg-2); border-color: var(--line); }
.seg button, .chips button { color: var(--ink-2); font-weight: 600; }
.chips button { background: var(--surface); border-color: var(--line-2); }
.seg button[aria-pressed="true"], .chips button[aria-pressed="true"] { background: var(--violet-2); color: #fff; }
.input, .prefix, .drop { background: var(--surface); border-color: var(--line-2); }
.input:focus, .prefix:focus-within { border-color: var(--violet-2); box-shadow: 0 0 0 3px var(--violet-wash); }
input::placeholder, textarea::placeholder { color: #9C94BC; }
.card, .panel, .box, .step, .coin-card, .faq details, .banner { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.card { border-radius: var(--r-lg); }
.faq details { border-radius: var(--r); box-shadow: none; }
.faq summary { font-weight: 700; }
.banner.good { background: var(--good-wash); border-color: transparent; }
.banner.soon { background: var(--violet-wash); border-color: transparent; }
.fine, .muted { color: var(--muted); }
.coin-stats .stat { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.stat-value { font-family: var(--font-mono); font-weight: 600; }
.bar { background: var(--bg-2); }
.bar span { background: linear-gradient(90deg, var(--violet), #9B79FF); }
.skeleton .sk { background: linear-gradient(90deg, var(--surface-2), var(--bg-2), var(--surface-2)); background-size: 200% 100%; }
.toast { background: var(--ink); color: #fff; }
.modal-veil { background: rgba(27, 18, 64, 0.42); }
.modal-panel { border-radius: var(--r-xl); }
.menu { background: var(--surface); }

/* ---------- the paintings (art.mjs): rounded violet tiles, no masks ---------- */
.art-photo { display: block; line-height: 0; animation: none !important; }
.art-photo img { display: block; width: 100%; height: auto; border-radius: 22%; -webkit-mask-image: none; mask-image: none; box-shadow: var(--shadow-lg); }
.page-art .photo.art-photo, .page-art.wide .photo.art-photo { width: min(100%, 300px); }
.art-prop-crate.art-photo { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: end; }
.art-prop-crate.art-photo img { width: 100%; border-radius: 18px; }
.page-art.wide .photo.art-photo.art-prop-crate { width: min(100%, 560px); }
.access-art { background: none; width: 96px; height: 96px; }
.access-art .art-photo img { border-radius: 24px; }
.egg-panel { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.egg-panel-art { background: var(--bg); }

/* ---------- the locked split: you in violet, the egg in yolk, the house in lavender ---------- */
.sb-launcher, .leg-launcher i { background: var(--violet-2); color: #fff; }
.sb-egg, .leg-egg i { background: var(--yolk); color: var(--ink); }
.sb-treasury, .leg-treasury i { background: #CFC2F7; color: var(--ink); }
.sb-burn, .leg-burn i { background: var(--bg-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.split-track { border-radius: var(--r-sm); }

/* ---------- the hatchery's 999 cups: a white card, lavender cups, yolk eggs ---------- */
.strip-box { background: var(--surface); border: 1px solid var(--line); color: var(--ink); box-shadow: var(--shadow); border-radius: var(--r-lg); }
.strip .d-empty { fill: var(--bg-2); stroke: none; }
.strip .d-laid { fill: var(--yolk); }
.strip .d-hatched { fill: var(--yolk); stroke: var(--violet-2); stroke-width: 1.2; }
.strip .d-next { fill: var(--violet-2); stroke: none; }
.strip-key { color: var(--muted) !important; }
.k-laid { background: var(--yolk); } .k-hatched { background: var(--yolk); box-shadow: 0 0 0 1.5px var(--violet-2); }
.k-next { border: 0; background: var(--violet-2); } .k-empty { border: 0; background: var(--bg-2); }

/* ---------- the footer: the paintings' deep violet ---------- */
#foot { background: var(--violet-deep); border-top: 0; color: #D9D0FA; }
#foot .foot-col a { color: #EDE7FF; }
#foot .foot-col a:hover { color: var(--yolk); }
#foot .label { color: #B9A8F5; }
#foot .lockup .wordmark { color: #fff; }
#foot .link { color: #EDE7FF; }
#foot .foot-base { border-top-color: rgba(255, 255, 255, 0.14); }
#foot .muted, #foot .fine, #foot .foot-fine { color: #C8BCF2; }

/* ---------- the watchdog in the violet look (watchb.css underneath was drawn for the dark Bullion page) ---------- */
:root { --wd-growing: #8A5A00; --wd-hatched: var(--good); --wd-cold: #5E6B7E; --wd-squawk: var(--bad); }
.wd-egg img { -webkit-mask-image: none; mask-image: none; border-radius: 22%; aspect-ratio: 1; }
.wd-egg.mood-cold img, .wd-egg.mood-squawk img { filter: none; }
.wd-egg.mood-squawk::after { display: none; }
.chip.wd-mood { font-weight: 700; }
.chip.wd-mood.mood-growing { background: var(--yolk-wash); }
.wd-show-egg { filter: none; }
.wd-show-egg .wd-egg img { box-shadow: var(--shadow-lg); }
.wd-show-cap { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); color: var(--ink); }
.wd-show:hover .wd-show-cap { border-color: var(--violet-2); }
.wd-row { color: var(--ink); }
.wd-row:hover { background: var(--surface-2); }
.wd-row:hover .wd-row-who b, .wdh-row:hover .wdh-who b { color: var(--violet-2); }
.wd-curve { background: var(--bg-2); }
.wd-curve i { background: linear-gradient(90deg, var(--violet), #A688FF); }
.wd-curve.done i { background: linear-gradient(90deg, #12A06B, #38C98F); }
.wd-curve s, .wd-curve s.hit { background: rgba(255, 255, 255, 0.95); }
.wd-art { background: none; padding: 0; }
.wd-art .wd-egg { width: 100%; }
.wd-panel-mood p { font-family: var(--font-display); font-weight: 750; font-size: 20px; letter-spacing: -0.015em; }
.wd-paste .input { border-color: var(--line-2); background: var(--surface); }
.wd-paste .input:focus { border-color: var(--violet-2); box-shadow: 0 0 0 3px var(--violet-wash); }
.wd-src a, .wd-links a, .wd-panel-links a, a.wd-out { color: var(--violet-2); }
.wd-check.s-warn .wd-dot { background: #E9A20F; box-shadow: 0 0 0 3px var(--yolk-wash); }
.wd-check.s-warn .wd-check-val > span:first-child { color: var(--yolk-ink); }
.wd-check.s-ok .wd-dot { box-shadow: 0 0 0 3px var(--good-wash); }
.wd-check.s-danger .wd-dot { box-shadow: 0 0 0 3px var(--bad-wash); }
.wd-squawk { background: var(--bad-wash); border-color: transparent; }
.wd-mood-card { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
.wd-mood-card .wd-egg { width: min(100%, 170px); }
.wd-card-img { border-color: var(--line); background: var(--bg-2); }
.wdh-live i { background: #16A36F; }
.wdh-reads li::before { background: var(--good); box-shadow: 0 0 0 3px var(--good-wash); }

/* ---------- home (pages/home.mjs): ottr's rhythm in violet ---------- */
.vhero { position: relative; overflow: hidden; background: var(--violet); color: #fff; }
.vhero-art { position: absolute; inset: 0; background: var(--violet) url('/art/v/hero-1600.webp') right center / cover no-repeat; }
@media (min-width: 1700px) { .vhero-art { background-image: url('/art/v/hero-2400.webp'); } }
.vhero-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--violet-text) 0%, rgba(124, 66, 238, 0.8) 34%, rgba(144, 85, 253, 0) 60%); }
.vhero-in { position: relative; z-index: 1; padding: clamp(44px, 5vw, 72px) 0 clamp(26px, 3vw, 36px); }
.vpill { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 16px; border-radius: var(--r-pill); background: rgba(26, 11, 74, 0.32); font: 600 12.5px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #fff; }
.vpill i { width: 8px; height: 8px; border-radius: 50%; background: var(--yolk); }
.vhero h1 { margin-top: 24px; font-size: clamp(42px, 5.8vw, 80px); line-height: 0.98; letter-spacing: -0.035em; color: #fff; text-wrap: initial; }
.vhero h1 span { color: var(--yolk); }
.vhero .lede { margin-top: 22px; max-width: 34em; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: rgba(255, 255, 255, 0.93); }
.vhero .lede b { color: #fff; font-weight: 700; }
.vctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.vctas .btn { height: 52px; padding: 0 24px; font-size: 16px; }
.vhero .btn.vghost { background: rgba(26, 11, 74, 0.28); color: #fff; border-color: rgba(255, 255, 255, 0.36); box-shadow: none; }
.vhero .btn.vghost:hover { background: rgba(26, 11, 74, 0.4); color: #fff; border-color: #fff; }
.vhero .access-btn.on-list, .vhero .access-btn.let-in { background: rgba(26, 11, 74, 0.32); color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.vhero-fine { margin-top: 14px; font-size: 13.5px; color: rgba(255, 255, 255, 0.85); }
.vchecks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.vchecks span { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 16px 0 8px; border-radius: var(--r-pill); background: rgba(26, 11, 74, 0.3); font-weight: 600; font-size: 14px; color: #fff; }
.vchecks span::before { content: '✓'; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); font: 700 12px/1 var(--font-text); }
/* the hero's foot: Eggd's two parts as two cards, told apart (19 Oct: the launchpad, opening soon, and the watchdog,
   live now), each with its own live numbers */
.vhero-foot { position: relative; z-index: 1; background: linear-gradient(180deg, rgba(36, 16, 98, 0) 0%, rgba(36, 16, 98, 0.5) 100%); }
.vhero-foot .wrap { padding: 8px 0 32px; }
.vdoors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vdoors.one { grid-template-columns: minmax(0, 620px); }
.vdoor { display: grid; gap: 12px; align-content: start; padding: 18px 20px 16px; border-radius: var(--r-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); }
.vdoor-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vdoor-k { font: 600 12px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet-2); }
.vstatus { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: var(--r-pill); font: 600 11px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.vstatus i { width: 7px; height: 7px; border-radius: 50%; }
.vstatus.st-soon { background: #FFF3CF; color: #7A5600; }
.vstatus.st-soon i { background: var(--yolk); }
.vstatus.st-live { background: var(--good-wash); color: var(--good); }
.vstatus.st-live i { background: #16A36F; box-shadow: 0 0 0 3px rgba(22, 163, 111, 0.18); }
.vdoor-line { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.vdoor-line b { color: var(--ink); font-weight: 700; }
.vstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 12px 0 2px; border-top: 1px solid var(--line); }
.vstats div { display: grid; gap: 5px; align-content: start; }
.vstats small { font: 600 10.5px/1.25 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.vstats b { font: 600 22px/1 var(--font-mono); color: var(--ink); }
.vstats em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.vdoor-coin { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 64px; padding: 10px 12px; border-radius: var(--r); background: var(--bg-2); color: var(--ink); text-decoration: none; }
.vdoor-coin.skeleton .sk { grid-column: 1 / -1; height: 40px; border-radius: 10px; }
.vdc-who { display: grid; gap: 3px; min-width: 0; }
.vdc-who small { font: 600 10.5px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.vdc-who b { font-size: 15.5px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vdc-who .mono { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.vdoor-coin:hover b { color: var(--violet-2); }
.vdoor-more { justify-self: start; color: var(--violet-2); font-weight: 700; font-size: 14.5px; }
.vdoor-more:hover { text-decoration: underline; text-underline-offset: 3px; }
#how, #watchdog { scroll-margin-top: 84px; }

.vsec { padding-top: clamp(64px, 8vw, 104px); }
.vhead { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 24px; margin-bottom: 30px; }
.vhead h2 { margin-top: 16px; font-size: clamp(32px, 4vw, 52px); }
.vhead h2 span { color: var(--violet-2); }
.vhead p:not(.kicker) { margin-top: 14px; max-width: 40em; color: var(--ink-2); font-size: 18px; }
.vhead .kicker { margin: 0; color: var(--violet-2); }
.vmore { color: var(--violet-2); font-weight: 700; white-space: nowrap; }
.vmore:hover { text-decoration: underline; text-underline-offset: 3px; }
.vwd { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
.vtry { display: grid; gap: 18px; padding: 24px; }
.vtry-top { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; }
.vtry-top .art-photo img { border-radius: 24px; box-shadow: var(--shadow); }
.vtry h3 { font: 800 24px/1.15 var(--font-display); letter-spacing: -0.02em; }
.vtry .wd-paste-box { width: 100%; margin: 0; }
.vnote { display: flex; gap: 10px; align-items: center; padding: 11px 14px; border-radius: var(--r); background: var(--violet-wash); color: var(--ink-2); font-size: 14px; font-weight: 600; }
.vnote svg { flex: none; }
.vfeed { padding: 0; overflow: hidden; }
.vfeed .wdh-feed-head { padding: 16px 20px; }
.vsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vstep { display: grid; gap: 10px; align-content: start; padding: 18px 18px 22px; }
.vstep .art-photo { margin-bottom: 4px; }
.vstep .art-photo img { border-radius: 16px; box-shadow: none; aspect-ratio: 4 / 3; object-fit: cover; }
.vstep .n { font: 600 12px/1 var(--font-mono); letter-spacing: 0.14em; color: var(--violet-2); }
.vstep h3 { font: 800 21px/1.2 var(--font-display); letter-spacing: -0.02em; }
.vstep p { color: var(--ink-2); font-size: 15px; }
/* where each coin's creator fees go, under the launchpad's steps */
.vsplit { display: grid; gap: 14px; margin-top: 16px; padding: 22px 24px; }
.vsplit-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.vsplit-head h3 { font: 800 20px/1.2 var(--font-display); letter-spacing: -0.02em; }
.vsplit .fine { color: var(--muted); }
/* the watchdog on its own tinted band: a separate tool, so it never reads as part of the launchpad */
.vband { margin-top: clamp(64px, 8vw, 104px); padding: clamp(56px, 7vw, 88px) 0; background: linear-gradient(180deg, #EDE6FE 0%, #F4F0FF 100%); border-block: 1px solid var(--line); }
.vmoods { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -10px 0 24px; }
.vmoods > span:first-child { margin-right: 4px; font: 600 11.5px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.vpromises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vpromise { display: grid; gap: 10px; align-content: start; padding: 22px; }
.vck { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--good-wash); color: var(--good); font-weight: 800; }
.vpromise h3 { font: 800 18px/1.25 var(--font-display); letter-spacing: -0.01em; }
.vpromise p { color: var(--ink-2); font-size: 14.5px; }
.vfaq { max-width: 860px; margin-top: 0; }
.vclose { position: relative; overflow: hidden; margin-top: clamp(64px, 8vw, 104px); border-radius: var(--r-xl); background: var(--violet); color: #fff; }
.vclose-art { position: absolute; inset: 0; background: url('/art/v/hero-1600.webp') 85% center / cover no-repeat; }
.vclose-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--violet-text) 30%, rgba(144, 85, 253, 0) 75%); }
.vclose-in { position: relative; z-index: 1; padding: clamp(36px, 5vw, 60px); max-width: 640px; display: grid; justify-items: start; gap: 14px; }
.vclose h2 { font-size: clamp(30px, 3.6vw, 46px); color: #fff; }
.vclose h2 span { color: var(--yolk); }
.vclose p { color: rgba(255, 255, 255, 0.92); font-size: 17px; }
.vclose .fine { color: rgba(255, 255, 255, 0.85); }
.vclose .btn { margin-top: 8px; height: 52px; padding: 0 24px; font-size: 16px; }

@media (max-width: 980px) {
  .vwd { grid-template-columns: 1fr; }
  .vsteps { grid-template-columns: 1fr; }
  .vstep { grid-template-columns: 120px minmax(0, 1fr); column-gap: 16px; }
  .vstep .art-photo { grid-row: span 3; margin: 0; }
  .vstep .vnote { grid-column: 1 / -1; }
  .vpromises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vdoors { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .vhero-art { inset: 0 0 auto 0; height: 300px; background-position: 76% 58%; }
  .vhero-art::after { background: linear-gradient(180deg, rgba(144, 85, 253, 0) 45%, var(--violet-text) 100%); }
  .vhero { background: var(--violet-text); }
  .vhero-in { padding-top: 256px; }
  .vhero h1 { font-size: clamp(36px, 10.6vw, 48px); }
  .vctas .btn { width: 100%; }
  .vdoor { padding: 16px 16px 14px; }
  .vstats b { font-size: 19px; }
  .vhead { grid-template-columns: 1fr; }
  .vpromises { grid-template-columns: 1fr; }
  .vstep { grid-template-columns: 96px minmax(0, 1fr); }
  .vclose-art { opacity: 0.35; }
  .lockup .wordmark { letter-spacing: -0.035em; }
}