/* Syncera public site — the design system.
 *
 * The tokens are the app's (server/public/styles.css), not a second brand:
 * same neutrals in both themes, the three sport-identity hues recast as
 * "source strands", ink as the reconciled record. Do not adjust a hex value
 * without re-running scripts/check-contrast.mjs — every text/background pair
 * below is asserted there, per theme.
 *
 * Both themes are designed, not inverted, so both token blocks are written
 * out in full, and the explicit data-theme override wins in both directions.
 */

/* ---- tokens ------------------------------------------------------------ */

:root {
  --bg: #F7F8FA;
  --p1: #FFFFFF;
  --p2: #F1F3F6;
  --line: #E2E6EC;
  --ink: #10151C;
  --ink2: #59636F;
  --ink3: #67717E;

  /* Source strands: many colored sources, one ink record. */
  --src1: #12905E;
  --src2: #2A6CC4;
  --src3: #8F5410;
  /* Text-safe variants (>= 4.5:1 on --bg and --p1). */
  --src1T: #0B7048;
  --src2T: #2A6CC4;
  --src3T: #8F5410;

  /* The mark (#563): three strands meet in one record, the orange pill. */
  --mark1: #C0392B; --mark2: #2A4F9A; --mark3: #C9C0AE; --markRec: #F07A10;

  /* The one interactive accent. */
  --acc: #2A6CC4;
  --accInk: #FFFFFF;
  --accDown: #235CA8;

  /* Critical text (form errors) — the app's validated token. */
  --critT: #B3252B;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --mark1: #E0503F; --mark2: #6F95E0; --mark3: #F7F2E8; --markRec: #FF8A1F;
    --bg: #0C0F14;
    --p1: #151A22;
    --p2: #1C222C;
    --line: #252D39;
    --ink: #EDF1F6;
    --ink2: #93A0B0;
    --ink3: #7C8794;

    --src1: #1C9C6E;
    --src2: #4285D8;
    --src3: #C98420;
    --src1T: #2FB783;
    --src2T: #5AA0E8;
    --src3T: #D99A3C;

    --acc: #4285D8;
    --accInk: #0C0F14;
    --accDown: #5A96E0;

    --critT: #FF8A8A;

    color-scheme: dark;
  }
}

:root[data-theme='light'] {
  --mark1: #C0392B; --mark2: #2A4F9A; --mark3: #C9C0AE; --markRec: #F07A10;
  --bg: #F7F8FA; --p1: #FFFFFF; --p2: #F1F3F6; --line: #E2E6EC;
  --ink: #10151C; --ink2: #59636F; --ink3: #67717E;
  --src1: #12905E; --src2: #2A6CC4; --src3: #8F5410;
  --src1T: #0B7048; --src2T: #2A6CC4; --src3T: #8F5410;
  --acc: #2A6CC4; --accInk: #FFFFFF; --accDown: #235CA8;
  --critT: #B3252B;
  color-scheme: light;
}

:root[data-theme='dark'] {
  --mark1: #E0503F; --mark2: #6F95E0; --mark3: #F7F2E8; --markRec: #FF8A1F;
  --bg: #0C0F14; --p1: #151A22; --p2: #1C222C; --line: #252D39;
  --ink: #EDF1F6; --ink2: #93A0B0; --ink3: #7C8794;
  --src1: #1C9C6E; --src2: #4285D8; --src3: #C98420;
  --src1T: #2FB783; --src2T: #5AA0E8; --src3T: #D99A3C;
  --acc: #4285D8; --accInk: #0C0F14; --accDown: #5A96E0;
  --critT: #FF8A8A;
  color-scheme: dark;
}

/* ---- motion ------------------------------------------------------------
 * The app's rule carries over: chrome never animates on its own; data
 * always does. The one loud moment is the confluence drawing itself.
 */
:root {
  --draw: 1.7s;   /* a strand drawing itself */
  --rise: .52s;   /* one block arriving */
  --step: .07s;   /* stagger between consecutive blocks */
  --hover: .15s;  /* interactive feedback */
  --r: 13px;      /* card radius, same as the app */
}

