/* ==== 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); }
/* the open menu wins over a paper or white header (30/09: over a paper section the bar stayed light under white text) */
body.menu-open .site-header[data-on], body.mega-open .site-header[data-on] { 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: the app icon, then the wordmark as in its files (30/09 evening: mixed case, upright; only the
   banners write the names in capitals), 17 px high (15 on phones), the height of the name before. "Ino" = the text colour
   (white on night, the deep blue #1F295E on a paper or white header), "Times" = light indigo #8DA0FB on night, indigo
   #4A62E0 on paper: the colours of wordmark-white-for-dark-bg.svg and wordmark-color-for-light-bg.svg. An open menu is
   night again, whatever the page under it. */
.it-icon { width: 30px; height: 30px; flex: none; }
/* InoLah NEWS (01/10/2026): the writing is a picture, white on the dark surfaces, ink on the light ones */
.it-wm { display: block; flex: none; height: var(--it-h, 22px); max-width: none; line-height: 0; }
.it-wm__img { display: block; width: auto; height: 100%; max-width: none; }
.lockup .it-wm__img { width: auto; height: 100%; border-radius: 0; }   /* not the 34 × 34 of .lockup img */
.it-wm__img--ink { display: none; }
.site-header:is([data-on="paper"], [data-on="white"]) .it-wm__img--white { display: none; }
.site-header:is([data-on="paper"], [data-on="white"]) .it-wm__img--ink { display: block; }
body:is(.menu-open, .mega-open) .site-header .it-wm__img--white { display: block; }
body:is(.menu-open, .mega-open) .site-header .it-wm__img--ink { display: none; }
@media (max-width: 480px) { .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/ino-widget.css ==== */
/* ================= INO, the chat widget (Thomas 29/09) ================= */
.ino-widget { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 60; }
body.menu-open .ino-widget, body.mega-open .ino-widget { display: none; }

.ino-fab { width: 60px; height: 60px; border-radius: 50%; border: none; padding: 0; overflow: hidden; cursor: pointer;
  box-shadow: 0 14px 34px -12px rgba(28, 16, 70, .45), 0 0 0 3px rgba(255, 255, 255, .9); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.ino-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 20px 40px -14px rgba(28, 16, 70, .55), 0 0 0 3px rgba(255, 255, 255, .9); }
.ino-fab img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ino-widget.is-open .ino-fab { box-shadow: 0 14px 34px -12px rgba(28, 16, 70, .45), 0 0 0 3px var(--violet); }
/* the panel has its own close button once open: hide the fab so it never peeks out behind an edge */
@media (max-width: 600px) { .ino-widget.is-open .ino-fab { display: none; } }

.ino-panel { position: absolute; right: 0; bottom: calc(100% + 14px); width: min(370px, calc(100vw - 40px)); height: min(560px, 72vh);
  background: var(--paper, #fff); border-radius: 20px; box-shadow: var(--shadow-2, 0 20px 50px -20px rgba(0,0,0,.3));
  display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(20, 10, 60, .08); }
[hidden].ino-panel { display: none; }

.ino-panel__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; flex: none;
  background: linear-gradient(135deg, #2B0F52, #150826); color: #fff; }
.ino-panel__av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.ino-panel__id { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ino-panel__id b { font-size: 14.5px; font-weight: 700; }
.ino-panel__id span { font-size: 12px; color: rgba(255, 255, 255, .68); }
.ino-panel__close { flex: none; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; cursor: pointer; }
.ino-panel__close:hover { background: rgba(255, 255, 255, .22); }
.ino-panel__close .ic { width: 16px; height: 16px; }

.ino-panel__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ino-log { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ino-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 92%; }
.ino-msg--you { align-self: flex-end; flex-direction: row-reverse; }
.ino-msg__av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.ino-msg__bubble { font-size: 14px; line-height: 1.45; padding: 9px 12px; border-radius: 14px; background: #F1EEFB; color: var(--ink, #0A0A0F); word-break: break-word; }
.ino-msg--you .ino-msg__bubble { background: var(--violet, #7A5AF8); color: #fff; }
.ino-msg__bubble a { color: inherit; text-decoration: underline; }
.ino-msg__link { display: inline-block; margin-top: 6px; border: none; background: none; padding: 0; font: inherit; font-weight: 600; text-decoration: underline; color: var(--violet, #7A5AF8); cursor: pointer; }
.ino-msg__bubble--dots { display: flex; gap: 4px; padding: 12px 14px; }
.ino-msg__bubble--dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(20, 10, 60, .35); animation: ino-dot 1.1s infinite ease-in-out; }
.ino-msg__bubble--dots i:nth-child(2) { animation-delay: .15s; } .ino-msg__bubble--dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ino-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

.ino-form { flex: none; display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(20, 10, 60, .08); }
.ino-input { flex: 1; min-width: 0; height: 40px; border-radius: 20px; border: 1px solid rgba(20, 10, 60, .14); padding: 0 14px; font-size: 14px; font-family: var(--f-body); background: #fff; color: var(--ink, #0A0A0F); }
.ino-input:focus { outline: none; border-color: var(--violet, #7A5AF8); }
.ino-send { flex: none; width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--violet, #7A5AF8); color: #fff; display: grid; place-items: center; cursor: pointer; }
.ino-send:disabled { opacity: .5; cursor: default; }
.ino-send .ic { width: 18px; height: 18px; }

.ino-panel__contact { flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border: none; border-top: 1px solid rgba(20, 10, 60, .08);
  background: #FAF9FF; font-size: 12.5px; font-weight: 600; color: var(--ink-3, #55506E); cursor: pointer; }
.ino-panel__contact:hover { background: #F1EEFB; }
.ino-panel__contact .ic { width: 15px; height: 15px; }

.ino-contact { padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.ino-contact__lead { margin: 0; font-size: 13.5px; color: var(--ink-3, #55506E); }
.ino-contact label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-3, #55506E); }
.ino-contact input, .ino-contact textarea { font: 14px/1.4 var(--f-body); padding: 9px 11px; border-radius: 10px; border: 1px solid rgba(20, 10, 60, .16); resize: vertical; color: var(--ink, #0A0A0F); background: #fff; }
.ino-contact input:focus, .ino-contact textarea:focus { outline: none; border-color: var(--violet, #7A5AF8); }
.ino-contact__row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.ino-contact__done { margin: 0; font-size: 13.5px; font-weight: 600; color: #16A34A; }
.ino-contact__done[hidden] { display: none; }

@media (max-width: 600px) {
  .ino-widget { right: max(14px, env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); }
  .ino-fab { width: 54px; height: 54px; }
  .ino-panel { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
    top: calc(var(--header-h) + 8px + env(safe-area-inset-top)); width: auto; height: auto; }
}

/* ==== 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) {
  .header-cta { gap: 6px; }
  .header-cta .btn--white { padding: 0 14px; font-size: 13.5px; }
  .mode-btn { width: 38px; height: 38px; }
}
/* ---- the header's logo on phones (Thomas 30/09: « KCALB n'est jamais montré sans LTD »). Until then the phone header hid
   LTD (and squeezed KCALB, down to a sliver at 320 px). Now the logo gets the room the buttons leave (the grid's first
   column, minmax(0, 1fr)) and is scaled to fit it, every part in the proportions of the desktop lockup: --lk = 1 px of
   the desktop lockup (mark 26, gap 12, wordmark 16 high, gap 10, LTD 10.5 with its 4 px), never more than 1 px. The bar
   goes; the diamond stays while the column holds the lockup at 90 % of its size or more (163 of its 181 px), otherwise it
   goes and KCALB LTD takes the whole column (143 px at full size). The news side (InoLah News, 01/10/2026) does the same
   with its icon and « InoLah NEWS » (26 + 9 + 20 px high × 497/96 = 139 px). A container query: the buttons and the language never change it. ---- */
@media (max-width: 480px) {
  .site-header__in, body[data-site="news"] .site-header__in { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .site-header .lockup:not(.lockup--it) { container: kc-lockup / inline-size; min-width: 0; gap: 0; --lk: min(1px, 100cqi / 143); }
  .site-header .lockup__bar, .site-header .lockup__mark { display: none; }
  .site-header .lockup__word { height: calc(16 * var(--lk)); }
  .site-header .lockup__ltd { display: block; flex: none; font-size: calc(10.5 * var(--lk)); margin-left: calc(10 * var(--lk)); padding-top: calc(4 * var(--lk)); white-space: nowrap; }
  .site-header .lockup.lockup--it { container: it-lockup / inline-size; min-width: 0; gap: 0; --itk: min(1px, 100cqi / 139); }
  .site-header .lockup--it .it-icon { width: calc(26 * var(--itk)); height: calc(26 * var(--itk)); margin-right: calc(9 * var(--itk)); }
  .site-header .lockup--it .it-wm { height: calc(20 * var(--itk)) !important; }
  /* the home page's hero shows the big chrome KCALB LTD: the header keeps only its diamond there (home.css), at its size */
  body[data-page="home"].hm-word-in:not(.menu-open):not(.mega-open) .site-header .lockup__mark { display: block; width: 26px; height: 26px; margin: 0; }
  body[data-page="home"].hm-word-in:not(.menu-open):not(.mega-open) .site-header :is(.lockup__word, .lockup__ltd) { display: none; }
}
@container kc-lockup (min-width: 163px) {
  .site-header .lockup:not(.lockup--it) > * { --lk: min(1px, 100cqi / 181); }
  .site-header .lockup__mark { display: block; width: calc(26 * var(--lk)); height: calc(26 * var(--lk)); margin-right: calc(12 * var(--lk)); }
}
/* the smallest phones (320–374 px): the two buttons of the header lose their icon and a little padding, so the logo keeps
   three quarters of its size or more */
@media (max-width: 374px) {
  .site-header__in, body[data-site="news"] .site-header__in { gap: 8px; }
  .header-cta { gap: 4px; }
  .mode-btn { width: 36px; height: 36px; }
  .site-header .site-switch .ic { display: none; }
  body .site-header .header-cta .site-switch { padding-inline: 12px !important; font-size: 13px; }
}
/* 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; }
/* InoLah's writing (01/10/2026: SignPainter, a picture revealed from left to right, js/signature.js): the dark-violet
   picture on light surfaces, the white-to-lavender one on dark surfaces (the gradients of the old drawing) */
.sig { display: block; width: 100%; height: auto; overflow: visible; }
.sig__img { display: block; width: 100%; height: auto; max-width: none; }
.sig__img--night { display: none; }
.sig-host.is-still .sig { clip-path: none !important; }
[data-theme="night"] .sig-host { --sig-dust: 214, 204, 255; }
[data-theme="night"] .sig-host .sig__img--day { display: none; }
[data-theme="night"] .sig-host .sig__img--night { display: block; }
.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; }
/* 01/10/2026 — « by KcalbApp » under InoLah as on the banners (Thomas's standard): written as it is (never translated,
   never capitals), aligned on the I, at the banners' size (6 % of the word) and colour */
.br-hero--inolah { --sigw: clamp(280px, 30vw, 470px); }
.br-hero--inolah .br-by { margin-top: .3em; padding-left: calc(var(--sigw) * .0085 - .06em); font: 500 calc(var(--sigw) * .06)/1.2 var(--f-display); letter-spacing: .01em; text-transform: none; color: #D9D3EC; }

/* ==== 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: 200px; } /* the Crypto-Only lockup, symbol + upright wordmark */
.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; }
/* Thomas 29/09: equal width per year, not proportional to card count — a year with many cards (e.g. 5)
   used to swallow half the bar while a 1-card year was a sliver, which read as decentered/off */
.ab-ms__yr { flex: 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%; }

/* Thomas 29/09: the InoTimes milestone — its icon and name on the dark card (same family as the CoinMarketCap card) */
.ab-ms__vis--inotimes { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.ab-ms__vis--inotimes img { width: 76px; height: 76px; border-radius: 18px; box-shadow: 0 14px 30px rgba(5, 10, 40, .45); }
/* the InoTimes wordmark (KC.itWordmark, 30/09: mixed case, upright, as in its files): "Ino" white, "Times" light indigo */
.ab-ms__vis--inotimes .it-wm { color: #fff; height: 20px; }

/* ==== 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/docs.css ==== */
/* ================= DOCUMENTATION GUIDES (#docs.<guide>…) — prefix .dc- =================
   GitBook's structure (sections on the left, the page, "On this page" on the right) drawn with the site's own parts:
   the night hero band of the legal pages, the paper surface, the .bezel sheet, the lg-toc contents list, .btn, .acc, .note, .seg. */
.dc { --dc-side: 236px; --dc-toc: 196px; }

/* ---------- hero (night) ---------- */
.dc-hero { position: relative; overflow: clip; isolation: isolate; padding: calc(var(--header-h) + clamp(44px, 5.4vw, 80px)) 0 clamp(44px, 5vw, 72px); }
/* the light of the hero: the legal pages' wide violet glow over the whole band (Thomas 30/09: the centred beam
   « ne prend pas toute la page, ça fait bizarre ») */
.dc-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%); }
.dc-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: clamp(40px, 6vw, 96px); align-items: end; }
.dc-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; }
.dc-crumbs { gap: 6px 8px; }
.dc-crumbs a, .dc-crumbs span { display: inline-flex; align-items: center; min-height: 28px; }
.dc-crumbs [aria-current], .dc-crumbs__sec { color: var(--snow-2); }
.dc-h1 { font-size: clamp(40px, 4.9vw, 70px); line-height: 1; letter-spacing: -.046em; padding-bottom: calc(.06em + var(--gt-b)); text-wrap: balance; max-width: 15ch; }
.dc-lead { max-width: 560px; color: var(--snow-2); }
.dc-hero__meta { display: none; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: -2px; font-size: 13.5px; color: var(--snow-3); }
.dc-hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.dc-hero__meta .ic { width: 15px; height: 15px; opacity: .8; }

/* the guide card (same glass as the legal document card) */
.dc-idc { position: relative; perspective: 1400px; }
.dc-idc__in { position: relative; overflow: hidden; border-radius: 26px; padding: 20px 22px 8px; 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); }
.dc-idc__in::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(60% 50% at 80% 0%, rgba(255,255,255,.12), transparent 70%); }
.dc:not(.is-swap) .dc-idc__in { animation: dc-card-in 1.3s var(--ease-out); }
@keyframes dc-card-in { from { opacity: 0; transform: rotateX(16deg) rotateY(-22deg) translateY(12px); } }
.dc-idc__head { position: relative; display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.dc-idc__head img { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 10px 24px -10px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.1); }
.dc-idc__head b { display: block; font: 600 17px/1.25 var(--f-display); letter-spacing: -.012em; }
.dc-idc__head div > span { display: block; margin-top: 2px; font-size: 13px; color: var(--snow-3); }
.dc-idc__head { justify-content: space-between; }
.dc-idc__ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; color: #fff;
  background: linear-gradient(145deg, rgba(167,139,250,.34), rgba(122,90,248,.16)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 10px 24px -12px rgba(0,0,0,.8); }
.dc-idc__ic .ic { width: 22px; height: 22px; }
.dc-idc__count { font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--snow-3); }
.dc-idc__facts { position: relative; margin: 0; }
.dc-idc__facts > div { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 44px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.dc-idc__facts > div:last-child { border-bottom: 0; }
.dc-idc__facts dt { font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--snow-4); white-space: nowrap; }
.dc-idc__facts dd { margin: 0; font-size: 14px; font-weight: 500; color: var(--snow); text-align: right; min-width: 0; }
.dc-idc__facts a { display: inline-flex; align-items: center; gap: 7px; color: var(--snow); transition: color .2s; }
.dc-idc__facts a .ic { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.dc-idc__facts a:hover { color: var(--violet-2); }
.dc-idc__facts a:hover .ic { transform: translateX(3px); }
/* on the guide home the sections are the rows: the name is the link */
.dc-idc__facts dt a { font: 600 15px/1.3 var(--f-body); letter-spacing: -.005em; text-transform: none; color: var(--snow); }
.dc-idc__facts dt a::after { content: ""; position: absolute; inset: 0; }
.dc-idc__facts > div:has(dt a) { position: relative; }
.dc-idc__facts > div:has(dt a):hover dt a { color: var(--violet-2); }
.dc-idc__next dd { max-width: 70%; }
.dc-idc__next a { text-align: right; }

/* ---------- reading area (paper) ---------- */
.dc-main { position: relative; padding: clamp(40px, 5vw, 72px) 0 clamp(72px, 8vw, 120px); }
.dc-layout { display: grid; grid-template-columns: var(--dc-side) minmax(0, 1fr) var(--dc-toc); gap: clamp(28px, 3vw, 44px); align-items: start; }
.dc-center { min-width: 0; }

/* left: the guide, the search, the sections (the legal contents list, with the site's restraint) */
/* z-index: the search results drop over the article (its headings and buttons are positioned too) */
.dc-side { position: sticky; z-index: 3; top: calc(var(--header-h) + 24px); min-width: 0; }
.dc-side__in { display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - var(--header-h) - 48px); }
.dc-guide { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px 8px 8px; border-radius: 16px; border: 1px solid transparent; transition: background .25s, border-color .25s, box-shadow .25s; }
.dc-guide img { width: 40px; height: 40px; border-radius: 11px; flex: none; box-shadow: 0 10px 22px -12px rgba(40, 10, 110, .7), 0 0 0 1px rgba(16,10,40,.06); }
.dc-guide b { display: block; font: 600 15.5px/1.2 var(--f-display); letter-spacing: -.014em; color: var(--ink); }
.dc-guide b { display: flex; align-items: center; }
.dc-lk__bar { display: inline-block; width: 1px; height: .95em; margin: 0 .5em; background: currentColor; opacity: .3; flex: none; }
.dc-h1--lk { display: flex; align-items: center; flex-wrap: wrap; max-width: none; }
.dc-h1--lk .dc-lk__bar { width: 2px; height: .72em; margin: 0 .3em; opacity: .35; background: #cbd5ff; }
.dc-guide:hover, .dc-guide.is-on { background: var(--paper-2); border-color: var(--line); box-shadow: var(--shadow-1); }

/* search */
.dc-search { position: relative; z-index: 6; }
.dc-search__box { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 14px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--line-2); transition: border-color .2s, box-shadow .25s; }
.dc-search__box:focus-within { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(123, 77, 255, .14); }
.dc-search__box > .ic { width: 17px; height: 17px; color: var(--ink-3); }
.dc-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 14.5px; color: var(--ink); }
.dc-search input::placeholder { color: var(--ink-4); }
.dc-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.dc-search__kbd { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 7px; background: var(--paper); border: 1px solid var(--line); font: 500 11.5px/1 var(--f-mono); color: var(--ink-3); }
.dc-search:focus-within .dc-search__kbd { opacity: 0; }
.dc-results { position: absolute; left: 0; top: calc(100% + 8px); width: min(440px, calc(100vw - 48px)); max-height: min(62vh, 520px); overflow: auto; overscroll-behavior: contain;
  padding: 6px; border-radius: 18px; background: var(--paper-2); border: 1px solid var(--line); box-shadow: var(--shadow-3); }
.dc-results[hidden] { display: none; }
.dc-results__list { list-style: none; margin: 0; padding: 0; }
.dc-results__list a { display: grid; gap: 3px; padding: 11px 12px; border-radius: 13px; transition: background .15s; }
.dc-results__list a.is-on { background: var(--paper); }
.dc-res__t { font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.dc-res__s { display: flex; align-items: center; gap: 3px 5px; flex-wrap: wrap; font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.dc-res__s b { font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.dc-res__s .ic { width: 12px; height: 12px; opacity: .6; }
.dc-res__x { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.dc-results mark { background: var(--violet-soft); color: var(--violet-3); border-radius: 3px; padding: 0 1px; }
.dc-results__none { padding: 14px 12px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }

/* sections and pages */
.dc-side__scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 6px 0 12px; }
.dc-side__scroll::-webkit-scrollbar { display: none; }
.dc-side__scroll.is-clipped { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 44px), transparent); }
.dc-side__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); }
.dc-side__scroll.is-scrolled:not(.is-clipped) { -webkit-mask-image: linear-gradient(180deg, transparent, #000 24px); mask-image: linear-gradient(180deg, transparent, #000 24px); }
.dc-nav__sec + .dc-nav__sec { margin-top: 22px; }
.dc-nav__label { font: 500 11px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px 18px; }
.dc-nav__list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line-2); margin-left: 2px; }
.dc-nav__list a { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 16px; font-size: 14px; line-height: 1.42; color: var(--ink-3); transition: color .2s; }
.dc-nav__list a::before { content: ""; position: absolute; left: -1.5px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: transparent; transition: background .25s; }
.dc-nav__list a:hover { color: var(--ink); }
.dc-nav__list a.is-on { color: var(--ink); font-weight: 600; }
.dc-nav__list a.is-on::before { background: linear-gradient(180deg, var(--violet-2), var(--violet)); }
.dc-nav__ic { width: 20px; height: 20px; flex: none; display: grid; place-items: center; color: var(--ink-4, #9a97ad); transition: color .2s; }
.dc-nav__ic .ic { width: 16px; height: 16px; }
.dc-nav__list a:hover .dc-nav__ic { color: var(--ink-2, var(--ink)); }
.dc-nav__list a.is-on .dc-nav__ic { color: var(--violet); }

/* "On the site": the pages the site presents itself */
.dc-nav__site { margin-top: 26px !important; padding-top: 20px; border-top: 1px solid var(--line); }
.dc-site { list-style: none; margin: 0; padding: 0; }
.dc-site a { display: flex; align-items: center; gap: 10px; padding: 5px 8px 5px 16px; font-size: 14px; line-height: 1.4; color: var(--ink-3); transition: color .2s; }
.dc-site a:hover { color: var(--ink); }
.dc-site__ic { width: 20px; height: 20px; flex: none; display: grid; place-items: center; }
.dc-site__ic img { width: 20px; height: 20px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(16,10,40,.06); }
.dc-site__ic .ic { width: 16px; height: 16px; color: var(--ink-2); }
/* another site (inoai.org): opens in a new tab, a small arrow after the name says so */
.dc-site__out { display: inline-grid; place-items: center; margin-left: -4px; opacity: .5; transition: opacity .2s, transform .25s var(--ease); }
.dc-site__out .ic { width: 13px; height: 13px; }
.dc-site__ext:hover .dc-site__out { opacity: 1; transform: translate(1px, -1px); }
.dc-nav--sheet .dc-nav__site { border-top-color: rgba(255,255,255,.08); }
.dc-nav--sheet .dc-site a { min-height: 44px; padding: 8px 12px 8px 16px; font-size: 15px; color: var(--snow-2); }
.dc-nav--sheet .dc-site__ic .ic { color: var(--snow-2); }
.dc-nav--sheet .dc-site a:hover { color: #fff; }
.dc-idc__one { display: inline-flex; align-items: center; gap: 7px; }
.dc-idc__one .ic { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.dc-idc__facts > div:has(dt a):hover .dc-idc__one .ic { transform: translateX(3px); }

/* centre: the page on its sheet */
.dc-doc { min-width: 0; border-radius: 36px; }
.dc-doc > .bezel__in { border-radius: 27px; padding: clamp(28px, 3.4vw, 50px) clamp(22px, 3.6vw, 54px) clamp(30px, 3.6vw, 52px); }

/* "On this page" folded (tablets and phones) */
.dc-otp { display: none; margin-bottom: 26px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.dc-otp summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding: 0 16px; cursor: pointer;
  font: 500 11px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.dc-otp summary::-webkit-details-marker { display: none; }
.dc-otp summary .ic { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.dc-otp[open] summary .ic { transform: rotate(180deg); }
.dc-otp__list { list-style: none; margin: 0; padding: 0 8px 8px; border-top: 1px solid var(--line); }
.dc-otp__list a { display: flex; align-items: center; min-height: 44px; padding: 6px 10px; border-radius: 10px; font-size: 14.5px; line-height: 1.35; color: var(--ink-2); }
.dc-otp__list .dc-toc__l3 a { padding-left: 26px; font-size: 14px; color: var(--ink-3); }
.dc-otp__list a:hover { background: var(--paper-2); color: var(--ink); }

/* ---------- the text ---------- */
.dc-body { font-size: 16.5px; line-height: 1.75; color: var(--ink-2); text-wrap: pretty; overflow-wrap: break-word; }
.dc-body > * + * { margin-top: 18px; }
.dc-body > :first-child { margin-top: 0; }
.dc-body strong { color: var(--ink); font-weight: 600; }
.dc-body a:not(.btn):not(.dc-card):not(.dc-pn) { color: var(--violet-3); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s; }
.dc-body a:not(.btn):not(.dc-card):not(.dc-pn):hover { color: var(--ink); }
.dc-body .dc-card a { position: relative; z-index: 1; }
.dc-nw { white-space: nowrap; }
.dc-ext__i { display: inline-block; width: .7em; height: .7em; 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; }
.dc-self { color: var(--ink); font-weight: 500; }

/* headings, with a copy-link on hover */
.dc-h2, .dc-h3 { position: relative; display: flex; align-items: center; scroll-margin-top: calc(var(--header-h) + 16px); }
.dc-body > .dc-h2 { margin-top: calc(52px - var(--gt-t)); font-size: clamp(23px, 2vw, 28px); line-height: 1.18; letter-spacing: -.03em; }
.dc-body > .dc-h3 { margin-top: calc(36px - var(--gt-t)); font-size: 19.5px; line-height: 1.3; letter-spacing: -.02em; }
.dc-body > .dc-h2 + *, .dc-body > .dc-h3 + * { margin-top: 14px; }
.dc-body > .dc-h2:first-child, .dc-body > .dc-h3:first-child { margin-top: calc(-1 * var(--gt-t)); }
.dc-anchor { margin-left: 8px; 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; }
.dc-anchor .ic { width: 16px; height: 16px; }
.dc-h2:hover .dc-anchor, .dc-h3:hover .dc-anchor, .dc-anchor:focus-visible { opacity: 1; }
.dc-anchor:hover { color: var(--violet-3); background: var(--violet-soft); }

/* lists */
.dc-body ul, .dc-body ol:not(.dc-steps):not([role]) { list-style: none; padding: 0; display: grid; gap: 8px; }
.dc-body ul > li { position: relative; padding-left: 24px; }
.dc-body ul > li::before { content: ""; position: absolute; left: 3px; top: 13px; width: 9px; height: 2px; border-radius: 2px; background: var(--violet); opacity: .85; }
.dc-body ol:not(.dc-steps):not([role]) { counter-reset: dc; }
.dc-body ol:not(.dc-steps):not([role]) > li { position: relative; padding-left: 30px; counter-increment: dc; }
.dc-body ol:not(.dc-steps):not([role]) > li::before { content: counter(dc); position: absolute; left: 0; top: .2em; font: 500 12.5px/1.6 var(--f-mono); color: var(--violet-3); }

/* inline code, addresses, colours */
.dc-body code { font: 500 .86em/1.45 var(--f-mono); color: var(--ink); background: var(--paper-3); border: 1px solid var(--line); border-radius: 6px; padding: .1em .4em; overflow-wrap: anywhere; }
.dc-addr { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; vertical-align: middle; }
.dc-addr code { word-break: break-all; }
.dc-addr--url { flex-wrap: wrap; row-gap: 6px; }
.dc-addr--url code { word-break: normal; overflow-wrap: normal; }
.dc-hex { display: inline-flex; align-items: center; gap: 8px; }
.dc-hex i { width: 16px; height: 16px; border-radius: 5px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(16,10,40,.14); flex: none; }
.dc-copy { position: relative; flex: none; width: 36px; height: 36px; border-radius: 10px; display: inline-grid; place-items: center; color: var(--ink-3); background: var(--paper-2); border: 1px solid var(--line-2); transition: color .2s, background .2s, border-color .2s, transform .2s var(--ease); }
.dc-copy .ic { width: 15px; height: 15px; }
.dc-copy:hover { color: #fff; background: #0A0A0F; border-color: #0A0A0F; }
.dc-copy:active { transform: scale(.94); }
.dc-copy--sm { width: 30px; height: 30px; border-radius: 8px; }
.dc-copy--sm .ic { width: 14px; height: 14px; }
.dc-copy--sm::after { content: ""; position: absolute; inset: -7px; }

/* code block (addresses) */
.dc-code { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 18px; border-radius: 16px; color: #EDE9FF;
  background: linear-gradient(170deg, #17122A, #0B0812 70%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 16px 34px -22px rgba(20,10,60,.6); }
.dc-code pre { flex: 1; min-width: 0; margin: 0; white-space: pre-wrap; word-break: break-all; font: 500 14px/1.6 var(--f-mono); letter-spacing: .01em; }
.dc-code code { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
.dc-code .dc-copy { color: var(--snow-2); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); }
.dc-code .dc-copy:hover { color: #0A0A0F; background: #fff; border-color: #fff; }
.dc-body > .dc-h3 + .dc-code { margin-top: 12px; }
.dc-code + .dc-btns { margin-top: 12px; }

/* figures */
.dc-fig img { display: block; width: 100%; height: auto; border-radius: 18px; background: #140F22; box-shadow: 0 22px 50px -28px rgba(28, 16, 70, .55), 0 0 0 1px rgba(16,10,40,.06); }
.dc-fig--sm img { max-width: 100%; border-radius: 0; background: none; box-shadow: none; }
.dc-fig figcaption { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); text-align: center; }
.dc-body > .dc-fig:first-child { margin-bottom: 28px; }
/* a screen capture of a platform (data-shot): at its own width (the width of the markdown), centred, in a thin frame */
.dc-fig--shot img { max-width: 100%; margin-inline: auto; border-radius: 14px; background: #151A24; box-shadow: 0 18px 40px -26px rgba(16, 10, 40, .5), 0 0 0 1px rgba(16, 10, 40, .12); }
.dc-step__b > .dc-fig--shot { margin-top: 16px; margin-bottom: 6px; }

/* tables: scroll sideways inside their frame */
.dc-table { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--paper-2); overscroll-behavior-x: contain; transition: box-shadow .25s; }
.dc-table.is-over:not(.is-end) { box-shadow: inset -28px 0 22px -24px rgba(28, 16, 70, .28); }
.dc-table.is-over:not(.is-start) { box-shadow: inset 28px 0 22px -24px rgba(28, 16, 70, .28); }
.dc-table.is-over:not(.is-start):not(.is-end) { box-shadow: inset -28px 0 22px -24px rgba(28, 16, 70, .28), inset 28px 0 22px -24px rgba(28, 16, 70, .28); }
.dc-table:focus-visible { outline-offset: 2px; }
.dc-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.55; }
.dc-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 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dc-table td { padding: 12px 16px; border-top: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.dc-table tbody tr:first-child td { border-top: 0; }
.dc-table td:first-child { color: var(--ink); }
.dc-table--key td:first-child { white-space: nowrap; }
.dc-table--c3 td, .dc-table--c4 td, .dc-table--c5 td { min-width: 8.5em; }
.dc-table--c3 td:first-child, .dc-table--c4 td:first-child { min-width: 7.5em; }
.dc-plat { display: inline-flex; align-items: center; gap: 10px; }
.dc-plat .ic { width: 16px; height: 16px; flex: none; color: var(--ink); }
/* a swap platform: its logo beside its name (InoAi, Swap) */
.dc-plat--logo { gap: 12px; white-space: nowrap; }
.dc-plat__logo { width: 28px; height: 28px; flex: none; border-radius: 8px; box-shadow: 0 0 0 1px rgba(16,10,40,.08); }
/* two columns: a long word (an address quoted in a sentence) wraps instead of pushing the table sideways; the names of the
   first column break only between words (never "Networ/k name") */
.dc-table--c2 td { overflow-wrap: anywhere; }
.dc-table--c2 td:first-child { overflow-wrap: normal; word-break: normal; hyphens: none; }
/* a grid of figures (impermanent loss): no minimum width, figures aligned, so it fits a phone without scrolling */
.dc-table--num td, .dc-table--num td:first-child { min-width: 0; font-variant-numeric: tabular-nums; }
.dc-table--num td:first-child { white-space: nowrap; }
.dc-table--num th { white-space: normal; vertical-align: bottom; }
/* a list of addresses (tokens): the names may take two lines, so the address and its copy button keep one line */
.dc-table--stack.dc-table--key td:first-child { white-space: normal; }
/* a row with a full address (the pools): the address keeps one line and its copy button, links below it */
.dc-table--stack td .dc-addr { flex-wrap: nowrap; }
.dc-table--stack td .dc-addr + br + a { display: inline-block; margin-top: 6px; }
.dc-table--stack td .dc-addr code { word-break: normal; overflow-wrap: normal; white-space: nowrap; }

/* hints: the site's .note, in four tones */
.dc-hint { align-items: flex-start; gap: 13px; padding: 16px 20px 16px 16px; border-radius: 16px; font-size: 15px; line-height: 1.62; border: 1px solid rgba(122,90,248,.16); }
.dc-hint > .ic { width: 20px; height: 20px; margin-top: 2px; flex: none; color: var(--violet-3); }
.dc-hint__b { min-width: 0; }
.dc-hint__b > * + * { margin-top: 8px; }
.dc-hint strong { color: inherit; }
.dc-body .dc-hint a:not(.btn) { color: inherit; font-weight: 600; }
.dc-hint--success { background: var(--ok-soft); color: #0E5C3C; border-color: rgba(22,163,106,.2); }
.dc-hint--success > .ic { color: #16A36A; }
.dc-hint--warning { background: var(--warn-soft); color: #6B4A05; border-color: rgba(201,138,11,.22); }
.dc-hint--warning > .ic { color: #B87A07; }
.dc-hint--danger { background: var(--bad-soft); color: #7F1D2B; border-color: rgba(214,59,79,.2); }
.dc-hint--danger > .ic { color: #D63B4F; }
.dc-body > .dc-hint { margin-top: 26px; }

/* steps */
.dc-steps { list-style: none; padding: 0; margin: 0; display: grid; }
.dc-body > .dc-steps { margin-top: 24px; }
.dc-step { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 18px; padding-bottom: 26px; }
.dc-step:last-child { padding-bottom: 0; }
.dc-step:not(:last-child)::after { content: ""; position: absolute; left: 20.5px; top: 52px; bottom: 8px; width: 1px; background: repeating-linear-gradient(180deg, var(--line-2) 0 5px, transparent 5px 10px); }
.dc-step__n { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; font: 600 15px/1 var(--f-display); font-variant-numeric: tabular-nums;
  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); }
.dc-step:last-child .dc-step__n { background: linear-gradient(160deg, #8A6CFF, #5E3FE6); }
.dc-step__c { min-width: 0; padding-top: 8px; }
.dc-step__t { font-size: 17.5px; line-height: 1.3; letter-spacing: -.016em; margin-top: calc(1px - var(--gt-t)); scroll-margin-top: calc(var(--header-h) + 16px); }
.dc-step__b { margin-top: 6px; font-size: 15.5px; line-height: 1.68; }
.dc-step__b > * + * { margin-top: 10px; }

/* tabs (the site's segmented control) */
.dc-body > .dc-tabs { margin-top: 22px; }
.dc-tabs__bar { margin-bottom: 14px; }
.dc-tabs__bar .dc-tab { height: 38px; padding: 0 16px; }
.dc-tabs__bar .dc-tab:not(.is-on):hover { color: var(--ink); }
.dc-tabs__p > * + * { margin-top: 14px; }
.dc-tabs__p:focus-visible { outline-offset: 4px; }

/* columns */
.dc-cols { display: grid; grid-template-columns: var(--cols); gap: 28px; align-items: center; }
.dc-col { min-width: 0; }
.dc-col > * + * { margin-top: 14px; }

/* details (the site's .acc) */
.dc-body > .acc { margin-top: 20px; }
.dc-acc summary { min-height: 56px; padding: 14px 2px; font-size: 17px; }
.dc-acc summary > span { color: var(--ink); }
.dc-acc .acc__body { padding: 0 2px 20px; font-size: 15.5px; }
.dc-acc .acc__body > * + * { margin-top: 10px; }

/* buttons: a long label wraps inside the column instead of pushing the page sideways */
.dc-body > .dc-btns { margin-top: 24px; }
.dc-btn .ic { width: 17px; height: 17px; flex: none; }
.dc-body .dc-btn { max-width: 100%; height: auto; min-height: var(--bh); padding-block: 10px; white-space: normal; text-align: left; }

/* cards */
.dc-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); }
.dc-body > .dc-cards { margin-top: 20px; }
.dc-cards--cover { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dc-cards--icon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dc-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 18px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); color: inherit; min-width: 0;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s, background .3s; }
.dc-card--link:hover { transform: translateY(-3px); background: var(--paper-2); border-color: var(--line-2); box-shadow: var(--shadow-3); }
.dc-card__cover { display: block; margin: -8px -8px 10px; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: #140F22; box-shadow: 0 0 0 1px rgba(16,10,40,.05); }
.dc-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.dc-card--link:hover .dc-card__cover img { transform: scale(1.03); }
.dc-card__ic { width: 40px; height: 40px; margin-bottom: 8px; border-radius: 12px; 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); }
.dc-card__ic .ic { width: 19px; height: 19px; stroke-width: 1.7; }
.dc-card__t { font: 600 16px/1.3 var(--f-display); letter-spacing: -.014em; color: var(--ink); }
.dc-card__x { font-size: 14px; line-height: 1.55; color: var(--ink-3); }
.dc-card__go { margin-top: auto; padding-top: 10px; color: var(--ink); }
.dc-card__go .ic { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.dc-card--link:hover .dc-card__go .ic { transform: translateX(4px); }
.dc-card__m { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; }
.dc-card__m > span:first-child:not(.dc-card__host) { font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.dc-card__host { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; color: var(--ink-2); overflow-wrap: anywhere; }
.dc-card__host .ic { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.dc-card--link:hover .dc-card__host .ic { transform: translate(2px, -2px); }

/* ---------- previous / next ---------- */
.dc-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.dc-pn { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-height: 104px; padding: 18px 22px 18px; border-radius: 24px; background: var(--paper-2); border: 1px solid var(--line);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; }
.dc-pn:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow-3); }
.dc-pn--next { grid-column: 2; align-items: flex-end; text-align: right; }
.dc-pn__dir { display: inline-flex; align-items: center; gap: 8px; font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.dc-pn__dir .ic { width: 15px; height: 15px; color: var(--ink); transition: transform .3s var(--ease); }
.dc-pn--prev:hover .dc-pn__dir .ic { transform: translateX(-4px); }
.dc-pn--next:hover .dc-pn__dir .ic { transform: translateX(4px); }
.dc-pn b { margin-top: auto; font: 600 17.5px/1.25 var(--f-display); letter-spacing: -.016em; color: var(--ink); }
.dc-pn__sec { font-size: 13px; color: var(--ink-3); }

/* ---------- right: on this page (the legal contents list) ---------- */
.dc-toc { position: sticky; top: calc(var(--header-h) + 24px); min-width: 0; }
.dc-toc__in { display: flex; flex-direction: column; max-height: calc(100vh - var(--header-h) - 48px); padding: 4px 0; }
.dc-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 12px 18px; }
.dc-toc__scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; }
.dc-toc__scroll::-webkit-scrollbar { display: none; }
.dc-toc__scroll.is-clipped { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent); }
.dc-toc__scroll.is-clipped.is-scrolled { -webkit-mask-image: linear-gradient(180deg, transparent, #000 20px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(180deg, transparent, #000 20px, #000 calc(100% - 36px), transparent); }
.dc-toc__scroll.is-scrolled:not(.is-clipped) { -webkit-mask-image: linear-gradient(180deg, transparent, #000 20px); mask-image: linear-gradient(180deg, transparent, #000 20px); }
.dc-toc__nav { position: relative; }
.dc-toc__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.dc-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); }
.dc-toc__list { list-style: none; padding: 0; margin: 0; }
.dc-toc__list a { display: block; padding: 5px 4px 5px 18px; font-size: 13.5px; line-height: 1.42; color: var(--ink-3); transition: color .2s; }
.dc-toc__list .dc-toc__l3 a { padding-left: 30px; font-size: 13px; }
.dc-toc__list a:hover, .dc-toc__list a.is-read { color: var(--ink-2); }
.dc-toc__list a.is-on { color: var(--ink); font-weight: 500; }
.dc-toc__foot { flex: none; display: flex; flex-direction: column; align-items: flex-start; margin: 12px 0 0 18px; padding-top: 6px; border-top: 1px solid var(--line); }
.dc-toc__btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; font-size: 13px; font-weight: 500; color: var(--ink-3); white-space: nowrap; transition: color .2s; }
.dc-toc__btn .ic { width: 15px; height: 15px; }
.dc-toc__btn:hover { color: var(--violet-3); }

/* ---------- phones and tablets: floating menu bar + sheet (the legal page's dock) ---------- */
.dc-dock { position: fixed; z-index: 90; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 8px; width: min(460px, calc(100vw - 24px));
  transform: translate(-50%, 28px); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease), transform .5s var(--ease-out); }
.dc-dock[hidden] { display: none; }
.dc-dock.in { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
body:has(#cookie.in:not([hidden])) .dc-dock.in, body.menu-open .dc-dock.in { opacity: 0; pointer-events: none; transform: translate(-50%, 28px); }
.dc-dock__menu, .dc-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); }
.dc-dock__menu { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0 18px 0 9px; border-radius: 999px; text-align: left; }
.dc-dock__menu > .ic { width: 18px; height: 18px; opacity: .7; flex: none; }
.dc-dock__ic { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); }
.dc-dock__ic .ic { width: 18px; height: 18px; }
.dc-dock__top { width: 58px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.dc-dock__top .ic { width: 19px; height: 19px; }
.dc-dock__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.dc-dock__txt small { font: 500 10px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--snow-3); }
.dc-dock__txt b { font-size: 14.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-sheet { position: fixed; inset: 0; z-index: 120; }
.dc-sheet[hidden] { display: none; }
.dc-sheet__scrim { position: absolute; inset: 0; background: rgba(5, 3, 9, .5); opacity: 0; transition: opacity .3s var(--ease); }
.dc-sheet.in .dc-sheet__scrim { opacity: 1; }
.dc-sheet__panel { position: absolute; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-height: min(82vh, 740px); display: flex; flex-direction: column; overflow: hidden;
  border-radius: 28px; padding: 6px 10px 0; 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); }
.dc-sheet.in .dc-sheet__panel { transform: none; opacity: 1; }
@media (min-width: 700px) { .dc-sheet__panel { left: 50%; right: auto; width: 560px; margin-left: -280px; } }
.dc-sheet__top { flex: none; }
.dc-sheet__scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-bottom: 12px; border-top: 1px solid rgba(255,255,255,.07); padding-top: 14px; }
.dc-sheet__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0 8px; }
.dc-sheet__head .dc-guide { flex: 1; min-width: 0; }
.dc-sheet__head .dc-guide b { color: var(--snow); }
.dc-sheet__head .dc-guide small { color: var(--snow-3); }
.dc-sheet__head .dc-guide:hover, .dc-sheet__head .dc-guide.is-on { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); box-shadow: none; }
.dc-sheet__x { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.07); }
.dc-sheet__x .ic { width: 18px; height: 18px; }
.dc-sheet .dc-search { margin: 4px 4px 14px; }
.dc-sheet .dc-search__box { height: 48px; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.dc-sheet .dc-search__box:focus-within { border-color: var(--violet-2); box-shadow: 0 0 0 4px rgba(122,90,248,.22); }
.dc-sheet .dc-search__box > .ic { color: var(--snow-3); }
.dc-sheet .dc-search input { font-size: 16px; color: var(--snow); }
.dc-sheet .dc-search input::placeholder { color: var(--snow-4); }
.dc-sheet .dc-search__kbd { display: none; }
.dc-sheet.is-searching .dc-sheet__scroll { display: none; }
.dc-sheet__scroll { -webkit-mask-image: linear-gradient(180deg, transparent, #000 14px); mask-image: linear-gradient(180deg, transparent, #000 14px); }
.dc-sheet .dc-results { position: static; width: auto; max-height: min(60vh, 560px); margin: 8px 0 12px; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); box-shadow: none; }
.dc-sheet .dc-results__list a { min-height: 44px; }
.dc-sheet .dc-results__list a.is-on { background: rgba(255,255,255,.07); }
.dc-sheet .dc-res__t { color: var(--snow); }
.dc-sheet .dc-res__s, .dc-sheet .dc-res__x, .dc-sheet .dc-results__none { color: var(--snow-3); }
.dc-sheet .dc-results mark { background: rgba(122,90,248,.28); color: #fff; }
.dc-nav--sheet { padding: 0 4px 4px; }
.dc-nav--sheet .dc-nav__label { color: var(--snow-4); margin-left: 16px; }
.dc-nav--sheet .dc-nav__list { border-left-color: rgba(255,255,255,.12); }
.dc-nav--sheet .dc-nav__list a { display: flex; align-items: center; min-height: 46px; padding: 8px 12px 8px 16px; font-size: 15.5px; color: var(--snow-2); }
.dc-nav--sheet .dc-nav__list a::before { top: 10px; bottom: 10px; }
.dc-nav--sheet .dc-nav__list a:hover { color: #fff; }
.dc-nav--sheet .dc-nav__list a.is-on { color: #fff; background: linear-gradient(90deg, rgba(255,255,255,.07), transparent); border-radius: 0 14px 14px 0; }
.dc-nav--sheet .dc-nav__ic { color: var(--snow-3); }
.dc-nav--sheet .dc-nav__list a:hover .dc-nav__ic { color: #fff; }
.dc-nav--sheet .dc-nav__list a.is-on .dc-nav__ic { color: var(--violet-2); }
html.dc-lock, html.dc-lock body { overflow: hidden; }

/* ---------- from one page to another: the sidebar stays, the page rises in ---------- */
.dc.is-swap .dc-hero__text > * { animation: dc-up .5s var(--ease-out) backwards; }
.dc.is-swap .dc-hero__text > :nth-child(2) { animation-delay: .04s; }
.dc.is-swap .dc-hero__text > :nth-child(n+3) { animation-delay: .08s; }
.dc.is-swap .dc-idc__in { animation: dc-in .4s var(--ease) backwards; }
.dc.is-swap .dc-center, .dc.is-swap .dc-toc { animation: dc-in .3s var(--ease) backwards; }
@keyframes dc-up { from { opacity: 0; transform: translateY(12px); } }
@keyframes dc-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dc-idc__in, .dc.is-swap .dc-hero__text > *, .dc.is-swap .dc-center, .dc.is-swap .dc-toc { animation: none !important; } }

/* ---------- responsive ---------- */
@media (min-width: 1024px) { .dc-dock, .dc-sheet { display: none !important; } }
@media (max-width: 1199px) {
  .dc-layout { grid-template-columns: var(--dc-side) minmax(0, 1fr); }
  .dc-toc { display: none; }
  .dc-otp { display: block; }
}
@media (max-width: 1023px) {
  .dc-layout { grid-template-columns: minmax(0, 1fr); }
  .dc-side { display: none; }
  .dc-main { padding-bottom: 120px; }
  .dc-anchor { display: none; }
}
@media (max-width: 980px) {
  .dc-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .dc-idc { display: none; }
  .dc-hero__meta { display: flex; }
}
@media (max-width: 720px) {
  .dc-hero { padding: calc(var(--header-h) + 36px) 0 40px; }
  .dc-hero__text { gap: 16px; }
  .dc-h1 { font-size: clamp(34px, 9.8vw, 46px); max-width: none; }
  .dc-lead { font-size: 16.5px; }
  .dc-main { padding-top: 24px; }
  .dc-doc { padding: 0; margin-inline: -8px; background: none; border: 0; box-shadow: none; }
  .dc-doc > .bezel__in { padding: 22px 18px 28px; border-radius: 22px; }
  .dc-body { font-size: 15.5px; line-height: 1.72; }
  .dc-body > .dc-h2 { margin-top: calc(40px - var(--gt-t)); font-size: 22px; }
  .dc-body > .dc-h3 { margin-top: calc(30px - var(--gt-t)); font-size: 18px; }
  .dc-body ul > li { padding-left: 20px; }
  .dc-body ul > li::before { top: 12px; }
  .dc-fig img { border-radius: 14px; }
  .dc-table { margin-inline: -4px; border-radius: 14px; }
  .dc-table table { font-size: 14px; }
  .dc-table th, .dc-table td { padding: 11px 13px; }
  .dc-table--c3 td { min-width: 6.4em; }
  .dc-table--c3 td:first-child { min-width: 0; }
  /* a table inside a step (network settings): the names may take two lines, so the values keep their width */
  .dc-step .dc-table--key td:first-child { white-space: normal; }
  .dc-cards--cover, .dc-cards--icon { grid-template-columns: minmax(0, 1fr); }
  .dc-card { padding: 16px; }
  /* cover cards become a list: the picture as a thumbnail, the text beside it */
  .dc-cards--cover { gap: 10px; }
  .dc-cards--cover .dc-card { display: grid; grid-template-columns: 116px minmax(0, 1fr) 18px; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 18px; }
  .dc-cards--cover .dc-card__cover { grid-row: 1 / span 2; margin: 0; border-radius: 11px; }
  .dc-cards--cover .dc-card__t { align-self: end; font-size: 15.5px; }
  .dc-cards--cover .dc-card__x { grid-column: 2; align-self: start; font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .dc-cards--cover .dc-card__go { grid-column: 3; grid-row: 1 / span 2; margin: 0; padding: 0; }
  .dc-cards--icon .dc-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 3px; align-items: start; }
  .dc-cards--icon .dc-card__ic { grid-row: span 2; margin: 0; }
  .dc-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .dc-cols .dc-fig--sm img { width: 112px !important; }
  .dc-hint { padding: 14px 16px 14px 14px; font-size: 14.5px; gap: 11px; }
  .dc-step { grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px; }
  .dc-step__n { width: 38px; height: 38px; border-radius: 12px; font-size: 14px; }
  .dc-step:not(:last-child)::after { left: 18.5px; top: 48px; }
  .dc-step__c { padding-top: 6px; }
  .dc-step__t { font-size: 16.5px; }
  .dc-step__b { font-size: 14.5px; }
  .dc-code { padding: 10px 10px 10px 14px; }
  .dc-code pre { font-size: 13px; }
  .dc-tabs__bar { display: flex; width: 100%; }
  .dc-tabs__bar .dc-tab { flex: 1; justify-content: center; height: 40px; padding: 0 10px; }
  .dc-acc summary { font-size: 16px; }
  .dc-btns .btn { flex: 1 1 auto; }
  .dc-pager { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .dc-pn { min-height: 0; padding: 16px 18px; border-radius: 20px; }
  .dc-pn--next { grid-column: 1; }
  .dc-pn b { font-size: 16.5px; }
}

/* ---------- dark mode (paper sections become night: tokens remapped, a few fixed colours follow) ---------- */
.dc-main[data-was] { --violet-3: #A690FF; }
[data-was] .dc-hint { border-color: rgba(255,255,255,.08); }
[data-was] .dc-hint--info { color: #D9CFFF; }
[data-was] .dc-hint--success { color: #9BE9C2; }
[data-was] .dc-hint--warning { color: #F5D38A; }
[data-was] .dc-hint--danger { color: #FFB3BE; }
[data-was] .dc-hint--success > .ic { color: #6FE3AE; }
[data-was] .dc-hint--warning > .ic { color: #F2B84B; }
[data-was] .dc-hint--danger > .ic { color: #FF8A9B; }
[data-was] .dc-step__n, [data-was] .dc-card__ic { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(255,255,255,.08); }
[data-was] .dc-copy:hover { color: #0A0A0F; background: #fff; border-color: #fff; }
[data-was] .dc-fig img, [data-was] .dc-card__cover { box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
[data-was] .dc-results__list a.is-on, [data-was] .dc-guide:hover, [data-was] .dc-guide.is-on { background: rgba(255,255,255,.06); }
[data-was] .dc-results mark { color: #fff; background: rgba(122,90,248,.3); }

@media (max-width: 600px) {
  /* a table of sentences (Risks): each row stacked, its name above its text, instead of a narrow column of words */
  .dc-table--prose thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dc-table--prose, .dc-table--prose tbody, .dc-table--prose tr, .dc-table--prose td { display: block; width: auto; }
  .dc-table--prose tr + tr { border-top: 1px solid var(--line); }
  .dc-table .dc-table--prose td { border-top: 0; }
  .dc-table .dc-table--prose td:first-child { white-space: normal; padding: 13px 14px 2px; }
  .dc-table .dc-table--prose td + td { padding: 0 14px 13px; }
  /* a table with full addresses (pools, tokens): the same stacking; the address wraps inside the width of the screen,
     its copy button beside it, and with three columns or more each value comes under the name of its column */
  .dc-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dc-table--stack, .dc-table--stack tbody, .dc-table--stack tr, .dc-table--stack td { display: block; width: auto; min-width: 0 !important; }
  .dc-table--stack tr + tr { border-top: 1px solid var(--line); }
  .dc-table .dc-table--stack td { border-top: 0; padding: 0 14px 12px; }
  .dc-table .dc-table--stack td:first-child { white-space: normal; padding: 13px 14px 6px; }
  .dc-table--stack td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 500 10px/1.5 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
  .dc-table--stack td .dc-addr code { white-space: normal; word-break: break-all; }
  /* the grid of figures: headers may take two lines, the columns stay narrow */
  .dc-table--num th { white-space: normal; vertical-align: bottom; }
  .dc-table .dc-table--num th, .dc-table .dc-table--num td { padding-inline: 10px; }
}
@media (max-width: 400px) {
  /* a setting and its value with an address to copy (the Cronos network): each row stacked, name above value */
  .dc-table--kv thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dc-table--kv, .dc-table--kv tbody, .dc-table--kv tr, .dc-table--kv td { display: block; width: auto; min-width: 0 !important; }
  .dc-table--kv tr + tr { border-top: 1px solid var(--line); }
  .dc-table .dc-table--kv td { border-top: 0; padding: 0 14px 11px; }
  .dc-table .dc-table--kv td:first-child { white-space: normal; padding: 11px 14px 2px; font-size: 12.5px; color: var(--ink-3); }
  /* the other two-column tables: their names may take two lines (between words) so the values keep their width */
  .dc-table--c2.dc-table--key td:first-child { white-space: normal; }
  /* the grid of figures: narrower cells */
  .dc-table .dc-table--num th, .dc-table .dc-table--num td { padding-inline: 8px; }
  .dc-table--num table, .dc-table .dc-table--num { font-size: 13.5px; }
}
/* phones and tablets: the INO chat bubble rises above the docs dock while the dock is shown (both sat bottom right) */
@media (max-width: 1023px) {
  body:has(.dc-dock) .ino-widget { transition: bottom .35s var(--ease); }
  body:has(.dc-dock.in) .ino-widget { bottom: calc(14px + 58px + 12px + env(safe-area-inset-bottom, 0px)); }
}
@media print {
  .dc-side, .dc-toc, .dc-pager, .dc-dock, .dc-sheet, .dc-anchor, .dc-copy, .dc-idc, .dc-hero .bg-beam, .dc-otp { display: none !important; }
  .dc-layout { display: block; }
  .dc-hero { padding: 0 0 12px; background: #fff !important; color: #000 !important; }
  .dc-h1 { color: #000 !important; background: none !important; -webkit-text-fill-color: #000; }
  .dc-doc, .dc-doc > .bezel__in { border: 0 !important; box-shadow: none !important; padding: 0 !important; }
  .dc-tabs__p[hidden] { display: block !important; }
}

/* KCB = our diamond (Thomas 30/09), inside the text of the guide */
.dc-kcb { display: inline-grid; place-items: center; width: 1.05em; height: 1.05em; vertical-align: -.16em; color: var(--violet); }
.dc-kcb .ic { width: 100%; height: 100%; }

/* {{add-token}}: "Add INO to my wallet" (the site's .btn) and its message when this browser has no wallet */
.dc-body > .dc-addtok-p { margin-top: 22px; }
.dc-step__b > .dc-addtok-p { margin-top: 14px; }
.dc-addtok { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 100%; vertical-align: middle; }
.dc-addtok__btn[aria-busy="true"] { opacity: .72; pointer-events: none; }
.dc-addtok__msg { display: block; max-width: 460px; padding: 10px 14px; border-radius: 12px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); background: var(--paper-3); border: 1px solid var(--line); }
.dc-addtok__msg[hidden] { display: none; }

/* ==== 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; }
/* 01/10/2026 — « by KcalbApp » under InoLah as on the banners (Thomas's standard): written as it is (never translated,
   never capitals), aligned on the I (the writing's ink starts .85 % in), at the banners' size (6 % of the word) */
.hm-ino__title { --sigw: clamp(300px, 44vw, 640px); }
.hm-ino__by { align-self: center; box-sizing: border-box; width: var(--sigw); margin: .3em 0 -.22em; padding: 0 .1em .22em calc(var(--sigw) * .0085 - .06em); text-align: left; font-size: calc(var(--sigw) * .06); font-weight: 500; letter-spacing: .01em; }

/* ================= 30/09 evening — the hero on narrow phones (Thomas: « KCALB n'est jamais montré sans LTD ») =================
   Under 430 px the row of the eight brand icons (385 px) was wider than the screen: the hero's single grid column took
   its width, so everything in the hero sat off-centre and was cut on the right (at 320–360 px the LTD of the chrome
   KCALB LTD, the end of « Create · Connect · Evolve » and the last icons were outside the screen). The column now keeps
   the width of the screen, the icons share it (44 px at most, 31 px at 320), and the three words tighten a little. */
@media (max-width: 720px) {
  .hm-hero__in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 430px) {
  .hm-strip__icon { width: min(44px, calc((100vw - 73px) / 8)); height: min(44px, calc((100vw - 73px) / 8)); border-radius: 10px; }
  .hm-strip__icon img { width: 82%; height: 82%; border-radius: 7px; }
}
@media (max-width: 374px) {
  .hm-ccc { padding: 10px 14px; gap: 12px; }
  .hm-ccc li { font-size: 13px; gap: 5px; }
}

/* ==== 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; }
/* the Crypto-Only lockup (symbol + upright wordmark, tools/make-wordmarks.mjs; 30/09: no more italic capitals) */
.nw-house--co .nw-house__word { height: 17px; 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: 17px; 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: 16px; 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 ================= */
/* 29/09 (Thomas): same black and white as the rest of the team; only her framing stays hers */
.pp-person--ai .pp-portrait img, .pp-person--ai:hover .pp-portrait img { 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; }
.rs-feature__col .rs-feature__int .ic { transform: translateX(-4px); } /* pages of this site: the arrow slides right, not up */

/* 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; }
/* the guide cards are dark inside a paper section: their titles take the night gradient, not the paper one (too dark there) */
.rs-feature__title, .rs-doc__name { background-image: var(--grad-title-night); color: #cbd5ff; }
.rs-feature__title, .rs-doc__name { display: flex; align-items: center; flex-wrap: wrap; }
.rs-lk__bar { display: inline-block; width: 2px; height: .72em; margin: 0 .32em; border-radius: 1px; background: #cbd5ff; opacity: .35; flex: none; }
.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); }
/* a guide of this site (InoAi): its pages open here, the arrow points ahead, not out */
.rs-doc__links a[href^="#"]:hover .ic { transform: translateX(3px); }
.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; color: var(--snow); }
.rs-strip__name { display: inline-flex; align-items: center; }
.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; }
/* the docs hub: the title of the rules and the way to them (the rules are on the Stay safe page) */
.rs-safe__in--band { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: clamp(28px, 3.4vw, 44px); border-radius: 28px; background: var(--paper); border: 1px solid var(--line); }
.rs-safe__in--band .rs-safe__head { position: static; }
.rs-safe__in--band .rs-safe__head .t-body { max-width: 620px; }
.rs-safe__act { gap: 12px 20px; justify-content: flex-start; }
.rs-safe__act .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; container-type: inline-size; }
.rs-word img { width: 70%; height: auto; }
/* the lockup: the header's .lockup (src/css/chrome.css) scaled up, every part in the same proportions (Thomas 30/09: « le
   trait est trop petit, pas cohérent avec le header »). 1em here = 1 px of the header lockup: mark 26, gap 12, bar 1 × 20,
   wordmark 16 high, LTD 10.5 (the whole lockup is about 196 wide), so the lockup takes about 76 % of its tile. */
.rs-lock { display: inline-flex; align-items: center; justify-content: center; gap: 12em; font-size: 1.9px; font-size: calc(76cqi / 196); line-height: 1; }
.rs-lock__mark { width: 26em; height: 26em; flex: none; }
.rs-lock__bar { display: block; width: 1em; min-width: .5px; height: 20em; background: currentColor; opacity: .3; flex: none; }
.rs-lock__word { height: 16em; width: auto; flex: none; fill: currentColor; }
.rs-lock__ltd { font-family: var(--f-mono); font-weight: 400; font-size: 10.5em; line-height: 1; letter-spacing: .2em; opacity: .55; margin-left: -.19em; padding-top: .38em; 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; }
/* two rows of one fixed height each (30/09), so every brand panel is the same height: the marks (logo, on dark, on
   light, token, portrait: 3 to 5 tiles), then the wide files (the wordmark and the banner, alone or side by side) */
.rs-specs { display: flex; flex-direction: column; gap: 14px; }
.rs-specs__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 14px; aspect-ratio: 4.6 / 1; min-height: 0; }
.rs-specs__row--wide { aspect-ratio: 5.6 / 1; }
/* five marks (InoAi): narrower tiles, so the note goes under the label */
.rs-specs__row--5 .rs-spec figcaption { flex-direction: column; gap: 3px; }
.rs-specs__row--5 .rs-spec figcaption em { text-align: left; }
.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)); }
/* the wordmark: on dark and on light side by side in one wide tile; the caption's name sits on the dark half, its note
   on the light half; the sizes of the wordmarks: the 30/09 evening section at the end of this file */
.rs-spec--split { grid-template: minmax(0, 1fr) / minmax(0, 1fr) minmax(0, 1fr); place-items: stretch; background: #060409; 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; right: 50%; }
.rs-split__l { position: relative; }
.rs-split__note { position: absolute; right: 16px; top: 14px; left: 16px; font: 500 10.5px/1.3 var(--f-mono); font-style: normal; letter-spacing: .02em; text-align: right; color: #6B6B78; }
.rs-split__d, .rs-split__l { display: grid; place-items: center; padding: 22px 11% 0; }
.rs-split__d { background: #060409; }
.rs-split__l { background: #fff; }
.rs-split__d img, .rs-split__l img { width: 82%; max-width: 220px; max-height: 60%; height: auto; object-fit: contain; }
/* the portrait of INO: round, as on inoai.org */
.rs-spec--face .rs-spec__art { height: 56%; }
.rs-spec--face .rs-spec__art img { border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(255,255,255,.12), 0 22px 40px -16px rgba(0,0,0,.9); }
.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-sws--4 { grid-template-columns: repeat(4, 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 { font-size: calc(90cqi / 196); }
  .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 { gap: 10px; }
  .rs-specs__row, .rs-specs__row--wide { grid-auto-flow: row; 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__row--3 > .rs-spec:first-child, .rs-specs__row--5 > .rs-spec:first-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
  .rs-spec--wide { 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-split__note { display: none; }
  .rs-split__d, .rs-split__l { padding: 20px 9% 0; }
  .rs-split__d img, .rs-split__l img { max-height: 58%; }
  .rs-sws, .rs-sws--3, .rs-sws--4 { 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 ================= */
/* the banner (every brand, 30/09): 3 : 1, as large as its tile allows under the caption */
.rs-spec--banner .rs-spec__art { height: 70%; width: auto; max-width: 88%; aspect-ratio: 3 / 1; margin-top: 20px; }
.rs-spec--banner .rs-spec__art img { border-radius: 12px; object-fit: cover; box-shadow: 0 24px 40px -22px rgba(0,0,0,.9); }
.rs-specs__row--w2 .rs-spec--banner .rs-spec__art { height: auto; width: 84%; max-height: 72%; }
@media (max-width: 720px) { .rs-spec--banner .rs-spec__art { height: auto; width: 88%; margin-top: 22px; } }
/* between phones and wide screens, a caption goes under its label instead of beside it (narrower tiles) */
@media (min-width: 721px) and (max-width: 1180px) {
  .rs-spec figcaption { flex-direction: column; gap: 3px; left: 12px; right: 12px; top: 11px; font-size: 9.5px; }
  .rs-spec figcaption em { text-align: left; }
  .rs-split__note { right: 12px; top: 11px; left: 12px; font-size: 9.5px; }
}
/* the wordmark tile (30/09): each half says its own colours, the dark file's under the label, the light file's on the light
   half, on every screen; the caption of the dark half stays on the dark half */
.rs-spec--split figcaption { right: calc(50% + 16px); }
/* one colour per line (30/09: no caption ends a line on a lone « · »); a colour longer than a narrow half (a long
   translated name) wraps inside itself instead of running out of the tile */
.rs-spec--split figcaption em > span, .rs-split__note > span { display: block; }
.rs-note__to { font-style: normal; }
@media (max-width: 1180px) {
  .rs-spec--split figcaption { right: calc(50% + 12px); }
  .rs-split__note { display: block; left: 12px; right: 12px; top: 26px; font-size: 9.5px; text-align: left; }
}

/* 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; }

/* ================= 30/09 evening — the wordmarks of every brand ================= */
/* One capital height for every brand (Thomas: « pourquoi InoAi énorme et les autres petits ? pas standard »). The tile is
   the container: the wide row always holds the wordmark and the banner, so the tile has the same width for every brand,
   and --cap follows it. --cap is set for the longest name, Crypto-Only (8.05 capital heights wide), to fill its half
   between the 8 % margins (42 % of the tile); the other names are shorter at the same height. Each file's height is
   --cap × H / 700 (--wh, written by resources.js from the file's viewBox), and --wdy puts its capitals in the middle of
   the half (a p or a y below the line does not lift the name). InoLah's wordmark is its handwritten signature: its file
   is drawn in the same units, as big as it needs to weigh as much as the other names, and centred (resources.js). */
.rs-spec--word { container-type: inline-size; }
.rs-spec--word :is(.rs-split__d, .rs-split__l) { padding: 22px 8% 0; }
.rs-spec--word :is(.rs-split__d, .rs-split__l) img { --cap: min(36px, 5.1cqi); width: auto; max-width: none; height: calc(var(--cap) * var(--wh)); max-height: none; object-fit: contain; transform: translateY(calc(var(--cap) * var(--wdy))); }
/* phones: the two halves one above the other, each the whole width of the tile */
@media (max-width: 720px) {
  .rs-spec--word { grid-column: 1 / -1; aspect-ratio: auto; grid-template: auto auto / minmax(0, 1fr); }
  .rs-spec--word figcaption { right: 12px; }
  .rs-spec--word :is(.rs-split__d, .rs-split__l) { min-height: 122px; padding: 58px 8% 14px; } /* the label + two lines of colours */
  .rs-spec--word .rs-split__note { top: 11px; }
  .rs-spec--word :is(.rs-split__d, .rs-split__l) img { --cap: min(34px, 10.4cqi); }
}
/* small tablets: a long colour name (French, German…) takes two lines in a narrow half; the file sits lower so that the
   list of colours never touches it */
@media (min-width: 721px) and (max-width: 900px) {
  .rs-spec--word :is(.rs-split__d, .rs-split__l) { padding-top: 44px; }
}
/* four colours (InoLah) on a laptop or a tablet: the RGB line stays on one line down to 900 px */
@media (min-width: 900px) and (max-width: 1180px) {
  .rs-sws--4 .rs-sw__meta { gap: 6px; padding-left: 14px; }
  .rs-sws--4 .rs-sw__meta span { white-space: nowrap; font-size: 10.5px; letter-spacing: -.01em; }
}

/* ================= 30/09 evening — Kcalb Ltd: KCALB is never shown without LTD (Thomas) ================= */
/* the wordmark files carry the LTD of the header lockup (assets/brand/kcalb-ltd/wordmark-ltd-*.svg, drawn by
   tools/make-kcalb-ltd-wordmark.mjs); their ink (KCALB LTD, 95 % of the file) takes 76 % of the tile, as the lockup beside
   them does (.rs-lock), 90 % on phones; the hero's plate keeps the chrome KCALB about as large as before */
.rs-word img.rs-word__ltd { width: 80%; }
.rs-plate__word img { width: 68%; }
@media (max-width: 720px) { .rs-word img.rs-word__ltd { width: 94%; } }