/* Layout: one 12-column grid, one left edge. Every chapter = a 4-column heading rail (number, label, title)
   + an 8-column body. Full-width elements (images, figures, number rows) span all 12 columns on the same edges. */
:root { --f-ui: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
  --bg: #ffffff; --alt: #f5f5f7; --fg: #1d1d1f; --muted: #5f6368; --faint: #86868b; --line: #d9d9de; --card: #ffffff;
  --accent: #0b6e99; --accent-soft: #e5f1f7; --gold: #a8741c;
  --f-body: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
  --f-quote: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
  --f-data: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
  --wrap: 1180px; --gap: 32px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #000000; --alt: #111214; --fg: #f5f5f7; --muted: #a8adb3; --faint: #86868b; --line: #2e3134; --card: #17191b;
  --accent: #5bb6e0; --accent-soft: #0f2c38; --gold: #e0b866; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #000000; --alt: #111214; --fg: #f5f5f7; --muted: #a8adb3; --faint: #86868b; --line: #2e3134; --card: #17191b;
  --accent: #5bb6e0; --accent-soft: #0f2c38; --gold: #e0b866; color-scheme: dark }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 18px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
sup a { font: 500 .66em/1 var(--f-data); padding-left: 1px; }
.ring { display: inline-block; width: 22px; aspect-ratio: 1; background: currentColor; -webkit-mask: url(img/ring.png) center / contain no-repeat; mask: url(img/ring.png) center / contain no-repeat; }

/* the grid: same edges everywhere */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
@media (max-width: 600px) { .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 48px; }
.rail { grid-column: 1 / span 4; }
.body { grid-column: 5 / span 8; display: grid; gap: 22px; align-content: start; }
.full { grid-column: 1 / -1; }
@media (max-width: 900px) { .grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; } .rail, .body, .full { grid-column: 1 / -1; } }

/* nav */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 52px; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); font: 600 1.1rem/1 var(--f-body); }
.brand .ring { color: var(--accent); }
.brand:hover { text-decoration: none; }
.nav nav { display: flex; align-items: center; gap: 22px; }
.nav nav a { color: var(--fg); font-size: .84rem; opacity: .82; }
.nav nav a:hover { opacity: 1; text-decoration: none; }
.theme { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 99px; font: 500 .76rem/1 var(--f-body); padding: 6px 11px; cursor: pointer; }
.nav .pill { opacity: 1 !important; }
@media (max-width: 900px) { .nav nav a.opt { display: none; } }

/* type */
.label { font: 600 .78rem/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.num { font: 500 .82rem/1 var(--f-data); color: var(--faint); }
.display { font: 700 clamp(2.6rem, 6.2vw, 4.8rem)/1.03 var(--f-body); letter-spacing: -.028em; }
.h2 { font: 700 clamp(1.9rem, 3.6vw, 2.9rem)/1.08 var(--f-body); letter-spacing: -.022em; }
.h3 { font: 700 1.3rem/1.25 var(--f-body); letter-spacing: -.01em; }
.lead { font: 400 clamp(1.18rem, 1.9vw, 1.42rem)/1.45 var(--f-body); color: var(--fg); letter-spacing: -.008em; }
.body p { color: var(--muted); max-width: 64ch; }
.body p.lead { color: var(--fg); }
.body p b { color: var(--fg); font-weight: 600; }
.rail-inner { position: sticky; top: 84px; display: grid; gap: 14px; }
.small { font-size: .84rem; color: var(--faint); }
.pill { display: inline-flex; align-items: center; padding: 11px 22px; border-radius: 99px; background: var(--accent); color: #ffffff; font: 500 1rem/1.2 var(--f-body); }
:root[data-theme="dark"] .pill { color: #000000; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pill { color: #000000; } }
.pill:hover { text-decoration: none; filter: brightness(1.08); }
.nav .pill { padding: 6px 14px; font-size: .82rem; }
.more { font: 500 1.02rem/1.2 var(--f-body); }
.more::after { content: " ›"; }

/* sections */
section { padding-block: clamp(80px, 10vw, 128px); border-top: 1px solid var(--line); scroll-margin-top: 52px; }
section.alt { background: var(--alt); border-top: 0; }
section.first { border-top: 0; padding-top: clamp(56px, 7vw, 88px); }

/* hero */
.hero .grid { row-gap: 40px; }
.hero .intro { grid-column: 1 / span 9; display: grid; gap: 24px; }
.hero .intro .lead { max-width: 40ch; color: var(--muted); }
.hero .intro .lead b { color: var(--fg); font-weight: 600; }
.ctas { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.hero figure { margin: 0; border-radius: 20px; overflow: hidden; }
.hero figure img { width: 100%; aspect-ratio: 2.76 / 1; object-fit: cover; }
.hero .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); border-top: 1px solid var(--line); padding-top: 24px; }
.hero .facts div { display: grid; gap: 4px; }
.hero .facts b { font: 700 1.05rem/1.3 var(--f-body); }
.hero .facts span { color: var(--muted); font-size: .96rem; }
@media (max-width: 900px) { .hero .intro { grid-column: 1 / -1; } }
@media (max-width: 700px) { .hero .facts { grid-template-columns: minmax(0, 1fr); row-gap: 18px; } }

/* stat rows (12-col aligned) */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); border-top: 1px solid var(--line); }
.stats.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats > div { padding-top: 24px; display: grid; gap: 8px; align-content: start; }
.stats b { font: 700 clamp(2.4rem, 4.6vw, 3.6rem)/1 var(--f-body); letter-spacing: -.03em; color: var(--accent); font-variant-numeric: tabular-nums; }
.stats span { color: var(--fg); font-size: 1rem; line-height: 1.45; }
.stats small { color: var(--faint); font-size: .8rem; }
@media (max-width: 900px) { .stats, .stats.four { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; } }
@media (max-width: 480px) { .stats, .stats.four { grid-template-columns: minmax(0, 1fr); } }

