/* Stream24 design system layer.
   Loaded after the compiled Tailwind sheet. Everything here is unlayered on purpose, so it
   wins over Tailwind's layered utilities. Keep selectors narrow: a bare element selector
   here beats a utility class on that element.

   Contents
   1  Tokens
   2  Base, focus, skip link
   3  Typography hierarchy
   4  Vertical rhythm
   5  Motion: page entrance, scroll reveal, interaction
   6  Navigation: desktop, mobile
   7  Page transitions
   8  Studio film (pinned stage)
   9  Components: hero signal path, cards, feature explorer
   10 Legacy rules carried over from the first WordPress theme
*/

/* 1 ─ Tokens ─────────────────────────────────────────────────────────── */
:root {
  --s24-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --s24-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --s24-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --s24-dur-1: 150ms;
  --s24-dur-2: 240ms;
  --s24-dur-3: 420ms;
  --s24-dur-4: 700ms;
  --s24-section-y: clamp(3.5rem, 2rem + 4.5vw, 5.5rem);
  --s24-header-h: 4rem;
  --s24-radius-card: 14px;
  --s24-radius-control: 10px;
  --s24-green: #00c896;
  --s24-green-line: color-mix(in srgb, #00c896 38%, transparent);
  --s24-green-wash: color-mix(in srgb, #00c896 9%, transparent);
}
@media (min-width: 1024px) {
  :root { --s24-header-h: 5rem; }
}

/* Contrast: text tokens adjusted to meet WCAG AA (4.5:1) against every surface they sit on. The brand green
   #00c896 is unchanged and stays the fill, glow and dark-theme text colour; only the light theme's text green
   is deepened (brand identity v1.2 section 3.4 allows this), and the muted greys are lifted. */
:root {
  --color-link: #007a5e;
  --color-slate-dim: #6b6f7e;
  --color-red: #c8283a;
}
:root[data-theme="dark"] {
  --color-slate: #9a9db1;
  --color-slate-dim: #81849a;
  --color-red: #ff4757;
}

/* 2 ─ Base ───────────────────────────────────────────────────────────── */
html { scroll-padding-top: calc(var(--s24-header-h) + 1rem); }
/* <body> must never be a scroll container, or every position: sticky element on the page stops sticking.
   Some browser extensions inject `.page { overflow: auto }`, which hits WordPress's body.page class (Josh's
   Chrome, 9 Oct: the Studio film never pinned and left a 600px gap). Higher specificity than such rules;
   the nav-open lock below has equal specificity and comes later, so it still wins. */
html body[class] { overflow: visible; }
/* <main> is a flex item of the column-flex <body>. Flex items default to min-width:auto, so any descendant
   with a minimum width (a 640px comparison table inside its own scroller, say) used to force the whole page
   wider than the screen. Letting main shrink keeps that scrolling inside the table. */
body > main, body > footer, body > header { min-width: 0; max-width: 100%; }
/* Scroll wrappers must be positioned. An absolutely positioned child (every .sr-only label in a table cell)
   whose containing block is outside the scroller escapes the clip and widens the whole page. */
.overflow-x-auto, .overflow-auto, .overflow-y-auto { position: relative; }
img, video { max-width: 100%; }
:focus-visible { outline: 2px solid var(--color-green); outline-offset: 3px; border-radius: 6px; }
a.rounded-pill:focus-visible, button.rounded-pill:focus-visible { border-radius: 9999px; }

.s24-skip {
  position: fixed; left: 1rem; top: 0.75rem; z-index: 100;
  transform: translateY(-200%);
  padding: 0.6rem 1rem; border-radius: 10px;
  background: var(--color-cloud); color: var(--color-void);
  font-size: 0.875rem; font-weight: 600;
  transition: transform var(--s24-dur-2) var(--s24-ease);
}
.s24-skip:focus { transform: none; }

/* 3 ─ Typography hierarchy ───────────────────────────────────────────────
   DM Sans 800  page titles (H1) and the homepage headline only.
   Syne         section titles, feature headings, display accents.
   DM Sans      body, navigation, buttons, labels, forms.                      */
h1 {
  font-family: var(--font-title);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
  font-optical-sizing: auto;
}
.text-display-1 { font-size: clamp(2.05rem, 1.35rem + 2.7vw, 3.75rem); line-height: 1.04; }
.hero-headline { font-size: clamp(2.3rem, 1.15rem + 4.2vw, 4.75rem); letter-spacing: -0.04em; line-height: 1.02; }
h2, h3, h4 { font-family: var(--font-syne); letter-spacing: -0.02em; }
h2.text-display-2, h2.text-display-3, h2.text-display-1 { font-weight: 700; }
.font-display { font-family: var(--font-syne); }
.text-lede { line-height: 1.6; }
body { font-feature-settings: "kern", "liga", "calt"; }
p, li { text-wrap: pretty; }
.s24-eyebrow, [class*="uppercase"][class*="tracking-"] { font-family: var(--font-dm-sans); }

/* 4 ─ Vertical rhythm ────────────────────────────────────────────────────
   One token drives the standard section padding. Two plain sections that touch share
   their seam instead of doubling it.                                            */
.py-16.lg\:py-22 { padding-block: var(--s24-section-y); }
.py-12.lg\:py-16 { padding-block: calc(var(--s24-section-y) * 0.72); }
/* Two plain sections that touch share the seam. Banded sections (a background colour or border) keep
   their full padding, because the band is what needs the room. */
.py-16.lg\:py-22:not([class*="bg-surface"]):not([class*="bg-navy"]):not([class*="border-y"]) + .py-16.lg\:py-22:not([class*="bg-surface"]):not([class*="bg-navy"]):not([class*="border-y"]) {
  padding-top: calc(var(--s24-section-y) * 0.5);
}
.py-12.lg\:py-16:not([class*="bg-surface"]) + .py-12.lg\:py-16:not([class*="bg-surface"]) { padding-top: calc(var(--s24-section-y) * 0.36); }
.s24-section-tight { padding-block: calc(var(--s24-section-y) * 0.6); }
.s24-section-flush-top { padding-top: 0 !important; }

/* 5 ─ Motion ─────────────────────────────────────────────────────────── */

/* 5a  Entrance on first paint (CSS only, so it runs with or without JS) */
@keyframes s24-rise {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes s24-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes s24-rise-scale {
  from { opacity: 0; transform: translate3d(0, 28px, 0) scale(0.975); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .s24-enter > * { animation: s24-rise 760ms var(--s24-ease) both; }
  .s24-enter > :nth-child(1) { animation-delay: 40ms; }
  .s24-enter > :nth-child(2) { animation-delay: 120ms; }
  .s24-enter > :nth-child(3) { animation-delay: 220ms; }
  .s24-enter > :nth-child(4) { animation-delay: 300ms; }
  .s24-enter > :nth-child(5) { animation-delay: 380ms; }
  .s24-enter > :nth-child(n+6) { animation-delay: 440ms; }
  .s24-enter h1 > .block { animation: s24-rise 820ms var(--s24-ease) both; }
  .s24-enter h1 > .block:nth-child(1) { animation-delay: 110ms; }
  .s24-enter h1 > .block:nth-child(2) { animation-delay: 210ms; }
  .s24-enter-visual { animation: s24-rise-scale 980ms var(--s24-ease) 420ms both; }
}

/* 5b  Scroll reveal. IntersectionObserver adds .s24-io to <html> only when it can drive the
   reveal and the visitor has not asked for reduced motion. Without .s24-io every element is
   simply visible, which is also what crawlers and no-JS visitors get. */
.s24-io .s24-reveal,
.s24-io .s24-reveal-left,
.s24-io .s24-reveal-right,
.s24-io .s24-reveal-scale,
.s24-io [data-s24-stagger] > * {
  animation: none;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity var(--s24-dur-4) var(--s24-ease), transform var(--s24-dur-4) var(--s24-ease);
  transition-delay: var(--s24-delay, 0ms);
}
.s24-io .s24-reveal-left { transform: translate3d(-18px, 8px, 0); }
.s24-io .s24-reveal-right { transform: translate3d(18px, 8px, 0); }
.s24-io .s24-reveal-scale { transform: translate3d(0, 24px, 0) scale(0.975); }
.s24-io .s24-reveal.is-in,
.s24-io .s24-reveal-left.is-in,
.s24-io .s24-reveal-right.is-in,
.s24-io .s24-reveal-scale.is-in,
.s24-io [data-s24-stagger].is-in > * {
  opacity: 1;
  transform: none;
}
.s24-stagger-1 { --s24-delay: 70ms; }
.s24-stagger-2 { --s24-delay: 140ms; }
.s24-stagger-3 { --s24-delay: 210ms; }
.s24-io [data-s24-stagger] > :nth-child(1) { --s24-delay: 0ms; }
.s24-io [data-s24-stagger] > :nth-child(2) { --s24-delay: 70ms; }
.s24-io [data-s24-stagger] > :nth-child(3) { --s24-delay: 140ms; }
.s24-io [data-s24-stagger] > :nth-child(4) { --s24-delay: 210ms; }
.s24-io [data-s24-stagger] > :nth-child(5) { --s24-delay: 280ms; }
.s24-io [data-s24-stagger] > :nth-child(n+6) { --s24-delay: 340ms; }

/* Masked image reveal, for product shots that should feel drawn in, not faded in. */
.s24-io .s24-clip {
  clip-path: inset(6% 4% 10% 4% round 14px);
  opacity: 0.001;
  transition: clip-path 900ms var(--s24-ease), opacity 500ms var(--s24-ease);
}
.s24-io .s24-clip.is-in { clip-path: inset(0 0 0 0 round 0); opacity: 1; }

/* 5c  Interaction */
a.rounded-pill, button.rounded-pill, .s24-btn {
  transition: background-color var(--s24-dur-2) var(--s24-ease), border-color var(--s24-dur-2) var(--s24-ease),
    color var(--s24-dur-2) var(--s24-ease), box-shadow var(--s24-dur-3) var(--s24-ease), transform var(--s24-dur-2) var(--s24-ease);
}
@media (hover: hover) {
  a.rounded-pill:hover, button.rounded-pill:hover { transform: translateY(-1px); }
  a.bg-green:hover, a.bg-cta:hover { box-shadow: 0 8px 28px -10px var(--color-green-glow, rgba(0, 200, 150, 0.45)); }
}
a.rounded-pill:active, button.rounded-pill:active { transform: scale(0.98); transition-duration: 90ms; }
a.rounded-pill svg { transition: transform var(--s24-dur-2) var(--s24-ease); }
@media (hover: hover) {
  a.rounded-pill:hover svg:last-child { transform: translateX(2px); }
}

/* Cards: one shared hover grammar. Add .s24-card to a card, .s24-card-media to its image. */
.s24-card {
  transition: transform var(--s24-dur-3) var(--s24-ease), border-color var(--s24-dur-2) var(--s24-ease),
    box-shadow var(--s24-dur-3) var(--s24-ease), background-color var(--s24-dur-2) var(--s24-ease);
}
.s24-card-media { overflow: hidden; }
.s24-card-media > img, .s24-card-media > video { transition: transform 900ms var(--s24-ease); }
.s24-card-icon { transition: transform var(--s24-dur-3) var(--s24-ease), background-color var(--s24-dur-2) var(--s24-ease); }
@media (hover: hover) {
  .s24-card:hover, .s24-card:focus-within {
    transform: translateY(-2px);
    border-color: var(--s24-green-line);
    box-shadow: 0 18px 40px -26px rgba(15, 17, 23, 0.4);
  }
  :root[data-theme="dark"] .s24-card:hover { box-shadow: 0 18px 44px -24px rgba(0, 0, 0, 0.8); }
  .s24-card:hover .s24-card-media > img, .s24-card:hover .s24-card-media > video { transform: scale(1.035); }
  .s24-card:hover .s24-card-icon { transform: translateY(-1px) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .s24-card, .s24-card-media > img, .s24-card-icon, a.rounded-pill, button.rounded-pill { transition: none; }
  .s24-card:hover { transform: none; }
}

/* 6 ─ Navigation ───────────────────────────────────────────────────────── */

/* Header chrome: state comes from data-scrolled, not utility toggling. The blurred backdrop lives on a
   pseudo-element: backdrop-filter on the header itself would make it the containing block of the fixed
   mobile menu and shrink that menu to the header's height. */
[data-s24-header] { border-bottom-color: transparent; transition: border-color var(--s24-dur-3) var(--s24-ease); }
[data-s24-header]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--color-void) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  opacity: 0; transition: opacity var(--s24-dur-3) var(--s24-ease);
}
[data-s24-header][data-scrolled="true"],
.s24-nav-open [data-s24-header] { border-bottom-color: var(--color-border); }
[data-s24-header][data-scrolled="true"]::before,
.s24-nav-open [data-s24-header]::before { opacity: 1; }
.s24-nav-open [data-s24-header]::before { background: var(--color-void); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-s24-header]::before { background: var(--color-void); }
}

/* Desktop nav row */
[data-s24-nav] { position: relative; }
.s24-nav-pill {
  position: absolute; left: 0; top: 0; z-index: 0;
  height: 2.25rem; width: 0; border-radius: 9999px;
  background: color-mix(in srgb, var(--color-cloud) 6%, transparent);
  opacity: 0; pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: transform var(--s24-dur-3) var(--s24-ease), width var(--s24-dur-3) var(--s24-ease), opacity var(--s24-dur-2) var(--s24-ease);
}
.s24-nav-pill[data-on="true"] { opacity: 1; }
[data-s24-nav] .s24-nav-item { position: relative; z-index: 1; }
[data-s24-nav] .s24-nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap;
  border-radius: 9999px; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 500;
  color: color-mix(in srgb, var(--color-cloud) 78%, transparent);
  transition: color var(--s24-dur-2) var(--s24-ease);
}
[data-s24-nav] .s24-nav-link:hover,
[data-s24-nav] .s24-nav-link:focus-visible,
[data-s24-nav] .s24-nav-item.is-open > .s24-nav-link { color: var(--color-cloud); }
[data-s24-nav] .s24-nav-link[aria-current="page"] { color: var(--color-cloud); }
[data-s24-nav] .s24-nav-link[aria-current="page"]::after,
[data-s24-nav] .s24-nav-item.has-current > .s24-nav-link::after {
  content: ""; position: absolute; left: 50%; bottom: 0.1rem; width: 1rem; height: 2px; margin-left: -0.5rem;
  border-radius: 2px; background: var(--color-green);
}
[data-s24-nav] .s24-nav-link svg { transition: transform var(--s24-dur-3) var(--s24-ease); }
[data-s24-nav] .s24-nav-item.is-open > .s24-nav-link svg { transform: rotate(180deg); }

/* Dropdown panel: opacity + translate + scale, attached to its trigger by transform-origin.
   visibility is delayed on close so the exit animates and nothing stays in the tab order. */
[data-s24-menu] .s24-panel-wrap { visibility: hidden; pointer-events: none; transition: visibility 0s linear var(--s24-dur-2); }
[data-s24-menu] [data-s24-panel] {
  opacity: 0; transform: translate3d(0, -6px, 0) scale(0.985); pointer-events: none;
  transform-origin: var(--s24-ox, 50%) 0;
  transition: opacity var(--s24-dur-2) var(--s24-ease), transform var(--s24-dur-3) var(--s24-ease);
}
[data-s24-menu].is-open .s24-panel-wrap { visibility: visible; pointer-events: auto; transition-delay: 0s; }
[data-s24-menu].is-open [data-s24-panel] { opacity: 1; transform: none; pointer-events: auto; }

/* Panels are near-opaque so page content never ghosts through the menu. */
[data-s24-panel] > div { background-color: color-mix(in srgb, var(--color-surface) 98%, transparent); }

/* Sliding highlight inside dropdowns */
.s24-hl-host { position: relative; }
.s24-hl {
  position: absolute; left: 0; top: 0; z-index: 0; border-radius: 10px; pointer-events: none;
  background: color-mix(in srgb, var(--color-cloud) 6%, transparent);
  opacity: 0; transform: translate3d(0, 0, 0);
  transition: transform var(--s24-dur-3) var(--s24-ease), width var(--s24-dur-3) var(--s24-ease), height var(--s24-dur-3) var(--s24-ease), opacity var(--s24-dur-2) var(--s24-ease);
}
.s24-hl[data-on="true"] { opacity: 1; }
.s24-menu-link { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.s24-menu-link .s24-menu-arrow {
  flex: none; opacity: 0; transform: translateX(-4px); color: var(--color-green);
  transition: opacity var(--s24-dur-2) var(--s24-ease), transform var(--s24-dur-3) var(--s24-ease);
}
.s24-menu-link:hover .s24-menu-arrow, .s24-menu-link:focus-visible .s24-menu-arrow, .s24-menu-link[aria-current="page"] .s24-menu-arrow { opacity: 1; transform: none; }
.s24-menu-link[aria-current="page"] { color: var(--color-cloud); }
[data-s24-products] [data-frame] { transform: scale(1.02); transition: opacity var(--s24-dur-3) var(--s24-ease), transform 700ms var(--s24-ease); }
[data-s24-products] [data-frame].is-active { transform: none; }
.s24-menu-swap { transition: opacity var(--s24-dur-2) var(--s24-ease); }
.s24-menu-swap.is-swapping { opacity: 0; }

/* Mobile menu: a fixed layer with a root list and drill-down panels. */
.s24-burger { position: relative; width: 2.5rem; height: 2.5rem; border-radius: 0.6rem; color: var(--color-cloud); }
.s24-burger span {
  position: absolute; left: 0.65rem; right: 0.65rem; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform var(--s24-dur-3) var(--s24-ease), opacity var(--s24-dur-2) var(--s24-ease), top var(--s24-dur-3) var(--s24-ease);
}
.s24-burger span:nth-child(1) { top: 0.95rem; }
.s24-burger span:nth-child(2) { top: 1.2rem; }
.s24-burger span:nth-child(3) { top: 1.45rem; }
.s24-burger[aria-expanded="true"] span:nth-child(1) { top: 1.2rem; transform: rotate(45deg); }
.s24-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.s24-burger[aria-expanded="true"] span:nth-child(3) { top: 1.2rem; transform: rotate(-45deg); }

.s24-mobile {
  position: fixed; inset: var(--s24-header-h) 0 0 0; z-index: 40;
  display: flex; flex-direction: column; background: var(--color-void);
  visibility: hidden; opacity: 0; transform: translate3d(0, -8px, 0);
  transition: opacity var(--s24-dur-3) var(--s24-ease), transform var(--s24-dur-3) var(--s24-ease), visibility 0s linear var(--s24-dur-3);
  overscroll-behavior: contain;
}
.s24-mobile[data-open="true"] { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
@media (min-width: 768px) { .s24-mobile { display: none; } }
.s24-mobile-viewport { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.s24-mobile-pane {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 0.5rem 1.5rem calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
  transition: transform var(--s24-dur-4) var(--s24-ease), opacity var(--s24-dur-3) var(--s24-ease), visibility 0s linear var(--s24-dur-4);
}
.s24-mobile-root { transform: none; transition: transform var(--s24-dur-4) var(--s24-ease), opacity var(--s24-dur-3) var(--s24-ease), visibility 0s linear 0s; }
.s24-mobile[data-view]:not([data-view="root"]) .s24-mobile-root {
  transform: translate3d(-22%, 0, 0); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform var(--s24-dur-4) var(--s24-ease), opacity var(--s24-dur-3) var(--s24-ease), visibility 0s linear var(--s24-dur-4);
}
.s24-mobile-sub { transform: translate3d(100%, 0, 0); visibility: hidden; }
.s24-mobile-sub.is-active { transform: none; visibility: visible; transition-delay: 0s; }
.s24-mobile-row {
  display: flex; width: 100%; align-items: center; justify-content: space-between; text-align: left;
  border-bottom: 1px solid var(--color-border); padding: 1rem 0; min-height: 3.25rem;
  font-size: 1.0625rem; font-weight: 500; color: var(--color-cloud);
}
.s24-mobile-row svg { color: var(--color-slate); }
.s24-mobile-back {
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0.5rem -0.5rem; padding: 0.75rem 0.5rem; min-height: 2.75rem;
  font-size: 0.9375rem; font-weight: 600; color: var(--color-green);
}
.s24-mobile-title { font-family: var(--font-syne); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin: 0.25rem 0 0.5rem; color: var(--color-cloud); }
.s24-mobile-foot { border-top: 1px solid var(--color-border); padding: 1rem 1.5rem calc(env(safe-area-inset-bottom, 0px) + 1rem); background: var(--color-void); }
@media (prefers-reduced-motion: no-preference) {
  .s24-mobile[data-open="true"] .s24-mobile-root > * { animation: s24-rise 520ms var(--s24-ease) both; }
  .s24-mobile[data-open="true"] .s24-mobile-root > :nth-child(2) { animation-delay: 40ms; }
  .s24-mobile[data-open="true"] .s24-mobile-root > :nth-child(3) { animation-delay: 80ms; }
  .s24-mobile[data-open="true"] .s24-mobile-root > :nth-child(4) { animation-delay: 120ms; }
  .s24-mobile[data-open="true"] .s24-mobile-root > :nth-child(5) { animation-delay: 160ms; }
  .s24-mobile-sub.is-active li { animation: s24-rise 480ms var(--s24-ease) both; }
  .s24-mobile-sub.is-active li:nth-child(2) { animation-delay: 30ms; }
  .s24-mobile-sub.is-active li:nth-child(3) { animation-delay: 60ms; }
  .s24-mobile-sub.is-active li:nth-child(4) { animation-delay: 90ms; }
  .s24-mobile-sub.is-active li:nth-child(5) { animation-delay: 120ms; }
  .s24-mobile-sub.is-active li:nth-child(n+6) { animation-delay: 150ms; }
}
@media (prefers-reduced-motion: reduce) {
  .s24-mobile, .s24-mobile-pane { transition: opacity 120ms linear, visibility 0s; transform: none !important; }
}
/* Without JavaScript the burger cannot open anything, so show the whole menu as a plain list. */
html:not(.s24-js) .s24-burger { display: none; }
html:not(.s24-js) .s24-mobile { position: static; visibility: visible; opacity: 1; transform: none; max-height: none; }
html:not(.s24-js) .s24-mobile-viewport { overflow: visible; }
html:not(.s24-js) .s24-mobile-pane { position: static; transform: none; visibility: visible; overflow: visible; padding-bottom: 0.5rem; }
html:not(.s24-js) [data-s24-drill], html:not(.s24-js) .s24-mobile-back { display: none; }
html:not(.s24-js) .s24-mobile-foot { display: none; }
html.s24-nav-open, html.s24-nav-open body { overflow: hidden; }
html.s24-nav-open body { touch-action: none; }
html.s24-nav-open .s24-mobile-pane { touch-action: pan-y; }

/* 7 ─ Page transitions ─────────────────────────────────────────────────────
   Cross-document view transitions: browsers that support them cross-fade between pages while
   the header stays put. Browsers that do not simply navigate; the entrance animation above
   covers them. Short on purpose, and never under reduced motion.                               */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .s24-header-bar { view-transition-name: s24-header; }
  ::view-transition-old(root) { animation: 160ms var(--s24-ease-soft) both s24-vt-out; }
  ::view-transition-new(root) { animation: 280ms var(--s24-ease) both s24-vt-in; }
  ::view-transition-group(s24-header) { animation-duration: 0s; }
}
@keyframes s24-vt-out { to { opacity: 0; transform: translate3d(0, -4px, 0); } }
@keyframes s24-vt-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } }

/* 8 ─ Studio film (pinned stage) ────────────────────────────────────────────
   Default layout is stacked: copy, then the product frame, then the steps. That is what phones,
   reduced-motion visitors and no-JS visitors get. When theme.js sets .s24-pin (desktop, motion
   allowed) the frame is pinned and grows as the page scrolls. theme.js measures the stage so it is
   only as tall as the frame and copy need, which is what removes the dead space below the frame
   on tall and portrait screens.                                                                  */
[data-s24-film] {
  --film-gutter: 1.5rem;
  --film-w: min(calc(100vw - var(--film-gutter) * 2), 1920px, calc((100vh - 8.5rem) * 16 / 9));
}
.s24-film-stage { position: relative; overflow: hidden; padding: 4rem 0 0; }
.s24-film-copywrap { position: relative; }
.s24-film-framewrap { position: relative; margin-top: 2.5rem; padding-inline: 1rem; }
.s24-film-frame { width: 100%; max-width: 72rem; margin-inline: auto; }
.s24-pin .s24-film-track { height: calc(min(var(--film-stage, 100vh), 1240px) + min(var(--film-pin, 46vh), 520px)); }
.s24-pin .s24-film-stage { position: sticky; top: var(--film-stick, 0px); height: min(var(--film-stage, 100vh), 1240px); padding: 0; }
.s24-pin .s24-film-copywrap { position: absolute; inset-inline: 0; top: var(--film-copy-top, clamp(4rem, 9vh, 6.5rem)); }
.s24-pin .s24-film-framewrap {
  position: absolute; inset: 0; margin: 0; padding: 4rem var(--film-gutter) 0;
  display: flex; align-items: center; justify-content: center;
}
.s24-pin .s24-film-frame { transform-origin: 50% 0; }
.s24-scrub .s24-film-frame { transform-origin: 50% 100%; }
@media (min-width: 768px) { .s24-film-frame { width: var(--film-w); max-width: 1920px; } }
.s24-film-steps { padding-top: 2rem; padding-bottom: 3.5rem; }
@media (min-width: 1024px) { .s24-film-steps { padding-bottom: 4.5rem; } }
.s24-pin .s24-film-steps { padding-top: 1.5rem; }

/* Touch targets: footer links and carousel dots were 8 to 16px tall. */
footer a { display: inline-flex; align-items: center; min-height: 1.75rem; }
footer a.rounded-pill, footer a.rounded-full { min-height: 0; }
[role="group"][aria-label="Choose a feature"] { gap: 1.1rem; }
[data-s24-carousel-dot] { position: relative; }
[data-s24-carousel-dot]::before { content: ""; position: absolute; inset: -9px -5px; }
.s24-flow-card.is-active { border-color: var(--s24-green-line); box-shadow: 0 18px 40px -28px var(--color-green-glow); }

/* Standalone links get a 24px minimum (set by theme.js). */
.s24-tap { display: inline-flex; align-items: center; min-height: 1.5rem; }

/* A failed image must not leave a hole or a broken-image icon. */
img[data-s24-failed] { visibility: hidden; }

/* 9 ─ Components ───────────────────────────────────────────────────────── */

/* Hero signal path: one stream in, Stream24, every platform out. */
.s24-path { position: relative; display: grid; gap: 0.75rem; align-items: center; }
@media (min-width: 768px) { .s24-path { grid-template-columns: auto minmax(2rem, 1fr) auto minmax(2rem, 1fr) auto; gap: 0.5rem; } }
.s24-path-node {
  display: inline-flex; align-items: center; gap: 0.6rem; border-radius: 12px; padding: 0.6rem 0.85rem;
  background: var(--color-surface); border: 1px solid var(--color-border-strong);
  font-size: 0.8125rem; font-weight: 600; color: var(--color-cloud); white-space: nowrap;
}
.s24-path-node small { display: block; font-size: 0.6875rem; font-weight: 500; color: var(--color-slate); letter-spacing: 0.02em; }
.s24-path-node--core { border-color: var(--s24-green-line); background: color-mix(in srgb, var(--s24-green) 8%, var(--color-surface)); }
.s24-path-live { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; color: var(--color-link); }
.s24-path-live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.s24-path-link { position: relative; height: 2px; min-width: 2rem; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--s24-green-line) 0 6px, transparent 6px 12px); overflow: hidden; }
.s24-path-link::after {
  content: ""; position: absolute; top: -1px; left: 0; width: 28px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, transparent, var(--s24-green), transparent); opacity: 0.9;
}
@media (max-width: 767px) {
  .s24-path { justify-items: center; }
  .s24-path-link { width: 2px; height: 1.5rem; min-width: 0; background: repeating-linear-gradient(180deg, var(--s24-green-line) 0 6px, transparent 6px 12px); }
  .s24-path-link::after { top: 0; left: -1px; width: 4px; height: 24px; background: linear-gradient(180deg, transparent, var(--s24-green), transparent); }
}
@media (prefers-reduced-motion: no-preference) {
  .s24-path-link::after { animation: s24-path-run 2.4s var(--s24-ease-inout) infinite; }
  .s24-path-link--b::after { animation-delay: 0.5s; }
  .s24-path-live i { animation: s24-pulse 1.8s ease-in-out infinite; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  @keyframes s24-path-run { from { transform: translateX(-30px); } to { transform: translateX(calc(100% + 120px)); } }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  @keyframes s24-path-run { from { transform: translateY(-26px); } to { transform: translateY(2.5rem); } }
}
@keyframes s24-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.s24-path-dests { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem; max-width: 22rem; }
.s24-path-dest {
  display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: 9px; color: #fff;
  transition: transform var(--s24-dur-3) var(--s24-ease);
}
.s24-path-dest svg { width: 1rem; height: 1rem; }
@media (hover: hover) { .s24-path-dest:hover { transform: translateY(-2px) scale(1.06); } }
.s24-path-more { display: inline-flex; height: 2rem; align-items: center; border-radius: 9px; padding: 0 0.55rem; font-size: 0.75rem; font-weight: 700; color: var(--color-slate); border: 1px solid var(--color-border-strong); }


/* Comparison table: Stream24 emphasised, competitors neutral. Sticky feature column, group headings, row hover. */
.s24-cmp-wrap { border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-void); }
.s24-cmp-wrap:focus-visible { outline-offset: 2px; }
.s24-cmp { border-collapse: separate; border-spacing: 0; }
.s24-cmp th, .s24-cmp td { padding: 1rem 1.25rem; text-align: left; font-size: 0.875rem; border-top: 1px solid var(--color-border); vertical-align: top; }
.s24-cmp thead th { border-top: 0; background: var(--color-surface); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-slate); }
.s24-cmp thead th.s24-cmp-us { color: var(--color-link); box-shadow: inset 0 2px 0 var(--color-green); }
.s24-cmp .s24-cmp-feature { position: sticky; left: 0; z-index: 1; min-width: 9rem; background: var(--color-void); font-weight: 500; color: color-mix(in srgb, var(--color-cloud) 90%, transparent); }
.s24-cmp thead .s24-cmp-feature { background: var(--color-surface); }
.s24-cmp td.s24-cmp-us { background: var(--s24-green-wash); }
.s24-cmp-group th { padding: 0.85rem 1.25rem 0.5rem; background: var(--color-surface); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-slate); }
.s24-cmp tbody tr:not(.s24-cmp-group) { transition: background-color var(--s24-dur-2) var(--s24-ease); }
@media (hover: hover) {
  .s24-cmp tbody tr:not(.s24-cmp-group):hover > td, .s24-cmp tbody tr:not(.s24-cmp-group):hover > th { background-color: color-mix(in srgb, var(--color-cloud) 3.5%, var(--color-void)); }
  .s24-cmp tbody tr:not(.s24-cmp-group):hover > td.s24-cmp-us { background-color: color-mix(in srgb, #00c896 14%, var(--color-void)); }
}
.s24-cmp-val { font-weight: 500; color: color-mix(in srgb, var(--color-cloud) 72%, transparent); }
.s24-cmp-val.is-first { color: var(--color-cloud); font-weight: 600; }
.s24-cmp-yes { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; color: color-mix(in srgb, var(--color-cloud) 72%, transparent); }
.s24-cmp-yes.is-first { color: var(--color-link); }
.s24-cmp-no { color: var(--color-slate-dim); }
.s24-cmp-group-m { margin-top: 1.5rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-slate); }
.s24-cmp-m-row { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 0.4rem 0.55rem; border-radius: 8px; }
.s24-cmp-m-row.is-first { background: var(--s24-green-wash); }


/* Blog: category chips, reading progress, prose. */
.s24-blog-chip { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; border-radius: 9999px; border: 1px solid var(--color-border-strong); background: var(--color-surface); padding: 0.45rem 1rem; font-size: 0.875rem; font-weight: 600; color: var(--color-slate); transition: color var(--s24-dur-2) var(--s24-ease), border-color var(--s24-dur-2) var(--s24-ease), background-color var(--s24-dur-2) var(--s24-ease); }
.s24-blog-chip span { font-size: 0.75rem; color: var(--color-slate-dim); }
.s24-blog-chip[aria-pressed="true"] { color: var(--color-cloud); border-color: var(--s24-green-line); background: var(--s24-green-wash); }
@media (hover: hover) { .s24-blog-chip:hover { color: var(--color-cloud); border-color: var(--s24-green-line); } }
[data-s24-post][hidden] { display: none; }
.s24-prose-p { margin-top: 1.25rem; font-size: 1.0625rem; line-height: 1.75; color: color-mix(in srgb, var(--color-cloud) 78%, transparent); max-width: 68ch; }
.s24-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 70; height: 3px; background: var(--s24-green); transform-origin: left; transform: scaleX(0); pointer-events: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .s24-progress { animation: s24-progress linear both; animation-timeline: scroll(root block); }
  }
}
@keyframes s24-progress { to { transform: scaleX(1); } }

