/* The Personal Agent Lab, home page. Light theme only: white, green and orange.
   Colour roles: coral marks what stays with people, teal marks what the agent does.
   Radius rule: panels 20px, form fields 12px, buttons and chips fully round. */

:root {
  --paper: #FFFFFF;
  --surface: #FFFFFF;
  --ink: #0F2524;
  --ink-2: #47605D;
  --line: #D5DEDC;
  --line-2: #B4C4C1;
  --teal: #14B8A6;
  --teal-ink: #0A7268;
  --mint: #DCF1ED;
  --coral: #E07A5F;
  --coral-ink: #A5432A;
  --blush: #FBE8E1;
  --dot-ink: #32130A;
  --deep: #0E3F3C;
  --deep-ink: #F1F7F6;
  --deep-ink-2: #B9D2CE;
  --deep-line: rgba(255, 255, 255, 0.2);
  --btn-bg: var(--teal-ink);
  /* The main call-to-action is ink on light sections, so it stands apart from the teal accents. */
  --cta-bg: var(--ink);
  --btn-fg: #FFFFFF;
  --focus: var(--teal-ink);

  --r-panel: 20px;
  --r-field: 12px;
  --r-pill: 999px;

  --font-display: 'Rubik', 'IBM Plex Sans Hebrew', system-ui, sans-serif;
  --font-text: 'IBM Plex Sans Hebrew', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --nav-h: 68px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-wrap: balance;
}

h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.35; }

a { color: inherit; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; color: inherit; }

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

.wrap {
  width: min(100% - 48px, 1200px);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  top: -80px;
  z-index: 30;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-field);
}
.skip-link:focus { top: 12px; }

.top-sentinel {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 1px;
  height: 24px;
  pointer-events: none;
}

/* ---------- Buttons and controls ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.62em 1.35em;
  border: 0;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.975rem;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.15s var(--ease), filter 0.15s;
}
.btn-primary { background: var(--cta-bg); color: var(--btn-fg); }
.btn-primary:hover { filter: brightness(1.1); }
.btn:active { transform: scale(0.98); }
.btn-lg { font-size: 1.0625rem; padding: 0.82em 1.7em; }
.btn[disabled] { opacity: 0.6; cursor: progress; }

/* ---------- Brand mark ---------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.mark { width: 44px; height: auto; flex: none; }
.mark-lens { fill: var(--mint); }
.mark-dot { fill: var(--coral); }
.mark-you { fill: none; stroke: var(--coral); stroke-width: 30; }
.mark-agent { fill: none; stroke: var(--teal); stroke-width: 30; }
.brand-name { font-weight: 600; font-size: 1rem; white-space: nowrap; }

/* ---------- Navigation ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--nav-h);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-inline-start: auto;
}
.nav-links a {
  font-size: 0.95rem;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.15s;
}
.nav-links a:hover { color: var(--ink); }
.menu-btn { display: none; }

/* ---------- Hero ---------- */

.hero { padding-block: clamp(28px, 5vh, 64px) 0; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
}

.hero h1 {
  font-size: clamp(2rem, 3.9vw, 3.5rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.03em;
}
/* The rotating end of the headline continues on the same line as "אבל האחד הזה" and wraps
   from there. home.js measures the tallest phrase and reserves that height in --rot-h. */
.hero h1 { position: relative; }
.hero-tail { color: var(--teal-ink); }
.hero h1 .hero-lead-in,
.hero h1 .hero-tail,
.hero h1 .hero-tail span { display: inline; }
/* No line balancing here: the ending must start right after the lead-in words. */
.hero-rot { text-wrap: wrap; }
.motion .hero-rot { min-height: var(--rot-h, 2.28em); }
.tail-rest { color: transparent; }
/* A caret with no net width, so it never changes where the line breaks. */
.tail-typed::after {
  content: "";
  display: inline-block;
  height: 0.95em;
  margin-inline: 3px -5px;
  border-inline-start: 2px solid currentColor;
  vertical-align: -0.12em;
}
.hero h1 span { display: block; }

.hero-lead {
  margin-top: 22px;
  max-width: 30em;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 32px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ticker {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: clamp(36px, 6vh, 64px);
  padding-block: 20px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.975rem;
}
.ticker-label { flex: none; font-weight: 600; color: var(--ink); }
.ticker-view { flex: 1; min-width: 0; overflow: hidden; }
.ticker-view { container-type: inline-size; }
.ticker-track { display: flex; }
/* One set of logos. In motion it is made wider than the visible strip plus the widest logo,
   so the same logo can never be on screen twice. */
.ticker-set {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px clamp(36px, 5vw, 64px);
}
.ticker-set li { flex: none; }
.ticker-set img { display: block; width: auto; height: calc(var(--h) * var(--logo-scale, 1)); }
/* Each logo gets its own height so the row reads as evenly weighted. */
.lg-dtech { --h: 26px; }
.lg-structura { --h: 24px; }
.lg-propdo { --h: 25px; }
.lg-danel { --h: 50px; }
.lg-ntb { --h: 46px; }
.lg-peer { --h: 17px; }
.lg-glm { --h: 46px; }
.lg-almog { --h: 58px; }
/* This file has a white background; multiply makes it vanish on the light page. */
.lg-almog img { mix-blend-mode: multiply; }
html:not(.motion) .ticker-track [data-dup] { display: none; }

/* Rings: the brand mark, enlarged into a diagram of who does what. */

.rings-stage {
  position: relative;
  aspect-ratio: 616 / 416;
  container-type: inline-size;
}
.rings-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.rings-svg-tall { display: none; }
.ring-you { fill: none; stroke: var(--coral); stroke-width: 7; }
.ring-agent { fill: none; stroke: var(--teal); stroke-width: 7; }

.zone {
  position: absolute;
  top: 22.8%;
  height: 54.4%;
  width: 24%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Top-aligned: the heading stays put and chips only come and go beneath it. */
  justify-content: flex-start;
  gap: 0.55em;
  font-size: clamp(11px, 2.05cqw, 14.5px);
}
.zone-you { left: 10.1%; }
.zone-agent { left: 65.9%; }

.zone-label { font-size: 1.08em; font-weight: 700; line-height: 1.2; }
.zone-you .zone-label { color: var(--coral-ink); }
.zone-agent .zone-label { color: var(--teal-ink); }

.zone-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.42em;
}

.chip {
  padding: 0.3em 0.85em;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  line-height: 1.35;
  white-space: nowrap;
  transition: background 0.4s, border-color 0.4s;
}
.chip[hidden] { display: none; }
.chip-keep { background: var(--blush); border-color: transparent; font-weight: 600; }
.zone-agent .chip { background: var(--mint); border-color: transparent; }

.approve {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14.6%;
  aspect-ratio: 1;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--coral);
  color: var(--dot-ink);
  font-size: clamp(9.5px, 1.85cqw, 13.5px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

/* ---------- Sections ---------- */

.section { padding-block: clamp(72px, 9vw, 128px); }
/* Every section is white; alternate ones are set apart by hairlines. */
.band-surface { background: var(--paper); border-block: 1px solid var(--line); }

.section-head { max-width: 44rem; margin-bottom: clamp(36px, 5vw, 60px); }

.section h2 {
  font-size: clamp(1.9rem, 3.3vw, 2.75rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
}

.lead {
  text-wrap: pretty;
  margin-top: 16px;
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--ink-2);
}

/* ---------- Knowledge layer ---------- */

.ask {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}

/* ---------- Systems ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
.tile {
  grid-column: span 2;
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--r-panel);
  background: var(--paper);
}
.tile h3 { font-size: 1.25rem; font-weight: 700; }
.tile p { margin-top: 8px; color: var(--ink-2); font-size: 1rem; }

.tile-takeoff {
  background: var(--deep);
  color: var(--deep-ink);
}
.tile-takeoff p { color: var(--deep-ink-2); }

/* ---------- FAQ ---------- */

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 20px;
  font-size: 1.15rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: rotate 0.25s var(--ease);
}
.faq-list details[open] summary::after { rotate: 45deg; }
.faq-list details p {
  max-width: 38em;
  padding-bottom: 22px;
  color: var(--ink-2);
}

/* ---------- Pilot and footer ---------- */

.band-deep {
  --ink: var(--deep-ink);
  --ink-2: var(--deep-ink-2);
  --line: var(--deep-line);
  --mint: #1F5E58;
  --btn-bg: #4FD6C6;
  --cta-bg: var(--btn-bg);
  --btn-fg: #04201D;
  --focus: #8BEADF;
  background: var(--deep);
  color: var(--ink);
}

.pilot-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}

