/* ==========================================================================
   B² Dynamics — v2 stylesheet

   Carried forward deliberately from the live site: the near-black ground, the
   ice text, the restrained gold, the venture accents, Archivo + IBM Plex Sans
   Arabic, and the taller Arabic line height. The brief says preserve the
   identity, so the palette is not up for redesign here.

   Everything directional uses logical properties — `margin-inline`,
   `padding-block`, `inset-inline-start`, `border-inline-start`, `text-align:
   start`. There is no `left`, `right`, `margin-left` or `text-align: right`
   anywhere in this file for content layout, which is what makes the RTL flip
   a `dir` attribute rather than a second stylesheet.
   ========================================================================== */

:root {
  /* Ground and surfaces */
  --void: #06080C;
  --deep: #0A0E15;
  --panel: #0F141C;
  --lift: #151C26;
  --edge: #1E2733;
  --edge-2: #2C3846;

  /* Text. --dim is 7.0:1 on --void and --faint is 5.6:1, both above AA for
     body text; --faint is reserved for large or supplementary text only. */
  --ice: #EDF1F5;
  --dim: #A7B2BD;
  --faint: #8A96A2;

  /* Brand + venture accents */
  --gold: #E3C169;
  --peregrine: #5B9CFF;
  --meeting: #8B6BFF;
  --masrwfy: #E9BD6D;
  --omnicura: #A8DED0;
  --robopet: #0BE8FF;
  --vendi: #79BEEC;
  --live: #3ED598;
  --warn: #E9BD6D;

  /* Default accent. Per-element accents come from [data-accent], NOT from an
     inline style attribute — the CSP has no 'unsafe-inline' for style-src, so
     an inline style is silently dropped in production. */
  --c: var(--peregrine);

  --ui: "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ar: "IBM Plex Sans Arabic", "Archivo", ui-sans-serif, system-ui, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gut: clamp(1.1rem, 4vw, 3.5rem);
  --max: 1240px;
  --max-narrow: 46rem;
  --r: 14px;
  --r-sm: 9px;
  --lh: 1.6;
  --sec: clamp(3rem, 7vw, 5.5rem);
}

/* The accent map. One rule per venture colour, replacing what used to be an
   inline custom property. Adding a venture means adding a line here. */
[data-accent="peregrine"] { --c: var(--peregrine); }
[data-accent="meeting"]   { --c: var(--meeting); }
[data-accent="masrwfy"]   { --c: var(--masrwfy); }
[data-accent="omnicura"] { --c: var(--omnicura); }
[data-accent="robopet"]   { --c: var(--robopet); }
[data-accent="vendi"]     { --c: var(--vendi); }

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--void);
  color: var(--ice);
  font-family: var(--ui);
  font-size: 16px;
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Arabic needs more leading — descenders and diacritics clip at Latin
   line heights — and no negative letter-spacing, which breaks joins. */
html[dir="rtl"] body { font-family: var(--ar); --lh: 1.8; letter-spacing: 0; }
html[dir="rtl"] h1, html[dir="rtl"] h2,
html[dir="rtl"] h3, html[dir="rtl"] h4 { letter-spacing: 0; line-height: 1.45; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); }
h3 { font-size: clamp(1.12rem, 2vw, 1.3rem); }
h4 { font-size: 1rem; }
p { margin: 0; }
ul, ol { margin: 0; }
a { color: inherit; }
button { font: inherit; }
img, svg { max-width: 100%; }

/* Numbers stay left-to-right in both directions, and `unicode-bidi: isolate`
   stops an adjacent Arabic run from reordering them. Every price, licence
   number and reference goes through this class. */
.num, .mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
html[dir="rtl"] .num, html[dir="rtl"] .mono {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Focus is visible, thick enough to see against the dark ground, and never
   removed. WCAG 2.2 adds a minimum-area requirement and 3px clears it. */
:focus-visible {
  outline: 3px solid var(--peregrine);
  outline-offset: 3px;
  border-radius: 4px;
}

.vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.wrap-narrow { max-width: var(--max-narrow); }

.skip { position: absolute; inset-inline-start: -9999px; }
.skip:focus {
  inset-inline-start: 1rem; top: .6rem; z-index: 200;
  background: var(--ice); color: var(--void);
  padding: .7rem 1.1rem; border-radius: 6px;
}

/* --- preview banner ------------------------------------------------------ */
.preview-bar {
  background: var(--warn);
  color: #1A1206;
  font-size: .82rem;
  font-weight: 600;
  padding: .55rem var(--gut);
  text-align: center;
  line-height: 1.4;
}

/* --- navigation ---------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(6, 8, 12, .88);
  backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--edge);
}
/* `min-width: 0` on the flex line and on the brand: without it, flex items
   refuse to shrink below min-content and the header sets the page's minimum
   width. At 320px that was pushing the document to 380px and giving every
   page a horizontal scrollbar. */
.nav .wrap { min-height: 72px; display: flex; align-items: center; gap: .7rem; min-width: 0; }

/* Deliberate separation between mark and wordmark, per the founder: they
   must not read as one duplicated thing. 28px desktop, 14px below the nav
   breakpoint. */
.brand {
  display: flex; align-items: center; gap: 28px;
  text-decoration: none; white-space: nowrap;
  flex: 0 1 auto; min-width: 0; overflow: hidden;
}
.logo { width: 26px; height: 26px; flex: none; }
/* A logo is not layout. It never mirrors. */
html[dir="rtl"] .logo { transform: none; }
.brandword {
  font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis;
}

.nav-main { margin-inline-start: auto; }
.nav-main ul { display: flex; gap: .35rem; list-style: none; padding: 0; }
.nav-main a {
  display: block; padding: .5rem .8rem;
  text-decoration: none; color: var(--dim);
  border-radius: var(--r-sm); font-size: .94rem;
  transition: color .15s, background .15s;
}
.nav-main a:hover { color: var(--ice); background: var(--lift); }
.nav-main a.is-current { color: var(--ice); background: var(--panel); }

.nav-end {
  display: flex; align-items: center; gap: .5rem;
  margin-inline-start: auto; flex: none;
}
.nav-main + .nav-end { margin-inline-start: 0; }

.lang {
  padding: .45rem .7rem; text-decoration: none; color: var(--dim);
  border: 1px solid var(--edge); border-radius: var(--r-sm); font-size: .87rem;
  white-space: nowrap; flex: none;
}
.lang:hover { color: var(--ice); border-color: var(--edge-2); }

.menu-btn {
  display: none;
  flex: none;
  width: 44px; height: 44px;            /* 44px: comfortable touch target */
  background: none; border: 1px solid var(--edge);
  border-radius: var(--r-sm); color: var(--ice); cursor: pointer;
  align-items: center; justify-content: center;
}
.menu-icon, .menu-icon::before, .menu-icon::after {
  display: block; width: 17px; height: 2px; background: currentColor; border-radius: 2px;
}
.menu-icon { position: relative; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; inset-inline-start: 0; }
.menu-icon::before { top: -6px; }
.menu-icon::after { top: 6px; }

.menu-panel { border-block-start: 1px solid var(--edge); background: var(--deep); }
.menu-panel ul { list-style: none; padding: 1rem var(--gut) 1.4rem; display: grid; gap: .3rem; }
.menu-panel a {
  display: block; padding: .8rem .2rem; text-decoration: none;
  color: var(--ice); font-size: 1.05rem;
  border-block-end: 1px solid var(--edge);
}
.menu-panel a.btn { border: 0; margin-block-start: .6rem; }

/* `.nav .nav-cta` rather than `.nav-cta`: the `.btn` rule below is declared
   later in this file with equal specificity, so a single-class selector here
   loses the cascade and the CTA stayed visible — which is what pushed the
   header to 480px wide at a 320px viewport. Two classes settles it regardless
   of source order. */
@media (max-width: 62rem) {
  .brand { gap: 14px; }
  .nav .nav-main, .nav .nav-cta { display: none; }
  .nav .menu-btn { display: flex; }
}
/* Below ~360px the wordmark and the language control cannot both fit beside a
   44px menu button. The mark alone still identifies the site, so the word goes
   first — dropping the language switch would be worse on a bilingual site. */
@media (max-width: 23rem) {
  .brandword { display: none; }
}

/* --- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: .68rem 1.25rem;
  border-radius: var(--r-sm);
  text-decoration: none; font-weight: 600; font-size: .95rem;
  border: 1px solid transparent; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--ice); color: var(--void); }
.btn-primary:hover { background: #fff; }
.btn-line { border-color: var(--edge-2); color: var(--ice); background: transparent; }
.btn-line:hover { border-color: var(--ice); background: var(--lift); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* --- sections ------------------------------------------------------------ */
.sec { padding-block: var(--sec); }
.sec-top { padding-block-start: clamp(2rem, 4vw, 3.2rem); }
.sec-alt { background: var(--deep); }
.sec-head { margin-block-end: 2.2rem; max-width: 44rem; }
.sec-head p { color: var(--dim); margin-block-start: .6rem; }

.lede { color: var(--dim); font-size: clamp(1.02rem, 1.6vw, 1.16rem); max-width: 46rem; margin-block-start: .9rem; }
.prose { color: var(--dim); max-width: 46rem; }
.prose-note {
  color: var(--dim); max-width: 46rem;
  border-inline-start: 2px solid var(--edge-2);
  padding-inline-start: 1.1rem;
}
.fineprint { color: var(--faint); font-size: .84rem; max-width: 52rem; margin-block-start: .8rem; line-height: 1.65; }
.notice {
  margin-block: 1.4rem;
  padding: .9rem 1.1rem;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  color: var(--dim);
  font-size: .92rem;
}

/* --- hero ---------------------------------------------------------------- */
.hero {
  padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4.5rem);
  border-block-end: 1px solid var(--edge);
}
/* Message on the reading side, stage opposite, ~42% of the width on wide
   screens. In RTL the whole grid flips with `dir` — the MARK never mirrors,
   only its position does. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero-copy { min-width: 0; }
.hero-h1 { max-width: 16ch; font-size: clamp(2.6rem, 4.6vw, 4.25rem); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
/* Restrained emphasis: the same weight, a warmer ink. Not a highlighter. */
.hero-h1 em { font-style: normal; color: var(--gold); }
.hero-sub { color: var(--dim); font-size: clamp(1.05rem, 2vw, 1.24rem); max-width: 40rem; margin-block-start: 1.3rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-block-start: 2.2rem; }

