/* Yalla2x v4: the "Final Yalla2x" Figma page in a minimal studio skin.
   Look taken from the owner's references (C:\Users\dubai\ollama\yalla2x-film\refernece, 2026-10-21):
   white space, one neo-grotesk family, regular-weight display type with tight tracking, two-tone
   statements, [01] tags, soft grey cards, one dark rounded panel per page and a dark rounded footer.
   Shared components live here; page-only styles go in css/pages/<page>.css. */

/* The web fonts (Inter 400, Inter 500-700, Space Grotesk 700 for headings) are declared in css/fonts.css, which
   tools/build.py writes from fonts/ with each file inside as a data: URL, so every page opens from disk too
   (owner, 2026-10-23). Every page links it before this file. */

:root {
  color-scheme: light;
  --bg: #ffffff;
  --ink: #0e0e0e;
  --ink-2: #555553;
  --ink-3: #8a8a86;            /* the grey half of a two-tone heading: large text only (3.5:1) */
  --ink-num: #6b6b67;          /* small numbers and labels on white (5.4:1) */
  --line: #e6e6e2;
  --line-2: #d2d2cd;
  /* a control's or chip's outline (WCAG 1.4.11 asks 3:1): 3.47:1 on white and 3.15:1 on --panel, where the chips of the product
     cards sit (was #8f8f8b: 3.25:1 on white but 2.95:1 on --panel; integration pass 2026-10-22); hairlines keep --line and --line-2 */
  --line-3: #8a8a86;
  --panel: #f4f4f1;
  --panel-2: #ebebe7;
  /* Dark surfaces from the brand guide v8 p.11 (brand pass 2026-10-22): Midnight is "the background of every dark surface", Card the
     raised surface on it. The greys on them are cool, to sit with the blue-black. Measured: on-dark 17.6:1, on-dark-2 8.1:1 and
     on-dark-3 6.1:1 on Midnight; 16.2:1, 7.5:1 and 5.6:1 on Card. */
  --dark: #0B0F14;             /* Midnight */
  --dark-2: #11182B;           /* Card */
  --dark-line: rgba(255, 255, 255, 0.12);   /* hairlines on the dark surfaces */
  --dark-line-2: rgba(255, 255, 255, 0.4);  /* control outlines on the dark surfaces (3.8:1 on Midnight and Card) */
  --on-dark: #F2F5F9;
  --on-dark-2: #A3A9B3;
  --on-dark-3: #8A919C;        /* second tone and small numbers on the dark panels */
  --gold: #f6c453;             /* brand gold (guide: #F6C453): accents only; 11.8:1 on Midnight */
  --gold-light: #FFD680;       /* guide accent Gold Light: highlights on the dark surfaces */
  --gold-deep: #E8A838;        /* guide accent Gold Deep: hover and pressed states of gold */
  --gold-ink: #8a6510;         /* gold that reads on white (5.3:1) */
  --gold-mark: #D4A843;        /* the wordmark's own gold (the "2X" of the logo on white): Home's hero word; 2.21:1 on white, owner's choice */
  --slate: #6B7585;            /* guide accent Slate: rules and marks (as text it is 4.1:1 on Midnight, under AA) */
  --cyan: #2EC9E3;             /* guide accent Cyan: data marks only */
  /* No blue on the site (owner, 2026-10-22: "Wherever you use the blue, I want our brand gold color"). These three old names
     now hold golds so nothing renders blue while pages move to the gold tokens; delete them once no file uses them. */
  --blue: var(--gold-deep);    /* was #4391e3: rules, spines, marks */
  --blue-ink: var(--gold-ink); /* was #1d5fc4: text on white (5.32:1) */
  --blue-soft: #fdf3dc;        /* was #edf4fd: a light gold tint for chips and tiles */
  --err: #b42318;              /* form errors on white (6.6:1): field borders, messages and the error summary (Contact) */
  /* the tick a pressed pill shows before its label (drawn in currentColor through a mask) */
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3l2.4 2.4 5.2-5.4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --font-head: "Space Grotesk", "Inter", system-ui, sans-serif;
  /* the green verified tick (Figma Chip "Sealed"): a 15px circle background, shared by .chip--sealed/--complete/--proof */
  --mark-sealed: #28c08a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M4.5 7.6l2.1 2.1 4-4.4' fill='none' stroke='%2304140d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px 15px no-repeat;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Type scale: the owner's table (2026-10-22, brand guide v8 + the three-breakpoint sheet). Fixed steps, not fluid:
     mobile below 768px here, tablet 768-1199px and desktop from 1200px in the two media blocks after :root.
     Display/Hero 72/56/40, H1 56/44/32, H2 44/36/28, H3 36/30/24, H4 28/24/22, H5 24/22/20, H6 20/20/18,
     Body Large 18, Body 16, Body Small 14, Caption 12. Every font-size in the shared layer (this file, pages/inner-hero.css,
     pages/proof-tables.css) is one of these tokens (brand pass 2026-10-22); the page files are being brought onto them. */
  --t-display: 40px;
  --t-h1: 32px;
  --t-h2: 28px;
  --t-h3: 24px;
  --t-h4: 22px;
  --t-h5: 20px;
  --t-h6: 18px;
  --t-statement: var(--t-h2);
  --t-lead: 18px;              /* Body Large */
  --t-body: 16px;
  --t-small: 14px;             /* Body Small */
  --t-cap: 12px;               /* Caption */

  --gutter: clamp(16px, 3.4vw, 56px);
  --max: 1680px;
  --sec: clamp(88px, 10.5vw, 168px);
  --hdr: 84px;                 /* was 76px; raised in the brand pass (2026-10-22) so a 48px wordmark keeps 1X clear space, see .hdr__logo */
  --logo-h: 48px;              /* the header wordmark's image height (40px on a phone) */
  --r-xl: clamp(20px, 2.2vw, 32px);
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 10px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}
@media (min-width: 768px) {
  :root { --t-display: 56px; --t-h1: 44px; --t-h2: 36px; --t-h3: 30px; --t-h4: 24px; --t-h5: 22px; --t-h6: 20px; }
}
@media (min-width: 1200px) {
  :root { --t-display: 72px; --t-h1: 56px; --t-h2: 44px; --t-h3: 36px; --t-h4: 28px; --t-h5: 24px; --t-h6: 20px; }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 16px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--t-body)/1.6 var(--font); letter-spacing: 0; -webkit-hyphens: none; hyphens: none;   /* brand: Inter Regular, hyphenation off */
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
/* zero specificity (:where), so the inner-page heading defaults below and every component rule win over this reset */
:where(h1, h2, h3, h4) { font-weight: 400; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; }
/* Inner pages: section headings in the brand face and weight (brand guide v8 p.12: Space Grotesk Bold). Home sets its own; the
   hero (.ih) has its own rule; the two-tone statements keep their own type; the shared footer's small caps labels and the film
   dialog are not headings of the page's content (the header menus' titles are paragraphs, .mega__title/.mega__label). The face
   and weight win over every component rule; the tracking and line-height are defaults in :where(), so a component's own
   values (.h3, .post h3, .latest h3) still apply. */