/* ---- base -------------------------------------------------------------- */

* { box-sizing: border-box; margin: 0; padding: 0 }

html { scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: Archivo, system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Short pages (404) must still pin the footer to the
   * bottom instead of floating it mid-viewport over bare background. */
  min-height: 100dvh; display: flex; flex-direction: column;
}
main { flex: 1 }

img, svg { max-width: 100%; display: block }

a { color: var(--src2T); text-decoration-thickness: 1px; text-underline-offset: 2px }
a:hover { text-decoration-thickness: 2px }

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--src2); color: #FFFFFF }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px }
@media (max-width: 640px) { .wrap { padding: 0 16px } }
/* A large monitor grows the container, not the margins. */
@media (min-width: 1700px) { .wrap { max-width: 1320px } }

/* ---- type roles --------------------------------------------------------- */

/* Display: the app's .big idiom promoted to sentences. */
.display {
  font-weight: 790;
  font-variation-settings: 'wdth' 120;
  letter-spacing: -.03em;
  line-height: .95;
  font-size: clamp(40px, 7vw, 82px);
  text-wrap: balance;
}

h2.display, .display-2 {
  font-weight: 780;
  font-variation-settings: 'wdth' 118;
  letter-spacing: -.025em;
  line-height: 1.02;
  font-size: clamp(28px, 4.2vw, 46px);
  text-wrap: balance;
}

h3, .h3 {
  font-weight: 700;
  font-variation-settings: 'wdth' 110;
  letter-spacing: -.01em;
  font-size: 21px;
  line-height: 1.25;
}

.eyebrow {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink2);
  font-weight: 800;
  font-variation-settings: 'wdth' 100;
}

.lede { font-size: clamp(18px, 2.2vw, 21px); line-height: 1.5; color: var(--ink2); max-width: 34em }
.dim { color: var(--ink2) }
.cap { font-size: 14.5px; color: var(--ink3) }
.tnum { font-variant-numeric: tabular-nums }

/* ---- buttons ------------------------------------------------------------ */

.btn, .btn-quiet {
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
  font: inherit; font-weight: 700; font-size: 15.5px;
  padding: 12px 22px; border-radius: 10px;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--hover) ease, border-color var(--hover) ease,
              transform var(--hover) ease;
}
.btn { background: var(--acc); color: var(--accInk) }
.btn:hover { background: var(--accDown) }
.btn:active { transform: translateY(1px) }
.btn-quiet { color: var(--ink); border-color: var(--line); background: transparent }
.btn-quiet:hover { border-color: var(--ink3); background: var(--p2) }
.btn-lg { padding: 15px 28px; font-size: 17px }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn-quiet { transition: none }
  .btn:active { transform: none }
}

/* ---- surfaces ----------------------------------------------------------- */

.card {
  background: var(--p1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px 28px;
}
.card.inset { background: var(--p2) }

.band { padding: 88px 0 }
.band.tint { background: var(--p1); border-block: 1px solid var(--line) }
@media (max-width: 640px) { .band { padding: 56px 0 } }

.grid { display: grid; gap: 20px }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr) }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr) }
/* Trios step down through two columns before stacking — the old single
 * 900px collapse gave a 744px tablet full-width cards of one-line text. */
@media (max-width: 900px) { .grid.cols-3 { grid-template-columns: 1fr 1fr } .grid.cols-2 { grid-template-columns: 1fr } }
@media (max-width: 640px) { .grid.cols-3 { grid-template-columns: 1fr } }

.scroll-x { overflow-x: auto }

/* ---- skip link ---------------------------------------------------------- */

.skip {
  position: absolute; left: 16px; top: -48px;
  background: var(--acc); color: var(--accInk);
  padding: 10px 16px; border-radius: 0 0 8px 8px;
  font-weight: 700; text-decoration: none; z-index: 30;
  transition: top .15s ease;
}
.skip:focus-visible { top: 0 }