.steps { counter-reset: step; margin-top: 40px; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  column-gap: 16px;
  padding-block: 18px;
}
.steps li + li { border-top: 1px solid var(--line); }
.steps li::before {
  content: counter(step);
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--btn-bg);
}
.steps h3 { font-size: 1.2rem; font-weight: 700; }
.steps p { color: var(--ink-2); }
.pilot-after { margin-top: 20px; color: var(--ink-2); }

.contact {
  display: grid;
  gap: 18px;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: rgba(255, 255, 255, 0.05);
}
.field { display: grid; gap: 6px; }
.field label { font-size: 0.95rem; font-weight: 500; }
.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: var(--r-field);
  background: rgba(255, 255, 255, 0.07);
  color: var(--ink);
  font: inherit;
}
.field textarea { resize: vertical; min-height: 7em; }
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-radius: var(--r-field);
}
.field-help { font-size: 0.875rem; color: var(--ink-2); }
.contact .btn { justify-self: start; }
.form-status { min-height: 1.6em; font-weight: 500; }
.form-status.is-error { color: #FFC2B3; }
.contact.is-sent .field,
.contact.is-sent .btn { display: none; }
.contact.is-sent .form-status { font-size: 1.2rem; }

.footer { padding-block: 26px; border-top: 1px solid var(--line); }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-links a {
  font-size: 0.92rem;
  color: var(--ink-2);
  text-decoration: none;
}
.footer-links a:hover { color: var(--ink); }

/* ---------- Responsive ---------- */

@media (max-width: 1020px) {
  .nav-inner { gap: 16px; }
  .btn-nav { margin-inline-start: auto; }
  .menu-btn {
    display: grid;
    place-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .menu-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ink);
    transition: transform 0.2s var(--ease);
  }
  .menu-btn[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

  .nav-links {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px 24px 20px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding-block: 12px; font-size: 1.05rem; color: var(--ink); }
  .nav-links a + a { border-top: 1px solid var(--line); }
}

@media (max-width: 900px) {
  .hero-grid,
.ask,
.faq-grid,
.pilot-grid { grid-template-columns: 1fr; }

  .hero-grid { gap: 40px; }

  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { grid-column: span 2; }
  .tile-takeoff { grid-column: span 2; }
}

@media (max-width: 640px) {
  .wrap { width: min(100% - 40px, 1200px); }
  .btn-nav { display: none; }
  .menu-btn { margin-inline-start: auto; }

  .hero-lead { font-size: 1.15rem; }

  .rings-stage {
    aspect-ratio: 416 / 616;
    max-width: 340px;
    margin-inline: auto;
  }
  .rings-svg-wide { display: none; }
  .rings-svg-tall { display: block; }
  .zone {
    left: 21%;
    width: 58%;
    height: 24.5%;
    font-size: clamp(11px, 3.75cqw, 13.5px);
    gap: 0.4em;
  }
  .zone-you { top: 8.5%; height: 26%; }
  .zone-agent { top: 67.2%; }
  .zone-list { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.35em; }
  .chip { padding: 0.22em 0.7em; }
  .approve { width: 21.6%; font-size: clamp(9.5px, 3.1cqw, 12px); }
}

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

/* ==========================================================
   Visualisations and motion.
   Base rules give the still picture. Everything that moves sits
   under html.motion, which is set only when the visitor has not
   asked for reduced motion. Looping animations pause while their
   [data-live] container is off screen.
   ========================================================== */

/* ---------- Still parts of the visualisations ---------- */

.mark { overflow: visible; }

.hero h1 .line { overflow: clip; padding-block: 0.1em; margin-block: -0.1em; }

.ring-spark {
  fill: none;
  stroke: #FFFFFF;
  stroke-opacity: 0.75;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 54 1147;
  opacity: 0;
}

.rings-svg { transform: translate(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -8px)); }
.zone { transform: translate(calc(var(--px, 0) * 6px), calc(var(--py, 0) * 5px)); }

.approve::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--coral);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.chip { transition: background 0.35s, border-color 0.35s, color 0.35s; }
.zone-agent .chip.is-done { background: var(--btn-bg); color: var(--btn-fg); }

.tile { position: relative; overflow: hidden; }
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--teal) 20%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.tile:hover::after { opacity: 1; }

@property --spin {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.flow-shield {
  position: absolute;
  inset: -2px;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--spin), transparent 0 60%, var(--teal) 82%, #FFFFFF 91%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
}

#pilot { position: relative; overflow: hidden; }
.pilot-grid { position: relative; }
.orbits i {
  position: absolute;
  top: -300px;
  inset-inline-end: -220px;
  width: 760px;
  aspect-ratio: 1;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}
.orbits i + i {
  top: -120px;
  inset-inline-end: 80px;
  border-color: color-mix(in srgb, var(--teal) 34%, transparent);
}

.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.38) 50%, transparent 65%);
  transform: translateX(120%);
  pointer-events: none;
}

.scrollbar {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 25;
  height: 3px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: right;
  pointer-events: none;
}
@media (max-width: 640px) {
  .ticker { gap: 14px; --logo-scale: 0.8; }
}

/* ---------- Motion ---------- */

.motion [data-live]:not(.is-live),
.motion [data-live]:not(.is-live) *,
.motion [data-live]:not(.is-live) *::before,
.motion [data-live]:not(.is-live) *::after { animation-play-state: paused !important; }

@supports (animation-timeline: scroll()) {
  .motion .scrollbar { animation: scroll-grow linear both; animation-timeline: scroll(root block); }
}
@keyframes scroll-grow { to { transform: scaleX(1); } }

