/* 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)); }
}