/*!
 * Holonova website: site styles.
 * Load order: holonova-fonts.css -> holonova-tokens.css (v2) -> holonova-v3.css -> this file.
 * This file holds the website's components and the "Build notes" overrides of v2
 * (docs/design-system-v3.md). It defines no colour and no font family: every value
 * comes from the v2 colour tokens or the v3 type, radius and motion tokens.
 */

/* ============================================================
   1. BASE AND OVERRIDES OF v2 DEFAULTS
   ============================================================ */
:root {
  --content-max: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-pad: clamp(72px, 8vw, 112px);
  --shelf-gap: 24px;
  --figure-size: 18px;          /* the figure sentence (open gaps, Pass 4) */
  --figure-number-size: 24px;   /* the number, one step up: the statement size */
  --bar-height: 72px;           /* the phone booking bar, button plus padding */
  --panel-distance: -16px;      /* the top panels slide in from above */
  --z-tab: var(--z-sticky);
  --z-bar: var(--z-sticky);
  --z-panel: var(--z-dialog);
  --logo-color: #FFFFFF;
}
[data-theme="light"] { --logo-color: var(--orange-identity); }
@media (prefers-reduced-motion: reduce) { :root { --panel-distance: 0px; } }

html { scroll-padding-top: 80px; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--color-canvas);
  font-size: var(--t-body-size);
  line-height: var(--t-body-leading);
  overflow-x: clip;
}
main:focus { outline: none; }
p { max-width: var(--measure); }
ul, ol { margin: 0; padding: 0; }
img { height: auto; }

.js .nojs-only, .no-js .js-only { display: none !important; }

/* The skip link appears at once: v2 slides it with a transition on top (house rule 20). */
.skip-link { transition: none; border-radius: var(--radius-button); padding: 12px 20px; }

/* Links in body text. Visited links change colour only, which browsers allow. */
main p a, main li > a:not([class]) { text-decoration-line: underline; }
@media (hover: hover) and (pointer: fine) {
  a { transition: color var(--duration-hover) var(--ease-standard); }
}
main p a:visited { color: var(--color-text-secondary); }

.container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.section { padding-block: var(--section-pad); }

/* Not yet on record: a line of text in place of the missing fact, never a chip (chips are statuses). */
.nyr { font-size: var(--t-small-size); line-height: var(--t-small-leading); font-style: italic; color: var(--color-text-secondary); }
/* A draft line awaiting the founder's approval at Gate 3. */
.draft {
  display: inline-block; margin-inline-start: .35em; vertical-align: .15em;
  font: italic 400 11px/1 var(--font-sans); letter-spacing: 0; text-transform: none;
  color: var(--color-text-secondary);
}

/* ============================================================
   2. TYPE
   ============================================================ */
.h-section {
  font-size: var(--t-h2-size); line-height: var(--t-h2-leading);
  letter-spacing: var(--t-h2-tracking); font-weight: var(--t-h2-weight);
  max-width: 22ch;
}
.h-section--question { max-width: 26ch; }
.h-statement, .closing__h, .contact__title {
  font-size: var(--t-statement-size); line-height: var(--t-statement-leading);
  letter-spacing: var(--t-statement-tracking); font-weight: var(--t-statement-weight);
}
.h-card {
  font-size: var(--t-h3-size); line-height: var(--t-h3-leading);
  letter-spacing: var(--t-h3-tracking); font-weight: var(--t-h3-weight);
}
.t-label {
  font: 400 var(--t-label-size)/var(--t-label-leading) var(--font-mono);
  letter-spacing: var(--t-label-tracking); text-transform: uppercase; color: var(--color-text-secondary);
}
.section > .container > .h-section + * { margin-top: var(--space-2xl); }

/* ============================================================
   3. BUTTONS (v2 .btn at v3 values)
   ============================================================ */
.btn {
  min-height: var(--button-height); padding: 0 var(--button-pad-x);
  border-radius: var(--radius-button);
  font: var(--t-button-weight) var(--t-button-size)/1.2 var(--font-sans);
  letter-spacing: var(--t-button-tracking);
  transition: color var(--duration-hover) var(--ease-standard),
              background-color var(--duration-hover) var(--ease-standard),
              border-color var(--duration-hover) var(--ease-standard),
              transform var(--duration-press) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
/* v2's hover lift, glow and touch hover are removed; hovers return for a mouse only. */
.btn:hover, .btn:active { transform: none; box-shadow: none; }
.btn--primary:hover { background: var(--color-action); border-color: var(--color-action); }
.btn--secondary { border-color: var(--color-text-muted); }
.btn--secondary:hover { background: transparent; border-color: var(--color-text-muted); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--color-action-hover); border-color: var(--color-action-hover); }
  .btn--secondary:hover { background: var(--color-surface-hover); border-color: var(--color-text-secondary); }
}
.btn:active:not(:focus-visible) { transform: scale(var(--press-scale)); transition-duration: 0s; }
.btn--tab { min-height: 40px; padding: 0 18px; font-size: var(--t-nav-size); }
@media (any-pointer: coarse) { .btn--tab { min-height: 44px; } }

.linkish {
  background: none; border: 0; padding: 0; font: inherit; color: var(--color-link);
  text-decoration: underline; text-underline-offset: .18em; cursor: pointer;
}

/* ============================================================
   4. CHIPS
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; min-height: 24px; padding: 3px 10px;
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-chip);
  font: 400 var(--t-chip-size)/1.5 var(--font-mono); letter-spacing: var(--t-chip-tracking);
  text-transform: uppercase; color: var(--color-text-secondary); white-space: nowrap;
}
.chip--live { color: var(--color-text); }
a.chip { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { a.chip:hover { border-color: var(--color-text-secondary); color: var(--color-text); } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ============================================================
   5. THE MENU TAB
   ============================================================ */
.tab-wrap {
  position: sticky; top: 0; z-index: var(--z-tab);
  height: var(--tab-height); margin-bottom: calc(-1 * var(--tab-height));
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  pointer-events: none;
  transition: transform var(--duration-fast) var(--ease-out);
}
.tab-wrap.is-hidden { transform: translateY(calc(-100% - 2px)); }
.tab {
  pointer-events: auto;
  max-width: calc(var(--content-max) - 2 * var(--gutter)); margin-inline: auto;
  height: var(--tab-height);
  display: flex; align-items: center; gap: 12px;
  padding-inline: 20px 12px;
  background: var(--color-canvas);
  border: 1px solid var(--color-line); border-top: 0;
  border-radius: var(--radius-tab);
}
.tab__logo { flex: none; display: block; width: 150px; line-height: 0; }
.logo-img { width: 150px; height: auto; }
.logo-img--orange { display: none; transform: translate(.5px, .5px) scale(1.029); transform-origin: 0 0; }
[data-theme="light"] .logo-img--white { display: none; }
[data-theme="light"] .logo-img--orange { display: block; }

/* On the home page the tab's logo slot stays empty while the hero's big logo is in view,
   so one mark is on screen at a time; it appears within 150ms once that logo has gone
   (the logo rule's fallback path, used for every visitor under Gate 2 scope A). */
.js .tab-wrap--home .tab__logo {
  visibility: hidden; opacity: 0;
  transition: opacity var(--duration-instant) var(--ease-standard), visibility 0s linear var(--duration-instant);
}
.js .tab-wrap--home.is-landed .tab__logo {
  visibility: visible; opacity: 1;
  transition: opacity var(--duration-instant) var(--ease-standard), visibility 0s;
}

/* Feedback 57: the tab's logo glows orange on hover and keyboard focus, in the light of the
   hero's three rings. A filter, so the glow follows the mark's own shape. */
.tab__logo .logo-img { transition: filter var(--duration-fast, 200ms) var(--ease-standard); }
.tab__logo:hover .logo-img, .tab__logo:focus-visible .logo-img {
  filter: drop-shadow(0 0 4px rgb(var(--orange-signal-rgb) / .85)) drop-shadow(0 0 14px rgb(var(--orange-signal-rgb) / .55));
}

.tab__nav { display: none; margin-inline-start: 20px; }
.tab__links { display: flex; gap: 24px; list-style: none; }
.nav__link {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0;
  font: 400 var(--t-nav-size)/var(--t-nav-leading) var(--font-sans);
  color: var(--color-text-secondary); text-decoration: none; white-space: nowrap;
}
.nav__link[aria-current="page"] { color: var(--color-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.nav__link[aria-current="page"]::after { content: none; }
@media (hover: hover) and (pointer: fine) {
  .nav__link { transition: color var(--duration-hover) var(--ease-standard); }
  .nav__link:hover { color: var(--color-text); }
}
.tab__actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.tab__switcher, .tab__menu {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
  background: none; border: 0; border-radius: var(--radius-button); cursor: pointer;
  font: 400 var(--t-nav-size)/1.2 var(--font-sans); color: var(--color-text); text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .tab__switcher, .tab__menu { transition: background-color var(--duration-hover) var(--ease-standard); }
  .tab__switcher:hover, .tab__menu:hover { background: var(--color-surface-hover); }
}
.tab__switcher-long { display: none; }
.btn--tab { display: none; }
/* Phones: the tab holds the 150px logo, the switcher and Menu inside the gutters. */
@media (max-width: 479.98px) {
  .tab { gap: 2px; padding-inline: 16px 4px; }
  .tab__switcher, .tab__menu { padding: 0 8px; gap: 4px; }
  .tab__switcher-short { max-width: 6.5em; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 399.98px) {
  .tab__switcher .icon { display: none; }
  .tab__switcher, .tab__menu { padding: 0 6px; }
}
@media (max-width: 359.98px) {
  .tab__switcher { display: none !important; }
  .tab { padding-inline: 14px 4px; }
}
@media (min-width: 1024px) {
  .btn--tab { display: inline-flex; }
  .tab__switcher-long { display: inline; }
  .tab__switcher-short { display: none; }
}
/* The dark and light switch (feedback 62): a round button with a moon in dark mode and a sun
   in light mode. From 1408px it hangs just outside the tab, on its right, with TR | EN beside
   it (feedback 84; it was 1240px before the language switch needed the room); from 480px it
   sits in the tab, left of Menu; on phones it is in the Menu panel's head. */
.tab { position: relative; }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  color: var(--color-text); background: var(--color-canvas);
  border: 1px solid var(--color-line); border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle .icon { width: 20px; height: 20px; }
.theme-toggle__sun { display: none; }
[data-theme="light"] .theme-toggle__sun { display: block; }
[data-theme="light"] .theme-toggle__moon { display: none; }
@media (hover: hover) and (pointer: fine) {
  .theme-toggle { transition: color var(--duration-hover) var(--ease-standard), box-shadow var(--duration-hover) var(--ease-standard); }
  .theme-toggle:hover { color: var(--color-text-signal); box-shadow: 0 0 0 1px rgb(var(--orange-signal-rgb) / .45), 0 0 16px rgb(var(--orange-signal-rgb) / .3); }
}
.theme-toggle--tab { display: none; }
.js .theme-toggle--panel { margin-inline-start: auto; margin-inline-end: 8px; }
@media (min-width: 480px) {
  .js .theme-toggle--tab { display: inline-flex; }
}
@media (min-width: 768px) {
  .theme-toggle--panel { display: none !important; }
}
/* TR | EN (feedback 84): right next to the dark and light switch, in the same round-ended
   outline. Plain links to the same page in the other language, so it works without scripts;
   the language being read is in full text colour, the other one muted. From 1240px the pair
   hangs outside the tab on its right, as the switch alone did. */
.tab__prefs { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.lang-switch {
  display: inline-flex; align-items: center; flex: none; height: 44px; padding: 0 4px;
  background: var(--color-canvas); border: 1px solid var(--color-line); border-radius: var(--radius-full);
}
.lang-switch__opt {
  display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 42px; padding: 0 4px;
  font: 500 13px/1 var(--font-mono); letter-spacing: .04em; color: var(--color-text-muted); text-decoration: none;
  border-radius: var(--radius-full); -webkit-tap-highlight-color: transparent;
}
.lang-switch__opt[aria-current="true"] { color: var(--color-text); }
.lang-switch__sep { font: 400 13px/1 var(--font-mono); color: var(--color-text-faint); }
.lang-switch__opt:focus-visible { outline: 2px solid var(--color-text-signal); outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) {
  .lang-switch { transition: box-shadow var(--duration-hover) var(--ease-standard); }
  .lang-switch:hover { box-shadow: 0 0 0 1px rgb(var(--orange-signal-rgb) / .45), 0 0 16px rgb(var(--orange-signal-rgb) / .3); }
  .lang-switch__opt { transition: color var(--duration-hover) var(--ease-standard); }
  .lang-switch__opt:hover { color: var(--color-text-signal); }
}
.lang-switch--panel { display: none; }
.js .lang-switch--panel { margin-inline-end: 8px; }
/* Below 768px the tab has no room for it (measured: the tab ran 88px past a 480px screen in
   English, 127px in Turkish), so it sits in the Menu panel's head beside that panel's dark and
   light switch, which shows up to 767px for this; and always in the footer, which also serves
   pages without scripts. */
@media (max-width: 767.98px) {
  .lang-switch--tab { display: none; }
  .js .lang-switch--panel { display: inline-flex; }
}
.lang-switch--footer { margin-top: 16px; width: max-content; }
/* Outside the tab only where both fit beside it: 12 + 44 + 8 + 86px on each side of the
   1104px tab needs a 1404px screen. Between 1240 and 1407px they stay inside the tab. */
@media (min-width: 1408px) {
  .tab__prefs { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); }
}
/* Gate 3 (feedback 1, 13:38): Menu stays at the far right at every width. */

/* The top panels (Menu and the role switcher): native modal dialogs hanging from the top. */
.panel {
  position: fixed; inset: 0 0 auto 0; margin: 0 auto;
  width: min(calc(100% - 2 * var(--gutter)), calc(var(--content-max) - 2 * var(--gutter)));
  max-width: none; max-height: min(90dvh, 720px); overflow: auto; overscroll-behavior: contain;
  padding: 12px 20px 24px;
  background: var(--color-surface-raised); color: var(--color-text);
  border: 1px solid var(--color-line); border-top: 0; border-radius: var(--radius-tab);
  box-shadow: var(--elevation-3);
}
.panel[open] { animation: panel-in var(--duration-fast) var(--ease-out); }
.panel::backdrop { background: rgb(var(--ink-950-rgb) / .72); }
@keyframes panel-in { from { opacity: 0; transform: translateY(var(--panel-distance)); } }
.panel__head { display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin-bottom: 8px; }
.panel__title { font: 400 var(--t-nav-size)/1.2 var(--font-sans); color: var(--color-text-secondary); }
.panel__close {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin-inline-end: -8px;
  background: none; border: 0; border-radius: var(--radius-button); color: var(--color-text); cursor: pointer;
}
.panel__rows { list-style: none; }
.panel__row {
  display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0;
  font: 400 17px/1.3 var(--font-sans); color: var(--color-text); text-decoration: none;
  background: none; border: 0; border-bottom: 1px solid var(--color-line); cursor: pointer; text-align: left;
}
.panel__row[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.panel__switcher-slot { display: none; }
@media (max-width: 359.98px) { .panel__switcher-slot { display: block; } }
.panel__book { width: 100%; margin-top: 20px; }
@media (min-width: 1024px) { .panel__book { display: none; } }
html.is-locked { overflow: hidden; }

/* ============================================================
   6. HERO (home)
   ============================================================ */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  display: flex; align-items: center;
  min-height: 100dvh;
  padding-block: calc(var(--tab-height) + 40px) 64px;
  background-color: var(--color-canvas); background-image: var(--gradient-depth);
  clip-path: inset(0);
}
[data-theme="light"] .hero { background: var(--color-surface-raised); }
/* Feedback 63: the hero's warm background and the rings' light fade into the page's own
   ground at the bottom, so no straight edge shows where the next section begins. Above the
   glow and the grain, under the content; the same rule fades to white in light mode. */
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: clamp(160px, 30vh, 340px);
  z-index: var(--z-texture); pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--color-canvas) 92%);
}
/* Grain on one fixed layer, clipped to the hero, dark only (house rule 15). */
.hero__grain {
  position: fixed; inset: 0; z-index: var(--z-texture); pointer-events: none;
  background-image: var(--texture-grain); background-size: 120px 120px;
  opacity: .06; mix-blend-mode: overlay;
}
[data-theme="light"] .hero__grain { display: none; }
.hero__inner { position: relative; z-index: var(--z-content); }
.hero__mark { width: 96px; height: auto; margin-bottom: 28px; overflow: hidden; }
.hero__line {
  font-size: var(--t-h2-size); line-height: var(--t-h2-leading);
  letter-spacing: var(--t-h2-tracking); font-weight: var(--t-h2-weight);
  max-width: 36ch; text-wrap: balance;
}
.hero__sentence { margin-top: 24px; color: var(--color-text-secondary); max-width: 44ch; }
.hero__actions { margin-top: 36px; display: flex; flex-direction: column; gap: 12px; max-width: none; }
.hero__actions .btn { width: 100%; }
@media (min-width: 768px) {
  .hero__mark { width: 128px; margin-bottom: 32px; }
  .hero__actions { flex-direction: row; flex-wrap: wrap; }
  .hero__actions .btn { width: auto; }
}
@media (min-width: 1024px) { .hero__mark { width: 160px; } }
@media (max-height: 500px) {
  .hero__mark { width: 64px; margin-bottom: 16px; }
  .hero { min-height: auto; padding-block: calc(var(--tab-height) + 24px) 40px; }
}