.hero-stage-wrap { min-width: 0; display: grid; gap: .8rem; }
.hero-stage {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 26rem;
  display: block;
}
.hero-stage-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; min-height: 44px;
}
.hero-stage-label {
  color: var(--dim); font-size: .84rem;
  font-family: var(--mono); letter-spacing: .02em;
}
html[dir="rtl"] .hero-stage-label { font-family: var(--ar); letter-spacing: 0; }
/* Persistent, not hover-revealed: WCAG 2.2.2 wants a control that is there
   for content that moves automatically beside text. */
.hero-toggle {
  display: inline-flex; align-items: center; min-height: 32px;
  padding: .3rem .8rem;
  background: transparent; color: var(--dim);
  border: 1px solid var(--edge-2); border-radius: 100px;
  font-size: .8rem; cursor: pointer;
}
.hero-toggle:hover { color: var(--ice); border-color: var(--ice); }

@media (max-width: 62rem) {
  /* Headline and primary action first, bounded stage below. */
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .hero-stage { max-height: 17rem; }
}

/* --- venture cards ------------------------------------------------------- */
/* Six ventures read better as 3x2 than as 4+2 with a ragged second row.
   `auto-fill` would give four at this container width, so the count is
   stated explicitly and steps down at each breakpoint. */
.vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 62rem) { .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .vgrid { grid-template-columns: minmax(0, 1fr); } }
.vcard {
  background: var(--panel); border: 1px solid var(--edge);
  border-radius: var(--r); padding: 1.25rem;
  display: flex; flex-direction: column; gap: .45rem;
  position: relative; overflow: hidden;
}
/* A hairline of the venture's own colour, rather than colouring the whole
   card — six saturated cards side by side would be a rainbow of unrelated
   primaries, which the brief rules out. */
.vcard::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 2px; background: var(--c);
}
.vcard-mark { width: 30px; height: 30px; color: var(--c); margin-block-end: .35rem; }
.vcard-mark svg { width: 100%; height: 100%; }
.vcard h3 { font-size: 1.02rem; }
.vcard-sector { color: var(--dim); font-size: .86rem; }
.vcard-stage { margin-block-start: auto; padding-block-start: .5rem; }

.sec-more { margin-block-start: 1.6rem; }

/* --- credential facts ---------------------------------------------------- */
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1px; background: var(--edge);
  border: 1px solid var(--edge); border-radius: var(--r); overflow: hidden;
}
.fact { background: var(--panel); padding: 1.5rem 1.3rem; display: grid; gap: .3rem; }
.fact-n { font-family: var(--mono); font-size: clamp(2rem, 4vw, 2.7rem); font-weight: 500; color: var(--ice); line-height: 1; }
.fact-l { color: var(--dim); font-size: .87rem; line-height: 1.45; }
.facts-note { margin-block-start: 1.4rem; }

/* --- contact ------------------------------------------------------------- */
.sec-contact { padding-block-end: clamp(4rem, 9vw, 6.5rem); }
.contact-box {
  background: var(--panel); border: 1px solid var(--edge);
  border-inline-start: 2px solid var(--gold);
  border-radius: var(--r); padding: clamp(1.5rem, 4vw, 2.6rem);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1.8rem; align-items: center;
}
.contact-box p { color: var(--dim); margin-block-start: .6rem; max-width: 34rem; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; }
.contact-mail {
  display: inline-flex; align-items: center; min-height: 24px;
  color: var(--dim); font-size: .93rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.contact-mail:hover { color: var(--ice); }

/* --- grids --------------------------------------------------------------- */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.4rem; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.2rem; }

.card, .path, .person, .tier {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  padding: 1.4rem;
  display: flex; flex-direction: column; gap: .7rem;
}
.card { border-block-start: 2px solid var(--c); }
.card h2, .card h3 { font-size: 1.14rem; }
.card a { text-decoration: none; }
/* A card's heading is a standalone link, not an inline link inside a
   sentence, so WCAG 2.2 SC 2.5.8 applies to it. A 1.14rem heading's line box
   is ~20px; the padding takes the target past 24px without changing the
   type size. `inline-block` so min-height is honoured and multi-line
   headings still wrap normally. */
.card h2 a, .card h3 a {
  display: inline-block; min-height: 24px; padding-block: 2px;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.card p { color: var(--dim); font-size: .93rem; }
.card-ico, .card-mark { width: 34px; height: 34px; color: var(--c); }
.card-ico svg, .card-mark svg { width: 100%; height: 100%; }
.card-meta, .card-sector { color: var(--faint); font-size: .86rem; }
/* A standalone call-to-action link is not an inline link in a sentence, so
   SC 2.5.8's inline exception does not cover it. 24px minimum, met by the
   box rather than by font size. */
.card-link {
  margin-block-start: auto;
  display: inline-flex; align-items: center; align-self: flex-start;
  min-height: 24px; padding-block: .35rem;
  color: var(--c); font-weight: 600; font-size: .9rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.path-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-block-start: .4rem; }
.path-links a {
  display: inline-flex; align-items: center; min-height: 24px;
  color: var(--peregrine); font-weight: 600; font-size: .92rem;
}

/* --- prices -------------------------------------------------------------- */
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; }
.price-label { color: var(--faint); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
html[dir="rtl"] .price-label { text-transform: none; letter-spacing: 0; }
.price-value { font-size: 1.24rem; font-weight: 600; color: var(--ice); }
.price-unit { color: var(--dim); font-size: .87rem; }
.price-plus { color: var(--faint); }
.price-quote { flex-direction: column; align-items: flex-start; gap: .3rem; }
.price-note { color: var(--faint); font-size: .84rem; font-weight: 400; line-height: 1.55; }

/* --- chips --------------------------------------------------------------- */
.chip {
  display: inline-block; padding: .2rem .6rem;
  border: 1px solid var(--edge-2); border-radius: 100px;
  font-size: .76rem; color: var(--dim); white-space: nowrap;
}
.chip-active { border-color: var(--live); color: var(--live); }
.chip-in_progress { border-color: var(--edge-2); color: var(--faint); }
.chip-warn { border-color: var(--warn); color: var(--warn); }

/* --- detail pages -------------------------------------------------------- */
.crumb { margin-block-end: 1.6rem; font-size: .87rem; }
.crumb ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; color: var(--faint); }
.crumb li + li::before { content: "/"; margin-inline-end: .4rem; color: var(--edge-2); }
html[dir="rtl"] .crumb li + li::before { content: "\\"; }
.crumb a { color: var(--dim); }

.detail-head { margin-block-end: 2.4rem; }
.detail-ico { width: 40px; height: 40px; color: var(--c); margin-block-end: 1rem; }
.dsec { margin-block-start: 2.4rem; max-width: 48rem; }
.dsec h2 { font-size: 1.22rem; margin-block-end: .6rem; }
.dsec p { color: var(--dim); }
.dsec-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-block-start: 3rem; }
.credential {
  margin-block-start: 3rem; padding-block-start: 1.2rem;
  border-block-start: 1px solid var(--edge);
  color: var(--dim); font-size: .82rem;
}
/* Was --edge-2, which is a BORDER token: #2C3846 on #06080C is about 1.7:1 and
   axe flagged it as a serious contrast failure. Subordinate type still has to
   be readable — the hierarchy comes from case and tracking, not from making
   the label nearly invisible. */
.credential span {
  color: var(--faint); text-transform: uppercase; letter-spacing: .06em; margin-inline-end: .5rem;
}
html[dir="rtl"] .credential span { text-transform: none; letter-spacing: 0; }

/* --- tiers --------------------------------------------------------------- */
.pgroup { margin-block-start: 3rem; }
.ghead { font-size: 1.05rem; color: var(--dim); font-weight: 500; margin-block-end: 1.1rem; }
.tiers { display: grid; gap: 1.1rem; }
.tier-head { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.tier-body { color: var(--dim); font-size: .94rem; }
.tier-detail h4 { color: var(--faint); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; margin-block-end: .25rem; }
html[dir="rtl"] .tier-detail h4 { text-transform: none; letter-spacing: 0; }
.tier-detail p { color: var(--dim); font-size: .9rem; }
.tier-proposed { border-style: dashed; border-color: var(--warn); opacity: .92; }
.tier-note { color: var(--warn); font-size: .86rem; }
.tier .btn { align-self: flex-start; margin-block-start: .4rem; }

/* --- ventures ------------------------------------------------------------ */
.vent-row { display: flex; flex-wrap: wrap; gap: .7rem; list-style: none; padding: 0; }
.vent-chip {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .9rem; border: 1px solid var(--edge); border-radius: 100px;
  background: var(--panel); font-size: .9rem;
}
.vent-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.vent-stage { color: var(--faint); font-size: .8rem; }

/* --- about --------------------------------------------------------------- */
.reg { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: .55rem 1.4rem; }
.reg dt { color: var(--faint); font-size: .87rem; }
.reg dd { margin: 0; color: var(--ice); font-size: .95rem; }
.reg address, .foot-addr { font-style: normal; display: grid; gap: .1rem; }
@media (max-width: 34rem) { .reg { grid-template-columns: 1fr; gap: .1rem 0; } .reg dd { margin-block-end: .8rem; } }

.person-role { color: var(--dim); font-size: .92rem; }

/* The licence table has a real minimum width; it scrolls inside its own box
   rather than widening the page. `max-width: 100%` is what keeps the scroll
   container itself from being stretched by its content. */
.table-scroll { overflow-x: auto; max-width: 100%; }
.lic { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 34rem; }
.lic th, .lic td { text-align: start; padding: .7rem .8rem; border-block-end: 1px solid var(--edge); vertical-align: top; }
.lic th { color: var(--faint); font-weight: 500; font-size: .8rem; }
/* Numeric columns align to their own edge regardless of page direction. */
.num-cell { direction: ltr; text-align: start; font-family: var(--mono); white-space: nowrap; }
.acts { list-style: none; padding: 0; display: grid; gap: .2rem; color: var(--dim); }

/* --- forms --------------------------------------------------------------- */
.callout {
  background: var(--panel); border: 1px solid var(--edge);
  border-inline-start: 2px solid var(--gold);
  border-radius: var(--r-sm); padding: 1.1rem 1.2rem; margin-block: 1.8rem;
}
.callout h2 { font-size: 1rem; margin-block-end: .35rem; }
.callout p { color: var(--dim); font-size: .92rem; }

/* `minmax(0, 1fr)`, not `1fr`: a grid track defaults to `min-width: auto`, so
   the longest <option> string in the offer select was forcing the whole column
   — and with it the page — to 441px at a 320px viewport. */
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-block-start: 2rem; }
.field {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: .45rem; border: 0; padding: 0; margin: 0; min-width: 0;
}
.field > label, .field > legend {
  font-size: .93rem; font-weight: 600; color: var(--ice); padding: 0;
}
.opt { font-weight: 400; color: var(--faint); font-size: .85rem; margin-inline-start: .4rem; }
.hint { color: var(--faint); font-size: .85rem; line-height: 1.55; }