/* quote */
blockquote { margin: 0; padding-left: 22px; border-left: 3px solid var(--gold); font: 400 1.35rem/1.45 var(--f-quote); color: var(--fg); max-width: 40ch; }
blockquote cite { display: block; margin-top: 10px; font: 400 .84rem/1.4 var(--f-body); color: var(--faint); font-style: normal; }

/* two-column list inside body */
.pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 24px; margin-top: 8px; }
@media (max-width: 600px) { .pairs { grid-template-columns: minmax(0, 1fr); } }
.pairs div { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 16px; }
.pairs h4 { font: 700 1.04rem/1.3 var(--f-body); }
.pairs p { font-size: .98rem; }

/* signs list */
.signs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); margin: 0; padding: 0; list-style: none; }
@media (max-width: 600px) { .signs { grid-template-columns: minmax(0, 1fr); } }
.signs li { padding: 12px 0; border-top: 1px solid var(--line); color: var(--fg); font-size: 1rem; }

/* steps (product) */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } }
@media (max-width: 480px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.steps > div { border-top: 2px solid var(--accent); padding-top: 18px; display: grid; gap: 8px; align-content: start; }
.steps .num { color: var(--accent); }
.steps p { color: var(--muted); font-size: .98rem; }

/* report preview */
.report { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: clamp(22px, 3vw, 36px); display: grid; gap: 18px; }
section.alt .report { border-color: transparent; box-shadow: 0 24px 60px -36px rgb(0 0 0 / .35); }
.report .top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.report .top b { font: 700 1.25rem/1.2 var(--f-body); }
.report .top span { color: var(--muted); font-size: .9rem; }
.report .tag { font: 600 .7rem/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); border: 1px solid currentColor; border-radius: 99px; padding: 5px 9px; }
.report .sum { font-size: 1.04rem; }
.rrows { display: grid; }
.rrows > div { display: grid; grid-template-columns: minmax(0, 1fr) 112px 9.5rem; gap: 14px; align-items: center; padding-block: 11px; border-top: 1px solid var(--line); }
.rrows .n { font-weight: 600; font-size: .96rem; }
.rrows .n small { display: block; font-weight: 400; color: var(--muted); font-size: .82rem; }
.rrows svg { width: 112px; height: 30px; overflow: visible; }
.rrows .t { font: 600 .84rem/1.2 var(--f-body); color: var(--muted); }
.rrows .t.up { color: #1f8a5b; }
@media (max-width: 520px) { .rrows > div { grid-template-columns: minmax(0, 1fr) auto; } .rrows svg { display: none; } }
.report .home { background: var(--alt); border-radius: 12px; padding: 14px 16px; font-size: .95rem; }
section.alt .report .home { background: var(--accent-soft); }
.report .home b { display: block; margin-bottom: 2px; }
.report .foot { font-size: .78rem; color: var(--faint); border-top: 1px solid var(--line); padding-top: 12px; }

/* gotopia */
.world { margin: 0; border-radius: 20px; overflow: hidden; }
.world img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.realms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 28px; }
@media (max-width: 900px) { .realms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .realms { grid-template-columns: minmax(0, 1fr); } }
.realms figure { margin: 0; display: grid; gap: 12px; align-content: start; }
.realms img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.realms figcaption { display: grid; gap: 2px; }
.realms figcaption b { font: 700 1.02rem/1.3 var(--f-body); }
.realms figcaption span { color: var(--muted); font-size: .94rem; }

/* audiences */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
@media (max-width: 700px) { .duo { grid-template-columns: minmax(0, 1fr); row-gap: 32px; } }
.duo > div { display: grid; gap: 14px; align-content: start; border-top: 2px solid var(--fg); padding-top: 18px; }
.duo ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.duo li { color: var(--muted); }
.duo li b { color: var(--fg); font-weight: 600; }

