/*
 * segmnt marketing site styles — Direction A "Segment Green" (YAH-230, YAH-235).
 *
 * RTL-safe rule: CSS logical properties only — margin-inline-start,
 * padding-inline, text-align: start, inset-inline, border-inline-start,
 * logical float values. No physical left/right properties and no direction
 * hacks anywhere. <html lang dir> comes from the locale, so one stylesheet
 * serves both directions. Mobile first. (The hero product shot's timeline is
 * left-to-right in every locale, like every media timeline; that comes from a
 * dir="ltr" attribute in the markup, not from CSS.)
 *
 * Tokens come from brand/theme.css (a build copy of brand/theme.css), which is
 * loaded before this file. Use role and scale tokens only — never raw values.
 * The video stage and code blocks use the --color-stage* roles, which stay dark
 * in every theme, matching the real player (player/src/styles.ts).
 */

:root {
  --layout-gutter: var(--space-4);
  /* Code: Plex Mono, with the Arabic sans face for Arabic text in code spans. */
  --font-code: "IBM Plex Mono", var(--font-sans);
  /* Icons sit centred on the first line of the text beside them. */
  --icon-offset: calc((1lh - var(--size-icon)) / 2);
  /* Segmented-bar motif colours; the inverse band swaps them. */
  --motif-segment: var(--color-primary);
  --motif-next: var(--color-accent);
}

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: var(--line-height-normal);
  text-align: start;
}

/* Arabic reads better with more leading (Direction C borrow: Arabic gets its
   own typographic treatment, not a mirror of the English one). */
:lang(ar) body,
body:lang(ar) {
  line-height: var(--line-height-relaxed);
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Keyboard focus is always visible, using the system focus-ring token
   (brand/DESIGN-SYSTEM.md §5). */
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Figures and code: IBM Plex Mono (Direction B borrow). Arabic text inside a
   code span falls back to the sans face. */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

code {
  font-family: var(--font-code);
  font-size: var(--font-size-sm);
  padding-inline: var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-on-primary-soft);
  unicode-bidi: isolate;
}

.icon {
  flex: 0 0 auto;
  inline-size: var(--size-icon);
  block-size: var(--size-icon);
}

.text-link {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.text-link:hover {
  color: var(--color-primary-hover);
}

.badge {
  display: inline-block;
  margin: 0;
  padding-inline: var(--space-2);
  padding-block: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--size-control-md);
  padding-inline: var(--space-5);
  padding-block: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  text-align: center;
  text-decoration: none;
  /* <button class="btn"> must use the site font, not the browser's form font. */
  font: inherit;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-standard);
}

.btn-lg {
  min-block-size: var(--size-control-lg);
  padding-inline: var(--space-6);
}

.btn-sm {
  padding-inline: var(--space-4);
  font-size: var(--font-size-sm);
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
}

.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-secondary:hover {
  background: var(--color-primary-soft);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

/* Site header */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  background: var(--color-bg);
  border-block-end: 1px solid var(--color-border);
}

.header-inner,
.footer-inner {
  max-inline-size: calc(var(--size-container-page) + 2 * var(--layout-gutter));
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-3);
}

/* Logo lockup (brand/logo/segmnt-logo.svg). 24 px tall = the brand minimum
   (var(--space-6) = 1.5rem); .header-inner padding-block (12 px) is the ½H clear
   space. Never below 24 px. */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand img {
  display: block;
  block-size: var(--space-6);
  inline-size: auto;
}

.site-nav {
  display: flex;
  gap: var(--space-5);
  margin-inline-start: auto;
}

.site-nav-link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--size-touch);
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.site-nav-link:hover {
  color: var(--color-primary);
}

/* Language switch (YAH-376). It stays visible on every width so a visitor can
   always reach the other locale; the bordered pill marks it as a control, not a
   page link. */
.lang-switch,
.header-cta {
  flex: none;
  min-block-size: var(--size-touch);
  white-space: nowrap;
}

/* Small screens: the wide Docs and Leave Vimeo links are hidden (Leave Vimeo
   stays in the footer, YAH-703), but "Get started" stays visible
   in the header (YAH-494, YAH-493 note 1). "Sign in" stays in the nav row. */
.site-nav-link--wide {
  display: none;
}

/* Tablet and small screens (YAH-376, YAH-494 R1): the header wraps into two rows
   so the navigation and the language switch never overflow the viewport. Row 1 is
   the brand, the language switch and "Get started"; row 2 is the full navigation.
   The breakpoint is the existing 64rem wide-header line, so controls never wrap
   inside themselves between 40rem and 64rem. */
@media (max-width: 63.999rem) {
  .header-inner {
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
  }

  .site-nav {
    order: 2;
    flex-basis: 100%;
    flex-wrap: wrap;
    margin-inline-start: 0;
    gap: var(--space-3) var(--space-4);
  }

  .lang-switch {
    order: 1;
    margin-inline-start: auto;
  }

  /* "Get started" stays in the header on mobile, next to the language switch
     (YAH-494, YAH-493 note 1). */
  .header-cta {
    order: 1;
  }
}

/* Sections: full-bleed bands, content held to one --size-container-page column. */