body:not([data-page="index"]) :is(h2, h3, h4):not(.ih *, .statement, .statement *, .ftr *, .vmodal *) { font-family: var(--font-head); font-weight: 700; }
:where(body:not([data-page="index"]) :is(h2, h3, h4):not(.ih *, .statement, .statement *, .ftr *, .vmodal *)) { letter-spacing: -0.025em; line-height: 1.15; }
p { text-wrap: pretty; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; border-radius: 6px; }
.dsec :focus-visible, .ftr :focus-visible { outline-color: var(--gold); }
::selection { background: var(--gold); color: var(--ink); }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.section { padding-block: var(--sec); }
.section--tight { padding-block: calc(var(--sec) * 0.6); }
.section--top0 { padding-top: 0; }
.section--line { border-top: 1px solid var(--line); }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); }
.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack-s > * + * { margin-top: 12px; }
.stack > * + * { margin-top: 24px; }
.mt-l { margin-top: clamp(40px, 5vw, 72px); }
.offset-text { grid-column: 4 / 11; }
.actions--end { justify-content: flex-end; align-self: end; }

/* ---------- type ---------- */
/* line-heights and tracking for Space Grotesk 700 at these sizes (brand pass): display 1.04, headings 1.08-1.15, -0.02 to -0.03em */
.display { font-size: var(--t-display); line-height: 1.04; letter-spacing: -0.03em; }
.h1 { font-size: var(--t-h1); line-height: 1.08; letter-spacing: -0.03em; }
.h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.025em; }
.h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.02em; }
/* card titles are H4 in the owner's table (28/24/22); the pages mark them .h3 (their heading tier), the card sets the size */
.card > .h3, .mcard__top > .h3 { font-size: var(--t-h4); }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); letter-spacing: 0; }
.muted { color: var(--ink-2); }
.small { font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); }
.mute { color: var(--ink-3); }          /* second tone inside a heading or statement */
h3 .mute, caption .mute { color: var(--ink-num); }   /* h3 and caption tiers drop under 24px: needs 4.5:1 */
.dsec .mute, .ftr .mute { color: var(--on-dark-3); }
.statement { font-size: var(--t-statement); line-height: 1.16; letter-spacing: -0.025em; text-wrap: pretty; }
.statement > h2, .statement > p { display: inline; font: inherit; letter-spacing: inherit; }
.statement > p { color: var(--ink-3); }
.dsec .statement > p { color: var(--on-dark-3); }
.tag {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: var(--t-cap); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.3;
}
.tag--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.meta { font-size: var(--t-small); color: var(--ink-2); }
.meta span + span::before { content: "·"; margin-inline: 0.5em; color: var(--ink-3); }
/* Brand guide v8 p.12: tabular figures for any number set; ranged left, no hyphenation, at most 65 characters a line.
   Tabular figures go on the elements that are numbers (Inter's tnum also widens the hyphen by 40%, so prose with "L.L.C-FZ"
   or "re-checkable" must not carry it). The measure: Inter's "0" is wider than its average letter, so 50ch is about 65
   characters; it applies to paragraphs that would otherwise run the width of a wide column; text already in a narrower
   cell is unchanged (.shead > p, .tl__text p, .ftr__brand p, .ih__lead carry their own narrower measures). */
.stat__num, .mcard__num, .rows__n, .acc__n, .process__n, .cmp__n, .invoice__row span:last-child, time { font-variant-numeric: tabular-nums; }
.lead, .cta__inner > p, .split__text p, .about__body p, .rows p, .card > p, .mcard__body p, .person__body p { max-width: 50ch; }
/* the insight cards' text at 50ch reached 67 characters at 1920px (Insights build, lines.py); 46ch keeps it at 63 or fewer */
.post p { max-width: 46ch; }