/* The home page's one authored moment: the mark's circles, then the Line's words, rise once. */
@keyframes rise { from { transform: translateY(110%); opacity: 0; } }
@keyframes rise-circle { from { transform: translateY(100px); opacity: 0; } }
.hero__mark circle { animation: rise-circle var(--duration-rise) var(--ease-out) both; animation-delay: calc(var(--i) * var(--stagger-step)); }
.rise__w { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.rise__w > span { display: inline-block; animation: rise var(--duration-rise) var(--ease-out) both; animation-delay: calc(350ms + var(--i) * var(--stagger-step)); }
@media (prefers-reduced-motion: reduce) {
  .hero__mark circle, .rise__w > span { animation-delay: 0s !important; }
}

/* ============================================================
   7. WHO WE ARE: THE LEG DIAGRAM
   ============================================================ */
.legs {
  list-style: none; display: grid; gap: 0;
  grid-template-columns: 1fr;
  grid-template-areas: "product" "service" "base";
  position: relative;
}
.legs__part--base { grid-area: base; border-top: 1px solid var(--color-line-strong); padding-top: 20px; }
.legs__part--product { grid-area: product; }
.legs__part--service { grid-area: service; }
.legs__part--product, .legs__part--service { position: relative; padding: 0 0 36px 24px; }
/* One vertical rule joins the stacked legs to the base on phones. */
.legs::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 0; width: 1px; background: var(--color-line-strong); }
.legs__name { font-size: var(--t-h3-size); line-height: var(--t-h3-leading); letter-spacing: var(--t-h3-tracking); font-weight: 500; }
.legs__line { margin-top: 6px; color: var(--color-text-secondary); max-width: 52ch; }
.legs__part--base .legs__line { max-width: var(--measure); }
@media (min-width: 768px) {
  .legs { grid-template-columns: 1fr 1fr; grid-template-areas: "product service" "base base"; column-gap: var(--space-2xl); }
  .legs::before { content: none; }
  .legs__part--product::before, .legs__part--service::before {
    content: ""; position: absolute; left: 0; top: 6px; bottom: 0; width: 1px; background: var(--color-line-strong);
  }
  .legs__part--product, .legs__part--service { padding-bottom: 48px; }
}

/* ============================================================
   8. OUR ECOSYSTEM: FILTERS, ENTRIES, FOOTPRINT
   ============================================================ */
.eco-filter { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-end; margin-bottom: 24px; }
.eco-filter__group { display: grid; gap: 8px; }
.eco-filter__h { font: 400 var(--t-nav-size)/1.2 var(--font-sans); color: var(--color-text-secondary); }
.eco-filter__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.eco-filter__count { font-size: var(--t-small-size); color: var(--color-text-secondary); margin-inline-start: auto; }
.fchip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 14px;
  background: transparent; border: 1px solid var(--color-text-muted); border-radius: var(--radius-chip);
  font: 400 var(--t-small-size)/1.2 var(--font-sans); color: var(--color-text-secondary); cursor: pointer;
}
.fchip__check { display: none; --icon-size: 14px; }
.fchip[aria-pressed="true"] { background: var(--color-surface-hover); color: var(--color-text); border-color: var(--color-text-secondary); }
.fchip[aria-pressed="true"] .fchip__check { display: inline-block; }
@media (hover: hover) and (pointer: fine) {
  .fchip { transition: border-color var(--duration-hover) var(--ease-standard), color var(--duration-hover) var(--ease-standard); }
  .fchip:hover { border-color: var(--color-text-secondary); color: var(--color-text); }
}
@media (any-pointer: coarse) { .fchip::after { content: ""; position: absolute; inset: -6px -2px; } .fchip { min-height: 32px; margin-block: 6px; } }

.eco__list { list-style: none; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .eco__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .eco__list { grid-template-columns: repeat(3, 1fr); } }
.eco-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 24px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card);
}
.eco-card[hidden] { display: none; }
.eco-card__name { font-size: var(--t-h3-size); line-height: var(--t-h3-leading); letter-spacing: var(--t-h3-tracking); font-weight: 500; display: flex; gap: 6px; align-items: center; }
.eco-card__link { color: var(--color-text); text-decoration: none; }
.eco-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.eco-card__ext { color: var(--color-text-secondary); }
.eco-card__line { font-size: var(--t-small-size); line-height: var(--t-small-leading); color: var(--color-text-secondary); }
.eco-card__chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.eco-card__people { list-style: none; display: grid; gap: 10px; margin-top: 6px; }
.person { display: flex; align-items: center; gap: 12px; font-size: var(--t-small-size); color: var(--color-text); }
.person__photo { width: 64px; height: 64px; flex: none; object-fit: cover; border-radius: 0; background: var(--color-surface-raised); }
.eco__empty { margin-top: 16px; }
.eco__empty-actions { display: flex; gap: 20px; margin-top: 8px; }

.footprint { margin-top: var(--space-3xl); display: grid; gap: var(--space-2xl); }
.footprint__title { font-size: 17px; line-height: 1.5; font-weight: 500; letter-spacing: -.01em; margin-bottom: 16px; }
.footprint__people { list-style: none; display: grid; gap: 20px; }
.fp__name { display: flex; align-items: center; gap: 12px; font-size: var(--t-small-size); color: var(--color-text); }
.fp__name .person__photo { width: 64px; height: 64px; }
.fp__companies { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 6px; font-size: 17px; line-height: 1.5; color: var(--color-text-secondary); }
.fp__companies.nyr { font-size: var(--t-small-size); }
.footprint__note { font-size: var(--t-small-size); color: var(--color-text-muted); }
@media (min-width: 1024px) {
  .footprint__people { display: flex; flex-wrap: wrap; gap: 20px 0; }
  .fp { padding-inline: 24px; border-inline-start: 1px solid var(--color-line); }
  .fp:first-child { padding-inline-start: 0; border-inline-start: 0; }
}

/* ============================================================
   9. ROLE SELECTION AND THE SWITCHER
   ============================================================ */