main {
  display: block;
}

.section,
.cost-calculator {
  padding-block: var(--space-12);
  padding-inline: max(var(--layout-gutter), calc((100% - var(--size-container-page)) / 2));
}

.section--band {
  background: var(--color-surface-sunken);
}

.section--inverse {
  --motif-segment: var(--color-on-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.section > h2,
.cost-calculator > h2 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin-block: 0 var(--space-8);
  max-inline-size: var(--size-container-sm);
}

/* The segmented-bar motif (HLS segments, Sadu bands): three filled segments
   and one gold "next segment". Built with logical box sides so it flows with
   the text direction. */
.section > h2::before,
.cost-calculator > h2::before {
  content: "";
  display: block;
  inline-size: calc(3 * var(--space-3) + 3 * var(--space-1) + var(--space-3));
  block-size: var(--space-1);
  margin-block-end: var(--space-4);
  padding-inline-end: var(--space-1);
  border-inline-end: var(--space-3) solid var(--motif-next);
  background: repeating-linear-gradient(
      90deg,
      var(--motif-segment) 0 var(--space-3),
      transparent var(--space-3) var(--space-4)
    )
    content-box;
}

.section h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  margin-block: 0 var(--space-2);
}

.section-note {
  margin-block: var(--space-6) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  max-inline-size: var(--size-container-sm);
}

/* Hero: headline + copy beside a product shot (audit #6, #11, #12). */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "title"
    "copy"
    "visual";
  gap: var(--space-6);
  padding-block: var(--space-10) var(--space-12);
  padding-inline: max(var(--layout-gutter), calc((100% - var(--size-container-page)) / 2));
}

.hero h1 {
  grid-area: title;
  align-self: end;
  margin: 0;
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

.hero-copy {
  grid-area: copy;
}

.hero-sub {
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
  margin-block: 0 var(--space-6);
  max-inline-size: var(--size-container-sm);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block: 0 var(--space-3);
}

/* Small screens (YAH-493 §1, Fitts's Law): the hero buttons are full width and
   stacked in the thumb zone. They never sit side by side as narrow targets, even
   in Arabic where the labels are short. */
@media (max-width: 39.999rem) {
  .hero .hero-actions .btn {
    flex: 1 1 100%;
  }
}

.hero-note {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-block: 0 var(--space-2);
}

/* "See prices in SAR" is a text link under the note line, not a third button:
   three equal buttons slow the decision, and the nav already links pricing
   (YAH-494, YAH-493 note 3). */
.hero-prices {
  margin-block: 0 var(--space-6);
}

/* Trust line (audit #15): a visible claim, not a footnote. */
.hero-trust {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding-inline: var(--space-4);
  padding-block: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.hero-trust .icon {
  color: var(--color-primary);
}

.hero-visual {
  grid-area: visual;
  margin: 0;
  padding-block-start: var(--space-4);
}

.hero-visual figcaption {
  margin-block-start: var(--space-10);
  text-align: center;
  font-size: var(--font-size-sm);
}

/* Product shot (decorative fragments; the .shot element is one role="img"). */

.shot {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-3);
}

.shot-chrome {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-4);
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--color-border);
}

.shot-dots {
  display: inline-flex;
  gap: var(--space-1);
}

.shot-dots i {
  inline-size: var(--space-2);
  block-size: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-border);
}

.shot-url {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1 1 auto;
  min-inline-size: 0;
  padding-inline: var(--space-3);
  padding-block: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  overflow: hidden;
}

.shot-url > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.shot-url .icon {
  inline-size: var(--space-4);
  block-size: var(--space-4);
  color: var(--color-primary);
}

.shot-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-end-start-radius: var(--radius-xl);
  border-end-end-radius: var(--radius-xl);
  overflow: hidden;
  /* A lit studio frame: a warm key light over the dark stage. */
  background:
    radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--color-accent) 28%, transparent), transparent 45%),
    radial-gradient(circle at 25% 80%, color-mix(in srgb, var(--color-stage-progress) 22%, transparent), transparent 50%),
    var(--color-stage);
}

.shot-play {
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: var(--space-16);
  block-size: var(--space-16);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-on-stage) 14%, transparent);
  backdrop-filter: blur(var(--space-1));
}

/* Play glyphs never mirror. */
.shot-play::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: var(--space-5);
  block-size: var(--space-6);
  background: var(--color-on-stage);
  clip-path: polygon(15% 0, 100% 50%, 15% 100%);
  transform: translateX(8%);
}

.shot-lesson {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
  padding-inline: var(--space-3);
  padding-block: var(--space-1);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-stage) 60%, transparent);
  color: var(--color-on-stage);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.shot-controls {
  position: absolute;
  inset-inline: var(--space-4);
  inset-block-end: var(--space-3);
  display: grid;
  gap: var(--space-2);
}

.shot-bar {
  display: flex;
  gap: var(--space-1);
}

.seg {
  flex: 1 1 0;
  block-size: calc(1.5 * var(--space-1));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-on-stage) 22%, transparent);
}

.seg--played {
  background: var(--color-stage-progress);
}

