/* Local Translate — storefront stylesheet.
   Light is the default theme; dark is the toggle (the app has day/night too).
   One accent only: BIM orange. Jade appears once, on the "stays on this Mac"
   signal, and nowhere else.

   Class contract with build.py and buy.js — do not rename without checking both:
   nav__*, theme-toggle, i-sun/i-moon, hero*, band, wrap, waypoint*, section-title,
   price* (+ buy.js: price__badge/__was/__figure/__now/__terms/__counter/__pending,
   price--launch), btn*, footer*, skip-link, main.doc / main.showroom. */

:root {
  --paper:        #FFFFFF;
  --paper-2:      #F6F5F2;
  --paper-3:      #EFECE7;
  --ink:          #141312;
  --ink-2:        #5B5650;
  --ink-3:        #8A837B;
  --rule:         #E4DFD8;
  --rule-strong:  #CFC8BF;
  --orange:       #F58300;
  --orange-ink:   #A85A00;
  --orange-soft:  #FFF1DE;
  --jade:         #2F7D62;
  --on-accent:    #1A1200;

  --shadow:       0 1px 2px rgba(20, 19, 18, .05), 0 12px 32px -12px rgba(20, 19, 18, .12);
  --shadow-lift:  0 2px 4px rgba(20, 19, 18, .06), 0 24px 48px -16px rgba(20, 19, 18, .18);

  --font: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --t-display: clamp(2.6rem, 5.4vw, 4.25rem);
  --t-h2:      clamp(1.75rem, 3vw, 2.4rem);
  --t-h3:      clamp(1.15rem, 1.6vw, 1.35rem);
  --t-body:    1.0625rem;
  --t-small:   0.875rem;
  --t-micro:   0.75rem;

  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
  --s-6: 32px; --s-7: 48px;  --s-8: 64px;  --s-9: 96px;  --s-10: 128px;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --max-w: 1360px;   /* 7.2: nav, hero and every section, every page */
  --measure: 68ch;
}

[data-theme="dark"] {
  --paper:       #171614;
  --paper-2:     #1E1C19;
  --paper-3:     #26231F;
  --ink:         #EDE9E3;
  --ink-2:       #B9B2A8;
  --ink-3:       #8D857A;
  --rule:        #322E29;
  --rule-strong: #45403A;
  --orange-soft: #3A2A12;
  --orange-ink:  #FFB25C;
  --jade:        #5FBE97;
  --shadow:      0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -12px rgba(0, 0, 0, .5);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .45), 0 24px 48px -16px rgba(0, 0, 0, .6);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

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

a { color: var(--orange-ink); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }

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

h1, h2, h3, h4 {
  margin: 0 0 var(--s-4);
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-weight: 700;
  text-wrap: balance;
}

/* Headings are one phrase. The old site set a single word per heading in italic
   orange — the commonest generated-page tell, and it made every title read like
   a slogan. The <em> stays in the markup for semantics and does nothing here. */
h1 em, h2 em, h3 em, h4 em, .section-title em, .hero__sub em {
  font-style: normal;
  font-weight: inherit;
  color: inherit;
}

p { margin: 0 0 var(--s-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

b, strong { font-weight: 650; }

code {
  font-family: var(--mono);
  font-size: .875em;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: .1em .38em;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--s-7) 0;
}

.wrap {
  width: min(100% - 2 * var(--s-5), var(--max-w));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-3) var(--s-4);
  z-index: 100;
}
.skip-link:focus { left: var(--s-4); top: var(--s-4); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}

.nav__inner {
  width: min(100% - 2 * var(--s-5), var(--max-w));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 68px;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--ink);
  flex: 0 0 auto;
}
.nav__mark, .footer__mark { width: 152px; height: auto; }
.nav__word {
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: 1.0625rem;
  border-left: 1px solid var(--rule-strong);
  padding-left: var(--s-3);
}
.nav__word span { color: var(--ink-3); font-weight: 500; }

.nav__links {
  display: flex;
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
}
.nav__links a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--t-small);
  font-weight: 500;
  padding: var(--s-2) 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;   /* a wrapped nav label is a broken nav */
}
.nav__links a:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
.nav__links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--orange); }

.nav__right { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; }
.nav__cta, .btn { white-space: nowrap; }   /* "Try / now" is not a button label */

.theme-toggle {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-2);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--rule-strong); }
.theme-toggle svg { width: 17px; height: 17px; }
[data-theme="dark"] .i-sun { display: none; }
[data-theme="light"] .i-moon { display: none; }

.nav__burger {
  display: none;
  width: 36px; height: 36px;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.nav__burger span { display: block; width: 16px; height: 1.5px; background: var(--ink); }

.nav__panel {
  display: none;
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.nav__panel[data-open="true"] { display: block; }
.nav__panel ul {
  list-style: none; margin: 0; padding: var(--s-3) var(--s-5) var(--s-5);
  width: min(100%, var(--max-w)); margin-inline: auto;
}
.nav__panel a {
  display: block;
  padding: var(--s-3) 0;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  font-weight: 500;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.72em 1.35em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--t-small);
  font-weight: 650;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--orange);
  color: var(--on-accent);
  border-color: var(--orange);
}
.btn--primary:hover { background: #E07800; border-color: #E07800; color: var(--on-accent); }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn--outline:hover { border-color: var(--ink); color: var(--ink); }

.btn--sm { padding: 0.52em 1.05em; font-size: var(--t-micro); }
.btn--block { display: flex; width: 100%; }

.btn--pending {
  background: transparent;
  color: var(--ink-2);
  border: 1px dashed var(--rule-strong);
  cursor: default;
}
.btn--pending:hover { transform: none; }

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  padding: var(--s-6) 0 var(--s-8);
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-8);
  align-items: center;
}

/* The kicker is a real sub-headline: orange, bold, twice the size it was. */
.hero__eyebrow {
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--orange-ink);
  margin: 0 0 var(--s-3);
}

/* Bigger and wider: two lines at 1440 px, never three. */
.hero h1 {
  font-size: clamp(2.9rem, 5.6vw, 4.75rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
  font-weight: 800;
  margin-bottom: var(--s-4);
  max-width: 21ch;
}

.hero__sub {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 52ch;
  margin-bottom: var(--s-5);
}

/* The call to action and the two figures share one row. */
.hero__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-5);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

.hero__price {
  font-size: var(--t-small);
  color: var(--ink-3);
}
.hero__price b { color: var(--ink); font-weight: 650; }

/* Two quiet figures, no cards — a row separated by hairlines. */
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  list-style: none;
}
.hero__facts li {
  padding-right: var(--s-5);
  margin-right: var(--s-5);
  border-right: 1px solid var(--rule);
  font-size: var(--t-small);
  color: var(--ink-2);
  max-width: none;
}
.hero__facts li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero__facts b { display: block; color: var(--ink); font-size: 1.02rem; font-weight: 650; letter-spacing: -0.015em; }

/* The hero carries the real app (app/src built by scripts/build-web-demo.sh),
   not a picture of it. One column: a window needs the page width to be a window.
   release.sh rebuilds that bundle first, so the two cannot drift apart. */
/* 1.7 + 1.6: two columns from 1200 px. Left: kicker, H1, text, Try it now.
   Right: the product, in the first screen: DeepL-style segmented tabs over one
   rounded panel holding the real app. The app is laid out at its own width
   (APP_W in the page script) and scaled down to the column, so it stays the
   real UI instead of a squeezed one. Below 1200 px the two stack. */