/* Scroll reveals: home.js tags the elements and adds .is-in when they enter the viewport. */
.motion [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ease), transform 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
/* Headings slide up from behind their own bottom edge; home.js wraps their text in .reveal-line. */
.motion [data-reveal="mask"] {
  opacity: 1;
  transform: none;
  overflow: clip;
  padding-block: 0.12em;
  margin-block: -0.12em;
}
.motion [data-reveal="mask"] > .reveal-line {
  display: block;
  transform: translateY(115%);
  transition: transform 1s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.motion [data-reveal="zoom"] { transform: scale(0.84); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }
.motion [data-reveal="mask"].is-in > .reveal-line { transform: none; }

/* Hero entrance */
.motion .hero h1 .line > span { animation: line-up 0.95s var(--ease) both; }
.motion .hero h1 .line:nth-child(2) > span { animation-delay: 0.13s; }
.motion .hero-rot { animation: rise 0.8s var(--ease) 0.13s both; }
.motion .hero-lead { animation: rise 0.8s var(--ease) 0.32s both; }
.motion .hero-actions { animation: rise 0.8s var(--ease) 0.44s both; }
.motion .ticker { animation: fade-in 0.8s ease 0.9s both; }
@keyframes line-up { from { transform: translateY(112%); } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.motion .ring-you,
.motion .ring-agent {
  stroke-dasharray: 1201;
  stroke-dashoffset: 1201;
  animation: ring-draw 1.3s var(--ease) 0.15s forwards;
}
.motion .ring-agent { animation-delay: 0.4s; }
@keyframes ring-draw { to { stroke-dashoffset: 0; } }

.motion .rings-svg .mark-lens { animation: fade-in 0.8s ease 1.1s both; }
.motion .rings .zone,
.motion .rings .approve { animation: fade-in 0.6s ease 1.2s both; }

.motion .ring-spark { animation: spark 7s linear 1.7s infinite, fade-in 0.5s ease 1.7s both; }
.motion .spark-agent { animation-duration: 9.5s, 0.5s; animation-direction: reverse, normal; }
@keyframes spark { to { stroke-dashoffset: -1201; } }

.motion .btn:hover { transform: translateY(-2px); }
.motion .btn:active { transform: scale(0.98); }
.motion .btn-primary:hover::after { transform: translateX(-120%); transition: transform 0.7s var(--ease); }

.mark-you, .mark-agent { transition: transform 0.5s var(--ease); }
.mark-lens, .mark-dot { transition: opacity 0.3s; }
.motion .brand:hover .mark-you { transform: translateX(-46px); }
.motion .brand:hover .mark-agent { transform: translateX(46px); }
.motion .brand:hover .mark-lens { opacity: 0; }

/* Ticker */
.motion .ticker-view { mask-image: linear-gradient(to left, transparent, #000 7%, #000 93%, transparent); }
.motion .ticker-track { width: max-content; animation: ticker 48s linear infinite; }
.motion .ticker-set {
  flex: none;
  flex-wrap: nowrap;
  justify-content: space-around;
  min-width: calc(100cqw + 300px);
  padding-inline-end: clamp(36px, 5vw, 64px);
}
.motion .ticker-view:hover .ticker-track { animation-play-state: paused; }
/* The track holds two copies of the logo set, so one set is half its width. */
@keyframes ticker { to { transform: translateX(50%); } }
.motion .tail-typed::after { animation: blink 0.7s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.motion .flow-shield { opacity: 1; animation: spin 4.5s linear infinite; }
@keyframes spin { to { --spin: 360deg; } }

/* FAQ answers open and close smoothly where the browser can animate to auto height. */
@supports (interpolate-size: allow-keywords) {
  .motion { interpolate-size: allow-keywords; }
  .motion .faq-list details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 0.35s var(--ease), content-visibility 0.35s allow-discrete;
  }
  .motion .faq-list details[open]::details-content { block-size: auto; }
}

/* Pilot band: the two rings drift behind the form. */
.motion .orbits i { animation: drift 24s ease-in-out infinite alternate; }
.motion .orbits i + i { animation-duration: 31s; animation-direction: alternate-reverse; }
@keyframes drift {
  from { transform: translate(0, 0); }
  to { transform: translate(-90px, 60px); }
}

/* ==========================================================
   Service logos, the layer stack, the multiplayer explainer
   and the security spec strip.
   ========================================================== */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.lg { display: block; flex: none; width: 1em; height: 1em; fill: currentColor; }
.lg-whatsapp { color: #25D366; }
.lg-telegram { color: #26A5E4; }
.lg-gmail { color: #EA4335; }
.lg-outlook { color: #0078D4; }
.lg-excel { color: #217346; }
.lg-gcal { color: #4285F4; }
.lg-gdrive { color: #4285F4; }
.lg-gemini { color: #8E75B2; }

/* ---------- Layer stack: data at the bottom, the agent's layer over it, the team on top.
   Each plane is a square squashed into a diamond; --u and --v place a point on a plane. ---------- */

.stack {
  container-type: inline-size;
  width: min(100%, 540px);
  justify-self: center;
}
.stack-inner {
  --side: 50cqw;
  --W: 35.36cqw;
  --H: 17.68cqw;
  --G: 29cqw;
  --cx: 40cqw;
  --cy-team: 25cqw;
  --cy-brain: 54cqw;
  --cy-data: 83cqw;
  position: relative;
  height: 104cqw;
}

.pin, .node, .beam {
  position: absolute;
  left: calc(var(--cx) + (var(--u) - var(--v)) * var(--W));
}
.pin {
  top: calc(var(--cy) + (var(--u) + var(--v) - 1) * var(--H));
  translate: -50% -100%;
}
.pin-app {
  --cy: var(--cy-data);
  display: grid;
  place-items: center;
  min-width: 8.6cqw;
  height: 8.6cqw;
  padding-inline: 1.3cqw;
  border: 1px solid var(--line-2);
  border-radius: 2.2cqw;
  background: var(--surface);
  box-shadow: 0 0.8cqw 1.4cqw -0.5cqw color-mix(in srgb, var(--ink) 35%, transparent);
  font-size: 4.6cqw;
}

.pin-person { --cy: var(--cy-team); width: 5.4cqw; height: 7.6cqw; }
.pin-person::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 3.2cqw;
  height: 3.2cqw;
  translate: -50% 0;
  border-radius: 50%;
  background: var(--coral);
}
.pin-person::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3.8cqw;
  border-radius: 2.7cqw 2.7cqw 0.8cqw 0.8cqw;
  background: var(--coral);
}

.node {
  --cy: var(--cy-brain);
  top: calc(var(--cy) + (var(--u) + var(--v) - 1) * var(--H));
  width: 2.2cqw;
  height: 2.2cqw;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--teal-ink);
  transition: opacity 0.4s;
}
.node::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--teal-ink);
  border-radius: 50%;
  opacity: 0;
}

.beam {
  top: calc(var(--cy-team) + (var(--u) + var(--v) - 1) * var(--H));
  width: 2px;
  height: calc(var(--G) * 2 - 9cqw);
  translate: -50% 0;
  background: linear-gradient(to top, transparent, var(--teal) 25%, var(--teal) 75%, transparent);
  opacity: 0.6;
  transition: opacity 0.4s;
}

.stack-label {
  position: absolute;
  inset-inline-start: 0;
  display: grid;
  gap: 0.15em;
  width: 36cqw;
  transition: opacity 0.4s;
}
.stack-label b { font-size: clamp(12.5px, 3.3cqw, 17px); font-weight: 700; line-height: 1.25; }
.stack-label span { font-size: clamp(10.5px, 2.7cqw, 14px); line-height: 1.35; color: var(--ink-2); }
.label-team { top: calc(var(--cy-team) - var(--H) - 1cqw); }
.label-brain { top: calc(var(--cy-brain) - var(--H) + 2cqw); }
.label-brain b { color: var(--teal-ink); }
.label-data { top: calc(var(--cy-data) - var(--H) + 2cqw); }

/* ---------- Multiplayer explainer: three systems, people's cursors and the agent's. ---------- */

.tile-multi { grid-column: span 4; background: var(--mint); }

.mp {
  position: relative;
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2cqw;
  margin-top: 24px;
  padding-bottom: 4cqw;
}
.mp-app {
  min-height: 31cqw;
  padding: 2cqw;
  border-radius: 2cqw;
  background: var(--surface);
}
.mp-app header {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  height: 4.5cqw;
  margin-bottom: 1.5cqw;
  font-size: 3.6cqw;
}
.mp-app header b { font-size: clamp(8.5px, 1.85cqw, 14px); font-weight: 600; }

.mp-row {
  display: grid;
  grid-template-columns: 2.6cqw minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.2cqw;
  height: 6cqw;
  border-top: 1px solid var(--line);
}
.mp-row i:first-child { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: var(--line-2); }
.mp-row i:nth-child(2) { width: 72%; height: 1.2cqw; border-radius: var(--r-pill); background: var(--line); }
.mp-row:nth-of-type(2) i:nth-child(2) { width: 46%; }
.mp-tag {
  padding: 0.1em 0.7em;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: clamp(7px, 1.55cqw, 12px);
  font-style: normal;
  font-weight: 600;
  line-height: 1.5;
}

.mp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 5cqw;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.mp-grid i {
  position: relative;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.mp-grid i::after {
  content: "";
  position: absolute;
  inset: 0.5cqw;
  border-radius: 0.8cqw;
}
.mp-event::after { background: var(--teal); }
.mp-busy::after { background: var(--coral); }
.mp-fill::after { inset: 0; border-radius: 0; background: color-mix(in srgb, var(--teal) 40%, transparent); }
.mp-typing::after { inset: 0; border-radius: 0; box-shadow: inset 0 0 0 2px var(--coral); }

.mp-cursor {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  transform: translate(var(--x), var(--y));
  pointer-events: none;
}
.mp-cursor svg { flex: none; width: max(2.6cqw, 12px); height: auto; aspect-ratio: 20 / 22; }
.mp-cursor b {
  margin-top: max(1.7cqw, 8px);
  padding: 0.15em 0.75em;
  border-radius: var(--r-pill);
  font-size: clamp(8.5px, 1.7cqw, 13px);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.mp-agent { --x: 85cqw; --y: 21cqw; z-index: 1; }
.mp-agent svg { fill: var(--btn-bg); }
.mp-agent b { background: var(--btn-bg); color: var(--btn-fg); }
.mp-maya { --x: 9cqw; --y: 17cqw; }
.mp-maya svg { fill: var(--coral); }
.mp-maya b { background: var(--coral); color: var(--dot-ink); }
.mp-dani { --x: 72cqw; --y: 11cqw; }
.mp-dani svg { fill: var(--ink); }
.mp-dani b { background: var(--ink); color: var(--paper); }
@media (max-width: 900px) {
  .tile-multi { grid-column: span 2; }
}
.motion #ask:not(.is-seen) .pin,
.motion #ask:not(.is-seen) .stack-label { opacity: 0; }
.motion #ask:not(.is-seen) .node,
.motion #ask:not(.is-seen) .beam { opacity: 0; }
.motion .pin,
.motion .stack-label { transition: opacity 0.5s ease calc(0.6s + var(--k, 0) * 70ms); }

.motion .beam {
  background: repeating-linear-gradient(to top, var(--teal) 0 7px, transparent 7px 16px);
  mask-image: linear-gradient(to top, transparent, #000 18%, #000 82%, transparent);
  opacity: 0.9;
  animation: beam-up 0.7s linear infinite;
}
@keyframes beam-up { to { background-position: 0 -16px; } }

.motion .node::after { animation: node-ping 2.4s ease-out infinite; animation-delay: calc(var(--k, 0) * 0.45s); }
@keyframes node-ping { from { transform: scale(1); opacity: 0.8; } to { transform: scale(3.6); opacity: 0; } }

.motion .pin-app { animation: bob 4s ease-in-out infinite; animation-delay: calc(var(--k, 0) * -0.45s); }
.motion .pin-person { animation: bob 5s ease-in-out infinite; animation-delay: calc(var(--k, 0) * -1.1s); }
@keyframes bob { 50% { transform: translateY(-0.9cqw); } }

/* Multiplayer: the agent's cursor visits each system and leaves a change behind. */
.motion .mp-agent { animation: mp-agent 16s var(--ease) infinite; }
.motion .mp-maya { animation: mp-maya 9s ease-in-out infinite alternate; }
.motion .mp-dani { animation: mp-dani 11s ease-in-out infinite alternate; }
@keyframes mp-agent {
  0% { transform: translate(16cqw, 24cqw); }
  10%, 18% { transform: translate(24cqw, 11cqw); }
  30%, 40% { transform: translate(51cqw, 16cqw); }
  54%, 64% { transform: translate(85cqw, 21cqw); }
  78%, 88% { transform: translate(51cqw, 26cqw); }
  100% { transform: translate(16cqw, 24cqw); }
}
@keyframes mp-maya {
  0% { transform: translate(9cqw, 17cqw); }
  50% { transform: translate(20cqw, 22cqw); }
  100% { transform: translate(11cqw, 10cqw); }
}
@keyframes mp-dani {
  0% { transform: translate(76cqw, 23cqw); }
  50% { transform: translate(92cqw, 26cqw); }
  100% { transform: translate(78cqw, 12cqw); }
}
.motion .mp-tag { animation: mp-on-1 16s linear infinite; }
.motion .mp-event-1::after { animation: mp-on-2 16s linear infinite; }
.motion .mp-fill::after { animation: mp-on-3 16s linear infinite; }
.motion .mp-event-2::after { animation: mp-on-4 16s linear infinite; }
@keyframes mp-on-1 { 0%, 11% { opacity: 0; scale: 0.5; } 13%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
@keyframes mp-on-2 { 0%, 31% { opacity: 0; scale: 0.5; } 33%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
@keyframes mp-on-3 { 0%, 55% { opacity: 0; } 57%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes mp-on-4 { 0%, 79% { opacity: 0; scale: 0.5; } 81%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }

/* ---------- Takeoff tile: a floor plan that gets marked room by room, and a quantities
   table that fills as each room is measured. The still picture is the finished takeoff. ---------- */

.takeoff-plan { display: block; width: 100%; height: auto; margin-top: 22px; overflow: visible; }
.room-fill { opacity: var(--o); }
.room-a { --o: 0.75; --ink: var(--teal); }
.room-b { --o: 0.3; --ink: var(--teal); }
.room-c { --o: 0.85; --ink: var(--coral); }
.room-fill { fill: var(--ink); }
.room-edge { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 100; stroke-dashoffset: 0; }
.room-area {
  fill: var(--deep-ink);
  font-size: 8.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-anchor: middle;
}
.wall { fill: none; stroke: var(--deep-ink); stroke-width: 2; stroke-linecap: square; }
.wall-outer { stroke-width: 3; }
.door { fill: none; stroke: var(--deep-ink); stroke-width: 0.8; opacity: 0.55; }
.takeoff-scan { stroke: var(--deep-ink); stroke-width: 1.2; opacity: 0; }

.tk-table { margin-top: 16px; font-size: 0.9rem; }
.tk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 7px;
  border-top: 1px solid var(--deep-line);
  color: var(--deep-ink-2);
  transition: opacity 0.4s ease;
}
.tk-row dt { display: flex; align-items: center; gap: 8px; }
.tk-row dd { font-variant-numeric: tabular-nums; }
.tk-row b { color: var(--deep-ink); font-weight: 700; }
.tk-total { border-top-color: var(--deep-ink-2); color: var(--deep-ink); font-weight: 600; }
.sw { width: 22px; height: 22px; border-radius: 6px; background: var(--teal); }
.sw-a { opacity: 0.75; }
.sw-b { opacity: 0.3; }
.sw-c { background: var(--coral); opacity: 0.85; }

/* home.js adds .is-marked to each room and .is-on to its table row in turn. */
.motion .takeoff .room-fill { opacity: 0; transition: opacity 0.45s ease 0.45s; }
.motion .takeoff .room-edge { stroke-dashoffset: 100; transition: stroke-dashoffset 0.75s var(--ease); }
.motion .takeoff .room-area { opacity: 0; transition: opacity 0.3s ease 0.7s; }
.motion .takeoff .room.is-marked .room-fill { opacity: var(--o); }
.motion .takeoff .room.is-marked .room-edge { stroke-dashoffset: 0; }
.motion .takeoff .room.is-marked .room-area { opacity: 1; }
.motion .takeoff .tk-row { opacity: 0.38; }
.motion .takeoff .tk-row.is-on { opacity: 1; }

/* ---------- Security: one architecture panel. Channels and AI engines sit outside, each
   behind a labelled gate; the customer's isolated environment is in the middle with a
   live log of what the agent did and what waited for approval. ---------- */

.sec-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 0.7fr) minmax(0, 2.4fr) minmax(110px, 0.7fr) minmax(0, 1fr);
  align-items: center;
  padding: clamp(24px, 3.4vw, 48px);
  border-radius: var(--r-panel);
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.4px);
  background-size: 22px 22px;
}

.sec-side { display: grid; justify-items: center; gap: 14px; }
.sec-side h3 { font-size: 1rem; font-weight: 600; color: var(--ink-2); }
.sec-note { max-width: 9em; font-size: 0.82rem; line-height: 1.4; color: var(--ink-2); text-align: center; }
.sec-logos {
  display: grid;
  grid-template-columns: repeat(2, 48px);
  justify-content: center;
  gap: 10px;
}
.sec-logos li {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  /* App-icon tiles stay white in both themes so brand marks read as intended. */
  background: #FFFFFF;
  color: #0F2524;
  font-size: 23px;
}

.sec-gate { position: relative; height: 84px; }
.sec-line {
  position: absolute;
  top: 50%;
  inset-inline: 0;
  height: 2px;
  background: color-mix(in srgb, var(--teal) 55%, transparent);
}
.sec-pill {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  padding: 0.3em 0.9em;
  border: 1px solid var(--teal);
  border-radius: var(--r-pill);
  background: var(--deep);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.sec-enc {
  position: absolute;
  top: 0;
  inset-inline: 0;
  font-size: 0.72rem;
  color: var(--ink-2);
  text-align: center;
  white-space: nowrap;
}

.sec-vault {
  position: relative;
  display: grid;
  gap: 18px;
  padding: clamp(18px, 2.2vw, 28px);
  border: 1.5px solid color-mix(in srgb, var(--teal) 60%, transparent);
  border-radius: var(--r-panel);
  background: color-mix(in srgb, var(--teal) 12%, var(--deep));
}
.sec-vault::before {
  content: "";
  position: absolute;
  inset: -11px;
  border: 1px dashed color-mix(in srgb, var(--teal) 45%, transparent);
  border-radius: 30px;
  pointer-events: none;
}
.sec-vault header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sec-vault h3 { font-size: 1.15rem; font-weight: 700; }
.sec-lock {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--btn-bg);
  stroke-width: 1.8;
  stroke-linecap: round;
}
.sec-lock rect { fill: color-mix(in srgb, var(--btn-bg) 22%, transparent); }
.sec-badge {
  margin-inline-start: auto;
  padding: 0.2em 0.8em;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.sec-mods { display: flex; flex-wrap: wrap; gap: 8px; }
.sec-mods li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.3em 0.9em;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 0.9rem;
}
.sec-mods .sec-agent { border-color: transparent; background: rgba(255, 255, 255, 0.1); font-weight: 600; }
.sec-mods .mark { width: 30px; }

.sec-log { padding-top: 14px; border-top: 1px solid var(--line); }
.sec-log h4 { font-size: 0.8rem; font-weight: 500; color: var(--ink-2); }
/* Fixed at three rows: a new row pushes the oldest out of view without resizing the panel. */
.sec-log ol { display: block; height: 114px; margin-top: 6px; overflow: hidden; }
.sec-log li {
  display: grid;
  grid-template-columns: 3.1em minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  height: 38px;
  font-size: 0.92rem;
  overflow: hidden;
}
.sec-log li + li { border-top: 1px solid var(--line); }
.sec-log time { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.st {
  padding: 0.12em 0.75em;
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.3s, color 0.3s;
}
.st-wait { background: var(--coral); color: var(--dot-ink); }
.st-ok { background: var(--btn-bg); color: var(--btn-fg); }
.st-done { box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }

@media (max-width: 900px) {
  .sec-panel { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sec-logos { grid-template-columns: repeat(5, 44px); gap: 8px; }
  .sec-logos li { width: 44px; height: 44px; border-radius: 13px; font-size: 21px; }
  .sec-gate { height: 96px; }
  .sec-line { top: 0; bottom: 0; left: 50%; inset-inline: auto; width: 2px; height: auto; translate: -50% 0; }
  .sec-enc { top: calc(50% + 20px); background: none; }
  .sec-enc { inset-inline: auto; left: 50%; translate: -50% 0; padding: 0 6px; background: var(--deep); }
}

/* Motion: traffic flows through the gates, the perimeter breathes. */
.motion .sec-line {
  background: repeating-linear-gradient(to left, var(--teal) 0 8px, transparent 8px 18px);
  background-size: 18px 100%;
  animation: gate-flow 0.8s linear infinite;
}
.motion .sec-gate + .sec-vault + .sec-gate .sec-line { animation-direction: reverse; }
@keyframes gate-flow { to { background-position: -18px 0; } }
@media (max-width: 900px) {
  .motion .sec-line {
    background: repeating-linear-gradient(to bottom, var(--teal) 0 8px, transparent 8px 18px);
    background-size: 100% 18px;
    animation-name: gate-flow-down;
  }
}
@keyframes gate-flow-down { to { background-position: 0 18px; } }
.motion .sec-vault::before { animation: perimeter 3.2s ease-in-out infinite; }
@keyframes perimeter { 50% { opacity: 0.35; inset: -15px; } }

/* ---------- Layer stack planes ---------- */

.plane {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  width: var(--side);
  aspect-ratio: 1;
  translate: -50% -50%;
  transform: scaleY(0.5) rotate(45deg);
  border: 2px solid var(--line-2);
  border-radius: 8%;
  transition: opacity 0.7s, translate 1s var(--ease);
}
.plane-data {
  --cy: var(--cy-data);
  background: var(--surface);
  box-shadow: 1.5cqw 1.5cqw 0 var(--line-2);
}
.plane-brain {
  --cy: var(--cy-brain);
  border-color: var(--teal);
  background:
    repeating-linear-gradient(0deg, transparent 0 calc(12.5% - 1px), color-mix(in srgb, var(--teal) 45%, transparent) calc(12.5% - 1px) 12.5%),
    repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), color-mix(in srgb, var(--teal) 45%, transparent) calc(12.5% - 1px) 12.5%),
    color-mix(in srgb, var(--teal) 26%, transparent);
  box-shadow: 1.5cqw 1.5cqw 0 color-mix(in srgb, var(--teal) 55%, transparent);
}
.plane-team {
  --cy: var(--cy-team);
  border-color: var(--coral);
  background: color-mix(in srgb, var(--coral) 16%, var(--surface));
  box-shadow: 1.5cqw 1.5cqw 0 color-mix(in srgb, var(--coral) 55%, transparent);
}
.motion #ask:not(.is-seen) .plane-team { translate: -50% calc(-50% - 10cqw); opacity: 0; }
.motion #ask:not(.is-seen) .plane-data { translate: -50% calc(-50% + 10cqw); opacity: 0; }
.motion #ask:not(.is-seen) .plane-brain { opacity: 0; }
.motion .plane-brain { transition-delay: 0.35s, 0s; }

/* The multiplayer tile centres its stage in whatever height the row gives it. */
.tile-multi { display: flex; flex-direction: column; }
.tile-multi .mp { margin-block: auto; padding-top: 24px; }
.mp-app { min-height: 44cqw; }
@media (min-width: 901px) {
  /* An odd last logo sits centred under the pairs. */
  .sec-logos li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; }
}

/* Our mark lies flat on the intelligence layer: the agents are that layer. It is turned back
   by 45deg so the two rings sit side by side, and kept translucent so the grid shows through. */
.plane-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 78%;
  translate: -50% -50%;
  rotate: -45deg;
  overflow: visible;
  opacity: 0.7;
}
.plane-mark .mark-agent { stroke: var(--teal-ink); }
.plane-mark .mark-lens { fill: var(--teal); opacity: 0.35; }

/* ==========================================================
   Systems section: a showcase of example systems (one per use case, switched by tabs)
   and, below it, the multiplayer explainer.
   ========================================================== */

.showcase,
.tile-multi { grid-column: span 6; }

.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(24px, 3.6vw, 48px);
}
.showcase h3 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); font-weight: 700; line-height: 1.25; }
.uc-side > p { margin-top: 10px; color: var(--ink-2); }

.uc-tabs { display: grid; gap: 6px; margin-top: 22px; }
.uc-tab {
  position: relative;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--ink-2);
  font-size: 1.05rem;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.uc-tab:hover { color: var(--ink); }
.uc-tab[aria-selected="true"] {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
}
/* A thin line along the bottom of the active tab shows how long this example stays up. */
.uc-progress {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--btn-bg);
  transform: scaleX(0);
  transform-origin: right;
}
html:not(.js) .uc-tabs { display: none; }

.uc-stage { display: grid; }
.uc-slide {
  grid-area: 1 / 1;
  align-self: center;
  width: min(100%, 440px);
  justify-self: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.uc-slide.is-active { opacity: 1; visibility: visible; transition: opacity 0.5s ease 0.15s; }
.uc-desc { color: var(--ink-2); font-size: 0.98rem; }
.uc-slide .takeoff-plan { margin-top: 18px; }

/* Multiplayer row: copy beside the stage. */
.tile-multi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(24px, 3.6vw, 48px);
}
.tile-multi h3 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.25; }
.tile-multi .mp { margin: 0; padding-top: 0; }
.mp-app { min-height: 36cqw; }

@media (max-width: 900px) {
  .showcase,
  .tile-multi { grid-column: span 2; grid-template-columns: minmax(0, 1fr); }
  .uc-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uc-tab { padding: 10px 12px; font-size: 0.95rem; text-align: center; }
  .mp-app { min-height: 44cqw; }
}

/* Motion inside the showcase: each example plays when its slide is the active one. */
.motion .uc-tab[aria-selected="true"] .uc-progress { animation: uc-fill var(--dur, 9s) linear forwards; }
@keyframes uc-fill { to { transform: scaleX(1); } }

/* ---------- Supply chain slide: a small scene. A ship at sea, the port crane, the site.
   One container makes the trip; one is late on the ship; one is missing at the site and
   has been located on the quay. ---------- */

.sup-scene { margin-top: 18px; }
/* Tags are placed in percentages of the drawing itself. */
.sup-canvas { position: relative; }
.sup-svg { display: block; width: 100%; height: auto; overflow: visible; }
.sup-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sup-sea { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: round; opacity: 0.7; }
.sup-hull { fill: rgba(255, 255, 255, 0.08); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.sup-trolley { fill: var(--ink); }
.sup-box { fill: var(--teal); }
.sup-dim { opacity: 0.4; }
.sup-late { fill: var(--coral); }
.sup-found { fill: var(--btn-bg); }
.sup-slot { fill: none; stroke: var(--coral); stroke-width: 1.5; stroke-dasharray: 3 2.5; }
.sup-ping { fill: none; stroke: var(--btn-bg); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.sup-link { fill: none; stroke: var(--coral); stroke-width: 1.4; stroke-dasharray: 2 4; stroke-linecap: round; }
.sup-move { opacity: 0; }

.sup-tag { position: absolute; translate: -50% -100%; font-size: 0.72rem; }
.sup-below { translate: -50% 0; }
.sup-stations { position: relative; height: 1.6em; margin-top: 22px; font-size: 0.85rem; color: var(--ink-2); }
.sup-stations span { position: absolute; translate: -50% 0; white-space: nowrap; }

.motion .uc-supply.is-active .sup-move { animation: sup-trip 9s var(--ease) infinite; }
.motion .uc-supply.is-active .sup-trolley { animation: sup-trolley 9s var(--ease) infinite; }
/* Lifted off the deck, carried along the crane, set down on the quay, then on to the site. */
@keyframes sup-trip {
  0% { opacity: 0; transform: translate(0, 0); }
  6% { opacity: 1; transform: translate(0, 0); }
  16% { transform: translate(0, -21px); }
  34% { transform: translate(-56px, -21px); }
  46%, 54% { transform: translate(-56px, 18px); }
  80%, 92% { opacity: 1; transform: translate(-142px, 4px); }
  100% { opacity: 0; transform: translate(-142px, 4px); }
}
@keyframes sup-trolley {
  0%, 16% { transform: translateX(0); }
  34%, 54% { transform: translateX(-56px); }
  80%, 100% { transform: translateX(0); }
}
.motion .uc-supply.is-active .sup-ping { animation: sup-ping 1.8s ease-out infinite; }
@keyframes sup-ping { from { transform: scale(0.5); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.motion .uc-supply.is-active .sup-sea { animation: sup-sea 2.4s linear infinite; }
@keyframes sup-sea { to { transform: translateX(-12px); } }
.motion .uc-supply.is-active .sup-link { animation: sup-link 1.2s linear infinite; }
@keyframes sup-link { to { stroke-dashoffset: -12; } }

.motion .sup-tag { opacity: 0; }
.motion .uc-supply.is-active .sup-tag { opacity: 1; transition: opacity 0.5s ease 0.8s; }
.motion .uc-supply.is-active .sup-tag:nth-of-type(2) { transition-delay: 1.8s; }
.motion .uc-supply.is-active .sup-tag:nth-of-type(3) { transition-delay: 2.8s; }

/* ---------- Three ways to start. Each glyph is built from the brand rings:
   one person and one agent, a team around one agent, an agent driving an app. ---------- */

.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.way { padding-inline: clamp(20px, 3vw, 44px); }
.way:first-child { padding-inline-start: 0; }
.way:last-child { padding-inline-end: 0; }
.way + .way { border-inline-start: 1px solid var(--line); }
.way-glyph { display: block; width: 168px; max-width: 100%; height: auto; margin-bottom: 22px; overflow: visible; }
.way h3 { font-size: 1.35rem; font-weight: 700; }
.way p { margin-top: 8px; color: var(--ink-2); }
.way .way-meta { margin-top: 14px; color: var(--teal-ink); font-size: 0.95rem; font-weight: 600; }
.ways-cta { margin-top: clamp(32px, 4vw, 52px); }

.g-you { fill: none; stroke: var(--coral); stroke-width: 5; }
.g-agent { fill: none; stroke: var(--teal); stroke-width: 5; }
.g-lens { fill: var(--mint); }
.g-dot { fill: var(--coral); }
.g-line { fill: none; stroke: var(--line-2); stroke-width: 1.6; stroke-linecap: round; }
.g-app { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.g-cell { fill: var(--line); }
.g-cell.on { fill: var(--teal); }
.g-cell.warn { fill: var(--coral); }

@media (max-width: 900px) {
  .ways { grid-template-columns: minmax(0, 1fr); }
  .way { padding: 28px 0; }
  .way:first-child { padding-top: 0; }
  .way + .way { border-inline-start: 0; border-top: 1px solid var(--line); }
}

.motion .ways.is-live .g-team { transform-origin: 80px 45px; animation: way-orbit 40s linear infinite; }
@keyframes way-orbit { to { transform: rotate(360deg); } }
.motion .ways.is-live .g-core { transform-box: fill-box; transform-origin: center; animation: way-pulse 2.8s ease-in-out infinite; }
@keyframes way-pulse { 50% { transform: scale(1.35); } }
.motion .ways.is-live .g-cell.on,
.motion .ways.is-live .g-cell.warn { animation: way-cell 4.5s ease-in-out infinite; animation-delay: calc(var(--k) * 0.35s); }
@keyframes way-cell { 0%, 100% { opacity: 1; } 45% { opacity: 0.25; } }

/* Showcase layout: one centred sentence, a row of pills to pick the example, the example below. */
.showcase {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(28px, 4vw, 48px);
}
.uc-side { display: grid; justify-items: center; gap: clamp(20px, 2.6vw, 30px); text-align: center; }
.showcase h3 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.uc-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-top: 0;
  padding: 6px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.08);
}
.uc-tab {
  padding: 0.6em 1.35em;
  border: 0;
  border-radius: var(--r-pill);
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}
.uc-tab[aria-selected="true"] { border: 0; background: var(--ink); color: var(--deep); }
.uc-tab[aria-selected="true"] .uc-progress { background: var(--teal-ink); height: 3px; }
.uc-stage { width: 100%; }
.uc-slide { width: min(100%, 500px); }
.uc-desc { text-align: center; }
@media (max-width: 900px) {
  .uc-tabs { display: inline-flex; grid-template-columns: none; border-radius: 22px; }
  .uc-tab { padding: 0.5em 1em; font-size: 0.95rem; }
}

/* The time left on the active pill shows as a soft fill behind its label, clipped by the pill. */
.uc-tab { isolation: isolate; }
.uc-progress,
.uc-tab[aria-selected="true"] .uc-progress {
  inset: 0;
  z-index: -1;
  height: auto;
  background: color-mix(in srgb, var(--teal) 34%, transparent);
}
.uc-desc b { color: var(--ink); font-weight: 600; }

/* ---------- Budget slide: cumulative cost against plan. Invoices land on the actual line,
   the forecast runs on from today, and the point where it breaks the budget is flagged. ---------- */

.bd-scene { margin-top: 18px; }
.bd-canvas { position: relative; }
.bd-svg { display: block; width: 100%; height: auto; overflow: visible; }
.bd-grid { fill: none; stroke: var(--line); stroke-width: 1; }
.bd-cap { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 5 4; }
.bd-plan { fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-dasharray: 2 4; stroke-linecap: round; }
.bd-today { fill: none; stroke: var(--ink-2); stroke-width: 1; }
.bd-actual { fill: none; stroke: var(--teal); stroke-width: 3.5; stroke-linecap: round; }
.bd-forecast { fill: none; stroke: var(--coral); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1.5 3.5; }
.bd-inv { fill: var(--deep); stroke: var(--teal); stroke-width: 2.2; transform-box: fill-box; transform-origin: center; }
.bd-now { fill: var(--ink); }
.bd-cross { fill: none; stroke: var(--coral); stroke-width: 1.6; transform-box: fill-box; transform-origin: center; }
.bd-cross-dot { fill: var(--coral); }
.bd-tag { position: absolute; translate: -50% -100%; font-size: 0.72rem; }
.bd-label { position: absolute; translate: -50% -100%; font-size: 0.78rem; color: var(--ink-2); white-space: nowrap; }

.bd-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 30px;
  border-top: 1px solid var(--line);
}
.bd-kpis > div { padding: 14px 4px 0; text-align: center; }
.bd-kpis > div + div { border-inline-start: 1px solid var(--line); }
.bd-kpis dt { font-size: 0.8rem; color: var(--ink-2); }
.bd-kpis dd { margin-top: 2px; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.bd-kpis .is-over dd { color: var(--coral); }

.motion .bd-actual { stroke-dasharray: 100; stroke-dashoffset: 100; }
.motion .uc-budget.is-active .bd-actual { stroke-dashoffset: 0; transition: stroke-dashoffset 3s var(--ease) 0.5s; }
.motion .bd-inv { opacity: 0; transform: scale(0); }
.motion .uc-budget.is-active .bd-inv {
  opacity: 1;
  transform: none;
  transition: opacity 0.3s ease calc(1.1s + var(--k) * 0.65s), transform 0.5s var(--ease) calc(1.1s + var(--k) * 0.65s);
}
.motion .bd-now,
.motion .bd-cross-dot,
.motion .bd-tag,
.motion .bd-forecast { opacity: 0; }
.motion .uc-budget.is-active .bd-now { opacity: 1; transition: opacity 0.3s ease 3.3s; }
.motion .uc-budget.is-active .bd-forecast { opacity: 1; transition: opacity 0.9s ease 3.6s; }
.motion .uc-budget.is-active .bd-cross-dot,
.motion .uc-budget.is-active .bd-tag { opacity: 1; transition: opacity 0.4s ease 4.6s; }
.motion .bd-cross { opacity: 0; }
.motion .uc-budget.is-active .bd-cross { animation: sup-ping 1.8s ease-out 4.6s infinite; }
.motion .bd-kpis .is-over dd { color: var(--ink); }
.motion .uc-budget.is-active .bd-kpis .is-over dd { color: var(--coral); transition: color 0.4s ease 4.6s; }

/* Budget slide extras: one invoice well above the trend is flagged as an anomaly, and the
   agent's notification appears once the forecast breaks the budget. */
.bd-anom { stroke: var(--coral); }
.bd-anom-stem { fill: none; stroke: var(--coral); stroke-width: 1.4; stroke-dasharray: 2 2.5; }
.bd-anom-ring { fill: none; stroke: var(--coral); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; }
.bd-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.9rem;
}
.bd-toast .mark { width: 34px; }
.bd-kpis { margin-top: 16px; }

.motion .bd-anom-stem,
.motion .bd-anom-ring { opacity: 0; }
.motion .uc-budget.is-active .bd-anom-stem { opacity: 1; transition: opacity 0.3s ease 1.9s; }
.motion .uc-budget.is-active .bd-anom-ring { animation: sup-ping 1.8s ease-out 2s infinite; }
.motion .uc-budget.is-active .bd-tag-anom { transition-delay: 2.1s; }
.motion .bd-toast { opacity: 0; transform: translateY(10px); }
.motion .uc-budget.is-active .bd-toast {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease 5.3s, transform 0.6s var(--ease) 5.3s;
}

/* ---------- Facility management slide: the building, and two live readings beside it.
   One reading spikes (an anomaly), the other trends toward its limit (a predicted fault).
   The agent then opens the call itself. ---------- */

.fm-scene {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 3vw, 22px);
  margin-top: 18px;
}
.fm-building { display: block; width: 100%; height: auto; overflow: visible; }
.fm-shell { fill: rgba(255, 255, 255, 0.04); stroke: var(--ink); stroke-width: 2; }
.fm-ground { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.fm-door { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.fm-win { fill: rgba(255, 255, 255, 0.14); }
.fm-win.fm-c { fill: var(--teal); }
.fm-win.fm-a { fill: var(--coral); }
.fm-win.fm-b { fill: none; stroke: var(--coral); stroke-width: 1.5; stroke-dasharray: 3 2; }
.fm-ping { fill: none; stroke: var(--coral); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; opacity: 0; }

.fm-cards { display: grid; gap: 10px; }
.fm-card {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
}
.fm-card p { font-size: 0.82rem; color: var(--ink-2); }
.fm-card svg { display: block; width: 100%; height: auto; overflow: visible; }
.fm-card .st { justify-self: start; font-size: 0.72rem; }
.fm-sp-line,
.fm-hl { fill: none; stroke: var(--teal); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fm-hf { fill: none; stroke: var(--coral); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1.5 4; }
.fm-th { fill: none; stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 4 3; }
.fm-sp-dot,
.fm-h-cross { fill: var(--coral); }
.fm-h-now { fill: var(--ink); }
.fm-sp-ring { fill: none; stroke: var(--coral); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; opacity: 0; }

.motion .fm-sp-line,
.motion .fm-hl { stroke-dasharray: 100; stroke-dashoffset: 100; }
.motion .uc-fm.is-active .fm-sp-line { stroke-dashoffset: 0; transition: stroke-dashoffset 2s linear 0.5s; }
.motion .uc-fm.is-active .fm-hl { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease) 3s; }
.motion .fm-sp-dot,
.motion .fm-h-now,
.motion .fm-h-cross,
.motion .fm-hf,
.motion .fm-card .st { opacity: 0; }
.motion .uc-fm.is-active .fm-sp-dot,
.motion .uc-fm.is-active .fm-card-a .st { opacity: 1; transition: opacity 0.35s ease 2.1s; }
.motion .uc-fm.is-active .fm-sp-ring { animation: sup-ping 1.8s ease-out 2.1s infinite; }
.motion .fm-win.fm-a { fill: rgba(255, 255, 255, 0.14); }
.motion .uc-fm.is-active .fm-win.fm-a { fill: var(--coral); transition: fill 0.35s ease 2.1s; }
.motion .uc-fm.is-active .fm-ping { animation: sup-ping 1.8s ease-out 2.1s infinite; }
.motion .uc-fm.is-active .fm-h-now { opacity: 1; transition: opacity 0.3s ease 4.2s; }
.motion .uc-fm.is-active .fm-hf { opacity: 1; transition: opacity 0.8s ease 4.3s; }
.motion .uc-fm.is-active .fm-h-cross,
.motion .uc-fm.is-active .fm-card-b .st { opacity: 1; transition: opacity 0.35s ease 5s; }
.motion .fm-win.fm-b { stroke: transparent; }
.motion .uc-fm.is-active .fm-win.fm-b { stroke: var(--coral); transition: stroke 0.35s ease 5s; }
.motion .uc-fm.is-active .bd-toast {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease 5.8s, transform 0.6s var(--ease) 5.8s;
}

/* On wide screens each example uses the full width of the tile: the drawing and its
   read-outs sit side by side under the description. */
@media (min-width: 901px) {
  .uc-slide { width: 100%; }
  .uc-desc { font-size: 1.05rem; }

  .uc-slide.takeoff,
  .uc-slide.uc-budget {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(32px, 5vw, 72px);
  }
  .uc-slide.takeoff .uc-desc,
  .uc-slide.uc-budget .uc-desc { grid-column: 1 / -1; }
  .uc-slide.takeoff .takeoff-plan { margin-top: 26px; }
  .uc-slide.takeoff .tk-table { margin-top: 26px; font-size: 1.05rem; }
  .uc-slide.takeoff .tk-row { padding-block: 12px; }

  .uc-slide.uc-budget .bd-scene { grid-column: 1; grid-row: 2 / span 2; margin-top: 26px; }
  .uc-slide.uc-budget .bd-toast { grid-column: 2; grid-row: 2; align-self: end; margin-top: 26px; }
  .uc-slide.uc-budget .bd-kpis { grid-column: 2; grid-row: 3; align-self: start; }

  .fm-scene {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr);
    gap: clamp(24px, 4vw, 56px);
    margin-top: 26px;
  }
  .fm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .fm-card { padding: 16px 18px; gap: 8px; }
  .fm-card p { font-size: 0.95rem; }
  .fm-card .st { font-size: 0.82rem; }
  .uc-fm .bd-toast { width: min(100%, 640px); margin-inline: auto; }

  .sup-scene { width: min(100%, 880px); margin-inline: auto; margin-top: 26px; }
  .sup-tag,
  .bd-tag { font-size: 0.85rem; }
  .bd-label,
  .sup-stations { font-size: 0.95rem; }
  .bd-toast { font-size: 1rem; }
}

/* Scene outlines keep the same weight at any size. */
.sup-line, .sup-hull, .sup-sea, .sup-slot, .sup-link, .sup-ping { vector-effect: non-scaling-stroke; }
.sup-line, .sup-hull { stroke-width: 2.5; }
.sup-sea { stroke-width: 2.5; }
.sup-slot, .sup-link, .sup-ping { stroke-width: 2; }

/* ---------- Left-to-right pages (English) ---------- */
html[lang="en"] {
  --font-display: 'Rubik', 'IBM Plex Sans', system-ui, sans-serif;
  --font-text: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}
html[dir="ltr"] .scrollbar,
html[dir="ltr"] .uc-progress { transform-origin: left; }
/* The planes sit on the far side of the labels. */
html[dir="ltr"] .stack-inner { --cx: 60cqw; }
html[dir="ltr"] .stack-label { width: 28cqw; }
/* Latin words run longer than Hebrew ones, so the headline is set a step smaller. */
html[lang="en"] .hero h1 { font-size: clamp(1.9rem, 3.4vw, 3.05rem); }
html[dir="ltr"] .ticker-track { animation-name: ticker-ltr; }
@keyframes ticker-ltr { to { transform: translateX(-50%); } }
@media (min-width: 901px) {
  html[dir="ltr"] .sec-line { animation-direction: reverse; }
  html[dir="ltr"] .sec-gate + .sec-vault + .sec-gate .sec-line { animation-direction: normal; }
}