/* ---- header ------------------------------------------------------------- */

.site-head {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex; align-items: center; gap: 28px;
  min-height: 64px;
}

.logo {
  display: inline-flex; align-items: center; gap: 10px;
  flex-shrink: 0;
  text-decoration: none; color: var(--ink);
}
.logo .wordmark {
  font-weight: 800; font-variation-settings: 'wdth' 116;
  letter-spacing: .03em; text-transform: uppercase; font-size: 17px;
}

.prim { display: flex; align-items: center; gap: 4px; margin-right: auto }
.prim a {
  color: var(--ink2); text-decoration: none; font-weight: 600; font-size: 15.5px;
  padding: 8px 12px; border-radius: 8px;
}
.prim a:hover { color: var(--ink); background: var(--p2) }
.prim a[aria-current='page'] { color: var(--ink) }

.head-cta { display: flex; align-items: center; gap: 10px }
.head-cta .login {
  color: var(--ink2); text-decoration: none; font-weight: 600; font-size: 15.5px;
  padding: 8px 12px; border-radius: 8px;
}
.head-cta .login:hover { color: var(--ink); background: var(--p2) }
.head-cta .btn { padding: 9px 16px; font-size: 14.5px }

/* Mobile nav: a <details> disclosure, keyboard-usable with no JS.
 * The full nav genuinely needs ~780px once labels refuse to wrap
 * mid-phrase ("How it / works" is worse than a menu), so 820 stands.
 * The CTA and summary keep ≥44px height: they are the page's primary
 * touch targets. */
.prim a, .head-cta .login { white-space: nowrap }
.m-nav { display: none }
@media (max-width: 820px) {
  .prim, .head-cta .login { display: none }
  /* The picker moves into the menu, or the header is wider than a phone (#1087). */
  .head-cta form.lang { display: none }
  .m-nav { display: block; margin-left: auto }
  .head-cta { margin-left: 0 }
  .head-cta .btn { padding: 13px 15px; font-size: 13.5px }
  .site-head .wrap { gap: 12px }
  .m-nav > summary {
    list-style: none; cursor: pointer;
    padding: 12px 14px; border-radius: 8px; border: 1px solid var(--line);
    font-weight: 700; font-size: 14.5px; color: var(--ink);
  }
  .m-nav > summary::-webkit-details-marker { display: none }
  .m-nav[open] > summary { background: var(--p2) }
  .m-nav .sheet {
    position: absolute; left: 0; right: 0; top: 64px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 8px 16px 16px;
    display: flex; flex-direction: column;
  }
  .m-nav .sheet a {
    color: var(--ink); text-decoration: none; font-weight: 600;
    padding: 13px 8px; border-bottom: 1px solid var(--line); font-size: 17px;
  }
  .m-nav .sheet a:last-child { border-bottom: none }
  .m-nav .sheet a[aria-current='page'] { color: var(--src2T) }
}

/* ---- footer ------------------------------------------------------------- */

.site-foot {
  border-top: 1px solid var(--line);
  background: var(--p1);
  padding: 48px 0 40px;
  margin-top: 96px;
  font-size: 14.5px;
}
.site-foot .cols {
  display: flex; gap: 48px; flex-wrap: wrap; justify-content: space-between;
}
.site-foot nav { display: flex; flex-direction: column; gap: 8px }
.site-foot nav a { color: var(--ink2); text-decoration: none }
/* Thumb-sized footer links where thumbs are likely. */
@media (max-width: 700px) {
  .site-foot nav { gap: 0 }
  .site-foot nav a { padding: 11px 0 }
}
.site-foot nav a:hover { color: var(--ink); text-decoration: underline }
.site-foot .foot-head {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink3); font-weight: 800; margin-bottom: 6px;
}
.site-foot .legal { margin-top: 36px; color: var(--ink3); max-width: 56em }
.site-foot .foot-tag { margin-top: 10px; max-width: 24em }