.switcher { display: grid; gap: 0; }
.switcher__step-h { display: none; }
.switcher__size { border-bottom: 1px solid var(--color-line); }
.switcher__size:first-of-type { border-top: 1px solid var(--color-line); }
.switcher__size-h { font: inherit; }
.switcher__size-btn {
  display: grid; gap: 2px; width: 100%; min-height: 72px; padding: 14px 0; text-align: left;
  background: none; border: 0; color: var(--color-text); cursor: pointer;
}
.switcher__size-name { font-size: var(--t-statement-size); line-height: 1.25; letter-spacing: var(--t-statement-tracking); font-weight: 500; }
.nojs-only.switcher__size-name { display: block; padding: 20px 0 8px; }
.switcher__size-line { font-size: var(--t-small-size); font-style: italic; color: var(--color-text-secondary); }
.switcher__back {
  min-height: 44px; padding: 0; margin: 4px 0 8px; background: none; border: 0; cursor: pointer;
  font: 400 var(--t-nav-size)/1.2 var(--font-sans); color: var(--color-text-secondary); text-decoration: underline; text-underline-offset: 4px;
}
.switcher__list { list-style: none; display: grid; gap: 0 32px; }
.switcher__role {
  display: flex; align-items: center; min-height: 56px;
  font-size: 17px; line-height: 1.3; color: var(--color-text); text-decoration: none;
}
.switcher__role[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
@media (hover: hover) and (pointer: fine) {
  .switcher__role { transition: color var(--duration-hover) var(--ease-standard); }
  .switcher__role:hover { color: var(--color-link); }
  .switcher__size-btn:hover .switcher__size-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
}
.switcher__more { font-size: var(--t-small-size); color: var(--color-text-secondary); padding-bottom: 16px; }
/* With scripts: step 1 shows the two sizes; step 2 shows one size's roles, with Back. */
.js .switcher[data-step="1"] .switcher__roles { display: none; }
.js .switcher[data-step="2"] .switcher__size:not(.is-open) { display: none; }
.js .switcher[data-step="2"] .switcher__size.is-open { border-top: 1px solid var(--color-line); }
.js .switcher[data-step="2"] .switcher__size-btn { pointer-events: none; min-height: 56px; }
.js .switcher[data-step="2"] .switcher__size-line { display: none; }
@media (min-width: 1024px) { .switcher__list { grid-template-columns: 1fr 1fr; } }
.panel .switcher__size-name { font-size: 17px; }
.panel .switcher__size-btn { min-height: 56px; }

/* ============================================================
   10. PAINS AND ANSWERS
   ============================================================ */
.pains { list-style: none; display: grid; gap: 48px; }
.pain { font-size: var(--t-statement-size); line-height: var(--t-statement-leading); letter-spacing: var(--t-statement-tracking); font-weight: 500; max-width: 30ch; }
.pain--nyr { font-size: inherit; }
.pains .pain--nyr { font-weight: 400; letter-spacing: 0; }
.section--pains .pains { gap: 16px; }
.section--response .nyr { display: block; max-width: 60ch; }

/* ============================================================
   11. THE SHELF AND THE OFFER CARD
   ============================================================ */
.shelf { position: relative; }
.shelf__index { display: none; list-style: none; gap: 8px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.ichip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--color-text-muted); border-radius: var(--radius-chip);
  font-size: var(--t-small-size); color: var(--color-text-secondary); text-decoration: none; white-space: nowrap;
}
.ichip[aria-current="true"] { color: var(--color-text); border-color: var(--color-text-secondary); background: var(--color-surface-hover); }
.shelf__row { display: grid; gap: 32px var(--shelf-gap); grid-template-columns: 1fr; }
.shelf__group-h { font: 400 var(--t-nav-size)/1.3 var(--font-sans); color: var(--color-text-secondary); margin-bottom: 12px; }
.shelf__group.is-marked .shelf__group-h { color: var(--color-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.shelf__cards { list-style: none; display: grid; gap: 12px; }
.shelf__all { display: none; margin-top: 12px; font-size: var(--t-small-size); }
.shelf__base {
  position: relative; display: grid; gap: 2px 16px; margin-top: 24px; padding: 18px 0 4px;
  border-top: 1px solid var(--color-line-strong); color: var(--color-text); text-decoration: none;
}
.shelf__base-name { font-size: var(--t-h3-size); font-weight: 500; letter-spacing: var(--t-h3-tracking); }
.shelf__base-short { font-size: var(--t-small-size); color: var(--color-text-secondary); }
.shelf__base-hover { font-size: var(--t-small-size); color: var(--color-text-secondary); opacity: 0; transition: opacity var(--duration-hover) var(--ease-standard); }
.shelf__base:focus-visible .shelf__base-hover { opacity: 1; transition: none; }
@media (hover: hover) and (pointer: fine) {
  .shelf__base:hover .shelf__base-hover { opacity: 1; }
  .shelf__base:hover .shelf__base-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
}
@media (any-pointer: coarse) { .shelf__base-hover { opacity: 1; } }

/* Phones: one swipe row of groups, the next peeking, with an index row above. */
@media (max-width: 767.98px) {
  .shelf__index { display: flex; }
  .shelf__row {
    grid-auto-flow: column; grid-auto-columns: 85%; grid-template-columns: none; gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    align-items: start;
  }
  .shelf__row::-webkit-scrollbar { display: none; }
  .shelf__group { scroll-snap-align: start; }
  .shelf__group--solutions .shelf__item:nth-child(n+4) { display: none; }
  .shelf__all { display: inline-block; }
}
/* Tablets: two rows of two. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .shelf__row { grid-template-columns: 1fr 1fr; }
}
/* Desktop: four groups standing on the base; Solutions holds eight, so it spans two tracks
   and lays its cards out in two columns (open gaps, Pass 4). */
@media (min-width: 1024px) {
  .shelf__row { grid-template-columns: 1fr 1fr 2fr 1fr; align-items: start; }
  .shelf__group--solutions .shelf__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* equal halves whatever the text: a long Turkish line no longer widens one column (feedback 97) */
  .shelf__base { grid-template-columns: auto auto 1fr; align-items: baseline; }
}

.ocard {
  --spotlight-alpha: 0;
  position: relative; height: 100%; display: flex; flex-direction: column; gap: 4px;
  padding: 20px; border: 1px solid var(--color-line); border-radius: var(--radius-card);
  background-color: var(--color-surface);
  background-image: radial-gradient(320px circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
                    rgb(var(--orange-signal-rgb) / calc(var(--spotlight-alpha) * .12)), transparent 72%);
}
.ocard__name { font-size: var(--t-h3-size); line-height: var(--t-h3-leading); letter-spacing: var(--t-h3-tracking); font-weight: 500; }
.ocard__link { color: var(--color-text); text-decoration: none; }
.ocard__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ocard__link:focus-visible { outline: none; }
.ocard:has(.ocard__link:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ocard__short, .ocard__hover { font-size: var(--t-small-size); line-height: var(--t-small-leading); color: var(--color-text-secondary); max-width: none; }
.ocard__short { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* The hover line keeps its space (opacity, so screen readers still read it). */
.ocard__hover { min-height: calc(2 * var(--t-small-size) * var(--t-small-leading)); opacity: 0; }
.ocard:has(.ocard__link:focus-visible) .ocard__hover { opacity: 1; }
.ocard__chips { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
@media (hover: hover) and (pointer: fine) {
  .ocard { transition: border-color var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard), --spotlight-alpha var(--duration-base) var(--ease-standard); }
  .ocard__hover { transition: opacity var(--duration-hover) var(--ease-standard); }
  .ocard:hover { --spotlight-alpha: 1; border-color: var(--color-text-muted); background-color: var(--color-surface-hover); }
  .ocard:hover .ocard__hover { opacity: 1; }
}
@media (any-pointer: coarse) { .ocard__hover { opacity: 1; } }
@media (forced-colors: active) { .ocard, .eco-card, .chip, .fchip, .ichip { border: 1px solid CanvasText; background-image: none; } }

/* ============================================================
   12. THE CLOSING BAND
   ============================================================ */
.closing { padding-block: 0 var(--section-pad); }
.closing__inner { border-top: 1px solid var(--color-line); padding-top: var(--space-3xl); }
.closing__sentence { margin-top: 12px; color: var(--color-text-secondary); }
.closing__action { margin-top: 28px; }
.closing__links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; }

/* ============================================================
   13. FOOTER
   ============================================================ */
.site-footer { border-top: 1px solid var(--color-line); padding-block: var(--space-3xl) calc(var(--space-xl) + env(safe-area-inset-bottom)); color: var(--color-text-secondary); }
.site-footer__top { display: grid; gap: 12px; }
.site-footer__logo { display: inline-block; width: 150px; line-height: 0; }
.site-footer__label { font-size: var(--t-small-size); }
.site-footer__map { display: grid; gap: 32px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-2xl); }
.site-footer__map:focus { outline: none; }
.site-footer__h { font: 400 var(--t-nav-size)/1.3 var(--font-sans); color: var(--color-text); margin-bottom: 12px; }
.site-footer__h a { color: inherit; text-decoration: none; }
.site-footer__map ul { list-style: none; display: grid; gap: 2px; }
.site-footer__map li a { display: inline-flex; align-items: center; min-height: 32px; font-size: var(--t-small-size); color: var(--color-text-secondary); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .site-footer__map a:hover, .site-footer__legal a:hover { color: var(--color-text); text-decoration: underline; } }
@media (any-pointer: coarse) { .site-footer__map li a { min-height: 44px; } }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: var(--space-2xl); padding-top: 20px; border-top: 1px solid var(--color-line); font-size: var(--t-small-size); }
.site-footer__legal p { max-width: none; }
.site-footer__legal a { color: var(--color-text-secondary); }
.site-footer__legal-links { list-style: none; display: flex; gap: 20px; }
@media (min-width: 768px) { .site-footer__map { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ============================================================
   14. THE CONTACT DIALOG AND THE PHONE SHEET
   ============================================================ */
.contact {
  width: min(640px, calc(100% - 2 * var(--gutter))); max-width: none; max-height: min(92dvh, 860px);
  padding: 32px; overflow: auto; overscroll-behavior: contain;
  background: var(--color-surface-raised); color: var(--color-text);
  border: 1px solid var(--color-line); border-radius: var(--radius-dialog); box-shadow: var(--elevation-3);
}
.contact::backdrop { background: rgb(var(--ink-950-rgb) / .72); }
.contact[open] { animation: dialog-in var(--duration-dialog) var(--ease-out); }
.contact[open]::backdrop { animation: backdrop-in var(--duration-backdrop) var(--ease-standard); }
.contact.is-closing { animation: dialog-out 200ms var(--ease-standard) forwards; }
.contact.is-closing::backdrop { animation: backdrop-out 200ms var(--ease-standard) forwards; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(var(--dialog-distance)) scale(var(--dialog-scale)); } }
@keyframes dialog-out { to { opacity: 0; } }
@keyframes backdrop-in { from { opacity: 0; } }
@keyframes backdrop-out { to { opacity: 0; } }
.contact__form { display: grid; gap: 20px; position: relative; }
.contact__close {
  position: absolute; top: -12px; right: -12px; display: inline-grid; place-items: center; width: 44px; height: 44px;
  background: none; border: 0; border-radius: var(--radius-button); color: var(--color-text); cursor: pointer;
}
.contact__handle { display: none; }
.contact__title { padding-inline-end: 40px; }
.ways { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.way {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  min-height: 64px; padding: 12px 16px; cursor: pointer;
  border: 1px solid var(--color-text-muted); border-radius: var(--radius-card);
}
.way__radio { width: 20px; height: 20px; margin: 0; accent-color: var(--color-action); }
.way__text { display: grid; gap: 2px; }
.way__label { font-size: 17px; line-height: 1.35; font-weight: 500; }
.way__line { font-size: var(--t-small-size); line-height: 1.45; color: var(--color-text-secondary); }
.way__check { display: none; --icon-size: 20px; }
.way:has(.way__radio:checked) { background: var(--color-surface-hover); border-color: var(--color-text-secondary); }
.way:has(.way__radio:checked) .way__check { display: inline-block; }
.way:has(.way__radio:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.way__radio:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) {
  .way { transition: border-color var(--duration-hover) var(--ease-standard), background-color var(--duration-hover) var(--ease-standard); }
  .way:hover { border-color: var(--color-text-secondary); }
}
.contact__words .textarea { border-color: var(--color-text-muted); border-radius: var(--radius-sm); font-size: 16px; min-height: 88px; }
.contact__submit { width: 100%; white-space: normal; min-height: var(--button-height); height: auto; padding-block: 12px; }
.contact__alt { font-size: var(--t-small-size); color: var(--color-text-secondary); }
/* Phones and short screens: the dialog becomes a bottom sheet. */
@media (max-width: 767.98px), (max-height: 500px) {
  .contact {
    width: 100%; max-width: 100%; margin: auto 0 0; max-height: 90dvh;
    padding: 12px 20px calc(24px + env(safe-area-inset-bottom));
    border-radius: var(--radius-dialog) var(--radius-dialog) 0 0; border-bottom: 0;
  }
  .contact.is-tall { height: 90dvh; }
  .contact[open] { animation: sheet-in var(--duration-dialog) var(--ease-out); }
  .contact__handle {
    display: block; justify-self: center; width: 64px; height: 24px; margin: 0 auto -8px; padding: 0;
    background: none; border: 0; cursor: grab; position: relative;
  }
  .contact__handle::before { content: ""; position: absolute; left: 12px; right: 12px; top: 9px; height: 5px; border-radius: 3px; background: var(--color-text-muted); }
  .contact__close { top: -4px; right: -8px; }
}
@keyframes sheet-in { from { transform: translateY(100%); } }

/* ============================================================
   15. THE PHONE BOOKING BAR
   ============================================================ */
.booking-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar);
  padding: 12px max(var(--gutter), env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-right));
  background: var(--color-canvas); border-top: 1px solid var(--color-line);
  transform: translateY(0); transition: transform var(--duration-fast) var(--ease-out), visibility 0s;
}
.booking-bar.is-hidden { transform: translateY(100%); visibility: hidden; transition: transform var(--duration-fast) var(--ease-out), visibility 0s linear var(--duration-fast); }
.booking-bar__btn { width: 100%; min-height: 48px; }
.no-js .booking-bar { display: none; }
@media (min-width: 1024px) { .booking-bar { display: none; } }
@media (max-width: 1023.98px) { html.has-bar { scroll-padding-bottom: calc(var(--bar-height) + env(safe-area-inset-bottom)); } }
@media (max-height: 500px) { .booking-bar { display: none; } }

/* ============================================================
   16. PRINT AND FORCED COLOURS
   ============================================================ */
@media print {
  .tab-wrap, .booking-bar, .panel, .contact, .hero__grain, .shelf__index, .eco-filter { display: none !important; }
  .hero { min-height: auto; }
}
@media (forced-colors: active) {
  .nav__link[aria-current="page"], .switcher__role[aria-current="page"] { color: Highlight; }
  .fchip[aria-pressed="true"] { border-color: Highlight; }
  .way:has(.way__radio:checked) { border-color: Highlight; }
}

/* ============================================================
   17. PAGE HEADS (offer and secondary pages): plain canvas, no authored moment
   ============================================================ */
