/* Layout: a calibration bench. Headline above, the laptop and the foldable side by side at true relative
   scale on one baseline, then left-aligned sections on a 1180px measure. Navy from the logo, blue from the app. */
:root {
  --bg: #f3f5f8;
  --bg-alt: #e9eef3;
  --surface: #ffffff;
  --ink: #0b2238;
  --ink-2: #33475d;
  --muted: #5d6d7f;
  --line: #d5dde6;
  --accent: #1559b8;
  --accent-ink: #ffffff;
  --sage: #56695f;
  --glow: rgba(21, 89, 184, .13);
  --shadow-c: rgba(11, 34, 56, .34);
  --header-bg: rgba(243, 245, 248, .84);
  --band: #0b2238;
  --band-ink: #eaf0f8;
  --band-muted: #a7b6c6;
  --band-line: rgba(234, 240, 248, .14);
  --band-accent: #9fb2a8;
  --th-l: block;
  --th-d: none;
  /* Device finish follows the page like the app screens do (.th-l / .th-d image pairs): black devices on the
     light page, white ones on the dark page. Only the phone's edge face is painted here. */
  --dev-edge: linear-gradient(90deg, #0c0d0f, #2c2e32 22%, #4a4d52 48%, #26282b 76%, #0b0c0e);
  --window-ring: rgba(11, 34, 56, .14);
  --header-h: 65px;
  --page: var(--bg);
  /* Windows 11 Settings in dark mode (Mica): a neutral grey in the top-left corner fading into a blue-tinted navy, a
     breath of violet toward the bottom right. Sampled from a screenshot of Settings. */
  --mica: radial-gradient(120% 90% at 0% 0%, #1e2024 0%, rgba(30, 32, 36, 0) 58%),
          radial-gradient(90% 80% at 100% 100%, #1d1f2c 0%, rgba(29, 31, 44, 0) 62%), #1a2032;

  --display: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --ease: cubic-bezier(.65, 0, .35, 1);
  --fold-time: 1.05s;
  --gutter: max(clamp(16px, 4vw, 32px), env(safe-area-inset-left, 0px));
  --gutter-r: max(clamp(16px, 4vw, 32px), env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1a2032; --bg-alt: #1d2234; --surface: #262b3c; --ink: #eef1f6; --ink-2: #c9cfda; --muted: #9aa2b2;
    --line: #353b4e; --accent: #6db3ff; --accent-ink: #061322; --sage: #8fa198; --glow: rgba(109, 179, 255, .12);
    --shadow-c: rgba(0, 0, 0, .55); --header-bg: rgba(28, 32, 46, .78); --page: var(--mica); --band: #0f1d2e; --band-ink: #eaf0f8;
    --band-muted: #9aaabb; --band-line: rgba(234, 240, 248, .12); --band-accent: #8fa198; --th-l: none; --th-d: block;
    --dev-edge: linear-gradient(90deg, #a9a59b, #d9d5cb 22%, #f6f3ec 48%, #d2cec4 76%, #a39f95);
    --window-ring: rgba(234, 240, 248, .12);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1a2032; --bg-alt: #1d2234; --surface: #262b3c; --ink: #eef1f6; --ink-2: #c9cfda; --muted: #9aa2b2;
  --line: #353b4e; --accent: #6db3ff; --accent-ink: #061322; --sage: #8fa198; --glow: rgba(109, 179, 255, .12);
  --shadow-c: rgba(0, 0, 0, .55); --header-bg: rgba(28, 32, 46, .78); --page: var(--mica); --band: #0f1d2e; --band-ink: #eaf0f8;
  --band-muted: #9aaabb; --band-line: rgba(234, 240, 248, .12); --band-accent: #8fa198; --th-l: none; --th-d: block;
  --dev-edge: linear-gradient(90deg, #a9a59b, #d9d5cb 22%, #f6f3ec 48%, #d2cec4 76%, #a39f95);
  --window-ring: rgba(234, 240, 248, .12);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* The page moves in slides: main.js glides one slide per wheel gesture, and touch or keyboard scrolling settles
   on a slide when it ends near one (proximity, so a slide taller than the screen can still be read to its end). */
html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  scroll-snap-type: y proximity; scroll-padding-top: var(--header-h);
}
.slide { scroll-snap-align: start; min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; }
.site-footer { scroll-snap-align: end; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body {
  margin: 0;
  background: var(--page);
  background-attachment: fixed;
  color: var(--ink);
  font: 400 1rem/1.6 var(--body);
  /* A word longer than its box (German compounds on a phone) breaks rather than widening the page. */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 30;
  background: var(--bg);
}
img { max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); color: var(--ink); text-wrap: balance; }
.th-l { display: var(--th-l); }
.th-d { display: var(--th-d); }
.mono { font-family: var(--mono); font-size: .92em; white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap {
  width: 100%;
  max-width: calc(1180px + var(--gutter) + var(--gutter-r));
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 40;
  background: var(--accent); color: var(--accent-ink); padding: 8px 14px; border-radius: 8px; text-decoration: none;
}
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

.eyebrow {
  margin: 0;
  font: 500 .74rem/1.3 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sage);
}

/* Header */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--line);
}
/* The bar lines up with the slides' content (1440px), not the narrower reading measure of .wrap. */
.header-in, .footer-in { max-width: calc(1440px + var(--gutter) + var(--gutter-r)); }
.header-in { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: block; line-height: 0; }
.brand img { height: 30px; width: auto; }
.nav { display: flex; gap: 28px; margin-inline-start: auto; font-size: .92rem; }
.nav a { color: var(--ink-2); text-decoration: none; }
.nav a:hover { color: var(--accent); }
.theme-toggle {
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--ink); cursor: pointer;
}
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-sun { display: none; }
.theme-toggle[data-mode="dark"] .i-sun { display: block; }
.theme-toggle[data-mode="dark"] .i-moon { display: none; }

/* Language: a globe button with the current language's code, and a short menu of the seven languages in their own names. */
.lang { position: relative; margin-inline-start: -14px; }
.lang-btn {
  display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer;
  font: 600 .78rem/1 var(--mono); letter-spacing: .06em;
}
.lang-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.lang-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60; min-width: 168px; margin: 0; padding: 6px; list-style: none;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 22px 44px -22px var(--shadow-c);
}
.lang-menu[hidden] { display: none; }
.lang-menu button {
  display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; background: none; color: var(--ink-2);
  cursor: pointer; text-align: start; font: 500 .92rem/1.2 var(--body);
}
.lang-menu button[lang="fa"], .lang-menu button[lang="ar"] { font-family: "Vazirmatn", var(--body); }
.lang-menu button:hover, .lang-menu button:focus-visible { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--ink); }
.lang-menu button[aria-checked="true"] { color: var(--accent); font-weight: 700; }

/* Boxes that keep the room of their longest language (i18n.js) hold their rows at the top instead of stretching them. */
.qty, .spec { align-content: flex-start; }
.ticks { align-content: start; }
/* While i18n.js measures every language (in one go, never drawn), nothing is scaled by an animation. */
html.i18n-measuring .reveal, html.i18n-measuring .hero > * { animation: none !important; transform: none !important; }
/* While a saved language is applied the page stays hidden for a moment instead of flashing English. */
html.i18n-wait body { visibility: hidden; }

/* Type for each language: Persian and Arabic in Vazirmatn, Russian headings in IBM Plex Sans (the display face has no
   Cyrillic), Chinese in the system's own CJK face. Joined scripts lose the Latin letter-spacing. */
:root:lang(fa), :root:lang(ar) {
  --display: "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
  --body: "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
  /* The small labels set in the monospace face read as ordinary text in Persian and Arabic. */
  --mono: "Vazirmatn", "IBM Plex Mono", ui-monospace, monospace;
}
:root:is(:lang(fa), :lang(ar)) :is(.eyebrow, .ring-way, .groups dt, .card-tech, .dl-req, .spec, .scale, .flow-view figcaption, .paper figcaption) { letter-spacing: 0; }
:root:is(:lang(fa), :lang(ar)) .eyebrow { font-size: .85rem; }
:root:lang(ru) { --display: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; }
:root:lang(zh) {
  --display: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif;
  --body: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif;
}
:root:is(:lang(fa), :lang(ar), :lang(zh)) :is(h1, h2, h3, p, li, button, a, span, dt, dd, figcaption, blockquote) { letter-spacing: 0; }
:root:is(:lang(fa), :lang(ar)) :is(.eyebrow, .ring-way, .groups dt) { text-transform: none; font-family: var(--body); font-weight: 600; }
:root:is(:lang(fa), :lang(ar)) body { line-height: 1.75; }
/* Right to left: the pictures (devices, the steps' circle, the cards' drawings, app screens) keep their own direction. */
/* Section columns and illustrations keep their positions; copy and text-only lists follow the language direction. */
:root[data-rtl] :is(h1, h2, h3, p, dt, dd, figcaption, blockquote, .devs li, .ring-label, .switch-tab, .qty button, .feat-label, .dl-text > *) { direction: rtl; }
/* Align Persian/Arabic copy within its own column; illustrations and section columns keep their positions. */
:root[data-rtl] :is(h1, h2, h3, p, dt, dd, figcaption, blockquote, .devs li, .dl-text) { text-align: right; }
:root[data-rtl] :is(.lead, .flow-desc, .ai-lead, .feat-lead, .panel-copy p, .applications-heading > p, .industry-copy > .eyebrow, .trust-head h2, .cert-copy > p, .section-head > p) { margin-left: auto; margin-right: 0; }
:root[data-rtl] :is(.feats-list, .qty, .feat-stats, .devs, .groups > div, .spec, .dl-text) { direction: rtl; }
:root[data-rtl] .feat-label { flex: 1; text-align: right; }
:root[data-rtl] .get-in :is(h2, p), :root[data-rtl] .device-note p { text-align: center; }

/* Hero: the first slide. It is exactly one screen tall; the copy sits above the devices, or beside them on wide
   screens, and the device stage takes the rest of the height and sizes itself to fit it. */
.hero {
  height: calc(100svh - var(--header-h)); min-height: 520px;
  display: flex; flex-direction: column; justify-content: flex-start;
  gap: clamp(10px, 2.4vh, 28px);
  width: 100%; max-width: calc(1600px + var(--gutter) + var(--gutter-r)); margin-inline: auto;
  padding-left: var(--gutter); padding-right: var(--gutter-r);
  padding-block: clamp(14px, 3.2vh, 40px) clamp(10px, 2vh, 24px);
  overflow-x: clip;
}
.hero-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-areas: "eyebrow eyebrow" "title lead" "title spec";
  gap: 8px clamp(28px, 5vw, 64px);
  align-items: end; align-content: center;
  width: 100%; max-width: 1180px; margin-inline: auto;
}
.hero-copy .eyebrow { grid-area: eyebrow; }
.hero-copy h1 { grid-area: title; }
.hero-copy .lead { grid-area: lead; }
.hero-copy .spec { grid-area: spec; }
h1 {
  margin: 0;
  font-size: clamp(1.9rem, min(4.4vw, 6vh), 3.9rem);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -.028em;
}
h1 span { display: block; color: var(--muted); font-weight: 500; }
.lead { margin: 0; font-size: clamp(.95rem, 1.6vh, 1.06rem); color: var(--ink-2); max-width: 50ch; }
.spec {
  list-style: none; display: flex; flex-wrap: wrap; gap: 4px 20px;
  margin: 0; padding: 0;
  font: 400 .8rem/1.5 var(--mono); color: var(--muted);
}
.spec li { display: flex; align-items: center; gap: 8px; }
.spec li::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--accent); }

