/* /fonts/fonts.css */
/* Hanken Grotesk (SIL Open Font License), served from this site instead of Google
   Fonts: one less origin before first paint, and visitors' IPs don't go to Google.
   Variable font, latin and latin-ext only; from fonts.google.com, v12. */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* /hero-story.css */
/* Light theme on the existing brand colors; text uses the darker *-ink
   variants because pure cyan fails contrast on white. */
:root {
  --bg: #FFFFFF;
  --bg-soft: #F4F6FA;
  --border: rgba(10, 11, 16, 0.08);
  --border-strong: rgba(10, 11, 16, 0.14);
  --text: #0A0B10;
  --text-muted: #4A5367;
  /* text-dim, cyan-ink, ok, warn-ink: darkest shades that still read the same,
     chosen for WCAG AA contrast (4.5:1) on white and the light panels. */
  --text-dim: #636C80;
  --cyan: #00D4FF;
  --cyan-ink: #00728F;
  --violet: #7C5CFF;
  --violet-ink: #5A3FE0;
  --ok: #15803D;
  --ok-soft: rgba(22, 163, 74, 0.12);
  --warn: #E08A00;
  --warn-ink: #8A5000;
  --warn-soft: rgba(245, 158, 11, 0.16);
  /* One family for everything on the page; labels are the same face in a
     smaller semibold cut, never a monospace. The mono stack is kept only for
     the labels of the old hero-scale.css (not part of the design). */
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Arrows and small marks come from these masks: the webfont has no arrow
     glyphs, and a fallback font's arrow never matches the text. */
  --ic-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.5v11M3.5 9 8 13.5 12.5 9' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13.5v-11M3.5 7 8 2.5 12.5 7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 9.5c2.2-3.2 4.3-3.2 6.5 0s4.3 3.2 6.5 0' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --ic-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8 8 3l5.5 5M4 7v6.5h8V7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-replay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 8a5.5 5.5 0 1 1-1.6-3.9M13.5 2.5v3h-3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --container: clamp(1360px, 90vw, 2300px);
  --nav-h: 72px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--nav-h);
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.nav__inner {
  max-width: var(--container); height: 100%; margin: 0 auto; padding: 0 48px;
  display: flex; align-items: center; gap: 32px;
}
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo__word { font-size: 21px; font-weight: 600; letter-spacing: -0.025em; }
.nav__links { display: flex; gap: 4px; margin: 0 auto; }
.nav__link { padding: 8px 12px; font-size: 14px; color: var(--text-muted); border-radius: 8px; }
.nav__link:hover { color: var(--text); background: var(--bg-soft); }
.nav__right { display: flex; align-items: center; gap: 16px; }
.nav__lang { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--text-muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px;
  border-radius: 999px; font-size: 15px; font-weight: 500; white-space: nowrap;
  border: 1px solid transparent; transition: box-shadow .2s ease, background .15s ease;
}
.btn--sm { padding: 9px 16px; font-size: 14px; }
.btn--primary {
  color: #fff; font-weight: 600;
  background: linear-gradient(135deg, #8F74FF 0%, #7C5CFF 55%, #5A3FE0 100%);
  border-color: rgba(255, 255, 255, 0.14);
  /* Two soft halos instead of a hard edge: a close one for depth, a wide one so
     the button melts into the page like the thread's glow. */
  box-shadow: 0 2px 6px -1px rgba(90, 63, 224, 0.35), 0 14px 34px -8px rgba(124, 92, 255, 0.55);
  transition: box-shadow .25s ease, transform .25s ease, filter .2s ease;
}
.btn--primary:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 3px 8px -1px rgba(90, 63, 224, 0.4), 0 18px 40px -8px rgba(124, 92, 255, 0.65); }
.btn--ghost { background: #fff; color: var(--text); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--bg-soft); }
/* Inline marks: an element sized to the text, painted in currentColor. */
.ic {
  display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; flex: none;
  background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
.ic--right { --ic: var(--ic-right); }
.ic--down { --ic: var(--ic-down); }
.ic--up { --ic: var(--ic-up); }
.ic--chev { --ic: var(--ic-chev); width: .8em; height: .8em; }
.ic--wave { --ic: var(--ic-wave); }
.ic--home { --ic: var(--ic-home); }
.ic--check { --ic: var(--ic-check); }
.ic--replay { --ic: var(--ic-replay); }
.btn .ic { width: 15px; height: 15px; }
/* Legacy hook from the earlier mockups (a text arrow inside the button). */
.btn__arrow { display: inline-block; width: 15px; height: 15px; font-size: 0; background: currentColor; -webkit-mask: var(--ic-right) center / contain no-repeat; mask: var(--ic-right) center / contain no-repeat; }

/* ---------- Hero ---------- */
.hero {
  position: relative; height: 100vh; min-height: 700px;
  padding-top: var(--nav-h); overflow: hidden;
}
.stage {
  position: absolute; left: 0; right: 0; top: var(--nav-h); bottom: 0; z-index: 1;
  --fa: 45%; --fb: 62%; --fc: 90%; --fd: 100%;
}
/* Dissolve on both sides: white-to-transparent overlays instead of a mask,
   so the panorama can pan as a composited layer and no per-frame masking. */
.stage::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #fff var(--fa), transparent var(--fb), transparent var(--fc), #fff var(--fd));
}
.stage svg { display: block; position: relative; width: 100%; height: 100%; }
.stage__strokes { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#world { will-change: transform; }
/* Anything redrawn every frame (threads with the travelling wave, packets,
   pulses, bobbing ship, rotating parts) sits on its own compositor layer, so
   its updates repaint only itself and never the text and machines around it. */
.stage .cmp { will-change: transform; }
.stage__note {
  position: absolute; right: 56px; bottom: 18px; z-index: 1;
  font-size: 12.5px; font-style: italic; color: var(--text-dim);
}
.hero__grid {
  position: relative; z-index: 2; height: 100%;
  max-width: var(--container); margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 6.4fr); gap: 56px;
  align-items: center; pointer-events: none;
}
.copy { pointer-events: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 8px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--border);
  font-size: 13px; font-weight: 500; color: var(--text-muted);
}
.eyebrow svg { display: block; }
.step {
  margin-top: 26px; min-height: 18px;
  font-size: 14px; font-weight: 600; color: var(--violet-ink); font-variant-numeric: tabular-nums;
  transition: opacity .3s ease;
}
.step.is-fading { opacity: 0; }

/* Two stacked layers crossfade; both sit in one grid cell so the block
   keeps its height and the buttons below never jump. */
/* Height reserved for the longest copy (3-line title + 3-line sub) so the
   buttons below stay put while the text changes. */