.page-head { padding-block: calc(var(--tab-height) + clamp(48px, 7vw, 88px)) clamp(32px, 4vw, 48px); }
.page-head__h1 { font-size: var(--t-h2-size); line-height: var(--t-h2-leading); letter-spacing: var(--t-h2-tracking); font-weight: var(--t-h2-weight); max-width: 22ch; }
.page-head__line { margin-top: 16px; font-size: var(--t-statement-size); line-height: var(--t-statement-leading); letter-spacing: var(--t-statement-tracking); color: var(--color-text-secondary); max-width: 44ch; }
.page-head__line.nyr, .page-head__line .draft { font-size: var(--t-small-size); letter-spacing: 0; }
.page-head__line .draft { font-size: 11px; }
.page-head__sub { margin-top: 16px; color: var(--color-text-secondary); }
.tagrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 24px; max-width: none; }
.tagrow__maker { font-size: var(--t-small-size); color: var(--color-text-secondary); }
.tagrow__asof { font: 400 11px/1.5 var(--font-mono); letter-spacing: .04em; color: var(--color-text-secondary); }

/* ============================================================
   18. OFFER PAGES
   ============================================================ */
.offer { padding-bottom: var(--section-pad); }
.offer__text { display: grid; gap: 40px; max-width: 72ch; }
.offer__section { display: grid; gap: 12px; padding-top: 24px; border-top: 1px solid var(--color-line); }
.offer__section p { color: var(--color-text-secondary); }
.offer__section p.nyr { color: var(--color-text-secondary); }
.offer__h { font-size: var(--t-statement-size); line-height: var(--t-statement-leading); letter-spacing: var(--t-statement-tracking); font-weight: 500; color: var(--color-text); }
.offer__visual { margin: 0; padding: 20px 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }

/* The pager: Company Brain to Design, never on /community. */
.pager { border-top: 1px solid var(--color-line); margin-bottom: var(--space-2xl); }
.pager__inner { display: flex; justify-content: space-between; gap: 8px 24px; }
.pager__link { display: inline-flex; align-items: center; min-height: 56px; font-size: 17px; color: var(--color-text); text-decoration: none; }
.pager__link--next { margin-inline-start: auto; text-align: right; }
@media (hover: hover) and (pointer: fine) { .pager__link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; } }
@media (max-width: 767.98px) {
  .pager__inner { flex-direction: column; }
  .pager__link--next { margin-inline-start: 0; text-align: left; }
}
.notin { padding-bottom: var(--section-pad); }
.notin p { color: var(--color-text-secondary); }
.notin__links { display: flex; gap: 20px; margin-top: 12px; }

/* ============================================================
   19. THE OFFERS HUB: fuller cards, stacked by group on phones, and the status legend
   ============================================================ */
.offers-hub { padding-bottom: var(--section-pad); }
.ocard--full { gap: 6px; }
.ocard--full .ocard__short { -webkit-line-clamp: unset; display: block; }
.ocard__hover--shown { opacity: 1; min-height: 0; }
.ocard__line { font-size: var(--t-small-size); line-height: var(--t-small-leading); color: var(--color-text-secondary); margin-top: 4px; }
.ocard__maker { font-size: var(--t-small-size); line-height: var(--t-small-leading); color: var(--color-text-secondary); }
.shelf--full .shelf__group { scroll-margin-top: 96px; }
.shelf--full .shelf__group-h { font-size: var(--t-nav-size); }
@media (max-width: 767.98px) {
  .shelf--full .shelf__row {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr;
    overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none;
  }
  .shelf--full .shelf__group--solutions .shelf__item:nth-child(n+4) { display: list-item; }
}
.legend { margin-top: var(--space-3xl); max-width: 72ch; }
.legend__h { font-size: var(--t-h3-size); line-height: var(--t-h3-leading); font-weight: 500; margin-bottom: 12px; }
.legend__row { display: grid; grid-template-columns: 11rem 1fr; gap: 8px 16px; align-items: baseline; padding-block: 12px; border-bottom: 1px solid var(--color-line); }
.legend__row dd { margin: 0; color: var(--color-text-secondary); }
@media (max-width: 479.98px) { .legend__row { grid-template-columns: 1fr; } }

/* ============================================================
   20. SECONDARY PAGES: about, role hub, booking, security, glossary
   ============================================================ */
.section--tight-top { padding-top: var(--space-xl); }
.actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; max-width: none; }
.ecosystem-page { padding-bottom: var(--section-pad); }
.ecosystem-page .actions-row { margin-top: var(--space-2xl); }

.founders { list-style: none; display: grid; gap: 24px; margin-bottom: var(--space-2xl); }
.founder { display: flex; align-items: center; gap: 20px; }
.founder__photo { width: 160px; height: 160px; object-fit: cover; flex: none; background: var(--color-surface-raised); }
.founder__name { font-size: var(--t-h3-size); line-height: var(--t-h3-leading); font-weight: 500; }
.founder__role { font-size: var(--t-small-size); color: var(--color-text-secondary); }
@media (max-width: 479.98px) { .founder__photo { width: 96px; height: 96px; } }

.for-hub { display: grid; gap: var(--space-2xl); padding-bottom: var(--section-pad); }
.for-hub__h { font-size: var(--t-statement-size); line-height: 1.25; font-weight: 500; letter-spacing: var(--t-statement-tracking); }
.for-hub .switcher__list { margin-top: 8px; border-top: 1px solid var(--color-line); }
.for-hub .switcher__role { border-bottom: 1px solid var(--color-line); }

.book { padding-bottom: var(--section-pad); display: grid; gap: 20px; max-width: 72ch; }
.book__ways { list-style: none; display: grid; gap: 10px; }
.book__link {
  display: grid; gap: 2px; min-height: 64px; padding: 14px 18px; text-decoration: none; color: var(--color-text);
  border: 1px solid var(--color-text-muted); border-radius: var(--radius-card);
}
.book__way:target .book__link { background: var(--color-surface-hover); border-color: var(--color-text-secondary); }
@media (hover: hover) and (pointer: fine) { .book__link:hover { border-color: var(--color-text-secondary); } }
.book__alt, .book__none { font-size: var(--t-small-size); color: var(--color-text-secondary); }
.thanks { padding-bottom: var(--section-pad); display: grid; gap: 24px; }
.thanks__h { font-size: var(--t-statement-size); line-height: 1.25; font-weight: 500; }
.thanks__people { list-style: none; display: grid; gap: 20px; }
.thanks__ask { font-size: var(--t-statement-size); line-height: var(--t-statement-leading); max-width: 30ch; }

.sec-topic { display: grid; gap: 12px; padding-top: 24px; border-top: 1px solid var(--color-line); }
.sec-topic p { color: var(--color-text-secondary); }
.sec-list { display: grid; gap: 0; }
.sec-list > div { display: grid; grid-template-columns: 8rem 1fr; gap: 16px; padding-block: 10px; border-bottom: 1px solid var(--color-line); }
.sec-list dt { font-weight: 500; }
.sec-list dd { margin: 0; color: var(--color-text-secondary); }
@media (max-width: 479.98px) { .sec-list > div { grid-template-columns: 1fr; gap: 2px; } }

.brief { padding-block: calc(var(--tab-height) + 48px) var(--section-pad); max-width: 76ch; display: grid; gap: 28px; }
.brief__status { font-size: var(--t-small-size); color: var(--color-text-secondary); font-style: italic; }
@media print {
  .page-brief .site-footer { display: none; }
  .brief { padding: 0; max-width: none; gap: 12pt; }
  .brief .actions-row { display: none; }
}

.glossary { padding-bottom: var(--section-pad); display: grid; gap: var(--space-2xl); max-width: 76ch; }
.glossary__group { display: grid; gap: 12px; }
.glossary__group > p { color: var(--color-text-secondary); }
.glossary__list { display: grid; }
.glossary__entry { display: grid; grid-template-columns: 11rem 1fr; gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--color-line); scroll-margin-top: 96px; }
.glossary__entry:target { background: var(--color-surface); }
.glossary__entry dt { font-weight: 500; }
.glossary__entry dd { margin: 0; color: var(--color-text-secondary); }
@media (max-width: 479.98px) { .glossary__entry { grid-template-columns: 1fr; gap: 4px; } }

/* ============================================================
   21. ROLE PAGES
   ============================================================ */
.hero--role { min-height: auto; padding-block: calc(var(--tab-height) + clamp(48px, 7vw, 96px)) clamp(56px, 7vw, 96px); }
.orient { display: flex; align-items: center; gap: 12px; font-size: var(--t-nav-size); color: var(--color-text-secondary); margin-bottom: 20px; }
.orient__change, .role-sel .orient__change {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--color-link); text-decoration: underline; text-underline-offset: .18em;
}
.role__headline {
  font-size: var(--t-h2-size); line-height: var(--t-h2-leading); letter-spacing: var(--t-h2-tracking); font-weight: var(--t-h2-weight);
  max-width: 24ch; text-wrap: balance;
}
.role__headline .draft { font-size: 11px; letter-spacing: 0; }
.role__note { margin-top: 20px; max-width: 72ch; }
.h-section--line { max-width: 28ch; }

/* The figure sentence (re-check decision 15): no box; the number in mono at 500, one step up; the source set tight beneath. */
.figure { margin-top: 28px; max-width: 64ch; }
.figure__sentence { font-size: var(--figure-size); line-height: 1.5; color: var(--color-text-secondary); max-width: none; }
.figure__num { font: 500 var(--figure-number-size)/1.2 var(--font-mono); color: var(--color-text); font-variant-numeric: tabular-nums; }
.figure__source { margin-top: 8px; font: 400 11px/1.6 var(--font-mono); letter-spacing: .02em; color: var(--color-text-secondary); max-width: none; }
.figure__source a { color: var(--color-link); }
.figure__nyr { font-style: italic; }
.flag { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.flag__icon { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; }
.chip--vendor { min-height: 20px; padding: 1px 8px; }
/* The count-up's start state is set before paint; a late reveal keeps the number if the script never runs. */
@keyframes reveal-late { to { visibility: visible; } }
.js [data-countup-shown] { visibility: hidden; animation: reveal-late 0s 3s forwards; }
.js [data-countup-shown].is-counting { visibility: visible; animation: none; }
@media (prefers-reduced-motion: reduce) { .js [data-countup-shown] { visibility: visible; animation: none; } }

.role-sel { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: var(--t-statement-size); line-height: 1.3; font-weight: 500; letter-spacing: var(--t-statement-tracking); }
.role-sel .orient__change { font-size: var(--t-nav-size); font-weight: 400; letter-spacing: 0; }
.section--tight { padding-block: var(--space-2xl); }

.answers { display: grid; gap: var(--space-2xl); }
.answer { display: grid; gap: 12px; max-width: 72ch; }
.answer__h { font-size: var(--t-statement-size); line-height: var(--t-statement-leading); letter-spacing: var(--t-statement-tracking); font-weight: 500; }
.answer__text { color: var(--color-text-secondary); max-width: 70ch; }

/* Depth blocks and questions: native details under a 1px rule; a pointer open fades in, nothing moves height. */
.depth { border-top: 1px solid var(--color-line); }
.depth:last-child { border-bottom: 1px solid var(--color-line); }
.depth > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding-block: 10px;
  cursor: pointer; list-style: none; font-size: var(--t-body-size); color: var(--color-text);
}
.depth > summary::-webkit-details-marker { display: none; }
.depth > summary::after { content: "+"; font-family: var(--font-mono); color: var(--color-text-secondary); flex: none; }
.depth[open] > summary::after { content: "\2212"; }
.depth__body { padding-bottom: 16px; display: grid; gap: 8px; color: var(--color-text-secondary); }
.depth__title { color: var(--color-text); font-weight: 500; }
.depth[data-opened-by="pointer"][open] .depth__body { animation: depth-in var(--duration-instant) var(--ease-out); }
@keyframes depth-in { from { opacity: 0; } }
@media (hover: hover) and (pointer: fine) { .depth > summary:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; } }
.refs { list-style: none; display: grid; gap: 10px; }
.refs li { display: grid; gap: 2px; }
.refs__by { font-size: var(--t-small-size); color: var(--color-text-secondary); }

/* What you would own, sign and measure: three stacked rows, never columns. */
.osm { margin-top: var(--space-2xl); max-width: 72ch; }
.osm__h { font-size: var(--t-statement-size); line-height: var(--t-statement-leading); letter-spacing: var(--t-statement-tracking); font-weight: 500; margin-bottom: 16px; }
.osm__rows { list-style: none; display: grid; gap: 16px; }
.osm__rows li { color: var(--color-text-secondary); }
.osm__rows strong { color: var(--color-text); font-weight: 500; margin-inline-end: .35em; }