/* Device stage: sized to the space the slide leaves, so both devices are always fully in view. The laptop spans
   columns 1-2, the phone columns 2-3; column 2 is their overlap. Devices are about 0.55 x the stage width tall,
   and the note under the phone (posture switch and hint) takes about 90 px. */
.stage-wrap {
  flex: 1 1 auto; min-height: 0;
  container-type: size;
  display: flex; align-items: center; justify-content: center;
}
.stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 64.8fr) minmax(0, 5.2fr) minmax(0, 30fr);
  align-items: end;
  row-gap: clamp(12px, 2vh, 26px);
  width: min(100%, 1480px, calc((100cqh - 92px) / 0.55));
}
/* Wide screens: the copy becomes a column beside the devices. */
@media (min-aspect-ratio: 3/2) and (min-width: 1100px) {
  .hero { flex-direction: row; align-items: stretch; gap: clamp(24px, 3vw, 56px); }
  .hero-copy {
    display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 18px;
    flex: 0 0 clamp(300px, 25vw, 460px); margin: 0;
  }
  .hero-copy h1 { font-size: clamp(2.2rem, min(3vw, 6.4vh), 3.7rem); }
}
.stage::before {
  content: "";
  position: absolute;
  inset: -8% -6% 18%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(58% 60% at 52% 48%, var(--glow), transparent 72%);
}
.laptop { grid-column: 1 / 3; grid-row: 1; position: relative; margin: 0; min-width: 0; }
/* Each frame image has a transparent screen opening with rounded corners; the app screen sits just under it. */
.laptop-shell { position: relative; z-index: 2; display: block; width: 100%; aspect-ratio: 1020 / 765; }
.laptop-shell img, .shell img { position: absolute; inset: 0; width: 100%; height: 100%; }
.laptop-screen {
  position: absolute; z-index: 1;
  left: 9.706%; top: 2.876%; width: 81.569%; height: 65.49%;
  overflow: hidden; background: #000;
  border-radius: 1.32% / 2.2%;   /* 11 px, like the opening, so no square corner reaches past it */
}
.laptop-screen img, .glass img { width: 100%; height: 100%; object-fit: cover; }

.phone {
  grid-column: 2 / 4; grid-row: 1;
  position: relative; z-index: 2; min-width: 0;
  aspect-ratio: 680 / 692;
  transform: translateY(2.2%);
}
.contact-shadow {
  position: absolute; z-index: 0; pointer-events: none;
  left: 3%; right: 3%; bottom: -3.5%; height: 9%;
  background: radial-gradient(closest-side, var(--shadow-c), transparent);
  filter: blur(5px);
}
.laptop .contact-shadow { left: 1%; right: 1%; bottom: -2.6%; height: 7%; }

/* The foldable: two leaves split at the hinge; the right leaf carries the cover screen on its back. */
.fold {
  position: absolute; inset: 0; z-index: 1;
  display: block; padding: 0; margin: 0; border: 0;
  background: none; color: inherit; font: inherit;
  cursor: pointer;
  perspective: 2600px;
  -webkit-tap-highlight-color: transparent;
}
/* Keyboard focus shows on the posture switch under the phone instead of a ring around the whole device. */
.fold:focus-visible { outline: none; }
.stage:has(.fold:focus-visible) .scale { outline: 2px solid var(--accent); outline-offset: 3px; }
/* main.js turns the right leaf frame by frame and sets the shift, shading, shadow and clip from the angle;
   the rules below are the two resting states, so the phone is right before any script runs. */
.fold-body { position: absolute; inset: 0; transform-style: preserve-3d; }
.leaf { position: absolute; top: 0; width: 50%; height: 100%; }
.leaf-left { left: 0; }
.leaf-right { left: 50%; transform-style: preserve-3d; transform-origin: 0 50%; }
.phone .contact-shadow { left: 3%; right: 3%; }
.fold[data-state="closed"] .fold-body { transform: translateX(25%); }
.fold[data-state="closed"] .leaf-right { transform: rotateY(-180deg); }
/* The inner half is cut straight at the hinge while the folded body is rounded there: folded, it is clipped
   to the cover's outline (body 2..338 of 340, radius 56), so none of it shows around the cover. */
.fold[data-state="closed"] .leaf-left { clip-path: inset(.58% .59% .58% .59% round 16.47% / 8.09%); }
.stage[data-fold="closed"] .phone .contact-shadow { left: 27%; right: 27%; }
.face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* Each half of the Pixel 11 Pro Fold is 5.0 mm thick (22 px of the 680 px frame); main.js sets --depth to that
   share of the phone's width. The cover sits on the back of the right half, a thickness behind its inner screen,
   and the half's free edge is a face of its own: edge-on, the phone shows that metal side instead of a line. */
