:root {
  /* THE BAND PALETTE (M6a). The Home is one fixed composition whatever the theme (ruling H2-7): a black stage, a white
     month, black bands. So its colours are literals, not the theme-following --h-* names; each literal is the value of
     the Halo token named beside it, in the theme named. */
  --hb-stage: #000000;            /* --h-stage (light) */
  --hb-on-stage: #FFFFFF;         /* --h-on-stage (light) */
  --hb-on-stage-2: #C9CED6;       /* --h-on-stage-2 (light) */
  --hb-paper: #FFFFFF;            /* --h-canvas (light) */
  --hb-ink: #0B0C0F;              /* --h-text (light) */
  --hb-ink-2: #5E6571;            /* --h-text-2 (light) */
  --hb-line-light: #E6E8EB;       /* --h-line (light) */
  --hb-accent: #0369A1;           /* --h-accent (light): the blue on white */
  --hb-accent-hover: #025A8A;     /* --h-accent-hover (light) */
  --hb-accent-dark: #3CD6FF;      /* --h-accent (dark): the blue on black */
  --hb-accent-dark-hover: #6BE0FF; /* --h-accent-hover (dark); the prototype's #7DE6FF is no token */
  --hb-brand: #F26A10;            /* --h-brand (light): the story ring, the timer, the finding dot */
  --hb-up: #047857;               /* --h-up (light) */
  --hb-down: #C81E3A;             /* --h-down (light) */
  --hb-up-on-dark: #4ADE9F;       /* --h-up (dark) */
  --hb-down-on-dark: #FF8A93;     /* --h-down (dark) */
  --hb-panel: #0B0C0F;            /* --h-text (light): the flat month's dark panel (P:225) */
  --hb-panel-line: #242A31;       /* --h-line (dark); the prototype's #1F2228 is no token */
  --hb-ink-hover: #22282F;        /* --h-fill (dark); the prototype's #2A2D33 is no token */
  --hb-line-dark: rgba(255,255,255,.14);
  --hb-font: "TC Vazirmatn", "TC Inter", system-ui, sans-serif;
  --hb-font-latin: "TC Inter", "TC Vazirmatn", system-ui, sans-serif;
  --hb-font-num: "TC Inter", "TC Vazirmatn", system-ui, sans-serif;
  color-scheme: dark;
}

/* kg-home-3d.css — the 3D Home (release 2.3.6 Task 6): the approved prototype's sheet
   (docs/superpowers/specs/ui-rebuild/mockups/home-3d-2026-10-28/kurdography-home-3d.html, P:6-322) ported to the site:
   logical properties, the band palette above, the self-hosted TC faces, Halo's type floors (weights 400/500/600,
   nothing under 12px) and its one blur, the glass month (.mo-panel.glass, the owner's exception). It replaces every
   sheet the old Home loaded but fonts.css and kg-tokens.css; the sponsor's slot is kg-home-sponsor.css and the support
   band will be kg-home-support.css (H2-35). */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--hb-stage); }
