/* SmartSana — silicon variant styles (home + founder pages) */
@font-face {
  font-family: "Geologica";
  src: url("../assets/fonts/geologica-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --backsheet: #03060D;
  --wafer: #08132A;
  --wafer-2: #0D1C3B;
  --silver: #C9D1DA;
  --silver-hi: #EEF1F5;
  --silver-lo: #A7B1BE;
  --ink-on-silver: #0B1A33;
  --text: #E9EDF3;
  --text-2: #A9B4C6;
  --text-3: #7D8AA0;
  --finger: rgba(201, 209, 218, 0.13);
  --current: #F4A233;
  --chamfer: clamp(18px, 2.6vw, 40px);
  --inset: clamp(8px, 1vw, 14px);
  --gutter: clamp(18px, 3.4vw, 52px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--silver-lo) var(--backsheet); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--backsheet); color: var(--text);
  font-family: "Geologica", system-ui, sans-serif; font-weight: 340;
  font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding: var(--inset);
  display: grid; gap: var(--inset);
}
::selection { background: var(--silver); color: var(--ink-on-silver); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--backsheet); }
::-webkit-scrollbar-thumb { background: var(--silver-lo); border: 3px solid var(--backsheet); }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--current); outline-offset: 3px; }
img { display: block; max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; }

.skip { position: absolute; left: 24px; top: -100px; z-index: 50; background: var(--silver-hi); color: var(--ink-on-silver); padding: 10px 14px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 20px; }
.label { font-weight: 520; text-transform: uppercase; letter-spacing: 0.13em; font-size: 0.72rem; line-height: 1.2; }

/* A cell: pseudo-square wafer with chamfered corners and vertical fingers. */
.cell {
  position: relative; isolation: isolate;
  background-color: var(--wafer);
  background-image:
    linear-gradient(118deg, rgba(64, 96, 168, 0.16), transparent 38%, transparent 62%, rgba(64, 96, 168, 0.1)),
    repeating-linear-gradient(to right, transparent 0 15px, var(--finger) 15px 16px);
  clip-path: polygon(var(--chamfer) 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)), 0 var(--chamfer));
}

/* ---------- the hero cell ---------- */
.hero {
  min-height: calc(100svh - var(--inset) * 2);
  display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(18px, 2.4vw, 30px) var(--gutter) clamp(28px, 4.4vh, 52px);
  background-image: linear-gradient(118deg, rgba(64, 96, 168, 0.18), transparent 40%, transparent 64%, rgba(64, 96, 168, 0.12));
}
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand img { height: clamp(26px, 2.3vw, 34px); width: auto; }
.top nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.top nav a { text-decoration: none; color: var(--text-2); transition: color .3s; }
.top nav a:hover { color: var(--text); }
.lang { display: inline-flex; background: var(--wafer); border: 1px solid rgba(201, 209, 218, 0.28); }
.lang a, .lang button {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  appearance: none; border: 0; background: transparent; color: var(--text-2);
  font: inherit; font-weight: 560; font-size: 0.78rem; letter-spacing: 0.1em;
  padding: 7px 11px; min-width: 42px; min-height: 34px; cursor: pointer;
}
.lang a[aria-current="true"], .lang button[aria-pressed="true"] { background: var(--silver); color: var(--ink-on-silver); }
.lang a:hover:not([aria-current="true"]), .lang button:hover:not([aria-pressed="true"]) { color: var(--text); }