.face-back { transform: translateZ(calc(-1 * var(--depth, 16px))) rotateY(180deg); }
.leaf-edge {
  position: absolute; top: .9%; bottom: .9%; left: 97.65%;
  width: var(--depth, 16px);
  transform-origin: 0 50%; transform: rotateY(90deg);
  background: var(--dev-edge);
  border-radius: 45% / 2.4%;
  visibility: hidden;   /* shown by main.js only while the half turns; at rest the phone is seen face-on */
}
.leaf-clip { position: absolute; inset: 0; overflow: hidden; }
.unfolded { position: absolute; top: 0; left: 0; width: 200%; height: 100%; }
.leaf-right .unfolded { left: -100%; }
.flat { position: absolute; inset: 0; visibility: hidden; transform: translateZ(1px); }
.flat .unfolded { width: 100%; }
.fold[data-state="open"][data-motion="idle"] .flat { visibility: visible; }
.back-in { position: absolute; inset: 0; }
.shell { position: absolute; inset: 0; z-index: 1; display: block; }
.glass { position: absolute; z-index: 0; overflow: hidden; background: #000; }
/* Openings in the frame images, 1 px larger on each side: inner 620x643 at (32.5, 25) of 680x692;
   cover 305.8x660.7 at (17.1, 15.65) of 340x692. */
/* Rounded like their openings (radius + 1 px): a square corner would reach past the folded body's tight corners. */
.glass.inner { left: 4.632%; top: 3.468%; width: 91.471%; height: 93.208%; border-radius: 5.63% / 5.43%; }
.glass.cover { left: 4.735%; top: 2.117%; width: 90.529%; height: 95.766%; border-radius: 13.65% / 6.34%; }

.device-note { display: grid; justify-items: center; align-self: start; gap: 6px; text-align: center; min-width: 0; padding-top: 4px; }
.device-note p { margin: 0; }
.note-phone { grid-column: 2 / 4; grid-row: 2; }
.scale {
  display: grid; grid-template-columns: 1fr 1fr;
  width: min(100%, 290px); padding: 3px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font: 500 .74rem/1.2 var(--mono); color: var(--muted);
}
.seg { padding: 6px 10px; border-radius: 999px; transition: background-color .35s ease, color .35s ease; }
.stage[data-fold="open"] .seg-large, .stage[data-fold="closed"] .seg-phone { background: var(--accent); color: var(--accent-ink); }
.hint { font-size: .82rem; color: var(--muted); }

/* Applications: an illustrated industry gallery between the introduction and the app sections. */
.applications-in {
  display: grid; gap: clamp(14px, 2.2vh, 24px);
  width: 100%; max-width: calc(1240px + var(--gutter) + var(--gutter-r)); margin-inline: auto;
  padding: clamp(24px, 4vh, 42px) var(--gutter-r) clamp(24px, 4vh, 42px) var(--gutter);
}
.applications-heading { max-width: 860px; }
.applications-heading h2 { margin: 8px 0 10px; font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.12; letter-spacing: -.025em; }
.applications-heading > p:last-child { margin: 0; max-width: 78ch; color: var(--ink-2); font-size: clamp(.92rem, 1.3vw, 1.02rem); }
.industry-panels { display: grid; min-width: 0; }
.industry-panel { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 56px); min-width: 0; }
/* Keep every industry's space reserved; switching images never moves the controls or the following slide. */
.industry-panels > .industry-panel[hidden] { display: grid !important; visibility: hidden; }
.industry-art { height: clamp(240px, 38svh, 380px); min-width: 0; overflow: hidden; border-radius: 18px; background: #edf2f6; box-shadow: inset 0 0 0 1px rgba(11, 34, 56, .08); }
.industry-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.industry-copy { min-width: 0; padding-block: 12px; }
.industry-copy h3 { margin: 10px 0 14px; font-size: clamp(1.55rem, 2.6vw, 2.3rem); line-height: 1.16; letter-spacing: -.02em; }
.industry-copy > p:not(.eyebrow) { margin: 0; color: var(--ink-2); }
.industry-copy > .industry-instruments { margin-top: 22px !important; padding-top: 14px; border-top: 1px solid var(--line); color: var(--accent) !important; font-size: .82rem; font-weight: 600; }
.industry-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.industry-position { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--muted); font: 500 .78rem/1 var(--mono); direction: ltr !important; }
#industry-current { color: var(--ink); }
.industry-divider { color: var(--line); }
.industry-controls { display: flex; gap: 8px; }
.industry-arrow { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.industry-arrow:hover { border-color: var(--accent); color: var(--accent); }
.industry-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.industry-tabs { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; padding: 3px 3px 8px; margin: -3px -3px -8px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.industry-tabs button { display: flex; flex-direction: column; flex: 0 0 calc((100% - 90px) / 10); min-width: 104px; align-items: stretch; gap: 8px; padding: 5px 5px 8px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; font: 500 .73rem/1.3 var(--body); text-align: center; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.industry-tabs button img { display: block; width: 100%; height: 56px; border-radius: 6px; object-fit: cover; background: #edf2f6; }
.industry-tabs button span { display: grid; align-content: center; min-height: 2.6em; }
.industry-tabs button:hover { color: var(--ink); background: var(--surface); }
.industry-tabs button[aria-selected="true"] { color: var(--ink); background: var(--surface); border-color: var(--accent); }
:root[data-rtl] :is(.industry-tabs button span, .industry-copy p) { direction: rtl; }
@media (max-width: 899px) {
  .applications-in { gap: 14px; padding-block: 26px; }
  .applications-heading h2 { font-size: clamp(1.65rem, 5vw, 2.3rem); }
  .industry-panel { grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
  .industry-art { height: clamp(190px, 27svh, 280px); }
  .industry-copy { padding-block: 0; }
  .industry-copy .eyebrow { font-size: .66rem; }
  .industry-copy h3 { margin: 6px 0 8px; font-size: 1.45rem; }
  .industry-copy > p:not(.eyebrow) { font-size: .9rem; }
  .industry-copy > .industry-instruments { margin-top: 12px !important; padding-top: 10px; font-size: .76rem !important; }
  .industry-tabs button { flex-basis: 108px; }
}

/* A switcher over the sections of the app. Each section has its description on the left and cropped
   shots of its real pages on the right. */
.unify-in {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(22px, 4.5vh, 48px);
  width: 100%; max-width: calc(1360px + var(--gutter) + var(--gutter-r)); margin-inline: auto;
  padding: clamp(24px, 4.5vh, 52px) var(--gutter-r) clamp(24px, 4.5vh, 52px) var(--gutter);
}
.switch {
  display: inline-flex; gap: 2px; max-width: 100%; padding: 5px;
  border-radius: 999px; background: #2a2c30; box-shadow: 0 10px 26px -18px rgba(0, 0, 0, .55);
  overflow-x: auto; scrollbar-width: none;
}
.switch::-webkit-scrollbar { display: none; }
.switch-tab {
  flex: none; padding: 9px clamp(14px, 1.6vw, 22px); border: 0; border-radius: 999px;
  background: none; color: #b9bcc2; cursor: pointer; white-space: nowrap;
  font: 600 .92rem/1.2 var(--body); transition: color .25s ease, background-color .25s ease;
}
.switch-tab:hover { color: #e6e8eb; }
.switch-tab[aria-selected="true"] { background: #121315; color: #fff; box-shadow: inset 0 0 0 1px #3b3d42; }
.switch-tab:focus-visible { outline-offset: 1px; border-radius: 999px; }

/* Every panel keeps its place in the one grid cell, so the cell is as tall as the tallest section and the switcher
   above it stays put while the sections change. */
.panels { display: grid; width: 100%; }
.panel {
  grid-area: 1 / 1;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vh, 32px); align-items: center;
}
/* Override the document's important [hidden] reset so inactive panels still reserve their grid space. */
.panels > .panel[hidden] { display: grid !important; visibility: hidden; }
.panel:not([hidden]) { animation: panel-in .55s var(--ease) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(14px); } }
.panel-copy h3 { margin: 0 0 12px; font-size: clamp(1.6rem, min(2.6vw, 4.6vh), 2.3rem); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
.panel-copy p { margin: 0; max-width: 46ch; color: var(--ink-2); font-size: 1rem; }

/* The shots: one crop, or two that overlap as two pages of the same section. */
.panel-shots { display: grid; width: 100%; justify-self: center; }
.shot {
  display: block; overflow: hidden; border-radius: 10px; background: var(--surface);
  box-shadow: 0 0 0 1px var(--window-ring), 0 26px 54px -30px var(--shadow-c), 0 10px 22px -16px var(--shadow-c);
}
.shot img { display: var(--th-l); width: 100%; height: auto; }
.shot img.th-d { display: var(--th-d); }
.shot.paper img { display: block; }
.pair .shot:first-child { width: 72%; }
.pair .shot:last-child { width: 80%; justify-self: end; margin-top: -6%; position: relative; }

@media (min-width: 900px) {
  .panel { grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); }
  /* The shots keep to the slide's height: the tallest section (two crops) is about 0.72 of its width. */
  .panel-shots { width: min(100%, calc((100svh - var(--header-h) - 2 * clamp(24px, 4.5vh, 52px) - 52px - clamp(22px, 4.5vh, 48px)) / .72)); }
}

/* Third slide: one list of instruments from intake to output. A faint circle carries the six steps; a dot runs along it
   to the active step, whose three ways (manual, chatbot, voice assistant) play on the right. */
.flow-in {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3.5vh, 40px); align-items: center;
  width: 100%; max-width: calc(1440px + var(--gutter) + var(--gutter-r)); margin-inline: auto;
  padding: clamp(24px, 4vh, 48px) var(--gutter-r) clamp(24px, 4vh, 48px) var(--gutter);
}
.ring { position: relative; width: min(100%, 420px); aspect-ratio: 1; justify-self: center; }
.ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring-track { fill: none; stroke: var(--ink); stroke-opacity: .13; stroke-width: .45; }
.ring-arc {
  fill: none; stroke: var(--accent); stroke-width: .7; stroke-linecap: round;
  stroke-dasharray: 0 100; transform: rotate(-90deg); transform-origin: 50% 50%;
}
/* Updated together on each animation frame, so the leading dot stays on the growing arc. */
.ring-runner { transform-origin: 50% 50%; }
.ring-dot { fill: #f2c230; stroke: #121315; stroke-width: .55; }
.ring-center { position: absolute; inset: 27% 35% 23%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; pointer-events: none; }
.flow-instrument { width: min(100%, 116px); filter: drop-shadow(0 14px 12px rgba(0, 0, 0, .22)); }
.flow-instrument svg { display: block; width: 100%; height: auto; }
.ring-counter { display: flex; align-items: baseline; gap: 6px; direction: ltr; }
.ring-n { font: 700 clamp(1.15rem, 2vw, 1.55rem)/1 var(--display); letter-spacing: -.03em; color: var(--ink); }
.ring-way { font: 500 .66rem/1.3 var(--mono); letter-spacing: .08em; color: var(--sage); }
.story-ready .flow[data-flow-phase="waiting"] .flow-instrument { opacity: 0; }
.story-ready .flow:not([data-flow-phase="ready"]) :is(.ring-svg, .ring-steps, .ring-counter) { opacity: 0; }
.story-ready .flow:not([data-flow-phase="ready"]) .ring-steps { pointer-events: none; }
.flow[data-flow-phase="entering"] .flow-instrument { animation: instrument-arrive .85s cubic-bezier(.22, .8, .3, 1) both; }
.ring-svg, .ring-steps, .ring-counter { transition: opacity .45s ease; }
.flow[data-flow-phase="ready"] .ring-track { stroke-dasharray: 100; animation: ring-build .7s ease both; }
@keyframes instrument-arrive { from { opacity: 0; transform: translate3d(-200px, -100px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes ring-build { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.ring-steps { list-style: none; margin: 0; padding: 0; }
.ring-step { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; opacity: .23; transition: opacity .32s ease; }
.ring-step.is-reached { opacity: 1; }
.ring-step button {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font: inherit;
}
.ring-dotn {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--line); color: var(--muted); font: 700 .95rem/1 var(--display);
  transition: background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.ring-label { position: absolute; width: max-content; max-width: 150px; font: 600 .86rem/1.25 var(--display); color: var(--ink-2); text-align: left; }
/* Labels point into the circle, so the ring never reaches past its own column. */
.ring-step[data-side="top"] .ring-label { top: calc(100% + 8px); left: 50%; transform: translateX(-50%); text-align: center; }
.ring-step[data-side="bottom"] .ring-label { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); text-align: center; }
.ring-step[data-side="right"] .ring-label { right: calc(100% + 10px); text-align: right; max-width: 120px; }
.ring-step[data-side="left"] .ring-label { left: calc(100% + 10px); max-width: 120px; }
.ring-step button:hover .ring-dotn { border-color: var(--accent); color: var(--accent); }
.ring-step.is-done .ring-dotn { border-color: var(--accent); color: var(--accent); }
.ring-step.is-on .ring-dotn { background: #121315; border-color: #121315; color: #f2c230; box-shadow: 0 0 0 7px rgba(242, 194, 48, .2); }
.ring-step.is-on .ring-label { color: var(--ink); }

.flow-panel { min-width: 0; }
.flow-panel h3 { margin: 10px 0 10px; font-size: clamp(1.6rem, min(2.6vw, 4.6vh), 2.3rem); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
.flow-desc { margin: 0; max-width: 62ch; min-height: calc(3 * 1.6em); color: var(--ink-2); }
/* Each step is a drawing, not a screenshot: shown one at a time in a framed stage, its motion starting over when it
   appears and running only while the slide is on screen. */
.flow-stage {
  position: relative; display: grid; place-items: center; height: clamp(280px, 52vh, 480px); margin-top: clamp(16px, 3vh, 28px);
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  background: radial-gradient(ellipse at 70% 25%, var(--glow), transparent 62%), var(--surface);
}
.art.flow-art { width: 100%; height: 100%; margin: 0; padding: clamp(10px, 3vh, 30px); stroke-width: 2.2; animation: panel-in .5s var(--ease) both; }
.flow-art[hidden] { display: none; }
.flow[data-inview] .flow-art *, .ai[data-inview] .ai-art * { animation-play-state: running; }
.art .tint { fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: none; }
.art .sym { fill: var(--accent); stroke: none; font: 700 22px var(--display); }
.art .dash2 { stroke-dasharray: 5 6; }
/* 1 · Intake: the instruments go through the lab's door and are ticked off on the list one by one. */
.fa-intake .walk { animation: fa-walk 7s var(--ease) infinite both; animation-delay: var(--w); }
@keyframes fa-walk { 0% { transform: translateX(0); opacity: 1; } 40% { transform: translateX(var(--d)); opacity: 1; } 50%, 100% { transform: translateX(calc(var(--d) + 26px)); opacity: 0; } }
.fa-intake .tick { transform-box: fill-box; transform-origin: center; animation: fa-tick 7s var(--ease) infinite both; animation-delay: var(--w); }
@keyframes fa-tick { 0% { opacity: 0; transform: scale(.3); } 6%, 80% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; } }
/* 2 · Drafts: one certificate draft comes off the list for each instrument. */
.fa-drafts .cards3 > g { transform-box: fill-box; transform-origin: center; animation: fa-card 6s var(--ease) infinite both; animation-delay: var(--w); }
@keyframes fa-card { 0% { transform: translate(var(--x), var(--y)) scale(.4); opacity: 0; } 8% { opacity: 1; } 22%, 82% { transform: none; opacity: 1; } 94%, 100% { transform: none; opacity: 0; } }
/* 3 · Readings: the needle stops at each test point and that row of the table fills in. */
.fa-readings .needle { transform-box: view-box; transform-origin: 112px 150px; animation: fa-needle 5s var(--ease) infinite; }
@keyframes fa-needle { 0%, 14% { transform: rotate(-110deg); } 20%, 34% { transform: rotate(0deg); } 40%, 54% { transform: rotate(110deg); } 60%, 74% { transform: rotate(0deg); } 80%, 100% { transform: rotate(-110deg); } }
.fa-readings .cursor { animation: fa-cursor 5s steps(1) infinite; }
@keyframes fa-cursor { 0% { transform: translateY(0); } 20% { transform: translateY(32px); } 40% { transform: translateY(64px); } 60% { transform: translateY(96px); } 80% { transform: translateY(128px); } }
.fa-readings .cells > g { animation: fa-cell 5s ease infinite both; animation-delay: calc(var(--w) + .35s); }
@keyframes fa-cell { 0% { opacity: 0; } 6%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } }
/* 4 · Uncertainty: the reference curve is drawn through its points and each test point gets its ±U. */
.art.fa-uncertainty .draw { animation-duration: 5s; }
.fa-uncertainty .bars > g { transform-box: fill-box; transform-origin: center; animation: fa-bar 5s var(--ease) infinite both; animation-delay: var(--w); }
@keyframes fa-bar { 0% { transform: scaleY(0); opacity: 0; } 8%, 70% { transform: none; opacity: 1; } 82%, 100% { opacity: 0; } }
.fa-uncertainty .dash2 { animation: art-march 1.2s linear infinite; }
/* 5 · Invoicing: a notification goes over to the invoice, whose lines and total follow. */
.fa-invoice .note { transform-box: fill-box; transform-origin: center; animation: fa-note 5s var(--ease) infinite both; }
@keyframes fa-note { 0%, 14% { transform: none; opacity: 1; } 42% { transform: translate(256px, -62px) scale(.6); opacity: 1; } 52%, 92% { transform: translate(256px, -62px) scale(.6); opacity: 0; } 100% { transform: none; opacity: 0; } }
.fa-invoice .lines > g { animation: fa-line 5s var(--ease) infinite both; animation-delay: var(--w); }
@keyframes fa-line { 0% { opacity: 0; transform: translateX(-10px); } 8%, 72% { opacity: 1; transform: none; } 84%, 100% { opacity: 0; } }
.fa-invoice .total { stroke-dasharray: 100; animation: fa-total 5s var(--ease) infinite both; animation-delay: 3s; }
@keyframes fa-total { 0% { stroke-dashoffset: 100; opacity: 1; } 12%, 60% { stroke-dashoffset: 0; opacity: 1; } 75%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.fa-invoice .total-box { transform-box: fill-box; transform-origin: center; animation: fa-pop 5s var(--ease) infinite both; animation-delay: 3.4s; }
@keyframes fa-pop { 0% { transform: scale(0); opacity: 0; } 8%, 54% { transform: none; opacity: 1; } 68%, 100% { opacity: 0; } }
/* 6 · Output: the instruments leave through the door and the list is stamped complete. */
.fa-output .leave { animation: fa-leave 6s var(--ease) infinite both; animation-delay: var(--w); }
@keyframes fa-leave { 0% { transform: translateX(-12px); opacity: 0; } 10% { opacity: 1; } 55% { transform: translateX(186px); opacity: 1; } 68%, 100% { transform: translateX(208px); opacity: 0; } }
.fa-output .stamp { transform-box: fill-box; transform-origin: center; animation: fa-stamp 6s var(--ease) infinite both; animation-delay: 3.4s; }
@keyframes fa-stamp { 0% { transform: scale(1.7); opacity: 0; } 7%, 70% { transform: none; opacity: 1; } 84%, 100% { opacity: 0; } }

@media (min-width: 1000px) {
  .flow-in { grid-template-columns: minmax(340px, min(44vw, calc(100svh - var(--header-h) - 150px))) minmax(0, 1fr); gap: clamp(40px, 5vw, 90px); }
  .ring { width: 100%; max-width: 560px; }
}
/* Short screens: the description gives up its reserved lines and the picture a little height. */
@media (min-width: 1000px) and (max-height: 760px) {
  .flow-desc { min-height: 0; }
  .flow-stage { height: clamp(240px, 47vh, 420px); }
}
/* Phones: the circle shows the step numbers only; the active step's title is right under it. */
@media (max-width: 560px) {
  .ring { width: min(100%, 300px); }
  .ring-dotn { width: 34px; height: 34px; font-size: .85rem; }
  .ring-label { display: none; }
  /* Room for the longest description, so the drawing under it stays put from step to step. */
  .flow-desc { min-height: calc(5 * 1.6em); }
}
@media (max-width: 380px) {
  .flow-desc { min-height: calc(6 * 1.6em); }
}
@media (prefers-reduced-motion: reduce) {
  .ring-arc, .ring-runner, .ring-dotn, .ring-svg, .ring-steps, .ring-counter, .ring-step { transition: none; }
  .flow-instrument, .flow[data-flow-phase="ready"] .ring-track { animation: none !important; }
  .flow-art, .flow-art *, .ai-art * { animation: none !important; }
}

/* The assistant's slide: a drawing of it on one side (an orb that speaks, chips for handwriting, voice, documents and
   chat), what it can do on the other. */
.ai-in {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 4vh, 44px); align-items: center;
  width: 100%; max-width: calc(1440px + var(--gutter) + var(--gutter-r)); margin-inline: auto;
  padding: clamp(20px, 3.5vh, 44px) var(--gutter-r) clamp(20px, 3.5vh, 44px) var(--gutter);
}
.ai-visual { justify-self: center; width: min(100%, 300px); aspect-ratio: 1; }
.art.ai-art { width: 100%; height: 100%; margin: 0; stroke-width: 2.2; }
.ai-copy h2 { margin: 0 0 12px; font-size: clamp(1.7rem, min(2.8vw, 4.8vh), 2.5rem); line-height: 1.12; font-weight: 700; letter-spacing: -.02em; }
.ai-lead { margin: 0 0 clamp(16px, 3vh, 30px); max-width: 62ch; color: var(--ink-2); }
.ai-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(12px, 2.3vh, 24px) clamp(18px, 2.4vw, 36px); }
.ai-list li { display: flex; align-items: flex-start; gap: 14px; }
.ai-list svg {
  flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 13%, transparent);
  fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.ai-list h3 { margin: 0 0 3px; font-size: clamp(.98rem, min(1.15vw, 2.1vh), 1.08rem); line-height: 1.3; font-weight: 700; }
.ai-list p { margin: 0; color: var(--ink-2); font-size: clamp(.8rem, min(.92vw, 1.7vh), .9rem); line-height: 1.5; }
.ai-art .ring-bars { stroke-width: 14; stroke-dasharray: 3 9; opacity: .45; transform-box: view-box; transform-origin: 210px 210px; animation: ai-pulse 2.4s ease-in-out infinite; }
@keyframes ai-pulse { 50% { transform: scale(1.06); opacity: .8; } }
.ai-art .ring-spin { stroke-width: 1.6; stroke-dasharray: 60 30 10 30; transform-box: view-box; transform-origin: 210px 210px; animation: ai-spin 16s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-art .orb-wave { stroke: var(--surface); stroke-width: 6; transform-box: fill-box; transform-origin: center; animation: ai-talk 1.1s ease-in-out infinite; }
@keyframes ai-talk { 50% { transform: scaleY(.5); } }
.ai-art .chip { animation: ai-bob 5s ease-in-out infinite; animation-delay: var(--w); }
@keyframes ai-bob { 50% { transform: translateY(-8px); } }
/* Short laptop screens: the assistant's list closes up so its longest language still fits one screen. */
@media (min-width: 1000px) and (max-height: 800px) {
  .ai-in { padding-block: 12px; }
  .ai-copy h2 { margin-bottom: 8px; }
  .ai-lead { margin-bottom: 14px; }
  .ai-list { row-gap: 10px; }
  .ai-list p { line-height: 1.42; }
}
@media (min-width: 1000px) {
  .ai-in { grid-template-columns: minmax(300px, .8fr) minmax(0, 1.25fr); gap: clamp(36px, 5vw, 90px); }
  .ai-visual { width: min(100%, 470px, calc(100svh - var(--header-h) - 140px)); }
  .ai-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Fourth slide: what a certificate carries. The features are listed on the left; the picked one opens on the right, in
   one cell as tall as the tallest, so nothing on the slide moves when another is picked. */
.feats-in {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vh, 44px); align-items: center;
  width: 100%; max-width: calc(1440px + var(--gutter) + var(--gutter-r)); margin-inline: auto;
  padding: clamp(24px, 4vh, 48px) var(--gutter-r) clamp(24px, 4vh, 48px) var(--gutter);
}
.feats-side h2 { margin: 0 0 clamp(16px, 3vh, 28px); font-size: clamp(1.8rem, min(3vw, 5vh), 2.6rem); line-height: 1.12; font-weight: 700; letter-spacing: -.02em; }
.feats-list { display: flex; flex-direction: column; border-inline-start: 1px solid var(--line); }
.feat-tab {
  position: relative; display: flex; gap: 12px; padding: clamp(8px, 1.4vh, 12px) 0; padding-inline-start: 22px; border: 0; background: none;
  color: var(--muted); cursor: pointer; text-align: start; font: 600 1rem/1.35 var(--body); transition: color .25s ease;
}
.feat-tab i { flex: none; padding-top: .2em; font: 500 .74rem/1.3 var(--mono); font-style: normal; letter-spacing: .06em; }
.feat-tab::before {
  content: ""; position: absolute; inset-inline-start: -1px; top: 6px; bottom: 6px; width: 2px; background: var(--accent);
  transform: scaleY(0); transition: transform .35s var(--ease);
}
.feat-tab:hover { color: var(--ink-2); }
.feat-tab[aria-selected="true"] { color: var(--ink); }
.feat-tab[aria-selected="true"] i { color: var(--accent); }
.feat-tab[aria-selected="true"]::before { transform: none; }

.feats-panels { display: grid; min-width: 0; }
.feat { grid-area: 1 / 1; min-width: 0; align-self: start; }
.feats-panels > .feat[hidden] { display: block !important; visibility: hidden; }
.feat:not([hidden]) { animation: panel-in .55s var(--ease) both; }
.feat h3 { margin: 0 0 10px; font-size: clamp(1.4rem, min(2.2vw, 4vh), 2rem); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.feat-lead { margin: 0 0 clamp(14px, 2.4vh, 22px); max-width: 64ch; color: var(--ink-2); }
.feat .shot { width: 100%; }

.feat-stats { display: flex; gap: clamp(28px, 4vw, 52px); margin: 0 0 clamp(14px, 2.4vh, 22px); }
.feat-stats p { margin: 0; color: var(--muted); font-size: .85rem; }
.feat-stats b { display: block; font: 700 clamp(2.4rem, min(4vw, 7vh), 3.4rem)/1 var(--display); letter-spacing: -.03em; color: var(--ink); }
.qty { display: flex; flex-wrap: wrap; gap: 8px; }
.qty button {
  padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2);
  cursor: pointer; font: 600 .84rem/1.3 var(--body); transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.qty button small { margin-inline-start: 6px; color: var(--muted); font: 500 .74rem/1 var(--mono); }
.qty button:hover { border-color: var(--accent); }
.qty button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.qty button[aria-pressed="true"] small { color: inherit; opacity: .7; }
/* Room for the longest list (eleven instruments), so the quantities above never move. */
.devs {
  list-style: none; margin: clamp(14px, 2.4vh, 22px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(42px, auto); gap: 8px;
  min-height: calc(4 * 42px + 3 * 8px);
}
.devs li {
  display: flex; align-items: center; padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  font-size: .9rem; color: var(--ink); animation: dev-in .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes dev-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }

.groups { margin: 0; display: grid; gap: clamp(8px, 1.4vh, 12px); }
.groups div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
.groups dt { padding-top: .25em; font: 500 .74rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.groups dd { margin: 0; color: var(--ink-2); font-size: .92rem; line-height: 1.55; }
/* An item keeps to one line where it fits, and its separator stays with it. */
.groups dd span { white-space: nowrap; }
.groups dd span:not(:last-child)::after { content: " ·"; color: var(--muted); }

@media (min-width: 1000px) {
  .feats-in { grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: clamp(48px, 6vw, 100px); }
}
@media (max-width: 640px) {
  .devs { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: calc(6 * 42px + 5 * 8px); }
  .groups div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .groups dd span { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .devs li, .feat:not([hidden]) { animation: none; }
  .feat-tab::before { transition: none; }
}

/* Fifth slide: ten things under the hood, as cards: five across two rows on a wide screen. */
.trust-in {
  display: flex; flex-direction: column; gap: clamp(18px, 3.2vh, 36px);
  width: 100%; max-width: calc(1440px + var(--gutter) + var(--gutter-r)); margin-inline: auto;
  padding: clamp(20px, 3.5vh, 44px) var(--gutter-r) clamp(20px, 3.5vh, 44px) var(--gutter);
}
.trust-head h2 { margin: 0; max-width: 24ch; font-size: clamp(1.7rem, min(2.8vw, 4.8vh), 2.5rem); line-height: 1.12; font-weight: 700; letter-spacing: -.02em; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: clamp(10px, 1.4vw, 16px); }
.card {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: clamp(14px, 2.2vh, 20px) clamp(14px, 1.3vw, 20px);
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  transition: border-color .3s ease, transform .3s var(--ease);
}
.card::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 2px; border-radius: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-2px); }
.card:hover::before { transform: none; }
.card-n { position: absolute; top: 12px; inset-inline-end: 14px; font: 500 .7rem/1 var(--mono); letter-spacing: .08em; color: var(--muted); }

/* Each card's picture: line drawings in the theme's own tones, moving gently while the slide is on screen. */
.art {
  display: block; width: 100%; height: clamp(56px, 10.5vh, 104px); margin: 2px 0 6px; overflow: visible;
  fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.art .ac { stroke: var(--accent); }
.art .mu { stroke: color-mix(in srgb, var(--ink-2) 38%, transparent); }
.art .fa { fill: var(--accent); stroke: none; }
.art .fi { fill: var(--ink-2); stroke: none; }
.art .fs { fill: var(--surface); }
.art text { stroke: none; fill: var(--accent); font: 700 13px var(--display); }
.art text.tag { fill: var(--muted); font: 600 9px var(--mono); }
.art * { animation-play-state: paused; }
.trust[data-run] .art * { animation-play-state: running; }

.art .draw { stroke-dasharray: 100; animation: art-draw 3.2s var(--ease) infinite; }
@keyframes art-draw { 0% { stroke-dashoffset: 100; opacity: 1; } 45%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.art-drive .up { animation: art-up 3s ease-in-out infinite; }
@keyframes art-up { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 70% { transform: translate(44px, -18px) scale(.6); opacity: 1; } 85%, 100% { transform: translate(52px, -20px) scale(.4); opacity: 0; } }
.art-drive .up { transform-box: fill-box; transform-origin: center; }
.art .dash { stroke-dasharray: 3 5; animation: art-march 1.2s linear infinite; }
@keyframes art-march { to { stroke-dashoffset: -16; } }
.art-sync .flow path { stroke-dasharray: 4 70; animation: art-flow 2.4s linear infinite; }
.art-sync .flow path:nth-child(2) { animation-delay: -.5s; } .art-sync .flow path:nth-child(3) { animation-delay: -1s; }
.art-sync .flow path:nth-child(4) { animation-delay: -1.5s; } .art-sync .flow path:nth-child(5) { animation-delay: -2s; }
@keyframes art-flow { from { stroke-dashoffset: 74; } to { stroke-dashoffset: 0; } }
.art-share .send { animation: art-send 3.4s ease-in-out infinite; }
@keyframes art-send { 0%, 10% { transform: translateX(0); opacity: 0; } 20% { opacity: 1; } 60% { transform: translateX(50px); opacity: 1; } 70%, 100% { transform: translateX(56px); opacity: 0; } }
.art-delete .scan circle { animation: art-scan 3s ease-in-out infinite; }
.art-delete .scan circle:nth-child(2) { animation-delay: .25s; } .art-delete .scan circle:nth-child(3) { animation-delay: .5s; }
.art-delete .scan circle:nth-child(4) { animation-delay: .75s; } .art-delete .scan circle:nth-child(5) { animation-delay: 1s; }
@keyframes art-scan { 0%, 100% { stroke: var(--ink-2); } 30%, 60% { stroke: var(--accent); fill: color-mix(in srgb, var(--accent) 22%, var(--surface)); } }
.art-search .hit { fill: var(--accent); stroke: none; opacity: 0; animation: art-hit 3.6s ease-in-out infinite; }
@keyframes art-hit { 0%, 40% { opacity: 0; } 55%, 85% { opacity: .28; } 100% { opacity: 0; } }
.art-search .lens { animation: art-lens 3.6s ease-in-out infinite; }
@keyframes art-lens { 0%, 100% { transform: translate(-30px, -22px); } 45%, 85% { transform: translate(-14px, 1px); } }
.art-notify .bell { transform-box: fill-box; transform-origin: 50% 0; animation: art-ring 2.8s ease-in-out infinite; }
@keyframes art-ring { 0%, 30%, 100% { transform: rotate(0); } 5% { transform: rotate(14deg); } 12% { transform: rotate(-12deg); } 19% { transform: rotate(8deg); } 25% { transform: rotate(-4deg); } }
.art-notify .rows > g { animation: art-row 4.2s var(--ease) infinite both; }
.art-notify .rows > g:nth-child(2) { animation-delay: .25s; } .art-notify .rows > g:nth-child(3) { animation-delay: .5s; }
@keyframes art-row { 0% { transform: translateX(24px); opacity: 0; } 15%, 85% { transform: none; opacity: 1; } 100% { opacity: 0; } }
.art-lock .pin circle { fill: var(--accent); stroke: none; opacity: .18; animation: art-pin 3.2s steps(1) infinite; }
.art-lock .pin circle:nth-child(2) { animation-delay: .25s; } .art-lock .pin circle:nth-child(3) { animation-delay: .5s; }
.art-lock .pin circle:nth-child(4) { animation-delay: .75s; }
@keyframes art-pin { 0% { opacity: .18; } 20%, 80% { opacity: 1; } 100% { opacity: .18; } }
.art-lock .shackle { stroke: var(--accent); animation: art-open 3.2s ease-in-out infinite; }
@keyframes art-open { 0%, 40% { transform: none; } 55%, 85% { transform: translateY(-6px); } 100% { transform: none; } }
.art-log .ok { fill: #3fa27a; stroke: none; } .art-log .bad { fill: #d0584f; stroke: none; } .art-log .warn { fill: #d6a03c; stroke: none; }
.art-log .logrows > g { animation: art-log 4s ease-in-out infinite; }
.art-log .logrows > g:nth-child(2) { animation-delay: .3s; } .art-log .logrows > g:nth-child(3) { animation-delay: .6s; } .art-log .logrows > g:nth-child(4) { animation-delay: .9s; }
@keyframes art-log { 0%, 100% { opacity: .45; } 20%, 60% { opacity: 1; } }
.art-style .tone { stroke: none; animation: art-tone 9s steps(1) infinite; }
@keyframes art-tone { 0% { fill: #5b8def; } 16.6% { fill: #8f9aa6; } 33.3% { fill: #5fae86; } 50% { fill: #a493d6; } 66.6% { fill: #d98a9b; } 83.3% { fill: #cfb07a; } }
.card h3 { margin: 0; font-size: clamp(1rem, min(1.25vw, 2.3vh), 1.15rem); line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
.card p { margin: 0; color: var(--ink-2); font-size: clamp(.8rem, min(.95vw, 1.75vh), .9rem); line-height: 1.5; }
.card .card-tech { margin-top: auto; padding-top: 4px; font: 500 clamp(.66rem, min(.75vw, 1.4vh), .72rem)/1.5 var(--mono); color: var(--muted); }

@media (min-width: 1100px) {
  .cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Laptop screens: the title takes one line and the pictures and cards give up a little height, so the slide still fits. */
@media (min-width: 1100px) and (max-height: 1000px) {
  .trust-in { gap: clamp(12px, 2.2vh, 20px); padding-block: clamp(12px, 2.4vh, 24px); }
  .trust-head h2 { max-width: none; }
  .trust-head .eyebrow { margin-bottom: 0; }
  .art { height: clamp(46px, 9vh, 86px); margin-bottom: 2px; }
  .card { gap: 5px; padding: 12px 14px; }
}
/* Laptops 760 pixels tall or less, where Russian, German and French run longer than English. */
@media (min-width: 1100px) and (max-height: 760px) {
  .art { height: 7.6vh; }
  .card p { line-height: 1.42; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .card::before { transition: none; }
  .card:hover { transform: none; }
  .art *, .trust[data-run] .art * { animation: none; }
  .art-search .hit { opacity: .28; } .art-lock .pin circle { opacity: 1; } .art-drive .up { opacity: 1; }
}

/* Last slide: the slogan and the two downloads. Phones read "in your pocket", larger screens "on your desk". */
.get { position: relative; overflow: hidden; }
.get::before {
  content: ""; position: absolute; inset: auto 50% 50% auto; width: min(1100px, 140vw); aspect-ratio: 1; transform: translate(50%, 50%);
  background: radial-gradient(closest-side, var(--glow), transparent); pointer-events: none;
}
.get-in {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  width: 100%; max-width: calc(1100px + var(--gutter) + var(--gutter-r)); margin-inline: auto;
  padding: clamp(32px, 6vh, 72px) var(--gutter-r) clamp(32px, 6vh, 72px) var(--gutter);
}
.get-in h2 { display: flex; flex-direction: column; align-items: stretch; width: 100%; margin: 6px 0 14px; max-width: 18ch; font-size: clamp(2.2rem, min(5.4vw, 8.5vh), 4.4rem); line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; text-align: center; }
/* Both slogans share one cell, so the title never changes height; the one in use fades in. Hovering or focusing a button
   picks its own: Android "in your pocket", Windows "on your desk". */
.slogan-fixed { display: block; }
.slogan-endings { display: grid; width: 100%; color: var(--accent); }
.slogan-endings > span { grid-area: 1 / 1; transition: opacity .4s var(--ease), transform .4s var(--ease); }
.slogan-pocket, .get-in h2[data-slogan="desk"] .slogan-pocket { opacity: 0; transform: translateY(10px); }
.get-in h2[data-slogan="desk"] .slogan-desk { opacity: 1; transform: none; }
.get-in h2[data-slogan="pocket"] .slogan-desk { opacity: 0; transform: translateY(-10px); }
.get-in h2[data-slogan="pocket"] .slogan-pocket { opacity: 1; transform: none; }
.get-lead { margin: 0 0 clamp(28px, 5vh, 48px); max-width: 48ch; text-wrap: balance; color: var(--ink-2); font-size: clamp(1rem, 1.3vw, 1.15rem); }
.get-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; width: 100%; max-width: 720px; gap: 16px; }
.dl {
  --dl-cut: var(--surface);
  position: relative; display: flex; align-items: center; gap: 16px; width: 100%; min-width: 0; padding: 16px; padding-inline: 20px 26px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); text-align: start; text-decoration: none;
  box-shadow: 0 18px 40px -26px var(--shadow-c);
  transition: border-color .3s ease, transform .3s var(--ease), box-shadow .3s ease;
}
.dl[href] { cursor: pointer; }
.dl[href]:hover, .dl[aria-disabled]:hover { transform: translateY(-2px); box-shadow: 0 24px 48px -26px var(--shadow-c); }
.dl-android:hover { border-color: #3ddc84; }
.dl-windows:hover { border-color: #0078d4; }
.dl-icon { flex: none; width: 44px; height: 44px; }
.dl-text { display: flex; flex-direction: column; }
.dl-text small { font: 500 .78rem/1.2 var(--body); color: var(--muted); }
.dl-text b { font: 700 1.45rem/1.15 var(--display); letter-spacing: -.01em; }
.dl-req { margin-top: 3px; font: 500 .72rem/1.3 var(--mono); color: var(--muted); }
.dl-soon {
  position: absolute; top: 10px; inset-inline-end: 12px; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font: 600 .66rem/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.dl[href] .dl-soon { display: none; }
@media (max-width: 720px) {
  .get-in h2:not([data-slogan]) .slogan-desk { opacity: 0; transform: translateY(-10px); }
  .get-in h2:not([data-slogan]) .slogan-pocket { opacity: 1; transform: none; }
  .dl { min-width: 0; width: 100%; }
  .get-buttons { max-width: 360px; grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .dl, .slogan-endings > span { transition: none; } .dl:hover { transform: none; } }

/* Sections */
.section { padding-block: clamp(64px, 9vw, 116px); }
.section-head { max-width: 680px; margin-bottom: clamp(32px, 5vw, 52px); }
h2 { margin: 12px 0 14px; font-size: clamp(1.85rem, 3.4vw, 2.75rem); line-height: 1.08; font-weight: 700; letter-spacing: -.022em; }
.section-head > p:not(.eyebrow) { margin: 0; color: var(--ink-2); max-width: 60ch; }

.cert-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.cert-copy > p:not(.eyebrow) { margin: 0; color: var(--ink-2); max-width: 52ch; }
.ticks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-inline-start: 26px; color: var(--ink-2); font-size: .96rem; }
.ticks li::before {
  content: ""; position: absolute; inset-inline-start: 3px; top: .42em;
  width: 9px; height: 5px; border: solid var(--accent); border-width: 0 0 2px 2px; transform: rotate(-45deg);
}
.papers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); padding-bottom: 40px; }
.paper { margin: 0; }
.paper:nth-child(2) { transform: translateY(40px); }
.paper img {
  display: block; width: 100%; height: auto; border-radius: 3px; background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 22px 44px -22px var(--shadow-c);
}
.paper figcaption { margin-top: 12px; font: 400 .76rem/1.5 var(--mono); color: var(--muted); }
.paper figcaption b { display: block; font: 600 .95rem/1.4 var(--display); color: var(--ink); }

.site-footer { border-top: 1px solid var(--line); padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px)); }
.footer-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; font-size: .86rem; color: var(--muted); }
.footer-in img { height: 22px; width: auto; }
.footer-in p { margin: 0; flex: 1 1 260px; }
.footer-in a { color: var(--ink-2); }

/* Slide transitions, driven by the scroll position itself: a slide's content rises into place as it arrives and
   the first slide recedes as it leaves. Where scroll-driven animations are missing, the slides just scroll and snap. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: slide-in linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
    .hero > .hero-copy, .hero > .stage-wrap { animation: slide-out linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  }
}
@keyframes slide-in { from { opacity: .12; transform: translateY(90px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes slide-out { to { opacity: .08; transform: translateY(-5%) scale(.93); } }

/* One camera movement links every scene; the two handoffs carry an instrument and its certificate. */
.story-ready .reveal, .story-ready .hero > * { animation: none !important; }
.story-ready .scene-content {
  opacity: var(--scene-opacity, 1);
  transform: translate3d(0, var(--scene-y, 0px), 0) scale(var(--scene-scale, 1));
  filter: blur(var(--scene-blur, 0px));
  transform-origin: 50% 35%;
}
.story-ready .scene-near > .scene-content { will-change: transform, opacity; }
.story-transfer { position: fixed; inset: 0; z-index: 18; pointer-events: none; visibility: hidden; overflow: hidden; }
.story-route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.story-route path { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-opacity: .4; stroke-linecap: round; }
.story-token { position: absolute; left: 0; top: 0; width: 78px; height: 94px; filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .3)); will-change: transform; }
.story-token::before { content: ""; position: absolute; inset: -30px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 68%); }
.story-token svg { width: 100%; height: 100%; }
.story-document, .story-transfer[data-kind="document"] .story-instrument { display: none; }
.story-transfer[data-kind="document"] .story-document { display: block; }
.feats-in { position: relative; }
.feats[data-certificate-arrived] .feats-in::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--accent); border-radius: 24px; pointer-events: none; animation: certificate-arrival 1.25s ease .55s both; }
@keyframes certificate-arrival { 0%, 100% { opacity: 0; transform: scale(.985); } 35% { opacity: .5; transform: scale(1); box-shadow: 0 0 42px -18px var(--accent); } }

/* A moving editorial spread rather than a static picture picker. */
.applications { position: relative; isolation: isolate; }
.applications::before { content: ""; position: absolute; inset: 8% 0 12%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 15% 55%, var(--glow), transparent 58%); }
.applications-heading h2 { font-size: clamp(1.9rem, min(3.5vw, 5vh), 2.9rem); letter-spacing: -.035em; }
.industry-panel { position: relative; }
.industry-panel:not([hidden]) { z-index: 2; }
.industry-panel.industry-is-leaving { z-index: 1; visibility: visible !important; pointer-events: none; }
.industry-art { position: relative; isolation: isolate; height: clamp(240px, 37svh, 360px); border-radius: 24px; background: linear-gradient(135deg, #f0f6fb, #dbe7f1); border: 1px solid rgba(150, 180, 210, .25); box-shadow: 0 24px 60px -36px var(--shadow-c), inset 0 0 0 1px rgba(255, 255, 255, .3); }
.industry-art::before { content: attr(data-scene); position: absolute; inset: 10px auto auto 22px; z-index: 2; pointer-events: none; color: rgba(11, 34, 56, .12); font: 700 clamp(3rem, 7vw, 5.5rem)/1 var(--display); letter-spacing: -.07em; }
.industry-art::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 15% 0%, rgba(141, 204, 255, .16), transparent 65%); box-shadow: inset 0 0 60px rgba(227, 238, 248, .2); }
.industry-copy > .eyebrow { display: inline-flex; width: fit-content; align-items: center; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); font-size: .68rem; letter-spacing: .1em; }
.industry-copy h3 { font-size: clamp(2rem, min(4vw, 5.8vh), 3.3rem); font-weight: 700; line-height: 1.05; letter-spacing: -.035em; margin: 16px 0 18px; }
.industry-copy > p:not(.eyebrow, .industry-instruments) { font-size: clamp(.95rem, 1.7vh, 1.04rem); line-height: 1.75; }
.industry-toolbar { gap: 20px; }
.industry-progress { flex: 1; height: 2px; max-width: 360px; margin-inline-end: auto; overflow: hidden; background: var(--line); border-radius: 999px; }
.industry-progress > span { display: block; width: 100%; height: 100%; transform: scaleX(var(--industry-progress, 0)); transform-origin: left; background: var(--accent); }
.industry-play { margin-inline-end: 6px; }
.industry-play[data-paused="false"] .industry-play-icon, .industry-play[data-paused="true"] .industry-pause-icon { display: none; }
.industry-tabs { gap: 8px; }
.industry-tabs button { border-radius: 12px; transition: background-color .35s ease, border-color .35s ease, color .35s ease, transform .35s var(--ease); }
.industry-tabs button:hover { transform: translateY(-3px); }
.industry-tabs button[aria-selected="true"] { box-shadow: 0 8px 18px -12px var(--accent); }
.industry-panel:not([hidden]) .industry-art { animation: industry-art-in .85s var(--ease) both; }
.industry-panel:not([hidden]) .industry-art img { animation: industry-drift 7s cubic-bezier(.2, .4, .6, 1) both; }
.industry-panel:not([hidden]) .industry-copy > * { animation: industry-copy-in .75s var(--ease) both; }
.industry-panel:not([hidden]) .industry-copy > :nth-child(2) { animation-delay: .08s; }
.industry-panel:not([hidden]) .industry-copy > :nth-child(3) { animation-delay: .16s; }
.industry-panel:not([hidden]) .industry-copy > :nth-child(4) { animation-delay: .24s; }
.industry-is-leaving .industry-art { animation: industry-art-out .85s var(--ease) both; }
.industry-is-leaving .industry-copy { animation: industry-copy-out .32s ease both; }
.applications:not([data-playing]) .industry-art img { animation-play-state: paused; }
@keyframes industry-art-in { from { opacity: 0; transform: translateX(26px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes industry-art-out { to { opacity: 0; transform: translateX(-22px) scale(.975); } }
@keyframes industry-drift { from { transform: scale(1.025) translateY(3px); } to { transform: scale(1.08) translateY(-4px); } }
@keyframes industry-copy-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes industry-copy-out { to { opacity: 0; transform: translateY(-12px); } }
html.i18n-measuring .scene-content, html.i18n-measuring .industry-copy *, html.i18n-measuring .industry-art { animation: none !important; transform: none !important; filter: none !important; opacity: 1 !important; }
@media (min-width: 900px) and (max-height: 780px) {
  .applications-in { gap: 14px; padding-block: 22px; }
  .industry-copy { padding-block: 6px; }
  .industry-copy h3 { font-size: clamp(1.7rem, 4.3vh, 2.5rem); margin-block: 10px 12px; }
  .industry-copy > p:not(.eyebrow, .industry-instruments) { font-size: .92rem; line-height: 1.6; }
  .industry-copy > .industry-instruments { margin-top: 14px !important; padding-top: 10px; }
}
@media (max-width: 899px) {
  .industry-art { height: clamp(190px, 27svh, 280px); border-radius: 18px; }
  .industry-copy h3 { font-size: clamp(1.65rem, 6vw, 2.1rem); margin: 10px 0 12px; }
  .industry-copy > .eyebrow { font-size: .62rem; padding: 4px 9px; }
  .industry-copy > p:not(.eyebrow, .industry-instruments) { font-size: .9rem; }
  .industry-progress { max-width: 130px; }
  .industry-toolbar { gap: 12px; }
  .industry-controls { gap: 6px; }
  .story-ready .scene-content { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .story-ready .scene-content { opacity: 1; transform: none; filter: none; }
  .story-transfer { display: none; }
  .feats[data-certificate-arrived] .feats-in::after { animation: none; }
  .industry-panel *, .industry-is-leaving * { animation: none !important; }
  .industry-panel.industry-is-leaving { visibility: hidden !important; }
  .industry-tabs button:hover { transform: none; }
}

@media (max-width: 900px) {
  .cert-layout { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eyebrow" "title" "lead" "spec"; }
}
@media (max-width: 720px) {
  .nav { display: none; }
  .lang { margin-inline-start: auto; }
  body { overflow-wrap: anywhere; }
  .scale { display: none; }
  .papers { padding-bottom: 24px; }
  .paper:nth-child(2) { transform: translateY(24px); }
}
/* Short screens: the lead gives its room to the devices. */
@media (max-height: 640px) { .hero .lead { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .seg, .switch-tab { transition: none !important; }
  .panel:not([hidden]) { animation: none; }
}