html:lang(en), html:lang(ku) { --hb-font: "TC Inter", "TC Vazirmatn", system-ui, sans-serif; }
body { margin: 0; background: var(--hb-stage); color: var(--hb-on-stage); font: 400 16px/1.55 var(--hb-font); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, p { margin: 0; }
:focus-visible { outline: 2px solid var(--hb-accent-dark); outline-offset: 3px; }
.band.light :focus-visible { outline-color: var(--hb-accent); }
.wrap { inline-size: 100%; max-inline-size: 1280px; margin-inline: auto; padding-inline: max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }
.num { font-family: var(--hb-font-num); font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ico { inline-size: 22px; block-size: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.skip { position: absolute; inset-block-start: -64px; inset-inline-start: 8px; z-index: 20; padding: 10px 16px; border-radius: 999px; background: var(--hb-accent-dark); color: var(--hb-ink); font-weight: 600; text-decoration: none; }
.skip:focus { inset-block-start: 8px; }
/* an anchor of the bar lands under the sticky bar, not behind it */
main > section { scroll-margin-block-start: 64px; }

/* the top bar: black, sticky, no theme key (H2-7); the four-language key drawn as the prototype's quiet key */
body::before { content: ""; position: fixed; inset: 0 0 auto; block-size: env(safe-area-inset-top, 0px); z-index: 10; background: var(--hb-stage); }
.top { position: sticky; inset-block-start: env(safe-area-inset-top, 0px); z-index: 5; background: var(--hb-stage); color: var(--hb-on-stage); border-block-end: 1px solid var(--hb-line-dark); color-scheme: dark; }
.top .wrap { display: flex; align-items: center; gap: 24px; min-block-size: 64px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 600 20px/1 var(--hb-font); white-space: nowrap; }
.brand-mark { inline-size: 36px; block-size: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--hb-stage); box-shadow: 0 0 0 2px var(--hb-brand); font: 600 18px/1 "TC Vazirmatn", sans-serif; flex: none; }
.nav { display: flex; gap: 24px; margin-inline-start: 16px; }
.nav a { text-decoration: none; color: var(--hb-on-stage-2); font-weight: 500; font-size: 15px; }
.nav a:hover { color: var(--hb-on-stage); }
.top-end { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 44px; padding-inline: 20px; border-radius: 999px; border: 1px solid transparent; font: 500 15px/1 var(--hb-font); text-decoration: none; cursor: pointer; background: none; color: inherit; white-space: nowrap; }
.btn-primary { background: var(--hb-accent-dark); color: var(--hb-ink); }
.btn-primary:hover { background: var(--hb-accent-dark-hover); }
.btn-ghost { border-color: rgba(255,255,255,.32); }
.btn-ghost:hover { border-color: var(--hb-on-stage); }
.btn-quiet { color: var(--hb-on-stage-2); padding-inline: 12px; }
.btn-quiet:hover { color: var(--hb-on-stage); }
.lang-key { position: relative; display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; padding-inline: 12px; border-radius: 999px; color: var(--hb-on-stage-2); cursor: pointer; }
.lang-key:hover, .lang-key:focus-within { color: var(--hb-on-stage); }
.lang-key:focus-within { outline: 2px solid var(--hb-accent-dark); outline-offset: 3px; }
.lang-key .ico { inline-size: 20px; block-size: 20px; }
.lang-key select { appearance: none; -webkit-appearance: none; max-inline-size: 9em; min-block-size: 40px; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: 500 15px/1 var(--hb-font); text-overflow: ellipsis; cursor: pointer; }
.lang-key select:focus-visible { outline: none; }
.lang-key option { color: var(--hb-ink); background: var(--hb-paper); }
.lang-code { display: none; font: 500 15px/1 var(--hb-font-latin); }

/* the hero: the WebGL canvas behind, the copy at the start side, the stage column with the keys */
.hero { position: relative; background: var(--hb-stage); color: var(--hb-on-stage); overflow: hidden; isolation: isolate; color-scheme: dark; }
#gl { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; z-index: 0; touch-action: pan-y; cursor: grab; }
#gl:active { cursor: grabbing; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(320px, 440px) minmax(0, 1fr); min-block-size: clamp(660px, calc(100svh - 180px), 900px); padding-block: 16px 32px; pointer-events: none; }
.hero-grid a, .hero-grid button { pointer-events: auto; }
/* 2.3.9: the copy hangs from the top of its row. The taller stage leaves the grid free space, and a centred copy moved
   whenever a later row (the still row's price pills) grew. */
.copy { align-self: start; padding-block-start: clamp(8px, 4vh, 40px); display: grid; gap: 24px; position: relative; }
.copy h1 { font-weight: 600; font-size: clamp(38px, 3.8vw, 54px); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
html:lang(ckb) .copy h1, html:lang(ar) .copy h1 { letter-spacing: 0; line-height: 1.25; }
.copy h1 span { display: block; }
.copy h1 span + span { color: var(--hb-on-stage-2); }
/* The support launcher sits at the end-side corner of the first screen: the headline's first line stays clear of it. */
@media (max-width: 640px) { .copy h1 { padding-inline-end: 64px; } }
.lede { color: var(--hb-on-stage-2); font-size: 17px; max-inline-size: 40ch; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.sections { list-style: none; margin: 16px 0 0; padding: 16px 0 0; display: grid; gap: 4px; border-block-start: 1px solid var(--hb-line-dark); }
.sections button { inline-size: 100%; display: flex; align-items: center; gap: 12px; min-block-size: 40px; padding: 4px 0; border: 0; background: none; color: var(--hb-on-stage-2); font: 500 16px/1.3 var(--hb-font); text-align: start; cursor: pointer; }
.sections button::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); flex: none; transition: background .3s, border-color .3s, box-shadow .3s; }
.sections button[aria-current="true"] { color: var(--hb-on-stage); }
.sections button[aria-current="true"]::before { background: var(--hb-brand); border-color: var(--hb-brand); box-shadow: 0 0 0 4px rgba(242,106,16,.22); }
.sections button:hover { color: var(--hb-on-stage); }
.stage-col { position: relative; min-block-size: 0; min-inline-size: 0; }

/* the active card's words, laid over the card on the box home-3d.js publishes (H2-28) */
.card-words { position: absolute; left: 0; top: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 32px; pointer-events: none; opacity: calc(1 - var(--pull, 0) * 2.2); transition: opacity .35s ease; }
.card-words.is-out { opacity: 0; }
/* hotfix 3: held out of sight (visibility, so nothing moves) while the words change places from the still row to the card */
.card-words.is-held { visibility: hidden; }
/* the key's text arrives with setCardWords(); until then it is not an empty cyan pill */
#cardLink:empty, #cardLink2:empty { visibility: hidden; }

/* hotfix 3: a non-English visitor's first frame (theme-boot.js sets html.kg-i18n-pending, home.js clears it once the
   words are in). The English text the file ships is not painted laid out for another direction. visibility, never display,
   so nothing moves when the page shows. The 3 s animation is the failsafe: a page whose script never runs shows itself. */
html.kg-i18n-pending #main, html.kg-i18n-pending .top [data-i18n], html.kg-i18n-pending .site-foot {
  visibility: hidden; animation: kg-i18n-failsafe 0s linear 3s forwards;
}
@keyframes kg-i18n-failsafe { to { visibility: visible; } }
.card-words h2 { font-weight: 600; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.card-words h2.long { font-size: clamp(26px, 2.6vw, 36px); }
html:lang(ckb) .card-words h2, html:lang(ar) .card-words h2 { letter-spacing: 0; line-height: 1.3; }
.card-words p { color: var(--hb-on-stage-2); font-size: 16px; max-inline-size: 30ch; }
.card-words a { pointer-events: auto; align-self: flex-start; margin-block-start: 8px; min-block-size: 40px; padding-inline: 16px; font-size: 14px; }
.go-phone { display: none; }

/* 2.3.9 (the owner): the intro's sparks stay on every black part of the page (home.js mountSparks). The 3D stage draws
   its own, so the hero's 2D layer shows only while the hero is the still row. */
.hero, .band.dark, .site-foot { position: relative; isolation: isolate; }
.kg-sparks { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; z-index: 0; pointer-events: none; }
.hero:not(.is-still) > .kg-sparks { display: none; }
.band.dark > .wrap, .site-foot > .wrap { position: relative; z-index: 1; }

/* Live prices sit below navigation, above the sponsor/hero, without pill frames. */
.prices-list { list-style: none; margin: 0; padding: 0; }
.prices-list bdi { font-family: var(--hb-font-num); font-variant-numeric: tabular-nums; }
.home-price-strip { position: relative; z-index: 2; min-block-size: 46px; padding-block: 10px; color: var(--hb-on-stage); }
.home-price-window { overflow: hidden; }
.home-price-track { display: flex; inline-size: 100%; direction: ltr; }
.home-price-strip .prices-list { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-around; gap: 28px; inline-size: max-content; min-inline-size: 100%; padding-inline-end: 28px; white-space: nowrap; animation: kg-price-scroll 32s linear infinite; }
html[dir="rtl"] .home-price-track .prices-list { direction: rtl; }
.home-price-strip .prices-list:focus-visible { outline-offset: -2px; }
.home-price-window:hover .prices-list, .home-price-window:focus-within .prices-list { animation-play-state: paused; }
.home-price-strip .prices-list li { flex: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 16px; line-height: 1.5; font-weight: 500; }
.home-price-strip .prices-list bdi { font-size: 1.08em; font-weight: 600; }
@keyframes kg-price-scroll { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .home-price-window { overflow-x: auto; }
  .home-price-strip .prices-list { animation: none; }
  .home-price-track [aria-hidden="true"] { display: none; }
}

/* no WebGL, reduced motion, webdriver, or until the 3D is ready: the same cards as still pictures in a row, and the
   active card's words under them, placed by this sheet (P:180-186) */
.still { display: none; }
.hero.is-still #gl, .hero.is-still .go-phone { display: none; }
.hero.is-still .hero-grid { pointer-events: auto; }
.hero.is-still .stage-col { display: grid; align-items: center; }
.hero.is-still .still { display: flex; gap: 16px; min-inline-size: 0; overflow-x: auto; scroll-snap-type: x mandatory; padding-block: 8px; }
.still figure { margin: 0; flex: 0 0 min(440px, 92%); scroll-snap-align: center; position: relative; border-radius: 20px; overflow: hidden; }
.still img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 4; }
.still figcaption { position: absolute; inset: auto 0 0 0; padding: 20px; font-weight: 600; font-size: 24px; }
.hero.is-still .card-words { position: relative; z-index: 1; opacity: 1; transition: none; max-inline-size: 1280px; margin-inline: auto; padding: 0 max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)) 32px; }
.hero.is-still .card-words p { max-inline-size: 60ch; }