.seg--current {
  background: linear-gradient(90deg, var(--color-stage-progress) 0 45%, color-mix(in srgb, var(--color-on-stage) 45%, transparent) 45% 100%);
}

.seg--next {
  background: var(--color-accent);
}

.shot-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-on-stage);
  font-size: var(--font-size-xs);
}

.shot-quality {
  padding-inline: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--color-on-stage) 40%, transparent);
  border-radius: var(--radius-sm);
}

.shot-card {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-3);
  padding-block: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.shot-card--ok {
  inset-block-end: calc(-1 * var(--space-8));
  inset-inline-start: calc(-1 * var(--space-2));
}

.shot-card--ok .icon {
  color: var(--color-primary);
}

.shot-card--blocked {
  inset-block-start: var(--space-16);
  inset-inline-end: var(--space-2);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

/* Small screens: the blocked card shrinks to icon + 403 so it clears the
   lesson title; the full sentence is in the figure's accessible name. */
.shot-card--blocked span:not(.mono) {
  display: none;
}

.shot-card--blocked .icon {
  color: var(--color-danger);
}

.shot-card--blocked .mono {
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-weight: var(--font-weight-semibold);
}

/* Cards (problem, solution, why-switch) */

.card-grid,
.tile-grid,
.steps,
.checklist,
.protection-list,
.plan-cards,
.plan-features {
  list-style: none;
  margin: 0;
  padding: 0;
}

.card-grid,
.tile-grid {
  display: grid;
  gap: var(--space-4);
}

.card {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.card p {
  margin: 0;
  color: var(--color-text-muted);
}

.card-index {
  display: block;
  margin-block-end: var(--space-4);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.card--statement {
  border-inline-start: var(--space-1) solid var(--color-primary);
}

.card--statement p {
  color: var(--color-text);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-snug);
}

/* Steps: each step fills one segment of the bar; the last one is gold. */

.steps {
  display: grid;
  gap: var(--space-8);
  counter-reset: step;
}

.step {
  counter-increment: step;
  padding-block-start: var(--space-5);
  border-block-start: var(--space-1) solid var(--color-primary);
}

.step:last-child {
  border-block-start-color: var(--color-accent);
}

.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-block-end: var(--space-3);
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.step p {
  margin: 0;
  color: var(--color-text-muted);
}

/* Audience tiles */

.tile {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  font-weight: var(--font-weight-medium);
}

/* Use-case tiles on the landing page: each one opens its block on /use-cases. */

.tile--link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  block-size: 100%;
  color: var(--color-text);
  text-decoration: none;
  transition:
    border-color var(--duration-fast) var(--easing-standard),
    background-color var(--duration-fast) var(--easing-standard);
}

.tile--link strong {
  font-weight: var(--font-weight-semibold);
}

.tile--link span {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
}

.tile--link:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.section-intro {
  margin-block: calc(-1 * var(--space-4)) var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
  max-inline-size: var(--size-container-sm);
}

/* Use cases page: header with a jump list, then one split block per case. */

.page-header h1 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin-block: 0 var(--space-4);
  max-inline-size: var(--size-container-sm);
}

.page-sub {
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
  margin-block: 0 var(--space-8);
  max-inline-size: var(--size-container-sm);
}

/* Legal (trust) pages (YAH-929). Long-form text needs a calm, narrow measure;
   it reuses the section rhythm and the page-header, and adds only the legal
   body. Kept as plain CSS (not utilities) so the typography is stable. */

.legal-body {
  max-inline-size: var(--size-container-sm);
}

.legal-meta {
  font-size: var(--font-size-sm);
  margin-block: calc(-1 * var(--space-4)) 0;
}

.legal-section {
  margin-block-start: var(--space-10);
}

.legal-section > h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  margin-block: 0 var(--space-3);
}

.legal-body p {
  margin-block: 0 var(--space-4);
}

.legal-list {
  margin-block: 0 var(--space-4);
  padding-inline-start: var(--space-6);
  list-style: disc;
}

.legal-list li {
  margin-block-end: var(--space-2);
}