input[type="text"], input[type="email"], input[type="number"], select, textarea {
  width: 100%;
  min-width: 0;                      /* see the grid note above */
  max-width: 100%;
  background: var(--deep);
  border: 1px solid var(--edge-2);
  border-radius: var(--r-sm);
  color: var(--ice);
  font: inherit;
  padding: .7rem .85rem;
  min-height: 44px;
  text-align: start;                 /* never hardcoded right */
}
textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }
input:focus, select:focus, textarea:focus { border-color: var(--peregrine); }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: #FF6B6B;
}
::placeholder { color: var(--faint); opacity: 1; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-radio label {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .5rem 1rem; border: 1px solid var(--edge-2);
  border-radius: 100px; cursor: pointer; font-size: .9rem; color: var(--dim);
}
.chip-radio input:checked + label { border-color: var(--ice); color: var(--ice); background: var(--lift); }
.chip-radio input:focus-visible + label { outline: 3px solid var(--peregrine); outline-offset: 3px; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.status { color: var(--dim); font-size: .9rem; }

.err { color: #FF8B8B; font-size: .87rem; }
.errsum {
  border: 1px solid #FF6B6B; border-radius: var(--r-sm);
  padding: 1rem 1.2rem; margin-block: 1.5rem; background: rgba(255, 107, 107, .07);
}
.errsum h2 { font-size: 1rem; color: #FF8B8B; margin-block-end: .5rem; }
.errsum ul { padding-inline-start: 1.2rem; color: var(--ice); font-size: .92rem; display: grid; gap: .3rem; }
.errsum a { color: #FF8B8B; }

/* Conditional field groups. Hidden by JS via [hidden]; visible without JS,
   which is the correct default — an unused optional field costs nothing,
   a missing required one loses the enquiry. */
.cond[hidden] { display: none; }

.receipt {
  background: var(--panel); border: 1px solid var(--edge);
  border-inline-start: 2px solid var(--live);
  border-radius: var(--r-sm); padding: 1.3rem; margin-block: 1.8rem;
}
.receipt-label { color: var(--faint); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
html[dir="rtl"] .receipt-label { text-transform: none; letter-spacing: 0; }
.receipt-ref { font-size: 1.5rem; font-weight: 600; margin-block-start: .3rem; }

/* --- footer -------------------------------------------------------------- */
.foot { border-block-start: 1px solid var(--edge); background: var(--deep); padding-block: 3rem 2rem; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 2rem; }
.foot-h { font-size: .8rem; color: var(--faint); text-transform: uppercase; letter-spacing: .07em; margin-block-end: .6rem; font-weight: 500; }
html[dir="rtl"] .foot-h { text-transform: none; letter-spacing: 0; }
.foot p, .foot address, .foot a { color: var(--dim); font-size: .89rem; }
.foot-legal { margin-block-start: .8rem; }
.foot-links { list-style: none; padding: 0; display: grid; gap: .35rem; }
.foot-fine {
  margin-block-start: 2.2rem; padding-block-start: 1.2rem;
  border-block-start: 1px solid var(--edge);
  color: var(--faint) !important; font-size: .8rem !important; line-height: 1.6;
}
.foot-fine + .foot-fine { margin-block-start: .6rem; padding-block-start: 0; border: 0; }

/* --- B² at a glance ------------------------------------------------------ */
.glance { max-width: 56rem; }
.glance-eyebrow {
  color: var(--gold); font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
}
html[dir="rtl"] .glance-eyebrow { text-transform: none; letter-spacing: 0; }
.glance-h { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-block: .5rem .4rem; max-width: 22ch; }
.glance-sub { font-size: .82rem; color: var(--faint); text-transform: uppercase; letter-spacing: .07em; margin-block: 2rem .8rem; }
html[dir="rtl"] .glance-sub { text-transform: none; letter-spacing: 0; }

.glance-mods { list-style: none; padding: 0; display: grid; gap: .55rem; }
.glance-mod a {
  display: flex; flex-wrap: wrap; gap: .2rem 1rem; align-items: baseline;
  padding: .75rem .9rem; min-height: 44px;
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r-sm);
  text-decoration: none;
}
.glance-mod a:hover { border-color: var(--edge-2); }
.glance-key { font-weight: 700; font-size: .84rem; letter-spacing: .06em; color: var(--ice); min-width: 7.5rem; }
html[dir="rtl"] .glance-key { letter-spacing: 0; }
.glance-text { color: var(--dim); font-size: .92rem; }

.glance-spots { list-style: none; padding: 0; display: grid; gap: .4rem; }
.glance-spots a {
  color: var(--dim); font-size: .93rem; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 26px; padding-block: 2px;
}
.glance-spots strong { color: var(--ice); }
.glance-spots a:hover { color: var(--ice); }

.glance-vents { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.glance-vent {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .35rem .8rem; border: 1px solid var(--edge); border-radius: 100px;
  background: var(--panel); font-size: .86rem;
}
.glance-vstage { color: var(--faint); font-size: .78rem; }

.glance-journey {
  list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  counter-reset: step;
}
.glance-journey li { color: var(--dim); font-size: .92rem; position: relative; }
.glance-journey li + li::before {
  content: "→"; color: var(--edge-2); margin-inline-end: 1rem;
}
html[dir="rtl"] .glance-journey li + li::before { content: "←"; }

.glance-fig { margin-block-start: 2.2rem; }
.glance-fig img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--edge); border-radius: var(--r);
  background: var(--panel);
}
.glance-fig figcaption { margin-block-start: .6rem; }
/* Standalone download links, not inline links in a sentence, so SC 2.5.8
   applies to them. */
.glance-fig a {
  display: inline-flex; align-items: center; min-height: 26px; padding-block: 2px;
  color: var(--dim); text-decoration: underline; text-underline-offset: 3px;
}
.glance-cta { margin-block-start: 2rem; }


/* =========================================================================
   Auth — sign in, sign up, recovery
   ========================================================================= */
.auth-wrap { max-width: 30rem; }
.auth-form { margin-block-start: 1.6rem; }
.auth-foot { margin-block-start: 2rem; color: var(--dim); font-size: .93rem; }
.auth-foot a, .auth-link { color: var(--ice); text-decoration: underline; text-underline-offset: 3px; }
.auth-link { font-size: .9rem; display: inline-flex; align-items: center; min-height: 24px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; }
.fineprint { color: var(--faint); font-size: .82rem; line-height: 1.55; }
.fineprint a { color: var(--dim); }

input[type="password"], input[type="tel"], input[type="file"], input[type="search"] {
  width: 100%; min-width: 0; max-width: 100%;
  background: var(--deep); border: 1px solid var(--edge-2); border-radius: var(--r-sm);
  color: var(--ice); font: inherit; padding: .7rem .85rem; min-height: 44px; text-align: start;
}
input[type="file"] { padding: .55rem .85rem; }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; color: var(--ice); background: var(--lift);
  border: 1px solid var(--edge-2); border-radius: 6px; padding: .35rem .7rem; margin-inline-end: .8rem; cursor: pointer;
}
input[readonly] { color: var(--dim); background: var(--panel); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #FF6B6B; }
input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}

.notice-ok { border-inline-start: 2px solid var(--live); color: var(--ice); }
.notice-warn { border-inline-start: 2px solid var(--warn); color: var(--ice); }
.notice-err { border-inline-start: 2px solid #FF6B6B; color: var(--ice); }

/* Header auth controls. The static build ships the signed-out pair and
   site.js swaps in Account when the session check says so. */
.auth-ctl { display: contents; }
.nav-signin {
  color: var(--dim); text-decoration: none; font-size: .9rem; white-space: nowrap;
  padding: .45rem .6rem; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; min-height: 24px;
}
.nav-signin:hover { color: var(--ice); background: var(--lift); }
.menu-auth { display: grid; gap: .3rem; margin-block-start: .6rem; }
.menu-auth .auth-ctl { display: grid; gap: .3rem; }
.menu-auth .auth-signin { display: block; padding: .8rem .2rem; color: var(--ice); font-size: 1.05rem; border-block-end: 1px solid var(--edge); text-decoration: none; }
@media (max-width: 62rem) { .nav .nav-signin { display: none; } }

/* =========================================================================
   Account
   ========================================================================= */
.acct-grid { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 62rem) { .acct-grid { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; } }

.acct-side { position: sticky; top: 88px; display: grid; gap: 1.2rem; }
@media (max-width: 62rem) { .acct-side { position: static; } }
.acct-who { display: grid; gap: .15rem; padding: 1rem 1.1rem; background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r-sm); min-width: 0; }
.acct-who-label { color: var(--faint); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.acct-who-name { color: var(--ice); font-weight: 600; overflow-wrap: anywhere; }

.acct-nav ul { list-style: none; padding: 0; display: grid; gap: .15rem; }
@media (max-width: 62rem) { .acct-nav ul { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); } }
.acct-nav a {
  display: flex; align-items: center; min-height: 40px; padding: .45rem .8rem;
  color: var(--dim); text-decoration: none; border-radius: var(--r-sm); font-size: .94rem;
  transition: color .15s, background .15s;
}
.acct-nav a:hover { color: var(--ice); background: var(--lift); }
.acct-nav a.is-current { color: var(--ice); background: var(--panel); border-inline-start: 2px solid var(--gold); }
.acct-signout .btn { width: 100%; }
.btn-sm { min-height: 36px; padding: .4rem .9rem; font-size: .86rem; }

.acct-main h1 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); }
.acct-main .lede { margin-block-start: .5rem; }
.acct-block { margin-block-start: 2.4rem; }
.acct-block h2 { font-size: 1.15rem; margin-block-end: .9rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.acct-h3 { font-size: .95rem; color: var(--dim); margin-block: 1.4rem .6rem; font-weight: 600; }
.acct-status { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; color: var(--dim); font-size: .9rem; }

.glance-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: .8rem; margin-block-start: 1.6rem; }
.glance-tile {
  display: grid; gap: .3rem; padding: 1.3rem 1.2rem; text-decoration: none;
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r);
  transition: border-color .15s, transform .25s;
}
.glance-tile:hover { border-color: var(--edge-2); transform: translateY(-2px); }
.glance-tile .fact-n { font-size: clamp(1.8rem, 3vw, 2.4rem); }