/* the bands (Prime-Desk): white and black, big headlines */
.band { padding-block: 96px; }
.band.light { background: var(--hb-paper); color: var(--hb-ink); color-scheme: light; }
.band.dark { background: var(--hb-stage); color: var(--hb-on-stage); color-scheme: dark; }
.band h2 { font-weight: 600; font-size: clamp(36px, 5vw, 72px); line-height: 1.08; letter-spacing: -.02em; max-inline-size: 16ch; text-wrap: balance; }
html:lang(ckb) .band h2, html:lang(ar) .band h2 { letter-spacing: 0; line-height: 1.25; }
.band .lede-b { margin-block-start: 24px; font-size: 18px; max-inline-size: 56ch; color: var(--hb-ink-2); }
.band.dark .lede-b { color: var(--hb-on-stage-2); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: end; }
.tag { display: inline-flex; align-items: center; min-block-size: 28px; padding-inline: 12px; border-radius: 999px; font-size: 13px; font-weight: 500; border: 1px solid currentColor; opacity: .7; }
.band.light .btn-primary { background: var(--hb-accent); color: var(--hb-paper); }
.band.light .btn-primary:hover { background: var(--hb-accent-hover); }
.band.light .btn-ghost { border-color: rgba(11,12,15,.3); }

/* a sample month replayed: the calendar fills, the equity line draws, the findings arrive on their day */
.month { position: relative; overflow: hidden; isolation: isolate; }
.month::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(32% 42% at 22% 34%, rgba(60,214,255,.20), transparent 70%), radial-gradient(28% 38% at 12% 82%, rgba(242,106,16,.13), transparent 70%), radial-gradient(30% 40% at 44% 12%, rgba(74,222,159,.16), transparent 70%); }
html[dir="rtl"] .month::before { transform: scaleX(-1); }
.month .mo { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 64px; align-items: center; }
.mo-copy { display: grid; gap: 28px; align-content: start; }
.mo-copy .lede-b { margin: 0; }
/* 2.3.9: the section tour (home.js setTourWords) */
.tour { transition: opacity .35s ease; }
.tour.is-out { opacity: 0; }
.tour-title { font-weight: 600; font-size: clamp(40px, 5vw, 72px); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
html:lang(ckb) .tour-title, html:lang(ar) .tour-title { letter-spacing: 0; line-height: 1.25; }
.tour-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tour-points li { display: flex; align-items: baseline; gap: 12px; font-size: 18px; font-weight: 500; }
.tour-points li::before { content: ""; flex: none; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--hb-brand); transform: translateY(-2px); }
.tour-go { justify-self: start; }
.tour-steps { display: flex; gap: 6px; }
.tour-steps button { flex: 1 1 0; min-inline-size: 0; block-size: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; align-items: center; }
.tour-steps i { display: block; block-size: 3px; border-radius: 999px; background: rgba(11,12,15,.14); position: relative; overflow: hidden; }
.tour-steps i::after { content: ""; position: absolute; inset: 0; background: var(--hb-ink); transform: scaleX(0); transform-origin: left; }
html[dir="rtl"] .tour-steps i::after { transform-origin: right; }
.tour-steps button[aria-current="true"] i::after { transform: scaleX(var(--p, 1)); }
.tour-steps button:hover i { background: rgba(11,12,15,.3); }
.mo-badge { margin: 0; justify-self: start; }
.mo-panel { background: var(--hb-panel); color: var(--hb-on-stage); border-radius: 28px; padding: 24px; display: grid; gap: 20px; }
.mo-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mo-kpi { display: grid; gap: 6px; min-inline-size: 0; }
.mo-kpi span { font-size: 13px; color: var(--hb-on-stage-2); }
.mo-kpi b { font: 600 22px/1.1 var(--hb-font-num); font-size: clamp(18px, 1.72vw, 22px); font-variant-numeric: tabular-nums; direction: ltr; justify-self: start; white-space: nowrap; }
.mo-kpi b.up { color: var(--hb-up-on-dark); }
.mo-kpi b.down { color: var(--hb-down-on-dark); }
.mo-curve { inline-size: 100%; block-size: 200px; display: block; }