/* ---- the mark ------------------------------------------------------------
 * Syncera's mark (#563): red and blue strands and a pale middle one meet in
 * an orange pill, the one record. The same drawing as the app icon; its
 * source is docs/design/logo/. The --mark* tokens carry its light and dark
 * colours, so it holds in both themes.
 */
.k-glyph .s1 { stroke: var(--mark1) }
.k-glyph .s2 { stroke: var(--mark2) }
.k-glyph .s3 { stroke: var(--mark3) }
.k-glyph .rec { stroke: var(--markRec) }

/* ---- reveal on scroll ---------------------------------------------------
 * Content sections rise 8px as they enter. JS adds .in; without JS (or with
 * reduced motion) everything is simply visible.
 */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(8px);
    transition: opacity var(--rise) ease, transform var(--rise) ease }
  .js .reveal.in { opacity: 1; transform: none }
  .js .reveal:nth-child(2) { transition-delay: var(--step) }
  .js .reveal:nth-child(3) { transition-delay: calc(var(--step) * 2) }
  .js .reveal:nth-child(4) { transition-delay: calc(var(--step) * 3) }
}

/* ---- misc --------------------------------------------------------------- */

hr.rule { border: 0; border-top: 1px solid var(--line); margin: 32px 0 }

/* ---- homepage: hero, confluence, stats ---------------------------------- */

.hero { padding-top: 96px }
@media (max-width: 640px) { .hero { padding-top: 56px } }

/* Page-load sequence: pure CSS, so it works with JS absent and disappears
 * entirely under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero .rise { animation: rise-in var(--rise) ease both }
  .hero .rise:nth-child(2) { animation-delay: calc(var(--step) * 1) }
  .hero .rise:nth-child(3) { animation-delay: calc(var(--step) * 2) }
  .hero .rise:nth-child(4) { animation-delay: calc(var(--step) * 3) }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(10px) }
}

/* The confluence. The strands scale uniformly (default preserveAspectRatio —
 * never 'none': non-uniform scale puts dash geometry in engine-dependent
 * territory, the documented Safari trap). Labels are HTML beside the SVG so
 * they hold their size at every width. */
.confluence {
  display: flex; align-items: stretch; gap: 18px;
  max-width: 880px;
}
.confluence svg { flex: 1; min-width: 0; height: auto }
.conf-labels {
  display: flex; flex-direction: column; justify-content: space-between;
  text-align: right; padding: 0;
}
.conf-src {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 800;
}
.conf-src.c1 { color: var(--src1T) }
.conf-src.c2 { color: var(--src2T) }
.conf-src.c3 { color: var(--src3T) }
.conf-out { align-self: center; white-space: nowrap; color: var(--ink) }

.confluence .s1 { stroke: var(--src1) }
.confluence .s2 { stroke: var(--src2) }
.confluence .s3 { stroke: var(--src3) }
.confluence .record { stroke: var(--ink) }
.confluence .rec-dot { fill: var(--ink) }

/* Data draws itself; everything is simply present without JS or with
 * reduced motion. pathLength="1" normalizes every dash to the same clock. */
@media (prefers-reduced-motion: no-preference) {
  .js .confluence:not(.drawn) .strand,
  .js .confluence:not(.drawn) .record {
    stroke-dasharray: 1; stroke-dashoffset: 1;
  }
  .js .confluence:not(.drawn):not(.play) .rec-dot,
  .js .confluence:not(.drawn):not(.play) .conf-src,
  .js .confluence:not(.drawn):not(.play) .conf-out { opacity: 0 }

  .confluence.play .strand { animation: draw var(--draw) ease forwards }
  .confluence.play .s2 { animation-delay: .18s }
  .confluence.play .s3 { animation-delay: .36s }
  .confluence.play .record {
    animation: draw .6s ease forwards; animation-delay: 1.45s;
  }
  .confluence.play .conf-src { transition: opacity .4s ease }
  .confluence.play .c1 { opacity: 1; transition-delay: .1s }
  .confluence.play .c2 { opacity: 1; transition-delay: .28s }
  .confluence.play .c3 { opacity: 1; transition-delay: .46s }
  .confluence.play .rec-dot,
  .confluence.play .conf-out { transition: opacity .4s ease 1.9s; opacity: 1 }
}
@keyframes draw { to { stroke-dashoffset: 0 } }