.callout-balance .acct-amount { font-family: var(--mono); font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--ice); margin-block: .3rem .6rem; }

.acct-list { list-style: none; padding: 0; display: grid; gap: .5rem; }
.acct-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1rem;
  padding: .95rem 1.1rem; background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r-sm);
}
.acct-row > div { min-width: 0; flex: 1 1 16rem; }
.acct-row-title { color: var(--ice); font-weight: 600; overflow-wrap: anywhere; }
.acct-row-title a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.acct-row-sub { color: var(--dim); font-size: .88rem; margin-block-start: .15rem; }
.acct-row-meta { color: var(--faint); font-size: .82rem; }

.acct-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
.acct-card h2, .acct-card h3 { font-size: 1.08rem; }
.acct-card .tier-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.acct-price p { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; margin: 0; }
.acct-scope { color: var(--dim); font-size: .9rem; padding-inline-start: 1.1rem; display: grid; gap: .2rem; }
.acct-inline-form { display: grid; gap: .7rem; margin-block-start: .4rem; }
.acct-check { display: flex; gap: .6rem; align-items: flex-start; color: var(--dim); font-size: .9rem; }
.acct-check input { margin-block-start: .25rem; width: 18px; height: 18px; flex: none; }

.acct-table th, .acct-table td { font-size: .9rem; }
.acct-table a { color: var(--ice); }
.acct-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: .8rem; margin-block: 1.4rem; }
.acct-kv > div { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r-sm); padding: .9rem 1rem; display: grid; gap: .25rem; }
.acct-kv dt { color: var(--faint); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.acct-kv dd { color: var(--ice); font-weight: 600; }

.progress { display: flex; align-items: center; gap: .7rem; margin: .2rem 0; }
.progress-bar { flex: 1; height: 6px; background: var(--edge); border-radius: 100px; overflow: hidden; }
.progress-fill { display: block; height: 100%; background: var(--c); border-radius: 100px; width: 0; transition: width .9s cubic-bezier(.2,.7,.2,1); }
.progress-text { color: var(--dim); font-size: .82rem; }
/* Width from a data attribute, not an inline style (CSP). Ten steps is plenty for a status bar. */
.progress-fill[data-pct="0"] { width: 0; }
.progress-fill[data-pct^="1"]:not([data-pct="100"]) { width: 10%; }
.progress-fill[data-pct^="2"] { width: 20%; } .progress-fill[data-pct^="3"] { width: 30%; }
.progress-fill[data-pct^="4"] { width: 40%; } .progress-fill[data-pct^="5"] { width: 50%; }
.progress-fill[data-pct^="6"] { width: 60%; } .progress-fill[data-pct^="7"] { width: 70%; }
.progress-fill[data-pct^="8"] { width: 80%; } .progress-fill[data-pct^="9"] { width: 90%; }
.progress-fill[data-pct="100"] { width: 100%; }

/* Milestone timeline */
.timeline { list-style: none; padding: 0; display: grid; gap: 0; position: relative; }
.tl-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .9rem; padding-block: .8rem; position: relative; }
.tl-item::before { content: ""; position: absolute; inset-inline-start: 10px; top: 0; bottom: 0; width: 2px; background: var(--edge); }
.tl-item:first-child::before { top: 1.3rem; } .tl-item:last-child::before { bottom: calc(100% - 1.3rem); }
.tl-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--edge-2); background: var(--void); margin-block-start: .2rem; position: relative; z-index: 1; }
.tl-done .tl-dot { border-color: var(--live); background: var(--live); box-shadow: 0 0 0 4px rgba(62,213,152,.15); }
.tl-in_progress .tl-dot { border-color: var(--gold); animation: tl-pulse 2.4s ease-in-out infinite; }
.tl-awaiting_customer .tl-dot { border-color: var(--warn); background: var(--warn); }
.tl-skipped .tl-dot { border-style: dashed; }
.tl-title { color: var(--ice); font-weight: 600; }
.tl-meta { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; color: var(--faint); font-size: .84rem; margin-block-start: .3rem; }
.tl-next { color: var(--dim); font-size: .9rem; margin-block-start: .35rem; }
@keyframes tl-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(227,193,105,.35); } 50% { box-shadow: 0 0 0 6px rgba(227,193,105,0); } }

/* Status chips per enum */
.chip-active, .chip-done, .chip-verified, .chip-paid, .chip-fulfilled, .chip-accepted, .chip-resolved { border-color: var(--live); color: var(--live); }
.chip-in_progress, .chip-confirmed, .chip-issued, .chip-sent, .chip-open { border-color: var(--peregrine); color: var(--peregrine); }
.chip-awaiting_customer, .chip-evidence_submitted, .chip-pending_verification, .chip-partially_paid, .chip-on_hold { border-color: var(--warn); color: var(--warn); }
.chip-cancelled, .chip-void, .chip-failed, .chip-reversed, .chip-rejected, .chip-withdrawn, .chip-closed, .chip-refunded { border-color: var(--edge-2); color: var(--faint); }
.chip-draft, .chip-pending, .chip-skipped, .chip-superseded, .chip-completed { border-color: var(--edge-2); color: var(--dim); }

.bank-box { margin-block: .8rem 1rem; }
.acct-link-box { display: inline-block; font-family: var(--mono); font-size: .85rem; background: var(--deep); border: 1px solid var(--edge-2); border-radius: 6px; padding: .3rem .6rem; overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Settings language choice. NOT .chip-radio: that class belongs to the start
   form and hides its input behind a styled label. This one keeps a real,
   visible, 24px-plus control inside the chip. */
.chip-choice { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1rem; border: 1px solid var(--edge-2); border-radius: 100px; color: var(--dim); cursor: pointer; min-height: 44px; }
.chip-choice:has(input:checked) { border-color: var(--ice); color: var(--ice); background: var(--lift); }
.chip-choice input { width: 24px; height: 24px; margin: 0; accent-color: var(--gold); }
textarea { resize: vertical; }

/* =========================================================================
   Studio — text-first narrative, motion layered on
   ========================================================================= */
.studio-head { padding-block-end: 1rem; position: relative; z-index: 2; }
.studio-h1 { font-size: clamp(2.2rem, 6vw, 4.6rem); line-height: 1.02; letter-spacing: -.02em; max-width: 18ch; }
.studio-h1-line { display: block; }
.studio-h1-em { color: var(--gold); }
.studio-controls { margin-block-start: 1.2rem; min-height: 32px; }

.studio-stage-wrap { position: sticky; top: 72px; height: 0; z-index: 0; pointer-events: none; }
/* Sized and placed so it never shares pixels with a chapter figure: the
   figure column caps at 22rem from its start edge, the stage hangs at the
   far end edge at 15rem, and at the 1240px wrap those two do not meet. */
.studio-stage { position: absolute; inset-inline-end: calc(var(--gut) * .6); top: 1.5rem; width: min(18vw, 15rem); height: min(18vw, 15rem); opacity: .42; }
@media (max-width: 62rem) { .studio-stage { display: none; } }

.studio-chapters { position: relative; z-index: 1; }
.studio-ch { padding-block: clamp(3.5rem, 9vw, 7rem); border-block-start: 1px solid var(--edge); }
.studio-ch:nth-child(even) { background: linear-gradient(180deg, var(--deep), transparent 60%); }
.studio-ch-grid { display: grid; grid-template-columns: 3rem minmax(0, 32rem) minmax(0, 1fr); gap: clamp(1rem, 3vw, 3rem); align-items: start; }
@media (max-width: 62rem) { .studio-ch-grid { grid-template-columns: 3rem minmax(0, 1fr); } .studio-ch-figure { grid-column: 2; } }
.studio-ch-n { font-family: var(--mono); color: var(--faint); font-size: .95rem; padding-block-start: .5rem; }
.studio-ch-copy h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -.01em; }
.studio-ch-lede { color: var(--ice); font-size: clamp(1.05rem, 1.6vw, 1.2rem); margin-block: .8rem 1rem; }
.studio-ch-figure { color: var(--dim); max-width: 22rem; justify-self: start; width: 100%; }
.fig { width: 100%; height: auto; display: block; }

/* Reveal: hidden only when the script is present AND motion is allowed.
   Without JS the class is never added, so content is simply visible. */