/* the flat calendar home-art.js draws (FIX-C1-calendar.css): right to left in ckb and ar, the curve left to right */
.mo-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.mo-sample { grid-column: 1 / -1; font: 500 12px/1.4 var(--hb-font); color: var(--hb-on-stage-2); }
.mo-wd { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--hb-on-stage-2); text-align: center; padding-block-end: 2px; }
.mo-day, .mo-off { min-inline-size: 0; }
.mo-day { aspect-ratio: 1.3; border-radius: 10px; background: rgba(255,255,255,.045); display: grid; align-content: space-between; padding: 6px 8px; transition: background .45s, box-shadow .45s, transform .45s; }
.mo-off { background: transparent; }
.mo-day.rest { background: rgba(255,255,255,.02); }
.mo-day .n { font: 500 12px/1 var(--hb-font-num); color: rgba(255,255,255,.5); text-align: start; }
.mo-day .v { font: 600 12px/1 var(--hb-font-num); direction: ltr; justify-self: end; opacity: 0; transition: opacity .45s; }
.mo-day.done .v { opacity: 1; }
.mo-day.done.up { background: rgba(74,222,159,var(--a, .2)); }
.mo-day.done.down { background: rgba(255,138,147,var(--a, .2)); }
.mo-day.done.up .n, .mo-day.done.down .n { color: rgba(255,255,255,.85); }
.mo-day.flag.done { box-shadow: inset 0 0 0 2px var(--hb-brand); }
.mo-day.now { box-shadow: inset 0 0 0 2px var(--hb-on-stage); transform: scale(1.06); }
.mo-a-17 { --a: 0.17; }
.mo-a-19 { --a: 0.19; }
.mo-a-20 { --a: 0.20; }
.mo-a-21 { --a: 0.21; }
.mo-a-22 { --a: 0.22; }
.mo-a-23 { --a: 0.23; }
.mo-a-25 { --a: 0.25; }
.mo-a-26 { --a: 0.26; }
.mo-a-29 { --a: 0.29; }
.mo-a-30 { --a: 0.30; }
.mo-a-32 { --a: 0.32; }
.mo-a-34 { --a: 0.34; }
.mo-a-36 { --a: 0.36; }
.mo-a-40 { --a: 0.40; }
.mo-a-41 { --a: 0.41; }
.mo-a-42 { --a: 0.42; }
.mo-a-53 { --a: 0.53; }
.mo-a-64 { --a: 0.64; }