.stats .stat {
  font-size: clamp(46px, 6vw, 72px); font-weight: 800;
  font-variation-settings: 'wdth' 120; letter-spacing: -.02em;
  line-height: 1; margin-bottom: 10px;
}

.closing { text-align: center }
.closing .lede { margin-inline: auto }

/* A band whose only body is one paragraph: heading left, prose right at
 * width, instead of a half-empty tinted stripe. */
@media (min-width: 1024px) {
  .band-split .wrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px 56px; align-items: start }
  .band-split .eyebrow { grid-column: 1 / -1 }
  .band-split .lede { margin-top: 0 }
}

/* The authority ladder: prose left, the five levels right, once both fit.
 * Below 1024 it reads top-to-bottom unchanged. */
@media (min-width: 1024px) {
  /* Rows: heading, intro, then a 1fr the outro sits at the top of —
   * otherwise the tall spanning ladder spreads the prose apart. */
  .ladder-block {
    display: grid; grid-template-columns: 1fr 1.3fr;
    grid-template-rows: auto auto 1fr;
    gap: 8px 56px; align-items: start;
  }
  .ladder-block .ladder { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; max-width: none }
}

/* The hero earns its right half at width: copy beside the confluence
 * diagram instead of above a capped copy of it. Explicit rows so the
 * figure can span them all. */
@media (min-width: 1100px) {
  .hero .wrap:has(.confluence) { display: grid; grid-template-columns: 1.05fr 1fr; column-gap: 64px; grid-template-rows: repeat(4, auto); align-items: center }
  .hero .wrap:has(.confluence) > * { grid-column: 1 }
  .hero .wrap:has(.confluence) > .confluence { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; align-self: center }
  /* The 82px display was sized for a full-width line; in a half-width
   * column it stacked five one-word lines. */
  .hero .wrap:has(.confluence) .display { font-size: clamp(40px, 3.9vw, 58px) }
}
.field label { display: block; font-weight: 700; font-size: 14.5px; margin-bottom: 6px }
.field input, .field textarea {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 11px 13px;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink3) }
.field textarea { resize: vertical; min-height: 74px }

/* Honeypot: present for bots, absent for people. Not display:none — some
 * harvesters skip invisible fields, but all of them skip nothing. */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden }

.form-err { color: var(--critT); font-weight: 600 }

/* ---- privacy ------------------------------------------------------------ */

.plainlist { list-style: none }
.plainlist li {
  padding: 10px 0 10px 26px; position: relative;
  border-bottom: 1px solid var(--line);
}
.plainlist li:last-child { border-bottom: none }
.plainlist li::before {
  content: ''; position: absolute; left: 4px; top: 1.05em;
  width: 10px; height: 3px; border-radius: 2px; background: var(--src2);
}

/* ---- integrations ------------------------------------------------------- */

.cardhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}

/* ---- how-it-works: the authority ladder --------------------------------- */