/* science */
.process { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
@media (max-width: 600px) { .process { grid-template-columns: minmax(0, 1fr); row-gap: 20px; } }
.process div { border-top: 1px solid var(--line); padding-top: 16px; display: grid; gap: 6px; }
.process h4 { font: 700 1.04rem/1.3 var(--f-body); }
.process p { font-size: .98rem; }
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 640px; }
th { text-align: left; font: 600 .74rem/1.3 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 0 14px 10px 0; border-bottom: 1px solid var(--fg); }
td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--muted); }
td:first-child { color: var(--fg); font-weight: 600; }
.g { display: inline-block; width: 1.7rem; text-align: center; font: 600 .78rem/1.65 var(--f-data); border-radius: 6px; background: var(--alt); color: var(--fg); }
.g.a { background: var(--accent); color: #ffffff; }
:root[data-theme="dark"] .g.a { color: #000000; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .g.a { color: #000000; } }
.bars { display: grid; gap: 10px; }
.bar { display: grid; grid-template-columns: 9rem minmax(0, 1fr) 3rem; gap: 14px; align-items: center; font-size: .95rem; color: var(--muted); }
.bar i { display: block; height: 10px; border-radius: 99px; background: var(--accent); }
.bar i.neg { background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); }
.bar b { font: 500 .9rem/1 var(--f-data); color: var(--fg); text-align: right; }
.study { display: grid; gap: 14px; border-top: 1px solid var(--line); padding-top: 22px; }
.study .meta { font: 400 .8rem/1.4 var(--f-data); color: var(--faint); }

/* research footprint */
.map svg { display: block; width: 100%; height: auto; }
.map path { fill: color-mix(in srgb, var(--fg) 10%, var(--bg)); stroke: var(--bg); stroke-width: .4; }
.map path.on { fill: var(--accent); }
.map .pin circle { fill: var(--fg); }
.map .pin text { font: 600 7.5px/1 var(--f-body); fill: var(--fg); paint-order: stroke; stroke: var(--bg); stroke-width: 2.4px; }
section.alt .map path { stroke: var(--alt); }
section.alt .map .pin text { stroke: var(--alt); }
.timeline { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 900px) { .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; } }
.timeline li { border-top: 2px solid var(--line); padding-top: 14px; display: grid; gap: 4px; align-content: start; }
.timeline li b { font: 700 1.1rem/1 var(--f-body); }
.timeline li span { color: var(--muted); font-size: .9rem; }
.timeline li.cn { border-top-color: var(--gold); }
.timeline li.cn b { color: var(--gold); }
.timeline li.now { border-top-color: var(--accent); }