/* white crystal glass: a frosted white panel over soft colour lights, the 3D stage inside it (once home-3d.js is ready) */
/* 2.3.9 (the owner): no frame. The glass blocks stand straight on the band's colour lights; no panel, ring or shadow. */
.mo-panel.glass { color: var(--hb-ink); background: transparent; padding: 0; border-radius: 0; }
.mo-panel.glass .mo-kpi span { color: var(--hb-ink-2); }
.mo-panel.glass .mo-kpi b.up { color: var(--hb-up); }
.mo-panel.glass .mo-kpi b.down { color: var(--hb-down); }
.mo-stage { position: relative; block-size: 500px; overflow: hidden; }
/* the stage dissolves into the band at its edges: no box round the glass month */
.mo-panel.glass .mo-stage { -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent); mask-composite: intersect; }
.mo-stage canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; }
.mo-panel:not(.is-3d) .mo-stage, .mo-panel.is-3d .mo-curve, .mo-panel.is-3d .mo-cal { display: none; }
.mo-tags { position: absolute; inset: 0; pointer-events: none; }
/* physical on purpose: home-3d.js projects each tag to x from the stage's left edge, in every language */
.mo-tags .tg { position: absolute; inset: 0 auto auto 0; display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(255,255,255,.86); border: 1px solid var(--hb-paper); box-shadow: 0 10px 24px -10px rgba(15,23,42,.40); font-size: 12px; font-weight: 600; color: var(--hb-ink); white-space: nowrap; opacity: 0; transition: opacity .4s; will-change: transform; }
.mo-tags .tg.on { opacity: 1; }
.mo-tags .tg::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--hb-brand); flex: none; }
.mo-tags .tg.good::before { background: var(--hb-up); }
.mo-tags .tg:not(.last) { display: none; }