.ladder { list-style: none; max-width: 760px }
.ladder li {
  display: flex; align-items: baseline; gap: 18px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.ladder li:first-child { border-top: 1px solid var(--line) }
.ladder .lv {
  flex: 0 0 128px; font-weight: 800; font-variation-settings: 'wdth' 110;
  letter-spacing: .02em; text-transform: uppercase; font-size: 13px;
}
/* Strength fades down the ladder: the ink carries the ranking. */
.ladder li:nth-child(1) .lv { color: var(--ink) }
.ladder li:nth-child(2) .lv { color: var(--ink) }
.ladder li:nth-child(3) .lv { color: var(--ink2) }
.ladder li:nth-child(4) .lv { color: var(--ink2) }
.ladder li:nth-child(5) .lv { color: var(--ink3); text-decoration: line-through }
.ladder-intro { max-width: 40em }
@media (max-width: 640px) {
  .ladder li { flex-direction: column; gap: 4px }
  .ladder .lv { flex-basis: auto }
}

/* Spacing utilities — the CSP forbids inline style attributes, so vertical
 * rhythm between blocks is spoken in these instead. */
.mt-8 { margin-top: 8px } .mt-12 { margin-top: 12px } .mt-16 { margin-top: 16px }
.mt-20 { margin-top: 20px } .mt-24 { margin-top: 24px } .mt-32 { margin-top: 32px }
.mt-48 { margin-top: 48px } .mt-64 { margin-top: 64px }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--ink2); text-transform: uppercase;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink3) }
.pill.live { color: var(--src1T); border-color: currentColor }
.pill.live .dot { background: var(--src1) }
.pill.soon { color: var(--src3T); border-color: currentColor }
.pill.soon .dot { background: var(--src3) }