.hero--wide {
  width: min(100% - 2 * var(--s-5), var(--max-w));
  grid-template-columns: minmax(0, 5.6fr) minmax(0, 6.4fr);
  gap: var(--s-6);
  align-items: center;
}
.hero--wide .hero__copy { max-width: none; }
.hero--wide h1 { font-size: clamp(2.5rem, 3.75vw, 3.6rem); max-width: none; }
.hero--wide .hero__sub { font-size: 1.0625rem; }
.hero--wide .hero__facts { flex-wrap: wrap; }

.try__tabs {
  display: flex;
  gap: 2px;
  padding: 4px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  margin-bottom: var(--s-3);
}
.try__tab {
  flex: 1 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  padding: 8px 10px;
  min-width: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: clamp(0.72rem, 0.9vw, 0.8125rem);
  font-weight: 600;
  cursor: pointer;
}
.try__tab svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.try__tab:hover { color: var(--ink); }
.try__tab[aria-selected="true"] {
  background: var(--paper);
  color: var(--orange-ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.try__panel {
  padding: var(--s-4);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: calc(var(--radius-lg) + 8px);
}
.try__text { margin: 0 var(--s-2) var(--s-3); min-height: 3.1em; }
.try__h { font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -0.01em; }
.try__text p:not(.try__h) { color: var(--ink-2); font-size: var(--t-small); line-height: 1.45; margin: 2px 0 0; }
.try__demo {
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-lift);
}
.demo-frame {
  display: block;
  border: 0;
  background: var(--paper);
  transform-origin: 0 0;
}
@media (max-width: 1199px) {
  .hero--wide { grid-template-columns: minmax(0, 1fr); }
}

/* The app window mock. */
.app {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  font-size: var(--t-small);
}
[data-theme="dark"] .app { background: var(--paper-2); }

.app__bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 9px var(--s-4);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
[data-theme="dark"] .app__bar { background: var(--paper-3); }
.app__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rule-strong); }
.app__title {
  margin-left: var(--s-2);
  font-size: var(--t-micro);
  color: var(--ink-3);
  font-weight: 500;
}

.app__tabs {
  display: flex;
  gap: 2px;
  padding: var(--s-2) var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
}
.app__tab {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--t-micro);
  font-weight: 550;
  color: var(--ink-3);
  padding: 7px 11px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.app__tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--orange); }

.app__panes { padding: var(--s-4); }
.app__pane { display: none; }
.app__pane[data-active="true"] { display: block; }

.app__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.app__side { background: var(--paper); padding: var(--s-3) var(--s-4); min-height: 118px; }
[data-theme="dark"] .app__side { background: var(--paper-2); }
.app__lang {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink-3);
  margin: 0 0 var(--s-2);
  letter-spacing: 0.02em;
}
.app__side p { margin: 0; font-size: 0.8125rem; line-height: 1.55; max-width: none; color: var(--ink); }
.app__side--out p { color: var(--ink); }

.app__note {
  margin: var(--s-3) 0 0;
  font-size: var(--t-micro);
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.app__note .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--jade); flex: 0 0 auto; }

/* mode pills */
.modes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: center;
  padding: var(--s-6) 0 0;
}
.mode {
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-2);
  font-family: inherit;
  font-size: var(--t-small);
  font-weight: 550;
  padding: 0.55em 1.15em;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.mode:hover { border-color: var(--rule-strong); color: var(--ink); }
.mode[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* ---------------------------------------------------------------- bands */

.band { padding: var(--s-8) 0; }   /* 7.3: was s-9 (96 px), too much air */
.band--tint { background: var(--paper-2); }
.band--tight { padding: var(--s-8) 0; }

.waypoint {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
}
.waypoint::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.waypoint__label {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

.section-title {
  font-size: var(--t-h2);
  letter-spacing: -0.03em;
  max-width: 20ch;
  margin-bottom: var(--s-5);
}

.lede {
  font-size: clamp(1.0625rem, 1.4vw, 1.2rem);
  color: var(--ink-2);
  max-width: 56ch;
  margin-bottom: var(--s-7);
}

/* Three plain statements, separated by hairlines. No card grid: the subject is
   a claim, and a claim reads as a list of sentences, not as five rounded boxes. */
.statements { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.statements li {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--s-6);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--rule);
  max-width: none;
}
.statements h3 {
  font-size: var(--t-h3);
  letter-spacing: -0.022em;
  margin: 0;
}
.statements p { margin: 0; color: var(--ink-2); }

/* Two-column list of short titled paragraphs. */
.uses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6) var(--s-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
.uses li { max-width: none; }
.uses h3 {
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s-2);
}
.uses p { margin: 0; color: var(--ink-2); font-size: var(--t-small); line-height: 1.6; }

/* ---------------------------------------------------------------- specs */

.specs {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
}
.specs th, .specs td {
  text-align: left;
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.specs th {
  font-weight: 600;
  color: var(--ink);
  width: 32%;
  letter-spacing: -0.01em;
}
.specs td { color: var(--ink-2); }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }
.specs .num { font-family: var(--mono); font-size: 0.8125rem; color: var(--ink); white-space: nowrap; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule);
  color: var(--ink-2);
  white-space: nowrap;
}
.tag--local {
  border-color: color-mix(in srgb, var(--jade) 40%, var(--rule));
  color: var(--jade);
  background: color-mix(in srgb, var(--jade) 8%, transparent);
}

/* ---------------------------------------------------------------- api band */

.api {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-8);
  align-items: start;
}

.code {
  background: var(--ink);
  color: #EDE9E3;
  border-radius: var(--radius);
  padding: var(--s-5);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.7;
}
[data-theme="dark"] .code { background: #0E0D0C; border: 1px solid var(--rule); }
.code pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
.code .c { color: #9A9188; }
.code .k { color: #FFB25C; }

.api__list { margin: var(--s-4) 0 0; padding-left: 1.1em; color: var(--ink-2); font-size: var(--t-small); }
.api__list li { margin-bottom: var(--s-2); }
.api__list li::marker { color: var(--orange); }

/* ---------------------------------------------------------------- price */

/* The buy band is a single-focus block: heading and card form one narrow
 * centred column rather than a left-aligned card floating in a wide band. */
#lt-buy .wrap { max-width: 640px; margin-inline: auto; }

.price {
  max-width: 560px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow);
}
.band--tint .price { background: var(--paper); }

.price__badge {
  display: inline-block;
  margin: 0 0 var(--s-3);
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--orange-ink);
  background: var(--orange-soft);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}
.price__name { font-size: var(--t-h3); margin-bottom: var(--s-2); }
.price__blurb { color: var(--ink-2); font-size: var(--t-small); margin-bottom: var(--s-4); }
.price__figure { display: flex; align-items: baseline; gap: var(--s-3); margin: 0 0 var(--s-2); }
.price__now { font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.price__was { color: var(--ink-3); font-size: 1.15rem; }
.price__amount { margin: 0 0 var(--s-3); }
.price__amount b { font-size: 1.6rem; letter-spacing: -0.03em; }
.price__amount span { color: var(--ink-3); font-size: var(--t-small); margin-left: var(--s-2); }
.price__terms, .price__note, .price__counter, .price__pending {
  font-size: var(--t-small);
  color: var(--ink-2);
}
.price__counter[data-state="error"] { color: var(--orange-ink); }

.price__list {
  list-style: none;
  margin: var(--s-5) 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
/* Never put a text <li> in a 2-column grid: the text wraps one word per line.
   The bullet is a positioned ::before and the text keeps a normal flow. */
.price__list li {
  position: relative;
  padding: var(--s-3) 0 var(--s-3) 22px;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-small);
  color: var(--ink-2);
  max-width: none;
}
.price__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.32em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}

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

.footer {
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
  padding: var(--s-8) 0 var(--s-6);
  font-size: var(--t-small);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-7);
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--ink);
  margin-bottom: var(--s-3);
}
.footer__note { color: var(--ink-3); max-width: 34ch; }
.footer h2 {
  font-size: var(--t-micro);
  letter-spacing: 0.03em;
  color: var(--ink-3);
  font-weight: 650;
  margin-bottom: var(--s-3);
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: var(--s-2); }
.footer a { color: var(--ink-2); text-decoration: none; }
.footer a:hover { color: var(--ink); text-decoration: underline; }