html.js .studio-ch[data-reveal] .studio-ch-copy,
html.js .studio-ch[data-reveal] .studio-ch-figure { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
html.js .studio-ch[data-reveal].is-in .studio-ch-copy,
html.js .studio-ch[data-reveal].is-in .studio-ch-figure { opacity: 1; transform: none; }
html.js .studio-ch[data-reveal].is-in .studio-ch-figure { transition-delay: .15s; }

/* Figure choreography — each runs once when its chapter is in view. */
.fig-brief .fig-lines path { stroke-dasharray: 200; stroke-dashoffset: 200; }
.is-in .fig-brief .fig-lines path { animation: draw 1s ease forwards; }
.fig-brief .fig-grid rect { opacity: 0; }
.is-in .fig-brief .fig-grid rect { animation: fade-in .5s ease forwards; animation-delay: .9s; }
.is-in .fig-brief .fig-lines path:nth-child(2) { animation-delay: .08s } .is-in .fig-brief .fig-lines path:nth-child(3) { animation-delay: .16s }
.is-in .fig-brief .fig-lines path:nth-child(4) { animation-delay: .24s } .is-in .fig-brief .fig-lines path:nth-child(5) { animation-delay: .32s }
.is-in .fig-brief .fig-lines path:nth-child(6) { animation-delay: .40s } .is-in .fig-brief .fig-lines path:nth-child(7) { animation-delay: .48s }

.fig-scope .fig-bracket { stroke: var(--gold); stroke-dasharray: 200; stroke-dashoffset: 200; }
.is-in .fig-scope .fig-bracket { animation: draw .9s ease forwards; }
.fig-scope .fig-rows rect { opacity: 0; }
.is-in .fig-scope .fig-rows rect { animation: fade-in .5s ease forwards; }
.is-in .fig-scope .fig-rows rect:nth-child(1) { animation-delay: .5s } .is-in .fig-scope .fig-rows rect:nth-child(2) { animation-delay: .65s } .is-in .fig-scope .fig-rows rect:nth-child(3) { animation-delay: .8s }
.fig-scope .fig-dot { fill: var(--gold); opacity: 0; }
.is-in .fig-scope .fig-dot { animation: pop .5s cubic-bezier(.2,.9,.3,1.4) forwards; animation-delay: 1s; }

.fig-build { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.fig-mark { aspect-ratio: 1; display: grid; place-items: center; padding: 18%; background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r-sm); color: var(--c); opacity: 0; transform: scale(.85); }
.fig-mark svg { width: 100%; height: 100%; }
.fig-mark[data-accent="b2"] { color: var(--ice); }
.is-in .fig-mark { animation: pop .6s cubic-bezier(.2,.9,.3,1.2) forwards; }
.is-in .fig-mark[data-i="1"] { animation-delay: .1s } .is-in .fig-mark[data-i="2"] { animation-delay: .2s }
.is-in .fig-mark[data-i="3"] { animation-delay: .3s } .is-in .fig-mark[data-i="4"] { animation-delay: .4s } .is-in .fig-mark[data-i="5"] { animation-delay: .5s } .is-in .fig-mark[data-i="6"] { animation-delay: .6s }

.fig-bilingual .fig-spine { stroke: var(--gold); }
.fig-bilingual .fig-ltr rect, .fig-bilingual .fig-rtl rect { opacity: 0; }
.is-in .fig-bilingual .fig-ltr rect { animation: slide-in-start .6s ease forwards; }
.is-in .fig-bilingual .fig-rtl rect { animation: slide-in-end .6s ease forwards; }
.is-in .fig-bilingual rect:nth-child(1) { animation-delay: .1s } .is-in .fig-bilingual rect:nth-child(2) { animation-delay: .25s }
.is-in .fig-bilingual rect:nth-child(3) { animation-delay: .4s } .is-in .fig-bilingual rect:nth-child(4) { animation-delay: .55s }

.fig-record .fig-seal { color: var(--live); opacity: 0; transform-origin: 230px 135px; }
.is-in .fig-record .fig-seal { animation: pop .6s cubic-bezier(.2,.9,.3,1.3) forwards; animation-delay: .6s; }

.fig-after .fig-rail { stroke-dasharray: 260; stroke-dashoffset: 260; }
.is-in .fig-after .fig-rail { animation: draw 1.1s ease forwards; }
.fig-after .fig-ms { fill: var(--void); opacity: 0; }
.fig-after .fig-ms.is-done { fill: var(--live); stroke: var(--live); }
.fig-after .fig-ms.is-next { stroke: var(--gold); }
.is-in .fig-after .fig-ms { animation: fade-in .4s ease forwards; }
.is-in .fig-after .fig-ms.is-next { animation: fade-in .4s ease forwards, tl-pulse 2.2s ease-in-out 1.2s infinite; }
.is-in .fig-ms[data-i="0"] { animation-delay: .3s } .is-in .fig-ms[data-i="1"] { animation-delay: .5s } .is-in .fig-ms[data-i="2"] { animation-delay: .7s } .is-in .fig-ms[data-i="3"] { animation-delay: .9s } .is-in .fig-ms[data-i="4"] { animation-delay: 1.1s }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes slide-in-start { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes slide-in-end { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
html[dir="rtl"] .is-in .fig-bilingual .fig-ltr rect { animation-name: slide-in-end; }
html[dir="rtl"] .is-in .fig-bilingual .fig-rtl rect { animation-name: slide-in-start; }

/* =========================================================================
   Site-wide motion — reveal on scroll, honoured only when allowed
   ========================================================================= */
html.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }
html.js [data-reveal][data-delay="1"].is-in { transition-delay: .08s; }
html.js [data-reveal][data-delay="2"].is-in { transition-delay: .16s; }
html.js [data-reveal][data-delay="3"].is-in { transition-delay: .24s; }
.card, .path, .vcard, .glance-tile { transition: transform .25s ease, border-color .2s ease; }
.card:hover, .path:hover, .vcard:hover { transform: translateY(-3px); border-color: var(--edge-2); }
.hero-h1 em { position: relative; }
html.js .hero-h1 em::after {
  content: ""; position: absolute; inset-inline: 0; bottom: .06em; height: .08em;
  background: var(--gold); opacity: .55; transform: scaleX(0); transform-origin: 0 50%;
  animation: underline-in 1.1s cubic-bezier(.2,.8,.2,1) .5s forwards;
}
html[dir="rtl"] .hero-h1 em::after { transform-origin: 100% 50%; }
@keyframes underline-in { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal], html.js .studio-ch[data-reveal] .studio-ch-copy, html.js .studio-ch[data-reveal] .studio-ch-figure { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fig *, .fig-mark, .is-in .fig *, .is-in .fig-mark { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
  .tl-in_progress .tl-dot { animation: none !important; }
  html.js .hero-h1 em::after { animation: none; transform: none; }
  .card, .path, .vcard, .glance-tile, .progress-fill { transition: none; }
  .card:hover, .path:hover, .vcard:hover, .glance-tile:hover { transform: none; }
}

/* Data that arrives from the store is whatever language the customer wrote
   it in. `plaintext` lets each run take its own direction, so an English
   project name on an Arabic page keeps its full stop at the end. */
.acct-row-title, .acct-row-sub, .tl-title, .tl-next, .acct-card h2, .acct-card h3, .acct-kv dd, .acct-table td, .callout p:not(.acct-amount), .acct-scope li { unicode-bidi: plaintext; }
/* The mono face has no Arabic glyphs; a numeric column HEADER is a word, not a number. */
html[dir="rtl"] th.num-cell { font-family: var(--ar); direction: rtl; }

/* =========================================================================
   Third-party sign-in — one POST form per provider, works with JS off
   ========================================================================= */
.auth-social { margin-block-start: 1.6rem; }
/* One column, every button full width. With three providers a two-column
   grid left the third alone at half width, which read as a misaligned page
   (founder review 2026-09-11). */
.auth-social-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.auth-social-note { text-align: center; }
/* The auth column is centred on the page; its heading and lede are centred
   too so the block reads as one aligned piece. The form itself stays
   start-aligned — labels above fields are read top-to-bottom, not centred. */
.auth-wrap h1, .auth-wrap .lede, .auth-wrap .notice { text-align: center; }
.auth-wrap .lede { margin-inline: auto; }
.auth-social-form { display: contents; }
.btn-social { width: 100%; justify-content: center; gap: .55rem; padding-inline: .9rem; }
.btn-social-ic { display: inline-flex; width: 18px; height: 18px; flex: none; }
.btn-social-ic svg { width: 100%; height: 100%; }
.auth-social-note { margin-block-start: .8rem; }
.auth-or { display: flex; align-items: center; gap: .8rem; margin-block: 1.6rem 0; color: var(--faint); font-size: .84rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--edge); }

/* =========================================================================
   Ventures with a live site — the whole card is the link
   ========================================================================= */
.card-clickable { position: relative; }
.card-clickable .card-link::after { content: ""; position: absolute; inset: 0; }
.vcard-link { color: inherit; text-decoration: none; }
.vcard-link:hover h3, .vcard-link:focus-visible h3 { text-decoration: underline; text-underline-offset: 3px; }
.glance-vname { font-weight: 600; }
a.glance-vname { color: var(--ice); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 24px; }

/* =========================================================================
   Ask B² launcher — one button; the widget replaces it once opened
   ========================================================================= */
.askb2-launch {
  position: fixed; inset-block-end: 1.1rem; inset-inline-end: 1.1rem; z-index: 40;
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 48px; padding: .6rem 1.05rem .6rem .85rem; border: 1px solid var(--edge-2); border-radius: 999px;
  background: var(--ice); color: var(--void); font: inherit; font-weight: 700; font-size: .95rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45); cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.askb2-launch[hidden] { display: none; }
.askb2-launch:hover { background: #fff; transform: translateY(-2px); }
.askb2-launch[data-state="loading"] { cursor: progress; opacity: .8; }
.askb2-launch[data-state="failed"] { background: var(--panel); color: var(--ice); }
.askb2-ic { display: inline-flex; width: 22px; height: 22px; }
.askb2-ic svg { width: 100%; height: 100%; }
html[dir="rtl"] .askb2-launch { padding: .6rem .85rem .6rem 1.05rem; }
@media print { .askb2-launch, elevenlabs-convai { display: none !important; } }

/* =========================================================================
   B² at a glance — the animated board
   ========================================================================= */
.gboard {
  position: relative; margin-block-start: 2.2rem; padding: clamp(1.1rem, 3vw, 2rem);
  background: linear-gradient(180deg, #0c0f15 0%, #090b10 100%);
  border: 1px solid var(--edge); border-radius: var(--r); color: var(--ice); overflow: hidden;
}
.gboard-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block-end: .9rem; border-block-end: 1px solid var(--edge); }
.gboard-brand { font-weight: 700; font-size: .95rem; }
.gboard-eyebrow { color: var(--faint); font-size: .78rem; }
.gboard-grid { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); padding-block-start: 1.4rem; }
@media (min-width: 52rem) { .gboard-grid { grid-template-columns: 1.05fr 1fr; } }
.gboard-h { font-size: clamp(1.5rem, 3.2vw, 2.35rem); line-height: 1.12; font-weight: 700; letter-spacing: -.01em; margin: 0 0 .8rem; max-width: 16ch; }
.gboard-em { font-style: normal; color: var(--gold); position: relative; }
.gboard-kicker { color: var(--dim); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1rem; }
html[dir="rtl"] .gboard-kicker { letter-spacing: 0; text-transform: none; font-size: .82rem; }
.gboard-sup { color: var(--dim); font-size: .92rem; line-height: 1.6; max-width: 34ch; margin: 0 0 1.6rem; }
.gboard-sub { color: var(--faint); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; margin: 1.4rem 0 .6rem; padding-block-end: .4rem; border-block-end: 1px solid var(--edge); }
html[dir="rtl"] .gboard-sub { letter-spacing: 0; text-transform: none; font-size: .8rem; }
.gboard-spots { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: .6rem; }
.gboard-spot { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r-sm); padding: .8rem .9rem; display: grid; gap: .2rem; }
.gboard-spot strong { font-size: .92rem; }
.gboard-spot span { color: var(--dim); font-size: .82rem; }
.gboard-cta { margin: 1.6rem 0 0; font-weight: 700; font-size: .95rem; }

.gboard-journey-wrap { position: relative; padding-block-start: .3rem; }
.gboard-line { position: absolute; inset-inline: 0; top: .3rem; width: 100%; height: 12px; }
.gboard-line path { fill: none; stroke: var(--edge-2); stroke-width: 1.5; stroke-dasharray: 400; stroke-dashoffset: 400; }
.gboard-journey { list-style: none; padding: 0; margin: 0; display: flex; justify-content: space-between; gap: .3rem; }
.gboard-step { display: grid; justify-items: center; gap: .35rem; color: var(--dim); font-size: .74rem; }
.gboard-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px #0c0f15; opacity: 0; }
.gboard-mods { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .45rem; }
.gboard-mod { display: grid; grid-template-columns: 24px 6.2rem 1fr; gap: .8rem; align-items: center; background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r-sm); padding: .6rem .8rem; }
html[dir="rtl"] .gboard-mod { grid-template-columns: 24px 4.6rem 1fr; }
.gboard-glyph { width: 24px; height: 24px; color: var(--gold); display: inline-flex; }
.gb-ic { width: 100%; height: 100%; overflow: visible; }
.gb-ic * { transform-box: fill-box; transform-origin: center; }
.gboard-runner {
  position: absolute; top: calc(.3rem + 6px); inset-inline-start: 1.5%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: radial-gradient(circle, rgba(227,193,105,.95) 0 30%, rgba(227,193,105,0) 70%); opacity: 0; pointer-events: none;
}
html[dir="rtl"] .gboard-runner { margin: -7px -7px 0 0; }
.gboard-key { font-weight: 700; font-size: .74rem; letter-spacing: .08em; color: var(--ice); }
html[dir="rtl"] .gboard-key { letter-spacing: 0; font-size: .86rem; }
.gboard-text { color: var(--dim); font-size: .82rem; }
.gboard-vents { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .4rem .9rem; }
.gboard-vent { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: .5rem; font-size: .82rem; padding-block: .25rem; }
.gboard-vmark { width: 16px; height: 16px; color: var(--c); }
.gboard-vmark svg { width: 100%; height: 100%; }
.gboard-vname { font-weight: 600; }
.gboard-vstage { color: var(--faint); font-size: .74rem; position: relative; padding-inline-start: .9rem; white-space: nowrap; }
.gboard-vstage::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--faint); }
.gboard-vent[data-stage="active"] .gboard-vstage { color: var(--live, #6ee7b7); }
.gboard-vent[data-stage="active"] .gboard-vstage::before { background: var(--live, #6ee7b7); }
.gboard-foot { color: var(--faint); font-size: .7rem; margin: .9rem 0 0; }
.gboard-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem; margin-block-start: 1.6rem; padding-block-start: .9rem; border-block-start: 1px solid var(--edge); color: var(--faint); font-size: .74rem; }
.glance-dl { margin-block-start: .8rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.glance-dl a { color: var(--dim); text-decoration: underline; text-underline-offset: 3px; }

/* Choreography. Hidden only when script runs (html.js), revealed in order
   once site.js marks the board is-in; the six-second safety in site.js and
   the reduced-motion block below both guarantee the finished picture. */
html.js .gboard[data-reveal] .g-anim { opacity: 0; }
html.js .gboard[data-reveal].is-in .g-anim { animation: gb-up .7s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes gb-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html.js .gboard.is-in .gboard-line path { animation: draw 1.4s ease .5s forwards; }
html.js .gboard.is-in .gboard-dot { animation: pop .5s cubic-bezier(.2, .9, .3, 1.3) forwards; animation-delay: inherit; }
html.js .gboard.is-in .gboard-em::after {
  content: ""; position: absolute; inset-inline: 0; bottom: .04em; height: .08em; background: var(--gold); opacity: .55;
  transform: scaleX(0); transform-origin: 0 50%; animation: underline-in 1s cubic-bezier(.2, .8, .2, 1) 1s forwards;
}
html[dir="rtl"].js .gboard.is-in .gboard-em::after { transform-origin: 100% 50%; }
html.js .gboard.is-in .gboard-vent[data-stage="active"] .gboard-vstage::before { animation: tl-pulse 2.2s ease-in-out 2.6s infinite; }

/* The loop — starts once the intro has settled (--loop-start) and runs until
   paused. Stage n lights, row n glows and the marker passes them at the same
   moment: one 6 s cycle, five beats of 1.2 s. */
.gboard { --loop-start: 2.8s; --beat: 1.2s; }
.gboard::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(227,193,105,.06) 50%, transparent 60%);
  transform: translateX(-60%);
}
html.js .gboard.is-in::after { animation: gb-sheen 9s ease-in-out var(--loop-start) infinite; }
@keyframes gb-sheen { 0% { opacity: 0; transform: translateX(-60%); } 10% { opacity: 1; } 45% { opacity: 1; } 60% { opacity: 0; transform: translateX(60%); } 100% { opacity: 0; transform: translateX(60%); } }
html.js .gboard.is-in .gboard-runner { animation: gb-run 6s linear var(--loop-start) infinite; }
@keyframes gb-run { 0% { opacity: 0; inset-inline-start: 1.5%; } 4% { opacity: 1; } 76% { opacity: 1; inset-inline-start: 98.5%; } 82%, 100% { opacity: 0; inset-inline-start: 98.5%; } }
html.js .gboard.is-in .gboard-step .gboard-dot { animation: pop .5s cubic-bezier(.2,.9,.3,1.3) forwards, gb-light 6s ease-in-out infinite; }
html.js .gboard.is-in .gboard-step[data-n="0"] .gboard-dot { animation-delay: .5s, var(--loop-start); }
html.js .gboard.is-in .gboard-step[data-n="1"] .gboard-dot { animation-delay: .6s, calc(var(--loop-start) + var(--beat)); }
html.js .gboard.is-in .gboard-step[data-n="2"] .gboard-dot { animation-delay: .7s, calc(var(--loop-start) + var(--beat) * 2); }
html.js .gboard.is-in .gboard-step[data-n="3"] .gboard-dot { animation-delay: .8s, calc(var(--loop-start) + var(--beat) * 3); }
html.js .gboard.is-in .gboard-step[data-n="4"] .gboard-dot { animation-delay: .9s, calc(var(--loop-start) + var(--beat) * 4); }
@keyframes gb-light { 0%, 14%, 100% { transform: scale(1); box-shadow: 0 0 0 3px #0c0f15; } 4% { transform: scale(1.8); box-shadow: 0 0 0 3px #0c0f15, 0 0 0 9px rgba(227,193,105,.22); } }
html.js .gboard.is-in .gboard-mod { animation: gb-up .7s cubic-bezier(.2,.7,.2,1) forwards, gb-glow 6s ease-in-out infinite; }
html.js .gboard.is-in .gboard-mod[data-n="0"] { animation-delay: .9s, var(--loop-start); }
html.js .gboard.is-in .gboard-mod[data-n="1"] { animation-delay: 1s, calc(var(--loop-start) + var(--beat)); }
html.js .gboard.is-in .gboard-mod[data-n="2"] { animation-delay: 1.1s, calc(var(--loop-start) + var(--beat) * 2); }
html.js .gboard.is-in .gboard-mod[data-n="3"] { animation-delay: 1.2s, calc(var(--loop-start) + var(--beat) * 3); }
html.js .gboard.is-in .gboard-mod[data-n="4"] { animation-delay: 1.3s, calc(var(--loop-start) + var(--beat) * 4); }
@keyframes gb-glow { 0%, 18%, 100% { border-color: var(--edge); background: var(--panel); } 5% { border-color: rgba(227,193,105,.7); background: var(--lift); } }
/* glyph motion */
html.js .gboard.is-in .gb-blk { animation: gb-bob 2.4s ease-in-out var(--loop-start) infinite; }
html.js .gboard.is-in .gb-blk:nth-child(2) { animation-delay: calc(var(--loop-start) + .3s); }
html.js .gboard.is-in .gb-blk:nth-child(3) { animation-delay: calc(var(--loop-start) + .6s); }
html.js .gboard.is-in .gb-gear { animation: gb-spin 9s linear var(--loop-start) infinite; }
html.js .gboard.is-in .gb-arrow { animation: gb-drift 2.6s ease-in-out var(--loop-start) infinite; }
html.js .gboard.is-in .gb-node { animation: gb-node 2.4s ease-in-out var(--loop-start) infinite; }
html.js .gboard.is-in .gb-node:nth-of-type(2) { animation-delay: calc(var(--loop-start) + .8s); }
html.js .gboard.is-in .gb-node:nth-of-type(3) { animation-delay: calc(var(--loop-start) + 1.6s); }
.gb-stroke { stroke-dasharray: 30; stroke-dashoffset: 0; }
html.js .gboard.is-in .gb-stroke { animation: gb-redraw 4s ease-in-out var(--loop-start) infinite; }
html.js .gboard.is-in .gboard-vmark svg { animation: gb-breathe 3.6s ease-in-out var(--loop-start) infinite; }
html.js .gboard.is-in .gboard-vent[data-n="1"] .gboard-vmark svg { animation-delay: calc(var(--loop-start) + .6s); }
html.js .gboard.is-in .gboard-vent[data-n="2"] .gboard-vmark svg { animation-delay: calc(var(--loop-start) + 1.2s); }
html.js .gboard.is-in .gboard-vent[data-n="3"] .gboard-vmark svg { animation-delay: calc(var(--loop-start) + 1.8s); }
html.js .gboard.is-in .gboard-vent[data-n="4"] .gboard-vmark svg { animation-delay: calc(var(--loop-start) + 2.4s); }
html.js .gboard.is-in .gboard-vent[data-n="5"] .gboard-vmark svg { animation-delay: calc(var(--loop-start) + 3s); }
@keyframes gb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
@keyframes gb-spin { to { transform: rotate(360deg); } }
@keyframes gb-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(1.6px, -1.6px); } }
@keyframes gb-node { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.35); opacity: 1; } }
@keyframes gb-redraw { 0% { stroke-dashoffset: 30; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes gb-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
/* Pause: every animation in the board holds where it is. */
.gboard.is-paused, .gboard.is-paused *, .gboard.is-paused::after, .gboard.is-paused .gboard-em::after, .gboard.is-paused .gboard-vstage::before { animation-play-state: paused !important; }
.gboard-controls { display: flex; gap: .6rem; flex-wrap: wrap; margin-block-start: .9rem; }
html:not(.js) .gboard-controls { display: none; }
.gboard.is-in [data-i="0"] { animation-delay: .05s; } .gboard.is-in [data-i="1"] { animation-delay: .15s; } .gboard.is-in [data-i="2"] { animation-delay: .3s; }
.gboard.is-in [data-i="3"] { animation-delay: .4s; } .gboard.is-in [data-i="4"] { animation-delay: .5s; } .gboard.is-in [data-i="5"] { animation-delay: .6s; }
.gboard.is-in [data-i="6"] { animation-delay: .7s; } .gboard.is-in [data-i="7"] { animation-delay: .8s; } .gboard.is-in [data-i="8"] { animation-delay: .9s; }
.gboard.is-in [data-i="9"] { animation-delay: 1s; } .gboard.is-in [data-i="10"] { animation-delay: 1.1s; } .gboard.is-in [data-i="11"] { animation-delay: 1.2s; }
.gboard.is-in [data-i="12"] { animation-delay: 1.3s; } .gboard.is-in [data-i="13"] { animation-delay: 1.4s; } .gboard.is-in [data-i="14"] { animation-delay: 1.5s; }
.gboard.is-in [data-i="15"] { animation-delay: 1.6s; } .gboard.is-in [data-i="16"] { animation-delay: 1.7s; } .gboard.is-in [data-i="17"] { animation-delay: 1.8s; }
.gboard.is-in [data-i="18"] { animation-delay: 1.9s; } .gboard.is-in [data-i="19"] { animation-delay: 2s; } .gboard.is-in [data-i="20"] { animation-delay: 2.1s; }
.gboard.is-in [data-i="21"] { animation-delay: 2.2s; } .gboard.is-in [data-i="22"] { animation-delay: 2.3s; } .gboard.is-in [data-i="23"] { animation-delay: 2.4s; }

@media (prefers-reduced-motion: reduce) {
  html.js .gboard[data-reveal] .g-anim, .gboard .gboard-dot, .gboard .gboard-mod, .gb-ic * { opacity: 1 !important; animation: none !important; transform: none !important; }
  .gboard-line path { stroke-dashoffset: 0 !important; animation: none !important; }
  .gboard::after, .gboard-runner, .gboard-controls { display: none !important; }
  .gb-stroke { stroke-dashoffset: 0 !important; }
  .gboard .gboard-vmark svg { animation: none !important; transform: none !important; }
  html.js .gboard.is-in .gboard-em::after { animation: none !important; transform: none !important; }
  html.js .gboard.is-in .gboard-vent[data-stage="active"] .gboard-vstage::before { animation: none !important; }
  .askb2-launch { transition: none; }
  .askb2-launch:hover { transform: none; }
}
/* Strix presentation pass. Shared brand, restrained movement, generous controls. */
.brand-eyebrow { color: var(--gold); font: 500 .875rem/1.5 var(--mono); letter-spacing: .07em; text-transform: uppercase; margin-block-end: 1.3rem; }
html[dir="rtl"] .brand-eyebrow { letter-spacing: 0; text-transform: none; font-family: var(--ar); }
.hero-proof-link { margin-block-start: 1.6rem; font-size: .9rem; }
.hero-proof-link a { color: var(--dim); text-underline-offset: .35em; text-decoration: underline; display: inline-flex; align-items: center; min-height: 44px; }
html[dir="rtl"] .hero-h1 { letter-spacing: 0; line-height: 1.3; }
.proof-section { border-block: 1px solid var(--edge); background: #0b1016; }
.proof-grid { display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: clamp(2rem, 6vw, 5.5rem); }
.proof-copy h2 { font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 1.08; max-width: 12ch; text-wrap: balance; }
.proof-copy .lede { font-size: 1.0625rem; line-height: 1.75; margin-block: 1.2rem 2rem; }
.proof-copy .brand-eyebrow { font-size: .8rem; }
.proof-window { display: block; border: 1px solid #35404e; border-radius: 16px; overflow: hidden; color: var(--ice); box-shadow: 0 25px 65px #0005; text-decoration: none; transition: border-color .2s ease; }
.proof-window:hover { border-color: var(--gold); }
.proof-window-head { display: flex; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.5rem; font-size: .8125rem; background: #111820; }
.proof-window-head span:last-child { color: var(--gold); }
.proof-window-body { background: #eaf0f5; color: #172231; padding: clamp(1.5rem, 4vw, 2.6rem); }
.proof-index { font: .875rem var(--mono); color: #42556b; }
.proof-window-title { font-size: 2rem; line-height: 1.2; font-weight: 600; margin-block: 1.6rem .9rem; }
.proof-window-body p:not(.proof-window-title) { font-size: 1rem; color: #3a4a5b; }
.proof-rail { display: grid; grid-template-columns: repeat(5,1fr); gap: .4rem; margin-block: 2.2rem 1rem; }
.proof-rail span { height: 4px; background: #bac7d2; border-radius: 3px; }
.proof-rail span:first-child { background: #51687f; }.proof-rail span:nth-child(2) { background: #8c6825; }
.proof-next { font-weight: 600; }
.venture-boundary { max-width: 76ch; font-size: .9rem; line-height: 1.75; color: var(--dim); border-inline-start: 2px solid var(--gold); padding-inline-start: 1.2rem; margin-block: 1.5rem 2rem; }
.glance { max-width: none; }.glance-h { max-width: 32ch; font-size: clamp(1.8rem,3vw,2.5rem); }
.glance-reading { margin-block: 2rem; border-block: 1px solid var(--edge); padding-block: 1rem; }
.glance-reading summary { cursor: pointer; font-weight: 600; min-height: 44px; align-content: center; }
.glance-reading[open] summary { margin-block-end: 1rem; }
.gboard { padding: clamp(1.3rem,3.2vw,3rem); border-radius: 16px; margin-block: 2rem 1rem; }
.gboard-grid { grid-template-columns: 1fr 1.15fr; gap: clamp(2rem,4vw,4rem); }
.gboard-h { font-size: clamp(2rem,3.2vw,3rem); max-width: 16ch; }
.gboard-sup,.gboard-text { font-size: 1rem; }.gboard-key { font-size: .8rem; }
.gboard-eyebrow,.gboard-step,.gboard-sub,.gboard-vstage,.gboard-bottom { font-size: .8125rem; }
.gboard-mod { grid-template-columns: 24px 5.3rem 1fr; padding-block: .9rem; }
.gboard-spot { background: transparent; border: 0; border-block-start: 1px solid var(--edge); border-radius: 0; padding-inline: 0; }
.gboard-spot span { font-size: .9rem; }.gboard-spots { grid-template-columns: 1fr; }
/* One moving focus: the journey runner. Peripheral elements stay settled. */
html.js .gboard.is-in .gb-ic *,html.js .gboard.is-in .gboard-vmark svg,html.js .gboard.is-in .gboard-vent[data-stage="active"] .gboard-vstage::before { animation: none; }
html.js .gboard.is-in::after { animation: none; }
/* A method step is not the same thing as a capability: do not imply a false mapping. */
html.js .gboard.is-in .gboard-mod { animation-name: gb-up; animation-duration: .7s; animation-iteration-count: 1; }
.studio-art { position: relative; margin: 2.5rem 0 0; border: 1px solid var(--edge); border-radius: 16px; overflow: hidden; background: var(--void); }
.studio-art img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; display: block; }
.studio-art figcaption { position: absolute; inset-inline: clamp(1rem,3vw,2rem); bottom: 1.5rem; color: var(--dim); font-size: .875rem; }
.studio-head .lede { max-width: 54ch; }.studio-h1 { max-width: 18ch; }
.studio-stage-wrap { display: none; }
.studio-ch { padding-block: clamp(2.5rem,6vw,5rem); }.studio-ch:nth-child(even) { background: #0a0e14; }
.studio-ch-figure { opacity: .75; }
/* Shared interface primitives map directly to native colour, spacing and motion tokens. */
.experience-intro { padding-block-end: 2.3rem; }.experience-intro h1 { font-size: clamp(2.5rem,5vw,4.6rem); letter-spacing: -.03em; }
.experience-intro .lede { max-width: 58ch; }.experience-section { padding-block-start: 0; }
.experience { --x-ink: #172231; --x-muted: #42556b; --x-edge: #c9d4de; --x-paper: #edf2f6; border: 1px solid #384352; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 80px #0004; }
.experience-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: #111923; padding: 1.35rem 1.8rem; }
.experience-bar strong { font-size: 1rem; }.experience-badge { font-size: .8125rem; color: var(--gold); border: 1px solid #746439; border-radius: 6px; padding: .4rem .65rem; }
.experience-grid { display: grid; grid-template-columns: 12rem 1fr; }
.experience-nav { background: #111923; padding: 1.5rem .8rem; display: flex; flex-direction: column; gap: .4rem; border-block-start: 1px solid #273240; }
.experience-nav a { display: flex; align-items: center; gap: .8rem; min-height: 48px; border-radius: 8px; padding: .75rem 1rem; font-size: .9375rem; color: #bfccd9; text-decoration: none; }
.experience-nav a[aria-selected="true"],.experience-nav a:hover { color: #f4f7fa; background: #293747; }
.experience-nav-n { color: #a3b4c6; font: .8rem var(--mono); }
.experience-content { background: var(--x-paper); color: var(--x-ink); padding: clamp(1.3rem,3.5vw,3rem); min-width: 0; }
.experience-project { padding-block-end: 1.8rem; border-block-end: 1px solid var(--x-edge); margin-block-end: 1.6rem; }
.experience-project p { color: var(--x-muted); font-size: .875rem; margin: 0 0 .55rem; }.experience-project h2 { font-size: clamp(1.4rem,2.6vw,2rem); margin: 0; letter-spacing: -.015em; }
.experience h3 { font-size: 1.1rem; }.experience-content p { line-height: 1.7; }
.experience-journey h3 { font-size: .875rem; font-weight: 500; color: var(--x-muted); margin-block-end: 1rem; }
.experience-stages { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .35rem; }
.experience-stages button { appearance: none; font: inherit; font-size: .875rem; display: grid; gap: .7rem; text-align: start; padding: .85rem .7rem; min-height: 78px; color: #3c5064; border: 1px solid var(--x-edge); border-radius: 8px; background: transparent; cursor: pointer; }
.experience-stages button span { font: .75rem var(--mono); }.experience-stages button[aria-pressed="true"] { background: #172b3f; border-color: #172b3f; color: #fff; }
.experience-stages button:hover { border-color: #566e87; }.experience-stages button:focus-visible,.experience-content a:focus-visible,.experience-content summary:focus-visible { outline: 3px solid #135f9b; outline-offset: 3px; }
.experience-focus { display: grid; grid-template-columns: 1.1fr 1fr; margin-block: 1.5rem; border-radius: 12px; border: 1px solid var(--x-edge); background: #fff; overflow: hidden; }
.experience-focus-copy,.experience-next { padding: clamp(1.2rem,2.5vw,2rem); }
.experience-focus-copy h3 { font-size: clamp(1.4rem,2.3vw,1.9rem); line-height: 1.2; margin-block: 1rem; letter-spacing: -.02em; }
.experience-focus-copy>p:last-child { color: var(--x-muted); font-size: 1rem; }
.experience-kicker { color: var(--x-muted); font: 500 .8125rem/1.5 var(--mono); letter-spacing: .025em; }
.experience-next { background: #e2ebf2; border-inline-start: 1px solid var(--x-edge); display: flex; flex-direction: column; }
.experience-next>p:nth-child(2) { font-size: 1rem; font-weight: 500; }.experience-record { margin-block-start: auto; padding-block-start: 1.4rem; color: var(--x-muted); font-size: .8125rem; border-block-start: 1px solid var(--x-edge); }
.experience-note,.experience-all { border-block-start: 1px solid var(--x-edge); padding-block: .8rem; }
.experience-note summary,.experience-all summary { min-height: 44px; cursor: pointer; align-content: center; font-size: .9375rem; font-weight: 600; }
.experience-note>div,.experience-all article { padding-block: .75rem; max-width: 65ch; }
.experience-document { background: #fff; border: 1px solid var(--x-edge); padding: clamp(1.3rem,3vw,2.4rem); margin-block: 1.2rem 2rem; max-width: 65ch; border-radius: 12px; }
.experience-document h4 { font-size: 1.6rem; margin-block: 1.2rem; }.experience-document p { font-size: 1rem; }
.experience-activity { list-style: none; padding: 0; margin-block: 1.5rem 2rem; }.experience-activity li { display: grid; grid-template-columns: 2rem 1fr; align-items: baseline; gap: 1rem; border-block-end: 1px solid var(--x-edge); padding-block: 1.3rem; }.experience-activity span { font: .8125rem var(--mono); color: var(--x-muted); }.experience-activity p { margin: 0; }
.experience-disclosure { margin: 0; padding: 1.1rem 1.8rem; color: #bfcbd8; background: #111923; font-size: .875rem; line-height: 1.65; border-block-start: 1px solid #344150; }
.experience-cta { margin-block-start: 2rem; }.experience [hidden] { display: none !important; }
html[dir="rtl"] .experience-intro h1,html[dir="rtl"] .experience h2,html[dir="rtl"] .experience h3 { letter-spacing: 0; }
html[dir="rtl"] .experience-kicker { font-family: var(--ar); letter-spacing: 0; }
.acct-nav a,.hero-toggle,.gboard-controls button { min-height: 44px; }.acct-row { padding-block: 1.1rem; }
@media (max-width: 62rem) {
 .proof-grid { grid-template-columns: 1fr; }.proof-copy h2 { max-width: none; }.proof-copy { max-width: 40rem; }
 .gboard-grid { grid-template-columns: 1fr; }.gboard-h { max-width: 24ch; }.gboard-sup { max-width: 50ch; }
 .experience-grid { grid-template-columns: 1fr; }.experience-nav { flex-direction: row; padding: .5rem; }.experience-nav a { flex: 1; justify-content: center; padding-inline: .5rem; }
}
@media (max-width: 38rem) {
 .experience-bar { padding: 1rem; }.experience-bar strong { font-size: .875rem; }.experience-badge { font-size: .75rem; }
 .experience-content { padding: 1rem; }.experience-focus { grid-template-columns: 1fr; }.experience-next { border-inline-start: 0; border-block-start: 1px solid var(--x-edge); }
 .experience-stages { gap: .25rem; }.experience-stages button { font-size: .875rem; padding: .65rem .3rem; min-height: 70px; text-align: center; }.experience-stages button span { font-size: .75rem; }
 .experience-nav-n { display: none; }.experience-nav a { font-size: .875rem; }.experience-disclosure { padding: 1rem; }
 .gboard-mod,html[dir="rtl"] .gboard-mod { grid-template-columns: 24px 1fr; }.gboard-text { grid-column: 2; }.gboard-step { font-size: .75rem; }.gboard-vents { grid-template-columns: 1fr; }
 .studio-art figcaption { position: static; padding: 1rem; margin: 0; background: #0a1017; }
 .proof-window-head { padding: 1rem; font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) { .proof-window { transition: none; } }
/* Owner-approved brand stack, 2026-09-12. Marks are sized by shape (see
   _venture-mark.mjs markClass): square masters and the circular MeetingTeam
   symbol sit in a square box on the navy card with NOTHING behind them; the
   Omnicura stacked lockup and the VENDI artwork keep their intrinsic
   proportions; Peregrine's inline mark is enlarged where the owner asked. */
.venture-brand-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.venture-brand-stacked, .venture-brand-artwork { height: auto; }
.venture-brand-artwork { border-radius: 12px; }
/* /ventures cards */
/* Ventures: common 180 × 136 stage and title baseline; visible artwork is
   sized optically. These rules apply to this page only. Source masters and the
   founder-approved Home strip are unchanged. Logical offsets mirror in AR. */
.card-venture .card-mark {
  position: relative; width: 11.25rem; max-width: 100%; height: 8.5rem;
  margin-block-end: .9rem; overflow: hidden;
}
.card-venture .card-mark .venture-brand-image {
  position: absolute; max-width: none; object-fit: contain; border-radius: 0;
  inset-inline-start: 0; top: 50%; transform: translateY(-50%);
}
.card-venture[data-venture="peregrine"] .card-mark svg {
  position: absolute; width: 8.5rem; height: 8.5rem; padding: 0;
  top: 0; inset-inline-start: -1.19rem;
}
.card-venture[data-venture="meeting"] .venture-brand-image {
  width: 7.375rem; height: 7.375rem; inset-inline-start: -.4rem;
}
.card-venture[data-venture="masrwfy"] .venture-brand-image {
  /* All gold artwork, Arabic and Latin lettering remain within the viewport;
     only the generous navy margin is outside it. Approved pixels unaltered. */
  width: 13.75rem; height: 13.75rem; top: -2.69rem; clip-path: inset(16% 20% 17% 20%);
  inset-inline-start: -3.025rem; transform: none;
}
html[dir="rtl"] .card-venture[data-venture="masrwfy"] .venture-brand-image { inset-inline-start: -3.52rem; }
.card-venture[data-venture="omnicura"] .venture-brand-image {
  /* Strix's -.95rem aligned the wide "Omnicura" wordmark. The shorter, centred
     "B2Cura" leaves the shield as the visible start edge, 20 px in; pull the
     lockup so the shield sits on the shared edge (CC-PS, live measurement
     2026-09-13). */
  width: 10.44rem; height: 8.5rem; inset-inline-start: -2.2rem;
}
.card-venture[data-venture="robopet"] .venture-brand-image {
  /* The RoboPet source (1536 × 1024) carries 212 px / 201 px of transparent
     margin either side; at 180 px wide that is 24.8 / 23.6 css px. Pull the
     visible artwork to the shared optical start edge (CC-PS, measured
     2026-09-12 — Strix's -.18rem left it 23 px in). */
  width: 11.25rem; height: 7.5rem; inset-inline-start: -1.55rem;
}
html[dir="rtl"] .card-venture[data-venture="robopet"] .venture-brand-image { inset-inline-start: -1.47rem; }
.card-venture[data-venture="vendi"] .venture-brand-image { width: 4.54rem; height: 7.5rem; }
/* home strip */
.vcard-mark.mark-square, .vcard-mark.mark-circular, .vcard-mark.mark-artwork { width: 4.5rem; height: 4.5rem; }
.vcard-mark.mark-artwork .venture-brand-image { border-radius: 8px; }
.vcard-mark.mark-inline.mark-large { width: 4rem; height: 4rem; }                         /* Peregrine, 64 px */
.vcard-mark.mark-square.mark-large { width: 5.25rem; height: 5.25rem; }                   /* RoboPet, 84 px */
/* About board list */
.gboard-vmark.mark-square, .gboard-vmark.mark-circular, .gboard-vmark.mark-artwork { width: 2.5rem; height: 2.5rem; }
.gboard-vent:has(.mark-square), .gboard-vent:has(.mark-circular), .gboard-vent:has(.mark-artwork) { grid-template-columns: 2.5rem 1fr auto; }
.gboard-vmark.mark-inline.mark-large { width: 1.75rem; height: 1.75rem; }
.gboard-vent:has(.mark-inline.mark-large) { grid-template-columns: 1.75rem 1fr auto; }
/* A concept reference (RoboPet only) stays a captioned figure, above the mark. */
.venture-concept { margin: 0 0 1.5rem; border-radius: 12px; overflow: hidden; background: #f0f3f7; }
.venture-concept img { display: block; width: 100%; height: 20rem; object-fit: contain; }
.venture-concept figcaption { background: #182330; color: #d4dde6; font-size: .875rem; padding: .9rem 1rem; }

/* One motion control governs every illustration; background motion sleeps. */
.studio-paused .fig *, .studio-paused .fig-mark,
.studio-ch:not(.is-active) .fig *, .studio-ch:not(.is-active) .fig-mark,
.gboard.is-suspended *, .gboard.is-suspended *::before, .gboard.is-suspended *::after {
  animation-play-state: paused !important;
}


/* Signal into structure — the real 16:9 Studio motion replaces the still only
   after a canvas frame is painted. No JS / reduced motion keeps the still. */
.studio-signal-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #060a0f; }
.studio-signal-frame .studio-signal-still { width:100%; height:100%; object-fit:cover; }
.studio-signal-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:0; }
.studio-signal-canvas[data-rendered="true"] { opacity:1; }
.studio-signal-canvas[hidden] { display:none; }
@media (prefers-reduced-motion: reduce) { .studio-signal-canvas { display:none; } }

.askb2-consent { color:var(--ice); background:var(--panel); border:1px solid var(--edge); border-radius:1rem; padding:1.6rem; width:min(34rem,calc(100% - 2rem)); max-height:calc(100dvh - 2rem); overflow:auto; }
.askb2-consent::backdrop { background:#02070dc9; }
.askb2-consent h2 { margin-block-end:.9rem; font-size:1.45rem; }
.askb2-consent p { color:var(--dim); }
.askb2-consent-choice { display:flex; align-items:flex-start; gap:.7rem; margin-block:1.2rem; line-height:1.6; }
.askb2-consent-choice input { flex:0 0 auto; width:1.2rem; height:1.2rem; margin-top:.25rem; accent-color:var(--gold); }
.askb2-consent-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-block-start:1.3rem; }

/* Generated from data/design-tokens.json. */
:root{--void:#06080C;--deep:#0A0E15;--panel:#0F141C;--lift:#151C26;--edge:#1E2733;--edge-2:#2C3846;--ice:#EDF1F5;--dim:#A7B2BD;--faint:#8A96A2;--gold:#E3C169;--live:#3ED598}