/* the community band */
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block-start: 1px solid var(--hb-on-stage); }
.feature-list li { padding-block: 20px; border-block-end: 1px solid var(--hb-line-dark); font-size: 20px; font-weight: 500; }
.feature-list li:nth-child(odd) { padding-inline-end: 24px; }
.band-cta { margin-block-start: 40px; display: flex; gap: 12px; flex-wrap: wrap; }
/* The public traders (C5's rows, drawn by home-support.js) take the community band's dark surface (Task 6 fix round 1
   ruling): the prototype's band is one black surface of headline, lede and hairline rows, with no light card in it, and
   the traders are community content that continues it. So no white slab and no second wrap: C5's light ground, inner
   padding and inks are restated here for the band (the id outranks C5's class rules whatever the sheet order). */
.traders { margin-block-start: 48px; }
#community-band .kg-home-traders { background: transparent; color: var(--hb-on-stage); color-scheme: dark; }
#community-band .kg-home-traders .hs-wrap { padding: 0; }
#community-band .kg-home-traders .cap { color: var(--hb-on-stage-2); }
#community-band .kg-home-traders .traders-grid, #community-band .kg-home-traders .trader-row { border-color: var(--hb-line-dark); }
#community-band .kg-home-traders .ava { background: rgba(60,214,255,.14); color: var(--hb-accent-dark); }
#community-band .kg-home-traders .pill { background: transparent; color: var(--hb-accent-dark); border-color: rgba(255,255,255,.32); }
#community-band .kg-home-traders .pill:hover { border-color: var(--hb-on-stage); }
#community-band .kg-home-traders :focus-visible { outline-color: var(--hb-accent-dark); }
.final { text-align: start; }
.final h2 { max-inline-size: 20ch; }