.statement {
  align-self: center;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 24px 48px; align-items: end;
  padding: clamp(36px, 6vh, 72px) 0;
}
.statement h1 {
  font-weight: 620; font-size: clamp(2.6rem, 5.5vw, 5.75rem);
  line-height: 0.98; letter-spacing: -0.04em;
  justify-self: start;
}
.statement .aside { display: grid; gap: 22px; }
.statement .sub { color: var(--text-2); font-size: clamp(1rem, 1.15vw, 1.15rem); max-width: 40ch; }
.statement .act { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  background: var(--silver-hi); color: var(--ink-on-silver); font-weight: 560;
  padding: 13px 20px; min-height: 48px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background-color .35s var(--ease-out);
}
.btn:hover { background: #fff; }
.btn svg, .bus svg, .links svg { width: 18px; height: 18px; flex: none; transition: transform .4s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.tel { color: var(--text-2); text-decoration: none; font-variant-numeric: tabular-nums; }
.tel:hover { color: var(--text); text-decoration: underline; }

/* Busbars: brushed silver rails carrying the ventures. */
.buses { display: grid; gap: clamp(26px, 4.6vh, 52px); margin: 0 calc(var(--gutter) * -1); }
.bus {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(150px, 2.4fr) minmax(0, 5fr) auto; align-items: center; gap: 20px 32px;
  padding: clamp(14px, 2vh, 20px) var(--gutter);
  min-height: clamp(72px, 9.4vh, 96px);
  color: var(--ink-on-silver); text-decoration: none;
  background-color: var(--silver);
  background-image:
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 3px),
    linear-gradient(to bottom, #E8ECF1 0%, #DCE2E8 50%, #CDD4DD 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 6px 18px -8px rgba(0, 0, 0, 0.7);
}
.bus::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(to right, transparent 0%, var(--current) 45%, #FFD38A 50%, var(--current) 55%, transparent 100%);
  background-size: 40% 100%; background-repeat: no-repeat; background-position: -40% 0;
  opacity: 0; transition: opacity .3s;
}
.bus:hover::after, .bus:focus-visible::after, .bus.is-live::after { opacity: 1; animation: flow 1.15s cubic-bezier(.45,0,.2,1) infinite; }
@keyframes flow { to { background-position: 140% 0; } }
.bus:focus-visible { outline-offset: -4px; outline-color: var(--ink-on-silver); }
.bus .name { display: grid; gap: 2px; }
.bus .name strong { font-weight: 680; font-size: clamp(1.6rem, 2.5vw, 2.5rem); line-height: 1; letter-spacing: -0.03em; }
.bus .line { font-size: 0.95rem; line-height: 1.45; color: #23324B; max-width: 62ch; }
.bus .go { display: inline-flex; align-items: center; gap: 10px; font-weight: 560; font-size: 0.9rem; white-space: nowrap; }
.bus:hover .go svg, .bus:focus-visible .go svg { transform: translateX(4px); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- vision cell ---------- */
.vision { padding: clamp(72px, 13vh, 150px) var(--gutter); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 0; }
.vision h2 { grid-column: 1 / span 6; font-weight: 600; font-size: clamp(2rem, 3.6vw, 3.6rem); line-height: 1.02; letter-spacing: -0.035em; }
.vision .body { grid-column: 8 / span 5; display: grid; gap: 40px; align-content: start; }
.vision .body p { font-size: clamp(1.05rem, 1.25vw, 1.22rem); line-height: 1.62; color: var(--text); }
.spec { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(201, 209, 218, 0.28); }
.spec div { padding: 14px 16px 14px 0; border-bottom: 1px solid rgba(201, 209, 218, 0.18); }
.spec dt { color: var(--text-3); margin-bottom: 4px; }
.spec dd { margin: 0; font-weight: 520; font-variant-numeric: tabular-nums; }

/* ---------- contact cell ---------- */
.contact { padding: clamp(64px, 11vh, 130px) var(--gutter); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 36px 0; }
.contact header { grid-column: 1 / span 5; display: grid; gap: 16px; align-content: start; }
.contact h2 { font-weight: 600; font-size: clamp(2rem, 3.3vw, 3.3rem); line-height: 1.02; letter-spacing: -0.035em; }
.contact header p { color: var(--text-2); max-width: 40ch; }
.links { grid-column: 7 / span 6; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.links a {
  display: grid; grid-template-columns: 6.5rem 1fr auto; align-items: center; gap: 16px;
  padding: 18px 22px; text-decoration: none; background: var(--wafer-2);
  border: 1px solid rgba(201, 209, 218, 0.16);
  transition: border-color .35s var(--ease-out), background-color .35s var(--ease-out);
}
.links a:hover { border-color: var(--silver); background: #10234A; }
.links a:hover svg { transform: translateX(4px); }
.links .label { color: var(--text-3); }
.links .v { font-weight: 560; font-size: clamp(1.15rem, 1.8vw, 1.65rem); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ---------- footer: the panel's rating label ---------- */
.foot { padding: clamp(48px, 8vh, 84px) var(--gutter) clamp(28px, 4vh, 40px); display: grid; gap: clamp(40px, 6vh, 64px); }
.cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 32px; }
.cols .lock img { height: 30px; width: auto; }
.cols .lock p { margin-top: 14px; color: var(--text-3); font-size: 0.9rem; }
.cols h3 { font-weight: 520; text-transform: uppercase; letter-spacing: 0.13em; font-size: 0.72rem; color: var(--text-3); margin-bottom: 14px; }
.cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cols a { text-decoration: none; }
.cols a:hover { text-decoration: underline; }
.cols small { display: block; color: var(--text-3); font-size: 0.82rem; }

.nameplate {
  background: #B9C2CD; color: #0B1A33;
  padding: clamp(20px, 2.4vw, 32px);
  display: grid; gap: 18px;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.nameplate header { border-bottom: 2px solid #0B1A33; padding-bottom: 10px; }
.nameplate header h3 { font-weight: 700; font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; }
.nameplate dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.nameplate dl > div { display: grid; grid-template-columns: 11.5rem 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid #98A3B2; }
.nameplate dt { font-weight: 640; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.nameplate dd { margin: 0; font-size: 0.8rem; line-height: 1.5; color: #1A2740; }
.base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--text-3); font-size: 0.82rem; }
.base a { color: var(--text-2); }

@media (max-width: 1100px) {
  .nameplate dl { grid-template-columns: 1fr; }
  .cols { grid-template-columns: 1fr 1fr; }
  .bus { grid-template-columns: minmax(0, 1fr) auto; }
  .bus .line { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 860px) {
  .top nav .hide-s { display: none; }
  .statement { grid-template-columns: 1fr; }
  .vision h2, .vision .body, .contact header, .links { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .bus { grid-template-columns: 1fr; gap: 10px; }
  .bus .line { grid-row: auto; }
  .bus .go { justify-self: start; }
  .cols, .spec { grid-template-columns: 1fr; }
  .nameplate dl > div { grid-template-columns: 1fr; gap: 4px; }
  .links a { grid-template-columns: 1fr auto; padding: 16px; }
  .links .label { grid-column: 1 / -1; }
}

/* ---------- founder (home) ---------- */
.founder { padding: clamp(72px, 12vh, 140px) var(--gutter); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 0; align-items: start; }
.sitter, .fp-portrait {
  margin: 0; padding: 6px;
  background: linear-gradient(to bottom, #E8ECF1, #CDD4DD);
  clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px);
}
.sitter { grid-column: 1 / span 5; }
.sitter img, .fp-portrait img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
}
.story { grid-column: 7 / span 6; display: grid; gap: 22px; align-content: start; }
.story h2 { font-weight: 620; font-size: clamp(2.4rem, 4.6vw, 4.8rem); line-height: 0.98; letter-spacing: -0.04em; }
.story .role { color: var(--text-2); }
.story .lead { font-size: clamp(1.05rem, 1.25vw, 1.22rem); line-height: 1.62; max-width: 54ch; }
.story blockquote { margin: 6px 0 0; font-weight: 560; font-size: clamp(1.3rem, 2vw, 1.85rem); line-height: 1.3; letter-spacing: -0.02em; }
/* the thread hangs off one silver rail, each step a finger tapped into it */
.thread { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; display: grid; gap: 2px; }
.thread::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 6px; background: linear-gradient(to right, #E8ECF1, #B9C2CD); }
.thread li { position: relative; padding: 9px 0; color: var(--text-2); }
.thread li::before { content: ""; position: absolute; left: -20px; top: 50%; width: 14px; height: 1px; background: var(--silver); }
.thread li:last-child { color: var(--text); }
.more {
  position: relative; overflow: hidden; justify-self: stretch; margin-top: 8px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 22px; min-height: 56px; text-decoration: none; font-weight: 600;
  color: var(--ink-on-silver); background-color: var(--silver);
  background-image: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 3px), linear-gradient(to bottom, #E8ECF1, #CDD4DD);
}
.more svg { width: 18px; height: 18px; transition: transform .4s var(--ease-out); }
.more:hover svg, .more:focus-visible svg { transform: translateX(4px); }
.more::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(to right, transparent, var(--current) 45%, #FFD38A 50%, var(--current) 55%, transparent); background-size: 40% 100%; background-repeat: no-repeat; background-position: -40% 0; opacity: 0; transition: opacity .3s; }
.more:hover::after, .more:focus-visible::after { opacity: 1; animation: flow 1.15s cubic-bezier(.45,0,.2,1) infinite; }
.more:focus-visible { outline-color: var(--ink-on-silver); outline-offset: -4px; }
.cols .lock .by { margin-top: 8px; font-size: 0.9rem; }
@media (max-width: 860px) { .sitter, .story { grid-column: 1 / -1; } .sitter { max-width: 460px; } }

/* ---------- founder page: a module of cells ---------- */
.fp { display: grid; gap: var(--inset); }
.fp > section, .fp > aside {
  position: relative;
  background-color: var(--wafer);
  background-image: linear-gradient(118deg, rgba(64, 96, 168, 0.16), transparent 38%, transparent 62%, rgba(64, 96, 168, 0.1)), repeating-linear-gradient(to right, transparent 0 15px, var(--finger) 15px 16px);
  clip-path: polygon(var(--chamfer) 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)), 0 var(--chamfer));
}
.fp-top { padding: clamp(18px, 2.4vw, 30px) var(--gutter); }
.top a[aria-current="page"] { color: var(--text); }
.fp-hero { padding: clamp(48px, 9vh, 110px) var(--gutter); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 0; align-items: end; }
.fp-portrait { grid-column: 1 / span 5; }
.fp-intro { grid-column: 7 / span 6; display: grid; gap: 22px; }
.fp-intro h1 { font-weight: 620; font-size: clamp(2.8rem, 6vw, 6rem); line-height: 0.95; letter-spacing: -0.04em; }
.fp-roles { font-weight: 420; font-size: 1rem; line-height: 1.55; color: var(--text-2); max-width: 46ch; }
.fp-lead { font-size: clamp(1.08rem, 1.35vw, 1.3rem); line-height: 1.6; max-width: 52ch; }
/* chapter index as a busbar of contacts */
.fp-toc { display: flex; flex-wrap: wrap; }
.fp-toc a {
  flex: 1 1 auto; text-align: center; text-decoration: none; padding: 15px 18px; font-weight: 560; font-size: 0.9rem; color: var(--ink-on-silver);
  background-color: var(--silver); background-image: linear-gradient(to bottom, #E8ECF1, #CDD4DD); box-shadow: inset -1px 0 0 #A7B1BE;
}
.fp-toc a:hover { background-image: linear-gradient(to bottom, #F4F6F8, #DCE2E8); }
.fp-toc a:focus-visible { outline-color: var(--ink-on-silver); outline-offset: -4px; }
.fp-ch { padding: clamp(56px, 10vh, 120px) var(--gutter); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 0; scroll-margin-top: 16px; }
.fp-ch h2 { grid-column: 1 / span 4; font-weight: 600; font-size: clamp(1.9rem, 3.2vw, 3.2rem); line-height: 1.02; letter-spacing: -0.035em; align-self: start; position: sticky; top: 40px; }
.fp-body { grid-column: 6 / span 7; display: grid; gap: 22px; align-content: start; }
.fp-body p { font-size: clamp(1.04rem, 1.2vw, 1.16rem); line-height: 1.68; max-width: 62ch; }
.fp-fig { margin: 18px 0 6px; display: grid; gap: 10px; max-width: 78%; }
.fp-fig.wide { max-width: 100%; }
.fp-fig img { width: 100%; height: auto; clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.fp-fig figcaption { font-weight: 520; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.7rem; color: var(--text-3); }
.fp-quote { padding: clamp(64px, 12vh, 140px) var(--gutter); }
.fp-quote p { font-weight: 620; font-size: clamp(2.2rem, 5.2vw, 5.4rem); line-height: 1; letter-spacing: -0.04em; max-width: 16ch; }
.fp-thread ol { list-style: none; margin: 0 0 12px; padding: 0 0 0 30px; position: relative; display: grid; gap: 4px; }
.fp-thread ol::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 8px; background: linear-gradient(to right, #E8ECF1, #B9C2CD); }
.fp-thread li { position: relative; padding: 12px 0; font-weight: 520; font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.4; letter-spacing: -0.01em; }
.fp-thread li::before { content: ""; position: absolute; left: -22px; top: 50%; width: 16px; height: 1px; background: var(--silver); }
.fp-mission { padding: clamp(64px, 12vh, 140px) var(--gutter); display: grid; gap: 40px; }
.fp-mission .fp-m { position: relative; font-weight: 600; font-size: clamp(1.9rem, 3.8vw, 3.9rem); line-height: 1.06; letter-spacing: -0.035em; max-width: 24ch; padding-bottom: 28px; }
.fp-mission .fp-m::after { content: ""; position: absolute; left: 0; bottom: 0; width: min(100%, 520px); height: 3px; background: linear-gradient(to right, transparent, var(--current) 45%, #FFD38A 50%, var(--current) 55%, transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: flow 2.4s cubic-bezier(.45,0,.2,1) infinite; }
@media (prefers-reduced-motion: reduce) { .fp-mission .fp-m::after { animation: none; background-position: 50% 0; } }
.fp-cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.fp-link { color: var(--text-2); text-decoration: none; border-bottom: 1px solid rgba(201, 209, 218, 0.35); padding-bottom: 2px; }
.fp-link:hover { color: var(--text); border-bottom-color: var(--text); }
@media (max-width: 860px) {
  .fp-portrait, .fp-intro, .fp-ch h2, .fp-body { grid-column: 1 / -1; }
  .fp-ch h2 { position: static; }
  .fp-portrait { max-width: 480px; }
  .fp-fig { max-width: 100%; }
  .fp-toc a { flex: 1 1 45%; }
}

/* ---------- founder synopsis (home, no portrait) ---------- */
.founder .who { grid-column: 1 / span 5; display: grid; gap: 14px; align-content: start; }
.founder .who h2 { font-weight: 620; font-size: clamp(2.4rem, 4.6vw, 4.8rem); line-height: 0.98; letter-spacing: -0.04em; }
.founder .who .role { color: var(--text-2); font-size: 1rem; line-height: 1.55; max-width: 34ch; text-wrap: balance; }
.nw { white-space: nowrap; }
@media (max-width: 860px) { .founder .who { grid-column: 1 / -1; } }

/* ---------- FAQ ---------- */
.faq { padding: clamp(64px, 11vh, 130px) var(--gutter); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 36px 0; }
.faq h2 { grid-column: 1 / span 4; font-weight: 600; font-size: clamp(2rem, 3.3vw, 3.3rem); line-height: 1.02; letter-spacing: -0.035em; align-self: start; }
.qa { grid-column: 6 / span 7; border-top: 1px solid rgba(201, 209, 218, 0.28); }
.qa details { border-bottom: 1px solid rgba(201, 209, 218, 0.18); }
.qa summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 20px 0; font-weight: 560; font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.35; letter-spacing: -0.01em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary .chev { width: 20px; height: 20px; flex: none; color: var(--text-2); transition: transform .4s var(--ease-out); }
.qa details[open] summary .chev { transform: rotate(180deg); }
.qa summary:hover { color: #fff; }
.qa details p { padding: 0 40px 22px 0; color: var(--text-2); line-height: 1.68; max-width: 62ch; }
.qa a { color: var(--text); text-decoration-color: rgba(201, 209, 218, 0.5); }
.qa a:hover { text-decoration-color: var(--text); }
@media (max-width: 860px) { .faq h2, .qa { grid-column: 1 / -1; } }

/* ---------- founder page: also-known-as and the key facts label ---------- */
.fp-aka { color: var(--text-2); font-size: 1.05rem; margin-top: -10px; }
.facts { padding: 0 !important; background: none !important; clip-path: none !important; }
.facts .nameplate { margin: 0; }
.facts .nameplate h2 { font-weight: 700; font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; }

/* the active language stays legible under hover */
.top nav .lang a[aria-current="true"], .top nav .lang a[aria-current="true"]:hover { color: var(--ink-on-silver); }

@media (prefers-reduced-motion: reduce) {
  .bus:hover::after, .bus:focus-visible::after, .bus.is-live::after, .more:hover::after, .more:focus-visible::after { animation: none; background-position: 50% 0; }
}