.qa { margin-top: 20px; max-width: 72ch; }
.qa__missing { padding-block: 12px; border-top: 1px solid var(--color-line); }
.qa__own { margin-top: 20px; }
.section--qa { padding-bottom: var(--space-2xl); }
.shelf__row--role { grid-template-columns: 1fr; }
@media (min-width: 768px) { .shelf__row--role { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .shelf__row--role { grid-template-columns: repeat(4, 1fr); } }
.ocard--case .ocard__hover { min-height: 0; }

/* ============================================================
   15. GATE 3 (1 October 2026): the founder's feedback 1 to 22.
   Each block names the feedback it answers; docs/gate-3-feedback-log.html has the words.
   ============================================================ */

/* One line, one sentence (20): headings even out their lines, body text avoids a lone last
   word; a sentence never shares a line with the next one where copy is one sentence per block. */
h1, h2, h3, h4, .h-section, .h-statement, .pain, .qpain__text, .pcard__name { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* The draft marker on an orange fill keeps the button's text colour. */
.draft--on-fill { color: inherit; opacity: .75; }

/* The bar (1, 2, 4, 6): the orange logo on every page and theme, the five section links
   from 1024px, the selector filled orange and bold, Menu at the far right. */
.tab__logo .logo-img--white { display: none; }
.tab__logo .logo-img--orange, .hero__logo img { display: block; transform: none; }
.tab__logo { width: 132px; }
.tab__logo .logo-img { width: 132px; }
.tab__flow { margin-inline-start: auto; }
.tab__flow + .tab__actions { margin-inline-start: 16px; }
.nav__link[aria-current="location"] { color: var(--color-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.tab__switcher {
  background: var(--color-action); color: var(--color-action-text); font-weight: 600;
  min-height: 40px; padding: 0 16px;
}
@media (hover: hover) and (pointer: fine) { .tab__switcher:hover { background: var(--color-action-hover); } }
@media (min-width: 1024px) { .tab__nav { display: block; } }
@media (min-width: 1024px) and (max-width: 1279.98px) { .tab__links { gap: 18px; } }
@media (max-width: 479.98px) { .tab__logo, .tab__logo .logo-img { width: 112px; } .tab__switcher { padding: 0 10px; } }

/* Below 1024px the section links ride in a thin strip under the bar, swiped sideways. */
.flow-strip {
  pointer-events: auto; display: block;
  max-width: calc(var(--content-max) - 2 * var(--gutter)); margin: 6px auto 0;
  overflow-x: auto; scrollbar-width: none;
}
.flow-strip::-webkit-scrollbar { display: none; }
.flow-strip__links { list-style: none; display: flex; gap: 6px; width: max-content; padding: 4px; background: var(--color-canvas); border: 1px solid var(--color-line); border-radius: var(--radius-chip); }
.flow-strip__link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--radius-chip); font-size: var(--t-small-size); color: var(--color-text-secondary); text-decoration: none; white-space: nowrap; }
.flow-strip__link[aria-current="location"] { background: var(--color-surface-hover); color: var(--color-text); }
@media (min-width: 1024px) { .flow-strip { display: none; } }
@media (max-width: 1023.98px) { html { scroll-padding-top: 128px; } }
/* The strip adds 52px under the bar (6px gap, 46px strip), so a page's title starts below it
   rather than under it (feedback 88: on a 375px phone it sat 6px under the strip). The home
   hero gets the same allowance: with the English line on two lines (86), its logo sat 12px
   under the strip on a 375 by 667 phone. Not in print, where the bar and the strip are hidden. */
@media screen and (max-width: 1023.98px) {
  .page-head { padding-top: calc(var(--tab-height) + 52px + clamp(48px, 7vw, 88px)); }
  .hero:not(.hero--role) { padding-top: calc(var(--tab-height) + 52px + 24px); }
}

/* The hero (10, 11, 12): the heading block in front of the large, light-reactive mark. */
.hero__glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; color: var(--orange-identity); }
.hero__glow-canvas { position: absolute; inset: 0; display: none; }
.hero__glow.has-canvas .hero__glow-canvas { display: block; }
.hero__glow-mark { position: absolute; right: 4%; top: 50%; width: min(55vw, 95vh); height: auto; transform: translateY(-50%); opacity: .35; }
.hero__glow.has-canvas .hero__glow-mark { display: none; }
@media (max-width: 899.98px) { .hero__glow-mark { right: auto; left: 50%; width: 110vw; transform: translate(-50%, -50%); opacity: .2; } }
.hero__heading { display: grid; gap: 10px; font-weight: 500; }
.hero__logo img { width: clamp(180px, 22vw, 260px); height: auto; }
.hero__native {
  display: block; font-size: clamp(40px, 7vw, 88px); line-height: 1.02; letter-spacing: -.03em; font-weight: 600; white-space: nowrap;
}
.cycle { display: inline-grid; vertical-align: top; }
.cycle > * { grid-area: 1 / 1; }
.cycle__sizer { visibility: hidden; }
.cycle__word { color: var(--color-text); transition: opacity .38s var(--ease-standard), filter .38s var(--ease-standard); }
.cycle__word.is-out { opacity: 0; filter: blur(8px); }
@media (prefers-reduced-motion: reduce) { .cycle__word { transition: none; } }
/* Where the line does not fit, it breaks before the cycling word rather than run off the
   screen: first in Turkish ("Yapay Zekâ Odaklı Danışmanlık", feedback 84), now in English too,
   whose line was 401px wide on a 375px phone (feedback 86). Plain wrapping, not the headings'
   balanced wrapping, which split "Yapay Zekâ / Odaklı" although the two words fit one line. */
.hero__native { white-space: normal; text-wrap: wrap; }
.hero__anchored { display: block; font-size: var(--t-h2-size); line-height: 1.15; letter-spacing: var(--t-h2-tracking); color: var(--color-text-secondary); }
.hero__info { position: relative; margin-top: 12px; display: flex; align-items: center; gap: 12px; max-width: 52ch; }
.info-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none;
  border: 1px solid var(--color-text-muted); border-radius: 50%; background: transparent; color: var(--color-text); cursor: pointer;
  font: italic 600 15px/1 var(--font-sans);
}
.info-btn[aria-expanded="true"] { background: var(--color-surface-hover); border-color: var(--color-text-secondary); }
@media (any-pointer: coarse) { .info-btn { width: 44px; height: 44px; } }
.info-pop { font-size: var(--t-small-size); line-height: var(--t-small-leading); color: var(--color-text-secondary); }
.js .info-pop { opacity: 0; visibility: hidden; transition: opacity var(--duration-fast) var(--ease-standard), visibility 0s linear var(--duration-fast); }
.js .info-pop.is-open { opacity: 1; visibility: visible; transition: opacity var(--duration-fast) var(--ease-standard), visibility 0s; }
.hero--home .hero__actions { margin-top: 32px; }
.hero--home { align-items: center; }

/* Sub-headings inside a section. */
.h-sub { font-size: var(--t-statement-size); line-height: var(--t-statement-leading); letter-spacing: var(--t-statement-tracking); font-weight: 500; margin-top: var(--space-3xl); margin-bottom: var(--space-xl); }

/* Why (13): the cascading heading, the sentence with its verb, four picture boxes. */
.why__h { font-size: clamp(56px, 10vw, 128px); line-height: 1; letter-spacing: -.04em; max-width: none; }
.cascade { display: inline-block; font-family: var(--font-mono); font-weight: 500; }
.cascade__c { position: relative; display: inline-block; min-width: .6em; text-align: center; transition: color .2s; }
.cascade__c.is-falling { color: var(--color-action); }
.cascade__trail {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  font-size: .22em; line-height: 1.1; white-space: pre; color: var(--color-text-secondary);
  animation: cascade-fall .9s var(--ease-out) forwards; pointer-events: none;
}
@keyframes cascade-fall { from { opacity: .9; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, 1.2em); } }
.section > .container > .why__h + * { margin-top: var(--space-xl); }
.why__sentence { font-size: var(--t-statement-size); line-height: var(--t-statement-leading); letter-spacing: var(--t-statement-tracking); max-width: 34ch; }
.why__verb { display: inline-block; min-width: 4.4em; color: var(--color-action); font-weight: 600; transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-out); }
.why__verb.is-swap { opacity: 0; transform: translateY(.2em); transition: none; }
@media (prefers-reduced-motion: reduce) { .why__verb { transition: none; } }
.why__boxes { list-style: none; display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin-top: var(--space-2xl); }
@media (min-width: 1024px) { .why__boxes { grid-template-columns: repeat(4, 1fr); } }
.why-box__btn {
  display: grid; gap: 10px; width: 100%; height: 100%; padding: 0 0 16px; text-align: left;
  background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-line); border-radius: var(--radius-card);
  overflow: hidden; cursor: pointer; font: inherit;
}
.why-box__btn[aria-pressed="true"] { border-color: var(--color-action); }
@media (hover: hover) and (pointer: fine) { .why-box__btn { transition: border-color var(--duration-hover) var(--ease-standard); } .why-box__btn:hover { border-color: var(--color-text-secondary); } }
.why-box__pic {
  display: grid; place-items: center; aspect-ratio: 4 / 3;
  background: radial-gradient(120% 90% at 0% 50%, rgb(var(--orange-signal-rgb) / .22), transparent 60%), var(--color-surface-raised);
}
.why-box__pic img { width: 100%; height: 100%; object-fit: cover; }
.why-box__pending { font-size: 12px; color: var(--color-text-muted); }
.why-box__verb { padding-inline: 16px; font-size: var(--t-h3-size); font-weight: 600; letter-spacing: var(--t-h3-tracking); }
.why-box__line { padding-inline: 16px; font-size: var(--t-small-size); line-height: var(--t-small-leading); color: var(--color-text-secondary); }

/* Person cards (14, 15, 16, 17): notched cards in the manner of "Notched Project Card" by
   Maud Benaddi (MIT), written for this site. The cover is the portrait; the round button in
   the notch is the LinkedIn link. */
.pcards { list-style: none; display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .pcards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pcards { grid-template-columns: repeat(4, 1fr); } }
/* "Us" (feedback 74, 5 October 2026): the two partners side by side at the centre of the top
   row, the advisors on the row below, from Ozan Arikan on. */
@media (min-width: 1024px) {
  .pcards--us > :nth-child(1) { grid-column-start: 2; }
  .pcards--us > :nth-child(3) { grid-column-start: 1; }
}
.pcard { display: flex; flex-direction: column; gap: 14px; }
.pcard__cover { position: relative; --notch: 64px; --fillet: 16px; }
.pcard__photo { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-card); background: var(--color-surface-raised); filter: grayscale(1); }
.pcard--notched .pcard__photo {
  -webkit-mask: radial-gradient(circle var(--notch) at calc(100% + 6px) -6px, transparent 98%, #000 100%);
          mask: radial-gradient(circle var(--notch) at calc(100% + 6px) -6px, transparent 98%, #000 100%);
}
.pcard__notch { position: absolute; top: 0; right: 0; width: calc(var(--notch) - 12px); height: calc(var(--notch) - 12px); display: grid; place-items: center; }
.pcard__in {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-surface-raised); border: 1px solid var(--color-line-strong); color: var(--color-text); text-decoration: none;
}
.pcard__in-mark { width: 18px; height: 18px; filter: invert(1) brightness(1.4); }
[data-theme="light"] .pcard__in-mark { filter: none; }
.pcard__in-text { font: 700 16px/1 var(--font-sans); letter-spacing: -.02em; }
@media (hover: hover) and (pointer: fine) { .pcard__in { transition: background-color var(--duration-hover) var(--ease-standard); } .pcard__in:hover { background: var(--color-action); color: var(--color-action-text); } }
.pcard__name { font-size: var(--t-h3-size); line-height: var(--t-h3-leading); letter-spacing: var(--t-h3-tracking); font-weight: 500; }
.pcard__degree { color: var(--color-text-secondary); font-weight: 400; }
.pcard__role, .pcard__venture { font-size: var(--t-small-size); color: var(--color-text); }
.pcard__venture-line { color: var(--color-text-secondary); }
.pcard__expertise { font-size: var(--t-small-size); line-height: var(--t-small-leading); color: var(--color-text-secondary); }
/* Logos only, in equal slots: three to a line, two lines at most (50). Each logo's size comes from
   the build (tools/site-data.mjs, logoFit) as a share of the slot, so all read at one optical size. */
.pcard__companies { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--color-line); }
.co { display: grid; place-items: center; aspect-ratio: 2.4 / 1; min-width: 0; }
.co__logo { display: block; height: auto; max-width: none; filter: grayscale(1) brightness(0) invert(.78); }
[data-theme="light"] .co__logo { filter: grayscale(1) brightness(0) invert(.32); }
/* A company with no logo file on record keeps its name, set as a small wordmark in its slot. */
.co__word { font: 600 11px/1.15 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; text-align: center; color: var(--color-text-secondary); }
.section--who .footprint__note, .ecosystem-page .footprint__note, .page-about .footprint__note { margin-top: 20px; }

