/* H2 Softbotics cinematic homepage layer.
   Foreground choreography only. The ambient background (.h2-ambient) stays
   the single visual foundation and is never transformed, remounted or
   reparented here. Every rule below is scoped to html.cine-on, which the
   head script sets only when the visitor has not asked for reduced motion,
   so the original grids remain the reduced motion and no script layout. */

/* Hero depth. Perspective lives on the hero content box so the headline,
   supporting copy and call to action sit on separate depth planes. */
html.cine-on .hero-content{ perspective: 1100px; perspective-origin: 50% 30%; }
html.cine-on .hero-title,
html.cine-on .hero-sub,
html.cine-on .hero-content .cta-row{ transform-origin: 50% 50%; will-change: transform; }

/* Shared pinned stage used by the product rail, the pricing fan and the orbit. */
html.cine-on .cine-pin{
  position: sticky;
  top: var(--header-h, 72px);
  /* The stage ends above the sticky Share and Subscribe bar so cards never sit under it. */
  height: calc(100svh - var(--header-h, 72px) - 60px);
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: clip;
}
html.cine-on .cine-stage{
  display: block;
  position: relative;
  height: 100%;
  margin: 0 !important;
  perspective: var(--cine-persp, 1300px);
  perspective-origin: 50% 46%;
}
html.cine-on .cine-stage > .card,
html.cine-on .cine-stage > .plan{
  position: absolute;
  left: 50%;
  top: 50%;
  height: auto;
  transition: border-color .25s ease, box-shadow .25s ease;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
html.cine-on .cine-stage > .card:hover,
html.cine-on .cine-stage > .plan:hover{ transform: none; }

/* Spatial Product Rail */
html.cine-on .cine-rail .cine-stage > .card{ width: min(88vw, clamp(300px, 40vw, 580px)); }
html.cine-on .cine-rail .cine-stage > .card.is-focal{
  border-color: var(--neon);
  box-shadow: 0 18px 60px rgba(34,211,238,.16), var(--tile-inset);
}

/* Orbital Autopilot Sequence */
html.cine-on .cine-orbit .cine-stage{ perspective-origin: 50% 38%; }
html.cine-on .cine-orbit .cine-stage > .card{ width: calc(min(84vw, clamp(290px, 31vw, 480px)) * var(--orbit-card-k, 1)); }
/* Short landscape screens get wider, shorter cards so each step still fits
   its pinned stage whole and the orbit keeps running. */
@media (orientation: landscape) and (max-height: 560px){
  html.cine-on .cine-orbit .cine-stage > .card,
  html.cine-on .cine-rail .cine-stage > .card{ width: min(78vw, 620px); }
}
html.cine-on .cine-orbit .cine-stage > .card.is-focal{
  border-color: var(--neon2);
  box-shadow: 0 18px 64px rgba(167,139,250,.24), var(--tile-inset);
}
/* Spatial Pricing Fan. Three plans share one stage and resolve into a
   shallow comparison arc; the width leaves gutters between all three. */
html.cine-on .cine-fan .cine-stage{ perspective-origin: 50% 42%; }
html.cine-on .cine-fan .cine-stage > .plan{ width: min(calc((100vw - 104px) / 3), 460px); }
html.cine-on .cine-fan .cine-stage > .plan.is-focal{
  border-color: var(--neon);
  box-shadow: 0 18px 60px rgba(34,211,238,.16), var(--tile-inset);
}

/* The orbit track. A faint ellipse that makes the invisible axis legible. */
html.cine-on .cine-orbit .cine-track{
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--orbit-track-w, 70%);
  height: var(--orbit-track-h, 120px);
  transform: translate(-50%, -12%);
  border-radius: 50%;
  border: 1px solid rgba(167,139,250,.22);
  box-shadow: 0 0 40px rgba(167,139,250,.10) inset;
  pointer-events: none;
}
.cine-track{ display: none; }
html.cine-on .cine-orbit .cine-track{ display: block; }

/* A scene that cannot fit its stage falls back to the original grid. */
html.cine-on .cine-static .cine-pin{ position: static; height: auto; width: auto; margin-inline: 0; overflow: visible; }
html.cine-on .cine-static .cine-stage{ display: grid; height: auto; perspective: none; }
html.cine-on .cine-static .cine-stage > .card,
html.cine-on .cine-static .cine-stage > .plan{ position: relative; left: auto; top: auto; width: auto; height: 100%; transform: none !important; opacity: 1 !important; }
html.cine-on .cine-static .cine-track{ display: none; }
/* A static orbit on a short landscape screen reads in two columns, not four slivers. */
@media (orientation: landscape) and (max-height: 560px) and (min-width: 700px){
  html.cine-on .cine-orbit.cine-static .cine-stage{ grid-template-columns: repeat(2, 1fr); }
}

/* Autopilot steps carry their relocated assurances beneath the instruction,
   inside the same card, divided by one quiet rule. */
.step-assure{ width: 100%; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--border); }
.step-assure h4{ margin: .45rem 0 .2rem; }
.step-assure h4:first-child{ margin-top: 0; }
.step-assure p{ margin: 0; }

/* Corridor targets carry inline transforms during approach and departure. */
html.cine-on [data-cine-corridor]{ transform-origin: 50% 0%; }

/* Unified FAQ accordion. One shared card, one row per question. */
#faqs .faq-panel{
  padding: 0;
  height: auto;
  overflow: hidden;
}
#faqs .faq-panel:hover{ transform: none; border-color: var(--border); box-shadow: var(--tile-inset); }
#faqs .faq-row + .faq-row{ border-top: 1px solid var(--border); }
#faqs .faq-q{ margin: 0; font-size: inherit; line-height: inherit; }
#faqs .faq-trigger{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: clamp(11px,1.3vw,15px) clamp(14px,1.8vw,22px);
  border: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease, background-color .2s ease;
}
#faqs .faq-trigger:hover{ background: rgba(103,232,249,.05); }
#faqs .faq-trigger[aria-expanded="true"]{ color: var(--neon); background: rgba(103,232,249,.06); }
#faqs .faq-trigger:focus-visible{ outline: 2px solid var(--neon); outline-offset: -3px; border-radius: 10px; }
#faqs .faq-chevron{
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: var(--neon);
  transition: transform .32s cubic-bezier(.2,.7,.2,1);
}
#faqs .faq-trigger[aria-expanded="true"] .faq-chevron{ transform: rotate(180deg); }
#faqs .faq-a{ overflow: hidden; transition: height .34s cubic-bezier(.2,.7,.2,1); }
#faqs .faq-a__inner{ padding: 0 clamp(14px,1.8vw,22px) clamp(12px,1.4vw,16px); }
#faqs .faq-a p{ margin: 0; max-width: 78ch; color: var(--fg); font-size: .9rem; line-height: 1.35; }

@media (prefers-reduced-motion: reduce){
  #faqs .faq-a, #faqs .faq-chevron, #faqs .faq-trigger{ transition: none; }
}
html.cine-reduced #faqs .faq-a,
html.cine-reduced #faqs .faq-chevron{ transition: none; }