/* Jalten homepage (Phase 7): the hero's actions, its illustration of what happens to a message, and the provider belt.
   Loaded on the homepage only, after assets/jalten/home.css (the prototype's, unchanged) and assets/site/site.css.
   The illustration never changes size: every part of every step is always in the layout, and only opacity or a
   transform changes, so nothing on the page shifts (assets/site/home.js runs it). The belt moves by a transform
   alone. The providers and models in both are rendered from assets/site/provider-release.js when the site is built. */

/* ---------- The hero (owner, 16 Oct 2026, refined the same day) ----------
   "Leading AI models. One secure place to work." (the prototype's two-tone heading), the description, Try it now and
   For teams (section 03), one quiet line, then the product tour and Download, quieter still. */
.hero-ctas { gap: 12px; }
.hero-try .icon { font-size: 17px; transition: transform 0.18s var(--ease); }
.hero-try:hover .icon { transform: translateX(2px); }
.home .hero-teams { min-width: 132px; background: var(--surface); border-color: var(--line-strong); color: var(--t1); box-shadow: 0 1px 2px rgba(16, 27, 50, 0.05); transition: background 0.18s, border-color 0.18s, transform 0.18s; }
.home .hero-teams:hover { background: var(--surface-2); border-color: #b7c0c9; transform: translateY(-1px); }
/* Without the browser app (a production build with its switch off) For teams is the one action, so it leads. */
.home .hero-ctas > .hero-teams:first-child { background: var(--blue); border-color: var(--blue); color: #fff; }
.hero-note { max-width: 560px; margin: 16px auto 0; font-size: 14px; line-height: 1.5; color: var(--t2); text-wrap: balance; }
.hero-more { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 24px; margin: 14px auto 0; }
.home .hero-more .hero-tour, .home .hero-more .hero-dl { font-size: 14px; font-weight: 500; color: var(--t2); }
.home .hero-more .hero-tour:hover, .home .hero-more .hero-dl:hover { color: var(--blue-text); }
.home .hero-more .hero-tour > span { width: 22px; height: 22px; }
.hero-tour { display: inline-flex; align-items: center; gap: 9px; min-height: 32px; padding: 0 2px; color: var(--t1); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.hero-tour > span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px var(--sky-line), 0 1px 2px rgba(16, 27, 50, 0.06); color: var(--blue-bright); transition: transform 0.18s var(--ease); }
.hero-tour .icon { font-size: 11px; transform: translateX(1px); }
.hero-tour:hover { color: var(--blue-text); }
.hero-tour:hover > span { transform: scale(1.06); }
.hero-dl { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 2px; color: var(--t1); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.hero-dl .icon { font-size: 17px; color: var(--blue-bright); }
.hero-dl:hover { color: var(--blue-text); }

/* The closing section's two ways in (owner, 16 Oct 2026): on your own, or with your team (the trial card). */
.final-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin-top: 30px; max-width: 620px; }
.final-path { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.final-path h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.final .final-path p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; }
.final .final-links { display: grid; justify-items: start; gap: 6px; margin-top: 12px; }
.final .final-links .text-link { color: var(--on-navy); font-size: 15px; font-weight: 600; }
.final .final-links .text-link:hover { color: #fff; }
@media (max-width: 560px) { .final-paths { grid-template-columns: minmax(0, 1fr); } }
.tc-kicker { margin: 0 0 -8px; font-size: 13px; font-weight: 600; color: var(--blue-text); }

/* Section 03, For teams: what a company workspace adds, then the way to start a team trial. */
.anchor-alias { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
.sc-points { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 24px; margin: 36px 0 0; padding: 0; list-style: none; }
.sc-points li { padding-top: 14px; border-top: 1px solid rgba(116, 197, 255, 0.28); }
.sc-points b { display: block; font-size: 15px; font-weight: 600; color: #fff; }
.sc-points span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--on-navy-2); }
.sc-cta { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 34px; }
.sc-cta p { margin: 0; max-width: 52ch; font-size: 14.5px; line-height: 1.5; color: var(--on-navy-2); }
.story-c .sc-cta .btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.story-c .sc-cta .btn-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
@media (max-width: 1100px) { .sc-points { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .story-c .sc-points, .story-c .sc-cta { grid-column: 1 / -1; } }
@media (max-width: 640px) { .sc-points { grid-template-columns: minmax(0, 1fr); margin-top: 28px; } }
/* Phase 8: the personal-plan note (a release:starter block in index.html). */
.final .final-personal { margin: 18px 0 0; font-size: 15.5px; }
.final .final-personal a { color: var(--on-navy); font-weight: 600; }
.final .final-personal a:hover { color: #fff; }

/* The motion controls (the illustration's and the belt's): one shared state, "Pause" or "Play" (assets/site/home.js). */
.motion-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 13px 0 10px; border: 0; border-radius: 99px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--sky-line); color: var(--t1); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; visibility: hidden; transition: box-shadow 0.18s; }
.motion-toggle .icon { display: block; font-size: 13px; color: var(--blue-text); }
.motion-toggle:hover { box-shadow: inset 0 0 0 1px #b9cbe3; }

/* ---------- The illustration: choose your AI, details become stand-ins, the answer comes back restored ---------- */
.how-stage { position: relative; z-index: 2; max-width: 1136px; margin: clamp(40px, 5vw, 56px) auto calc(var(--overlap) * -1); }
.how { display: grid; grid-template-columns: 300px minmax(0, 1fr); margin: 0; overflow: hidden; border-radius: 18px; background: var(--surface); text-align: left;
  box-shadow: 0 0 0 1px rgba(16, 27, 50, 0.07), 0 1px 2px rgba(16, 27, 50, 0.04), 0 24px 64px rgba(16, 27, 50, 0.1); }
.how p { margin: 0; }
.how .icon { flex: none; }

.how-side { position: relative; display: flex; flex-direction: column; padding: 30px 26px 26px; background: #fbfcfe; border-right: 1px solid var(--line-soft); }
.how-k { font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: var(--blue-text); }
.how-steps { list-style: none; display: grid; gap: 4px; margin: 16px -10px 18px; padding: 0; }
.how-steps li { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding: 11px 12px 12px 10px; border-radius: 12px; }
.how-steps li::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--surface); box-shadow: 0 0 0 1px var(--hair), 0 1px 3px rgba(16, 27, 50, 0.06); opacity: 0; transition: opacity 0.3s var(--ease); }
.how-steps li > * { position: relative; }
.how-steps b { display: grid; place-items: center; width: 26px; height: 26px; margin-top: -2px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--t2); transition: background 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.how-steps strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--t1); text-wrap: balance; }
.how-steps small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--t2); }
.how[data-step="1"] li[data-s="1"]::before, .how[data-step="2"] li[data-s="2"]::before, .how[data-step="3"] li[data-s="3"]::before { opacity: 1; }
.how[data-step="1"] li[data-s="1"] b, .how[data-step="2"] li[data-s="2"] b, .how[data-step="3"] li[data-s="3"] b, .how[data-step="all"] .how-steps b { background: var(--blue); box-shadow: none; color: #fff; }
.how-pause { align-self: flex-start; margin-top: auto; }
.how.is-live .how-pause { visibility: visible; }

/* The drawing. Columns: your message and the answer | the way to the gate | the gate (Jalten, on your device) |
   the way to the AI | the AI. Every part has its own cell, so nothing moves the layout. */
.how-art { position: relative; display: grid; grid-template-columns: minmax(0, 232px) minmax(44px, 1fr) 46px minmax(112px, 1.25fr) 192px; grid-template-rows: 22px 1fr 1fr;
  column-gap: 0; row-gap: 12px; height: 400px; padding: 40px 34px 34px; color: var(--t1); font-size: 14px; line-height: 1.5; }
.ha-zone { grid-column: 1 / 4; grid-row: 1 / 4; margin: -16px -12px -14px -16px; border-radius: 16px; background: var(--sky-2); box-shadow: inset 0 0 0 1px var(--sky-line); }
.ha-zl { grid-column: 1 / 3; grid-row: 1; align-self: start; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--protect-text); position: relative; }
.ha-zl .icon { font-size: 15px; }
.ha-card { position: relative; align-self: center; display: grid; gap: 5px; padding: 12px 14px 13px; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--hair), 0 1px 2px rgba(16, 27, 50, 0.05); }
.ha-msg { grid-column: 1; grid-row: 2; }
.ha-ans { grid-column: 1; grid-row: 3; }
.ha-cl { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--t2); }
.ha-cl .icon { font-size: 13px; color: var(--ink-3); }
.ha-t { font-size: 14px; line-height: 1.5; }
.ha-t mark { position: relative; z-index: 0; background: none; color: inherit; white-space: nowrap; }
.ha-t mark::before { content: ""; position: absolute; z-index: -1; inset: 0 -2px; border-radius: 3px; background: var(--coral-bg); }
.ha-t mark::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 1px; background: var(--coral); }
.ha-t mark::before, .ha-t mark::after { opacity: 0; transition: opacity 0.3s var(--ease); }
.ha-r { white-space: nowrap; text-decoration: underline dotted 1.5px var(--blue-bright); text-underline-offset: 3px; }
.ha-ok { justify-self: start; display: inline-flex; align-items: center; gap: 5px; margin-top: 2px !important; padding: 2px 9px 2px 7px; border-radius: 99px; background: var(--protect-bg); color: var(--protect-text); font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.ha-ok .icon { font-size: 12px; }

/* The gate: where Jalten replaces details on the way out and puts them back on the way in. */
.ha-gate { position: relative; grid-column: 3; grid-row: 2 / 4; display: grid; place-items: center; margin: 14px 0; border-radius: 23px; background: linear-gradient(180deg, #ffffff, var(--protect-bg) 50%, #ffffff); box-shadow: inset 0 0 0 1px var(--protect-line); }
.ha-gl { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 650; letter-spacing: -0.01em; color: var(--protect-text); }
.ha-gate::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px #8fb3f3, 0 0 0 5px rgba(52, 120, 246, 0.09); opacity: 0; transition: opacity 0.35s var(--ease); }
.ha-shield { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px var(--protect-line), 0 2px 6px rgba(29, 79, 191, 0.12); color: var(--blue-bright); transition: background 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.ha-shield .icon { font-size: 18px; }

/* The ways between the parts: a dotted line that lights up in the direction things travel. */
.ha-lane { position: relative; align-self: center; height: 2px; margin: 0 9px; background: radial-gradient(circle, #b7c6d8 1px, transparent 1.4px) 0 50% / 6px 2px repeat-x; }
.ha-glow { position: absolute; inset: 0; border-radius: 1px; background: var(--blue-bright); transform: scaleX(0); transform-origin: left center; transition: transform 0.4s var(--ease); }
.ha-lane.is-back .ha-glow { transform-origin: right center; }
.ha-lane::after { content: ""; position: absolute; top: 50%; right: -1px; width: 7px; height: 7px; border-top: 2px solid #9db4d0; border-right: 2px solid #9db4d0; border-radius: 1px; transform: translateY(-50%) rotate(45deg); }
.ha-lane.is-back::after { right: auto; left: -1px; transform: translateY(-50%) rotate(-135deg); }
.ha-l1 { grid-column: 2; grid-row: 2; }
.ha-l4 { grid-column: 2; grid-row: 3; }
.ha-l2 { grid-column: 4; grid-row: 2; }
.ha-l3 { grid-column: 4; grid-row: 3; }
.ha-pkt { position: absolute; left: 50%; top: 50%; display: grid; justify-items: center; gap: 4px; padding: 7px 9px 8px; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--protect-line), 0 4px 14px rgba(29, 79, 191, 0.08); white-space: nowrap;
  transform: translate(-50%, -50%); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.ha-pkt small { font-size: 11px; font-weight: 600; line-height: 1.2; color: var(--t2); }
.ha-pkt code { font-family: var(--mono); font-size: 11.5px; line-height: 1.5; padding: 0 6px; border-radius: 5px; background: var(--sky-2); box-shadow: inset 0 0 0 1px var(--protect-line); color: var(--protect-text); }

/* The AI: the chosen model, with the marks of the others it could have been. */
.ha-ai { position: relative; grid-column: 5; grid-row: 2 / 4; align-self: center; display: grid; gap: 12px; padding: 15px 16px 16px; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(16, 27, 50, 0.05), 0 12px 32px rgba(16, 27, 50, 0.07); }
.ha-ai::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 1.5px var(--blue-bright), 0 0 0 6px rgba(52, 120, 246, 0.1); opacity: 0; transition: opacity 0.35s var(--ease); }
.ha-ai > * { position: relative; }
.ha-pick { display: grid; }
.ha-model { grid-area: 1 / 1; display: flex; align-items: center; gap: 10px; min-width: 0; opacity: 0; transform: translateY(4px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.ha-model.is-on { opacity: 1; transform: none; }
.ha-model img { flex: none; width: 22px; height: 22px; }
.ha-mt { display: grid; min-width: 0; line-height: 1.25; }
.ha-mt b { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ha-mt small { font-size: 12px; color: var(--t2); }
.ha-marks { display: flex; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.ha-mk { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-soft); }
.ha-mk::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--blue-bright); background: rgba(52, 120, 246, 0.06); opacity: 0; transition: opacity 0.3s var(--ease); }
.ha-mk img { position: relative; width: 16px; height: 16px; opacity: 0.55; transition: opacity 0.3s var(--ease); }
.ha-mk.is-on::after, .ha-mk.is-on img { opacity: 1; }

/* What each step shows. With script and motion the drawing starts empty and fills in step by step (home.js); the
   markup's own state, data-step="all", is the still picture with every step at once. */
.how.is-live .ha-pkt { opacity: 0; }
.how.is-live .ha-l2 .ha-pkt { transform: translate(-50%, -50%) translateX(-10px); }
.how.is-live .ha-l3 .ha-pkt { transform: translate(-50%, -50%) translateX(10px); }
.how.is-live .ha-ans { opacity: 0; transform: translateY(6px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.how[data-step="all"] .ha-t mark::before, .how[data-step="all"] .ha-t mark::after, .how.found .ha-t mark::before, .how.found .ha-t mark::after { opacity: 1; }
.how[data-step="all"] .ha-glow, .how.masked .ha-l1 .ha-glow, .how.sent .ha-l2 .ha-glow, .how.reply .ha-l3 .ha-glow, .how.restored .ha-l4 .ha-glow { transform: none; }
.how.masked .ha-gate::before, .how.reply .ha-gate::before { opacity: 1; }
.how.masked .ha-shield, .how.reply .ha-shield, .how[data-step="all"] .ha-shield { background: var(--blue); box-shadow: 0 0 0 1px var(--blue), 0 3px 10px rgba(29, 79, 191, 0.25); color: #fff; }
.how.choose .ha-ai::before { opacity: 1; }
.how.sent .ha-l2 .ha-pkt, .how.reply .ha-l3 .ha-pkt { opacity: 1; transform: translate(-50%, -50%); }
.how.restored .ha-ans { opacity: 1; transform: none; }

/* ---------- Narrower windows: the steps above the drawing ---------- */
@media (max-width: 1099px) {
  .how { grid-template-columns: minmax(0, 1fr); }
  .how-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 16px; padding: 22px 24px 20px; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .how-steps { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 -8px; }
  .how-pause { grid-column: 2; grid-row: 1; margin: 0; }
  .how-art { grid-template-columns: minmax(0, 224px) minmax(48px, 0.75fr) 46px minmax(132px, 1.2fr) 184px; margin: 0 auto; width: min(100%, 880px); padding-left: 30px; padding-right: 30px; }
}

@media (min-width: 681px) and (max-width: 899px) {
  .how-art { grid-template-columns: minmax(0, 200px) minmax(44px, 0.7fr) 44px minmax(140px, 1.3fr) 172px; padding-left: 24px; padding-right: 24px; }
  .ha-ai { padding: 14px 14px 15px; }
}

/* ---------- Phones: the same drawing, top to bottom ---------- */
@media (max-width: 680px) {
  .how { border-radius: 16px; }
  .how-side { padding: 16px 16px 14px; gap: 10px 12px; }
  .how-steps { grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0 -6px; }
  .how-steps li { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; }
  .how-steps b { width: 24px; height: 24px; margin: 0; font-size: 11.5px; }
  .how-steps strong { font-size: 14.5px; }
  .how-steps small { display: none; }
  .how-pause { padding: 0 12px 0 9px; }
  .how-art { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 20px 112px 26px 42px 84px auto; column-gap: 10px; row-gap: 8px; height: auto; padding: 24px 18px 18px; font-size: 13.5px; }
  .ha-zone { grid-column: 1 / 3; grid-row: 1 / 5; margin: -12px -10px -6px; border-radius: 14px; }
  .ha-zl { grid-column: 1 / 3; font-size: 12px; }
  .ha-card { align-self: stretch; align-content: start; padding: 10px 11px 11px; gap: 4px; border-radius: 11px; }
  .ha-msg { grid-column: 1; grid-row: 2; }
  .ha-ans { grid-column: 2; grid-row: 2; }
  .ha-cl { font-size: 11.5px; }
  .ha-t { font-size: 13px; line-height: 1.45; }
  .ha-ok { font-size: 10.5px; padding: 1px 7px 1px 5px; }
  .ha-ok .icon { font-size: 11px; }
  .ha-gate { grid-column: 1 / 3; grid-row: 4; display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0 6px; border-radius: 22px; background: linear-gradient(90deg, #ffffff, var(--protect-bg) 50%, #ffffff); }
  .ha-gl { position: static; transform: none; font-size: 12.5px; }
  .ha-ok-x { display: none; }
  .ha-shield { width: 30px; height: 30px; }
  .ha-shield .icon { font-size: 16px; }
  .ha-lane { justify-self: center; align-self: stretch; width: 2px; height: auto; margin: 5px 0; background: radial-gradient(circle, #b7c6d8 1px, transparent 1.4px) 50% 0 / 2px 6px repeat-y; }
  .ha-glow { transform: scaleY(0); transform-origin: center top; }
  .ha-lane.is-back .ha-glow { transform-origin: center bottom; }
  .ha-lane::after { top: auto; bottom: -1px; right: auto; left: 50%; transform: translateX(-50%) rotate(135deg); }
  .ha-lane.is-back::after { bottom: auto; top: -1px; left: 50%; transform: translateX(-50%) rotate(-45deg); }
  .ha-l1 { grid-column: 1; grid-row: 3; }
  .ha-l4 { grid-column: 2; grid-row: 3; }
  .ha-l2 { grid-column: 1; grid-row: 5; }
  .ha-l3 { grid-column: 2; grid-row: 5; }
  .ha-pkt { padding: 5px 8px 6px; gap: 3px; }
  .ha-pkt code { font-size: 11px; }
  .how.is-live .ha-l2 .ha-pkt { transform: translate(-50%, -50%) translateY(-8px); }
  .how.is-live .ha-l3 .ha-pkt { transform: translate(-50%, -50%) translateY(8px); }
  .how.sent .ha-l2 .ha-pkt, .how.reply .ha-l3 .ha-pkt { transform: translate(-50%, -50%); }
  .ha-ai { grid-column: 1 / 3; grid-row: 6; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 11px 14px 13px; }
  .ha-ai > .ha-cl { grid-column: 1; grid-row: 1; }
  .ha-marks { grid-column: 2; grid-row: 1; gap: 5px; padding: 0; border: 0; }
  .ha-pick { grid-column: 1 / -1; grid-row: 2; }
  .ha-mk { width: 28px; height: 28px; border-radius: 8px; }
}

/* ---------- The provider strip (owner, 16 Oct 2026, refined the same day): a slow marquee closing the hero ----------
   Full width, edges fading softly. The track holds the set twice and each set ends with the same space that separates
   its items, so the two halves are identical: moving the track by exactly half its width (one set) brings the copy to
   where the first began, and the loop goes on with no jump, no gap and no change of speed. It pauses under the
   pointer, with focus inside it, and with its own small Pause button (shared with the illustration's, WCAG 2.2.2). */
.home .pstrip { position: relative; z-index: 2; margin-top: clamp(44px, 5.5vw, 64px); text-align: center; }
.home .pstrip-h { margin: 0 auto; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--t2); }
.pv { position: relative; margin-top: 14px; }
.pv-view { --pv-gap: 52px; position: relative; overflow: hidden; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.home .pv-view:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: -2px; border-radius: 10px; -webkit-mask-image: none; mask-image: none; }
.pv-track { display: flex; width: max-content; }
.pv.is-live .pv-track { animation: pv-slide 120s linear infinite; }
.pv.is-live .pv-view:hover .pv-track, .pv.is-live .pv-view:focus-within .pv-track, .motion-paused .pv.is-live .pv-track { animation-play-state: paused; }
@keyframes pv-slide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.pv-set { display: flex; align-items: center; gap: var(--pv-gap); margin: 0; padding: 0 var(--pv-gap) 0 0; list-style: none; }
.pv-item { flex: none; display: flex; align-items: center; gap: 10px; min-height: 48px; white-space: nowrap; }
/* One lockup: the mark in a 28px slot (so every name starts the same distance from its mark), drawn inside it at the
   size that makes it look as large as the others (optical, never stretched), and one name. */
.pv-mark { flex: none; --m: 24px; width: var(--m); height: var(--m); margin: 0 calc((28px - var(--m)) / 2); }
.pv-item[data-p="mistral"] .pv-mark { --m: 22px; }
.pv-item[data-p="kimi"] .pv-mark { --m: 22px; }
.pv-item[data-p="xai"] .pv-mark, .pv-item[data-p="groq"] .pv-mark, .pv-item[data-p="cohere"] .pv-mark { --m: 23px; }
.pv-item[data-p="qwen"] .pv-mark, .pv-item[data-p="deepseek"] .pv-mark { --m: 25px; }
.pv-item[data-p="google"] .pv-mark { --m: 26px; }
.pv-name { font-size: 16px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; color: var(--t1); }
/* The small Pause button: at the strip's right edge, over its fade (never over a readable logo), shown only while it moves. */
.home .pv-pause { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 32px; min-height: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--sky-line), 0 1px 2px rgba(16, 27, 50, 0.06); }
.home .pv-pause .icon { font-size: 13px; }
.pv.is-live .pv-pause { visibility: visible; }
.home .pv-pause:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
.pstrip-note { margin: 10px auto 0; font-size: 13px; line-height: 1.5; color: var(--t2); }
.pstrip-note a { color: var(--blue-text); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(36, 87, 197, 0.35); }
.pstrip-note a:hover { text-decoration-color: currentColor; }
/* The section after the hero makes room for the illustration that overlaps into it. */
.home .hero + .shift { padding-top: calc(var(--overlap) + clamp(72px, 8vw, 112px)); }
@media (max-width: 760px) {
  .pv-view { --pv-gap: 38px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
  .pv.is-live .pv-track { animation-duration: 104s; }
  .pv-item { gap: 9px; min-height: 44px; }
  .pv-name { font-size: 15px; }
}

/* ---------- Reduced motion: nothing slides or fades ----------
   The illustration is its still picture (every step at once, from the markup); the strip is one still row. */
@media (prefers-reduced-motion: reduce) {
  .how *, .how *::before, .how *::after { transition: none !important; }
  .motion-toggle { display: none; }
  /* The strip: one still row that the visitor scrolls (the row takes focus; the arrow keys scroll it), its copy gone. */
  .pv-view { overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 24px; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  .pv-track { animation: none !important; padding: 0 24px; }
  .pv-set[aria-hidden="true"] { display: none; }
  .pv-set { padding-right: 0; }
  .pv-item { scroll-snap-align: start; }
}

/* ---------- The blue strands (assets/site/flow.js): "thinking in flow" ----------
   One layer over the page's backgrounds, as tall as the page, clipped to its own box (never a sideways scroll), never
   in the way of a pointer, hidden from assistive technology. Three strands, each with its own weight and intensity;
   over the two ink-blue sections, their paler twins. The cards they pass behind sit above them. */
.home main { position: relative; }
.jflow { position: absolute; z-index: 1; left: 0; top: 0; display: block; overflow: hidden; pointer-events: none; }
.jflow path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.jflow .fl-s0 .fl-light path { stroke: #3478f6; stroke-opacity: 0.26; stroke-width: 1.1; }
.jflow .fl-s1 .fl-light path { stroke: #3478f6; stroke-opacity: 0.55; stroke-width: 1.7; }
.jflow .fl-s2 .fl-light path { stroke: #5b9cf8; stroke-opacity: 0.36; stroke-width: 1.3; }
.jflow .fl-s0 .fl-dark path { stroke: #74c5ff; stroke-opacity: 0.22; stroke-width: 1.1; }
.jflow .fl-s1 .fl-dark path { stroke: #74c5ff; stroke-opacity: 0.46; stroke-width: 1.7; }
.jflow .fl-s2 .fl-dark path { stroke: #a8d8ff; stroke-opacity: 0.3; stroke-width: 1.3; }
/* The cards the strands slip behind. */
.home .how-stage, .home .calm, .home .task, .home .mask-demo, .home .console-frame, .home .trial-card, .home .film-frame, .home .pr-stage { position: relative; z-index: 2; }

/* ---------- The opening (owner, 16 Oct 2026; assets/site/intro.js) ----------
   "intro" is set before the first paint, only when the opening will play; "intro-run" once the script has taken over
   (its own animations then hold every part). Until then the header's contents and the hero's copy wait, and if the
   script never takes over they appear by themselves after 2.6 seconds: the page can never be left hidden. The opening
   only changes opacity, transforms and a clip, so nothing in the layout moves. */
html.intro .home .hero .in, html.intro-done .home .hero .in { animation: none; }
html.intro:not(.intro-run) .home .site-head .logo-lockup,
html.intro:not(.intro-run) .home .site-head .site-nav,
html.intro:not(.intro-run) .home .site-head .nav-actions,
html.intro:not(.intro-run) .home .hero .in { animation: intro-hold 0.3s ease 2.6s both; }
html.intro.intro-run .home .site-head .logo-lockup { opacity: 0; }
@keyframes intro-hold { from { opacity: 0; } }
.intro-mark { position: fixed; z-index: 70; pointer-events: none; transform-origin: 0 0; will-change: transform; }
.intro-mark img { display: block; width: 100%; height: 100%; }
/* The opening's message: the brand's line, set like the heading. */
.intro-phrase { position: fixed; z-index: 70; left: 0; right: 0; width: min(92vw, 1000px); margin: 0 auto; pointer-events: none;
  font-size: clamp(36px, 5.4vw, 78px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 600; color: var(--navy); text-align: center; text-wrap: balance; }
.intro-phrase span { display: block; }
@media (prefers-reduced-motion: reduce) { .intro-mark, .intro-phrase { display: none; } }

/* ---------- The lower page (owner, 16 Oct 2026): one job a section ----------
   02 Protection: each detail carries the same small number in every stage, and the key under the stages pairs each
   original with its stand-in (the side the chosen stage is about is the stronger one). Numbers and words carry the
   meaning; colour only repeats it. The stages are a little tighter. */
.home .mask-panel { padding: clamp(22px, 2.8vw, 34px) clamp(22px, 4.2vw, 56px) clamp(24px, 3vw, 36px); }
.sd-n { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; margin-right: 0.32em; padding: 0 0.3em; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px currentColor; font-family: var(--sans, inherit); font-size: max(11px, 0.46em); font-weight: 650; line-height: 1; letter-spacing: 0; vertical-align: 0.32em; color: var(--t1); }
.sd-o .sd-n { color: #b5452c; }
.sd-t .sd-n { font-size: max(11px, 0.6em); vertical-align: 0.2em; color: var(--protect-text); }
.sd-r .sd-n { color: var(--protect-text); }
.sd-r { text-decoration-skip-ink: auto; }
.home .mask-foot { display: block; padding: 16px clamp(22px, 4.2vw, 56px) 18px; }
.mask-key { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--t2); }
.mask-map { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.mask-map li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; padding: 7px 0; border-bottom: 1px solid var(--hair); font-size: 14px; line-height: 1.4; color: var(--t1); }
.mask-map .sd-n { font-size: 11px; vertical-align: 0; align-self: center; }
.mask-map .mm-k { flex: 0 0 auto; min-width: 7.6em; font-size: 12.5px; color: var(--t2); }
.mask-map .mm-a { color: var(--t3, #8a94a6); }
.mask-map .mm-t { font-family: var(--mono); font-size: 12.5px; color: var(--protect-text); }
.mask-demo[data-step="0"] .mm-o, .mask-demo[data-step="2"] .mm-o { font-weight: 650; }
.mask-demo[data-step="1"] .mm-t { font-weight: 600; padding: 0 0.3em; border-radius: 4px; background: var(--protect-bg); box-shadow: inset 0 0 0 1px var(--protect-line); }
.home .mask-where { display: block; margin: 10px 0 0; font-size: 12.5px; font-weight: 500; color: var(--t2); }
.sd-o, .sd-r { white-space: nowrap; }
@media (max-width: 760px) {
  .mask-map { grid-template-columns: minmax(0, 1fr); }
  /* Two lines a detail: its number and kind, then the original and its stand-in. */
  .mask-map li { padding-left: 25px; }
  .mask-map li > .sd-n { margin-left: -25px; }
  .mask-map .mm-k { flex: 1 1 calc(100% - 32px); }
}

/* 01 Model choice: the example's label sits where the price used to (no prices: it is an illustration). */
.task-meta .tm-ex { font-size: 12.5px; color: var(--t2); }

/* 06 Team setup: four plain steps, each a short line and a clean picture; the cards size to what they hold. */
.home .ob-steps .flow-card { display: flex; flex-direction: column; min-height: 0; }
.home .ob-steps .fc-foot { margin-top: auto; padding-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--t2); }
.ob-steps .flow-n { font-size: 14px; }
.ob-models { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ob-models li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--hair); border-radius: 8px; font-size: 13.5px; }
.ob-models img { width: 14px; height: 14px; flex: none; }
.ob-models b { font-weight: 600; }
.ob-models span { margin-left: auto; font-size: 12px; color: var(--t2); white-space: nowrap; }
.ob-eg { display: inline-block; vertical-align: 0.45em; margin-left: 6px; letter-spacing: 0; padding: 1px 7px; border-radius: 99px; border: 1px dashed #b9c6d6; font-size: 11.5px; font-weight: 600; color: var(--t2); white-space: nowrap; }
.ob-steps .fc-big { margin-top: 6px; }
.ob-meter { position: relative; height: 8px; margin: 14px 0 6px; border-radius: 99px; background: #e7edf4; }
.ob-meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--blue-bright); }
.ob-meter b { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 2px; background: #c45a3c; }
.ob-warn { font-size: 12px; }

/* 09 Questions: a calm section of its own, a comfortable reading width, one question a row. */
.faq-sec { padding: clamp(72px, 9vw, 112px) 0; background: var(--page); border-top: 1px solid var(--hair); }
.home .faq-wrap { max-width: 820px; }
.faq-sec h2 { margin: 0 0 18px; font-size: clamp(28px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.03em; }
.faq-rows { border-top: 1px solid var(--hair); }
.faq-q { border-bottom: 1px solid var(--hair); scroll-margin-top: 96px; }
.faq-q summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 16px 44px 16px 0; font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; color: var(--t1); cursor: pointer; list-style: none; }
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--blue-text); border-bottom: 2px solid var(--blue-text); transform: rotate(45deg); transition: transform 0.2s var(--ease, ease); }
.faq-q[open] summary::after { margin-top: -2px; transform: rotate(225deg); }
.faq-q summary:hover { color: var(--blue-text); }
.faq-q summary:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; border-radius: 6px; }
.faq-a { padding: 0 44px 22px 0; }
.faq-a p { margin: 0; max-width: 68ch; font-size: 16px; line-height: 1.65; color: var(--t2); }
@media (max-width: 640px) { .faq-q summary { font-size: 16px; padding-right: 36px; } .faq-a { padding-right: 0; } }
@media (prefers-reduced-motion: reduce) { .faq-q summary::after { transition: none; } }

/* 05 The example conversation on a phone: larger, from the model menu across to the composer's send button (the
   empty margins either side are cropped off; "View larger" shows the whole window). */
@media (max-width: 600px) {
  .pr-shots img.pr-shot[data-v="workspace"] { width: 135%; max-width: none; margin-left: -10.8%; }
}

/* 01 Model choice: the task card's paper stack, drawn as shadows. The card is raised above the strands (z-index 2,
   its own stacking context), so the prototype's stack layers (::before and ::after at z-index -1) painted over the
   card's own background and showed through its text; shadows always sit beneath the card. */
.home .task::before, .home .task::after { display: none; }
.home .task { box-shadow: 14px 14px 0 -1px var(--sky-2), 14px 14px 0 0 var(--hair), 28px 28px 0 -1px rgba(234, 242, 255, 0.85), 28px 28px 0 0 var(--hair), 0 2px 4px rgba(16, 27, 50, 0.04), 0 30px 70px rgba(16, 27, 50, 0.1); }

/* 06 Team setup, step 1: every provider available in Jalten (rendered from provider-release.js), compact rows. */
.home .ob-steps .ob-conn { gap: 5px; }
.home .ob-steps .ob-conn li { min-height: 44px; padding: 4px 10px; gap: 9px; }
.home .ob-steps .ob-conn li > span:not(.ob-ok) { min-width: 0; }
.home .ob-steps .ob-conn small { font-size: 11.5px; line-height: 1.25; }
@media (min-width: 1041px) and (max-width: 1199px) {
  .home .ob-steps .ob-conn li { padding: 4px 8px; gap: 7px; }
  .home .ob-steps .ob-ok [data-icon] { display: none; }
}

/* Phase 10: Start free. The hero's primary action, Try it now beside it as the secondary path. */
.home .hero-ctas .hero-try { min-width: 132px; background: var(--surface); border-color: var(--line-strong); color: var(--t1); box-shadow: 0 1px 2px rgba(16, 27, 50, 0.05); }
.home .hero-ctas .hero-try:hover { background: var(--surface-2); border-color: #b7c0c9; }
.hero-start .icon { font-size: 17px; transition: transform 0.18s var(--ease); }
.hero-start:hover .icon { transform: translateX(2px); }

/* Phase 10: the two ways in (For myself, For my team), straight after the hero. */
.paths { position: relative; padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px); background: var(--surface); }
.paths-h { margin: 0 auto; max-width: 20ch; text-align: center; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; }
.paths-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); max-width: 980px; margin: clamp(28px, 4vw, 44px) auto 0; }
.path-card { display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 3vw, 32px); border-radius: 18px; background: var(--surface); border: 1px solid var(--hair); box-shadow: 0 1px 2px rgba(16, 27, 50, 0.04), 0 18px 48px rgba(16, 27, 50, 0.06); }
.path-k { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 650; letter-spacing: 0.02em; text-transform: uppercase; color: var(--blue-text); }
.path-k .icon { font-size: 16px; }
.path-card h3 { margin: 0; font-size: clamp(20px, 2vw, 24px); line-height: 1.2; letter-spacing: -0.02em; color: var(--t1); }
.path-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15.5px; line-height: 1.5; color: var(--t2); }
.path-go { margin-top: auto; align-self: flex-start; }
.home .path-card .btn:not(.btn-primary) { background: var(--surface); border-color: var(--line-strong); color: var(--t1); }
.paths-note { margin: 22px auto 0; text-align: center; font-size: 15px; color: var(--t2); }
.paths-note a, .sc-cta p a { color: var(--blue-text); font-weight: 600; }
.story-c .sc-cta p a { color: var(--on-navy); }
@media (max-width: 760px) { .paths-grid { grid-template-columns: minmax(0, 1fr); } .path-go { align-self: stretch; justify-content: center; } }

/* Phase 10: the closing section's personal path has a button (Start free for myself). */
.final .final-links .btn { margin-bottom: 4px; }
.final .final-links .btn:not(.btn-primary) { background: transparent; border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.final .final-links .btn:not(.btn-primary):hover { background: rgba(255, 255, 255, 0.08); }
/* The hero's illustration hangs over the next section by --overlap; the paths section now follows the hero. */
.home .hero + .paths { padding-top: calc(var(--overlap) + clamp(56px, 7vw, 96px)); }

/* Phase 10 ("Join a team", owner 18 Oct 2026): beside each "Start a team trial", the way in for someone their team
   invited (/join). Quiet text links, in the colours of the line they sit in. */
.paths-note .paths-sep { margin: 0 4px; opacity: 0.6; }
.paths-note .pn { display: inline-block; }
@media (max-width: 560px) { .paths-note .paths-sep { display: none; } .paths-note .pn { display: block; } .paths-note .pn + .pn { margin-top: 6px; } }
.sc-cta .sc-join { flex-basis: 100%; }
.story-c .sc-cta .sc-join a:hover { color: #fff; }
.final .final-path .final-join { margin-top: 10px; font-size: 14.5px; }
.final .final-join a { color: var(--on-navy); font-weight: 600; }
.final .final-join a:hover { color: #fff; }