/* "Tell us about you" (7, 8): chips per question, then the roles of the chosen area. */
.about { display: grid; gap: 20px; }
.about__intro { font-size: var(--t-small-size); color: var(--color-text-secondary); }
.about__form { display: grid; gap: 24px; }
.about__q { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.about__h { font: 500 17px/1.4 var(--font-sans); color: var(--color-text); padding: 0; }
.about__opt { color: var(--color-text-secondary); font-weight: 400; }
.about__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.about__h-inv { display: none; }
.is-investor .about__h-co { display: none; }
.is-investor .about__h-inv { display: inline; }
.is-investor [data-q="size"] { display: none; }
.about__input { max-width: 420px; }
.about__roles { list-style: none; display: grid; gap: 0 32px; }
@media (min-width: 768px) { .about__roles { grid-template-columns: 1fr 1fr; } }
.about__roles li[hidden] { display: none; }
.about__role { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--color-line); color: var(--color-text); text-decoration: none; font-size: 17px; }
@media (hover: hover) and (pointer: fine) { .about__role:hover { color: var(--color-link); } }
.about__wait { font-size: var(--t-small-size); color: var(--color-text-secondary); }
.panel .about { padding-bottom: 8px; }
.orient__note { margin-top: 6px; }
.contact__about { margin: 4px 0 16px; color: var(--color-text-secondary); }

/* How (18, 19): the pains by quality, the answers naming offerings, the five steps. */
.pains__lead { margin-top: 0; }
.qpains, .qanswers { list-style: none; display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: var(--space-xl); }
@media (min-width: 768px) { .qpains, .qanswers { grid-template-columns: 1fr 1fr; } }
.qpain, .qanswer { padding: 24px; border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-surface); }
.qpain__quality, .qanswer__quality { font: 400 var(--t-label-size)/var(--t-label-leading) var(--font-mono); letter-spacing: var(--t-label-tracking); text-transform: uppercase; color: var(--color-action); }
.qpain__text { margin-top: 10px; font-size: var(--t-h3-size); line-height: var(--t-h3-leading); font-weight: 500; letter-spacing: var(--t-h3-tracking); }
.qpain__figure { margin-top: 12px; font-size: var(--t-small-size); line-height: var(--t-small-leading); color: var(--color-text-secondary); }
.qpain__src { display: block; margin-top: 4px; font-size: 12px; color: var(--color-text-muted); }
.qanswer__need { margin-top: 10px; font-size: 17px; line-height: 1.45; }
.qanswer__offers { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.qoffer { display: grid; padding: 8px 14px; border: 1px solid var(--color-line-strong); border-radius: 14px; color: var(--color-text); text-decoration: none; font-size: var(--t-small-size); font-weight: 500; }
.qoffer__short { font-weight: 400; font-size: 12px; color: var(--color-text-secondary); }
.qanswer.is-active { border-color: var(--color-action); }
.response-block > .nyr { margin-top: 16px; }
.shelf .is-named { border-color: var(--color-action) !important; box-shadow: 0 0 0 1px var(--color-action); }
.steps { margin-top: var(--space-4xl); }
.steps__eyebrow { color: var(--color-action); }
.steps__h { margin-top: 12px; max-width: 30ch; }
.steps__list { list-style: none; display: grid; gap: 16px; margin-top: var(--space-xl); grid-template-columns: 1fr; counter-reset: none; }
@media (min-width: 768px) { .steps__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .steps__list { grid-template-columns: repeat(5, 1fr); } }
.step { padding: 20px; border-top: 1px solid var(--color-line-strong); }
.step__n { font: 500 13px/1 var(--font-mono); color: var(--color-action); }
.step__title { margin-top: 12px; font-size: 17px; line-height: 1.35; font-weight: 500; }
.step__line { margin-top: 6px; font-size: var(--t-small-size); line-height: var(--t-small-leading); color: var(--color-text-secondary); }
.steps__action { margin-top: var(--space-xl); }

/* What (14): the three parts, then the shelf. */
.section--what .legs { margin-top: var(--space-2xl); }

/* Security (21, 22): five framework cards and the footnote, read with the labels. */
.section--security .t-label { color: var(--color-action); margin-bottom: 12px; }
.comply { list-style: none; display: grid; gap: 16px; margin-top: var(--space-2xl); grid-template-columns: 1fr; }
@media (min-width: 768px) { .comply { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .comply { grid-template-columns: repeat(3, 1fr); } }
.comply__card { padding: 24px; border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-surface); }
.comply__label { font-size: var(--t-h3-size); line-height: var(--t-h3-leading); font-weight: 600; letter-spacing: var(--t-h3-tracking); }
.comply__star { color: var(--color-action); }
.comply__line { margin-top: 8px; color: var(--color-text); }
.comply__points { margin-top: 12px; padding-inline-start: 18px; display: grid; gap: 6px; font-size: var(--t-small-size); line-height: var(--t-small-leading); color: var(--color-text-secondary); }
.comply__points li::marker { color: var(--color-action); }
.comply__card .nyr { margin-top: 12px; }
.comply__note { margin-top: 20px; font-size: var(--t-body-size); color: var(--color-text); max-width: 70ch; }
.comply__more { margin-top: 12px; }

/* The investor page (8). */
/* The investor page's risk section (feedback 97): each risk as a short heading, its fact and its source line. */
.role__for { margin-bottom: 8px; color: var(--color-text-secondary); }
.inv-risks { list-style: none; display: grid; gap: 40px; margin-top: var(--space-xl); }
.inv-risk__pain { font-size: var(--t-statement-size); line-height: var(--t-statement-leading); letter-spacing: var(--t-statement-tracking); font-weight: 500; max-width: 34ch; }
.inv-risk__fact { margin-top: 10px; max-width: 68ch; color: var(--color-text-secondary); }
.inv-reading { margin: var(--space-2xl) 0 var(--space-xl); max-width: 60ch; font-style: italic; }
.inv-facts { list-style: none; display: grid; gap: 20px; margin-top: var(--space-2xl); }
.inv-facts__label { font: 400 var(--t-label-size)/var(--t-label-leading) var(--font-mono); letter-spacing: var(--t-label-tracking); text-transform: uppercase; color: var(--color-text-secondary); }

/* One line, one sentence (20), from tablet width up: headings lose their old character caps
   and scale with the viewport so each sentence fits one line; cards widen where they can. */
@media (min-width: 768px) {
  .h-section, .h-section--question, .steps__h, .h-sub, .why__sentence, .hero__info, .comply__note { max-width: none; }
  .h-section { font-size: clamp(28px, 3.9vw, var(--t-h2-size)); }
  .steps__h, .h-sub { font-size: clamp(20px, 2.4vw, var(--t-statement-size)); }
  .why__sentence { font-size: clamp(16px, 2.05vw, var(--t-statement-size)); } /* 16px floor: "Design", "Deploy" and "Control" fit one line at 768px too (92) */
  .comply { grid-template-columns: 1fr; }
  .comply__card { display: grid; grid-template-columns: minmax(220px, 1fr) 2.4fr; column-gap: 32px; }
  .comply__card > :not(.comply__label) { grid-column: 2; }
  .comply__card > .comply__label { grid-row: 1 / span 3; }
  .comply__card > .comply__line { margin-top: 0; }
}
.why__h { overflow: clip; padding-bottom: .05em; }
.cascade__trail { font-size: .14em; }
.why__verb { min-width: 0; }
@media (min-width: 768px) {
  /* Wide rows instead of narrow cards where the copy is a full sentence (20). */
  .qpains, .qanswers { grid-template-columns: 1fr; }
  .qpain { display: grid; grid-template-columns: 160px 1fr; column-gap: 32px; }
  .qpain > :not(.qpain__quality) { grid-column: 2; }
  .qpain__quality { grid-row: 1 / span 2; padding-top: 6px; }
  .qanswer { display: grid; grid-template-columns: 160px 1fr; column-gap: 32px; }
  .qanswer > :not(.qanswer__quality) { grid-column: 2; }
  .qanswer__quality { grid-row: 1 / span 2; padding-top: 4px; }
  .steps__list { grid-template-columns: 1fr; gap: 0; }
  .step { display: grid; grid-template-columns: 56px minmax(220px, 280px) 1fr; column-gap: 24px; align-items: baseline; padding: 16px 0; }
  .step__title, .step__line { margin-top: 0; }
  .legs { grid-template-columns: 1fr; grid-template-areas: "product" "service" "base"; }
  .legs__line, .legs__part--base .legs__line { max-width: none; }
  .legs__part--product, .legs__part--service { padding-bottom: 28px; }
}
.about__roles[hidden], .about__wait[hidden] { display: none; }
.section--why .h-section.why__h { font-size: clamp(56px, 10vw, 128px); }
@media (max-width: 1023.98px) { .tab-wrap.is-hidden { transform: translateY(calc(-100% - 64px)); } }
/* Tablets: a step's title sits above its line so the founder's own sentences fit one line (19, 20). */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .step { grid-template-columns: 56px 1fr; row-gap: 4px; }
  .step__title, .step__line { grid-column: 2; }
  .step__n { grid-row: 1 / span 2; }
}
.why-box__pic { position: relative; overflow: hidden; }
/* Feedback 82 (5 October 2026): the four Why cards larger, after "Circular Gallery" by Ravi
   Katiyar on 21st.dev (no licence stated, so none of its code is used). Every layout: the
   photo fills the card and the verb and its line sit on it, larger. With scripts and motion,
   the cards stand on a ring: the front card large, its neighbours turned away and dimmed,
   the fourth behind; the ring turns to the card that is chosen. */
.why-box__btn { position: relative; padding: 0; gap: 0; border-color: var(--color-line); }
.why-box__pic { aspect-ratio: 4 / 3; }
.why-box__btn::after { content: ""; position: absolute; inset: 40% 0 0 0; background: linear-gradient(to bottom, transparent, rgb(8 9 11 / .88)); pointer-events: none; }
.why-box__verb, .why-box__line { position: absolute; left: 0; right: 0; z-index: 1; padding-inline: clamp(16px, 2vw, 28px); color: #F2F1EE; }
.why-box__verb { bottom: calc(clamp(16px, 2vw, 26px) + 1.6em); font-size: clamp(22px, 2.4vw, 34px); line-height: 1.1; }
.why-box__line { bottom: clamp(14px, 1.8vw, 24px); font-size: clamp(15px, 1.4vw, 19px); line-height: 1.35; color: rgb(242 241 238 / .88); }
.why__boxes:not(.is-ring) { grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .why__boxes:not(.is-ring) { grid-template-columns: 1fr 1fr; } }
.why__nav { display: none; }
.why__boxes.is-ring {
  --cw: min(640px, 82vw); --r: calc(var(--cw) * 1.05);
  display: block; position: relative; height: calc(var(--cw) * .75 + 8px); margin-top: var(--space-2xl);
  perspective: 1800px; transform-style: preserve-3d;
  pointer-events: none; /* the side cards lie behind the ring's own plane; clicks go to the cards */
}
.why__boxes.is-ring > .why-box:not(.is-back) { pointer-events: auto; }
.why__boxes.is-ring > .why-box {
  position: absolute; top: 0; left: 50%; width: var(--cw); margin-left: calc(var(--cw) / -2);
  transform: translateX(calc(var(--d, 0) * 64%)) translateZ(calc(var(--d-abs, 0) * -300px)) rotateY(calc(var(--d, 0) * -30deg)) scale(calc(1 - var(--d-abs, 0) * .14));
  transition: transform 700ms var(--ease-out), opacity 500ms var(--ease-standard), filter 500ms var(--ease-standard);
  z-index: calc(10 - var(--d-abs, 0)); backface-visibility: hidden;
}
.why__boxes.is-ring > .why-box.is-side { opacity: .55; filter: brightness(.7) saturate(.85); }
.why__boxes.is-ring > .why-box.is-back { opacity: 0; pointer-events: none; }
.why__boxes.is-ring > .why-box.is-front .why-box__btn { border-color: var(--color-action); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .7), 0 0 34px rgb(var(--orange-signal-rgb) / .22); }
.why__boxes.is-ring .why-box__btn { aspect-ratio: 4 / 3; height: auto; }
.why__boxes.is-ring .why-box__pic { position: absolute; inset: 0; aspect-ratio: auto; }
.why__boxes.is-ring + .why__nav:not([hidden]) { display: flex; justify-content: center; gap: 16px; margin-top: 20px; }
.why__nav [data-why-prev] .icon { transform: rotate(180deg); }
/* The ring's pause button (feedback 92): "Pause" with its sign while the ring turns on its own,
   "Play" with its sign once pressed; the name and the sign change together. The row is as wide
   as its three buttons, so a mouse resting beside them does not pause the ring. Swipes across the
   ring turn it; up and down still scroll the page (93). */
.why__pause .why__play-i, .why__pause .why__play-t,
.why__pause[data-paused="true"] .why__pause-i, .why__pause[data-paused="true"] .why__pause-t { display: none; }
.why__pause[data-paused="true"] .why__play-i { display: block; }
.why__pause[data-paused="true"] .why__play-t { display: inline; }
.why__boxes.is-ring + .why__nav:not([hidden]) { width: fit-content; margin-inline: auto; }
.why__boxes.is-ring { touch-action: pan-y pinch-zoom; }