/* ---- the unlisted mockup preview (#420) ---------------------------------- */
.preview .direction { padding: 28px 0 8px; border-top: 1px solid var(--line); }
.preview .direction h2 { margin: 0 0 6px; }
.preview .brief { max-width: 68ch; margin: 0 0 18px; color: var(--ink2); }
.preview .boards { display: flex; gap: 18px; overflow-x: auto; padding: 4px 0 18px; scroll-snap-type: x proximity; }
.preview .board { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; scroll-snap-align: start; text-decoration: none; color: inherit; }
.preview .board img { display: block; height: 420px; width: auto; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.preview .board span { font-size: 12px; color: var(--ink3); }
.preview .board { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(16, 21, 28, 0.94); display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; justify-items: center; }
.lightbox figure { margin: 0; height: 100vh; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0; box-sizing: border-box; }
.lightbox .lb-scroll { flex: 1 1 auto; min-height: 0; width: 100%; overflow: auto; display: flex; justify-content: center; align-items: flex-start; }
.lightbox img { display: block; height: auto; max-width: 100%; border-radius: 12px; background: #fff; }
.lightbox .lb-zoom { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; }
.lightbox .lb-zoom button { width: 32px; height: 32px; font-size: 18px; }
.lightbox .lb-zoom .lb-fit { width: auto; padding: 0 12px; font-size: 13px; font-weight: 600; }
.lightbox .lb-pct { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.lightbox figcaption { display: flex; gap: 14px; font-size: 13px; color: #cfd6df; }
.lightbox figcaption .lb-title { color: #fff; font-weight: 600; }
.lightbox button { appearance: none; border: 0; background: rgba(255,255,255,0.12); color: #fff; width: 44px; height: 44px; border-radius: 999px; font-size: 26px; line-height: 1; cursor: pointer; }
.lightbox button:hover { background: rgba(255,255,255,0.22); }
.lightbox .lb-close { position: fixed; top: 16px; right: 16px; }
.lightbox[hidden] { display: none; }
body.lb-open { overflow: hidden; }
@media (max-width: 640px) {
  .lightbox { grid-template-columns: 1fr; }
  .lightbox .lb-prev, .lightbox .lb-next { position: fixed; bottom: 16px; }
  .lightbox .lb-prev { left: 16px; } .lightbox .lb-next { right: 16px; }
}

/* ---- the language picker (#1065) ---------------------------------------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
form.lang { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 0 0 }
form.lang select { font: inherit; font-size: 14px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--p1); color: var(--ink) }
form.lang button { font: inherit; font-size: 14px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--p2); color: var(--ink) }

/* ---- chapters of the home page and the feature pages (#1065) ------------ */
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center }
.btn-row-center { justify-content: center }
.chapter { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center }
.chapter.flip > .chapter-text { order: 2 }
@media (max-width: 860px) {
  .chapter { grid-template-columns: 1fr; gap: 32px }
  .chapter.flip > .chapter-text { order: 0 }
}
.flist { list-style: none; padding: 0; margin: 28px 0 0 }
.flist li { border-top: 1px solid var(--line) }
.flist li:last-child { border-bottom: 1px solid var(--line) }
.flist a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 4px 14px 16px; color: var(--ink); text-decoration: none; position: relative; font-size: 17px; transition: color .25s }
.flist .sub { display: block; font-size: 14px; color: var(--ink3); margin-top: 2px }
.flist .ar { color: var(--acc); font-weight: 700; opacity: .4; transition: opacity .25s }
/* The active row changes colour and gains a bar, never weight: the list must not reflow. */
.flist a::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: var(--acc); transform: scaleY(0); transition: transform .3s }
.flist a:hover .ar, .flist a:focus-visible .ar, .flist a.on .ar { opacity: 1 }
.flist a.on { color: var(--acc) }
.flist a.on::before { transform: scaleY(1) }
.ticker { height: 3px; background: var(--line); border-radius: 2px; margin-top: 18px; overflow: hidden; max-width: 220px }
.ticker i { display: block; height: 100%; width: 0; background: var(--acc) }

/* One fixed size whatever the picture: nothing around the stage moves. */
.stage { position: relative; width: 280px; height: 560px; margin: 0 auto }
.phone { width: 280px; height: 560px; box-sizing: border-box; padding: 12px; border-radius: 42px; background: #10151C; box-shadow: 0 30px 70px rgba(16, 21, 28, .18); margin: 0 auto }
.phone img { display: block; width: 256px; height: 536px; border-radius: 31px; background: linear-gradient(180deg, #0E0F2C, #1E1A55) }
.stage .phone { position: absolute; inset: 0; opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .5s; pointer-events: none }
.stage .phone:first-child, .stage .phone.on { opacity: 1; transform: none; pointer-events: auto }
.stage.running .phone:first-child:not(.on) { pointer-events: none }
.stage.running .phone:first-child:not(.on) { opacity: 0 }
@media (prefers-reduced-motion: reduce) { .stage .phone { transition: none } }

.sources { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.src { background: var(--p1); border: 1px solid var(--line); border-radius: 12px; padding: 16px; font-weight: 700 }
.src span { display: block; font-weight: 400; color: var(--ink3); font-size: 13.5px; margin-top: 2px }
.src.soon { background: transparent; border-style: dashed; color: var(--ink2) }
.vault { list-style: none; margin: 0; background: var(--p1); border: 1px solid var(--line); border-radius: 16px; padding: 12px 24px }
.vrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line) }
.vrow:first-child { border-top: 0 }
.chip { font-size: 13px; padding: 5px 10px; border-radius: 999px; background: var(--p2); white-space: nowrap }
.chip.danger { color: var(--critT); font-weight: 700; background: transparent }
.display-3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.12; letter-spacing: -.01em; font-weight: 800; margin: 0 }
.phone.small { width: 224px; height: 443px; border-radius: 34px }
.phone.small img { width: 200px; height: 419px; border-radius: 25px }
.crumb { font-size: 14px; color: var(--ink3); margin: 0 0 14px }
.crumb a { color: var(--ink3) }
.related { list-style: none; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 0 }
.related a { display: inline-block; background: var(--p1); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; text-decoration: none; color: var(--ink) }
.note { font-size: 14px; color: var(--ink3); border-top: 1px solid var(--line); padding-top: 14px; margin-top: 28px }
.allgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 40px }
@media (max-width: 1000px) { .allgrid { grid-template-columns: 1fr 1fr } }
@media (max-width: 600px) { .allgrid { grid-template-columns: 1fr } }
.allgrid ul { list-style: none; padding: 0; margin: 12px 0 0 }
.allgrid li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink2) }
.allgrid li a { color: var(--ink); text-decoration: none }
.allgrid li a::after { content: " →"; color: var(--acc) }
.allgrid ul.sub { margin: 6px 0 0 }
.allgrid .sub li { padding: 4px 0 4px 16px; border-top: 0; font-size: 14px }
.allgrid .sub li a { color: var(--ink2) }
.band[id] { scroll-margin-top: 72px }
.prose { max-width: 820px }

/* ---- pictures that open large, and the cloud of platforms (#1073) -------- */
.zoom { display: block; cursor: zoom-in; border-radius: inherit }
.zoom:focus-visible { outline: 3px solid var(--acc); outline-offset: 4px }
/* Its own class: the preview page's .lightbox is a full-screen grid. The reset's
 * margin: 0 would also take away the auto margin that centres a modal dialog. */
dialog.viewer { margin: auto; inset: 0; padding: 0; border: 0; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible }
dialog.viewer::backdrop { background: rgba(10, 12, 18, .82) }
dialog.viewer img { display: block; max-width: 92vw; max-height: 92vh; width: auto; height: auto; border-radius: 28px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); cursor: zoom-out }
dialog.viewer button { position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--p1); color: var(--ink); font: inherit; font-size: 20px; line-height: 1; cursor: pointer }