/* ---------- buttons and links ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  font-size: var(--t-body); font-weight: 600; letter-spacing: 0; white-space: nowrap;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn svg { width: 14px; height: 14px; flex: none; transition: transform 0.3s var(--ease); }
.btn:hover svg { transform: translate(2px, -2px); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #2b2b2a; }
.btn--line { border-color: var(--line-3); color: var(--ink); background: #fff; }   /* --line-2 measured 1.52:1 on white; a control's edge needs 3:1 */
.btn--line:hover { border-color: var(--ink); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--panel); }
.btn--ghost-light { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.btn--ghost-light:hover { border-color: #fff; }
.btn--small { min-height: 40px; padding: 0 18px; font-size: var(--t-body); }

.alink {
  display: inline-flex; align-items: center; gap: 0.5em; padding-bottom: 6px;
  border-bottom: 1px solid currentColor; font-weight: 400; letter-spacing: 0; line-height: 1.2;
}
.alink svg { width: 0.8em; height: 0.8em; transition: transform 0.3s var(--ease); }
.alink:hover svg { transform: translate(3px, -3px); }
.alink--xl { font-size: var(--t-h2); letter-spacing: -0.025em; padding-bottom: 10px; max-width: 100%; overflow-wrap: anywhere; }
.link { display: inline-flex; align-items: center; gap: 0.45em; font-weight: 600; font-size: var(--t-body); }
.link svg { width: 13px; height: 13px; transition: transform 0.2s var(--ease); }
.link:hover svg, a:hover > .link svg { transform: translate(2px, -2px); }

.circ {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-3); background: #fff; color: var(--ink);   /* --line-3: the round button's edge at 3:1 (--line-2 was 1.52:1) */
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.circ svg { width: 14px; height: 14px; }
a:hover > .circ, a:hover .circ, .circ:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.dsec .circ { background: transparent; color: var(--on-dark); border-color: var(--dark-line-2); }
.dsec a:hover .circ, .dsec .circ:hover { background: var(--on-dark); color: var(--ink); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 5px 11px; border: 1px solid var(--line-3); border-radius: 999px;   /* --line-3: 3:1 on white and on the cards' --panel */
  font-size: var(--t-cap); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
/* Marks as the Figma Chip component draws them: Sealed, One complete and Lean proof carry a green circle with a
   dark tick ("Sealed products carry the verified tick"), Live an 8px gold dot, "In place" no mark. */
.chip--sealed::before, .chip--complete::before, .chip--proof::before {
  width: 15px; height: 15px; margin-left: -3px; background: var(--mark-sealed);
}
.chip--live::before { width: 8px; height: 8px; background: var(--gold); }
.chip--place::before { content: none; }
.dsec .chip { border-color: var(--dark-line-2); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
/* One pill for every filter and choice on the site (integration pass 2026-10-22; FAQ, Marketplace, Insights, Research and
   Contact each drew their own before): a 44px target at every width (charter), an edge of 3:1 (--line-3), state changes
   within 200ms. Pressed (aria-pressed="true", or the checked radio right before a label.pill) is the ink fill with white
   text AND a tick before the label, so the state is not shown by colour alone; the pressed pill's side padding gives up
   6px a side to the tick, so it grows by 6px only. A page sets --pill-x on the row to change the side padding (FAQ 16px,
   Research 14px on a phone) rather than the padding itself. */
.pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--pill-x, 18px); border: 1px solid var(--line-3); border-radius: 999px;
  font-size: var(--t-small); transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}
:is(a, button, label).pill:hover { border-color: var(--ink); }
.pill[aria-pressed="true"], :checked + .pill { background: var(--ink); border-color: var(--ink); color: #fff; padding-inline: calc(var(--pill-x, 18px) - 6px); }
.pill[aria-pressed="true"]::before, :checked + .pill::before {
  content: ""; flex: none; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: var(--tick) center / contain no-repeat; mask: var(--tick) center / contain no-repeat;
}
.dsec .pill { border-color: var(--dark-line-2); }
.dsec :is(a, button, label).pill:hover { border-color: var(--on-dark); }
.dsec .pill[aria-pressed="true"], .dsec :checked + .pill { background: var(--on-dark); border-color: var(--on-dark); color: var(--ink); }

/* ---------- header and menus ---------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hdr);
  /* past the 1680px cap the header edges follow the content column (.wrap), not the gutter */
  display: flex; align-items: center; gap: 26px; padding-inline: max(var(--gutter), (100% - var(--max)) / 2);   /* 26px: at least 1X (25.6px) between the wordmark and the first nav item */
  background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease), transform 0.4s var(--ease);
}
.hdr.is-scrolled { border-bottom-color: var(--line); }
.hdr.is-hidden:not(.is-open):not(:focus-within) { transform: translateY(-100%); }
/* The wordmark (brand guide v8 p.7-8: one artwork, scaled uniformly, at least 1X clear space all round, X = the height of YALLA).
   In the 856x242 master the ink runs from row 9 (the trail's top) to row 155 and YALLA's capitals from row 26 to 155, so X is
   129/242 of the image height and the ink's centre sits 39/242 of it above the image's own centre (the file carries empty space
   under the letters). The padding-top moves the ink, not the box, to the header's middle: at --logo-h 48px in the 84px header the
   ink is 29px tall with 27px clear above and below (X = 25.6px); at 40px in the 72px phone header, 25.3px tall with 22.8px (X =
   21.3px). The guide's 64px minimum wordmark height would need a header of about 202px, so the site stays under it. */
.hdr__logo { flex: none; display: block; padding-top: calc(var(--logo-h) * 78 / 242); line-height: 0; }
.hdr__logo img { height: var(--logo-h); width: auto; }
.nav { flex: 1; display: flex; justify-content: center; }
.nav__list { display: flex; align-items: center; }
.nav__list > li { display: flex; align-items: center; }
.nav__list > li + li:not(.nav__mobile)::before { content: "+"; content: "+" / ""; color: var(--ink-3); margin-inline: clamp(10px, 0.9vw, 20px); font-size: var(--t-small); }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--t-lead); letter-spacing: 0; white-space: nowrap;   /* owner 2026-10-22: "nav items also, 18px" */
  background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 calc(100% - 9px); background-repeat: no-repeat;
  transition: background-size 0.3s var(--ease);
}
.nav__link:hover, .nav__link[aria-current], .nav__item:has(> [aria-expanded="true"]) > .nav__link { background-size: 100% 1px; }
/* Ecosystem and Company: the word is a link to the page, the caret beside it a button that opens the menu.
   The button is 24px wide for the pointer; the -9px keeps the item as wide as the old word-plus-caret button. */
.nav__caret { display: inline-flex; align-items: center; justify-content: flex-start; width: 24px; min-height: 44px; padding-left: 6px; margin-right: -9px; }
.caret { width: 9px; height: 9px; transition: transform 0.3s var(--ease); }
.nav__caret[aria-expanded="true"] .caret { transform: rotate(180deg); }
.nav__list > .nav__mobile { display: none; }
.hdr__actions { flex: none; display: flex; gap: 8px; }
.hdr__burger { display: none; width: 44px; height: 44px; position: relative; flex: none; margin-left: auto; }
.hdr__burger span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--ink); transition: transform 0.3s var(--ease), top 0.3s var(--ease); }
.hdr__burger span:first-child { top: 17px; }
.hdr__burger span:nth-child(2) { top: 25px; }
.hdr.is-open .hdr__burger span:first-child { top: 21px; transform: rotate(45deg); }
.hdr.is-open .hdr__burger span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

.mega {
  position: absolute; top: calc(var(--hdr) - 6px); left: max(var(--gutter), (100% - var(--max)) / 2); right: max(var(--gutter), (100% - var(--max)) / 2);
  display: grid; grid-template-columns: 1.15fr repeat(3, 1fr); gap: clamp(24px, 3vw, 48px);
  padding: clamp(24px, 2.6vw, 40px); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.22);
}
.mega[hidden] { display: none; }
/* the Company menu (Figma: picture left, two links right) is a compact panel under its button, right-aligned */
.mega--company { left: auto; width: min(100% - 2 * max(var(--gutter), (100% - var(--max)) / 2), 880px); grid-template-columns: 1.2fr 1fr; }
/* The menus' titles are not headings (integration pass 2026-10-22): as h2/h3 they came before every page's h1 in the
   document outline. .mega__title and .mega__label are paragraphs drawn exactly as the headings were (on Home in Home's
   heading type, on the inner pages in the shared Space Grotesk 700); each group is a role="group" named by its label. */