/* A logo printed on its own box (Miele, 396) keeps the box in greyscale rather than flattening to a grey block. */
.co__logo--boxed, [data-theme="light"] .co__logo--boxed { filter: grayscale(1); opacity: .85; }
/* Inside cards a draft line is marked by a small dot instead of the word, so the marker never
   pushes a line onto a second row (20). The word stays for screen readers and in the source. */
.pcard .draft, .ocard .draft, .why-box .draft {
  font-size: 0; width: 6px; height: 6px; margin-inline-start: 5px; vertical-align: middle;
  border-radius: 50%; background: var(--color-text-muted);
}
.ocard { padding-inline: 14px; }
@media (min-width: 768px) and (max-width: 1023.98px) { .legs__line { font-size: 14px; } }

/* ============================================================
   16. GATE 3, LAST FEEDBACK (2 October 2026): feedback 23 to 49.
   ============================================================ */

/* The bar (23): the five section links share the free width evenly, larger and bold. */
@media (min-width: 1024px) {
  .tab__flow { flex: 1 1 auto; margin-inline: 24px; }
  .tab__flow + .tab__actions { margin-inline-start: 0; }
  .tab__links { justify-content: space-evenly; gap: 8px; }
  .nav__link { font-size: 17px; font-weight: 600; color: var(--color-text); }
  .nav__link[aria-current="location"] { color: var(--color-action); text-decoration: none; }
}
.flow-strip__link { font-weight: 600; font-size: 15px; }

/* The big cascading headings (26, 33, 34, 47, 49): the Why style, sized so each phrase fits
   one line; --chars is the phrase's length in the monospaced face. */
.h-big {
  --fit: calc((min(100vw, var(--content-max)) - 2 * var(--gutter)) / (var(--chars, 4) * 0.62));
  font-size: min(clamp(48px, 10vw, 128px), var(--fit));
  line-height: 1.02; letter-spacing: -.02em; font-weight: 500; max-width: none;
  overflow: clip; padding-bottom: .06em; margin: 0;
}
.h-big .cascade { font-family: var(--font-mono); font-weight: 500; }
.h-big__part { display: inline-block; white-space: nowrap; }
@media (max-width: 767.98px) {
  .h-big--long { --fit: calc((100vw - 2 * var(--gutter)) / (var(--chars-narrow, 11) * 0.62)); }
  .h-big--long .h-big__part { display: block; }
}
.section > .container > .h-big + * { margin-top: var(--space-xl); }
.closing__h.h-big { font-size: min(clamp(48px, 10vw, 128px), var(--fit)); }

/* One sub-heading size under the big headings (27, 33, 34, 35, 41, 45, 47, 49). */
.h-sub, .steps__h, .closing__sentence.h-sub {
  font-size: clamp(22px, 2.5vw, 30px); line-height: 1.25; letter-spacing: -.01em; font-weight: 500;
  color: var(--color-text); max-width: none;
}
.h-sub { margin-top: var(--space-3xl); margin-bottom: var(--space-xl); }
.h-big + .h-sub { margin-top: var(--space-xl); }
.closing__sentence.h-sub { margin: var(--space-lg, 24px) 0 0; }

/* Who (25, 27, 30, 31): the partner line, colour on hover, LinkedIn's own blue. */
.pcard__partner { font-size: var(--t-small-size); color: var(--color-text-secondary); }
.pcard__cover { overflow: hidden; border-radius: var(--radius-card); }
.pcard__photo--colour { position: absolute; inset: 0; opacity: 0; filter: none; transition: opacity 300ms var(--ease-standard); }
.pcard:hover .pcard__photo--colour, .pcard:focus-within .pcard__photo--colour, .pcard.is-colour .pcard__photo--colour { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pcard__photo--colour { transition: none; } }
.pcard__notch { z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .pcard__in:hover, .pcard__in:focus-visible { background: #0A66C2; border-color: #0A66C2; color: #fff; }
}
.pcard__in:hover .pcard__in-mark, .pcard__in:focus-visible .pcard__in-mark { filter: brightness(0) invert(1); }

/* How (32, 41, 42): the step-by-step form, the larger label, the orange button. */
.about__form { gap: 16px; max-width: 640px; }
.about__progress { font: 500 13px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--color-action); }
.about__step { display: grid; gap: 10px; }
.about__step[hidden] { display: none; }
.about__h { font: 500 clamp(18px, 2vw, 22px)/1.35 var(--font-sans); }
.select.about__select, .about__input {
  width: 100%; min-height: 52px; padding: 0 44px 0 16px; font-size: 17px;
  background-color: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-text-muted); border-radius: 12px;
}
.select.about__select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-text-secondary) 50%), linear-gradient(135deg, var(--color-text-secondary) 50%, transparent 50%); background-position: calc(100% - 22px) 23px, calc(100% - 16px) 23px; background-size: 6px 6px; background-repeat: no-repeat; }
.about__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.about__actions .btn[disabled] { opacity: .45; cursor: not-allowed; }
/* The engagement steps as a flow (feedback 61): a spine joins the five numbered nodes and
   fills with orange as the reader scrolls through them; each node lights up when the light
   reaches it, and its words come up to full strength. Without scripts, or with reduced
   motion, the whole flow shows lit and still. */
.steps--flow .steps__list { position: relative; gap: 0; grid-template-columns: 1fr; }
.steps--flow .step {
  position: relative; border-top: 0; padding: 18px 0;
  display: grid; grid-template-columns: 56px 1fr; column-gap: 20px; row-gap: 4px; align-items: center;
}
.steps--flow .step__title, .steps--flow .step__line { grid-column: 2; margin-top: 0; }
.steps--flow .step__n {
  grid-row: 1 / span 2; z-index: 1; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--color-line-strong); background: var(--color-canvas); color: var(--color-action);
}
.steps--flow .steps__list::before, .steps--flow .steps__list::after {
  content: ""; position: absolute; left: 19px; width: 2px; top: var(--s0, 40px); pointer-events: none;
}
.steps--flow .steps__list::before { bottom: var(--s1, 40px); background: var(--color-line-strong); }
.steps--flow .steps__list::after {
  height: calc((100% - var(--s0, 40px) - var(--s1, 40px)) * var(--p, 1));
  background: linear-gradient(to bottom, rgb(var(--orange-signal-rgb) / .55), rgb(var(--orange-signal-rgb)));
  box-shadow: 0 0 12px rgb(var(--orange-signal-rgb) / .6);
}
.steps--flow:not(.is-armed) .step__n, .steps--flow .step.is-on .step__n {
  background: var(--color-action); border-color: var(--color-action); color: var(--color-action-text);
  box-shadow: 0 0 0 4px rgb(var(--orange-signal-rgb) / .14), 0 0 18px rgb(var(--orange-signal-rgb) / .45);
}
.steps--flow.is-armed .step__n, .steps--flow.is-armed .step__title, .steps--flow.is-armed .step__line {
  transition: background-color 320ms var(--ease-standard), border-color 320ms var(--ease-standard), color 320ms var(--ease-standard),
    box-shadow 320ms var(--ease-standard), opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.steps--flow.is-armed .step:not(.is-on) .step__n { transform: scale(.86); }
.steps--flow.is-armed .step:not(.is-on) .step__title, .steps--flow.is-armed .step:not(.is-on) .step__line { opacity: .38; transform: translateX(10px); }
@media (min-width: 1200px) {
  .steps--flow .step { grid-template-columns: 64px minmax(260px, 300px) 1fr; padding: 22px 0; }
  .steps--flow .step__title { grid-column: 2; }
  .steps--flow .step__line { grid-column: 3; grid-row: 1; }
  .steps--flow .step__n { grid-row: 1; }
}
.steps__eyebrow { font: 500 15px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--color-action); }
.steps__h { margin-top: 12px; margin-bottom: 0; }
/* The five engagement steps a size up for reading (51): number, title and line scale with the viewport. */
.step__n { font-size: 16px; }
.step__title { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.3; }
.step__line { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.5; }
@media (min-width: 1200px) { .step { grid-template-columns: 64px minmax(260px, 300px) 1fr; padding: 22px 0; } }

/* What (34, 36): the quality word centred, large and bold; the text a step larger. */
.qpains, .qanswers { grid-template-columns: 1fr; gap: 16px; }
.qbox { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 24px; border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-surface); }
.qbox__quality { font: 700 clamp(20px, 2.3vw, 26px)/1.2 var(--font-sans); letter-spacing: -.01em; text-transform: none; color: var(--color-action); }
.qbox__main { display: grid; gap: 12px; }
/* The four pain boxes, and the four response boxes, each share one size (52): every row takes the
   tallest box's height and the content sits centred in it. */
.qpains, .qanswers { grid-auto-rows: 1fr; }
.qbox { align-content: center; }
.qpain__text, .qanswer__need { font-size: clamp(18px, 1.9vw, 22px); line-height: 1.35; font-weight: 500; margin: 0; }
.qpain__figure { margin: 0; }
/* Our response (feedback 79, 5 October 2026): orange boxes with dark text, the need and three
   bullets on how it is met; the edge glows light where the pointer is. */