.cloud { margin: 0 auto; max-width: 540px }
.cloud-ring { position: relative; aspect-ratio: 5 / 4; }
.cloud-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 26px; background: var(--p1); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 20px 50px rgba(16, 21, 28, .12) }
.cloud-center .wordmark { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 15px }
.logo-tile { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 21%; height: 12%; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 22px rgba(16, 21, 28, .07) }
.logo-tile img { max-width: 76%; max-height: 52%; width: auto; height: auto }
.logo-tile.word { font-weight: 800; font-size: 14px; color: #10151C }
.logo-tile.soon { opacity: .5; border-style: dashed }
/* Nine tiles on a ring around Syncera, 40° apart. */
.p1 { left: 50.0%; top: 10.0% }
.p2 { left: 75.1%; top: 19.4% }
.p3 { left: 88.4%; top: 43.1% }
.p4 { left: 83.8%; top: 70.0% }
.p5 { left: 63.3%; top: 87.6% }
.p6 { left: 36.7%; top: 87.6% }
.p7 { left: 16.2%; top: 70.0% }
.p8 { left: 11.6%; top: 43.1% }
.p9 { left: 24.9%; top: 19.4% }
.flags, .mcp { margin: 0 auto; max-width: 440px }
.flag-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px }
.flag-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px 10px; background: var(--p1); border: 1px solid var(--line); border-radius: 16px; font-weight: 700; text-align: center }
.flag-tile img { width: 72px; height: auto; border-radius: 6px; box-shadow: 0 0 0 1px var(--line) }
.flag-tile.soon { border-style: dashed; color: var(--ink2); font-weight: 600 }
.flag-more { font-size: 34px; line-height: 48px; color: var(--ink3) }
.mcp-flow { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap }
.mcp-box { padding: 18px 20px; background: var(--p1); border: 1px solid var(--line); border-radius: 16px; font-weight: 800 }
.mcp-syncera { border-color: var(--acc); color: var(--acc) }
.mcp-arrow { font-weight: 700; color: var(--ink2) }
.mcp-facts { list-style: none; padding: 0; margin: 20px 0 0 }
.mcp-facts li { padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink2) }

/* The language picker inside the phone menu (#1087). */
.m-nav form.lang-sheet { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 0; padding: 12px 4px 4px; border-top: 1px solid var(--line) }
.m-nav form.lang-sheet label { color: var(--ink2); font-size: 15px }
.m-nav form.lang-sheet select { font: inherit; font-size: 15px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--p1); color: var(--ink) }

/* A Watch screen in a Watch's frame (#1094): 208 × 248, its own shape, never a phone's. */
.watch { width: 236px; margin: 0 auto; padding: 14px; border-radius: 58px; background: #0b0b10; box-shadow: 0 30px 70px rgba(16, 21, 28, .22), inset 0 0 0 2px #2a2a33 }
.watch img { display: block; width: 208px; height: 248px; border-radius: 44px; background: #0E0F2C }