/* ==== css/tokens.css ==== */
/* Kcalb Ltd — design tokens.
   One visual world, two surfaces: PAPER (bright, cool off-white, black type — the WordPress "light" sections)
   and NIGHT (black stage lit by the violet beam — the WordPress hero). The site commits to this look in both
   OS themes on purpose; every colour is painted explicitly. */
:root {
  color-scheme: light;
  /* paper */
  --paper: #F8F9FC;
  --paper-2: #FFFFFF;
  --paper-3: #EEEFF4;
  --ink: #0A0A0F;
  --ink-2: #3A3A45;
  --ink-3: #686874;
  --ink-4: #A0A0AC;
  --line: #E5E5EA;
  --line-2: #D6D6DE;
  /* night */
  /* night: a violet-tinted black (between Stake-Only #040410 and Crypto-Only #181820), never pure black (Thomas 28/09) */
  --night: #0D0B19;
  --night-2: #141124;
  --night-3: #1B172F;
  /* the two soft lights of every night room (Stake-Only style: violet high on the left, blue low on the right), no grid */
  --night-glow: radial-gradient(1100px 760px at 10% 0%, rgba(122,90,248,.17), transparent 62%), radial-gradient(900px 640px at 94% 100%, rgba(70,110,200,.11), transparent 66%);
  --snow: #F6F4FB;
  --snow-2: rgba(246, 244, 251, .74);
  --snow-3: rgba(246, 244, 251, .52);
  --snow-4: rgba(246, 244, 251, .34);
  --nline: rgba(255, 255, 255, .09);
  --nline-2: rgba(255, 255, 255, .16);
  --glass: rgba(255, 255, 255, .045);
  --glass-2: rgba(255, 255, 255, .08);
  /* Kcalb violet (from the KcalbApp logo) */
  --violet: #7A5AF8;
  --violet-2: #A690FF;
  --violet-3: #5E3FE6;
  --violet-soft: #F0ECFF;
  --violet-glow: rgba(122, 90, 248, .42);
  --beam: radial-gradient(60% 55% at 50% 0%, rgba(160, 120, 255, .55), rgba(110, 60, 240, .18) 45%, transparent 75%);
  /* brand colours (used only on their own brand's elements) */
  --c-inolah: #8A44D8;
  --c-kcalbapp: #5E4FD1;
  --c-crypto-only: #2175EB;
  --c-stake-only: #7C3AED;
  --c-inoai: #A33BD0;
  --c-inoswap: #EC4C9B;
  --c-kcanther: #EA580C;
  --c-xitcoin: #F58804;
  /* status */
  --ok: #16A36A;
  --ok-soft: #E3F6EC;
  --warn: #C98A0B;
  --warn-soft: #FBF1DC;
  --bad: #D63B4F;
  --bad-soft: #FBE6E9;
  /* type */
  --f-display: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --f-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --t-hero: clamp(46px, 7.4vw, 116px);
  --t-display: clamp(40px, 5.6vw, 84px);
  --t-h1: clamp(34px, 4.3vw, 64px);
  --t-h2: clamp(28px, 3.3vw, 48px);
  --t-h3: clamp(21px, 1.9vw, 28px);
  --t-h4: 19px;
  --t-lead: clamp(17px, 1.3vw, 20px);
  --t-body: 16px;
  --t-small: 14px;
  --t-xs: 12.5px;
  --t-label: 11.5px;
  /* space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section: clamp(84px, 10vw, 152px);
  --gutter: clamp(20px, 4vw, 40px);
  --container: 1240px;
  --container-wide: 1440px;
  --container-text: 720px;
  --header-h: 72px;
  /* shape */
  --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(16, 10, 40, .06), 0 1px 1px rgba(16, 10, 40, .04);
  --shadow-2: 0 10px 30px -12px rgba(28, 16, 70, .18), 0 2px 6px rgba(28, 16, 70, .06);
  --shadow-3: 0 30px 80px -24px rgba(28, 16, 70, .28), 0 8px 24px -8px rgba(28, 16, 70, .12);
  --shadow-night: 0 40px 120px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06);
  /* motion */
  --ease: cubic-bezier(.22, .8, .24, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --d-1: .18s; --d-2: .32s; --d-3: .6s; --d-4: .9s;
}
@media (max-width: 720px) {
  :root { --header-h: 64px; --t-body: 15.5px; }
}

/* ==== css/base.css ==== */
/* ---------- reset & document ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--night); color: var(--ink); font-family: var(--f-body); font-size: var(--t-body); line-height: 1.6;
  font-feature-settings: 'cv11', 'ss01', 'ss03'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body[data-layout="studio"] { background: #F4F3F8; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"], .plain { list-style: none; padding: 0; }
::selection { background: var(--violet); color: #fff; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 6px; }
[data-theme="night"] :focus-visible { outline-color: var(--violet-2); }
.skip { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; transition: top .2s; }
.skip:focus { top: 12px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 1.15em; height: 1.15em; flex: none; stroke-width: 1.75; }
.ic-sm { width: 16px; height: 16px; } .ic-md { width: 20px; height: 20px; } .ic-lg { width: 24px; height: 24px; }
.mark { width: 1em; height: 1em; flex: none; }

/* ---------- typography ---------- */
.t-hero, .t-display, .t-h1, .t-h2, .t-h3, .t-h4, h1, h2, h3 { font-family: var(--f-display); font-weight: 560; letter-spacing: -.035em; text-wrap: balance; color: inherit; }
.t-hero { font-size: var(--t-hero); line-height: .94; letter-spacing: -.05em; }
.t-display { font-size: var(--t-display); line-height: .98; letter-spacing: -.045em; }
.t-h1, h1 { font-size: var(--t-h1); line-height: 1.02; letter-spacing: -.04em; }
.t-h2, h2 { font-size: var(--t-h2); line-height: 1.06; }
.t-h3, h3 { font-size: var(--t-h3); line-height: 1.18; letter-spacing: -.022em; }
.t-h4, h4 { font-family: var(--f-display); font-size: var(--t-h4); line-height: 1.3; font-weight: 600; letter-spacing: -.015em; }
.t-lead { font-size: var(--t-lead); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.t-body { font-size: var(--t-body); line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.t-small { font-size: var(--t-small); line-height: 1.55; color: var(--ink-3); }
.t-xs { font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3); }
.t-label { font-family: var(--f-mono); font-size: var(--t-label); line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--ink-3); }
.t-num { font-variant-numeric: tabular-nums; }
.t-muted { color: var(--ink-3); }
.t-grad { background: linear-gradient(100deg, var(--violet-2), #E7DEFF 45%, var(--violet-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t-ink-fade { color: var(--ink-4); }
[data-theme="night"] { color: var(--snow); }
[data-theme="night"] .t-lead, [data-theme="night"] .t-body { color: var(--snow-2); }
[data-theme="night"] .t-small, [data-theme="night"] .t-xs, [data-theme="night"] .t-label, [data-theme="night"] .t-muted { color: var(--snow-3); }
.prose { max-width: var(--container-text); font-size: 17px; line-height: 1.75; color: var(--ink-2); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(24px, 2.4vw, 32px); margin-top: calc(2em - var(--gt-t)); color: var(--ink); }
.prose h3 { font-size: 21px; margin-top: calc(1.8em - var(--gt-t)); color: var(--ink); }
.prose a { color: var(--violet-3); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose ul, .prose ol { padding-left: 1.2em; } .prose li + li { margin-top: .4em; }
.prose blockquote { border-left: 2px solid var(--violet); padding: 4px 0 4px 22px; font-family: var(--f-display); font-size: 24px; line-height: 1.35; letter-spacing: -.02em; color: var(--ink); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); }
.container--text { max-width: calc(var(--container-text) + var(--gutter) * 2); }
.section { position: relative; padding-block: var(--section); overflow: clip; }
.section--tight { padding-block: calc(var(--section) * .6); }
.section--flush-top { padding-top: 0; }
[data-theme="paper"] { background: var(--paper); color: var(--ink); }
[data-theme="white"] { background: var(--paper-2); color: var(--ink); }
[data-theme="night"] { background: var(--night-glow), var(--night); color: var(--snow); }
.stack { display: flex; flex-direction: column; gap: var(--stack, 16px); }
.row { display: flex; align-items: center; gap: var(--row, 12px); flex-wrap: wrap; }
.grid { display: grid; gap: var(--gap, 24px); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-auto { grid-template-columns: repeat(auto-fill, minmax(var(--min, 260px), 1fr)); }
@media (max-width: 1024px) { .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); } }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--center { align-items: center; }
@media (max-width: 900px) { .split, .split--even { grid-template-columns: minmax(0, 1fr); } }
.head { display: flex; align-items: end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: clamp(36px, 5vw, 64px); }
.head > .stack { max-width: 720px; }
.center { text-align: center; margin-inline: auto; }
.center.stack { align-items: center; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; } .mt-5 { margin-top: 48px; } .mt-6 { margin-top: 64px; }

/* ---------- page transitions ---------- */
#view { display: block; min-height: 60vh; outline: none; transition: opacity .38s var(--ease), transform .5s var(--ease-out); }
#view.is-leaving { opacity: 0; transform: translateY(-6px); transition-duration: .18s; }
#view.is-entering { opacity: 0; transform: translateY(10px); transition: none; }

/* ---------- reveal (only elements below the first screen are pre-hidden, by JS) ---------- */
[data-r].r-pre { opacity: 0; transform: translateY(14px); }
[data-r="fade"].r-pre { transform: none; }
[data-r="scale"].r-pre { transform: scale(.98); }
[data-r="left"].r-pre { transform: translateX(-28px); }
[data-r="right"].r-pre { transform: translateX(28px); }
[data-r].r-pre.r-in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out) var(--r-delay, 0ms), transform .9s var(--ease-out) var(--r-delay, 0ms); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }

/* ---------- toasts ---------- */
#toasts { position: fixed; z-index: 300; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 14px; font-size: 14px; box-shadow: var(--shadow-3); opacity: 0; transform: translateY(12px) scale(.98); transition: .35s var(--ease-out); }
.toast.in { opacity: 1; transform: none; }
.toast .ic { color: #8CF0BD; }
.toast--error .ic { color: #FF9AA8; }

/* ==== css/components.css ==== */
/* ================= COMPONENTS =================
   Every page composes these. Page CSS may add layout, never restyle a component globally. */

/* ---------- buttons ---------- */
.btn { --bh: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--bh); padding: 0 22px; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; border: 1px solid transparent; transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease), box-shadow .3s; position: relative; isolation: isolate; }
.btn .ic { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.btn:hover .ic-arrow-right, .btn:hover .ic-arrow-up-right { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn--sm { --bh: 38px; padding: 0 16px; font-size: 14px; }
.btn--lg { --bh: 56px; padding: 0 28px; font-size: 16px; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #221E30; box-shadow: 0 10px 30px -10px rgba(20, 10, 60, .45); }
.btn--violet { background: var(--violet); color: #fff; box-shadow: 0 10px 30px -12px var(--violet-glow), inset 0 1px 0 rgba(255,255,255,.18); }
.btn--violet:hover { background: var(--violet-3); }
.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { background: #EDE8FF; }
.btn--line { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn--line:hover { border-color: var(--ink); }
[data-theme="night"] .btn--line { border-color: var(--nline-2); color: var(--snow); }
[data-theme="night"] .btn--line:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.04); }
.btn--glass { background: rgba(255,255,255,.08); color: var(--snow); border-color: rgba(255,255,255,.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn--glass:hover { background: rgba(255,255,255,.14); }
.btn--ghost { background: transparent; color: inherit; padding: 0 6px; height: auto; }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* text link with arrow */
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--ink); }
.link .ic { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.link:hover .ic { transform: translateX(4px); }
.link--violet { color: var(--violet-3); }
[data-theme="night"] .link { color: var(--snow); }
.ulink { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ease); padding-bottom: 1px; }
.ulink:hover { background-size: 100% 1px; }

/* round icon button */
.icon-btn { width: 42px; height: 42px; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid var(--line-2); color: var(--ink); transition: .25s var(--ease); background: var(--paper-2); }
.icon-btn:hover { border-color: var(--ink); transform: translateY(-2px); }
.icon-btn .ic { width: 18px; height: 18px; }
[data-theme="night"] .icon-btn { background: rgba(255,255,255,.04); border-color: var(--nline-2); color: var(--snow); }
[data-theme="night"] .icon-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }

/* ---------- pill label (the WordPress "About | Kcalb Ltd →" chip) ---------- */
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--paper-2); font-size: 13px; font-weight: 500; color: var(--ink-2); width: max-content; max-width: 100%; }
.pill b { background: var(--ink); color: #fff; font-weight: 600; padding: 4px 11px; border-radius: var(--r-pill); font-size: 12.5px; }
.pill .ic { width: 14px; height: 14px; }
[data-theme="night"] .pill { background: rgba(255,255,255,.05); border-color: var(--nline-2); color: var(--snow-2); }
[data-theme="night"] .pill b { background: #fff; color: var(--ink); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .6; }
[data-theme="night"] .eyebrow { color: var(--snow-3); }

/* ---------- badges / status ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; letter-spacing: 0; white-space: nowrap; background: var(--paper-3); color: var(--ink-2); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.badge--plain::before { display: none; }
.badge--live { background: var(--ok-soft); color: #0E7A4E; }
.badge--soon { background: var(--violet-soft); color: var(--violet-3); }
.badge--dev { background: var(--paper-3); color: var(--ink-2); }
[data-theme="night"] .badge { background: rgba(255,255,255,.08); color: var(--snow-2); }
[data-theme="night"] .badge--live { background: rgba(22,163,106,.16); color: #6FE3AE; }
[data-theme="night"] .badge--soon { background: rgba(123,77,255,.2); color: #C9B8FF; }
[data-theme="night"] .badge--dev { background: rgba(255,255,255,.1); color: var(--snow-2); }
.tag { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2); font-size: 13px; color: var(--ink-2); background: transparent; transition: .2s; }
.tag:hover, .tag.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
[data-theme="night"] .tag { border-color: var(--nline-2); color: var(--snow-2); }
[data-theme="night"] .tag:hover, [data-theme="night"] .tag.is-on { background: #fff; color: var(--ink); border-color: #fff; }

/* ---------- cards ---------- */
.card { position: relative; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 2.4vw, 32px); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s; }
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: var(--line-2); }
.card--flat { background: transparent; }
.card--tint { background: var(--paper); }
[data-theme="night"] .card { background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); border-color: var(--nline); }
[data-theme="night"] .card--hover:hover { border-color: var(--nline-2); box-shadow: var(--shadow-night); }
.card__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.card__icon .ic { width: 22px; height: 22px; }
[data-theme="night"] .card__icon { background: rgba(255,255,255,.06); border-color: var(--nline); color: var(--snow); }
.card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* brand tile (square app-icon style) */
.brand-tile { width: var(--bt, 56px); height: var(--bt, 56px); border-radius: calc(var(--bt, 56px) * .26); display: grid; place-items: center; overflow: hidden; flex: none; background: #0E0A18; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.brand-tile img, .brand-tile svg { width: 100%; height: 100%; object-fit: cover; }

/* ---------- frames ---------- */
/* browser window (WordPress "2025" cards) */
.browser { border-radius: 16px; background: #0F0B19; border: 1px solid rgba(255,255,255,.1); overflow: hidden; box-shadow: var(--shadow-night); }
.browser__bar { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.07); }
.browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; } .browser__bar i:nth-child(2) { background: #FEBC2E; } .browser__bar i:nth-child(3) { background: #28C840; }
.browser__url { margin-left: 10px; flex: 1; height: 22px; border-radius: 6px; background: rgba(255,255,255,.06); font: 500 11.5px/22px var(--f-mono); color: var(--snow-3); padding: 0 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 360px; }
.browser img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
[data-theme="paper"] .browser, [data-theme="white"] .browser { box-shadow: var(--shadow-3); }
/* phone */
.phone { position: relative; width: var(--pw, 280px); aspect-ratio: 390 / 844; border-radius: calc(var(--pw, 280px) * .15); padding: calc(var(--pw, 280px) * .03); background: linear-gradient(145deg, #2A2438, #0B0812 40%, #1D1829); box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 50px 100px -30px rgba(10, 4, 30, .7), 0 20px 40px -20px rgba(10,4,30,.5); flex: none; }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: calc(var(--pw, 280px) * .125); }
.phone::after { content: none; }
/* bracket frame (team photos on the WordPress site) */
.bracket { position: relative; padding: 12px; }
.bracket::before, .bracket::after { content: ""; position: absolute; width: 18px; height: 18px; border: 1px solid var(--ink-4); pointer-events: none; }
.bracket::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.bracket::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* ---------- backgrounds ---------- */
.bg-beam { position: absolute; inset: 0; pointer-events: none; background: var(--beam); }
.bg-grid-top { position: absolute; left: 0; right: 0; top: 0; height: 300px; pointer-events: none; background: url(assets/bg/grid-top.webp) center top / 1600px auto no-repeat; opacity: .75; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.bg-grid-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 260px; pointer-events: none; background: url(assets/bg/grid-bottom.svg) center bottom / 2400px auto no-repeat; opacity: .5; }
[data-theme="night"] .bg-grid-bottom { filter: invert(1); opacity: .12; }
.bg-dots { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(11,10,18,.12) 1px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(60% 60% at 50% 40%, #000, transparent); mask-image: radial-gradient(60% 60% at 50% 40%, #000, transparent); }
[data-theme="night"] .bg-dots { background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.2px); }
.bg-noise::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.glow { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; background: var(--violet-glow); }

/* ---------- stats ---------- */
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat__v { font-family: var(--f-display); font-weight: 600; font-size: clamp(34px, 4vw, 56px); line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.stat__l { font-size: 14px; color: var(--ink-3); }
[data-theme="night"] .stat__l { color: var(--snow-3); }

/* ---------- forms ---------- */
.form { display: grid; gap: 18px; }
.form .g-2 { gap: 18px; }
.field { display: grid; gap: 8px; }
.field > label, .label { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.field .hint { font-size: 12.5px; color: var(--ink-3); }
.input, .select, .textarea { width: 100%; height: 50px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--paper-2); padding: 0 16px; font-size: 15.5px; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.textarea { height: auto; min-height: 140px; padding: 14px 16px; resize: vertical; line-height: 1.55; }
.select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%236B6779' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; }
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-4); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(123,77,255,.14); }
.field.is-error .input, .field.is-error .textarea, .field.is-error .select { border-color: var(--bad); }
.field .err { font-size: 12.5px; color: var(--bad); display: none; }
.field.is-error .err { display: block; }
[data-theme="night"] .input, [data-theme="night"] .select, [data-theme="night"] .textarea { background: rgba(255,255,255,.04); border-color: var(--nline-2); color: var(--snow); }
[data-theme="night"] .input::placeholder, [data-theme="night"] .textarea::placeholder { color: var(--snow-4); }
[data-theme="night"] .field > label, [data-theme="night"] .label { color: var(--snow-2); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-2); flex: none; margin: 1px 0 0; display: grid; place-items: center; background: var(--paper-2); transition: .2s; cursor: pointer; }
.check input:checked { background: var(--violet); border-color: var(--violet); }
.check input:checked::after { content: ""; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.switch { appearance: none; -webkit-appearance: none; width: 40px; height: 24px; border-radius: 99px; background: var(--line-2); position: relative; cursor: pointer; transition: .25s; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: .25s var(--ease); }
.switch:checked { background: var(--violet); } .switch:checked::after { transform: translateX(16px); }
/* inline subscribe */
.subscribe { display: flex; gap: 8px; padding: 6px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--paper-2); max-width: 460px; }
.subscribe input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 14px; font-size: 15px; outline: none; }
.subscribe .btn { --bh: 44px; }
[data-theme="night"] .subscribe { background: rgba(255,255,255,.05); border-color: var(--nline-2); }
[data-theme="night"] .subscribe input { color: var(--snow); }
[data-theme="night"] .subscribe input::placeholder { color: var(--snow-4); }
.form-done { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--r-md); background: var(--ok-soft); color: #0E5C3C; font-size: 15px; }
.form-done .ic { width: 22px; height: 22px; margin-top: 1px; }

/* ---------- accordion (FAQ) ---------- */
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-family: var(--f-display); font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .ic { width: 20px; height: 20px; transition: transform .35s var(--ease); flex: none; }
.acc details[open] summary .ic { transform: rotate(45deg); }
.acc .acc__body { padding: 0 0 24px; color: var(--ink-2); max-width: 720px; line-height: 1.7; }
[data-theme="night"] .acc, [data-theme="night"] .acc details { border-color: var(--nline); }
[data-theme="night"] .acc .acc__body { color: var(--snow-2); }

/* ---------- tabs / segmented ---------- */
.seg { display: inline-flex; padding: 4px; border-radius: var(--r-pill); background: var(--paper-3); gap: 2px; flex-wrap: wrap; }
.seg button, .seg a { height: 36px; padding: 0 16px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; color: var(--ink-3); transition: .2s; display: inline-flex; align-items: center; gap: 6px; }
.seg .is-on { background: var(--paper-2); color: var(--ink); box-shadow: var(--shadow-1); }
[data-theme="night"] .seg { background: rgba(255,255,255,.06); }
[data-theme="night"] .seg button, [data-theme="night"] .seg a { color: var(--snow-3); }
[data-theme="night"] .seg .is-on { background: rgba(255,255,255,.14); color: var(--snow); }

/* ---------- avatars ---------- */
.avatar { width: var(--av, 40px); height: var(--av, 40px); border-radius: 50%; object-fit: cover; flex: none; background: var(--paper-3); }
.avatar-row { display: flex; } .avatar-row .avatar { border: 2px solid var(--paper-2); margin-left: -10px; } .avatar-row .avatar:first-child { margin-left: 0; }

/* ---------- logos strip (partners) ---------- */
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 64px); }
.logos img { height: var(--lh, 30px); width: auto; max-width: 170px; object-fit: contain; opacity: .7; filter: grayscale(1); transition: opacity .3s, filter .3s; }
.logos a:hover img { opacity: 1; filter: none; }

/* ---------- divider / breadcrumbs / page hero ---------- */
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }
[data-theme="night"] .hr { background: var(--nline); }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); flex-wrap: wrap; }
.crumbs a:hover { color: var(--ink); }
.crumbs .ic { width: 14px; height: 14px; opacity: .6; }
[data-theme="night"] .crumbs { color: var(--snow-3); }
[data-theme="night"] .crumbs a:hover { color: var(--snow); }
/* standard inner-page hero: night stage with the beam, title, lead */
.page-hero { position: relative; padding: calc(var(--header-h) + clamp(72px, 10vw, 140px)) 0 clamp(64px, 8vw, 110px); overflow: clip; }
.page-hero .bg-beam { background: radial-gradient(46% 70% at 50% -8%, rgba(160,120,255,.55), rgba(110,60,240,.16) 50%, transparent 78%); }
.page-hero__inner { position: relative; display: flex; flex-direction: column; gap: 22px; max-width: 880px; }
.page-hero--center .page-hero__inner { align-items: center; text-align: center; margin-inline: auto; }
.page-hero .t-lead { max-width: 640px; }

/* ---------- media ---------- */
.media { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-3); }
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.card--hover:hover .media img, a:hover > .media img { transform: scale(1.035); }
.ratio-16x9 { aspect-ratio: 16 / 9; } .ratio-4x3 { aspect-ratio: 4 / 3; } .ratio-1 { aspect-ratio: 1; } .ratio-3x4 { aspect-ratio: 3 / 4; }

/* ---------- empty / note ---------- */
.note { display: flex; gap: 12px; padding: 16px 18px; border-radius: var(--r-md); background: var(--violet-soft); color: #3A2391; font-size: 14.5px; line-height: 1.55; }
.note .ic { width: 20px; height: 20px; margin-top: 1px; }

/* ================= SIGNATURE ELEMENTS (from the WordPress site, elevated) ================= */
/* double-bezel card: thin outer frame, 12px moat, white inner card (the WordPress "Apple-like" container) */
.bezel { border: 1px solid var(--line); border-radius: 36px; padding: 10px; background: rgba(255,255,255,.5); }
.bezel > .bezel__in { background: var(--paper-2); border-radius: 27px; border: 1px solid var(--line); padding: clamp(24px, 3vw, 44px); height: 100%; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, var(--shadow-1); }
[data-theme="night"] .bezel { border-color: var(--nline); background: rgba(255,255,255,.02); }
[data-theme="night"] .bezel > .bezel__in { background: linear-gradient(180deg, #121019, #0B0911); border-color: var(--nline); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset; }
/* hinge: 2px double violet hairlines where a night band meets a paper band */
.hinge { position: relative; height: 0; z-index: 2; }
.hinge::before, .hinge::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--violet-2) 20%, var(--violet-2) 80%, transparent); opacity: .7; }
.hinge::before { top: -3px; } .hinge::after { top: 1px; opacity: .35; }
/* perspective room: ceiling + floor grids (paper) */
.room-top { position: absolute; left: 50%; top: 0; width: max(1600px, 120%); transform: translateX(-50%); height: 170px; pointer-events: none; background: url(assets/bg/shape-grid-top.svg) center top / 100% 100% no-repeat; opacity: .55; }
.room-bottom { position: absolute; left: 50%; bottom: 0; width: max(1600px, 120%); transform: translateX(-50%); height: 263px; pointer-events: none; background: url(assets/bg/grid-3d-bottom.svg) center bottom / 100% 100% no-repeat; opacity: .6; }
[data-theme="night"] .room-top, [data-theme="night"] .room-bottom { filter: invert(1); opacity: .09; }
.floor-light { position: absolute; left: 50%; bottom: 0; width: max(1500px, 110%); transform: translateX(-50%); height: 231px; pointer-events: none; background: url(assets/bg/shape-light.svg) center bottom / 100% 100% no-repeat; opacity: .5; }
/* running light on a dashed rail */
.rail { position: relative; height: 2px; background: url(assets/bg/line-dashed.svg) center / auto 2px repeat-x; overflow: hidden; opacity: .8; }
.rail::after { content: ""; position: absolute; top: 0; left: -30%; width: 30%; height: 2px; background: linear-gradient(90deg, transparent, var(--violet), transparent); animation: rail-run 4.8s var(--ease-in-out) 3; }
@keyframes rail-run { to { left: 100%; } }
/* glow button: the one primary CTA of a page, soft halo behind (WordPress "Publications" button) */
.btn--glow { background: var(--ink); color: #fff; }
.btn--glow::before { content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; background: conic-gradient(from var(--ga, 0deg), #7A5AF8, #C084FC, #60A5FA, #7A5AF8); filter: blur(10px); opacity: .7; transition: opacity .3s; animation: glow-turn 6s linear infinite; }
.btn--glow:hover::before { opacity: 1; }
[data-theme="night"] .btn--glow { background: #fff; color: var(--ink); }
@property --ga { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes glow-turn { to { --ga: 360deg; } }
/* scroll-scrubbed paragraph: words go from grey to ink as it scrolls into view (always readable) */
[data-scrub] .w { color: var(--ink-4); transition: color .25s linear; }
[data-scrub] .w.on { color: var(--ink); }
[data-theme="night"] [data-scrub] .w { color: rgba(246,244,251,.22); }
[data-theme="night"] [data-scrub] .w.on { color: var(--snow); }
/* drafting frame: corner brackets + "+" marks (team, feature grids) */
.drafting { position: relative; border: 1px dashed var(--line-2); }
.drafting > .plus { position: absolute; width: 14px; height: 14px; color: var(--ink-4); }
.drafting > .plus::before, .drafting > .plus::after { content: ""; position: absolute; background: currentColor; }
.drafting > .plus::before { left: 6px; top: 0; width: 1px; height: 14px; } .drafting > .plus::after { top: 6px; left: 0; height: 1px; width: 14px; }
/* CTA room card (violet perspective room) */
.cta-room { position: relative; overflow: hidden; border-radius: var(--r-xl); background: #8B72FF url(assets/bg/bgr-form.webp) center / cover no-repeat; color: #fff; padding: clamp(56px, 8vw, 110px) clamp(24px, 5vw, 64px); text-align: center; display: grid; justify-items: center; gap: 18px; isolation: isolate; }
.cta-room::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 50% 0%, rgba(255,255,255,.18), transparent 60%), linear-gradient(180deg, rgba(40,20,120,.1), rgba(30,10,90,.35)); }
.cta-room h2 { background: var(--grad-title-night); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta-room p { color: rgba(255,255,255,.85); max-width: 520px; }
/* silver text (metal) for night titles */
.t-silver { background: var(--grad-title-night); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* ad slots (News) */
.ad { position: relative; display: grid; place-items: center; border-radius: 14px; background: var(--paper-3); border: 1px solid var(--line); overflow: hidden; }
.ad__label { position: absolute; top: 8px; left: 10px; font: 500 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); z-index: 2; }
[data-theme="night"] .ad { background: rgba(255,255,255,.03); border-color: var(--nline); }

/* ==== css/chrome.css ==== */
/* ================= SITE CHROME: header, mega menu, mobile menu, footer, cookie banner ================= */

/* ---------- header ---------- */
.site-header { position: fixed; z-index: 100; left: 0; right: 0; top: 0; padding-top: env(safe-area-inset-top, 0px); transition: transform .45s var(--ease), background .35s, border-color .35s, color .35s; color: var(--snow); border-bottom: 1px solid transparent; }
body[data-layout="studio"] .site-header, body[data-layout="studio"] .site-footer, body[data-layout="studio"] .mega { display: none; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header__in { height: var(--header-h); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; }
.site-header[data-on="paper"], .site-header[data-on="white"] { color: var(--ink); }
.site-header.is-scrolled { background: rgba(5, 3, 9, .72); border-bottom-color: rgba(255,255,255,.06); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); }
.site-header.is-scrolled[data-on="paper"], .site-header.is-scrolled[data-on="white"] { background: rgba(245, 245, 249, .78); border-bottom-color: rgba(11,10,18,.06); }
body.menu-open .site-header, body.mega-open .site-header { background: var(--night); color: var(--snow); border-bottom-color: rgba(255,255,255,.06); }
/* lockup */
.lockup { display: inline-flex; align-items: center; gap: 12px; }
.lockup img { width: 34px; height: 34px; border-radius: 9px; }
.lockup__mark { width: 26px; height: 26px; }
.lockup__bar { width: 1px; height: 20px; background: currentColor; opacity: .3; }
.lockup__word { height: 16px; width: auto; fill: currentColor; }
.foot-tag { font-family: var(--f-display); font-size: 22px !important; line-height: 1.25 !important; letter-spacing: -.02em; color: var(--snow) !important; max-width: 280px; }
.lockup__ltd { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .2em; opacity: .55; margin-left: -2px; padding-top: 4px; }
/* nav */
.nav { display: flex; justify-content: center; gap: 2px; }
.nav__item { position: relative; }
.nav__link { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: var(--r-pill); font-size: 14.5px; font-weight: 500; opacity: .86; transition: opacity .2s, background .2s; }
.nav__link .ic { width: 14px; height: 14px; transition: transform .3s var(--ease); opacity: .7; }
.nav__link:hover, .nav__link.is-open, .nav__link.is-active { opacity: 1; background: rgba(255,255,255,.08); }
.site-header[data-on="paper"]:not(.is-open) .nav__link:hover, .site-header[data-on="paper"] .nav__link.is-active { background: rgba(11,10,18,.06); }
.nav__link.is-open .ic { transform: rotate(180deg); }
.header-cta { display: flex; align-items: center; gap: 10px; }
.header-cta .btn { --bh: 40px; padding: 0 18px; font-size: 14px; }
.site-header .btn--line { color: inherit; border-color: rgba(255,255,255,.22); }
.site-header .btn--line:hover { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.06); }
.site-header[data-on="paper"] .btn--line, .site-header[data-on="white"] .btn--line { border-color: var(--line-2); }
.site-header[data-on="paper"] .btn--line:hover, .site-header[data-on="white"] .btn--line:hover { border-color: var(--ink); background: transparent; }
body.menu-open .site-header .btn--line, body.mega-open .site-header .btn--line { border-color: rgba(255,255,255,.22) !important; }
.burger { display: none; width: 42px; height: 42px; border-radius: 50%; place-items: center; }
.burger span { display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; transition: .3s var(--ease); }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: currentColor; transition: .3s var(--ease); }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
body.menu-open .burger span { background: transparent; }
body.menu-open .burger span::before { top: 0; transform: rotate(45deg); }
body.menu-open .burger span::after { top: 0; transform: rotate(-45deg); }
/* one CTA per width: desktop = Contact (News is in the nav); tablet/phone = News pill + menu */
@media (max-width: 1080px) {
  .nav, .header-cta .btn--line { display: none; }
  .burger { display: grid; margin-right: -9px; }
  .site-header__in { grid-template-columns: auto 1fr; }
  .header-cta { grid-column: 2; justify-self: end; }
}
/* legibility over the beam at the top of night pages */
.site-header:not(.is-scrolled)[data-on="night"] .nav__link, .site-header:not(.is-scrolled)[data-on="dark"] .nav__link { opacity: 1; text-shadow: 0 1px 14px rgba(12, 4, 40, .7); }

/* ---------- mega menu ---------- */
.mega { position: fixed; z-index: 99; left: 0; right: 0; top: 0; padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); background: var(--night); color: var(--snow); border-bottom: 1px solid rgba(255,255,255,.07); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .28s var(--ease), transform .4s var(--ease-out); }
.mega.is-open { opacity: 1; transform: none; pointer-events: auto; }
.mega[hidden] { display: block !important; visibility: hidden; }
.mega.is-open[hidden] { visibility: visible; }
.mega__in { display: grid; grid-template-columns: 260px 1fr; gap: 48px; padding-block: 36px 44px; }
.mega__intro { display: flex; flex-direction: column; gap: 14px; padding-right: 24px; border-right: 1px solid rgba(255,255,255,.07); }
.mega__intro p { color: var(--snow-3); font-size: 14px; line-height: 1.6; }
.mega__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.mega__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega__item { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 16px; transition: background .2s; }
.mega__item:hover { background: rgba(255,255,255,.05); }
.mega__item .brand-tile { --bt: 44px; }
.mega__item b { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.mega__item span { display: block; font-size: 13px; color: var(--snow-3); line-height: 1.45; margin-top: 2px; }
.mega__item .icon-wrap { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); flex: none; }
.mega__item .icon-wrap .ic { width: 20px; height: 20px; }
.mega__foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.07); font-size: 13.5px; color: var(--snow-3); }
.mega-scrim { position: fixed; inset: 0; z-index: 98; background: rgba(5,3,9,.45); opacity: 0; pointer-events: none; transition: opacity .3s; }
body.mega-open .mega-scrim { opacity: 1; pointer-events: auto; }

/* ---------- mobile menu ---------- */
.mnav { position: fixed; z-index: 99; inset: 0; background: var(--night); color: var(--snow); padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 8px) var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); display: flex; flex-direction: column; gap: 8px; }
body.menu-open .mnav { opacity: 1; pointer-events: auto; }
body.menu-open { overflow: hidden; }
.mnav details { border-bottom: 1px solid rgba(255,255,255,.08); }
.mnav summary, .mnav > a { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 18px 2px; font-family: var(--f-display); font-size: 26px; font-weight: 600; letter-spacing: -.03em; cursor: pointer; }
.mnav > a { border-bottom: 1px solid rgba(255,255,255,.08); }
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary .ic { width: 22px; height: 22px; opacity: .6; transition: transform .3s; }
.mnav details[open] summary .ic { transform: rotate(45deg); }
.mnav__sub { display: grid; gap: 4px; padding: 0 0 18px; }
.mnav__sub a { display: flex; align-items: center; gap: 12px; padding: 10px 4px; font-size: 16px; color: var(--snow-2); }
.mnav__sub .brand-tile { --bt: 32px; }
.mnav__foot { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; gap: 18px; }

/* ---------- footer ---------- */
.site-footer { position: relative; background: var(--night-glow), var(--night); color: var(--snow); overflow: clip; }
/* one fine line of light across the top of the footer (a single line, fading at both ends) */
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(166,144,255,.45) 30%, rgba(203,213,255,.6) 50%, rgba(166,144,255,.45) 70%, transparent); pointer-events: none; }
.site-footer .bg-beam { background: radial-gradient(50% 60% at 50% 110%, rgba(123,77,255,.22), transparent 70%); }
.foot-top { position: relative; display: grid; align-items: start; grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr); gap: clamp(40px, 6vw, 96px); padding-block: clamp(72px, 9vw, 120px) 56px; }
.foot-brand { display: flex; flex-direction: column; gap: 22px; max-width: 400px; }
.foot-brand .lockup img { width: 40px; height: 40px; }
.foot-brand p { color: var(--snow-3); font-size: 15px; line-height: 1.6; }
.foot-news { display: flex; flex-direction: column; gap: 10px; }
.foot-news .t-label { color: var(--snow-3); }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.foot-col h4 { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--snow-4); margin-bottom: 18px; }
.foot-col ul { list-style: none; padding: 0; display: grid; gap: 12px; }
.foot-col a { font-size: 14.5px; color: var(--snow-2); transition: color .2s; display: inline-flex; align-items: center; gap: 8px; }
.foot-col a:hover { color: #fff; }
.foot-col a .badge { height: 20px; font-size: 10.5px; padding: 0 8px; }
.socials { display: flex; flex-wrap: wrap; gap: 8px; }
.site-footer .socials { flex-wrap: nowrap; }
.social { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: var(--snow-2); transition: .25s var(--ease); }
.social svg { width: 17px; height: 17px; }
.social:hover { background: #fff; color: var(--ink); border-color: #fff; transform: translateY(-2px); }
[data-theme="paper"] .social, [data-theme="white"] .social { background: var(--paper-2); border-color: var(--line-2); color: var(--ink-2); }
[data-theme="paper"] .social:hover, [data-theme="white"] .social:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.foot-word { position: relative; padding: 0 0 8px; user-select: none; pointer-events: none; }
.foot-word svg { width: 100%; height: auto; }
.foot-bottom { position: relative; border-top: 1px solid rgba(255,255,255,.07); padding-block: 22px calc(22px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; font-size: 13px; color: var(--snow-4); }
.foot-bottom nav { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-bottom a:hover { color: var(--snow); }
.foot-legal { max-width: 860px; font-size: 12px; line-height: 1.6; color: var(--snow-4); padding-bottom: 28px; position: relative; }
@media (max-width: 980px) { .foot-top { grid-template-columns: minmax(0, 1fr); } .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- cookie banner: one compact bar ---------- */
.cookie { position: fixed; z-index: 150; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(880px, calc(100vw - 32px)); background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; padding: 10px 10px 10px 20px; box-shadow: var(--shadow-3); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; transform: translate(-50%, 16px); opacity: 0; transition: .5s var(--ease-out); }
.cookie.in { transform: translate(-50%, 0); opacity: 1; }
.cookie .cookie__prefs { grid-column: 1 / -1; order: -1; }
.cookie p { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.cookie p a { text-decoration: underline; text-underline-offset: 2px; }
.cookie .btn-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
/* long labels (French, German…) wrap inside their button instead of pushing the last one off the screen */
.cookie .btn-row .btn { min-width: 0; white-space: normal; text-align: center; line-height: 1.2; height: auto; min-height: 38px; padding-block: 6px; }
.cookie .btn-row .btn { --bh: 38px; padding: 0 14px; font-size: 13.5px; }
.cookie [data-ck="prefs"] { border: 0; padding: 0 6px; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
@media (max-width: 760px) {
  .cookie { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: calc(100vw - 20px); }
  .cookie p { font-size: 12.5px; line-height: 1.45; }
  .cookie .btn-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cookie [data-ck="prefs"] { grid-column: 1 / -1; justify-self: start; min-height: 30px; }
}
.cookie__prefs { display: grid; gap: 10px; padding: 12px 0 2px; border-top: 1px solid var(--line); }
.cookie__prefs label { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13.5px; }
.cookie__prefs small { display: block; color: var(--ink-3); font-size: 12px; }

.site-footer.no-social .foot-brand .socials { display: none; }

/* ---------- two areas: Kcalb Ltd site ↔ News portal (switch in the header, 3D turn) ---------- */
.site-switch { gap: 8px; }
.site-switch .ic { width: 16px; height: 16px; }
.site-switch--company { display: none; }
body[data-site="news"] .site-switch--news { display: none; }
body[data-site="news"] .site-switch--company { display: inline-flex; }
body[data-site="news"] .nav, body[data-site="news"] .hd-contact { display: none; }
body[data-site="news"] .site-header__in { grid-template-columns: auto 1fr; }
body[data-site="news"] .header-cta { grid-column: 2; justify-self: end; }
/* InoTimes lockup: on the news side of the site it replaces the Kcalb Ltd one (the company is named as publisher in the footer) */
.lockup.lockup--it { display: none; align-items: center; gap: 9px; color: inherit; text-decoration: none; }
body[data-site="news"] .lockup:not(.lockup--it) { display: none; }
body[data-site="news"] .lockup.lockup--it { display: inline-flex; }
/* the brands' standard (their banners): the app icon, then the name in spaced capitals, INO in white and TIMES in the brand's colour */
.it-icon { width: 30px; height: 30px; flex: none; }
.it-word { font-family: 'Jost', var(--f-display); font-weight: 500; font-size: 17px; line-height: 1; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; margin-right: -.2em; }
.it-word b { font-weight: inherit; color: #A9B8FF; }
.site-header[data-on="paper"] .it-word b { color: #4A62E0; }
@media (max-width: 480px) { .it-word { font-size: 15px; letter-spacing: .16em; } .it-icon { width: 26px; height: 26px; } .site-switch span { display: inline; } }
/* the 3D turn: perspective on the page, a vertical light at the hinge */
/* the site ⇄ News switch: a glass cube, the KcalbApp tile spinning inside (core.js KC.site.flip) */
html.is-flipping { overflow: hidden; }
html.is-flipping #site-header, html.is-flipping #mega, html.is-flipping .mnav, html.is-flipping #cookie, html.is-flipping #toasts, html.is-flipping .mega-scrim { visibility: hidden; }
html.is-flipping #site-footer { display: none; }
.cube-stage { position: fixed; inset: 0; z-index: 1000; overflow: hidden; transform-style: preserve-3d; perspective-origin: 50% 50%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 48%, rgba(124,92,255,.34), transparent 72%), radial-gradient(90% 60% at 50% 118%, rgba(74,24,160,.5), transparent 72%), linear-gradient(180deg, #0A0614, #05030A); }
.cube { position: absolute; inset: 0; transform-style: preserve-3d; }
.cube__face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: transparent; }
.cube__face > .site-header { position: absolute; }
.cube__scroll { position: relative; background: var(--night); }
.cube__glass { position: absolute; inset: 0; z-index: 300; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 1.5px rgba(222,210,255,.6), inset 0 0 110px rgba(124,92,255,.38);
  background: linear-gradient(118deg, rgba(255,255,255,.16), rgba(255,255,255,0) 34%, rgba(255,255,255,0) 64%, rgba(185,160,255,.14)); }
.cube__core { --cs: clamp(150px, 17vw, 260px); position: absolute; left: 50%; top: 50%; width: var(--cs); height: var(--cs); margin: calc(var(--cs) / -2) 0 0 calc(var(--cs) / -2); transform-style: preserve-3d; opacity: 0; }
.cube__glow { position: absolute; inset: -55%; border-radius: 50%; background: radial-gradient(closest-side, rgba(150,110,255,.55), rgba(124,92,255,.18) 55%, transparent); transform: translateZ(-40px); }
.cube__tile { position: absolute; inset: 0; transform-style: preserve-3d; }
.cube__lay { position: absolute; inset: 0; border-radius: 22.5%; background: #3B1480; }
.cube__logo { position: absolute; inset: 0; border-radius: 22.5%; overflow: hidden; transform: translateZ(1px); box-shadow: 0 22px 60px rgba(0,0,0,.55), inset 0 1px 1px rgba(255,255,255,.3); }
.cube__logo img { display: block; width: 100%; height: 100%; }
.cube__logo::after { content: ""; position: absolute; inset: -60%; background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,.62) 50%, transparent 58%); transform: translateX(-70%); animation: cube-sweep 1s .5s ease both; }
@keyframes cube-sweep { to { transform: translateX(70%); } }
/* the switch is the main call to action: page-level header tweaks may never hide it */
body .site-header .header-cta .site-switch { opacity: 1 !important; visibility: visible !important; max-width: none !important; padding-inline: 18px !important; margin-left: 0 !important; border-width: 1px !important; }
@media (max-width: 480px) { body .site-header .header-cta .site-switch { padding-inline: 14px !important; } }

/* ==== css/mode.css ==== */
/* ================= LIGHT / DARK MODE (button in the header, like Crypto-Only) =================
   Light = the designed rhythm (night hero + paper sections). Dark = every paper/white section becomes a night
   surface: JS switches data-theme to "night" and keeps the original in data-was, so every component uses its
   night style; tokens are remapped inside those sections so page styles written with tokens follow. */
html[data-mode="dark"] { color-scheme: dark; }
html[data-mode="dark"] body { background: var(--night); }
[data-was] {
  --paper: #09070E; --paper-2: #121019; --paper-3: #1A1724;
  --ink: #F6F4FB; --ink-2: rgba(246,244,251,.78); --ink-3: rgba(246,244,251,.58); --ink-4: rgba(246,244,251,.4);
  --line: rgba(255,255,255,.085); --line-2: rgba(255,255,255,.15);
  --violet-soft: rgba(122,90,248,.16); --ok-soft: rgba(22,163,106,.16); --warn-soft: rgba(201,138,11,.18); --bad-soft: rgba(214,59,79,.18);
  --shadow-1: none; --shadow-2: 0 10px 30px -12px rgba(0,0,0,.6); --shadow-3: 0 30px 80px -24px rgba(0,0,0,.72);
}
[data-theme="night"][data-was="paper"] { background: var(--night-glow), var(--night); }
[data-theme="night"][data-was="white"] { background: var(--night-glow), #0E0C19; }
[data-theme="night"] .btn--ink { background: #fff; color: #0A0A0F; }
[data-theme="night"] .btn--ink:hover { background: #EDE8FF; }
[data-was] .bezel { background: rgba(255,255,255,.02); }
[data-was] .card { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); }
[data-was] .ad { background: rgba(255,255,255,.03); }
[data-was] .note { color: #D9CFFF; }
[data-was] .form-done { color: #9BE9C2; }
html[data-mode="dark"] .cookie { background: #121019; color: var(--snow); border-color: rgba(255,255,255,.1); }
html[data-mode="dark"] .cookie p { color: var(--snow-2); }
html[data-mode="dark"] .cookie__prefs { border-color: rgba(255,255,255,.1); }
html[data-mode="dark"] .cookie__prefs small { color: var(--snow-3); }
html.mode-anim, html.mode-anim *, html.mode-anim *::before, html.mode-anim *::after { transition: background-color .5s var(--ease), color .45s var(--ease), border-color .5s var(--ease), fill .45s, stroke .45s !important; }
/* the button */
.mode-btn { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid rgba(255,255,255,.22); color: inherit; position: relative; overflow: hidden; transition: border-color .25s, background .25s; }
.mode-btn:hover { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.06); }
.site-header[data-on="paper"] .mode-btn, .site-header[data-on="white"] .mode-btn { border-color: var(--line-2); }
.site-header[data-on="paper"] .mode-btn:hover, .site-header[data-on="white"] .mode-btn:hover { border-color: var(--ink); background: transparent; }
body.menu-open .mode-btn, body.mega-open .mode-btn { border-color: rgba(255,255,255,.22) !important; }
.mode-btn .ic { width: 18px; height: 18px; position: absolute; transition: transform .5s var(--ease-out), opacity .35s; }
.mode-btn .ic-moon { transform: translateY(0) rotate(0); }
.mode-btn .ic-sun { transform: translateY(140%) rotate(-60deg); opacity: 0; }
html[data-mode="dark"] .mode-btn .ic-moon { transform: translateY(-140%) rotate(60deg); opacity: 0; }
html[data-mode="dark"] .mode-btn .ic-sun { transform: none; opacity: 1; }
@media (max-width: 480px) {
  .lockup__bar, .lockup__ltd { display: none; }
  .header-cta { gap: 6px; }
  .header-cta .btn--white { padding: 0 14px; font-size: 13.5px; }
  .mode-btn { width: 38px; height: 38px; }
}
/* white surfaces keep dark text even where --ink is remapped */
[data-theme="night"] .btn--white, [data-theme="night"] .btn--glow, [data-theme="night"] .pill b,
[data-theme="night"] .tag:hover, [data-theme="night"] .tag.is-on { color: #0A0A0F; }
[data-was] .btn--line { color: var(--snow); }

/* ==== css/standard.css ==== */
/* ================= THE STAKE-ONLY STANDARD (Thomas 28/09: « il faut qu'on ait ce petit standard ») =================
   Copied from stake-only.org (frontend/css/global/main.css + theme-light.css):
   titles in the violet gradient, primary buttons in the violet→cyan glow gradient, secondary buttons violet glass. */
:root {
  --grad-title-night: linear-gradient(135deg, #ffffff 0%, #cbd5ff 50%, #a690ff 100%);
  --grad-title-paper: linear-gradient(120deg, #2b2350, #4c3ba8 55%, #2563a8);
  --gradient-btn: linear-gradient(rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 38%), linear-gradient(135deg, rgba(167,139,250,.38) 0%, rgba(122,90,248,.86) 52%, rgba(91,192,255,.72) 100%);
  --gradient-btn-hover: linear-gradient(rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 38%), linear-gradient(135deg, rgba(167,139,250,.45) 0%, rgb(122,90,248) 52%, rgb(91,192,255) 100%);
  --btn-shadow: rgba(122,90,248,.38) 0 14px 38px, rgba(91,192,255,.22) 0 0 44px, rgba(255,255,255,.22) 0 1px 0 inset;
  --btn-shadow-hover: rgba(122,90,248,.38) 0 18px 52px, rgba(91,192,255,.22) 0 0 64px, rgba(255,255,255,.22) 0 1px 0 inset;
}
/* ---- titles ---- */
h1, h2, h3, .t-hero, .t-display, .t-h1, .t-h2, .t-h3 {
  background-image: var(--grad-title-paper); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #2b2350;
}
[data-theme="night"] :is(h1, h2, h3, .t-hero, .t-display, .t-h1, .t-h2, .t-h3), .mega :is(h1, h2, h3, .t-h3), .mnav :is(h1, h2, h3) { background-image: var(--grad-title-night); color: #cbd5ff; }
/* opt-out for titles that carry their own art (chrome wordmark, brand-coloured names, text on photos) */
.no-grad, .no-grad * , .t-silver, .t-grad { -webkit-text-fill-color: initial; }
.no-grad { background-image: none !important; }
.t-silver, .t-grad { -webkit-text-fill-color: transparent; }
/* ---- room for the letters. A gradient title paints its letters with its own box, and what sticks out of the box is not
   painted (Thomas 28/09: the end of the "5" of 2025, the "s" of InoTimes, the bottom of the "g" of "languages").
   Every gradient title gets room above (accents), below (descenders) and after its last letter (the tight letter-spacing
   pushes it out), and gives it back in margins, so nothing moves.
   A rule that sets its own top or bottom margin on a title takes the room off it: calc(<its margin> - var(--gt-t))
   above, calc(<its margin> - var(--gt-b)) below. tools/check-clipped.mjs finds any letter still cut. ---- */
:root { --gt-t: .14em; --gt-e: .14em; --gt-b: .22em; }
h1, h2, h3, .t-hero, .t-display, .t-h1, .t-h2, .t-h3, .t-silver, .t-grad, .link--grad {
  box-sizing: content-box; /* the room never narrows the text: no new line breaks */
  padding-top: var(--gt-t); margin-top: calc(-1 * var(--gt-t)); padding-bottom: var(--gt-b); margin-bottom: calc(-1 * var(--gt-b));
  padding-right: var(--gt-e); margin-right: calc(-1 * var(--gt-e));
}
/* a gradient word that runs over two lines: the room at the end of every line */
.t-silver, .t-grad, .link--grad { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* the Newsroom keeps plain UI headings except its page titles */
.st :is(h2, h3, h4) { background-image: none; -webkit-text-fill-color: currentColor; }
/* ---- buttons: primary = Stake-Only .button ---- */
.btn { border-radius: 10px; font-weight: 800; letter-spacing: 0; }
.btn--white, .btn--ink, .btn--violet, .btn--glow,
[data-theme="night"] .btn--white, [data-theme="night"] .btn--ink, [data-theme="night"] .btn--glow {
  color: #F2F0FF; background: var(--gradient-btn); border: 1px solid rgba(167,139,250,.45); box-shadow: var(--btn-shadow);
}
.btn--white:hover, .btn--ink:hover, .btn--violet:hover, .btn--glow:hover,
[data-theme="night"] .btn--white:hover, [data-theme="night"] .btn--ink:hover, [data-theme="night"] .btn--glow:hover {
  color: #fff; background: var(--gradient-btn-hover); border-color: rgba(167,139,250,.7); box-shadow: var(--btn-shadow-hover); transform: translateY(-2px);
}
[data-theme="paper"] :is(.btn--white, .btn--ink, .btn--violet, .btn--glow), [data-theme="white"] :is(.btn--white, .btn--ink, .btn--violet, .btn--glow) { color: #fff; }
.btn--glow::before { display: none; }
/* secondary = Stake-Only ghost */
.btn--line, .btn--glass, [data-theme="night"] .btn--line {
  color: #a690ff; background: rgba(122,90,248,.14); border: 1px solid rgba(166,144,255,.35); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.btn--line:hover, .btn--glass:hover, [data-theme="night"] .btn--line:hover { color: #c9bbff; background: rgba(167,139,250,.2); border-color: rgba(167,139,250,.7); }
[data-theme="paper"] .btn--line, [data-theme="white"] .btn--line { color: #6044bc; background: rgba(122,90,248,.08); border-color: rgba(96,68,188,.28); }
[data-theme="paper"] .btn--line:hover, [data-theme="white"] .btn--line:hover { color: #4c3ba8; background: rgba(122,90,248,.14); border-color: rgba(96,68,188,.5); }
/* header buttons follow the same standard */
.site-header .btn--line, .site-header[data-on="paper"] .btn--line, .site-header[data-on="white"] .btn--line { color: #a690ff; background: rgba(122,90,248,.14); border-color: rgba(166,144,255,.35); }
.site-header[data-on="paper"] .btn--line, .site-header[data-on="white"] .btn--line { color: #6044bc; background: rgba(122,90,248,.08); }
.site-header .site-switch { color: #F2F0FF; background: var(--gradient-btn); border: 1px solid rgba(167,139,250,.45); box-shadow: var(--btn-shadow); }
.site-header .site-switch:hover { background: var(--gradient-btn-hover); box-shadow: var(--btn-shadow-hover); }
.mode-btn { border-radius: 10px; }
/* links in the gradient (Stake-Only .gradient-link) */
.link--grad { background-image: var(--grad-title-night); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ================= LANGUAGE SWITCHER (same component as stake-only.org header.css) ================= */
.language-switcher { position: relative; flex: 0 0 auto; }
.language-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 76px; height: 40px; padding: 0 10px; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 10px; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; transition: .25s; cursor: pointer; opacity: .9; }
.language-button:hover, .language-switcher[data-language-open="true"] .language-button { opacity: 1; background: rgba(167,139,250,.1); border-color: rgba(167,139,250,.3); }
.language-button .ic { width: 12px; height: 12px; opacity: .6; transition: transform .25s; }
.language-switcher[data-language-open="true"] .language-button .ic { transform: rotate(180deg); }
.language-current-flag { font-size: 15px; line-height: 1; }
.language-current-code { min-width: 20px; text-transform: uppercase; }
.language-menu { position: absolute; top: 48px; right: 0; z-index: 1000; display: none; width: 190px; max-width: calc(100vw - 24px); padding: 8px; overflow: hidden; background: rgba(10,10,22,1); color: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.7); }
.language-switcher[data-language-open="true"] .language-menu { display: block; }
.language-search { display: block; width: 100%; height: 34px; margin: 0 0 8px; padding: 0 10px; color: rgba(255,255,255,.85); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; font-size: 13px; outline: none; }
.language-search:focus { border-color: rgba(167,139,250,.45); }
.language-search::placeholder { color: rgba(255,255,255,.38); }
.language-list { max-height: 260px; overflow: hidden auto; overscroll-behavior: contain; }
.language-item { display: grid; grid-template-columns: 22px 26px minmax(0, 1fr); align-items: center; column-gap: 6px; width: 100%; min-height: 32px; margin-bottom: 6px; padding: 6px 8px; color: rgba(255,255,255,.72); text-align: left; background: rgba(255,255,255,.04); border: 1px solid transparent; border-radius: 10px; font-size: 12px; transition: .2s; cursor: pointer; }
.language-item:hover, .language-item[data-language-selected="true"] { color: #E8EBF5; background: rgba(167,139,250,.1); border-color: rgba(167,139,250,.3); }
.language-item:last-child { margin-bottom: 0; }
.language-item-flag { font-size: 15px; line-height: 1; justify-self: center; }
.language-item-code { font-weight: 850; letter-spacing: .03em; text-transform: uppercase; }
.language-item-name { min-width: 0; padding-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1080px) { .site-header .language-switcher { display: none; } .mnav .language-switcher { display: block; } .mnav .language-menu { left: 0; right: auto; top: auto; bottom: 48px; } }
.mnav .language-button { color: var(--snow); border-color: rgba(255,255,255,.15); }

/* right-to-left languages (ar, ur, fa, he): the page keeps its layout, every paragraph reads from the right */
html.lang-rtl :is(p, h1, h2, h3, h4, li, dd, dt, blockquote, td, th, label, figcaption, summary) { unicode-bidi: plaintext; }

/* newsletter fields (footer, home, News): the button sits inside the field with the same 5 px all round, corners that
   follow each other (field 14, button 10) and a short glow that never spills over the field (Thomas 28/09) */
.subscribe, .nw-nlf__row { border-radius: 14px; padding: 5px; align-items: center; }
.subscribe .btn, .nw-nlf__btn { --bh: 44px; height: 44px; border-radius: 10px; flex: none; padding: 0 20px; box-shadow: 0 8px 18px -10px rgba(122,90,248,.75), rgba(255,255,255,.22) 0 1px 0 inset; }
.subscribe .btn:hover, .nw-nlf__btn:hover { transform: none; box-shadow: 0 10px 22px -10px rgba(122,90,248,.9), rgba(255,255,255,.22) 0 1px 0 inset; }
.subscribe input, .nw-nlf__in { height: 44px; }

/* Live mark (28/09): a small green square that pulses while the market figures are fresh from the source (js/market-live.js).
   Hidden until the first fresh answer of the visit; never shown on old figures. */
.live-mark { display: none; align-items: center; gap: 6px; margin-right: 8px; font: 600 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #067647; vertical-align: 1px; }
.live-mark.is-on { display: inline-flex; }
.live-mark i { position: relative; width: 8px; height: 8px; border-radius: 2px; background: #12B76A; flex: none; }
.live-mark i::after { content: ""; position: absolute; inset: -3px; border-radius: 4px; border: 1.5px solid #12B76A; opacity: 0; animation: live-mark 1.8s ease-out infinite; }
@keyframes live-mark { 0% { opacity: .7; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.6); } }
[data-theme="night"] .live-mark, .nw-src--night .live-mark { color: #4ADE80; }
[data-theme="night"] .live-mark i, .nw-src--night .live-mark i { background: #22C55E; }
[data-theme="night"] .live-mark i::after, .nw-src--night .live-mark i::after { border-color: #22C55E; }
@media (prefers-reduced-motion: reduce) { .live-mark i::after { animation: none; } }
.nw-spark-ph { display: inline-block; }

/* InoLah's signature (js/signature.js, Thomas 28/09): the Arizonia outlines trace themselves, fill, then star dust flies off */
.sig-host { position: relative; display: inline-block; line-height: 0; vertical-align: middle; }
.sig { display: block; width: 100%; height: auto; overflow: visible; }
.sig__l { stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; }
.sig-host.is-still .sig__l { stroke-dashoffset: 0; fill-opacity: 1; }
.sig__s0 { stop-color: var(--sig0, #2A1760); }
.sig__s1 { stop-color: var(--sig1, #7A5AF8); }
[data-theme="night"] .sig-host { --sig0: #FFFFFF; --sig1: #A690FF; --sig-dust: 214, 204, 255; }
.sig-host { --sig-dust: 122, 90, 248; }
.sig__dust { position: absolute; left: -8%; top: -45%; width: 150%; height: 190%; max-width: none; pointer-events: none; }

/* ================= InoTimes wears its logo's blue (Thomas 28/09: « quand on bascule sur InoTimes, plus le violet mais le
   bleu foncé du logo, les gradients un peu bleutés : quand tu passes de l'autre côté, tu sais que tu es bleu »).
   Only on the InoTimes side (body[data-site="news"]); the Kcalb Ltd side keeps its violet. ================= */
body[data-site="news"] {
  --violet: #4A62E0; --violet-2: #9DB0FF; --violet-3: #3348C8; --violet-soft: #EDF1FF; --violet-glow: rgba(74, 98, 224, .42);
  --night: #090C1B; --night-2: #10152A; --night-3: #171D34;
  --night-glow: radial-gradient(1100px 760px at 10% 0%, rgba(74, 98, 224, .19), transparent 62%), radial-gradient(900px 640px at 94% 100%, rgba(40, 130, 220, .12), transparent 66%);
  --grad-title-night: linear-gradient(135deg, #ffffff 0%, #cdd9ff 50%, #8ea6ff 100%);
  --grad-title-paper: linear-gradient(120deg, #16204d, #2c44ad 55%, #1b6cc0);
  --gradient-btn: linear-gradient(rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 38%), linear-gradient(135deg, rgba(139,164,250,.38) 0%, rgba(74,98,224,.88) 52%, rgba(91,192,255,.72) 100%);
  --gradient-btn-hover: linear-gradient(rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 38%), linear-gradient(135deg, rgba(139,164,250,.45) 0%, rgb(74,98,224) 52%, rgb(91,192,255) 100%);
  --btn-shadow: rgba(74,98,224,.4) 0 14px 38px, rgba(91,192,255,.22) 0 0 44px, rgba(255,255,255,.22) 0 1px 0 inset;
  --btn-shadow-hover: rgba(74,98,224,.42) 0 18px 52px, rgba(91,192,255,.24) 0 0 64px, rgba(255,255,255,.22) 0 1px 0 inset;
}
html[data-mode="dark"] body[data-site="news"], body[data-site="news"] [data-was] { --violet-soft: rgba(74, 98, 224, .18); }
body[data-site="news"] :is(.btn--white, .btn--ink, .btn--violet, .btn--glow), body[data-site="news"] .site-header .site-switch { border-color: rgba(139, 164, 250, .45); }
body[data-site="news"] :is(.btn--white, .btn--ink, .btn--violet, .btn--glow):hover { border-color: rgba(139, 164, 250, .7); }
body[data-site="news"] :is(.btn--line, .btn--glass), body[data-site="news"] .site-header .btn--line { color: #9DB0FF; background: rgba(74, 98, 224, .14); border-color: rgba(139, 164, 250, .35); }
body[data-site="news"] :is(.btn--line, .btn--glass):hover { color: #C6D2FF; background: rgba(139, 164, 250, .2); border-color: rgba(139, 164, 250, .7); }
body[data-site="news"] :is([data-theme="paper"], [data-theme="white"]) .btn--line, body[data-site="news"] .site-header:is([data-on="paper"], [data-on="white"]) .btn--line { color: #3348C8; background: rgba(74, 98, 224, .08); border-color: rgba(51, 72, 200, .28); }
body[data-site="news"] :is([data-theme="paper"], [data-theme="white"]) .btn--line:hover { color: #2A3BA6; background: rgba(74, 98, 224, .14); border-color: rgba(51, 72, 200, .5); }
body[data-site="news"] :is(.language-button:hover, .language-switcher[data-language-open="true"] .language-button, .language-item:hover, .language-item[data-language-selected="true"]) { background: rgba(139, 164, 250, .1); border-color: rgba(139, 164, 250, .3); }
body[data-site="news"] :is(.subscribe .btn, .nw-nlf__btn) { box-shadow: 0 8px 18px -10px rgba(74, 98, 224, .75), rgba(255,255,255,.22) 0 1px 0 inset; }
body[data-site="news"] .site-footer::before { background: linear-gradient(90deg, transparent, rgba(139,164,250,.45) 30%, rgba(203,218,255,.6) 50%, rgba(139,164,250,.45) 70%, transparent); }
body[data-site="news"] .btn--glow::before { background: conic-gradient(from var(--ga, 0deg), #4A62E0, #60A5FA, #9DB0FF, #4A62E0); }
/* InoTimes's own pieces */
body[data-site="news"] .nw-cap--slim .bg-beam { background: radial-gradient(40% 180% at 50% -40%, rgba(110,140,255,.45), transparent 70%); }
body[data-site="news"] .nw-cap--home .bg-beam { background: radial-gradient(42% 120% at 50% -30%, rgba(110,140,255,.6), rgba(60,90,230,.16) 52%, transparent 78%); }
body[data-site="news"] :is(.nw-ahero, .nw-shero) .bg-beam { background: radial-gradient(46% 80% at 30% -10%, rgba(110,140,255,.5), rgba(60,90,230,.12) 55%, transparent 80%); }
/* the Advertise card and the newsletter card: one flat surface each, no glow inside (Thomas 28/09: a gradient block inside
   a gradient band « ça fait pas très joli ») */
body[data-site="news"] .nw-house--adv { background: #0B1024; box-shadow: inset 0 0 0 1px rgba(157,176,255,.16); }
body[data-site="news"] .nw-house--adv::before { display: none; }
body[data-site="news"] .nw-nl { background: #F3F6FF; border-color: #DCE3FA; }
body[data-site="news"] .nw-nl__glow { display: none; }
body[data-site="news"] .nw-nlf__row:focus-within { box-shadow: 0 0 0 4px rgba(74,98,224,.14); }
body[data-site="news"] .nw-board__beam { background: radial-gradient(50% 60% at 50% 0%, rgba(110,140,255,.42), rgba(60,90,230,.1) 55%, transparent 80%) !important; }
body[data-site="news"] .nw-guides__beam { background: radial-gradient(40% 60% at 80% 0%, rgba(110,140,255,.3), transparent 70%) !important; }
body[data-site="news"] .nw-img--none { background: radial-gradient(70% 90% at 50% 0%, rgba(110,140,255,.45), transparent 70%), #070A14; }
body[data-site="news"] .site-footer .bg-beam { background: radial-gradient(50% 60% at 50% 110%, rgba(74,98,224,.22), transparent 70%); }
body[data-site="news"] .nw-prose a { text-decoration-color: rgba(51,72,200,.35); }
body[data-site="news"] [data-theme="night"] .nw-prose a { text-decoration-color: rgba(157,176,255,.4); }
body[data-site="news"] [data-was] .nw-sc--ctx { background: linear-gradient(180deg, rgba(157,176,255,.09), rgba(255,255,255,.03)); }
body[data-site="news"] [data-was] .nw-nl { background: #0E1428; border-color: rgba(157,176,255,.18); }
html[data-mode="dark"] body[data-site="news"] :is(.nw-more, .nw-search__box) { --paper: #070A14; --paper-2: #0F1424; --paper-3: #161C30; --violet-soft: rgba(74,98,224,.2); --violet-3: #9DB0FF; background: #0F1424; }
body[data-site="news"] .nw-own { background: rgba(74,98,224,.1); color: #3348C8; }
body[data-site="news"] [data-theme="night"] .nw-own { background: rgba(139,164,250,.16); color: #C9D4FF; }

/* ==== pages/brands.css ==== */
/* ================= BRANDS (#brands, #brands.<slug>) — prefix .br- =================
   Brand colours (--bc hex, --bcr "r,g,b") only tint the brand's own elements: glows, dots, rails. */

/* ---------- shared bits ---------- */
.br-tile { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 26px -12px rgba(0,0,0,.55); }
.br-tile img { border-radius: inherit; }
[data-theme="paper"] .br-tile, [data-theme="white"] .br-tile { box-shadow: 0 10px 24px -12px rgba(28,16,70,.35), 0 1px 2px rgba(28,16,70,.08); }
.br-ticker { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; font: 600 13.5px/1 var(--f-mono); letter-spacing: .14em; color: #fff; margin-top: .12em;
  background: rgba(var(--bcr), .16); border: 1px solid rgba(var(--bcr), .5); -webkit-text-fill-color: #fff; }
.br-ticker--sm { height: auto; padding: 0; margin: 0 0 0 12px; vertical-align: .5em; font-size: 12px; letter-spacing: .16em; color: var(--ink-3); -webkit-text-fill-color: currentColor; background: none; border: 0; border-radius: 0; }
.br-tag { background: rgba(255,255,255,.08); color: var(--snow-2); }
.br-crop { position: relative; overflow: hidden; margin: 0; border-radius: 22px; background: #0B0911; border: 1px solid rgba(255,255,255,.1); box-shadow: var(--shadow-night); }
.br-crop img { position: absolute; max-width: none; height: auto; }
.br-crop__url { display: block; margin-top: 12px; text-align: center; font: 500 11.5px/1 var(--f-mono); letter-spacing: .08em; color: var(--snow-4); }
/* facts as a quiet line, never as pills (nothing here looks clickable) */
.br-metaline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 18px; font: 500 12px/1.5 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.br-metaline > span { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.br-metaline i { font-style: normal; color: var(--ink-4); }
.br-metaline > span.is-ls > i { display: none; }
/* a region of a capture inside a browser window */
.br-bcrop { position: relative; overflow: hidden; background: #0B0911; }
.browser .br-bcrop img { position: absolute; max-width: none; height: auto; aspect-ratio: auto; object-fit: fill; }

/* ================= BRAND PAGE: HERO ================= */
.br-hero { position: relative; overflow: clip; background: var(--night); padding: calc(var(--header-h) + clamp(28px, 3.5vw, 52px)) 0 clamp(64px, 7vw, 100px); }
.br-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.br-hero__beam { position: absolute; inset: 0; background: radial-gradient(42% 58% at 30% -12%, rgba(160,120,255,.42), rgba(110,60,240,.12) 48%, transparent 76%); }
.br-hero__glow { position: absolute; right: -12%; top: 4%; width: 72%; height: 100%; background: radial-gradient(closest-side, rgba(var(--bcr), .30), rgba(var(--bcr), .08) 55%, transparent 78%); }
.br-hero .room-top { opacity: .07; }
/* the light lives: a very slow drift of the beam and the brand glow (transforms only, stopped for reduced motion) */
.br-hero__beam { animation: br-drift-a 56s ease-in-out -14s infinite alternate; will-change: transform; }
.br-hero__glow { animation: br-drift-b 46s ease-in-out -9s infinite alternate; will-change: transform; }
@keyframes br-drift-a { from { transform: translate3d(-4%, -1%, 0) scale(1); } to { transform: translate3d(5%, 2%, 0) scale(1.1); } }
@keyframes br-drift-b { from { transform: translate3d(3%, -2%, 0) scale(.96); } to { transform: translate3d(-9%, 6%, 0) scale(1.1); } }
.br-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(transparent, var(--night)); pointer-events: none; }
.br-hero__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(40px, 5vw, 88px); align-items: center; min-height: min(calc(100svh - var(--header-h) - 110px), 680px); }
.br-hero__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.br-crumbs { margin-bottom: 24px; }
.br-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.br-crumbs .ic { width: 14px; height: 14px; }
.br-crumbs span[aria-current] { color: var(--snow-2); }
.br-id { display: flex; align-items: center; gap: 20px; margin-bottom: 26px; }
.br-tile--hero { box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 24px 60px -18px rgba(var(--bcr), .75); }
.br-id__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.br-id__meta .t-label { color: var(--snow-2); }
.br-name { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; font-family: var(--f-display); font-weight: 600; font-size: clamp(52px, 6.6vw, 104px); line-height: .94; letter-spacing: -.05em; 
  background: var(--grad-title-night); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: calc(.06em - var(--gt-b)); padding-right: var(--gt-e); margin-right: calc(-1 * var(--gt-e)); }
.br-by { margin-top: 14px; font: 500 12.5px/1.4 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--snow-3); }
.br-lead { margin-top: 26px; font-family: var(--f-display); font-size: clamp(21px, 1.8vw, 27px); line-height: 1.3; letter-spacing: -.02em; color: var(--snow); max-width: 560px; text-wrap: balance; }
.br-sub { margin-top: 14px; font-size: 16.5px; line-height: 1.6; color: var(--snow-2); max-width: 520px; text-wrap: pretty; }
.br-cta { margin-top: 34px; }
.br-cta .btn .ic-si-discord, .br-cta .btn .ic-si-googleplay { width: 17px; height: 17px; }
/* the 2–3 key facts, under the buttons: a definition list, no boxes */
.br-hmeta { display: flex; flex-wrap: wrap; gap: 16px 0; margin: 34px 0 0; }
.br-hmeta > div { display: grid; gap: 6px; padding: 0 26px; border-left: 1px solid var(--nline-2); }
.br-hmeta > div:first-child, .br-hmeta > div.is-ls { padding-left: 0; border-left: 0; }
.br-hmeta dt { font: 500 11px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--snow-3); }
.br-hmeta dd { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 17px; letter-spacing: -.01em; color: var(--snow); }
.br-socials { margin-top: 28px; }
.br-hero__vis { position: relative; min-width: 0; display: grid; place-items: center; }

/* InoLah: three phones fanned in 3D */
/* flat (2D) at rest so every screen is rasterised sharp; the pointer tilt adds perspective only while it moves */
.br-fan { position: relative; width: 100%; height: clamp(460px, 44vw, 620px); transform: none; transition: transform .9s var(--ease-out); }
.br-fan.is-tilting { transform: perspective(1800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition-duration: .25s; }
.br-fan__p { position: absolute; left: 50%; top: 50%; }
.br-fan__p--c { --pw: clamp(200px, 17.5vw, 262px); transform: translate(-50%, -50%); z-index: 3; box-shadow: 0 50px 100px -30px rgba(0,0,0,.9), 0 0 90px -30px rgba(var(--bcr), .7); }
.br-fan__p--l, .br-fan__p--r { --pw: clamp(160px, 13.6vw, 204px); }
.br-fan__p--l { transform: translate(-50%, -50%) translateX(-100%) translateY(5%) rotate(-5deg); z-index: 1; }
.br-fan__p--r { transform: translate(-50%, -50%) translateX(100%) translateY(5%) rotate(5deg); z-index: 1; }
.br-fan__p--l img, .br-fan__p--r img { filter: brightness(.78); }

/* Crypto-Only: the app side of its site, the Android app in front (the site's headline stays out: it would echo the lead) */
.br-combo { position: relative; width: 100%; }
.br-combo .browser { box-shadow: 0 50px 120px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06), 0 0 80px -30px rgba(var(--bcr), .6); }
.br-combo--co { width: min(100%, 600px); margin-inline: auto; padding-bottom: 9%; container-type: inline-size; }
.br-combo--co .br-combo__web { width: 72%; margin-left: auto; }
/* the window's bar follows the size of the composition, so its address always fits */
.br-combo--co .browser__bar { height: clamp(26px, 6.5cqw, 36px); gap: clamp(5px, 1.4cqw, 8px); padding: 0 clamp(9px, 2.4cqw, 14px); }
.br-combo--co .browser__bar i { width: clamp(7px, 1.75cqw, 10px); height: clamp(7px, 1.75cqw, 10px); }
.br-combo--co .browser__url { height: clamp(18px, 4cqw, 22px); margin-left: clamp(3px, 1.4cqw, 10px); padding: 0 clamp(6px, 1.7cqw, 10px); font-size: clamp(9.5px, 2.1cqw, 11.5px); line-height: clamp(18px, 4cqw, 22px); }
.br-combo__phone { position: absolute !important; left: 0; bottom: 0; --pw: 38cqw; z-index: 2; box-shadow: 0 40px 80px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08); }
.br-droid { aspect-ratio: 1080 / 1800 !important; border-radius: calc(var(--pw) * .11) !important; }
.br-droid img { object-position: 50% 100% !important; border-radius: calc(var(--pw) * .085) !important; }
.br-droid::after { width: calc(var(--pw) * .045) !important; height: calc(var(--pw) * .045) !important; top: calc(var(--pw) * .06) !important; border-radius: 50%; }

/* Stake-Only: the public page, alone */
.br-solo { width: min(100%, 560px); margin-inline: auto; }
.br-solo .browser { box-shadow: 0 50px 120px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06), 0 0 90px -30px rgba(var(--bcr), .65); }

/* Tokens: coin with rings and glass chips (tilts with the pointer) */
.br-coin { position: relative; width: min(440px, 88%); aspect-ratio: 1; margin-inline: auto; transform-style: preserve-3d; transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .9s var(--ease-out); }
.br-coin.is-tilting { transition-duration: .2s; }
.br-coin::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--bcr), .5), rgba(var(--bcr), .12) 60%, transparent); filter: blur(24px); }
.br-coin__ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.09); }
.br-coin__ring.r1 { inset: 4%; }
.br-coin__ring.r2 { inset: -6%; border-style: dashed; border-color: rgba(255,255,255,.07); }
.br-coin__img { position: absolute; inset: 15%; width: 70%; height: 70%; filter: drop-shadow(0 34px 50px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(var(--bcr), .35)); transform: translateZ(40px); }

/* Kcanther: a card that flips */
.br-flipwrap { display: grid; justify-items: center; gap: 18px; }
.br-flip { display: block; width: min(384px, 80vw); aspect-ratio: 1; perspective: 1500px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 30px; }
.br-flip__in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s var(--ease-out); }
.br-flip:hover .br-flip__in { transform: rotateY(-8deg) rotateX(3deg); }
.br-flip.is-flipped .br-flip__in { transform: rotateY(180deg); }
.br-flip__face { position: absolute; inset: 0; display: block; border-radius: 30px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid rgba(var(--bcr), .45);
  box-shadow: 0 50px 110px -30px rgba(0,0,0,.9), 0 0 80px -20px rgba(var(--bcr), .55), inset 0 0 0 1px rgba(255,255,255,.05); }
.br-flip__front { background: #0B0706; }
.br-flip__front img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.br-flip__band { position: absolute; left: 14px; right: 14px; bottom: 14px; display: grid; gap: 2px; padding: 14px 18px; border-radius: 18px; text-align: left; background: rgba(12,8,6,.55); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.br-flip__band b { font-family: var(--f-display); font-size: 20px; letter-spacing: -.02em; color: #fff; }
.br-flip__band small { font: 500 11px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.br-flip__back { transform: rotateY(180deg); display: grid; place-items: center; align-content: center; gap: 16px; padding: 32px; text-align: center; background: radial-gradient(90% 70% at 50% 20%, rgba(var(--bcr), .55), rgba(60,20,4,.9) 55%, #120804); }
.br-flip__back img { width: 44%; height: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.5)); }
.br-flip__line { font-family: var(--f-display); font-weight: 600; font-size: 26px; letter-spacing: -.02em; color: #fff; }
.br-flip__sub { font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.72); max-width: 260px; }
.br-flip__hint { display: inline-flex; align-items: center; gap: 8px; }
.br-flip__hint .ic { width: 14px; height: 14px; }

/* ================= BAND (paper) — one treatment per brand ================= */
.br-band { padding-block: clamp(40px, 4.6vw, 64px) clamp(44px, 5vw, 72px); }
.br-band .room-top { opacity: .45; }
.br-band .container { position: relative; }
.br-band .t-h2 { margin-top: calc(16px - var(--gt-t)); }
.br-band .t-body { margin-top: 14px; }

/* tokens: giant supply + contract */
.br-tok { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.br-tok__num { display: grid; gap: 10px; min-width: 0; }
.br-tok__l { display: inline-flex; align-items: center; gap: 8px; font: 500 11.5px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.br-tok__l::before { content: ""; width: 7px; height: 7px; margin-left: 4px; border-radius: 50%; background: var(--bc); box-shadow: 0 0 0 3px rgba(var(--bcr), .16); }
.br-tok__v { font-family: var(--f-display); font-weight: 600; font-size: clamp(38px, 5.6vw, 88px); line-height: .95; letter-spacing: -.045em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.br-tok__u { font: 600 13px/1 var(--f-mono); letter-spacing: .16em; color: var(--ink-2); }
.br-ca { display: grid; gap: 10px; align-content: start; padding: clamp(22px, 2.4vw, 30px); border-radius: 26px; background: var(--paper-2); border: 1px solid var(--line); box-shadow: var(--shadow-1); min-width: 0; }
.br-ca__addr { font: 500 clamp(13px, 1.05vw, 15px)/1.45 var(--f-mono); color: var(--ink); letter-spacing: .01em; word-break: break-all; user-select: all; }
.br-ca__note { font-size: 13.5px; color: var(--ink-3); }
.br-ca__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 8px; }
.br-ca__btn { flex: none; --bh: 44px; }
.br-ca__btn .ic { width: 16px; height: 16px; }
.br-ca__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14.5px; color: var(--ink); height: 44px; }
.br-ca__link .ic { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.br-ca__link:hover .ic { transform: translate(2px, -2px); }
.br-disclaimer { margin-top: 26px; font-size: 12.5px; color: var(--ink-3); }

/* Stake-Only: validator status + its operator address */
.br-val { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(28px, 5vw, 80px); align-items: center; }
.br-ca--val .br-ca__addr { font-size: clamp(12px, .98vw, 14px); letter-spacing: 0; }
.br-live { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #13824F; }
.br-live i { width: 9px; height: 9px; margin-left: 4px; border-radius: 50%; background: #1FB86C; box-shadow: 0 0 0 4px rgba(31,184,108,.16); }
.br-val__facts { display: flex; flex-wrap: wrap; gap: 16px 0; margin: 26px 0 0; }
.br-val__facts > div { display: grid; gap: 8px; padding: 0 30px; border-left: 1px solid var(--line-2); }
.br-val__facts > div:first-child, .br-val__facts > div.is-ls { padding-left: 0; border-left: 0; }
.br-val__facts dt { font: 500 11px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.br-val__facts dd { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(22px, 2vw, 28px); letter-spacing: -.03em; color: var(--ink); }

/* InoLah: the brands inside the app */
.br-inside { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.br-inside__txt .t-body { max-width: 380px; }
.br-inside__groups { display: grid; gap: 22px; }
.br-inside__g { display: grid; gap: 10px; }
.br-inside__k { font: 500 11px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.br-inside__grid { display: grid; gap: 12px; }
.br-inside__grid.n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.br-inside__grid.n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.br-mini { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 20px; background: var(--paper-2); border: 1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; min-width: 0; }
.br-mini:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--line-2); }
.br-mini .brand-tile { flex: none; }
.br-mini > span:last-child { display: grid; gap: 2px; min-width: 0; }
.br-mini b { font-family: var(--f-display); font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
.br-mini small { font-size: 13px; line-height: 1.35; color: var(--ink-3); }

/* Crypto-Only: get the app */
.br-get { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.br-get__txt .t-body { max-width: 520px; }
.br-fine { margin-top: 20px; font-size: 13px; color: var(--ink-3); max-width: 520px; }
ul.br-plat { list-style: none; margin: 0; padding: 8px; border-radius: 28px; background: var(--paper-2); border: 1px solid var(--line); display: grid; gap: 0; }
.br-plat li + li { border-top: 1px solid var(--line); }
.br-plat__r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 28px; align-items: center; gap: 16px; padding: 16px; border-radius: 20px; transition: background .25s; }
a.br-plat__r:hover { background: var(--paper-3); }
.br-plat__ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: #0B0812; color: #fff; }
[data-theme="night"] .br-plat__ic { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.br-plat__ic svg { width: 20px; height: 20px; }
.br-plat__t { display: grid; gap: 2px; min-width: 0; }
.br-plat__t b { font-family: var(--f-display); font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.br-plat__t small { font-size: 13.5px; line-height: 1.35; color: var(--ink-3); }
.br-plat__s { display: flex; }
.br-plat__go { color: var(--ink-3); display: grid; place-items: center; transition: transform .3s var(--ease), color .3s; }
.br-plat__go .ic { width: 18px; height: 18px; }
a.br-plat__r:hover .br-plat__go { color: var(--ink); transform: translate(2px, -2px); }

/* InoSwap: the exchanges, as a plain list */
.br-dex { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.br-dex__txt .t-body { max-width: 440px; }
ul.br-dex__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--line); }
.br-dex__list li { display: flex; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; font-weight: 500; color: var(--ink); min-width: 0; }
.br-dex__list .ic { width: 16px; height: 16px; flex: none; color: var(--bc); }

/* Kcanther: the art beside the first collection in numbers */
.br-kc { display: grid; grid-template-columns: auto minmax(0, auto); justify-content: center; gap: clamp(40px, 6vw, 96px); align-items: center; }
/* never wider than the 500 px artwork allows (390 px on 2x screens) */
.br-kc__art { margin: 0; width: clamp(200px, 20vw, 250px); border-radius: 28px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(120,40,0,.5), 0 0 0 1px rgba(0,0,0,.06); }
.br-kc__art img { width: 100%; height: auto; }
.br-kc__txt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.br-kc__k { margin: calc(-1 * var(--gt-t)) calc(-1 * var(--gt-e)) calc(-1 * var(--gt-b)) 0; }
.br-kc__nums { display: flex; flex-wrap: wrap; gap: 20px 0; margin-top: 22px; }
.br-kc__nums > div { display: grid; gap: 10px; padding: 0 clamp(28px, 3.5vw, 52px); border-left: 1px solid var(--line-2); }
.br-kc__nums > div:first-child { padding-left: 0; border-left: 0; }
.br-kc__v { font-family: var(--f-display); font-weight: 600; font-size: clamp(56px, 6.4vw, 96px); line-height: .92; letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
.br-kc__l { font: 500 11.5px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.br-kc__txt .btn { margin-top: 34px; }
.br-kc__txt .btn .ic-si-discord { width: 17px; height: 17px; }

/* ================= STAGE (night) ================= */
.br-stage { overflow: clip; padding-block: clamp(80px, 9vw, 128px); }
.br-stage__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(38% 46% at 72% 42%, rgba(var(--bcr), .24), transparent 72%), radial-gradient(40% 40% at 18% 0%, rgba(122,90,248,.16), transparent 70%); }
.br-stage__glow::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); background: radial-gradient(38% 46% at 72% 42%, rgba(60,123,240,.34), transparent 72%), radial-gradient(40% 40% at 18% 0%, rgba(60,123,240,.18), transparent 70%); }
.br-stage.is-ocean .br-stage__glow::after { opacity: 1; }
.br-stage .container { position: relative; }
.br-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.br-split--top { align-items: start; }
.br-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.br-copy .eyebrow { margin-bottom: 20px; }
.br-copy .t-lead { margin-top: 22px; max-width: 520px; }
.br-copy .t-silver { display: inline; }
.br-sticky { position: sticky; top: calc(var(--header-h) + 40px); }
.br-head { display: grid; justify-items: start; gap: 18px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.br-head .t-lead { max-width: 620px; }

/* tabs (InoLah screens, InoSwap modes) */
.br-tabs { display: inline-flex; gap: 4px; padding: 5px; margin-top: 34px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--nline); max-width: 100%; }
.br-tabs__b { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: var(--snow-3); transition: background .3s var(--ease), color .3s; white-space: nowrap; }
.br-tabs__b:hover { color: var(--snow); }
.br-tabs__b.is-on { background: #fff; color: var(--ink); box-shadow: 0 8px 20px -10px rgba(0,0,0,.6); }
.br-tabs__b .ic { width: 16px; height: 16px; }
.br-tabcap { margin-top: 18px; font-size: 16px; color: var(--snow-2); min-height: 1.6em; }
.br-theme { display: flex; align-items: center; gap: 10px; margin-top: 30px; flex-wrap: wrap; }
.br-theme .t-label { margin-right: 6px; }
.br-sw { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 7px; border-radius: 999px; border: 1px solid var(--nline-2); color: var(--snow-2); font-size: 14px; font-weight: 500; transition: border-color .3s, background .3s, color .3s; }
.br-sw i { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.br-sw:hover { border-color: rgba(255,255,255,.4); color: var(--snow); }
.br-sw.is-on { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }

/* device: a phone rising into view (its lower half, with demo activity rows, stays out of frame) */
.br-device { display: grid; justify-items: center; gap: 16px; }
.br-device__phone { --pw: clamp(300px, 26vw, 380px); }
.br-device__cut { --ph: calc(var(--pw-cut, clamp(300px, 26vw, 380px)) * 844 / 390); height: calc(var(--ph) * .555); overflow: hidden; padding: 0 30px; margin: 0 -30px;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 46px), transparent); mask-image: linear-gradient(#000 calc(100% - 46px), transparent);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: -webkit-mask-size .55s var(--ease), mask-size .55s var(--ease); }
/* Ecosystem: the window closes just under the Crypto-Only card title (the feed below it is not part of the story) */
.br-stage.is-eco .br-device__cut { -webkit-mask-size: 100% 83%; mask-size: 100% 83%; }
.br-device__phone::after { z-index: 3; }
.br-device__phone img { position: absolute; left: calc(var(--pw) * .03); top: calc(var(--pw) * .03); width: calc(100% - var(--pw) * .06); height: calc(100% - var(--pw) * .06); opacity: 0; transition: opacity .55s var(--ease); }
.br-device__phone img.is-on { opacity: 1; z-index: 1; }
.br-device__note { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--snow-4); }

.br-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* glass icon tile (white monochrome icons) */
.br-feat__ic { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 13px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fff; backdrop-filter: blur(10px); }
.br-feat__ic .ic { width: 21px; height: 21px; }

/* Crypto-Only: banner, then its six features as text, two columns */
.br-banner { margin: 0 0 clamp(48px, 6vw, 80px); position: relative; border-radius: 26px; overflow: hidden; box-shadow: 0 50px 110px -40px rgba(0,0,0,.9), 0 0 100px -40px rgba(var(--bcr), .7), 0 0 0 1px rgba(255,255,255,.08); }
.br-banner img { width: 100%; height: auto; }
/* the Kcanther banner: its own brown edge on the night stage */
.br-stage--kc .br-banner { box-shadow: 0 50px 110px -40px rgba(0,0,0,.9), 0 0 100px -40px rgba(var(--bcr), .6), 0 0 0 1px rgba(255,255,255,.08); }
ul.br-flist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--nline); }
.br-flist li { display: flex; gap: 18px; align-items: flex-start; padding: 24px 0; border-bottom: 1px solid var(--nline); }
.br-flist h3 { font-size: 19px; letter-spacing: -.02em; }
.br-flist p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--snow-2); }
ul.br-flist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 80px); }
.br-flist--2 p { max-width: 460px; text-wrap: pretty; }

/* Stake-Only: the platform in three facts */
ol.br-ways { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.br-way { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(24px, 2.4vw, 32px); border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); border: 1px solid var(--nline); }
.br-way::before { content: ""; position: absolute; left: 28px; right: 28px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--bcr), .9), transparent); }
.br-way .br-feat__ic { margin-bottom: 26px; }
.br-way__k { font: 500 11px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--snow-3); }
.br-way h3 { margin-top: calc(12px - var(--gt-t)); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; }
.br-way p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--snow-3); text-wrap: pretty; }
.br-risk { display: flex; gap: 10px; align-items: flex-start; margin-top: 36px; font-size: 13.5px; line-height: 1.55; color: var(--snow-3); max-width: 760px; }
.br-risk .ic { width: 16px; height: 16px; margin-top: 2px; flex: none; }

/* Xitcoin: timeline with a filling rail */
.br-listed { margin-top: 38px; display: grid; gap: 14px; width: 100%; max-width: 520px; }
.br-listed__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.br-listed__row a { height: 58px; padding: 0 16px; display: grid; place-items: center; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--nline); transition: background .3s, border-color .3s, transform .3s var(--ease); min-width: 0; }
.br-listed__row a:hover { background: rgba(255,255,255,.08); border-color: var(--nline-2); transform: translateY(-2px); }
.br-listed__row img { width: auto; max-width: 100%; opacity: .92; }
/* one optical size: the three wordmarks share a cap height of about 9.5 px */
.br-lg--cg { height: 21px; }
.br-lg--cmc { height: 25px; }
.br-lg--cs { height: 23px; }
.br-copy .btn-row { margin-top: 30px; }
ol.br-tl { position: relative; list-style: none; margin: 0; padding: 6px 0 0 44px; }
.br-tl__rail { position: absolute; left: 11px; top: 14px; bottom: 30px; width: 2px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.br-tl__fill { position: absolute; inset: 0; transform-origin: 50% 0; transform: scaleY(0); background: linear-gradient(180deg, var(--bc), rgba(var(--bcr), .35)); }
.br-tl__i { position: relative; padding: 0 0 38px; }
.br-tl__i:last-child { padding-bottom: 0; }
.br-tl__dot { position: absolute; left: -39px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--night); border: 2px solid rgba(255,255,255,.22); transition: border-color .5s, box-shadow .5s, background .5s; }
.br-tl__i.is-lit .br-tl__dot { border-color: var(--bc); background: rgba(var(--bcr), .35); box-shadow: 0 0 0 6px rgba(var(--bcr), .12); }
.br-tl__i.is-next .br-tl__dot { border-style: dashed; }
.br-tl__d { font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--snow-3); transition: color .5s; }
.br-tl__i.is-lit .br-tl__d { color: #FFC37A; }
.br-tl__i h3 { margin-top: calc(10px - var(--gt-t)); font-size: clamp(19px, 1.6vw, 23px); letter-spacing: -.02em; }
.br-tl__i p { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--snow-2); max-width: 500px; }
.br-tl__i.is-next h3, .br-tl__i.is-next p { color: var(--snow-3); }
.br-tl__a { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; min-height: 32px; font-size: 14px; font-weight: 600; color: var(--snow); }
.br-tl__a .ic { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.br-tl__a:hover .ic { transform: translateX(3px); }

/* InoAi: identity quote + the site + where you meet INO */
.br-quote { max-width: 1060px; margin: 0 auto; text-align: center; display: grid; justify-items: center; gap: 26px; }
.br-quote blockquote { margin: 0; font-size: clamp(34px, 4.8vw, 72px); line-height: 1.02; }
.br-quote__dash { display: inline-block; margin: 0 .22em; color: rgba(var(--bcr), 1); filter: brightness(1.4); }
.br-quote figcaption { font-family: var(--f-display); font-size: clamp(17px, 1.4vw, 20px); color: var(--snow-3); font-style: italic; letter-spacing: -.01em; }
.br-shot { max-width: 860px; margin: clamp(56px, 7vw, 88px) auto 0; }
.br-shot .browser { box-shadow: 0 50px 110px -30px rgba(0,0,0,.9), 0 0 100px -30px rgba(var(--bcr), .55), 0 0 0 1px rgba(255,255,255,.06); }
.br-meet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(40px, 5vw, 64px); }
.br-meet__c { position: relative; display: grid; align-content: start; gap: 14px; padding: 26px 26px 30px; border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); border: 1px solid var(--nline); transition: transform .45s var(--ease), border-color .3s, background .3s; }
.br-meet__c:hover { transform: translateY(-4px); border-color: rgba(var(--bcr), .5); background: linear-gradient(180deg, rgba(var(--bcr), .1), rgba(255,255,255,.02)); }
.br-meet__c p { font-family: var(--f-display); font-size: 19px; line-height: 1.35; letter-spacing: -.015em; color: var(--snow); padding-right: 28px; }
.br-meet__c .t-label { margin-top: 6px; }
.br-meet__dc { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fff; }
.br-meet__dc .ic { width: 22px; height: 22px; }
.br-meet__go { position: absolute; right: 22px; bottom: 26px; color: var(--snow-3); transition: transform .3s var(--ease), color .3s; }
.br-meet__go .ic { width: 18px; height: 18px; }
.br-meet__c:hover .br-meet__go { color: #fff; transform: translateX(3px); }

/* InoSwap (hero): the real widget in its window, a highlight that moves with the chosen mode */
.br-widget { position: relative; width: min(470px, 100%); margin-inline: auto; display: grid; justify-items: center; gap: 26px; }
.br-widget__win { width: 100%; box-shadow: 0 50px 110px -30px rgba(0,0,0,.9), 0 0 100px -30px rgba(var(--bcr), .65), 0 0 0 1px rgba(255,255,255,.06); }
.br-widget__frame { position: relative; container-type: inline-size; }
.br-widget__ctl { display: grid; justify-items: center; gap: 0; }
.br-widget__ctl .br-tabs { margin-top: 0; }
.br-widget__ctl .br-tabcap { margin-top: 12px; text-align: center; font-size: 15px; }
/* the capture shows Fastest selected: in Best Price mode the two pills are redrawn in their real selected / idle colours */
.br-widget__pill { position: absolute; top: 16.68%; width: 42.9%; height: 7.24%; display: grid; place-items: center; border-radius: 2.05cqw; font: 600 2.8cqw/1 var(--f-body); letter-spacing: -.005em; opacity: 0; transition: opacity .45s var(--ease); pointer-events: none; }
.br-widget__pill--fast { left: 6.3%; top: 16.25%; width: 43.75%; height: 8.2%; border-radius: 2.5cqw; background: #1A1621; color: #8A8992; }
.br-widget__pill--best { left: 49.85%; background: #824AE1; color: #fff; box-shadow: 0 6px 18px -8px rgba(130,74,225,.8); }
.br-widget__frame.is-best .br-widget__pill { opacity: 1; }
.br-widget__hl { position: absolute; left: 6.29%; top: 16.24%; width: 43.8%; height: 8.13%; border-radius: 12px; border: 2px solid #fff; box-shadow: 0 0 0 5px rgba(var(--bcr), .28), 0 0 34px rgba(var(--bcr), .75); pointer-events: none; transition: left .6s var(--ease-out); }
.br-widget__hl.is-best { left: 49.4%; }
.br-widget__hit { position: absolute; top: 16.24%; height: 8.13%; width: 43.6%; cursor: pointer; border-radius: 12px; }
.br-widget__hit--fast { left: 6.29%; }
.br-widget__hit--best { left: 49.8%; }

/* InoSwap: INO's line, alone on the night stage */
.br-voice { max-width: 980px; margin: 0 auto; display: grid; justify-items: center; gap: 30px; text-align: center; }
.br-voice blockquote { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(30px, 4.2vw, 60px); line-height: 1.06; letter-spacing: -.04em; color: #fff; text-wrap: balance; }
.br-voice figcaption { display: inline-flex; align-items: center; gap: 14px; text-align: left; }
.br-voice figcaption > span:last-child { display: grid; gap: 2px; }
.br-voice figcaption b { font-size: 15.5px; color: var(--snow); }
.br-voice figcaption small { font-size: 13px; color: var(--snow-3); }
.br-stage--voice { padding-block: clamp(88px, 10vw, 150px); }

/* Kcanther: story + site capture */
ol.br-chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; width: 100%; border-top: 1px solid var(--nline); }
.br-chapters li { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--nline); }
.br-chapters__n { font: 500 11.5px/1.6 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #FF9A5C; padding-top: 3px; }
.br-chapters h3 { font-size: 19px; letter-spacing: -.02em; }
.br-chapters p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--snow-2); }
.br-split--kc { align-items: start; }
.br-split--kc .br-copy .t-lead { max-width: 460px; }

/* ================= AFTER THE STAGE (white) ================= */
.br-extra-s { padding-block: clamp(56px, 6vw, 88px); }
.br-launch { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 26px 30px; border-radius: 28px; background: #0B0812; color: var(--snow); overflow: hidden; isolation: isolate; transition: transform .45s var(--ease), box-shadow .45s; }
.br-launch::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 120% at 0% 50%, rgba(124,58,237,.35), transparent 70%), radial-gradient(40% 100% at 100% 0%, rgba(138,68,216,.22), transparent 70%); }
.br-launch:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
.br-launch__t { display: grid; gap: 4px; }
.br-launch__t .t-label { color: var(--snow-3); }
.br-launch__t b { font-family: var(--f-display); font-weight: 600; font-size: clamp(19px, 1.7vw, 24px); letter-spacing: -.02em; }
.br-launch__t small { font-size: 14px; color: var(--snow-3); }
.br-launch__go { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #0A0A0F; transition: transform .3s var(--ease); }
.br-launch__go .ic { width: 20px; height: 20px; }
.br-launch:hover .br-launch__go { transform: translateX(3px); }
[data-theme="night"] .br-launch { box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }

/* ================= NEWS ABOUT THE BRAND ================= */
.br-news__grid { display: grid; gap: 20px; }
.br-news__grid.n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.br-news__grid.n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.br-art { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: var(--paper-2); border: 1px solid var(--line); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s; min-width: 0; }
[data-theme="white"] .br-art { background: var(--paper); }
.br-art:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: var(--line-2); }
.br-art .media { border-radius: 0; background: radial-gradient(80% 90% at 50% 100%, rgba(122,90,248,.28), transparent 70%), #0C0914; }
/* legacy covers with "$XTC" written in the picture: framed on the coins until clean covers exist */
.br-art .br-art__low img { transform: scale(var(--zs, 1.42)); transform-origin: 50% 97%; }
.br-art:hover .br-art__low img { transform: scale(calc(var(--zs, 1.42) * 1.035)); }
/* the single card with a lettered legacy cover: the horizontal card, its picture column 480 px at most, 16:9,
   so the cover zoomed on its coins is never shown beyond its 1600 px at 2x */
.br-art--big.br-art--tick { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); align-items: center; }
.br-art--big.br-art--tick .media { height: auto; min-height: 0; aspect-ratio: 16 / 9; align-self: center; }
.br-art__b { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; flex: 1; }
.br-art__m { font: 500 11px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.br-art b { font-family: var(--f-display); font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.br-art__d { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.br-art__go { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.br-art__go .ic { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.br-art:hover .br-art__go .ic { transform: translateX(3px); }
.br-art--big { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.br-art--big .media { height: 100%; aspect-ratio: auto; min-height: 320px; }
.br-art--big .br-art__b { padding: clamp(26px, 3vw, 44px); justify-content: center; }
.br-art--big b { font-size: clamp(22px, 2.2vw, 30px); }

/* ================= PREVIOUS / NEXT ================= */
.br-more { border-top: 1px solid var(--line); }
.br-pn { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; align-items: stretch; }
.br-pn__c { position: relative; display: grid; gap: 22px; padding: 28px 30px; border-radius: 28px; background: var(--paper-2); border: 1px solid var(--line); overflow: hidden; isolation: isolate; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s; }
[data-theme="white"] .br-pn__c { background: var(--paper); }
.br-pn__c::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .45s; background: radial-gradient(70% 120% at 0% 100%, rgba(var(--bcr), .14), transparent 70%); }
.br-pn__c--next::before { background: radial-gradient(70% 120% at 100% 100%, rgba(var(--bcr), .14), transparent 70%); }
.br-pn__c:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); border-color: rgba(var(--bcr), .35); }
.br-pn__c:hover::before { opacity: 1; }
.br-pn__c--next { text-align: right; }
.br-pn__dir { display: inline-flex; align-items: center; gap: 8px; font: 500 11.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.br-pn__c--next .br-pn__dir { justify-self: end; }
.br-pn__dir .ic { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.br-pn__c--prev:hover .br-pn__dir .ic { transform: translateX(-3px); }
.br-pn__c--next:hover .br-pn__dir .ic { transform: translateX(3px); }
.br-pn__id { display: flex; align-items: center; gap: 16px; }
.br-pn__c--next .br-pn__id { flex-direction: row-reverse; }
.br-pn__id span { display: grid; gap: 2px; }
.br-pn__id b { font-family: var(--f-display); font-weight: 600; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.03em; }
.br-pn__id small { font-size: 14px; color: var(--ink-3); }
.br-pn__all { display: grid; place-items: center; align-content: center; gap: 10px; width: 132px; border-radius: 28px; border: 1px dashed var(--line-2); color: var(--ink-2); font-size: 13.5px; font-weight: 600; transition: border-color .3s, color .3s, background .3s; }
.br-pn__all .ic { width: 22px; height: 22px; }
.br-pn__all:hover { border-color: var(--ink); color: var(--ink); background: var(--paper-2); }

/* ================= INDEX (#brands) ================= */
.br-ihero { position: relative; overflow: clip; background: var(--night); padding: calc(var(--header-h) + clamp(40px, 4.5vw, 64px)) 0 clamp(64px, 6vw, 88px); }
.br-ihero__bg { position: absolute; inset: 0; pointer-events: none; background: url(assets/bg/hero-beam.webp) center top / max(1500px, 110%) auto no-repeat; opacity: .85; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.br-ihero__bg { transform-origin: 50% 0; animation: br-drift-i 60s ease-in-out -20s infinite alternate; will-change: transform; }
@keyframes br-drift-i { from { transform: translate3d(-2%, 0, 0) scale(1); } to { transform: translate3d(2%, 1.5%, 0) scale(1.07); } }
.br-ihero__in { position: relative; display: grid; justify-items: center; text-align: center; }
.br-ihero__head { display: grid; justify-items: center; gap: 22px; }
.br-ihero__t { font-family: var(--f-display); font-weight: 600; font-size: clamp(50px, 7.4vw, 116px); line-height: .94; letter-spacing: -.05em; color: #fff; margin: calc(-1 * var(--gt-t)) calc(-1 * var(--gt-e)) calc(-1 * var(--gt-b)) 0; }
.br-grad { background: linear-gradient(100deg, #D6DCEA 0%, #FFFFFF 38%, #D1D3FF 66%, #9F9FFD 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.br-ihero__head .t-lead { color: var(--snow-2); }

/* the seven official icons, one clean row (links); a soft light passes along them once */
ul.br-icons { list-style: none; margin: clamp(44px, 5vw, 64px) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px clamp(8px, 1.6vw, 22px); }
.br-icons li { display: flex; }
/* when the eight do not fit on one line: two lines of four, never seven and one alone (Thomas 28/09) */
@media (max-width: 1000px) { ul.br-icons { max-width: 470px; margin-inline: auto; } }
.br-ic { display: grid; justify-items: center; gap: 12px; width: clamp(96px, 9.4vw, 124px); padding: 12px 4px 10px; border-radius: 22px; transition: background .35s; }
.br-ic:hover { background: rgba(255,255,255,.04); }
.br-ic__tile { transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.br-ic:hover .br-ic__tile, .br-ic:focus-visible .br-ic__tile { transform: translateY(-5px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 22px 44px -14px rgba(122,90,248,.75); }
.br-ic__n { font-family: var(--f-display); font-weight: 600; font-size: 15px; letter-spacing: -.01em; color: var(--snow-2); white-space: nowrap; transition: color .3s; }
.br-ic:hover .br-ic__n { color: #fff; }
.br-icons.is-lit li .br-ic__tile { animation: br-leaf-on 1.1s var(--ease) calc(var(--i) * 90ms) 1 both; }
@keyframes br-leaf-on { 0% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 0 rgba(166,144,255,0); } 45% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 0 38px 2px rgba(166,144,255,.55); } 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 26px -12px rgba(0,0,0,.55); } }

/* portfolio: two full rows (the apps), a pair (the tokens), a trio */
.br-list .room-top { opacity: .5; }
.br-list .container { position: relative; }
.br-list__head { margin-bottom: clamp(44px, 5vw, 72px); }
.br-rows { display: grid; gap: clamp(64px, 7vw, 112px); }
.br-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5.5vw, 88px); align-items: center; scroll-margin-top: calc(var(--header-h) + 24px); }
.br-row--rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.br-row--rev .br-row__media { order: 2; }
.br-row__media, .br-card__media { position: relative; display: grid; place-items: center; border-radius: 34px; background: #08060D; overflow: hidden; isolation: isolate; box-shadow: 0 40px 90px -40px rgba(20,10,50,.55), 0 0 0 1px rgba(11,10,18,.06); }
.br-row__media { aspect-ratio: 16 / 11; padding: 7%; }
.br-row__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 50% 105%, rgba(var(--bcr), .42), transparent 70%), radial-gradient(60% 50% at 50% -10%, rgba(122,90,248,.2), transparent 70%); transition: opacity .6s; }
.br-row__media::after, .br-card__media::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(70% 70% at 50% 60%, #000, transparent); mask-image: radial-gradient(70% 70% at 50% 60%, #000, transparent); }
.br-row__media > :not(.br-row__glow), .br-card__media > :not(.br-row__glow) { transition: transform .8s var(--ease-out); }
.br-row__media:hover > :not(.br-row__glow), .br-card__media:hover > :not(.br-row__glow) { transform: translateY(-6px) scale(1.012); }
/* the small windows show their whole address, never an ellipsis */
.br-row__media .browser__url, .br-card__media .browser__url { flex: 0 1 auto; max-width: none; text-overflow: clip; }
.br-row__media .browser, .br-card__media .browser { width: 100%; box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06); }
.br-duo { position: relative; width: 100%; height: 100%; }
.br-duo .phone { position: absolute; top: 10%; --pw: clamp(160px, 15.5vw, 230px); }
.br-duo__b { left: 50%; transform: translateX(-100%) rotate(-5deg); filter: brightness(.8); }
.br-duo__f { left: 50%; transform: translateX(-4%) rotate(3deg); }
.br-row__media--inolah { padding: 0; }
.br-rowcoin { position: relative; width: 40%; aspect-ratio: 1; display: grid; place-items: center; }
.br-rowcoin::before { content: ""; position: absolute; inset: -14%; border-radius: 50%; border: 1px solid rgba(255,255,255,.07); }
.br-rowcoin::after { content: ""; position: absolute; inset: -30%; border-radius: 50%; border: 1px dashed rgba(255,255,255,.05); }
.br-rowcoin img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(var(--bcr), .35)); }
.br-rowart { width: 58%; border-radius: 26px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 70px -20px rgba(var(--bcr), .6), 0 0 0 1px rgba(var(--bcr), .35); }
.br-rowart img { width: 100%; height: auto; }
.br-row__txt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.br-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.br-row__txt .br-row__meta { margin-top: 22px; }
.br-row__meta .br-tag { background: var(--paper-3); color: var(--ink-2); }
.br-row__name { margin-top: calc(14px - var(--gt-t)); font-size: clamp(36px, 3.8vw, 56px); line-height: 1; letter-spacing: -.045em; }
.br-row__line { margin-top: 16px; font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 460px; text-wrap: pretty; }
.br-row__txt .btn-row { margin-top: 28px; }
.br-group { display: grid; gap: 22px; }
.br-group__rows { display: grid; gap: clamp(64px, 7vw, 112px); }
.br-group__k { display: inline-flex; align-items: center; gap: 10px; font: 500 11.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.br-group__k::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .6; }
.br-cards { display: grid; gap: clamp(18px, 2vw, 28px); }
.br-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.br-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.br-card { display: flex; flex-direction: column; min-width: 0; scroll-margin-top: calc(var(--header-h) + 24px); }
.br-card__media { aspect-ratio: 16 / 10; padding: 8%; border-radius: 28px; }
.br-card__media .br-rowcoin { width: 34%; }
.br-card__media .br-rowart { width: 44%; border-radius: 20px; }
.br-card__txt { display: flex; flex-direction: column; align-items: flex-start; padding: 24px 4px 0; flex: 1; }
.br-card__id { display: grid; justify-items: start; gap: 14px; }
.br-card__id .br-row__meta { flex-wrap: nowrap; white-space: nowrap; }
.br-card__name { margin-top: calc(16px - var(--gt-t)); font-size: clamp(28px, 2.4vw, 36px); line-height: 1.05; letter-spacing: -.04em; }
.br-card__line { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 460px; text-wrap: pretty; }
.br-card .br-metaline { margin-top: 14px; }
.br-card__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; padding-top: 22px; align-self: stretch; }
/* Stake-Only: its orbit, round like the coins beside it */
.br-card__media--stake-only { padding: 5%; }
.br-orbitwrap { position: relative; height: 100%; aspect-ratio: 1; max-width: 100%; }
.br-orbitwrap .br-orbit { width: 100%; }
.br-orbit__c { position: absolute; left: 50%; top: 50%; width: 16%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.br-orbit__c .brand-tile { width: 100%; height: 100%; border-radius: 26%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 0 0 7px rgba(124,58,237,.14), 0 0 44px rgba(124,58,237,.6); }
.br-orbit { height: 100%; width: auto; max-width: 100%; border: 0; border-radius: 50%; background: transparent; box-shadow: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(closest-side, #000 86%, transparent); mask-image: radial-gradient(closest-side, #000 86%, transparent); }
/* InoSwap: the real widget rising from the bottom edge of the card */
.br-card__media--inoswap { padding: 9% 11% 0; align-items: end; }
.br-card__media--inoswap .browser.br-peek { width: 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* Kcanther: the art large enough to read (never above its 768 px) */
.br-card__media--kcanther { padding: 5%; }
.br-card__media--kcanther .br-rowart { width: auto; height: 100%; aspect-ratio: 1; }
.br-card__media--kcanther .br-rowart img { height: 100%; width: auto; }
/* Crypto-Only row: the same composition as its page, scaled to the frame's height */
.br-row__media--crypto-only { padding: 5% 7%; }
.br-row__media--crypto-only .br-combo--co { height: 100%; width: auto; max-width: 100%; aspect-ratio: 1.12; padding-bottom: 0; }
.br-row__media--crypto-only .br-combo__web { width: 74%; }
.br-row__media--crypto-only .br-combo__phone { --pw: 37cqw; }
.br-card__cta .btn { --bh: 44px; }
.br-card__site .ic { width: 15px; height: 15px; }

/* dark mode: the dark media cards keep an edge on the night background */
[data-theme="night"] .br-row__media, [data-theme="night"] .br-card__media { border: 1px solid rgba(255,255,255,.08); }

/* closing call: violet-black, never a flat violet slab */
.br-end { padding-bottom: clamp(64px, 7vw, 104px); }
.br-end .cta-room { background: #13061F; }
.br-end .cta-room::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(80% 90% at 50% 100%, #000, transparent 75%); mask-image: radial-gradient(80% 90% at 50% 100%, #000, transparent 75%); }
.br-end .cta-room::after { background: radial-gradient(70% 90% at 50% 0%, rgba(94,79,209,.40), transparent 70%), radial-gradient(60% 70% at 50% 120%, rgba(94,79,209,.28), transparent 70%); }
.br-end__k { color: rgba(255,255,255,.72) !important; }
.br-end .cta-room h2 { margin-top: calc(2px - var(--gt-t)); }
.br-end .cta-room p, .br-ihero__head .t-lead, .br-head .t-lead, .br-copy .t-lead, .br-card__line, .br-row__line { text-wrap: balance; }
.br-end .br-end__line { color: #fff; border-color: rgba(255,255,255,.45); }
.br-end .br-end__line:hover { border-color: #fff; background: rgba(255,255,255,.06); }

/* ================= RESPONSIVE ================= */
@media (max-width: 1180px) {
  /* the two buttons of a row or a card stay on one line */
  .br-row, .br-row--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .br-row__txt .btn-row { gap: 10px; }
  .br-row__txt .btn { --bh: 44px; padding: 0 17px; font-size: 14.5px; gap: 8px; }
  .br-card__cta .btn { padding: 0 15px; font-size: 14px; gap: 8px; }
}
@media (max-width: 900px) {
  /* narrow cards: the two buttons stacked, full width, in every card alike */
  .br-card__cta .btn { flex: 1 1 100%; }
}
@media (max-width: 1100px) {
  /* the hero's two buttons stay on one line */
  .br-hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; }
  .br-cta { gap: 10px; }
  .br-cta .btn { padding: 0 16px; gap: 8px; font-size: 14.5px; }
  .br-tok .br-ca { max-width: 640px; }
  .br-ihero__bg { background-size: 1100px auto; opacity: .7; }
  .br-inside { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .br-tok { grid-template-columns: minmax(0, 1fr); }
  /* the trio: two cards side by side, the third one full width (media | text) */
  .br-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
  .br-cards--3 > .br-card:nth-child(3) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(18px, 2vw, 28px); align-items: center; }
  .br-cards--3 > .br-card:nth-child(3) .br-card__txt { padding-top: 0; }
  .br-cards--3 > .br-card:nth-child(3) .br-card__cta { margin-top: 0; }
}
@media (max-width: 980px) {
  .br-hero__in { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 56px; }
  .br-hero__vis { max-width: 640px; width: 100%; justify-self: center; }
  .br-split, .br-get, .br-dex, .br-val { grid-template-columns: minmax(0, 1fr); }
  .br-split--kc { gap: 32px; }
  ol.br-ways { grid-template-columns: minmax(0, 1fr); }
  .br-way { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: start; }
  .br-way .br-feat__ic { grid-row: 1 / span 3; margin-bottom: 0; }
  .br-way h3 { margin-top: calc(8px - var(--gt-t)); }
  .br-sticky { position: static; }
  .br-meet { grid-template-columns: minmax(0, 1fr); }
  .br-row, .br-row--rev { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .br-row--rev .br-row__media { order: 0; }
  .br-news__grid.n-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .br-news__grid.n-3 > :last-child { grid-column: 1 / -1; }
  .br-art--big { grid-template-columns: minmax(0, 1fr); }
  .br-art--big .media { min-height: 0; aspect-ratio: 16 / 9; }
  .br-art--big.br-art--tick { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); }
  .br-ic { width: 88px; }
  .br-ic__tile { --bt: 60px !important; }
  .br-ic__n { font-size: 13.5px; }
}
@media (max-width: 760px) {
  .br-hero { padding-top: calc(var(--header-h) + 16px); }
  .br-crumbs { margin-bottom: 14px; }
  .br-id { gap: 16px; margin-bottom: 20px; }
  .br-id .br-tile--hero { --bt: 72px !important; }
  .br-name { font-size: clamp(46px, 13vw, 64px); }
  .br-ticker { height: 26px; font-size: 12px; }
  .br-lead { margin-top: 20px; font-size: 21px; }
  .br-cta { margin-top: 28px; width: 100%; }
  .br-cta .btn { flex: 1 1 auto; }
  .br-hmeta { margin-top: 26px; }
  .br-hmeta > div { padding: 0 18px; }
  .br-fan { height: 440px; }
  .br-fan__p--c { --pw: 190px; }
  .br-fan__p--l, .br-fan__p--r { --pw: 150px; }
  .br-fan { transform: none; perspective: none; }
  .br-fan__p--c { transform: translate(-50%, -50%); }
  .br-fan__p--l { transform: translate(-50%, -50%) translateX(-60%) translateY(6%) rotate(-5deg) scale(.94); }
  .br-fan__p--r { transform: translate(-50%, -50%) translateX(60%) translateY(6%) rotate(5deg) scale(.94); }
  .br-coin { width: min(330px, 86%); }
  .br-solo { width: min(100%, 420px); }
  .br-flip { width: min(320px, 86vw); }
  .br-band { padding-block: 36px 44px; }
  .br-tok__v { font-size: clamp(34px, 10.4vw, 56px); }
  .br-ca { padding: 20px; border-radius: 22px; }
  .br-ca__btn { width: 100%; }
  .br-val__facts > div { padding: 0 22px; }
  .br-kc { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  ul.br-flist--2 { grid-template-columns: minmax(0, 1fr); }
  /* centred, and never wider than the 500 px artwork allows on a 2x screen */
  .br-kc__art { width: 100%; max-width: 250px; margin-inline: auto; }
  .br-kc__nums > div { padding: 0 28px; }
  .br-kc__v { font-size: clamp(52px, 15vw, 72px); }
  .br-kc__txt .btn { width: 100%; margin-top: 28px; }
  .br-tabs { margin-top: 28px; }
  .br-widget { gap: 22px; }
  .br-tabs__b { padding: 0 13px; font-size: 13.5px; }
  .br-device__phone, .br-device__cut { --pw: 290px; --pw-cut: 290px; }
  .br-device__cut { padding: 0 20px; margin: 0 -20px; }
  .br-quote blockquote { font-size: 34px; }
  .br-flist li { gap: 16px; padding: 20px 0; }
  .br-way { padding: 20px; column-gap: 16px; }
  .br-launch { grid-template-columns: auto minmax(0, 1fr); padding: 22px; gap: 16px; }
  .br-launch__go { display: none; }
  .br-inside__grid.n-3, .br-inside__grid.n-2 { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .br-mini { padding: 12px 14px; }
  .br-mini .brand-tile { --bt: 44px !important; }
  ul.br-dex__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  .br-news__grid.n-3, .br-news__grid.n-2 { grid-template-columns: minmax(0, 1fr); }
  .br-news__grid.n-3 > :last-child { grid-column: auto; }
  .br-art--big.br-art--tick { grid-template-columns: minmax(0, 1fr); }
  .br-pn { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .br-pn__all { grid-column: 1 / -1; grid-row: 2; width: auto; height: 56px; display: flex; justify-content: center; align-items: center; gap: 10px; border-radius: 999px; }
  .br-pn__c { padding: 20px; gap: 16px; }
  .br-pn__id, .br-pn__c--next .br-pn__id { flex-direction: column; align-items: flex-start; gap: 12px; }
  .br-pn__c--next .br-pn__id { align-items: flex-end; }
  .br-pn__id .brand-tile { --bt: 44px !important; }
  .br-pn__id b { font-size: 20px; }
  .br-pn__id small { display: none; }
  /* index */
  .br-ihero__t { font-size: clamp(46px, 13.5vw, 64px); }
  .br-ihero__bg { background-size: 820px auto; opacity: .6; }
  /* the icons: four then three, centred */
  ul.br-icons { margin-top: 40px; gap: 6px 4px; max-width: 360px; margin-inline: auto; }
  .br-ic { width: 84px; gap: 10px; padding: 8px 2px; }
  .br-ic__tile { --bt: 56px !important; }
  .br-ic__n { font-size: 12.5px; }
  .br-row__media { border-radius: 26px; padding: 6%; }
  .br-card__media { border-radius: 24px; }
  .br-cards--2, .br-cards--3 { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .br-cards--3 > .br-card:nth-child(3) { grid-column: auto; display: flex; }
  .br-cards--3 > .br-card:nth-child(3) .br-card__txt { padding-top: 24px; }
  .br-cards--3 > .br-card:nth-child(3) .br-card__cta { margin-top: auto; }
  .br-duo .phone { --pw: 132px; top: 14%; }
  .br-row__name { font-size: 38px; }
  .br-row__line { font-size: 17px; }
  .br-row__txt .btn-row { width: 100%; }
  .br-row__txt .btn { flex: 1 1 auto; }
  .br-card__cta .btn { flex: 1 1 100%; }
  .br-card__site { width: 100%; justify-content: center; }
}
@media (max-width: 600px) {
  /* tap targets and edges */
  .br-news .head .link, .br-copy > .link, .br-tl__a { min-height: 44px; }
  .br-socials { gap: 8px; }
  .br-socials .social { width: 44px; height: 44px; }
  .br-socials--grid { display: grid; grid-template-columns: repeat(4, 44px); gap: 10px; }
  /* the paper band after the hinge breathes like every other section */
  .br-band { padding-top: 56px; }
  /* platform rows: the status goes under the title, text wraps */
  .br-plat__r { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "ic t go" "ic s go"; column-gap: 14px; row-gap: 6px; padding: 14px 12px; }
  .br-plat__ic { grid-area: ic; width: 44px; height: 44px; align-self: center; }
  .br-plat__t { grid-area: t; }
  .br-plat__s { grid-area: s; }
  .br-plat__s:empty { display: none; }
  .br-plat__go { grid-area: go; width: 24px; }
  .br-ca__addr { font-size: 3.05vw; letter-spacing: 0; }
  .br-ca--val .br-ca__addr { font-size: 2.85vw; }
  .br-val__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; }
  .br-val__facts > div { padding: 0 14px; }
  .br-val__facts dd { font-size: 19px; }
}
@media (min-width: 761px) and (max-width: 1199px) {
}
@media (max-width: 480px) {
  /* listed and audited: two tiles, then the audit across the row */
  .br-listed__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .br-listed__row a:last-child { grid-column: 1 / -1; }
}
@media (max-width: 400px) {
  .br-tabs__b { padding: 0 11px; font-size: 13px; }
  .br-hmeta > div { padding: 0 14px; }
  .br-hmeta dd { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .br-hero__beam, .br-hero__glow, .br-ihero__bg { animation: none !important; }
  .br-fan, .br-coin, .br-flip__in { transition: none !important; }
  .br-icons.is-lit li .br-ic__tile { animation: none !important; }
}

/* InoTimes: the front page in a browser window, as wide as the other heroes' visuals */
.br-browser.br-itwin { width: min(640px, 100%); transform: rotate(-1.5deg); box-shadow: 0 40px 90px -40px rgba(74, 98, 224, .55), 0 24px 60px -30px rgba(0, 0, 0, .6); }
@media (prefers-reduced-motion: reduce) { .br-browser.br-itwin { transform: none; } }

/* InoLah's name is its logo: the Arizonia lettering (Thomas 28/09), with room for its curves */
.br-hero--inolah .br-name { font-family: 'Arizonia', 'Great Vibes', cursive; font-weight: 400; letter-spacing: 0; font-size: clamp(88px, 9.5vw, 150px); line-height: 1.3; padding: 0 .12em .06em .02em; margin: -.12em 0 -.1em; }

.br-hero--inolah .br-sig.sig-host { width: clamp(280px, 30vw, 470px); margin: .05em 0; }

/* ==== pages/company.css ==== */
/* ================= COMPANY: #about + #roadmap =================
   Prefixes: co- (shared by both pages), ab- (about), rm- (roadmap). */

/* ---------- shared ---------- */
.co-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: clamp(40px, 5vw, 68px); max-width: 860px; position: relative; }
.co-head--center { align-items: center; text-align: center; margin-inline: auto; }
.co-nw { white-space: nowrap; }
.co-head--row { flex-direction: row; justify-content: space-between; align-items: flex-end; max-width: none; flex-wrap: wrap; gap: 24px; }
.co-head .t-lead { max-width: 620px; }
.co-browser { position: relative; z-index: 1; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.co-browser .browser__url { max-width: 260px; }
.co-browser__shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0B0812; }
.co-browser__shot img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: top; }
.co-browser--crop-right .co-browser__shot img { left: auto; right: 0; width: 176%; max-width: none; object-position: right center; }

/* ================= ABOUT ================= */
/* ---------- hero: "Kcalb Ltd" + the thin pentagon drawn as a drafting plate (Home keeps the chrome wordmark) ---------- */
.ab-hero { position: relative; overflow: clip; isolation: isolate; background: var(--night); min-height: clamp(640px, 94svh, 940px); display: flex; align-items: center; padding: calc(var(--header-h) + 44px) 0 60px; }
.ab-hero__beam { position: absolute; z-index: -3; inset: 0; pointer-events: none; opacity: .62; background: url(assets/bg/hero-beam.webp) calc(50% + max(290px, 21vw)) top / 1100px auto no-repeat;
  /* his beam falls on the plate; a soft ellipse mask so the picture never shows an edge */
  -webkit-mask-image: radial-gradient(30% 78% at calc(50% + max(290px, 21vw)) 0%, #000 42%, transparent 100%); mask-image: radial-gradient(30% 78% at calc(50% + max(290px, 21vw)) 0%, #000 42%, transparent 100%); }
.ab-hero__glow { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(30% 44% at 72% 52%, rgba(122, 90, 248, .26), rgba(94, 79, 209, .08) 60%, transparent 78%), radial-gradient(50% 36% at 30% 0%, rgba(122, 90, 248, .09), transparent 72%); }
.ab-hero__grid { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 56px 56px; background-position: calc(50% + 28px) 50%; -webkit-mask-image: radial-gradient(40% 58% at 72% 52%, #000, transparent 80%); mask-image: radial-gradient(40% 58% at 72% 52%, #000, transparent 80%); }
.ab-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
.ab-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.ab-hero__t {  font-size: clamp(58px, 8.4vw, 128px); font-weight: 600; line-height: .92; letter-spacing: -.055em; box-sizing: content-box; padding: var(--gt-t) var(--gt-e) var(--gt-b) 0; margin: calc(0em - var(--gt-t)) calc(.04em - var(--gt-e)) calc(.07em - var(--gt-b)) 0;
  /* his chrome: bright top, a dark horizon, a mirrored lower half; one light sweep on arrival */
  background: linear-gradient(100deg, transparent 44%, rgba(255, 255, 255, .85) 50%, transparent 56%) no-repeat, var(--grad-title-night);
  background-size: 260% 100%, 100% 100%; background-position: 0% 0, 0 0; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 18px rgba(150, 126, 255, .22)); animation: ab-sheen 1.7s cubic-bezier(.45, 0, .2, 1) .5s both; }
@keyframes ab-sheen { from { background-position: 100% 0, 0 0; } to { background-position: 0% 0, 0 0; } }
.ab-hero__lead { max-width: 30em; font-size: clamp(17.5px, 1.45vw, 21px); line-height: 1.55; color: var(--snow-3); text-wrap: pretty; }
.ab-hero__lead b { display: block; color: var(--snow); font-weight: 500; }
.ab-toc { display: flex; flex-direction: column; width: min(100%, 420px); margin-top: 10px; border-top: 1px solid var(--nline); }
.ab-toc a { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; min-height: 48px; border-bottom: 1px solid var(--nline); font-size: 15px; font-weight: 500; color: var(--snow-2); transition: color .25s, padding .4s var(--ease); }
.ab-toc a span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; color: var(--snow-4); transition: color .25s; }
.ab-toc a .ic { width: 15px; height: 15px; opacity: .35; transition: opacity .25s, transform .35s var(--ease), color .25s; }
.ab-toc a:hover, .ab-toc a:focus-visible { color: #fff; padding-left: 6px; }
.ab-toc a:hover span, .ab-toc a:focus-visible span { color: var(--violet-2); }
.ab-toc a:hover .ic, .ab-toc a:focus-visible .ic { opacity: 1; color: var(--violet-2); transform: translateY(2px); }
.ab-plate { position: relative; margin: 0; width: 100%; max-width: 580px; justify-self: center; }
.ab-plate__halo { position: absolute; left: 50%; top: 58%; width: 58%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(150, 126, 255, .3), rgba(122, 90, 248, .08) 62%, transparent); pointer-events: none; }
.ab-plate__svg { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.ab-plate__guides * { fill: none; stroke: rgba(206, 196, 255, .2); stroke-width: 1.7; stroke-dasharray: 7 10; }
.ab-plate__base { fill: none; stroke: rgba(214, 204, 255, .34); stroke-width: 2.2; stroke-linejoin: round; }
.ab-plate__base--in { stroke: rgba(214, 204, 255, .2); stroke-width: 1.8; }
.ab-plate__out, .ab-plate__in { fill: none; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ab-plate__out { stroke: url(#abPlateLine); stroke-width: 3.4; filter: drop-shadow(0 0 9px rgba(185, 176, 255, .55)); animation: ab-draw 1.8s cubic-bezier(.65, 0, .35, 1) .15s both; }
.ab-plate__in { stroke: rgba(233, 225, 255, .72); stroke-width: 2.4; animation: ab-draw 1.4s cubic-bezier(.65, 0, .35, 1) .6s both; }
.ab-plate__fill { fill: url(#abPlateFill); }
.ab-plate__plus path { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 2.2; }
@keyframes ab-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* anchors: the jump target sits 44px above its block, so the block lands ≥ 40px under the header (even with the 10px #view entry offset) */
.co-anchor { position: absolute; top: -44px; left: 0; width: 1px; height: 1px; pointer-events: none; }
.ab-name, .ab-how, .ab-sig, .ab-ms, .ab-lead, .rm-ch { scroll-margin-top: calc(var(--header-h) + 40px); }
/* status "In development": silver, never gold (gold is reserved) */
.ab-sig .badge--dev, .rm-tl .badge--dev { color: #DCD8EA; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.ab-sig .badge--dev::before, .rm-tl .badge--dev::before { background: #B9B4CC; opacity: 1; }
/* closing room: violet-black, not lavender (the lighter violet stays a soft top-left glow) */
.ab-end .cta-room, .rm-end .cta-room { background: #1C0E36; }
.ab-end .cta-room::after, .rm-end .cta-room::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 508' preserveAspectRatio='none'%3E%3Cpath d='M188 51L74 0M338 51L262 0M488 51L450 0M638 51L637 0M788 51L825 0M938 51L1013 0M1089 51L1202 0M188 455L69 508M338 455L258 508M488 455L448 508M638 455L637 508M788 455L827 508M938 455L1017 508M1089 455L1207 508M188 118L0 61M188 185L0 156M188 254L0 254M188 321L0 349M188 388L0 444M1089 118L1280 60M1089 185L1280 156M1089 254L1280 254M1089 321L1280 350M1089 388L1280 445M188 51H1089V455H188Z' fill='none' stroke='white' stroke-opacity='.1' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat, radial-gradient(55% 75% at 16% 0%, rgba(150, 112, 255, .34), transparent 62%), radial-gradient(60% 80% at 50% 0%, rgba(255, 255, 255, .05), transparent 60%), linear-gradient(160deg, #1C0E36 0%, #2A1656 55%, #3A1F78 100%); }

/* ---------- the name ---------- */
.ab-name { padding-top: calc(var(--section) + 24px); padding-bottom: calc(var(--section) * .55); }
.ab-name__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; }
.ab-card-label { position: absolute; top: 26px; left: 30px; z-index: 2; }
.ab-letters { margin: 0; }
.ab-letters__in { position: relative; overflow: hidden; min-height: 440px; display: grid; justify-items: center; align-content: center; gap: 64px; padding-block: 96px 64px !important; }
.ab-letters__in .bg-dots { opacity: .7; }
.ab-letters__svg { position: relative; width: min(86%, 560px); height: auto; overflow: visible; }
.ab-l { will-change: transform; transform-box: view-box; }
.ab-letters__cap { transition: opacity .4s var(--ease); }
.ab-name__grid.is-moving .ab-letters__cap { opacity: .18; }
.ab-replay { position: absolute; top: 18px; right: 18px; z-index: 2; width: 44px; height: 44px; }
.ab-replay .ic { transition: transform .5s var(--ease); }
.ab-replay:hover .ic { transform: rotate(-120deg); }
.ab-letters__cap { position: relative; display: flex; align-items: center; gap: 16px; font-family: var(--f-mono); font-size: 12.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.ab-cap { color: var(--ink-4); transition: color .6s var(--ease); }
.ab-name__grid[data-word="black"] .ab-cap--a, .ab-name__grid[data-word="kcalb"] .ab-cap--b { color: var(--ink); }
.ab-cap__arrow { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--violet-soft); color: var(--violet-3); }
.ab-cap__arrow .ic { width: 16px; height: 16px; }
/* dark mode (the paper room turns night): the letters go silver, the tooltip stays readable */
[data-was] .ab-letters__svg stop:nth-child(1) { stop-color: #FFFFFF; }
[data-was] .ab-letters__svg stop:nth-child(2) { stop-color: #D9D6E4; }
[data-was] .ab-letters__svg stop:nth-child(3) { stop-color: #9C98AE; }
[data-was] .ab-icon::after { background: #F6F4FB; color: #0A0A0F; }

.ab-gem { margin: 0; }
.ab-gem__in { position: relative; height: 100%; min-height: 440px; border-radius: 27px; overflow: hidden; display: grid; place-items: center; color: #fff;
  background: radial-gradient(70% 55% at 50% -4%, rgba(138, 68, 216, .62), transparent 70%), radial-gradient(64% 46% at 50% 108%, rgba(94, 28, 152, .6), transparent 72%), linear-gradient(180deg, #1B0731, #0B0413);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.ab-gem .ab-card-label { color: rgba(255, 255, 255, .5); }
.ab-gem__stage { position: relative; width: min(60%, 250px); aspect-ratio: 1; perspective: 900px; }
.ab-gem__card { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(180deg); opacity: 0; }
.ab-gem__svg { width: 100%; height: 100%; overflow: visible; }
.ab-gem__svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ab-gem__edge { stroke: #EFE9FF; stroke-width: 8; filter: drop-shadow(0 0 10px rgba(185, 176, 255, .7)); }
.ab-gem__facets path { stroke: rgba(233, 225, 255, .5); stroke-width: 4.5; }
.ab-gem__mark { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 14px rgba(185, 176, 255, .55)) drop-shadow(0 0 42px rgba(138, 68, 216, .5)); }
/* armed = start of the moment; then drawn → flipped → mark */
.ab-gem.is-armed .ab-gem__card { transform: none; opacity: 1; transition: none; }
.ab-gem.is-armed .ab-gem__mark { opacity: 0; transition: none; }
.ab-gem.is-armed .ab-gem__svg path { stroke-dashoffset: 1; transition: none; }
.ab-gem.is-armed .ab-gem__facets { opacity: 1; }
.ab-gem.is-armed.is-drawn .ab-gem__edge { stroke-dashoffset: 0; transition: stroke-dashoffset .95s var(--ease-in-out); }
.ab-gem.is-armed.is-drawn .ab-gem__facets path { stroke-dashoffset: 0; transition: stroke-dashoffset .7s var(--ease-in-out) .35s; }
.ab-gem.is-armed.is-flipped .ab-gem__card { transform: rotateX(180deg); transition: transform 1.05s cubic-bezier(.65, 0, .35, 1); }
.ab-gem.is-armed.is-flipped .ab-gem__facets { opacity: 0; transition: opacity .7s var(--ease) .2s; }
.ab-gem.is-armed.is-mark .ab-gem__card { transform: rotateX(180deg); opacity: 0; transition: opacity .7s var(--ease); }
.ab-gem.is-armed.is-mark .ab-gem__mark { opacity: 1; transition: opacity .8s var(--ease); }

/* ---------- how we work ---------- */
.ab-how { padding-top: calc(var(--section) * .3); }
.ab-how__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ab-verb { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .3s; }
.ab-verb:hover { box-shadow: var(--shadow-3); border-color: var(--line-2); }
.ab-verb .bezel__in { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; }
.ab-verb .bezel__in::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(122, 90, 248, .09), transparent 46%); opacity: 0; transition: opacity .4s; }
.ab-verb:hover .bezel__in::after { opacity: 1; }
.ab-verb__top { display: flex; align-items: center; justify-content: space-between; }
.ab-glyph { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #2A2140, #0B0812 70%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 26px -14px rgba(20, 10, 50, .7); }
.ab-glyph .ic { width: 22px; height: 22px; stroke-width: 1.6; }
.ab-verb__n { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; color: var(--ink-4); }
.ab-verb__t { font-size: clamp(36px, 3.3vw, 48px); line-height: 1; letter-spacing: -.05em; margin-top: calc(16px - var(--gt-t)); }
.ab-verb__p { color: var(--ink-2); font-size: 16px; line-height: 1.6; max-width: 34ch; }
.ab-verb__proof, .ab-verb .ab-steps { margin-top: 10px; padding-top: 22px; border-top: 1px dashed var(--line-2); }
/* side by side, the four parts of each card share rows (subgrid): the three dividers always sit on one line */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 901px) {
    .ab-how__grid { row-gap: 0; }
    .ab-verb { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
    .ab-verb > .bezel__in { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 14px; align-content: start; }
    .ab-verb__proof { align-self: start; }
  }
}
.ab-icons { list-style: none; margin: 0 -5px; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 40px)); }
.ab-icons li { display: flex; }
.ab-icon { position: relative; width: 100%; height: 44px; display: grid; place-items: center; border-radius: 12px; transition: transform .35s var(--ease), background .3s; }
.ab-icon .brand-tile { box-shadow: 0 4px 10px -4px rgba(20, 10, 50, .35); transition: box-shadow .35s var(--ease); }
.ab-icon:hover, .ab-icon:focus-visible { transform: translateY(-4px); background: rgba(122, 90, 248, .08); }
.ab-icon:hover .brand-tile { box-shadow: 0 10px 18px -8px rgba(20, 10, 50, .5); }
.ab-icon::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 6px); padding: 6px 10px; border-radius: 9px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .3s var(--ease); box-shadow: 0 10px 24px -10px rgba(10, 5, 30, .6); z-index: 3; }
.ab-icon:hover::after, .ab-icon:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.ab-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-chip { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px 0 8px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--paper-2); font-size: 13.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: transform .35s var(--ease), border-color .25s, color .25s, box-shadow .35s var(--ease); }
.ab-chip > .ic { width: 14px; height: 14px; margin-left: -2px; color: var(--ink-4); transition: transform .3s var(--ease), color .25s; }
.ab-chip:hover, .ab-chip:focus-visible { transform: translateY(-2px); border-color: var(--violet-2); color: var(--ink); box-shadow: 0 10px 22px -14px rgba(60, 30, 160, .5); }
.ab-chip:hover > .ic { color: var(--violet-3); transform: translateX(2px); }
.ab-chip:hover > .ic-arrow-up-right { transform: translate(2px, -2px); }
.ab-chip .brand-tile { border-radius: 7px; }
.ab-chip__ic { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: #5865F2; color: #fff; flex: none; }
.ab-chip__ic svg { width: 13px; height: 13px; }
.ab-steps { list-style: none; margin: 0; padding-left: 0; padding-right: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ab-steps li { position: relative; display: flex; flex-direction: column; gap: 2px; padding-top: 22px; }
.ab-steps li i { position: absolute; top: 2px; left: 0; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--ink-4); background: var(--paper-2); z-index: 1; }
.ab-steps li:not(:last-child)::before { content: ""; position: absolute; top: 7px; left: 14px; right: -5px; height: 1px; background: repeating-linear-gradient(90deg, var(--line-2) 0 5px, transparent 5px 9px); }
.ab-steps li:last-child i { border-color: var(--violet); background: var(--violet); box-shadow: 0 0 0 4px rgba(122, 90, 248, .16); }
.ab-steps b { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.ab-steps span { font-size: 12.5px; line-height: 1.35; color: var(--ink-3); }

/* ---------- KcalbApp: the signature, one sentence + the real InoLah screens ---------- */
.ab-sig { padding-block: calc(var(--section) * .85) calc(var(--section) * .9); overflow: clip; }
.ab-sig__beam { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(34% 52% at 70% 42%, rgba(150, 110, 255, .30), rgba(110, 60, 240, .07) 58%, transparent 78%), radial-gradient(40% 40% at 20% 0%, rgba(122, 90, 248, .10), transparent 70%); }
.ab-sig__floor { opacity: .2; }
.ab-sig__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 6vw, 96px); }
.ab-sig__text { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.ab-sig__wm {  font-family: var(--f-display); font-size: clamp(56px, 7.4vw, 112px); font-weight: 600; line-height: .95; letter-spacing: -.05em; box-sizing: content-box; padding: var(--gt-t) var(--gt-e) var(--gt-b) 0; margin: calc(0em - var(--gt-t)) calc(.04em - var(--gt-e)) calc(.08em - var(--gt-b)) 0;
  background: linear-gradient(96deg, #FFFFFF 0%, #E4E1EE 38%, #BDB3F4 72%, #8E78FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab-sig__line { max-width: 26em; font-size: clamp(18px, 1.55vw, 22px); line-height: 1.5; color: var(--snow-2); text-wrap: pretty; }
.ab-sig__app { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 16px; width: min(100%, 520px); margin-top: 12px; padding: 14px 16px 14px 14px; border-radius: 20px; border: 1px solid var(--nline-2); background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .8); transition: border-color .3s, transform .5s var(--ease), background .3s; }
.ab-sig__app:hover { border-color: rgba(255, 255, 255, .3); transform: translateY(-3px); background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); }
.ab-sig__app .brand-tile { box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .8); }
.ab-sig__app-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ab-sig__app-txt b { font-family: var(--f-display); font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--snow); line-height: 1.2; }
.ab-sig__app-txt b small { font-family: var(--f-body); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--snow-3); margin-left: 4px; }
.ab-sig__app-txt > span { font-size: 13.5px; color: var(--snow-3); }
.ab-sig__app-go { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--nline-2); color: var(--snow-2); transition: background .3s, color .3s, transform .35s var(--ease); }
.ab-sig__app-go .ic { width: 16px; height: 16px; }
.ab-sig__app:hover .ab-sig__app-go { background: #fff; color: #0A0A0F; transform: translateX(2px); }
.ab-sig__stage { position: relative; margin: 0; height: 600px; perspective: 1400px; } /* the front phone is 250 × 541 px: it always fits */
.ab-sig__halo { position: absolute; left: 50%; top: 50%; width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(150, 126, 255, .34), rgba(122, 90, 248, .08) 64%, transparent); pointer-events: none; }
.ab-sig__tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--sx, 0deg)) rotateY(var(--sy, 0deg)); transition: transform .8s var(--ease-out); }
.ab-sig__phone { position: absolute; top: 50%; left: 50%; }
.ab-sig__phone--front { transform: translate(-22%, -50%) translateZ(40px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 50px 90px -30px rgba(0, 0, 0, .95), 0 0 70px -12px rgba(138, 68, 216, .5); z-index: 2; }
.ab-sig__phone--back { transform: translate(-92%, -46%) rotate(-7deg); opacity: .78; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .95); z-index: 1; }

/* ---------- milestones ---------- */
.ab-ms { padding-bottom: calc(var(--section) * .75); --ms-gap: 20px; --msi: 12px; }
.ab-ms .co-head { margin-bottom: 20px; }
.ab-ms__ctrl { display: flex; gap: 10px; }
.ab-ms__ctrl .icon-btn { width: 48px; height: 48px; }
.ab-ms__ctrl .icon-btn:disabled { opacity: .32; pointer-events: none; }
.ab-ms__viewport { position: relative; margin-left: calc(max(var(--gutter), calc((100% - var(--container)) / 2)) - var(--msi)); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--msi) 0; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; padding: 26px 0 24px; outline-offset: -3px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--msi)); mask-image: linear-gradient(90deg, transparent 0, #000 var(--msi)); }
.ab-ms__viewport::-webkit-scrollbar { display: none; }
.ab-ms__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.ab-ms__track { display: flex; gap: var(--ms-gap); width: max-content; list-style: none; margin: 0; padding: 0 max(var(--gutter), calc((100vw - var(--container)) / 2)) 0 var(--msi); }
.ab-ms__item { flex: none; width: clamp(272px, 25vw, 360px); display: flex; flex-direction: column; scroll-snap-align: start; }
.ab-ms__tick { position: relative; height: 46px; }
.ab-ms__tick::before { content: ""; position: absolute; left: 0; right: calc(-1 * var(--ms-gap)); top: 22px; height: 1px; background: var(--line-2); }
.ab-ms__item:last-child .ab-ms__tick::before { right: 40%; background: linear-gradient(90deg, var(--line-2), transparent); }
.ab-ms__item.is-next .ab-ms__tick::before { background: repeating-linear-gradient(90deg, var(--violet-2) 0 6px, transparent 6px 11px); }
.ab-ms__tick i { position: absolute; left: 0; top: 17px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--ink-4); background: var(--paper); }
.ab-ms__item.is-year .ab-ms__tick i { border-color: var(--ink); background: var(--ink); }
.ab-ms__item.is-next .ab-ms__tick i { border-color: var(--violet); background: var(--violet); box-shadow: 0 0 0 5px rgba(122, 90, 248, .16); }
.ab-ms__tick b { position: absolute; left: 20px; top: 8px; padding: 0 10px 0 6px; background: var(--paper); font-family: var(--f-mono); font-size: 13px; font-weight: 500; letter-spacing: .06em; line-height: 28px; color: var(--ink-4); }
.ab-ms__item.is-year .ab-ms__tick b { font-family: var(--f-display); font-size: 20px; font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
[data-was] .ab-ms__tick b, [data-was] .ab-ms__tick i { background: #07050C; }
.ab-ms__card { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--paper-2); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-1); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s; -webkit-user-drag: none; }
a.ab-ms__card:hover { transform: translateY(-5px); box-shadow: var(--shadow-3); border-color: var(--line-2); }
.ab-ms__vis { position: relative; height: 172px; display: grid; place-items: center; overflow: hidden; background: #0C0914; flex: none; }
.ab-ms__vis img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
.ab-ms__vis--cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
a.ab-ms__card:hover .ab-ms__vis--cover img { transform: scale(1.04); }
.ab-ms__vis--coin { background: radial-gradient(52% 64% at 50% 50%, color-mix(in srgb, var(--bc) 42%, transparent), transparent 72%), radial-gradient(120% 90% at 50% 120%, rgba(255, 255, 255, .06), transparent 60%), #0D0A14; }
.ab-ms__vis--coin img { width: 104px; height: 104px; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55)); transition: transform .8s var(--ease); }
a.ab-ms__card:hover .ab-ms__vis--coin img { transform: translateY(-4px) rotate(-6deg); }
.ab-ms__vis--discord { background: radial-gradient(70% 90% at 30% 0%, rgba(255, 255, 255, .22), transparent 60%), linear-gradient(150deg, #5865F2, #3A43C4); color: #fff; }
.ab-ms__vis--discord svg { width: 70px; height: 70px; filter: drop-shadow(0 10px 20px rgba(0, 0, 20, .35)); }
.ab-ms__vis--dark { background: radial-gradient(60% 70% at 50% 50%, rgba(0, 190, 230, .16), transparent 70%), #0A0E14; }
.ab-ms__logo { width: 196px; height: auto; }
.ab-ms__vis--co { background: radial-gradient(80% 90% at 20% 0%, rgba(33, 117, 235, .62), transparent 64%), radial-gradient(70% 80% at 100% 100%, rgba(33, 117, 235, .3), transparent 60%), #071026; }
.ab-ms__logo--co { width: 214px; }
.ab-ms__vis--next { display: flex; align-items: center; justify-content: center; gap: 10px; background: radial-gradient(60% 70% at 50% 40%, rgba(138, 68, 216, .45), transparent 72%), #0D0916; }
.ab-ms__vis--next .brand-tile { box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .9); }
.ab-ms__vis--date { background: radial-gradient(60% 70% at 50% -10%, rgba(160, 120, 255, .34), transparent 70%), linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 100% 28px, #07050C; }
.ab-ms__plate { display: flex; align-items: baseline; gap: 6px; font-family: var(--f-display); font-size: 46px; font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.ab-ms__plate b { font-weight: 600; background: linear-gradient(180deg, #FFFFFF 0%, #D9D6E4 48%, #8E8AA3 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.ab-ms__plate i { font-style: normal; color: rgba(185, 168, 255, .7); }
.ab-ms__body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; }
.ab-ms__stamp { margin-top: -2px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-4); }
.ab-ms__vis--coins { background: radial-gradient(40% 70% at 34% 50%, rgba(245, 136, 4, .34), transparent 72%), radial-gradient(40% 70% at 66% 50%, rgba(163, 59, 208, .36), transparent 72%), #0D0A14; }
.ab-ms__vis--coins { display: flex; align-items: center; justify-content: center; }
.ab-ms__vis--coins img { width: 92px; height: 92px; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55)); transition: transform .8s var(--ease); }
.ab-ms__vis--coins img + img { margin-left: -14px; }
a.ab-ms__card:hover .ab-ms__vis--coins img:first-child { transform: translateX(-4px) rotate(-6deg); }
a.ab-ms__card:hover .ab-ms__vis--coins img + img { transform: translateX(4px) rotate(6deg); }
.ab-ms__vis--cmc { background: radial-gradient(60% 70% at 50% 50%, rgba(255, 255, 255, .08), transparent 70%), #0B0A12; }
.ab-ms__logo--cmc { width: 150px; }
.ab-ms__vis--listed { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.ab-ms__vis--listed .ab-ms__logo--cmc { width: 128px; }
.ab-ms__tok { width: 70px; height: 70px; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .55)); transition: transform .8s var(--ease); }
.ab-ms__toks { display: flex; }
.ab-ms__toks .ab-ms__tok + .ab-ms__tok { margin-left: -12px; }
a.ab-ms__card:hover .ab-ms__vis--listed .ab-ms__tok { transform: translateY(-3px); }
.ab-ms__vis--gecko { background: radial-gradient(60% 70% at 50% 45%, rgba(140, 197, 63, .22), transparent 70%), #0A100C; }
.ab-ms__logo--gecko { width: 138px; }
.ab-ms__date { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--violet-3); }
.ab-ms__title { font-family: var(--f-display); font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -.025em; color: var(--ink); }
.ab-ms__text { font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }
.ab-ms__more { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--ink); }
.ab-ms__more .ic { width: 15px; height: 15px; transition: transform .3s var(--ease); }
a.ab-ms__card:hover .ab-ms__more .ic { transform: translateX(3px); }
.ab-ms__ctrl { align-items: center; }
.ab-ms__count { margin-right: 8px; font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .06em; color: var(--ink-4); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ab-ms__count b { font-weight: 500; color: var(--ink); }
.ab-ms__scrub { display: flex; gap: 6px; margin-top: 6px; }
.ab-ms__yr { flex: var(--n, 1) 1 0; min-width: 58px; min-height: 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 11px; padding: 10px 0 4px; background: none; border: 0; border-radius: 0; cursor: pointer; text-align: left; color: inherit; }
.ab-ms__yr-bar { position: relative; display: block; width: 100%; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; transition: background .25s; }
.ab-ms__yr-bar i { position: absolute; inset: 0; border-radius: inherit; transform-origin: left; transform: scaleX(var(--k, 0)); background: linear-gradient(90deg, var(--violet), var(--violet-2)); transition: transform .45s var(--ease); }
.ab-ms__yr-l { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.ab-ms__yr.is-current .ab-ms__yr-l { color: var(--ink); }
.ab-ms__yr:hover .ab-ms__yr-l, .ab-ms__yr:focus-visible .ab-ms__yr-l { color: var(--violet-3); }
.ab-ms__yr:hover .ab-ms__yr-bar { background: var(--line-2); }

/* ---------- leadership ---------- */
.ab-lead { padding-bottom: calc(var(--section) * .5); }
.ab-lead .co-head { margin-bottom: 36px; }
.ab-people { list-style: none; margin: 0; padding: 7px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.ab-person { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: end; gap: 20px; padding: 14px 18px 14px 14px; background: var(--paper-2); height: 100%; transition: border-color .35s; }
.ab-person:hover { border-color: var(--ink-4); }
.ab-person__ph { width: 120px; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--paper-3); }
.ab-person__txt { min-width: 0; padding-bottom: 6px; }
.ab-person__ph img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: grayscale(1) contrast(1.04); transition: filter .7s var(--ease), transform .9s var(--ease-out); }
.ab-person:hover .ab-person__ph img { filter: grayscale(0) contrast(1); transform: scale(1.03); }
.ab-person__txt b { display: block; font-family: var(--f-display); font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); line-height: 1.2; }
.ab-role { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 7px; margin-top: 10px; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; }
.ab-role > span { white-space: nowrap; background: linear-gradient(91deg, #7A5AF8, #5E3FE6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab-role > i { font-style: normal; font-weight: 400; color: #8E78FF; }
[data-was] .ab-role > span { background-image: linear-gradient(91deg, #C3B5FF, #9A86FF); }
.ab-person__go { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--ink); transition: background .3s, color .3s, border-color .3s; }
.ab-person__go .ic { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.ab-person:hover .ab-person__go { background: var(--ink); color: var(--paper-2); border-color: var(--ink); }
.ab-person:hover .ab-person__go .ic { transform: translateX(2px); }
.ab-end { padding-top: 0; }
.ab-end .btn-row, .rm-end .btn-row { justify-content: center; }
.ab-end .cta-room .btn--glass, .rm-end .cta-room .btn--glass { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #fff; }
.ab-end .cta-room .btn--glass:hover, .rm-end .cta-room .btn--glass:hover { background: rgba(255, 255, 255, .24); }

/* ================= ROADMAP ================= */
.rm-grad { display: inline-block; background: linear-gradient(180deg, #FFFFFF 0%, #D9D2F7 40%, #7A5AF8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rm-hero { position: relative; overflow: clip; isolation: isolate; background: var(--night); padding: calc(var(--header-h) + clamp(76px, 10vw, 132px)) 0 clamp(48px, 6vw, 80px); }
.rm-hero__beam { position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: .85; background: url(assets/bg/hero-beam.webp) center top / max(1500px, 106%) auto no-repeat; -webkit-mask-image: linear-gradient(#000 52%, transparent 96%); mask-image: linear-gradient(#000 52%, transparent 96%); }
.rm-hero__streak { position: absolute; z-index: -1; right: max(2%, calc(50% - 700px)); top: 12%; width: 420px; height: auto; opacity: .55; mix-blend-mode: screen; pointer-events: none; }
.rm-hero__in { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.rm-hero__stack { position: absolute; z-index: 0; top: -64px; right: var(--gutter); width: min(44%, 540px); aspect-ratio: 540 / 430; pointer-events: none; }
.rm-hero__tilt { position: absolute; inset: 0; transform: perspective(1700px) rotateY(-17deg) rotateX(7deg) rotateZ(1.5deg); transform-style: preserve-3d; }
.rm-hero__f { position: absolute; }
.rm-hero__f .co-browser { box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .06); }
.rm-hero__f--a { top: 6%; left: 28%; width: 72%; opacity: .72; }
.rm-hero__f--b { top: 42%; left: 0; width: 70%; }
/* the brands' official banners (Thomas 28/09: no screenshots of the sites) */
.rm-hero__bn { border-radius: 16px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .08); }
.rm-hero__f--c { top: 24%; right: 1%; }
.rm-hero__f--c .phone { --pw: clamp(118px, 10.6vw, 150px) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 40px 80px -24px rgba(0, 0, 0, .95), 0 0 60px -10px rgba(138, 68, 216, .45); }
.rm-hero__in > :not(.rm-hero__stack) { position: relative; z-index: 1; }
.rm-hero__in h1 { max-width: 15ch; padding-bottom: calc(.06em + var(--gt-b)); }
.rm-hero__lead { max-width: 560px; }
.rm-index { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(24px, 4vw, 48px); }
.rm-index__a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; padding: 22px 22px 20px; border-radius: 22px; border: 1px solid var(--nline); background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015)); transition: transform .5s var(--ease), border-color .3s, background .3s; }
.rm-index__a:hover { transform: translateY(-3px); border-color: var(--nline-2); background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025)); }
.rm-index__y { font-family: var(--f-display); font-size: clamp(42px, 4.6vw, 64px); font-weight: 600; line-height: .95; letter-spacing: -.055em; white-space: nowrap; padding: 0 .12em .05em 0; margin-right: -.12em; }
.rm-index__names { grid-column: 1; font-size: 13.5px; line-height: 1.45; color: var(--snow-3); }
.rm-index__go { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--nline-2); color: var(--snow-2); transition: background .3s, color .3s, transform .4s var(--ease); }
.rm-index__go .ic { width: 17px; height: 17px; }
.rm-index__a:hover .rm-index__go { background: #fff; color: var(--ink); transform: translateY(2px); }

.rm-tl { position: relative; overflow: clip; background: var(--night-glow), var(--night); padding: clamp(36px, 5vw, 72px) 0 clamp(110px, 11vw, 170px); }
.rm-tl::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 30% at 12% 18%, rgba(122, 90, 248, .08), transparent 70%), radial-gradient(40% 30% at 90% 55%, rgba(122, 90, 248, .07), transparent 70%), radial-gradient(40% 30% at 20% 88%, rgba(94, 79, 209, .08), transparent 70%); }
.rm-tl__in { position: relative; --yc: clamp(210px, 17vw, 244px); --pad: 56px; --rl: 20px; }
.rm-rail { position: absolute; top: 0; height: 0; left: calc(var(--gutter) + var(--yc) + var(--rl)); width: 2px; border-radius: 2px; background: rgba(255, 255, 255, .09); }
.rm-rail__fill { position: absolute; inset: 0; border-radius: 2px; transform-origin: top; transform: scaleY(0); background: linear-gradient(180deg, #B9A8FF, #7A5AF8 60%, #5E4FD1); box-shadow: 0 0 16px rgba(122, 90, 248, .5); will-change: transform; }
.rm-rail__head { position: absolute; left: 50%; top: 0; width: 2px; height: 48px; margin-top: -48px; border-radius: 2px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95)); box-shadow: 0 0 10px 1px rgba(166, 144, 255, .55); opacity: 0; transition: opacity .25s; will-change: transform; }
.rm-ch { position: relative; display: grid; grid-template-columns: var(--yc) minmax(0, 1fr); }
.rm-ch + .rm-ch { margin-top: clamp(80px, 9vw, 140px); }
.rm-ch__sticky { position: sticky; top: calc(var(--header-h) + 36px); }
.rm-year { display: inline-block; font-family: var(--f-display); font-weight: 600; font-size: clamp(76px, 7.6vw, 116px); line-height: .86; letter-spacing: -.065em; white-space: nowrap; padding: .1em .12em .2em 0; margin: -.1em -.12em -.12em 0; }
.rm-ch__sum { display: block; margin-top: 16px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--snow-3); }
.rm-ch__items { padding-left: var(--pad); display: flex; flex-direction: column; gap: clamp(64px, 7vw, 104px); }
.rm-item { position: relative; display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 15fr); gap: clamp(28px, 2.8vw, 40px); align-items: center; }
.rm-item__text { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.rm-node { position: absolute; left: calc(var(--rl) - var(--pad) - 6px); top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--night); border: 2px solid rgba(255, 255, 255, .28); transition: border-color .5s, background .5s, box-shadow .6s; }
.rm-item.is-on .rm-node { border-color: #fff; background: var(--bc); box-shadow: 0 0 0 5px color-mix(in srgb, var(--bc) 24%, transparent), 0 0 22px color-mix(in srgb, var(--bc) 70%, transparent); }
.rm-item__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rm-period { display: inline-flex; align-items: center; height: 24px; padding: 0 11px; border-radius: var(--r-pill); border: 1px solid var(--nline-2); font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--snow-2); }
.rm-item__brand { display: flex; align-items: center; gap: 16px; }
.rm-item__brand .brand-tile { box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .9); }
.rm-item__brand h3 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.05; letter-spacing: -.035em; }
/* InoLah: its name in the gradient of the page's big titles, a size up (Thomas 28/09) */
.rm-item__brand h3.rm-grad { font-size: clamp(32px, 3vw, 44px); }
.rm-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .08); font-size: 12px; font-weight: 600; color: var(--snow-2); }
.rm-kind { display: block; margin-top: 5px; font-size: 13.5px; color: var(--snow-3); }
.rm-line { font-size: 16.5px; line-height: 1.6; color: var(--snow-2); max-width: 42ch; text-wrap: pretty; }
.rm-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.rm-facts li { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; line-height: 1.4; color: var(--snow-2); background: none; border: 0; padding: 0; }
.rm-fact { display: inline-flex; align-items: center; gap: 5px; color: var(--snow-2); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .22); text-underline-offset: 4px; transition: color .25s, text-decoration-color .25s; }
.rm-fact .ic { width: 13px; height: 13px; opacity: .6; transition: transform .3s var(--ease), opacity .25s; }
.rm-fact:hover, .rm-fact:focus-visible { color: #fff; text-decoration-color: rgba(255, 255, 255, .6); }
.rm-fact:hover .ic { opacity: 1; transform: translateX(2px); }
.rm-fact:hover .ic-arrow-up-right { transform: translate(2px, -2px); }
.rm-facts li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--bc) 70%, #fff); box-shadow: 0 0 8px color-mix(in srgb, var(--bc) 60%, transparent); }
.rm-links { display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; margin-top: 6px; }
.rm-links .btn--sm { --bh: 42px; }
/* one pattern for every product: the button, then the external links on their own line */
.rm-exts { flex: 1 0 100%; display: flex; align-items: center; gap: 22px; min-height: 44px; }
.rm-ext { font-size: 14px; font-weight: 500; color: var(--snow-2) !important; }
.rm-ext:hover { color: #fff !important; }
.rm-item__media { position: relative; }
.rm-item__media::before { content: ""; position: absolute; inset: 12% 10%; border-radius: 50%; background: var(--bc); filter: blur(80px); opacity: .08; transition: opacity 1.4s var(--ease); pointer-events: none; }
.rm-item.is-on .rm-item__media::before { opacity: .3; }
.rm-item__media:hover .co-browser { transform: translateY(-5px); }
.rm-newsmark { background: linear-gradient(160deg, #2A2140, #0B0812 70%); color: #fff; }
.brand-tile.rm-newsmark svg { width: 58%; height: 58%; color: #fff; filter: drop-shadow(0 0 8px rgba(185, 176, 255, .45)); }
/* News window: the real latest articles */
.rm-newsw__page { overflow: hidden; background: #fff; color: var(--ink); padding: 16px 20px 12px; display: flex; flex-direction: column; gap: 0; }
.rm-newsw__mast { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.rm-newsw__mast b { font-family: var(--f-display); font-size: 23px; font-weight: 700; letter-spacing: -.04em; }
.rm-newsw__mast span { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.rm-newsw__row { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: center; padding: 9px 0; }
.rm-newsw__row + .rm-newsw__row { border-top: 1px solid var(--line); }
.rm-newsw__row img { width: 104px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; border-radius: 8px; }
.rm-newsw__cat { display: block; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--violet-3); }
.rm-newsw__row b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 3px 0 2px; font-size: 13.5px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.rm-newsw__date { font-size: 11px; color: var(--ink-4); }
/* InoLah phones */
.rm-phones { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-start; gap: 22px; padding: 6px 0 34px; }
.rm-phone--1 { transform: translateY(34px); }
.rm-phone__scr { width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--pw, 280px) * .125); background: #0B0812; }
.rm-phone__scr img { border-radius: 0; }
.rm-phone--nobar { aspect-ratio: 1080 / 1776; border-radius: calc(var(--pw, 280px) * .1); }
.rm-phone--nobar::after { display: none; }
.rm-phone--nobar .rm-phone__scr { border-radius: calc(var(--pw, 280px) * .075); }
.rm-phone--nobar .rm-phone__scr img { position: relative; top: -8.1%; height: 108.1%; object-position: 50% 0; }
.rm-phone--inset .rm-phone__scr { padding-top: calc(var(--pw, 280px) * .135); background: linear-gradient(180deg, #2E1250, #3E1A69); }
.rm-phone--inset .rm-phone__scr img { height: 100%; object-position: 50% 0; }
/* Crypto-Only: the web app in a window + the Android app beside it */
.rm-combo { position: relative; z-index: 1; container-type: inline-size; padding-bottom: 22px; }
.rm-combo > .co-browser { width: 100%; }
.rm-combo__phone { position: absolute; right: -2cqw; bottom: 0; z-index: 2; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 40px 70px -24px rgba(0, 0, 0, .95), 0 0 0 6px rgba(5, 3, 9, .35); }
/* app.crypto-only.org: headline only (above the store badges and the subtitle) */
.co-browser--crop-co .co-browser__shot { aspect-ratio: 1300 / 585; }
.co-browser--crop-co .co-browser__shot img { inset: 0 auto auto -7.692%; width: 153.846%; height: auto; max-width: none; object-fit: fill; }
/* stake-only.org: the orbit only (co-stakeonly-orbit.webp, cropped from the hero: no headline, no figures) */
.co-browser--crop-so .co-browser__shot { aspect-ratio: 1240 / 1000; }
/* Xitcoin: the coin on its own stage */
.rm-stage { position: relative; z-index: 1; aspect-ratio: 1.45; border-radius: 16px; overflow: hidden; isolation: isolate; border: 1px solid rgba(255, 255, 255, .1); box-shadow: var(--shadow-night); display: grid; place-items: center;
  background: radial-gradient(40% 50% at 50% 45%, color-mix(in srgb, var(--bc) 44%, transparent), transparent 74%), radial-gradient(80% 50% at 50% 108%, color-mix(in srgb, var(--bc) 20%, transparent), transparent 72%), linear-gradient(180deg, #120C07, #0A0706); }
.rm-stage::before, .rm-stage::after { content: ""; position: absolute; left: 50%; top: 45%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(255, 255, 255, .07); pointer-events: none; z-index: -1; }
.rm-stage::before { width: 58%; }
.rm-stage::after { width: 86%; border-style: dashed; border-color: rgba(255, 255, 255, .05); }
.rm-stage__coin { position: relative; width: 38%; height: auto; margin-top: -3%; filter: drop-shadow(0 28px 34px rgba(0, 0, 0, .6)) drop-shadow(0 0 36px color-mix(in srgb, var(--bc) 40%, transparent)); transition: transform .9s var(--ease); }
.rm-item__media:hover .rm-stage__coin { transform: translateY(-6px) rotate(-6deg); }
.rm-stage__floor { position: absolute; left: 50%; bottom: 11%; width: 34%; height: 7%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent); }
.rm-stage__label { position: absolute; top: 16px; left: 18px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; color: rgba(255, 255, 255, .62); }
.rm-stage__name { position: absolute; right: 18px; bottom: 14px; font-family: var(--f-display); font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: rgba(255, 255, 255, .7); }
.rm-end { padding-top: calc(var(--section) * .7); padding-bottom: calc(var(--section) * .6); }

/* ================= responsive ================= */
/* founders: 3 side-by-side cards (≥1280), 3 stacked cards (861–1279), one column (≤860) — the role never wraps */
@media (min-width: 861px) and (max-width: 1279px) {
  .ab-person { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; padding: 14px 16px 16px 14px; }
  .ab-person__ph { width: 92px; }
  .ab-person__txt { padding-bottom: 0; }
  .ab-person__txt b { font-size: 18px; }
  .ab-role { font-size: 10.5px; }
}
@media (max-width: 1200px) {
  .rm-item { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .rm-item__media { max-width: 720px; }
  .rm-item__text { max-width: 560px; }
  /* stacked: the coin stage stays a light band, not a big empty box */
  .rm-stage { aspect-ratio: 16 / 9; max-height: 320px; }
  .rm-stage__coin { width: min(38%, 180px); }
  .co-browser--crop-so { max-width: 560px; }
}
@media (max-width: 960px) {
  .rm-hero__stack { display: none; }
}
@media (max-width: 1024px) {
  .ab-icon .brand-tile { width: 26px; height: 26px; border-radius: 7px; }
}
@media (max-width: 900px) {
  .ab-icon .brand-tile { width: 30px; height: 30px; border-radius: 8px; }
  .ab-hero__beam { background-position: center top; background-size: 900px auto; opacity: .55; -webkit-mask-image: radial-gradient(60% 70% at 50% 0%, #000 40%, transparent 100%); mask-image: radial-gradient(60% 70% at 50% 0%, #000 40%, transparent 100%); }
  .ab-sig__in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ab-sig__text { align-items: center; text-align: center; }
  .ab-sig__app { text-align: left; }
  .ab-sig__stage { height: 590px; }
  .ab-sig__beam { background: radial-gradient(60% 34% at 50% 72%, rgba(150, 110, 255, .30), rgba(110, 60, 240, .07) 58%, transparent 78%); }
  .ab-how__grid { grid-template-columns: minmax(0, 1fr); }
  .ab-verb .bezel__in { min-height: 0; }
  .ab-verb__t { margin-top: calc(6px - var(--gt-t)); }
  .ab-name__grid { grid-template-columns: minmax(0, 1fr); }
  .ab-toc { display: none; }
  .ab-hero { min-height: 0; padding: calc(var(--header-h) + 36px) 0 64px; }
  .ab-hero__in { grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: center; text-align: center; }
  .ab-hero__text { align-items: center; order: 2; }
  .ab-hero__lead { max-width: 34em; text-wrap: balance; }
  .ab-plate { order: 1; width: min(76%, 380px); }
  .ab-hero__glow { background: radial-gradient(46% 34% at 50% 30%, rgba(122, 90, 248, .26), rgba(94, 79, 209, .08) 60%, transparent 78%); }
  .ab-hero__grid { -webkit-mask-image: radial-gradient(50% 32% at 50% 30%, #000, transparent 80%); mask-image: radial-gradient(50% 32% at 50% 30%, #000, transparent 80%); }
  .rm-index { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rm-index__a { padding: 16px 18px; }
  .rm-index__y { font-size: 40px; }
  .rm-tl__in { --yc: 0px; --pad: 34px; --rl: 9px; }
  .rm-ch { grid-template-columns: minmax(0, 1fr); }
  .rm-ch__year { padding-left: var(--pad); margin-bottom: 34px; }
  .rm-ch__sticky { position: static; }
  .rm-year { font-size: clamp(64px, 17vw, 96px); }
  .rm-ch__sum { margin-top: 10px; }
}
@media (max-width: 720px) {
  .ab-hero { padding: calc(var(--header-h) + 20px) 0 52px; }
  .ab-plate { width: min(74%, 300px); }
  .ab-plate__out { stroke-width: 5; }
  .ab-plate__in { stroke-width: 3.6; }
  .ab-plate__base { stroke-width: 3.4; }
  .ab-plate__base--in { stroke-width: 2.6; }
  .ab-plate__guides * { stroke-width: 2.6; stroke-dasharray: 10 14; }
  .ab-plate__plus path { stroke-width: 3.4; }
  .ab-hero__text { gap: 16px; }
  .ab-hero__lead { font-size: 17px; }
  .ab-card-label { top: 20px; left: 22px; }
  .ab-replay { top: 12px; right: 12px; }
  .ab-letters__in { min-height: 320px; padding-block: 84px 44px !important; gap: 42px; }
  .ab-letters__svg { width: 92%; }
  .ab-letters__cap { font-size: 11.5px; gap: 12px; }
  .ab-gem__in { min-height: 360px; }
  .ab-gem__stage { width: min(56%, 220px); }
  .ab-ms__item { width: min(82vw, 300px); }
  .ab-ms__ctrl .icon-btn { width: 44px; height: 44px; }
  .ab-person { grid-template-columns: 82px minmax(0, 1fr); gap: 14px; padding: 12px 14px 12px 12px; }
  .ab-person__ph { width: 82px; }
  .ab-person__go { top: 12px; right: 12px; width: 34px; height: 34px; }
  .ab-person__txt { padding-bottom: 4px; }
  .ab-person__txt b { font-size: 17.5px; }
  .ab-role { font-size: 10.5px; }
  .ab-ms__count { margin-right: 2px; font-size: 12px; }
  .rm-hero__streak { width: 260px; right: -40px; top: 8%; }
  .rm-phones { gap: 14px; }
  .rm-phones .rm-phone { --pw: 138px !important; }
  .rm-newsw__page { padding: 12px 14px 14px; aspect-ratio: auto; }
  .rm-newsw__mast b { font-size: 19px; }
  .rm-newsw__row { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 6px 0; }
  .rm-newsw__row img { width: 84px; }
  .rm-newsw__row b { font-size: 12.5px; }
  .co-browser .browser__url { max-width: 180px; }
  .rm-combo { padding-bottom: 18px; }
  .rm-stage__label { top: 12px; left: 14px; }
  .rm-stage__name { right: 14px; bottom: 10px; font-size: 13px; }
}
/* phones: the signature card, the three verbs and the milestones get compact (no near-empty cards) */
@media (max-width: 560px) {
  .ab-sig__stage { height: 460px; }
  .ab-sig__phone--front { --pw: 196px !important; }
  .ab-sig__phone--back { --pw: 164px !important; }
  .ab-sig__app { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 14px; padding: 12px 14px 12px 12px; }
  .ab-sig__app .brand-tile { grid-row: 1 / 3; }
  .ab-sig__app .badge { grid-column: 2; grid-row: 2; justify-self: start; }
  .ab-sig__app-go { grid-column: 3; grid-row: 1 / 3; }
  .ab-sig__app-txt b { font-size: 17.5px; }
  .ab-how__grid { gap: 12px; }
  .ab-verb .bezel__in { padding: 22px !important; gap: 10px; }
  .ab-verb__t { font-size: 40px; margin-top: calc(4px - var(--gt-t)); }
  .ab-glyph { width: 44px; height: 44px; border-radius: 13px; }
  .ab-glyph .ic { width: 19px; height: 19px; }
  .ab-verb__proof, .ab-verb .ab-steps { padding-top: 16px; }
  .ab-ms__vis { height: 150px; }
}
@media (max-width: 860px) {
  .ab-people { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  /* tablet: the head row and the cards share one right edge */
  .ab-lead .co-head { max-width: 640px; }
}
@media (max-width: 480px) {
  .ab-end .btn-row .btn, .rm-end .btn-row .btn { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 420px) {
  .ab-chip { font-size: 13px; }
  .rm-links { gap: 14px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-plate__out, .ab-plate__in { animation: none; }
  .ab-verb { transform: none !important; }
}

/* ================= 28/09 — Thomas's review ================= */
/* the big years never touch the line: smaller than their column at every width */
.rm-year { font-size: clamp(66px, 6.2vw, 96px); }
/* the Xitcoin network: the XTC coin at the centre of its four testnet validators */
.rm-chain { position: relative; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(40% 50% at 50% 48%, rgba(245,136,4,.22), transparent 70%), radial-gradient(80% 60% at 50% 110%, rgba(122,90,248,.26), transparent 70%), linear-gradient(180deg, #0D0818, #07050D); }
.rm-chain::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 42px 42px; -webkit-mask: radial-gradient(70% 70% at 50% 50%, #000, transparent); mask: radial-gradient(70% 70% at 50% 50%, #000, transparent); }
.rm-chain__ring { position: absolute; left: 50%; top: 48%; width: 66%; aspect-ratio: 1.9; transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed rgba(255,255,255,.18); }
.rm-chain__ring--2 { width: 36%; border: 1px solid rgba(245,136,4,.3); }
.rm-chain__coin { position: absolute; left: 50%; top: 48%; width: 20%; height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 16px 34px rgba(245,136,4,.45)); }
.rm-chain__node { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 9px; border-radius: 999px; background: rgba(14,9,26,.92); border: 1px solid rgba(255,255,255,.14); font: 500 12px/1 var(--f-mono); letter-spacing: .06em; color: var(--snow-2); transform: translate(-50%, -50%); white-space: nowrap; }
.rm-chain__node i { width: 8px; height: 8px; border-radius: 50%; background: #4BE3A4; box-shadow: 0 0 0 3px rgba(75,227,164,.16); }
.rm-chain__node--0 { left: 50%; top: 17%; } .rm-chain__node--1 { left: 83%; top: 48%; } .rm-chain__node--2 { left: 50%; top: 79%; } .rm-chain__node--3 { left: 17%; top: 48%; }
.rm-chain__id { position: absolute; left: 50%; bottom: 5.5%; transform: translateX(-50%); font: 500 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--snow-3); white-space: nowrap; }
@media (max-width: 560px) { .rm-chain__node { font-size: 10px; padding: 5px 9px 5px 7px; } .rm-chain__id { font-size: 9px; } }
/* the official banners on the roadmap */
.rm-banner { position: relative; aspect-ratio: 3 / 1; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); background: #0D0B19; box-shadow: 0 40px 80px -40px rgba(0,0,0,.9); }
.rm-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the banking project: the XTC coin linked to a bank */
.rm-bank { position: relative; aspect-ratio: 16 / 7; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 40px);
  background: radial-gradient(50% 70% at 50% 50%, rgba(122,90,248,.22), transparent 70%), linear-gradient(180deg, #120E22, #0A0814); }
.rm-bank__coin { width: clamp(64px, 16%, 104px); height: auto; filter: drop-shadow(0 14px 30px rgba(245,136,4,.4)); }
.rm-bank__line { position: relative; width: clamp(70px, 22%, 180px); height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(245,136,4,.7), rgba(166,144,255,.8)); overflow: hidden; }
.rm-bank__line i { position: absolute; top: 0; bottom: 0; width: 30%; background: linear-gradient(90deg, transparent, #fff, transparent); animation: hm-bank-run 2.6s ease-in-out infinite; }
.rm-bank__icon { width: clamp(64px, 16%, 104px); aspect-ratio: 1; border-radius: 22%; display: grid; place-items: center; color: #E9E2FF; background: linear-gradient(160deg, #3A2A78, #1B1438); border: 1px solid rgba(185,168,255,.35); box-shadow: 0 18px 40px -16px rgba(122,90,248,.8); }
.rm-bank__icon .ic { width: 50%; height: 50%; }
.rm-bank__cap { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); font: 500 10.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--snow-3); white-space: nowrap; }
@keyframes hm-bank-run { from { left: -30%; } to { left: 100%; } }
.rm-newsmark .ic-landmark { width: 46%; height: 46%; }

/* ==== pages/connect.css ==== */
/* ================= CONNECT: #community, #contact, #faq  (prefix .cn-) ================= */

/* ---------- shared: night hero, stars, flags, heads ---------- */
.cn-hero { position: relative; overflow: clip; isolation: isolate; background: var(--night); padding: calc(var(--header-h) + clamp(40px, 6vw, 84px)) 0 clamp(56px, 7vw, 96px); }
.cn-hero > .container { position: relative; z-index: 1; }
/* his beam (assets/bg/hero-beam.webp), top-centred, fading into the night — same on Community, Contact and FAQ,
   held at .8 so it stays violet-black, never neon */
.cn-beam { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .8; background: url(assets/bg/hero-beam.webp) center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(#000 55%, transparent 98%); mask-image: linear-gradient(#000 55%, transparent 98%); }
.cn-stars { position: absolute; inset: 0; pointer-events: none; opacity: .6;
  background-image:
    radial-gradient(1.2px 1.2px at 8% 18%, rgba(255,255,255,.9), transparent), radial-gradient(1px 1px at 17% 64%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 24% 31%, rgba(255,255,255,.6), transparent), radial-gradient(1.4px 1.4px at 31% 82%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 38% 12%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 46% 48%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.2px 1.2px at 53% 26%, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 58% 72%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 64% 9%, rgba(255,255,255,.75), transparent), radial-gradient(1.3px 1.3px at 71% 57%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 77% 21%, rgba(255,255,255,.65), transparent), radial-gradient(1px 1px at 83% 76%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.2px 1.2px at 89% 38%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 94% 12%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 4% 88%, rgba(255,255,255,.4), transparent), radial-gradient(1px 1px at 97% 66%, rgba(255,255,255,.45), transparent);
  -webkit-mask-image: linear-gradient(#000 40%, transparent 95%); mask-image: linear-gradient(#000 40%, transparent 95%); }
.cn-head { margin-bottom: clamp(32px, 4vw, 56px); }
.cn-head--split { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; }
.cn-flag { position: relative; display: inline-block; width: 20px; height: 20px; border-radius: 50%; overflow: hidden; flex: none; vertical-align: middle; }
.cn-flag svg, .cn-flag img { display: block; width: 100%; height: 100%; }
.cn-flag img { object-fit: cover; }
.cn-flag::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.cn-glass-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.cn-glass-ic svg { width: 18px; height: 18px; }
.cn-soft-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.cn-soft-ic svg { width: 18px; height: 18px; }
.cn-inline { display: inline-flex; align-items: center; gap: 4px; color: var(--violet-3); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cn-inline .ic { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.cn-inline:hover .ic { transform: translateX(2px); }
[data-theme="night"] .cn-inline { color: var(--violet-2); }
/* Crypto-Only glyph as a monochrome icon (official symbol, recoloured with currentColor through a mask) */
.cn-co-glyph { display: inline-block; width: 1.2em; height: 1.2em; flex: none; background: currentColor;
  -webkit-mask: url(assets/brand/crypto-only/symbol-white.svg) 74% 52% / 142% no-repeat; mask: url(assets/brand/crypto-only/symbol-white.svg) 74% 52% / 142% no-repeat; }
/* copy button */
.cn-copy { position: relative; width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--nline-2); background: rgba(255,255,255,.04); color: var(--snow-2); transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease); }
.cn-copy svg { width: 16px; height: 16px; grid-area: 1 / 1; transition: opacity .2s, transform .3s var(--ease); }
.cn-copy .cn-copy__ok { opacity: 0; transform: scale(.6); color: #6FE3AE; }
.cn-copy:hover { background: #fff; color: #0A0A0F; border-color: #fff; }
.cn-copy.is-done .ic-copy { opacity: 0; transform: scale(.6); }
.cn-copy.is-done .cn-copy__ok { opacity: 1; transform: none; }
[data-theme="paper"] .cn-copy, [data-theme="white"] .cn-copy { border-color: var(--line-2); background: var(--paper-2); color: var(--ink-3); }
[data-theme="paper"] .cn-copy:hover, [data-theme="white"] .cn-copy:hover { background: #0A0A0F; color: #fff; border-color: #0A0A0F; }
[data-theme="paper"] .cn-copy .cn-copy__ok { color: var(--ok); }
[data-theme="paper"] .cn-copy.is-done:hover .cn-copy__ok { color: #8CF0BD; }

/* ================================================================================================
   COMMUNITY
   ================================================================================================ */
.cn-hero--cm { padding-top: calc(var(--header-h) + clamp(24px, 4vw, 56px)); padding-bottom: clamp(48px, 5vw, 72px); }
.cn-cm { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "text globe" "langs langs"; column-gap: clamp(24px, 4vw, 64px); row-gap: 20px; align-items: center; }
.cn-cm__text { grid-area: text; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: 580px; }
.cn-cm__title { font-size: clamp(38px, 5.2vw, 78px); line-height: 1; padding-bottom: calc(.04em + var(--gt-b)); text-wrap: balance; }
.cn-cm__lead { max-width: 470px; }
.cn-stats { display: flex; margin: 4px 0 2px; }
.cn-stats > div { display: flex; flex-direction: column-reverse; gap: 6px; padding: 0 clamp(18px, 2.2vw, 30px); border-left: 1px solid var(--nline-2); }
.cn-stats > div:first-child { padding-left: 0; border-left: 0; }
.cn-stats dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--snow-3); }
.cn-stats dd { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(30px, 2.8vw, 42px); line-height: 1; letter-spacing: -.04em; color: var(--snow); min-width: 2.2ch; }
.cn-cm__cta { margin-top: 4px; }
.cn-btn-discord .ic-si-discord { color: #5865F2; width: 20px; height: 20px; }
.cn-cm__cta .ic-arrow-down { transition: transform .3s var(--ease); }
.cn-cm__cta a:hover .ic-arrow-down { transform: translateY(2px); }
.cn-cm__note { font-size: 12.5px; color: var(--snow-4); margin-top: -6px; }

/* globe */
.cn-cm__globe { grid-area: globe; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.cn-globe { position: relative; width: min(100%, 700px); aspect-ratio: 1; margin: -36px 0 -30px; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.cn-globe { cursor: grab; }
.cn-globe.is-grabbing { cursor: grabbing; }
.cn-globe__halo { position: absolute; inset: 9%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 38%, rgba(122,90,248,.20), rgba(70,40,160,.10) 46%, rgba(20,10,50,.0) 70%);
  box-shadow: inset 0 0 80px rgba(122,90,248,.10), 0 0 120px -20px rgba(122,90,248,.35); transition: opacity 1.2s var(--ease-out); }
.cn-globe[data-state="ready"] .cn-globe__halo { opacity: .55; }
/* the sphere under the light globe (the WebGL globe paints its own) */
.cn-globe__ph { position: absolute; inset: 10%; border-radius: 50%; pointer-events: none; transition: opacity 1.2s var(--ease-out);
  background: radial-gradient(circle at 38% 30%, rgba(122,90,248,.20), transparent 58%), radial-gradient(circle, #09060F 58%, #140C2A);
  box-shadow: inset 0 0 0 1px rgba(166,144,255,.2), inset 0 0 70px rgba(122,90,248,.16), 0 0 90px -16px rgba(122,90,248,.4); }
.cn-globe[data-state="ready"] .cn-globe__ph { opacity: 0; }
/* light globe: land dots on a 2D canvas, drawn from the first frame; it hands over to the WebGL globe */
.cn-globe__lite { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity 1.4s var(--ease-out); }
.cn-globe[data-state="ready"] .cn-globe__lite { opacity: 0; }
.cn-globe__canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.4s var(--ease-out); }
.cn-globe[data-state="ready"] .cn-globe__canvas { opacity: 1; }
.cn-globe[data-state="fallback"] .cn-globe__canvas { display: none; }
.cn-globe__pins { position: absolute; inset: 0; pointer-events: none; }
.cn-pin { position: absolute; left: 0; top: 0; width: 20px; height: 20px; padding: 0; border-radius: 50%; opacity: 0; pointer-events: none; will-change: transform, opacity; cursor: pointer;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.92), 0 6px 16px rgba(0,0,0,.55); transition: box-shadow .35s var(--ease); }
.cn-pin { display: block; border: 0; line-height: 0; background: #fff; overflow: hidden; }
.cn-pin .cn-flag { display: block; width: 100%; height: 100%; }
.cn-pin.is-live { pointer-events: auto; }
.cn-pin:hover { box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(166,144,255,.28), 0 8px 20px rgba(0,0,0,.55); }
.cn-pin.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(166,144,255,.38), 0 0 28px 6px rgba(122,90,248,.45); }
.cn-globe__label { position: absolute; left: 0; top: 0; z-index: 600; display: flex; align-items: center; gap: 9px; padding: 6px 14px 6px 6px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  background: rgba(22,16,38,.78); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 14px 40px -12px rgba(0,0,0,.7);
  font-size: 13.5px; color: var(--snow); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease); }
.cn-globe__label.is-on { visibility: visible; }
.cn-globe__label b { font-weight: 600; }
.cn-globe__label > span:last-child { color: var(--snow-3); }
.cn-globe__lflag .cn-flag { width: 22px; height: 22px; display: block; }
.cn-globe__hint { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--snow-4); animation: cn-hint .8s var(--ease) 1.6s both; }
@keyframes cn-hint { from { opacity: 0; } to { opacity: 1; } }
.cn-globe__hint .ic { width: 14px; height: 14px; }

/* language dock (Revolut-style rounded bar) */
.cn-langs { grid-area: langs; justify-self: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 6px; border-radius: 999px; max-width: 100%;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 60px -30px rgba(0,0,0,.8); }
.cn-lang { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 12px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--snow-2); white-space: nowrap; transition: background .25s, color .25s, transform .3s var(--ease); }
.cn-lang:hover { background: rgba(255,255,255,.08); color: var(--snow); }
.cn-lang.is-on { background: #fff; color: #0A0A0F; box-shadow: 0 6px 18px -6px rgba(0,0,0,.6); }
.cn-lang:active { transform: scale(.97); }

/* ---------- Beyond Discord (paper) ---------- */
.cn-more .container { position: relative; }
.cn-more__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: stretch; }
.cn-co { position: relative; overflow: hidden; isolation: isolate; border-radius: 34px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); min-height: 480px;
  background: radial-gradient(90% 80% at 85% 20%, rgba(33,117,235,.34), transparent 60%), linear-gradient(160deg, #0C1834, #070E1F 55%, #05080F); color: var(--snow);
  box-shadow: 0 40px 80px -40px rgba(8,20,60,.55), 0 0 0 1px rgba(255,255,255,.06) inset; }
.cn-co__text { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; padding: clamp(28px, 3.4vw, 48px); }
.cn-brandline { display: flex; align-items: center; gap: 14px; }
.cn-brandline b { display: block; font-family: var(--f-display); font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.cn-brandline span { display: block; font-size: 13px; color: var(--snow-3); }
.cn-brandline .badge { margin-left: 4px; }
.cn-co__title { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.08; max-width: 420px; }
.cn-co .t-body { max-width: 400px; }
.cn-co .btn-row { margin-top: 6px; }
.cn-co .btn--ink, [data-theme="night"] .cn-co .btn--ink { background: #fff; color: #0A0A0F; }
.cn-co .btn--ink .ic { color: #0A0A0F; }
.cn-co .btn--ink:hover, [data-theme="night"] .cn-co .btn--ink:hover { background: #E4EEFF; }
.cn-co .btn--line { border-color: rgba(255,255,255,.2); color: var(--snow); }
.cn-co .btn--line:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.05); }
.cn-co .btn .ic-si-googleplay { width: 17px; height: 17px; }
.cn-co__site { margin-top: 2px; font-size: 14px; color: var(--snow-3) !important; font-weight: 500; }
.cn-co__site:hover { color: var(--snow) !important; }
.cn-co__stage { position: relative; perspective: 1400px; min-height: 360px; container-type: inline-size; }
.cn-co__glow { position: absolute; left: 50%; top: 40%; width: 420px; height: 420px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(33,117,235,.5), transparent 65%); filter: blur(20px); pointer-events: none; }
.cn-phone { --pw: min(280px, 88cqi); position: absolute; left: 50%; top: 50%; width: var(--pw); height: auto; margin: 0 0 0 calc(var(--pw) / -2); padding: 10px 10px 0; border-radius: 44px 44px 0 0; translate: 0 -50%; background: linear-gradient(145deg, #2B3142, #0B0D14 40%, #1A1E2A);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 30px 60px -30px rgba(33,117,235,.45);
  -webkit-mask-image: linear-gradient(180deg, #000 64%, transparent 99%); mask-image: linear-gradient(180deg, #000 64%, transparent 99%);
  transform: rotateY(-14deg) rotateX(6deg); transform-origin: 50% 30%; transition: transform .9s var(--ease-out); will-change: transform; }
/* one real capture in two slices: the #CryptoOnly app bar (rows 100-400), then the feed from the second post (rows 773-1920) */
.cn-phone__screen { display: flex; flex-direction: column; aspect-ratio: 1080 / 1447; border-radius: 34px 34px 0 0; overflow: hidden; background: #191B22; }
.cn-phone__bar, .cn-phone__feed { display: block; flex: none; overflow: hidden; }
.cn-phone__bar { aspect-ratio: 1080 / 300; }
.cn-phone__feed { aspect-ratio: 1080 / 1147; }
.cn-phone__screen img { display: block; width: 100%; height: auto; }
.cn-phone__bar img { margin-top: -9.259%; }
.cn-phone__feed img { margin-top: -71.574%; }
/* News card: the latest article with its real cover, two more, the newsletter */
.cn-news .bezel__in { display: flex; flex-direction: column; gap: 22px; height: 100%; padding: clamp(24px, 2.8vw, 40px); }
.cn-news__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 20px; }
.cn-news h3 { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.08; }
.cn-news__read { display: grid; gap: 4px; }
/* the lead article: cover on top in a narrow card, cover beside the title when the card is wide enough */
.cn-lead { display: block; container-type: inline-size; padding-bottom: 14px; }
.cn-lead__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.cn-lead__img { display: block; aspect-ratio: 16 / 9; margin-bottom: 6px; border-radius: 14px; overflow: hidden; background: #0A0713; box-shadow: 0 0 0 1px var(--line), 0 16px 34px -20px rgba(11,10,18,.55); }
.cn-lead__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cn-lead__meta { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.cn-lead__meta span { color: var(--violet-3); }
@container (min-width: 420px) {
  .cn-lead__in { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: 6px 18px; align-items: center; }
  .cn-lead__img { grid-row: span 2; margin-bottom: 0; }
  .cn-lead__meta { align-self: end; }
}
.cn-lead__t { align-self: start; font-family: var(--f-display); font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.012em; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s; }
.cn-lead:hover .cn-lead__t { color: var(--violet-3); }
.cn-news__sub { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.cn-news__sub .subscribe { max-width: none; }

/* ---------- social accounts matrix (night) ---------- */
.cn-acc { overflow: clip; }
.cn-acc::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 45% at 50% 0%, rgba(122,90,248,.22), transparent 70%); }
.cn-acc .container { position: relative; }
/* one card per brand: its own X banner, then only the networks it really has (no empty cells) */
.cn-accts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cn-acct { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 26px;
  background: linear-gradient(180deg, #120E1C, #0A0811); border: 1px solid var(--nline); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 40px 80px -50px rgba(0,0,0,.9);
  transition: border-color .35s, box-shadow .5s var(--ease); }
.cn-acct:hover { border-color: color-mix(in srgb, var(--bc) 42%, rgba(255,255,255,.1)); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 40px 90px -44px color-mix(in srgb, var(--bc) 55%, transparent); }
.cn-acct__banner { position: relative; display: block; aspect-ratio: 4 / 1; overflow: hidden; border-radius: 25px 25px 0 0; background: #0A0811; }
.cn-acct__banner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.cn-acct__banner:focus-visible { outline: 2px solid var(--violet-2); outline-offset: -2px; }
/* KcalbApp: its official icon + the KCALBAPP wordmark, laid out like the other brands' X banners (icon, bar, name, line) */
.cn-kab { container-type: inline-size; display: grid; place-items: center; isolation: isolate;
  background: radial-gradient(48% 90% at 24% 12%, rgba(96,44,170,.62), transparent 70%), radial-gradient(40% 70% at 88% 100%, rgba(74,24,140,.45), transparent 70%), linear-gradient(180deg, #1C0C33, #12071F 70%, #0E0619); }
.cn-kab__lock { display: flex; align-items: center; gap: 4.6cqi; transform: translateY(-4%); }
.cn-kab .cn-kab__ic { display: block; flex: none; width: 13.4cqi; height: 13.4cqi; object-fit: contain; border-radius: 3.2cqi; box-shadow: 0 1.6cqi 4cqi -1cqi rgba(0,0,0,.6), 0 0 5cqi -1cqi rgba(160,130,255,.45); }
.cn-kab__bar { width: 1px; height: 12cqi; background: linear-gradient(180deg, transparent, rgba(220,210,255,.5), transparent); }
.cn-kab__txt b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 5.6cqi; line-height: 1; letter-spacing: .19em; margin-right: -.2em;
  background: linear-gradient(95deg, #E6E4F2 0%, #FFFFFF 38%, #D1D3FF 66%, #9F9FFD 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cn-kab__txt small { display: block; margin-top: 1.7cqi; font-size: 2.2cqi; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(222,216,255,.72); }
.cn-kab__line { position: absolute; left: 16%; right: 16%; bottom: 13%; height: 1px; background: linear-gradient(90deg, transparent, rgba(185,170,255,.8) 30%, rgba(210,200,255,.9) 50%, rgba(185,170,255,.8) 70%, transparent); box-shadow: 0 0 10px rgba(160,130,255,.6); }
.cn-acct__body { container-type: inline-size; padding: 20px 22px 22px; }
.cn-acct__id { display: none; }
.cn-acct__nets { display: flex; justify-content: center; gap: 6px; }
.cn-acct__net { --s: min(48px, calc((100cqi - 42px) / 8)); position: relative; flex: none; width: var(--s); height: var(--s); border-radius: 13px; display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.11); box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: background .25s, color .25s, transform .35s var(--ease), box-shadow .35s, border-color .25s; }
.cn-acct__net svg, .cn-acct__net .cn-co-glyph { width: 19px; height: 19px; }
.cn-acct__net:hover, .cn-acct__net:focus-visible { background: #fff; color: #0A0A0F; border-color: #fff; transform: translateY(-3px); box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--bc) 80%, transparent), 0 0 0 4px color-mix(in srgb, var(--bc) 22%, transparent); }
.cn-acct__net::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 4px); padding: 6px 10px; border-radius: 9px; background: #fff; color: #0A0A0F;
  font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .3s var(--ease); box-shadow: 0 10px 24px -8px rgba(0,0,0,.6); z-index: 5; }
.cn-acct__net:hover::after { opacity: 1; transform: translate(-50%, 0); }

/* the newsletter already sits in the News card of this page: the footer does not repeat it here */
body[data-page="community"] .site-footer .foot-news { display: none; }

/* ---------- closing ---------- */
.cn-end .cta-room .btn-row { margin-top: 8px; }
.cn-end .cta-room .btn--glass { color: #fff; }
.cn-end .cta-room .ic-si-discord { width: 18px; height: 18px; }

/* ================================================================================================
   CONTACT
   ================================================================================================ */
.cn-ct__hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 44px clamp(40px, 5vw, 88px); align-items: center; }
.cn-ct__head { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; min-width: 0; }
.cn-ct__head .t-display { font-size: clamp(40px, 5.2vw, 78px); line-height: 1.02; padding-bottom: calc(.04em + var(--gt-b)); }
.cn-ct__head .t-lead { max-width: 520px; }
.cn-lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; min-width: 0; }
.cn-line { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; grid-template-areas: "ic lab lab" "val val act" "note note note";
  align-items: center; gap: 18px 12px; padding: 22px; border-radius: 22px; min-width: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 1px solid var(--nline); box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color .3s, transform .45s var(--ease), background .3s; }
.cn-line:hover { border-color: var(--nline-2); transform: translateY(-3px); }
.cn-line__ic { grid-area: ic; }
.cn-line__label { grid-area: lab; min-width: 0; }
.cn-line__value { grid-area: val; font-family: var(--f-display); font-weight: 600; font-size: 17px; line-height: 1.3; letter-spacing: -.01em; color: var(--snow); -webkit-user-select: all; user-select: all; overflow-wrap: anywhere; min-width: 0; }
.cn-line__act { grid-area: act; display: flex; }
.cn-line__note { grid-area: note; align-self: end; font-size: 13.5px; line-height: 1.5; color: var(--snow-3); }
/* Discord: same white glyph in a glass square as the others; the blue lives only in the card itself */
.cn-line--discord { background: linear-gradient(160deg, rgba(88,101,242,.24), rgba(88,101,242,.05) 70%); border-color: rgba(120,132,255,.3); }
.cn-line--discord:hover { border-color: rgba(140,150,255,.6); }
.cn-line--discord .cn-line__value { -webkit-user-select: none; user-select: none; }
.cn-line__go { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #0A0A0F; flex: none; transition: transform .35s var(--ease); }
.cn-line__go svg { width: 16px; height: 16px; }
.cn-line--discord:hover .cn-line__go { transform: translate(2px, -2px); }

/* form + office */
.cn-ct .container { position: relative; }
.cn-ct__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 28px; align-items: start; }
.cn-formcard .bezel__in { padding: clamp(22px, 3.4vw, 48px); }
.cn-form { display: grid; gap: 22px; }
.cn-form__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.cn-form label b, .cn-form legend b { color: var(--violet-3); font-weight: 600; }
.cn-form__head .t-xs b { color: var(--violet-3); }
.cn-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cn-reasons { border: 0; padding: 0; margin: 0; min-width: 0; }
.cn-reasons legend { padding: 0; margin-bottom: 12px; }
.cn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cn-chip { position: relative; }
.cn-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cn-chip span { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper-2); font-size: 14px; font-weight: 500; color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease); }
.cn-chip span .ic { width: 16px; height: 16px; color: var(--ink-3); transition: color .2s; }
.cn-chip em { font-style: normal; }
.cn-chip__s { display: none; }
.cn-office__row small { display: block; font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }
.cn-chip:hover span { border-color: var(--ink-4); }
.cn-chip input:checked + span { background: #0A0A0F; border-color: #0A0A0F; color: #fff; box-shadow: 0 8px 20px -10px rgba(10,10,15,.55); }
.cn-chip input:checked + span .ic { color: #fff; }
[data-theme="night"] .cn-chip input:checked + span { background: #fff; border-color: #fff; color: #0A0A0F; box-shadow: 0 10px 24px -12px rgba(0,0,0,.8); }
[data-theme="night"] .cn-chip input:checked + span .ic { color: #0A0A0F; }
.cn-chip input:focus-visible + span { outline: 2px solid var(--violet); outline-offset: 3px; }
.cn-chip:active span { transform: scale(.98); }
.cn-hint { height: 0; overflow: hidden; transition: height .4s var(--ease); }
.cn-hint__in { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 16px; border-radius: 14px; background: var(--violet-soft); color: #3A2391; font-size: 14px; line-height: 1.5; }
[data-theme="night"] .cn-hint__in { color: #DCD3FF; }
.cn-hint__in > .ic { width: 18px; height: 18px; flex: none; }
.cn-hint__in > span { flex: 1 1 220px; }
.cn-brandsel { position: relative; }
.cn-brandsel__ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 8px; overflow: hidden; pointer-events: none; display: grid; place-items: center; color: var(--ink-3); }
.cn-brandsel__ic img { width: 100%; height: 100%; object-fit: cover; }
.cn-brandsel__ic .ic { width: 20px; height: 20px; }
/* Kcalb Ltd: the company mark, thin white pentagon on a black 5px tile (as in the header) */
.cn-brandsel__ic.is-kc { width: 28px; height: 28px; border-radius: 5px; background: #0B0A12; color: #fff; }
.cn-brandsel__ic.is-kc .ic { width: 19px; height: 19px; }
.cn-brandsel .select { padding-left: 50px; cursor: pointer; }
.cn-under { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cn-count { margin-left: auto; font-size: 12.5px; color: var(--ink-4); transition: color .3s; }
.cn-count.is-ok { color: var(--ok); }
.cn-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cn-err-consent { display: none; margin-top: 8px; padding-left: 32px; font-size: 12.5px; color: var(--bad); }
.cn-field.is-error .cn-err-consent { display: block; }
.cn-field.is-error .check input { border-color: var(--bad); }
.cn-form .check { line-height: 1.55; }
.cn-form__foot { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding-top: 4px; }
.cn-form.is-sending .cn-send { opacity: .75; pointer-events: none; }
/* success */
.cn-sent { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; outline: none; padding: clamp(8px, 2vw, 24px) 0; animation: cn-rise .7s var(--ease-out) both; }
.cn-sent__mark { width: 64px; height: 64px; }
.cn-sent__mark circle { fill: var(--ok-soft); stroke: var(--ok); stroke-width: 2; stroke-dasharray: 190; stroke-dashoffset: 190; animation: cn-draw .9s var(--ease-out) .1s forwards; }
.cn-sent__mark path { fill: none; stroke: var(--ok); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: cn-draw .5s var(--ease-out) .7s forwards; }
.cn-sent .t-lead { max-width: 520px; }
.cn-sent__sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; width: 100%; margin: 6px 0 4px; border-radius: 18px; overflow: hidden; background: var(--line); border: 1px solid var(--line); }
.cn-sent__sum > div { background: var(--paper); padding: 16px 18px; min-width: 0; }
.cn-sent__sum dt { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.cn-sent__sum dd { margin: 6px 0 0; font-weight: 600; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
@keyframes cn-draw { to { stroke-dashoffset: 0; } }
@keyframes cn-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* office card */
.cn-aside { position: sticky; top: calc(var(--header-h) + 24px); }
.cn-office { border-radius: 34px; background: var(--paper-2); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow-2); }
.cn-office__map { position: relative; height: 210px; overflow: hidden; background: radial-gradient(120% 100% at 50% 30%, #1A1230, #0A0713 70%); }
.cn-office__dots { position: absolute; width: 1040px; height: 396px; left: calc(40% - 417px); top: calc(50% - 80px); background: linear-gradient(120deg, #B9A8FF, #7A5AF8 60%, #5E3FE6);
  -webkit-mask: url(assets/bg/world-map-contact.webp) 0 0 / 1040px 396px no-repeat; mask: url(assets/bg/world-map-contact.webp) 0 0 / 1040px 396px no-repeat; opacity: .8; }
.cn-office__map::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 80% at 50% 50%, transparent 35%, #0A0713 92%); }
.cn-office__pin { position: absolute; z-index: 2; left: 40%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(166,144,255,.45), 0 0 26px 8px rgba(166,144,255,.55); }
.cn-office__body { padding: 6px 24px 10px; }
.cn-office__row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cn-office__row:last-child { border-bottom: 0; }
.cn-office__row--copy { position: relative; grid-template-columns: 40px minmax(0, 1fr); }
.cn-office__row--copy .t-label { padding-right: 48px; }
.cn-office__row--copy .cn-copy { position: absolute; right: 0; top: 16px; }
.cn-office__row address, .cn-office__row p { font-style: normal; font-size: 15px; line-height: 1.55; color: var(--ink); margin-top: 6px; }

/* before you write */
.cn-before__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.cn-before__head { position: sticky; top: calc(var(--header-h) + 32px); align-items: flex-start; }

/* ================================================================================================
   QUESTIONS (FAQ page + contact)
   ================================================================================================ */
.cn-qlist { display: flex; flex-direction: column; }
.cn-q { border-bottom: 1px solid var(--line); transition: background .6s; }
.cn-q:last-child { border-bottom: 0; }
.cn-q summary { list-style: none; display: grid; grid-template-columns: 30px minmax(0, 1fr) 36px; gap: 14px; align-items: center; padding: 22px 4px; cursor: pointer; border-radius: 14px; }
.cn-q summary::-webkit-details-marker { display: none; }
.cn-q__n { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--violet-3); }
.cn-q__t { font-family: var(--f-display); font-size: 18.5px; font-weight: 600; line-height: 1.35; letter-spacing: -.015em; color: var(--ink); text-wrap: pretty; transition: color .25s; }
.cn-q summary:hover .cn-q__t { color: var(--violet-3); }
.cn-q__i { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--ink-2); transition: transform .45s var(--ease), background .3s, color .3s, border-color .3s; }
.cn-q__i svg { width: 16px; height: 16px; }
.cn-q summary:hover .cn-q__i { border-color: var(--ink-3); }
.cn-q[open]:not(.is-closing) .cn-q__i { transform: rotate(45deg); background: #0A0A0F; color: #fff; border-color: #0A0A0F; }
[data-theme="night"] .cn-q[open]:not(.is-closing) .cn-q__i { background: #fff; color: #0A0A0F; border-color: #fff; }
.cn-q__body { overflow: hidden; transition: height .45s var(--ease); }
.cn-q__in { display: grid; gap: 14px; padding: 0 50px 26px 48px; max-width: 800px; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.cn-ticks { list-style: none; padding: 0; margin: 2px 0 0; display: grid; gap: 8px; }
.cn-ticks li { display: flex; gap: 10px; align-items: flex-start; }
.cn-ticks li .ic { width: 20px; height: 20px; flex: none; margin-top: 3px; padding: 4px; border-radius: 50%; background: var(--violet-soft); color: var(--violet-3); stroke-width: 2.4; }
.cn-q__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 4px; }
.cn-q__share { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 100%; }
.cn-callout { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 10px 14px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); font-size: 14px; line-height: 1.45; transition: border-color .25s; }
.cn-callout > span { color: var(--ink-3); }
.cn-callout b { display: inline-flex; align-items: center; gap: 6px; color: var(--violet-3); font-weight: 600; }
.cn-callout b .ic { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.cn-callout:hover { border-color: var(--violet-2); background: var(--paper-2); }
.cn-callout:hover b .ic { transform: translateX(3px); }
.cn-q__link { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; margin-left: -10px; border-radius: 9px; font-size: 12.5px; color: var(--ink-4); }
.cn-q__link .ic { width: 14px; height: 14px; }
.cn-q__link:hover { color: var(--ink); background: var(--paper); }
.cn-q__link.is-done { color: var(--ok); }
/* the link itself: hidden, shown (and selected) only when the browser refuses to copy */
.cn-q__url { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cn-q__url.is-shown { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: block; max-width: 100%; padding: 8px 12px; border-radius: 10px;
  background: var(--paper); border: 1px solid var(--line-2); font-family: var(--f-mono); font-size: 12px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
.cn-q mark { background: rgba(122,90,248,.18); color: inherit; border-radius: 3px; box-shadow: 0 0 0 2px rgba(122,90,248,.18); }
.cn-q.is-target { background: var(--violet-soft); border-radius: 14px; }

/* ================================================================================================
   FAQ
   ================================================================================================ */
.cn-hero--fq { padding-bottom: clamp(48px, 6vw, 84px); }
.cn-hero--fq .bg-beam { background: radial-gradient(44% 72% at 50% -12%, rgba(160,120,255,.5), rgba(110,60,240,.14) 50%, transparent 78%); }
.cn-fq__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; max-width: 860px; }
.cn-fq__head .t-display { font-size: clamp(44px, 6vw, 88px); padding-bottom: calc(.04em + var(--gt-b)); }
.cn-fq__head .t-lead { max-width: 520px; }
.cn-search { position: relative; width: min(100%, 640px); margin-top: 12px; }
.cn-search input { width: 100%; height: 64px; border-radius: 999px; padding: 0 64px 0 58px; font-size: 17px; color: var(--snow); -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px -24px rgba(122,90,248,.55), inset 0 1px 0 rgba(255,255,255,.08); transition: border-color .25s, background .25s, box-shadow .3s; }
.cn-search input::placeholder { color: var(--snow-3); }
.cn-search input::-webkit-search-cancel-button, .cn-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.cn-search input:hover { border-color: rgba(255,255,255,.28); }
.cn-search input:focus { outline: none; border-color: var(--violet-2); background: rgba(255,255,255,.1); box-shadow: 0 0 0 4px rgba(166,144,255,.2), 0 24px 60px -24px rgba(122,90,248,.7); }
.cn-search__ic { position: absolute; z-index: 2; left: 22px; top: 50%; transform: translateY(-50%); width: 20px !important; height: 20px !important; color: var(--snow-3); pointer-events: none; }
.cn-search__kbd { position: absolute; z-index: 2; right: 22px; top: 50%; transform: translateY(-50%); min-width: 24px; height: 24px; padding: 0 7px; border-radius: 7px; display: grid; place-items: center; font-family: var(--f-mono); font-size: 12px; color: var(--snow-3); border: 1px solid rgba(255,255,255,.18); pointer-events: none; transition: opacity .2s; }
.cn-searching .cn-search__kbd, .cn-search input:focus ~ .cn-search__kbd { opacity: 0; }
.cn-search__clear { position: absolute; z-index: 2; right: 10px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--snow-2); transition: background .2s; }
.cn-search__clear:hover { background: rgba(255,255,255,.1); color: #fff; }
.cn-search__clear[hidden] { display: none; }
.cn-search__clear .ic { width: 18px; height: 18px; }
.cn-search__status { min-height: 20px; font-size: 13.5px; color: var(--snow-3); margin-top: -4px; }
/* the three topics as glass squares (white glyphs): pick one to filter the answers */
.cn-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(100%, 640px); margin-top: -4px; }
.cn-tile { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; aspect-ratio: 4 / 3; padding: 18px; border-radius: 22px; text-align: left; color: var(--snow);
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.13); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 30px 60px -30px rgba(0,0,0,.85); transition: transform .45s var(--ease), border-color .3s, background .3s, color .3s, opacity .3s; }
.cn-tile b { margin-top: auto; font-family: var(--f-display); font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; }
.cn-tile em { margin-top: 5px; font-style: normal; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--snow-3); transition: color .3s; }
.cn-tile:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.3); }
.cn-tile:active { transform: scale(.98); }
.cn-tile .cn-glass-ic { transition: background .3s, color .3s, border-color .3s; }
.cn-tile.is-on { background: #fff; border-color: #fff; color: #0A0A0F; }
.cn-tile.is-on .cn-glass-ic { background: #0A0A0F; border-color: #0A0A0F; color: #fff; box-shadow: none; }
.cn-tile.is-on em { color: #686874; }
.cn-tile.is-empty { opacity: .4; }

.cn-fq .container { position: relative; }
.cn-fq__grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.cn-topics { position: sticky; top: calc(var(--header-h) + 28px); display: flex; flex-direction: column; gap: 12px; }
.cn-topics__label { padding-left: 10px; }
.cn-topics__list { display: grid; gap: 6px; }
.cn-topic { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; height: 54px; padding: 0 12px 0 8px; border-radius: 16px; border: 1px solid transparent; text-align: left; font-size: 15px; font-weight: 500; color: var(--ink-2); transition: background .25s, box-shadow .3s, border-color .25s, opacity .25s; }
.cn-topic__ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--paper-2); border: 1px solid var(--line); transition: background .25s, color .25s, border-color .25s; }
.cn-topic__ic svg { width: 17px; height: 17px; }
.cn-topic em { font-style: normal; font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); min-width: 28px; height: 24px; padding: 0 8px; border-radius: 99px; display: grid; place-items: center; background: var(--paper-3); }
.cn-topic:hover { background: rgba(11,10,18,.035); }
[data-theme="night"] .cn-topic:hover { background: rgba(255,255,255,.045); }
.cn-topic.is-on { background: var(--paper-2); border-color: var(--line); box-shadow: var(--shadow-2); color: var(--ink); }
.cn-topic.is-on .cn-topic__ic { background: #0A0A0F; color: #fff; border-color: #0A0A0F; }
[data-theme="night"] .cn-topic.is-on .cn-topic__ic { background: #fff; color: #0A0A0F; border-color: #fff; }
.cn-topic.is-on em { background: var(--violet-soft); color: var(--violet-3); }
.cn-topic.is-empty { opacity: .45; }
.cn-topics__ask { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 14px 16px; border-radius: 16px; border: 1px dashed var(--line-2); font-size: 14px; color: var(--ink-2); transition: border-color .25s, color .25s, background .25s; }
.cn-topics__ask > span { flex: 1; }
.cn-topics__ask .ic { width: 17px; height: 17px; }
.cn-topics__ask .ic-arrow-right { transition: transform .3s var(--ease); }
.cn-topics__ask:hover { border-color: var(--ink); color: var(--ink); background: var(--paper-2); }
.cn-topics__ask:hover .ic-arrow-right { transform: translateX(3px); }
.cn-group { scroll-margin-top: calc(var(--header-h) + 24px); }
.cn-group + .cn-group { margin-top: clamp(36px, 4vw, 56px); }
.cn-group__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.cn-group__n { margin-left: auto; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.cn-fq .bezel__in { padding: 4px clamp(14px, 2.4vw, 30px); }
.cn-empty .bezel__in { display: grid; justify-items: center; gap: 14px; padding: 56px 24px; text-align: center; }
.cn-empty .btn-row { justify-content: center; margin-top: 6px; }

/* ================================================================================================
   RESPONSIVE
   ================================================================================================ */
@media (max-width: 1319px) {
  .cn-accts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* below 1320px the Crypto-Only and News cards stack, each at full width */
  .cn-more__grid { grid-template-columns: minmax(0, 1fr); }
}
/* the twelve rooms fit one row only above 1400px; below, two even rows of six (never one flag alone on a second row) */
@media (max-width: 1400px) {
  .cn-langs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-radius: 26px; width: 100%; }
  .cn-lang { justify-content: flex-start; padding: 0 10px; }
}
@media (max-width: 1180px) {
  .cn-ct__hero { grid-template-columns: minmax(0, 1fr); }
  .cn-ct__head .t-lead { max-width: 600px; }
}
/* tablets and small laptops: text and globe stay side by side */
@media (min-width: 901px) and (max-width: 1180px) {
  .cn-cm__title { font-size: clamp(38px, 4.5vw, 60px); }
  .cn-globe { width: min(100%, 420px); margin: -12px 0 -18px; }
}
@media (max-width: 1080px) {
  .cn-ct__grid { grid-template-columns: minmax(0, 1fr); }
  .cn-aside { position: static; }
  .cn-office { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cn-office__map { height: auto; min-height: 240px; }
  .cn-before__grid { grid-template-columns: minmax(0, 1fr); }
  .cn-before__head { position: static; }
}
/* News card under the Crypto-Only card: head on the left, the articles on the right (no full-width text block) */
@media (min-width: 681px) and (max-width: 1319px) {
  .cn-news .bezel__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head head" "lead list" "lead sub"; grid-template-rows: auto auto 1fr; gap: 20px 40px; }
  .cn-news__head { grid-area: head; }
  .cn-news__read { display: contents; }
  .cn-lead { grid-area: lead; padding-bottom: 0; }
  .cn-latest { grid-area: list; align-self: start; }
  .cn-news__sub { grid-area: sub; align-self: end; }
}
@media (max-width: 900px) {
  .cn-cm { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "globe" "langs"; }
  .cn-cm__text { max-width: 640px; }
  .cn-globe { width: min(100%, 560px); }
  /* FAQ topics: a sticky row of chips you can swipe, always at hand */
  .cn-fq__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .cn-topics { position: sticky; top: var(--header-h); z-index: 20; height: 64px; margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter);
    background: rgba(245,245,249,.9); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); box-shadow: 0 1px 0 var(--line), 0 12px 24px -20px rgba(11,10,18,.35);
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: top .45s var(--ease), opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s; }
  .cn-topics.is-stuck { opacity: 1; visibility: visible; transform: none; transition: top .45s var(--ease), opacity .3s var(--ease), transform .3s var(--ease), visibility 0s; }
  html:has(.site-header.is-hidden) .cn-topics { top: 0; }
  .cn-fq.section { padding-top: 24px; }
  .cn-topics__label, .cn-topics__ask { display: none; }
  .cn-topics__list { display: flex; gap: 8px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .cn-topics__list.has-more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
  .cn-topics__list::-webkit-scrollbar { display: none; }
  .cn-topics__list::after { content: ""; flex: none; width: 12px; }
  .cn-topic { flex: none; height: 44px; grid-template-columns: auto auto; gap: 10px; padding: 0 8px 0 16px; border-radius: 999px; border-color: var(--line-2); background: var(--paper-2); white-space: nowrap; }
  .cn-topic__ic { display: none; }
  .cn-topic.is-on { background: #0A0A0F; border-color: #0A0A0F; color: #fff; box-shadow: none; }
  .cn-topic.is-on em { background: rgba(255,255,255,.16); color: #fff; }
  .cn-topic:hover, [data-theme="night"] .cn-topic:hover { background: var(--paper-2); }
  .cn-topic.is-on:hover { background: #0A0A0F; }
  [data-theme="night"] .cn-topic.is-on, [data-theme="night"] .cn-topic.is-on:hover { background: #fff; border-color: #fff; color: #0A0A0F; }
  [data-theme="night"] .cn-topic.is-on em { background: rgba(10,10,15,.08); color: #0A0A0F; }
  [data-theme="night"] .cn-topics { background: rgba(9,7,14,.86); box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 14px 28px -20px rgba(0,0,0,.9); }
}
@media (max-width: 760px) {
  .cn-co { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .cn-co__stage { min-height: 380px; }
  .cn-phone { --pw: min(250px, 80cqi); top: 28px; translate: none; transform: rotateY(-10deg) rotateX(4deg); }
  .cn-co .btn-row .btn { flex: 1 1 auto; }
  .cn-end .cta-room .btn-row { width: 100%; max-width: 360px; }
  .cn-end .cta-room .btn-row .btn { flex: 1 1 100%; }
  .cn-sent__sum { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  /* contact lines: one compact 64px row each (icon, label + address, copy / arrow) */
  .cn-lines { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cn-line { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-rows: auto auto; grid-template-areas: "ic lab act" "ic val act"; gap: 2px 12px; min-height: 64px; padding: 10px 12px; border-radius: 18px; }
  .cn-line:hover { transform: none; }
  .cn-line__label { align-self: end; font-size: 10px; }
  .cn-line__value { align-self: start; font-size: 15.5px; line-height: 1.3; }
  .cn-line__act { align-self: center; }
  .cn-line__note { display: none; }
  .cn-sent .btn-row { width: 100%; }
  .cn-office { grid-template-columns: minmax(0, 1fr); }
  .cn-office__map { min-height: 200px; }
  .cn-news .bezel__in { gap: 20px; }
  .cn-sent .btn-row .btn { width: 100%; }
  /* brand accounts: one row per brand, icon-only buttons in one glass bar */
  .cn-accts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cn-acct { border: 0; border-bottom: 1px solid var(--nline); border-radius: 0; background: none; box-shadow: none; }
  .cn-acct:first-child { border-top: 1px solid var(--nline); }
  .cn-acct:hover { border-color: var(--nline); box-shadow: none; }
  .cn-acct__banner { display: none; }
  .cn-acct__body { display: grid; gap: 12px; padding: 16px 0; }
  .cn-acct__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .cn-acct__id b { display: block; font-family: var(--f-display); font-size: 16px; font-weight: 600; letter-spacing: -.015em; color: var(--snow); }
  .cn-acct__id small { display: block; font-size: 12.5px; color: var(--snow-3); margin-top: 1px; }
  .cn-acct__nets { justify-content: flex-start; gap: 0; width: max-content; max-width: 100%; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.11); }
  .cn-acct__net { --s: calc((100cqi - 2px) / 8); width: var(--s); height: 48px; border-radius: 0; background: none; border: 0; border-left: 1px solid rgba(255,255,255,.08); box-shadow: none; }
  .cn-acct__net:first-child { border-left: 0; }
  .cn-acct__net:hover, .cn-acct__net:focus-visible { transform: none; box-shadow: none; }
  .cn-acct__net::after { display: none; }
  /* FAQ hero tiles */
  .cn-tiles { gap: 8px; }
  .cn-tile { aspect-ratio: auto; padding: 12px; border-radius: 18px; }
  .cn-tile .cn-glass-ic { width: 34px; height: 34px; border-radius: 10px; }
  .cn-tile .cn-glass-ic svg { width: 16px; height: 16px; }
  .cn-tile b { margin-top: 16px; font-size: 14px; letter-spacing: -.01em; }
  .cn-tile em { font-size: 10px; letter-spacing: .05em; }
  .cn-row { grid-template-columns: minmax(0, 1fr); }
  .cn-langs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 5px; border-radius: 24px; }
  .cn-lang { height: 44px; padding: 0 8px; gap: 7px; font-size: 13.5px; }
  .cn-lang .cn-flag { width: 18px; height: 18px; }
  .cn-pin { width: 18px; height: 18px; }
  .cn-cm__cta .btn { flex: 1 1 auto; }
  .cn-stats > div { padding: 0 16px; }
  .cn-stats > div:first-child { padding-left: 0; }
  .cn-q summary { grid-template-columns: 24px minmax(0, 1fr) 34px; gap: 10px; padding: 18px 2px; }
  .cn-q__t { font-size: 16.5px; }
  .cn-q__i { width: 34px; height: 34px; }
  .cn-q__in { padding: 0 2px 22px 34px; font-size: 15.5px; }
  .cn-fq .bezel { padding: 6px; border-radius: 26px; }
  .cn-fq .bezel > .bezel__in { border-radius: 20px; }
  .cn-search input { height: 58px; font-size: 16px; padding-left: 52px; }
  .cn-search__kbd { display: none; }
  .cn-hero--fq { padding-bottom: 40px; }
  .cn-form__foot .btn { width: 100%; }
  .cn-chips { gap: 6px; }
  .cn-chip span { padding: 0 14px 0 12px; font-size: 14px; }
  .cn-chip__l { display: none; }
  .cn-chip__s { display: inline; }
  .cn-office__body { padding: 4px 18px 8px; }
  .cn-copy { width: 44px; height: 44px; border-radius: 12px; }
  /* phones: show the whole beam (its dark sides too) instead of a close-up of its bright core */
  .cn-beam { background-size: 175% auto; opacity: .75; }
  .cn-office__row--copy .cn-copy { top: 12px; }
  .cn-office__row--copy .t-label { padding-right: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .cn-globe__hint { animation: none; }
  .cn-phone { transition: none; }
}
/* Crypto-Only card is a dark stage inside a paper section: paint its components explicitly */
.cn-co .t-body { color: var(--snow-2); }
.cn-co .badge--live { background: rgba(22,163,106,.18); color: #6FE3AE; }
/* the two articles under the lead */
.cn-latest { list-style: none; padding: 0; margin: 0; display: grid; border-top: 1px solid var(--line); }
.cn-latest a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink); transition: color .2s; }
.cn-latest li:last-child a { border-bottom: 0; }
.cn-latest a span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cn-latest time { flex: none; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--ink-4); text-transform: uppercase; }
.cn-latest a:hover { color: var(--violet-3); }

/* ================================================================================================
   DARK MODE (html[data-mode="dark"]: the paper/white sections of these pages run as night surfaces)
   ================================================================================================ */
/* the deep violet (#5E3FE6) is too dark to read on a night surface: its light tint takes over */
[data-was].cn-more, [data-was].cn-ct, [data-was].cn-before, [data-was].cn-fq, [data-was].cn-end { --violet-3: #B6A6FF; }
[data-was] .cn-q.is-target { background: rgba(122,90,248,.12); }
[data-was] .cn-office { background: #100D17; border-color: rgba(255,255,255,.09); }
[data-was] .cn-brandsel__ic.is-kc { box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
[data-was] .cn-q mark { background: rgba(166,144,255,.28); box-shadow: 0 0 0 2px rgba(166,144,255,.28); }

/* ==== pages/home.css ==== */
/* ================= HOME (#home) — prefix hm- ================= */

/* ---------- 1. HERO ---------- */
.hm-hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; max-height: 980px; overflow: clip; isolation: isolate; background: #06050D; }
.hm-hero__beam { position: absolute; inset: 0; z-index: -3; background: url(assets/bg/hero-beam.webp) center top / cover no-repeat; transform-origin: 50% 0; animation: hm-beam 2.2s var(--ease-out) backwards; }
.hm-hero__beam::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 55% at 50% 0%, rgba(160,120,255,.16), transparent 70%), linear-gradient(180deg, transparent 55%, rgba(2,1,4,.55) 85%, #020104); }
@keyframes hm-beam { from { opacity: .2; transform: scale(1.08) translateY(-3%); filter: saturate(.7); } 60% { opacity: 1; } to { opacity: 1; transform: none; filter: none; } }
.hm-dust { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
.hm-hero__floor { position: absolute; left: 50%; bottom: 0; z-index: -2; width: var(--floor-w); height: var(--floor-h); transform: translateX(-50%); background: url(assets/bg/shape-light.svg) center bottom / 100% 100% no-repeat; opacity: .22;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%); mask-image: linear-gradient(180deg, transparent, #000 70%); }
.hm-hero__pool { position: absolute; left: 50%; bottom: -120px; z-index: -2; width: min(1100px, 120vw); height: 300px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(122,90,248,.36), rgba(122,90,248,.10) 60%, transparent); pointer-events: none; }
.hm-hero__in { position: relative; height: 100%; display: grid; grid-template-rows: 1fr auto; padding-top: var(--header-h); padding-bottom: clamp(26px, 4.4vh, 44px); }
.hm-hero__center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: clamp(26px, 4.2vh, 40px); padding-bottom: 2vh; will-change: transform, opacity; }
.hm-word { margin: 0; padding: 0; line-height: 0; --hw: min(46.2vw, 658px); display: flex; align-items: flex-end; gap: calc(var(--hw) * .028); } /* the drawn KCALB: no room needed, and none added */
/* Thomas 28/09 (choice B): the chrome KCALB at 70 % of its first size, with the small « LTD » of the header lockup */
.hm-word__ltd { flex: none; margin: 0 -.32em calc(var(--hw) * .004) 0; font-family: var(--f-mono); font-weight: 600; font-size: max(10px, calc(var(--hw) * .034)); letter-spacing: .32em; line-height: 1;
  background: linear-gradient(180deg, #FCFCFF 0%, #D3D3DE 45%, #8E8EA0 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 14px rgba(20, 6, 60, .5)); animation: hm-rise 1.25s var(--ease-out) .3s both; }
.hm-word__svg { flex: none; width: var(--hw); height: auto; overflow: visible; filter: drop-shadow(0 18px 40px rgba(20, 6, 60, .55)); animation: hm-rise 1.25s var(--ease-out) .12s both; }
@keyframes hm-rise { from { opacity: 0; transform: translateY(28px) scale(.965); filter: blur(12px) drop-shadow(0 18px 40px rgba(20,6,60,0)); } to { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 18px 40px rgba(20, 6, 60, .55)); } }
.hm-word__sheen { transform: translateX(-10px); opacity: 0; }
.hm-word__svg.is-sweep .hm-word__sheen { animation: hm-sweep 1.7s cubic-bezier(.45, .05, .25, 1) both; }
@keyframes hm-sweep { 0% { transform: translateX(-10px) skewX(-24deg); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(280px) skewX(-24deg); opacity: 0; } }

.hm-ccc { list-style: none; margin: 0; padding: 12px 30px; display: inline-flex; align-items: center; gap: clamp(22px, 3.4vw, 48px); border-radius: var(--r-pill);
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 0 14px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.06), 0 20px 50px -20px rgba(0,0,0,.8);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); animation: hm-in .9s var(--ease-out) .45s backwards; }
.hm-ccc li { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 500; letter-spacing: .005em; color: rgba(246,244,251,.86); }
.hm-ccc .ic { width: 16px; height: 16px; color: var(--violet-2); stroke-width: 2.4; }
.hm-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; animation: hm-in .9s var(--ease-out) .6s backwards; }
.hm-hero__ctas .btn { --bh: 54px; padding: 0 28px; }
@keyframes hm-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.hm-strip { display: flex; flex-direction: column; align-items: center; gap: 14px; will-change: transform, opacity; animation: hm-in 1s var(--ease-out) .75s backwards; }
.hm-strip__label { font-family: var(--f-display); font-size: 14px; font-weight: 500; letter-spacing: .01em; color: var(--snow-3); transition: opacity .2s; }
/* the name tooltip opens above the icon (never into the hero's bottom edge); the label steps aside meanwhile */
.hm-strip:has(.hm-strip__icon:hover, .hm-strip__icon:focus-visible) .hm-strip__label { opacity: 0; }
.hm-strip__label b { font-weight: 600; background: linear-gradient(95deg, #D6DCEA, #FFFFFF 40%, #D1D3FF 70%, #9F9FFD); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hm-strip__row { list-style: none; margin: 0; padding: 7px; display: flex; gap: 8px; border-radius: 22px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.hm-strip__icon { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; transition: transform .35s var(--ease), background .3s; }
.hm-strip__icon img { width: 40px; height: 40px; border-radius: 9px; box-shadow: 0 6px 16px -6px rgba(0,0,0,.7); }
.hm-strip__icon:hover, .hm-strip__icon:focus-visible { transform: translateY(-5px); background: rgba(255,255,255,.06); }
.hm-strip__icon::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 6px); padding: 6px 11px; border-radius: 9px; background: #fff; color: #0A0A0F;
  font-size: 12.5px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .3s var(--ease); box-shadow: 0 10px 24px -8px rgba(0,0,0,.6); }
.hm-strip__icon:hover::after, .hm-strip__icon:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 2. COMPANY (paper room) ---------- */
.hm-co { position: relative; overflow: clip; padding: clamp(110px, 12vw, 176px) 0 clamp(80px, 8vw, 120px); }
.hm-co .room-top { opacity: .7; }
/* the ceiling under the hero = the hero's floor, upside down, same width and height: the lines of one carry on into the
   other across the seam (Thomas 28/09: « la perspective en bas n'est pas alignée avec celle du haut »). Keep both in step. */
.hm-hero__floor, .hm-co .room-top { --floor-w: max(1700px, 125%); --floor-h: 250px; }
.hm-co .room-top { width: var(--floor-w); height: var(--floor-h); background: url(assets/bg/shape-light.svg) center bottom / 100% 100% no-repeat;
  transform: translateX(-50%) scaleY(-1); filter: invert(1); opacity: .45;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%); mask-image: linear-gradient(180deg, transparent, #000 70%); }
/* dark mode: the section turns night, so the ceiling keeps the floor's own white lines at the floor's strength */
.hm-co[data-was] .room-top { filter: none; opacity: .22; }
.hm-co__in { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hm-co__head { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 26px; padding-block: 24px; }
.hm-co__title { font-family: var(--f-display); font-weight: 600; font-size: clamp(40px, 5.4vw, 80px); line-height: 1; letter-spacing: -.045em; max-width: 11.5em; color: var(--ink); }
.hm-orbit { position: absolute; z-index: 0; width: var(--os, 80px); height: var(--os, 80px); }
.hm-orbit img { width: 100%; height: 100%; border-radius: 18%; box-shadow: 0 24px 40px -18px rgba(28,16,70,.45), 0 4px 10px -4px rgba(28,16,70,.2); transform: rotate(var(--or, 0deg)); transition: transform .6s var(--ease); }
.hm-orbit--a { --os: 78px; --or: -9deg; left: 3%; top: -26px; }
.hm-orbit--b { --os: 70px; --or: 6deg; left: 9%; top: 150px; }
.hm-orbit--c { --os: 74px; --or: 8deg; right: 4%; top: -12px; }
.hm-orbit--d { --os: 84px; --or: -6deg; right: 10%; top: 160px; }
.hm-co__body { width: 100%; max-width: 980px; margin-top: clamp(44px, 5vw, 72px); display: grid; gap: clamp(26px, 3vw, 38px); }
.hm-co__intro { font-family: var(--f-display); font-weight: 500; font-size: clamp(23px, 2.35vw, 34px); line-height: 1.3; letter-spacing: -.022em; text-wrap: balance; padding-inline: clamp(0px, 4vw, 48px); }
.hm-co__link { margin-top: clamp(32px, 4vw, 48px); }
.hm-co .rail::after { animation-iteration-count: 1; animation-fill-mode: both; animation-play-state: paused; }
.hm-co .rail--rev::after { animation-direction: reverse; animation-delay: .35s; }
.hm-co__body.is-in .rail::after { animation-play-state: running; }

/* ---------- 3. KCALBAPP STAGE (night) ---------- */
.hm-stage { position: relative; overflow: clip; padding: clamp(90px, 10vw, 150px) 0 clamp(64px, 7vw, 100px); isolation: isolate; }
.hm-stage__beam { position: absolute; inset: 0; z-index: -2; background: radial-gradient(50% 38% at 50% 0%, rgba(140,100,255,.22), transparent 75%), radial-gradient(40% 30% at 50% 58%, rgba(94,79,209,.10), transparent 75%); pointer-events: none; }
.hm-stage .hm-dust { z-index: -1; }
.hm-banner-wrap { perspective: 1500px; perspective-origin: 50% 20%; }
.hm-banner { position: relative; margin: 0; border-radius: 18px; overflow: hidden; transform-origin: 50% 80%; will-change: transform; border: 1px solid rgba(185,176,255,.16);
  box-shadow: 0 50px 120px -40px rgba(122,90,248,.55), 0 30px 60px -30px rgba(0,0,0,.9); transform: rotateX(58deg) scale(.86); }
.hm-banner { aspect-ratio: 3 / 1; display: grid; place-items: center; isolation: isolate;
  background: radial-gradient(48% 90% at 24% 12%, rgba(96,44,170,.62), transparent 70%), radial-gradient(40% 70% at 88% 100%, rgba(74,24,140,.45), transparent 70%), linear-gradient(180deg, #1C0C33, #12071F 70%, #0E0619); }
.hm-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(assets/bg/dots.webp) center / 520px auto repeat; opacity: .07; mix-blend-mode: screen; }
.hm-banner__lock { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px); transform: translateY(-4%); }
.hm-banner__mark { width: clamp(46px, 6.4vw, 94px); height: auto; filter: drop-shadow(0 0 22px rgba(170,140,255,.55)); }
.hm-banner__bar { width: 1px; height: clamp(40px, 5.4vw, 80px); background: linear-gradient(180deg, transparent, rgba(220,210,255,.55), transparent); }
.hm-banner__word { font-family: var(--f-display); font-weight: 600; font-size: clamp(34px, 6.4vw, 100px); line-height: 1; letter-spacing: .16em; margin-right: -.16em;
  background: linear-gradient(95deg, #E6E4F2 0%, #FFFFFF 38%, #D1D3FF 66%, #9F9FFD 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hm-banner__line { position: absolute; left: 14%; right: 14%; bottom: 13%; height: 1px; background: linear-gradient(90deg, transparent, rgba(185,170,255,.85) 30%, rgba(210,200,255,.95) 50%, rgba(185,170,255,.85) 70%, transparent); box-shadow: 0 0 14px rgba(160,130,255,.7); }
.hm-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.08) 45%, transparent 60%); opacity: calc(1 - var(--shine, 0)); pointer-events: none; }
.hm-stage__title { margin: clamp(56px, 6vw, 88px) auto clamp(48px, 5vw, 72px); text-align: center; font-family: var(--f-display); font-weight: 600; font-size: clamp(30px, 3.6vw, 54px); line-height: 1.04; letter-spacing: -.04em; max-width: 15em; }

/* bento */
.hm-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px;
  grid-template-areas: "ino ino ino ino ino ino ino co co co co co" "xt xt xt xt ia ia ia ia so so so so" "kc kc kc kc kc sw sw sw sw sw sw sw"; }
.hm-tile--inolah { grid-area: ino; min-height: 580px; }
.hm-tile--crypto-only { grid-area: co; }
.hm-tile--stake-only { grid-area: so; min-height: 320px; }
.hm-tile--xitcoin { grid-area: xt; }
.hm-tile--inoai { grid-area: ia; }
.hm-tile--inoswap { grid-area: sw; min-height: 470px; }
.hm-tile--kcanther { grid-area: kc; }
.hm-tile { --mx: 50%; --my: 0%; position: relative; display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 2.4vw, 32px); border-radius: 28px; overflow: hidden; isolation: isolate; color: var(--snow);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018) 60%), #07050D; border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s; }
.hm-tile::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1.25px; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(460px circle at var(--mx) var(--my), rgba(255,255,255,.95), rgba(196,176,255,.45) 30%, transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.hm-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(560px circle at var(--mx) var(--my), rgba(196,176,255,.07), transparent 55%); }
.hm-tile:hover { transform: translateY(-6px); box-shadow: 0 40px 80px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
.hm-tile:hover::before, .hm-tile:hover::after, .hm-tile:focus-visible::before { opacity: 1; }
.hm-tile__glow { position: absolute; z-index: -1; right: -12%; bottom: -30%; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--bc) 38%, transparent), transparent); filter: blur(20px); opacity: .55; transition: opacity .5s, transform .8s var(--ease); pointer-events: none; }
.hm-tile:hover .hm-tile__glow { opacity: .85; transform: scale(1.08); }
.hm-tile__head { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; padding-right: 44px; }
.hm-tile__icon { width: 44px; height: 44px; border-radius: 10px; flex: none; box-shadow: 0 8px 18px -8px rgba(0,0,0,.8); }
.hm-tile__id { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.hm-tile__name { font-family: var(--f-display); font-weight: 600; font-size: 22px; line-height: 1.15; letter-spacing: -.025em; }
.hm-tile__kind { font-size: 13px; color: var(--snow-3); }
.hm-tile__line { position: relative; z-index: 2; max-width: 36ch; font-size: 15.5px; line-height: 1.55; color: var(--snow-2); text-wrap: balance; }
.hm-tile__go { position: absolute; z-index: 4; top: clamp(24px, 2.4vw, 32px); right: clamp(20px, 2.2vw, 28px); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--snow-2); transition: .35s var(--ease); }
.hm-tile__go .ic { width: 16px; height: 16px; }
.hm-tile:hover .hm-tile__go { background: #fff; color: #0A0A0F; border-color: #fff; transform: rotate(0deg) scale(1.05); }
.hm-tile__meta { position: relative; z-index: 2; display: flex; gap: 8px; margin-top: -4px; }
/* every visual fades out before the tile's edge: nothing inside a tile is ever cut hard by its border */
.hm-tile__art { position: relative; z-index: 1; display: block; margin-top: auto; pointer-events: none; --fade: 78%;
  -webkit-mask-image: linear-gradient(180deg, #000 var(--fade), transparent); mask-image: linear-gradient(180deg, #000 var(--fade), transparent);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

/* InoLah: the home and the wallet (the InoLah section shows the other screens), a centred pair rising from the bottom */
.hm-art-inolah { position: absolute; inset: auto 0 0 0; height: 100%; --fade: 74%; }
.hm-ph { position: absolute; left: 50%; --pw: 272px; transition: transform .8s var(--ease); }
.hm-ph--front { margin-left: calc(var(--pw) * -.14); bottom: calc(var(--pw) * -.66); transform: rotate(3deg); z-index: 2; }
.hm-ph--back { margin-left: calc(var(--pw) * -.98); bottom: calc(var(--pw) * -1.02); transform: rotate(-7deg) scale(.9); z-index: 1; filter: brightness(.8); }
.hm-tile--inolah:hover .hm-ph--front { transform: rotate(2deg) translateY(-14px); }
.hm-tile--inolah:hover .hm-ph--back { transform: rotate(-6deg) scale(.9) translateY(-8px); }
.hm-tile--inolah .hm-tile__glow { right: 5%; bottom: -30%; width: 90%; opacity: .7; }
/* Crypto-Only: the real Android app (status bar cropped); its last post fades out well before the edge */
.hm-art-co { display: flex; justify-content: center; margin-bottom: calc(-1 * clamp(24px, 2.4vw, 32px)); margin-top: auto; padding-top: 8px;
  -webkit-mask-image: linear-gradient(180deg, #000 56%, transparent 92%); mask-image: linear-gradient(180deg, #000 56%, transparent 92%); }
.hm-droid { position: relative; display: block; width: min(300px, 78%); aspect-ratio: 1080 / 1540; overflow: hidden; border-radius: 30px 30px 0 0; padding: 10px 10px 0; background: linear-gradient(145deg, #2A2438, #0B0812 40%, #1D1829);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 -20px 60px -30px rgba(33,117,235,.5); transition: transform .7s var(--ease); }
.hm-droid img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 27%; border-radius: 22px 22px 0 0; aspect-ratio: auto; }
.hm-tile--crypto-only:hover .hm-droid { transform: translateY(-10px); }
/* Xitcoin / InoAi: the official coin and the total supply */
.hm-tile__fig { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: auto; }
.hm-tile__fig b { font-family: var(--f-display); font-weight: 600; font-size: clamp(20px, 1.9vw, 28px); line-height: 1; letter-spacing: -.035em; white-space: nowrap; font-variant-numeric: tabular-nums;
  background: var(--grad-title-night); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.hm-tile__fig small { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--snow-3); }
.hm-art-coin { position: absolute; right: clamp(20px, 2.2vw, 28px); bottom: clamp(20px, 2.2vw, 28px); width: clamp(96px, 9vw, 148px); aspect-ratio: 1; margin: 0; -webkit-mask-image: none; mask-image: none; }
.hm-art-coin img { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 18px 22px rgba(0,0,0,.6)); transition: transform .8s var(--ease); }
.hm-art-coin__glow { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--bc) 50%, transparent), transparent); filter: blur(18px); opacity: .5; transition: opacity .5s; }
.hm-tile--coin:hover .hm-art-coin img { transform: translateY(-6px) rotate(-8deg); }
.hm-tile--coin:hover .hm-art-coin__glow { opacity: .85; }
.hm-tile--coin .hm-tile__glow { opacity: .25; }
/* Stake-Only: its coming-soon page, framed from the icon to the "Coming Soon" title (the page's own lines stay out) */
.hm-art-so { position: absolute; right: clamp(24px, 2.4vw, 32px); bottom: 0; width: 58%; margin: 0; --fade: 80%; }
.hm-art-so .browser { display: block; border-radius: 14px 14px 0 0; border-bottom: 0; background: #040511; transition: transform .7s var(--ease); box-shadow: 0 -30px 80px -40px rgba(138,92,246,.6), 0 0 0 1px rgba(255,255,255,.04); }
.hm-art-so .browser::after { content: ""; display: block; height: 44px; background: #040511; }
.hm-art-so .browser__bar { height: 34px; padding: 0 12px; gap: 7px; }
.hm-art-so .browser__bar i { width: 9px; height: 9px; }
.hm-art-so .browser__url { margin-left: 6px; }
.hm-crop.hm-crop--so { aspect-ratio: 1 / .442; background: #040511; }
.hm-crop.hm-crop--so img { position: absolute; left: 50%; top: 0; width: 260%; max-width: none; height: auto; margin: -34.125% 0 0 -130%; object-fit: fill; }
.hm-tile--stake-only:hover .hm-art-so .browser { transform: translateY(-8px); }
.hm-tile--xitcoin, .hm-tile--inoai, .hm-tile--stake-only { min-height: 372px; }
/* InoSwap: product UI in a browser window, bleeding off the corner */
.hm-art-browser { margin: auto calc(-1 * clamp(24px, 2.4vw, 32px)) calc(-1 * clamp(24px, 2.4vw, 32px)) 12%; --fade: 94%; } /* the fade stays under Connect Wallet */
.hm-art-browser .browser, .hm-rm__win { display: block; }
.hm-art-browser .browser { border-radius: 14px 0 0 0; border-right: 0; border-bottom: 0; transform-origin: 100% 100%; transition: transform .7s var(--ease); box-shadow: 0 -30px 80px -40px rgba(236,76,155,.45), 0 0 0 1px rgba(255,255,255,.04); }
.hm-crop { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 7.6; }
.hm-crop img { width: 100%; height: 100%; object-fit: cover; }
/* the swap card from its title to "You receive": the window never reaches the Connect Wallet button.
   width = (window height / width) / 0.2931 (the window ends at 46.9 % of the capture's height) */
.hm-crop.hm-crop--swap img { position: absolute; left: 50%; top: 0; width: 128%; max-width: none; height: auto; margin-left: -64%; object-fit: fill; } /* the whole swap block, down to Connect Wallet (Thomas 28/09) */
.hm-tile--inoswap:hover .hm-art-browser .browser { transform: translate(-6px, -8px); }
/* Kcanther: the panther pointing at you, on a halftone field */
.hm-art-kc { position: absolute; right: -24px; bottom: -8px; width: min(380px, 78%); aspect-ratio: 1; --fade: 80%; }
.hm-art-kc::before { content: ""; position: absolute; inset: 8% -10% -10% 4%; z-index: -1; background: radial-gradient(rgba(234,88,12,.45) 1.1px, transparent 1.5px) 0 0 / 11px 11px;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent); opacity: .7; }
.hm-art-kc img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 24px rgba(234,88,12,.25)) drop-shadow(0 30px 40px rgba(0,0,0,.6)); transition: transform .8s var(--ease); transform-origin: 60% 100%; }
.hm-tile--kcanther { min-height: 470px; }
.hm-tile--kcanther:hover .hm-art-kc img { transform: scale(1.03) translateY(-4px); }

/* ---------- 4. INOLAH (paper) ---------- */
.hm-ino { position: relative; overflow: clip; padding: clamp(100px, 11vw, 160px) 0 clamp(80px, 8vw, 120px); background: var(--paper); }
.hm-ino .room-top { opacity: .6; }
.hm-ino__in { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hm-ino__head { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 760px; }
.hm-ino__icon { width: 72px; height: 72px; border-radius: 17px; box-shadow: 0 24px 40px -16px rgba(74,14,130,.55); }
.hm-ino__title { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--f-display); font-weight: 600; font-size: clamp(52px, 7vw, 104px); line-height: .92; letter-spacing: -.05em; color: var(--ink); }
.hm-ino__by { font-size: clamp(16px, 1.4vw, 20px); font-weight: 500; letter-spacing: -.005em; background: linear-gradient(95deg, #4A0E82, #7A5AF8 55%, #A690FF); -webkit-background-clip: text; background-clip: text; color: transparent; box-sizing: content-box; padding: 0 .1em .22em 0; margin-right: -.1em; margin-bottom: -.22em; }
.hm-ino__line { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 30em; }
.hm-fan { position: relative; width: 100%; height: calc(var(--pw) * 2.164 + 60px); --pw: clamp(210px, 20vw, 272px); margin-top: clamp(40px, 5vw, 64px); perspective: 1800px; perspective-origin: 50% 40%; display: grid; place-items: start center; }
.hm-fan__ph { position: absolute; top: 20px; left: 50%; margin: 0 0 0 calc(var(--pw) / -2); will-change: transform; transform-style: preserve-3d; }
.hm-fan__ph--c { z-index: 3; }
.hm-fan__ph--l, .hm-fan__ph--r { z-index: 2; }
.hm-fan__ph--l { transform: translate3d(calc(var(--pw) * -.5), 34px, -90px) rotateY(34deg) rotateZ(-6deg) scale(.9); }
.hm-fan__ph--r { transform: translate3d(calc(var(--pw) * .5), 34px, -90px) rotateY(-34deg) rotateZ(6deg) scale(.9); }
.hm-fan__glow { position: absolute; left: 50%; top: 42%; width: min(900px, 110%); height: 70%; transform: translate(-50%, -50%); border-radius: 50%; filter: blur(40px); pointer-events: none;
  background: radial-gradient(closest-side, rgba(138,68,216,.30), rgba(122,90,248,.10) 55%, transparent); }
.hm-ino__foot { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 8px; }
.hm-ino__status { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink-2); flex-wrap: wrap; justify-content: center; }

/* ---------- 5. KCALB NEWS (white) ---------- */
.hm-news { position: relative; padding: clamp(72px, 7vw, 104px) 0; border-top: 1px solid var(--line); }
.hm-news__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 4px solid var(--ink); }
.hm-news__mast { display: flex; flex-direction: column; gap: 12px; }
.hm-news__date { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.hm-news__title { font-family: var(--f-display); font-weight: 600; font-size: clamp(46px, 6vw, 88px); line-height: .9; letter-spacing: -.055em; }
.hm-market { margin-top: 28px; }
.hm-market__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.hm-coin { display: grid; gap: 10px; padding: 16px 16px 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--paper); transition: border-color .25s, transform .35s var(--ease), box-shadow .35s var(--ease), background .25s; }
.hm-coin:hover { background: var(--paper-2); border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.hm-coin__id { display: flex; align-items: center; gap: 10px; }
.hm-coin__id img { width: 28px; height: 28px; border-radius: 50%; }
.hm-coin__id b { display: block; font-size: 14px; font-weight: 700; letter-spacing: .01em; line-height: 1.1; }
.hm-coin__id small { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.2; }
.hm-coin__price { font-family: var(--f-mono); font-size: 17px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.hm-coin__row { display: flex; align-items: end; justify-content: space-between; gap: 8px; }
.hm-chg { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--f-mono); font-size: 13px; font-weight: 500; color: var(--ink-3); }
.hm-chg small { font-size: 10.5px; color: var(--ink-4); }
.hm-chg.is-up { color: #0E8A57; } .hm-chg.is-down { color: var(--bad); }
.hm-spark { width: 84px; height: 28px; flex: none; }
.hm-spark.is-up { color: #16A36A; } .hm-spark.is-down { color: var(--bad); }
.hm-market__src { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 12px; font-size: 12.5px; color: var(--ink-3); }
.hm-cg { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ink-2); transition: color .2s; }
.hm-cg img { width: 16px; height: 16px; border-radius: 50%; }
.hm-cg:hover { color: var(--ink); }
.hm-market__time::before { content: "·"; margin-right: 6px; }
.hm-news__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 3.4vw, 48px); margin-top: clamp(44px, 5vw, 64px); }
.hm-news__grid--b { padding-top: clamp(40px, 4.6vw, 56px); border-top: 1px solid var(--line); }
.hm-lead { display: flex; flex-direction: column; gap: 22px; }
.hm-lead__media { display: block; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: var(--night); }
.hm-lead__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.hm-lead:hover .hm-lead__media img { transform: scale(1.03); }
.hm-lead__body { display: flex; flex-direction: column; gap: 12px; }
.hm-lead__title { font-family: var(--f-display); font-weight: 600; font-size: clamp(26px, 2.5vw, 38px); line-height: 1.08; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; transition: color .2s; }
.hm-lead:hover .hm-lead__title { color: var(--violet-3); }
.hm-lead__dek { font-size: 16.5px; line-height: 1.6; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 42em; }
.hm-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }
.hm-meta > span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; margin-right: 10px; vertical-align: middle; }
.hm-cat { font-family: var(--f-mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; font-weight: 500; color: var(--violet-3); }
.hm-kicker { font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding-bottom: calc(14px + var(--gt-b)); border-bottom: 1px solid var(--line); }
.hm-stories { list-style: none; margin: 0; padding: 0; }
.hm-stories li { border-bottom: 1px solid var(--line); }
.hm-story { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 20px; align-items: center; padding: 20px 0; }
.hm-story__body { display: flex; flex-direction: column; gap: 8px; }
.hm-story__title { font-family: var(--f-display); font-weight: 600; font-size: 19px; line-height: 1.22; letter-spacing: -.02em; color: var(--ink); transition: color .2s; text-wrap: pretty; }
.hm-story:hover .hm-story__title { color: var(--violet-3); }
.hm-story__media { display: block; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--night); }
.hm-story__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.hm-story:hover .hm-story__media img { transform: scale(1.05); }
.hm-wire__list { list-style: none; margin: 0; padding: 0; }
.hm-wire__list li { border-bottom: 1px solid var(--line); }
.hm-wire__row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 20px; gap: 20px; align-items: baseline; padding: 17px 0; }
.hm-wire__src { display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 600; color: var(--ink); }
.hm-wire__src time { font-family: var(--f-mono); font-size: 11.5px; font-weight: 400; color: var(--ink-3); }
.hm-wire__title { font-size: 16px; line-height: 1.45; font-weight: 500; color: var(--ink-2); transition: color .2s; }
.hm-wire__out .ic { width: 16px; height: 16px; color: var(--ink-4); transition: transform .3s var(--ease), color .2s; }
.hm-wire__row:hover .hm-wire__title { color: var(--ink); }
.hm-wire__row:hover .hm-wire__out .ic { color: var(--violet-3); transform: translate(2px, -2px); }
.hm-digest { position: relative; align-self: stretch; justify-content: flex-end; display: flex; flex-direction: column; gap: 12px; padding: clamp(28px, 3vw, 40px); border-radius: 28px; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, #F4F0FF, #FFFFFF 60%); border: 1px solid #E6E0FA; }
.hm-digest::before { content: ""; position: absolute; z-index: -1; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(closest-side, rgba(122,90,248,.22), transparent); }
.hm-digest__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; margin-bottom: auto; flex: none;
  background: linear-gradient(160deg, #2A1450, #13061F); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 14px 26px -14px rgba(19,6,31,.7); }
.hm-digest__icon .ic { width: 22px; height: 22px; }
.hm-digest__title { margin-top: calc(28px - var(--gt-t)); font-family: var(--f-display); font-size: clamp(24px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.hm-digest__text { font-size: 15px; color: var(--ink-3); margin-bottom: 8px; }
.hm-digest .subscribe { max-width: none; }
.hm-nocover { width: 100%; height: 100%; display: grid; place-items: center; color: rgba(255,255,255,.5); background: radial-gradient(80% 90% at 50% 0%, rgba(140,100,255,.45), transparent 70%), #0B0714; }
.hm-nocover .ic { width: 28%; height: auto; max-width: 64px; }
.hm-empty { padding: 40px; border-radius: 22px; background: var(--paper); color: var(--ink-3); }

/* ---------- 6. DIGITAL ASSETS (night) ---------- */
.hm-night { position: relative; overflow: clip; isolation: isolate; padding: clamp(84px, 8.5vw, 124px) 0 clamp(110px, 11vw, 170px); }
.hm-night .hm-dust { z-index: -1; }
.hm-night__beam { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(46% 26% at 50% 0%, rgba(140,100,255,.24), transparent 75%), radial-gradient(40% 24% at 20% 64%, rgba(94,79,209,.10), transparent 75%), radial-gradient(40% 24% at 85% 72%, rgba(166,144,255,.08), transparent 75%); }
.hm-night__floor { z-index: -1; opacity: .12; }
.hm-assets__head, .hm-rm__intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.hm-assets__head { margin-bottom: clamp(36px, 4vw, 56px); }
.hm-h2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(38px, 4.6vw, 68px); line-height: 1; letter-spacing: -.045em; }
.hm-disclose { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--snow-3); }
.hm-disclose .ic { width: 15px; height: 15px; }
.hm-assets__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hm-asset { --gx: 50%; --gy: 30%; perspective: 1100px; }
.hm-asset__in { position: relative; height: 100%; display: flex; flex-direction: column; padding: 28px; border-radius: 28px; overflow: hidden; isolation: isolate; transform-style: preserve-3d; transition: transform .6s var(--ease), box-shadow .5s;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015) 55%), #08060F; border: 1px solid rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.hm-asset.is-tilt .hm-asset__in { transition: transform .12s linear, box-shadow .5s; box-shadow: 0 40px 80px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.1); }
.hm-asset__in::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(360px circle at var(--gx) var(--gy), rgba(255,255,255,.07), transparent 60%); }
.hm-asset.is-tilt .hm-asset__in::before { opacity: 1; }
.hm-asset__top { position: relative; height: 170px; display: grid; place-items: center; margin: 4px 0 18px; transform: translateZ(50px); }
.hm-asset__coin { position: relative; z-index: 1; width: 150px; height: 150px; filter: drop-shadow(0 22px 26px rgba(0,0,0,.6)); transition: transform .8s var(--ease); }
.hm-asset__medal { position: relative; z-index: 1; display: block; width: 150px; height: 150px; border-radius: 50%; transition: transform .8s var(--ease);
  box-shadow: 0 22px 26px -8px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.1); }
.hm-asset__medal::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: linear-gradient(160deg, rgba(255,255,255,.32), transparent 38%, transparent 70%, rgba(0,0,0,.18)); mix-blend-mode: soft-light; }
.hm-asset__medal img { width: 100%; height: 100%; border-radius: 50%; }
.hm-asset:hover .hm-asset__coin, .hm-asset:hover .hm-asset__medal { transform: translateY(-6px) scale(1.03); }
.hm-asset__glow { position: absolute; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 55%, transparent), transparent); filter: blur(22px); opacity: .55; }
.hm-asset__id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; transform: translateZ(24px); }
.hm-asset__id h3 { font-family: var(--f-display); font-size: 24px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.hm-tick { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,.07); color: var(--snow-2); }
.hm-asset__id .badge { margin-left: auto; }
.hm-asset__v { margin-top: 22px; font-family: var(--f-display); font-weight: 600; font-size: clamp(30px, 2.6vw, 40px); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; transform: translateZ(30px); }
.hm-wipe { display: inline-block; background: linear-gradient(180deg, #fff 20%, #C9CCD8 70%, #9EA0B2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hm-wipe.is-pre { clip-path: inset(0 100% 0 0); }
.hm-wipe.is-pre.is-in { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease-out) .1s; }
.hm-asset__l { margin-top: 8px; font-size: 14px; color: var(--snow-3); }
.hm-asset__ct { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding: 12px 12px 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); min-height: 50px; }
.hm-asset__ctl { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--snow-4); }
.hm-asset__addr { font-family: var(--f-mono); font-size: 13.5px; color: var(--snow); margin-right: auto; user-select: all; }
.hm-asset__fact { font-size: 14px; color: var(--snow-2); margin-right: auto; }
.hm-copy { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--snow-2); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); transition: .25s var(--ease); }
.hm-copy:hover { background: #fff; color: #0A0A0F; }
.hm-copy .ic { width: 15px; height: 15px; }
.hm-asset__links { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 22px; }
.hm-ext { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--snow-3); transition: color .2s; }
.hm-ext .ic { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.hm-ext:hover { color: #fff; } .hm-ext:hover .ic { transform: translate(2px, -2px); }

/* ---------- 7. ROADMAP TEASER (night, swipe row) ---------- */
.hm-rm { position: relative; margin-top: clamp(96px, 10vw, 150px); }
.hm-rm__head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-bottom: clamp(36px, 4vw, 52px); }
.hm-rm__year { font-family: var(--f-display); font-weight: 600; font-size: clamp(120px, 19vw, 280px); line-height: .8; letter-spacing: -.07em; margin-left: -.04em; user-select: none; }
.hm-rm__year span { display: inline-block; padding-bottom: .04em; font-variant-numeric: tabular-nums; transition: opacity .22s var(--ease), transform .3s var(--ease), filter .22s;
  background: linear-gradient(180deg, #F2EDFF 8%, #A690FF 48%, rgba(94,63,230,.35) 88%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hm-rm__year span.is-out { opacity: 0; transform: translateY(14px); filter: blur(6px); }
.hm-rm__intro { flex-direction: column; align-items: flex-end; text-align: right; gap: 22px; margin: 0 0 6px; }
.hm-rm__ctrl { display: flex; gap: 10px; }
.hm-rm__ctrl .icon-btn { width: 48px; height: 48px; }
.hm-rm__ctrl .icon-btn:disabled { opacity: .3; pointer-events: none; }
.hm-rm__track { list-style: none; margin: 0; display: flex; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab;
  padding: 10px max(var(--gutter), calc((100vw - var(--container)) / 2)) 10px; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); }
.hm-rm__track::-webkit-scrollbar { display: none; }
.hm-rm__track.is-drag { scroll-snap-type: none; cursor: grabbing; }
.hm-rm__track.is-drag * { pointer-events: none; }
.hm-rm__track:focus-visible { outline-offset: -2px; }
.hm-rm__item { flex: 0 0 clamp(300px, 38vw, 540px); min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; }
.hm-rm__card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 14px 14px 14px; border-radius: 26px; user-select: none; -webkit-user-drag: none;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); border: 1px solid rgba(255,255,255,.09); transition: transform .5s var(--ease), border-color .3s, box-shadow .5s; }
.hm-rm__card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.16); box-shadow: 0 40px 80px -40px rgba(122,90,248,.45); }
.hm-rm__pills { display: flex; gap: 6px; margin-left: auto; padding-left: 10px; flex: none; }
.hm-rm__win .browser__bar { height: 44px; }
.hm-rm__win .browser__url { max-width: 300px; }
.hm-year { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font-family: var(--f-mono); font-size: 12px; font-weight: 500; color: #0A0A0F; background: linear-gradient(180deg, #F2EDFF, #C9B8FF); }
.hm-rm__item.is-next .hm-year { color: #fff; background: rgba(122,90,248,.28); box-shadow: inset 0 0 0 1px rgba(185,168,255,.45); }
.hm-rm__win { box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); }
.hm-rm__shot { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; }
.hm-rm__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; pointer-events: none; }
/* framed captures: zoom --z from origin --o (Crypto-Only: its headline only; InoSwap: the swap card only) */
.hm-rm__shot--z img { transform: scale(var(--z, 1)); transform-origin: var(--o, 50% 0); }
/* InoLah: no website yet, the window shows three of the app's screens rising from the bottom */
.hm-rm__win--app { display: block; position: relative; overflow: hidden; border-radius: 16px; border: 1px solid rgba(255,255,255,.1); background: #0B0612; }
.hm-rm__win--app .browser__bar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px 0 16px; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.03); }
.hm-rm__app { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--snow-3); white-space: nowrap; }
.hm-rm__shot--app { background: radial-gradient(70% 80% at 50% 100%, rgba(138,68,216,.45), transparent 70%), radial-gradient(50% 60% at 50% 0%, rgba(94,79,209,.18), transparent 70%), #0B0612; }
.hm-rm__ph { position: absolute; left: 50%; top: 11%; --pw: 34%; width: var(--pw); height: auto; margin-left: calc(var(--pw) / -2); border-radius: 14% / 6.5%; padding: 1.1%; }
.hm-rm__ph img { border-radius: 12.5% / 5.8%; }
.hm-rm__ph--0 { transform: translateX(-88%) translateY(10%) rotate(-5deg) scale(.9); filter: brightness(.8); }
.hm-rm__ph--2 { transform: translateX(88%) translateY(10%) rotate(5deg) scale(.9); filter: brightness(.8); }
.hm-rm__ph--1 { z-index: 2; }
.hm-rm__card:hover .hm-rm__ph--1 { transform: translateY(-4%); }
.hm-rm__ph { transition: transform .7s var(--ease); }
.hm-rm__more { position: relative; z-index: 0; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 14px; font-size: 13.5px; font-weight: 500; color: var(--snow-3); }
.hm-rm__more .ic { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.hm-rm__card:hover .hm-rm__more { color: #fff; } .hm-rm__card:hover .hm-rm__more .ic { transform: translateX(2px); }
/* Xitcoin: the official artwork, lockup centred */
.hm-rm__shot--banner { background: #1A0E05; }
.hm-rm__shot--banner img { object-position: 47% 50%; }
.hm-rm__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.hm-rm__link:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 3px; }
.hm-rm__cap { display: flex; align-items: center; gap: 12px; padding: 0 4px 0 6px; }
.hm-rm__cap img { width: 28px; height: 28px; border-radius: 7px; }
.hm-rm__cap b { font-family: var(--f-display); font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.hm-rm__visit { position: relative; z-index: 2; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 14px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 500; color: var(--snow-2);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); transition: .25s var(--ease); }
.hm-rm__visit .ic { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.hm-rm__visit:hover { background: #fff; color: #0A0A0F; border-color: #fff; }
.hm-rm__visit:hover .ic { transform: translate(1px, -1px); }
.hm-rm__foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; }
.hm-rm__bar { position: relative; flex: 1; max-width: 360px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.hm-rm__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 40%; border-radius: 2px; background: linear-gradient(90deg, var(--violet-2), #fff); transition: transform .15s linear, width .2s; }

/* ---------- 8. COMMUNITY (paper) + 9. CTA ROOM ---------- */
.hm-comm { position: relative; overflow: clip; padding: clamp(100px, 11vw, 160px) 0 clamp(64px, 7vw, 100px); background: var(--paper); }
.hm-comm .room-top { opacity: .6; }
.hm-comm__in { position: relative; }
.hm-comm__title { font-family: var(--f-display); font-weight: 600; font-size: clamp(40px, 5vw, 72px); line-height: 1; letter-spacing: -.045em; text-align: center; margin-bottom: calc(clamp(40px, 5vw, 64px) - var(--gt-b)); text-wrap: balance; }
/* the Discord card: a night stage inside the paper room */
.hm-dc { position: relative; border-radius: 36px; padding: 10px; background: linear-gradient(180deg, #1A1426, #0B0911); border: 1px solid rgba(11,10,18,.9); box-shadow: 0 50px 100px -50px rgba(40,16,110,.55), 0 20px 40px -24px rgba(0,0,0,.35); color: var(--snow); isolation: isolate; overflow: hidden; }
.hm-dc__beam { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(46% 60% at 70% 0%, rgba(140,100,255,.26), transparent 72%), radial-gradient(40% 50% at 10% 100%, rgba(94,79,209,.14), transparent 75%); }
.hm-dc__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: center; padding: clamp(26px, 3.4vw, 48px); border-radius: 27px; border: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.hm-dc__info { display: flex; flex-direction: column; gap: 24px; }
.hm-dc__server { display: flex; align-items: center; gap: 14px; }
.hm-dc__server img { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 16px 30px -12px rgba(122,90,248,.6); }
.hm-dc__name { font-family: var(--f-display); font-size: 24px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.hm-dc__on { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 13.5px; font-weight: 500; color: #B9C0FF; }
.hm-dc__on .ic { width: 15px; height: 15px; }
.hm-dc__count { display: flex; align-items: flex-end; gap: 16px; padding-block: 6px 22px; border-bottom: 1px solid rgba(255,255,255,.08); }
.hm-dc__count b { font-family: var(--f-display); font-weight: 600; font-size: clamp(76px, 8.4vw, 124px); line-height: .78; letter-spacing: -.06em; font-variant-numeric: tabular-nums;
  background: var(--grad-title-night); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .04em; }
.hm-dc__count span { display: flex; flex-direction: column; gap: 4px; padding-bottom: 4px; font-size: 17px; font-weight: 600; color: var(--snow); }
.hm-dc__count small { font-family: var(--f-mono); font-size: 11px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--snow-3); }
.hm-langs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 6px; }
.hm-lang { width: 100%; display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 10px; border-radius: 12px; font-size: 13.5px; font-weight: 500; color: var(--snow-2); border: 1px solid transparent; transition: .2s var(--ease); text-align: left; }
.hm-lang img, .hm-mflag img { width: 24px; height: 18px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(10,10,20,.12), 0 0 0 1px rgba(255,255,255,.14); flex: none; object-fit: cover; }
.hm-lang:hover, .hm-lang.is-on { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #fff; }
.hm-dc__cta { align-self: flex-start; }
.hm-dc__cta .ic { width: 20px; height: 20px; }
/* map: violet dots on night, pins light one after another, each room's flag stays on the map */
.hm-map { position: relative; align-self: stretch; display: grid; align-content: center; border-radius: 22px; padding: clamp(18px, 2.6vw, 34px) clamp(10px, 1.6vw, 22px); overflow: hidden; background: radial-gradient(80% 90% at 50% 30%, rgba(122,90,248,.14), transparent 70%), rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); }
.hm-map__in { position: relative; width: 100%; aspect-ratio: 1040 / 396; }
.hm-map__dots { position: absolute; inset: 0; background: linear-gradient(135deg, #6F58D8, #8B72FF 50%, #5B47C0);
  -webkit-mask: url(assets/bg/world-map-contact.webp) center / 100% 100% no-repeat; mask: url(assets/bg/world-map-contact.webp) center / 100% 100% no-repeat; opacity: .55; }
.hm-map__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hm-map__lines line { stroke: rgba(196,176,255,.55); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .5s var(--ease) calc(var(--d, 0ms) + 100ms), stroke .25s; }
.hm-map.is-awake .hm-map__lines line { opacity: 1; }
.hm-map__lines line.is-on { stroke: #fff; }
/* the arcs that join the countries of one room (Thomas 28/09) */
.hm-map__lines .hm-arc { fill: none; stroke: rgba(196,176,255,.45); stroke-width: 1.2; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .6s var(--ease) calc(var(--d, 0ms) + 200ms), stroke .25s; }
.hm-map.is-awake .hm-map__lines .hm-arc { opacity: 1; }
.hm-map__lines .hm-arc.is-on { stroke: #fff; stroke-dasharray: none; }
.hm-lang__flags { display: inline-flex; flex: none; }
.hm-lang__flags img + img { margin-left: -9px; box-shadow: 0 0 0 2px var(--night, #0D0B19), inset 0 0 0 1px rgba(10,10,20,.12); } /* the room's second country tucked behind the first */
.hm-pin { position: absolute; width: 0; height: 0; z-index: 1; }
.hm-pin i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(139,114,255,.55), 0 0 16px 4px rgba(160,130,255,.85); transform: scale(0); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1) var(--d, 0ms); }
.hm-pin i::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1.5px solid rgba(196,176,255,.8); opacity: 0; transform: scale(.4); }
.hm-map.is-awake .hm-pin i, .hm-map:not(.is-awake) .hm-pin.is-on i { transform: scale(1); }
.hm-map.is-awake .hm-pin i::after { animation: hm-ping 1.4s var(--ease-out) calc(var(--d, 0ms) + 120ms) 1 both; }
@keyframes hm-ping { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.7); } }
.hm-pin em { position: absolute; left: 50%; top: 12px; transform: translate(-50%, -4px); padding: 4px 9px; border-radius: 8px; background: #fff; color: #0A0A0F; font-style: normal; font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; transition: .25s var(--ease); pointer-events: none; z-index: 4; }
.hm-pin.is-on { z-index: 3; }
.hm-pin.is-on i { transform: scale(1.4) !important; }
.hm-pin.is-on em { opacity: 1; transform: translate(-50%, 0); }
.hm-mflag { position: absolute; z-index: 2; width: 0; height: 0; }
.hm-mflag img { position: absolute; left: -13px; top: -10px; width: 26px; height: 20px; max-width: none; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(10,10,20,.12), 0 0 0 1.5px rgba(255,255,255,.9), 0 6px 14px rgba(0,0,0,.5);
  opacity: 0; transform: scale(.6); transition: opacity .4s var(--ease) calc(var(--d, 0ms) + 140ms), transform .5s cubic-bezier(.3, 1.5, .5, 1) calc(var(--d, 0ms) + 140ms); }
.hm-map.is-awake .hm-mflag img { opacity: 1; transform: none; }
.hm-mflag.is-on img { transform: scale(1.3) !important; transition-delay: 0s !important; }
/* closing room: violet-black, his perspective room drawn in light lines, the thin pentagon at the vanishing point */
.hm-cta { margin-top: clamp(64px, 8vw, 110px); padding-block: clamp(64px, 6.4vw, 88px); background: linear-gradient(180deg, rgba(14,6,26,.6), rgba(8,3,14,.8)), url(assets/bg/bgr-form.webp) center / cover no-repeat, #0B0413; border: 1px solid rgba(255,255,255,.06); }
.hm-cta::after { background: radial-gradient(60% 80% at 50% 0%, rgba(138,68,216,.34), transparent 65%), radial-gradient(40% 50% at 50% 110%, rgba(94,63,230,.18), transparent 70%); }
.hm-cta__mark { position: absolute; left: 50%; top: 50%; z-index: -1; width: min(420px, 70vw); aspect-ratio: 1; transform: translate(-50%, -54%); pointer-events: none; opacity: .12;
  background: linear-gradient(180deg, #fff, #B9A8FF); -webkit-mask: url(assets/brand/kcalbapp/symbol-white.svg) center / contain no-repeat; mask: url(assets/brand/kcalbapp/symbol-white.svg) center / contain no-repeat; }
.hm-cta h2 { font-size: clamp(36px, 4.6vw, 64px); }
.hm-cta__btns { justify-content: center; }
.hm-cta__line { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.04); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hm-cta__line:hover { border-color: #fff; background: rgba(255,255,255,.12); }

/* ================= DARK MODE (paper/white sections turned night: tokens are remapped, literal light surfaces are not) ================= */
[data-was] .hm-ino__by { background: linear-gradient(95deg, #CBBEFF, #9F8BFF 60%, #E6E0FF); -webkit-background-clip: text; background-clip: text; }
[data-was] .hm-ino__icon { box-shadow: 0 24px 40px -16px rgba(122,90,248,.55); }
[data-was] .hm-orbit img { box-shadow: 0 24px 40px -18px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); }
[data-was] .hm-coin { background: rgba(255,255,255,.03); }
[data-was] .hm-coin:hover { background: rgba(255,255,255,.07); box-shadow: 0 20px 40px -24px rgba(0,0,0,.8); }
[data-was] .hm-chg.is-up { color: #4ADE9B; } [data-was] .hm-spark.is-up { color: #34D399; }
[data-was] .hm-chg.is-down, [data-was] .hm-spark.is-down { color: #FF7A8A; }
[data-was] .hm-cat, [data-was] .hm-lead:hover .hm-lead__title, [data-was] .hm-story:hover .hm-story__title, [data-was] .hm-wire__row:hover .hm-wire__out .ic { color: #B9A8FF; }
[data-was] .hm-news__head { border-bottom-color: rgba(246,244,251,.9); }
[data-was] .hm-co .rail { opacity: .35; }
[data-was] .hm-digest { background: radial-gradient(90% 70% at 100% 0%, rgba(122,90,248,.2), transparent 70%), linear-gradient(160deg, #15101F, #0E0B15 70%); border-color: rgba(255,255,255,.1); }
[data-was] .hm-digest__icon { background: linear-gradient(160deg, #3A2170, #1C0E36); border-color: rgba(185,168,255,.25); }
[data-was] .hm-digest .subscribe { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.15); }
[data-was] .hm-digest .subscribe input { color: var(--snow); }
[data-was] .hm-digest .subscribe input::placeholder { color: var(--snow-4); }
[data-was] .hm-dc { border-color: rgba(255,255,255,.1); box-shadow: 0 50px 100px -50px rgba(122,90,248,.35); }
[data-was] .hm-fan__ph { box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 40px 80px -34px rgba(0,0,0,.9); }
[data-was] .hm-lead__media, [data-was] .hm-story__media { box-shadow: 0 0 0 1px rgba(255,255,255,.06); }

/* ================= RESPONSIVE ================= */
@media (max-width: 1200px) {
  .hm-orbit--a { left: 0; } .hm-orbit--b { left: 4%; } .hm-orbit--c { right: 0; } .hm-orbit--d { right: 4%; }
  .hm-ph { --pw: 236px; }
}
@media (max-width: 1180px) {
  .hm-market__row { gap: 10px; }
  .hm-coin { padding: 14px 14px 12px; }
}
/* narrower cards: the 7-day line moves under the price instead of disappearing */
@media (max-width: 1100px) {
  .hm-coin__price { font-size: 16px; }
  .hm-coin__row { display: contents; }
  .hm-coin .hm-spark { order: 2; width: 100%; height: 26px; }
  .hm-coin .hm-chg { order: 3; }
}
@media (max-width: 1024px) {
  .hm-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; grid-template-areas: "ino ino" "co kc" "xt ia" "so sw"; }
  .hm-tile--inolah { min-height: 540px; }
  .hm-tile--crypto-only, .hm-tile--kcanther { min-height: 500px; }
  .hm-tile--inoswap { min-height: 372px; }
  .hm-crop { aspect-ratio: 16 / 9; }
  .hm-crop.hm-crop--swap img { width: 150%; margin-left: -75%; }
  .hm-news__grid { grid-template-columns: minmax(0, 1fr); }
  /* stacked: the last story's rule already closes the list, no second rule and empty row before the wire */
  .hm-news__grid--b { gap: 40px; border-top: 0; padding-top: 0; }
  .hm-digest { justify-content: flex-start; }
  .hm-digest__icon { margin-bottom: 0; }
  .hm-digest__title { margin-top: calc(10px - var(--gt-t)); }
  /* Stake-Only: the window anchored bottom-right like InoSwap's, large enough to read */
  /* the window follows the text instead of sitting under it (Thomas 28/09: in French the text ran under the window) */
  .hm-art-so { position: relative; right: auto; bottom: auto; align-self: flex-end; width: 88%; margin: 4px calc(-1 * clamp(24px, 2.4vw, 32px)) calc(-1 * clamp(24px, 2.4vw, 32px)) 0; }
  .hm-art-coin { width: 132px; }
  .hm-art-so .browser { border-radius: 14px 0 0 0; border-right: 0; }
  .hm-assets__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-asset--nft { grid-column: 1 / -1; }
  .hm-asset--nft .hm-asset__in { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .hm-asset--nft .hm-asset__top { grid-row: span 6; height: 100%; margin: 0; }
  .hm-asset--nft .hm-asset__v { margin-top: 16px; }
  .hm-dc__in { grid-template-columns: minmax(0, 1fr); }
  .hm-map { order: -1; }
  .hm-langs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hm-orbit { --os: 60px !important; }
  .hm-orbit--a { top: -60px; left: 2%; } .hm-orbit--c { top: -50px; right: 2%; }
  .hm-orbit--b { top: auto; bottom: -70px; left: 8%; } .hm-orbit--d { top: auto; bottom: -76px; right: 8%; }
  .hm-co__body { margin-top: 110px; }
}
@media (max-width: 720px) {
  .hm-hero { min-height: 600px; }
  .hm-word { --hw: 72vw; }
  .hm-hero__center { gap: 28px; }
  .hm-ccc { padding: 10px 20px; gap: 18px; }
  .hm-ccc li { font-size: 14px; gap: 7px; }
  .hm-hero__ctas { flex-direction: column; align-items: center; gap: 10px; }
  .hm-hero__ctas .btn { --bh: 50px; min-width: 232px; }
  .hm-strip__row { gap: 3px; padding: 5px; border-radius: 18px; }
  .hm-strip__icon { width: 44px; height: 44px; border-radius: 12px; }
  .hm-strip__icon img { width: 36px; height: 36px; border-radius: 8px; }
  .hm-banner { transform: none !important; border-radius: 14px; aspect-ratio: 2.3 / 1; }
  .hm-banner__word { font-size: clamp(26px, 8.4vw, 40px); letter-spacing: .13em; margin-right: -.13em; }
  .hm-banner__mark { width: clamp(34px, 9vw, 44px); }
  .hm-banner__bar { height: 34px; }
  .hm-banner__line { left: 10%; right: 10%; bottom: 16%; }
  .hm-bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ino" "co" "so" "xt" "ia" "sw" "kc"; }
  .hm-tile { border-radius: 24px; }
  .hm-tile--inolah { min-height: 560px; }
  .hm-ph { --pw: 196px; }
  .hm-tile--crypto-only { min-height: 520px; }
  .hm-tile--xitcoin, .hm-tile--inoai { min-height: 330px; }
  .hm-tile--stake-only { min-height: 380px; }
  .hm-art-so { width: 84%; }
  .hm-art-coin { width: 118px; }
  .hm-tile--kcanther { min-height: 480px; }
  .hm-art-kc { width: 330px; right: 50%; margin-right: -165px; bottom: -6px; }
  .hm-tile--inoswap { min-height: 360px; }
  .hm-art-browser { margin-left: 0; }
  .hm-crop { aspect-ratio: 16 / 10; }
  .hm-crop.hm-crop--swap img { width: 170%; margin-left: -85%; }
  .hm-fan { --pw: 196px; height: calc(var(--pw) * 2.164 + 70px); }
  .hm-market__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  .hm-market__row::after { content: ""; flex: 0 0 4px; }
  .hm-market__row::-webkit-scrollbar { display: none; }
  .hm-coin { flex: 0 0 172px; scroll-snap-align: start; }
  .hm-market__time { flex-basis: 100%; }
  .hm-market__time::before { display: none; }
  .hm-story { grid-template-columns: minmax(0, 1fr) 100px; gap: 16px; }
  .hm-story__title { font-size: 17px; }
  .hm-wire__row { grid-template-columns: minmax(0, 1fr) 18px; gap: 6px 14px; }
  .hm-wire__src { grid-column: 1 / -1; flex-direction: row; gap: 10px; align-items: baseline; }
  .hm-wire__title { grid-column: 1; }
  .hm-assets__grid { grid-template-columns: minmax(0, 1fr); }
  .hm-asset--nft .hm-asset__in { display: flex; align-items: stretch; }
  .hm-asset--nft .hm-asset__top { height: 170px; margin: 4px 0 18px; }
  .hm-rm__item { flex-basis: 84vw; }
  .hm-rm__win .browser__url { font-size: 11px; max-width: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hm-rm__win .browser__bar { gap: 6px; padding: 0 10px; }
  .hm-rm__win .browser__bar i { display: none; }
  .hm-rm__pills { padding-left: 6px; gap: 5px; }
  /* phones: each capture framed closer (--mz / --mo), large enough to read */
  .hm-rm__shot--z img { transform: scale(var(--mz, var(--z, 1))); transform-origin: var(--mo, var(--o, 50% 0)); }
  .hm-rm__ctrl { display: none; }
  .hm-rm__visit { height: 44px; padding: 0 16px; }
  .hm-rm__foot { flex-direction: column; align-items: stretch; }
  .hm-rm__foot .btn { align-self: center; }
  .hm-rm__bar { max-width: none; }
  .hm-dc { border-radius: 28px; padding: 6px; }
  .hm-dc__in { padding: 18px 16px 22px; border-radius: 23px; gap: 24px; }
  .hm-langs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-dc__cta { align-self: stretch; }
  .hm-pin em { display: none; }
  .hm-pin i { left: -3.5px; top: -3.5px; width: 7px; height: 7px; box-shadow: 0 0 0 2px rgba(139,114,255,.55), 0 0 10px 3px rgba(160,130,255,.85); }
  .hm-pin i::after { inset: -6px; }
  .hm-mflag img { left: -8px; top: -6px; width: 16px; height: 12px; border-radius: 2.5px; box-shadow: inset 0 0 0 1px rgba(10,10,20,.12), 0 0 0 1px rgba(255,255,255,.85), 0 3px 8px rgba(0,0,0,.5); }
  .hm-map { padding: 16px 8px; }
  .hm-story .hm-meta { flex-direction: column; align-items: flex-start; gap: 3px; }
  .hm-story .hm-meta > span + span::before { display: none; }
  .hm-rm__head { flex-direction: column; align-items: flex-start; }
  .hm-rm__intro { align-items: flex-start; text-align: left; }
}
@media (max-width: 420px) {
  .hm-rm__app { display: none; }
  .hm-tile__head { flex-wrap: wrap; }
  .hm-tile__head .badge { order: 3; }
  .hm-dc__count b { font-size: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-banner, .hm-fan__ph { transform: none !important; }
  .hm-fan__ph--l { transform: translateX(calc(var(--pw) * -1.1)) !important; }
  .hm-fan__ph--r { transform: translateX(calc(var(--pw) * 1.1)) !important; }
  .hm-co .rail::after { animation: none; }
}

/* the primary CTA: a still violet halo behind the white button (the shared conic glow turns endlessly) */

/* ================= SITE CHROME, HOME ONLY ================= */
/* a quiet scrim under the header so the nav reads on the brightest part of the beam */
.hm-hero::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 150px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(2,1,4,.42), transparent); }
/* while the chrome KCALB is on screen the header keeps only its mark: one logo per screen */
body[data-page="home"] .site-header .lockup__word, body[data-page="home"] .site-header .lockup__bar, body[data-page="home"] .site-header .lockup__ltd { transition: opacity .4s var(--ease), visibility .4s; }
body[data-page="home"].hm-word-in:not(.menu-open):not(.mega-open) .site-header .lockup__word,
body[data-page="home"].hm-word-in:not(.menu-open):not(.mega-open) .site-header .lockup__bar,
body[data-page="home"].hm-word-in:not(.menu-open):not(.mega-open) .site-header .lockup__ltd { opacity: 0; visibility: hidden; }
/* footer: the newsletter already sits in News just above */
body[data-page="home"] .site-footer .foot-news { display: none; }

/* ================= 28/09 — Thomas's review (standard Stake-Only, real banner, one roadmap row) ================= */
/* the real KcalbApp banner (Desktop/KcalbApp-Banner.png, 1500×500): never wider than 800 px so it stays sharp */
.hm-banner-wrap { max-width: 800px; margin: 0 auto clamp(56px, 6vw, 88px); }
.hm-banner { background: #18122E; border-color: rgba(185,176,255,.14); }
.hm-banner::before { display: none; }
.hm-banner__img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* bento tiles: one stretched link, the contract copy button above it */
.hm-tile__hit { position: absolute; inset: 0; z-index: 5; border-radius: inherit; }
.hm-tile__hit:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 3px; }
.hm-tile:focus-within::before { opacity: 1; }
.hm-ct { position: relative; z-index: 6; display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 4px 4px 4px 12px; border-radius: 10px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); }
.hm-ct__l { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--snow-3); }
.hm-ct__a { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .02em; color: var(--snow); }
.hm-ct .hm-copy { width: 30px; height: 30px; border-radius: 8px; }
/* the coin sits on the right, between the text and the figures, so the contract row always has room */
/* the coin stands next to the supply figure, above the contract row, clear of the text */
.hm-tile--coin .hm-art-coin { top: auto; bottom: calc(clamp(24px, 2.4vw, 32px) + 54px); width: clamp(78px, 6.4vw, 100px); }
.hm-bento__note { display: flex; justify-content: center; margin-top: 22px; }
/* InoLah: a signature, not capitals */
.hm-ino__title { gap: 0; }
.hm-ino__sig { display: inline-block; font-family: 'Allura', 'Great Vibes', cursive; font-weight: 400; font-size: clamp(96px, 11.5vw, 172px); line-height: .95; letter-spacing: 0; padding: .02em .22em .16em .12em; margin: -.1em 0 -.12em;
  background: var(--grad-title-paper); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #2b2350; }
[data-theme="night"] .hm-ino__sig { background-image: var(--grad-title-night); }
.hm-ino__sig.is-pre { clip-path: inset(-20% 100% -20% 0); }
.hm-ino__sig.is-in { clip-path: inset(-20% -10% -20% 0); transition: clip-path 1.7s cubic-bezier(.5, .05, .2, 1); }
/* night room: the roadmap row only */
.hm-night .hm-rm { margin-top: 0; }
/* roadmap row: inside the page's width, whole cards only (2 per view, 1 on phones) */
.hm-rm__track { padding: 10px 0 14px; scroll-padding-inline: 0; }
.hm-rm__item { flex: 0 0 calc((100% - 24px) / 2); }
@media (max-width: 760px) { .hm-rm__item { flex-basis: 100%; } }
/* the Xitcoin network card: the XTC coin at the centre of its four testnet validators */
.hm-rm__shot--chain { background: radial-gradient(46% 56% at 50% 48%, rgba(245,136,4,.2), transparent 70%), radial-gradient(90% 70% at 50% 110%, rgba(122,90,248,.28), transparent 70%), #0B0612; }
.hm-chain { position: absolute; inset: 0; display: block; }
.hm-chain__ring { position: absolute; left: 50%; top: 48%; width: 64%; aspect-ratio: 1.9; transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed rgba(255,255,255,.16); }
.hm-chain__ring--2 { width: 36%; border: 1px solid rgba(245,136,4,.28); }
.hm-chain__coin { position: absolute; left: 50%; top: 48%; width: 19%; height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 14px 30px rgba(245,136,4,.45)); pointer-events: none; }
.hm-chain__node { position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 8px; border-radius: 999px; background: rgba(14,9,26,.9); border: 1px solid rgba(255,255,255,.14); font: 500 11px/1 var(--f-mono); letter-spacing: .06em; color: var(--snow-2); transform: translate(-50%, -50%); white-space: nowrap; }
.hm-chain__node i { width: 7px; height: 7px; border-radius: 50%; background: #4BE3A4; box-shadow: 0 0 0 3px rgba(75,227,164,.16); }
.hm-chain__node--0 { left: 50%; top: 18%; } .hm-chain__node--1 { left: 82%; top: 48%; } .hm-chain__node--2 { left: 50%; top: 78%; } .hm-chain__node--3 { left: 18%; top: 48%; }
.hm-chain__id { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); font: 500 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--snow-3); white-space: nowrap; }
@media (max-width: 520px) { .hm-chain__node { font-size: 9.5px; padding: 4px 8px 4px 6px; } .hm-chain__id { display: none; } }
/* "Work with Kcalb Ltd": the banner's violet night, the perspective room kept, a smaller mark on the right like the banner */
.hm-cta { background: linear-gradient(135deg, rgba(24,18,46,.86) 0%, rgba(33,23,63,.8) 55%, rgba(27,18,56,.9) 100%), url(assets/bg/bgr-form.webp) center / cover no-repeat, #18122E; border-color: rgba(185,176,255,.1); }
.hm-cta::after { background: radial-gradient(42% 70% at 24% 22%, rgba(124,92,255,.24), transparent 70%), radial-gradient(40% 60% at 80% 86%, rgba(96,64,210,.18), transparent 70%); }
.hm-cta__mark { left: auto; right: clamp(-40px, -2vw, -10px); top: 50%; width: min(250px, 38vw); transform: translateY(-50%) rotate(-8deg); opacity: .07; }
.hm-cta__line { color: #c9bbff; background: rgba(122,90,248,.14); border: 1px solid rgba(166,144,255,.35); backdrop-filter: none; -webkit-backdrop-filter: none; }
.hm-cta__line:hover { color: #fff; background: rgba(167,139,250,.2); border-color: rgba(167,139,250,.7); }
/* roadmap row with the official banners (3:1), the name, one status and Visit */
.hm-rm__banner { position: relative; display: block; aspect-ratio: 3 / 1; border-radius: 16px; overflow: hidden; background: #0D0B19; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 60px -34px rgba(0,0,0,.9); }
.hm-rm__banner img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform 1s var(--ease-out); }
.hm-rm__card:hover .hm-rm__banner img { transform: scale(1.03); }
.hm-rm__cap .badge { flex: none; }
.hm-rm__bic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; color: #CFC2FF; background: linear-gradient(160deg, #2A1D52, #17122B); border: 1px solid rgba(185,168,255,.25); }
.hm-rm__bic .ic { width: 16px; height: 16px; }
.hm-rm__banner--art { background: radial-gradient(46% 90% at 50% 50%, rgba(122,90,248,.22), transparent 70%), linear-gradient(180deg, #120E22, #0A0814); }
/* the Xitcoin network in a banner: the coin in the middle, its four validators around */
.hm-rm__banner--art .hm-chain__ring { width: 46%; aspect-ratio: 3.2; top: 50%; }
.hm-rm__banner--art .hm-chain__ring--2 { width: 24%; aspect-ratio: 2.6; }
.hm-rm__banner--art .hm-chain__coin { width: 11%; top: 50%; }
.hm-rm__banner--art .hm-chain__node--0 { left: 50%; top: 16%; } .hm-rm__banner--art .hm-chain__node--1 { left: 76%; top: 50%; }
.hm-rm__banner--art .hm-chain__node--2 { left: 50%; top: 84%; } .hm-rm__banner--art .hm-chain__node--3 { left: 24%; top: 50%; }
.hm-rm__banner--art .hm-chain__id { display: none; }
/* the banking project: our coin, a line of light, a bank — no name */
.hm-bank { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 34px); }
.hm-bank__coin { width: clamp(46px, 12%, 72px); height: auto; filter: drop-shadow(0 10px 24px rgba(245,136,4,.4)); }
.hm-bank__line { position: relative; width: clamp(60px, 22%, 160px); height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(245,136,4,.7), rgba(166,144,255,.8)); overflow: hidden; }
.hm-bank__line i { position: absolute; top: 0; bottom: 0; width: 30%; background: linear-gradient(90deg, transparent, #fff, transparent); animation: hm-bank-run 2.6s ease-in-out infinite; }
@keyframes hm-bank-run { from { left: -30%; } to { left: 100%; } }
.hm-bank__icon { width: clamp(46px, 12%, 72px); aspect-ratio: 1; border-radius: 22%; display: grid; place-items: center; color: #E9E2FF; background: linear-gradient(160deg, #3A2A78, #1B1438); border: 1px solid rgba(185,168,255,.35); box-shadow: 0 14px 34px -14px rgba(122,90,248,.8); }
.hm-bank__icon .ic { width: 52%; height: 52%; }
@media (prefers-reduced-motion: reduce) { .hm-bank__line i { animation: none; display: none; } }
/* the network badge on the token coins, the network in the contract row, Xitcoin's own blockchain */
.hm-art-coin .hm-art-coin__net { position: absolute; right: -4%; bottom: -4%; width: 36%; height: 36%; border-radius: 50%; filter: none; box-shadow: 0 0 0 3px #0D0B19, 0 6px 14px rgba(0,0,0,.5); }
/* the text of a coin tile stops before the coin */
.hm-tile--coin .hm-tile__line { max-width: calc(100% - clamp(84px, 7.2vw, 112px)); }
.hm-ct__net { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.badge--chain { display: inline-flex; align-items: center; gap: 5px; background: rgba(245,136,4,.14); color: #FFB561; box-shadow: inset 0 0 0 1px rgba(245,136,4,.3); }
.badge--chain .ic { width: 12px; height: 12px; }
.hm-tile__meta { flex-wrap: wrap; }
/* the big year: the Stake-Only gradient, whole digits (nothing fades into the section), room above it */
.hm-night .hm-rm { padding-top: clamp(8px, 1.6vw, 24px); }
.hm-rm__year span { background: linear-gradient(180deg, #FFFFFF 6%, #CBD5FF 52%, #A690FF 100%); -webkit-background-clip: text; background-clip: text; padding: .08em .02em .08em 0; margin: -.08em 0; }
/* InoLah (Thomas 28/09: Arizonia chosen — rounded, feminine, luxurious), never clipped */
.hm-ino__sig { font-family: 'Arizonia', 'Great Vibes', cursive; font-weight: 400; font-size: clamp(104px, 12vw, 184px); line-height: 1.3; padding: .04em .34em .14em .34em; margin: -.16em 0 -.22em; letter-spacing: 0; }
.hm-ino__sig.is-pre { clip-path: inset(-40% 105% -40% -20%); }
.hm-ino__sig.is-in { clip-path: inset(-40% -20% -40% -20%); transition: clip-path 1.7s cubic-bezier(.5, .05, .2, 1); }
.hm-ino__sig.is-done { clip-path: none; }
@media (max-width: 520px) { .hm-tile--coin .hm-art-coin { width: 76px; bottom: calc(24px + 58px); } .hm-tile--coin .hm-tile__line { max-width: none; } .hm-tile--coin .hm-tile__meta { padding-right: 84px; } }
/* pictures inside the art banners keep their own size (the banner rule stretches only the banner image) */
.hm-rm__banner .hm-bank__coin { width: clamp(46px, 12%, 72px); height: auto; object-fit: contain; }
.hm-rm__banner .hm-chain__coin { width: 11%; height: auto; object-fit: contain; }

/* the signature is now a drawing (js/signature.js): its width sets its size; no clip reveal on it */
.hm-ino__sig.sig-host { width: clamp(300px, 44vw, 640px); padding: 0; margin: .1em 0 .05em; clip-path: none !important; background: none; -webkit-text-fill-color: initial; }

/* ==== pages/legal.css ==== */
/* ================= LEGAL (#legal.<slug>) + 404 — prefixes .lg- and .nf- ================= */
/* the page uses the site container (1240): hero, tabs, contents and "Other legal documents" share the header and footer edges;
   the reading measure is kept by the text itself (.lg-sec__body, .lg-pre p) */
.lg { --lg-gut: 58px; --lg-wrap: 1240px; }
.lg-wrap { max-width: var(--lg-wrap); margin-inline: auto; }

/* shared: white icon in a frosted square (Revolut style) */
.lg-glyph { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: none; color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 20px -10px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lg-glyph .ic { width: 20px; height: 20px; stroke-width: 1.6; }
.lg-glyph--ink { background: linear-gradient(160deg, #2B2540, #0C0913 70%); border-color: rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 22px -12px rgba(20,10,60,.55); }
.lg-glyph--coin img { width: 32px; height: 32px; border-radius: 50%; display: block; }

/* ---------- hero (night) ---------- */
.lg-hero { position: relative; overflow: clip; padding: calc(var(--header-h) + clamp(56px, 7vw, 108px)) 0 0; }
.lg-hero .bg-beam { background: radial-gradient(48% 82% at 26% -14%, rgba(160, 120, 255, .46), rgba(110, 60, 240, .13) 52%, transparent 80%), radial-gradient(30% 50% at 88% 10%, rgba(122, 90, 248, .16), transparent 70%); }
.lg-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: clamp(40px, 6vw, 96px); align-items: end; }
.lg-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding-bottom: 6px; }
.lg-hero__title { font-size: clamp(42px, 5.6vw, 80px); line-height: .98; letter-spacing: -.047em; padding-bottom: calc(.06em + var(--gt-b)); text-wrap: balance; }
.lg-hero .t-lead { max-width: 540px; color: var(--snow-2); }
/* eyebrow: a label, nothing that looks like a switch or a button */
.lg-eyebrow { display: inline-flex; align-items: center; gap: 11px; font: 500 11.5px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--snow-3); }
.lg-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--violet-2); box-shadow: 0 0 0 4px rgba(138,108,255,.16), 0 0 14px rgba(138,108,255,.7); }
.lg-hero__meta { display: none; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: -2px; font-size: 13.5px; color: var(--snow-3); }
.lg-hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.lg-hero__meta .ic { width: 15px; height: 15px; opacity: .8; }

/* document card: floats in 3D, follows the pointer */
.lg-card { position: relative; perspective: 1400px; }
/* glass tiles around the card (the WordPress hero's floating 3D tiles, redrawn in glass) */
.lg-tile { position: absolute; z-index: 2; display: grid; place-items: center; pointer-events: none; color: #fff;
  border-radius: 15px; background: linear-gradient(155deg, rgba(255,255,255,.22), rgba(255,255,255,.05) 60%), rgba(28, 20, 48, .42);
  border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -10px 18px -12px rgba(160,120,255,.35), 0 22px 40px -18px rgba(0,0,0,.8), 0 10px 30px -14px rgba(94,63,230,.55);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) rotate(var(--rot, 0deg)); transition: transform .9s var(--ease-out);
  animation: lg-tile-in 1.3s var(--ease-out) backwards; }
.lg-tile .ic { width: 45%; height: 45%; stroke-width: 1.5; }
.lg-tile--a { width: 56px; height: 56px; top: -42px; left: -30px; --rot: -8deg; animation-delay: .35s; }
.lg-tile--b { width: 48px; height: 48px; bottom: -30px; right: -34px; --rot: 7deg; border-radius: 13px; animation-delay: .5s; }
.lg-tile--c { z-index: 0; width: 40px; height: 40px; top: -58px; right: 58px; --rot: 4deg; border-radius: 12px; opacity: .8; animation-delay: .65s; }
.lg-tile--c .ic { width: 42%; height: 42%; }
@media (max-width: 1240px) { .lg-tile--b { right: -8px; bottom: -26px; } .lg-tile--a { left: -16px; } }
@keyframes lg-tile-in { from { opacity: 0; transform: translate3d(0, 16px, 0) rotate(0deg) scale(.86); } }
@media (prefers-reduced-motion: reduce) { .lg-tile { animation: none; transition: none; } }
.lg-card__in { position: relative; overflow: hidden; border-radius: 26px; padding: 22px 22px 10px; color: var(--snow);
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.025) 55%), rgba(16, 11, 28, .72);
  border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 50px 90px -40px rgba(0,0,0,.9), 0 24px 60px -30px rgba(94,63,230,.5);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .7s var(--ease-out);
  animation: lg-card-in 1.4s var(--ease-out); }
.lg-card.is-tilt .lg-card__in { transition: transform .14s linear; }
.lg-card__in::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(60% 50% at var(--gx, 78%) var(--gy, 0%), rgba(255,255,255,.13), transparent 70%); }
@keyframes lg-card-in { from { transform: rotateX(18deg) rotateY(-26deg) translateY(10px); } }
.lg-card__head { position: relative; display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.lg-card__head b { display: block; font: 600 17px/1.25 var(--f-display); letter-spacing: -.012em; }
.lg-card__head div > span { display: block; margin-top: 3px; font-size: 13px; color: var(--snow-3); }
.lg-card__facts { position: relative; margin: 0; }
.lg-card__facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.lg-card__facts div:last-child { border-bottom: 0; }
.lg-card__facts dt { font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--snow-4); white-space: nowrap; }
.lg-card__facts dd { margin: 0; font-size: 14px; font-weight: 500; color: var(--snow); text-align: right; }
.lg-card__facts .lg-card__mail { align-items: center; padding: 9px 0; }
.lg-card__mail .lg-mail { gap: 8px; }
.lg-card__mail .lg-mail__t { color: var(--snow); font-weight: 500; }
.lg-card .lg-copy { --cs: 28px; --cr: 8px; color: var(--snow-2); }
.lg-card .lg-copy::before { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }
.lg-card .lg-copy .ic { width: 14px; height: 14px; }
.lg-card .lg-copy:hover { color: var(--ink); }
.lg-card .lg-copy:hover::before { background: #fff; border-color: #fff; }

/* the five documents */
.lg-switch-wrap { margin-top: clamp(44px, 5.4vw, 72px); border-top: 1px solid rgba(255,255,255,.08); }
.lg-switch { position: relative; display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 0 20px; }
.lg-switch__a { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 17px 0 14px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--snow-3); transition: color .25s, background .25s; }
.lg-switch__a .ic { width: 17px; height: 17px; opacity: .85; }
.lg-switch__a:hover { color: var(--snow); background: rgba(255,255,255,.06); }
.lg-switch__a.is-on { color: #0A0A0F; background: #fff; box-shadow: 0 8px 24px -10px rgba(160,120,255,.6); }

/* switching between the documents (no page fade, see legal.js): the text rises, the document fades in on its own paper */
.lg.is-swap .lg-hero__text > * { animation: lg-swap-up .5s var(--ease-out) backwards; }
.lg.is-swap .lg-hero__text > :nth-child(2) { animation-delay: .04s; }
.lg.is-swap .lg-hero__text > :nth-child(n+3) { animation-delay: .08s; }
.lg.is-swap .lg-switch__a.is-on { animation: lg-swap-pill .34s var(--ease) backwards; }
.lg.is-swap .lg-layout { animation: lg-swap-in .24s var(--ease) backwards; }
@keyframes lg-swap-up { from { opacity: 0; transform: translateY(12px); } }
@keyframes lg-swap-in { from { opacity: 0; } }
@keyframes lg-swap-pill { from { background: rgba(255,255,255,.06); color: var(--snow-3); box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .lg.is-swap .lg-hero__text > *, .lg.is-swap .lg-switch__a.is-on, .lg.is-swap .lg-layout { animation: none; } }

/* ---------- document (paper) ---------- */
.lg-main { position: relative; padding: clamp(48px, 6vw, 88px) 0 clamp(72px, 8vw, 120px); }
.lg-layout { display: grid; grid-template-columns: clamp(220px, 18vw, 256px) minmax(0, 1fr); gap: clamp(44px, 5vw, 72px); align-items: start; }

/* contents */
.lg-toc { position: sticky; top: calc(var(--header-h) + 28px); }
.lg-toc__in { display: flex; flex-direction: column; max-height: calc(100vh - var(--header-h) - 56px); padding: 8px 0 8px; }
.lg-toc__label { flex: none; font: 500 11px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px 20px; }
.lg-toc__scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; }
.lg-toc__scroll::-webkit-scrollbar { display: none; }
.lg-toc__nav { position: relative; }
.lg-toc__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.lg-toc__fill { position: absolute; left: -.5px; top: 0; width: 2px; height: 0; border-radius: 2px; background: linear-gradient(180deg, var(--violet-2), var(--violet)); transition: height .55s var(--ease-out); }
.lg-toc__list { list-style: none; padding: 0; margin: 0; }
.lg-toc__list a { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding: 6px 4px 6px 20px; font-size: 13.5px; line-height: 1.42; color: var(--ink-3); transition: color .2s; }
.lg-toc__n { font: 500 11px/1.75 var(--f-mono); color: var(--ink-4); transition: color .2s; }
.lg-toc__list a:hover { color: var(--ink); }
.lg-toc__list a.is-read { color: var(--ink-2); }
.lg-toc__list a.is-on { color: var(--ink); }
.lg-toc__list a.is-on .lg-toc__n { color: var(--violet-3); }
.lg-toc__foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin: 12px 0 0 20px; padding-top: 8px; border-top: 1px solid var(--line); }
.lg-toc__btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; font-size: 13px; font-weight: 500; color: var(--ink-3); white-space: nowrap; transition: color .2s; }
.lg-toc__btn .ic { width: 15px; height: 15px; }
.lg-toc__btn:hover { color: var(--violet-3); }
.lg-toc__scroll.is-clipped { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 44px), transparent); }
.lg-toc__scroll.is-clipped.is-scrolled { -webkit-mask-image: linear-gradient(180deg, transparent, #000 24px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(180deg, transparent, #000 24px, #000 calc(100% - 44px), transparent); }
.lg-toc__scroll.is-scrolled:not(.is-clipped) { -webkit-mask-image: linear-gradient(180deg, transparent, #000 24px); mask-image: linear-gradient(180deg, transparent, #000 24px); }

/* the sheet */
.lg-doc { min-width: 0; border-radius: 38px; background: rgba(255,255,255,.6); }
.lg-doc > .bezel__in { border-radius: 29px; padding: clamp(28px, 4vw, 56px) clamp(24px, 4.4vw, 64px) clamp(32px, 4vw, 56px); }
.lg-doc__top { display: flex; justify-content: flex-end; align-items: center; margin: -10px 0 14px; }
.lg-see { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-size: 14.5px; font-weight: 600; color: var(--violet-3); }
.lg-see .ic { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.lg-see:hover .ic { transform: translateX(3px); }
.lg-pre { padding-bottom: 38px; }
.lg-pre h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -.032em; margin-bottom: calc(14px - var(--gt-b)); }
.lg-pre p { font-size: clamp(16.5px, 1.25vw, 18px); line-height: 1.7; color: var(--ink-2); max-width: 680px; }
.lg-pre p + p { margin-top: 12px; }
.lg-pre strong { color: var(--ink); font-weight: 600; }

.lg-sec { border-top: 1px solid var(--line); padding: 40px 0 42px; }
.lg-sec:last-child { padding-bottom: 0; }
.lg-h2 { position: relative; display: flex; align-items: center; padding-left: var(--lg-gut); font-size: clamp(21px, 1.9vw, 26px); line-height: 1.22; letter-spacing: -.026em; margin-bottom: calc(18px - var(--gt-b)); }
.lg-n--sec { position: absolute; left: 0; top: 50%; transform: translateY(-50%); min-width: 34px; text-align: center; font: 500 12px/1 var(--f-mono); letter-spacing: .02em; color: var(--violet-3); background: var(--violet-soft); border-radius: 8px; padding: 6px 7px; }
.lg-anchor { margin-left: 10px; width: 32px; height: 32px; flex: none; border-radius: 9px; display: inline-grid; place-items: center; color: var(--ink-4); opacity: 0; transition: opacity .2s, color .2s, background .2s; }
.lg-anchor .ic { width: 16px; height: 16px; }
.lg-h2:hover .lg-anchor, .lg-anchor:focus-visible { opacity: 1; }
.lg-anchor:hover { color: var(--violet-3); background: var(--violet-soft); }
.lg-sec__body { padding-left: var(--lg-gut); font-size: 16.5px; line-height: 1.75; color: var(--ink-2); max-width: calc(690px + var(--lg-gut)); text-wrap: pretty; }
.lg-sec__body > * + * { margin-top: 14px; }
.lg-sec__body strong { color: var(--ink); font-weight: 600; }
.lg-sec__body a:not(.btn), .lg-pre a { color: var(--violet-3); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s; overflow-wrap: anywhere; }
.lg-sec__body a:not(.btn):hover, .lg-pre a:hover { color: var(--ink); }
.lg-ext::after { content: ""; display: inline-block; width: .72em; height: .72em; margin-left: .22em; vertical-align: .02em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M7 7h10v10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M7 7h10v10'/%3E%3C/svg%3E") center / contain no-repeat; }
.lg-ext { white-space: nowrap; }
.lg-self { color: var(--ink); font-weight: 500; }
/* clause numbers hang in the gutter */
.lg-cl { position: relative; }
.lg-cl > .lg-n { position: absolute; left: calc(-1 * var(--lg-gut)); top: .34em; width: calc(var(--lg-gut) - 12px); font: 500 12.5px/1.4 var(--f-mono); color: var(--ink-4); letter-spacing: .01em; }
.lg-h3 { position: relative; font-size: 18.5px; line-height: 1.3; letter-spacing: -.016em; color: var(--ink); }
.lg-sec__body > .lg-h3 { margin-top: 30px; }
.lg-h3 > .lg-n { position: absolute; left: calc(-1 * var(--lg-gut)); top: .3em; font: 500 12.5px/1.4 var(--f-mono); color: var(--ink-4); letter-spacing: .01em; }
/* lists */
.lg-sec__body ul, .lg-pre ul { list-style: none; padding: 0; display: grid; gap: 7px; }
.lg-sec__body li { position: relative; padding-left: 24px; }
.lg-sec__body li::before { content: ""; position: absolute; left: 3px; top: 13px; width: 9px; height: 2px; border-radius: 2px; background: var(--violet); opacity: .85; }
.lg-sec__body li ul { margin-top: 8px; }
.lg-sec__body li li::before { width: 5px; height: 5px; border-radius: 50%; top: 11px; left: 5px; background: var(--ink-4); opacity: 1; }
.lg-sec__body li > p { margin-top: 8px; }
/* company block + copyable address */
.lg-addr { font-style: normal; display: grid; gap: 4px; justify-items: start; padding: 20px 22px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); font-size: 15.5px; line-height: 1.55; }
.lg-addr > span:first-child { font: 600 17px/1.4 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
.lg-mail { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; max-width: 100%; }
.lg-mail__t { font-weight: 600; color: var(--ink); -webkit-user-select: all; user-select: all; overflow-wrap: anywhere; }
/* copy button: the button itself is a 44px tap target; the small visible square (--cs) is drawn inside it,
   and negative margins keep the layout exactly as if the button were --cs wide */
.lg-copy { --cs: 32px; --cr: 9px; --hit: max(44px, var(--cs)); --pad: calc((var(--hit) - var(--cs)) / 2);
  position: relative; flex: none; width: var(--hit); height: var(--hit); margin: calc(-1 * var(--pad)); padding: 0; border: 0; background: none; border-radius: 12px;
  display: inline-grid; place-items: center; vertical-align: middle; color: var(--ink-3); transition: color .2s, transform .2s var(--ease); }
.lg-copy::before { content: ""; position: absolute; inset: var(--pad); border-radius: var(--cr); border: 1px solid var(--line-2); background: var(--paper-2); transition: background .2s, border-color .2s; }
.lg-copy .ic { position: relative; width: 15px; height: 15px; }
.lg-copy:hover { color: #fff; }
.lg-copy:hover::before { background: #0A0A0F; border-color: #0A0A0F; }
[data-theme="night"] .lg-copy:hover { color: #0A0A0F; }
[data-theme="night"] .lg-copy:hover::before { background: #fff; border-color: #fff; }
.lg-copy:active { transform: scale(.94); }
.lg-copy:focus-visible { outline-offset: calc(2px - var(--pad)); }
.lg-sec__body p .lg-copy, .lg-pre .lg-copy { --cs: 28px; --cr: 8px; margin-block: calc(-1 * var(--pad) - 4px); }
.lg-sec__body p .lg-copy .ic { width: 14px; height: 14px; }
.lg-addr .lg-copy { --cs: 26px; --cr: 8px; margin-block: calc(-1 * var(--pad) - 5px); }
.lg-addr .lg-copy .ic { width: 13px; height: 13px; }
/* tables */
.lg-table { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.lg-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.lg-table th { text-align: left; font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); background: var(--paper); padding: 12px 18px; }
.lg-table td { padding: 13px 18px; border-top: 1px solid var(--line); vertical-align: top; }
.lg-table td:first-child { width: 46%; color: var(--ink); font-weight: 500; }

/* Bots: the two applications */
.lg-bots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 0 14px; margin-bottom: 26px; }
/* head, text and commands share rows across the two cards: the command lines always line up */
@supports (grid-template-rows: subgrid) { .lg-bots > .lg-bot { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; } }
.lg-bot { position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: 22px; padding: 22px 22px 20px; color: var(--snow); background: linear-gradient(170deg, #17122A, #0A0710 70%); border: 1px solid rgba(255,255,255,.06); box-shadow: 0 24px 50px -28px rgba(20,10,60,.55); }
.lg-bot::before { content: ""; position: absolute; right: -30%; top: -60%; width: 90%; height: 120%; background: radial-gradient(closest-side, rgba(138,108,255,.26), transparent); pointer-events: none; }
.lg-bot__head { position: relative; display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.lg-bot h3 { font-size: 19px; line-height: 1.2; color: #fff; }
.lg-bot__head div > span { display: block; font-size: 12.5px; color: var(--snow-3); margin-top: 2px; }
.lg-sec__body .lg-bot p { position: relative; font-size: 14.5px; line-height: 1.62; color: var(--snow-2); }
/* commands: plain mono text on the card's floor (both cards line up), nothing that looks like a button */
.lg-sec__body .lg-bot .lg-cmds { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-start; gap: 4px 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.07); font: 500 12.5px/1.6 var(--f-mono); color: #fff; }
.lg-cmds__k { width: 100%; font: 500 10px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--snow-4); }
.lg-cmds code { font: inherit; color: inherit; }
.lg-bot > p:not(.lg-cmds) { margin-bottom: 16px; }

/* Data deletion: steps (vertical timeline) */
.lg-sec__body .lg-steps { list-style: none; padding: 0; display: grid; gap: 0; margin: 6px 0 0; }
.lg-sec__body .lg-steps li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; row-gap: 3px; padding: 0 0 24px; }
.lg-sec__body .lg-steps li:last-child { padding-bottom: 0; }
.lg-sec__body .lg-steps li::before { display: none; }
.lg-steps li:not(:last-child)::after { content: ""; position: absolute; left: 21.5px; top: 54px; bottom: 8px; width: 1px; background: repeating-linear-gradient(180deg, var(--line-2) 0 5px, transparent 5px 10px); }
.lg-steps__dot { grid-row: span 2; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #2B2540, #0C0913 70%); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 22px -12px rgba(20,10,60,.55); }
.lg-steps__dot .ic { width: 19px; height: 19px; }
.lg-steps li:nth-child(3) .lg-steps__dot { background: linear-gradient(160deg, #8A6CFF, #5E3FE6); }
.lg-steps b { display: flex; align-items: baseline; gap: 9px; padding-top: 1px; font: 600 16.5px/1.3 var(--f-display); color: var(--ink); letter-spacing: -.012em; }
.lg-steps b em { font: 500 11px/1 var(--f-mono); font-style: normal; color: var(--violet-3); }
.lg-steps li > span:last-child { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }

/* Data deletion: request writer */
/* two rows: the two fields side by side with the note, then the email at full width (no half-empty pane) */
.lg-req { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 24px !important; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--paper); }
.lg-req__fields { display: flex; flex-direction: column; gap: 16px; padding: 22px 24px 20px; }
.lg-req__title { font: 600 17px/1.3 var(--f-display); color: var(--ink); letter-spacing: -.012em; }
.lg-req__inputs { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px 14px; align-items: start; }
.lg-req .field > label { font-size: 13px; }
.lg-req__note { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.lg-req__mail { display: flex; flex-direction: column; padding: 6px 24px 24px; background: var(--paper-2); border-top: 1px solid var(--line); }
.lg-req__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.lg-req__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.lg-req__row > div { min-width: 0; display: grid; gap: 5px; }
.lg-req__row span { font: 500 10.5px/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-4); }
.lg-req__row b { font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.lg-req__body { margin: 16px 0 18px; white-space: pre-wrap; overflow-wrap: anywhere; font: 14.5px/1.62 var(--f-body); color: var(--ink-2); background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.lg-req__body.is-empty { color: var(--ink-3); }
.lg-req__go { align-self: flex-start; }
.lg-req__go .ic { width: 16px; height: 16px; }

/* Cookie Policy: on-site choice */
.lg-consent { margin-top: 24px !important; border-radius: 22px; padding: 20px 22px 18px; background: var(--paper); border: 1px solid var(--line); }
.lg-consent__head { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.lg-consent__head b { display: block; font: 600 17px/1.3 var(--f-display); color: var(--ink); letter-spacing: -.012em; }
.lg-consent__head div > span { display: block; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); margin-top: 2px; }
.lg-consent__row { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.lg-consent__row b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.lg-consent__row small { display: block; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); margin-top: 2px; }
.lg-consent__row .switch:disabled { opacity: .55; cursor: default; }
.lg-consent__foot { padding-top: 16px; }

/* ---------- other documents (white) ---------- */
.lg-more { position: relative; padding: clamp(56px, 7vw, 100px) 0 clamp(64px, 8vw, 110px); border-top: 1px solid var(--line); }
.lg-more__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 26px; }
.lg-more__head .link { min-height: 44px; }
@media (min-width: 1081px) { .lg-more__top { display: none !important; } } /* desktop: the contents keep their own "Back to top" */
.lg-more__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.lg-mcard { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 212px; padding: 22px; border-radius: 22px; background: var(--paper); border: 1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; }
.lg-mcard:hover { transform: translateY(-4px); background: var(--paper-2); border-color: var(--line-2); box-shadow: var(--shadow-3); }
.lg-mcard .lg-glyph { margin-bottom: 12px; }
.lg-mcard b { font: 600 17px/1.25 var(--f-display); color: var(--ink); letter-spacing: -.015em; }
.lg-mcard__txt { font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.lg-mcard__meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 16px; font: 500 10.5px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.lg-mcard__meta .ic { width: 16px; height: 16px; color: var(--ink); transition: transform .3s var(--ease); }
.lg-mcard:hover .lg-mcard__meta .ic { transform: translateX(4px); }

/* ---------- mobile: floating contents bar + sheet ---------- */
.lg-dock { position: fixed; z-index: 90; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 8px; width: min(440px, calc(100vw - 24px));
  transform: translate(-50%, 28px); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease), transform .5s var(--ease-out); }
.lg-dock[hidden] { display: none; }
.lg-dock.in { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
body:has(#cookie.in:not([hidden])) .lg-dock.in, body.menu-open .lg-dock.in { opacity: 0; pointer-events: none; transform: translate(-50%, 28px); }
.lg-dock__toc, .lg-dock__top { height: 58px; color: var(--snow); background: linear-gradient(180deg, #221B34, #0E0A18) #15101F; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 44px -14px rgba(8,4,20,.6), inset 0 1px 0 rgba(255,255,255,.1); }
.lg-dock__toc { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0 18px 0 11px; border-radius: 999px; text-align: left; }
.lg-dock__toc > .ic { width: 18px; height: 18px; opacity: .7; flex: none; }
.lg-dock__top { width: 58px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.lg-dock__top .ic { width: 19px; height: 19px; }
.lg-ring { width: 36px; height: 36px; flex: none; transform: rotate(-90deg); }
.lg-ring circle { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 3; }
.lg-ring .lg-ring__p { stroke: var(--violet-2); stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.lg-dock__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.lg-dock__txt small { font: 500 10px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--snow-3); }
.lg-dock__txt b { font-size: 14.5px; font-weight: 600; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.lg-sheet { position: fixed; inset: 0; z-index: 120; }
.lg-sheet[hidden] { display: none; }
.lg-sheet__scrim { position: absolute; inset: 0; background: rgba(5, 3, 9, .5); opacity: 0; transition: opacity .3s var(--ease); }
.lg-sheet.in .lg-sheet__scrim { opacity: 1; }
.lg-sheet__panel { position: absolute; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-height: min(74vh, 640px); overflow: auto; overscroll-behavior: contain;
  border-radius: 28px; padding: 6px 8px 10px; background: #0F0B19; color: var(--snow); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 80px -20px rgba(0,0,0,.75);
  transform: translateY(26px); opacity: 0; transition: transform .5s var(--ease-out), opacity .3s var(--ease); }
.lg-sheet.in .lg-sheet__panel { transform: none; opacity: 1; }
.lg-sheet__head { position: sticky; top: -6px; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 10px 6px 10px 14px; background: #0F0B19; }
.lg-sheet__head b { font: 600 17px/1.2 var(--f-display); letter-spacing: -.015em; }
.lg-sheet__x { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.07); }
.lg-sheet__x .ic { width: 18px; height: 18px; }
.lg-sheet__list { list-style: none; padding: 0; margin: 0; }
.lg-sheet__list a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: baseline; min-height: 46px; padding: 12px 14px; border-radius: 16px; font-size: 15.5px; line-height: 1.35; color: var(--snow-2); }
.lg-sheet__list a.is-on { background: rgba(255,255,255,.08); color: #fff; font-weight: 600; }
.lg-sheet__list .lg-toc__n { color: var(--snow-4); }
.lg-sheet__list a.is-on .lg-toc__n { color: var(--violet-2); }

/* ---------- responsive ---------- */
@media (min-width: 1081px) { .lg-dock, .lg-sheet { display: none !important; } }
@media (max-width: 1080px) {
  .lg-layout { grid-template-columns: minmax(0, 1fr); } /* full width: the document lines up with the hero and the cards below */
  .lg-toc { display: none; }
  .lg-anchor { display: none; }
  .lg-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .lg-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .lg-card { display: none; }
  .lg-hero__meta { display: flex; }
}
@media (max-width: 600px) {
  .lg-req__inputs, .lg-req__meta { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .lg { --lg-gut: 0px; }
  .lg-hero { padding-top: calc(var(--header-h) + 44px); }
  .lg-hero__text { gap: 18px; }
  .lg-hero__title { font-size: clamp(40px, 11.4vw, 52px); }
  /* one swipeable row, bleeding to the screen edges; soft edges only where the row continues */
  .lg-switch-wrap { margin-top: 36px; }
  .lg-switch { flex-wrap: nowrap; gap: 4px; margin-inline: calc(-1 * var(--gutter)); padding: 12px var(--gutter) 16px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .lg-switch::-webkit-scrollbar { display: none; }
  .lg-switch__a { flex: none; scroll-snap-align: start; padding: 0 14px 0 12px; font-size: 14px; }
  .lg-switch.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
  .lg-switch.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px); mask-image: linear-gradient(90deg, transparent, #000 56px); }
  .lg-switch.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
  .lg-main { padding: 28px 0 64px; }
  .lg-doc__top { justify-content: flex-start; margin: -8px 0 10px; }
  .lg-doc { padding: 0; margin-inline: -8px; background: none; border: 0; box-shadow: none; } /* 12px from the screen edges, like the dock and the cookie banner */
  .lg-doc > .bezel__in { padding: 24px 18px 28px; border-radius: 22px; }
  .lg-doc__top { margin-bottom: 26px; }
  .lg-pre { padding-bottom: 30px; }
  .lg-pre h2 { font-size: 25px; }
  .lg-sec { padding: 30px 0 32px; }
  .lg-h2 { align-items: flex-start; gap: 12px; font-size: 21px; margin-bottom: calc(14px - var(--gt-b)); }
  .lg-n--sec { position: static; transform: none; flex: none; margin-top: 1px; }
  .lg-sec__body { font-size: 15.5px; line-height: 1.72; }
  .lg-cl > .lg-n, .lg-h3 > .lg-n { position: static; display: inline; width: auto; margin-right: 8px; }
  .lg-sec__body li { padding-left: 20px; }
  .lg-sec__body li::before { top: 12px; }
  .lg-sec__body li li::before { top: 10.5px; }
  .lg-sec__body .lg-steps li { column-gap: 14px; }
  .lg-steps b { font-size: 15.5px; }
  .lg-steps li > span:last-child { font-size: 14.5px; }
  .lg-addr { padding: 18px; font-size: 15px; }
  .lg-table table, .lg-table tbody, .lg-table tr, .lg-table td { display: block; width: auto !important; }
  .lg-table thead { display: none; }
  .lg-table tr { padding: 14px 16px; border-top: 1px solid var(--line); }
  .lg-table tr:first-child { border-top: 0; }
  .lg-table td { padding: 0; border: 0; }
  .lg-table td:first-child { margin-bottom: 4px; }
  .lg-table td:last-child { color: var(--ink-3); font-size: 14.5px; }
  .lg-bots { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 12px; }
  .lg-bots > .lg-bot { display: flex; grid-row: auto; }
  .lg-req, .lg-consent { margin-inline: -6px; }
  .lg-req__fields { padding: 20px 18px; }
  .lg-req__mail { padding: 8px 18px 20px; }
  .lg-consent { padding: 18px 16px 16px; }
  .lg-more__head .t-h3 { font-size: 22px; }
  .lg-more__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .lg-mcard { min-height: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; column-gap: 14px; row-gap: 2px; align-items: center; padding: 16px 18px; }
  .lg-mcard .lg-glyph { grid-row: span 2; margin: 0; }
  .lg-mcard__meta { grid-column: 3; grid-row: 1 / span 2; padding: 0; font-size: 0; }
  .lg-mcard__meta .ic { font-size: 16px; }
  .lg-mcard__txt { font-size: 13.5px; }
}

/* phones: the current document shows its name, the four others their icon only: the row fits, no word is ever cut */
@media (max-width: 460px) {
  .lg-switch { justify-content: space-between; gap: 2px; }
  .lg-switch__a { position: relative; gap: 8px; padding: 0 14px 0 12px; }
  .lg-switch__a:not(.is-on) { width: 44px; padding: 0; justify-content: center; background: rgba(255,255,255,.05); }
  .lg-switch__a:not(.is-on) .ic { width: 18px; height: 18px; opacity: .9; }
  .lg-switch__a:not(.is-on) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* ---------- print: the document only ---------- */
@media print {
  body[data-page="legal"] .site-header, body[data-page="legal"] .site-footer, body[data-page="legal"] #cookie, body[data-page="legal"] #mega,
  .lg-switch, .lg-card, .lg-toc, .lg-more, .lg-dock, .lg-sheet, .lg-anchor, .lg-copy, .hinge, .lg-hero .bg-beam { display: none !important; }
  .lg-hero { padding: 0 0 12px; background: #fff !important; color: #000 !important; }
  .lg-hero__title { color: #000 !important; background: none !important; -webkit-text-fill-color: #000; }
  .lg-hero .t-lead { color: #333 !important; }
  .lg-eyebrow { color: #555 !important; } .lg-eyebrow::before { box-shadow: none; }
  .lg-hero__meta { display: flex !important; } .lg-hero__meta li { border-color: #ccc; color: #333; background: none; }
  .lg-main { padding: 0; background: #fff !important; }
  .lg-layout { display: block; }
  .lg-doc, .lg-doc > .bezel__in { border: 0 !important; box-shadow: none !important; padding: 0 !important; background: none !important; }
  .lg-sec { break-inside: auto; } .lg-h2 { break-after: avoid; }
}

/* ================= 404 ================= */
.nf { position: relative; overflow-x: clip; overflow-y: visible; display: grid; align-items: center; min-height: min(100svh, 1000px); padding: calc(var(--header-h) + 36px) 0 clamp(110px, 13vw, 170px);
  background: radial-gradient(46% 40% at 50% 36%, rgba(122, 90, 248, .11), transparent 72%), var(--paper); }
.nf .room-top { top: var(--header-h); opacity: .45; -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%); mask-image: linear-gradient(180deg, transparent, #000 45%); }
.nf .room-bottom { opacity: .55; }
.nf__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.nf-num { display: flex; align-items: baseline; justify-content: center; gap: .035em; font-family: var(--f-display); font-weight: 600; font-size: clamp(132px, 20vw, 280px); line-height: .92; letter-spacing: -.06em; -webkit-user-select: none; user-select: none; }
.nf-num__d { background: linear-gradient(180deg, #17141F 18%, #57536A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding: .06em .12em .12em .02em; margin: -.06em -.11em -.12em -.01em; }
.nf-zero { position: relative; display: inline-block; width: .8em; height: .72em; margin: 0 .03em; perspective: 900px; }
.nf-tilt { display: block; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
.nf-dia { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 14px 22px rgba(23, 20, 31, .16)); }
.nf-dia__line { stroke-dasharray: 100; stroke-dashoffset: 0; animation: nf-draw 1.2s var(--ease-in-out) .1s backwards; }
.nf-dia__fill { animation: nf-fade 1.2s var(--ease) .8s backwards; }
.nf-dia__spec { stroke-dasharray: 16 120; stroke-dashoffset: 16; opacity: 0; animation: nf-spec 1.6s var(--ease-in-out) 1.2s; }
@keyframes nf-draw { from { stroke-dashoffset: 100; } }
@keyframes nf-fade { from { opacity: 0; } }
@keyframes nf-spec { 0% { stroke-dashoffset: 16; opacity: 0; } 20% { opacity: .75; } 100% { stroke-dashoffset: -100; opacity: 0; } }
.nf-floor { position: absolute; left: 12%; right: 12%; bottom: -.11em; height: .07em; border-radius: 50%; background: radial-gradient(closest-side, rgba(60, 34, 150, .28), transparent); filter: blur(5px); transform: translateX(var(--sx, 0px)); }
.nf__title { margin-top: calc(30px - var(--gt-t)); font-size: clamp(30px, 3.3vw, 48px); line-height: 1.08; letter-spacing: -.036em; }
.nf__lead { margin-top: 14px; max-width: 560px; font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.55; color: var(--ink-3); }
.nf__token { display: block; margin-top: 8px; font-size: 14px; color: var(--ink-4); }
.nf__token code { font: 500 13px/1 var(--f-mono); color: var(--ink-2); background: var(--paper-3); border: 1px solid var(--line); padding: 3px 8px; border-radius: 7px; overflow-wrap: anywhere; }
.nf-search { position: relative; z-index: 5; width: min(560px, 100%); margin-top: 32px; text-align: left; }
.nf-search__box { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 11px 0 20px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-2); transition: border-color .2s, box-shadow .25s; }
.nf-search__box:focus-within { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(123, 77, 255, .14), var(--shadow-2); }
.nf-search__box > .ic { width: 20px; height: 20px; color: var(--ink-3); }
.nf-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--ink); }
.nf-search input::placeholder { color: var(--ink-4); }
.nf-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.nf-search__kbd { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-3); }
.nf-search__kbd .ic { width: 16px; height: 16px; }
.nf-results { position: absolute; left: 0; right: 0; top: calc(100% + 10px); list-style: none; margin: 0; padding: 8px; max-height: 392px; overflow: auto; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-3); }
.nf-results[hidden] { display: none; }
.nf-results a { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 16px; align-items: center; gap: 12px; min-height: 52px; padding: 8px 10px; border-radius: 14px; color: var(--ink); transition: background .15s; }
.nf-results a.is-on { background: var(--paper); }
.nf-results a > .ic { width: 16px; height: 16px; color: var(--ink-4); }
.nf-results a.is-on > .ic { color: var(--ink); }
.nf-results .brand-tile { --bt: 36px; border-radius: 10px; }
.nf-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #2B2540, #0C0913 70%); }
.nf-ico .ic { width: 17px; height: 17px; }
.nf-res__t { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-res__t mark { background: none; color: var(--violet-3); font-weight: 600; }
.nf-res__k { font: 500 10.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.nf-empty { padding: 14px 12px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.nf-popular { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 18px; }
.nf-popular > span { font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); margin-right: 4px; }
.nf-popular .tag { position: relative; height: 34px; }
.nf-popular .tag:not(:hover) { background: rgba(255, 255, 255, .75); }
.nf-popular .tag::after { content: ""; position: absolute; inset: -5px -2px; }
.nf__cta { margin-top: 30px; justify-content: center; }
.nf__cta .ic { width: 17px; height: 17px; }
.nf-help { padding: clamp(56px, 7vw, 100px) 0 clamp(64px, 8vw, 110px); border-top: 1px solid var(--line); }
.nf-help__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.nf-card { display: block; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.nf-card:hover { transform: translateY(-4px); }
.nf-card .bezel__in { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; transition: box-shadow .4s var(--ease); }
.nf-card:hover .bezel__in { box-shadow: var(--shadow-3); }
.nf-card .lg-glyph { margin-bottom: 14px; }
.nf-card b { font: 600 21px/1.2 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.nf-card__txt { font-size: 15px; line-height: 1.55; color: var(--ink-3); }
.nf-card .link { margin-top: 10px; }
.nf-card:hover .link .ic { transform: translateX(4px); }
@media (max-width: 1024px) { .nf-help__grid { gap: 12px; } .nf-card .bezel__in { padding: 24px 22px; } .nf-card b { font-size: 19px; } .nf-card__txt { font-size: 14.5px; } }
@media (max-width: 720px) { .nf-help__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .nf { min-height: 0; padding: calc(var(--header-h) + 40px) 0 64px; }
  .nf .room-bottom { height: 180px; }
  .nf-num { font-size: clamp(112px, 34vw, 150px); }
  .nf__title { margin-top: calc(24px - var(--gt-t)); font-size: 28px; }
  .nf__lead { font-size: 16px; }
  .nf-search { margin-top: 26px; }
  .nf-search__box { height: 56px; padding-left: 18px; }
  .nf-search__kbd { display: none; }
  .nf-popular .tag { height: 40px; }
  .nf-popular > span { width: 100%; margin: 0 0 2px; }
  .nf__cta { width: 100%; }
  .nf__cta .btn { flex: 1; }
  .nf-results a { grid-template-columns: 36px minmax(0, 1fr) 16px; }
  .nf-res__k { display: none; }
  .nf-card { border-radius: 28px; padding: 6px; }
  .nf-card .bezel__in { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; column-gap: 14px; row-gap: 2px; align-items: center; padding: 16px 16px 16px 16px; border-radius: 22px; }
  .nf-card .lg-glyph { grid-row: span 2; margin: 0; }
  .nf-card b { font-size: 17px; }
  .nf-card__txt { font-size: 14px; line-height: 1.45; }
  .nf-card .link { grid-column: 3; grid-row: 1 / span 2; margin: 0; font-size: 0; gap: 0; }
  .nf-card .link .ic { width: 18px; height: 18px; }
}

/* page canvas under the header on the 404 (light): the header sits on paper there, like the section below it */
html:not([data-mode="dark"]) body[data-page="404"], html:not([data-mode="dark"]) body[data-page="nothing-here"] { background: var(--paper); }

/* ================= dark mode (html[data-mode="dark"]: paper/white sections become night, tokens remapped) ================= */
.lg-main[data-was], .lg-more[data-was], .nf[data-was], .nf-help[data-was] { --violet-3: #A690FF; }
[data-was] .lg-glyph--ink { background: linear-gradient(160deg, #2E2744, #151120 70%); border-color: rgba(255,255,255,.1); }
[data-was] .lg-bot { border-color: rgba(255,255,255,.1); background: linear-gradient(170deg, #1B1530, #0E0A16 70%); }
[data-was] .lg-steps__dot { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(255,255,255,.08); }
[data-was] .lg-mcard:hover { background: #15121E; }
/* 404 */
.nf[data-was] { background: radial-gradient(46% 40% at 50% 36%, rgba(122, 90, 248, .16), transparent 72%), var(--paper); }
.nf[data-was] .room-top, .nf[data-was] .room-bottom { opacity: .1; }
.nf[data-was] .floor-light { opacity: .12; }
.nf[data-was] .nf-num__d { background-image: linear-gradient(180deg, #FFFFFF 18%, #8C87A3 100%); }
.nf[data-was] #nf-g stop:first-child { stop-color: #FFFFFF; }
.nf[data-was] #nf-g stop:last-child { stop-color: #8C87A3; }
.nf[data-was] .nf-dia__ghost { stroke: rgba(255,255,255,.06); }
.nf[data-was] .nf-dia { filter: drop-shadow(0 14px 26px rgba(122, 90, 248, .22)); }
.nf[data-was] .nf-floor { background: radial-gradient(closest-side, rgba(166, 144, 255, .34), transparent); }
.nf[data-was] .nf-search__box { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); box-shadow: none; }
.nf[data-was] .nf-search__box:focus-within { border-color: var(--violet-2); box-shadow: 0 0 0 4px rgba(122, 90, 248, .22); }
.nf[data-was] .nf-search input { color: var(--snow); }
.nf[data-was] .nf-search input::placeholder { color: var(--snow-4); }
.nf[data-was] .nf-search__box > .ic { color: var(--snow-3); }
.nf[data-was] .nf-search__kbd { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: var(--snow-3); }
.nf[data-was] .nf-results { background: #121019; border-color: rgba(255,255,255,.1); box-shadow: 0 30px 80px -24px rgba(0,0,0,.8); }
.nf[data-was] .nf-results a { color: var(--snow); }
.nf[data-was] .nf-results a.is-on { background: rgba(255,255,255,.08); }
.nf[data-was] .nf-popular .tag:not(:hover) { background: rgba(255,255,255,.04); }
.nf[data-was] .nf__token code { background: rgba(255,255,255,.06); color: var(--snow-2); border-color: rgba(255,255,255,.1); }
.nf[data-was] .nf-ico { box-shadow: 0 0 0 1px rgba(255,255,255,.1); }
/* Privacy §9 → Cookie Policy (UI link after the validated text) */
.lg-sec__body .lg-xref { margin-top: 6px; }
.lg-sec__body a.lg-see { text-decoration: none; color: var(--violet-3); }
.lg-sec__body a.lg-see:hover { color: var(--violet-3); }
/* INO's face on the AI & Bots page (Thomas 28/09: her face, not the InoAi token) */
.lg-glyph--face { overflow: hidden; border-radius: 50%; padding: 0; }
.lg-glyph--face img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

/* ==== pages/news.css ==== */
/* ================= KCALB NEWS (prefix .nw-) =================
   Paper newsroom + one night market board. Built on tokens/components; nothing here restyles a shared component globally. */

.nw { --nw-bar-h: 56px; --nw-rail: 300px; position: relative; }
/* behind the sticky bar at rest: night on pages that open on a night hero */
.nw:not(.nw--home) { background: linear-gradient(var(--night), var(--night)) top / 100% 480px no-repeat; }
@media (max-width: 760px) { .nw { --nw-bar-h: 52px; } }

/* ---------- shared bits ---------- */
.nw-sep { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .45; margin: 0 8px; vertical-align: middle; flex: none; }
.nw-out { width: 13px !important; height: 13px !important; margin-left: 4px; vertical-align: -1px; opacity: .45; display: inline-block; transition: opacity .2s, transform .3s var(--ease); }
a:hover > .nw-out, a:hover .nw-out { opacity: .9; transform: translate(1px, -1px); }
.nw-src { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.nw-src a { color: var(--ink-2); font-weight: 600; }
.nw-src a:hover { color: var(--violet-3); }
.nw-src--night, [data-theme="night"] .nw-src { color: var(--snow-3); }
[data-theme="night"] .nw-src a { color: var(--snow); }
[data-theme="night"] .nw-src a:hover { color: var(--violet-2); }
.nw-up { font-weight: 600; color: var(--ink); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--ease); position: relative; z-index: 2; }
.nw-up:hover { background-size: 100% 1px; }
[data-theme="night"] .nw-up { color: var(--snow); }

/* category label + commercial flags */
.nw-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; color: var(--ink-3); }
.nw-kick { position: relative; z-index: 2; font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--violet-3); line-height: 1.3; }
.nw-kick:hover { color: var(--ink); }
[data-theme="night"] .nw-kick { color: var(--violet-2); }
[data-theme="night"] .nw-kick:hover { color: #fff; }
.nw-flag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 6px; border: 1px solid var(--line-2); font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); background: var(--paper-2); white-space: nowrap; }
[data-theme="night"] .nw-flag { border-color: var(--nline-2); color: var(--snow-2); background: rgba(255,255,255,.04); }

/* cards: the title link covers the whole card; inner links sit above it */
.nw-card { position: relative; }
.nw-cl::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.nw-cl { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease); }
.nw-card:hover .nw-cl, .nw-cl:focus-visible { background-size: 100% 1px; }
.nw-card__m { font-size: 13px; color: var(--ink-3); display: flex; align-items: center; flex-wrap: wrap; }
[data-theme="night"] .nw-card__m { color: var(--snow-3); }

/* images */
/* placeholder while a cover loads: the surface's own grey (paper), a dark one on night surfaces */
.nw-img { position: relative; overflow: hidden; background: var(--paper-3); border-radius: 16px; aspect-ratio: 16 / 9; isolation: isolate; }
[data-theme="night"] .nw-img { background: #0B0912; }
.nw-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out), filter .6s; }
.nw-img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(10, 8, 20, .08); pointer-events: none; }
.nw-card:hover .nw-img img { transform: scale(1.035); }
/* covers with words baked in: whole picture, blurred fill of the same picture around it */
.nw-img--text::before { content: ""; position: absolute; inset: -24px; z-index: -1; background: var(--nw-fill) center / cover no-repeat; filter: blur(20px) brightness(.62) saturate(1.15); }
.nw-img--text img { object-fit: contain; }
.nw-card:hover .nw-img--text img { transform: scale(1.02); }
.nw-img--none { display: grid; place-items: center; align-content: center; gap: 12px; background: radial-gradient(70% 90% at 50% 0%, rgba(160,120,255,.45), transparent 70%), #07050D; color: var(--snow); }
.nw-img--none > span { width: 22%; max-width: 64px; opacity: .9; }
.nw-img--none > span .ic { width: 100%; height: auto; }
.nw-img--none em { font-style: normal; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--snow-3); }

/* avatars + byline */
.nw-av { width: var(--av, 36px); height: var(--av, 36px); border-radius: 50%; object-fit: cover; flex: none; background: var(--paper-3); filter: grayscale(1); }
.nw-av--mark { display: inline-grid; place-items: center; background: #0B0912; color: #fff; filter: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.nw-av--mark .ic { width: 56%; height: 56%; }
[data-theme="night"] .nw-av--mark { background: linear-gradient(145deg, #2A2140, #0B0912); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.nw-byline { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 13.5px; color: var(--ink-3); }
.nw-byline .nw-sep { margin: 0; }
.nw-byline--sm { font-size: 13px; gap: 4px 8px; }

/* section heads (newspaper rule) */
.nw-head { display: flex; align-items: baseline; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 28px; padding-top: 18px; border-top: 1px solid var(--ink); }
[data-theme="night"] .nw-head { border-top-color: rgba(255,255,255,.28); }
.nw-h { font-size: clamp(24px, 2.3vw, 32px); line-height: 1.1; letter-spacing: -.03em; margin-right: auto; }
.nw-head__note { font-size: 13.5px; color: var(--ink-3); }
[data-theme="night"] .nw-head__note { color: var(--snow-3); }
.nw-more-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.nw-more-link .ic { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.nw-more-link:hover .ic { transform: translateX(3px); }
[data-theme="night"] .nw-more-link { color: var(--snow); }
.nw-head--sm { margin-bottom: 20px; }
.nw-head--sm .nw-h { font-size: clamp(21px, 1.8vw, 26px); }
.nw-colh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 2px solid var(--ink); }
.nw-colh h2 { font-size: 19px; letter-spacing: -.02em; line-height: 1.2; }
.nw-colh span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.nw-colh__a { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.nw-colh__a .ic { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.nw-colh__a:hover .ic { transform: translateX(3px); }

.nw-sec { position: relative; padding-block: clamp(44px, 5.4vw, 80px); overflow: clip; }

/* ================= masthead ================= */
.nw-cap { position: relative; overflow: clip; background: var(--night); }
.nw-cap--slim { height: var(--header-h); }
.nw-cap--slim .bg-beam { background: radial-gradient(40% 180% at 50% -40%, rgba(160,120,255,.45), transparent 70%); }
.nw-cap--home { padding: calc(var(--header-h) + clamp(18px, 2vw, 28px)) 0 clamp(20px, 2vw, 28px); }
.nw-cap--home .bg-beam { background: radial-gradient(42% 120% at 50% -30%, rgba(160,120,255,.6), rgba(110,60,240,.16) 52%, transparent 78%); transform-origin: 50% 0; animation: nw-beam 18s ease-in-out infinite alternate; }
@keyframes nw-beam { from { transform: translateX(-4%) scale(1); opacity: .82; } to { transform: translateX(4%) scale(1.1); opacity: 1; } }
.nw-cap__room { opacity: .07 !important; }
.nw-cap__in { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap; }
.nw-cap__id { display: flex; align-items: flex-end; gap: 0 clamp(18px, 1.8vw, 26px); min-width: 0; }
.nw-mast { font-size: clamp(44px, 5.4vw, 80px); line-height: .9; letter-spacing: -.05em; font-weight: 600; margin: calc(-1 * var(--gt-t)) calc(-1 * var(--gt-e)) calc(-1 * var(--gt-b)) 0; padding-bottom: calc(.04em + var(--gt-b)); }
/* the beat: what the portal covers, set against the title like a newspaper's strapline */
.nw-cap__beat { display: flex; align-items: center; gap: 12px; margin: 0 0 .5em; padding: 2px 0 2px clamp(18px, 1.8vw, 26px); border-left: 1px solid rgba(255,255,255,.2); font-family: var(--f-display); font-size: clamp(16px, 1.45vw, 21px); font-weight: 500; letter-spacing: -.01em; line-height: 1.2; color: var(--snow); white-space: nowrap; }
.nw-cap__beat i { width: 4px; height: 4px; border-radius: 50%; background: var(--violet-2); flex: none; }
.nw-cap__date { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--snow-2); padding-bottom: .9em; white-space: nowrap; }
.nw-cap__ds { display: none; }
.nw-mast .t-silver { background: linear-gradient(100deg, transparent 42%, rgba(255,255,255,.95) 50%, transparent 58%) 130% 0 / 260% 100% no-repeat, var(--grad-title-night); -webkit-background-clip: text; background-clip: text; color: transparent; animation: nw-sheen 1.4s .5s var(--ease-out) 1 both; }
@keyframes nw-sheen { from { background-position: 130% 0, 0 0; } to { background-position: -30% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .nw-cap--home .bg-beam, .nw-mast .t-silver { animation: none; } }
.nw-cap__hinge { position: absolute; left: 0; right: 0; bottom: 0; }
/* phones: the title alone on its line, then under a hairline the sections, and the short date on the line below */
@media (max-width: 760px) {
  .nw-cap__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 12px; }
  .nw-cap__id { display: contents; }
  .nw-mast { grid-column: 1 / -1; font-size: 56px; }
  .nw-cap__beat { grid-column: 1 / -1; margin: 0; padding: 12px 0 0; border-left: 0; font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; gap: 4px 8px; flex-wrap: wrap; color: var(--snow); }
  .nw-cap__beat i { width: 3px; height: 3px; }
  .nw-cap__date { grid-column: 1 / -1; margin-top: -6px; padding: 0; font-size: 11px; } /* its own line under the sections: in every language the words never run into the date (Thomas 28/09) */
  .nw-cap__dl { display: none; }
  .nw-cap__ds { display: inline; }
  .nw-cap__in::after { content: ""; grid-row: 2; grid-column: 1 / -1; align-self: start; height: 1px; background: rgba(255,255,255,.14); }
}

/* ================= sticky news bar ================= */
/* opaque in both states: a see-through bar over the edge of a dark band (footer, market board) read as a grey smear */
.nw-bar { position: sticky; top: var(--header-h); z-index: 90; height: var(--nw-bar-h); transition: top .45s var(--ease), background .3s, border-color .3s, color .3s, box-shadow .3s; border-bottom: 1px solid var(--line); background: #F8F9FC; color: var(--ink); }
body:has(#site-header.is-hidden) .nw-bar { top: 0; }
.nw-bar[data-on="night"], html[data-mode="dark"] .nw-bar { background: #07050C; color: var(--snow); border-bottom-color: rgba(255,255,255,.08); }
.nw-bar.is-stuck[data-on="paper"] { box-shadow: 0 10px 30px -22px rgba(20, 10, 60, .35); }
/* one light from the very top (Thomas 28/09: the glow behind the header, the black bar, then the hero's own glow read as
   a cut): a night hero slides up under the header and the bar, and the bar stays see-through until it sticks */
.nw-cap--slim + .nw-bar + :is(.nw-shero, .nw-ahero, .nw-board) { margin-top: calc(-1 * (var(--header-h) + var(--nw-bar-h))); }
.nw-cap--slim + .nw-bar + .nw-shero { padding-top: calc(var(--header-h) + var(--nw-bar-h) + clamp(44px, 5vw, 72px)); }
.nw-cap--slim + .nw-bar + .nw-ahero { padding-top: calc(var(--header-h) + var(--nw-bar-h) + clamp(40px, 5vw, 64px)); }
.nw-cap--slim + .nw-bar + .nw-board { padding-top: calc(var(--header-h) + var(--nw-bar-h) + clamp(32px, 3.4vw, 52px)); }
.nw-bar:has(+ :is(.nw-shero, .nw-ahero, .nw-board)):not(.is-stuck) { background: transparent; }
.nw-bar__in { height: 100%; display: flex; align-items: center; gap: 14px; }
.nw-bar__brand { flex: none; font-family: var(--f-display); font-weight: 650; font-size: 17px; letter-spacing: -.03em; padding-right: 16px; margin-right: 2px; border-right: 1px solid currentColor; border-right-color: color-mix(in srgb, currentColor 18%, transparent); white-space: nowrap; line-height: 24px; transition: opacity .3s, max-width .45s var(--ease), padding .45s var(--ease), margin .45s var(--ease); max-width: 160px; overflow: hidden; }
/* the header above already says "News" (lockup tag): the bar names the portal only when the header has slid away */
body:not(:has(#site-header.is-hidden)) .nw-bar__brand, .nw-bar:not(.is-stuck) .nw-bar__brand { max-width: 0; padding-right: 0; margin-right: -14px; opacity: 0; border-right-width: 0; }
.nw-bar__chips { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 2px; height: 100%; overflow: hidden; }
.nw-chip { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 100%; padding: 0 11px; font-size: 14px; font-weight: 500; white-space: nowrap; color: inherit; opacity: .72; transition: opacity .2s; flex: none; }
.nw-chip::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--violet); transform: scaleX(0); transition: transform .35s var(--ease); }
.nw-chip:hover { opacity: 1; }
/* every chip keeps the width of its bold (active) state, so the set that fits never depends on which one is active */
.nw-chip__t { display: inline-grid; }
.nw-chip__t::after { content: attr(data-t); font-weight: 600; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; user-select: none; }
.nw-chip.is-on { opacity: 1; font-weight: 600; }
.nw-chip.is-on::after { transform: scaleX(1); }
.nw-bar[data-on="night"] .nw-chip::after { background: var(--violet-2); }
.nw-chip--more { height: 100%; }
.nw-chip--more .ic { width: 14px; height: 14px; opacity: .7; transition: transform .3s var(--ease); }
.nw-chip--more[aria-expanded="true"] .ic { transform: rotate(180deg); }
.nw-bar__more { position: relative; height: 100%; flex: none; }
.nw-more { position: absolute; right: 0; top: calc(100% + 1px); min-width: 250px; padding: 8px; background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-3); z-index: 3; }
.nw-more__list { display: grid; }
.nw-more__list:empty { display: none; }
.nw-more__h { display: block; padding: 12px 12px 6px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.nw-more__list:not(:empty) + .nw-more__h { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 14px; }
.nw-more .nw-chip { height: 42px; padding: 0 12px; border-radius: 10px; opacity: .85; }
.nw-more .nw-chip:hover { background: var(--paper); opacity: 1; }
.nw-more .nw-chip::after { left: 0; right: auto; top: 12px; bottom: 12px; width: 2px; height: auto; transform: scaleY(0); }
.nw-more .nw-chip.is-on::after { transform: scaleY(1); }
.nw-bar__tools { flex: none; display: flex; align-items: center; gap: 6px; margin-left: auto; padding-left: 4px; }
.nw-tool { height: 38px; min-width: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 11px; font-size: 14px; font-weight: 600; color: inherit; border: 1px solid transparent; transition: background .2s, border-color .2s; }
.nw-tool .ic { width: 18px; height: 18px; }
.nw-tool:hover, .nw-tool[aria-expanded="true"] { background: rgba(10, 8, 20, .06); }
.nw-bar[data-on="night"] .nw-tool:hover, .nw-bar[data-on="night"] .nw-tool[aria-expanded="true"] { background: rgba(255,255,255,.08); }
.nw-tool--nl { border-color: var(--line-2); padding: 0 14px; }
.nw-bar[data-on="night"] .nw-tool--nl { border-color: rgba(255,255,255,.2); }
.nw-tool--nl:hover { border-color: currentColor; background: transparent; }
/* tablets: the chips that do not fit go into "More" (same logic as desktop); the newsletter button is an icon */
@media (max-width: 1023px) {
  .nw-tool--nl span { display: none; }
  .nw-tool--nl { width: 44px; padding: 0; border-color: transparent !important; }
}
/* phones: one button named after the current section (never a strip of labels cut by the screen edge); it opens the
   full list of sections as a sheet under the bar. Search and newsletter stay on the right. */
@media (max-width: 760px) {
  .nw-bar__in { gap: 4px; padding-right: 10px; }
  .nw-bar__brand { display: none; }
  .nw-bar__chips { display: none; }
  .nw-bar__more { position: static; min-width: 0; flex: 0 1 auto; }
  .nw-bar__more .nw-chip--more { margin-left: -10px; padding: 0 10px; font-size: 15px; font-weight: 600; opacity: 1; max-width: 100%; }
  .nw-chip--more [data-nw-more-t] { white-space: nowrap; }
  .nw-chip--more .ic { width: 16px; height: 16px; margin-left: 2px; }
  .nw-chip::after { left: 10px; right: 10px; }
  .nw-more { left: 12px; right: 12px; min-width: 0; top: calc(100% + 1px); max-height: calc(100dvh - var(--header-h) - var(--nw-bar-h) - 24px); overflow-y: auto; overscroll-behavior: contain; }
  .nw-more .nw-chip { height: 46px; font-size: 15.5px; }
  .nw-tool { width: 44px; height: 44px; padding: 0; }
  .nw-tool--nl { border-color: transparent !important; }
  .nw-tool--nl span { display: none; }
}

/* search panel */
.nw-search { position: absolute; left: 0; right: 0; top: 100%; padding: 10px 0 24px; opacity: 0; transform: translateY(-6px); transition: opacity .22s var(--ease), transform .3s var(--ease-out); pointer-events: none; }
.nw-search.is-open { opacity: 1; transform: none; pointer-events: auto; }
.nw-search__box { max-width: 760px; margin-left: auto; background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 40px 90px -30px rgba(20, 10, 60, .45), 0 8px 24px -10px rgba(20,10,60,.2); overflow: hidden; }
.nw-search__field { display: flex; align-items: center; gap: 12px; padding: 0 12px 0 20px; height: 62px; border-bottom: 1px solid var(--line); }
.nw-search__field > .ic { width: 20px; height: 20px; color: var(--ink-3); }
.nw-search__field input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font-size: 17px; outline: none; color: var(--ink); }
.nw-search__field input::-webkit-search-cancel-button { display: none; }
.nw-search__field kbd { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 7px; }
.nw-search__x { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--ink-2); }
.nw-search__x:hover { background: var(--paper); }
.nw-search__out { max-height: min(62vh, 560px); overflow-y: auto; overscroll-behavior: contain; padding: 8px 8px 12px; }
.nw-sr__g { padding: 6px 0; }
.nw-sr__g + .nw-sr__g { border-top: 1px solid var(--line); }
.nw-sr__h { display: block; padding: 8px 12px 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.nw-sr { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; transition: background .15s; }
.nw-sr:hover, .nw-sr:focus-visible { background: var(--paper); }
.nw-sr__img { width: 72px; flex: none; border-radius: 9px; }
.nw-sr b { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.nw-sr small { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.nw-sr mark { background: var(--violet-soft); color: var(--violet-3); border-radius: 3px; padding: 0 1px; }
.nw-sr__none { padding: 22px 14px; color: var(--ink-3); font-size: 15px; }
@media (max-width: 760px) {
  .nw-search { padding: 0; }
  .nw-search > .container { padding: 0; }
  .nw-search__box { border-radius: 0 0 20px 20px; border-left: 0; border-right: 0; }
  .nw-search__field kbd { display: none; }
  .nw-search__field input { font-size: 16px; }
  .nw-search__out { max-height: 70vh; }
}

/* ================= market strip ================= */
.nw-strip { padding: 18px 0 6px; background: var(--paper); }
.nw-strip__row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.nw-sc { text-align: left; display: flex; flex-direction: column; gap: 8px; padding: 11px 12px 10px; border-radius: 14px; background: var(--paper-2); border: 1px solid var(--line); transition: border-color .25s, box-shadow .3s, transform .3s var(--ease); min-width: 0; }
.nw-sc:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.nw-sc__top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.nw-sc__top b { font-size: 13px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nw-sc__top .nw-pct { margin-left: auto; font-size: 12px; }
.nw-sc__bot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.nw-sc__p { font-size: 15px; font-weight: 600; letter-spacing: -.015em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nw-sc__p small { font-size: 12px; font-weight: 600; color: var(--ok); margin-left: 6px; letter-spacing: 0; }
.nw-sc .nw-spark { flex: 0 1 56px; min-width: 34px; } /* a long price keeps its room: the line gives way */
.nw-sc__bot { min-width: 0; }
.nw-sc--ctx { background: linear-gradient(180deg, var(--paper-2), color-mix(in srgb, var(--paper-2) 92%, var(--violet) 8%)); }
.nw-fgbar { position: relative; width: 56px; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #D63B4F, #E0913A 35%, #B9B6C6 50%, #7FD1A4 65%, #16A36A); flex: none; }
.nw-fgbar i { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #0A0A0F; transform: translate(-50%, -50%); }
.nw-strip__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding: 10px 2px 0; }
.nw-strip__all { font-size: 13.5px; }
.nw-strip__all .ic { width: 15px; height: 15px; }
@media (max-width: 1199px) {
  .nw-strip__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 6px; scroll-padding-inline: var(--gutter); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
  .nw-strip__row::-webkit-scrollbar { display: none; }
  .nw-sc { flex: 0 0 152px; scroll-snap-align: start; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  .nw-strip__row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding: 0; -webkit-mask-image: none; mask-image: none; }
  .nw-sc { flex: none; }
  .nw-sc--opt { display: none; }
}
/* phones and small tablets: whole cards on screen, the next one only peeks (24 px, under the fade), never a price cut
   in half. --sc-n = cards fully shown. */
@media (max-width: 899px) {
  .nw-strip__row { --sc-n: 4; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); }
  .nw-sc { flex-basis: calc((100% + var(--gutter) - var(--sc-n) * 10px - 24px) / var(--sc-n)); }
}
@media (max-width: 760px) {
  .nw-strip { padding-top: 14px; }
  .nw-strip__row { --sc-n: 2; }
  .nw-strip__foot { padding-top: 4px; flex-direction: column; align-items: flex-start; gap: 0; }
  .nw-strip__foot .nw-src { font-size: 11.5px; }
}

/* numbers */
.nw-pct { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-3); }
.nw-pct.is-up { color: #0E8A57; }
.nw-pct.is-down { color: #C8364A; }
[data-theme="night"] .nw-pct.is-up { color: #5FD89F; }
[data-theme="night"] .nw-pct.is-down { color: #FF7D8F; }
.nw-tri { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; flex: none; }
.nw-pct.is-up .nw-tri { border-bottom: 5px solid currentColor; }
.nw-pct.is-down .nw-tri { border-top: 5px solid currentColor; }
.nw-pct.is-flat .nw-tri { display: none; }

/* sparkline */
.nw-spark { display: block; overflow: visible; }
.nw-spark__line { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.nw-spark__area { stroke: none; opacity: .1; }
.nw-spark.is-up .nw-spark__line { stroke: #16A36A; } .nw-spark.is-up .nw-spark__area { fill: #16A36A; }
.nw-spark.is-down .nw-spark__line { stroke: #D63B4F; } .nw-spark.is-down .nw-spark__area { fill: #D63B4F; }
[data-theme="night"] .nw-spark.is-up .nw-spark__line { stroke: #5FD89F; } [data-theme="night"] .nw-spark.is-up .nw-spark__area { fill: #5FD89F; }
[data-theme="night"] .nw-spark.is-down .nw-spark__line { stroke: #FF7D8F; } [data-theme="night"] .nw-spark.is-down .nw-spark__area { fill: #FF7D8F; }
[data-theme="night"] .nw-spark__area { opacity: .14; }

/* coin logos: round mask, white disc (dark surfaces), hairline ring (paper) */
.nw-coin { width: var(--cs, 24px); height: var(--cs, 24px); border-radius: 50%; overflow: hidden; background: #fff; flex: none; display: inline-block; box-shadow: 0 0 0 1px rgba(10, 8, 20, .08); }
.nw-coin img { width: 100%; height: 100%; object-fit: cover; }
[data-theme="night"] .nw-coin { box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 4px 10px -4px rgba(0,0,0,.6); }
.nw-coin--art { background: transparent; box-shadow: none !important; overflow: visible; }
.nw-coin--art img { object-fit: contain; }

/* ================= ads (house ads, labelled) ================= */
.nw-ad { background: transparent; border: 0; border-radius: 0; padding-top: 20px; display: block; place-items: normal; overflow: visible; }
.nw-ad .ad__label { top: 2px; left: 2px; color: var(--ink-4); }
[data-theme="night"] .nw-ad .ad__label { color: var(--snow-4); }
.nw-house { position: relative; display: flex; overflow: hidden; border-radius: 16px; isolation: isolate; color: #fff; transition: transform .35s var(--ease), box-shadow .35s; }
.nw-house:hover { transform: translateY(-2px); box-shadow: 0 24px 50px -24px rgba(30, 14, 90, .55); }
.nw-house__t { font-family: var(--f-display); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.nw-house__s { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.72); }
.nw-house__cta { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 15px; border-radius: 999px; background: #fff; color: #0A0A0F; font-size: 13.5px; font-weight: 600; white-space: nowrap; flex: none; width: max-content; }
.nw-house__cta .ic { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.nw-house:hover .nw-house__cta .ic { transform: translateX(2px); }
.nw-house__mark { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.nw-house__mark .ic { width: 24px; height: 24px; }
.nw-house--adv { background: radial-gradient(60% 140% at 100% 0%, rgba(160,120,255,.55), transparent 62%), radial-gradient(40% 120% at 0% 100%, rgba(94,63,230,.35), transparent 70%), #07050D; }
.nw-house--adv::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(assets/bg/grid-top.webp) center / 900px auto; opacity: .08; mix-blend-mode: screen; }
.nw-house__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* leaderboard 970x90 (728x90 on tablets) */
.nw-lbs { padding: 0 0 clamp(40px, 4.4vw, 64px); background: var(--paper); }
.nw-ad--lb { max-width: 970px; margin: 0 auto; }
.nw-house--lb { height: 90px; align-items: center; gap: 18px; padding: 0 22px; }
.nw-house--lb .nw-house__t { font-size: 20px; }
.nw-house--lb .nw-house__cta { margin-left: auto; }
@media (max-width: 1023px) { .nw-ad--lb { max-width: 728px; } .nw-house--lb .nw-house__s { display: none; } }
@media (max-width: 760px) { .nw-lbs { display: none; } }
/* MPU 300x250 */
.nw-ad--mpu { width: 300px; max-width: 100%; }
.nw-house--mpu { height: 250px; flex-direction: column; justify-content: space-between; padding: 22px; }
.nw-house--mpu.nw-house--adv .nw-house__txt { margin-top: auto; margin-bottom: 16px; }
.nw-house--mpu .nw-house__t { font-size: 22px; }
.nw-house--co { background: radial-gradient(80% 70% at 100% 0%, rgba(33,117,235,.9), transparent 70%), linear-gradient(160deg, #0E3163, #06101F 70%); }
.nw-house--co::after { content: ""; position: absolute; right: -54px; bottom: -64px; width: 190px; height: 190px; z-index: -1; background: url(assets/brand/crypto-only/symbol-white.svg) center / contain no-repeat; opacity: .045; }
.nw-house--co .nw-house__word { height: 26px; width: auto; align-self: flex-start; }
.nw-house--co.nw-house--mpu .nw-house__t { font-size: 20px; margin-top: 18px; }
.nw-house--co.nw-house--mpu .nw-house__s { margin-top: 8px; }
.nw-house--co.nw-house--mpu .nw-house__cta { margin-top: auto; }
/* mobile 320x100 */
.nw-ad--mob { width: 320px; max-width: 100%; margin-inline: auto; }
.nw-house--mob { height: 100px; align-items: center; gap: 12px; padding: 0 14px; }
.nw-house--mob .nw-house__mark { width: 40px; height: 40px; border-radius: 11px; }
.nw-house--mob .nw-house__t { font-size: 16px; }
.nw-house--mob .nw-house__s { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nw-house--mob .nw-house__cta { display: none; }
/* in-article 300x250 */
.nw-ad--inart { width: 300px; max-width: 100%; margin: 2.4em auto !important; }
.nw-ad--inart .ad__label { left: 50%; transform: translateX(-50%); }
.nw-house--inart { height: 250px; flex-direction: column; justify-content: space-between; padding: 22px; text-decoration: none !important; }
.nw-house--inart .nw-house__word { height: 26px; width: auto; }
.nw-house--inart .nw-house__t { font-size: 21px; color: #fff; margin-top: 16px; }
.nw-house--inart .nw-house__s { margin-top: 8px; }
.nw-house--inart .nw-house__cta { margin-top: auto; color: #0A0A0F !important; }

/* ================= top stories (3 / 6 / 3) ================= */
.nw-sec--top { padding-top: clamp(28px, 3vw, 40px); padding-bottom: clamp(40px, 4.4vw, 64px); }
.nw-top { display: grid; grid-template-columns: 264px minmax(0, 1fr) var(--nw-rail); gap: 44px; align-items: start; }
.nw-top__col { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.nw-top__mid { position: relative; }
.nw-top__mid::before, .nw-top__mid::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.nw-top__mid::before { left: -22px; } .nw-top__mid::after { right: -22px; }
.nw-mob-ad { display: none; }

/* latest river */
.nw-river__list { list-style: none; padding: 0; margin: 0; }
.nw-ri { border-bottom: 1px solid var(--line); }
.nw-ri__a { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; }
.nw-ri__meta { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.nw-ri__meta time { font-family: var(--f-mono); font-size: 11.5px; color: var(--violet-3); font-weight: 500; }
.nw-ri__meta b { font-weight: 600; color: var(--ink-3); }
.nw-ri__t { font-family: var(--f-display); font-size: 16px; line-height: 1.32; font-weight: 600; letter-spacing: -.012em; color: var(--ink); transition: color .2s; text-wrap: pretty; }
.nw-ri__a:hover .nw-ri__t { color: var(--violet-3); }
.nw-river__all { margin-top: 14px; font-size: 14px; }
.nw-river__all .ic { width: 16px; height: 16px; }

/* lead */
.nw-lead { display: flex; flex-direction: column; gap: 20px; }
.nw-lead__img { border-radius: 20px; }
.nw-lead__body { display: flex; flex-direction: column; gap: 12px; }
.nw-lead__t { font-size: clamp(27px, 2.5vw, 38px); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.nw-lead__dek { font-size: 17px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.nw-lead .nw-byline { margin-top: 4px; }

/* secondary cards */
.nw-secs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.nw-sec-card { display: flex; flex-direction: column; gap: 14px; }
.nw-sec-card__img { aspect-ratio: 3 / 2; border-radius: 14px; }
.nw-sec-card__body { display: flex; flex-direction: column; gap: 8px; }
.nw-sec-card__t { font-size: 19px; line-height: 1.25; letter-spacing: -.02em; text-wrap: pretty; }

/* editor's picks */
.nw-picks__list { list-style: none; padding: 0; margin: 0; counter-reset: p; }
.nw-pick { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.nw-pick__n { font-family: var(--f-display); font-size: 24px; font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--line-2); transition: color .3s; padding-top: 1px; }
.nw-pick:hover .nw-pick__n { color: var(--violet); }
.nw-pick__b { display: flex; flex-direction: column; gap: 6px; }
.nw-pick__t { font-family: var(--f-display); font-size: 16px; line-height: 1.3; font-weight: 600; letter-spacing: -.012em; color: var(--ink); text-wrap: pretty; }
.nw-pick:hover .nw-pick__t { background-size: 100% 1px; }
.nw-pick__m { font-size: 12.5px; color: var(--ink-3); }
.nw-top__mpu { align-self: center; }
/* the company's announcements, right column of the top stories */
.nw-annl__list { list-style: none; padding: 0; margin: 0; }
.nw-annl__a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.nw-annl__img { aspect-ratio: 3 / 2; border-radius: 10px; }
.nw-annl__a b { display: block; font-family: var(--f-display); font-size: 15.5px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; transition: color .2s; }
.nw-annl__a small { display: block; margin-top: 5px; font-size: 12.5px; color: var(--ink-3); }
.nw-annl__a:hover b { color: var(--violet-3); }
.nw-annl__i:last-child .nw-annl__a { border-bottom: 0; }

@media (min-width: 761px) and (max-width: 1199px) {
  .nw-lead { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: center; }
  .nw-lead__t { font-size: clamp(24px, 2.8vw, 32px); }
}
@media (max-width: 1199px) {
  .nw-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 36px; }
  .nw-top__mid { grid-column: 1 / -1; order: -1; }
  .nw-top__mid::before, .nw-top__mid::after { display: none; }
  .nw-top__right { gap: 28px; }
  .nw-top__mpu { align-self: stretch; }
  .nw-top__mpu .nw-ad--mpu { width: 100%; }
}
@media (max-width: 760px) {
  .nw-top { display: flex; flex-direction: column; align-items: stretch; gap: 30px; }
  .nw-top__col { display: contents; }
  .nw-o1 { order: 1; } .nw-o2 { order: 2; } .nw-o3 { order: 3; } .nw-o4 { order: 4; } .nw-o5 { order: 5; } .nw-o6 { order: 6; }
  .nw-annl__a { grid-template-columns: minmax(0, 1fr) 104px; gap: 16px; padding: 16px 0; }
  .nw-annl__img { order: 2; aspect-ratio: 4 / 3; border-radius: 12px; }
  .nw-annl__a b { font-size: 17px; }
  .nw-annl__i:last-child .nw-annl__a { border-bottom: 1px solid var(--line); }
  .nw-mob-ad { display: block; }
  .nw-lead { gap: 16px; }
  .nw-lead__img { border-radius: 16px; }
  .nw-lead__t { font-size: 28px; }
  .nw-lead__dek { font-size: 16px; }
  .nw-secs { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; border-top: 0; }
  .nw-sec-card { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 16px; align-items: start; padding: 18px 0; border-top: 1px solid var(--line); }
  .nw-sec-card:last-child { border-bottom: 1px solid var(--line); }
  .nw-sec-card__img { order: 2; aspect-ratio: 4 / 3; border-radius: 12px; }
  .nw-sec-card__t { font-size: 17px; }
  .nw-top__mpu { align-self: center; }
}

/* ================= market board (night stage) ================= */
.nw-board { position: relative; overflow: clip; background: var(--night-glow), var(--night); color: var(--snow); padding-block: clamp(64px, 7vw, 104px); scroll-margin-top: 120px; }
.nw-board__beam { background: radial-gradient(50% 60% at 50% 0%, rgba(160,120,255,.42), rgba(110,60,240,.1) 55%, transparent 80%) !important; }
.nw-board__room { opacity: .06 !important; }
.nw-board--flush { padding-top: 8px; }
.nw-board--flush .nw-board__beam, .nw-board--flush .nw-board__room { display: none; }
.nw-board__in { position: relative; }
.nw-board__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 32px; flex-wrap: wrap; margin-bottom: 28px; }
.nw-board__title { display: flex; flex-direction: column; gap: 12px; }
.nw-board__t { font-size: clamp(34px, 4vw, 58px); line-height: 1; letter-spacing: -.045em; }
.nw-board__head .nw-src { padding-bottom: 6px; }
.nw-board__head--bare { justify-content: flex-start; margin-bottom: 20px; }
/* under a hero: one background, no second glow starting at the seam */
.nw-shero + .nw-board { background: var(--night); }
.nw-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--nline); border: 1px solid var(--nline); border-radius: 20px; overflow: hidden; margin-bottom: 20px; }
.nw-kpi { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; background: linear-gradient(180deg, #0F0C18, #0A0811); }
.nw-kpi__l { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--snow-3); }
.nw-kpi__v { font-family: var(--f-display); font-size: clamp(26px, 2.4vw, 34px); font-weight: 600; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.nw-kpi__s { display: flex; align-items: center; gap: 6px; min-height: 18px; font-size: 12.5px; color: var(--snow-3); }
.nw-kpi__s em { font-style: normal; }
.nw-dom { position: relative; flex: 1; max-width: 160px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; }
.nw-dom i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, var(--violet-3), var(--violet-2)); transform-origin: left; }

.nw-board__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.nw-board__side { display: flex; flex-direction: column; gap: 20px; }
.nw-board__row2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; margin-top: 20px; align-items: stretch; }
.nw-movers .nw-mv li a { padding-block: 9px; }
.nw-panel { position: relative; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); border: 1px solid var(--nline); padding: 20px 22px; min-width: 0; }
.nw-panel__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; min-height: 36px; }
.nw-panel__h h3 { font-size: 17px; letter-spacing: -.015em; line-height: 1.2; display: flex; align-items: baseline; gap: 8px; }
.nw-panel__note { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--snow-4); font-weight: 500; }
/* table */
.nw-tblp { padding: 20px 10px 8px; }
.nw-tblp .nw-panel__h { padding: 0 12px; }
.nw-tbl-wrap { overflow-x: auto; }
.nw-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.nw-tbl th { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; font-weight: 500; color: var(--snow-4); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--nline); white-space: nowrap; }
.nw-tbl td { padding: 0 12px; height: 58px; border-bottom: 1px solid rgba(255,255,255,.05); white-space: nowrap; }

.nw-tbl tbody tr:last-child td { border-bottom: 0; }
.nw-c-rank { width: 44px; color: var(--snow-4); font-variant-numeric: tabular-nums; font-size: 13px; }
.nw-c-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.nw-c-price { font-weight: 600; color: var(--snow); }
.nw-c-cap { color: var(--snow-2); }
.nw-c-spark { width: 140px; padding-right: 16px !important; text-align: right !important; }
.nw-c-spark .nw-spark { margin-left: auto; }
.nw-c-coin a { display: flex; align-items: center; gap: 12px; }
.nw-c-coin b { display: block; font-weight: 600; font-size: 14.5px; color: var(--snow); }
.nw-c-coin small { display: block; font-size: 12px; color: var(--snow-3); }
.nw-c-coin a:hover b { color: var(--violet-2); }
.nw-tbl-more { display: none; }
.nw-mob { display: none; }
/* fear & greed */
.nw-fg { display: flex; flex-direction: column; }
.nw-fg__g { position: relative; width: 100%; max-width: 232px; margin: auto; }
.nw-gauge { width: 100%; height: auto; overflow: visible; }
.nw-g__track { fill: none; stroke: rgba(255,255,255,.06); stroke-width: 14; }
.nw-g__seg { fill: none; stroke-width: 12; stroke-linecap: butt; }
.nw-g__seg.g1 { stroke: #D63B4F; } .nw-g__seg.g2 { stroke: #E0913A; } .nw-g__seg.g3 { stroke: #8F8BA3; } .nw-g__seg.g4 { stroke: #7FD1A4; } .nw-g__seg.g5 { stroke: #16A36A; }
.nw-g__needle { transform-origin: 100px 100px; transform: rotate(var(--a)); transition: transform 1.6s var(--ease-out) .25s; }
.nw-g__needle line { stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.nw-g__needle circle { fill: #fff; }
.nw-g__lab { fill: rgba(246,244,251,.34); font: 500 8px var(--f-mono); }
.nw-fg__v { position: absolute; left: 0; right: 0; bottom: 18%; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.nw-fg__v b { font-family: var(--f-display); font-size: 36px; font-weight: 600; letter-spacing: -.04em; line-height: 1; margin-top: 0; text-shadow: 0 2px 16px rgba(0,0,0,.6); }
.nw-fg__v span { font-size: 13px; font-weight: 600; color: #7FD1A4; margin-top: 2px; }
.nw-fg .nw-src { text-align: center; margin-top: 8px; }
.nw-fg__g .nw-fg__v { position: static; margin-top: 10px; }
/* movers / trending lists */
.nw-seg { padding: 3px; }
.nw-seg button { height: 32px; padding: 0 12px; font-size: 13px; }
.nw-mv, .nw-trend__list { list-style: none; padding: 0; margin: 0; }
.nw-mv li a, .nw-trend__list li a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 76px; align-items: center; gap: 12px; padding: 10px 6px; border-radius: 12px; transition: background .2s; }
.nw-mv li a:hover, .nw-trend__list li a:hover { background: rgba(255,255,255,.045); }
.nw-mv li + li, .nw-trend__list li + li { border-top: 1px solid rgba(255,255,255,.05); }
.nw-mv .nw-pct, .nw-trend__list .nw-pct { justify-content: flex-end; }
.nw-mv__n { min-width: 0; display: flex; flex-direction: column; }
.nw-mv__n b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nw-mv__n small { font-size: 12px; color: var(--snow-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-theme="paper"] .nw-mv__n small, [data-theme="white"] .nw-mv__n small { color: var(--ink-3); }
.nw-mv__p { font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--snow-2); text-align: right; }
.nw-mv__none { padding: 16px 6px; color: var(--snow-3); font-size: 14px; }
.nw-trend__list li a { grid-template-columns: 18px auto minmax(0, 1fr) 76px; padding-block: 8px; }
.nw-trend__i { font-family: var(--f-mono); font-size: 11px; color: var(--snow-4); text-align: right; }
/* issued by Kcalb Ltd */
.nw-eco { display: flex; flex-direction: column; }
.nw-eco__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.nw-ecard { position: relative; border-radius: 16px; padding: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--nline); overflow: hidden; display: flex; flex-direction: column; gap: 14px; }
.nw-ecard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--bc), transparent); opacity: .9; }
.nw-ecard::after { content: ""; position: absolute; right: -50px; top: -60px; width: 160px; height: 160px; border-radius: 50%; background: var(--bc); filter: blur(60px); opacity: .16; pointer-events: none; }
.nw-eco { display: flex; flex-direction: column; }
.nw-eco__cards { flex: 1; }
.nw-ecard__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.nw-ecard__id b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.nw-ecard__id small { display: block; font-size: 11.5px; color: var(--snow-3); font-family: var(--f-mono); letter-spacing: .08em; }
.nw-ecard__px { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.nw-ecard__px b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.nw-ecard__px .nw-pct { font-size: 12.5px; }
.nw-ecard__chart { flex: 1; min-height: 64px; display: flex; align-items: stretch; margin: 2px -2px; }
.nw-ecard__chart .nw-spark { width: 100%; height: auto; min-height: 64px; }
.nw-ecard__dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; margin: 0; }
.nw-ecard__dl div { display: flex; flex-direction: column; gap: 2px; }
.nw-ecard__dl dt { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--snow-4); }
.nw-ecard__dl dd { margin: 0; font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nw-ecard__links { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06); position: relative; z-index: 1; }
.nw-ecard__links .link { font-size: 13.5px; }
.nw-ecard__links .link .ic { width: 15px; height: 15px; }
.nw-ecard__cg { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; color: var(--snow-3); }
.nw-ecard__cg .ic { width: 14px; height: 14px; }
.nw-ecard__cg:hover { color: var(--snow); }
.nw-eco__disc { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--snow-3); }
.nw-eco__disc .ic { width: 15px; height: 15px; margin-top: 1px; flex: none; }
/* the one orchestrated moment: lines draw, bars grow, the needle settles */
.nw-board.is-pre .nw-spark { clip-path: inset(0 100% 0 0); }
.nw-board.is-pre .nw-spark__area { opacity: 0; }
.nw-board.is-pre .nw-g__needle { transform: rotate(-90deg); }
.nw-board.is-pre .nw-dom i { transform: scaleX(0); }
.nw-board.is-in .nw-spark { clip-path: inset(0 0 0 0); transition: clip-path 1.5s var(--ease-out) calc(var(--d, 0ms) + 150ms); }
.nw-board.is-in .nw-spark__area { transition: opacity 1s ease calc(var(--d, 0ms) + 700ms); }
.nw-board.is-in .nw-dom i { transform: none; transition: transform 1.3s var(--ease-out) .2s; }
.nw-board.is-in .nw-g__needle { transform: rotate(var(--a)); }

@media (max-width: 1199px) {
  .nw-board__grid { grid-template-columns: minmax(0, 1fr); }
  .nw-board__side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nw-board__row2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .nw-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nw-c-7d, .nw-c-cap { display: none; }
}
@media (max-width: 760px) {
  .nw-board { padding-block: 56px 64px; }
  .nw-kpi { padding: 16px; }
  .nw-kpi__v { font-size: 24px; }
  .nw-board__side { grid-template-columns: minmax(0, 1fr); }
  .nw-tblp { padding: 16px 4px 6px; }
  .nw-tbl td { padding: 0 8px; height: 56px; }
  .nw-tbl th { padding: 10px 8px; }
  .nw-c-rank { display: none; }
  .nw-c-coin b { display: none; }
  .nw-c-coin small { font-size: 14px; font-weight: 600; color: var(--snow); }
  .nw-c-coin a { gap: 10px; }
  .nw-c-coin .nw-coin { --cs: 26px !important; }
  .nw-tbl td, .nw-tbl th { padding-inline: 6px; }
  .nw-tbl .nw-pct { font-size: 12.5px; }
  .nw-c-spark { width: 72px; padding-right: 8px !important; }
  .nw-c-spark .nw-spark { width: 60px; height: 26px; }
  .nw-dsk { display: none; } .nw-mob { display: inline; }
  .nw-tbl.is-collapsed .nw-xrow { display: none; }
  .nw-tbl-more { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 16px); margin: 6px 8px 8px; height: 46px; border-radius: 12px; border: 1px solid var(--nline-2); font-size: 14px; font-weight: 600; color: var(--snow); }
  .nw-tbl-more .ic { width: 16px; height: 16px; transition: transform .3s var(--ease); }
  .nw-tbl-more.is-open .ic { transform: rotate(180deg); }
  .nw-panel { padding: 18px 16px; }
  /* the coin table card: its title and its first column start 16 px in, like every other card of the board */
  .nw-panel.nw-tblp { padding: 18px 10px 6px; }
  .nw-tblp .nw-panel__h { padding: 0 6px; }
  .nw-mv li a, .nw-trend__list li a { grid-template-columns: auto minmax(0, 1fr) auto 70px; gap: 10px; padding: 10px 2px; }
  .nw-trend__list li a { grid-template-columns: 16px auto minmax(0, 1fr) 70px; }
  .nw-eco__cards { grid-template-columns: minmax(0, 1fr); }
}

/* ================= announcements ================= */
.nw-ann { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; }
.nw-std { display: flex; flex-direction: column; gap: 14px; }
.nw-std__img { border-radius: 16px; }
.nw-std__body { display: flex; flex-direction: column; gap: 8px; }
.nw-std__t { font-size: 20px; line-height: 1.25; letter-spacing: -.02em; text-wrap: pretty; }
.nw-std--big .nw-std__img { border-radius: 20px; }
.nw-std--big .nw-std__t { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.12; letter-spacing: -.03em; }
.nw-std--big { gap: 20px; }
.nw-ann__list { display: flex; flex-direction: column; }
.nw-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 20px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--line); }
.nw-row:first-child { padding-top: 0; }
.nw-row__body { display: flex; flex-direction: column; gap: 8px; }
.nw-row__t { font-size: 18px; line-height: 1.28; letter-spacing: -.018em; text-wrap: pretty; }
.nw-row__img { border-radius: 12px; aspect-ratio: 3 / 2; }
@media (max-width: 900px) { .nw-ann { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
@media (max-width: 760px) {
  .nw-row { grid-template-columns: minmax(0, 1fr) 104px; gap: 16px; padding: 18px 0; }
  .nw-row:first-child { padding-top: 18px; border-top: 1px solid var(--line); }
  .nw-row__img { aspect-ratio: 4 / 3; }
  .nw-row__t { font-size: 17px; }
  .nw-std--big .nw-std__t { font-size: 24px; }
}

/* ================= wire ("Across the industry") ================= */
.nw-sec--wire { background: var(--paper); }
.nw-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.nw-fchip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; font-weight: 500; color: var(--ink-2); background: var(--paper-2); transition: .2s; white-space: nowrap; }
.nw-fchip:hover { border-color: var(--ink); color: var(--ink); }
.nw-fchip.is-on { background: #0A0A0F; border-color: #0A0A0F; color: #fff; }
[data-theme="night"] .nw-fchip:hover { border-color: rgba(255,255,255,.5); }
[data-theme="night"] .nw-fchip.is-on { background: #fff; border-color: #fff; color: #0A0A0F; }
.nw-wire { list-style: none; padding: 0; margin: 0; }
.nw-wire--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; border-top: 1px solid var(--line); }
.nw-w { position: relative; display: flex; align-items: flex-start; gap: 10px; border-bottom: 1px solid var(--line); }
.nw-w__a { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 16px 0; }
.nw-w__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; color: var(--ink-3); }
.nw-w__meta b { font-weight: 650; color: var(--ink); font-size: 12.5px; }
.nw-w__meta time { font-variant-numeric: tabular-nums; }
.nw-w__cat { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--violet-3); }
.nw-w__t { font-size: 16px; line-height: 1.38; font-weight: 550; color: var(--ink); letter-spacing: -.008em; transition: color .2s; text-wrap: pretty; }
.nw-w__a:hover .nw-w__t { color: var(--violet-3); }
.nw-w__share { position: relative; flex: none; width: 36px; height: 36px; margin-top: 14px; border-radius: 12px; display: grid; place-items: center; color: #2175EB; border: 1px solid var(--line); background: var(--paper-2); transition: opacity .15s, color .2s, background .2s, border-color .2s; }
.nw-w__share svg { width: 18px; height: 18px; }
.nw-w__share:hover { color: #fff; background: #2175EB; border-color: #2175EB; }
/* the team's share shortcut appears on the row being read, not on every row */
/* hover screens: the share shortcut floats at the end of the row's first line (source · time), so the headline keeps
   the full width of its column */
@media (hover: hover) and (min-width: 761px) {
  .nw-w { display: block; }
  .nw-w__share { position: absolute; right: 0; top: 7px; margin: 0; width: 32px; height: 32px; border-radius: 10px; opacity: 0; z-index: 2; }
  .nw-w__share svg { width: 16px; height: 16px; }
  .nw-w:hover .nw-w__share, .nw-w:focus-within .nw-w__share { opacity: 1; }
}
.nw-wire__foot { display: flex; justify-content: center; margin-top: 28px; }
.nw-wire__foot [hidden] { display: none; }
@media (max-width: 900px) { .nw-wire--grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  /* phones: the nine topics wrap (no row cut at the screen edge) */
  .nw-filter { gap: 8px 6px; }
  .nw-fchip { height: 38px; padding: 0 13px; font-size: 13.5px; }
  /* phones: the team reshares from here, so the Crypto-Only icon stays, quieter, on the row's first line */
  .nw-w__share { width: 40px; height: 40px; margin-top: 10px; opacity: .7; }
  .nw-w__share::after { content: ""; position: absolute; inset: -2px; }
}
/* timeline (section pages) */
.nw-tl { margin-top: 8px; }
.nw-tl__day + .nw-tl__day { margin-top: 28px; }
.nw-tl__d { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.nw-wire--tl .nw-w__a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 16px; }
.nw-wire--tl .nw-w__meta { display: contents; }
.nw-wire--tl .nw-w__meta time { grid-column: 1; grid-row: 1 / span 2; font-family: var(--f-mono); font-size: 12px; color: var(--violet-3); padding-top: 2px; }
.nw-wire--tl .nw-w__meta b { grid-column: 2; grid-row: 1; }
.nw-wire--tl .nw-w__t { grid-column: 2; grid-row: 2; }
@media (max-width: 760px) { .nw-wire--tl .nw-w__a { grid-template-columns: 50px minmax(0, 1fr); gap: 4px 12px; } }

/* ================= guides (night) ================= */
.nw-guides { background: var(--night-glow), var(--night); }
/* right after the market board: the same dark band continues (light mode keeps one dark band between paper parts) */
.nw-board + .nw-guides { padding-top: 0; }
.nw-board + .nw-guides .nw-guides__beam { display: none; }
.nw-guides__beam { background: radial-gradient(40% 60% at 80% 0%, rgba(160,120,255,.3), transparent 70%) !important; }
.nw-guides .container { position: relative; }
.nw-gscroll { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 24px; }
.nw-std--night { padding: 12px 12px 18px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); border: 1px solid var(--nline); height: 100%; transition: border-color .3s, transform .45s var(--ease), box-shadow .45s var(--ease); }
.nw-std--night:hover { border-color: var(--nline-2); transform: translateY(-4px); box-shadow: var(--shadow-night); }
.nw-std--night .nw-std__img { border-radius: 14px; }
.nw-std--night .nw-std__body { padding: 0 6px; }
.nw-std--night .nw-std__t { font-size: 18px; }
@media (max-width: 1100px) { .nw-gscroll { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .nw-gscroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 14px; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; scroll-padding-inline: var(--gutter); }
  .nw-gscroll::-webkit-scrollbar { display: none; }
  .nw-gscroll__i { flex: 0 0 82%; scroll-snap-align: start; }
}

/* ================= newsletter ================= */
.nw-nl { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; padding: clamp(28px, 4vw, 52px); border-radius: 28px; background: linear-gradient(135deg, #F3EFFF, #FBFAFF 55%, #EEE9FF); border: 1px solid #E3DCFF; }
.nw-nl, .nw-nlf input { scroll-margin-top: calc(var(--header-h) + 88px); }
.nw-nl__glow { position: absolute; z-index: -1; right: -120px; top: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(122,90,248,.28), transparent 65%); }
.nw-nl__copy { display: flex; gap: 20px; align-items: flex-start; }
.nw-nl__icon { flex: none; width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: #0A0A0F; color: #fff; box-shadow: 0 12px 30px -12px rgba(40,20,120,.6); }
.nw-nl__icon .ic { width: 24px; height: 24px; }
.nw-nl__t { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.05; letter-spacing: -.035em; }
.nw-nl__p { margin-top: 10px; font-size: 16px; color: var(--ink-2); line-height: 1.55; }
.nw-nl__fine { margin-top: 12px; font-size: 13px; color: var(--ink-3); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nw-nl__fine a { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ink-2); }
.nw-nl__fine a .ic { width: 14px; height: 14px; }
.nw-nl__fine a:hover { color: var(--ink); }
.nw-nlf { display: grid; gap: 12px; }
.nw-nlf__row { display: flex; gap: 8px; padding: 6px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper-2); box-shadow: var(--shadow-1); transition: border-color .2s, box-shadow .2s; }
.nw-nlf__row:focus-within { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(123,77,255,.14); }
.nw-nlf__in { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 16px; font-size: 16px; outline: none; color: var(--ink); height: 46px; }
.nw-nlf__in::placeholder { color: var(--ink-4); }
.nw-nlf__btn { --bh: 46px; }
/* the deep KcalbApp violet (buttons of the app), not the bright accent */
.nw-nlf__ok { font-size: 13.5px; line-height: 1.5; }
.nw-nlf__ok a { text-decoration: underline; text-underline-offset: 2px; }
.nw-nlf__ok input { margin-top: 0; }
.nw-nlf__ok input[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(214,59,79,.15); }
.nw-nlf.is-error .nw-nlf__row:has(input[aria-invalid="true"]) { border-color: var(--bad); }
.nw-nlf__err { font-size: 13px; color: var(--bad); font-weight: 500; }
.nw-done { align-items: center; }
.nw-nl--inline { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 28px; border-radius: 22px; margin: 2.4em 0 !important; }
.nw-nl--inline .nw-nl__t { font-size: 24px; }
.nw-nl--inline .nw-nl__p { font-size: 15px; margin-top: 6px; }
.nw-nl--inline .nw-nl__icon { width: 44px; height: 44px; border-radius: 13px; }
.prose .nw-nl a, .prose .nw-nl a:hover { text-decoration: none; color: inherit; }
.prose .nw-nl .nw-nlf__ok a { text-decoration: underline; }
.prose .nw-nl .nw-nl__fine a { color: var(--ink-2); }
.prose .nw-nl h2 { margin: calc(-1 * var(--gt-t)) calc(-1 * var(--gt-e)) calc(-1 * var(--gt-b)) 0; font-size: 24px; }
.prose .nw-nl p { margin: 0; }
.prose .nw-nl .nw-nl__p { margin-top: 6px; }
.prose .nw-nl .nw-nl__fine { margin-top: 12px; }
@media (max-width: 900px) { .nw-nl { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .nw-nl { padding: 24px 20px; border-radius: 22px; }
  .nw-nl__copy { flex-direction: column; gap: 16px; } /* one left edge: icon, title, text, form */
  .nw-nl__icon { width: 44px; height: 44px; }
  .nw-nlf__row { flex-direction: column; border-radius: 18px; padding: 6px; }
  .nw-nlf__in { flex: none; height: 48px; }
  .nw-nlf__btn { width: 100%; --bh: 48px; }
  .nw-nl--inline { padding: 22px 18px; }
}

/* ================= press releases (empty state) ================= */
.nw-empty { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px 28px; padding: clamp(24px, 3vw, 36px); border-radius: 4px; background: repeating-linear-gradient(135deg, rgba(10,8,20,.018) 0 10px, transparent 10px 20px), var(--paper-2); }
.nw-empty .plus { position: absolute; width: 14px; height: 14px; color: var(--ink-4); }
.nw-empty .plus::before, .nw-empty .plus::after { content: ""; position: absolute; background: currentColor; }
.nw-empty .plus::before { left: 6px; top: 0; width: 1px; height: 14px; } .nw-empty .plus::after { top: 6px; left: 0; height: 1px; width: 14px; }
.nw-empty__icon { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); }
.nw-empty__icon .ic { width: 26px; height: 26px; stroke-width: 1.5; }
.nw-empty h3 { font-size: 21px; letter-spacing: -.02em; }
.nw-empty p { font-size: 15px; color: var(--ink-3); margin-top: 4px; }
.nw-press { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 760px) {
  .nw-empty { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .nw-empty .btn { width: 100%; }
  .nw-press { grid-template-columns: minmax(0, 1fr); }
}

/* ================= desk line (news footer) ================= */
.nw-desk { background: var(--paper); border-top: 1px solid var(--line); padding: 22px 0; }
.nw-desk__in { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.nw-desk__mark { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #0A0A0F; color: #fff; flex: none; }
.nw-desk__mark .ic { width: 15px; height: 15px; }
.nw-desk p { flex: 1; min-width: 240px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.nw-desk nav { display: flex; gap: 6px 20px; flex-wrap: wrap; }
.nw-desk nav a { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.nw-desk nav a:hover { color: var(--violet-3); }
.nw-desk[data-theme="night"] { background: var(--night); border-top-color: rgba(255,255,255,.08); }
.nw-desk[data-theme="night"] p { color: var(--snow-3); }
.nw-desk[data-theme="night"] nav a { color: var(--snow-2); }
.nw-desk[data-theme="night"] nav a:hover { color: #fff; }
@media (max-width: 760px) { .nw-desk p { min-width: 0; flex-basis: calc(100% - 48px); } .nw-desk nav a { padding: 10px 0; } }

/* ================= article ================= */
.nw-agrid { display: grid; grid-template-columns: minmax(0, 1fr) var(--nw-rail); column-gap: clamp(40px, 5vw, 72px); max-width: calc(1084px + var(--gutter) * 2); }
.nw-ahero { --nw-ov: clamp(96px, 15vw, 232px); position: relative; overflow: clip; padding: clamp(40px, 5vw, 64px) 0 calc(var(--nw-ov) + clamp(40px, 4vw, 56px)); }
.nw-ahero .bg-beam { background: radial-gradient(46% 80% at 30% -10%, rgba(160,120,255,.5), rgba(110,60,240,.12) 55%, transparent 80%); }
.nw-ahero__in { position: relative; }
.nw-ahero__main { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 18px; max-width: 940px; }
.nw-ahero .crumbs .ic { width: 13px; height: 13px; }
.nw-ahero__kick { margin-top: 6px; }
.nw-ahero__t { font-size: clamp(32px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; color: #fff; }
.nw-ahero__dek { font-size: 20px; line-height: 1.5; color: var(--snow-2); max-width: 760px; margin-top: -2px; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nw-ahero__by { display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--nline); }
.nw-byline--hero { gap: 14px; font-size: 14.5px; color: var(--snow-2); }
.nw-byline__who { display: flex; flex-direction: column; gap: 3px; }
.nw-byline__who small { display: flex; align-items: center; font-size: 13px; color: var(--snow-3); }
.nw-byline__who small .nw-sep { margin: 0 8px; }
.nw-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nw-share__l { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--snow-4); margin-right: 4px; }
.nw-share__b { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: var(--snow-2); transition: .25s var(--ease); }
.nw-share__b svg { width: 16px; height: 16px; }
.nw-share__b:hover { background: #fff; color: #0A0A0F; border-color: #fff; transform: translateY(-2px); }
/* body */
.nw-abody { position: relative; padding-bottom: clamp(56px, 7vw, 96px); background: var(--paper); }
.nw-cover { grid-column: 1 / -1; margin: calc(-1 * var(--nw-ov, 200px)) 0 clamp(36px, 4.4vw, 60px); position: relative; z-index: 2; }
.nw-abody .nw-cover { margin-top: calc(-1 * clamp(96px, 15vw, 232px)); }
.nw-cover__img { border-radius: 24px; box-shadow: 0 50px 100px -40px rgba(10, 4, 30, .6), 0 20px 40px -20px rgba(10,4,30,.35); }
.nw-cover figcaption { margin-top: 12px; font-size: 12.5px; color: var(--ink-3); text-align: right; }
.nw-article { min-width: 0; }
.nw-prose { font-size: 18px; line-height: 1.75; max-width: 700px; color: #2E2E38; }
.nw-prose > * + * { margin-top: 1.15em; }
.nw-prose .nw-lede { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.58; color: var(--ink); letter-spacing: -.012em; font-weight: 450; }
.nw-prose h2 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.18; margin-top: calc(1.9em - var(--gt-t)); letter-spacing: -.028em; }
.nw-prose h3 { font-size: 21px; margin-top: calc(1.7em - var(--gt-t)); letter-spacing: -.02em; }
.nw-prose h4, .nw-prose h6 { font-family: var(--f-display); font-size: 18px; font-weight: 600; color: var(--ink); margin-top: 1.5em; letter-spacing: -.012em; }
.nw-prose h2 + *, .nw-prose h3 + *, .nw-prose h4 + * { margin-top: .6em; }
.nw .prose h2 + h3 { margin-top: calc(1.05em - var(--gt-t)); }
.nw .prose br + em { display: block; margin-top: .9em; }
.nw-prose ul, .nw-prose ol { padding-left: 1.3em; }
.nw-prose li::marker { color: var(--violet); }
.nw-prose li + li { margin-top: .55em; }
.nw-prose figure { margin: 2em 0; }
.nw-prose figure img, .nw-prose > p img { border-radius: 16px; width: 100%; height: auto; box-shadow: var(--shadow-2); }
.nw-prose figcaption { font-size: 13px; color: var(--ink-3); margin-top: 10px; }
.nw-prose hr { border: 0; height: 1px; background: var(--line); margin: 2em 0; }
.nw-prose a { color: var(--violet-3); text-decoration-color: rgba(94,63,230,.35); }
.nw-prose a:hover { text-decoration-color: currentColor; }
.nw-table { overflow-x: auto; margin: 1.8em 0; border: 1px solid var(--line); border-radius: 16px; background: var(--paper-2); }
.nw-table:focus-visible { outline-offset: 2px; }
.nw-prose table { min-width: 560px; font-size: 14.5px; line-height: 1.5; margin: 0; }
.nw-prose thead th { background: var(--paper); font-family: var(--f-display); font-weight: 600; color: var(--ink); font-size: 14px; }
.nw-prose th, .nw-prose td { padding: 12px 16px; }
.nw-prose tbody tr:last-child td { border-bottom: 0; }
/* official links (the WordPress "To learn more… visit:" block), one row per brand */
.nw-prose .nw-lks { margin-top: 2.4em; display: flex; flex-direction: column; gap: 14px; padding-top: 22px; border-top: 1px solid var(--line); }
/* the brand name keeps its own column; its buttons wrap next to it, never under it */
.nw-lks__g { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: start; gap: 8px 12px; }
.nw-lks__n { font-family: var(--f-body); font-size: 13px; font-weight: 500; color: var(--ink-3); line-height: 40px; white-space: nowrap; }
@media (max-width: 560px) { .nw-lks__g { grid-template-columns: minmax(0, 1fr); gap: 6px; } .nw-lks__n { line-height: 1.3; } }
.nw-lks__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nw-prose .nw-lk { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--paper-2); text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 550; line-height: 1; transition: background .2s, border-color .2s, color .2s, transform .25s var(--ease); }
.nw-prose .nw-lk:hover { background: #0A0A0F; border-color: #0A0A0F; color: #fff; }
.nw-lk .ic { width: 16px; height: 16px; flex: none; }
.nw-lk .nw-lk__out { width: 13px; height: 13px; opacity: .5; margin-left: -2px; }
.nw-lk__logo { width: 20px; height: 20px; border-radius: 6px; flex: none; }
.nw-prose .nw-lk--i { width: 40px; padding: 0; justify-content: center; color: var(--ink-2); }
.nw-lk--i svg { width: 16px; height: 16px; }
.nw-prose .nw-lk--i:hover { transform: translateY(-2px); }
/* key takeaways */
.nw-take { margin-bottom: 36px; padding: 22px 24px; border-radius: 18px; background: var(--paper-3); border-top: 2px solid var(--violet); }
.nw-take h2 { font-size: 13px; font-family: var(--f-mono); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: calc(12px - var(--gt-b)); }
.nw-take ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.nw-take li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.nw-take li span { font-family: var(--f-display); font-weight: 600; color: var(--violet-3); }
/* article footer */
.nw-afoot { max-width: 700px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.nw-disc { font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }
.nw-disc b { color: var(--ink-2); }
.nw-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.nw-tags__l { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px; }
/* author card */
.nw-acard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 14px; padding: 22px; border-radius: 20px; background: var(--paper-2); border: 1px solid var(--line); }
.nw-acard .nw-av--mark { background: linear-gradient(145deg, #2A2140, #07050D); }
.nw-acard__t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nw-acard__role { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.nw-acard__n { font-family: var(--f-display); font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); width: max-content; max-width: 100%; }
.nw-acard__n:hover { color: var(--violet-3); }
.nw-acard p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin-top: 2px; max-width: 520px; }
.nw-acard .nw-icons { margin-top: 10px; }
.nw-icons { display: flex; flex-wrap: wrap; gap: 8px; }
.nw-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--paper-2); border: 1px solid var(--line-2); color: var(--ink-2); transition: background .2s, color .2s, border-color .2s, transform .25s var(--ease); }
.nw-icon svg { width: 16px; height: 16px; }
.nw-icon:hover { background: #0A0A0F; color: #fff; border-color: #0A0A0F; transform: translateY(-2px); }
[data-theme="night"] .nw-icon { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: var(--snow-2); }
[data-theme="night"] .nw-icon:hover { background: #fff; color: #0A0A0F; border-color: #fff; }
.nw-discuss { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-top: 14px; padding: 18px 20px; border-radius: 20px; background: var(--paper-2); border: 1px solid var(--line); transition: border-color .3s, box-shadow .35s, transform .35s var(--ease); }
.nw-discuss:hover { border-color: rgba(33,117,235,.4); box-shadow: 0 24px 50px -30px rgba(33,117,235,.5); transform: translateY(-2px); }
.nw-discuss__i { width: 52px; height: 52px; border-radius: 14px; }
.nw-discuss__t { display: flex; flex-direction: column; gap: 2px; }
.nw-discuss__t b { font-family: var(--f-display); font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.nw-discuss__t span { font-size: 14px; color: var(--ink-3); }
.nw-discuss__go { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; background: #2175EB; color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; }
.nw-discuss__go .ic { width: 15px; height: 15px; }
/* rail */
.nw-rail { min-width: 0; display: flex; flex-direction: column; gap: 32px; }
/* the ad scrolls away; the list under it sticks below the header + news bar (and moves up when the header hides) */
.nw-rail__in { position: sticky; top: calc(var(--header-h) + var(--nw-bar-h) + 24px); display: flex; flex-direction: column; gap: 32px; transition: top .45s var(--ease); }
body:has(#site-header.is-hidden) .nw-rail__in { top: calc(var(--nw-bar-h) + 24px); }
.nw-rail__in.is-static { position: static; }
.nw-river--rail .nw-colh { margin-bottom: 0; }
.nw-river--rail .nw-ri__t { font-size: 15px; }
.nw-river--rail .nw-ri__meta time { font-size: 11px; }
.nw-railh { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 10px; border-bottom: 2px solid var(--ink); margin-bottom: 4px; }
.nw-railh h2 { font-size: 17px; letter-spacing: -.015em; }
.nw-railh a { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.nw-railh a .ic { width: 14px; height: 14px; }
.nw-rail-latest ol, .nw-rel-coins ul { list-style: none; padding: 0; margin: 0; }
.nw-rail-latest li a { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.nw-rl__img { border-radius: 10px; }
.nw-rail-latest b { display: block; font-family: var(--f-display); font-size: 14.5px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--ink); transition: color .2s; }
.nw-rail-latest small { display: block; font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.nw-rail-latest li a:hover b { color: var(--violet-3); }
.nw-rel-coins li a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.nw-rel-coins .nw-mv__n b { color: var(--ink); }
.nw-rc2 { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.nw-rc2 b { font-size: 14px; font-variant-numeric: tabular-nums; font-weight: 600; }
.nw-rc2 .nw-pct { font-size: 12px; }
.nw-rel-coins .nw-src { margin-top: 10px; font-size: 12px; }
.nw-rel-coins__disc { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
/* related */
.nw-sec--rel { background: var(--paper-2); }
.nw-rel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 1100px) {
  .nw-agrid { grid-template-columns: minmax(0, 1fr); max-width: calc(760px + var(--gutter) * 2); }
  .nw-rail { margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; }
  .nw-rail__in { position: static; display: contents; }
  .nw-rail-latest { grid-column: 1 / -1; }
  .nw-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .nw-ahero { --nw-ov: 64px; padding-top: 28px; }
  .nw-ahero__main { gap: 14px; }
  .nw-ahero__t { font-size: 31px; line-height: 1.07; letter-spacing: -.035em; }
  .nw-ahero__dek { font-size: 17px; -webkit-line-clamp: 3; }
  .nw-ahero__by { flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 18px; }
  .nw-share { gap: 6px; }
  .nw-share__l { width: 100%; margin-bottom: 2px; }
  .nw-share__b { width: 44px; height: 44px; }
  .nw-abody .nw-cover { margin-top: -64px; }
  .nw-cover__img { border-radius: 16px; }
  .nw-prose { font-size: 17px; line-height: 1.72; }
  .nw-prose .nw-lede { font-size: 19px; }
  .nw-rail { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .nw-rel { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .nw-rel .nw-std { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
  .nw-rel .nw-std:last-child { border-bottom: 1px solid var(--line); }
  .nw-rel .nw-std__img { order: 2; aspect-ratio: 4 / 3; border-radius: 12px; }
  .nw-rel .nw-std__t { font-size: 17px; }
  .nw-discuss { grid-template-columns: auto minmax(0, 1fr); }
  .nw-discuss__go { grid-column: 1 / -1; justify-content: center; height: 46px; }
}

/* ================= listing pages ================= */
.nw-shero { position: relative; overflow: clip; padding: clamp(44px, 5vw, 72px) 0 clamp(48px, 5.6vw, 80px); }
.nw-shero .bg-beam { background: radial-gradient(44% 90% at 22% -20%, rgba(160,120,255,.5), rgba(110,60,240,.12) 55%, transparent 80%); }
.nw-shero__room { opacity: .06 !important; }
.nw-shero__in { position: relative; }
.nw-shero__txt { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* right half: real material (a fan of our covers, or the section's coins + publishers) */
@media (min-width: 1024px) {
  .nw-shero--art .nw-shero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px 64px; align-items: center; }
  .nw-shero--wire .nw-shero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 32px 56px; }
  /* below 1200 px the title keeps the full width; the panel sits under it */
  @media (max-width: 1199px) { .nw-shero--wire .nw-shero__in { display: block; } .nw-shero--wire .nw-shero__art { margin-top: 24px; max-width: 760px; } }
  /* coins on the left, publishers on the right: the panel stays as short as the title next to it */
  .nw-hside.nw-hside--2 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0; }
  .nw-hside--2 .nw-hside__g.nw-hside__g + .nw-hside__g { padding: 0 0 0 20px; margin-left: 20px; border-top: 0; border-left: 1px solid var(--nline); }
  .nw-hside--2 .nw-hside__g--coins .nw-hside__row { flex-direction: column; align-items: stretch; gap: 6px; }
  .nw-hside--2 .nw-cchip { justify-content: flex-start; }
  .nw-hside--2 .nw-cchip .nw-pct { margin-left: auto; }
  /* next to the coins, the publishers read as a short list: name, then how many headlines */
  .nw-hside--2 .nw-hside__src { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .nw-hside--2 .nw-schip { height: 25px; padding: 0; border: 0; border-radius: 0; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(255,255,255,.06); }
  .nw-hside--2 .nw-schip:last-child { border-bottom: 0; }
  .nw-hside--2 .nw-schip__w { display: inline; }
}
@media (max-width: 1023px) {
  .nw-shero__art { margin-top: 26px; }
  .nw-shero__art:has(> .nw-fan) { display: none; }
}
.nw-fan { position: relative; height: 270px; }
.nw-fan__c { position: absolute; left: 50%; top: 50%; width: 290px; border-radius: 16px; transition: transform .6s var(--ease), filter .4s; box-shadow: 0 40px 70px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.14); }
.nw-fan__img { border-radius: 16px; }
.nw-fan__c:nth-child(1) { z-index: 3; transform: translate(-50%, -40%) rotate(-1.5deg); }
.nw-fan__c:nth-child(2) { z-index: 2; transform: translate(calc(-50% - 62px), -62%) rotate(-8deg) scale(.86); filter: brightness(.6); }
.nw-fan__c:nth-child(3) { z-index: 1; transform: translate(calc(-50% + 62px), -64%) rotate(7deg) scale(.86); filter: brightness(.6); }
.nw-fan:hover .nw-fan__c:nth-child(1) { transform: translate(-50%, -43%) rotate(0deg); }
.nw-fan:hover .nw-fan__c:nth-child(2) { transform: translate(calc(-50% - 70px), -64%) rotate(-10deg) scale(.86); }
.nw-fan:hover .nw-fan__c:nth-child(3) { transform: translate(calc(-50% + 70px), -66%) rotate(9deg) scale(.86); }
.nw-fan__c:hover { filter: none; }
.nw-hside { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.018)); border: 1px solid var(--nline); }
.nw-hside__g { display: flex; flex-direction: column; gap: 10px; }
.nw-hside__g + .nw-hside__g { padding-top: 14px; border-top: 1px solid var(--nline); }
.nw-hside__l { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--snow-3); }
.nw-hside__row { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.nw-hside .nw-src { font-size: 12px; }
a.nw-cchip { transition: background .2s, border-color .2s; }
a.nw-cchip:hover { background: rgba(255,255,255,.1); border-color: var(--nline-2); }
.nw-schip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--nline-2); font-size: 13px; font-weight: 500; color: var(--snow); white-space: nowrap; }
.nw-schip small { font-family: var(--f-mono); font-size: 11px; color: var(--snow-3); }
.nw-schip__w { display: none; } /* chips: the count alone; the words only in the list next to the coins */
/* a section fed only by headlines: a shorter hero (the headlines are the page) */
.nw-shero--wire { padding: clamp(28px, 2.6vw, 36px) 0 clamp(32px, 2.8vw, 40px); }
.nw-shero--wire .nw-shero__txt { gap: 12px; }
.nw-shero--wire .nw-shero__t { font-size: clamp(38px, 4.2vw, 62px); }
/* breadcrumbs: links read as links, the last crumb is where the reader is */
.nw-crumbs a { color: var(--snow-2); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.nw-crumbs a:hover { color: var(--snow); text-decoration-color: currentColor; }
.nw-crumbs [aria-current] { color: var(--snow-3); cursor: default; }
.nw-shero .crumbs .ic { width: 13px; height: 13px; }
.nw-shero__t { font-size: clamp(40px, 5.6vw, 80px); line-height: .98; letter-spacing: -.05em; color: #fff; margin-top: 6px; text-wrap: balance; }
.nw-shero__d { font-size: clamp(17px, 1.4vw, 20px); color: var(--snow-2); max-width: 640px; line-height: 1.5; }
.nw-shero__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 0; margin-top: 8px; font-size: 13.5px; color: var(--snow-3); }
.nw-shero__meta .btn { margin-right: 12px; }
.nw-shero__meta .btn .ic { width: 17px; height: 17px; }
.nw-shero__coins { display: flex; gap: 8px; flex-wrap: wrap; margin-left: 18px; }
.nw-cchip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 8px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--nline); font-size: 13px; color: var(--snow-2); font-variant-numeric: tabular-nums; }
.nw-cchip b { color: var(--snow); font-weight: 600; }
.nw-cchip .nw-pct { font-size: 12px; }
@media (max-width: 760px) {
  .nw-shero__art { margin-top: 24px; }
  /* phones: no box, the coins on one swipeable row, the publishers as small chips */
  .nw-hside { padding: 18px 0 0; gap: 16px; background: none; border: 0; border-top: 1px solid var(--nline); border-radius: 0; }
  .nw-hside__g + .nw-hside__g { padding-top: 0; border-top: 0; }
  .nw-hside__g--coins .nw-hside__row { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px; }
  .nw-hside .nw-cchip { justify-content: flex-start; height: 40px; border-radius: 12px; }
  .nw-hside .nw-cchip .nw-pct { margin-left: auto; }
  .nw-schip { height: 30px; padding: 0 11px; font-size: 13px; }
  .nw-shero__coins { margin-left: 0; width: 100%; }
  .nw-shero__t { font-size: 42px; }
  .nw-shero__meta { flex-direction: column; align-items: flex-start; gap: 4px; }
  .nw-shero__meta .nw-sep { display: none; }
  .nw-shero__meta .btn { width: 100%; margin: 0 0 8px; }
}
/* author head */
.nw-ahead { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 12px; }
.nw-ahead__photo { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; filter: grayscale(1); box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 0 0 7px rgba(255,255,255,.03), 0 30px 60px -20px rgba(0,0,0,.8); transition: filter .6s; }
.nw-ahead__photo:hover { filter: none; }
.nw-ahead__photo--mark { display: grid; place-items: center; background: linear-gradient(145deg, #2A2140, #07050D); color: #fff; filter: none; }
.nw-ahead__photo--mark .ic { width: 48px; height: 48px; }
.nw-ahead__txt { display: flex; flex-direction: column; gap: 10px; }
.nw-ahead__role { font-size: 14px; font-weight: 500; letter-spacing: 0; background: linear-gradient(90deg, var(--violet-2), #E7DEFF 60%, var(--violet-2)); -webkit-background-clip: text; background-clip: text; color: transparent; width: max-content; max-width: 100%; }
.nw-ahead .nw-shero__t { font-size: clamp(36px, 4.6vw, 64px); margin-top: 0; }
.nw-ahead .nw-shero__d { font-size: 16.5px; max-width: 720px; }
.nw-ahead__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin-top: 8px; }
.nw-ahead__count { font-size: 14px; color: var(--snow-3); }
.nw-ahead__count b { color: var(--snow); font-weight: 600; }
@media (max-width: 760px) { .nw-ahead { grid-template-columns: minmax(0, 1fr); gap: 20px; } .nw-ahead__photo { width: 88px; height: 88px; } }

/* lead block */
.nw-sec--list { padding-top: clamp(36px, 4vw, 56px); }
.nw-lb { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; margin-bottom: clamp(48px, 5vw, 72px); }
.nw-lb__media { display: block; }
.nw-lb__img { border-radius: 22px; }
.nw-lb__media:hover .nw-img img { transform: scale(1.03); }
.nw-lb__txt { display: flex; flex-direction: column; gap: 24px; }
.nw-lb__main { display: flex; flex-direction: column; gap: 14px; }
.nw-lb__t { font-size: clamp(26px, 2.5vw, 38px); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.nw-lb__dek { font-size: 16.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.nw-lb__side { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.nw-lb__side li { display: flex; flex-direction: column; gap: 5px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.nw-lb__side li:last-child { border-bottom: 0; padding-bottom: 0; }
.nw-lb__side a { font-family: var(--f-display); font-size: 16.5px; line-height: 1.3; font-weight: 600; letter-spacing: -.012em; }
.nw-lb__side span { font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 900px) { .nw-lb { grid-template-columns: minmax(0, 1fr); gap: 22px; } .nw-lb__img { border-radius: 16px; } }

/* two columns: main + rail */
.nw-cols { display: grid; grid-template-columns: minmax(0, 1fr) var(--nw-rail); gap: clamp(40px, 5vw, 72px); align-items: start; }
.nw-cols > .nw-rail { align-self: stretch; } /* full column height, so the list in it can stick */
.nw-main { min-width: 0; display: flex; flex-direction: column; gap: 36px; }
.nw-main__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 36px; border-radius: 22px; border: 1px dashed var(--line-2); color: var(--ink-3); }
.nw-main__empty > .ic { width: 28px; height: 28px; color: var(--ink-2); }
.nw-main__empty p { font-size: 16px; color: var(--ink-2); }
@media (max-width: 1100px) {
  .nw-cols { grid-template-columns: minmax(0, 1fr); }
  .nw-cols .nw-rail { margin-top: 8px; }
}

/* river cards (section / author / tag) */
.nw-river2 { display: flex; flex-direction: column; }
.nw-rc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--line); }
.nw-river2 > .nw-rc:first-child { padding-top: 0; }
.nw-rc__img { aspect-ratio: 3 / 2; border-radius: 14px; }
.nw-rc__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.nw-rc__t { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.22; letter-spacing: -.022em; text-wrap: pretty; }
.nw-rc__dek { font-size: 15px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.nw-rc__mm { display: none; }
.nw-rc__foot { margin-top: 2px; }
@media (max-width: 760px) {
  .nw-rc { grid-template-columns: minmax(0, 1fr) 104px; gap: 16px; padding: 20px 0; }
  .nw-rc__img { order: 2; aspect-ratio: 4 / 3; border-radius: 12px; }
  .nw-rc__t { font-size: 18px; }
  .nw-rc__dek { display: none; }
  .nw-rc .nw-byline, .nw-rc__d { display: none; }
  .nw-rc__mm { display: flex; }
}

/* small screens: generous tap targets; small labels inside cards hand the tap to the card */
@media (max-width: 760px) {
  .nw-more-link { min-height: 44px; }
  .nw-river__all, .nw-strip__all { min-height: 44px; }
  .nw-card .nw-kick, .nw-ahero__kick .nw-kick { pointer-events: none; }
  .nw-card .nw-up { pointer-events: none; }
  .nw-byline--hero .nw-up, .nw-shero .crumbs a, .nw-ahero .crumbs a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .nw-tags .tag { height: 44px; padding: 0 16px; }
  .nw-prose .nw-lk { height: 44px; }
  .nw-prose .nw-lk--i, .nw-icon { width: 44px; height: 44px; }
  .nw-desk nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  .nw-sec-card__img, .nw-row__img { pointer-events: none; }
  .nw-c-coin a { min-height: 44px; }
  .nw-seg button { height: 44px; min-height: 44px; padding-inline: 16px; }
  .nw-seg { padding: 2px; }
  .nw-ecard__links a { min-height: 44px; }
  .nw-nlf__ok { min-height: 44px; align-items: center; }
  .nw-nl__fine a { min-height: 44px; }
  .nw-ahead .social { width: 44px; height: 44px; }
  .nw-main__empty .link { min-height: 44px; }
}
@media (min-width: 761px) and (max-width: 1199px) { .nw-sec-card__img { aspect-ratio: 16 / 9; } }
@media (prefers-reduced-motion: reduce) { .nw-g__needle, .nw-spark { transition: none !important; } }

/* small screens: in-flow ads sit on the same 20 px gutter as the text */
@media (max-width: 760px) {
  .nw-ad--mob, .nw-ad--mpu, .nw-ad--inart { width: 100%; max-width: none; margin-inline: 0 !important; }
  .nw-top__mpu { align-self: stretch; }
  .nw-ad--inart .ad__label { left: 2px; transform: none; }
  .nw-house--mob { padding: 0 16px; }
  .nw-house--inart { height: auto; }
  .nw-house--inart .nw-house__cta { margin-top: 20px; }
}
/* copy-link toast: the confirmation, then the link itself */
.toast .nw-toast { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toast .nw-toast b { font-size: 14px; font-weight: 600; }
.toast .nw-toast small { font-size: 12px; color: rgba(255,255,255,.6); max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* site chrome on news pages: the footer sign-up would repeat the news sign-up a screen above it */
body:has(.nw) #site-footer .foot-news { display: none; }

/* copy link refused by the browser: the link itself, selected, to copy by hand */
.toast.nw-toast--copy { pointer-events: auto; align-items: flex-start; gap: 12px; padding: 14px 8px 14px 18px; }
.nw-toast__in { display: block; margin-top: 8px; width: min(340px, calc(100vw - 120px)); height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; font: 13px/1 var(--f-body); outline: none; }
.nw-toast__in:focus { border-color: var(--violet-2); }
.nw-toast__x { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: rgba(255,255,255,.7); }
.nw-toast__x:hover { background: rgba(255,255,255,.08); color: #fff; }
.nw-toast__x .ic { width: 16px; height: 16px; color: inherit; }

/* ================= dark mode (html[data-mode="dark"]: paper/white sections become night, tokens remapped) =================
   Literal light surfaces above use tokens; what stays literal is set here for night surfaces. */
[data-theme="night"] .nw-prose { color: rgba(246, 244, 251, .8); }
[data-theme="night"] .nw-prose a { color: var(--violet-2); text-decoration-color: rgba(166, 144, 255, .4); }
[data-theme="night"] .nw-prose .nw-lk, [data-theme="night"] .nw-prose .nw-lk--i { color: var(--snow); }
[data-theme="night"] .nw-prose .nw-lk:hover { background: #fff; border-color: #fff; color: #0A0A0F; }
[data-theme="night"] .nw-ri__meta time, [data-theme="night"] .nw-w__cat, [data-theme="night"] .nw-wire--tl .nw-w__meta time,
[data-theme="night"] .nw-take li span { color: var(--violet-2); }
[data-theme="night"] .nw-ri__a:hover .nw-ri__t, [data-theme="night"] .nw-w__a:hover .nw-w__t, [data-theme="night"] .nw-annl__a:hover b,
[data-theme="night"] .nw-rail-latest li a:hover b, [data-theme="night"] .nw-acard__n:hover, [data-theme="night"] .nw-desk nav a:hover { color: var(--violet-2); }
[data-theme="night"] .nw-pick:hover .nw-pick__n { color: var(--violet-2); }
[data-was] .nw-ad, [data-theme="night"] .nw-ad { background: transparent; border: 0; }
[data-was] .nw-house { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
[data-was] .nw-sc { background: rgba(255, 255, 255, .035); }
[data-was] .nw-sc--ctx { background: linear-gradient(180deg, rgba(166, 144, 255, .09), rgba(255, 255, 255, .03)); }
[data-was] .nw-sc:hover { border-color: var(--line-2); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .8); }
[data-was] .nw-w__share { background: rgba(255, 255, 255, .04); color: #6FA8F5; }
[data-was] .nw-w__share:hover { background: #2175EB; border-color: #2175EB; color: #fff; }
[data-was] .nw-nl { background: radial-gradient(70% 120% at 100% 0%, rgba(122, 90, 248, .26), transparent 60%), linear-gradient(135deg, #15112A, #0E0B18 55%, #120E22); border-color: rgba(166, 144, 255, .2); }
[data-was] .nw-nl__glow { opacity: .5; }
[data-was] .nw-nl__icon, [data-was] .nw-desk__mark { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
[data-was] .nw-nlf__row { background: rgba(255, 255, 255, .05); }
[data-was] .nw-nlf__btn.btn--violet { background: #7B52C4; }
[data-was] .nw-nlf__btn.btn--violet:hover { background: #8A63D2; }
[data-was] .nw-discuss, [data-was] .nw-acard, [data-was] .nw-table { background: rgba(255, 255, 255, .04); }
[data-was] .nw-take { background: rgba(255, 255, 255, .05); }
[data-was] .nw-cover__img { box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08); }
[data-was] .nw-prose figure img, [data-was] .nw-prose > p img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
[data-was] .nw-img::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
[data-was] .nw-fchip { background: transparent; }
[data-was] .nw-av { background: var(--paper-3); }
/* the sections menu and the search panel live in the bar (night or paper): in dark mode they are always dark */
html[data-mode="dark"] .nw-more, html[data-mode="dark"] .nw-search__box {
  --paper: #09070E; --paper-2: #121019; --paper-3: #1A1724;
  --ink: #F6F4FB; --ink-2: rgba(246,244,251,.78); --ink-3: rgba(246,244,251,.58); --ink-4: rgba(246,244,251,.4);
  --line: rgba(255,255,255,.085); --line-2: rgba(255,255,255,.15); --violet-soft: rgba(122,90,248,.2); --violet-3: #A690FF;
  background: #121019; color: var(--snow); border-color: rgba(255, 255, 255, .1); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9);
}
html[data-mode="dark"] .nw-more .nw-chip:hover { background: rgba(255, 255, 255, .06); }

/* ================= 28/09 — Thomas's review ================= */
/* the masthead never cuts the last letter */
.nw-mast .t-silver { display: inline-block;  }
/* our articles carry the Kcalb Ltd mark */
.nw-own { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px 0 7px; border-radius: 999px; background: rgba(122,90,248,.1); color: #5B3FD6; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; line-height: 1; white-space: nowrap; }
.nw-own .ic { width: 12px; height: 12px; }
[data-theme="night"] .nw-own { background: rgba(167,139,250,.16); color: #CFC2FF; }

/* ---- the stream (Yahoo-style): one column of stories, a rail on the side ---- */
.nw-sec--stream { padding-top: clamp(36px, 4vw, 60px); }
.nw-filter--stream { margin-bottom: 8px; }
.nw-fchip--own .ic { width: 14px; height: 14px; color: var(--violet); }
.nw-fchip--own.is-on .ic { color: #CFC2FF; }
.nw-stream { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(28px, 3.6vw, 60px); align-items: start; }
.nw-stream__list { display: flex; flex-direction: column; }
.nw-st { position: relative; display: grid; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); }
.nw-st:first-child { border-top: 0; }
.nw-st__body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.nw-st__t { font-family: var(--f-display); font-weight: 600; letter-spacing: -.02em; line-height: 1.24; margin: calc(-1 * var(--gt-t)) calc(-1 * var(--gt-e)) calc(-1 * var(--gt-b)) 0; color: var(--ink); }
/* headlines in the stream read as plain text (like any news list), in light and dark mode */
[data-theme] .nw-st__t { background: none; -webkit-text-fill-color: currentColor; }
.nw-st__t .nw-out { width: 14px; height: 14px; margin-left: 6px; vertical-align: -1px; opacity: .45; }
/* ours: the picture, the Kcalb Ltd mark, the dek */
.nw-st--ours { grid-template-columns: minmax(0, 264px) minmax(0, 1fr); align-items: start; }
.nw-st--ours .nw-img { border-radius: 14px; aspect-ratio: 16 / 10; }
.nw-st--ours .nw-st__t { font-size: clamp(19px, 1.6vw, 23px); }
.nw-st__dek { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nw-st--ours:hover .nw-img img { transform: scale(1.035); }
/* other publishers: the desk tile, the source, the time, the headline (never their picture nor their text) */
.nw-st--wire { grid-template-columns: 52px minmax(0, 1fr) auto; align-items: start; gap: 18px; }
.nw-st__desk { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; color: var(--violet-3); background: var(--paper-2); border: 1px solid var(--line); box-shadow: 0 8px 18px -14px rgba(10,8,20,.45); }
.nw-st__desk .ic { width: 22px; height: 22px; }
[data-theme="night"] .nw-st__desk { color: #CFC2FF; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); box-shadow: none; }
/* a headline about one coin shows that coin's real logo (CoinGecko image) */
.nw-st__desk--coin { padding: 9px; }
.nw-st__desk--coin img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }
.nw-st__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--ink-3); }
.nw-st__src { color: var(--ink); font-weight: 650; }
.nw-st__dk { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--violet-3); }
[data-theme="night"] .nw-st__dk { color: var(--violet-2); }
.nw-st--wire .nw-st__t { font-size: clamp(17px, 1.35vw, 19px); }
.nw-st__share { position: relative; z-index: 2; align-self: center; }
/* an advertisement every six stories */
.nw-st--ad { display: block; padding: 22px 0 24px; }
.nw-ad--stream { max-width: none; }
.nw-house--stream { min-height: 112px; align-items: center; gap: 18px; padding: 20px 24px; }
.nw-house--stream .nw-house__t { font-size: 20px; }
.nw-house--stream .nw-house__cta { margin-left: auto; }
.nw-house--co.nw-house--stream { flex-direction: row; }
.nw-house--co.nw-house--stream .nw-house__word { height: 24px; width: auto; flex: none; }
.nw-house--co.nw-house--stream .nw-house__t { font-size: 18px; }
.nw-stream__foot { display: flex; justify-content: center; padding-top: 26px; border-top: 1px solid var(--line); }
.nw-stream__more .ic { width: 16px; height: 16px; }
/* the rail: markets, one advertisement, our latest; it stays on screen while the stream scrolls */
.nw-srail__in { position: sticky; top: calc(var(--header-h) + 84px); display: flex; flex-direction: column; gap: 26px; }
.nw-srail__box { padding: 18px 18px 14px; border-radius: 18px; background: var(--paper-2); border: 1px solid var(--line); }
.nw-sm__list { list-style: none; margin: 0; padding: 0; }
.nw-sm__a { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.nw-sm__list li:last-child .nw-sm__a { border-bottom: 0; }
.nw-sm__n { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.nw-sm__n b { font-size: 13.5px; } .nw-sm__n small { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nw-sm__p { font-family: var(--f-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.nw-sm .nw-src { margin-top: 8px; font-size: 11.5px; }
.nw-srail__ad { width: 300px; }
.nw-sown { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nw-sown__i { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.nw-sown__i:last-child { border-bottom: 0; }
.nw-sown__img { border-radius: 10px; aspect-ratio: 4 / 3; }
.nw-sown__t { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; color: var(--ink); }
.nw-sown__t a { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nw-sown__t small { font-size: 12px; font-weight: 400; color: var(--ink-3); }
@media (max-width: 1100px) { .nw-stream { grid-template-columns: minmax(0, 1fr); } .nw-srail { display: none; } }
@media (max-width: 760px) {
  .nw-st--ours { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .nw-st--wire { grid-template-columns: 42px minmax(0, 1fr); gap: 14px; }
  .nw-st__desk { width: 42px; height: 42px; border-radius: 12px; } .nw-st__desk .ic { width: 19px; height: 19px; }
  .nw-st__share { display: none; }
  .nw-house--stream { flex-wrap: wrap; } .nw-house--stream .nw-house__cta { margin-left: 0; }
  .nw-filter--stream { gap: 6px; }
  .nw-filter--stream .nw-fchip { height: 34px; padding: 0 12px; font-size: 13.5px; }
}
/* the Markets page: the board right under the bar */
.nw--markets .nw-board--flush { padding-top: clamp(28px, 3vw, 44px); }

/* Fear & Greed names its source next to the figure (alternative.me's condition for commercial use) */
.nw-sc__by { margin-left: auto; font-size: 10px; font-weight: 500; letter-spacing: .02em; color: var(--ink-3); }
[data-theme="night"] .nw-sc__by { color: var(--snow-3); }
/* XTC / INO figures: each column as wide as its label (long labels in French, German…) */
.nw-ecard__dl { grid-template-columns: repeat(3, auto); justify-content: space-between; }

/* ==== pages/people.css ==== */
/* ================= PEOPLE: #team, #careers, #careers.<slug>, #careers.apply (prefix .pp-) ================= */

/* ---------- heroes (night stage: beam + light floor) ---------- */
.pp-hero { isolation: isolate; }
.pp-hero .page-hero__inner { z-index: 2; }
.pp-floor { position: absolute; left: 50%; bottom: 0; width: max(1500px, 115%); height: 220px; transform: translateX(-50%); pointer-events: none; z-index: 0;
  background: url(assets/bg/shape-light.svg) center bottom / 100% 100% no-repeat; opacity: .32;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 92%); mask-image: linear-gradient(to top, #000 10%, transparent 92%); }
.pp-hero__title { font-size: clamp(36px, 4.6vw, 66px); line-height: 1.02; letter-spacing: -.042em; max-width: 15.5ch; padding-bottom: calc(.06em + var(--gt-b)); }
.page-hero--center .pp-hero__title { margin-inline: auto; padding-left: var(--gt-e); /* centred: the same room on both sides */ }
.pp-hero__title--team { font-size: clamp(34px, 3.9vw, 56px); }
.pp-hero--team { padding-top: calc(var(--header-h) + clamp(56px, 7vw, 100px)); padding-bottom: clamp(60px, 6.5vw, 96px); }
.pp-hero--team .t-lead { font-size: clamp(16px, 1.25vw, 19px); }
.pp-hero--careers { padding-bottom: clamp(96px, 10vw, 150px); }
.pp-hero--careers .pp-hero__title { max-width: 17ch; }
.pp-hero__cta { justify-content: center; margin-top: 8px; }
.pp-hero--doc { padding-top: calc(var(--header-h) + clamp(48px, 6vw, 88px)); padding-bottom: clamp(56px, 6vw, 88px); }
.pp-hero--doc .page-hero__inner { max-width: 900px; gap: 18px; }
.pp-hero--doc .pp-hero__title { max-width: 20ch; font-size: clamp(34px, 4.2vw, 60px); }
.pp-hero--doc .t-lead { max-width: 700px; }
a.pp-pill { transition: border-color .25s, background .25s, color .25s; }
a.pp-pill .ic { transition: transform .3s var(--ease); }
[data-theme="night"] a.pp-pill:hover { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.09); color: var(--snow); }
a.pp-pill:hover .ic { transform: translateX(2px); }

/* floating frosted-glass icon tiles (careers + apply heroes) */
.pp-tiles { position: absolute; inset: 0; pointer-events: none; z-index: 1; max-width: 1480px; margin-inline: auto; }
.pp-tile { position: absolute; will-change: transform; }
.pp-tile__in { display: grid; place-items: center; width: var(--ts); height: var(--ts); border-radius: calc(var(--ts) * .28); color: #fff;
  background: linear-gradient(150deg, rgba(255,255,255,.17), rgba(255,255,255,.035) 62%);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -14px 28px rgba(122,90,248,.10), 0 34px 60px -26px rgba(0,0,0,.85);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  opacity: 0; transform: rotate(var(--rot)) translateY(16px) scale(.9);
  transition: opacity 1s var(--ease) var(--td), transform 1.3s var(--ease-out) var(--td); }
.pp-hero.is-in .pp-tile__in { opacity: 1; transform: rotate(var(--rot)); }
.pp-tile__in .ic { width: 40%; height: 40%; stroke-width: 1.35; }
.pp-tile--1 { left: 8.5%; top: 36%; --ts: 88px; --rot: -9deg; --td: .15s; }
.pp-tile--2 { left: 17%; top: 67%; --ts: 62px; --rot: 7deg; --td: .32s; }
.pp-tile--3 { right: 9.5%; top: 29%; --ts: 76px; --rot: 8deg; --td: .22s; }
.pp-tile--4 { right: 17.5%; top: 63%; --ts: 64px; --rot: -6deg; --td: .4s; }
.pp-tile__mark { width: 44px; height: auto; overflow: visible; filter: drop-shadow(0 0 14px rgba(170,140,255,.35)); }
/* apply hero: the right half, clear of the title and lead (text ends near x = 780 at 1440) */
.pp-tile--a1 { right: 12%; top: 33%; --ts: 100px; --rot: -8deg; --td: .15s; }
.pp-tile--a2 { right: 29%; top: 60%; --ts: 64px; --rot: 9deg; --td: .34s; }
.pp-tile--a3 { right: 4.5%; top: 64%; --ts: 70px; --rot: 7deg; --td: .26s; }
.pp-tile--a4 { right: 27%; top: 25%; --ts: 56px; --rot: -6deg; --td: .42s; }
.pp-tile--a1 .pp-tile__mark { width: 50px; }

/* ---------- TEAM: drafting board ---------- */
.pp-team { padding-top: clamp(64px, 7vw, 108px); padding-bottom: clamp(72px, 8vw, 128px); }
.pp-team .room-top { opacity: .45; }
.pp-board { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pp-board__lines { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.pp-ln { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s var(--ease-in-out) var(--d, 0ms); }
.pp-board.is-drawn .pp-ln { stroke-dashoffset: 0; }
.pp-plus { fill: none; stroke: var(--ink-3); stroke-width: 1; opacity: 0; transform: scale(.3); transform-box: fill-box; transform-origin: center; transition: opacity .5s var(--ease) var(--d, 0ms), transform .7s var(--ease-out) var(--d, 0ms); }
.pp-board.is-drawn .pp-plus { opacity: 1; transform: none; }
.pp-corner { fill: none; stroke: var(--ink-3); stroke-width: 1.5; opacity: 0; transition: opacity .8s var(--ease) .5s; }
.pp-board.is-drawn .pp-corner { opacity: 1; }

.pp-cell { position: relative; z-index: 1; min-width: 0; padding: 16px 16px 32px; transition: background-color .5s var(--ease); }
.pp-person:hover { background-color: rgba(255,255,255,.92); }
.pp-portrait { position: relative; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: #0C0B10;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .8s var(--ease-out), box-shadow .6s var(--ease);
  box-shadow: 0 18px 40px -30px rgba(16,10,40,.55); }
.pp-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; filter: grayscale(1) contrast(1.02) brightness(.98); transition: filter .7s var(--ease); }
.pp-portrait::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(to top, rgba(94,63,230,.2), rgba(94,63,230,0) 34%); opacity: 0; transition: opacity .7s var(--ease); }
.pp-portrait__sheen { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 55% at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.34), transparent 70%); mix-blend-mode: soft-light; opacity: 0; transition: opacity .6s var(--ease); }
.pp-person:hover .pp-portrait { box-shadow: 0 34px 60px -32px rgba(40,22,120,.6); }
.pp-person:hover .pp-portrait img { filter: grayscale(1) contrast(1.1) brightness(1.04); }
.pp-person:hover .pp-portrait::after { opacity: 1; }
.pp-person:hover .pp-portrait__sheen { opacity: 1; }

.pp-person__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 6px 0; }
.pp-person__id { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pp-person__name { font-family: var(--f-display); font-size: 23px; line-height: 1.15; letter-spacing: -.022em; font-weight: 600; color: var(--ink); }
.pp-rolel { margin: 0; font-size: 12px; line-height: 1.5; font-weight: 600; letter-spacing: .075em; text-transform: uppercase; color: var(--ink); }
.pp-rolel__b { background: linear-gradient(91deg, #4B30C9, var(--violet) 70%, #9A82FF); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pp-rolel i { font-style: normal; margin: 0 .5em; color: var(--ink-4); font-weight: 400; }
.pp-soc-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pp-soc { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--paper-2); border: 1px solid var(--line-2); color: var(--ink-2);
  transition: transform .3s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s; }
.pp-soc svg { width: 16px; height: 16px; }
/* gold is for the team only (Thomas's rule) */
.pp-soc:hover, .pp-soc:focus-visible { background: linear-gradient(135deg, #FF8A00, #FFC83D); border-color: transparent; color: #1C1204; transform: translateY(-2px); box-shadow: 0 12px 22px -12px rgba(255,138,0,.75); }
.pp-bio { margin-top: 8px; font-size: 15px; line-height: 1.66; color: var(--ink-2); text-wrap: pretty; }

.pp-note { display: flex; flex-direction: column; padding: 16px 16px 32px; }
/* Discord card in the portrait slot: same 4:5 frame and dark plate as the portraits, white type */
.pp-note__link { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; aspect-ratio: 4 / 5; padding: 20px; border-radius: 12px; color: #fff;
  background: radial-gradient(120% 90% at 20% 0%, #231B3D, #0C0B10 60%);
  box-shadow: 0 18px 40px -30px rgba(16,10,40,.55), inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.pp-note__link:hover { transform: translateY(-3px); box-shadow: 0 34px 60px -32px rgba(40,22,120,.6), inset 0 0 0 1px rgba(166,144,255,.3); }
.pp-note__glow { position: absolute; z-index: -1; right: -35%; top: -35%; width: 95%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(122,90,248,.34), transparent); opacity: .75; transition: opacity .5s var(--ease); }
.pp-note__link:hover .pp-note__glow { opacity: 1; }
.pp-note__top { display: flex; align-items: flex-start; justify-content: space-between; }
.pp-note__icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, rgba(255,255,255,.17), rgba(255,255,255,.035) 62%); border: 1px solid rgba(255,255,255,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22); }
.pp-note__icon svg { width: 20px; height: 20px; }
.pp-note__arrow { width: 18px; height: 18px; color: rgba(255,255,255,.55); transition: transform .3s var(--ease), color .3s; }
.pp-note__link:hover .pp-note__arrow { transform: translate(2px, -2px); color: #fff; }
.pp-note__num { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 18px; }
.pp-note__num b { font-family: var(--f-display); font-size: 44px; line-height: 1; font-weight: 600; letter-spacing: -.045em; }
.pp-note__num small { font-size: 14px; color: rgba(255,255,255,.62); }
.pp-note__t { display: block; margin-top: 6px; font-size: 16px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.pp-note__lbl { display: block; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.pp-note__langs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }
.pp-note__langs abbr { display: grid; place-items: center; height: 24px; border-radius: 7px; text-decoration: none; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .03em; color: rgba(255,255,255,.8); }
/* the WordPress statement: uppercase, between two "+" */
.pp-note__statement { padding: 22px 6px 0; font-size: 12.5px; line-height: 1.8; font-weight: 600; letter-spacing: .075em; text-transform: uppercase; color: var(--ink); text-wrap: pretty; }
.pp-note__plus { position: relative; display: inline-block; width: 9px; height: 9px; margin-right: .75em; vertical-align: 0; }
.pp-note__plus:last-child { margin: 0 0 0 .75em; }
.pp-note__plus::before, .pp-note__plus::after { content: ""; position: absolute; background: var(--violet); }
.pp-note__plus::before { left: 4px; top: 0; width: 1px; height: 9px; }
.pp-note__plus::after { left: 0; top: 4px; width: 9px; height: 1px; }

@media (min-width: 1180px) {
  .pp-person .pp-rolel { min-height: 3em; }
}
@media (max-width: 1179px) {
  .pp-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* name + role travel together at the foot of the portrait; any spare height falls below the bio,
     so two cards in the same row stay aligned whatever their bio length */
  .pp-person { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "pic id" "soc soc" "bio bio"; column-gap: 20px; padding: 20px 20px 30px; }
  .pp-person__body { display: contents; }
  .pp-portrait { grid-area: pic; }
  .pp-person__id { grid-area: id; align-self: end; gap: 8px; }
  .pp-rolel__a { display: block; white-space: nowrap; }
  .pp-rolel__b { display: block; }
  .pp-rolel i { display: none; }
  .pp-soc-row { grid-area: soc; margin-top: 20px; }
  .pp-bio { grid-area: bio; margin-top: 16px; align-self: start; }
  .pp-note { padding: 20px 20px 30px; }
  .pp-note__link { aspect-ratio: auto; }
  .pp-note__num { padding-top: 28px; }
  .pp-note__statement { padding: 22px 0 0; }
}

/* quotes band */
.pp-quotes { padding-block: clamp(84px, 9vw, 140px); }
.pp-quotes__glow { position: absolute; left: 50%; top: 0; width: min(1100px, 120%); height: 420px; transform: translate(-50%, -46%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(122,90,248,.32), rgba(122,90,248,.08) 55%, transparent); }
.pp-quotes__grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pp-quote { display: flex; flex-direction: column; gap: 26px; padding: 6px clamp(24px, 4.5vw, 72px) 6px 0; }
.pp-quote + .pp-quote { padding: 6px 0 6px clamp(24px, 4.5vw, 72px); border-left: 1px solid var(--nline); }
.pp-quote__mark { width: 40px; height: 30px; fill: var(--violet-2); opacity: .9; }
.pp-quote__text { font-family: var(--f-display); font-size: clamp(24px, 2.35vw, 35px); line-height: 1.22; letter-spacing: -.026em; font-weight: 500; text-wrap: balance; }
.pp-quote__text em { font-style: normal; }
[data-theme="night"] .pp-quote__text em .w.on { color: var(--violet-2); }
.pp-quote__by { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.pp-quote__by .avatar { filter: grayscale(1); object-position: 50% 12%; box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 0 0 5px rgba(255,255,255,.04); }
.pp-quote__by b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.pp-quote__by small { display: block; font-size: 13px; color: var(--snow-3); margin-top: 1px; }

/* closing CTA room */
.pp-close { padding-block: clamp(64px, 8vw, 120px); }
.pp-cta h2 { max-width: 16ch; padding-bottom: calc(.05em + var(--gt-b)); }
.pp-cta__label { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.pp-cta .btn-row { justify-content: center; margin-top: 10px; }
/* night room (team + careers): black, the hero beam from the top, violet perspective floor, silver title */
.pp-cta--night { position: relative; overflow: hidden; isolation: isolate; display: grid; justify-items: center; gap: 18px; text-align: center; border-radius: var(--r-xl); background: #050309; color: var(--snow);
  border: 1px solid rgba(255,255,255,.07); padding: clamp(64px, 8.5vw, 120px) clamp(24px, 5vw, 64px) clamp(84px, 10vw, 140px); }
/* ground shadow as a soft ellipse (a large box-shadow left a lighter band above the card in Chrome) */
.pp-close__in { position: relative; isolation: isolate; }
.pp-cta__shadow { position: absolute; z-index: -1; left: 12%; right: 12%; bottom: -36px; height: 110px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(24,10,70,.3), rgba(24,10,70,0)); }
.pp-cta__beam { position: absolute; z-index: -1; left: 50%; top: 0; width: max(1000px, 100%); aspect-ratio: 1920 / 1547; transform: translate(-50%, -14%); background: url(assets/bg/hero-beam.webp) center top / 100% 100% no-repeat; opacity: .9; pointer-events: none;
  -webkit-mask-image: radial-gradient(50% 42% at 50% 22%, #000 40%, transparent 100%); mask-image: radial-gradient(50% 42% at 50% 22%, #000 40%, transparent 100%); }
.pp-cta__floor { position: absolute; z-index: -1; left: -45%; right: -45%; bottom: -1px; height: 64%; pointer-events: none; transform: perspective(380px) rotateX(60deg); transform-origin: 50% 100%;
  background-image: linear-gradient(rgba(122,90,248,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(122,90,248,.18) 1px, transparent 1px);
  background-size: 68px 52px; background-position: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 30%, transparent 96%); mask-image: linear-gradient(to top, #000 30%, transparent 96%); }
.pp-cta--night .pp-cta__label { color: var(--snow-3); }
.pp-cta--night h2 { padding-bottom: calc(.08em + var(--gt-b)); }
.pp-cta--night p { max-width: 520px; color: var(--snow-2); }

/* ---------- CAREERS ---------- */
.pp-founders { padding-top: 0; padding-bottom: clamp(56px, 6.5vw, 96px); }
.pp-founders .pp-ethos__grid { padding-top: clamp(56px, 6.5vw, 96px); border-top: 1px solid var(--line); }
.pp-founders .pp-ethos__side .eyebrow { position: static; padding-top: 6px; }
.pp-founders__main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.pp-founders__people { display: grid; grid-template-columns: repeat(3, 150px); justify-self: start; width: max-content; max-width: 100%; }
.pp-founders__people > .plus.pp-plus--tl { left: -7px; top: -7px; } .pp-founders__people > .plus.pp-plus--tr { right: -7px; top: -7px; }
.pp-founders__people > .plus.pp-plus--bl { left: -7px; bottom: -7px; } .pp-founders__people > .plus.pp-plus--br { right: -7px; bottom: -7px; }
.pp-founders__people > .plus.pp-plus--t1 { left: calc(33.333% - 7px); top: -7px; } .pp-founders__people > .plus.pp-plus--t2 { left: calc(66.667% - 7px); top: -7px; }
.pp-founders__people > .plus.pp-plus--b1 { left: calc(33.333% - 7px); bottom: -7px; } .pp-founders__people > .plus.pp-plus--b2 { left: calc(66.667% - 7px); bottom: -7px; }
.pp-fd { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 14px 14px 18px; transition: background-color .4s var(--ease); }
.pp-fd + .pp-fd { border-left: 1px dashed var(--line-2); }
.pp-fd__pic { display: block; margin-bottom: 12px; border-radius: 6px; overflow: hidden; background: #0C0B10; }
.pp-fd__pic img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 14%; filter: grayscale(1) contrast(1.03); transition: filter .6s var(--ease), transform .8s var(--ease-out); }
.pp-fd:hover { background-color: rgba(255,255,255,.9); }
.pp-fd:hover img { filter: grayscale(1) contrast(1.12) brightness(1.04); transform: scale(1.03); }
.pp-fd__name { font-family: var(--f-display); font-size: 15.5px; line-height: 1.25; font-weight: 600; letter-spacing: -.015em; color: var(--ink); transition: color .3s; }
.pp-fd:hover .pp-fd__name { color: var(--violet-3); }
.pp-fd__role { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.pp-founders__quote { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.pp-founders__quote .pp-quote__mark { width: 34px; height: 26px; fill: var(--violet); opacity: .8; }
.pp-founders__quote blockquote { margin: 0; max-width: 20ch; font-family: var(--f-display); font-size: clamp(24px, 2.3vw, 34px); line-height: 1.2; letter-spacing: -.026em; font-weight: 500; color: var(--ink); text-wrap: balance; }
.pp-founders__quote em { font-style: normal; color: var(--violet-3); }
.pp-founders__quote figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--ink-3); }
.pp-founders__quote figcaption b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }

/* WordPress role illustrations: grayscale + a violet multiply wash, on a pale plate */
.pp-art { position: relative; display: block; flex: none; overflow: hidden; isolation: isolate; background: radial-gradient(120% 95% at 50% 18%, #F7F6FB, #E2DEEE); }
.pp-art img { display: block; width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) contrast(1.08) brightness(1.02); }
.pp-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(160deg, #D8D0FA 10%, #8D77EC); mix-blend-mode: multiply; opacity: .3; }
.pp-art--hero::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 -60px 80px -40px rgba(40,20,110,.35); }
.pp-art--hero { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 22px; }
.pp-art--hero img { width: min(250px, 86%); height: auto; aspect-ratio: 1; }
.pp-ethos { padding-top: clamp(96px, 11vw, 168px); padding-bottom: clamp(88px, 10vw, 150px); }
.pp-ethos .room-top { opacity: .5; }
.pp-ethos__grid { position: relative; display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); }
.pp-ethos__side .eyebrow { position: sticky; top: calc(var(--header-h) + 28px); padding-top: 14px; }
.pp-ethos__statement { font-size: clamp(28px, 3.5vw, 52px); line-height: 1.1; letter-spacing: -.036em; max-width: 21ch; }
.pp-ethos__rail { margin: clamp(36px, 4.5vw, 60px) 0; max-width: 880px; }
.pp-culture { max-width: 780px; font-size: clamp(19px, 1.65vw, 24px); line-height: 1.8; color: var(--ink-2); letter-spacing: -.01em; text-wrap: pretty; }
.pp-kw { display: inline; padding: .16em .55em .2em .5em; margin: 0 .04em; border-radius: 11px; background: var(--paper-2); border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 16px -10px rgba(28,16,70,.25); color: var(--ink); font-weight: 600; white-space: nowrap; }
.pp-kw .ic { display: inline-block; width: .88em; height: .88em; vertical-align: -.1em; margin-right: .38em; color: var(--violet); stroke-width: 2; }

.pp-roles { padding-top: 0; padding-bottom: clamp(24px, 3vw, 40px); }
.pp-roles__in { padding-top: clamp(56px, 6.5vw, 96px); border-top: 1px solid var(--line); }
.pp-roles__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 40px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 44px); }
.pp-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--paper-2); font-size: 14px; font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: background .25s, color .25s, border-color .25s; }
.pp-chip em { font-style: normal; font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-4); transition: color .25s; }
.pp-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.pp-chip.is-on { background: #0B0A10; border-color: #0B0A10; color: #fff; }
.pp-chip.is-on em { color: rgba(255,255,255,.6); }
.pp-joblist { border-top: 1px solid var(--line); }
.pp-job { position: relative; isolation: isolate; display: grid; grid-template-columns: 60px minmax(0, 1fr) auto 48px; gap: 28px; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--line); }
.pp-job::before { content: ""; position: absolute; z-index: -1; inset: 8px -22px; border-radius: 22px; background: var(--paper-2); border: 1px solid var(--line); box-shadow: 0 18px 40px -30px rgba(20,10,60,.3); opacity: 0; transform: scale(.985); transition: opacity .35s var(--ease), transform .45s var(--ease-out); }
.pp-job:hover::before { opacity: 1; transform: none; }
.pp-job[hidden], .pp-drop[hidden], .pp-file[hidden] { display: none !important; }
.pp-job__icon { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; color: #fff; flex: none;
  background: radial-gradient(120% 120% at 30% 0%, #2B2442, #0B0A10 62%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), inset 0 0 0 1px rgba(255,255,255,.05), 0 14px 26px -16px rgba(20,10,60,.7); }
.pp-job__icon .ic { width: 24px; height: 24px; stroke-width: 1.5; }
.pp-job__icon--sm { width: 44px; height: 44px; border-radius: 13px; }
.pp-job__icon--sm .ic { width: 19px; height: 19px; }
.pp-job__main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pp-job__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.pp-job__meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); }
.pp-job__title { font-size: clamp(21px, 1.85vw, 27px); line-height: 1.15; letter-spacing: -.025em; color: var(--ink); transition: color .3s; }
.pp-job:hover .pp-job__title { color: var(--violet-3); }
.pp-job__text { max-width: 640px; font-size: 15px; line-height: 1.6; color: var(--ink-3); text-wrap: pretty; }
.pp-job__side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; }
.pp-job__go { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--ink); background: var(--paper-2); transition: background .3s, color .3s, border-color .3s; }
.pp-job__go .ic { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.pp-job:hover .pp-job__go { background: #0B0A10; border-color: #0B0A10; color: #fff; }
.pp-job:hover .pp-job__go .ic { transform: translateX(2px); }
.pp-filled { gap: 6px; background: var(--paper-3); color: var(--ink-3); }
.pp-filled .ic { width: 14px; height: 14px; }
.pp-in { animation: pp-fade .5s var(--ease-out) both; }
@keyframes pp-fade { from { opacity: 0; transform: translateY(8px); } }


/* ---------- JOB PAGE ---------- */
.pp-jobhero { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(32px, 5vw, 88px); align-items: center; }
.pp-hero--job .page-hero__inner { max-width: 780px; }
.pp-jobhero__art { width: 100%; max-width: 360px; justify-self: end; padding: 8px; border-radius: 34px; }
.pp-jobhero__art > .bezel__in { padding: 0; border-radius: 26px; overflow: hidden; }
.pp-jobmeta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.pp-jobmeta > span:not(.badge) { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: var(--r-pill); background: rgba(255,255,255,.05); border: 1px solid var(--nline-2); font-size: 13.5px; color: var(--snow-2); white-space: nowrap; }
.pp-jobmeta .ic { width: 15px; height: 15px; opacity: .75; }
.pp-hero .pp-filled { height: 34px; padding: 0 14px; font-size: 13px; }
.pp-jobbody { padding-top: clamp(56px, 6vw, 96px); padding-bottom: clamp(64px, 7vw, 112px); }
.pp-jobgrid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(20px, 3vw, 40px); align-items: start; }
.pp-doc > .bezel__in { padding: clamp(22px, 4vw, 56px); }
.pp-filledbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 18px 14px 14px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); margin-bottom: clamp(30px, 4vw, 48px); }
.pp-filledbar__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: radial-gradient(120% 120% at 30% 0%, #2B2442, #0B0A10 62%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.pp-filledbar__ic .ic { width: 18px; height: 18px; }
.pp-filledbar b { display: block; font-size: 15px; color: var(--ink); }
.pp-filledbar div > span { display: block; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.pp-filledbar .link { font-size: 14px; white-space: nowrap; }
.pp-doc__kicker { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--violet-3); margin-bottom: 6px; }
.pp-doc__sec { padding: 30px 0 34px; border-top: 1px solid var(--line); }
.pp-doc__kicker + .pp-doc__sec, .pp-filledbar + .pp-doc__sec { border-top: 0; padding-top: 6px; }
.pp-doc__sec:last-child { padding-bottom: 4px; }
.pp-doc__h { display: flex; align-items: center; gap: 14px; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; margin-bottom: 18px; color: var(--ink); }
.pp-doc__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--violet-soft); color: var(--violet-3); flex: none; }
.pp-doc__ic .ic { width: 19px; height: 19px; }
.pp-doc__sec p { max-width: 68ch; font-size: 16.5px; line-height: 1.75; color: var(--ink-2); text-wrap: pretty; }
.pp-doc__sec p + p { margin-top: 1em; }
.pp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; max-width: 70ch; }
.pp-list li { position: relative; padding-left: 32px; font-size: 16px; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.pp-list li::before { content: ""; position: absolute; left: 3px; top: .5em; width: 13px; height: 7px; border-left: 2px solid var(--violet); border-bottom: 2px solid var(--violet); transform: rotate(-45deg); }
.pp-list b { color: var(--ink); font-weight: 600; }

.pp-jobaside, .pp-applyaside { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 14px; }
.pp-jobaside .bezel, .pp-applyaside .bezel { padding: 6px; border-radius: 26px; }
.pp-jobaside .bezel > .bezel__in, .pp-applyaside .bezel > .bezel__in { border-radius: 20px; padding: 22px; }
.pp-overview__head { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.pp-overview__head .pp-job__icon { width: 48px; height: 48px; border-radius: 14px; }
.pp-overview__head .pp-job__icon .ic { width: 21px; height: 21px; }
.pp-overview__head b { display: block; font-family: var(--f-display); font-size: 19px; letter-spacing: -.02em; }
.pp-overview__head small { display: block; font-size: 13px; color: var(--ink-3); }
.pp-overview__dl { margin: 0; }
.pp-overview__dl div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 8px; padding: 11px 0; border-bottom: 1px dashed var(--line-2); font-size: 14.5px; line-height: 1.45; }
.pp-overview__dl dt { color: var(--ink-3); white-space: nowrap; }
.pp-overview__dl dd { margin: 0; padding-right: 4px; color: var(--ink); font-weight: 500; }
.pp-applybox { display: flex; flex-direction: column; gap: 12px; }
.pp-applybox__t, .pp-mailcard__t { font-family: var(--f-display); font-size: 19px; letter-spacing: -.02em; color: var(--ink); }
.pp-applybox p, .pp-mailcard p { font-size: 14.5px; line-height: 1.5; color: var(--ink-3); text-wrap: balance; }
.pp-applybox__btn { width: 100%; margin-top: 2px; }
.pp-back { align-self: flex-start; margin: 4px 0 0 8px; font-size: 14.5px; }
.pp-back:hover .ic { transform: translateX(-3px); }

.pp-mail { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 14px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.pp-mail__addr { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; color: var(--ink); -webkit-user-select: all; user-select: all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-mail__copy { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 10px; background: var(--paper-2); border: 1px solid var(--line-2); font-size: 13px; font-weight: 600; color: var(--ink-2); transition: background .25s, color .25s, border-color .25s; flex: none; }
.pp-mail__copy .ic { width: 15px; height: 15px; }
.pp-mail__copy:hover { border-color: var(--ink); color: var(--ink); }
.pp-mail__copy.is-done { background: #0B0A10; border-color: #0B0A10; color: #fff; }

.pp-others { padding-top: 0; padding-bottom: clamp(64px, 7vw, 104px); }
.pp-others__in { padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.pp-others__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; }
.pp-others__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pp-other { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 22px; border: 1px solid var(--line); background: var(--paper-2); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s; }
.pp-other:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: var(--line-2); }
.pp-other__team { margin-top: 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pp-other__title { font-family: var(--f-display); font-size: 20px; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; color: var(--ink); }
.pp-other__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; }
.pp-other__go { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--ink); transition: background .3s, color .3s, border-color .3s; }
.pp-other__go .ic { width: 16px; height: 16px; }
.pp-other:hover .pp-other__go { background: #0B0A10; border-color: #0B0A10; color: #fff; }

/* ---------- APPLY ---------- */
.pp-applysec { padding-top: clamp(56px, 6vw, 96px); padding-bottom: clamp(64px, 7vw, 112px); }
.pp-applysec + .pp-close { padding-top: 0; }
.pp-applygrid { display: grid; grid-template-columns: minmax(0, 1fr) 348px; gap: clamp(20px, 3vw, 40px); align-items: start; }
.pp-formwrap > .bezel__in { padding: clamp(22px, 4vw, 52px); }
.pp-form { display: block; }
.pp-step { min-width: 0; margin: 0; padding: 32px 0 34px; border: 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 24px); }
.pp-form > .pp-step:first-of-type { border-top: 0; padding-top: 0; }
.pp-step__legend { float: left; width: 100%; display: flex; align-items: baseline; gap: 14px; margin: 0 0 22px; padding: 0; font-family: var(--f-display); font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.pp-step__n { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; color: var(--violet-3); }
.pp-fields { clear: both; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 16px; }
.pp-fields > * { align-self: start; align-content: start; }
.pp-s2 { grid-column: span 2; } .pp-s3 { grid-column: span 3; } .pp-s6 { grid-column: 1 / -1; }
.pp-hint-row { margin-top: -10px; font-size: 12.5px; color: var(--ink-3); }
.pp-req { color: var(--violet-3); margin-left: 3px; }
.pp-affix { position: relative; }
.pp-affix .input { padding-right: 64px; }
.pp-affix__txt { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-3); pointer-events: none; }
.pp-form .field .hint { font-size: 12.5px; color: var(--ink-3); }
/* yes / no */
.pp-fields > .pp-yn { display: flex; flex-direction: column; align-self: stretch; min-width: 0; margin: 0; padding: 0; border: 0; }
.pp-yn__opts { margin-top: auto; }
.pp-yn > legend { float: left; width: 100%; margin: 0 0 8px; padding: 0; }
.pp-yn__opts { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pp-yn .err { margin-top: 8px; }
.pp-yn__opt { position: relative; height: 50px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--paper-2); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; color: var(--ink-2); cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s, color .2s; }
.pp-yn__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pp-yn__opt span { display: inline-flex; align-items: center; gap: 10px; pointer-events: none; }
.pp-yn__opt span::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--paper-2); box-shadow: inset 0 0 0 3px var(--paper-2); transition: background .2s, border-color .2s; }
.pp-yn__opt:hover { border-color: var(--ink-4); }
.pp-yn__opt:has(input:checked) { border-color: var(--violet); background: var(--violet-soft); color: var(--ink); box-shadow: 0 0 0 3px rgba(122,90,248,.12); }
.pp-yn__opt:has(input:checked) span::before { background: var(--violet); border-color: var(--violet); box-shadow: inset 0 0 0 3px var(--violet-soft); }
.pp-yn__opt:has(input:focus-visible) { outline: 2px solid var(--violet); outline-offset: 2px; }
.pp-yn.is-error .pp-yn__opt { border-color: var(--bad); }
/* CV drop zone */
.pp-drop { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 18px 18px 18px; border-radius: 18px; border: 1.5px dashed var(--line-2); background: var(--paper); cursor: pointer; transition: border-color .25s, background .25s; }
.pp-drop:hover, .pp-drop.is-over { border-color: var(--violet); background: var(--violet-soft); }
.pp-drop:focus-within { outline: 2px solid var(--violet); outline-offset: 3px; }
.pp-drop__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.pp-drop__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--paper-2); border: 1px solid var(--line); color: var(--violet-3); }
.pp-drop__icon .ic { width: 22px; height: 22px; }
.pp-drop__text b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.pp-drop__text small { display: block; font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }
.pp-drop__tap { display: none; }
@media (max-width: 640px), (pointer: coarse) { .pp-drop__fine { display: none; } .pp-drop__tap { display: inline; } }
.pp-drop__btn { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: var(--r-pill); background: #0B0A10; color: #fff; font-size: 14px; font-weight: 600; }
.pp-cv.is-error .pp-drop { border-color: var(--bad); }
.pp-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 10px 12px 12px; border-radius: 18px; border: 1px solid rgba(122,90,248,.45); background: var(--violet-soft); }
.pp-file__icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--paper-2); color: var(--violet-3); }
.pp-file__icon .ic { width: 19px; height: 19px; }
.pp-file__name { display: block; font-size: 14.5px; color: var(--ink); overflow-wrap: anywhere; }
.pp-file__size { display: block; font-size: 12.5px; color: var(--ink-3); }
.pp-file__remove { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); transition: background .2s, color .2s; }
.pp-file__remove:hover { background: var(--paper-2); color: var(--ink); }
.pp-file__remove .ic { width: 18px; height: 18px; }
/* consent + submit */
.pp-consent { padding: 28px 0 6px; border-top: 1px solid var(--line); }
.pp-consent .check { font-size: 14.5px; line-height: 1.55; }
.pp-consent a { color: var(--violet-3); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pp-consent.is-error .check input { border-color: var(--bad); }
.pp-consent .err { margin: 8px 0 0 32px; }
.pp-submit { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; padding-top: 26px; }
.pp-submit .btn .ic { width: 18px; height: 18px; }
.pp-submit__msg { font-size: 14px; color: var(--ink-3); }
.pp-submit__msg.is-bad { color: var(--bad); font-weight: 500; }
/* progress aside */
.pp-progress__top { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; color: var(--ink); }
.pp-progress__pct { font-family: var(--f-display); font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--violet-3); }
.pp-progress__bar { height: 4px; border-radius: 4px; background: var(--paper-3); overflow: hidden; margin: 12px 0 14px; }
.pp-progress__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--violet-3), var(--violet-2)); transition: width .7s var(--ease-out); }
.pp-progress__steps { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pp-progress__step { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 8px; margin-inline: -8px; border-radius: 12px; font-size: 14.5px; color: var(--ink-2); transition: background .2s; }
.pp-progress__step:hover { background: var(--paper); }
.pp-progress__dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; color: transparent; transition: background .3s, border-color .3s, color .3s; }
.pp-progress__dot .ic { width: 12px; height: 12px; stroke-width: 3; }
.pp-progress__step.is-done .pp-progress__dot { background: var(--violet); border-color: var(--violet); color: #fff; }
.pp-progress__step.is-done .pp-progress__lbl { color: var(--ink); }
.pp-progress__cnt { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-4); }
.pp-mailcard .bezel__in { display: flex; flex-direction: column; gap: 10px; }
/* success */
.pp-done { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(4px, 2vw, 24px) 0; outline: none; }
.pp-done__mark svg { width: 64px; height: 64px; }
.pp-done__mark circle { fill: var(--violet-soft); stroke: var(--violet); stroke-width: 2; stroke-dasharray: 151; stroke-dashoffset: 151; transition: stroke-dashoffset .9s var(--ease-out); }
.pp-done__mark path { fill: none; stroke: var(--violet-3); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset .55s var(--ease-out) .55s; }
.pp-done.is-in .pp-done__mark circle, .pp-done.is-in .pp-done__mark path { stroke-dashoffset: 0; }
.pp-done .t-lead { max-width: 52ch; }
.pp-done__recap { width: 100%; max-width: 580px; margin: 10px 0 14px; border-top: 1px solid var(--line); }
.pp-done__recap div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.pp-done__recap dt { color: var(--ink-3); }
.pp-done__recap dd { margin: 0; display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.pp-done__recap dd .ic { width: 16px; height: 16px; color: var(--violet-3); }

/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  .pp-tile--2, .pp-tile--3 { display: none; }
  .pp-tile--1 { left: 5%; top: 46%; --ts: 76px; }
  .pp-tile--4 { right: 5%; top: 60%; --ts: 60px; }
}
@media (max-width: 1080px) {
  .pp-jobgrid, .pp-applygrid { grid-template-columns: minmax(0, 1fr); }
  .pp-jobaside, .pp-applyaside { position: static; }
  .pp-jobaside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .pp-back { grid-column: 1 / -1; }
  .pp-progress { display: none; }
  .pp-tiles { display: none; }
  .pp-founders__main { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pp-founders__people { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; justify-self: stretch; }
  .pp-founders__quote blockquote { max-width: 30ch; }
}
@media (max-width: 900px) {
  .pp-ethos__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pp-ethos__side .eyebrow { position: static; padding-top: 0; }
  .pp-others__grid { grid-template-columns: minmax(0, 1fr); }
  .pp-other { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic team" "ic title" "foot foot"; column-gap: 16px; }
  .pp-other .pp-job__icon { grid-area: ic; align-self: center; }
  .pp-jobhero { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pp-jobhero__art { display: none; } /* stacked under the text it only pushed the job down; the filled bar starts on screen 1 */
  .pp-other__team { grid-area: team; margin-top: 0; align-self: end; }
  .pp-other__title { grid-area: title; }
  .pp-other__foot { grid-area: foot; }
}
@media (max-width: 760px) {
  .pp-quotes__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .pp-quote { padding: 0; }
  .pp-quote + .pp-quote { padding: 48px 0 0; border-left: 0; border-top: 1px solid var(--nline); }
  .pp-job { grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; padding: 24px 0; }
  .pp-job::before { display: none; }
  .pp-job > .pp-job__icon { width: 52px; height: 52px; border-radius: 15px; }
  .pp-job > .pp-job__icon .ic { width: 22px; height: 22px; }
  .pp-job__side { grid-column: 2; flex-direction: row; justify-content: flex-start; align-items: center; text-align: left; }
  .pp-job__go { display: none; }
  .pp-filter { flex-wrap: wrap; }
  .pp-chip { height: 44px; flex: none; }
  .pp-roles__head { flex-direction: column; align-items: stretch; }
  .pp-jobaside { grid-template-columns: minmax(0, 1fr); }
  .pp-filledbar { grid-template-columns: auto minmax(0, 1fr); }
  .pp-filledbar .link { grid-column: 1 / -1; min-height: 44px; }
  .pp-jobmeta > span:not(.badge) { height: 36px; }
}
@media (max-width: 900px) { .pp-job__loc { display: none; } }
@media (max-width: 640px) {
  .pp-ln { transition-duration: .7s; }
  .pp-founders__people { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-self: stretch; width: auto; }
  .pp-fd { padding: 10px 9px 14px; }
  .pp-fd__name { font-size: 14px; }
  .pp-fd__role { font-size: 11.5px; }
  .pp-cta__beam { width: 1100px; opacity: .6; transform: translate(-50%, -24%); }
  .pp-filledbar { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px 18px; }
  .pp-filledbar__ic { display: none; }
  .pp-filledbar .link { grid-column: auto; }
  .pp-board { grid-template-columns: minmax(0, 1fr); }
  .pp-person { grid-template-columns: 124px minmax(0, 1fr); column-gap: 18px; padding: 20px 4px 30px; }
  .pp-person__name { font-size: 22px; }
  .pp-rolel { font-size: 11.5px; letter-spacing: .07em; }
  .pp-soc { width: 44px; height: 44px; }
  .pp-soc svg { width: 17px; height: 17px; }
  .pp-note { padding: 24px 4px 26px; }
  .pp-note__statement { font-size: 12px; }
  .pp-fields { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pp-s2, .pp-s3, .pp-s6 { grid-column: 1 / -1; }
  .pp-hint-row { margin-top: -8px; }
  .pp-drop { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 16px; }
  .pp-drop__icon { display: none; }
  .pp-drop__btn { height: 44px; padding: 0 16px; }
  .pp-formwrap, .pp-doc { border-radius: 28px; padding: 6px; }
  .pp-formwrap > .bezel__in, .pp-doc > .bezel__in { border-radius: 23px; padding: 22px 18px; }
  .pp-cta .btn-row { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
  .pp-hero__cta { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; margin-inline: auto; }
  .pp-done__recap div { grid-template-columns: 92px minmax(0, 1fr); }
  .pp-done .btn-row { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
}
/* apply hero tiles: 4 on wide screens, 2 on small laptops, none below */
@media (max-width: 1240px) {
  .pp-tile--a2, .pp-tile--a4 { display: none; }
  .pp-tile--a1 { right: 6%; top: 30%; --ts: 88px; }
  .pp-tile--a3 { right: 15%; top: 62%; --ts: 60px; }
}
@media (min-width: 980px) and (max-width: 1080px) { .pp-hero--apply .pp-tiles { display: block; } }
@media (max-width: 768px) { a.pp-pill { min-height: 44px; } }

/* ---------- mobile application progress (the side panel is hidden below 1080px) ---------- */
.pp-mprog { display: none; }
@media (max-width: 1080px) {
  .pp-mprog { display: block; position: sticky; top: calc(var(--header-h) + 10px); z-index: 6; margin: 0 0 28px; padding: 12px 16px 14px; border-radius: 16px;
    background: color-mix(in srgb, var(--paper-2) 90%, transparent); border: 1px solid var(--line-2);
    -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 16px 30px -22px rgba(20,10,60,.4); transition: top .45s var(--ease); }
  body:has(.site-header.is-hidden) .pp-mprog { top: 10px; }
}
.pp-mprog__top { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--ink); }
.pp-mprog__pct { font-family: var(--f-display); font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--violet-3); }
.pp-mprog__segs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.pp-mprog__segs span { height: 4px; border-radius: 4px; background: var(--paper-3); overflow: hidden; }
.pp-mprog__segs i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet-3), var(--violet-2)); transition: width .6s var(--ease-out); }

/* ---------- dark mode (paper/white sections switched to night, tokens remapped by mode.css) ---------- */
[data-was]:is(.pp-team, .pp-ethos, .pp-founders, .pp-roles, .pp-jobbody, .pp-others, .pp-applysec, .pp-close) { --violet-3: #B09CFF; }
[data-theme="night"] .pp-chip.is-on, [data-theme="night"] .pp-mail__copy.is-done, [data-theme="night"] .pp-drop__btn,
[data-theme="night"] .pp-job:hover .pp-job__go, [data-theme="night"] .pp-other:hover .pp-other__go { background: #fff; border-color: #fff; color: #0B0A10; }
[data-theme="night"] .pp-chip.is-on em { color: rgba(11,10,16,.55); }
[data-was] .pp-person:hover, [data-was] .pp-fd:hover { background-color: rgba(255,255,255,.035); }
[data-was] .pp-kw { box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
[data-was] .pp-rolel__b { background-image: linear-gradient(91deg, #A690FF, #C9BCFF); }
[data-was] .pp-job__icon, [data-was] .pp-filledbar__ic, [data-was] .pp-note__icon {
  background: linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 62%); border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 14px 26px -16px rgba(0,0,0,.8); }
[data-was] .pp-note__link { background: radial-gradient(120% 90% at 20% 0%, #211A38, #0E0C14 60%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
[data-was] .pp-portrait, [data-was] .pp-fd__pic { box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
[data-was] .pp-job::before { box-shadow: none; }
[data-was] .pp-cta--night { border-color: rgba(255,255,255,.1); }
[data-was] .pp-cta__shadow { display: none; }
[data-was] .pp-mprog { box-shadow: 0 16px 30px -18px rgba(0,0,0,.8); }

@media (prefers-reduced-motion: reduce) {
  .pp-portrait { transform: none !important; }
  .pp-tile { transform: none !important; }
}

/* ================= 28/09 — INO joins the team ================= */
/* INO keeps her colours (she is not a photograph) */
.pp-person--ai .pp-portrait img, .pp-person--ai:hover .pp-portrait img { filter: none; object-position: 50% 30%; }
.pp-person--ai .pp-portrait { box-shadow: 0 30px 60px -36px rgba(122,90,248,.7); }
/* four people on a row, the Discord card becomes a band under them */
@media (min-width: 700px) {
  .pp-board .pp-note { grid-column: 1 / -1; padding-top: 8px; }
  .pp-note__link { aspect-ratio: auto; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "icon num lbl arrow" "icon t langs arrow"; align-items: center; column-gap: clamp(20px, 3vw, 44px); row-gap: 4px; padding: 22px clamp(22px, 3vw, 34px); }
  .pp-note__top { display: contents; }
  .pp-note__icon { grid-area: icon; width: 56px; height: 56px; border-radius: 16px; }
  .pp-note__arrow { grid-area: arrow; }
  .pp-note__num { grid-area: num; margin: 0; padding: 0; }
  .pp-note__t { grid-area: t; margin: 0; }
  .pp-note__lbl { grid-area: lbl; margin: 0; padding: 0; border: 0; align-self: end; }
  .pp-note__langs { grid-area: langs; margin: 0; grid-template-columns: repeat(12, minmax(0, 44px)); }
  .pp-note__statement { text-align: center; }
}

/* ==== pages/resources.css ==== */
/* ================= RESOURCES: #docs #media-kit #advertise #validator (prefix .rs-) ================= */

/* ---------- shared: hero ---------- */
.rs-hero { position: relative; overflow: clip; isolation: isolate; background: var(--night); color: var(--snow);
  padding: calc(var(--header-h) + clamp(48px, 7vw, 104px)) 0 clamp(72px, 8vw, 120px); }
.rs-hero__beam { position: absolute; z-index: -2; top: -6%; left: 50%; width: min(1500px, 170vw); aspect-ratio: 1920 / 1547; transform: translateX(-50%);
  background: url(assets/bg/hero-beam.webp) center top / contain no-repeat; opacity: .62; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 40%, transparent 78%); mask-image: linear-gradient(#000 40%, transparent 78%); }
.rs-hero__floor { position: absolute; z-index: -1; left: 50%; bottom: 0; width: max(1600px, 120%); height: 263px; transform: translateX(-50%); pointer-events: none;
  background: url(assets/bg/grid-3d-bottom.svg) center bottom / 100% 100% no-repeat; filter: invert(1); opacity: .07; }
.rs-hero__in { position: relative; }
.rs-hero__in--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.rs-hero--val .rs-hero__beam, .rs-hero--ads .rs-hero__beam, .rs-hero--kit .rs-hero__beam { left: 70%; width: min(1300px, 150vw); }
.rs-hero__text { display: flex; flex-direction: column; gap: 22px; max-width: 600px; }
.rs-hero--center .rs-hero__text { align-items: center; text-align: center; margin-inline: auto; max-width: 820px; }
.rs-hero--center .rs-crumbs { justify-content: center; }
.rs-crumbs { margin-bottom: 2px; }
.rs-crumbs span[aria-current] { color: var(--snow-2); }
.rs-crumbs span:not([aria-current]) { opacity: .5; cursor: default; }
.rs-h1 { font-family: var(--f-display); font-weight: 600; font-size: clamp(44px, 5.6vw, 80px); line-height: .98; letter-spacing: -.048em; padding-bottom: calc(.06em + var(--gt-b)); }
.rs-hero__lead { max-width: 540px; }
.rs-hero--center .rs-hero__lead { max-width: 600px; }
.rs-hero__actions { margin-top: 6px; }
.rs-hero__visual { position: relative; display: grid; justify-items: end; }

/* ---------- shared: headings ---------- */
.rs-head { display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin-bottom: clamp(32px, 4.4vw, 56px); }
.rs-head--center { align-items: center; text-align: center; margin-inline: auto; }
.rs-h2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -.04em; }
.rs-h3 { font-family: var(--f-display); font-weight: 600; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -.03em; }
[data-theme="night"] .rs-h2 { background: var(--grad-title-night); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rs-head .t-lead { max-width: 560px; }

.rs-nw { white-space: nowrap; }
/* section anchors: placed one header-height below the section top, so a jump lands with the section right under the header */
.rs-anchor { position: absolute; left: 0; top: calc(var(--header-h) + 8px); width: 1px; height: 1px; pointer-events: none; }
/* card anchors (docs): 40 px above the card, so a jump from the guide index leaves air between the header and the card */
.rs-cardanchor { position: absolute; left: 0; top: -40px; width: 1px; height: 1px; pointer-events: none; visibility: hidden; }
/* horizontal scrollers: fade whichever edge still has content (classes set by fadeEdges) */
.rs-fade { --fl: 0px; --fr: 0px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); }
.rs-fade--l { --fl: 36px; }
.rs-fade--r { --fr: 56px; }
/* copy button */
.rs-copy { position: relative; flex: none; width: 40px; height: 40px; border-radius: 12px; display: inline-grid; place-items: center; background: var(--paper-2); border: 1px solid var(--line-2); color: var(--ink-2); transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease); }
.rs-copy:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.rs-copy .ic { width: 17px; height: 17px; grid-area: 1 / 1; transition: opacity .25s, transform .35s var(--ease-out); }
.rs-copy .rs-copy__b { opacity: 0; transform: scale(.6); color: var(--ok); }
.rs-copy.is-done .rs-copy__a { opacity: 0; transform: scale(.6); }
.rs-copy.is-done .rs-copy__b { opacity: 1; transform: none; }
[data-theme="night"] .rs-copy, .rs-vcard .rs-copy, .rs-kit .rs-copy { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: var(--snow-2); }
[data-theme="night"] .rs-copy:hover, .rs-vcard .rs-copy:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: #fff; }
[data-theme="night"] .rs-copy .rs-copy__b { color: #6FE3AE; }
.rs-opt { margin-left: 8px; font-weight: 500; font-size: 12px; color: var(--ink-4); }
[data-theme="night"] .rs-opt { color: var(--snow-4); }

/* ================= DOCS ================= */
.rs-hero--docs { padding-bottom: clamp(64px, 7vw, 104px); }
.rs-index { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.rs-index__i { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 96px; padding: 12px 6px 10px; border-radius: 20px; transition: background .3s, transform .4s var(--ease); }
.rs-index__i img { width: 52px; height: 52px; border-radius: 14px; box-shadow: 0 10px 26px -10px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); transition: transform .4s var(--ease), box-shadow .4s; }
.rs-index__i span { font-size: 12.5px; font-weight: 500; color: var(--snow-3); transition: color .2s; }
.rs-index__i:hover { background: rgba(255,255,255,.05); }
.rs-index__i:hover img { transform: translateY(-4px); box-shadow: 0 18px 34px -12px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.16); }
.rs-index__i:hover span { color: var(--snow); }

.rs-docs { padding-block: clamp(64px, 7vw, 104px) clamp(56px, 6vw, 88px); }
.rs-safe { padding-block: clamp(64px, 7vw, 112px); }
.rs-docs .container { position: relative; }
/* featured guide */
.rs-feature { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 72px);
  padding: clamp(28px, 4vw, 56px); border-radius: 32px; color: var(--snow);
  background: radial-gradient(90% 130% at 0% 0%, #1B1033 0%, #0C0916 52%, #07050C 100%);
  box-shadow: 0 40px 90px -40px rgba(28, 16, 70, .55), 0 2px 8px rgba(28,16,70,.12), inset 0 0 0 1px rgba(255,255,255,.07); scroll-margin-top: 110px; }
.rs-feature::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: url(assets/bg/grid-3d-bottom.svg) center bottom / 140% auto no-repeat; filter: invert(1); opacity: .05; }
.rs-feature__light { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(520px circle at var(--mx, 12%) var(--my, 0%), rgba(138, 68, 216, .26), transparent 62%); transition: background .2s; }
.rs-feature__main { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.rs-feature__icon { width: 72px; height: 72px; border-radius: 19px; box-shadow: 0 20px 40px -14px rgba(90, 30, 180, .6); margin-bottom: 6px; }
.rs-feature__main .t-label { color: var(--snow-3); }
.rs-feature__title { font-family: var(--f-display); font-weight: 600; font-size: clamp(30px, 3vw, 42px); line-height: 1.04; letter-spacing: -.04em; }
.rs-feature__line { color: var(--snow-2); font-size: 16px; line-height: 1.6; max-width: 400px; margin-bottom: 10px; }
.rs-feature__map { display: grid; grid-template-columns: repeat(4, max-content); justify-content: space-between; gap: 24px 32px; align-content: center; padding-left: clamp(0px, 3vw, 40px); border-left: 1px solid rgba(255,255,255,.08); }
.rs-feature__col { display: flex; flex-direction: column; gap: 14px; }
.rs-feature__col .t-label { color: var(--snow-4); }
.rs-feature__col ul { list-style: none; padding: 0; display: grid; gap: 4px; }
.rs-feature__col a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 14.5px; color: var(--snow-2); transition: color .2s; }
.rs-feature__col a .ic { width: 13px; height: 13px; opacity: 0; transform: translate(-3px, 3px); transition: opacity .25s, transform .3s var(--ease); }
.rs-feature__col a:hover { color: #fff; }
.rs-feature__col a:hover .ic { opacity: .8; transform: none; }

/* guide cards */
.rs-docgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; perspective: 1400px; }
.rs-doc { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: clamp(26px, 3vw, 36px); border-radius: 28px; color: var(--snow);
  background: linear-gradient(180deg, #120E1D 0%, #09070F 100%); box-shadow: 0 30px 70px -36px rgba(28,16,70,.55), 0 2px 6px rgba(28,16,70,.1), inset 0 0 0 1px rgba(255,255,255,.07);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease-out), box-shadow .5s var(--ease); scroll-margin-top: 110px; }
.rs-doc.is-tilt { transition: transform .12s linear, box-shadow .5s var(--ease); box-shadow: 0 44px 90px -40px rgba(28,16,70,.7), 0 2px 6px rgba(28,16,70,.1), inset 0 0 0 1px rgba(255,255,255,.12); }
.rs-doc__light { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; transition: opacity .5s;
  background: radial-gradient(420px circle at var(--mx, 92%) var(--my, 0%), color-mix(in srgb, var(--c) 34%, transparent), transparent 64%); }
.rs-doc.is-tilt .rs-doc__light { opacity: .85; }
.rs-doc__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.rs-doc__icon { width: 56px; height: 56px; border-radius: 15px; box-shadow: 0 16px 30px -12px rgba(0,0,0,.8); }
.rs-doc__host { font: 500 11.5px/1 var(--f-mono); letter-spacing: .06em; color: var(--snow-3); }
.rs-doc__name { font-family: var(--f-display); font-weight: 600; font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.035em; line-height: 1.08; }
.rs-doc__line { color: var(--snow-2); font-size: 15.5px; line-height: 1.6; max-width: 460px; }
.rs-doc__links { list-style: none; padding: 0; margin: 10px 0 6px; border-top: 1px solid rgba(255,255,255,.08); }
.rs-doc__links li { border-bottom: 1px solid rgba(255,255,255,.08); }
.rs-doc__links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 4px; font-size: 15px; color: var(--snow-2); transition: color .2s, padding .3s var(--ease); }
.rs-doc__links a .ic { width: 16px; height: 16px; opacity: .45; transition: opacity .2s, transform .3s var(--ease); }
.rs-doc__links a:hover { color: #fff; padding-left: 10px; }
.rs-doc__links a:hover .ic { opacity: 1; transform: translate(2px, -2px); }
.rs-doc__pages > summary { display: none; }
.rs-doc__pages > summary::-webkit-details-marker { display: none; }
.rs-doc__cta { margin-top: auto; align-self: flex-start; }
.rs-doc__cta .ic { width: 17px; height: 17px; }

/* InoSwap: thin guide */
.rs-strip { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 20px; margin-top: 24px; padding: 22px 26px; border-radius: 24px; color: var(--snow);
  background: linear-gradient(180deg, #120E1D, #09070F); box-shadow: 0 24px 60px -36px rgba(28,16,70,.5), inset 0 0 0 1px rgba(255,255,255,.07); scroll-margin-top: 110px; }
.rs-strip::before { content: ""; position: absolute; z-index: -1; left: -60px; top: -80px; width: 280px; height: 220px; border-radius: 50%; background: color-mix(in srgb, var(--c) 30%, transparent); filter: blur(60px); opacity: .55; }
.rs-strip img { width: 48px; height: 48px; border-radius: 13px; flex: none; }
.rs-strip__txt { flex: 1; min-width: 0; }
.rs-strip h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 19px; letter-spacing: -.02em; }
.rs-strip p { color: var(--snow-3); font-size: 14.5px; margin-top: 4px; }
.rs-strip__act { display: flex; gap: 10px; flex: none; }
.rs-strip .badge--dev { background: rgba(255,255,255,.1); color: var(--snow-2); }
.rs-strip .btn--line { border-color: rgba(255,255,255,.18); color: var(--snow); }
.rs-strip .btn--line:hover { border-color: rgba(255,255,255,.5); }

/* safety */
.rs-safe__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.rs-safe__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; position: sticky; top: calc(var(--header-h) + 32px); }
.rs-safe__head .t-body { max-width: 440px; }
.rs-safe__head .btn-row { margin-top: 8px; gap: 20px; }
.rs-safe__head .btn .ic { width: 18px; height: 18px; }
.rs-never { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.rs-never li { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); transition: border-color .3s, transform .4s var(--ease), box-shadow .4s; }
.rs-never li:hover { border-color: var(--line-2); transform: translateX(4px); box-shadow: var(--shadow-2); }
.rs-never__n { flex: none; width: 24px; height: 24px; display: grid; place-items: center; color: var(--ink); }
.rs-never__n .ic { width: 22px; height: 22px; stroke-width: 2; }
.rs-never p { font-size: 16.5px; line-height: 1.5; color: var(--ink); font-weight: 500; letter-spacing: -.01em; }

/* ================= MEDIA KIT ================= */
/* hero plate (the brand board) */
.rs-plate { width: min(100%, 520px); perspective: 1400px; }
.rs-plate__in { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 1.8vw, 22px); padding: clamp(26px, 3vw, 40px) clamp(22px, 3vw, 36px) clamp(22px, 2.6vw, 32px);
  border-radius: 32px; background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02) 60%); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 60px 120px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transform: rotateX(calc(16deg + var(--rx, 0deg))) rotateY(calc(-16deg + var(--ry, 0deg))) rotateZ(3deg); transform-style: preserve-3d; transition: transform .9s var(--ease-out); }
.rs-plate.is-tilt .rs-plate__in { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotateZ(0deg); transition: transform .5s var(--ease-out); }
.rs-plate__t { width: calc((100% - 3 * clamp(14px, 1.8vw, 22px)) / 4); aspect-ratio: 1; border-radius: 24%; overflow: hidden; box-shadow: 0 18px 36px -14px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06); transform: translateZ(24px); }
.rs-plate__t img { width: 100%; height: 100%; }
.rs-plate__word { flex-basis: 100%; display: grid; place-items: center; padding-top: clamp(10px, 1.6vw, 18px); margin-top: 4px; border-top: 1px solid rgba(255,255,255,.08); transform: translateZ(16px); }
.rs-plate__word img { width: 58%; height: auto; }

/* company wordmark */
.rs-co__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.rs-co__side { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.rs-co__side .btn .ic { width: 17px; height: 17px; }
.rs-co__grid .rs-head { margin-bottom: 0; }
.rs-co__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rs-word { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: 26px; overflow: hidden; display: grid; place-items: center; padding: 20px 20px 34px; }
.rs-word img { width: 70%; height: auto; }
.rs-lock { display: inline-flex; align-items: center; gap: clamp(10px, 1.4vw, 16px); width: 76%; justify-content: center; }
.rs-lock__mark { width: 15%; height: auto; aspect-ratio: 1; flex: none; }
.rs-lock__bar { display: block; width: 1.5px; align-self: stretch; margin-block: 6%; background: currentColor; opacity: .3; flex: none; }
.rs-lock__word { flex: 1; min-width: 0; height: auto; fill: currentColor; }
.rs-lock__ltd { font: 500 clamp(9px, .9vw, 12px)/1 var(--f-mono); letter-spacing: .2em; opacity: .6; padding-top: 4%; flex: none; }
.rs-word--dark .rs-lock { color: #fff; }
.rs-word--light .rs-lock { color: #000; }
.rs-word figcaption { position: absolute; left: 20px; right: 20px; bottom: 16px; display: flex; justify-content: space-between; gap: 12px; font: 500 11px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.rs-word figcaption em { font-style: normal; letter-spacing: .02em; text-transform: none; text-align: right; }
.rs-word--dark { background: radial-gradient(90% 90% at 50% 0%, #1E1233, #07050C 70%); color: var(--snow-3); box-shadow: var(--shadow-3), inset 0 0 0 1px rgba(255,255,255,.06); }
.rs-word--light { background: #fff; color: #6B6B78; border: 1px solid #E5E5EA; box-shadow: var(--shadow-2); }

/* brand board */
.rs-kit { overflow: clip; }
.rs-kit__glow { position: absolute; left: 50%; top: 140px; width: min(1100px, 120vw); height: 620px; transform: translateX(-50%); border-radius: 50%; background-color: var(--c, #7A5AF8); opacity: .12; filter: blur(120px); pointer-events: none; transition: background-color .9s var(--ease); }
.rs-kit .container { position: relative; }
.rs-kit__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 28px; max-width: 1000px; }
.rs-kit__br { display: none; }
.rs-kit__tab { display: inline-flex; align-items: center; gap: 9px; height: 52px; padding: 0 16px 0 9px; border-radius: 16px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.035); color: var(--snow-2); font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; transition: background .25s, border-color .25s, color .25s, box-shadow .35s, transform .3s var(--ease); flex: none; }
.rs-kit__tab img { width: 34px; height: 34px; border-radius: 10px; }
.rs-kit__tab:hover { background: rgba(255,255,255,.07); color: #fff; transform: translateY(-1px); }
.rs-kit__tab.is-on { background: rgba(255,255,255,.1); color: #fff; border-color: color-mix(in srgb, var(--c) 70%, #fff 10%); box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--c) 70%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); }
.rs-kit__stage { transition: opacity .2s var(--ease), transform .35s var(--ease-out), height .42s var(--ease-out); }
.rs-kit__stage.is-out { opacity: 0; transform: translateY(8px); }
.rs-kit__stage.is-in { opacity: 0; transform: translateY(-6px); transition: height .42s var(--ease-out); }
.rs-kit__panel { border-radius: 32px; padding: clamp(20px, 3vw, 36px); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 50px 120px -50px rgba(0,0,0,.9); }
.rs-kit__phead { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(18px, 2.4vw, 28px); }
.rs-kit__phead > img { width: 56px; height: 56px; border-radius: 15px; flex: none; box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--c) 60%, transparent); }
.rs-kit__phead > div:first-of-type { flex: 1; min-width: 0; }
.rs-kit__phead h3 { font-family: var(--f-display); font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.035em; line-height: 1.1; }
.rs-kit__phead p { color: var(--snow-3); font-size: 14px; margin-top: 2px; }
.rs-kit__links { display: flex; gap: 10px; flex: none; }
.rs-kit__links .btn .ic { width: 16px; height: 16px; }
/* the specimen row has one fixed height for 3 or 4 tiles, so every brand panel is the same height */
.rs-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 14px; aspect-ratio: 4.15 / 1; }
.rs-specs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rs-spec { position: relative; margin: 0; min-height: 0; border-radius: 22px; overflow: hidden; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; }
.rs-spec figcaption { position: absolute; left: 16px; right: 16px; top: 14px; display: flex; justify-content: space-between; gap: 10px; font: 500 10.5px/1.3 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; }
.rs-spec figcaption em { font-style: normal; text-transform: none; letter-spacing: .02em; text-align: right; opacity: .85; }
.rs-spec__art { height: 44%; aspect-ratio: 1; display: grid; place-items: center; margin-top: 12px; }
.rs-spec__art img { width: 100%; height: 100%; object-fit: contain; }
.rs-spec--mid { background: radial-gradient(80% 80% at 50% 30%, #221B30, #14101D); color: var(--snow-3); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.rs-spec--mid .rs-spec__art { height: 50%; }
.rs-spec--mid .rs-spec__art img { border-radius: 24%; box-shadow: 0 24px 40px -18px rgba(0,0,0,.9); }
.rs-spec--dark { background: #060409; color: rgba(246,244,251,.56); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.rs-spec--light { background: #fff; color: #6B6B78; }
.rs-spec--coin .rs-spec__art { height: 54%; }
.rs-spec--coin .rs-spec__art img { filter: drop-shadow(0 18px 24px rgba(0,0,0,.55)); }
.rs-spec--split { grid-template: minmax(0, 1fr) minmax(0, 1fr) / minmax(0, 1fr); place-items: stretch; background: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.rs-spec--split figcaption { color: rgba(246,244,251,.56); z-index: 1; }
.rs-split__d, .rs-split__l { display: grid; place-items: center; padding: 0 12%; }
.rs-split__d { background: #060409; padding-top: 22px; }
.rs-split__l { background: #fff; }
.rs-split__d img, .rs-split__l img { width: 100%; max-width: 220px; height: auto; aspect-ratio: 261 / 66; }
.rs-sws { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.rs-sws--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rs-sw { border-radius: 22px; overflow: hidden; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.rs-sw__chip { height: 108px; background: var(--sw); display: flex; align-items: flex-end; padding: 14px 16px; }
.rs-sw--main .rs-sw__chip { height: 108px; }
.rs-sw__name { font-family: var(--f-display); font-weight: 600; font-size: 17px; letter-spacing: -.02em; color: var(--sw-ink); }
.rs-sw__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 16px; }
.rs-sw__meta b { display: block; font: 600 15px/1.3 var(--f-mono); letter-spacing: .02em; color: var(--snow); }
.rs-sw__meta span { display: block; font: 500 11.5px/1.4 var(--f-mono); color: var(--snow-4); margin-top: 2px; }

/* rules */
.rs-rules__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: stretch; }
.rs-space { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.rs-space__box { --s: clamp(120px, 13vw, 176px); --m: calc(var(--s) / 4); position: relative; flex: 1; min-height: 360px; display: grid; place-items: center; border-radius: 28px; background: var(--paper-2); border: 1px solid var(--line);
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 24px 24px; background-position: center; }
.rs-space__box::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(60% 60% at 50% 50%, transparent, var(--paper-2) 85%); pointer-events: none; }
.rs-space__box img { position: relative; width: var(--s); height: var(--s); box-shadow: 0 30px 50px -24px rgba(40,10,90,.55); border-radius: 18%; }
.rs-space__zone { position: absolute; left: 50%; top: 50%; width: calc(var(--s) + 2 * var(--m)); height: calc(var(--s) + 2 * var(--m)); transform: translate(-50%, -50%); border: 1.5px dashed var(--violet); border-radius: 12px; background: rgba(122,90,248,.05); }
.rs-space__dim { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 6px; color: var(--violet-3); }
.rs-space__dim i { display: block; flex: none; background: var(--violet); }
.rs-space__dim b { font: 600 19px/1 var(--f-display); }
.rs-space__dim--x i::before, .rs-space__dim--x i::after { content: ""; position: absolute; top: -4px; width: 1.5px; height: 9px; background: var(--violet); }
.rs-space__dim--x i::before { left: 0; } .rs-space__dim--x i::after { right: 0; }
.rs-space__dim--y i { position: relative; }
.rs-space__dim--y i::before, .rs-space__dim--y i::after { content: ""; position: absolute; left: -4px; width: 9px; height: 1.5px; background: var(--violet); }
.rs-space__dim--y i::before { top: 0; } .rs-space__dim--y i::after { bottom: 0; }
.rs-space__dim--x { width: var(--m); height: 1.5px; transform: translate(calc(-1 * (var(--s) / 2 + var(--m))), calc(-1 * (var(--s) / 2 + var(--m) + 14px))); flex-direction: column; }
.rs-space__dim--x i { width: 100%; height: 1.5px; order: 2; position: relative; }
.rs-space__dim--x b { order: 1; margin-top: -18px; }
.rs-space__dim--y { width: 1.5px; height: var(--m); transform: translate(calc(-1 * (var(--s) / 2 + var(--m) + 14px)), calc(-1 * (var(--s) / 2 + var(--m)))); }
.rs-space__dim--y i { width: 1.5px; height: 100%; }
.rs-space__dim--y b { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.rs-space figcaption { font-size: 14.5px; color: var(--ink-2); padding-left: 4px; }
.rs-rules__lists { display: flex; flex-direction: column; gap: 16px; }
.rs-dont { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 22px; border-radius: 28px; background: var(--paper-2); border: 1px solid var(--line); }
.rs-dont__i { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.rs-dont__ic { position: relative; width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); }
.rs-dont__ic > .ic { width: 24px; height: 24px; }
.rs-dont__ic i { position: absolute; right: -6px; top: -6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #0A0A0F; color: #fff; box-shadow: 0 0 0 3px var(--paper-2); }
[data-theme="night"] .rs-dont__ic i { background: #F6F4FB; color: #0A0A0F; }
.rs-dont__ic i .ic { width: 12px; height: 12px; stroke-width: 3; }
.rs-dont__i b { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.rs-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; flex: 1; }
.rs-dos__col { padding: 26px; border-radius: 28px; background: var(--paper-2); border: 1px solid var(--line); }
.rs-dos__col h3 { display: flex; align-items: center; gap: 10px; font-size: 19px; margin-bottom: calc(14px - var(--gt-b)); }
.rs-dos__col h3 .ic { width: 22px; height: 22px; color: var(--ink); }
.rs-dos__col ul { list-style: none; padding: 0; display: grid; gap: 12px; }
.rs-dos__col li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.rs-dos__col li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }

/* press band */
.rs-press__in { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px); border-radius: 32px; background: var(--paper); border: 1px solid var(--line); }
.rs-press__in > div { display: flex; flex-direction: column; gap: 10px; }

/* ================= ADVERTISE ================= */
/* hero: the real News home, tilted, with its two advertising slots lit */
.rs-live-ad-wrap { width: min(100%, 560px); perspective: 1600px; padding: 8px 0 36px; position: relative; }
.rs-live-ad-wrap::after { content: ""; position: absolute; z-index: -1; left: 10%; right: 10%; bottom: 4px; height: 44px; border-radius: 50%; background: rgba(90, 50, 200, .42); filter: blur(34px); }
.rs-live-ad { display: block; transform: rotateX(calc(6deg + var(--rx, 0deg))) rotateY(calc(-13deg + var(--ry, 0deg))); transform-style: preserve-3d; transition: transform .9s var(--ease-out); }
.rs-live-ad.is-tilt { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s var(--ease-out); }
.rs-live-ad__win { position: relative; border-radius: 18px; box-shadow: 0 60px 120px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.1), 0 30px 80px -40px rgba(122,90,248,.45); }
.rs-live-ad__win .browser__url { max-width: 260px; }
.rs-live-ad__vp { position: relative; aspect-ratio: 1440 / 1530; overflow: hidden; background: #F5F5F9; }
.rs-live-ad__vp img { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 1558; }
.rs-live-ad__slot { position: absolute; z-index: 1; border-radius: 8px; border: 2px solid #A690FF; background: rgba(122,90,248,.16); box-shadow: 0 0 0 4px rgba(122,90,248,.22), 0 0 60px -6px rgba(122,90,248,.85); }
.rs-live-ad__slot b { position: absolute; left: 8px; top: 0; transform: translateY(-50%); display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; background: var(--violet); color: #fff; font: 600 9.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 6px 16px -6px rgba(40,10,120,.8); }
.rs-live-ad__slot--r b { left: auto; right: 8px; }
.rs-live-ad__sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .5s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.14), transparent 60%); }
.rs-live-ad.is-tilt .rs-live-ad__sheen { opacity: 1; }
.rs-live-ad:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 6px; border-radius: 18px; }

/* audience */
.rs-aud__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.rs-aud__list { list-style: none; padding: 0; display: grid; gap: 4px; }
.rs-aud__list li { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.rs-aud__list li:last-child { border-bottom: 1px solid var(--line); }
.rs-aud__ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: none; background: var(--paper-2); border: 1px solid var(--line); color: var(--ink); }
.rs-aud__ic .ic { width: 20px; height: 20px; }
.rs-aud__list b { font-family: var(--f-display); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.rs-aud__list p { color: var(--ink-3); font-size: 15px; margin-top: 2px; }
.rs-reach .bezel__in { padding: clamp(20px, 2.8vw, 34px); display: flex; flex-direction: column; gap: 6px; }
.rs-reach__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; }
.rs-reach__top .t-label { color: var(--ink-3); }
.rs-reach__date { font: 500 11.5px/1 var(--f-mono); letter-spacing: .04em; color: var(--ink-3); padding: 7px 10px; border-radius: 99px; background: var(--paper); border: 1px solid var(--line); }
.rs-reach__list { list-style: none; padding: 0; margin: 0; }
.rs-reach__list li + li { border-top: 1px solid var(--line); }
.rs-reach__i { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 4px; border-radius: 14px; transition: background .25s, padding .3s var(--ease); }
.rs-reach__i:hover { background: var(--paper); padding-inline: 12px; }
.rs-reach__who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rs-reach__who img { width: 44px; height: 44px; border-radius: 12px; flex: none; box-shadow: 0 10px 22px -12px rgba(28,16,70,.5); }
.rs-reach__who > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rs-reach__who b { font-family: var(--f-display); font-weight: 600; font-size: 17px; letter-spacing: -.015em; color: var(--ink); }
.rs-reach__who em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: 13px; color: var(--ink-3); }
.rs-reach__who em .ic { width: 13px; height: 13px; }
.rs-reach__v { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.rs-reach__v b { font-family: var(--f-display); font-weight: 600; font-size: clamp(32px, 3vw, 44px); line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: var(--ink); }
.rs-reach__v em { font-style: normal; font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.rs-reach__note { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.rs-reach__note .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--violet-3); }
[data-theme="night"] .rs-reach__note .ic { color: var(--violet-2); }

/* formats explorer */
.rs-fmt__glow { position: absolute; right: -10%; top: 10%; width: 900px; height: 700px; border-radius: 50%; background: rgba(122,90,248,.2); filter: blur(140px); pointer-events: none; }
.rs-fmt .container { position: relative; }
.rs-fmt__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 3.4vw, 48px); align-items: start; }
.rs-fmt__list { display: flex; flex-direction: column; gap: 6px; }
.rs-fmt__i { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 66px; padding: 10px 14px 10px 10px; border-radius: 18px; text-align: left; border: 1px solid transparent; color: var(--snow-2); transition: background .25s, border-color .25s, color .25s; }
.rs-fmt__ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: none; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); transition: background .25s, border-color .25s; }
.rs-fmt__ic .ic { width: 19px; height: 19px; }
.rs-fmt__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rs-fmt__t b { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.rs-fmt__t em { font: 500 11.5px/1.3 var(--f-mono); font-style: normal; color: var(--snow-4); }
.rs-fmt__chev { width: 16px; height: 16px; opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .3s var(--ease); }
.rs-fmt__i:hover { background: rgba(255,255,255,.04); color: #fff; }
.rs-fmt__i.is-on { background: rgba(255,255,255,.07); border-color: rgba(166,144,255,.35); color: #fff; }
.rs-fmt__i.is-on .rs-fmt__ic { background: var(--violet); border-color: var(--violet); color: #fff; box-shadow: 0 10px 24px -10px var(--violet-glow); }
.rs-fmt__i.is-on .rs-fmt__chev { opacity: .8; transform: none; }
.rs-fmt__view { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 16px; }
.rs-fmt__scene { --sh: clamp(360px, 36vw, 470px); height: var(--sh); display: grid; place-items: center; transition: opacity .18s var(--ease); }
.rs-fmt__scene.is-out { opacity: 0; }
.rs-browser { width: 100%; height: 100%; display: flex; flex-direction: column; }
.rs-browser .browser__url { max-width: 300px; }
.rs-vp { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.rs-fmt__detail { border-radius: 22px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); padding: 6px 20px; }
.rs-fmt__dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; margin: 0; }
.rs-fmt__dl > div { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.rs-fmt__dl > div:nth-last-child(-n+2) { border-bottom: 0; }
.rs-fmt__where { grid-column: span 3; }
.rs-fmt__dl dt { font: 500 10.5px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--snow-4); margin-bottom: 6px; }
.rs-fmt__dl dd { margin: 0; font-size: 14.5px; color: var(--snow); line-height: 1.45; }
/* the label wraps inside its column instead of running into the next one (1024 and tablet widths) */
.rs-fmt__dl dd .rs-adlabel { max-width: 100%; height: auto; min-height: 24px; padding: 5px 9px; line-height: 1.35; white-space: normal; }
.rs-adlabel { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; font: 500 10.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; background: rgba(255,255,255,.08); color: var(--snow-2); border: 1px solid rgba(255,255,255,.1); white-space: nowrap; }

/* real page captures with the lit ad slot */
.rs-shot { position: relative; width: 100%; transition: transform .9s var(--ease-out); will-change: transform; }
.rs-browser .rs-shot img, .rs-phone .rs-shot img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: fill; border-radius: 0; }
.rs-browser .rs-vp { background: #F5F5F9; }
.rs-slot { position: absolute; z-index: 1; border-radius: 10px; border: 2px solid #A690FF; background: rgba(122,90,248,.18);
  box-shadow: 0 0 0 4px rgba(122,90,248,.22), 0 0 70px -6px rgba(122,90,248,.85); opacity: 0; transform: scale(1.03); pointer-events: none;
  transition: opacity .45s var(--ease), transform .7s var(--ease-out); }
.rs-slot.is-on { opacity: 1; transform: none; }
.rs-slot__lab { position: absolute; left: 10px; top: 0; transform: translateY(-50%); display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; background: var(--violet); color: #fff; font: 600 9.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 6px 16px -6px rgba(40,10,120,.8); }
.rs-slot--r .rs-slot__lab { left: auto; right: 10px; }
.rs-phone { --pw: calc(var(--sh, 440px) * .462); }
.rs-phone .rs-vp { height: 100%; border-radius: calc(var(--pw) * .125); background: #F5F5F9; }
.rs-slot--sticky { top: auto; left: calc(var(--pw) * .03 + 6px); right: calc(var(--pw) * .03 + 6px); bottom: calc(var(--pw) * .03 + 8px); height: calc(var(--pw) * .128); border-radius: 8px; background: rgb(40, 24, 90); }
.rs-slot--sticky .rs-slot__lab { top: 50%; transform: translateY(-50%); left: 6px; height: 16px; font-size: 7.5px; padding: 0 6px; }
.rs-slot--sticky i { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 13px; line-height: 1; color: #fff; opacity: .8; }

/* how it works: a slim numbered rail under "Plan a campaign" */
.rs-rail__k { display: block; color: var(--ink-3); margin-bottom: 14px; }
.rs-rail { list-style: none; padding: 0; margin: 0; position: relative; display: grid; gap: 0; }
.rs-rail li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; align-items: start; padding: 10px 0; }
.rs-rail li:not(:last-child)::after { content: ""; position: absolute; left: 17.25px; top: 46px; bottom: -10px; width: 1.5px; background: linear-gradient(var(--violet-2), rgba(122,90,248,.25)); }
.rs-rail__n { position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 1.5px solid var(--violet-2); font: 600 11.5px/1 var(--f-mono); letter-spacing: .04em; color: var(--violet-3); }
[data-theme="night"] .rs-rail__n { color: var(--violet-2); }
.rs-rail b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 18px; letter-spacing: -.02em; line-height: 1.2; padding-top: 7px; }
.rs-rail p { font-size: 14.5px; color: var(--ink-3); line-height: 1.5; margin-top: 3px; }

/* rules (advertise): a night stage right after the formats */
.rs-rulesad { padding-top: 0; }
.rs-rulesad__top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px 48px; align-items: end; padding-top: clamp(48px, 5vw, 72px); margin-bottom: clamp(32px, 4vw, 52px); border-top: 1px solid rgba(255,255,255,.08); }
.rs-rulesad__top .rs-head { margin-bottom: 0; max-width: none; }
.rs-rulesad__top .t-lead { color: var(--snow-3); max-width: 460px; }
.rs-fmt { padding-bottom: clamp(56px, 6vw, 88px); }
.rs-rulesad__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rs-rule { display: flex; flex-direction: column; gap: 14px; padding: 26px 24px 28px; border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.09); }
.rs-rule__ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: none; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.rs-rule__ic .ic { width: 20px; height: 20px; }
.rs-rule h3 { font-size: 18px; line-height: 1.25; color: #fff; }
.rs-rule p { font-size: 14.5px; color: var(--snow-3); line-height: 1.6; margin-top: 8px; }

/* closing band */
.rs-end__in { display: flex; align-items: center; justify-content: center; gap: 16px 28px; flex-wrap: wrap; text-align: center; }
.rs-end__in p { text-wrap: balance; font-family: var(--f-display); font-weight: 600; font-size: clamp(20px, 2vw, 26px); letter-spacing: -.025em; color: var(--ink); }

/* forms */
.rs-formgrid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 96px); align-items: start; position: relative; }
.rs-formgrid__side { position: sticky; top: calc(var(--header-h) + 32px); }
.rs-formgrid__side .rs-head { margin-bottom: 28px; }
.rs-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.rs-facts li { display: flex; align-items: flex-start; gap: 14px; font-size: 14.5px; color: var(--ink-3); line-height: 1.5; }
.rs-facts li > .ic { width: 20px; height: 20px; margin-top: 2px; color: var(--violet-3); flex: none; }
.rs-facts b { display: block; color: var(--ink); font-weight: 600; font-size: 15px; }
.rs-facts--night li { color: var(--snow-3); }
.rs-facts--night li > .ic { color: var(--violet-2); }
.rs-facts--night b { color: var(--snow); }
.rs-formcard .bezel__in { padding: clamp(22px, 3vw, 40px); }
.rs-form { gap: 20px; grid-template-columns: minmax(0, 1fr); }
.rs-form .field { align-content: start; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.rs-form .select { width: 100%; min-width: 0; text-overflow: ellipsis; }
.rs-form .grid { gap: 20px; }
.rs-form .textarea { min-height: 150px; }
.rs-count, .rs-words { justify-self: end; font: 500 11.5px/1 var(--f-mono); color: var(--ink-4); margin-top: -2px; }
.rs-count.is-near { color: var(--warn); }
.rs-words { display: block; text-align: right; margin-top: 8px; }
.rs-chips { border: 0; padding: 0; margin: 0; min-width: 0; }
.rs-chips legend { font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 10px; padding: 0; }
.rs-chips__row { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-chip { position: relative; cursor: pointer; }
.rs-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rs-chip span { display: inline-flex; align-items: center; gap: 0; height: 44px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--paper-2); font-size: 14px; font-weight: 500; color: var(--ink-2); transition: .25s var(--ease); }
.rs-chip span .ic { width: 0; height: 16px; opacity: 0; transition: width .25s var(--ease), opacity .2s, margin .25s; }
.rs-chip:hover span { border-color: var(--ink-4); }
.rs-chip input:checked + span { background: #0A0A0F; border-color: #0A0A0F; color: #fff; }
[data-theme="night"] .rs-chip input:checked + span { background: #F6F4FB; border-color: #F6F4FB; color: #0A0A0F; }
.rs-chip input:checked + span .ic { width: 16px; opacity: 1; margin-right: 8px; }
.rs-chip input:focus-visible + span { outline: 2px solid var(--violet); outline-offset: 3px; }
.rs-form__foot { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding-top: 4px; }
.rs-form .check a { color: var(--violet-3); }
.rs-form .check { line-height: 1.5; }

/* press release (night form) */
.rs-prsec { overflow: clip; padding-bottom: 96px; }
.rs-prsec__beam { position: absolute; left: 50%; top: -220px; width: 1100px; height: 700px; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, rgba(122,90,248,.28), transparent 70%); pointer-events: none; }
.rs-prlabel { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 22px; margin-bottom: 28px; border-radius: 20px; border: 1px dashed rgba(255,255,255,.18); background: rgba(255,255,255,.025); }
.rs-prlabel p { font-style: italic; color: var(--snow-2); font-size: 15px; }
.rs-formcard--night { border-radius: 32px; padding: 10px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.02); }
.rs-formcard__in { border-radius: 24px; padding: clamp(22px, 3vw, 40px); background: linear-gradient(180deg, #14101F, #0C0914); border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
[data-theme="night"] .rs-form .check { color: var(--snow-2); }
[data-theme="night"] .rs-form .check input { background: rgba(255,255,255,.04); border-color: var(--nline-2); }
[data-theme="night"] .rs-form .check input:checked { background: var(--violet); border-color: var(--violet); }
[data-theme="night"] .rs-form .check a { color: var(--violet-2); }
[data-theme="night"] .rs-count, [data-theme="night"] .rs-words { color: var(--snow-4); }
[data-theme="night"] .field .hint { color: var(--snow-4); }
[data-theme="night"] .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23B8B2C8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
[data-theme="night"] .select option { background: #14101F; color: var(--snow); }
[data-theme="night"] .field .err { color: #FF8A9A; }
[data-theme="night"] .field.is-error .input, [data-theme="night"] .field.is-error .textarea, [data-theme="night"] .field.is-error .select { border-color: #FF6B80; }
.rs-steps { list-style: none; padding: 0; margin: 0 0 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rs-steps__i { position: relative; display: flex; align-items: center; gap: 10px; padding-bottom: 14px; color: var(--snow-4); font-size: 13.5px; }
.rs-steps__i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: rgba(255,255,255,.1); transition: background .4s; }
.rs-steps__i span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; font: 600 12px/1 var(--f-mono); border: 1px solid rgba(255,255,255,.16); transition: .3s; }
.rs-steps__i span > i { font-style: normal; }
.rs-steps__i span .rs-steps__ok { display: none; width: 14px; height: 14px; stroke-width: 2.6; }
.rs-steps__i.is-done span > i { display: none; }
.rs-steps__i.is-done span .rs-steps__ok { display: block; }
.rs-steps__now { display: none; margin: 2px 0 6px; font-size: 14px; font-weight: 600; color: var(--snow); letter-spacing: -.01em; }
.rs-steps__i b { font-weight: 600; }
.rs-steps__i.is-on { color: #fff; }
.rs-steps__i.is-on span { background: var(--violet); border-color: var(--violet); color: #fff; box-shadow: 0 0 0 4px rgba(122,90,248,.2); }
.rs-steps__i.is-on::after, .rs-steps__i.is-done::after { background: var(--violet); }
.rs-steps__i.is-done { color: var(--snow-2); }
.rs-steps__i.is-done span { background: rgba(122,90,248,.3); border-color: rgba(166,144,255,.5); color: #fff; }
.rs-step { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.rs-step.is-on { animation: rs-step-in .45s var(--ease-out); }
@keyframes rs-step-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.rs-mode { display: inline-flex; padding: 4px; gap: 4px; border-radius: 99px; background: rgba(255,255,255,.06); width: max-content; max-width: 100%; }
.rs-mode__o { position: relative; cursor: pointer; }
.rs-mode__o input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rs-mode__o span { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; white-space: nowrap; border-radius: 99px; font-size: 14px; font-weight: 500; color: var(--snow-3); transition: .25s; }
.rs-mode__o span .ic { width: 16px; height: 16px; }
.rs-mode__o input:checked + span { background: rgba(255,255,255,.14); color: #fff; }
.rs-mode__o input:focus-visible + span { outline: 2px solid var(--violet-2); outline-offset: 2px; }
.rs-dist { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rs-dist legend { font-size: 13.5px; font-weight: 600; color: var(--snow-2); margin-bottom: 10px; padding: 0; }
.rs-dist__o { position: relative; cursor: pointer; }
.rs-dist__o input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rs-dist__o > span { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 18px 18px 50px; border-radius: 18px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); transition: .25s var(--ease); position: relative; }
.rs-dist__o > span::before { content: ""; position: absolute; left: 18px; top: 19px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.3); transition: .25s; }
.rs-dist__o b { font-size: 15px; color: var(--snow); }
.rs-dist__o em { font-style: normal; font-size: 13.5px; color: var(--snow-3); line-height: 1.45; }
.rs-dist__o:hover > span { border-color: rgba(255,255,255,.3); }
.rs-dist__o input:checked + span { border-color: var(--violet-2); background: rgba(122,90,248,.12); }
.rs-dist__o input:checked + span::before { border: 5px solid var(--violet-2); background: #fff; }
.rs-dist__o input:focus-visible + span { outline: 2px solid var(--violet-2); outline-offset: 3px; }
.rs-pr__nav { justify-content: space-between; }
.rs-pr__nav [data-pr="next"], .rs-pr__nav [data-pr="send"] { margin-left: auto; }
.rs-pr__nav .btn--line .ic { width: 17px; height: 17px; }
/* success */
.rs-done { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(8px, 2vw, 24px) 0; outline: none; animation: rs-step-in .5s var(--ease-out); }
.rs-done__ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; box-shadow: 0 0 0 8px var(--ok-soft); margin-bottom: 8px; }
.rs-done__ic .ic { width: 26px; height: 26px; stroke-width: 2.5; }
.rs-done h3 { font-size: clamp(26px, 2.6vw, 34px); }
.rs-done p { color: var(--ink-2); font-size: 16px; max-width: 520px; }
.rs-done__ref { font-size: 16px !important; color: var(--ink-2) !important; line-height: 1.7; }
.rs-done__ref b { font: 600 14px/1 var(--f-mono); color: var(--ink); background: var(--paper); border: 1px solid var(--line); padding: 5px 9px; border-radius: 8px; margin-left: 4px; }
.rs-done .btn-row { align-items: center; gap: 12px 24px; margin-top: 10px; }
[data-theme="night"] .rs-done__ic { box-shadow: 0 0 0 8px rgba(22,163,106,.18); }
[data-theme="night"] .rs-done p { color: var(--snow-2); }
[data-theme="night"] .rs-done__ref { color: var(--snow-2) !important; }
[data-theme="night"] .rs-done__ref b { color: #fff; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }

/* ================= VALIDATOR ================= */
.rs-vcard-wrap { position: relative; width: min(100%, 540px); perspective: 1400px; padding: 10px 0 40px; }
.rs-vcard-wrap::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 6px; height: 40px; border-radius: 50%; background: rgba(90, 50, 200, .45); filter: blur(30px); z-index: -1; }
.rs-vcard { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 1.586; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: clamp(20px, 2.6vw, 30px); border-radius: 26px;
  background: radial-gradient(110% 90% at 100% 0%, rgba(140, 90, 255, .5), transparent 55%), radial-gradient(90% 80% at 0% 100%, rgba(40, 110, 255, .16), transparent 60%), linear-gradient(150deg, #1D1530 0%, #0C0916 55%, #07050C 100%);
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 50px 100px -40px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.18);
  transform: rotateX(calc(7deg + var(--rx, 0deg))) rotateY(calc(-11deg + var(--ry, 0deg))); transition: transform .9s var(--ease-out); }
.rs-vcard.is-tilt { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s var(--ease-out); }
.rs-vcard::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E"); }
.rs-vcard__sheen { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.16), transparent 60%); }
.rs-vcard.is-tilt .rs-vcard__sheen { opacity: 1; }
.rs-vcard__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rs-cronos { display: inline-flex; align-items: center; height: 28px; }
.rs-cronos img { height: 22px; width: auto; }
.rs-vcard__chain { font: 500 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--snow-3); }
.rs-vcard__addr { display: flex; flex-direction: column; gap: 8px; }
.rs-vcard__addr .t-label { color: var(--snow-4); }
.rs-vcard__row { display: flex; align-items: center; gap: 12px; }
.rs-vcard code { flex: 1; min-width: 0; font: 500 clamp(12.5px, 1vw, 14.5px)/1.5 var(--f-mono); letter-spacing: .01em; color: var(--snow); }
.rs-vcard__foot { display: grid; grid-template-columns: auto auto 1fr; gap: 24px; align-items: end; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }
.rs-vcard__foot > div { display: flex; flex-direction: column; gap: 6px; }
.rs-vcard__foot .t-label { color: var(--snow-4); font-size: 10.5px; }
.rs-vcard__foot b { font-family: var(--f-display); font-weight: 600; font-size: 18px; letter-spacing: -.02em; }
.rs-vcard__ok { display: inline-flex; align-items: center; gap: 9px; }
.rs-vcard__so { flex-direction: row !important; align-items: center; justify-content: flex-end; gap: 10px !important; }
.rs-vcard__so img { width: 28px; height: 28px; border-radius: 8px; }
.rs-vcard__so b { font-size: 15px !important; }

.rs-what__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rs-what__c { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 26px 30px; border-radius: 28px; background: var(--paper-2); border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.rs-what__c:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.rs-what__n { position: absolute; top: 24px; right: 24px; font: 500 12px/1 var(--f-mono); color: var(--ink-4); letter-spacing: .06em; }
.rs-what__ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #0A0A0F; color: #fff; margin-bottom: 10px; }
[data-theme="night"] .rs-what__ic { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); color: #fff; }
.rs-what__ic .ic { width: 21px; height: 21px; }
.rs-what__c h3 { font-size: 20px; }
.rs-what__c p { font-size: 15px; color: var(--ink-3); line-height: 1.6; }

.rs-live { overflow: clip; }
.rs-live__beam { position: absolute; left: 50%; top: -260px; width: 1200px; height: 700px; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, rgba(122,90,248,.26), transparent 70%); pointer-events: none; }
.rs-live .container { position: relative; }
.rs-live__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: clamp(28px, 3.4vw, 44px); }
.rs-live__head .rs-head { margin-bottom: 0; }
.rs-live__snap { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px; border-radius: 99px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); font: 500 11.5px/1 var(--f-mono); letter-spacing: .04em; color: var(--snow-3); }
.rs-live__snap i { width: 7px; height: 7px; border-radius: 50%; background: var(--snow-3); }
.rs-live__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rs-stat { display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 22px; border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.09); }
.rs-stat .t-label { color: var(--snow-4); }
.rs-stat b { font-family: var(--f-display); font-weight: 600; font-size: clamp(34px, 3.4vw, 50px); line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: #fff; margin-top: 8px; }
.rs-stat em { font-style: normal; font-size: 13.5px; color: var(--snow-3); }
.rs-stat--ok b { display: inline-flex; align-items: center; gap: 12px; color: #fff; }
.rs-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #3DDC97; box-shadow: 0 0 0 3px rgba(61,220,151,.18); }
.rs-live__panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.rs-params { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) max-content; gap: 0 24px; padding: 4px 26px; border-radius: 24px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.rs-params > div { padding: 18px 0; min-width: 0; }
.rs-params dt { font: 500 10.5px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--snow-4); margin-bottom: 6px; }
.rs-params dd { margin: 0; font-size: 15.5px; color: var(--snow); overflow-wrap: anywhere; }
.rs-params__id dd { white-space: nowrap; overflow-wrap: normal; }
.rs-exp { position: relative; display: flex; flex-direction: column; border-radius: 24px; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s; }
.rs-exp__shot { position: relative; overflow: hidden; background: #0B0816; }
.rs-exp__shot img { display: block; width: 100%; height: auto; aspect-ratio: 1960 / 367; transition: transform 1.2s var(--ease-out); }
.rs-exp .browser__bar { height: 44px; }
.rs-exp__go { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 99px; background: #fff; color: #0A0A0F; font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: transform .35s var(--ease), background .25s; }
.rs-exp__go .ic { width: 14px; height: 14px; }
.rs-exp:hover { transform: translateY(-3px); border-color: rgba(166,144,255,.4); box-shadow: var(--shadow-night), 0 30px 80px -30px rgba(122,90,248,.5); }
.rs-exp:hover .rs-exp__shot img { transform: scale(1.02); }
.rs-exp:hover .rs-exp__go { background: #EDE8FF; }
.rs-exp:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 4px; }

.rs-ops { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px 48px; align-items: start; margin-top: clamp(48px, 5vw, 72px); padding-top: clamp(40px, 4.4vw, 60px); border-top: 1px solid rgba(255,255,255,.08); }
.rs-ops__head { display: flex; flex-direction: column; gap: 12px; }
.rs-ops__head .rs-h3 { color: #fff; }
.rs-ops__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rs-op { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 26px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.09); }
.rs-op__ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 6px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.rs-op__ic .ic { width: 19px; height: 19px; }
.rs-op h4 { font-size: 17px; line-height: 1.25; color: #fff; letter-spacing: -.015em; }
.rs-op p { font-size: 14.5px; line-height: 1.6; color: var(--snow-3); }

.rs-so__room { gap: 20px; background: #06040B; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 40px 90px -40px rgba(28,16,70,.55); }
.rs-so__room::after { background: radial-gradient(70% 60% at 50% 0%, rgba(124,58,237,.34), transparent 70%), linear-gradient(180deg, transparent 60%, rgba(0,0,0,.4)); }
.rs-so__beam { position: absolute; z-index: -1; left: 50%; top: -30%; width: min(1200px, 160%); aspect-ratio: 1920 / 1547; transform: translateX(-50%); background: url(assets/bg/hero-beam.webp) center top / contain no-repeat; opacity: .5; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 35%, transparent 75%); mask-image: linear-gradient(#000 35%, transparent 75%); }
.rs-so__room .badge { background: rgba(123,77,255,.2); color: #C9B8FF; }
.rs-so__room .rs-h2 { background: var(--grad-title-night); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rs-so__room .btn-row { justify-content: center; margin-top: 8px; }
.rs-so__room .btn .ic { width: 18px; height: 18px; }
.rs-so__icon { width: 76px; height: 76px; border-radius: 20px; box-shadow: 0 24px 50px -16px rgba(40, 10, 110, .8), 0 0 0 1px rgba(255,255,255,.2); margin-bottom: 4px; }

/* ================= opening moments (one per page, played once, never with reduced motion) ================= */
@keyframes rs-beam { 0% { transform: translateX(-50%) translateY(0) scale(1); opacity: .6; } 50% { transform: translateX(-47.5%) translateY(1.6%) scale(1.035); opacity: .78; } 100% { transform: translateX(-52%) translateY(-.6%) scale(1.01); opacity: .64; } }
.rs-hero__beam { animation: rs-beam 52s ease-in-out infinite alternate; will-change: transform, opacity; }
/* docs: the six guide icons rise in turn */
@keyframes rs-rise { from { opacity: 0; transform: translateY(26px) scale(.92); } }
.rs-index.rs-intro .rs-index__i { animation: rs-rise .8s var(--ease-out) backwards; animation-delay: calc(250ms + var(--i) * 60ms); }
/* media kit: the seven plate icons settle from a 3D offset into the grid */
@keyframes rs-settle { from { opacity: 0; transform: translateZ(120px) translateY(-22px) rotateX(28deg); } }
@keyframes rs-fade { from { opacity: 0; } }
.rs-plate.rs-intro .rs-plate__t { animation: rs-settle 1s var(--ease-out) backwards; animation-delay: calc(200ms + var(--i) * 70ms); }
.rs-plate.rs-intro .rs-plate__word { animation: rs-fade 1s var(--ease-out) 900ms backwards; }
/* advertise: the News page turns in, then its two ad slots light up in turn */
@keyframes rs-slot-in { from { opacity: 0; transform: scale(1.06); } }
.rs-live-ad.rs-intro { animation: rs-card-in 1.1s var(--ease-out) 150ms backwards; }
.rs-live-ad.rs-intro .rs-live-ad__slot { animation: rs-slot-in .7s var(--ease-out) backwards; animation-delay: calc(1000ms + var(--i) * 320ms); }
/* validator: the card turns in, then one sheen sweeps across */
@keyframes rs-card-in { from { opacity: 0; transform: rotateX(8deg) rotateY(20deg) translateX(34px); } }
@keyframes rs-sweep { from { opacity: 1; transform: translateX(-110%) skewX(-12deg); } to { opacity: 1; transform: translateX(110%) skewX(-12deg); } }
.rs-vcard__sweep { position: absolute; inset: -10% 0; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.2) 48%, rgba(255,255,255,.05) 56%, transparent 70%); }
.rs-vcard.rs-intro { animation: rs-card-in 1s var(--ease-out) 150ms backwards; }
.rs-vcard.rs-intro .rs-vcard__sweep { animation: rs-sweep 1.3s cubic-bezier(.4, 0, .2, 1) 1s; }

/* ================= responsive ================= */
@media (min-width: 1181px) {
  .rs-kit__tabs { flex-wrap: wrap; max-width: 1100px; }
}
/* 11 brands: two even rows (6 + 5) on computers */
@media (min-width: 981px) {
  .rs-kit__br { display: block; flex-basis: 100%; height: 0; }
}
@media (max-width: 1180px) {
  .rs-feature { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .rs-feature__map { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: 26px 24px; }
  .rs-ops { grid-template-columns: minmax(0, 1fr); }
  .rs-rulesad__grid, .rs-what__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-live__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 721px) and (max-width: 1180px) {
  .rs-params { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rs-params__id { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.07); }
}
@media (max-width: 980px) {
  .rs-hero__in--split { grid-template-columns: minmax(0, 1fr); }
  .rs-hero__visual { justify-items: center; }
  .rs-hero--val .rs-hero__beam, .rs-hero--ads .rs-hero__beam, .rs-hero--kit .rs-hero__beam { left: 50%; }
  .rs-safe__in, .rs-rules__grid, .rs-aud__grid, .rs-formgrid, .rs-fmt__grid, .rs-co__grid { grid-template-columns: minmax(0, 1fr); }
  .rs-safe__head, .rs-formgrid__side { position: static; }
  .rs-fmt__view { position: static; }
  /* formats chooser: a compact grid of the seven formats (icon + name) above the preview, never a row of cut chips */
  .rs-fmt__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .rs-fmt__i { min-height: 60px; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 16px; border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
  .rs-fmt__i:last-child { grid-column: span 2; }
  .rs-fmt__ic { width: 38px; height: 38px; border-radius: 11px; }
  .rs-fmt__ic .ic { width: 17px; height: 17px; }
  .rs-fmt__t b { font-size: 14px; line-height: 1.25; }
  .rs-fmt__t em { display: none; }
  .rs-fmt__chev { display: none; }
  .rs-kit__tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 10px; scrollbar-width: none; max-width: none; }
  .rs-kit__tabs::-webkit-scrollbar { display: none; }
  .rs-kit__tab { scroll-snap-align: center; }
  .rs-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .rs-rail li::after { display: none; }
  .rs-rulesad__top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .rs-hero { padding-top: calc(var(--header-h) + 40px); padding-bottom: 64px; }
  .rs-hero__actions .btn { flex: 1 1 auto; }
  .rs-index { gap: 4px; }
  .rs-index__i { width: 30%; max-width: 104px; }
  .rs-docgrid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
  .rs-feature { grid-template-columns: minmax(0, 1fr); border-radius: 26px; }
  .rs-feature__map { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; border-left: 0; padding-left: 0; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.08); }
  .rs-strip { flex-wrap: wrap; align-items: flex-start; padding: 22px; }
  .rs-strip__txt { flex-basis: calc(100% - 68px); }
  .rs-strip__act { width: 100%; }
  .rs-strip__act .btn { flex: 1; }
  .rs-never li { padding: 18px; gap: 14px; }
  .rs-never p { font-size: 15.5px; }
  .rs-co__tiles { gap: 10px; }
  .rs-word { aspect-ratio: 1; border-radius: 18px; padding: 40px 12px 12px; }
  .rs-word figcaption { left: 12px; right: 12px; top: 11px; bottom: auto; flex-direction: column; gap: 3px; font-size: 9.5px; }
  .rs-word figcaption em { text-align: left; }
  .rs-word img { width: 84%; }
  .rs-lock { width: 90%; gap: 7px; }
  .rs-lock__ltd { font-size: 7px; letter-spacing: .14em; }
  .rs-kit__panel { padding: 16px; border-radius: 26px; }
  .rs-kit__phead { flex-wrap: wrap; }
  .rs-kit__links { width: 100%; }
  .rs-kit__links .btn { flex: 1; }
  .rs-specs, .rs-specs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 10px; aspect-ratio: auto; }
  .rs-spec { aspect-ratio: 1; border-radius: 18px; }
  .rs-specs--3 > .rs-spec:first-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
  .rs-spec figcaption { left: 12px; right: 12px; top: 11px; font-size: 9.5px; flex-direction: column; gap: 3px; }
  .rs-spec figcaption em { text-align: left; }
  .rs-spec__art { margin-top: 18px; }
  .rs-spec--split figcaption em { display: none; }
  .rs-split__d { padding-top: 20px; }
  .rs-sws, .rs-sws--3 { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; }
  .rs-sw { display: grid; grid-template-columns: 34% 1fr; }
  .rs-sw__meta span { white-space: nowrap; font-size: 11px; }
  .rs-sw__chip { height: auto; min-height: 84px; }
  .rs-sw__name { font-size: 15px; }
  .rs-dont { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 16px 10px; gap: 4px; }
  .rs-dont__ic { width: 48px; height: 48px; border-radius: 14px; }
  .rs-dont__ic > .ic { width: 20px; height: 20px; }
  .rs-dont__i b { font-size: 11.5px; }
  .rs-dos { grid-template-columns: minmax(0, 1fr); }
  .rs-space__box { min-height: 300px; }
  .rs-press__in .btn { width: 100%; }
  .rs-reach .bezel__in { padding: 18px; }
  .rs-reach__i { padding: 15px 0; gap: 12px; }
  .rs-reach__i:hover { padding-inline: 0; background: none; }
  .rs-reach__who { gap: 12px; }
  .rs-reach__who img { width: 40px; height: 40px; border-radius: 11px; }
  .rs-reach__who b { font-size: 15.5px; }
  .rs-reach__v b { font-size: 30px; }
  .rs-reach__v em { font-size: 10px; }
  .rs-live-ad { transform: none; }
  .rs-live-ad-wrap { padding-bottom: 24px; }
  .rs-fmt__scene { --sh: 360px; }
  .rs-fmt__dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .rs-fmt__where { grid-column: 1 / -1; }
  .rs-fmt__dl > div:nth-child(4) { order: 3; } .rs-fmt__dl > div:nth-child(6) { order: 4; }
  .rs-fmt__dl > div:nth-child(3) { order: 5; grid-column: 1 / -1; } .rs-fmt__dl > div:nth-child(5) { order: 6; border-bottom: 0 !important; }
  .rs-fmt__dl > div:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.07); }
  .rs-fmt__dl > div:last-child { border-bottom: 0; }
  .rs-fmt__detail { padding: 4px 16px; }
  .rs-fmt__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-slot { border-radius: 6px; border-width: 1.5px; }
  .rs-slot__lab { left: 6px; height: 16px; padding: 0 6px; font-size: 7.5px; }
  .rs-slot--r .rs-slot__lab { left: auto; right: 6px; }
  .rs-browser .browser__url { font-size: 10.5px; }
  .rs-what__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .rs-what__c { padding: 22px; border-radius: 22px; }
  .rs-dist { grid-template-columns: minmax(0, 1fr); }
  .rs-form__foot .btn--lg { width: 100%; }
  .rs-pr__nav { flex-wrap: nowrap; }
  .rs-pr__nav .btn--lg { width: auto; flex: 1; }
  .rs-mode { width: 100%; }
  .rs-mode__o { flex: 1; }
  .rs-mode__o span { width: 100%; justify-content: center; padding: 0 10px; }
  .rs-vcard { border-radius: 20px; gap: 10px; aspect-ratio: auto; min-height: 220px; transform: none; }
  .rs-vcard__foot { grid-template-columns: auto auto 1fr; gap: 16px; }
  .rs-vcard__foot b { font-size: 16px; }
  .rs-vcard__so b { font-size: 14px !important; }
  .rs-cronos img { height: 19px; }
  .rs-stat { padding: 18px; border-radius: 20px; }
  .rs-stat b { font-size: 28px; }
  .rs-params { grid-template-columns: minmax(0, 1fr); padding: 4px 18px; }
  .rs-params > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
  .rs-params > div:last-child { border-bottom: 0; }
  .rs-params dt { margin-bottom: 0; flex: none; }
  .rs-params dd { font-size: 14.5px; text-align: right; min-width: 0; }
  .rs-live__snap { height: 32px; font-size: 10.5px; }
  .rs-exp .browser__url { display: none; }
  .rs-so__room .btn-row .btn { width: 100%; }
  .rs-end__in { flex-direction: column; gap: 14px; }
  .rs-end__in .btn { width: 100%; }
}
@media (max-width: 600px) {
  /* docs: name, line, one button; the deep links fold into "Pages" */
  .rs-doc { gap: 10px; padding: 22px 22px 8px; border-radius: 24px; }
  .rs-doc__top { margin-bottom: 4px; }
  .rs-doc__icon { width: 44px; height: 44px; border-radius: 12px; }
  .rs-doc__name { font-size: 23px; }
  .rs-doc__line { font-size: 15px; line-height: 1.55; }
  .rs-doc__cta { order: 3; margin-top: 6px; }
  .rs-doc__pages { order: 4; margin: 10px -22px 0; border-top: 1px solid rgba(255,255,255,.08); }
  .rs-doc__pages > summary { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 22px; cursor: pointer; list-style: none; font-size: 14.5px; font-weight: 500; color: var(--snow-2); -webkit-tap-highlight-color: transparent; }
  .rs-doc__pages > summary em { font: 500 11px/1 var(--f-mono); font-style: normal; color: var(--snow-3); padding: 4px 7px; border-radius: 6px; background: rgba(255,255,255,.07); }
  .rs-doc__pages > summary .ic { width: 17px; height: 17px; margin-left: auto; color: var(--snow-3); transition: transform .3s var(--ease); }
  .rs-doc__pages[open] > summary .ic { transform: rotate(180deg); }
  .rs-doc__pages > summary:focus-visible { outline: 2px solid var(--violet-2); outline-offset: -2px; border-radius: 12px; }
  .rs-doc__pages .rs-doc__links { margin: 0 22px 12px; }
  .rs-doc__pages .rs-doc__links li:last-child { border-bottom: 0; }
  /* forms: one frame only, the fields get the full width */
  .rs-formcard.bezel { padding: 0; border: 0; background: none; border-radius: 0; }
  .rs-formcard.bezel > .bezel__in { padding: 20px 18px 22px; border-radius: 24px; }
  .rs-formcard--night { padding: 0; border: 0; background: none; border-radius: 0; }
  .rs-formcard--night .rs-formcard__in { padding: 20px 18px 22px; }
  /* validator: the capture is unreadable this small; no empty browser frame, just a full-width button to the live explorer */
  .rs-exp__shot { display: none; }
  .rs-exp { background: none; border: 0; box-shadow: none; border-radius: 99px; overflow: visible; }
  .rs-exp:hover { transform: none; box-shadow: none; }
  .rs-exp .browser__bar { height: auto; padding: 0; background: none; border: 0; }
  .rs-exp .browser__bar > i { display: none; }
  .rs-exp__go { flex: 1; margin: 0; height: 52px; justify-content: center; gap: 8px; padding: 0 20px; font-size: 15px; }
  .rs-exp__go .ic { width: 17px; height: 17px; }
  .rs-ops__grid { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,.08); }
  .rs-op { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 16px 0; border-radius: 0; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .rs-op__ic { grid-row: span 2; width: 36px; height: 36px; border-radius: 11px; margin: 0; }
  .rs-op__ic .ic { width: 17px; height: 17px; }
  .rs-op h4 { font-size: 16.5px; padding-top: 7px; }
  .rs-op p { font-size: 14px; }
}
@media (max-width: 640px) {
  /* press release stepper: dots and bars only, the current step written once under them */
  .rs-steps__i b { display: none; }
  .rs-steps__now { display: block; }
  .rs-pr__back { width: 56px; padding: 0; flex: none; justify-content: center; }
  .rs-pr__back span { display: none; }
  .rs-pr__nav .btn--lg { min-width: 0; padding-inline: 18px; }
  /* how it works: a compact numbered list */
  .rs-rail { grid-template-columns: minmax(0, 1fr); }
  .rs-rail li:not(:last-child)::after { display: block; top: 43px; bottom: -7px; }
  .rs-rail li { padding: 7px 0; gap: 14px; }
  .rs-rail b { font-size: 16.5px; }
  .rs-rail p { font-size: 14px; }
  /* rules: two-line rows with a 36 px icon, no cards */
  .rs-rulesad__grid { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,.08); }
  .rs-rule { flex-direction: row; align-items: flex-start; gap: 14px; padding: 16px 0; border-radius: 0; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .rs-rule__ic { width: 36px; height: 36px; border-radius: 11px; }
  .rs-rule__ic .ic { width: 17px; height: 17px; }
  .rs-rule h3 { font-size: 16.5px; }
  .rs-rule p { font-size: 14px; margin-top: 4px; }
  .rs-rulesad .rs-head { margin-bottom: 20px; }
  /* validator basics: compact rows */
  .rs-what__c { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; padding: 18px; }
  .rs-what__ic { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; margin: 0; }
  .rs-what__ic .ic { width: 18px; height: 18px; }
  .rs-what__n { display: none; }
  .rs-what__c h3 { font-size: 17px; padding-top: calc(8px + var(--gt-t)); }
  .rs-what__c p { font-size: 14px; }
}
@media (max-width: 480px) {
  /* hero browser mock: the slot labels stay small enough to sit inside the capture */
  .rs-live-ad__slot b { height: 18px; padding: 0 6px; font-size: 8px; letter-spacing: .08em; }
  .rs-live-ad__slot--r b { right: 6px; }
}
@media (max-width: 420px) {
  .rs-h1 { font-size: 42px; }
  .rs-hero__actions { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-plate__in, .rs-vcard, .rs-doc, .rs-live-ad { transform: none !important; }
  .rs-hero__beam, .rs-intro, .rs-intro * , .rs-intro *::after { animation: none !important; }
  .rs-shot { transition: none; }
}
.rs-doc__cta { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ================= 28/09 — media kit: every brand of the pack ================= */
/* InoLah: its logo and its banner (it carries the KcalbApp mark) */
.rs-specs--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.rs-spec--banner .rs-spec__art { height: auto; width: 88%; aspect-ratio: 3 / 1; }
.rs-spec--banner .rs-spec__art img { border-radius: 14px; object-fit: cover; box-shadow: 0 24px 40px -22px rgba(0,0,0,.9); }
@media (max-width: 760px) { .rs-specs--2 > .rs-spec--banner { grid-column: 1 / -1; } }

/* the site's own audience (28/09) — appears only when switched on (server/stats.mjs, STATS_PUBLIC) */
.rs-reach__site { margin: 14px 0 4px; padding: 14px 16px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.rs-reach__nums { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 8px; }
.rs-reach__nums span { display: flex; align-items: baseline; gap: 6px; }
.rs-reach__nums b { font-size: 22px; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.rs-reach__nums em { font-style: normal; font-size: 12.5px; color: var(--ink-3); }
/* « InoLah by KcalbApp »: the signature after the name, smaller and quieter (28/09) */
.rs-kit__by { margin-left: 6px; font-family: var(--f-body); font-size: .5em; font-weight: 500; letter-spacing: 0; color: rgba(255, 255, 255, .62); white-space: nowrap; }