.mega__title { font-size: var(--t-h4); font-weight: 400; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; }
body:not([data-page="index"]) .mega__title { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.mega__intro p:not(.mega__title) { margin-top: 12px; color: var(--ink-2); font-size: var(--t-body); }
.mega__intro .link { margin-top: 20px; }
.mega__label { font-size: var(--t-cap); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.05; text-wrap: balance; color: var(--ink-num); padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.mega__link { display: block; padding: 10px 0; }
.mega__link strong { display: block; font-weight: 600; font-size: var(--t-lead); }   /* 18px with the nav items (owner, 2026-10-22) */
.mega__link span { display: block; font-size: var(--t-small); color: var(--ink-2); }
.mega__link:hover strong, .mega__link[aria-current="page"] strong { text-decoration: underline; text-underline-offset: 3px; }
.mega__img { border-radius: var(--r-md); overflow: hidden; background: var(--dark); align-self: stretch; }
.mega__img img { width: 100%; height: 100%; object-fit: cover; }
/* the Ecosystem menu (owner, 2026-10-26): the intro, then four columns (AI Technology, Products, Infrastructure,
   Research and Development). Under the product list (owner, 2026-10-27) the button of the owner's reference image: a
   round brand-gold disc with a dark arrow beside bold dark words, "View 500+ Products", above a hairline like the
   columns' own */
.mega--eco { grid-template-columns: minmax(0, 1.1fr) repeat(4, minmax(0, 1fr)); row-gap: clamp(20px, 2vw, 28px); }
.mega__cta { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; color: var(--ink); font-size: var(--t-body); font-weight: 700; line-height: 1.2; }
.mega__group > .mega__cta { display: flex; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.mega__cta-text { white-space: nowrap; }   /* one line, as in the owner's picture (at 1366px it reaches a little into the gap) */
.mega__cta-disc {
  display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%;
  background: var(--gold); color: var(--ink); transition: background-color 0.25s var(--ease);
}
.mega__cta-disc svg { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.mega__cta:hover .mega__cta-disc { background: var(--gold-deep); }
.mega__cta:hover .mega__cta-disc svg { transform: translateX(3px); }
.mega__cta:focus-visible { outline-offset: 4px; border-radius: 999px; }
/* desktop: a menu opened by hovering its item stays open while the pointer crosses the gap down to the panel
   (1366px is also js/site.js's desktop figure: the two must stay equal) */
@media (min-width: 1366px) {
  .mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; }
}
/* 1366-1599px: the row keeps the desktop nav, with the top-row items at Body 16 instead of the owner's 18, because the
   170px wordmark + seven 18px items (Yalla2X Box joined them on 2026-10-26) + the Contact button only fit from 1600px
   (measured: 1,520px of row at 18px, about 1,310px at 16px with 8px separators). Below 1440px the wordmark also takes its
   phone size. Below 1366px the row does not fit at all, so the menu button takes over. The mega-menu links stay 18. */
@media (min-width: 1366px) and (max-width: 1599px) {
  .hdr { gap: 22px; }
  .nav__link { font-size: var(--t-body); }
  .nav__list > li + li:not(.nav__mobile)::before { margin-inline: 8px; }
}
@media (min-width: 1366px) and (max-width: 1439px) {
  :root { --logo-h: 40px; }                      /* the phone-size wordmark (1X clear space still holds in the 84px header) */
}

/* ---------- page hero ---------- */
.phero { padding-top: calc(var(--hdr) + clamp(48px, 7vw, 112px)); }
.phero__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 32px; align-items: end; }
.phero__title { grid-column: 1 / 9; }
.phero__side { grid-column: 9 / 13; padding-bottom: 0.6em; }
.phero__side > * + * { margin-top: 20px; }
.phero__side p { color: var(--ink-2); }
/* a hero tag keeps the one tag colour: the paragraph rule above (0,1,1) would otherwise grey it */
.phero__side > .tag { color: var(--ink); }
.phero__side p strong { color: var(--ink); font-weight: 400; }
.phero__kicker { font-size: var(--t-lead); color: var(--ink) !important; letter-spacing: -0.02em; line-height: 1.35; }
.phero--wide .phero__title { grid-column: 1 / 11; }
.phero--wide .phero__side { grid-column: 1 / 8; padding-bottom: 0; }
.phero--center { text-align: center; }
.phero--center .phero__top { display: block; }
.phero--center .phero__title { max-width: 14ch; margin-inline: auto; }
.phero--center .phero__side { max-width: 640px; margin: 32px auto 0; }
.phero--center .actions { justify-content: center; }
.phero__media {
  position: relative; margin: clamp(40px, 5vw, 72px) clamp(8px, 1vw, 16px) 0; border-radius: var(--r-xl); overflow: hidden;
  background: var(--dark); aspect-ratio: 16 / 7; min-height: 320px;
}
.phero__media > img, .phero__media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55)); pointer-events: none; }

/* ---------- section heads ---------- */
.shead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 20px; align-items: start; margin-bottom: clamp(48px, 6vw, 96px); }
.shead > .tag { grid-column: 1 / 4; padding-top: 0.9em; align-self: start; }
.shead > h2 { grid-column: 4 / 9; }
.shead > p, .shead > .shead__side { grid-column: 9 / 13; color: var(--ink-2); font-size: var(--t-lead); line-height: 1.5; padding-top: 0.5em; }
/* a [nn] tag keeps the one tag style: the paragraph rules above (0,1,1) would otherwise restyle it */
.shead > .tag, .dsec .shead > .tag { font-size: var(--t-cap); color: inherit; }
.shead--wide > h2 { grid-column: 4 / 11; }
.shead--wide > p { grid-column: 4 / 10; padding-top: 0; }
.shead--center { display: block; text-align: center; max-width: 920px; margin-inline: auto; }
.shead--center > * + * { margin-top: 20px; }
.shead--center > p { color: var(--ink-2); max-width: 50ch; margin-inline: auto; }