/* privacy, app, team, contact */
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
@media (max-width: 800px) { .three { grid-template-columns: minmax(0, 1fr); row-gap: 20px; } }
.three div { border-top: 1px solid var(--line); padding-top: 16px; display: grid; gap: 6px; }
.three h4 { font: 700 1.04rem/1.3 var(--f-body); }
.three p { color: var(--muted); font-size: .98rem; }
.store { display: grid; }
.store > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.store b { font-size: 1.04rem; }
.store span { color: var(--muted); font-size: .92rem; display: block; }
.store .later { font: 600 .78rem/1 var(--f-body); color: var(--faint); }
.qr { display: flex; gap: 20px; align-items: center; }
.qr .code { background: #ffffff; border-radius: 10px; padding: 10px; width: 132px; height: 132px; flex: none; border: 1px solid var(--line); }
.qr .code img, .qr .code canvas { width: 110px !important; height: 110px !important; }
.qr p { color: var(--muted); font-size: .95rem; max-width: 30ch; }
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
@media (max-width: 700px) { .team { grid-template-columns: minmax(0, 1fr); row-gap: 24px; } }
.team div { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; align-items: center; }
.team img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; grid-row: 1 / span 2; }
.team b { font-size: 1.05rem; align-self: end; }
.team span { color: var(--muted); font-size: .92rem; align-self: start; }
.mail { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mail code { font: 500 1.15rem/1.3 var(--f-data); user-select: all; }
.mail button { background: transparent; border: 1px solid var(--line); color: var(--fg); border-radius: 99px; padding: 7px 14px; font: 500 .88rem/1 var(--f-body); cursor: pointer; }
.mail .ok { font-size: .85rem; color: var(--muted); min-height: 1.2em; }
.refs { margin: 0; padding-left: 1.4rem; display: grid; gap: 6px; font-size: .84rem; color: var(--muted); }
.refs a { word-break: break-word; }
footer { background: var(--alt); padding-block: 28px; font-size: .8rem; color: var(--faint); }
footer .grid { row-gap: 12px; }
footer p { grid-column: span 8; }
footer p:last-child { grid-column: 9 / span 4; text-align: right; }
@media (max-width: 900px) { footer p, footer p:last-child { grid-column: 1 / -1; text-align: left; } }

/* ===== v5 visual layer ===== */
:root { --grad-a: #0b6e99; --grad-b: #6a4fd1; --shadow: 0 30px 80px -40px rgb(10 30 60 / .35); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --grad-a: #5bb6e0; --grad-b: #a58cf0; --shadow: 0 30px 80px -40px rgb(0 0 0 / .8); } }
:root[data-theme="dark"] { --grad-a: #5bb6e0; --grad-b: #a58cf0; --shadow: 0 30px 80px -40px rgb(0 0 0 / .8); }
.grad { background: linear-gradient(100deg, var(--grad-a) 10%, var(--grad-b) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.display { font-size: clamp(2.8rem, 7vw, 5.6rem); letter-spacing: -.035em; line-height: 1.0; }
.h2 { letter-spacing: -.028em; }

/* hero: type floats in the sky of a full-bleed Gotopia panorama */
.hero { padding-bottom: 0; overflow: hidden; }
.hero .intro { position: relative; z-index: 2; }
.hero .bleed { margin: clamp(-48px, -2.5vw, -16px) 0 0; position: relative; z-index: 1; }
.hero .bleed img { width: 100%; aspect-ratio: 2400 / 787; object-fit: cover; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34%); mask-image: linear-gradient(to bottom, transparent 0, #000 34%); }
.hero .factwrap { position: relative; z-index: 2; margin-top: clamp(-96px, -6vw, -28px); padding-bottom: clamp(56px, 7vw, 96px); }
.hero .facts { border-top: 0; padding-top: 0; row-gap: 16px; }
.hero .facts div { background: color-mix(in srgb, var(--card) 82%, transparent); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 18px; padding: 20px 22px; box-shadow: var(--shadow); }

/* cards for steps */
.steps { row-gap: var(--gap); }
.steps > div { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 24px; border-top: 1px solid var(--line); box-shadow: var(--shadow); }
section.alt .steps > div { border-color: transparent; }
.steps .num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); margin-bottom: 6px; }
.stats b { background: linear-gradient(100deg, var(--grad-a), var(--grad-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.realms img, .world img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.realms figure:hover img { transform: scale(1.03); }
.realms figure { overflow: visible; }
.realms figure > img { box-shadow: var(--shadow); }
.world { box-shadow: var(--shadow); }

/* roadmap */
.road { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 16px; margin: 0; padding: 0; list-style: none; position: relative; }
.road li { position: relative; padding-top: 26px; display: grid; gap: 4px; align-content: start; }
.road li::before { content: ""; position: absolute; top: 5px; left: 0; right: -16px; height: 2px; background: var(--line); }
.road li::after { content: ""; position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--faint); }
section.alt .road li::after { background: var(--alt); }
.road li b { font: 700 1.1rem/1 var(--f-body); }
.road li span { color: var(--muted); font-size: .92rem; }
.road li:last-child::before { right: 0; }
.road li.cn::after { border-color: var(--gold); background: var(--gold); }
.road li.cn b { color: var(--gold); }
@media (max-width: 900px) { .road { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; } .road li::before { right: 0; } }
.launch { position: relative; overflow: hidden; border-radius: 28px; padding: clamp(28px, 5vw, 64px); color: #f5f5f7; background: radial-gradient(120% 140% at 100% 0%, #1d3f7a 0%, transparent 55%), radial-gradient(90% 120% at 0% 100%, #0b5a7a 0%, transparent 60%), #070b14; display: grid; gap: 36px; box-shadow: var(--shadow); }
.launch .top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 16px; align-items: end; }
.launch .top > div { grid-column: 1 / span 8; display: grid; gap: 14px; }
.launch .top .badge { grid-column: 10 / span 3; justify-self: end; font: 700 clamp(3.4rem, 8vw, 6rem)/1 var(--f-body); letter-spacing: -.04em; background: linear-gradient(100deg, #7fd0f2, #b9a4ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.launch .label { color: #e0b866; }
.launch h3 { font: 700 clamp(1.8rem, 3.6vw, 2.8rem)/1.08 var(--f-body); letter-spacing: -.025em; }
.launch p { color: #c3c8d0; max-width: 60ch; font-size: 1.05rem; }
.launch .lg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 24px; }
.launch .lg div { border-top: 1px solid rgb(255 255 255 / .18); padding-top: 16px; display: grid; gap: 6px; align-content: start; }
.launch .lg b { font: 700 1.04rem/1.3 var(--f-body); color: #fff; }
.launch .lg span { color: #b4bac3; font-size: .95rem; }
@media (max-width: 900px) { .launch .top > div, .launch .top .badge { grid-column: 1 / -1; justify-self: start; } .launch .lg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .launch .lg { grid-template-columns: minmax(0, 1fr); } }
.next { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 18px; color: var(--muted); }
.next b { color: var(--fg); }

/* leadership: always-dark chapter */
section.dark { --bg: #000; --alt: #111214; --fg: #f5f5f7; --muted: #a8adb3; --faint: #86868b; --line: #2e3134; --card: #17191b; --accent: #5bb6e0; --accent-soft: #0f2c38; --gold: #e0b866; background: radial-gradient(80% 90% at 0% 0%, #10243a 0%, transparent 60%), #000; color: var(--fg); border-top: 0; }
.portrait { margin: 0; display: grid; gap: 14px; }
.portrait img { width: 100%; max-width: 320px; aspect-ratio: 1; object-fit: cover; border-radius: 24px; box-shadow: 0 30px 80px -30px rgb(0 0 0 / .9); }
.portrait figcaption { display: grid; gap: 2px; }
.portrait figcaption b { font-size: 1.15rem; }
.portrait figcaption span { color: var(--muted); font-size: .95rem; }
.mission { border-radius: 20px; padding: 24px 26px; background: linear-gradient(135deg, rgb(91 182 224 / .14), rgb(165 140 240 / .12)); border: 1px solid rgb(255 255 255 / .1); display: grid; gap: 8px; }
.mission p { color: var(--fg) !important; font: 400 1.3rem/1.45 var(--f-quote); max-width: 52ch; }
.board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 20px; border-top: 1px solid var(--line); padding-top: 22px; }
@media (max-width: 600px) { .board { grid-template-columns: minmax(0, 1fr); } }
.board div { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.board img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; grid-row: 1 / span 2; }
.board b { align-self: end; }
.board span { color: var(--muted); font-size: .92rem; align-self: start; }
.mail code { font-size: clamp(1.4rem, 3vw, 2rem); }

.nav nav a.pill { color: #ffffff; opacity: 1; }
:root[data-theme="dark"] .nav nav a.pill { color: #000000; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav nav a.pill { color: #000000; } }
@media (max-width: 700px) { .hero .bleed { margin-top: 8px; } .hero .bleed img { aspect-ratio: 4 / 3; object-position: 30% 50%; } .hero .factwrap { margin-top: -40px; } }

/* ===== v6: cinematic landing, integrated art, stronger story ===== */
.nav nav { gap: 20px; }
/* landing video */
.hv { position: relative; min-height: calc(100svh - 52px); min-height: max(640px, calc(100svh - 52px)); display: grid; align-items: end; overflow: hidden; color: #fff; background: #0b1a2a; border-top: 0; padding: 0; }
.hv video, .hv .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hv .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgb(4 10 20 / .9) 0%, rgb(4 10 20 / .6) 45%, rgb(4 10 20 / .12) 100%), linear-gradient(to right, rgb(4 10 20 / .5), transparent 65%); }
.hv .wrap { position: relative; z-index: 2; width: 100%; padding-top: clamp(220px, 30vh, 320px); padding-bottom: clamp(48px, 7vh, 88px); }
.hv .intro { grid-column: 1 / span 10; display: grid; gap: 22px; }
.hv .label { color: #f0c46a; }
.hv h1 { font-size: clamp(2.4rem, 4.8vw, 4.1rem); color: #fff; text-shadow: 0 2px 30px rgb(0 0 0 / .35); }
.hv h1 .grad { background: linear-gradient(100deg, #8fdcff 10%, #c7b6ff 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hv .lead { color: rgb(255 255 255 / .86); max-width: 44ch; }
.hv .lead b { color: #fff; }
.hv .more { color: #bfe9ff; }
.hv .pill { background: #fff; color: #0b1a2a !important; }
.hv .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 12px; margin-top: 8px; }
.hv .facts div { display: grid; gap: 4px; padding: 18px 20px; border-radius: 16px; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .18); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); }
.hv .facts b { font: 700 1.02rem/1.3 var(--f-body); }
.hv .facts span { color: rgb(255 255 255 / .78); font-size: .94rem; }
.hv .vctl { position: absolute; right: max(24px, env(safe-area-inset-right, 0px)); top: 20px; z-index: 3; background: rgb(0 0 0 / .35); color: #fff; border: 1px solid rgb(255 255 255 / .3); border-radius: 99px; padding: 6px 12px; font: 500 .78rem/1 var(--f-body); cursor: pointer; }
@media (max-width: 900px) { .hv .intro { grid-column: 1 / -1; } }
@media (max-width: 700px) { .hv .facts { grid-template-columns: minmax(0, 1fr); } .hv .facts div:nth-child(n+2) { display: none; } }


.hv .land { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.hv .sky { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hv .fly { position: absolute; top: clamp(24px, 4vh, 48px); left: 0; width: clamp(130px, 13vw, 200px); animation: cross 22s linear infinite; will-change: transform; }
.hv .fly img { width: 100%; height: auto; filter: drop-shadow(0 26px 22px rgb(0 0 0 / .35)); animation: bob 3.6s ease-in-out infinite; will-change: transform; }
@keyframes cross { from { transform: translate3d(-110%, 24px, 0); } to { transform: translate3d(calc(100vw + 10%), -18px, 0); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-12px) rotate(1.2deg); } }
.hv.still .fly, .hv.still .fly img { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hv .fly { animation: none; transform: translate3d(62vw, 0, 0); } .hv .fly img { animation: none; } }
@media (max-width: 700px) { .hv .fly { animation-duration: 14s; top: 56px; } .hv .wrap { padding-top: 200px; } }
/* art that lives in the background */
.artbg { position: relative; overflow: hidden; isolation: isolate; }
.artbg > .art { position: absolute; inset: 0; z-index: -1; background: var(--img) center / cover no-repeat; opacity: var(--o, .22); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 70%, transparent 100%); }
.mega { font: 700 clamp(2.4rem, 5.6vw, 4.6rem)/1.02 var(--f-body); letter-spacing: -.035em; max-width: 18ch; }

/* problem */
.problem .ptop { display: grid; gap: 18px; grid-column: 1 / span 10; }
.problem .ptop .lead { color: var(--muted); max-width: 52ch; }
.issues { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 20px; row-gap: 20px; }
@media (max-width: 1000px) { .issues { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .issues { grid-template-columns: minmax(0, 1fr); } }
.issues article { display: grid; gap: 10px; align-content: start; padding: 26px 24px; border-radius: 20px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.issues .big { font: 700 clamp(2.6rem, 4.4vw, 3.6rem)/1 var(--f-body); letter-spacing: -.035em; background: linear-gradient(100deg, #8fdcff, #c7b6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.issues .big small { font-size: .38em; letter-spacing: 0; }
.issues h3 { font: 700 1.12rem/1.25 var(--f-body); color: #fff; }
.issues p { color: #b8bec7; font-size: .95rem; }
.issues .src { font-size: .76rem; color: #8a9099; }
.statement { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 18px; border-top: 1px solid rgb(255 255 255 / .16); padding-top: 36px; }
.statement p.s1 { grid-column: 1 / span 7; font: 600 clamp(1.5rem, 2.8vw, 2.2rem)/1.2 var(--f-body); letter-spacing: -.02em; color: #fff; }
.statement p.s2 { grid-column: 9 / span 4; color: #b8bec7; align-self: end; }
@media (max-width: 900px) { .statement p.s1, .statement p.s2 { grid-column: 1 / -1; } .problem .ptop { grid-column: 1 / -1; } }

/* image band */
.band { position: relative; min-height: clamp(380px, 52vw, 620px); display: grid; align-items: center; overflow: hidden; border-top: 0; padding-block: 0; color: #fff; }
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgb(10 6 2 / .72) 0%, rgb(10 6 2 / .35) 45%, transparent 75%); }
.band::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, var(--bg) 0, transparent 14%, transparent 86%, var(--bg) 100%); }
.band .wrap { position: relative; z-index: 2; width: 100%; }
.band blockquote { border: 0; padding: 0; color: #fff; font: 700 clamp(2rem, 4.6vw, 3.8rem)/1.05 var(--f-body); letter-spacing: -.03em; max-width: 14ch; grid-column: 1 / span 7; }
.band blockquote span { display: block; margin-top: 18px; font: 400 clamp(1.05rem, 1.6vw, 1.25rem)/1.45 var(--f-body); letter-spacing: 0; color: rgb(255 255 255 / .85); max-width: 36ch; }

/* why oppimi */
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 20px; row-gap: 20px; }
@media (max-width: 1000px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pillars { grid-template-columns: minmax(0, 1fr); } }
.pillars article { position: relative; overflow: hidden; display: grid; gap: 10px; align-content: start; padding: 28px 24px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.pillars article::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--grad-a), var(--grad-b)); }
.pillars .k { font: 700 2rem/1 var(--f-body); letter-spacing: -.03em; }
.pillars p { color: var(--muted); font-size: .98rem; }
.vs { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 620px; font-size: 1rem; }
.vs th { font: 600 .76rem/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; padding: 14px 18px; border-bottom: 0; color: var(--faint); }
.vs th.us { color: var(--accent); }
.vs td { padding: 16px 18px; border-bottom: 1px solid var(--line); color: var(--muted); }
.vs td:first-child { color: var(--fg); font-weight: 600; width: 22%; }
.vs td.us { color: var(--fg); background: var(--accent-soft); font-weight: 500; }
.vs tr:first-child td.us { border-top-left-radius: 14px; border-top-right-radius: 14px; }
.vs tr:last-child td.us { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; border-bottom: 0; }
.note { border-left: 3px solid var(--gold); padding-left: 16px; color: var(--muted); max-width: 70ch; }

/* gotopia over its own world */
.gworld { color: #fff; border-top: 0; }
.gworld > .art { z-index: -2; opacity: 1; -webkit-mask-image: none; mask-image: none; }
.gworld::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgb(5 18 14 / .86) 0%, rgb(5 18 14 / .66) 45%, rgb(5 18 14 / .9) 100%); }
.gworld { --fg: #fff; --muted: rgb(255 255 255 / .82); --faint: rgb(255 255 255 / .6); --line: rgb(255 255 255 / .2); --gold: #f0c46a; }
.gworld .realms figure { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .8); }
.gworld .realms img { border-radius: 0; aspect-ratio: 3 / 4; }
.gworld .realms figcaption { position: absolute; inset: auto 0 0; padding: 60px 18px 18px; background: linear-gradient(to top, rgb(0 0 0 / .78), transparent); }
.gworld .realms figcaption span { color: rgb(255 255 255 / .82); }
.promise { display: flex; flex-wrap: wrap; gap: 10px; }
.promise span { padding: 8px 14px; border-radius: 99px; background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .22); font-size: .9rem; color: #fff; }

/* portrait */
.portrait img { max-width: 360px; aspect-ratio: 4 / 5; }

/* gentle scroll reveal: only where the browser drives it natively; content is never hidden otherwise */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rv { animation: rv linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
    @keyframes rv { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
  }
}


/* ===== v8 editorial layer ===== */
:root { --f-head: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; }
.display, .h2, .mega, .launch h3, .band blockquote, .statement p.s1, .portrait figcaption b, .press h3, .rp-h { font-family: var(--f-head); font-weight: 700; letter-spacing: -.012em; }
.h3 { font-family: var(--f-head); font-weight: 700; letter-spacing: -.005em; }
.display { line-height: 1.04; }
.h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); line-height: 1.08; }
.mega { line-height: 1.04; }
.num { display: none !important; }
.label { font: italic 400 1.08rem/1.3 var(--f-quote); letter-spacing: 0; text-transform: none; color: var(--gold); }
.rail-inner::before { content: ""; display: block; width: 44px; height: 3px; background: var(--fg); margin-bottom: 6px; }
.dark .rail-inner::before, .gworld .rail-inner::before { background: var(--gold); }
.steps .num { display: none !important; }
.steps h3 { font-size: 1.5rem; }
.issues h3 { font-family: var(--f-head); font-size: 1.3rem; }
.pillars .k { font-family: var(--f-head); font-size: 2.2rem; }
.hv h1 { font-weight: 700; }

/* press & research */
.press { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, auto); column-gap: 20px; row-gap: 20px; }
@media (max-width: 1000px) { .press { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .press { grid-template-columns: minmax(0, 1fr); } }
.press a { display: grid; gap: 12px; align-content: start; padding: 26px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); color: var(--fg); transition: transform .3s, box-shadow .3s; }
.press a:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow); }
.press .pub { font: 700 .95rem/1.2 var(--f-head); letter-spacing: .02em; }
.press .pub i { font: 400 .82rem/1 var(--f-body); color: var(--faint); font-style: normal; margin-left: 8px; }
.press h3 { font-size: 1.32rem; line-height: 1.22; }
.press p { color: var(--muted); font-size: .96rem; }
.press .rd { font-size: .9rem; color: var(--accent); margin-top: auto; }
.press a.feat { grid-row: span 2; position: relative; overflow: hidden; isolation: isolate; color: #fff; border: 0; background: #1a0f08; align-content: end; min-height: 420px; }
.press a.feat::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url(img/g/bg_canyon.webp) center / cover; }
.press a.feat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(12 6 2 / .92) 20%, rgb(12 6 2 / .35) 70%, rgb(12 6 2 / .1)); }
.press a.feat h3 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); color: #fff; }
.press a.feat p { color: rgb(255 255 255 / .85); font: italic 400 1.1rem/1.45 var(--f-quote); }
.press a.feat .pub i { color: rgb(255 255 255 / .7); }
.press a.feat .rd { color: #ffd88a; }
.press-note { font-size: .8rem; color: var(--faint); }
.storebtn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 12px; background: #000; color: #fff !important; border: 1px solid #000; font: 600 1rem/1.15 var(--f-body); }
.storebtn small { display: block; font: 400 .7rem/1 var(--f-body); opacity: .85; }
.storebtn:hover { text-decoration: none; filter: brightness(1.25); }
:root[data-theme="dark"] .storebtn { border-color: #555; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .storebtn { border-color: #555; } }
.free { display: inline-block; font: 700 .78rem/1 var(--f-body); letter-spacing: .04em; color: #fff; background: linear-gradient(100deg, var(--grad-a), var(--grad-b)); padding: 6px 10px; border-radius: 99px; }

/* ===== Type system (Forbes / HBR): one serif for headlines, reading text and figures; one sans for interface only ===== */
body { font-family: var(--f-body); font-size: 19px; line-height: 1.6; }
.display, .h2, .mega, .h3, h1, h2, h3, .t-h3, .launch h3, .band blockquote, .statement p.s1, .press h3, blockquote, .mission p, .issues h3, .pillars .k, .stats b, .issues .big, .portrait figcaption b { font-family: var(--f-head) !important; }
.display, .h2, .mega, h1, h2 { font-weight: 600 !important; letter-spacing: -.01em !important; }
.h3, h3 { font-weight: 600 !important; letter-spacing: -.003em !important; }
.stats b, .issues .big { font-weight: 500 !important; letter-spacing: -.02em !important; font-variant-numeric: lining-nums; }
.lead, .body p, p, li, td:first-child { font-family: var(--f-body); }
/* interface layer: always the sans */
.nav, .nav *, .brand, .theme, .pill, .btn, .more, .store, .storebtn, .storebtn *, .label, .small, .t-small, .free, .tag, .report .foot, .rrows .n small, .rrows .t, .rrows .n,
table, th, td, .g, .stats small, .stats span, .bar, .bar *, .study .meta, .press .pub, .press .pub i, .press .rd, .press-note, .chips span, .promise span, .legend2, .key,
footer, footer *, .refs, sup, sup a, .src, .issues .src, .hv .facts *, .vctl, .pause, .note, .num, .steps .num, .person span, .team span, .board span, .portrait figcaption span,
.three3 b, .two b, .boxes b, .dots, .levels small, .scale small, .scale span, .qr p, .store span, .later, .mail button, .mail .ok, .classv *, .grp span, .isnot span, .isnot b, .timeline li span, .road li span, figcaption span, .realms figcaption span, .press-note, .next span, .next b { font-family: var(--f-ui) !important; }
svg text { font-family: var(--f-ui) !important; }
.stats span, .issues p, .pillars p, .steps p, .three p, .duo li, .signs li, .process p, .pairs p, .launch p, .launch .lg span { font-family: var(--f-body) !important; }
.label { font-style: normal !important; font-size: .8rem !important; font-weight: 600 !important; letter-spacing: .02em !important; }
.mail code { font-family: var(--f-ui) !important; font-weight: 500; }
cite, blockquote cite { font-family: var(--f-ui) !important; font-style: normal; }

/* Apple type: one family, weight and size carry the hierarchy */
body { font-size: 18px; line-height: 1.5; letter-spacing: -.012em; }
.display, .h2, .mega, h1, h2 { font-weight: 600 !important; letter-spacing: -.025em !important; }
.h3, h3 { font-weight: 600 !important; letter-spacing: -.012em !important; }
.lead { letter-spacing: -.01em; }
blockquote { font-style: normal !important; font-weight: 500 !important; letter-spacing: -.015em; }
.stats b, .issues .big, .pillars .k { font-weight: 600 !important; letter-spacing: -.03em !important; }
.label { letter-spacing: .01em !important; }

/* ===== remove presentation-style cards: flat editorial blocks only ===== */
.grad { background: none !important; -webkit-text-fill-color: currentColor !important; color: inherit !important; }
.pillars article, .steps > div, .press a:not(.feat), .issues article { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 18px 0 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transform: none !important; }
.pillars article::before { display: none !important; }
.issues article { border-top-color: rgb(255 255 255 / .22) !important; }
.pillars .k { color: var(--fg) !important; font-size: 1.35rem !important; letter-spacing: -.015em !important; }
.stats b { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--fg) !important; }
.issues .big { background: none !important; -webkit-text-fill-color: currentColor !important; color: #fff !important; }
.free { background: var(--accent) !important; color: #fff !important; }
.launch { background: #101b25 !important; border-radius: 8px !important; box-shadow: none !important; }
.launch .top .badge { background: none !important; -webkit-text-fill-color: currentColor !important; color: rgb(255 255 255 / .85) !important; }
.mission { background: transparent !important; border: 0 !important; border-left: 2px solid var(--gold) !important; border-radius: 0 !important; padding: 4px 0 4px 20px !important; }
.report { border-radius: 12px !important; }
.press a.feat { border-radius: 8px !important; }
.world, .realms figure > img, .realms img, .hero figure, .portrait img { border-radius: 8px !important; box-shadow: none !important; }
/* value proposition strip */
.vp { padding-block: clamp(48px, 6vw, 72px); border-top: 0; border-bottom: 1px solid var(--line); }
.vp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 28px; }
@media (max-width: 1000px) { .vp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vp-grid { grid-template-columns: minmax(0, 1fr); } }
.vp-grid div { display: grid; gap: 6px; align-content: start; border-top: 2px solid var(--fg); padding-top: 16px; }
.vp-grid h3 { font-size: 1.05rem !important; }
.vp-grid p { color: var(--muted); font-size: 1rem; }

/* international evidence charts (HBR/Forbes style, on the dark problem section) */
.charts4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 48px; }
@media (max-width: 900px) { .charts4 { grid-template-columns: minmax(0, 1fr); } }
.cfig { margin: 0; display: grid; gap: 4px; border-top: 1px solid rgb(255 255 255 / .22); padding-top: 18px; }
.cfig .cft { font-size: 1.2rem !important; font-weight: 600 !important; color: #fff; letter-spacing: -.015em; }
.cfig .cfs { font-size: .92rem; color: #a8adb3; margin-bottom: 10px; }
.cfig svg { width: 100%; height: auto; overflow: visible; }
.cfig .cg { stroke: rgb(255 255 255 / .1); }
.cfig .ca { stroke: rgb(255 255 255 / .55); }
.cfig .ct { font-size: 11px; fill: #8a9099; }
.cfig .cn { font-size: 13px; fill: #e6e8eb; }
.cfig .cv { font-size: 13px; font-weight: 600; fill: #fff; }
.cfig .ch { fill: #5bb6e0; }
.cfig .cx { fill: #6e737a; }
.cfig .cfr { font-size: .78rem; color: #8a9099; border-top: 1px solid rgb(255 255 255 / .12); padding-top: 8px; margin-top: 10px; }
.cfig .cfr a { color: #9fd3ef; }
.facts3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 24px; }
@media (max-width: 900px) { .facts3 { grid-template-columns: minmax(0, 1fr); } }
.facts3 div { display: grid; gap: 6px; align-content: start; border-top: 1px solid rgb(255 255 255 / .22); padding-top: 18px; }
.facts3 b { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 600; letter-spacing: -.03em; color: #fff; }
.facts3 span { color: #b8bec7; font-size: .98rem; }
.facts3 sup a, .statement sup a { color: #9fd3ef; }

.vp-line { font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.3; font-weight: 600; letter-spacing: -.02em; max-width: 46rem; margin-bottom: 32px; color: var(--fg); }
.vp-cred { margin-top: 28px; color: var(--muted); font-size: .98rem; }
.who-line { color: var(--fg); font-weight: 600; font-size: 1.05rem; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 20px; margin-top: 44px; }
@media (max-width: 800px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpis div { display: grid; gap: 4px; align-content: start; }
.kpis b { font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.kpis span { color: var(--muted); font-size: .95rem; }
.stats.four { row-gap: 28px; }

/* app not yet available: grey, non-clickable */
.storebtn.soon { background: #d2d2d7 !important; color: #6e6e73 !important; border-color: #d2d2d7 !important; cursor: default; filter: none !important; }
.storebtn.soon:hover { text-decoration: none; filter: none !important; }
:root[data-theme="dark"] .storebtn.soon { background: #2c2c2e !important; color: #8e8e93 !important; border-color: #2c2c2e !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .storebtn.soon { background: #2c2c2e !important; color: #8e8e93 !important; border-color: #2c2c2e !important; } }
.pill.soon { background: #d2d2d7 !important; color: #6e6e73 !important; }
:root[data-theme="dark"] .pill.soon { background: #2c2c2e !important; color: #8e8e93 !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pill.soon { background: #2c2c2e !important; color: #8e8e93 !important; } }
.hv .storebtn.soon { background: rgb(255 255 255 / .22) !important; color: rgb(255 255 255 / .85) !important; border-color: transparent !important; }

/* Oppimi logo */
.brand { gap: 10px !important; align-items: center; }
.brand .logo-ring { height: 34px; width: auto; display: block; }
.brand .logo-word { height: 17px; width: auto; display: block; margin-top: 3px; }
:root[data-theme="dark"] .brand .logo-word { filter: invert(1) brightness(1.6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand .logo-word { filter: invert(1) brightness(1.6); } }
:root[data-theme="dark"] .brand .logo-ring { filter: brightness(1.5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand .logo-ring { filter: brightness(1.5); } }
footer .foot-logo { height: 54px; width: auto; display: block; }
:root[data-theme="dark"] footer .foot-logo { filter: invert(1) hue-rotate(180deg) brightness(1.4); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) footer .foot-logo { filter: invert(1) hue-rotate(180deg) brightness(1.4); } }

footer .foot-brand { display: flex; align-items: center; gap: 10px; }
footer .foot-brand .logo-ring { height: 30px; width: auto; }
footer .foot-brand .logo-word { height: 15px; width: auto; margin-top: 3px; }
:root[data-theme="dark"] footer .foot-brand .logo-word { filter: invert(1) brightness(1.6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) footer .foot-brand .logo-word { filter: invert(1) brightness(1.6); } }