/* the footer: the four legal documents, the risk note, the sample note */
.site-foot { padding-block: 32px; background: var(--hb-stage); color: var(--hb-on-stage-2); font-size: 14px; color-scheme: dark; }
.site-foot .wrap { display: grid; gap: 12px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-foot a { color: var(--hb-on-stage-2); text-underline-offset: 3px; }
.site-foot a:hover { color: var(--hb-on-stage); }
.foot-risk { max-inline-size: 80ch; }

@media (max-width: 1023.98px) {
  .nav { display: none; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .month .mo { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 759.98px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(540px, 72svh) auto; min-block-size: 0; padding-block: 32px 24px; gap: 8px; }
  .hero.is-still .hero-grid { grid-template-rows: auto auto auto; }
  .copy { gap: 16px; }
  .copy .sections { display: none; }
  .lede { font-size: 16px; }
  .chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 4px; pointer-events: auto; }
  .chips button { flex: none; min-block-size: 40px; padding-inline: 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.24); background: rgba(0,0,0,.6); color: var(--hb-on-stage-2); font: 500 15px/1 var(--hb-font); cursor: pointer; }
  .chips button[aria-current="true"] { background: var(--hb-on-stage); color: var(--hb-ink); border-color: var(--hb-on-stage); }
  .card-words { padding: 20px; }
  .card-words p { font-size: 15px; }
  .card-words a { display: none; }
  .hero.is-still .card-words a { display: inline-flex; }
  .go-phone { display: inline-flex; position: absolute; z-index: 3; inset-inline-start: 0; inset-block-end: 0; min-block-size: 44px; }
  .top .signin { display: none; }
  /* the phone's language key: the code, with the native list laid over it, invisible, to open */
  .lang-code { display: inline; }
  .lang-key select { position: absolute; inset: 0; inline-size: 100%; max-inline-size: none; opacity: 0; }
  .mo-kpi b { font-size: 22px; }
  .top .wrap { gap: 12px; }
  .brand { font-size: 18px; gap: 8px; }
  .top-end { gap: 4px; }
  .top-end .btn { padding-inline: 14px; }
  .band { padding-block: 64px; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .feature-list { grid-template-columns: minmax(0, 1fr); }
  .feature-list li { font-size: 18px; }
  .mo-stage { block-size: 380px; }
  .mo-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mo-panel { padding: 16px; border-radius: 22px; gap: 16px; }
  .mo-curve { block-size: 150px; }
  .mo-cal { gap: 4px; }
  .mo-day { aspect-ratio: 1; padding: 4px 5px; border-radius: 8px; }
  .mo-day .v { display: none; }
  .tour-points li { font-size: 16px; }
}
@media (min-width: 760px) { .chips { display: none; } }
@media (max-width: 400px) {
  .brand-mark { inline-size: 32px; block-size: 32px; }
  .brand { font-size: 16px; }
  .lang-key { padding-inline: 8px; }
  .top-end .btn { padding-inline: 12px; font-size: 14px; }
}
@media (max-width: 359.98px) { .brand-name { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .card-words, .sections button::before, .tour { transition: none; }
  .mo-day, .mo-day .v, .mo-tags .tg { transition: none; }
}