.qbox.qanswer {
  border-color: rgb(var(--orange-signal-rgb));
  background: var(--orange-signal); /* feedback 83: the lightest full orange in the design system, flat */
  color: #16181C;
}
.qanswer .qbox__quality, .qanswer .qanswer__need { color: #16181C; }
.qanswer__how { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; max-width: none; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.45; color: rgb(22 24 28 / .9); }
.qanswer__how li { max-width: none; }
.qanswer__how li::marker { color: #16181C; }
.qanswer__how a { color: #16181C; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.qanswer__how a:focus-visible { outline: 2px solid #16181C; outline-offset: 2px; border-radius: 2px; }
.qbox.qanswer.is-active { border-color: rgb(255 214 170); }
.qanswer::after { background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), rgb(255 244 228 / .98), rgb(255 214 170 / .55) 40%, transparent 70%) !important; }
@media (hover: hover) and (pointer: fine) {
  .qbox.qanswer:hover { box-shadow: 0 0 0 1px rgb(255 214 170 / .5), 0 0 36px rgb(var(--orange-signal-rgb) / .55); }
}

/* Feedback 78 (5 October 2026): each pain box reads in three lines, the pain, the figure and its
   source, each on one line, the figure and the source a step larger than before. */
.qpain__figure { max-width: none; font-size: clamp(15px, 1.45vw, 19px); line-height: 1.45; }
.qpain__src { max-width: none; margin-top: 6px; font-size: clamp(13px, 1.1vw, 15px); line-height: 1.4; }
@media (min-width: 768px) {
  .qbox { grid-template-columns: 200px 1fr; column-gap: 32px; align-items: center; }
  .qbox > .qbox__quality { grid-row: auto; padding-top: 0; }
  .qbox > .qbox__main { grid-column: 2; }
}
.qoffer { display: grid; gap: 2px; padding: 10px 16px; border: 1px solid var(--color-line-strong); border-radius: 14px; color: var(--color-text); text-decoration: none; }
.qoffer__label { font-size: 16px; font-weight: 600; }
.qoffer__short { font-size: 13.5px; color: var(--color-text-secondary); }
.qoffer--multi .qoffer__short a { color: var(--color-text-secondary); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { a.qoffer:hover { border-color: var(--color-action); } .qoffer--multi .qoffer__short a:hover { color: var(--color-text); } }

/* We offer… (43): the pyramid, built from the base up, inside the generated scene. */
.pyr { position: relative; display: grid; place-items: center; min-height: clamp(320px, 46vw, 560px); margin-top: var(--space-xl); isolation: isolate; }
.pyr__scene { position: absolute; inset: 0; z-index: 0; border-radius: var(--radius-card); overflow: hidden; }
.pyr__people {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 34% 62% at 50% 52%, transparent 0%, rgb(0 0 0 / .25) 55%, #000 100%);
          mask-image: radial-gradient(ellipse 34% 62% at 50% 52%, transparent 0%, rgb(0 0 0 / .25) 55%, #000 100%);
}
/* "We offer..." as a stack (feedback 66, option A, 3 October 2026): the four offerings as
   floating platforms, the AI Governance Platform at the base and Services on top, each a slab
   with a lit top face and a front face carrying its name, edged and lit in orange like the
   compliance boxes; "You" stands on the top platform. Widths step in by a tenth per layer so
   the base reads as the foundation. */
.lstack { --slab-top: var(--ink-700); --slab-front: var(--ink-900); --slab-edge: rgb(var(--orange-signal-rgb) / .6); }
[data-theme="light"] .lstack { --slab-top: #FFFFFF; --slab-front: #E9EAEC; }
.lstack__layers { position: relative; z-index: 1; list-style: none; display: grid; justify-items: center; width: min(100%, 560px); padding: 24px 0 40px; }
.lstack__layer { position: relative; z-index: calc(10 - var(--n)); width: calc(70% + (var(--n) - 1) * 10%); margin-top: 10px; }
/* One platform: a top face tilted back in perspective (its near edge keeps the full width, so it
   meets the front face exactly) above a front face carrying the name. */
.lstack__slab { position: relative; display: block; padding-top: 44px; text-decoration: none; color: var(--color-text); }
.lstack__top {
  position: absolute; left: 0; right: 0; bottom: 52px; height: 96px;
  transform-origin: 50% 100%; transform: perspective(760px) rotateX(64deg);
  border: 1px solid var(--slab-edge); border-radius: 18px;
  background:
    radial-gradient(55% 60% at 50% 55%, rgb(var(--orange-signal-rgb) / .22), transparent 75%),
    repeating-linear-gradient(90deg, rgb(var(--orange-signal-rgb) / .07) 0 1px, transparent 1px 28px),
    var(--slab-top);
  box-shadow: 0 0 26px rgb(var(--orange-signal-rgb) / .28);
}
.lstack__front {
  position: relative; display: grid; place-items: center; height: 52px; padding: 0 12px; text-align: center;
  background: linear-gradient(180deg, rgb(var(--orange-signal-rgb) / .12), transparent 40%), var(--slab-front);
  border: 1px solid var(--slab-edge); border-radius: 0 0 16px 16px;
  box-shadow: 0 0 22px rgb(var(--orange-signal-rgb) / .22), 0 18px 26px -14px rgb(0 0 0 / .6);
}
.lstack__name { font-weight: 600; font-size: clamp(14px, 1.5vw, 18px); line-height: 1.2; }
@media (hover: hover) and (pointer: fine) {
  .lstack__slab { transition: transform 240ms var(--ease-out); }
  .lstack__front, .lstack__top { transition: box-shadow var(--duration-hover) var(--ease-standard); }
  .lstack__slab:hover, .lstack__slab:focus-visible { transform: translateY(-4px); }
  .lstack__slab:hover .lstack__front, .lstack__slab:hover .lstack__top { box-shadow: 0 0 36px rgb(var(--orange-signal-rgb) / .45); }
}
.lstack__slab:focus-visible { outline: none; }
.lstack__slab:focus-visible .lstack__front { outline: 2px solid rgb(var(--orange-signal-rgb)); outline-offset: 3px; }
/* You, standing on the top platform: an orange label over a lit figure on a pool of light. */
.lstack__you { position: relative; z-index: 20; display: grid; justify-items: center; gap: 6px; margin-bottom: -58px; }
.lstack__you-label {
  padding: 4px 14px; border-radius: 999px; background: rgb(var(--orange-signal-rgb)); color: #16181C;
  font-weight: 700; font-size: clamp(16px, 1.7vw, 20px); letter-spacing: .02em;
  box-shadow: 0 0 18px rgb(var(--orange-signal-rgb) / .55);
}
.lstack__figure { width: 60px; height: 60px; fill: rgb(var(--orange-signal-rgb)); filter: drop-shadow(0 0 6px rgb(var(--orange-signal-rgb) / .9)) drop-shadow(0 0 20px rgb(var(--orange-signal-rgb) / .55)); }
.lstack__you::after {
  content: ""; position: absolute; left: 50%; bottom: -8px; width: 170px; height: 28px; transform: translateX(-50%); z-index: -1;
  background: radial-gradient(closest-side, rgb(var(--orange-signal-rgb) / .65), transparent); pointer-events: none;
}
.lstack.is-waiting .lstack__layer, .lstack.is-waiting .lstack__you { opacity: 0; transform: translateY(-60px); }
.lstack.is-building .lstack__layer, .lstack.is-building .lstack__you { animation: pyr-drop 520ms var(--ease-out) both; animation-delay: calc((4 - var(--n)) * 180ms); }
@keyframes pyr-drop { from { opacity: 0; transform: translateY(-60px); } }

/* More on our offerings (45, 46): the card stack, fanned in 3D. */
/* The stack's outer cards peek past the content edge by design; the section clips them at
   the screen's edge so the page never scrolls sideways (found 3 October 2026). */
.section--what, .section--why { overflow-x: clip; }
.cstack { position: relative; margin-top: var(--space-xl); }
.cstack__cards { list-style: none; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.cstack__card { flex: 0 0 min(80%, 380px); scroll-snap-align: start; }
.cstack__link { display: grid; height: 100%; border: 1px solid var(--color-line); border-radius: var(--radius-card); overflow: hidden; background: var(--color-surface); color: var(--color-text); text-decoration: none; }
.cstack__pic { display: grid; place-items: center; aspect-ratio: 16 / 10; background: radial-gradient(120% 90% at 0% 50%, rgb(var(--orange-signal-rgb) / .25), transparent 60%), var(--color-surface-raised); }
.cstack__pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cstack__pic-name { font: 600 clamp(24px, 3vw, 34px)/1.1 var(--font-sans); color: var(--color-text); padding: 0 16px; text-align: center; }
.cstack__body { display: grid; gap: 4px; padding: 16px 18px 18px; }
.cstack__name { font-size: 19px; font-weight: 600; }
.cstack__line { font-size: var(--t-small-size); color: var(--color-text-secondary); }
.cstack__go { margin-top: 6px; font-size: var(--t-small-size); color: var(--color-action); }
.cstack__nav { display: none; }
.cstack.is-stacked { height: clamp(420px, 44vw, 500px); perspective: 1400px; }
.cstack.is-stacked .cstack__cards { display: block; position: relative; height: 100%; overflow: visible; padding: 0; }
.cstack.is-stacked .cstack__card {
  position: absolute; left: 50%; top: 0; width: min(78vw, 380px);
  transform: translateX(calc(-50% + var(--d) * 46%)) translateZ(calc(var(--ad) * -120px)) rotateY(calc(var(--d) * -14deg));
  opacity: calc(1 - var(--ad) * .22); z-index: calc(10 - var(--ad));
  transition: transform 520ms var(--ease-out), opacity 520ms var(--ease-out);
}
.cstack.is-stacked .cstack__card.is-far { visibility: hidden; }
.cstack.is-stacked .cstack__card:not(.is-front) .cstack__link { cursor: pointer; }
.cstack.is-stacked .cstack__card.is-front .cstack__link { box-shadow: 0 24px 60px rgb(0 0 0 / .45), 0 0 0 1px rgb(var(--orange-signal-rgb) / .35); }
.cstack.is-stacked + .more-block__all, .cstack.is-stacked ~ .more-block__all { margin-top: 12px; }
.cstack.is-stacked .cstack__nav { display: flex; align-items: center; justify-content: center; gap: 16px; position: absolute; left: 0; right: 0; bottom: -56px; }
.cstack__btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-text-muted); background: transparent; color: var(--color-text); cursor: pointer; }
.cstack__btn[data-cstack-prev] .icon { transform: rotate(180deg); }
.cstack__count { font-size: var(--t-small-size); color: var(--color-text-secondary); min-width: 16ch; text-align: center; margin: 0; }
@media (prefers-reduced-motion: reduce) { .cstack.is-stacked .cstack__card { transition: none; } }
.more-block { padding-bottom: 72px; }
.more-block__all { margin-top: 72px; }

/* The orange spotlight glow (44, 48): a soft ring that brightens toward the pointer. */
.btn--glow, .comply__card, .lstack__front, .qbox, .tab__switcher { position: relative; }
.btn--glow, .tab__switcher { box-shadow: 0 0 0 1px rgb(var(--orange-signal-rgb) / .35), 0 0 18px rgb(var(--orange-signal-rgb) / .22); }
.btn--glow::after, .comply__card::after, .lstack__front::after, .qbox::after, .tab__switcher::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1.5px;
  background: radial-gradient(180px circle at var(--gx, 50%) var(--gy, 50%), rgb(255 190 120 / .95), rgb(var(--orange-signal-rgb) / .35) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity 200ms var(--ease-standard);
}
.comply__card::after, .qbox::after { background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), rgb(255 190 120 / .9), rgb(var(--orange-signal-rgb) / .3) 40%, transparent 70%); }
@media (hover: hover) and (pointer: fine) {
  .btn--glow:hover::after, .tab__switcher:hover::after, .comply__card:hover::after, .lstack__slab:hover .lstack__front::after, .qbox:hover::after { opacity: 1; }
  .btn--glow:hover, .tab__switcher:hover { box-shadow: 0 0 0 1px rgb(var(--orange-signal-rgb) / .5), 0 0 28px rgb(var(--orange-signal-rgb) / .38); }
  .comply__card:hover, .qbox:hover { box-shadow: 0 0 30px rgb(var(--orange-signal-rgb) / .22); }
}
@media (hover: none), (prefers-reduced-motion: reduce) { .btn--glow::after, .tab__switcher::after { opacity: .6; } }

/* Security & Compliance? (47, 48): five equal boxes, larger type, bullets in every box. */
.section--security > .container > .t-label { display: none; }
/* Each row is as tall as its own longest box, and the boxes in a row share that height (48, 81);
   rows no longer all take the height of the tallest box on the page. */
.comply { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 16px; }
@media (min-width: 768px) { .comply { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .comply { grid-template-columns: repeat(3, 1fr); } }
.comply__card { display: flex; flex-direction: column; gap: 10px; padding: 28px; }
@media (min-width: 768px) {
  .comply__card { display: flex; grid-template-columns: none; }
  .comply__card > :not(.comply__label), .comply__card > .comply__label { grid-column: auto; grid-row: auto; }
}
/* Feedback 81 (5 October 2026): no framework badges (the official marks wait for certification),
   and lower boxes: less padding and a smaller gap between the lines. */
.comply__card { padding: 22px 26px; gap: 8px; }
.comply__label { font-size: clamp(20px, 2vw, 24px); }
.comply__line { font-size: 18px; margin: 0; }
.comply__points { font-size: 16px; line-height: 1.45; gap: 8px; margin-top: 4px; }
.comply__note { font-size: 17px; }

/* Want to talk? (49). */
.closing__inner { display: grid; gap: 0; }
.closing__action { margin-top: 28px; }
@media (min-width: 768px) {
  .qbox.qpain, .qbox.qanswer { grid-template-columns: 200px 1fr; align-items: center; }
  .qbox.qpain > .qbox__quality, .qbox.qanswer > .qbox__quality { grid-column: 1; grid-row: 1; padding-top: 0; }
  .qbox.qpain > .qbox__main, .qbox.qanswer > .qbox__main { grid-column: 2; grid-row: 1; }
}
.about__actions [hidden], .about__actions .btn[hidden] { display: none; }
.about__intro { max-width: none; }
.about__intro span { display: block; }
.cstack.is-stacked { height: auto; }
/* Until the script measures the cards (stack.js, fit), the holder's height is estimated from a
   card: its 16:10 picture plus its text, so the arrows open close under the cards (54). */
.cstack.is-stacked .cstack__cards { height: calc(min(78vw, 380px) * .625 + 124px); }
.cstack.is-stacked .cstack__nav { position: static; margin-top: 24px; }
.more-block__all { margin-top: 28px; text-align: center; max-width: none; }
.more-block { padding-bottom: 0; }
/* Compliance boxes in two columns from 900px, so each bullet keeps to one line (20, 48). */
@media (min-width: 900px) { .comply { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .comply { grid-template-columns: repeat(2, 1fr); } }
.comply__points li, .comply__line { max-width: none; }
/* The Company Brain explainer (46). */
.explainer__intro { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.35; font-weight: 500; max-width: none; margin-bottom: var(--space-xl); }
.explainer__items { display: grid; gap: 12px; margin-top: 12px; }
.explainer__items dt { font-weight: 600; }
.explainer__items dd { margin: 2px 0 0; color: var(--color-text-secondary); }
.explainer p, .explainer dd { max-width: none; }
/* The offer pages' text takes the full column, so sentences fit one line from tablet up (20). */
.offer__text { max-width: none; }
.offer__text p, .page-head__line { max-width: none; }
@media (min-width: 768px) and (max-width: 1199.98px) { .offer__text p, .explainer dd, .page-head__line { font-size: clamp(14px, 1.75vw, 17px); } }
/* The pyramid scene (43): the picture fades out where the pyramid stands and at its outer edges. */
.pyr { min-height: clamp(340px, 50vw, 600px); }
.pyr__people {
  -webkit-mask-image: radial-gradient(ellipse 30% 58% at 50% 55%, transparent 0%, transparent 35%, #000 80%), linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in, source-in;
          mask-image: radial-gradient(ellipse 30% 58% at 50% 55%, transparent 0%, transparent 35%, #000 80%), linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, #000 70%, transparent 100%);
          mask-composite: intersect;
}
@media (max-width: 767.98px) { .pyr__scene { opacity: .55; } }
.pcard__role-title, .pcard__role-rest { display: block; }
.pcard__role-rest { color: var(--color-text-secondary); }
/* Tablets: the quality boxes and the compliance boxes stack, so each sentence keeps one line (20). */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .qbox.qpain, .qbox.qanswer { grid-template-columns: 1fr; }
  .qbox.qpain > .qbox__quality, .qbox.qanswer > .qbox__quality, .qbox.qpain > .qbox__main, .qbox.qanswer > .qbox__main { grid-column: 1; grid-row: auto; }
}
@media (max-width: 1023.98px) { .comply { grid-template-columns: 1fr; } }