/* The links row is gone (they live in the columns above), so the company line is
   alone in the bar and is centred. */
.footer__bottom {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--ink-3);
}
.footer__bottom p { margin: 0; }

/* ---------------------------------------------------------------- prose pages */

main.doc { padding: 0 0 var(--s-9); }
main.doc .wrap > * + * { margin-top: var(--s-5); }
main.doc .hero { padding: var(--s-8) 0 var(--s-6); }
main.doc .hero h1 { font-size: var(--t-h2); max-width: 22ch; }
main.doc .hero__sub { font-size: var(--t-body); margin-bottom: 0; }
main.doc .band { padding: var(--s-7) 0 0; }
main.doc .section-title { font-size: var(--t-h3); max-width: none; }
main.doc ul:not(.price__list) { padding-left: 1.15em; color: var(--ink-2); }
main.doc ul:not(.price__list) li { margin-bottom: var(--s-2); }
main.doc .btn { margin-top: var(--s-4); }

main.showroom { padding-bottom: 0; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 980px) {
  .hero__inner, .api { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .hero h1 { max-width: none; }
  .statements li { grid-template-columns: 1fr; gap: var(--s-3); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .specs th { width: 40%; }
}

/* Below ~1100px the six labels no longer fit beside the brand on one line.
   Collapse into the burger before anything can wrap. */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav__cta { display: none; }
}

@media (max-width: 720px) {
  .nav__word { display: none; }
  .nav__mark { width: 132px; }

  .hero { padding: var(--s-7) 0 var(--s-6); }
  .hero__facts { flex-direction: column; gap: var(--s-3); }
  .hero__facts li {
    border-right: 0;
    margin-right: 0;
    padding-right: 0;
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--rule);
  }
  .hero__facts li:last-child { border-bottom: 0; padding-bottom: 0; }

  .band { padding: var(--s-7) 0; }
  .uses { grid-template-columns: 1fr; }
  .app__pair { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .specs th { width: auto; display: block; padding-bottom: 2px; border-bottom: 0; }
  .specs td { display: block; padding-top: 0; }
}

/* ── Scribe page ────────────────────────────────────────────────────────────
   The demo video already has the phone bezel baked into the picture (on white),
   so it is shown bare, at its native 720x1260, uncropped. No CSS phone frame on
   top of it — that was a double frame and it cropped the recording. */

.demo-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: var(--s-8);
  align-items: center;
}
.demo-split__copy { max-width: 52ch; }

.demo-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 1260;
  object-fit: contain;
  background: transparent;
}

.tick { margin: 0; padding-left: 1.1em; }
.tick li { margin-bottom: var(--s-2); }

@media (max-width: 820px) {
  .demo-split { grid-template-columns: 1fr; gap: var(--s-6); }
  .demo-split__stage { max-width: 300px; margin: 0 auto; }
}

/* ---------------------------------------------------------------- screen demo (B7)
   A stylised product page and the app's screen overlay, animated. The overlay
   matches scripts/screen_translate.py: NO full-screen dim, an orange frame with
   a glow around the region (rgb 255,128,0, 3px, r5), near-white opaque cards
   over the original text (r3), and a dark hint pill below. */

.screen {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--s-8);
  align-items: center;
}
.screen__copy { max-width: 52ch; }

.mock {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  font-size: 0.8125rem;
}
.mock__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: var(--paper-3);
  border-bottom: 1px solid var(--rule);
}
.mock__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rule-strong); }
.mock__url {
  margin-left: 10px; flex: 1;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  padding: 3px 12px;
  font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* extra bottom band so the hint pill never sits on the last content line */
.mock__body { display: grid; grid-template-columns: 36% 1fr; gap: var(--s-5); padding: var(--s-5) var(--s-5) 56px; }

/* a drawn product stand-in: no real listing, no real photo */
.mock__photo {
  aspect-ratio: 1; border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 30% 20%, var(--paper-3), var(--paper-2) 70%),
    var(--paper-2);
  border: 1px solid var(--rule);
  display: grid; place-items: center;
}
.mock__photo span {
  position: relative;
  width: 54%; height: 40%;
  border: 8px solid var(--rule-strong);
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  opacity: .85;
}
.mock__photo span::before,
.mock__photo span::after {
  content: "";
  position: absolute;
  bottom: -16px;
  width: 26%; height: 44%;
  background: var(--rule-strong);
  border-radius: 7px;
}
.mock__photo span::before { left: -14%; }
.mock__photo span::after  { right: -14%; }