.legal-table-wrap {
  overflow-x: auto;
  margin-block: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.legal-table th,
.legal-table td {
  border-block-end: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  text-align: start;
  vertical-align: top;
}

.legal-table th {
  background: var(--color-surface-sunken);
  font-weight: var(--font-weight-semibold);
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--size-touch);
  padding-inline: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.use-case {
  scroll-margin-block-start: var(--space-20);
}

.use-case-body {
  display: grid;
  gap: var(--space-6);
}

.use-case-job {
  margin: 0;
  font-size: var(--font-size-xl);
  line-height: var(--line-height-snug);
}

.use-case-example {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border-inline-start: var(--space-1) solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
}

.use-case-example .icon {
  color: var(--color-primary);
  margin-block-start: var(--icon-offset);
}

.use-case-fit {
  margin: 0;
  color: var(--color-text-muted);
}

.use-case-fit strong {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.use-case-fit .text-link {
  margin-inline-start: var(--space-2);
  white-space: nowrap;
}

/* Agency band: checklist on the brand green. */

.checklist {
  display: grid;
  gap: var(--space-4);
  font-size: var(--font-size-lg);
}

.checklist li,
.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

/* Gold check on green: 3.3:1, above the 3:1 graphics minimum. */
.checklist .icon {
  color: var(--color-accent);
  margin-block-start: var(--icon-offset);
}

/* Protection */

.protection-list {
  display: grid;
  gap: var(--space-4);
}

.protection-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.protection-item p {
  margin: 0;
}

.protection-item .icon {
  color: var(--color-primary);
  margin-block-start: var(--icon-offset);
}

.protection-item--note {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.protection-item--note .icon {
  color: var(--color-text-muted);
}

/* Tables (plans, comparison, sources) */

.table-scroll {
  position: relative;
  overflow-x: auto;
  max-inline-size: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
/* `position: relative` makes this scroller the containing block for the
   visually hidden `.sr` spans inside a table (they are `position: absolute`).
   Without a positioned ancestor their containing block is the initial
   containing block, and an absolutely positioned box is not clipped by an
   ancestor scroll container: their static position (a far-right table column)
   would widen the whole page and add a horizontal scrollbar on phones. */

.plan-table,
.compare-table,
.sources-table {
  inline-size: 100%;
  min-inline-size: var(--size-container-sm);
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

.plan-table th,
.plan-table td,
.compare-table th,
.compare-table td,
.sources-table th,
.sources-table td {
  padding-inline: var(--space-4);
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--color-border);
  text-align: start;
  vertical-align: top;
}

.plan-table tbody tr:last-child > *,
.compare-table tbody tr:last-child > *,
.sources-table tbody tr:last-child > * {
  border-block-end: 0;
}

.plan-table thead th,
.compare-table thead th,
.sources-table thead th {
  background: var(--color-surface-sunken);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  vertical-align: bottom;
}

.plan-table tbody th,
.compare-table tbody th,
.sources-table tbody th {
  font-weight: var(--font-weight-semibold);
}

/* Recommended plan column (Von Restorff) and our own comparison row. */
.plan-table .is-recommended,
.compare-table .is-us > * {
  background: var(--color-primary-soft);
}

.plan-table thead th.is-recommended {
  box-shadow: inset 0 var(--space-1) 0 var(--color-primary);
  color: var(--color-on-primary-soft);
}

/* Group labels split the 15 rows into price / limits / player / account
   (Chunking). They read as eyebrows, a step below the plan names. */
.plan-table .plan-group th {
  padding-block: var(--space-5) var(--space-2);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.plan-table tbody:first-of-type .plan-group th {
  padding-block-start: var(--space-4);
}

/* Every group's last row keeps its rule, so groups stay separated. */
.plan-table tbody:not(:last-of-type) tr:last-child > * {
  border-block-end: 1px solid var(--color-border);
}

/* Values are short; keep "67.85 SAR" on one line (the table scrolls on phones). */
.plan-table td {
  white-space: nowrap;
}

.plan-yes,
.plan-no {
  display: inline-flex;
}

.plan-yes .icon {
  inline-size: var(--space-5);
  block-size: var(--space-5);
  color: var(--color-primary);
}

.plan-no {
  color: var(--color-text-muted);
}

.plans-notes {
  margin-block: var(--space-6) 0;
  padding-inline-start: var(--space-5);
  display: grid;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  max-inline-size: var(--size-container-sm);
}

.plans-limit-details {
  margin-block: var(--space-4) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.plans-limit-details a {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

/* FAQ: progressive disclosure, heading beside the list on wide screens. */

.faq-list {
  display: grid;
  border-block-start: 1px solid var(--color-border);
}

.faq-item {
  border-block-end: 1px solid var(--color-border);
}

.faq-q {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-block-size: var(--size-touch);
  padding-block: var(--space-4);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  list-style: none;
}

.faq-q::-webkit-details-marker {
  display: none;
}

.faq-q::after {
  content: "+";
  margin-inline-start: auto;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: var(--space-6);
  block-size: var(--space-6);
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-family: var(--font-mono);
  line-height: 1;
}

.faq-item[open] > .faq-q::after {
  content: "−";
}

.faq-q:hover {
  color: var(--color-primary);
}

.faq-a {
  margin: 0;
  padding-block-end: var(--space-5);
  color: var(--color-text-muted);
  max-inline-size: var(--size-container-sm);
}

/* Final CTA */

.cta-panel {
  padding-inline: var(--space-6);
  padding-block: var(--space-10);
  border-radius: var(--radius-xl);
  background: var(--color-primary-soft);
  text-align: center;
}

.cta-panel h2 {
  margin-block: 0 var(--space-3);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-on-primary-soft);
}

.cta-panel .hero-actions {
  justify-content: center;
}

.cta-text {
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
  margin-block: 0 var(--space-6);
  margin-inline: auto;
  max-inline-size: var(--size-container-sm);
}

.cta-contact {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-block: var(--space-2) 0;
}

/* Pricing header */

.pricing-header h1 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin-block: 0 var(--space-4);
}

/* The pricing header, billing line and plan cards read as one block. */
.section.pricing-header {
  padding-block-end: var(--space-6);
}

.pricing-sub {
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
  margin-block: 0 var(--space-6);
  max-inline-size: var(--size-container-sm);
}

.pricing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Billing switch (YAH-703): a segmented control of two native radios. The
   checked radio decides which half of every billed() price shows. */

.section.pricing-billing {
  padding-block: 0;
}

.billing-toggle {
  display: inline-flex;
  gap: var(--space-1);
  margin: 0 0 var(--space-3);
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
}

.billing-toggle label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--size-touch);
  padding-inline: var(--space-5);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-standard);
}

.billing-toggle input:checked + label {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.billing-toggle input:focus-visible + label {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.billing-free {
  padding-inline: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-on-primary-soft);
  font-size: var(--font-size-xs);
}

.billing-hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

body:not(:has(#billing-annual:checked)) .when-annual,
body:has(#billing-annual:checked) .when-monthly {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .billing-toggle label {
    transition: none;
  }
}

/* Plan cards (audit #8) */

.section.pricing-plans {
  padding-block-start: var(--space-12);
}

.plan-cards {
  display: grid;
  gap: var(--space-4);
  margin-block-end: var(--space-10);
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}

.plan-card .btn {
  font-size: var(--font-size-sm);
}

.plan-card--recommended {
  border: 2px solid var(--color-primary);
  box-shadow: var(--shadow-3);
}

.plan-badge {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: var(--space-6);
  transform: translateY(-50%);
  padding-inline: var(--space-3);
  padding-block: var(--space-2);
}

.plan-name {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

/* Unit always under the amount, so "15,588" and "59" give every card the
   same shape (Similarity); a side-by-side unit wrapped on long prices only. */
.plan-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-block: var(--space-4) 0;
}

.plan-amount {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: var(--letter-spacing-tight);
}

.plan-unit {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.plan-vat {
  margin-block: var(--space-1) 0;
  /* text-muted, not text-subtle: subtle is 3.7:1 on white, below AA at xs. */
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.plan-desc {
  margin-block: var(--space-4) var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.plan-features {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}

.plan-features .icon {
  inline-size: var(--space-4);
  block-size: var(--space-4);
  margin-block-start: var(--icon-offset);
  color: var(--color-primary);
}

.plan-note {
  margin-block: var(--space-4) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  max-inline-size: var(--size-container-sm);
}

/* Cost calculator */

.cost-calculator {
  display: grid;
  column-gap: var(--space-10);
  align-items: start;
  background: var(--color-surface-sunken);
}

.cost-calculator > h2 {
  margin-block-end: var(--space-3);
}

.calculator-intro {
  color: var(--color-text-muted);
  margin-block: 0 var(--space-8);
  max-inline-size: var(--size-container-sm);
}

.calculator-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-block: 0 var(--space-6);
}

/* Each field takes two rows of the parent grid (label, control), so the
   controls in a row line up even when one label wraps to two lines. */
.calculator-fields > .field {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: var(--space-2);
}

.calculator-fields > .field label {
  align-self: end;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}

.field label {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

.field input,
.field select {
  font: inherit;
  inline-size: 100%;
  min-block-size: var(--size-control-lg);
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
}

.calculator-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-block: 0 var(--space-8);
}

.btn-link {
  font: inherit;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  background: none;
  border: 0;
  padding: 0;
  min-block-size: var(--size-touch);
  text-decoration: underline;
  cursor: pointer;
}

.calculator-result {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-1);
  padding: var(--space-6);
  font-variant-numeric: tabular-nums;
}

.calculator-plan {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin-block: 0 var(--space-3);
}

.calculator-prices,
.calculator-competitors {
  list-style: none;
  margin: 0;
  padding: 0;
}

.calculator-prices li {
  margin-block-end: var(--space-1);
}

.calculator-label {
  font-weight: var(--font-weight-semibold);
  margin-block: var(--space-5) var(--space-2);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border);
}

.calculator-competitors li {
  color: var(--color-text-muted);
  margin-block-end: var(--space-1);
  font-size: var(--font-size-sm);
}

.calculator-footnote {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-block: var(--space-5);
}

.calculator-cta {
  margin: 0;
}

/* Small print */

.pricing-smallprint > h2 {
  font-size: var(--font-size-2xl);
  margin-block-end: var(--space-5);
}

.smallprint {
  margin: 0;
  padding-inline-start: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.smallprint li {
  margin-block-end: var(--space-3);
  break-inside: avoid;
}

/* Comparison and sources */

.compare-intro {
  margin-block: 0 var(--space-6);
  color: var(--color-text-muted);
  max-inline-size: var(--size-container-sm);
}

.compare-sources {
  margin-block: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  max-inline-size: var(--size-container-sm);
}

.compare-honest {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-inline-start: var(--space-1) solid var(--color-accent);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  max-inline-size: var(--size-container-sm);
}

.compare-honest .icon {
  color: var(--color-accent-text);
  margin-block-start: var(--icon-offset);
}

.pricing-sources > h2 {
  font-size: var(--font-size-2xl);
  margin-block-end: var(--space-5);
}

.source-links {
  margin-block: var(--space-4) 0;
  padding-inline-start: var(--space-5);
  font-size: var(--font-size-sm);
}

.source-links a {
  color: var(--color-primary);
}

/* Footer */

.site-footer {
  border-block-start: 1px solid var(--color-border);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.footer-inner {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-10) var(--space-12);
}

.footer-legal {
  margin: 0;
  font-size: var(--font-size-xs);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

/* The "Legal" group in the footer (YAH-929): a small heading, then only the
   pages that are live (a page with no URL is dropped in layout.ts). */
.footer-nav--legal {
  align-items: center;
}

.footer-legal-heading {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.footer-link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--size-touch);
  color: var(--color-text-muted);
  text-decoration: none;
}

.footer-link:hover,
.footer-link:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Tablet and up */

@media (min-width: 40rem) {
  .site-nav-link--wide,
  .header-cta {
    display: inline-flex;
  }

  .card-grid--2,
  .card-grid--3,
  .card-grid--4,
  .tile-grid,
  .plan-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calculator-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .smallprint {
    columns: 2;
    column-gap: var(--space-10);
  }
}

@media (min-width: 48rem) {
  :root {
    --layout-gutter: var(--space-8);
  }

  .section,
  .cost-calculator {
    padding-block: var(--space-20);
  }

  .section > h2,
  .cost-calculator > h2 {
    font-size: var(--font-size-4xl);
  }

  .hero h1 {
    font-size: var(--font-size-5xl);
  }

  .pricing-header h1,
  .page-header h1 {
    font-size: var(--font-size-5xl);
  }

  .checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .protection-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cta-panel {
    padding-block: var(--space-16);
  }

  .cta-panel h2 {
    font-size: var(--font-size-4xl);
  }

  .shot-card--ok {
    inset-inline-start: calc(-1 * var(--space-6));
  }

  .shot-card--blocked span:not(.mono) {
    display: inline;
  }

  .footer-inner {
    grid-template-columns: auto 1fr;
    align-items: center;
  }

  .footer-nav {
    justify-content: flex-end;
  }

  .footer-legal {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "title visual"
      "copy visual";
    column-gap: var(--space-16);
    row-gap: var(--space-6);
    align-items: center;
    padding-block: var(--space-16) var(--space-12);
  }

  .hero h1 {
    font-size: var(--font-size-6xl);
  }

  .hero-copy {
    align-self: start;
  }

  .hero-sub {
    font-size: var(--font-size-xl);
  }

  .card-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .card-grid--4,
  .tile-grid,
  .steps,
  .plan-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .section--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: var(--space-16);
    align-items: start;
  }

  .section--split > h2 {
    position: sticky;
    inset-block-start: var(--space-24);
  }

  .cost-calculator {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  /* Plans are equal choices: on wide screens fixed layout gives the four plan
     columns the same width instead of sizing each to its longest value. */
  .plan-table {
    table-layout: fixed;
  }

  .plan-table thead th:first-child {
    inline-size: 34%;
  }

  /* Name, price, VAT line, description, button and features line up across
     the four cards (the badge is absolutely positioned, so it takes no row). */
  .plan-card {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-content: start;
  }

  .cost-calculator > h2,
  .calculator-intro {
    grid-column: 1 / -1;
  }

  .calculator-result {
    position: sticky;
    inset-block-start: var(--space-24);
  }
}

/* Arabic display treatment (Direction C borrow). Arabic headlines get their own
   composition, not a mirror of the English one: the headline spans the full
   width above the copy and the product shot, set larger and bolder, with taller
   leading for the Arabic ascenders and descenders. Letter-spacing stays 0
   because tracking breaks Arabic joining. */

:lang(ar) h1,
:lang(ar) h2,
:lang(ar) h3 {
  letter-spacing: 0;
}

:lang(ar) .hero h1,
:lang(ar) .pricing-header h1,
:lang(ar) .page-header h1,
:lang(ar) .section > h2,
:lang(ar) .cost-calculator > h2,
:lang(ar) .cta-panel h2 {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

:lang(ar) .demo-eyebrow,
:lang(ar) .plan-table .plan-group th {
  letter-spacing: 0;
  text-transform: none;
}

:lang(ar) .hero-sub {
  line-height: var(--line-height-relaxed);
}

@media (min-width: 64rem) {
  :lang(ar) .hero {
    grid-template-areas:
      "title title"
      "copy visual";
    row-gap: var(--space-10);
    align-items: start;
  }

  :lang(ar) .hero h1 {
    font-size: var(--font-size-7xl);
  }

  :lang(ar) .hero-copy {
    padding-block-start: var(--space-4);
  }
}

/* Demo course page (task B5). Logical properties only, like the rest. */

.demo-hero {
  max-inline-size: var(--size-container-page);
  margin-inline: auto;
  padding-block: var(--space-10) var(--space-4);
}

.demo-eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  font-size: var(--font-size-sm);
}

.demo-hero h1 {
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
  margin-block: 0 var(--space-3);
  max-inline-size: var(--size-container-sm);
}

.demo-sub {
  color: var(--color-text-muted);
  margin-block: 0 var(--space-2);
  max-inline-size: var(--size-container-sm);
}

.demo-facts {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin: 0;
}

.demo-layout {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  max-inline-size: var(--size-container-page);
  margin-inline: auto;
  padding-block: var(--space-4);
}

@media (min-width: 56rem) {
  .demo-layout {
    /* 16rem: demo sidebar minimum, no matching size token; YAH-235. */
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
    align-items: start;
  }
}

.demo-banner {
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-inline-start: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-block: 0 var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.demo-player {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: var(--color-stage);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.demo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: center;
  justify-content: center;
  color: var(--color-on-stage);
  text-align: center;
  padding: var(--space-4);
}

.demo-placeholder-label {
  font-weight: var(--font-weight-bold);
}

.demo-placeholder-hint {
  font-size: var(--font-size-sm);
  opacity: 0.8;
}

.demo-quality {
  margin-block-start: var(--space-4);
}

.demo-quality h2 {
  font-size: var(--font-size-lg);
  margin-block: 0 var(--space-2);
}

.demo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: 0 var(--space-3);
}

.demo-chip {
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
}

.demo-chip b {
  color: var(--color-primary);
}

.demo-quality-menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.demo-quality-button {
  font: inherit;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
}

.demo-quality-button.is-active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.demo-note {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-block: var(--space-3) 0;
}

.demo-lessons h2 {
  font-size: var(--font-size-lg);
  margin-block: 0 var(--space-3);
}

.lesson-list {
  list-style: none;
  counter-reset: lesson;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.lesson-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
}

.lesson-item--now {
  border-color: var(--color-primary);
  border-inline-start: 2px solid var(--color-primary);
}

.lesson-item--soon,
.lesson-item--locked {
  color: var(--color-text-muted);
}

.lesson-number {
  counter-increment: lesson;
  inline-size: var(--space-6);
  block-size: var(--space-6);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-surface-sunken);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.lesson-number::before {
  content: counter(lesson);
}

.lesson-title {
  flex: 1 1 auto;
}

.lesson-badge {
  font-size: var(--font-size-xs);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-2);
  white-space: nowrap;
}

.lesson-badge--now {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.lesson-badge--locked {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.lesson-badge--soon {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.demo-panel {
  max-inline-size: var(--size-container-page);
  margin-inline: auto;
  padding-block: var(--space-8) var(--space-2);
  border-block-start: 1px solid var(--color-border);
  margin-block-start: var(--space-6);
}

.demo-panel h2 {
  font-size: var(--font-size-2xl);
  margin-block: 0 var(--space-3);
}

.demo-h3 {
  font-size: var(--font-size-md);
  margin-block: var(--space-5) var(--space-2);
}

.demo-label {
  display: block;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  margin-block: var(--space-3) var(--space-1);
}

.demo-copied {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.demo-copied code {
  /* 22rem: copied-code basis, no matching size token; YAH-235. */
  flex: 1 1 22rem;
  background: var(--color-stage-raised);
  color: var(--color-on-stage);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
}

.demo-check {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

.demo-check-name::after {
  content: " —";
}

.demo-check-result {
  font-weight: var(--font-weight-bold);
}

.demo-check-result.is-ok {
  color: var(--color-success);
}

.demo-check-result.is-bad {
  color: var(--color-danger);
}

.demo-code {
  background: var(--color-stage-raised);
  color: var(--color-on-stage);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow: auto;
  font-size: var(--font-size-sm);
  text-align: start;
}

.demo-panel--note {
  padding-block-end: var(--space-12);
}

/* Visually hidden, still read by screen readers. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The demo blocks sit in the same 72rem column as the marketing sections. */
.demo-hero,
.demo-layout,
.demo-panel {
  max-inline-size: calc(var(--size-container-page) + 2 * var(--layout-gutter));
  padding-inline: var(--layout-gutter);
}

/* Motion (YAH-703). The hero intro is CSS keyframes (it plays on load, so it
   needs no script); the scroll reveal uses Motion (motion.dev, ~4 KB gzipped). Timings and easings come from the
   theme tokens; the choreography follows brand/MOTION.md (one focal motion per
   beat, list stagger 80 ms capped at 6, entrances travel at most 16 px, gold =
   "next segment", loops 1 Hz or slower). With reduced motion nothing moves:
   the hero plays no intro and the scroll reveal is never switched on. */

@media (prefers-reduced-motion: no-preference) {
  /* Hero beats, all from the stagger token (80 ms): the player starts loading
     at 560 ms, its segments 60 ms apart; the proof cards land at 1.2 s. */
  .hero {
    --hero-player-at: calc(7 * var(--motion-stagger));
    --hero-seg-step: calc(0.75 * var(--motion-stagger));
    --hero-cards-at: calc(15 * var(--motion-stagger));
  }

  /* Hero: title, copy, then the product shot land one after the other. */
  .hero h1,
  .hero-copy,
  .hero-visual {
    animation: rise-in var(--duration-deliberate) var(--easing-enter) both;
  }

  .hero-copy {
    animation-delay: var(--motion-stagger);
  }

  .hero-visual {
    animation-delay: calc(2 * var(--motion-stagger));
  }

  /* The player "loads" its segments one by one, then plays. */
  .shot-bar .seg {
    animation: seg-load var(--duration-base) var(--easing-enter) both;
    animation-delay: calc(var(--hero-player-at) + var(--seg-i, 0) * var(--hero-seg-step));
  }

  .shot-bar .seg:nth-child(2) { --seg-i: 1; }
  .shot-bar .seg:nth-child(3) { --seg-i: 2; }
  .shot-bar .seg:nth-child(4) { --seg-i: 3; }
  .shot-bar .seg:nth-child(5) { --seg-i: 4; }
  .shot-bar .seg:nth-child(6) { --seg-i: 5; }
  .shot-bar .seg:nth-child(7) { --seg-i: 6; }
  .shot-bar .seg:nth-child(8) { --seg-i: 7; }
  .shot-bar .seg:nth-child(9) { --seg-i: 8; }
  .shot-bar .seg:nth-child(10) { --seg-i: 9; }

  /* Playhead: linear, because it tracks playback progress. */
  .shot-bar .seg--current {
    background:
      linear-gradient(var(--color-stage-progress), var(--color-stage-progress)) no-repeat 0 0 / 45% 100%,
      color-mix(in srgb, var(--color-on-stage) 45%, transparent);
    animation:
      seg-load var(--duration-base) var(--easing-enter) both calc(var(--hero-player-at) + 4 * var(--hero-seg-step)),
      playhead calc(4 * var(--motion-loop)) linear var(--hero-cards-at) infinite;
  }

  /* The gold "next segment" is buffering: a slow pulse, under 1 Hz. */
  .shot-bar .seg--next {
    animation:
      seg-load var(--duration-base) var(--easing-enter) both calc(var(--hero-player-at) + 5 * var(--hero-seg-step)),
      buffer-pulse var(--motion-loop) ease-in-out calc(var(--hero-cards-at) + 2.5 * var(--motion-stagger)) infinite;
  }

  /* Then the two proof cards: locked to the domain, other sites get 403. */
  .shot-card {
    animation: card-in var(--duration-slow) var(--easing-enter) both;
  }

  .shot-card--ok {
    animation-delay: var(--hero-cards-at);
  }

  .shot-card--blocked {
    animation-delay: calc(var(--hero-cards-at) + 3 * var(--motion-stagger));
  }

  .shot-play {
    animation: fade-in var(--duration-slow) var(--easing-standard) both calc(5 * var(--motion-stagger));
  }

  /* Scroll reveal. `.motion` is set on <html> by the head script only when the
     browser has IntersectionObserver and motion is allowed, so without it every
     section is simply visible. This is only the hidden start state: motion.js
     (Motion, site/motion/reveal.js) springs each item in when its section
     scrolls into view, and adds `is-in` for the two CSS effects below. */
  .motion :is(main > .section, main > .cost-calculator) > :not(.card-grid, .tile-grid, .steps, .checklist, .protection-list, .plan-cards),
  .motion :is(main > .section, main > .cost-calculator) > :is(.card-grid, .tile-grid, .steps, .checklist, .protection-list, .plan-cards) > * {
    opacity: 0;
    transform: translateY(var(--space-4));
  }

  /* The heading motif builds segment by segment (4 steps), in reading order. */
  .motion :is(main > .section, main > .cost-calculator) > h2::before {
    clip-path: inset(0 100% 0 0);
  }

  .motion[dir="rtl"] :is(main > .section, main > .cost-calculator) > h2::before {
    clip-path: inset(0 0 0 100%);
  }

  .motion .is-in:is(main > .section, main > .cost-calculator) > h2::before {
    clip-path: inset(0);
    transition: clip-path var(--duration-deliberate) steps(4, end) var(--duration-fast);
  }

  /* How it works: each step's top rule draws across, in reading order. */
  .motion :is(main > .section, main > .cost-calculator) .step {
    border-block-start-color: transparent;
    background:
      linear-gradient(var(--color-primary), var(--color-primary)) no-repeat
      var(--rule-from, 0 0) / 0 var(--space-1);
  }

  .motion[dir="rtl"] :is(main > .section, main > .cost-calculator) .step {
    --rule-from: 100% 0;
  }

  .motion :is(main > .section, main > .cost-calculator) .step:last-child {
    background-image: linear-gradient(var(--color-accent), var(--color-accent));
  }

  .motion .step:nth-child(2) { --reveal-i: 1; }
  .motion .step:nth-child(3) { --reveal-i: 2; }
  .motion .step:nth-child(n + 4) { --reveal-i: 3; }

  .motion .is-in:is(main > .section, main > .cost-calculator) .step {
    background-size: 100% var(--space-1);
    transition: background-size var(--duration-deliberate) var(--easing-move);
    transition-delay: calc(var(--reveal-i, 0) * var(--motion-stagger));
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(var(--space-4));
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(var(--space-2)) scale(0.96);
  }
}

@keyframes seg-load {
  from {
    opacity: 0;
    transform: scaleY(0.2);
  }
}

@keyframes playhead {
  from {
    background-size: 0% 100%, auto;
  }

  to {
    background-size: 100% 100%, auto;
  }
}

@keyframes buffer-pulse {
  50% {
    opacity: 0.55;
  }
}