.live {
  --ts: clamp(40px, 3.3vw, 68px); --ss: clamp(16px, 1.25vw, 22px);
  display: grid; align-content: start; margin-top: 12px;
  min-height: calc(4 * 1.08 * var(--ts) + 18px + 3 * 1.6 * var(--ss));
}
.live__layer {
  grid-area: 1 / 1; opacity: 0; transform: translateY(12px);
  transition: opacity .35s ease, transform .5s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.live__layer.is-on {
  opacity: 1; transform: none; pointer-events: auto;
  transition-delay: .15s; transition-duration: .55s, .7s;
}
.live__layer.is-off { opacity: 0; transform: translateY(-10px); }
/* Screenshot mode (?t=): no transitions, so frozen frames show final copy. */
.snap .live__layer, .snap .step, .snap .fo-reveal, .snap .cue, .snap .next__line * { transition: none !important; }
.live__title {
  margin: 0; font-size: var(--ts); line-height: 1.08; letter-spacing: -0.03em; font-weight: 500;
}
.accent {
  background: linear-gradient(90deg, #00A9D6 0%, #5A3FE0 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.live__sub {
  margin: 18px 0 0; max-width: 32em;
  font-size: var(--ss); line-height: 1.6; color: var(--text-muted);
}
.cta { margin-top: 26px; display: flex; gap: 12px; }

/* Chapter bar doubles as a table of contents for the story. */
.player { margin-top: 40px; display: flex; align-items: flex-start; gap: 16px; max-width: 520px; }
.player__btn {
  all: unset; cursor: pointer; flex: none; width: 30px; height: 30px; margin-top: -9px;
  border-radius: 50%; border: 1px solid var(--border-strong); background: #fff;
  display: grid; place-items: center; color: var(--text);
}
.player__btn:hover { background: var(--bg-soft); }
.player__btn svg { display: block; }
.player__btn.is-replay { width: auto; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; gap: 6px; display: inline-flex; }
.chapters { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.chap { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 7px; }
.chap__bar { height: 3px; border-radius: 2px; background: var(--border-strong); overflow: hidden; }
.chap__bar i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; will-change: transform; background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.chap__name { font-size: 12px; font-weight: 500; color: var(--text-dim); white-space: nowrap; }
.chap.is-current .chap__name { color: var(--text); }
.chap:hover .chap__name { color: var(--violet-ink); }

/* Scroll cue at the end of the descent line. */
.cue {
  position: absolute; z-index: 3; bottom: 26px; left: 0;
  transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px; background: #fff;
  border: 1px solid var(--border-strong); box-shadow: 0 10px 30px -12px rgba(10,11,16,.3);
  font-size: 14px; font-weight: 500;
  transition: opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.cue.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.cue__arrow { color: var(--violet-ink); animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: none; } 50% { transform: translateY(3px); } }

/* ---------- Block 2 stub ---------- */
.next { position: relative; min-height: 70vh; background: var(--bg-soft); border-top: 1px solid var(--border); }
.next__line { position: absolute; left: 0; top: 0; width: 100%; height: 140px; overflow: visible; }
.next__line path {
  fill: none; stroke: var(--violet); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .9s cubic-bezier(.45,0,.2,1);
}
.next__line circle { fill: var(--violet); opacity: 0; transition: opacity .3s ease .8s; }
.next.is-linked .next__line path { stroke-dashoffset: 0; }
.next.is-linked .next__line circle { opacity: 1; }
.next__inner { max-width: var(--container); margin: 0 auto; padding: 150px 48px 80px; }
.next__eyebrow { font-size: 14px; font-weight: 600; color: var(--violet-ink); }
.next h2 { margin: 12px 0 0; font-size: 40px; font-weight: 500; letter-spacing: -0.03em; }
.next p { color: var(--text-muted); }

/* ---------- SVG drawing styles ---------- */
.thread { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ink { fill: none; stroke: #2B3242; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.ink-fill { fill: #fff; stroke: #2B3242; stroke-width: 1.5; stroke-linejoin: round; }
.ink-thin { fill: none; stroke: #8A93A6; stroke-width: 1; stroke-linecap: round; }
.ink-box { stroke: #2B3242; stroke-width: 1; }
.lbl { font-family: var(--font-sans); font-size: 11.5px; font-weight: 500; fill: #7B8497; }
.lbl-strong { font-family: var(--font-sans); font-size: 13px; font-weight: 500; fill: #0A0B10; }
/* Secondary line under a label (kept its old class name; no longer mono). */
.lbl-mono { font-family: var(--font-sans); font-size: 11.5px; fill: #6B7385; }
.lbl-violet { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; fill: #5A3FE0; }

/* HTML inside foreignObject (sizes are SVG user units). */
.stage foreignObject { overflow: visible; }
.fo { font-family: var(--font-sans); color: var(--text); padding: 10px; }
.fo-card {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 10px 22px -14px rgba(10, 11, 16, .35); padding: 14px 16px 12px;
}
.fo-tag { font-size: 11.5px; font-weight: 600; color: var(--violet-ink); }
.fo-title { margin-top: 5px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.fo-row { display: flex; align-items: center; gap: 10px; margin-top: 9px; font-size: 13px; color: var(--text-muted); }
.fo-eng {
  display: flex; align-items: center; gap: 9px; margin-top: 11px; padding-top: 10px;
  border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-muted);
}
.fo-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-soft); border: 1px solid var(--border-strong); display: grid; place-items: center; color: var(--violet-ink); }
.fo-check { margin-left: auto; color: var(--ok); font-weight: 700; font-size: 14px; }
.fo-ticket {
  background: #fff; border: 1px dashed rgba(90, 63, 224, .45); border-radius: 12px;
  padding: 9px 14px; box-shadow: 0 8px 16px -12px rgba(10, 11, 16, .35);
}
.fo-ticket .fo-t { font-size: 13.5px; font-weight: 600; margin-top: 2px; }
.fo-ticket .fo-s { font-size: 11.5px; color: var(--text-muted); }
.fo-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: nowrap; }
.fo-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border-strong); font-size: 12px; font-weight: 500; white-space: nowrap;
}
.fo-chip .ic { color: var(--violet-ink); width: 13px; height: 13px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.badge--warn { background: var(--warn-soft); color: var(--warn-ink); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.fo-reveal { opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.fo-reveal.is-on { opacity: 1; transform: none; }

/* /hero-choice.css */
/* Overrides for the "choice" hero on top of hero-story.css. */

/* Lane tags at every fork: MISOKI above, YOURS below; white halo so waves
   and packets passing underneath don't break the letters. */
.lbl-lane {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round;
}
.lbl-lane--a { fill: #0089AD; }
.lbl-lane--b { fill: #5A3FE0; }
.lbl-api { font-family: var(--font-sans); font-size: 7.5px; letter-spacing: .04em; font-weight: 600; fill: #5A3FE0; }

/* Lane chip sitting on the thread (integration, etc.). */
.chip-line { fill: #fff; stroke: #8A93A6; stroke-width: 1; }

/* Compact dashboard card in the decision scene. */
.fo-card--sm { padding: 12px 14px 11px; }
.fo-card--sm .fo-title { font-size: 15px; }
.fo-card--sm .fo-row { margin-top: 8px; font-size: 12.5px; }
.fo-wo { padding-top: 8px; border-top: 1px solid var(--border); }
.fo-wo__k { font-size: 11.5px; font-weight: 600; color: var(--violet-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fo-card--sm .fo-tag { white-space: nowrap; }
.badge--ok { background: var(--ok-soft); color: var(--ok); }

/* "Your system" window the same decision lands in through the API. */
.fo-sys {
  background: #fff; border: 1px solid var(--border-strong); border-radius: 10px;
  box-shadow: 0 8px 16px -12px rgba(10, 11, 16, .35); overflow: hidden; font-size: 12.5px;
}
.fo-sys__bar {
  display: flex; align-items: center; gap: 5px; padding: 7px 12px;
  background: var(--bg-soft); border-bottom: 1px solid var(--border);
}
.fo-sys__bar .fo-tag { color: var(--text-muted); margin-right: auto; }
.fo-sys__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.fo-sys__row { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--border); }
.fo-sys__row:last-child { border-bottom: 0; }
.fo-sys__ph { display: inline-block; height: 7px; width: 140px; border-radius: 4px; background: #E3E7EE; }
.fo-sys__ph--s { width: 54px; }
.fo-sys__row--wo { color: var(--text); }
.fo-sys__row--wo .badge { margin-left: auto; }

/* Header: the demo button sits next to "Open dashboard". Same gradient as the
   block buttons, but a tighter halo so the bar stays quiet. */
.nav__right { gap: 12px; }
.nav__right .nav__lang { margin-right: 4px; }
.nav .btn--primary { box-shadow: 0 1px 3px -1px rgba(90, 63, 224, 0.3), 0 8px 18px -6px rgba(124, 92, 255, 0.45); }
.nav .btn--primary:hover { transform: none; box-shadow: 0 1px 3px -1px rgba(90, 63, 224, 0.35), 0 10px 22px -6px rgba(124, 92, 255, 0.55); }

/* Finale recap board: the story's four choices as two rows of pictograms,
   Misoki's on top and the client's below. A thread runs through the chosen
   ones and re-routes every few seconds; the rest of the nodes stay dim. */
.recap-title { font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; fill: #0A0B10; }
.recap-h { font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; fill: #7B8497; }
.recap-node { opacity: .38; transition: opacity .45s ease; }
.recap-node.is-on { opacity: 1; }
.recap-node__bg { fill: #fff; stroke: rgba(10, 11, 16, 0.18); stroke-width: 1; transition: fill .45s ease, stroke .45s ease; }
.recap-node.is-on--a .recap-node__bg { fill: #DDF6FD; stroke: #0089AD; stroke-width: 1.2; }
.recap-node.is-on--b .recap-node__bg { fill: #ECE7FF; stroke: #5A3FE0; stroke-width: 1.2; }
.recap-cap { font-family: var(--font-sans); font-size: 10.5px; font-weight: 500; fill: #0A0B10; }
.recap-route { fill: none; stroke-width: 2; stroke-linecap: round; }
.recap-hub { font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; fill: #0A0B10; }

/* /site.css */
/* Page below the hero: platform shelf, cases, trust, FAQ, footer, and the
   contact modal. One thread (site-thread.js) runs through every block. */

button.btn { cursor: pointer; }

/* ---------- Blocks ---------- */
.blk { position: relative; background: #fff; }
.blk__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.blk__svg .tl { fill: none; stroke: var(--violet); stroke-width: 2; stroke-linecap: butt; stroke-dasharray: 1; }
.blk__svg .tl--trunk { stroke: url(#gr-trunk); }
.blk__svg .st { fill: #fff; stroke: var(--violet); stroke-width: 1.6; opacity: 0; transition: opacity .35s ease, stroke .2s ease, fill .2s ease; }
.blk__svg .st.is-on { opacity: 1; }
.blk__svg .st--hub { stroke-width: 2; }
.blk__svg .st--end { fill: var(--violet); }
.blk__svg .st--stop.is-open { fill: var(--violet); }
.blk__svg .blk__pk circle { fill: var(--violet); will-change: transform; }
.blk--dark .blk__svg .st { fill: #0A0B10; }
.blk--dark .blk__svg .st--end { fill: var(--violet); }

.blk__inner { position: relative; max-width: var(--container); margin: 0 auto; padding: 0 48px; }
.blk__head {
  display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 6.4fr); gap: 56px; align-items: end;
}
.blk__eyebrow { display: block; font-size: 14px; font-weight: 600; color: var(--violet-ink); font-variant-numeric: tabular-nums; }
.blk__title { margin: 14px 0 0; font-size: clamp(34px, 2.7vw, 54px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 500; }
.blk__lead { margin: 18px 0 0; max-width: 34em; font-size: clamp(16px, 1.15vw, 20px); line-height: 1.6; color: var(--text-muted); }
.blk__cta { margin-top: 24px; display: flex; align-items: center; gap: 14px; }
.blk__cta-note { font-size: 13px; color: var(--text-dim); }
.blk__body { margin-top: 56px; }

/* Anything with data-reveal arrives with the thread. */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .7s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 70ms); }
[data-reveal].is-in { opacity: 1; transform: none; }
.snap [data-reveal] { transition: none !important; }
.snap .blk__svg .st { transition: none !important; }

/* ---------- 02 · Platform shelf ---------- */
.blk--products { padding: 96px 0 0; }
.blk--products .blk__head { min-height: 200px; }

/* The core product on its own row above the grid. The thread lands on its top edge and
   leaves from its bottom into the rail over the columns (the 56 px gap below holds it). */
.pfeat {
  position: relative; display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 44px; align-items: center;
  margin-top: 76px; padding: 32px 36px 32px 32px; border-radius: 20px;
  border: 1px solid rgba(124, 92, 255, .55);
  background: linear-gradient(120deg, #F6F4FF 0%, #fff 48%, #F1FAFD 100%);
  box-shadow: 0 1px 0 rgba(10, 11, 16, .02), 0 30px 60px -44px rgba(124, 92, 255, .55);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .2s ease;
}
.pfeat:hover { transform: translateY(-3px); border-color: rgba(124, 92, 255, .85); box-shadow: 0 34px 64px -40px rgba(124, 92, 255, .6); }
.pfeat__main { display: flex; gap: 24px; align-items: flex-start; }
.pfeat h3 { margin: 6px 0 0; font-size: clamp(28px, 2.2vw, 38px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 600; }
.pfeat p { margin: 12px 0 0; max-width: 30em; font-size: 16px; line-height: 1.55; color: var(--text-muted); }
.pfeat__cta { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.pfeat__alt { font-size: 13px; color: var(--text-dim); }
.pfeat__alt b { font-weight: 600; color: var(--cyan-ink); margin-right: 6px; }
.pfeat .btn .ic { transition: transform .25s ease; }
.pfeat:hover .btn .ic { transform: translateX(3px); }
.pfeat__pts { list-style: none; margin: 0; padding: 4px 0 4px 40px; border-left: 1px solid rgba(124, 92, 255, .3); display: grid; gap: 16px; }
.pfeat__pts li { position: relative; display: grid; gap: 3px; padding-left: 18px; font-size: 13.5px; line-height: 1.45; color: var(--text-muted); }
.pfeat__pts li::before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }
.pfeat__pts b { font-size: 14.5px; font-weight: 600; color: var(--text); }

.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 56px; }
.pcard {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 250px;
  padding: 22px 22px 18px; background: #fff; border: 1px solid var(--border-strong); border-radius: 16px;
  box-shadow: 0 1px 0 rgba(10, 11, 16, .02);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .2s ease;
}
.pcard:hover { transform: translateY(-4px); border-color: rgba(124, 92, 255, .55); box-shadow: 0 22px 40px -24px rgba(10, 11, 16, .35); }
.pcard--core { border-color: rgba(124, 92, 255, .45); background: linear-gradient(180deg, #F9F8FF 0%, #fff 60%); }
.pcard__top { display: flex; align-items: flex-start; justify-content: space-between; }
.pcard__tag { font-size: 12.5px; font-weight: 600; color: var(--violet-ink); }
.pcard__tag--core { color: var(--cyan-ink); }
.pcard h3 { margin: 4px 0 0; font-size: 19px; line-height: 1.2; letter-spacing: -0.015em; font-weight: 600; }
.pcard p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.pcard__alt { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--border-strong); font-size: 12.5px; color: var(--text-dim); }
.pcard__alt b { font-weight: 600; color: var(--cyan-ink); margin-right: 6px; }
.pcard__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13.5px; font-weight: 500; color: var(--violet-ink); }
.pcard__more .ic { transition: transform .25s ease; }
.pcard:hover .pcard__more .ic { transform: translateX(3px); }
.pcard__alt + .pcard__more { margin-top: 10px; }
/* Last tile: the way to the products overview. */
.pcard--all { background: var(--bg-soft); }
.pcard--all h3 { max-width: 9em; }
.pcard__btn { margin-top: auto; align-self: flex-start; }
.pcard__btn .ic { transition: transform .25s ease; }
.pcard--all:hover .pcard__btn { background: #fff; }
.pcard--all:hover .pcard__btn .ic { transform: translateX(3px); }

/* Icons: 48 × 48 line drawings with one small looping motion each, running
   only while the block is on screen and faster under the cursor. */
.pi { display: block; width: 48px; height: 48px; flex: none; }
.pi--lg { width: 76px; height: 76px; margin-top: 2px; }
.pi svg { display: block; width: 100%; height: 100%; overflow: visible; will-change: transform; }
.pi .k { fill: none; stroke: #2B3242; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pi .kf { fill: #fff; stroke: #2B3242; stroke-width: 1.5; stroke-linejoin: round; }
.pi .v { fill: none; stroke: var(--violet); stroke-width: 1.6; stroke-linecap: round; }
.pi .c { fill: none; stroke: var(--cyan-ink); stroke-width: 1.6; stroke-linecap: round; }
.pi .vf { fill: var(--violet); }
.pi .cf { fill: var(--cyan-ink); }
.pi .soft { fill: #F7F6FF; }
.pi [class*="an-"] { animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-play-state: paused; }
.is-live .pi [class*="an-"] { animation-play-state: running; }
.pcard:hover .pi [class*="an-"], .pfeat:hover .pi [class*="an-"] { animation-duration: 1.6s; }
.snap .pi [class*="an-"] { animation: none !important; }
.an-ray { animation-name: pi-ray; }
.an-ray:nth-child(2) { animation-delay: .3s; }
.an-ray:nth-child(3) { animation-delay: .6s; }
.an-ring { animation-name: pi-ring; transform-origin: 24px 24px; }
.an-ring:nth-child(2) { animation-delay: 2s; }
.an-bar { animation-name: pi-bar; transform-origin: 50% 100%; transform-box: fill-box; }
.an-bar:nth-child(2) { animation-delay: .5s; }
.an-bar:nth-child(3) { animation-delay: 1s; }
.an-dot { animation-name: pi-dot; }
.an-pulse { animation-name: pi-pulse; transform-origin: center; transform-box: fill-box; }
.an-check { animation-name: pi-check; }
.an-line { animation-name: pi-line; }
.an-line:nth-child(2) { animation-delay: .4s; }
.an-line:nth-child(3) { animation-delay: .8s; }
.an-line:nth-child(4) { animation-delay: 1.2s; }
.an-run { animation-name: pi-run; }
.an-blink { animation-name: pi-blink; }
.an-blink:nth-child(2) { animation-delay: .35s; }
.an-blink:nth-child(3) { animation-delay: .7s; }
@keyframes pi-ray { 0%, 15% { opacity: 0; } 35%, 70% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes pi-ring { 0% { transform: scale(.55); opacity: .9; } 70% { opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes pi-bar { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
@keyframes pi-dot { 0%, 100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-4px); opacity: 1; } }
@keyframes pi-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes pi-check { 0%, 20% { stroke-dashoffset: 1; } 45%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes pi-line { 0%, 10% { opacity: .15; } 30%, 70% { opacity: 1; } 90%, 100% { opacity: .15; } }
@keyframes pi-run { 0% { transform: translateX(-9px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(9px); opacity: 0; } }
@keyframes pi-blink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

/* Caption on the collector rail. */
.pfoot { position: relative; height: 150px; }
.pfoot__note {
  position: absolute; left: 50%; top: 40px; transform: translate(-50%, 0);
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border-strong); font-size: 13px; font-weight: 500;
  color: var(--text-muted); white-space: nowrap;
}
.pfoot__note i { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); }

/* ---------- 03 · Cases ---------- */
.blk--cases { padding: 72px 0 96px; }
.where { margin-top: 6px; }
.where__k { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.where__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.where__chips a {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: #fff;
  font-size: 13px; font-weight: 500; color: var(--text); transition: background .15s ease, border-color .15s ease;
}
.where__chips a:hover { background: var(--bg-soft); border-color: rgba(124, 92, 255, .5); }
.where__chips a.is-hi { border-color: rgba(0, 137, 173, .5); background: #EAFAFE; }
.cases { display: grid; gap: 18px; }

/* One case = an evidence panel next to the story. The panel tells the case in three
   steps on one clock (--T) once most of the card is on screen (site-ui.js adds
   .is-play): the photo with Prism's diagnosis pinned to the machine → what was done →
   the result. Captions on the photo narrate the steps, the photo cuts to the next
   scene at each step, the timeline fills as the story moves, the metrics land last.
   Every timing is a fraction of --T (step 2 starts at 42%, step 3 at 70%), so the
   pace is one number. Only the locator's ring keeps breathing afterwards; Replay
   restarts the sequence. */
.case {
  --T: 15s;
  display: grid; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
  background: #fff; border: 1px solid var(--border-strong); border-radius: 18px;
}
.ev { display: flex; flex-direction: column; min-width: 0; padding: 14px 0 10px 14px; }
.ph { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #E3E7EE; }
.ph__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); filter: saturate(.9); }
.ph__img[data-step] { opacity: 0; }

/* Locator on the machine: a dot, and a ring that keeps breathing while the block is on screen. */
.ph__loc { position: absolute; left: var(--lx); top: var(--ly); width: 0; height: 0; opacity: 0; transform: scale(.5); transform-origin: 0 0; }
.ph__loc::before, .ph__loc::after { content: ''; position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); }
.ph__loc::before { width: 12px; height: 12px; background: var(--violet); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(10, 11, 16, .3), 0 2px 8px rgba(10, 11, 16, .4); }
.ph__loc::after { width: 12px; height: 12px; border: 1.5px solid #fff; opacity: 0; animation: loc-ring 2.4s ease-out infinite; animation-play-state: paused; }
.is-live .case.is-play .ph__loc::after { animation-play-state: running; }
@keyframes loc-ring { 0% { transform: translate(-50%, -50%) scale(1); opacity: .9; } 70% { opacity: 0; } 100% { transform: translate(-50%, -50%) scale(4.2); opacity: 0; } }

/* Leader from the locator up to the diagnosis card. */
.ph__lead {
  position: absolute; left: var(--lx); top: var(--ly); width: 2px; height: 22px; margin-left: -1px;
  background: #fff; box-shadow: 0 0 0 .5px rgba(10, 11, 16, .3);
  transform: translateY(-100%) scaleY(0); transform-origin: bottom;
}

/* Diagnosis card above the locator, opening to the left (case--cl) or the right (case--cr). */
.ph__callout { position: absolute; left: var(--lx); top: var(--ly); width: 248px; }
.case--cl .ph__callout { transform: translate(-100%, -100%) translate(10px, -22px); }
.case--cr .ph__callout { transform: translate(0, -100%) translate(-10px, -22px); }
.ph__card {
  padding: 10px 12px 11px; background: #fff; border-radius: 10px;
  box-shadow: 0 12px 28px -12px rgba(10, 11, 16, .5), 0 0 0 1px rgba(10, 11, 16, .07);
  opacity: 0; transform: translateY(6px);
}
.ph__tag { display: block; font-size: 11.5px; font-weight: 600; color: var(--violet-ink); }
.ph__card b { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.ph__card small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.35; color: var(--text-muted); }

/* Prism's trace: a trend or a spectrum. .sp-tr draws in, .sp-pj is the projection,
   .sp-pk peaks rise with the diagnosis and shrink to --after once the fault is gone. */
.spark { display: block; width: 100%; height: 38px; margin-top: 8px; overflow: visible; }
.spark .sp-th { fill: none; stroke: #B9C0CE; stroke-width: 1; stroke-dasharray: 3 3; }
.spark .sp-tr { fill: none; stroke: var(--violet); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.spark .sp-pj { fill: none; stroke: var(--warn); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: .028 .022; opacity: 0; }
.spark .sp-mk { fill: #fff; stroke: var(--violet); stroke-width: 1.6; opacity: 0; }
.spark .sp-mk--w { stroke: var(--warn); }
.spark .sp-pk { fill: none; stroke: var(--violet); stroke-width: 1.6; stroke-linejoin: round; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
.spark .sp-lb { font-size: 7.5px; font-weight: 600; fill: var(--text-dim); text-anchor: middle; }

/* The card's middle switches between the trace and Prism's procedure (marine). */
.ph__stage { display: grid; margin-top: 6px; }
.ph__stage > * { grid-area: 1 / 1; margin-top: 0; align-self: center; }
.steps { list-style: none; margin: 0; padding: 0; opacity: 0; }
.steps li { position: relative; padding-left: 20px; font-size: 12px; line-height: 16px; color: var(--text-muted); }
.steps li::before { content: ''; position: absolute; left: 0; top: 2px; box-sizing: border-box; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #C5CBD8; }
.steps li::after {
  content: ''; position: absolute; left: 2.5px; top: 4.5px; width: 7px; height: 7px; background: #fff; opacity: 0;
  -webkit-mask: var(--ic-check) center / contain no-repeat; mask: var(--ic-check) center / contain no-repeat;
}

/* Status chips at the bottom of the card: what was done, then the result. */
.ph__st { display: flex; gap: 6px; margin-top: 9px; }
.ph__st span {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--border); font-size: 11px; font-weight: 600; color: var(--text-muted); white-space: nowrap;
  opacity: 0; transform: translateX(-4px);
}
.ph__st .is-ok { background: #ECE7FF; border-color: rgba(124, 92, 255, .45); color: var(--violet-ink); }
.ph__st .ic { width: 10px; height: 10px; }

/* Captions on the photo narrate the three steps; the segments show which one is playing. */
.ph__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 14px 12px; color: #fff;
  background: linear-gradient(to top, rgba(10, 11, 16, .84) 0%, rgba(10, 11, 16, .6) 50%, rgba(10, 11, 16, 0) 100%);
}
.ph__segs { display: flex; gap: 4px; width: 96px; }
.ph__seg { position: relative; flex: 1; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.ph__seg::after { content: ''; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.ph__txt { display: grid; margin-top: 9px; min-height: 36px; padding-right: 84px; }
.ph__txt p { grid-area: 1 / 1; margin: 0; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .88); opacity: 0; transform: translateY(4px); }
.ph__txt b { font-weight: 600; color: #fff; }
.ev__replay {
  position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12); color: #fff;
  font: inherit; font-size: 12px; font-weight: 600; line-height: 1.2; cursor: pointer; opacity: 0; visibility: hidden;
}
.ev__replay .ic { width: 12px; height: 12px; }
.ev__replay:hover { background: rgba(255, 255, 255, .24); }

/* Timeline under the photo: what happened when. The dashed tail is what never had to happen. */
.tl { position: relative; padding: 14px 8px 0 4px; }
.tl__span { display: block; font-size: 12.5px; font-weight: 600; color: var(--violet-ink); text-align: center; font-variant-numeric: tabular-nums; opacity: 0; }
.tl__track { position: relative; height: 2px; margin: 12px 4px 0; background: #E3E7EE; border-radius: 1px; }
.tl__fill { position: absolute; left: 0; top: 0; height: 100%; width: calc(var(--done, 1) * 100%); background: var(--violet); transform: scaleX(0); transform-origin: left; }
.tl__rest { position: absolute; left: calc(var(--done, 1) * 100%); right: 0; top: -1px; border-top: 2px dashed #F0B85C; opacity: 0; }
.tl__st { list-style: none; margin: 0 4px; padding: 0; position: relative; height: 46px; }
.tl__st li {
  position: absolute; left: calc(var(--p) * 100%); top: 0; width: max-content; max-width: 200px; padding-top: 12px;
  font-size: 12px; line-height: 1.3; color: var(--text-muted);
  opacity: 0; transform: translate(var(--tx, 0), 4px);
}
.tl__st li b { display: block; font-weight: 600; color: var(--text); }
.tl__st li::before {
  content: ''; position: absolute; left: 0; top: -1px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--violet); border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--violet); transform: translate(-50%, -50%);
}
.tl__st--c { --tx: -50%; text-align: center; }
.tl__st--c::before { left: 50%; }
.tl__st--r { --tx: -100%; text-align: right; }
.tl__st--r::before { left: 100%; }
.tl__st--x::before { background: #fff; box-shadow: 0 0 0 1.5px var(--warn); }
.tl__st--x b { color: var(--warn-ink); }

/* The story. */
.case__text { display: flex; flex-direction: column; min-width: 0; padding: 26px 30px 22px 28px; }
.case__tag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--violet-ink); }
.case__tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); }
.case h3 { margin: 8px 0 0; font-size: clamp(23px, 1.6vw, 30px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 500; }
.case__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin: 16px 0 26px; }
.case__k { font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.case__cols p { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.case__metrics { display: flex; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); }
.case__m { flex: 1; padding: 2px 22px; border-left: 1px solid var(--border); opacity: 0; transform: translateY(4px); }
.case__m:first-child { padding-left: 0; border-left: 0; }
.case__m b { display: block; font-size: clamp(28px, 2.1vw, 38px); line-height: 1; letter-spacing: -0.03em; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.case__m b span { font-size: .55em; color: var(--violet-ink); margin-left: 2px; }
.case__m small { display: block; margin-top: 7px; font-size: 12.5px; line-height: 1.35; color: var(--text-muted); }
.cases__note { margin-top: 18px; font-size: 13px; color: var(--text-dim); }

/* The sequence, in the order it plays. Delays are fractions of --T. */
.case.is-play .ph__img { animation: ph-zoom var(--T) linear both; }
.case.is-play .ph__img[data-step="2"] { animation-name: ph-cut-2; }
.case.is-play .ph__img[data-step="3"] { animation-name: ph-cut-3; }
.case.is-play .ph__loc { animation: loc-in-out var(--T) linear both; }
.case.is-play .ph__lead { animation: lead-in-out var(--T) linear both; }
.case.is-play .ph__card { animation: card-in .5s cubic-bezier(.16, 1, .3, 1) calc(var(--T) * .06) both; }
.case.is-play .ph__txt p:nth-child(1) { animation: cap-1 var(--T) ease both; }
.case.is-play .ph__txt p:nth-child(2) { animation: cap-2 var(--T) ease both; }
.case.is-play .ph__txt p:nth-child(3) { animation: cap-3 var(--T) ease both; }
.case.is-play .ph__seg:nth-child(1)::after { animation: seg-1 var(--T) linear both; }
.case.is-play .ph__seg:nth-child(2)::after { animation: seg-2 var(--T) linear both; }
.case.is-play .ph__seg:nth-child(3)::after { animation: seg-3 var(--T) linear both; }
.case.is-play .sp-tr { animation: draw 1.1s cubic-bezier(.45, 0, .2, 1) calc(var(--T) * .085) both; }
.case.is-play .sp-mk { animation: fade-in .3s ease calc(var(--T) * .155) both; }
.case.is-play .sp-pj { animation: fade-in .6s ease calc(var(--T) * .17) both; }
.case.is-play .sp-mk--w { animation-delay: calc(var(--T) * .2); }
.case.is-play .sp-pk { animation: peak var(--T) linear both; }
.case.is-play .sp-mk--x { animation: mark-x var(--T) linear both; }
.case.is-play .tl__fill { animation: fill calc(var(--T) * .54) linear calc(var(--T) * .16) both; }
.case.is-play .tl__st li { animation: st-in .35s ease both; animation-delay: calc(var(--T) * .16 + var(--p) / var(--done, 1) * var(--T) * .54); }
.case.is-play .ph__st span { animation: chip-in .3s ease calc(var(--T) * .44) both; }
.case.is-play .ph__stage > .spark { animation: stage-a var(--T) linear both; }
.case.is-play .ph__stage > .steps { animation: stage-b var(--T) linear both; }
.case.is-play .steps li:nth-child(1) { --at: calc(var(--T) * .47); }
.case.is-play .steps li:nth-child(2) { --at: calc(var(--T) * .53); }
.case.is-play .steps li:nth-child(3) { --at: calc(var(--T) * .59); }
.case.is-play .steps li { animation: tick-text .2s ease var(--at) both; }
.case.is-play .steps li::before { animation: tick-dot .2s ease var(--at) both; }
.case.is-play .steps li::after { animation: tick-mark .25s cubic-bezier(.16, 1, .3, 1) var(--at) both; }
.case.is-play .sp-tr--2 { animation: draw .9s ease-in-out calc(var(--T) * .72) both; }
.case.is-play .tl__rest { animation: fade-in .4s ease calc(var(--T) * .73) both; }
.case.is-play .tl__st li.tl__st--x { animation-delay: calc(var(--T) * .74); }
.case.is-play .ph__st .is-ok { animation-delay: calc(var(--T) * .75); }
.case.is-play .tl__span { animation: fade-in .4s ease calc(var(--T) * .77) both; }
.case.is-play .case__m { animation: m-in .4s ease both; }
.case.is-play .case__m:nth-child(1) { animation-delay: calc(var(--T) * .8); }
.case.is-play .case__m:nth-child(2) { animation-delay: calc(var(--T) * .83); }
.case.is-play .case__m:nth-child(3) { animation-delay: calc(var(--T) * .86); }
.case.is-play .ev__replay { animation: show .3s ease calc(var(--T) * .95) both; }

@keyframes ph-zoom { from { transform: scale(1.05); } to { transform: scale(1); } }
@keyframes ph-cut-2 { 0%, 40% { opacity: 0; transform: scale(1.06); } 45% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
@keyframes ph-cut-3 { 0%, 68% { opacity: 0; transform: scale(1.05); } 73% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
@keyframes loc-in-out { 0%, 3% { opacity: 0; transform: scale(.5); } 5.5%, 40% { opacity: 1; transform: none; } 43%, 100% { opacity: 0; transform: none; } }
@keyframes lead-in-out {
  0%, 4.5% { opacity: 1; transform: translateY(-100%) scaleY(0); }
  7%, 40% { opacity: 1; transform: translateY(-100%) scaleY(1); }
  43%, 100% { opacity: 0; transform: translateY(-100%) scaleY(1); }
}
@keyframes card-in { to { opacity: 1; transform: none; } }
@keyframes cap-1 { 0%, 9% { opacity: 0; transform: translateY(4px); } 12%, 40% { opacity: 1; transform: none; } 43%, 100% { opacity: 0; transform: none; } }
@keyframes cap-2 { 0%, 42% { opacity: 0; transform: translateY(4px); } 45%, 68% { opacity: 1; transform: none; } 71%, 100% { opacity: 0; transform: none; } }
@keyframes cap-3 { 0%, 70% { opacity: 0; transform: translateY(4px); } 73%, 100% { opacity: 1; transform: none; } }
@keyframes seg-1 { 0%, 9% { transform: scaleX(0); } 42%, 100% { transform: scaleX(1); } }
@keyframes seg-2 { 0%, 42% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }
@keyframes seg-3 { 0%, 70% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes show { to { opacity: 1; visibility: visible; } }
@keyframes peak { 0%, 14% { transform: scaleY(0); } 17%, 70% { transform: scaleY(1); } 76%, 100% { transform: scaleY(var(--after, .12)); } }
@keyframes mark-x { 0%, 17% { opacity: 0; } 19%, 70% { opacity: 1; } 73%, 100% { opacity: 0; } }
@keyframes fill { to { transform: scaleX(1); } }
@keyframes st-in { to { opacity: 1; transform: translate(var(--tx, 0), 0); } }
@keyframes chip-in { to { opacity: 1; transform: none; } }
@keyframes stage-a { 0%, 41% { opacity: 1; } 44%, 70% { opacity: 0; } 73%, 100% { opacity: 1; } }
@keyframes stage-b { 0%, 42% { opacity: 0; } 45%, 69% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes tick-text { to { color: var(--text); } }
@keyframes tick-dot { to { background: var(--violet); border-color: var(--violet); } }
@keyframes tick-mark { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes m-in { to { opacity: 1; transform: none; } }

/* Screenshot mode and reduced motion: every animation jumps to its end state. */
.snap .case *, .snap .case *::before, .snap .case *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition: none !important; }
.snap .ph__loc::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .case *, .case *::before, .case *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition: none !important; }
  .ph__loc::after { animation: none !important; }
}

/* ---------- 04 · Trust ---------- */
.blk--trust { padding: 72px 0 96px; background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.blk--trust .blk__svg .st { fill: var(--bg-soft); }
.tgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); gap: 18px; }
.tcard {
  padding: 22px 24px 20px; background: #fff; border: 1px solid var(--border-strong); border-radius: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.tcard__k { font-size: 12.5px; font-weight: 600; color: var(--violet-ink); }
.tcard h3 { margin: 2px 0 0; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; font-weight: 600; }
.tcard p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.tcard--iso { grid-row: span 2; align-items: flex-start; border-color: rgba(124, 92, 255, .45); background: linear-gradient(180deg, #F9F8FF 0%, #fff 70%); }
.tcard--iso .shield { width: 120px; height: 136px; margin: 4px 0 6px; }
.tcard--iso .shield path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.tcard--iso .shield .sh-out { stroke: url(#brand-grad); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.45,0,.2,1) .2s; }
.tcard--iso .shield .sh-in { stroke: #2B3242; stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s ease 1.4s; }
.tcard--iso.is-in .shield .sh-out, .tcard--iso.is-in .shield .sh-in { stroke-dashoffset: 0; }
.tcard--iso h3 { font-size: 24px; letter-spacing: -0.02em; }
.tcard__badge {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 12px; border-radius: 999px;
  background: var(--warn-soft); color: var(--warn-ink); font-size: 12.5px; font-weight: 600;
}
.tcard__badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.tcard__list { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13.5px; color: var(--text-muted); }
.tcard__list li { display: flex; gap: 8px; align-items: baseline; }
.tcard__list li::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); transform: translateY(-2px); }
.tcard__ico { width: 34px; height: 34px; border-radius: 10px; background: var(--bg-soft); border: 1px solid var(--border); display: grid; place-items: center; color: var(--violet-ink); margin-bottom: 4px; }
.tcard__ico svg { display: block; }

/* ---------- 05 · FAQ ---------- */
.blk--faq { padding: 72px 0 96px; }
.faqs { max-width: 900px; display: grid; gap: 10px; }
.faq { border: 1px solid var(--border-strong); border-radius: 14px; background: #fff; overflow: hidden; }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 18px 22px;
  font-size: 17px; font-weight: 500; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--bg-soft); }
.faq__n { font-size: 13.5px; font-weight: 600; color: var(--violet-ink); min-width: 24px; font-variant-numeric: tabular-nums; }
.faq__pm { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-strong); display: grid; place-items: center; position: relative; flex: none; }
.faq__pm::before, .faq__pm::after { content: ''; position: absolute; background: var(--text); width: 10px; height: 1.5px; transition: transform .25s ease; }
.faq__pm::after { transform: rotate(90deg); }
.faq[open] .faq__pm::after { transform: rotate(0); }
.faq[open] summary { border-bottom: 1px solid var(--border); }
.faq p { margin: 0; padding: 16px 22px 20px 62px; font-size: 15.5px; line-height: 1.6; color: var(--text-muted); max-width: 46em; }
.faq__more { margin-top: 22px; font-size: 14px; color: var(--text-muted); }
.faq__more a { color: var(--violet-ink); font-weight: 500; }

/* ---------- Footer ---------- */
.blk--dark { background: #0A0B10; color: #F2F4F8; }
.blk--footer { padding: 88px 0 36px; }
.foot__cta { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.foot__cta h2 { margin: 12px 0 0; font-size: clamp(32px, 2.6vw, 50px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 500; }
.foot__cta p { margin: 16px 0 0; max-width: 34em; font-size: 17px; line-height: 1.6; color: #A7AFC0; }
.foot__cta .blk__eyebrow { color: #A78BFF; }
.foot__actions { display: flex; align-items: center; gap: 18px; justify-self: end; }
.foot__mail { font-size: 14px; font-weight: 500; color: #A7AFC0; }
.foot__mail:hover { color: #fff; }
.foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; margin-top: 80px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .1); }
.foot__brand .logo__word { color: #fff; }
.foot__brand p { margin: 12px 0 0; max-width: 24em; font-size: 14px; color: #8B94A8; }
.foot__social a { color: #C7CCD8; }
.foot__social a:hover { color: #fff; }
.foot__col h3, .foot__col h4 { margin: 0 0 12px; font-size: 13px; color: #8B94A8; font-weight: 600; }
.foot__col a { display: block; padding: 4px 0; font-size: 14.5px; color: #C7CCD8; }
.foot__col a:hover { color: #fff; }
.foot__bar { display: flex; justify-content: space-between; margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; color: #6F7A91; }
.foot__bar a { color: #8B94A8; text-decoration: underline; text-underline-offset: 2px; }
.foot__bar a:hover { color: #fff; }

/* ---------- Contact modal ---------- */
.modal { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: auto; height: auto; }
.modal::backdrop { background: rgba(10, 11, 16, .55); backdrop-filter: blur(6px); }
.modal[open] { display: grid; place-items: center; position: fixed; inset: 0; width: 100vw; height: 100vh; margin: 0; }
.modal__card {
  position: relative; width: min(760px, calc(100vw - 48px)); max-height: calc(100vh - 48px); overflow: auto;
  background: #fff; border-radius: 22px; padding: 36px 40px 32px; color: var(--text);
  box-shadow: 0 40px 80px -30px rgba(10, 11, 16, .5);
  transform: translateY(14px); opacity: 0; transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .25s ease;
}
.modal.is-in .modal__card { transform: none; opacity: 1; }
.modal__close { all: unset; cursor: pointer; position: absolute; top: 18px; right: 20px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: var(--text-dim); }
.modal__close:hover { background: var(--bg-soft); color: var(--text); }
.modal__card h2 { margin: 10px 0 0; font-size: clamp(26px, 2vw, 34px); line-height: 1.15; letter-spacing: -0.025em; font-weight: 500; }
.modal__card .modal__lead { margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: var(--text-muted); max-width: 40em; }
.form { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.field { display: grid; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 500; color: var(--text); }
.field input, .field textarea {
  font: inherit; font-size: 15px; color: var(--text); padding: 11px 13px; border-radius: 10px;
  border: 1px solid var(--border-strong); background: #fff; outline: none; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124, 92, 255, .18); }
.field textarea { resize: vertical; min-height: 84px; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-dim); }
.files { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.files__add { all: unset; cursor: pointer; padding: 8px 14px; border-radius: 999px; border: 1px dashed var(--border-strong); font-size: 13px; font-weight: 500; color: var(--violet-ink); }
.files__add:hover { background: var(--bg-soft); }
.files__hint { font-size: 12.5px; color: var(--text-dim); }
.files__item { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 12px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--border); font-size: 12.5px; }
.files__item button { all: unset; cursor: pointer; color: var(--text-dim); font-size: 15px; line-height: 1; }
.files__item button:hover { color: var(--text); }
.form__foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; margin-top: 6px; }
.form__meta { font-size: 13px; color: var(--text-dim); }
.form__meta a { color: var(--violet-ink); }
.form__ok { display: none; margin-top: 28px; padding: 22px 24px; border-radius: 14px; background: var(--ok-soft); color: #14532D; font-size: 16px; font-weight: 500; align-items: center; gap: 12px; }
.form__ok i { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; }
.field__err { font-size: 12.5px; color: #B42318; }
.field.is-bad input, .field.is-bad textarea { border-color: #B42318; }
.form__err { grid-column: 1 / -1; margin: 0; font-size: 13.5px; color: #B42318; }
.form.is-sending button[type="submit"] { opacity: .6; pointer-events: none; }
.modal.is-sent .form { display: none; }
.modal.is-sent .form__ok { display: flex; }

/* Station labels and stop ticks (site-thread.js). */
.blk__svg .st-lbl { fill: #5A3FE0; stroke: none; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; }
.blk__svg .tl--tick { stroke-width: 1.6; }

/* Repo-owned text pages (content/: /learn/, /tools/, /privacy/), on top of the
   exported .pp page styles. */
.lrn-hero { padding-bottom: 24px; }
.lrn-hero + .pp-sec { padding-top: 32px; }
.lrn { max-width: 46em; }
.lrn h2 { margin: 48px 0 14px; font-size: clamp(22px, 2vw, 28px); line-height: 1.25; letter-spacing: -0.01em; }
.lrn h2:first-child { margin-top: 0; }
.lrn h3 { margin: 28px 0 10px; font-size: 18px; }
.lrn p, .lrn li { font-size: 17px; line-height: 1.65; color: var(--text-muted); }
.lrn p { margin: 0 0 16px; }
.lrn ul, .lrn ol { margin: 0 0 16px; padding-left: 22px; }
.lrn li + li { margin-top: 6px; }
.lrn a { color: var(--violet-ink); text-decoration: underline; text-underline-offset: 2px; }
.lrn strong { color: var(--text); }
.lrn-f { margin: 0 0 18px; padding: 14px 18px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--border-strong);
  font: 500 15px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); overflow-x: auto; white-space: pre; }
.lrn-t { width: 100%; margin: 0 0 18px; border-collapse: collapse; font-size: 15px; }
.lrn-t th, .lrn-t td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; color: var(--text-muted); }
.lrn-t th { color: var(--text); font-weight: 600; background: var(--bg-soft); }
.lrn-wrap { overflow-x: auto; }
.lrn-note { padding: 14px 18px; border-left: 3px solid var(--violet); background: var(--bg-soft); border-radius: 0 12px 12px 0; }
.lrn-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.lrn-card { display: grid; gap: 8px; padding: 22px; border-radius: 18px; border: 1px solid var(--border-strong); background: #fff; color: var(--text); text-decoration: none; transition: border-color .2s ease; }
.lrn-card:hover { border-color: var(--violet); }
.lrn-card b { font-size: 17px; line-height: 1.35; }
.lrn-card span { font-size: 14.5px; line-height: 1.5; color: var(--text-muted); }
.lrn-card em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--cyan-ink); text-transform: uppercase; letter-spacing: .04em; }
.calc { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin: 0 0 22px; }
.calc label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text); }
.calc input, .calc select { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-strong); font: inherit; font-weight: 400; color: var(--text); background: #fff; }
.calc small { font-weight: 400; color: var(--text-dim); }
.calc-out td:nth-child(n+2) { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }

/* Header on narrower screens. The exported nav has no breakpoints of its own, so
   below ~1100px its items wrapped ("About / us") and the buttons ran off screen.
   Tighten first, then drop items from least to most needed; every link is also in the footer. */
.nav__link, .nav .btn { white-space: nowrap; }
@media (max-width: 1100px) {
  .nav__inner { padding: 0 24px; gap: 16px; }
  .nav__link { padding: 8px; }
  .nav__right { gap: 10px; }
}
@media (max-width: 920px) { .nav__lang { display: none; } }
@media (max-width: 840px) { .nav__right .btn--ghost { display: none; } }
@media (max-width: 680px) {
  .nav__links { display: none; }
  .nav__inner { padding: 0 16px; justify-content: space-between; }
}
/* Footer had no breakpoints either: on a phone its four columns pushed the page to ~510px wide. */
@media (max-width: 900px) {
  .foot__cta { grid-template-columns: 1fr; gap: 28px; }
  .foot__actions { justify-self: start; flex-wrap: wrap; }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; margin-top: 56px; }
  .foot__brand { grid-column: 1 / -1; }
  .foot__bar { flex-wrap: wrap; gap: 8px 24px; }
}

/* Fallback sized like Hanken Grotesk, so text barely reflows when the web font arrives.
   Without it Linux falls back to wide DejaVu Sans and long text pages shift (CLS 0.12 on /privacy/ in CI). */
@font-face {
  font-family: 'Hanken Grotesk Fallback';
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo'), local('Helvetica');
  size-adjust: 101.5%;
}
:root { --font-sans: 'Hanken Grotesk', 'Hanken Grotesk Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }

/* Industry tiles on phones: the build adds --photo-sm, a 720 px copy of the photo. */
@media (max-width: 760px) {
  a.ind-tile::before { background-image: var(--photo-sm, var(--photo)); }
}

/* /cine/platform.css */
/* Block 2 · platform: the selected product on the left (sticky, the wider column),
   every product as an equal tile in one block on the right, grouped into software, hardware and
   services. Uses the tokens of hero-story.css. */
.blk--platform .blk__head { min-height: 0; }
.plat { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; margin-top: 56px; }

/* Group mark + name, shared with the product pages */
.pzone__k { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); }
.pzone__d { font-size: 13.5px; color: var(--text-dim); }
.pzone__ic { width: 11px; height: 11px; border-radius: 3px; align-self: center; flex: none; }
.pzone__ic--sw { background: linear-gradient(135deg, var(--cyan), var(--violet)); }
.pzone__ic--hw { background: var(--violet); border-radius: 50%; }
.pzone__ic--sv { background: #fff; border: 2px solid var(--violet); border-radius: 50%; }

/* Left: the selected product */
.pdet {
  position: sticky; top: calc(var(--nav-h) + 24px); overflow: hidden; border-radius: 22px; background: #fff;
  border: 1px solid var(--border-strong); box-shadow: 0 30px 60px -48px rgba(10, 11, 16, .35);
}
.pdet__icon { padding: 34px 40px 0; }
.pdet__icon .pi { width: 64px; height: 64px; }
.pdet__icon .pi [class*="an-"] { animation-play-state: running; }
.pdet__body { display: grid; gap: 12px; padding: 22px 40px 36px; }
.pdet__icon, .pdet__body > * { transition: opacity .08s ease, transform .08s ease; }
.pdet.is-out .pdet__icon, .pdet.is-out .pdet__body > * { opacity: 0; transform: translateY(6px); }
.pdet__tag { font-size: 13px; font-weight: 600; color: var(--violet-ink); }
.pdet__title { margin: 0; font-size: clamp(28px, 2.4vw, 40px); line-height: 1.12; letter-spacing: -0.025em; font-weight: 600; }
.pdet__lead { margin: 0; max-width: 34em; font-size: 17px; line-height: 1.55; color: var(--text-muted); }
.pdet__pts { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.pdet__pts li { position: relative; padding-left: 18px; font-size: 15.5px; line-height: 1.45; color: var(--text); }
.pdet__pts li::before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }
.pdet__alt { margin: 4px 0 0; padding-top: 12px; border-top: 1px dashed var(--border-strong); font-size: 13px; color: var(--text-dim); }
.pdet__alt b { font-weight: 600; color: var(--cyan-ink); margin-right: 6px; }
.pdet__cta { display: flex; gap: 10px; margin-top: 8px; }

/* Right: one block with every product */
.pbox { position: relative; display: grid; gap: 0; padding: 8px 24px; border-radius: 22px; background: var(--bg-soft); border: 1px solid var(--border-strong); }
.pgrp { padding: 20px 0 22px; }
.pgrp + .pgrp { border-top: 1px solid var(--border-strong); }
.pgrp__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.ptiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }

.ptile {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 3px;
  align-items: center; padding: 11px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--border-strong);
  cursor: pointer; transition: border-color .2s ease, box-shadow .25s ease, transform .25s cubic-bezier(.16,1,.3,1), background .2s ease;
}
.ptile .pi { grid-row: span 2; width: 36px; height: 36px; }
.ptile__t { font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--text); }
.ptile__d { font-size: 12.5px; line-height: 1.4; color: var(--text-dim); }
.ptile:hover { transform: translateY(-2px); border-color: rgba(10, 11, 16, .3); box-shadow: 0 16px 30px -22px rgba(10, 11, 16, .35); }
.ptile:hover .pi [class*="an-"] { animation-duration: 1.6s; }
.ptile[aria-pressed="true"] { border-color: var(--violet); background: #fff; box-shadow: 0 0 0 3px rgba(124, 92, 255, .12); }
.ptile[aria-pressed="true"] .ptile__t { color: var(--violet-ink); }
.ptile[aria-pressed="true"] .pi [class*="an-"] { animation-play-state: running; }
.ptile:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

.blk--platform .pfoot { height: 130px; }

@media (max-width: 1100px) {
  .plat { grid-template-columns: 1fr; }
  .pdet { position: static; }
}
@media (max-width: 640px) {
  .ptiles { grid-template-columns: 1fr; }
  .pbox { padding: 4px 14px; }
}


/* Tour: the thread inside the block. A line down the left edge with a node per
   tile; the pulse (--py) moves top to bottom, the line above it fills in, and a
   short tick joins the pulse to its tile. */
.pbox { padding-left: 46px; }
.prail { position: absolute; left: 22px; top: 0; bottom: 0; width: 2px; pointer-events: none; --py: 0px; }
.prail__line, .prail__fill { position: absolute; left: 0; top: 0; width: 2px; }
.prail__line { bottom: 0; background: rgba(124, 92, 255, .22); }
.prail__fill { height: var(--py); background: linear-gradient(180deg, var(--violet) 0%, var(--cyan) 100%); transition: height var(--trip, .45s) cubic-bezier(.65, 0, .35, 1); }
.prail__node { position: absolute; left: 1px; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff;
  border: 1.5px solid rgba(124, 92, 255, .4); transition: background .3s ease, border-color .3s ease, transform .3s ease; }
.prail__node.is-past { background: var(--violet); border-color: var(--violet); transform: scale(.75); }
.prail__node.is-on { opacity: 0; }
.prail__pk { position: absolute; left: 1px; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0 18%, var(--cyan) 30%, var(--violet) 75%);
  box-shadow: 0 0 0 4px rgba(124, 92, 255, .16), 0 0 18px 2px rgba(0, 212, 255, .55);
  transform: translateY(var(--py)); transition: transform var(--trip, .45s) cubic-bezier(.65, 0, .35, 1); }
/* while it waits at a tile, a ring breathes out of it */
.prail__pk::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--cyan); opacity: 0; }
.is-touring:not(.is-held) .prail__pk::after { animation: prail-ring 1.8s ease-out infinite; }
@keyframes prail-ring { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
.prail.is-instant .prail__pk, .prail.is-instant .prail__fill { transition: none; }

/* tick from the line to the selected tile */
.ptile::before { content: ''; position: absolute; left: -24px; top: 50%; width: 24px; height: 2px; margin-top: -1px;
  background: linear-gradient(90deg, var(--cyan), var(--violet)); transform: scaleX(0); transform-origin: left; transition: transform .18s ease; }
.is-touring .ptile::before { transition-delay: .28s; }
.ptile[aria-pressed="true"]::before { transform: scaleX(1); }
.is-touring .ptile[aria-pressed="true"] { transition-delay: .25s; }

@media (prefers-reduced-motion: reduce) {
  .prail__pk, .prail__fill, .ptile::before { transition: none; }
}

/* Prism AI, the one AI product: same size as the other tiles,
   but the only one dressed as AI. Slowly drifting spectrum glow, a gradient edge, a
   gradient name and a light sweep every few seconds. Everything else on the page stays plain. */
@property --pa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.ptile--core, .ptile--core:hover, .ptile--core[aria-pressed="true"] {
  isolation: isolate; border: 1.5px solid transparent;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(43, 196, 230, .16), transparent 55%) padding-box,
    radial-gradient(120% 160% at 100% 100%, rgba(242, 162, 58, .14), transparent 55%) padding-box,
    linear-gradient(#FAF9FF, #FAF9FF) padding-box,
    conic-gradient(from var(--pa), #2BC4E6, #4C6FF0, #8E6CF5, #F2A23A, #2BC4E6) border-box;
  animation: pcore-spin 8s linear infinite;
}
.ptile--core { box-shadow: 0 14px 30px -22px rgba(76, 111, 240, .55); }
.ptile--core[aria-pressed="true"] { box-shadow: 0 0 0 3px rgba(124, 92, 255, .14), 0 18px 34px -22px rgba(76, 111, 240, .65); }
@keyframes pcore-spin { to { --pa: 360deg; } }
.ptile--core .ptile__t, .ptile--core[aria-pressed="true"] .ptile__t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ptile--core .ptile__nm { background: linear-gradient(90deg, #0089AD, #5A3FE0 55%, #B4620E); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ptile--core .pi { position: relative; }
.ptile--core .pi::after { content: ''; position: absolute; inset: -8px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(43, 196, 230, .25), transparent); animation: pcore-pulse 3.2s ease-in-out infinite; }
@keyframes pcore-pulse { 50% { transform: scale(1.25); opacity: .55; } }
/* glow and sweep live in their own clipped layer under the text, so the tile itself is not
   clipped and keeps its tick to the rail */
.ptile__shine { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit; }
.ptile__shine::before { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent); animation: pcore-shine 6s ease-in-out infinite; }
/* violet glow drifting behind the content */
.ptile__shine::after { content: ''; position: absolute; width: 60%; height: 220%; top: -60%; left: 10%;
  background: radial-gradient(closest-side, rgba(142, 108, 245, .22), transparent); animation: pcore-drift 9s ease-in-out infinite alternate; }
@keyframes pcore-drift { from { transform: translateX(-30%); } to { transform: translateX(90%); } }
@keyframes pcore-shine { 0%, 70% { transform: translateX(0); } 100% { transform: translateX(400%); } }
@media (prefers-reduced-motion: reduce) {
  .ptile--core, .ptile--core .pi::after, .ptile__shine::before, .ptile__shine::after { animation: none; }
}
.prail__node.is-core { border-radius: 2px; transform: rotate(45deg); }
.prail__node.is-core.is-past { transform: rotate(45deg) scale(.8); }

/* /cine/product.css */
/* Product pages (/products/<slug>/): hero with the product's own footage,
   then alternating plain and tinted sections. Uses the tokens of hero-story.css. */
.ppage { background: var(--bg); }
.pp__inner { max-width: var(--container); margin: 0 auto; padding: 0 48px; }

/* Hero */
.pp-hero { padding: calc(var(--nav-h) + 56px) 0 88px; background: #fff; }
.pp-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
.pp-crumbs { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; font-size: 13.5px; color: var(--text-dim); }
.pp-crumbs a { color: var(--text-muted); }
.pp-crumbs a:hover { color: var(--violet-ink); }
.pp-crumbs i { width: 4px; height: 4px; border-radius: 50%; background: var(--border-strong); }
.pp-crumbs span { color: var(--text); font-weight: 600; }
.pp-hero__title { margin: 12px 0 0; font-size: clamp(40px, 3.4vw, 62px); line-height: 1.06; letter-spacing: -0.035em; font-weight: 500; }
.pp-hero__lead { margin: 22px 0 0; max-width: 32em; font-size: clamp(16px, 1.2vw, 20px); line-height: 1.6; color: var(--text-muted); }
.pp-hero__cta { display: flex; gap: 14px; margin-top: 30px; }
.pp-hero__media { position: relative; }
.pp-hero__media video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 22px; background: var(--bg-soft);
  box-shadow: 0 40px 80px -48px rgba(10, 11, 16, .3); }
.pp-hero__media .pp-answer { position: absolute; left: -40px; bottom: -48px; width: min(360px, 70%); }

/* The Prism answer card (static copy of the film's overlay) */
.pp-answer { display: grid; gap: 1px; padding: 16px 18px 14px; border-radius: 18px; background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 30px 60px -30px rgba(20, 30, 60, .5), 0 0 0 1px rgba(10, 11, 16, .05); }
.pp-answer__head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; font-size: 13px; color: var(--text-dim); }
.pp-answer__head b { font-size: 14px; color: var(--text); }
.pp-answer__head span:last-child { margin-left: auto; }
.pp-answer__logo { width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(135deg, var(--cyan), var(--violet)); }
.pp-answer__row { display: grid; gap: 3px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-dim); }
.pp-answer__row b { font-size: 14px; font-weight: 600; color: var(--text); }
.pp-answer__row em { margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 12px; color: var(--warn-ink); background: var(--warn-soft); }
.pp-answer__row ol { margin: 2px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; color: var(--text); }
.pp-answer__ok { display: inline-flex; align-items: center; gap: 6px; padding-top: 10px; font-size: 13px; font-weight: 600; color: var(--ok); }
.pp-answer__foot { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-dim); }
.pp-answer__foot .pp-answer__ok { padding: 0; }
.pp-answer--full { padding: 22px 24px 18px; }
.ic-check { width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--ic-check) center / contain no-repeat; mask: var(--ic-check) center / contain no-repeat; }

/* Sections */
.pp-sec { padding: 104px 0; }
.pp-sec--soft { background: var(--bg-soft); }
.pp-sec__head { max-width: 760px; margin-bottom: 44px; }
.pp-sec__title { margin: 12px 0 0; font-size: clamp(30px, 2.4vw, 46px); line-height: 1.12; letter-spacing: -0.03em; font-weight: 500; }
.pp-sec__lead { margin: 16px 0 0; max-width: 36em; font-size: 16.5px; line-height: 1.6; color: var(--text-muted); }

.pp-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pp-pt { padding: 26px 26px 24px; border-radius: 18px; border: 1px solid var(--border-strong); background: #fff; }
.pp-pt__n { font-size: 13px; font-weight: 600; color: var(--violet-ink); font-variant-numeric: tabular-nums; }
.pp-pt h3, .pp-step h3 { margin: 10px 0 0; font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; font-weight: 600; }
.pp-pt p, .pp-step p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--text-muted); }

.pp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pp-step { overflow: hidden; border-radius: 18px; background: #fff; border: 1px solid var(--border-strong); }
.pp-step img { display: block; width: 100%; height: 260px; object-fit: cover; }
.pp-step > div { padding: 22px 24px 24px; }
.pp-step__n { font-size: 13px; font-weight: 600; color: var(--cyan-ink); }

.pp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.pp-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 22px; padding: 0; }
.pp-chips li { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: #fff; font-size: 14px; font-weight: 500; }

.pp-where { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pp-where figure { margin: 0; overflow: hidden; border-radius: 18px; background: #fff; border: 1px solid var(--border-strong); }
.pp-where img { display: block; width: 100%; height: 260px; object-fit: cover; }
.pp-where figcaption { display: grid; gap: 6px; padding: 20px 22px 22px; font-size: 14.5px; color: var(--text-muted); }
.pp-where figcaption b { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); }
.pp-where .fbadge { justify-self: start; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--cyan-ink); background: rgba(0, 212, 255, .12); border: 1px solid rgba(0, 137, 173, .25); }
.pp-where .fbadge.is-violet { color: var(--violet-ink); background: rgba(124, 92, 255, .1); border-color: rgba(124, 92, 255, .28); }

.pp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pp-with { display: grid; align-content: start; gap: 2px; padding: 28px 28px 22px; border-radius: 18px; border: 1px solid var(--border-strong); background: #fff; }
.pp-with--yours { background: var(--bg-soft); }
.pp-with p { margin: 6px 0 14px; font-size: 15px; color: var(--text-muted); }
.pp-with a, .pp-with > span:not(.pzone__k) { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--border); font-size: 15.5px; font-weight: 500; }
.pp-with a { color: var(--violet-ink); }
.pp-with a .ic { transition: transform .25s ease; }
.pp-with a:hover .ic { transform: translateX(3px); }

.pp-cta { padding: 110px 0 120px; text-align: center; background: linear-gradient(180deg, #fff 0%, #F3F1FF 100%); }
.pp-cta h2 { margin: 0; font-size: clamp(32px, 2.8vw, 52px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 500; }
.pp-cta p { margin: 16px auto 30px; max-width: 32em; font-size: 17px; color: var(--text-muted); }

@media (max-width: 1000px) {
  .pp__inner { padding: 0 16px; }
  .pp-hero__grid, .pp-split, .pp-three, .pp-steps, .pp-where, .pp-two { grid-template-columns: 1fr; }
  .pp-hero__media .pp-answer { position: static; width: auto; margin-top: 16px; }
}

/* ---------- Product mock-ups (pages other than Prism): drawn in HTML, never photos
   of a screen. ---------- */
.pp-hero__media--mock { display: grid; justify-items: center; }
.pp-mock { position: relative; width: 100%; max-width: 620px; padding: 20px 22px 22px; border-radius: 22px; background: #fff;
  border: 1px solid var(--border-strong); box-shadow: 0 40px 80px -48px rgba(10, 11, 16, .3), 0 0 0 1px rgba(10, 11, 16, .03); }
.pp-mock__head { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-dim); }
.pp-mock__head b { font-size: 14.5px; color: var(--text); }
.pp-mock__head em { margin-left: auto; font-style: normal; }
.pp-mock__logo { width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(135deg, var(--cyan), var(--violet)); }
.pp-mock svg { display: block; width: 100%; height: auto; overflow: visible; }
.pp-mock .ax { stroke: var(--border-strong); stroke-width: 1; }
.pp-mock .ln { fill: none; stroke: var(--violet); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.pp-mock .ln--c { stroke: var(--cyan-ink); }
.pp-mock .ar { fill: url(#pp-ar); }
.pp-mock .lim-w { stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 6 5; }
.pp-mock .lim-a { stroke: #DC2626; stroke-width: 1.5; stroke-dasharray: 6 5; }
.pp-mock .cur { stroke: var(--violet); stroke-width: 1.2; stroke-dasharray: 3 4; }
.pp-mock .tx { font: 600 11px var(--font-sans); fill: var(--text-dim); }
.pp-mock .tx--w { fill: var(--warn-ink); }
.pp-mock .tx--a { fill: #B91C1C; }
.pp-mock .tx--v { fill: var(--violet-ink); }
.pp-mock .dot-a { fill: #DC2626; }
.pp-mock .dot-w { fill: var(--warn); stroke: #fff; stroke-width: 2; }
.pp-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 12.5px; color: var(--text-muted); }
.pp-legend i { display: inline-block; width: 16px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 2px dashed var(--warn); }
.pp-legend i.is-a { border-color: #DC2626; }
.pp-legend i.is-v { border-top-style: solid; border-color: var(--violet); }

/* rows of key/value, used by the work order, the review and the event */
.pp-rows { display: grid; gap: 1px; border-radius: 12px; overflow: hidden; background: var(--border); }
.pp-rows > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; background: #fff; font-size: 14px; }
.pp-rows span { color: var(--text-dim); }
.pp-rows b { font-weight: 600; text-align: right; }
.pp-big { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.pp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: var(--violet-ink); background: rgba(124, 92, 255, .1); border: 1px solid rgba(124, 92, 255, .25); }
.pp-chip--ok { color: var(--ok); background: var(--ok-soft); border-color: rgba(22, 163, 74, .3); }
.pp-chip--w { color: var(--warn-ink); background: var(--warn-soft); border-color: rgba(224, 138, 0, .3); }
.pp-chip--a { color: #B91C1C; background: rgba(220, 38, 38, .1); border-color: rgba(220, 38, 38, .3); }
.pp-steps-line { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.pp-steps-line span { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); background: var(--bg-soft); }
.pp-steps-line span.is-on { color: #fff; background: var(--violet); }
.pp-note { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--bg-soft); font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.pp-note b { color: var(--text); }

/* code: a webhook as it arrives */
.pp-code { margin: 0; padding: 16px 18px; border-radius: 14px; background: #0E1117; color: #D7DCE6; overflow-x: auto;
  font: 13px/1.6 var(--font-mono); white-space: pre; }
.pp-code .k { color: #9C86FF; } .pp-code .s { color: #5FD4F0; } .pp-code .c { color: #7B8497; }

/* a device photo with a pin on the part the page is about */
.pp-photo { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; overflow: hidden; border-radius: 26px;
  background: var(--bg-soft); box-shadow: 0 40px 80px -48px rgba(10, 11, 16, .3); }
.pp-photo img { width: 100%; height: 100%; object-fit: cover; }
.pp-pin { position: absolute; left: var(--x); top: var(--y); }
.pp-pin::before, .pp-pin::after { content: ''; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; }
.pp-pin::before { background: var(--cyan); box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 0 18px var(--cyan); }
.pp-pin::after { border: 2px solid var(--cyan); animation: pp-pin 2s ease-out infinite; }
.pp-pin span { position: absolute; left: 18px; top: -16px; white-space: nowrap; padding: 6px 12px; border-radius: 999px; background: #fff;
  font-size: 13.5px; font-weight: 600; box-shadow: 0 10px 24px -12px rgba(20, 30, 60, .45); }
@keyframes pp-pin { from { transform: scale(.8); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }

/* phone with the app's result table */
.pp-phone { width: 300px; padding: 14px; border-radius: 40px; background: #0E1117; box-shadow: 0 40px 80px -40px rgba(20, 20, 60, .6); }
.pp-phone__scr { padding: 22px 16px 18px; border-radius: 28px; background: #fff; }
.pp-phone__top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--text-dim); }
.pp-phone__top b { font-size: 16px; color: var(--text); }
.pp-tab { width: 100%; margin-top: 14px; border-collapse: separate; border-spacing: 3px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pp-tab th { font-weight: 600; color: var(--text-dim); text-align: center; padding: 4px 0; }
.pp-tab th:first-child { text-align: left; }
.pp-tab td { text-align: center; padding: 7px 0; border-radius: 6px; background: var(--bg-soft); font-weight: 600; }
.pp-tab td:first-child { text-align: left; padding-left: 6px; background: none; color: var(--text-muted); }
.pp-tab .is-w { background: var(--warn-soft); color: var(--warn-ink); }
.pp-tab .is-a { background: rgba(220, 38, 38, .12); color: #B91C1C; }
.pp-phone__sync { margin-top: 14px; font-size: 12.5px; color: var(--text-dim); }
.pp-phone__bar { height: 6px; margin-top: 6px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; }
.pp-phone__bar i { display: block; width: 64%; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--violet)); }

/* a plain list of facts in a section */
.pp-facts { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.pp-facts li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.5; }
.pp-facts li::before { content: ''; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; background: var(--violet);
  -webkit-mask: var(--ic-check) center / contain no-repeat; mask: var(--ic-check) center / contain no-repeat; }

/* /cine/trust.css */
/* Block 4 · compliance list in the shield card. A row reads "in progress" until its
   li gets data-status="done": then the chip turns green, says its data-done text
   and links to the document. */
.tcomp { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; width: 100%; }
.tcomp li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--border-strong); }
.tcomp b { font-size: 15px; font-weight: 600; }
.tcomp span { grid-column: 1; font-size: 12.5px; color: var(--text-dim); }
.tcomp__st { grid-row: 1 / span 2; grid-column: 2; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--warn-ink); background: var(--warn-soft); pointer-events: none; }
.tcomp__st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.tcomp [data-status="done"] .tcomp__st { color: var(--ok); background: var(--ok-soft); pointer-events: auto; font-size: 0; }
.tcomp [data-status="done"] .tcomp__st::before { background: var(--ok); }
.tcomp [data-status="done"] .tcomp__st::after { content: attr(data-done) ' ↗'; font-size: 12px; }

/* /cine/industry.css */
/* Industry pages (/industries/): product-page sections with a title on the
   left and the copy or a list on the right, plus the hub's tiles. */
.ind-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.ind-split .pp-sec__title { margin-top: 0; }
.ind-p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--text-muted); }
.ind-p + .ind-p { margin-top: 18px; }
.ind-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.ind-list--one { grid-template-columns: 1fr; }
.ind-list li { position: relative; padding: 13px 0 13px 20px; border-top: 1px solid var(--border); font-size: 15.5px; line-height: 1.5; }
.ind-list li::before { content: ''; position: absolute; left: 0; top: 21px; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }
.pp-hero__media .ind-card { position: static; width: auto; max-width: 460px; margin-left: auto; }
.ind-card .pp-answer__row b { font-weight: 500; line-height: 1.5; }
.ind-others { display: flex; flex-wrap: wrap; gap: 8px; }
.ind-others a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: #fff;
  border: 1px solid var(--border-strong); font-size: 14.5px; font-weight: 500; color: var(--text); transition: border-color .2s ease; }
.ind-others a:hover { border-color: rgba(10, 11, 16, .3); }
.ind-others .ic { color: var(--violet-ink); }
.ind-hub { padding-bottom: 72px; }
.ind-hub .pp-hero__lead { max-width: 40em; }
.ind-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ind-tile { display: grid; align-content: start; gap: 4px; padding: 26px 26px 24px; border-radius: 18px; background: #fff;
  border: 1px solid var(--border-strong); color: var(--text); transition: border-color .2s ease, transform .25s cubic-bezier(.16, 1, .3, 1); }
.ind-tile:hover { border-color: rgba(10, 11, 16, .3); transform: translateY(-2px); }
.ind-tile b { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.ind-tile b .ic { color: var(--violet-ink); }
.ind-tile span { font-size: 14.5px; line-height: 1.5; color: var(--text-muted); }
.ind-tile .ind-tile__k { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--text-dim); }
@media (max-width: 1000px) {
  .ind-split, .ind-list, .ind-tiles { grid-template-columns: 1fr; gap: 24px; }
  .ind-list { gap: 0; }
  .ind-card { margin: 0; }
}

/* The industry's photo behind the hero and the hub tiles, faded to white so the
   copy stays on a light page; it shows most on the right. */
.ind-hero, .ind-tile { position: relative; isolation: isolate; overflow: hidden; }
.ind-hero::before, .ind-tile::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--photo) center / cover no-repeat; opacity: .35; }
.ind-hero::after { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .92) 38%, rgba(255, 255, 255, .55) 70%, rgba(255, 255, 255, .35) 100%),
              linear-gradient(180deg, rgba(255, 255, 255, 0) 70%, #fff 100%); }
.ind-tile::before { opacity: .45; transition: opacity .3s ease; }
.ind-tile:hover::before { opacity: .6; }
.ind-tile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .88) 45%, #fff 75%); }

/* About us (/about/) */
.ab-hero__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 22px; background: var(--bg-soft);
  border: 1px solid var(--border-strong); box-shadow: 0 30px 60px -40px rgba(10, 11, 16, .4); }
.ab-why { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
.ab-why .pp-sec__title { margin: 0 0 24px; }

/* before / after: scattered sources against one place */
.ab-gap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; align-items: center;
  padding: 28px; border-radius: 22px; background: var(--bg-soft); border: 1px solid var(--border-strong); }
.ab-gap__col { display: grid; gap: 10px; }
.ab-gap__k { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.ab-gap__src { display: grid; gap: 2px; padding: 11px 14px; border-radius: 12px; background: #fff; border: 1px dashed var(--border-strong); }
.ab-gap__src:nth-child(odd) { margin-right: 18px; }
.ab-gap__src:nth-child(even) { margin-left: 18px; }
.ab-gap__src b { font-size: 14.5px; font-weight: 600; }
.ab-gap__src span { font-size: 13px; color: var(--text-dim); }
.ab-gap__src.is-off b { color: var(--text-dim); text-decoration: line-through; text-decoration-color: rgba(10, 11, 16, .25); }
.ab-gap__arrow { color: var(--violet-ink); }
.ab-gap__one { display: grid; gap: 8px; padding: 18px; border-radius: 14px; background: #fff; border: 1.5px solid var(--violet);
  box-shadow: 0 0 0 4px rgba(124, 92, 255, .1); }
.ab-gap__one > b { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.ab-gap__one > span { font-size: 13.5px; line-height: 1.45; color: var(--text-muted); }
.ab-gap__out { display: grid; gap: 6px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--border); }
.ab-gap__out span { position: relative; padding-left: 16px; font-size: 14px; font-weight: 500; }
.ab-gap__out span::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); }

/* the product set, one row of links */
.ab-parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ab-parts a { position: relative; display: grid; align-content: start; gap: 10px; padding: 22px 22px 48px; border-radius: 18px; background: #fff;
  border: 1px solid var(--border-strong); color: var(--text); transition: border-color .2s ease, transform .25s cubic-bezier(.16, 1, .3, 1); }
.ab-parts a:hover { border-color: rgba(10, 11, 16, .3); transform: translateY(-2px); }
.ab-parts p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-muted); }
.ab-parts a > .ic { position: absolute; left: 22px; bottom: 20px; color: var(--violet-ink); }

/* principles as an editorial list */
.ab-prin { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; }
.ab-prin .pp-sec__title { margin: 0; position: sticky; top: calc(var(--nav-h, 72px) + 32px); }
.ab-prin ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.ab-prin li { padding: 26px 0 30px; border-top: 1px solid var(--border-strong); }
.ab-prin li > span { font-size: 13px; font-weight: 600; color: var(--violet-ink); font-variant-numeric: tabular-nums; }
.ab-prin h3 { margin: 12px 0 0; font-size: 22px; line-height: 1.25; letter-spacing: -0.015em; font-weight: 600; }
.ab-prin p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--text-muted); }

@media (max-width: 1100px) {
  .ab-why, .ab-prin { grid-template-columns: 1fr; gap: 32px; }
  .ab-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-prin .pp-sec__title { position: static; }
}
@media (max-width: 640px) {
  .ab-parts, .ab-prin ol { grid-template-columns: 1fr; }
  .ab-gap { grid-template-columns: 1fr; padding: 18px; }
  .ab-gap__arrow { transform: rotate(90deg); justify-self: center; }
  .ab-gap__src:nth-child(n) { margin: 0; }
}
.ab-hero .pp-hero__copy { max-width: 760px; }
.ab-where figcaption { padding-top: 24px; }

/* Home page: the sixth tile opens the industries hub */
.ind-tile--all { align-content: space-between; background: linear-gradient(160deg, #fff 0%, rgba(124, 92, 255, .08) 100%); border-color: rgba(124, 92, 255, .35); }
.ind-tile--all:hover { border-color: var(--violet); }
.ind-tile--all > span:first-of-type { font-size: 15px; line-height: 1.6; }
.ind-tile .ind-tile__more { margin-top: 18px; font-size: 14.5px; font-weight: 600; color: var(--violet-ink); }
.blk--ind .blk__body { padding-bottom: 112px; }

/* /cine/plain.css */
/* Loaded last on every page: flat buttons, one-colour headlines, neutral shadows,
   and the security block as a compliance list plus a plain table. */
.accent { background: none; color: inherit; -webkit-text-fill-color: currentColor; }
.intro__slot .accent { color: var(--violet-ink); }

.btn--primary, .nav .btn--primary { background: var(--violet-ink); border-color: var(--violet-ink); box-shadow: none; filter: none; }
.btn--primary:hover, .nav .btn--primary:hover { background: #4A31C9; border-color: #4A31C9; box-shadow: none; filter: none; transform: none; }
.blk--dark .btn--primary { background: #fff; border-color: #fff; color: var(--text); }
.blk--dark .btn--primary:hover { background: #E8E9EE; border-color: #E8E9EE; }

.pfeat { border-color: var(--border-strong); box-shadow: none; }
.pfeat:hover { border-color: rgba(10, 11, 16, .3); box-shadow: 0 20px 40px -30px rgba(10, 11, 16, .35); }
.pcard:hover, .where__chips a:hover { border-color: rgba(10, 11, 16, .3); }
.pcard--core { border-color: var(--border-strong); background: #fff; }

.case__m b span { color: inherit; }

/* Security: four facts in two columns, then compliance as one strip */
.tsec { display: grid; gap: 56px; }
.tfacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; }
.tfact { padding-top: 20px; }   /* the rule over each row is drawn by the page thread */
.tfact h3 { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.tfact p { margin: 10px 0 0; max-width: 34em; font-size: 15.5px; line-height: 1.6; color: var(--text-muted); }
.tstrip { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 32px; align-items: center; padding: 26px 30px; border-radius: 16px; background: #fff; border: 1px solid var(--border-strong); }
.tstrip__k b { display: block; font-size: 17px; font-weight: 600; }
.tstrip__k span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--text-dim); }
.tstrip .tcomp { margin: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.tstrip .tcomp li { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 2px 24px; border: 0; border-left: 1px solid var(--border-strong); border-radius: 0; background: none; }
.tstrip .tcomp span { font-size: 13px; }
.tstrip .tcomp__st { margin-top: 8px; padding: 0; background: none; font-size: 13px; }
.tstrip .tcomp [data-status="done"] .tcomp__st { background: none; }
@media (max-width: 1000px) {
  .tfacts, .tstrip, .tstrip .tcomp { grid-template-columns: 1fr; }
  .tstrip .tcomp li { padding: 14px 0; border-left: 0; border-top: 1px solid var(--border); }
}

/* No small labels above headlines: section eyebrows, the film's chapter label, product tags */
.blk__eyebrow, .live .step, #step, .pcard__tag, .pdet__tag { display: none; }

/* Case callout with two long status chips: wider so both fit on one row */
.ph__callout--wide { width: 300px; }
.ph__callout--wide .ph__st span { white-space: nowrap; }

/* /cine/cookies.css */
/* Cookie notice: a small card in the bottom-right corner. "Accept all" and
   "Necessary only" are the same size; Settings opens the categories in place and
   "Save my choice" takes the place of "Necessary only". */
.ck { position: fixed; right: 24px; bottom: 24px; z-index: 60; width: min(480px, calc(100vw - 32px)); padding: 22px 22px 18px;
  border-radius: 18px; background: #fff; border: 1px solid var(--border-strong); box-shadow: 0 30px 60px -30px rgba(10, 11, 16, .35);
  font-size: 14.5px; line-height: 1.55; color: var(--text-muted); transition: opacity .25s ease, transform .35s cubic-bezier(.16, 1, .3, 1); }
.ck[hidden] { display: block; opacity: 0; transform: translateY(16px); pointer-events: none; visibility: hidden; }
.ck h2 { margin: 0 0 6px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.ck p { margin: 0; }
.ck a { color: var(--violet-ink); }
.ck__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.ck__btns .btn { justify-content: center; }
.ck__more { margin-top: 12px; padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); cursor: pointer; }
.ck__more:hover { color: var(--violet-ink); }
.ck__cats { display: none; margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.ck.is-open .ck__cats { display: block; }
.ck.is-open .ck__more { display: none; }
.ck__cats li { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.ck__cats b { font-size: 14.5px; font-weight: 600; color: var(--text); }
.ck__cats span { grid-column: 1; font-size: 13px; color: var(--text-dim); }
/* switch */
.ck__sw { grid-row: 1 / span 2; grid-column: 2; position: relative; width: 38px; height: 22px; margin: 0; appearance: none; -webkit-appearance: none;
  border-radius: 999px; background: rgba(10, 11, 16, .16); cursor: pointer; transition: background .2s ease; }
.ck__sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(10, 11, 16, .25); transition: transform .2s ease; }
.ck__sw:checked { background: var(--violet-ink); }
.ck__sw:checked::after { transform: translateX(16px); }
.ck__sw:disabled { opacity: .45; cursor: default; }
.ck__sw:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.ck__btns .ck__save, .ck.is-open [data-ck="necessary"] { display: none; }
.ck.is-open .ck__btns .ck__save { display: inline-flex; }
@media (max-width: 640px) { .ck { right: 16px; bottom: 16px; } }