/* ---------- two-tone statement block ---------- */
.about { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 24px; }
.about > .tag { grid-column: 1 / 4; padding-top: 0.7em; align-self: start; }
.about > .about__body { grid-column: 4 / 12; }
.about__body > * + * { margin-top: clamp(24px, 3vw, 40px); }

/* ---------- cards ---------- */
.card { background: var(--panel); border-radius: var(--r-lg); padding: clamp(22px, 2.2vw, 32px); display: flex; flex-direction: column; gap: 14px; }
.card > .h3 + p, .card > p { color: var(--ink-2); }
.card__foot { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.card--dark { background: var(--dark); color: var(--on-dark); }
.card--dark p, .card--dark > .h3 + p { color: var(--on-dark-2); }   /* the second selector outranks .card > .h3 + p (the white-page grey) */
.card--line { background: #fff; border: 1px solid var(--line); }
a.card { transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease); }
a.card:hover { background: var(--panel-2); }
a.card--line:hover { background: #fff; border-color: var(--ink); }
.dsec a.card:hover { background: #1a2240; }   /* Card, a step lighter */

.mcard { background: var(--panel); border-radius: var(--r-lg); padding: 10px; display: flex; flex-direction: column; transition: background-color 0.3s var(--ease); }
a.mcard:hover { background: var(--panel-2); }
.mcard__img { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16 / 10; background: var(--dark); }
.mcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
a.mcard:hover .mcard__img img { transform: scale(1.03); }
.mcard__body { padding: 18px 14px 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.mcard__body p { color: var(--ink-2); }
.mcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
/* On the narrowest phones a one-word title ("PropertyMarket") plus its chip is wider than the card row. */
@media (max-width: 359px) { .mcard__top { flex-wrap: wrap; } }
.mcard__num { font-size: var(--t-small); color: var(--ink-num); }

/* ---------- process (reference: staggered black bars) ---------- */
.process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.process--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.process__col:nth-child(2) { --i: 1; }
.process__col:nth-child(3) { --i: 2; }
.process__col:nth-child(4) { --i: 3; }
.process__col { display: flex; flex-direction: column; gap: 16px; }
.process__track {
  position: relative; height: clamp(220px, 22vw, 320px); border-radius: var(--r-md); overflow: hidden;
  background-color: #fafaf8; background-image: linear-gradient(180deg, rgba(250, 250, 248, 0) 55%, #fafaf8 92%), radial-gradient(#d6d6d1 1px, transparent 1px);
  background-size: auto, 14px 14px;
}
.process__bar {
  position: absolute; left: 0; right: 0; top: calc(20px + var(--i, 0) * clamp(44px, 4.4vw, 64px));
  padding: 13px 18px; background: var(--ink); color: #fff; font-size: var(--t-small);
}
.process__n { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: var(--t-small); color: var(--ink-2); }
.process .card { flex: 1; }

/* ---------- feature rows (numbered, ruled) ---------- */
.rows > li, .rows > div { display: grid; grid-template-columns: minmax(56px, 1fr) 4fr; gap: 16px; padding-block: 22px; border-top: 1px solid var(--line); }
.rows > :last-child { border-bottom: 1px solid var(--line); }
.rows__n { font-size: var(--t-small); color: var(--ink-num); padding-top: 0.25em; }
.rows h3 { font-size: var(--t-h5); }
.rows p { color: var(--ink-2); margin-top: 6px; }

/* ---------- split ---------- */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 40px; align-items: center; }
.split__text { grid-column: 1 / 6; }
.split__text > * + * { margin-top: 24px; }
.split__media { grid-column: 7 / 13; border-radius: var(--r-lg); overflow: hidden; background: var(--dark); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
/* near-square, as the Figma slot (608x620): the only frame that shows the whole film/core sphere */
.split__media--tall { aspect-ratio: 1 / 1; }
.split__media--tall img { object-position: 93% 50%; }
.split--rev .split__text { grid-column: 8 / 13; order: 2; }
.split--rev .split__media { grid-column: 1 / 7; order: 1; }

/* ---------- bento stats (reference: light, dark, thumbnail, image card) ---------- */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat {
  position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--panel);
  padding: clamp(20px, 2vw, 28px); min-height: clamp(260px, 21vw, 320px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
}
.stat__label { font-size: var(--t-body); font-weight: 600; letter-spacing: 0; text-wrap: balance; }
.stat__num { font-size: var(--t-h1); line-height: 1.02; letter-spacing: -0.03em; }
.stat__num--word { font-size: var(--t-h3); letter-spacing: -0.025em; overflow-wrap: anywhere; }   /* H3: "Bootstrapped" stays one word in a four-column card at 1440px */
.stat__num sup { font-size: 0.45em; vertical-align: top; position: relative; top: 0.15em; margin-left: 0.04em; }   /* an em of the figure, which is the H1 token */
.stat__note { font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
.stat--dark { background: var(--dark); color: var(--on-dark); }
.stat--dark .stat__note { color: var(--on-dark-2); }
.stat--image { color: #fff; background: var(--dark); }
.stat--image > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stat--image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.7)); }
/* the inset hairline of the Lumora reference's image card, as on Home's photo card (home.css .hm-card--photo::after) */
.stat--image::before {
  content: ""; position: absolute; inset: 10px; z-index: 1; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: calc(var(--r-lg) - 8px); pointer-events: none;
}
.stat--image > :not(img) { position: relative; z-index: 1; }
.stat--image .stat__note { color: rgba(255, 255, 255, 0.82); }
.stat__thumb { width: 96px; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; }
.stat__thumb img { width: 100%; height: 100%; object-fit: cover; }
.stat__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.stat--image :is(.stat__num, .stat__note) { position: relative; z-index: 1; }
/* .bento--aligned: every figure in a row at the same height. Label at the top, the figure a fixed step
   below it, the note at the foot; a plain <div> wrapping figure and note is flattened into the card. */
.bento--aligned .stat { justify-content: flex-start; }
.bento--aligned .stat > div:not(.stat__row) { display: contents; }
.bento--aligned .stat__num { margin-top: clamp(16px, 2vw, 28px); }
.bento--aligned .stat__row { align-items: flex-start; }
.bento--aligned .stat__note { margin-top: auto; }
.footnote { margin-top: 24px; font-size: var(--t-small); color: var(--ink-2); max-width: 50ch; }

/* ---------- dark rounded panel (reference: services) ---------- */
.dsec { margin-inline: clamp(8px, 1vw, 16px); border-radius: var(--r-xl); background: var(--dark); color: var(--on-dark); padding-block: var(--sec); }
main > .dsec:last-child { margin-bottom: clamp(8px, 1vw, 16px); }
/* a dark panel that ends the page (no contact band after main) keeps white space above the dark footer, so the two
   dark blocks read as two (Contact, Research) */
main:not(:has(+ .cta)) > .dsec:last-child { margin-bottom: clamp(48px, 5vw, 80px); }
/* a dark panel that ends main needs no hairline above the contact band: the inset panel is the break */
main:has(> .dsec:last-child, > :last-child > .dsec:last-child) + .cta { border-top: 0; }
.dsec .lead, .dsec .muted, .dsec .shead > p, .dsec .small { color: var(--on-dark-2); }
.dsec .rows__n, .dsec .acc__n { color: var(--on-dark-3); }
.dsec .card { background: var(--dark-2); }
.dsec .card p { color: var(--on-dark-2); }
.dsec .rows > *, .dsec .acc, .dsec .acc__item { border-color: var(--dark-line); }
.dsec .rows p { color: var(--on-dark-2); }

/* ---------- accordion (details/summary) ---------- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__item > summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(48px, 1fr) 10fr 44px; gap: 16px; align-items: center;
  padding-block: clamp(18px, 2vw, 26px); font-size: var(--t-h6); font-weight: 600; letter-spacing: 0; line-height: 1.35;   /* the question: H6 (20/20/18), bold, against the 44px icon; its answer Body regular */
}
.acc__item > summary::-webkit-details-marker { display: none; }
.acc__n { font-size: var(--t-small); color: var(--ink-num); letter-spacing: 0; }
.acc__icon { position: relative; }
.acc__icon::before, .acc__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform 0.2s var(--ease); }   /* a disclosure: 200ms at most (charter) */
.acc__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc__item[open] .acc__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.acc__body { display: grid; grid-template-columns: minmax(48px, 1fr) 10fr 44px; gap: 16px; padding-bottom: clamp(24px, 2.6vw, 36px); }
.acc__body > div { grid-column: 2; max-width: 50ch; color: var(--ink-2); }
.acc__body > div > * + * { margin-top: 14px; }
.dsec .acc__body > div { color: var(--on-dark-2); }
.dsec .acc__body a { color: var(--on-dark); }
.acc--plain > .acc__item > summary, .acc--plain .acc__body { grid-template-columns: 10fr 44px; }
.acc--plain .acc__body > div { grid-column: 1; }

/* ---------- people ---------- */
.person { background: var(--panel); border-radius: var(--r-lg); padding: 10px; display: flex; flex-direction: column; }
.person__img { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 5; background: var(--panel-2); }
.person__img img { width: 100%; height: 100%; object-fit: cover; }
.person__body { padding: 18px 14px 14px; }
.person__body h3 { font-size: var(--t-h5); }
.person__role { font-size: var(--t-small); color: var(--ink-2); margin-top: 4px; }
.person__body p:last-child:not(.person__role) { margin-top: 12px; color: var(--ink-2); font-size: var(--t-body); }   /* a card with no bio keeps its role line */
.faces { display: flex; flex-wrap: wrap; gap: clamp(16px, 2vw, 28px); }
.face { width: clamp(120px, 12vw, 168px); text-align: center; }
.face img { width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: var(--panel-2); }
.face strong { display: block; margin-top: 12px; font-weight: 600; font-size: var(--t-body); }
.face span { display: block; font-size: var(--t-small); color: var(--ink-2); }
.dsec .face span { color: var(--on-dark-2); }

/* ---------- media frame ---------- */
.frame { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--dark); }
.frame > img, .frame > video { width: 100%; height: 100%; object-fit: cover; }
.frame--wide { aspect-ratio: 16 / 7; }
.frame--video { aspect-ratio: 16 / 9; }
.frame__play {
  position: absolute; inset: 0; margin: auto; width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--ink); z-index: 1;
  transition: transform 0.3s var(--ease);
}
.frame__play:hover { transform: scale(1.06); }
.frame__play svg { width: 22px; height: 22px; margin-left: 3px; }
.frame__note { position: absolute; z-index: 1; left: 20px; bottom: 18px; color: #fff; font-size: var(--t-small); }

/* ---------- timeline ---------- */
.tl > li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 24px; padding-block: clamp(40px, 5vw, 72px); border-top: 1px solid var(--line); align-items: start; }
.tl > li:last-child { border-bottom: 1px solid var(--line); }
.tl__year { grid-column: 1 / 4; font-size: var(--t-h1); line-height: 1.02; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tl__text { grid-column: 4 / 8; }
.tl__text h4 { font-size: var(--t-h4); }   /* entry titles are h4 under the h3 phase labels (History) */
.tl__text p { margin-top: 14px; color: var(--ink-2); }
.tl__img { grid-column: 8 / 13; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 10; background: var(--dark); }
.tl__img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- posts (reference: blog index) ---------- */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.post { background: var(--panel); border-radius: var(--r-lg); padding: clamp(20px, 2vw, 28px); display: flex; flex-direction: column; gap: 12px; transition: background-color 0.3s var(--ease); }
.post:hover { background: var(--panel-2); }
.post h3 { font-size: var(--t-h4); line-height: 1.15; }
.post p:not(.meta) { color: var(--ink-2); font-size: var(--t-body); }   /* :not(.meta): the card's date stays Body Small like every .meta */
.post .card__foot { padding-top: 16px; }
.latest > li { border-top: 1px solid var(--line); }
.latest > li:last-child { border-bottom: 1px solid var(--line); }
.latest a { display: grid; grid-template-columns: 1fr 44px; gap: 16px; align-items: center; padding-block: 18px; }
.latest h3 { font-size: var(--t-h6); line-height: 1.3; margin-top: 4px; }

/* ---------- invoice ---------- */
.invoice { background: var(--panel); border-radius: var(--r-lg); padding: clamp(24px, 2.6vw, 36px); }
.invoice h3 { font-size: var(--t-h6); padding-bottom: 16px; }
.invoice__row { display: flex; justify-content: space-between; gap: 16px; padding-block: 14px; border-top: 1px dashed var(--line-2); }
.invoice__row span:first-child { color: var(--ink-2); }
.invoice__row span:last-child { font-weight: 600; text-align: right; }

/* ---------- contact band ---------- */
.cta__inner > h2 { grid-column: 4 / 12; }
.cta__inner > p { grid-column: 4 / 10; margin-top: 24px; color: var(--ink-2); font-size: var(--t-lead); max-width: 50ch; }
.cta__inner > .actions { grid-column: 4 / 13; margin-top: clamp(32px, 4vw, 56px); gap: clamp(24px, 4vw, 64px); }
.cta__inner > .tag { grid-column: 1 / 4; padding-top: 1.2em; align-self: start; margin-top: 0; font-size: var(--t-cap); color: inherit; }

/* ---------- footer (reference: dark rounded panel) ---------- */
/* past the 1680px cap the footer content lines up with .wrap (the % is of the page width, the margin is the inset) */
.ftr {
  margin: 0 clamp(8px, 1vw, 16px) clamp(8px, 1vw, 16px); border-radius: var(--r-xl); background: var(--dark); color: var(--on-dark);
  padding: clamp(40px, 5vw, 80px) max(var(--gutter), (100% - var(--max)) / 2 - clamp(8px, 1vw, 16px)) 0;
}
.ftr__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.ftr__logo img { width: min(64vw, 760px); height: auto; }
/* the brand, then five link columns (owner, 2026-10-27: the Ecosystem menu's four groups and Company); below 1600px the
   brand takes its own row above them (beside them there, the big e-mail address would run into the first column) */
.ftr__mid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(5, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 40px; margin-top: clamp(56px, 8vw, 128px); }
.ftr__brand { grid-column: 1 / 2; }
.ftr__brand p { color: var(--on-dark-2); font-size: var(--t-small); max-width: 320px; }
.ftr__mail { display: inline-flex; align-items: center; gap: 0.35em; margin-top: 18px; font-size: var(--t-h4); letter-spacing: -0.02em; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.ftr__mail svg { width: 0.7em; height: 0.7em; flex: none; transition: transform 0.3s var(--ease); }
.ftr__mail:hover svg { transform: translate(2px, -2px); }
.ftr__col { grid-column: auto; }
@media (max-width: 1599px) {
  .ftr__mid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ftr__brand { grid-column: 1 / -1; }
}
.ftr__col h2 { font-size: var(--t-cap); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--on-dark-2); margin-bottom: 16px;
  min-height: 2.6em; }   /* two lines' room: "Infrastructure & Security" (2026-10-24) wraps, and every list still starts level */
.ftr__col li + li { margin-top: 6px; }
.ftr__col a { font-size: var(--t-body); letter-spacing: 0; }
/* bigger hit areas for the footer links without moving the layout */
.ftr__col a, .ftr__bottom a { position: relative; display: inline-block; }
.ftr__col a::after, .ftr__bottom a::after { content: ""; position: absolute; inset: -3px -8px; }
.ftr__col a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* the Ecosystem menu's "View 500+ Products" button under the footer's Products list (owner, 2026-10-27: "add the button
   below the product like the header"): the same gold disc, the words white, the hairline the footer's own dark line; in
   the narrow columns (1024px, phones) the words wrap beside the disc instead of running into the next column */
.ftr__col > .mega__cta { display: flex; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--dark-line); color: var(--on-dark); }
.ftr__col > .mega__cta:hover { text-decoration: none; }
.ftr__col > .mega__cta .mega__cta-text { white-space: normal; }
.ftr__end { display: flex; justify-content: flex-end; margin-top: clamp(40px, 5vw, 80px); padding-bottom: 28px; }
.ftr__up.circ { width: 52px; height: 52px; background: transparent; color: var(--on-dark); border-color: var(--dark-line-2); }
.ftr__up.circ:hover { background: var(--on-dark); color: var(--ink); }
.ftr__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-block: 22px; border-top: 1px solid var(--dark-line); font-size: var(--t-cap); color: var(--on-dark-2); }
.ftr__bottom nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.ftr__bottom nav > span { color: var(--on-dark-3); }
.ftr__bottom a:hover { color: var(--on-dark); }