.mock__info { position: relative; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.mock__specs { display: flex; flex-direction: column; gap: 6px; margin: 2px 0; }

/* one translated line: the Chinese sits under an opaque English card */
.ln {
  position: relative;
  margin: 0;
  min-height: 1.5em;
  color: var(--ink-2);
  line-height: 1.5;
}
.ln .zh { display: block; }
.ln .en {
  position: absolute; inset: -2px -5px;
  display: flex; align-items: flex-start;
  padding: 3px 5px;
  background: rgba(252, 252, 252, .97);
  border-radius: 3px;
  color: var(--ink);
  opacity: 0;
}
[data-theme="dark"] .ln .en { background: rgba(30, 28, 25, .97); }
.ln--title { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.ln--title .en { font-size: 0.75rem; font-weight: 600; line-height: 1.35; }
.ln--price { font-size: 1.25rem; font-weight: 700; color: #D93A2B; }
.ln--price .en { color: #D93A2B; font-weight: 700; }
.mock__specs .ln { font-size: 0.8125rem; min-height: 1.4em; }
.ln--meta { font-size: 0.75rem; color: var(--ink-3); }

.mock__cta { display: flex; gap: 8px; margin: 4px 0; }
.mock__buy, .mock__cart {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 30px; padding: 0 14px;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem; font-weight: 600;
}
.mock__buy { background: #E8482C; color: #fff; }
.mock__cart { background: #FFC44D; color: #4A2E00; }
.mock__buy .en, .mock__cart .en {
  inset: 0; border-radius: var(--radius-pill);
  justify-content: center; align-items: center;
}
.mock__buy .en { background: #E8482C; color: #fff; }
.mock__cart .en { background: #FFC44D; color: #4A2E00; }

/* the app's overlay chrome — sized to the info column, never to magic offsets */
.mock__frame {
  position: absolute;
  inset: -12px;
  border: 3px solid #FF8000;
  border-radius: 5px;
  box-shadow: 0 0 14px rgba(255, 128, 0, .9), 0 0 26px rgba(255, 128, 0, .45);
  opacity: 0;
  pointer-events: none;
}
.mock__hint {
  position: absolute;
  left: -12px; bottom: -46px;
  background: rgba(0, 0, 0, .6);
  color: rgba(255, 255, 255, .92);
  font-size: 0.75rem;
  padding: 5px 11px; border-radius: 5px;
  opacity: 0; pointer-events: none;
  white-space: nowrap;
}
.mock__busy {
  position: absolute;
  left: -12px; top: -2px;
  background: rgba(0, 0, 0, .6); color: #fff;
  font-size: 0.75rem; padding: 5px 11px; border-radius: 5px;
  opacity: 0; pointer-events: none;
}
.mock__keys {
  position: absolute;
  top: 18px; right: 18px;
  display: flex; gap: 5px;
  opacity: 0; pointer-events: none;
}
.mock__keys .key {
  min-width: 26px; height: 26px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-bottom-width: 3px;
  border-radius: 6px;
  font-family: var(--mono); font-size: 0.8125rem; font-weight: 600;
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(20, 19, 18, .14);
}
.mock__keys .key--gap { margin-left: 10px; }

/* 2.5: the ⌘C-twice demo on a WeChat desktop chat. Same 11 s timeline and
   overlay chrome as the page demo above; the picked bubble is the frame's box. */
.wx .mock__url { text-align: left; }
.wx__body { display: grid; grid-template-columns: 34% 1fr; min-height: 360px; }
.wx__list { list-style: none; margin: 0; padding: 0; background: #EDEDED; border-right: 1px solid #DCDCDC; }
.wx__chatitem { display: flex; gap: 9px; align-items: center; padding: 10px 12px; font-size: 0.75rem; color: #191919; }
.wx__chatitem--on { background: #C9C9C9; }
.wx__chatitem b { display: block; font-weight: 600; }
.wx__chatitem small { display: block; color: #8C8C8C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14ch; }
.wx__av { flex: none; width: 32px; height: 32px; border-radius: 5px; display: grid; place-items: center;
  background: #5B8DEF; color: #fff; font-size: 0.875rem; font-weight: 600; }
.wx__av--b { background: #E5A33B; }
.wx__av--c { background: #3BB46E; }
.wx__chat { display: flex; flex-direction: column; background: #F5F5F5; min-width: 0; }
.wx__head { padding: 10px 16px; border-bottom: 1px solid #E2E2E2; font-size: 0.8125rem; font-weight: 600; color: #191919; }
.wx__msgs { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 24px; }
.wx__msg { margin: 0; max-width: 80%; padding: 8px 11px; border-radius: 5px; background: #fff;
  font-size: 0.8125rem; line-height: 1.5; color: #191919; }
.wx__msg--me { align-self: flex-end; background: #95EC69; }
.wx__pick { position: relative; align-self: flex-start; max-width: 80%; margin-bottom: 34px; }
.wx__pick .wx__msg { max-width: none; }
/* zh and en share one grid cell: the bubble is as tall as the longer of the two */
.wx__pick .ln { display: grid; }
.wx__pick .ln .zh, .wx__pick .ln .en { grid-area: 1 / 1; }
.wx__pick .ln .en { position: static; padding: 0; background: #fff; color: #191919; }
.wx__pick .zh { animation: wx-sel 11s infinite; border-radius: 2px; }
.wx__pick .mock__frame { inset: -6px; }
.wx__pick .mock__hint { left: -6px; bottom: auto; top: calc(100% + 12px); }
.wx__pick .mock__busy { left: -6px; top: -32px; }
.wx__input { height: 64px; border-top: 1px solid #E2E2E2; background: #F5F5F5; }
@keyframes wx-sel {
  0%, 2%   { background: transparent; }
  4%, 30%  { background: rgba(0, 122, 255, .28); }
  33%, 100%{ background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .wx__pick .zh { animation: none; } }
@media (max-width: 640px) { .wx__body { grid-template-columns: 1fr; } .wx__list { display: none; } .wx__pick { margin-bottom: 58px; } }

/* 2.7: agent (left) + WhatsApp (right). [data-s] items appear once the
   container's data-step reaches them; the page script steps it every 1.5 s. */
.agents { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-5); margin-top: var(--s-6); }
.agents__term { background: #1B1A18; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); }
.agents__term .mock__bar { background: #262421; border-bottom: 1px solid #34312D; }
.agents__term .mock__url { background: #1B1A18; color: #A9A39A; border-color: #34312D; }
.agents__lines { padding: 16px 18px 20px; min-height: 300px; font-family: var(--mono); font-size: 0.78rem; line-height: 1.55; color: #E8E4DD; }
.agents__lines p { margin: 0 0 8px; }
.agents__lines b { color: #FF9900; }
.agents__lines .t { color: #7FC8FF; }
.agents__lines .o { color: #A9A39A; padding-left: 14px; }
.agents__lines .ok { color: #8BD17C; }
.agents [data-s] { opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; }
.agents[data-step="1"] [data-s="1"],
.agents[data-step="2"] [data-s="1"], .agents[data-step="2"] [data-s="2"],
.agents[data-step="3"] [data-s]:is([data-s="1"],[data-s="2"],[data-s="3"]),
.agents[data-step="4"] [data-s]:is([data-s="1"],[data-s="2"],[data-s="3"],[data-s="4"]),
.agents[data-step="5"] [data-s]:not([data-s="6"]),
.agents[data-step="6"] [data-s], .agents[data-step="7"] [data-s], .agents[data-step="8"] [data-s], .agents[data-step="9"] [data-s] { opacity: 1; transform: none; }
@media (max-width: 900px) { .agents { grid-template-columns: minmax(0, 1fr); } .agents__lines { min-height: 0; } }

/* 2.8: DeepL-style "Use in AI apps" tiles */
.ai-apps { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); }
.ai-apps li { display: flex; flex-direction: column; gap: 6px; padding: var(--s-5); background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.ai-apps b { font-size: 1.125rem; letter-spacing: -0.01em; color: var(--ink); }
.ai-apps span { color: var(--ink-2); font-size: var(--t-small); line-height: 1.5; }
.ai-apps code { overflow-wrap: anywhere; }

/* 7.3: use the width. A section heading on the left, its content on the right
   (Why local); intro + key figures side by side (the chip). */
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-7); align-items: start; }
.split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; margin-bottom: var(--s-6); }
.split--top { align-items: start; margin: var(--s-5) 0 0; }
.split .statements { margin-top: 0; }
.split .section-title { margin-bottom: 0; }
.split--even .section-title { margin-bottom: var(--s-4); }
.figs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.figs li { padding: var(--s-5); border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper-2); }
.figs b { display: block; font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; color: var(--orange-ink); line-height: 1; }
.figs span { display: block; margin-top: 6px; color: var(--ink-2); font-size: var(--t-small); }
@media (max-width: 900px) {
  .split, .split--even { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
}

/* 8.5: ⌘⇧6 on a Taobao-style page built here (P100 at ¥1300). One 11 s loop:
   keys, the screen dims (the box's own outer shadow, so the inside stays lit),
   the cursor draws the box over the delivery rows, the dim lifts and the English
   lands inside the orange frame, then everything resets. */
.snap { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--rule);
  box-shadow: var(--shadow-lift); background: #fff; color: #11192d; }
.tb__page { padding: 26px 28px 22px; font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", sans-serif; }
.tb p { margin: 0; max-width: none; }
.tb__title { font-size: 1.125rem; font-weight: 700; line-height: 1.4; color: #11192d; }
.tb__sold { color: #ff5000; font-size: 0.8125rem; margin-top: 6px !important; }
.tb__price { color: #ff5000; font-size: 1.9rem; font-weight: 700; margin: 8px 0 14px !important; font-family: Georgia, serif; }
.tb__price small { font-size: 0.875rem; margin: 0 2px; }
.tb__sel { position: relative; padding: 4px 0; margin-bottom: 16px; }
.tb__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.8125rem; line-height: 2; color: #11192d; }
.tb__ic { width: 18px; text-align: center; opacity: .7; }
.tb__tag { background: #e8f8ee; color: #0aa35b; font-size: 0.6875rem; font-weight: 700; padding: 0 5px; border-radius: 3px; line-height: 1.6; }
.tb__green { color: #0aa35b; }
.tb__sep { color: #c8c9cc; }
.tb__label { color: #50607a; font-size: 0.8125rem; margin: 14px 0 8px !important; }
.tb__chip { display: inline-block; border: 1px solid #d5d8dd; border-radius: 6px; padding: 4px 12px; margin-right: 8px; font-size: 0.8125rem; }
.tb__chip--on { border-color: #ff5000; color: #ff5000; }
.tb__en { position: absolute; inset: 0 -6px; background: #fff; display: flex; flex-direction: column; justify-content: center;
  gap: 4px; padding: 0 8px; font-size: 0.75rem; line-height: 1.45; color: #11192d; opacity: 0; z-index: 2;
  animation: snap-en 11s infinite; }
.snap__dim { display: none; }
.snap__box { position: absolute; left: -8px; top: -6px; width: 0; height: 0; z-index: 3;
  border: 3px solid #FF8000; border-radius: 5px; opacity: 0; pointer-events: none;
  animation: snap-box 11s infinite; }
.snap__cursor { position: absolute; right: -10px; bottom: -14px; width: 0; height: 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 18px solid #111;
  transform: rotate(-30deg); filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
  animation: snap-cur 11s infinite; }
.tb__hint { position: absolute; left: -8px; top: calc(100% + 10px); z-index: 3; background: rgba(0, 0, 0, .6); color: #fff;
  font-size: 0.6875rem; padding: 4px 10px; border-radius: 5px; white-space: nowrap; opacity: 0; animation: snap-en 11s infinite; }
.snap .mock__keys { z-index: 4; animation: demo-keys 11s infinite; }
@keyframes snap-box {
  0%, 9%   { opacity: 0; width: 0; height: 0; box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0); }
  12%      { opacity: 1; width: 0; height: 0; box-shadow: 0 0 0 2000px rgba(0, 0, 0, .3); }
  17%      { opacity: 1; width: 0; height: 0; box-shadow: 0 0 0 2000px rgba(0, 0, 0, .3); }
  40%, 43% { opacity: 1; width: calc(100% + 16px); height: calc(100% + 12px); box-shadow: 0 0 0 2000px rgba(0, 0, 0, .3); }
  48%, 86% { opacity: 1; width: calc(100% + 16px); height: calc(100% + 12px); box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0); }
  92%, 100%{ opacity: 0; width: calc(100% + 16px); height: calc(100% + 12px); box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0); }
}
@keyframes snap-en  { 0%, 45% { opacity: 0; } 50%, 86% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes snap-cur { 0%, 14% { opacity: 0; } 16%, 60% { opacity: 1; } 64%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tb__en, .tb__hint { animation: none; opacity: 1; }
  .snap__box { animation: none; opacity: 1; width: calc(100% + 16px); height: calc(100% + 12px); box-shadow: none; }
  .snap__cursor { display: none; }
}
@media (max-width: 640px) { .tb__page { padding: 18px 16px; } .tb__hint { white-space: normal; right: -8px; } }

/* one shared 11 s timeline: every element starts together, so they stay in step */
@keyframes demo-keys {
  0%, 6%   { opacity: 0; transform: translateY(-4px) scale(.96); }
  7%       { opacity: 1; transform: translateY(0) scale(1); }
  10%      { opacity: 1; transform: translateY(0) scale(.92); }
  13%      { opacity: 1; transform: translateY(0) scale(1); }
  16%      { opacity: 1; transform: translateY(0) scale(.92); }
  19%      { opacity: 1; transform: translateY(0) scale(1); }
  21%, 100%{ opacity: 0; transform: translateY(-4px) scale(.96); }
}
@keyframes demo-busy {
  0%, 21%  { opacity: 0; }
  23%, 28% { opacity: 1; }
  31%, 100%{ opacity: 0; }
}
@keyframes demo-up {
  0%, 30%  { opacity: 0; transform: scale(.985); }
  35%, 78% { opacity: 1; transform: scale(1); }
  86%, 100%{ opacity: 0; transform: scale(1); }
}
@keyframes demo-card {
  0%, 32%  { opacity: 0; }
  37%, 78% { opacity: 1; }
  84%, 100%{ opacity: 0; }
}

.mock__keys      { animation: demo-keys 11s infinite; }
.mock__busy      { animation: demo-busy 11s infinite; }
.mock__frame     { animation: demo-up   11s infinite; }
.mock__hint      { animation: demo-card 11s infinite; }
.ln .en          { animation: demo-card 11s infinite; }

@media (prefers-reduced-motion: reduce) {
  .mock__keys, .mock__busy, .mock__frame, .mock__hint, .ln .en { animation: none; }
  .mock__keys, .mock__busy { opacity: 0; }
  .mock__frame, .mock__hint, .ln .en { opacity: 1; }
}

@media (max-width: 980px) {
  .screen { grid-template-columns: 1fr; gap: var(--s-6); }
}
@media (max-width: 560px) {
  .mock__body { grid-template-columns: 1fr; }
  .mock__photo { display: none; }
  .mock__hint { right: -12px; white-space: normal; }
}

/* ── 2.3-v3 bench table ──────────────────────────────────────────────────────
   One table, in the page's own colours: no card, no dark ground. Thin grey row
   rules, grey small-caps headers, and the speed-up figure is the only orange.
   The dark theme just follows the tokens like every other band. */
.bench-scroll { overflow-x: auto; margin: var(--s-6) 0 0; }
.bench-t {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--t-small);
}
.bench-t th, .bench-t td {
  padding: 12px 20px 12px 0;
  vertical-align: baseline;
  border-bottom: 1px solid var(--rule);
}
.bench-t thead th {
  padding-top: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-strong);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.bench-t tbody th {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.bench-t tbody tr:last-child th,
.bench-t tbody tr:last-child td { border-bottom: 0; }

/* the speed-up, in brand orange — the only accent in the table */
.bench-x { font-weight: 700; color: var(--orange-ink); white-space: nowrap; }
.bench-n {
  display: block;
  font-size: var(--t-micro);
  color: var(--ink-3);
  font-weight: 400;
  line-height: 1.45;
}

.bench-foot {
  margin: var(--s-4) 0 0;
  font-size: var(--t-micro);
  line-height: 1.55;
  color: var(--ink-3);
}

.cmp__line {
  margin: var(--s-6) 0 0;
  max-width: 34ch;
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

/* 7.6: trademark notice, every page */
/* 8.6: two stacked, centred lines, same small grey size: company, then the notice. */
.footer__bottom { flex-direction: column; gap: var(--s-2); }
.footer__bottom p { font-size: var(--t-micro); color: var(--ink-3); line-height: 1.5; max-width: 900px; margin-inline: auto; }
.footer__tm { margin: 0; }

/* 9.6 (Damian 09/10 18:10): text uses the whole content width on every page;
   no reading-measure column that leaves the right side empty. The footer's
   notice keeps its 900 px line (8.6). */
:root { --measure: none; }
.lede, .hero__sub, .section-title, .demo-split__copy, .screen__copy,
main.doc .hero h1, main.doc .hero__sub { max-width: none; }
.price { max-width: none; }
.price__list { columns: 2; column-gap: var(--s-7); }
.price__list li { break-inside: avoid; }
@media (max-width: 720px) { .price__list { columns: 1; } }
/* 9.6: doc pages (pricing, windows, terms...) have no product column: one column. */
main.doc .hero__inner { grid-template-columns: minmax(0, 1fr); }

/* 9.1: the WhatsApp pane looks like WhatsApp Desktop (Damian 09/10 18:10): beige
   doodle wallpaper (our own tile), header with round avatar + name + the
   video / call / ••• pill, date chip, white incoming and light-green outgoing
   bubbles with tails, quoted reply, time + blue double ticks, bottom bar with
   +, rounded input with emoji, green mic. Colours sampled from a real window. */
.wa { background: #f2eee7 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22160%22%20height%3D%22160%22%20fill%3D%22none%22%20stroke%3D%22%23e4dccf%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%2022l4%208%209%201-7%206%202%209-8-5-8%205%202-9-7-6%209-1z%22/%3E%3Ccircle%20cx%3D%22118%22%20cy%3D%2230%22%20r%3D%2211%22/%3E%3Cpath%20d%3D%22M112%2030h12M118%2024v12%22/%3E%3Crect%20x%3D%2270%22%20y%3D%2262%22%20width%3D%2222%22%20height%3D%2230%22%20rx%3D%224%22/%3E%3Cpath%20d%3D%22M76%2086h10%22/%3E%3Cpath%20d%3D%22M20%20112c6-8%2018-8%2024%200s18%208%2024%200%22/%3E%3Cpath%20d%3D%22M128%2096c-6-8-18-2-12%208l12%2012%2012-12c6-10-6-16-12-8z%22/%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2270%22%20r%3D%223%22/%3E%3Cpath%20d%3D%22M98%20140l10-14%2010%2014z%22/%3E%3Cpath%20d%3D%22M14%20150h18M23%20141v18%22/%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%22150%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M60%20130q8-10%2016%200t16%200%22/%3E%3C/svg%3E") repeat; background-size: 160px; border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-lift); display: flex; flex-direction: column; color: #0b141a;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", sans-serif; }
.wa svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wa__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 0.9375rem; }
.wa__head b { font-weight: 600; }
.wa__avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: #6b8cae; color: #fff; font-size: 0.9375rem; font-weight: 600; }
.wa__pill { margin-left: auto; display: flex; gap: 18px; padding: 8px 16px; border-radius: 999px; background: #fff;
  box-shadow: 0 1px 2px rgba(11, 20, 26, .12); color: #3b4a54; }
.wa__pill svg:last-child { fill: currentColor; stroke: none; }
.wa__msgs { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 6px 20px 16px; }
.wa__chip { align-self: center; background: #fff; color: #3b4a54; font-size: 0.75rem; font-weight: 600;
  padding: 4px 12px; border-radius: 8px; box-shadow: 0 1px 1px rgba(11, 20, 26, .1); margin: 2px 0 4px; }
.wa__b { position: relative; margin: 0; max-width: 82%; padding: 7px 10px 8px; border-radius: 8px; font-size: 0.8125rem;
  line-height: 1.45; box-shadow: 0 1px 1px rgba(11, 20, 26, .12); }
.wa__b--in { align-self: flex-start; background: #fff; border-top-left-radius: 0; }
.wa__b--out { align-self: flex-end; background: #dcf8d4; border-top-right-radius: 0; }
.wa__b--in::before, .wa__b--out::before { content: ""; position: absolute; top: 0; width: 8px; height: 12px; }
.wa__b--in::before { left: -8px; background: #fff; clip-path: polygon(100% 0, 0 0, 100% 100%); }
.wa__b--out::before { right: -8px; background: #dcf8d4; clip-path: polygon(0 0, 100% 0, 0 100%); }
.wa__q { display: block; margin: -2px -4px 6px; padding: 6px 8px; border-radius: 6px; background: #cfeec5;
  border-left: 4px solid #2961c4; color: #54656f; font-size: 0.75rem; }
.wa__q b { display: block; color: #2961c4; font-weight: 600; }
.wa__t { float: right; margin: 6px 0 -4px 10px; font-size: 0.6875rem; color: #667781; display: inline-flex; align-items: center; gap: 3px; }
.wa .wa__ticks { width: 16px; height: 11px; stroke: #53a6e8; stroke-width: 1.6; }
.wa__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px 12px; }
.wa__btn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: #fff; color: #3b4a54; box-shadow: 0 1px 2px rgba(11, 20, 26, .12); }
.wa__btn--mic { background: #25b361; color: #fff; }
.wa__input { flex: 1; height: 38px; border-radius: 19px; background: #fff; display: flex; align-items: center;
  justify-content: flex-end; padding: 0 10px; color: #54656f; box-shadow: 0 1px 2px rgba(11, 20, 26, .12); }
.agents .wa { width: 100%; justify-self: stretch; }
/* 9.8: official app marks on the AI-apps cards (Simple Icons, CC0 files of the brands' own marks). */
.ai-apps b { display: flex; align-items: center; gap: 10px; }
.ai-logo { width: 26px; height: 26px; flex: none; }
/* 9.8: a line icon on every feature section, like DeepL's feature tabs. */
.waypoint__label { display: inline-flex; align-items: center; gap: 6px; }
.wp-ic { width: 15px; height: 15px; fill: none; stroke: var(--orange-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* 9.11: the code panel sits centred against the text; code chips never break inside. */
.api { align-items: center; }
code { white-space: nowrap; }
pre code, .code pre { white-space: pre; }
/* 9.13: stats right under the paragraph, flush left; Try it now under them, centred on them. */
.hero .hero__row { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
.hero .hero__row .hero__actions { align-self: center; }
.hero .hero__facts { padding-left: 0; margin-left: 0; }
.hero .hero__facts li:first-child { padding-left: 0; }
/* 9.14: real app marks wherever an app is named (Simple Icons CC0 marks; Papago's own icon). */
.brands { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-4) 0 0; }
.brands span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 1px solid var(--rule);
  border-radius: 999px; background: var(--paper); font-size: var(--t-small); font-weight: 600; color: var(--ink); }
.brand-logo { width: 20px; height: 20px; flex: none; border-radius: 4px; }
.brand-logo--sm { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.mock__url .brand-logo--sm { display: inline-block; }
/* the Scribe page hero is a text + video split: keep its two columns */
main.doc .hero__inner.demo-split { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
@media (max-width: 820px) { main.doc .hero__inner.demo-split { grid-template-columns: minmax(0, 1fr); } }
/* 9.15: contact form (same backend as bim-computing.com), full width, two columns on desktop. */
.cf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); margin-top: var(--s-5); }
.cf label { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-small); font-weight: 600; color: var(--ink-2); }
.cf input, .cf textarea { font: inherit; font-weight: 400; color: var(--ink); background: var(--paper); padding: 10px 14px;
  border: 1px solid var(--rule); border-radius: 10px; }
.cf__wide { grid-column: 1 / -1; margin: 0; }
.cf__honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cf-sent { margin-top: var(--s-4); padding: 12px 16px; border-radius: 10px; background: #e8f8ee; color: #0a7a44; font-weight: 600; }
@media (max-width: 720px) { .cf { grid-template-columns: minmax(0, 1fr); } }
/* 9.19 (width check): no half-empty rows. */
.uses > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.statements--cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.statements--cards li { display: block; padding: var(--s-5); border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper-2); }
.statements--cards li h3 { margin-bottom: var(--s-2); }
.stack { margin-top: var(--s-5); }
.stack > p { margin: 0 0 var(--s-3); }
@media (max-width: 900px) { .statements--cards { grid-template-columns: minmax(0, 1fr); } }
.cmp__line { max-width: none; }
.uses--row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s-4); margin-top: var(--s-6); }
.uses--row > li:last-child:nth-child(odd) { grid-column: auto; }

/* 9.29: a fifth footer column, Also from BIM Groupe */
.footer__grid { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

/* 9.30 scribe.html commands + demo */
.cmd-lead { color: var(--ink-2); margin: 0 0 var(--s-4); }
.cmd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cmd-list li { display: grid; grid-template-columns: minmax(0, 15rem) 1fr; gap: var(--s-4); align-items: baseline;
  padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.cmd-list code { font-family: var(--mono); font-size: .9rem; color: var(--orange-ink); }
.cmd-list span { color: var(--ink-2); }
.cmd-demo { display: flex; flex-direction: column; }
.cmd-demo .wa__b code { font-family: var(--mono); font-weight: 600; }
.cmd-demo [class*="cmd-s"] { opacity: 0; animation: cmd-in .4s ease forwards; }
.cmd-s1 { animation-delay: .2s !important; } .cmd-s2 { animation-delay: 1.2s !important; } .cmd-s3 { animation-delay: 2.2s !important; }
.cmd-s4 { animation-delay: 3.4s !important; } .cmd-s5 { animation-delay: 4.4s !important; }
@keyframes cmd-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cmd-demo [class*="cmd-s"] { animation: none; opacity: 1; } }
@media (max-width: 640px) { .cmd-list li { grid-template-columns: 1fr; gap: 2px; } }

/* 9.31 scribe.html language map + engine switch */
.lang-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); }
.lang-eng { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 3px; }
.lang-eng button { border: 0; background: none; font: inherit; font-size: var(--t-small); font-weight: 600; color: var(--ink-2);
  padding: 7px 16px; border-radius: 999px; cursor: pointer; }
.lang-eng button[aria-selected="true"] { background: var(--orange); color: #fff; }
.lang-map { position: relative; margin: var(--s-5) 0; border: 1px solid var(--rule); border-radius: var(--radius-lg);
  background: var(--paper-2); padding: 6px; }
.lang-map svg { display: block; width: 100%; height: auto; }
.lang-map path { fill: #e3e1dc; stroke: var(--paper); stroke-width: .35; vector-effect: non-scaling-stroke; transition: fill .2s; }
.lang-map path.on { fill: #f0a24a; }
.lang-map path:hover { fill: #cfccc5; }
.lang-map path.on:hover { fill: #c9731d; }
.lang-tip { position: absolute; z-index: 2; pointer-events: none; opacity: 0; transform: translate(-50%, -150%); white-space: nowrap;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 5px 10px; font-size: var(--t-small); color: var(--ink); transition: opacity .12s; }
.lang-tip.show { opacity: 1; }
.lang-tip b { color: #c9731d; }
.lang-legend { position: absolute; left: 16px; bottom: 12px; display: flex; gap: 14px; font-size: var(--t-micro); color: var(--ink-2); }
.lang-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: #e3e1dc; margin-right: 6px; vertical-align: -1px; }
.lang-legend i.on { background: #f0a24a; }
.lang-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lang-chips li { padding: 6px 14px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--rule); font-size: var(--t-small); }
[data-theme="dark"] .lang-map path, [data-theme="dark"] .lang-legend i { fill: #3a3733; background: #3a3733; }
[data-theme="dark"] .lang-map path.on, [data-theme="dark"] .lang-legend i.on { fill: #d9862a; background: #d9862a; }

/* 9.35 buy.html */
.pay { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.pay__label { font-weight: 600; }
.pay__email { font: inherit; padding: 12px 14px; border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--paper); color: var(--ink); width: 100%; }
.pay__methods { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.pay__msg { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--orange-soft); color: var(--orange-ink); font-weight: 600; }
.pay__crypto { display: grid; gap: var(--s-3); }
.pay__coins { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pay__inv p { margin: 0 0 var(--s-2); word-break: break-all; }
.pay__inv code { font-family: var(--mono); font-size: .9rem; }
.pay__wait { color: var(--ink-2); }

/* 9.42 footer: partner + socials */
.footer__sub { margin-top: var(--s-5); }
.footer__social { display: flex; gap: 14px; margin-top: var(--s-4); }
.footer__social a { color: var(--ink-2); display: inline-flex; }
.footer__social a:hover { color: var(--orange); }
.footer__social svg { width: 20px; height: 20px; }

/* 9.39 phone demo (WhatsApp on iPhone): voice note -> transcript -> /tldr -> /to-fr */
.ph { width: min(360px, 100%); margin: 0 auto; aspect-ratio: 9 / 19; border-radius: 52px; padding: 11px; background: #1b1b1d;
  box-shadow: 0 0 0 2px #3a3a3d, var(--shadow-lift); }
.ph__screen { position: relative; height: 100%; border-radius: 42px; overflow: hidden; display: flex; flex-direction: column;
  background: #f2eee7 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22160%22%20height%3D%22160%22%20fill%3D%22none%22%20stroke%3D%22%23e4dccf%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%2022l4%208%209%201-7%206%202%209-8-5-8%205%202-9-7-6%209-1z%22/%3E%3Ccircle%20cx%3D%22118%22%20cy%3D%2230%22%20r%3D%2211%22/%3E%3Cpath%20d%3D%22M112%2030h12M118%2024v12%22/%3E%3Crect%20x%3D%2270%22%20y%3D%2262%22%20width%3D%2222%22%20height%3D%2230%22%20rx%3D%224%22/%3E%3Cpath%20d%3D%22M76%2086h10%22/%3E%3Cpath%20d%3D%22M20%20112c6-8%2018-8%2024%200s18%208%2024%200%22/%3E%3Cpath%20d%3D%22M128%2096c-6-8-18-2-12%208l12%2012%2012-12c6-10-6-16-12-8z%22/%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2270%22%20r%3D%223%22/%3E%3Cpath%20d%3D%22M98%20140l10-14%2010%2014z%22/%3E%3Cpath%20d%3D%22M14%20150h18M23%20141v18%22/%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%22150%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M60%20130q8-10%2016%200t16%200%22/%3E%3C/svg%3E") repeat; background-size: 160px; font-family: -apple-system, "SF Pro Text", var(--font); color: #111b21; }
.ph__status { display: flex; align-items: center; justify-content: space-between; padding: 12px 26px 4px; font-size: 13px; background: #f7f5f2; }
.ph__island { width: 96px; height: 26px; border-radius: 14px; background: #000; }
.ph__sig { font-size: 11px; font-weight: 600; }
.ph__head { display: flex; align-items: center; gap: 8px; padding: 6px 12px 8px; background: #f7f5f2; font-size: 14px; }
.ph__head b { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph__back { background: #fff; border-radius: 999px; padding: 4px 10px; font-size: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ph__pill { display: flex; gap: 14px; background: #fff; border-radius: 999px; padding: 6px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ph__pill svg, .ph__mic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ph__av { width: 30px; height: 30px; border-radius: 50%; background: #8a6d52; color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
.ph__chat { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 6px 10px; }
.ph__msgs { display: flex; flex-direction: column; gap: 6px; }
.ph__chip { align-self: center; background: #fff; font-size: 11px; font-weight: 600; color: #3b4a54; padding: 3px 10px; border-radius: 7px; }
.ph__b { position: relative; max-width: 86%; padding: 6px 8px 5px; border-radius: 9px; font-size: 12.5px; line-height: 1.38;
  box-shadow: 0 1px 1px rgba(11,20,26,.12); }
.ph__b--in { align-self: flex-start; background: #fff; border-top-left-radius: 0; }
.ph__b--out { align-self: flex-end; background: #dcf8d4; border-top-right-radius: 0; }
.ph__b code { font-family: inherit; font-weight: 600; }
.ph__q { display: block; margin: 0 -2px 4px; padding: 4px 7px; border-radius: 6px; background: #cfeec5; border-left: 4px solid #c26a1a; font-size: 11px; color: #54656f; }
.ph__q b { display: block; color: #c26a1a; font-weight: 600; }
.ph__t { float: right; margin: 6px 0 -3px 8px; font-size: 10px; color: #667781; display: inline-flex; gap: 3px; align-items: center; }
.ph__ticks { width: 15px; height: 10px; fill: none; stroke: #53bdeb; stroke-width: 1.6; }
.ph__vn { display: grid; grid-template-columns: 34px 18px 1fr; align-items: center; gap: 6px; width: 86%; }
.ph__vn .ph__av { width: 34px; height: 34px; }
.ph__play { width: 0; height: 0; border-left: 12px solid #54656f; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.ph__wave { display: flex; align-items: center; gap: 2px; height: 26px; }
.ph__wave i { display: block; width: 2.5px; border-radius: 2px; background: #b5bcc0; }
.ph__dur { grid-column: 3; font-size: 10px; color: #667781; margin-top: -4px; }
.ph__vn .ph__t { grid-column: 3; justify-self: end; margin-top: -14px; }
.ph__clamp { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.ph__more { display: inline-block; margin-top: 2px; color: #027eb5; font-weight: 600; font-size: 12px; }
.ph__bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px 18px; background: #f7f5f2; }
.ph__plus { font-size: 22px; line-height: 1; color: #111b21; }
.ph__input { flex: 1; height: 30px; border-radius: 999px; background: #fff; }
.ph__mic { width: 34px; height: 34px; border-radius: 50%; background: #111b21; color: #fff; display: grid; place-items: center; }
.ph [class*="ph-s"] { max-height: 0; opacity: 0; margin-top: -6px; overflow: hidden; animation: ph-in 22s infinite; }
.ph-s1 { animation-delay: 0s !important; } .ph-s2 { animation-delay: 1.8s !important; } .ph-s3 { animation-delay: 5.5s !important; }
.ph-s4 { animation-delay: 7s !important; } .ph-s5 { animation-delay: 11.5s !important; } .ph-s6 { animation-delay: 13s !important; }
@keyframes ph-in { 0% { max-height: 0; opacity: 0; margin-top: -6px; } 3% { max-height: 420px; opacity: 1; margin-top: 0; }
  92% { max-height: 420px; opacity: 1; margin-top: 0; } 96%, 100% { max-height: 0; opacity: 0; margin-top: -6px; } }
@media (prefers-reduced-motion: reduce) { .ph [class*="ph-s"] { animation: none; max-height: none; opacity: 1; margin-top: 0; } }
.cmd-lead--langs { margin-top: var(--s-5); }
.cmd-langs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cmd-langs li { font-size: var(--t-small); padding: 4px 10px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--rule); }
.cmd-langs code { font-family: var(--mono); color: var(--orange-ink); margin-right: 4px; }

/* 9.46 / 9.48 buy.html tiles (item 45): wide equal tiles, logo box left, name + subtitle on one line each */
.pay__lead { color: var(--ink-2); margin: 0 0 var(--s-5); }
.pay__h { font-size: var(--t-h3); margin: var(--s-6) 0 var(--s-3); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-auto-rows: 1fr; gap: var(--s-3); }
.tile { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 16px; text-align: left;
  border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); color: var(--ink); font: inherit; font-size: 1rem; cursor: pointer;
  transition: border-color .15s, box-shadow .15s; }
.tile img { flex: none; width: 40px; height: 40px; object-fit: contain; }
.tile__txt { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.tile__name, .tile__hint, .tile__soon { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile__name { font-weight: 600; font-size: 1rem; line-height: 1.3; }
.tile__hint, .tile__soon { font-size: var(--t-small); line-height: 1.3; color: var(--ink-3); }
.tile:hover:not([disabled]), .tile--on { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }
.tile[disabled] { cursor: default; opacity: .55; }
.tile[hidden] { display: none; }
[data-theme="dark"] .tile { background: var(--paper-2); }
[data-theme="dark"] .tile img[src$="applepay.svg"], [data-theme="dark"] .tile img[src$="visa.svg"] { background: #fff; border-radius: 6px; padding: 4px; }
.pay__inv { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center; margin-top: var(--s-5); padding: var(--s-5);
  border: 1px solid var(--rule); border-radius: 14px; background: var(--paper-2); }
.pay__inv canvas { border-radius: 10px; background: #fff; }
.pay__rows { flex: 1; min-width: 260px; display: grid; gap: var(--s-2); }
.pay__rows p { margin: 0; display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.pay__rows span { min-width: 80px; color: var(--ink-3); font-size: var(--t-small); }
.pay__rows code { font-family: var(--mono); word-break: break-all; }
.pay__inv[hidden] { display: none; }

/* 9.51 footer: partners with logos, support channels, socials per brand */
.footer__partner, .footer__chan { display: inline-flex; align-items: center; gap: 8px; }
.footer__plogo, .footer__ico { width: 18px; height: 18px; flex: none; object-fit: contain; }
[data-theme="dark"] .footer__plogo--bx { content: url("../img/partner-bim-exchange-dark.png"); }
.footer__social { display: grid; gap: 8px; margin-top: var(--s-4); }
.footer__social p { display: flex; align-items: center; gap: 12px; margin: 0; }
.footer__social span { min-width: 104px; font-size: var(--t-small); color: var(--ink-3); }

/* 9.52 footer icons: one grey, the footer text colour (item 49); channel lines never wrap */
.footer__plogo { display: inline-block; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
[data-theme="dark"] .footer__plogo--bx { content: none; }
.footer__chan, .footer__partner { white-space: nowrap; }
.footer__grid { grid-template-columns: minmax(200px, 1.6fr) repeat(4, max-content); justify-content: space-between; }
@media (max-width: 1180px) and (min-width: 981px) {
  .footer__grid { grid-template-columns: repeat(4, max-content); }
  .footer__grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 980px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

/* 9.56 billing details + pay anonymously */
.bill { border: 0; padding: 0; margin: var(--s-5) 0 0; }
.bill legend span { font-weight: 400; color: var(--ink-3); font-size: var(--t-small); }
.bill__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-2); }
.bill__f { display: grid; gap: 4px; font-size: var(--t-small); color: var(--ink-2); }
.bill__f--wide { grid-column: 1 / -1; }
.bill__f input { font: inherit; font-size: 1rem; padding: 10px 12px; border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--paper); color: var(--ink); }
.bill__f input.bad { border-color: #d33; }
.bill[hidden] { display: none; }
.anon { display: flex; gap: 8px; align-items: baseline; margin: 0 0 var(--s-3); font-weight: 600; }
.anon span { font-weight: 400; color: var(--ink-3); font-size: var(--t-small); }
@media (max-width: 560px) { .bill__grid { grid-template-columns: 1fr; } }
.pay__product { margin: 0 0 var(--s-2); font-size: var(--t-h3); }
.pay__product s { color: var(--ink-3); font-weight: 400; margin: 0 4px; }
.pay__product span { font-size: var(--t-small); color: var(--ink-2); }

/* 9.58 two editions */
.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s-5); align-items: stretch; }
.prices .price { margin: 0; }
.price--gold { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.price__legal { margin-top: var(--s-4); font-size: var(--t-small); color: var(--ink-3); }
.eds { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-3); margin: var(--s-3) 0 0; }
.ed { position: relative; display: grid; gap: 2px; padding: 16px 16px 16px 46px; border: 1px solid var(--rule); border-radius: 14px; cursor: pointer; background: var(--paper); }
.ed input { position: absolute; left: 16px; top: 19px; accent-color: var(--orange); width: 18px; height: 18px; }
.ed:has(input:checked) { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }
.ed__name { font-weight: 600; }
.ed__price s { color: var(--ink-3); margin-right: 4px; }
.ed__what { font-size: var(--t-small); color: var(--ink-3); }