/* 10 ─ Legacy rules from the first WordPress theme ───────────────────────── */

/* FAQ height + fade. Grid rows animate without a motion library. The inner wrapper clips. */
.s24-faq-panel {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.s24-faq-panel.is-open { grid-template-rows: 1fr; opacity: 1; }
.s24-faq-inner { overflow: hidden; min-height: 0; }
.s24-faq-btn[aria-expanded="true"] svg { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .s24-faq-panel { transition: none; } }

/* wp-block-library sets :where(figure){margin:0 0 1em} outside any cascade layer, so it beats
   Tailwind's layered .mx-auto and .mt-14. Zero the element, then put back the utilities figures
   actually use, at a specificity that wins unlayered. */
figure { margin: 0; }
figure.mx-auto { margin-inline: auto; }
figure.mt-14 { margin-top: calc(var(--spacing, 0.25rem) * 14); }
figure.mt-4 { margin-top: calc(var(--spacing, 0.25rem) * 4); }

/* Legal body, matching LegalLayout.tsx */
.s24-legal a { color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; }
.s24-legal a:hover { text-decoration-thickness: 2px; }
.s24-legal h2 { margin-top: 3rem; font-size: 1.25rem; font-weight: 700; color: var(--color-cloud); }
.s24-legal h3 { margin-top: 2rem; font-size: 1rem; font-weight: 600; color: var(--color-cloud); }
.s24-legal p { margin-top: 1rem; font-size: 0.875rem; line-height: 1.7; color: var(--color-slate); }
.s24-legal ul { margin-top: 1rem; list-style: disc; padding-left: 1.25rem; }
.s24-legal li { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.7; color: var(--color-slate); }
.s24-legal li + li { margin-top: 0.5rem; }
/* Legal copy carries inline reds picked for a white page. On the dark theme they drop to 3.9:1, so lift them
   (the stored text is untouched). */
:root[data-theme="dark"] .s24-legal [style*="#dc2626"] { color: #ff7a7a !important; }
:root[data-theme="dark"] .s24-legal [style*="#b91c1c"] { color: #ff9a9a !important; }