/* ---------- video modal ---------- */
.vmodal { width: min(1200px, 94vw); padding: 0; border: 0; border-radius: var(--r-lg); background: #000; color: #fff; }
.vmodal::backdrop { background: rgba(10, 10, 10, 0.8); }
.vmodal__bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 12px 12px 20px; }
.vmodal video { width: 100%; aspect-ratio: 16 / 9; background: #000; }

/* ---------- entrances ---------- */
/* the old .reveal fade moved to the motion engine (css/motion.css, js/motion.js; docs/motion/MOTION-AND-LAYOUT-SPEC.md B6),
   which treats .reveal as data-motion="rise" until every page is migrated */

/* ---------- responsive ---------- */
/* The menu button takes over below 1366px (js/site.js uses the same figure; was 1181px until the seventh top item,
   2026-10-26). From 1366 to 1599px the desktop row runs with 16px top items (see the block after the mega-menu rules);
   from 1600px the items are 18px. */
@media (max-width: 1365px) {
  .hdr__burger { display: block; }
  .hdr__actions { display: none; }
  .nav { position: fixed; inset: var(--hdr) 0 auto; height: calc(100dvh - var(--hdr)); overflow-y: auto; background: #fff; display: none; justify-content: flex-start; padding: 8px var(--gutter) 40px; }
  .hdr.is-open .nav { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; }
  .nav__list > li { display: block; border-bottom: 1px solid var(--line); }
  .nav__list > li + li:not(.nav__mobile)::before { content: none; }
  .nav__link { width: 100%; justify-content: space-between; min-height: 60px; font-size: var(--t-lead); letter-spacing: 0; background: none; }   /* 18px, as on a desktop (owner, 2026-10-22) */
  /* Ecosystem and Company rows: the word opens the page, the caret at the row's end opens the submenu below */
  .nav__list > .nav__item { display: flex; flex-wrap: wrap; align-items: center; }
  .nav__item > .nav__link { flex: 1 1 0; width: auto; min-width: 0; }
  .nav__caret { width: 60px; min-height: 60px; padding: 0; margin: 0; justify-content: flex-end; }
  .nav__item > .mega { flex: 0 0 100%; }
  .nav__list > .nav__mobile { display: block; border: 0; padding-top: 20px; }
  .mega { position: static; display: block; border: 0; box-shadow: none; padding: 10px 0 16px; }   /* 10px keeps the row's focus ring off the first group heading */
  .mega__intro, .mega__img { display: none; }
  .mega__group + .mega__group { margin-top: 16px; }
  .mega__link { padding: 8px 0; }
  .mega__group > .mega__cta { margin-top: 12px; padding-top: 14px; }
  .mega--company { width: auto; }
  .mega--company .mega__label { display: none; }   /* the Company row above already names the group (the hidden label still names it) */
  .caret { width: 12px; height: 12px; }
}
@media (max-width: 1023px) {
  .phero__title, .phero__side, .phero--wide .phero__side { grid-column: 1 / -1; }
  .phero__side { padding-bottom: 0; }
  .shead > .tag, .shead > h2, .shead > p, .shead > .shead__side, .shead--wide > h2, .shead--wide > p { grid-column: 1 / -1; padding-top: 0; }
  .about > .tag, .about > .about__body { grid-column: 1 / -1; padding-top: 0; }
  .offset-text { grid-column: 1 / -1; }
  .actions--end { justify-content: flex-start; }
  .split__text, .split__media, .split--rev .split__text, .split--rev .split__media { grid-column: 1 / -1; order: 0; }
  .split__media--tall { aspect-ratio: 16 / 10; }
  .split__media--tall img { object-position: 70% 50%; }
  .grid--3, .grid--4, .posts, .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { min-height: 200px; }
  .process { grid-template-columns: 1fr; }
  .process__track { display: none; }   /* stacked, the staircase only repeats the card titles */
  .tl__year, .tl__text, .tl__img { grid-column: 1 / -1; }
  .cta__inner > h2, .cta__inner > p, .cta__inner > .actions, .cta__inner > .tag { grid-column: 1 / -1; }
  .cta__inner > .tag { padding-top: 0; margin: 0 0 20px; }
  .ftr__brand { grid-column: 1 / -1; }
  .ftr__mid { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* five columns: three, then two */
  .mega--company { grid-template-columns: 1fr; }
}
/* tablet: a short row of three stays three across instead of two plus an orphan */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid--3:not(:has(> :nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .faces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 16px; }
  .face { width: auto; }
  .face img { width: min(100%, 168px); margin-inline: auto; }
}
@media (max-width: 767px) {
  :root { --hdr: 72px; --logo-h: 40px; }   /* was 64px and 30px: the largest wordmark with 1X clear space in a phone header (see .hdr__logo) */
  .grid--2, .grid--3, .grid--4, .posts, .bento { grid-template-columns: 1fr; }
  .phero__media { aspect-ratio: 4 / 5; min-height: 0; }
  .frame--wide { aspect-ratio: 4 / 3; }
  .acc__item > summary { grid-template-columns: 10fr 44px; }
  .acc__n { display: none; }
  .acc__body { grid-template-columns: 1fr; }
  .acc__body > div { grid-column: 1; }
  .rows > li, .rows > div { grid-template-columns: 1fr; gap: 6px; }
  .ftr__top { flex-direction: column; }
  .ftr__mid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr__end { justify-content: flex-start; }
  .ftr__bottom { font-size: var(--t-small); }
  /* the row cannot fit a phone: rather than wrap with a separator hanging at the line end and one link alone below,
     the six links sit in two even rows of three, spaced instead of separated */
  .ftr__bottom nav > span { display: none; }
  .ftr__bottom nav { display: grid; grid-template-columns: repeat(3, max-content); gap: 8px 24px; }
  .stat { min-height: 168px; gap: 16px; }
}
/* once a hero's buttons stack, they share one width and one edge (as Home's and Research's do) */
@media (max-width: 479px) {
  .phero .actions .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- carousel (owner, 2026-10-24: the Marketplace catalogue and the product pages; js/carousel.js) ----------
   One row of cards that scrolls sideways and snaps to a card; the page around it stays short. The cards' widths are set
   by each page (--carousel-card); the buttons sit under the row on the right, the next one filled, as the owner's
   reference draws them. Without JavaScript the buttons hide and the row shows its own scrollbar. */
.carousel { --carousel-gap: clamp(16px, 1.6vw, 24px); --carousel-card: calc((100% - 2 * var(--carousel-gap)) / 3); }
.carousel__track {
  display: flex; gap: var(--carousel-gap); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding: 4px 2px 8px; margin-inline: -2px;
  scroll-padding-inline: 2px;   /* the 2px side padding (room for the focus ring) is not a snap offset: the first card snaps to 0 */
}
/* the scrollbar hides only once js/carousel.js can drive the row (Safari has no scrollbar-width) */
.js .carousel__track { scrollbar-width: none; }
.js .carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { flex: 0 0 var(--carousel-card); scroll-snap-align: start; min-width: 0; }
.carousel__track:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: var(--r-md); }
.carousel__nav { display: flex; justify-content: flex-end; gap: 12px; margin-top: clamp(16px, 2vw, 24px); }
.carousel__btn {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--line-3); background: #fff; color: var(--ink);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.carousel__btn svg { width: 16px; height: 16px; }
.carousel__btn--next { background: var(--ink); border-color: var(--ink); color: #fff; }
.carousel__btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; }
.carousel__btn--next:hover:not(:disabled) { background: #2b2b2a; }
.carousel__btn:disabled { opacity: 0.35; cursor: default; }
.carousel.is-static .carousel__nav { visibility: hidden; }   /* every card already in view */
html:not(.js) .carousel__nav { display: none; }
/* drag with a mouse ([data-carousel-drag]) and move on by itself ([data-carousel-auto]; owner, 2026-10-24): while a
   drag is on, the snap is off and nothing is selected; the pause button shows its two states and hides under reduced
   motion, where the row never moves on its own */
.is-draggable .carousel__track { cursor: grab; }
.carousel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.carousel__track.is-dragging * { pointer-events: none; }
.carousel__btn--pause .carousel__play, .carousel__btn--pause[aria-pressed="true"] .carousel__pause { display: none; }
.carousel__btn--pause[aria-pressed="true"] .carousel__play { display: block; }
.carousel__btn--pause { margin-right: auto; }
@media (prefers-reduced-motion: reduce) { .carousel__btn--pause { display: none; } }
@media (max-width: 1023px) { .carousel { --carousel-card: calc((100% - var(--carousel-gap)) / 2); } }
@media (max-width: 767px) { .carousel { --carousel-card: 82%; } }