/*
 * Sony LP — manual bundle: lp-sony-collection/styles.css
 * Order: 0-tokens → section variables → section styles (matches tools/concat-lp-collection-styles.mjs).
 * Regenerate: node tools/concat-lp-collection-styles.mjs
 */


/* ========== 0-tokens.css ========== */

/**
 * Sony LP — base tokens, defensive resets, container query ladder.
 *
 * Embed contract (see ARCHITECTURE.md):
 *   - Everything is scoped under `#sony-lp` (id + .sony-lp class on the mount point).
 *   - No `:root`, no bare `html`/`body`/`*`/element selectors at top level.
 *   - Width-based breakpoints use `@container sony-lp (...)`, not `@media`.
 *   - `@media` is only used here for user-preference queries (reduced motion).
 *   - We re-declare margin/padding/box-sizing/font/color/line-height inside
 *     `#sony-lp` so we don't depend on partner browser defaults or their reset.
 *
 * Design ladder (container inline-size, not viewport):
 *   - base (<320)   smallest phones / very narrow embeds
 *   - 320           fluid layout, rail = 100% of container
 *   - 920           rail caps at min(100%, 920px)
 *   - 960           up to 960px
 *   - 1218          up to 1218px
 *   - 1376          up to 1376px (primary desktop art)
 *   - 1500          up to 1500px (max rail)
 */

#sony-lp {
  /* ----- layout tokens ----- */
  /* Outer shell never wider than this (embed / full page). Rail still follows --lp-max-width. */
  --lp-shell-max-width: 1500px;
  --lp-max-width: 100%;
  --lp-page-gutter: 10px;
  /* Video frame ratio (design); independent of rail width */
  --lp-video-aspect-w: 1375;
  --lp-video-aspect-h: 774;

  /* ----- motion: horizontal sliders / carousels (not collection sections) ----- */
  --lp-slider-transition-track: 1.05s cubic-bezier(0.22, 1, 0.36, 1);
  --lp-slider-transition-radio: 0.35s ease;

  /* ----- typography tokens ----- */
  --sony-font-family: "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sony-letter-spacing: 0;

  --sony-type-display-size: 32px;
  --sony-type-display-lh: 42px;
  --sony-type-title-size: 22px;
  --sony-type-title-lh: 28px;
  --sony-type-body-size: 14px;
  --sony-type-body-lh: 19px;
  --sony-type-caption-size: 11px;
  --sony-type-caption-lh: 14px;

  /* ----- color tokens ----- */
  --sony-color-page-bg: #f5f5f7;
  --sony-color-surface-white: #ffffff;
  --sony-color-surface-muted: #dad8d7;
  --sony-color-surface-dark: #605e62;

  --sony-color-text: #000000;
  --sony-color-text-inverse: #ffffff;
  --sony-color-text-muted: #6b6b6b;
  --sony-color-text-subtle: #8a8a8a;
  --sony-color-text-on-dark-soft: #e8e6e7;
  --sony-color-text-on-dark-footnote: #c5c2c4;
  --sony-color-text-on-dark-pink: #d8c7c8;

  --sony-color-border-soft: #e0e0e0;

  /* ----- box / layout (declared, never inherited from host) ----- */
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: min(var(--lp-max-width), var(--lp-shell-max-width));
  margin-inline: auto;
  margin-block: 0;
  padding: 0;
  border: 0;
  min-height: 0;

  /* ----- typography defaults (declared, never inherited from host) ----- */
  font-family: var(--sony-font-family);
  font-size: var(--sony-type-body-size);
  line-height: var(--sony-type-body-lh);
  font-weight: 400;
  font-style: normal;
  letter-spacing: var(--sony-letter-spacing);
  color: var(--sony-color-text);
  text-align: left;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  background-color: var(--sony-color-page-bg);

  /* ----- query container ----- */
  container-type: inline-size;
  container-name: sony-lp;

  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  #sony-lp {
    scroll-behavior: auto;
  }
}

/* -------------------------------------------------------------------------- */
/* Step-lock #sony-lp itself to the rail bands.                               */
/* @container sony-lp can't restyle its own container, so we use @media for   */
/* the LP element. Sections inside still pick up --lp-max-width from the      */
/* @container ladder below; this just keeps the LP shell flush with them so   */
/* sliders / video sections don't appear to "outflow" the LP between bands.   */
/* @media is fine here because the LP is meant for full-width page embeds.    */
/* -------------------------------------------------------------------------- */

@media (min-width: 920px) {
  #sony-lp { max-width: 920px; }
}
@media (min-width: 960px) {
  #sony-lp { max-width: 960px; }
}
@media (min-width: 1218px) {
  #sony-lp { max-width: 1218px; }
}
@media (min-width: 1376px) {
  #sony-lp { max-width: 1376px; }
}
@media (min-width: 1500px) {
  #sony-lp { max-width: 1500px; }
}

/* -------------------------------------------------------------------------- */
/* Defensive base — re-declare anything a host reset might have touched.      */
/* All scoped under #sony-lp; nothing leaks to the partner page.              */
/* Wrapped in :where() so every baseline rule has ZERO specificity and any    */
/* section class selector under #sony-lp overrides it cleanly.                */
/* -------------------------------------------------------------------------- */

:where(#sony-lp *, #sony-lp *::before, #sony-lp *::after) {
  box-sizing: border-box;
}

:where(
  #sony-lp p,
  #sony-lp h1,
  #sony-lp h2,
  #sony-lp h3,
  #sony-lp h4,
  #sony-lp h5,
  #sony-lp h6,
  #sony-lp figure,
  #sony-lp blockquote,
  #sony-lp dl,
  #sony-lp dd,
  #sony-lp ul,
  #sony-lp ol
) {
  margin: 0;
  padding: 0;
}

:where(#sony-lp ul, #sony-lp ol) {
  list-style: none;
}

:where(#sony-lp a) {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
}

:where(#sony-lp button) {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  line-height: inherit;
  letter-spacing: inherit;
}

:where(
  #sony-lp img,
  #sony-lp svg,
  #sony-lp video,
  #sony-lp picture,
  #sony-lp iframe
) {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
}

:where(#sony-lp input, #sony-lp select, #sony-lp textarea) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* In-LP anchor offsets (IDs live inside #sony-lp). */
:where(#sony-lp #collection, #sony-lp #video-section-heading) {
  scroll-margin-top: 88px;
}

/* -------------------------------------------------------------------------- */
/* Heading / body typography (zero-specificity so section CSS always wins).   */
/* -------------------------------------------------------------------------- */

:where(
  #sony-lp h1,
  #sony-lp h2,
  #sony-lp h3,
  #sony-lp h4,
  #sony-lp h5,
  #sony-lp h6
) {
  font-family: var(--sony-font-family);
  font-style: normal;
  font-weight: 700;
  letter-spacing: var(--sony-letter-spacing);
  color: inherit;
}

:where(#sony-lp h1, #sony-lp h2) {
  font-size: var(--sony-type-display-size);
  line-height: var(--sony-type-display-lh);
}

:where(#sony-lp h3, #sony-lp h4, #sony-lp h5, #sony-lp h6) {
  font-size: var(--sony-type-title-size);
  line-height: var(--sony-type-title-lh);
}

:where(#sony-lp p) {
  font-family: var(--sony-font-family);
  font-style: normal;
  font-weight: 400;
  font-size: var(--sony-type-body-size);
  line-height: var(--sony-type-body-lh);
  letter-spacing: var(--sony-letter-spacing);
  color: inherit;
}

:where(#sony-lp small, #sony-lp .sony-caption) {
  font-family: var(--sony-font-family);
  font-style: normal;
  font-weight: 400;
  font-size: var(--sony-type-caption-size);
  line-height: var(--sony-type-caption-lh);
  letter-spacing: var(--sony-letter-spacing);
  color: inherit;
}

/* -------------------------------------------------------------------------- */
/* Breakpoint ladder — driven by the container's inline-size, not the viewport */
/*                                                                            */
/* IMPORTANT: @container rules match the container's DESCENDANTS, never the   */
/* container itself. #sony-lp is the query container, so a selector like      */
/* `@container sony-lp { #sony-lp { ... } }` is a no-op.                      */
/* We declare per-band custom properties on `:where(#sony-lp > *)` (every     */
/* top-level section is a direct child of #sony-lp). Custom properties        */
/* inherit further down, so every section (and the slider/video arrows        */
/* inside them) sees a STEP-WIDTH --lp-max-width that locks at each rail cap. */
/* -------------------------------------------------------------------------- */

@container sony-lp (min-width: 320px) {
  :where(#sony-lp > *) {
    --lp-page-gutter: 12px;
    --sony-type-display-size: 34px;
    --sony-type-display-lh: 44px;
    --sony-type-title-size: 24px;
    --sony-type-title-lh: 31px;
    --sony-type-body-size: 15px;
    --sony-type-body-lh: 20px;
    --sony-type-caption-size: 11px;
    --sony-type-caption-lh: 15px;
  }
}

@container sony-lp (min-width: 920px) {
  :where(#sony-lp > *) {
    --lp-max-width: min(100%, 920px);
    --lp-page-gutter: 14px;
    --sony-type-display-size: 44px;
    --sony-type-display-lh: 58px;
    --sony-type-title-size: 30px;
    --sony-type-title-lh: 39px;
    --sony-type-body-size: 16px;
    --sony-type-body-lh: 21px;
    --sony-type-caption-size: 12px;
    --sony-type-caption-lh: 16px;
  }

  :where(#sony-lp #collection, #sony-lp #video-section-heading) {
    scroll-margin-top: 24px;
  }
}

@container sony-lp (min-width: 960px) {
  :where(#sony-lp > *) {
    --lp-max-width: min(100%, 960px);
    --lp-page-gutter: 16px;
    --sony-type-display-size: 48px;
    --sony-type-display-lh: 63px;
    --sony-type-title-size: 32px;
    --sony-type-title-lh: 42px;
  }
}

@container sony-lp (min-width: 1218px) {
  :where(#sony-lp > *) {
    --lp-max-width: 1218px;
    --lp-page-gutter: 18px;
    --sony-type-display-size: 54px;
    --sony-type-display-lh: 71px;
    --sony-type-title-size: 36px;
    --sony-type-title-lh: 47px;
    --sony-type-body-size: 17px;
    --sony-type-body-lh: 22px;
  }
}

@container sony-lp (min-width: 1376px) {
  :where(#sony-lp > *) {
    --lp-max-width: 1376px;
    --lp-page-gutter: 24px;
    --sony-type-display-size: 60px;
    --sony-type-display-lh: 79px;
    --sony-type-title-size: 40px;
    --sony-type-title-lh: 52px;
    --sony-type-body-size: 18px;
    --sony-type-body-lh: 23px;
    --sony-type-caption-size: 13px;
    --sony-type-caption-lh: 17px;
  }
}

@container sony-lp (min-width: 1500px) {
  :where(#sony-lp > *) {
    --lp-max-width: 1500px;
    --lp-page-gutter: 24px;
  }
}

/* ========== 4-triple-slider/variables.css ========== */

/*
 * 4-triple-slider — design tokens (scoped under #sony-lp per ARCHITECTURE.md).
 *
 * Values are banded per design comp at 320 / 920 / 960 / 1218 / 1376 / 1500.
 * `.triple-slider` is the section-level query container (its width tracks
 * --lp-max-width), so @container ladders move in lockstep with the page rail caps.
 *
 * Desktop bands use bounded @container (min-... and max-...) so each tier sets a
 * full slice of tokens without relying on earlier min-width-only rules.
 */

#sony-lp {
  --triple-slider-bg: #f5f5f7;
  --triple-slider-slide-bg: #000000;
  --triple-slider-color-text: #000000;
  --triple-slider-color-text-muted: #6b6b6b;
  --triple-slider-color-arrow-fill: #000000;
  --triple-slider-color-arrow-stroke: #ffffff;

  --triple-slider-font: "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --triple-slider-title-weight: 700;
  --triple-slider-text-weight: 400;

  --triple-slider-radio-opacity-idle: 0.2;
  --triple-slider-radio-opacity-active: 1;

  /* Slider track / radio: shared LP tokens (see 0-tokens.css --lp-slider-*). */
  --triple-slider-transition-track: var(--lp-slider-transition-track, 0.78s cubic-bezier(0.22, 1, 0.36, 1));
  --triple-slider-transition-radio: var(--lp-slider-transition-radio, 0.28s ease);
  --triple-slider-focus-outline-width: 2px;
  --triple-slider-focus-outline-offset: 4px;
}

/*
 * Section is its own inline-size container so vars on .triple-slider__inner
 * can swap inside @container triple-slider (...). (Containers cannot style
 * themselves; vars must live on a descendant.)
 */
#sony-lp .triple-slider {
  --triple-slider-width: var(--lp-max-width, 100%);
  container-type: inline-size;
  container-name: triple-slider;
}

/*
 * Base band: 320–919 (mobile, fluid).
 * Slide takes the full container width, image keeps 1196×672 aspect.
 */
#sony-lp .triple-slider__inner {
  --triple-slider-slide-w: 100cqi;
  --triple-slider-slide-h: calc(100cqi * 672 / 1196);
  --triple-slider-slide-gap: 0px;

  --triple-slider-pad-x: 13px;
  /* Must carry a length unit; bare 0 breaks calc() in some engines. */
  --triple-slider-pad-top: 0px;
  --triple-slider-pad-bottom: 100px;
  --triple-slider-section-min-h: 1178px;

  --triple-slider-copy-gap: 111px;
  --triple-slider-copy-inner-gap: 40px;

  --triple-slider-border-radius: 0px;

  --triple-slider-arrow-size: 56px;
  --triple-slider-arrow-offset-x: 0px;

  --triple-slider-title-col: 100%;
  --triple-slider-title-size: 30px;
  --triple-slider-title-lh: 39px;
  --triple-slider-text-size: 18px;
  --triple-slider-text-lh: 23px;

  --triple-slider-radio-w: 95px;
  --triple-slider-radio-h: 12px;
  --triple-slider-radio-border-radius: 10px;
  --triple-slider-radios-gap: 4px;
  --triple-slider-radios-pad-top: 40px;
}

/* 920–959 — narrow desktop band */
@container triple-slider (min-width: 920px) and (max-width: 959px) {
  #sony-lp .triple-slider__inner {
    --triple-slider-slide-w: 776px;
    --triple-slider-slide-h: 436px;
    --triple-slider-slide-gap: 35px;

    --triple-slider-pad-x: 50px;
    --triple-slider-pad-top: 108px;
    --triple-slider-pad-bottom: 134px;
    --triple-slider-section-min-h: 1218px;

    --triple-slider-copy-gap: 64px;
    --triple-slider-copy-inner-gap: 66px;

    --triple-slider-border-radius: 50px;

    --triple-slider-arrow-size: 71px;
    --triple-slider-arrow-offset-x: 24px;

    --triple-slider-title-col: calc(100cqi * 489 / 1376);
    --triple-slider-title-size: 40px;
    --triple-slider-title-lh: 52px;
    --triple-slider-text-max-w: 396px;
    --triple-slider-text-min-h: 417px;

    --triple-slider-radio-w: 96px;
    --triple-slider-radio-h: 12px;
    --triple-slider-radio-border-radius: 15px;
    --triple-slider-radios-gap: 6px;
    --triple-slider-radios-pad-top: 45px;
  }
}

/* 960–1217 */
@container triple-slider (min-width: 960px) and (max-width: 1217px) {
  #sony-lp .triple-slider__inner {
    --triple-slider-slide-w: 776px;
    --triple-slider-slide-h: 436px;
    --triple-slider-slide-gap: 35px;

    --triple-slider-pad-x: 92px;
    --triple-slider-pad-top: 100px;
    --triple-slider-pad-bottom: 134px;
    --triple-slider-section-min-h: 1207px;

    --triple-slider-copy-gap: 64px;
    --triple-slider-copy-inner-gap: 66px;

    --triple-slider-border-radius: 50px;

    --triple-slider-arrow-size: 71px;
    --triple-slider-arrow-offset-x: 22px;

    --triple-slider-title-col: calc(100cqi * 489 / 1375);
    --triple-slider-title-size: 40px;
    --triple-slider-title-lh: 52px;
    --triple-slider-text-max-w: 396px;
    --triple-slider-text-min-h: 417px;

    --triple-slider-radio-w: 96px;
    --triple-slider-radio-h: 12px;
    --triple-slider-radio-border-radius: 15px;
    --triple-slider-radios-gap: 6px;
    --triple-slider-radios-pad-top: 45px;
  }
}

/* 1218–1375 */
@container triple-slider (min-width: 1218px) and (max-width: 1375px) {
  #sony-lp .triple-slider__inner {
    --triple-slider-slide-w: 1040px;
    --triple-slider-slide-h: 584px;
    --triple-slider-slide-gap: 35px;

    --triple-slider-pad-x: 90px;
    --triple-slider-pad-top: 100px;
    --triple-slider-pad-bottom: 100px;
    --triple-slider-section-min-h: 1211px;

    --triple-slider-copy-gap: 64px;
    --triple-slider-copy-inner-gap: 0px;

    --triple-slider-border-radius: 50px;

    --triple-slider-arrow-size: 71px;
    --triple-slider-arrow-offset-x-prev: 19px;
    --triple-slider-arrow-offset-x: 19px;

    --triple-slider-title-col: calc(100cqi * 489 / 1375);
    --triple-slider-title-size: 40px;
    --triple-slider-title-lh: 52px;
    --triple-slider-text-max-w: 600px;
    --triple-slider-text-min-h: 287px;

    --triple-slider-radio-w: 96px;
    --triple-slider-radio-h: 12px;
    --triple-slider-radio-border-radius: 15px;
    --triple-slider-radios-gap: 6px;
    --triple-slider-radios-pad-top: 52px;
  }
}

/* 1375–1499 (primary desktop comp — rail caps at 1375 via 0-tokens.css) */
@container triple-slider (min-width: 1375px) and (max-width: 1499px) {
  #sony-lp .triple-slider__inner {
    --triple-slider-slide-w: 1196px;
    --triple-slider-slide-h: 672px;
    --triple-slider-slide-gap: 35px;

    --triple-slider-pad-x: 90px;
    --triple-slider-pad-top: 100px;
    --triple-slider-pad-bottom: 100px;
    --triple-slider-section-min-h: 1248px;

    --triple-slider-copy-gap: 64px;
    --triple-slider-copy-inner-gap: 16px;

    --triple-slider-border-radius: 50px;

    --triple-slider-arrow-size: 71px;
    --triple-slider-arrow-offset-x: 19px;

    --triple-slider-title-col: calc(100cqi * 489 / 1375);
    --triple-slider-title-size: 40px;
    --triple-slider-title-lh: 52px;
    --triple-slider-text-max-w: 691px;
    --triple-slider-text-min-h: 266px;

    --triple-slider-radio-w: 96px;
    --triple-slider-radio-h: 12px;
    --triple-slider-radio-border-radius: 15px;
    --triple-slider-radios-gap: 6px;
    --triple-slider-radios-pad-top: 34px;
  }
}

/* ≥1500 */
@container triple-slider (min-width: 1500px) {
  #sony-lp .triple-slider__inner {
    --triple-slider-slide-w: 1196px;
    --triple-slider-slide-h: 672px;
    --triple-slider-slide-gap: 35px;

    --triple-slider-pad-x: 90px;
    --triple-slider-pad-top: 100px;
    --triple-slider-pad-bottom: 100px;
    --triple-slider-section-min-h: 1248px;

    --triple-slider-copy-gap: 64px;
    --triple-slider-copy-inner-gap: 15px;

    --triple-slider-border-radius: 50px;

    --triple-slider-arrow-size: 71px;
    /* Asymmetric arrows: next pushed in from the rail, prev stays close to the edge. */
    --triple-slider-arrow-offset-x: 143px;
    --triple-slider-arrow-offset-x-prev: 19px;

    --triple-slider-title-col: 489px;
    --triple-slider-title-size: 40px;
    --triple-slider-title-lh: 52px;
    --triple-slider-text-max-w: 691px;
    --triple-slider-text-min-h: 266px;

    --triple-slider-radio-w: 96px;
    --triple-slider-radio-h: 12px;
    --triple-slider-radio-border-radius: 15px;
    --triple-slider-radios-gap: 6px;
    --triple-slider-radios-pad-top: 34px;
  }
}

/* ========== 8-double-video-slider/variables.css ========== */

/*
 * 8-double-video-slider — design tokens (scoped under #sony-lp per ARCHITECTURE.md).
 *
 * Bands: 320 / 500 / 920 / 960 / 1218 / 1375 / 1500.
 * `.double-video-slider` is the @container; tokens live on
 * .double-video-slider__inner so bounded queries can override them.
 *
 * Desktop bands use bounded @container (min-… and max-…) so each tier sets a
 * full slice of tokens without relying on earlier min-width-only rules.
 */

#sony-lp {
  --double-video-slider-bg: #f5f5f7;
  --double-video-slider-slide-bg: #000000;
  --double-video-slider-color-text: #000000;
  --double-video-slider-color-text-muted: #6b6b6b;
  --double-video-slider-color-arrow-fill: #000000;
  --double-video-slider-color-arrow-stroke: #ffffff;

  --double-video-slider-font: "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --double-video-slider-title-weight: 700;
  --double-video-slider-text-weight: 400;

  --double-video-slider-radio-opacity-idle: 0.2;
  --double-video-slider-radio-opacity-active: 1;

  /* Slider track / radio: shared LP tokens (see 0-tokens.css --lp-slider-*). */
  --double-video-slider-transition-track: var(--lp-slider-transition-track, 0.78s cubic-bezier(0.22, 1, 0.36, 1));
  --double-video-slider-transition-radio: var(--lp-slider-transition-radio, 0.28s ease);
  --double-video-slider-focus-outline-width: 2px;
  --double-video-slider-focus-outline-offset: 4px;
}

#sony-lp .double-video-slider {
  --double-video-slider-width: var(--lp-max-width, 100%);
  container-type: inline-size;
  container-name: double-video-slider;
}

/* Base band: 320–499 (mobile, fluid full-width video). */
#sony-lp .double-video-slider__inner {
  --double-video-slider-slide-w: 100cqi;
  --double-video-slider-slide-h: calc(100cqi * 672 / 1196);
  --double-video-slider-slide-gap: 0px;

  --double-video-slider-pad-top: 0px;
  --double-video-slider-pad-bottom: 50px;
  --double-video-slider-pad-left: 0px;
  --double-video-slider-pad-right: 0px;
  --double-video-slider-section-min-h: auto;

  --double-video-slider-copy-pad-left: 13px;
  --double-video-slider-copy-pad-right: 13px;
  --double-video-slider-copy-gap: 105px;
  --double-video-slider-copy-inner-gap: 14px;

  --double-video-slider-border-radius: 0px;

  --double-video-slider-arrow-size: 56px;
  --double-video-slider-arrow-offset-x: 0px;

  --double-video-slider-title-col: 100%;
  --double-video-slider-title-size: 30px;
  --double-video-slider-title-lh: 39px;
  --double-video-slider-text-size: 18px;
  --double-video-slider-text-lh: 23px;
  --double-video-slider-text-max-w: 100%;
  --double-video-slider-text-min-h: 253px;

  --double-video-slider-radio-w: 95px;
  --double-video-slider-radio-h: 12px;
  --double-video-slider-radio-border-radius: 10px;
  --double-video-slider-radios-gap: 4px;
  --double-video-slider-radios-pad-top: 42px;
}

/* 920–959 — narrow desktop band */
@container double-video-slider (min-width: 920px) and (max-width: 959px) {
  #sony-lp .double-video-slider__inner {
    --double-video-slider-slide-w: 778px;
    --double-video-slider-slide-h: 473px;
    --double-video-slider-slide-gap: 36px;

    --double-video-slider-pad-top: 59px;
    --double-video-slider-pad-bottom: 74px;
    --double-video-slider-pad-left: 49px;
    --double-video-slider-pad-right: 93px;

    --double-video-slider-copy-pad-left: 48px;
    --double-video-slider-copy-pad-right: 93px;
    --double-video-slider-copy-gap: 65px;
    --double-video-slider-copy-inner-gap: 40px;

    --double-video-slider-border-radius: 50px;

    --double-video-slider-arrow-size: 71px;
    --double-video-slider-arrow-offset-x: 22px;

    --double-video-slider-title-col: 100%;
    --double-video-slider-title-size: 40px;
    --double-video-slider-title-lh: 52px;
    --double-video-slider-text-max-w: 100%;
    --double-video-slider-text-min-h: 152px;

    --double-video-slider-radio-w: 96px;
    --double-video-slider-radio-h: 12px;
    --double-video-slider-radio-border-radius: 15px;
    --double-video-slider-radios-gap: 6px;
    --double-video-slider-radios-pad-top: 5px;
  }

  /* Second variant nudges the track + copy left padding to 92px. */
  #sony-lp .double-video-slider[data-active-slide="1"] .double-video-slider__inner {
    --double-video-slider-pad-left: 92px;
    --double-video-slider-copy-pad-left: 92px;
  }
}

/* 960–1217 */
@container double-video-slider (min-width: 960px) and (max-width: 1217px) {
  #sony-lp .double-video-slider__inner {
    --double-video-slider-slide-w: 778px;
    --double-video-slider-slide-h: 437px;
    --double-video-slider-slide-gap: 36px;

    --double-video-slider-pad-top: 67px;
    --double-video-slider-pad-bottom: 43px;
    --double-video-slider-pad-left: 92px;
    --double-video-slider-pad-right: 92px;

    --double-video-slider-copy-pad-left: 92px;
    --double-video-slider-copy-pad-right: 92px;
    --double-video-slider-copy-gap: 65px;
    --double-video-slider-copy-inner-gap: 40px;

    --double-video-slider-border-radius: 50px;

    --double-video-slider-arrow-size: 71px;
    --double-video-slider-arrow-offset-x: 19px;
    --double-video-slider-arrow-offset-x-prev:21px;
    --double-video-slider-title-col: 100%;
    --double-video-slider-title-size: 40px;
    --double-video-slider-title-lh: 52px;
    --double-video-slider-text-size: 18px;
    --double-video-slider-text-lh: 23px;
    --double-video-slider-text-max-w: 100%;
    --double-video-slider-text-min-h: 154px;

    --double-video-slider-radio-w: 96px;
    --double-video-slider-radio-h: 12px;
    --double-video-slider-radio-border-radius: 15px;
    --double-video-slider-radios-gap: 6px;
    --double-video-slider-radios-pad-top: 0px;
  }
}

/* 1218–1374 */
@container double-video-slider (min-width: 1218px) and (max-width: 1374px) {
  #sony-lp .double-video-slider__inner {
    --double-video-slider-slide-w: 1039px;
    --double-video-slider-slide-h: 584px;
    --double-video-slider-slide-gap: 35px;

    --double-video-slider-pad-top: 63px;
    --double-video-slider-pad-bottom: 56px;
    --double-video-slider-pad-left: 89px;
    --double-video-slider-pad-right: 90px;

    --double-video-slider-copy-pad-left: 89px;
    --double-video-slider-copy-pad-right: 89px;
    --double-video-slider-copy-gap: 65px;
    --double-video-slider-copy-inner-gap: 16px;

    --double-video-slider-border-radius: 50px;

    --double-video-slider-arrow-size: 71px;
    --double-video-slider-arrow-offset-x: 19px;

    --double-video-slider-title-col: 512px;
    --double-video-slider-title-size: 40px;
    --double-video-slider-title-lh: 52px;
    --double-video-slider-text-size: 18px;
    --double-video-slider-text-lh: 23px;
    --double-video-slider-text-max-w: 100%;
    --double-video-slider-text-min-h: 193px;

    --double-video-slider-radio-w: 96px;
    --double-video-slider-radio-h: 12px;
    --double-video-slider-radio-border-radius: 15px;
    --double-video-slider-radios-gap: 6px;
    --double-video-slider-radios-pad-top: 36px;
  }
}

/* 1375–1499 (primary desktop comp — rail caps at 1376 via 0-tokens.css) */
@container double-video-slider (min-width: 1375px) and (max-width: 1499px) {
  #sony-lp .double-video-slider__inner {
    --double-video-slider-slide-w: 1196px;
    --double-video-slider-slide-h: 672px;
    --double-video-slider-slide-gap: 36px;

    --double-video-slider-pad-top: 51px;
    --double-video-slider-pad-bottom: 71px;
    --double-video-slider-pad-left: 90px;
    --double-video-slider-pad-right: 90px;

    --double-video-slider-copy-pad-left: 137px;
    --double-video-slider-copy-pad-right: 128px;
    --double-video-slider-copy-gap: 65px;
    --double-video-slider-copy-inner-gap: 101px;

    --double-video-slider-border-radius: 50px;

    --double-video-slider-arrow-size: 71px;
    --double-video-slider-arrow-offset-x: 19px;

    --double-video-slider-title-col: 489px;
    --double-video-slider-title-size: 40px;
    --double-video-slider-title-lh: 52px;
    --double-video-slider-text-size: 18px;
    --double-video-slider-text-lh: 23px;
    --double-video-slider-text-max-w: 100%;
    --double-video-slider-text-min-h: 191px;

    --double-video-slider-radio-w: 96px;
    --double-video-slider-radio-h: 12px;
    --double-video-slider-radio-border-radius: 15px;
    --double-video-slider-radios-gap: 6px;
    --double-video-slider-radios-pad-top: 36px;
  }
}

/* ≥1500 */
@container double-video-slider (min-width: 1500px) {
  #sony-lp .double-video-slider__inner {
    --double-video-slider-slide-w: 1196px;
    --double-video-slider-slide-h: 672px;
    --double-video-slider-slide-gap: 35px;

    --double-video-slider-pad-top: 51px;
    --double-video-slider-pad-bottom: 51px;
    --double-video-slider-pad-left: 90px;
    --double-video-slider-pad-right: 214px;

    --double-video-slider-copy-pad-left: 137px;
    --double-video-slider-copy-pad-right: 255px;
    --double-video-slider-copy-gap: 65px;
    --double-video-slider-copy-inner-gap: 101px;

    --double-video-slider-border-radius: 50px;

    --double-video-slider-arrow-size: 71px;
    /* Next from right rail; prev hugs left edge at this band. */
    --double-video-slider-arrow-offset-x: 145px;
    --double-video-slider-arrow-offset-x-prev: 21px;

    --double-video-slider-title-col: 489px;
    --double-video-slider-title-size: 40px;
    --double-video-slider-title-lh: 52px;
    --double-video-slider-text-size: 18px;
    --double-video-slider-text-lh: 23px;
    --double-video-slider-text-max-w: 521px;
    --double-video-slider-text-min-h: 193px;

    --double-video-slider-radio-w: 96px;
    --double-video-slider-radio-h: 12px;
    --double-video-slider-radio-border-radius: 15px;
    --double-video-slider-radios-gap: 6px;
    --double-video-slider-radios-pad-top: 36px;
  }
}

/* ========== 9-full-video-slider/variables.css ========== */

/*
 * 9-full-video-slider — design tokens (scoped under #sony-lp per ARCHITECTURE.md).
 *
 * Bands: 320 / 500 / 920 / 960 / 1218 / 1375 / 1500.
 *
 * Tokens live on .full-video-slider (no __inner wrapper here). The section
 * itself consumes some tokens (padding), so per-band overrides must come
 * from an ancestor in the cascade. We use @container sony-lp (#sony-lp is the
 * named container; .full-video-slider is a descendant), which lines up
 * exactly with the LP rail bands.
 *
 * Slide aspect stays fluid (--lp-video-aspect-w/h) - styles.css drives sizing
 * via aspect-ratio, so there is no slide-w/slide-h per band.
 */

#sony-lp {
  --full-video-slider-bg: #f5f5f7;
  --full-video-slider-slide-bg: #000000;
  --full-video-slider-color-text: #000000;
  --full-video-slider-color-text-muted: #6b6b6b;
  --full-video-slider-color-arrow-fill: #000000;
  --full-video-slider-color-arrow-stroke: #ffffff;

  --full-video-slider-font: "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --full-video-slider-title-weight: 700;
  --full-video-slider-text-weight: 400;

  --full-video-slider-radio-opacity-idle: 0.2;
  --full-video-slider-radio-opacity-active: 1;

  /* Slider track / radio: shared LP tokens (see 0-tokens.css --lp-slider-*). */
  --full-video-slider-transition-track: var(--lp-slider-transition-track, 0.78s cubic-bezier(0.22, 1, 0.36, 1));
  --full-video-slider-transition-radio: var(--lp-slider-transition-radio, 0.28s ease);
  --full-video-slider-focus-outline-width: 2px;
  --full-video-slider-focus-outline-offset: 4px;
}

/* Base band: 320–499 (mobile, fluid full-width video, arrows below video). */
#sony-lp .full-video-slider {
  --full-video-slider-width: var(--lp-max-width, 100%);
  --full-video-slider-pad-top: 0px;
  --full-video-slider-pad-bottom: 50px;
  --full-video-slider-pad-left: 0px;
  --full-video-slider-pad-right: 0px;

  --full-video-slider-copy-pad-left: 13px;
  --full-video-slider-copy-pad-right: 13px;
  --full-video-slider-copy-gap: 111px;
  --full-video-slider-copy-inner-gap: 14px;

  --full-video-slider-border-radius: 0px;

  --full-video-slider-arrow-size: 56px;
  --full-video-slider-arrow-offset-x: 0px;

  --full-video-slider-heading-col: 100%;
  --full-video-slider-heading-size: 30px;
  --full-video-slider-heading-lh: 39px;
  --full-video-slider-text-size: 18px;
  --full-video-slider-text-lh: 24px;
  --full-video-slider-text-max-w: 100%;
  --full-video-slider-text-min-h: 299px;
  --full-video-slider-desc-col-h: auto;

  --full-video-slider-radio-w: 95px;
  --full-video-slider-radio-h: 12px;
  --full-video-slider-radio-border-radius: 10px;
  --full-video-slider-radios-gap: 4px;
  --full-video-slider-radios-pad-top: 29px;
}

/* 500–919 — wider mobile. */
@container sony-lp (min-width: 500px) and (max-width: 919px) {
  #sony-lp .full-video-slider {
    --full-video-slider-copy-pad-left: 13px;
    --full-video-slider-copy-pad-right: 13px;
    --full-video-slider-copy-gap: 111px;
    --full-video-slider-copy-inner-gap: 14px;
    --full-video-slider-text-min-h: 220px;
    --full-video-slider-radios-pad-top: 29px;
  }
}

/* 920–959 — narrow desktop. Arrows centred on the video (default >=920 rule). */
@container sony-lp (min-width: 920px) and (max-width: 959px) {
  #sony-lp .full-video-slider {
    --full-video-slider-pad-bottom: 90px;
    --full-video-slider-pad-left: 0px;
    --full-video-slider-pad-right: 0px;

    --full-video-slider-copy-pad-left: 50px;
    --full-video-slider-copy-pad-right: 50px;
    --full-video-slider-copy-gap: 71px;
    --full-video-slider-copy-inner-gap: 40px;

    --full-video-slider-arrow-size: 71px;
    --full-video-slider-arrow-offset-x: 19px;

    --full-video-slider-heading-col: 100%;
    --full-video-slider-heading-size: 40px;
    --full-video-slider-heading-lh: 52px;
    --full-video-slider-text-size: 18px;
    --full-video-slider-text-lh: 24px;
    --full-video-slider-text-max-w: 100%;
    --full-video-slider-text-min-h: 150px;
    --full-video-slider-desc-col-h: auto;

    --full-video-slider-radio-w: 96px;
    --full-video-slider-radio-h: 12px;
    --full-video-slider-radio-border-radius: 15px;
    --full-video-slider-radios-gap: 6px;
    --full-video-slider-radios-pad-top: 40px;
  }
}

/* 960–1217 */
@container sony-lp (min-width: 960px) and (max-width: 1217px) {
  #sony-lp .full-video-slider {
    --full-video-slider-pad-bottom: 96px;
    --full-video-slider-pad-left: 0px;
    --full-video-slider-pad-right: 0px;

    --full-video-slider-copy-pad-left: 89px;
    --full-video-slider-copy-pad-right: 89px;
    --full-video-slider-copy-gap: 71px;
    --full-video-slider-copy-inner-gap: 40px;

    --full-video-slider-arrow-size: 71px;
    --full-video-slider-arrow-offset-x: 19px;

    --full-video-slider-heading-col: 100%;
    --full-video-slider-heading-size: 40px;
    --full-video-slider-heading-lh: 52px;
    --full-video-slider-text-size: 18px;
    --full-video-slider-text-lh: 24px;
    --full-video-slider-text-max-w: 100%;
    --full-video-slider-text-min-h: 150px;
    --full-video-slider-desc-col-h: auto;

    --full-video-slider-radio-w: 96px;
    --full-video-slider-radio-h: 12px;
    --full-video-slider-radio-border-radius: 15px;
    --full-video-slider-radios-gap: 6px;
    --full-video-slider-radios-pad-top: 40px;
  }
}

/* 1218–1374 (row layout from here up: heading left / description right). */
@container sony-lp (min-width: 1218px) and (max-width: 1374px) {
  #sony-lp .full-video-slider {
    --full-video-slider-pad-bottom: 100px;
    --full-video-slider-pad-left: 0px;
    --full-video-slider-pad-right: 0px;

    --full-video-slider-copy-pad-left: 89px;
    --full-video-slider-copy-pad-right: 89px;
    --full-video-slider-copy-gap: 71px;
    --full-video-slider-copy-inner-gap: 88px;

    --full-video-slider-arrow-size: 71px;
    --full-video-slider-arrow-offset-x: 19px;

    --full-video-slider-heading-col: 440px;
    --full-video-slider-heading-size: 40px;
    --full-video-slider-heading-lh: 52px;
    --full-video-slider-text-size: 18px;
    --full-video-slider-text-lh: 24px;
    --full-video-slider-text-max-w: 512px;
    --full-video-slider-text-min-h: 0;
    --full-video-slider-desc-col-h: 224px;

    --full-video-slider-radio-w: 96px;
    --full-video-slider-radio-h: 12px;
    --full-video-slider-radio-border-radius: 15px;
    --full-video-slider-radios-gap: 6px;
    --full-video-slider-radios-pad-top: 13px;
  }
}

/* 1375–1499 (primary desktop comp). */
@container sony-lp (min-width: 1375px) and (max-width: 1499px) {
  #sony-lp .full-video-slider {
    --full-video-slider-pad-bottom: 113px;
    --full-video-slider-pad-left: 0px;
    --full-video-slider-pad-right: 0px;

    --full-video-slider-copy-pad-left: 137px;
    --full-video-slider-copy-pad-right: 128px;
    --full-video-slider-copy-gap: 71px;
    --full-video-slider-copy-inner-gap: 183px;

    --full-video-slider-arrow-size: 71px;
    --full-video-slider-arrow-offset-x: 19px;

    --full-video-slider-heading-col: 407px;
    --full-video-slider-heading-size: 40px;
    --full-video-slider-heading-lh: 52px;
    --full-video-slider-text-size: 18px;
    --full-video-slider-text-lh: 24px;
    --full-video-slider-text-max-w: 521px;
    --full-video-slider-text-min-h: 0;
    --full-video-slider-desc-col-h: 224px;

    --full-video-slider-radio-w: 96px;
    --full-video-slider-radio-h: 12px;
    --full-video-slider-radio-border-radius: 15px;
    --full-video-slider-radios-gap: 6px;
    --full-video-slider-radios-pad-top: 13px;
  }
}

/* >=1500 */
@container sony-lp (min-width: 1500px) {
  #sony-lp .full-video-slider {
    --full-video-slider-pad-bottom: 113px;
    --full-video-slider-pad-left: 0px;
    --full-video-slider-pad-right: 0px;

    --full-video-slider-copy-pad-left: 137px;
    --full-video-slider-copy-pad-right: 187px;
    --full-video-slider-copy-gap: 71px;
    --full-video-slider-copy-inner-gap: 183px;

    --full-video-slider-arrow-size: 71px;
    --full-video-slider-arrow-offset-x: 19px;

    --full-video-slider-heading-col: 407px;
    --full-video-slider-heading-size: 40px;
    --full-video-slider-heading-lh: 52px;
    --full-video-slider-text-size: 18px;
    --full-video-slider-text-lh: 24px;
    --full-video-slider-text-max-w: 586px;
    --full-video-slider-text-min-h: 0;
    --full-video-slider-desc-col-h: 224px;

    --full-video-slider-radio-w: 96px;
    --full-video-slider-radio-h: 12px;
    --full-video-slider-radio-border-radius: 15px;
    --full-video-slider-radios-gap: 6px;
    --full-video-slider-radios-pad-top: 13px;
  }
}

/* ========== 12-3-collection/variables.css ========== */

/*
 * 12-3-collection — design tokens (scoped under #sony-lp per ARCHITECTURE.md).
 *
 * Tokens live on `#sony-lp .collection3`. Per-band overrides use
 * @container sony-lp because `.collection3` is not itself a query container
 * (a container can't restyle itself; `#sony-lp` is the LP's named container).
 *
 * Bands: 320 / 500 / 700 / 920 / 960 / 1218 / 1376 / 1500.
 */

/* Base band: 320–499 (mobile defaults). */
#sony-lp .collection3 {
  --collection3-section-pt: 104px;
  --collection3-section-pb: 65px;
  --collection3-hero-mt: 100px;
  --collection3-img: 293px;
  --collection3-gap-img-subtitle: 0;
  --collection3-title-fs: 30px;
  --collection3-title-lh: 39px;
  --collection3-subtitle-fs: 30px;
  --collection3-subtitle-lh: 39px;
  --collection3-title-pad-inline: 13px;
  --collection3-subtitle-pad-inline: 13px;
  --collection3-gap-sub-desc: 50px;
  --collection3-desc-max-w: 100%;
  --collection3-desc-min-h: 437px;
  --collection3-desc-fixed-h: auto;
  --collection3-desc-wrap-justify: center;
  --collection3-pad-inline: 13px;
  --collection3-gap-desc-radios: 50px;
  --collection3-gap-radios-foot: 50px;
  --collection3-radios-h: 12px;
  --collection3-foot-min-h: 0;
  --collection3-foot-max-w: 100%;
}

@container sony-lp (min-width: 500px) and (max-width: 699px) {
  #sony-lp .collection3 {
    --collection3-section-pt: 104px;
    --collection3-section-pb: 65px;
    --collection3-hero-mt: 120px;
    --collection3-img: 420px;
    --collection3-gap-img-subtitle: 40px;
    --collection3-title-fs: 40px;
    --collection3-title-lh: 52px;
    --collection3-subtitle-fs: 40px;
    --collection3-subtitle-lh: 52px;
    --collection3-title-pad-inline: 40px;
    --collection3-subtitle-pad-inline: 40px;
    --collection3-gap-sub-desc: 60px;
    --collection3-desc-max-w: 100%;
    --collection3-desc-min-h: 360px;
    --collection3-desc-fixed-h: auto;
    --collection3-desc-wrap-justify: flex-start;
    --collection3-pad-inline: 50px;
    --collection3-gap-desc-radios: 50px;
    --collection3-gap-radios-foot: 50px;
    --collection3-foot-min-h: 0;
    --collection3-foot-max-w: 100%;
  }
}

@container sony-lp (min-width: 700px) and (max-width: 919px) {
  #sony-lp .collection3 {
    --collection3-section-pt: 124px;
    --collection3-section-pb: 90px;
    --collection3-hero-mt: 120px;
    --collection3-img: 600px;
    --collection3-gap-img-subtitle: 60px;
    --collection3-title-fs: 50px;
    --collection3-title-lh: 65px;
    --collection3-subtitle-fs: 50px;
    --collection3-subtitle-lh: 65px;
    --collection3-title-pad-inline: 60px;
    --collection3-subtitle-pad-inline: 60px;
    --collection3-gap-sub-desc: 80px;
    --collection3-desc-max-w: 100%;
    --collection3-desc-min-h: 280px;
    --collection3-desc-fixed-h: auto;
    --collection3-desc-wrap-justify: flex-start;
    --collection3-pad-inline: 80px;
    --collection3-gap-desc-radios: 60px;
    --collection3-gap-radios-foot: 60px;
    --collection3-foot-min-h: 0;
    --collection3-foot-max-w: 100%;
  }
}

@container sony-lp (min-width: 920px) and (max-width: 959px) {
  #sony-lp .collection3 {
    --collection3-section-pt: 124px;
    --collection3-section-pb: 118px;
    --collection3-hero-mt: 100px;
    --collection3-img: 776px;
    --collection3-gap-img-subtitle: 100px;
    --collection3-title-fs: 60px;
    --collection3-title-lh: 79px;
    --collection3-subtitle-fs: 60px;
    --collection3-subtitle-lh: 79px;
    --collection3-title-pad-inline: 24px;
    --collection3-subtitle-pad-inline: 72px;
    --collection3-gap-sub-desc: 100px;
    --collection3-desc-max-w: 736px;
    --collection3-desc-min-h: 0;
    --collection3-desc-fixed-h: 207px;
    --collection3-desc-wrap-justify: flex-start;
    --collection3-pad-inline: 0;
    --collection3-gap-desc-radios: 52px;
    --collection3-gap-radios-foot: 65px;
    --collection3-foot-min-h: 51px;
    --collection3-foot-max-w: 737px;
  }
}

@container sony-lp (min-width: 960px) and (max-width: 1217px) {
  #sony-lp .collection3 {
    --collection3-section-pt: 124px;
    --collection3-section-pb: 118px;
    --collection3-hero-mt: 100px;
    --collection3-img: 776px;
    --collection3-gap-img-subtitle: 100px;
    --collection3-title-fs: 60px;
    --collection3-title-lh: 79px;
    --collection3-subtitle-fs: 60px;
    --collection3-subtitle-lh: 79px;
    --collection3-title-pad-inline: 24px;
    --collection3-subtitle-pad-inline: 92px;
    --collection3-gap-sub-desc: 100px;
    --collection3-desc-max-w: 776px;
    --collection3-desc-min-h: 0;
    --collection3-desc-fixed-h: 184px;
    --collection3-desc-wrap-justify: flex-start;
    --collection3-pad-inline: 0;
    --collection3-gap-desc-radios: 75px;
    --collection3-gap-radios-foot: 65px;
    --collection3-foot-min-h: 51px;
    --collection3-foot-max-w: 776px;
  }
}

@container sony-lp (min-width: 1218px) and (max-width: 1375px) {
  #sony-lp .collection3 {
    --collection3-section-pt: 124px;
    --collection3-section-pb: 118px;
    --collection3-hero-mt: 128px;
    --collection3-img: 994px;
    --collection3-gap-img-subtitle: 0;
    --collection3-title-fs: 60px;
    --collection3-title-lh: 79px;
    --collection3-subtitle-fs: 60px;
    --collection3-subtitle-lh: 79px;
    --collection3-title-pad-inline: 24px;
    --collection3-subtitle-pad-inline: 24px;
    --collection3-gap-sub-desc: 73px;
    --collection3-desc-max-w: 896px;
    --collection3-desc-min-h: 0;
    --collection3-desc-fixed-h: 176px;
    --collection3-desc-wrap-justify: flex-start;
    --collection3-pad-inline: 0;
    --collection3-gap-desc-radios: 47px;
    --collection3-gap-radios-foot: 65px;
    --collection3-foot-min-h: 51px;
    --collection3-foot-max-w: 896px;
  }
}

@container sony-lp (min-width: 1376px) and (max-width: 1499px) {
  #sony-lp .collection3 {
    --collection3-section-pt: 124px;
    --collection3-section-pb: 118px;
    --collection3-hero-mt: 124px;
    --collection3-img: 994px;
    --collection3-gap-img-subtitle: 0;
    --collection3-title-fs: 60px;
    --collection3-title-lh: 79px;
    --collection3-subtitle-fs: 60px;
    --collection3-subtitle-lh: 79px;
    --collection3-title-pad-inline: 24px;
    --collection3-subtitle-pad-inline: 24px;
    --collection3-gap-sub-desc: 73px;
    --collection3-desc-max-w: 994px;
    --collection3-desc-min-h: 0;
    --collection3-desc-fixed-h: 176px;
    --collection3-desc-wrap-justify: flex-start;
    --collection3-pad-inline: 0;
    --collection3-gap-desc-radios: 47px;
    --collection3-gap-radios-foot: 65px;
    --collection3-foot-min-h: 51px;
    --collection3-foot-max-w: 994px;
  }
}

@container sony-lp (min-width: 1500px) {
  #sony-lp .collection3 {
    --collection3-section-pt: 124px;
    --collection3-section-pb: 118px;
    --collection3-hero-mt: 128px;
    --collection3-img: 994px;
    --collection3-gap-img-subtitle: 0;
    --collection3-title-fs: 60px;
    --collection3-title-lh: 79px;
    --collection3-subtitle-fs: 60px;
    --collection3-subtitle-lh: 79px;
    --collection3-title-pad-inline: 24px;
    --collection3-subtitle-pad-inline: 24px;
    --collection3-gap-sub-desc: 73px;
    --collection3-desc-max-w: 1118px;
    --collection3-desc-min-h: 0;
    --collection3-desc-fixed-h: 176px;
    --collection3-desc-wrap-justify: flex-start;
    --collection3-pad-inline: 0;
    --collection3-gap-desc-radios: 47px;
    --collection3-gap-radios-foot: 65px;
    --collection3-foot-min-h: 51px;
    --collection3-foot-max-w: 1118px;
  }
}

/* ========== 13-double-video-section-2/variables.css ========== */

/*
 * 13-double-video-section-2 — design tokens (scoped under #sony-lp per ARCHITECTURE.md).
 *
 * Bands: 320 / 500 / 920 / 960 / 1218 / 1376 / 1500.
 * `.double-video-2` is the @container; tokens live on
 * .double-video-2__inner so bounded queries can override them.
 *
 * Desktop bands use bounded @container (min-… and max-…) so each tier sets a
 * full slice of tokens without relying on earlier min-width-only rules.
 */

#sony-lp {
  --double-video-2-bg: #f5f5f7;
  --double-video-2-slide-bg: #000000;
  --double-video-2-color-text: #000000;
  --double-video-2-color-text-muted: #6b6b6b;
  --double-video-2-color-arrow-fill: #000000;
  --double-video-2-color-arrow-stroke: #ffffff;

  --double-video-2-font: "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --double-video-2-title-weight: 700;
  --double-video-2-text-weight: 400;

  --double-video-2-radio-opacity-idle: 0.2;
  --double-video-2-radio-opacity-active: 1;

  /* Slider track / radio: shared LP tokens (see 0-tokens.css --lp-slider-*). */
  --double-video-2-transition-track: var(--lp-slider-transition-track, 0.78s cubic-bezier(0.22, 1, 0.36, 1));
  --double-video-2-transition-radio: var(--lp-slider-transition-radio, 0.28s ease);
  --double-video-2-focus-outline-width: 2px;
  --double-video-2-focus-outline-offset: 4px;
}

#sony-lp .double-video-2 {
  --double-video-2-width: var(--lp-max-width, 100%);
  container-type: inline-size;
  container-name: double-video-2;
}

/* Base band: 320–499 (mobile, fluid full-width video). */
#sony-lp .double-video-2__inner {
  --double-video-2-slide-w: 100cqi;
  --double-video-2-slide-h: calc(100cqi * 672 / 1196);
  --double-video-2-slide-gap: 0px;

  --double-video-2-pad-top: 0px;
  --double-video-2-pad-bottom: 50px;
  --double-video-2-pad-left: 0px;
  --double-video-2-pad-right: 0px;
  --double-video-2-section-min-h: auto;

  --double-video-2-copy-pad-left: 14px;
  --double-video-2-copy-pad-right: 14px;
  --double-video-2-copy-gap: 111px;
  --double-video-2-copy-inner-gap: 14px;

  --double-video-2-border-radius: 0px;

  --double-video-2-arrow-size: 56px;
  --double-video-2-arrow-offset-x: 0px;

  --double-video-2-title-col: 100%;
  --double-video-2-title-size: 30px;
  --double-video-2-title-lh: 39px;
  --double-video-2-text-size: 18px;
  --double-video-2-text-lh: 23px;
  --double-video-2-text-max-w: unset;
  --double-video-2-text-min-h: 533px;

  --double-video-2-radio-w: 95px;
  --double-video-2-radio-h: 12px;
  --double-video-2-radio-border-radius: 10px;
  --double-video-2-radios-gap: 6px;
  --double-video-2-radios-pad-top: 42px;
}

/* 920–959 — narrow desktop band */
@container double-video-2 (min-width: 920px) and (max-width: 959px) {
  #sony-lp .double-video-2__inner {
    --double-video-2-slide-w: 778px;
    --double-video-2-slide-h: 473px;
    --double-video-2-slide-gap: 36px;

    --double-video-2-pad-top: 88px;
    --double-video-2-pad-bottom: 88px;
    --double-video-2-pad-left: 48px;
    --double-video-2-pad-right: 94px;

    --double-video-2-copy-pad-left: 48px;
    --double-video-2-copy-pad-right: 94px;
    --double-video-2-copy-gap: 65px;
    --double-video-2-copy-inner-gap: 40px;

    --double-video-2-border-radius: 50px;

    --double-video-2-arrow-size: 71px;
    --double-video-2-arrow-offset-x: 24px;

    /* 100% here (not slide px width): copy is column flex; flex-basis uses main
       axis = height, so a pixel width would wrongly fix the title box height. */
    --double-video-2-title-col: 100%;
    --double-video-2-title-size: 40px;
    --double-video-2-title-lh: 52px;
    --double-video-2-text-max-w: 776px;
    --double-video-2-text-min-h: 253px;

    --double-video-2-radio-w: 96px;
    --double-video-2-radio-h: 12px;
    --double-video-2-radio-border-radius: 15px;
    --double-video-2-radios-gap: 6px;
    --double-video-2-radios-pad-top: 5px;
  }

  /* Second variant nudges the track + copy left padding to 92px. */
  #sony-lp .double-video-2[data-active-slide="1"] .double-video-2__inner {
    --double-video-2-pad-left: 92px;
    --double-video-2-copy-pad-left: 92px;
  }
}

/* 960–1217 */
@container double-video-2 (min-width: 960px) and (max-width: 1217px) {
  #sony-lp .double-video-2__inner {
    --double-video-2-slide-w: 778px;
    --double-video-2-slide-h: 437px;
    --double-video-2-slide-gap: 36px;

    --double-video-2-pad-top: 88px;
    --double-video-2-pad-bottom: 55px;
    --double-video-2-pad-left: 91px;
    --double-video-2-pad-right: 91px;

    --double-video-2-copy-pad-left: 91px;
    --double-video-2-copy-pad-right: 91px;
    --double-video-2-copy-gap: 65px;
    --double-video-2-copy-inner-gap: 40px;

    --double-video-2-border-radius: 50px;

    --double-video-2-arrow-size: 71px;
    --double-video-2-arrow-offset-x: 20px;

    --double-video-2-title-col: 100%;
    --double-video-2-title-size: 40px;
    --double-video-2-title-lh: 52px;
    --double-video-2-text-size: 18px;
    --double-video-2-text-lh: 23px;
    --double-video-2-text-max-w: 776px;
    --double-video-2-text-min-h: 253px;

    --double-video-2-radio-w: 96px;
    --double-video-2-radio-h: 12px;
    --double-video-2-radio-border-radius: 15px;
    --double-video-2-radios-gap: 6px;
    --double-video-2-radios-pad-top: 0px;
  }
}

/* 1218–1375 */
@container double-video-2 (min-width: 1218px) and (max-width: 1375px) {
  #sony-lp .double-video-2__inner {
    --double-video-2-slide-w: 1039px;
    --double-video-2-slide-h: 584px;
    --double-video-2-slide-gap: 35px;

    --double-video-2-pad-top: 116px;
    --double-video-2-pad-bottom: 116px;
    --double-video-2-pad-left: 90px;
    --double-video-2-pad-right: 90px;

    --double-video-2-copy-pad-left: 90px;
    --double-video-2-copy-pad-right: 90px;
    --double-video-2-copy-gap: 98px;
    --double-video-2-copy-inner-gap: 97px;

    --double-video-2-border-radius: 50px;

    --double-video-2-arrow-size: 71px;
    --double-video-2-arrow-offset-x: 20px;
    --double-video-2-arrow-offset-x-prev: 19px;
    --double-video-2-title-col: 341px;
    --double-video-2-title-size: 40px;
    --double-video-2-title-lh: 52px;
    --double-video-2-text-size: 18px;
    --double-video-2-text-lh: 23px;
    --double-video-2-text-max-w: 600px;
    --double-video-2-text-min-h: 253px;

    --double-video-2-radio-w: 96px;
    --double-video-2-radio-h: 12px;
    --double-video-2-radio-border-radius: 15px;
    --double-video-2-radios-gap: 6px;
    --double-video-2-radios-pad-top: 36px;
  }
}

/* 1376–1499 (primary desktop comp — rail caps at 1376 via 0-tokens.css) */
@container double-video-2 (min-width: 1376px) and (max-width: 1499px) {
  #sony-lp .double-video-2__inner {
    --double-video-2-slide-w: 1196px;
    --double-video-2-slide-h: 672px;
    --double-video-2-slide-gap: 36px;

    --double-video-2-pad-top: 100px;
    --double-video-2-pad-bottom: 68px;
    --double-video-2-pad-left: 90px;
    --double-video-2-pad-right: 90px;

    --double-video-2-copy-pad-left: 90px;
    --double-video-2-copy-pad-right: 90px;
    --double-video-2-copy-gap: 65px;
    --double-video-2-copy-inner-gap: 63px;

    --double-video-2-border-radius: 50px;

    --double-video-2-arrow-size: 71px;
    --double-video-2-arrow-offset-x: 20px;
    --double-video-2-arrow-offset-x-prev: 19px;

    --double-video-2-title-col: 341px;
    --double-video-2-title-size: 40px;
    --double-video-2-title-lh: 52px;
    --double-video-2-text-size: 18px;
    --double-video-2-text-lh: 23px;
    --double-video-2-text-max-w: 792px;
    --double-video-2-text-min-h: 241px;

    --double-video-2-radio-w: 96px;
    --double-video-2-radio-h: 12px;
    --double-video-2-radio-border-radius: 15px;
    --double-video-2-radios-gap: 6px;
    --double-video-2-radios-pad-top: 36px;
  }
}

/* ≥1500 */
@container double-video-2 (min-width: 1500px) {
  #sony-lp .double-video-2__inner {
    --double-video-2-slide-w: 1196px;
    --double-video-2-slide-h: 672px;
    --double-video-2-slide-gap: 35px;

    --double-video-2-pad-top: 100px;
    --double-video-2-pad-bottom: 61px;
    --double-video-2-pad-left: 90px;
    --double-video-2-pad-right: 214px;

    --double-video-2-copy-pad-left: 90px;
    --double-video-2-copy-pad-right: 214px;
    --double-video-2-copy-gap: 65px;
    --double-video-2-copy-inner-gap: 63px;

    --double-video-2-border-radius: 50px;

    --double-video-2-arrow-size: 71px;
    /* Next from right rail; prev hugs left edge at this band. */
    --double-video-2-arrow-offset-x: 145px;
    --double-video-2-arrow-offset-x-prev: 19px;

    --double-video-2-title-col: 341px;
    --double-video-2-title-size: 40px;
    --double-video-2-title-lh: 52px;
    --double-video-2-text-size: 18px;
    --double-video-2-text-lh: 23px;
    --double-video-2-text-max-w: 792px;
    --double-video-2-text-min-h: 241px;

    --double-video-2-radio-w: 96px;
    --double-video-2-radio-h: 12px;
    --double-video-2-radio-border-radius: 15px;
    --double-video-2-radios-gap: 6px;
    --double-video-2-radios-pad-top: 36px;
  }
}

/* ========== 14-full-video-slider-2/variables.css ========== */

/*
 * 14-full-video-slider-2 — design tokens (scoped under #sony-lp per ARCHITECTURE.md).
 *
 * Bands: 320 / 500 / 920 / 960 / 1218 / 1376 / 1500.
 * Tokens live on `#sony-lp .full-video-2`. Per-band overrides use
 * @container sony-lp because `.full-video-2` is not itself a query container
 * (a container can't restyle itself; `#sony-lp` is the LP's named container).
 *
 * Slide aspect stays fluid (--lp-video-aspect-w/h) — styles.css drives sizing
 * via aspect-ratio, so there is no slide-w/slide-h per band.
 */

#sony-lp {
  --full-video-2-bg: #f5f5f7;
  --full-video-2-slide-bg: #000000;
  --full-video-2-color-text: #000000;
  --full-video-2-color-text-muted: #6b6b6b;
  --full-video-2-color-arrow-fill: #000000;
  --full-video-2-color-arrow-stroke: #ffffff;

  --full-video-2-font: "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --full-video-2-title-weight: 700;
  --full-video-2-text-weight: 400;

  --full-video-2-radio-opacity-idle: 0.2;
  --full-video-2-radio-opacity-active: 1;

  /* Slider track / radio: shared LP tokens (see 0-tokens.css --lp-slider-*). */
  --full-video-2-transition-track: var(--lp-slider-transition-track, 0.78s cubic-bezier(0.22, 1, 0.36, 1));
  --full-video-2-transition-radio: var(--lp-slider-transition-radio, 0.28s ease);
  --full-video-2-focus-outline-width: 2px;
  --full-video-2-focus-outline-offset: 4px;
}

/* Base band: 320–499 (mobile, fluid full-width video, arrows below video). */
#sony-lp .full-video-2 {
  --full-video-2-width: var(--lp-max-width, 100%);
  --full-video-2-pad-top: 0px;
  --full-video-2-pad-bottom: 0px;
  --full-video-2-pad-left: 0px;
  --full-video-2-pad-right: 0px;

  --full-video-2-copy-pad-left: 13px;
  --full-video-2-copy-pad-right: 13px;
  --full-video-2-copy-gap: 111px;
  --full-video-2-copy-inner-gap: 21px;

  --full-video-2-border-radius: 0px;

  --full-video-2-arrow-size: 56px;
  --full-video-2-arrow-offset-x: 0px;

  --full-video-2-heading-col: 100%;
  --full-video-2-heading-size: 30px;
  --full-video-2-heading-lh: 39px;
  --full-video-2-text-size: 18px;
  --full-video-2-text-lh: 23px;
  --full-video-2-text-max-w: 100%;
  --full-video-2-text-min-h: 299px;
  --full-video-2-desc-col-h: auto;
  --full-video-2-desc-min-h: 0px;

  --full-video-2-radio-w: 95px;
  --full-video-2-radio-h: 12px;
  --full-video-2-radio-border-radius: 10px;
  --full-video-2-radios-gap: 4px;
  --full-video-2-radios-pad-top: 29px;
}

/* 500–919 — wider mobile. Only the text alignment changes (handled in styles.css). */
@container sony-lp (min-width: 500px) and (max-width: 919px) {
  #sony-lp .full-video-2 {
    --full-video-2-copy-pad-left: 13px;
    --full-video-2-copy-pad-right: 13px;
    --full-video-2-copy-gap: 100px;
    --full-video-2-copy-inner-gap: 21px;
    --full-video-2-text-min-h: 299px;
    --full-video-2-radios-pad-top: 29px;
  }
}

/* 920–959 — narrow desktop band. Arrows centred on the video (default >=920 rule). */
@container sony-lp (min-width: 920px) and (max-width: 959px) {
  #sony-lp .full-video-2 {
    --full-video-2-pad-bottom: 0px;
    --full-video-2-pad-left: 0px;
    --full-video-2-pad-right: 0px;

    --full-video-2-copy-pad-left: 50px;
    --full-video-2-copy-pad-right: 50px;
    --full-video-2-copy-gap: 68px;
    --full-video-2-copy-inner-gap: 40px;

    --full-video-2-arrow-size: 71px;
    --full-video-2-arrow-offset-x: 19px;

    --full-video-2-heading-col: 779px;
    --full-video-2-heading-size: 40px;
    --full-video-2-heading-lh: 52px;
    --full-video-2-text-size: 18px;
    --full-video-2-text-lh: 23px;
    --full-video-2-text-max-w: 820px;
    --full-video-2-text-min-h: 150px;
    --full-video-2-desc-col-h: auto;
    --full-video-2-desc-min-h: 248px;

    --full-video-2-radio-w: 96px;
    --full-video-2-radio-h: 12px;
    --full-video-2-radio-border-radius: 15px;
    --full-video-2-radios-gap: 6px;
    --full-video-2-radios-pad-top: 40px;
  }
}

/* 960–1217 */
@container sony-lp (min-width: 960px) and (max-width: 1217px) {
  #sony-lp .full-video-2 {
    --full-video-2-pad-bottom: 0px;
    --full-video-2-pad-left: 0px;
    --full-video-2-pad-right: 0px;

    --full-video-2-copy-pad-left: 92px;
    --full-video-2-copy-pad-right: 92px;
    --full-video-2-copy-gap: 71px;
    --full-video-2-copy-inner-gap: 40px;

    --full-video-2-arrow-size: 71px;
    --full-video-2-arrow-offset-x: 19px;

    --full-video-2-heading-col: 779px;
    --full-video-2-heading-size: 40px;
    --full-video-2-heading-lh: 52px;
    --full-video-2-text-size: 18px;
    --full-video-2-text-lh: 23px;
    --full-video-2-text-max-w: 776px;
    --full-video-2-text-min-h: 150px;
    --full-video-2-desc-col-h: auto;
    --full-video-2-desc-min-h: 248px;

    --full-video-2-radio-w: 96px;
    --full-video-2-radio-h: 12px;
    --full-video-2-radio-border-radius: 15px;
    --full-video-2-radios-gap: 6px;
    --full-video-2-radios-pad-top: 49px;
  }
}

/* 1218–1375 (row layout from here up: heading left / description right). */
@container sony-lp (min-width: 1218px) and (max-width: 1375px) {
  #sony-lp .full-video-2 {
    --full-video-2-pad-bottom: 116px;
    --full-video-2-pad-left: 0px;
    --full-video-2-pad-right: 0px;

    --full-video-2-copy-pad-left: 89px;
    --full-video-2-copy-pad-right: 89px;
    --full-video-2-copy-gap: 71px;
    --full-video-2-copy-inner-gap: 72px;

    --full-video-2-arrow-size: 71px;
    --full-video-2-arrow-offset-x: 19px;

    --full-video-2-heading-col: 352px;
    --full-video-2-heading-size: 40px;
    --full-video-2-heading-lh: 52px;
    --full-video-2-text-size: 18px;
    --full-video-2-text-lh: 23px;
    --full-video-2-text-max-w: 616px;
    --full-video-2-text-min-h: 0;
    --full-video-2-desc-col-h: 224px;
    --full-video-2-desc-min-h: 248px;

    --full-video-2-radio-w: 96px;
    --full-video-2-radio-h: 12px;
    --full-video-2-radio-border-radius: 15px;
    --full-video-2-radios-gap: 6px;
    --full-video-2-radios-pad-top: 47px;
  }
}

/* 1376–1499 (primary desktop comp). Rail caps at 1375 via 0-tokens.css. */
@container sony-lp (min-width: 1376px) and (max-width: 1499px) {
  #sony-lp .full-video-2 {
    --full-video-2-pad-bottom: 68px;
    --full-video-2-pad-left: 0px;
    --full-video-2-pad-right: 0px;

    --full-video-2-copy-pad-left: 82px;
    --full-video-2-copy-pad-right: 90px;
    --full-video-2-copy-gap: 71px;
    --full-video-2-copy-inner-gap: 53px;

    --full-video-2-arrow-size: 71px;
    --full-video-2-arrow-offset-x: 19px;

    --full-video-2-heading-col: 359px;
    --full-video-2-heading-size: 40px;
    --full-video-2-heading-lh: 52px;
    --full-video-2-text-size: 18px;
    --full-video-2-text-lh: 23px;
    --full-video-2-text-max-w: 792px;
    --full-video-2-text-min-h: 0;
    --full-video-2-desc-col-h: 224px;
    --full-video-2-desc-min-h: 208px;

    --full-video-2-radio-w: 96px;
    --full-video-2-radio-h: 12px;
    --full-video-2-radio-border-radius: 15px;
    --full-video-2-radios-gap: 6px;
    --full-video-2-radios-pad-top: 47px;
  }
}

/* >=1500 */
@container sony-lp (min-width: 1500px) {
  #sony-lp .full-video-2 {
    --full-video-2-pad-bottom: 100px;
    --full-video-2-pad-left: 0px;
    --full-video-2-pad-right: 0px;

    --full-video-2-copy-pad-left: 82px;
    --full-video-2-copy-pad-right: 214px;
    --full-video-2-copy-gap: 71px;
    --full-video-2-copy-inner-gap: 53px;

    --full-video-2-arrow-size: 71px;
    --full-video-2-arrow-offset-x: 19px;

    --full-video-2-heading-col: 359px;
    --full-video-2-heading-size: 40px;
    --full-video-2-heading-lh: 52px;
    --full-video-2-text-size: 18px;
    --full-video-2-text-lh: 23px;
    --full-video-2-text-max-w: 792px;
    --full-video-2-text-min-h: 0;
    --full-video-2-desc-col-h: 224px;
    --full-video-2-desc-min-h: 208px;

    --full-video-2-radio-w: 96px;
    --full-video-2-radio-h: 12px;
    --full-video-2-radio-border-radius: 15px;
    --full-video-2-radios-gap: 6px;
    --full-video-2-radios-pad-top: 47px;
  }
}

/* ========== 1-banner-v2/styles.css ========== */

/**
 * 1-banner-v2 — scoped under #sony-lp (see ARCHITECTURE.md).
 * Width breakpoints use @container sony-lp, not viewport @media.
 */



@font-face {
  font-family: "SST";
  src: url("fonts/SST-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "SST";
  src: url("fonts/SST-Roman.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SST";
  src: url("fonts/SST-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SST";
  src: url("fonts/SST-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SST";
  src: url("fonts/SST-Heavy.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}



#sony-lp {
  /* Fallback when 0-tokens.css is not loaded (e.g. standalone preview with wrapper only) */
  /* Desktop panel height (width is set per breakpoint on .banner) */
  --banner-height: 777px;
  --banner-bg: #f5f5f7;
  --ui-font: "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Reveal animation — tweak in one place. */
  --banner-panel-duration: 1.05s;
  --banner-panel-ease: ease-out;
  --banner-logo-duration: 0.35s;
  --banner-logo-delay: 0.58s;
}

#sony-lp .banner {
  --banner-width: var(--lp-max-width, 100%);
  position: relative;
  width: min(100%, var(--banner-width, 100%));
  height: var(--banner-height);
  margin: 0 auto;
  overflow: hidden;
  background: var(--banner-bg);
  isolation: isolate;
}

@container sony-lp (min-width: 920px) {
  #sony-lp .banner__stage {
    display: contents;
  }
  /* Banner section keeps its base --banner-height; sliding panels are free
     to grow to their image's natural height. Anything taller is clipped by
     .banner { overflow: hidden }. */
}

#sony-lp .banner__nav {
  position: absolute;
  top: 41px;
  left: 90px;
  right: 90px;
  z-index: 4;
  height: 79px;
  border-radius: 57px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 55px;
  overflow: hidden;
}

#sony-lp .banner__logo {
  display: block;
  width: 96px;
  height: 16.5px;
  object-fit: contain;
  flex: 0 0 auto;
}

#sony-lp .banner__nav-head {
  display: contents;
}

#sony-lp .banner__menu-toggle {
  display: none;
}

#sony-lp .banner__tab-label {
  display: inline;
}

#sony-lp .banner__tabs {
  height: 100%;
  display: flex;
  align-items: stretch;
}

#sony-lp .banner__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
  font: normal normal 500 16px/21px var(--ui-font);
  letter-spacing: 0;
  color: #000000;
  transition: background-color 0.3s ease-out, color 0.3s ease-out;
}

#sony-lp .banner__tab--collection {
  padding: 0 27px;
  background: transparent linear-gradient(180deg, #f5f5f7 0%, #ffffff 28%, #d1d3d4 74%, #f5f5f7 100%)
    0 0 no-repeat padding-box;
}

#sony-lp .banner__tab--series {
  padding: 0 39px;
  background: #ffffff;
}

#sony-lp .banner__tab:hover,
#sony-lp .banner__tab:focus-visible {
  background: #000000;
  color: #ffffff;
  outline: none;
}

#sony-lp .banner__badge {
  position: absolute;
  top: 5px;
  right: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5.5px 7.5px;
  border-radius: 10px;
  text-transform: uppercase;
  background: #000000;
  color: #ffffff;
  font: normal normal 700 10px/13px var(--ui-font);
  letter-spacing: 0;
  transition: background-color 0.3s ease-out, color 0.3s ease-out;
}

#sony-lp .banner__tab--collection:hover .banner__badge,
#sony-lp .banner__tab--collection:focus-visible .banner__badge {
  background: #ffffff;
  color: #000000;
}

#sony-lp .banner__content {
  position: absolute;
  top: 198px;
  left: 0;
  width: 100%;
  z-index: 2;
  text-align: center;
}

#sony-lp .banner__hero-stack {
  margin: 0 auto;
  max-width: min(100%, var(--banner-width, 100%));
}

#sony-lp .banner__title {
  margin: 0;
  text-align: center;
  letter-spacing: 0;
  color: #000000;
}

#sony-lp .banner__title strong {
  font-weight: 700;
}

#sony-lp .banner__counter {
  margin: 0;
  text-align: center;
  letter-spacing: 0;
  color: #000000;
}

#sony-lp .banner__subtitle {
  margin: 0;
  text-align: center;
  letter-spacing: 0;
  color: #000000;
}

#sony-lp .banner__subtitle strong {
  font-weight: 700;
}

#sony-lp .banner__cta-group {
  position: relative;
  margin-top: 57px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#sony-lp .banner__cta-text {
  margin: 0 0 13px;
  text-align: center;
  letter-spacing: 0;
  color: #000000;
}

/* Desktop / tablet — hero typography (do not rely on shared base sizes) */
@container sony-lp (min-width: 920px) {

  #sony-lp .banner__title-line {
    display: none;
  }

  #sony-lp .banner__title {
    font: normal normal 400 40px/52px var(--ui-font);
  }

  #sony-lp .banner__counter {
    font: normal normal 700 110px/143px var(--ui-font);
  }

  #sony-lp .banner__subtitle {
    font: normal normal 400 40px/52px var(--ui-font);
  }

  #sony-lp .banner__cta-text {
    font: normal normal 400 22px/29px var(--ui-font);
  }
}

#sony-lp .banner__cta-button {
  border: none;
  border-radius: 42px;
  background: #000000;
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  padding: 33px 38px;
  line-height: 1;
}

#sony-lp .banner__cta-logo {
  display: inline-block;
  width: 280px;
  height: 19px;
  object-fit: contain;
  vertical-align: middle;
}

#sony-lp .banner__tooltip {
  position: absolute;
  left: 50%;
  top: calc(100% - 5px);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 16px 0 12px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  color: #6d6e71;
  font: normal normal 400 13px/17px var(--ui-font);
  letter-spacing: 0;
}

#sony-lp .banner__tooltip-icon {
  width: 13.2px;
  height: 16px;
  display: block;
}

#sony-lp .banner__reveal {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

#sony-lp .banner__panel {
  position: absolute;
  top: 0;
  width: auto;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  background-color: var(--banner-bg);
  /* No transition until JS arms the banner — otherwise the panels appear to
     slide out from center to off-screen on first paint (initial style
     application races with CSS load / web-font reflow). */
  will-change: transform;
}

#sony-lp .banner.banner--armed .banner__panel {
  transition: transform var(--banner-panel-duration) var(--banner-panel-ease);
}

#sony-lp .banner__panel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

#sony-lp .banner__panel--left {
  left: 0;
  right: 50%;
  transform: translateX(-100%);
}

#sony-lp .banner__panel--left img {
  /* Anchor toward center seam so contain letterboxing does not stack in the middle */
  object-position: right top;
}

#sony-lp .banner__panel--right {
  left: calc(50% - 1px);
  right: 0;
  transform: translateX(100%);
}

#sony-lp .banner__panel--right img {
  object-position: left top;
}

#sony-lp .banner__reveal-logo {
  position: absolute;
  left: 50%;
  bottom: 104px;
  width: 540px;
  height: 119px;
  z-index: 1;
  transform: translateX(-50%);
  background: transparent;
  opacity: 0;
}

#sony-lp .banner.banner--armed .banner__reveal-logo {
  transition: opacity var(--banner-logo-duration) ease-out var(--banner-logo-delay);
}

#sony-lp .banner__reveal-logo svg {
  display: block;
  width: 100%;
  height: 100%;
}

#sony-lp .banner__reveal-logo svg .cls-1 {
  fill: #fff;
}

#sony-lp .banner.banner--revealed .banner__panel--left,
#sony-lp .banner.banner--revealed .banner__panel--right {
  transform: translateX(0);
}

#sony-lp .banner.banner--revealed .banner__reveal-logo {
  opacity: 1;
}

/* Desktop sliding panels — inset halves meet at 50%; 1px overlap kills seam hairlines.
   No fixed height: each image fills its half at natural aspect; section clips overflow. */
@container sony-lp (min-width: 920px) {
  #sony-lp .banner__panel {
    width: auto;
    height: auto;
    top: 0;
    bottom: auto;
  }

  #sony-lp .banner__panel img {
    width: 100%;
    height: auto;
    object-fit: initial;
  }
}

/* Mobile: layout, hero metrics, vertical reveal */
@container sony-lp (max-width: 919px) {
  #sony-lp .banner {
    --banner-nav-top: 0px;
    --banner-nav-height: 79px;
    --banner-mobile-pad: clamp(12px, 4vw, 48px);
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
  }

  /* No horizontal padding on stage — reveal images are full-bleed; pad only .banner__content / CTA */
  #sony-lp .banner__stage {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-height: 0;
    position: relative;
    padding-top: var(--banner-nav-height);
    box-sizing: border-box;
    container-type: inline-size;
    container-name: banner-stage;
  }

  #sony-lp .banner__nav {
    top: var(--banner-nav-top);
    left: 0;
    right: 0;
    height: auto;
    min-height: 79px;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: visible;
    background: #ffffff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
  }

  #sony-lp .banner__nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 79px;
    padding-left: 13px;
    padding-right: 14px;
    flex-shrink: 0;
    box-sizing: border-box;
  }

  #sony-lp .banner__menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: #000000;
    cursor: pointer;
    flex-shrink: 0;
  }

  #sony-lp .banner__menu-toggle:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 2px;
  }

  #sony-lp .banner__menu-icon {
    display: block;
    width: 27px;
    height: 26px;
    flex-shrink: 0;
    object-fit: contain;
  }

  #sony-lp .banner__menu-icon--close {
    display: none;
  }

  #sony-lp .banner.banner--nav-open .banner__menu-icon--burger {
    display: none;
  }

  #sony-lp .banner.banner--nav-open .banner__menu-icon--close {
    display: block;
  }

  #sony-lp .banner__tabs {
    display: none;
    flex-direction: column;
    width: 100%;
    height: auto;
    align-items: stretch;
  }

  #sony-lp .banner.banner--nav-open .banner__tabs {
    display: flex;
  }

  #sony-lp .banner__tab {
    width: 100%;
    justify-content: flex-start;
    min-height: 79px;
    box-sizing: border-box;
  }

  #sony-lp .banner__tab--collection {
    justify-content: space-between;
    align-items: center;
    padding: 16px 13px;
    background: transparent linear-gradient(180deg, #f5f5f7 0%, #ffffff 28%, #d1d3d4 74%, #f5f5f7 100%) 0 0 no-repeat padding-box;
  }

  #sony-lp .banner__tab--series {
    padding: 16px 13px;
    justify-content: flex-start;
    background: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }

  #sony-lp .banner__tab--collection .banner__badge {
    position: static;
    top: auto;
    right: auto;
    flex-shrink: 0;
  }

  #sony-lp .banner__tab-label {
    text-align: left;
  }

  #sony-lp .banner__content {
    position: absolute;
    top: var(--banner-nav-height);
    left: var(--banner-mobile-pad);
    right: var(--banner-mobile-pad);
    width: auto;
    z-index: 1;
    box-sizing: border-box;
  }

  #sony-lp .banner__hero-stack {
    padding-top: 78px;
    padding-inline: 0;
    box-sizing: border-box;
  }

  #sony-lp .banner__title {
    font: normal normal 400 22px/28px var(--ui-font);
    opacity: 1;
  }

  #sony-lp .banner__counter {
    font: normal normal 700 55px/72px var(--ui-font);
    opacity: 1;
  }

  #sony-lp .banner__subtitle {
    font: normal normal 400 18px/23px var(--ui-font);
    opacity: 1;
  }

  #sony-lp .banner__cta-group {
    position: absolute;
    top: calc(var(--banner-nav-height) + 329px);
    left: var(--banner-mobile-pad);
    right: var(--banner-mobile-pad);
    margin-top: 0;
  }

  #sony-lp .banner__cta-text {
    margin: 0 0 29px;
    font: normal normal 400 18px/23px var(--ui-font);
    opacity: 1;
  }

  #sony-lp .banner__cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 293px;
    height: 69px;
    padding: 0;
    border-radius: 42px;
    background: #000000;
    line-height: 0;
    overflow: hidden;
  }

  #sony-lp .banner__cta-logo {
    display: block;
    width: 217px;
    height: 69px;
    max-width: none;
    max-height: none;
    object-fit: contain;
  }

  /* Reveal: full width of padded stage, height = 2× width (stacked squares) */
  #sony-lp .banner__reveal {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    inset: auto;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    aspect-ratio: 1 / 2;
    flex-shrink: 0;
    align-self: stretch;
    z-index: 2;
  }

  #sony-lp .banner__panel {
    width: 100%;
    height: 50%;
    left: 0;
    right: 0;
    z-index: 0;
  }

  #sony-lp .banner__panel--left {
    top: 0;
    transform: translateY(-100%);
  }

  #sony-lp .banner__panel--right {
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    transform: translateY(100%);
  }

  #sony-lp .banner__panel--left img,
  #sony-lp .banner__panel--right img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  #sony-lp .banner__panel--left img {
    object-position: center bottom;
  }

  #sony-lp .banner__panel--right img {
    object-position: center top;
  }

  #sony-lp .banner.banner--revealed .banner__panel--left,
  #sony-lp .banner.banner--revealed .banner__panel--right {
    transform: translateY(0);
  }

  #sony-lp .banner__reveal-logo {
    top: 50%;
    bottom: auto;
    left: 50%;
    width: min(92cqi, 540px);
    height: auto;
    z-index: 2;
    transform: translate(-50%, -50%);
  }

  #sony-lp .banner__reveal-logo svg {
    width: 100%;
    height: auto;
    display: block;
  }
}

@container sony-lp (min-width: 500px) and (max-width: 919px) {


  #sony-lp .banner__cta-group {
    top: calc(var(--banner-nav-height) + 270px);
  }

  #sony-lp .banner__reveal {
    aspect-ratio: 1 / 1;
  }

  #sony-lp .banner__panel {
    width: 50%;
    height: 100%;
    top: 0;
    bottom: 0;
  }

  #sony-lp .banner__panel--left {
    left: 0;
    right: 50%;
    transform: translateX(-100%);
  }

  #sony-lp .banner__panel--right {
    top: 0;
    left: calc(50% - 1px);
    right: 0;
    transform: translateX(100%);
  }

  #sony-lp .banner__panel--left img {
    object-position: right top;
  }

  #sony-lp .banner__panel--right img {
    object-position: left top;
  }

  #sony-lp .banner.banner--revealed .banner__panel--left,
  #sony-lp .banner.banner--revealed .banner__panel--right {
    transform: translateX(0);
  }
}

@container sony-lp (min-width: 920px) and (max-width: 959px) {
  #sony-lp .banner {
    height: 745px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sony-lp .banner__panel,
  #sony-lp .banner__reveal-logo,
  #sony-lp .banner__tab,
  #sony-lp .banner__badge {
    transition: none;
  }
}

/* ========== 2-productbox/styles.css ========== */

/**
 * 2-productbox — scoped under #sony-lp (see ARCHITECTURE.md).
 * Width breakpoints use @container sony-lp, not viewport @media.
 */

#sony-lp {
  --productbox-height: 500px;
  --productbox-bg: #f5f5f7;
}

#sony-lp .productbox {
  --productbox-width: var(--lp-max-width, 100%);
  width: 100%;
  max-width: var(--productbox-width);
  min-height: var(--productbox-height);
  height: auto;
  margin: 0 auto;
  background: var(--productbox-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

#sony-lp .productbox__inner {
  width: 100%;
  padding-block: 80px;
  padding-inline: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
}

@container sony-lp (max-width: 919px) {
  #sony-lp .productbox__inner {
    padding-block: 48px;
  }
}

#sony-lp .productbox__inner {
  gap: 80px;
}

#sony-lp .productcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 360px;
  flex-shrink: 0;
}

#sony-lp .productcard__img {
  width: 320px;
  height: 320px;
  object-fit: contain;
  display: block;
  margin-block-end: 24px;
}

#sony-lp .productcard__model {
  font-family: var(--sony-font-family);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--sony-color-text);
  margin: 0 0 4px;
  letter-spacing: 0.02em;
}

#sony-lp .productcard__collection {
  font-family: var(--sony-font-family);
  font-size: 10px;
  color: var(--sony-color-text-muted);
  margin: 0 0 6px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

#sony-lp .productcard__color {
  font-family: var(--sony-font-family);
  font-size: 13px;
  color: var(--sony-color-text-subtle);
  margin: 0 0 28px;
}

#sony-lp .productcard__cta {
  display: block;
  width: 100%;
  border-radius: 42px;
  background: #000000;
  color: #ffffff;
  font-family: var(--sony-font-family);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  padding: 16px 0;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.18s ease;
}

#sony-lp .productcard__cta:hover {
  background: #222222;
}

@container sony-lp (max-width: 919px) {
  #sony-lp .productbox__inner {
    gap: 40px;
    padding-inline: 40px;
  }
  #sony-lp .productcard {
    width: 240px;
  }
  #sony-lp .productcard__img {
    width: 200px;
    height: 200px;
  }
}

@container sony-lp (max-width: 599px) {
  #sony-lp .productbox__inner {
    flex-direction: column;
    gap: 40px;
    padding-inline: 32px;
  }
  #sony-lp .productcard {
    width: 280px;
  }
  #sony-lp .productcard__img {
    width: 240px;
    height: 240px;
  }
}

/* ========== 3-collection/styles2.css ========== */

/*
 * 3-collection — scoped under #sony-lp (see ARCHITECTURE.md).
 * Tokens were previously on :root; they now live on #sony-lp so the LP can
 * be embedded without polluting the host page. Width breakpoints use
 * @container sony-lp; no viewport @media.
 *
 * Note: in the mobile band (<920) .collection declares itself as a named
 * container ("collection") so its internal layout can size off 100cqw.
 * @container sony-lp can apply that container-type/name to .collection just
 * fine (a container can apply styles to its descendants, including making
 * them new containers — it only can't restyle itself).
 *
 * Load after styles.css.
 */

#sony-lp {
  --z-mega: 1;
  --z-subtitle: 2;
  --z-ftm: 3;
  --z-frost: 4;
  --z-hero: 5;
  --collection-color-mid-grey: #6d6e71;
  --collection-color-text-soft: #f5f5f7;
  --collection-color-text-title: #ffffff;
  --collection-color-radio: #ffffff;
  --collection-bg-gradient: linear-gradient(131deg, #000000 0%, #6d6e71 100%);
  --collection-frost-inset-highlight: rgba(255, 255, 255, 0.28);
}

/* Colors & surfaces — all viewports */
#sony-lp .collection {
  --collection-width: var(--lp-max-width, 100%);
  background-color: transparent;
  background-image: var(--collection-bg-gradient);
  background-repeat: no-repeat;
  background-position: 0 0;
}

#sony-lp .collection__mega {
  letter-spacing: 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px var(--collection-color-mid-grey);
}

#sony-lp .collection__subtitle-the,
#sony-lp .collection__subtitle-name {
  letter-spacing: 0;
  color: var(--collection-color-mid-grey);
}

#sony-lp .collection__frost {
  box-shadow: inset 0 1px 0 var(--collection-frost-inset-highlight);
}

#sony-lp .collection__frost-back {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#sony-lp .collection__frost-back::before {
  content: "";
  position: absolute;
  inset: -22px;
  border-radius: 72px;
  background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.12) 28%,
      rgba(255, 255, 255, 0.09) 48%,
      rgba(255, 255, 255, 0.115) 72%,
      rgba(255, 255, 255, 0.125) 100%
    ),
    linear-gradient(
      180deg,
      rgba(8, 8, 10, 0) 0%,
      rgba(8, 8, 10, 0) 52%,
      rgba(8, 8, 10, 0.02) 78%,
      rgba(8, 8, 10, 0.065) 100%
    ),
    linear-gradient(
      131deg,
      rgba(24, 24, 28, 0.48) 0%,
      rgba(70, 71, 74, 0.42) 38%,
      rgba(108, 109, 112, 0.38) 100%
    );
  filter: blur(11px) saturate(112%);
}

#sony-lp .collection__feature-desc {
  letter-spacing: 0;
  color: var(--collection-color-text-soft);
}

#sony-lp .collection__panel-title {
  letter-spacing: 0;
  color: var(--collection-color-text-title);
}

#sony-lp .collection__desc {
  letter-spacing: 0;
  color: var(--collection-color-text-soft);
}

#sony-lp .collection__radio-visual {
  background: var(--collection-color-radio);
}

#sony-lp .collection__radio-input:focus-visible + .collection__radio-visual {
  outline: 2px solid var(--collection-color-radio);
}

#sony-lp .collection__ftm .cls-1 {
  fill: var(--collection-color-mid-grey);
}

/* ---------- 320: max-width 919px (Collection 1 — implement carefully) ---------- */
@container sony-lp (max-width: 919px) {
  #sony-lp .collection {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: var(--collection-width);
    margin: 0 auto;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-inline: 0;
    padding-bottom: max(48px, env(safe-area-inset-bottom));
    text-align: center;
    container-type: inline-size;
    container-name: collection;
  }

  #sony-lp .collection__mega {
    position: relative;
    left: auto;
    top: 0;
    order: 1;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    font: normal normal bold 97px/126px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
    white-space: normal;
    z-index: 4;
  }

  #sony-lp .collection__subtitle {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    order: 2;
    width: 100%;
    max-width: 100%;
    margin: -30px 0 0;
    padding: 0;
    text-align: center;
    z-index: 5;
  }

  #sony-lp .collection__subtitle-the {
    font: italic normal 300 37px/52px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center;
    letter-spacing: 0;
  }

  #sony-lp .collection__subtitle-name {
    font: normal normal 900 37px/52px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center;
    letter-spacing: 0;
  }

  /* Hero: not a full square — tall 1:1 left a big dark band above the frost; pull-up (ftm margin-top) closes the rest */
  #sony-lp .collection__hero-wrap {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    order: 3;
    width: min(320px, 100%);
    max-width: 100%;
    aspect-ratio: 1 / 0.84;
    height: auto;
    margin: -10px auto 0;
    flex-shrink: 0;
    z-index: 3;
  }

  #sony-lp .collection[data-active-variant="1"] .collection__hero-wrap,
  #sony-lp .collection[data-active-variant="2"] .collection__hero-wrap {
    width: min(320px, 100%);
    height: auto;
  }
  #sony-lp .collection[data-active-variant="2"] .collection__hero-wrap {
    top: -20px;
  }

  /* FTM: pull frost+FTM far up into hero (-124px was too weak -> big black gap above frost) */
  #sony-lp .collection__ftm-wrap {
    position: relative;
    left: auto;
    top: 7px;
    transform: none;
    order: 4;
    box-sizing: border-box;
    width: min(294px, 100%);
    max-width: 100%;
    aspect-ratio: 516 / 101.37;
    flex-shrink: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    margin-top: -190px;
    margin-right: auto;
    margin-left: auto;
    /* 1/2 FTM height under frost top; explicit sides avoid flex + margin-bottom: auto quirks */
    margin-bottom: -29px;
    margin-bottom: calc(min(294px, 100vw) * -101.37 / 1032);
    margin-bottom: calc(min(294px, 100cqw) * -101.37 / 1032);
  }

  #sony-lp .collection__ftm-wrap .collection__ftm {
    display: block;
    width: 100%;
    height: 100%;
  }

  #sony-lp .collection__frost {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    order: 5;
    width: min(293px, 100%);
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin: 0 auto;
    align-self: center;
    border-radius: 28px 28px 24px 24px;
    z-index: 2;
    overflow: hidden;
    isolation: isolate;
  }

  /* Top padding clears hero/FTM overlap so icon grid starts under earcups */
  #sony-lp .collection__frost-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
    padding: 160px 0 62px;
  }

  /* 2 icons per row, equal columns; 114px assets (shrink only if inner <228px after 40px pad) */
  #sony-lp .collection__features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    justify-items: center;
    align-items: start;
    width: 100%;
    margin: 0;
    padding: 20px 20px 0;
    row-gap: 12px;
    flex-shrink: 0;
  }

  #sony-lp .collection__feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 114px;
    margin: 0;
  }

  #sony-lp .collection__feature-icon {
    width: 114px;
    height: 114px;
    max-width: 100%;
    display: block;
    object-fit: contain;
  }

  #sony-lp .collection__feature-desc {
    margin: 13px 0 0;
    width: 100%;
    max-width: 114px;
    min-height: 63px;
    text-align: center;
    letter-spacing: 0;
    font: normal normal bold 16px/21px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  /* 52px below icon list; title box 238x78, 30/39 bold */
  #sony-lp .collection__panel-title {
    margin: 52px 0 0;
    box-sizing: border-box;
    max-width: 100%;
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font: normal normal bold 30px/39px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
    flex-shrink: 0;
  }

  /* 50px below title; copy top padding 52px; description block min-height 575px; inline 40.5px */
  #sony-lp .collection__panel-copy {
    margin: 50px 0 0;
    padding: 0 30px;
    box-sizing: border-box;
    width: 100%;
    min-height: 575px;
    flex: 0 0 auto;
  }

  #sony-lp .collection__desc {
    margin: 0;
    text-align: center;
    letter-spacing: 0;
    font: normal normal normal 18px/23px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  #sony-lp .collection__desc b {
    font-weight: 700;
  }

  #sony-lp .collection__desc[hidden] {
    display: none;
  }

  /* 62px above radios (gap after description block) */
  #sony-lp .collection__radios {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 62px 0 0;
    padding: 0;
    flex-shrink: 0;
  }

  #sony-lp .collection__radio {
    cursor: pointer;
    display: inline-flex;
    border: 0;
  }

  #sony-lp .collection__radio-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    clip: rect(0 0 0 0);
  }

  #sony-lp .collection__radio-visual {
    display: block;
    width: 95px;
    height: 12px;
    border: 0;
    border-radius: 15px;
    opacity: 0.2;
    transition: opacity 0.25s ease, width 0.25s ease;
  }

  #sony-lp .collection__radio-input:checked + .collection__radio-visual {
    width: 96px;
    opacity: 1;
  }

  #sony-lp .collection__radio-input:focus-visible + .collection__radio-visual {
    outline-offset: 4px;
  }

  /* Square wrap + contain = letterboxing inside the box (devtools shows it like padding -> "mystery gap") */
  #sony-lp .collection__hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
    opacity: 0;
    transition: opacity 0.45s ease, transform 0.45s ease;
  }

  /* Variant 2 asset: lower in frame (object-position alone was too subtle / ineffective for this file) */
  #sony-lp .collection__hero-img[data-variant="2"] {
    object-position: center 52%;
    transform: translateY(20px);
  }

  #sony-lp .collection__hero-img--visible {
    opacity: 1;
  }
}

/* 500–919: wider card + copy, tighter vertical rhythm (content moves to the sides) */
@container sony-lp (min-width: 500px) and (max-width: 919px) {
  #sony-lp .collection__mega {
    font: normal normal bold 108px/140px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  #sony-lp .collection__subtitle {
    margin: -26px 0 0;
  }

  #sony-lp .collection__subtitle-the {
    font: italic normal 300 40px/54px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  #sony-lp .collection__subtitle-name {
    font: normal normal 900 40px/54px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  #sony-lp .collection__hero-wrap,
  #sony-lp .collection[data-active-variant="1"] .collection__hero-wrap,
  #sony-lp .collection[data-active-variant="2"] .collection__hero-wrap {
    /* ~38% wider hero slot than base 320px - more room for the product shot */
    width: 440px;
    height: 440px;
  }

  #sony-lp .collection[data-active-variant="2"] .collection__hero-wrap {
    top: -16px;
  }

  #sony-lp .collection__ftm-wrap {
    width: min(430px, calc(100cqw - 24px));
    margin-top: -262px;
    margin-bottom: -29px;
    margin-bottom: calc(min(430px, 100vw) * -101.37 / 1032);
    margin-bottom: calc(min(430px, 100cqw) * -101.37 / 1032);
  }

  #sony-lp .collection__frost {
    width: min(430px, calc(100cqw - 24px));
    border-radius: 32px 32px 26px 26px;
  }

  #sony-lp .collection__frost-inner {
    /* Extra top pad: taller hero needs more clearance above the icon grid */
    padding: 138px 0 44px;
  }

  #sony-lp .collection__features {
    padding: 80px 28px 0;
    row-gap: 10px;
  }

  #sony-lp .collection__feature {
    max-width: 124px;
  }

  #sony-lp .collection__feature-icon {
    width: 120px;
    height: 120px;
  }

  #sony-lp .collection__feature-desc {
    max-width: 132px;
    min-height: 56px;
    margin: 10px 0 0;
    font: normal normal bold 17px/22px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  #sony-lp .collection__panel-title {
    margin: 36px 16px 0;
    min-height: 68px;
    font: normal normal bold 32px/40px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  #sony-lp .collection__panel-copy {
    margin: 28px 0 0;
    padding: 0 28px;
    min-height: 380px;
  }

  #sony-lp .collection__desc {
    max-width: 52ch;
    margin-inline: auto;
    font: normal normal normal 19px/25px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  #sony-lp .collection__radios {
    margin: 40px 0 0;
  }

  /* Hero img: scale framing for the wider hero box */
  #sony-lp .collection__hero-img {
    object-position: center 56%;
  }

  #sony-lp .collection__hero-img[data-variant="2"] {
    object-position: center 50%;
    transform: translateY(24px);
  }
}

/* 700–919: even wider frost, one-row feature strip, shortest vertical stack */
@container sony-lp (min-width: 700px) and (max-width: 919px) {
  #sony-lp .collection {
    padding-bottom: max(40px, env(safe-area-inset-bottom));
  }

  #sony-lp .collection__mega {
    font: normal normal bold 118px/152px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  #sony-lp .collection__subtitle {
    margin: -22px 0 0;
  }

  #sony-lp .collection__subtitle-the {
    font: italic normal 300 44px/58px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  #sony-lp .collection__subtitle-name {
    font: normal normal 900 44px/58px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  #sony-lp .collection__hero-wrap,
  #sony-lp .collection[data-active-variant="1"] .collection__hero-wrap,
  #sony-lp .collection[data-active-variant="2"] .collection__hero-wrap {
    /* Large hero slot; same vertical ratio as base (1/0.84) for maximum image area */
    width: 600px;
    height: 600px;
  }

  #sony-lp .collection[data-active-variant="2"] .collection__hero-wrap {
    top: -12px;
  }

  #sony-lp .collection__ftm-wrap {
    width: min(640px, calc(100cqw - 28px));
    margin-top: -338px;
    margin-bottom: -29px;
    margin-bottom: calc(min(640px, 100vw) * -112 / 1032);
    margin-bottom: calc(min(640px, 100cqw) * -112 / 1032);
  }

  #sony-lp .collection__frost {
    width: min(640px, calc(100cqw - 28px));
    border-radius: 36px 36px 28px 28px;
  }

  #sony-lp .collection__frost-inner {
    padding: 160px 0 36px;
  }

  #sony-lp .collection__features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 0;
    padding: 100px 20px 0;
  }

  #sony-lp .collection__feature {
    max-width: none;
  }

  #sony-lp .collection__feature-icon {
    width: min(108px, 100%);
    height: min(108px, 100%);
  }

  #sony-lp .collection__feature-desc {
    max-width: none;
    min-height: 0;
    margin: 8px 0 0;
    font: normal normal bold 15px/20px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  #sony-lp .collection__panel-title {
    margin: 24px 20px 0;
    min-height: 0;
    font: normal normal bold 34px/42px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  #sony-lp .collection__panel-copy {
    margin: 20px 0 0;
    padding: 0 32px;
    min-height: 0;
  }

  #sony-lp .collection__desc {
    max-width: 60ch;
    font: normal normal normal 19px/26px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  #sony-lp .collection__radios {
    margin: 28px 0 0;
  }

  /* Hero img: large box + default aspect - nudge framing for variant assets */
  #sony-lp .collection__hero-img {
    object-position: center 56%;
  }

  #sony-lp .collection__hero-img[data-variant="2"] {
    object-position: center 52%;
    transform: translateY(26px);
  }
}

/* ---------- Desktop: token bands (exactly one matches) ---------- */
@container sony-lp (min-width: 920px) and (max-width: 959px) {
  #sony-lp .collection {
    --c-mega-top: 47px;
    --c-mega-fs: 244px;
    --c-mega-lh: 319px;
    --c-subtitle-top: 320px;
    --c-subtitle-the-fs: 97px;
    --c-subtitle-the-lh: 126px;
    --c-subtitle-name-fs: 97px;
    --c-subtitle-name-lh: 126px;
    --c-frost-top: 806.5px;
    --c-frost-w: 738px;
    --c-frost-h: 940px;
    --c-frost-bottom: 92px;
    --c-frost-radius: 40px;
    --c-frost-inner-pt: 300px;
    --c-frost-inner-px: 50px;
    --c-frost-inner-pb: 56px;
    --c-ftm-w: 746px;
    --c-ftm-h: 97px;
    --c-ftm-above: 32px;
    --c-hero-top-1: 435px;
    --c-hero-w-1: 636px;
    --c-hero-h-1: 636px;
    --c-hero-top-2: 441.5px;
    --c-hero-w-2: 662px;
    --c-hero-h-2: 662px;
    --c-features-mt: 0px;
    --c-feature-icon: 148px;
    --c-feature-desc-w: 139px;
    --c-feature-desc-minh: 46px;
    --c-feature-desc-mt: 0px;
    --c-features-gap: 16px;
    --c-title-mt: 13px;
    --c-title-maxw: 687px;
    --c-title-fs: 60px;
    --c-title-lh: 60px;
    --c-copy-mt: 20px;
    --c-copy-minh: 192px;
    --c-copy-maxw: 687px;
    --c-copy-px: 32px;
    --c-copy-pt: 19px;
    --c-radios-mt: 34px;
    --c-radios-pt: 0px;
    --c-feature-font: normal normal bold 18px/23px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --c-desc-font: normal normal normal 18px/23px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
}

@container sony-lp (min-width: 960px) and (max-width: 1217px) {
  #sony-lp .collection {
    --c-mega-top: 47px;
    --c-mega-fs: 258px;
    --c-mega-lh: 337px;
    --c-subtitle-top: 330px;
    --c-subtitle-the-fs: 103px;
    --c-subtitle-the-lh: 135px;
    --c-subtitle-name-fs: 103px;
    --c-subtitle-name-lh: 135px;
    --c-frost-top: 823.5px;
    --c-frost-w: 778px;
    --c-frost-h: 650px;
    --c-frost-bottom: 100px;
    --c-frost-radius: 42px;
    --c-frost-inner-pt: 340px;
    --c-frost-inner-px: 50px;
    --c-frost-inner-pb: 56px;
    --c-ftm-w: 778px;
    --c-ftm-h: 97px;
    --c-ftm-above: 31px;
    --c-hero-top-1: 450px;
    --c-hero-w-1: 676px;
    --c-hero-h-1: 676px;
    --c-hero-top-2: 460px;
    --c-hero-w-2: 704px;
    --c-hero-h-2: 704px;
    --c-features-mt: 0px;
    --c-feature-icon: 148px;
    --c-feature-desc-w: 139px;
    --c-feature-desc-minh: 46px;
    --c-feature-desc-mt: 0px;
    --c-features-gap: 16px;
    --c-title-mt: 7px;
    --c-title-maxw: 687px;
    --c-title-fs: 60px;
    --c-title-lh: 60px;
    --c-copy-mt: 20px;
    --c-copy-minh: 192px;
    --c-copy-maxw: 666px;
    --c-copy-px: 50px;
    --c-copy-pt: 19px;
    --c-radios-mt: 20px;
    --c-radios-pt: 0px;
    --c-feature-font: normal normal bold 18px/23px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --c-desc-font: normal normal normal 18px/23px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
}

@container sony-lp (min-width: 1218px) and (max-width: 1375px) {
  #sony-lp .collection {
    --c-mega-top: 0px;
    --c-mega-fs: 294px;
    --c-mega-lh: 385px;
    --c-subtitle-top: 330px;
    --c-subtitle-the-fs: 118px;
    --c-subtitle-the-lh: 154px;
    --c-subtitle-name-fs: 118px;
    --c-subtitle-name-lh: 154px;
    --c-frost-top: 818.5px;
    --c-frost-w: 1196px;
    --c-frost-h: 880px;
    --c-frost-bottom: 120px;
    --c-frost-radius: 48px;
    --c-frost-inner-pt: 375px;
    --c-frost-inner-px: 121.5px;
    --c-frost-inner-pb: 52px;
    --c-ftm-w: 1196px;
    --c-ftm-h: 130px;
    --c-ftm-above: 39px;
    --c-hero-top-1: 411px;
    --c-hero-w-1: 792px;
    --c-hero-h-1: 792px;
    --c-hero-top-2: 398px;
    --c-hero-w-2: 824px;
    --c-hero-h-2: 824px;
    --c-features-mt: -15px;
    --c-feature-icon: 160px;
    --c-feature-desc-w: 191px;
    --c-feature-desc-minh: 46px;
    --c-feature-desc-mt: 12px;
    --c-features-gap: 25px;
    --c-title-mt: 41px;
    --c-title-maxw: 916px;
    --c-title-fs: 60px;
    --c-title-lh: 79px;
    --c-copy-mt: 13px;
    --c-copy-minh: 146px;
    --c-copy-maxw: 896px;
    --c-copy-px: 101px;
    --c-copy-pt: 13px;
    --c-radios-mt: 40px;
    --c-radios-pt: 0px;
    --c-feature-font: normal normal bold 18px/23px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --c-desc-font: normal normal normal 18px/23px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
}

@container sony-lp (min-width: 1376px) and (max-width: 1499px) {
  #sony-lp .collection {
    --c-mega-top: 0px;
    --c-mega-fs: 343px;
    --c-mega-lh: 448px;
    --c-subtitle-top: 335px;
    --c-subtitle-the-fs: 138px;
    --c-subtitle-the-lh: 181px;
    --c-subtitle-name-fs: 138px;
    --c-subtitle-name-lh: 181px;
    --c-frost-top: 820px;
    --c-frost-w: 1196px;
    --c-frost-h: 965px;
    --c-frost-bottom: 128px;
    --c-frost-radius: 50px;
    --c-frost-inner-pt: 370px;
    --c-frost-inner-px: 72px;
    --c-frost-inner-pb: 73px;
    --c-ftm-w: 1196px;
    --c-ftm-h: 150px;
    --c-ftm-above: 50px;
    --c-hero-top-1: 425px;
    --c-hero-w-1: 792px;
    --c-hero-h-1: 792px;
    --c-hero-top-2: 405px;
    --c-hero-w-2: 824px;
    --c-hero-h-2: 824px;
    --c-features-mt: 0px;
    --c-feature-icon: 186px;
    --c-feature-desc-w: 191px;
    --c-feature-desc-minh: 0px;
    --c-feature-desc-mt: 12px;
    --c-features-gap: 25px;
    --c-title-mt: 39px;
    --c-title-maxw: 36ch;
    --c-title-fs: 60px;
    --c-title-lh: 79px;
    --c-copy-mt: 13px;
    --c-copy-minh: 146px;
    --c-copy-maxw: 1000px;
    --c-copy-px: 101px;
    --c-copy-pt: 13px;
    --c-radios-mt: 0px;
    --c-radios-pt: 20px;
    --c-feature-font: normal normal bold 18px/23px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --c-desc-font: normal normal normal 18px/23px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
}

@container sony-lp (min-width: 1500px) {
  #sony-lp .collection {
    --c-mega-top: 0px;
    --c-mega-fs: 343px;
    --c-mega-lh: 448px;
    --c-subtitle-top: 345px;
    --c-subtitle-the-fs: 138px;
    --c-subtitle-the-lh: 181px;
    --c-subtitle-name-fs: 138px;
    --c-subtitle-name-lh: 181px;
    --c-frost-top: 874.5px;
    --c-frost-w: 1320px;
    --c-frost-h: 900px;
    --c-frost-bottom: 140px;
    --c-frost-radius: 50px;
    --c-frost-inner-pt: 320px;
    --c-frost-inner-px: 224px;
    --c-frost-inner-pb: 80px;
    --c-ftm-w: 1304px;
    --c-ftm-h: 150px;
    --c-ftm-above: 46px;
    --c-hero-top-1: 410px;
    --c-hero-w-1: 792px;
    --c-hero-h-1: 792px;
    --c-hero-top-2: 400px;
    --c-hero-w-2: 824px;
    --c-hero-h-2: 824px;
    --c-features-mt: -20px;
    --c-feature-icon: 186px;
    --c-feature-desc-w: 204px;
    --c-feature-desc-minh: 46px;
    --c-feature-desc-mt: 12px;
    --c-features-gap: 25px;
    --c-title-mt: 48px;
    --c-title-maxw: 1126px;
    --c-title-fs: 60px;
    --c-title-lh: 79px;
    --c-copy-mt: 13px;
    --c-copy-minh: 146px;
    --c-copy-maxw: 1126px;
    --c-copy-px: 97px;
    --c-copy-pt: 14px;
    --c-radios-mt: 73px;
    --c-radios-pt: 0px;
    --c-feature-font: normal normal bold 18px/23px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --c-desc-font: normal normal normal 18px/23px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
}

/* ---------- Desktop layout: min-width 920px (uses --c-* from band above) ---------- */
@container sony-lp (min-width: 920px) {
  #sony-lp .collection {
    position: relative;
    width: 100%;
    max-width: var(--collection-width);
    min-height: 1870px;
    padding-bottom: 0;
    box-sizing: border-box;
    height: auto;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: visible;
  }

  #sony-lp .collection__mega {
    position: absolute;
    left: 0;
    top: var(--c-mega-top);
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    font: normal normal bold var(--c-mega-fs) / var(--c-mega-lh) "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
    pointer-events: none;
    z-index: var(--z-mega);
    white-space: nowrap;
  }

  #sony-lp .collection__subtitle {
    position: absolute;
    left: 50%;
    top: var(--c-subtitle-top);
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--collection-width);
    margin: 0;
    padding: 0;
    text-align: center;
    z-index: var(--z-subtitle);
    pointer-events: none;
  }

  #sony-lp .collection__subtitle-the {
    font: italic normal 300 var(--c-subtitle-the-fs) / var(--c-subtitle-the-lh) "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center;
  }

  #sony-lp .collection__subtitle-name {
    font: normal normal 900 var(--c-subtitle-name-fs) / var(--c-subtitle-name-lh) "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center;
  }

  #sony-lp .collection__ftm-wrap {
    position: absolute;
    left: 50%;
    top: calc(var(--c-frost-top) - var(--c-ftm-above));
    transform: translateX(-50%);
    width: min(var(--c-ftm-w), calc(100% - 48px));
    min-height: 0;
    height: auto;
    max-height: var(--c-ftm-h);
    z-index: var(--z-ftm);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #sony-lp .collection__ftm-wrap .collection__ftm {
    height: auto;
    display: block;
  }

  #sony-lp .collection__frost {
    position: absolute;
    left: 50%;
    top: var(--c-frost-top);
    transform: translateX(-50%);
    width: min(var(--c-frost-w), calc(100% - 48px));
    min-height: var(--c-frost-h);
    height: auto;
    border-radius: var(--c-frost-radius);
    z-index: var(--z-frost);
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
  }

  #sony-lp .collection__frost-inner {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--c-frost-inner-pt) 0 var(--c-frost-inner-pb);
    box-sizing: border-box;
  }

  #sony-lp .collection__features {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--c-features-gap);
    width: 100%;
    flex-shrink: 0;
    margin-top: var(--c-features-mt);
    padding: 0 var(--c-frost-inner-px);
  }

  #sony-lp .collection__feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }

  #sony-lp .collection__feature-icon {
    width: var(--c-feature-icon);
    height: var(--c-feature-icon);
    max-width: 100%;
    display: block;
    flex-shrink: 0;
    object-fit: contain;
  }

  #sony-lp .collection__feature-desc {
    margin: var(--c-feature-desc-mt) 0 0;
    width: var(--c-feature-desc-w);
    max-width: 100%;
    min-height: var(--c-feature-desc-minh);
    text-align: center;
    font: var(--c-feature-font);
  }

  #sony-lp .collection__panel-title {
    margin: var(--c-title-mt) 0 0;
    max-width: var(--c-title-maxw);
    width: 100%;
    text-align: center;
    font: normal normal bold var(--c-title-fs) / var(--c-title-lh) "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
    flex-shrink: 0;
  }

  #sony-lp .collection__panel-copy {
    margin-top: 0;
    padding: var(--c-copy-pt) var(--c-copy-px) 0;
    box-sizing: border-box;
    width: 100%;
    flex: 1 1 auto;
    min-height: var(--c-copy-minh);
  }

  #sony-lp .collection__desc {
    margin: 0;
    text-align: center;
    font: var(--c-desc-font);
    min-height: var(--c-copy-minh);
  }

  #sony-lp .collection__desc b {
    font-weight: 700;
  }

  #sony-lp .collection__desc[hidden] {
    display: none;
  }

  #sony-lp .collection__radios {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    margin-top: var(--c-radios-mt);
    padding-top: var(--c-radios-pt);
  }

  #sony-lp .collection__radio {
    cursor: pointer;
    display: inline-flex;
    border: 0;
  }

  #sony-lp .collection__radio-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    clip: rect(0 0 0 0);
  }

  #sony-lp .collection__radio-visual {
    display: block;
    width: 95px;
    height: 12px;
    border: 0;
    border-radius: 15px;
    opacity: 0.2;
    transition: opacity 0.25s ease, width 0.25s ease;
  }

  #sony-lp .collection__radio-input:checked + .collection__radio-visual {
    width: 96px;
    opacity: 1;
  }

  #sony-lp .collection__radio-input:focus-visible + .collection__radio-visual {
    outline-offset: 4px;
  }

  #sony-lp .collection__hero-wrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-hero);
    pointer-events: none;
  }

  #sony-lp .collection[data-active-variant="1"] .collection__hero-wrap {
    top: var(--c-hero-top-1);
    width: var(--c-hero-w-1);
    height: var(--c-hero-h-1);
  }

  #sony-lp .collection[data-active-variant="2"] .collection__hero-wrap {
    top: var(--c-hero-top-2);
    width: var(--c-hero-w-2);
    height: var(--c-hero-h-2);
  }

  #sony-lp .collection__hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.45s ease;
  }

  #sony-lp .collection__hero-img--visible {
    opacity: 1;
  }
}

@container sony-lp (min-width: 960px) {
  #sony-lp .collection {
    min-height: 1913px;
  }
}
@container sony-lp (min-width: 1218px) {
  #sony-lp .collection {
    min-height: 1913px;
  }
}

/* 1376: original centered icon row + radios pinned to bottom of frost */
@container sony-lp (min-width: 1376px) and (max-width: 1499px) {
  #sony-lp .collection .collection__features {
    justify-content: center;
    gap: 25px;
  }

  #sony-lp .collection .collection__feature {
    flex: 0 0 auto;
    width: 186px;
    min-width: auto;
  }

  #sony-lp .collection .collection__radios {
    margin-top: auto;
    padding-top: var(--c-radios-pt);
  }
}

/* ========== 4-triple-slider/styles.css ========== */

/*
 * 4-triple-slider — scoped under #sony-lp (see ARCHITECTURE.md).
 * Breakpoint rules use @container triple-slider (section-level container)
 * so the slider responds to its own width regardless of the host viewport.
 */

#sony-lp .triple-slider {
  position: relative;
  width: 100%;
  max-width: var(--triple-slider-width);
  margin: 0 auto;
  background-color: var(--triple-slider-bg);
}

#sony-lp .triple-slider__inner {
  position: relative;
  width: 100%;
  min-height: var(--triple-slider-section-min-h);
  height: auto;
  margin: 0;
  padding: var(--triple-slider-pad-top) 0 var(--triple-slider-pad-bottom);
  font-family: var(--triple-slider-font);
  display: flex;
  flex-direction: column;
}

#sony-lp .triple-slider__carousel {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  flex-shrink: 0;
}

#sony-lp .triple-slider__viewport {
  width: 100%;
  max-width: 100%;
  height: var(--triple-slider-slide-h);
  margin: 0 auto;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  /* Single rounded clip: adjacent slides must not draw their own corners here */
  isolation: isolate;
  contain: paint;
}

#sony-lp .triple-slider__track {
  display: flex;
  flex-direction: row;
  gap: var(--triple-slider-slide-gap);
  /* Mobile (default): full-bleed track. Desktop adds horizontal padding. */
  padding: 0;
  height: 100%;
  width: max-content;
  transform: translate3d(0, 0, 0);
  transition: transform var(--triple-slider-transition-track);
  will-change: transform;
}

#sony-lp .triple-slider__slide {
  flex: 0 0 var(--triple-slider-slide-w);
  width: var(--triple-slider-slide-w);
  max-width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--triple-slider-border-radius);
  background: var(--triple-slider-slide-bg);
  overflow: hidden;
}

#sony-lp .triple-slider__slide img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: center center;
  /* Same as double-video-slider: native <img> drag steals pointer events and breaks swipe / drag-to-variant. */
  user-select: none;
  -webkit-user-drag: none;
}

/*
 * Peek strips only show the neighbour slide’s inner edge (narrow column).
 * Default center can crop so that column reads as the “tail” of the art;
 * favour the leading (left) side of the asset in that strip.
 */
#sony-lp .triple-slider__slide[data-state="peek-right"] img {
  object-position: left center;
}

/* Rounded corners by slide state (JS sets data-state). */
#sony-lp .triple-slider__slide[data-state="active"] {
  border-radius: var(--triple-slider-border-radius);
}

#sony-lp .triple-slider__slide[data-state="peek-left"] {
  border-radius: 0 var(--triple-slider-border-radius) var(--triple-slider-border-radius) 0;
}

#sony-lp .triple-slider__slide[data-state="peek-right"] {
  border-radius: var(--triple-slider-border-radius) 0 0 var(--triple-slider-border-radius);
}

/*
 * Arrows — mobile (default).
 * Top edge of the arrow box meets the bottom edge of the image (viewport).
 * Coordinates are relative to .triple-slider__inner (positioned ancestor).
 */
#sony-lp .triple-slider__arrow {
  position: absolute;
  top: calc(var(--triple-slider-pad-top) - 1px + var(--triple-slider-slide-h));
  transform: none;
  width: var(--triple-slider-arrow-size);
  height: var(--triple-slider-arrow-size);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

#sony-lp .triple-slider__arrow svg {
  display: block;
  width: var(--triple-slider-arrow-size);
  height: var(--triple-slider-arrow-size);
}

#sony-lp .triple-slider__arrow:focus-visible {
  outline: var(--triple-slider-focus-outline-width) solid var(--triple-slider-color-text);
  outline-offset: var(--triple-slider-focus-outline-offset);
}

#sony-lp .triple-slider__arrow[hidden] {
  display: none;
}

#sony-lp .triple-slider__arrow--prev {
  left: var(--triple-slider-arrow-offset-x-prev, var(--triple-slider-arrow-offset-x));
}

#sony-lp .triple-slider__arrow--next {
  right: var(--triple-slider-arrow-offset-x);
}

#sony-lp .triple-slider__copy {
  box-sizing: border-box;
  margin-top: var(--triple-slider-copy-gap);
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-inline: var(--triple-slider-pad-x);
  flex: 1;
  min-height: 0;
  display: flex;
  /* Mobile (default): heading above text in a single column. */
  flex-direction: column;
  align-items: stretch;
  gap: var(--triple-slider-copy-inner-gap);
}

#sony-lp .triple-slider__copy[hidden] {
  display: none;
}

#sony-lp .triple-slider__title {
  flex: 0 0 var(--triple-slider-title-col);
  width: var(--triple-slider-title-col);
  max-width: 100%;
  margin: 0;
  text-align: left;
  font-style: normal;
  font-weight: var(--triple-slider-title-weight);
  font-size: var(--triple-slider-title-size);
  line-height: var(--triple-slider-title-lh);
  font-family: var(--triple-slider-font);
  letter-spacing: 0;
  color: var(--triple-slider-color-text);
  opacity: 1;
}

#sony-lp .triple-slider__text {
  flex: 1;
  min-width: 0;
  margin: 0;
  text-align: left;
  font-style: normal;
  font-weight: var(--triple-slider-text-weight);
  font-size: var(--triple-slider-text-size);
  line-height: var(--triple-slider-text-lh);
  font-family: var(--triple-slider-font);
  letter-spacing: 0;
  color: var(--triple-slider-color-text-muted);
  opacity: 1;
}

#sony-lp .triple-slider__radios {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--triple-slider-radios-gap);
  margin-top: auto;
  flex-shrink: 0;
  padding-top: var(--triple-slider-radios-pad-top);
}

#sony-lp .triple-slider__radio {
  cursor: pointer;
  display: inline-flex;
}

#sony-lp .triple-slider__radio-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0 0 0 0);
}

#sony-lp .triple-slider__radio-visual {
  display: block;
  width: var(--triple-slider-radio-w);
  height: var(--triple-slider-radio-h);
  border: 0;
  border-radius: var(--triple-slider-radio-border-radius);
  background: var(--triple-slider-color-text);
  opacity: var(--triple-slider-radio-opacity-idle);
  transition: opacity var(--triple-slider-transition-radio);
}

#sony-lp .triple-slider__radio-input:checked + .triple-slider__radio-visual {
  opacity: var(--triple-slider-radio-opacity-active);
}

#sony-lp .triple-slider__radio-input:focus-visible + .triple-slider__radio-visual {
  outline: var(--triple-slider-focus-outline-width) solid var(--triple-slider-color-text);
  outline-offset: var(--triple-slider-focus-outline-offset);
}

/* Mobile band (500–919): center the copy text. */
@container triple-slider (min-width: 500px) and (max-width: 919px) {
  #sony-lp .triple-slider__title,
  #sony-lp .triple-slider__text {
    text-align: center;
  }
}

/* Title <br> only takes effect in 920–1217 (narrow desktop bands). */
#sony-lp .triple-slider__title-br {
  display: none;
}

@container triple-slider (min-width: 920px) and (max-width: 1217px) {
  #sony-lp .triple-slider__title-br {
    display: inline;
  }
}

/* Desktop band (≥920): row copy, padded carousel track, arrows vertically centered. */
@container triple-slider (min-width: 920px) {
  #sony-lp .triple-slider__track {
    padding: 0 var(--triple-slider-pad-x);
  }

  #sony-lp .triple-slider__arrow {
    top: calc(var(--triple-slider-pad-top) - 1px + var(--triple-slider-slide-h) / 2);
    transform: translateY(-50%);
  }

  #sony-lp .triple-slider__copy {
    flex-direction: row;
    align-items: flex-start;
  }

  #sony-lp .triple-slider__text {
    max-width: var(--triple-slider-text-max-w);
    min-height: var(--triple-slider-text-min-h);
  }
}

/* ========== 5-firsttimeline/styles.css ========== */

/*
 * 5-firsttimeline — scoped under #sony-lp (see ARCHITECTURE.md).
 * Banded per design comp (320 / 920 / 960 / 1218 / 1376 / 1500).
 * Width breakpoints use @container sony-lp, not viewport @media.
 *
 * Two layout modes, switched at 1218px (container inline-size):
 *   · scroll-list (< 1218): all cards fully expanded, horizontal scroll,
 *     swipe-hint pill is visible between description and the list.
 *   · accordion (≥ 1218): collapsed thumbs that expand on hover/click
 *     (JS sets .firsttimeline__item--active).
 */

#sony-lp .firsttimeline {
  /* ----- Mobile-first defaults (320–919) — scroll-list ----- */
  --firsttimeline-width: var(--lp-max-width, 100%);

  --firsttimeline-heading-pad-x: 13px;
  --firsttimeline-heading-pad-bottom: 31px;
  --firsttimeline-heading-size: 30px;
  --firsttimeline-heading-lh: 39px;
  --firsttimeline-heading-align: center;

  --firsttimeline-lead-pad-x: 13px;
  --firsttimeline-lead-pad-bottom: 58px;
  --firsttimeline-lead-size: 18px;
  --firsttimeline-lead-lh: 23px;
  --firsttimeline-lead-align: center;

  --firsttimeline-swipe-display: flex;
  --firsttimeline-swipe-pad-x: 13px;
  --firsttimeline-swipe-pad-bottom: 20px;

  --firsttimeline-track-overflow-x: auto;
  --firsttimeline-track-height: auto;

  --firsttimeline-list-gap: 27px;
  /* `list-pad-left` is the scrollable space before the first card.
     `peek-crop` is how many px of that first card stay clipped at first paint.
     timeline.js sets scrollLeft = list-pad-left + peek-crop, so the user can
     swipe left to see the full card (down to scrollLeft = list-pad-left). */
  --firsttimeline-list-pad-left: 50px;
  --firsttimeline-list-pad-right: 13px;
  --firsttimeline-peek-crop: 50px;

  --firsttimeline-card-w: 293px;
  --firsttimeline-card-h: 293px;
  --firsttimeline-card-radius: 50px;

  --firsttimeline-text-gap: 38px;
  --firsttimeline-text-w: var(--firsttimeline-card-w);
  --firsttimeline-title-align: center;
  --firsttimeline-title-size: 17px;
  --firsttimeline-title-lh: 22px;

  --firsttimeline-bottom-pad: 0px;

  width: 100%;
  max-width: var(--firsttimeline-width);
  margin: 0 auto;
  background: #f5f5f7;
  font-family: "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding-bottom: var(--firsttimeline-bottom-pad);
}

#sony-lp .firsttimeline__heading {
  margin: 0;
  padding: 0 var(--firsttimeline-heading-pad-x) var(--firsttimeline-heading-pad-bottom);
  text-align: var(--firsttimeline-heading-align);
  font-style: normal;
  font-weight: 700;
  font-size: var(--firsttimeline-heading-size);
  line-height: var(--firsttimeline-heading-lh);
  letter-spacing: 0;
  color: #000000;
  opacity: 1;
}

#sony-lp .firsttimeline__lead {
  margin: 0;
  padding: 0 var(--firsttimeline-lead-pad-x) var(--firsttimeline-lead-pad-bottom);
  text-align: var(--firsttimeline-lead-align);
  font-style: normal;
  font-weight: 400;
  font-size: var(--firsttimeline-lead-size);
  line-height: var(--firsttimeline-lead-lh);
  letter-spacing: 0;
  color: #6b6b6b;
  opacity: 1;
}

#sony-lp .firsttimeline__lead b {
  font-weight: 700;
}

#sony-lp .firsttimeline__swipe-hint {
  display: var(--firsttimeline-swipe-display);
  justify-content: center;
  padding: 0 var(--firsttimeline-swipe-pad-x) var(--firsttimeline-swipe-pad-bottom);
}

#sony-lp .firsttimeline__swipe-hint-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  background: #ffffff;
  box-shadow: 0px 0px 50px #00000029;
  border-radius: 50px;
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: 0;
  color: #6d6e71;
}

#sony-lp .firsttimeline__swipe-hint-icon {
  display: block;
  width: 13px;
  height: 16px;
  flex: 0 0 auto;
}

#sony-lp .firsttimeline__track {
  height: var(--firsttimeline-track-height);
  overflow-x: var(--firsttimeline-track-overflow-x);
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#sony-lp .firsttimeline__track::-webkit-scrollbar {
  display: none;
}

#sony-lp .firsttimeline__list {
  list-style: none;
  margin: 0;
  padding-left: var(--firsttimeline-list-pad-left);
  padding-right: var(--firsttimeline-list-pad-right);
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--firsttimeline-list-gap);
  width: max-content;
  height: 100%;
}

#sony-lp .firsttimeline__item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#sony-lp .firsttimeline__media {
  width: var(--firsttimeline-card-w);
  height: var(--firsttimeline-card-h);
  border-radius: var(--firsttimeline-card-radius);
  overflow: hidden;
}

#sony-lp .firsttimeline__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#sony-lp .firsttimeline__text {
  margin: 0;
  width: var(--firsttimeline-text-w);
  max-width: var(--firsttimeline-text-w);
  margin-top: var(--firsttimeline-text-gap);
}

#sony-lp .firsttimeline__title,
#sony-lp .firsttimeline__desc {
  margin: 0;
  text-align: var(--firsttimeline-title-align);
  letter-spacing: 0;
  font-size: var(--firsttimeline-title-size);
  line-height: var(--firsttimeline-title-lh);
}

#sony-lp .firsttimeline__title {
  font-weight: 700;
  color: #000000;
}

#sony-lp .firsttimeline__desc {
  font-weight: 400;
  color: #6b6b6b;
}

/* ----- 920+ — scroll-list, 505 cards, swipe hint visible ----- */
@container sony-lp (min-width: 920px) {
  #sony-lp .firsttimeline {
    --firsttimeline-heading-pad-x: 92px;
    --firsttimeline-heading-pad-bottom: 50px;
    --firsttimeline-heading-size: 40px;
    --firsttimeline-heading-lh: 52px;

    --firsttimeline-lead-pad-x: 92px;
    --firsttimeline-lead-pad-bottom: 28px;

    --firsttimeline-swipe-pad-x: 92px;
    --firsttimeline-swipe-pad-bottom: 38px;

    --firsttimeline-list-pad-left: 40px;
    --firsttimeline-list-pad-right: 40px;
    --firsttimeline-peek-crop: 0px;

    --firsttimeline-card-w: 505px;
    --firsttimeline-card-h: 505px;

    --firsttimeline-text-gap: 56px;
    --firsttimeline-title-align: left;

    --firsttimeline-bottom-pad: 22px;
  }
}

/* ----- 1218+ — accordion (collapsed/expanded thumbs, no scroll, no swipe hint) ----- */
@container sony-lp (min-width: 1218px) {
  #sony-lp .firsttimeline {
    --firsttimeline-heading-pad-x: 90px;
    --firsttimeline-heading-pad-bottom: 50px;

    --firsttimeline-lead-pad-x: 175px;
    --firsttimeline-lead-pad-bottom: 60px;

    --firsttimeline-swipe-display: none;
    --firsttimeline-swipe-pad-bottom: 0;

    --firsttimeline-track-overflow-x: auto;
    --firsttimeline-track-height: 614px;

    --firsttimeline-list-gap: 20px;
    --firsttimeline-list-pad-left: 0px;
    --firsttimeline-list-pad-right: 0px;

    --firsttimeline-text-gap: 18px;
    --firsttimeline-title-align: left;

    --firsttimeline-bottom-pad: 0px;

    /* Accordion-mode tokens */
    --firsttimeline-edge-pad: 59px;
    --firsttimeline-fold: 140px;
    --firsttimeline-expand: 505px;
    --firsttimeline-media-h: 505px;
  }

  /* First/last item insets replace the mobile margin-left peek. */
  #sony-lp .firsttimeline__item:first-child {
    padding-left: var(--firsttimeline-edge-pad);
  }

  #sony-lp .firsttimeline__item:last-child {
    padding-right: var(--firsttimeline-edge-pad);
  }

  /* Alternate caption position (above for even items). */
  #sony-lp .firsttimeline__item:nth-child(even) {
    flex-direction: column-reverse;
  }

  #sony-lp .firsttimeline__media {
    width: var(--firsttimeline-fold);
    height: var(--firsttimeline-media-h);
    transition: width 0.35s ease, box-shadow 0.35s ease;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }

  /* Expansion is driven entirely by the JS-managed --active class so a click
     on the open card folds it back without :hover keeping it open. JS adds
     --active on mouseenter / focus and removes it on mouseleave / blur when
     the card is not pinned, and toggles pin on click. */
  #sony-lp .firsttimeline__item--active .firsttimeline__media {
    width: var(--firsttimeline-expand);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12);
  }

  #sony-lp .firsttimeline__text {
    width: auto;
    max-width: var(--firsttimeline-expand);
  }

  #sony-lp .firsttimeline__item:nth-child(odd) .firsttimeline__text {
    margin-top: var(--firsttimeline-text-gap);
    margin-bottom: 0;
  }

  #sony-lp .firsttimeline__item:nth-child(even) .firsttimeline__text {
    margin-top: 0;
    margin-bottom: var(--firsttimeline-text-gap);
  }
}

/* ----- 1376+ — accordion, wider edge-pad ----- */
@container sony-lp (min-width: 1376px) {
  #sony-lp .firsttimeline {
    --firsttimeline-edge-pad: 138px;
  }
}

/* ----- 1500+ — accordion, widest edge-pad ----- */
@container sony-lp (min-width: 1500px) {
  #sony-lp .firsttimeline {
    --firsttimeline-edge-pad: 200px;
    --firsttimeline-lead-pad-x: 250px;
  }
}

/* ========== 6-video-section/styles.css ========== */

/**
 * 6-video-section — scoped under #sony-lp (see ARCHITECTURE.md).
 * Width breakpoints use @container sony-lp, not viewport @media.
 */

#sony-lp .video-section {
  --video-section-width: var(--lp-max-width, 100%);
  /* Heading tokens — mobile-first base (320–919). */
  --video-section-heading-w: 293px;
  --video-section-heading-mt: 70px;
  --video-section-heading-mb: 47px;
  --video-section-heading-size: 30px;
  --video-section-heading-lh: 39px;

  width: 100%;
  max-width: var(--video-section-width);
  margin: 0 auto;
  background: #f5f5f7;
  font-family: "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 0;
}

#sony-lp .video-section__inner {
  width: 100%;
  max-width: var(--video-section-width);
  margin: 0 auto;
}

#sony-lp .video-section__heading {
  width: 100%;
  max-width: var(--video-section-heading-w);
  margin: var(--video-section-heading-mt) auto var(--video-section-heading-mb);
  padding: 0;
  text-align: center;
  font-style: normal;
  font-weight: 700;
  font-size: var(--video-section-heading-size);
  line-height: var(--video-section-heading-lh);
  font-family: "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0;
  color: #000000;
  opacity: 1;
}

#sony-lp .video-section__heading-br {
  display: inline;
}

@container sony-lp (min-width: 1218px) {
  #sony-lp .video-section__heading-br {
    display: none;
  }
}

@container sony-lp (min-width: 920px) {
  #sony-lp .video-section {
    --video-section-heading-w: 824px;
    --video-section-heading-mt: 72px;
    --video-section-heading-mb: 82px;
    --video-section-heading-size: 60px;
    --video-section-heading-lh: 79px;
  }
}

@container sony-lp (min-width: 960px) {
  #sony-lp .video-section {
    --video-section-heading-w: 778px;
    --video-section-heading-mt: 50px;
    --video-section-heading-mb: 50px;
  }
}

@container sony-lp (min-width: 1218px) {
  #sony-lp .video-section {
    --video-section-heading-w: 1039px;
    --video-section-heading-mt: 100px;
    --video-section-heading-mb: 100px;
  }
}

@container sony-lp (min-width: 1376px) {
  #sony-lp .video-section {
    --video-section-heading-w: 1196px;
  }
}

@container sony-lp (min-width: 1500px) {
  #sony-lp .video-section {
    --video-section-heading-w: 1318px;
  }
}

#sony-lp .video-section__player {
  position: relative;
  width: 100%;
  aspect-ratio: var(--lp-video-aspect-w) / var(--lp-video-aspect-h);
  overflow: hidden;
}

#sony-lp .video-section__poster,
#sony-lp .video-section__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  will-change: opacity;
}

#sony-lp .video-section__poster {
  object-fit: cover;
  opacity: 1;
  transition: opacity 0.6s ease 0.05s;
  z-index: 1;
}

#sony-lp .video-section__frame {
  opacity: 0;
  transition: opacity 0.6s ease;
  background: transparent;
  pointer-events: none;
}

#sony-lp .video-section__player[data-painted="true"] .video-section__frame {
  opacity: 1;
  pointer-events: auto;
}

#sony-lp .video-section__player[data-painted="true"] .video-section__poster {
  opacity: 0;
}

#sony-lp .video-section__surface {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

#sony-lp .video-section__controls {
  position: absolute;
  left: 13px;
  bottom: 15px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

@container sony-lp (min-width: 920px) {
  #sony-lp .video-section__controls {
    left: 28px;
    bottom: 24px;
    gap: 8px;
  }
}

@container sony-lp (min-width: 960px) {
  #sony-lp .video-section__controls {
    left: 28px;
    bottom: 16px;
    gap: 8px;
  }
}

@container sony-lp (min-width: 1218px) {
  #sony-lp .video-section__controls {
    left: 28px;
    bottom: 26px;
    gap: 8px;
  }
}

@container sony-lp (min-width: 1376px) {
  #sony-lp .video-section__controls {
    left: 28px;
    bottom: 40px;
    gap: 8px;
  }
}

@container sony-lp (min-width: 1500px) {
  #sony-lp .video-section__controls {
    left: 28px;
    bottom: 50px;
    gap: 8px;
  }
}

#sony-lp .video-section__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

#sony-lp .video-section__control {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2) 0% 0% no-repeat padding-box;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

#sony-lp .video-section__control [data-icon] {
  width: 26px;
  height: 26px;
  display: block;
  object-fit: contain;
}

#sony-lp .video-section__control [data-icon] {
  display: none;
}

#sony-lp .video-section__control[data-control="play"] [data-icon="play"] {
  display: block;
}

#sony-lp .video-section__toggle[data-toggle="playing"]:checked + .video-section__control[data-control="play"] [data-icon="play"] {
  display: none;
}

#sony-lp .video-section__toggle[data-toggle="playing"]:checked + .video-section__control[data-control="play"] [data-icon="pause"] {
  display: block;
}

#sony-lp .video-section__control[data-control="mute"] [data-icon="unmute"] {
  display: block;
}

#sony-lp .video-section__toggle[data-toggle="muted"]:checked + .video-section__control[data-control="mute"] [data-icon="unmute"] {
  display: none;
}

#sony-lp .video-section__toggle[data-toggle="muted"]:checked + .video-section__control[data-control="mute"] [data-icon="mute"] {
  display: block;
}

/* Second / stacked block: keep heading, flush to section top (no heading margin-top). */
#sony-lp .video-section.video-section--no-heading-top {
  --video-section-heading-mt: 0;
}

/* ========== 7-collection2/styles.css ========== */

/* ==========================================================================
 * 7-collection2 — scoped under #sony-lp (see ARCHITECTURE.md).
 *
 * Width breakpoints use @container sony-lp because rules in @container <name>
 * cannot restyle the container element itself. `.collection2` IS a container
 * (declared as `collection2` for descendants' `cqw` math) — querying against
 * `collection2` would silently skip every rule on `.collection2` itself.
 * #sony-lp is an ancestor of `.collection2`, so its inline-size drives both
 * `.collection2` and its descendants safely.
 * ========================================================================== */

#sony-lp .collection2 {
  /* Keep `.collection2` as a container so descendants' `100cqw` resolves to
     the section width, not the LP shell. Container-name is informational here
     (we query @container sony-lp instead). */
  container-type: inline-size;
  container-name: collection2;

  --c2-width: var(--lp-max-width, 100%);
  --c2-z-heading: 2;
  --c2-z-frost: 3;
  --c2-z-ftm: 3;
  --c2-z-hero: 5;
  --c2-z-footnote: 6;

  /* ----- Mobile defaults (<=919) ----- */
  --c2-mobile-hero-w: min(320px, 100cqw);
  --c2-mobile-hero-mt: 40px;
  --c2-mobile-hero-v2-shift: -20px;
  --c2-mobile-ftm-w: min(294px, 100cqw);
  --c2-mobile-ftm-top: -9px;
  --c2-mobile-ftm-mt: -190px;
  --c2-mobile-ftm-mb: calc(min(294px, 100cqw) * -101.37 / 1032);
  --c2-mobile-frost-w: min(293px, 100cqw);
  --c2-mobile-frost-radius: 28px 28px 24px 24px;
  --c2-mobile-frost-inner-pt: 160px;
  --c2-mobile-frost-inner-pb: 62px;
  --c2-mobile-title-mt: 52px;
  --c2-mobile-title-fs: 30px;
  --c2-mobile-title-lh: 39px;
  --c2-mobile-desc-mt: 30px;
  --c2-mobile-desc-px: 30px;
  --c2-mobile-desc-minh: 278px;
  --c2-mobile-radios-mt: 62px;
  --c2-mobile-footnote-px: 30px;
  --c2-mobile-footnote-py: 48px;
  --c2-mobile-heading-pt: 53px;
  --c2-mobile-heading-fs: 30px;
  --c2-mobile-heading-lh: 39px;
  --c2-mobile-heading-px: 13px;
  --c2-mobile-section-pb: 0;

  /* ----- Desktop layout tokens (overwritten by bands >=920) ----- */
  --c2-section-min-h: 1870px;
  --c2-section-pb: 0px;
  --c2-heading-top: 47px;
  --c2-frost-top: 806.5px;
  --c2-frost-w: 738px;
  --c2-frost-h: 940px;
  --c2-frost-radius: 40px;
  --c2-frost-inner-pt: 300px;
  --c2-frost-inner-px: 50px;
  --c2-frost-inner-pb: 56px;
  --c2-ftm-w: 746px;
  --c2-ftm-h: 97px;
  --c2-ftm-above: 32px;
  --c2-hero-top-1: 435px;
  --c2-hero-w-1: 636px;
  --c2-hero-h-1: 636px;
  --c2-hero-top-2: 441.5px;
  --c2-hero-w-2: 662px;
  --c2-hero-h-2: 662px;
  --c2-title-mt: 13px;
  --c2-title-maxw: 687px;
  --c2-title-fs: 60px;
  --c2-title-lh: 60px;
  --c2-desc-wrap-mt: 13px;
  --c2-desc-maxw: 1000px;
  --c2-copy-minh: 192px;
  --c2-copy-px: 32px;
  --c2-copy-pt: 19px;
  --c2-radios-mt: 34px;
  --c2-radios-pt: 0px;
  --c2-footnote-maxw: none;
  --c2-footnote-px: 48px;
  --c2-footnote-py: 36px;
}

/* ----- Mobile band: 500-919 ----- */
@container sony-lp (max-width: 919px) and (min-width: 500px) {
  #sony-lp .collection2 {
    --c2-mobile-hero-w: 440px;
    --c2-mobile-hero-mt: 0;
    --c2-mobile-hero-v2-shift: -16px;
    --c2-mobile-ftm-w: min(430px, calc(100cqw - 24px));
    --c2-mobile-ftm-top: -9px;
    --c2-mobile-ftm-mt: -262px;
    --c2-mobile-ftm-mb: calc(min(430px, 100cqw) * -101.37 / 1032);
    --c2-mobile-frost-w: min(430px, calc(100cqw - 24px));
    --c2-mobile-frost-radius: 32px 32px 26px 26px;
    --c2-mobile-frost-inner-pt: 220px;
    --c2-mobile-frost-inner-pb: 44px;
    --c2-mobile-title-mt: 36px;
    --c2-mobile-title-fs: 32px;
    --c2-mobile-title-lh: 40px;
    --c2-mobile-desc-mt: 28px;
    --c2-mobile-desc-px: 28px;
    --c2-mobile-desc-minh: 250px;
    --c2-mobile-radios-mt: 40px;
    --c2-mobile-footnote-px: 110px;
    --c2-mobile-footnote-py: 40px;
  }
}

/* ----- Mobile band: 700-919 ----- */
@container sony-lp (max-width: 919px) and (min-width: 700px) {
  #sony-lp .collection2 {
    --c2-mobile-hero-w: 600px;
    --c2-mobile-hero-mt: 0;
    --c2-mobile-hero-v2-shift: -12px;
    --c2-mobile-ftm-w: min(640px, calc(100cqw - 28px));
    --c2-mobile-ftm-top: -20px;
    --c2-mobile-ftm-mt: -338px;
    --c2-mobile-ftm-mb: calc(min(640px, 100cqw) * -112 / 1032);
    --c2-mobile-frost-w: min(640px, calc(100cqw - 28px));
    --c2-mobile-frost-radius: 36px 36px 28px 28px;
    --c2-mobile-frost-inner-pt: 275px;
    --c2-mobile-frost-inner-pb: 36px;
    --c2-mobile-title-mt: 24px;
    --c2-mobile-title-fs: 53px;
    --c2-mobile-title-lh: 69px;
    --c2-mobile-desc-mt: 20px;
    --c2-mobile-desc-px: 32px;
    --c2-mobile-desc-minh: 146px;
    --c2-mobile-radios-mt: 28px;
    --c2-mobile-footnote-px: 100px;
    --c2-mobile-section-pb: max(40px, env(safe-area-inset-bottom));
  }
}

/* ----- Desktop band: 920-959 ----- */
@container sony-lp (min-width: 920px) and (max-width: 959px) {
  #sony-lp .collection2 {
    --c2-section-min-h: 1194px;
    --c2-heading-top: 104px;
    --c2-frost-top: 471px;
    --c2-frost-w: 738px;
    --c2-frost-h: 422px;
    --c2-frost-radius: 40px;
    --c2-frost-inner-pt: 244px;
    --c2-frost-inner-px: 48px;
    --c2-frost-inner-pb: 34px;
    --c2-ftm-w: 746px;
    --c2-ftm-h: 97px;
    --c2-ftm-above: 46px;
    --c2-hero-top-1: 104px;
    --c2-hero-w-1: 716px;
    --c2-hero-h-1: 716px;
    --c2-hero-top-2: 104px;
    --c2-hero-w-2: 662px;
    --c2-hero-h-2: 662px;
    --c2-title-mt: 0px;
    --c2-title-maxw: 687px;
    --c2-title-fs: 53px;
    --c2-title-lh: 69px;
    --c2-desc-wrap-mt: 0px;
    --c2-desc-maxw: 687px;
    --c2-copy-minh: 117px;
    --c2-copy-px: 0px;
    --c2-copy-pt: 17px;
    --c2-radios-mt: 50px;
    --c2-radios-pt: 0px;
    --c2-footnote-maxw: 598px;
    --c2-footnote-px: 0px;
    --c2-footnote-py: 28px;
  }
}

/* ----- Desktop band: 960-1217 ----- */
@container sony-lp (min-width: 960px) and (max-width: 1217px) {
  #sony-lp .collection2 {
    --c2-section-min-h: 1194px;
    --c2-section-pb: 28px;
    --c2-heading-top: 104px;
    /* 104 (heading top) + 69 (heading line-height) + 298 (gap) */
    --c2-frost-top: 471px;
    --c2-frost-w: 778px;
    --c2-frost-h: 560px;
    --c2-frost-radius: 42px;
    --c2-frost-inner-pt: 303px;
    --c2-frost-inner-px: 53px;
    --c2-frost-inner-pb: 34px;
    --c2-ftm-w: 778px;
    --c2-ftm-h: 97px;
    --c2-ftm-above: 47px;
    --c2-hero-top-1: 104px;
    --c2-hero-w-1: 776px;
    --c2-hero-h-1: 776px;
    --c2-hero-top-2: 104px;
    --c2-hero-w-2: 776px;
    --c2-hero-h-2: 776px;
    --c2-title-mt: 0;
    --c2-title-maxw: 100%;
    --c2-title-fs: 53px;
    --c2-title-lh: 69px;
    --c2-desc-wrap-mt: 13px;
    --c2-desc-maxw: 100%;
    --c2-copy-minh: 117px;
    --c2-copy-px: 0;
    --c2-copy-pt: 0;
    --c2-radios-mt: 0;
    --c2-radios-pt: 0;
    --c2-footnote-maxw: 638px;
    --c2-footnote-px: 0;
    --c2-footnote-py: 0;
  }
}

/* ----- Desktop band: 1218-1375 ----- */
@container sony-lp (min-width: 1218px) and (max-width: 1375px) {
  #sony-lp .collection2 {
    --c2-section-min-h: 1200px;
    --c2-section-pb: 28px;
    --c2-heading-top: 104px;
    --c2-frost-top: 471px;
    --c2-frost-w: 1196px;
    --c2-frost-h: 640px;
    --c2-frost-radius: 48px;
    --c2-frost-inner-pt: 393px;
    --c2-frost-inner-px: 54px;
    --c2-frost-inner-pb: 34px;
    --c2-ftm-w: 1196px;
    --c2-ftm-h: 130px;
    --c2-ftm-above: 64px;
    --c2-hero-top-1: 104px;
    --c2-hero-w-1: 882px;
    --c2-hero-h-1: 882px;
    --c2-hero-top-2: 104px;
    --c2-hero-w-2: 882px;
    --c2-hero-h-2: 882px;
    --c2-title-mt: 0px;
    --c2-title-maxw: 100%;
    --c2-title-fs: 53px;
    --c2-title-lh: 69px;
    --c2-desc-wrap-mt: 11px;
    --c2-desc-maxw: 896px;
    --c2-copy-minh: 100px;
    --c2-copy-px: 0px;
    --c2-copy-pt: 0px;
    --c2-radios-mt: 7px;
    --c2-radios-pt: 0px;
    --c2-footnote-maxw: 896px;
    --c2-footnote-px: 0px;
    --c2-footnote-py: 0px;
  }
}

/* ----- Desktop band: 1376-1499 ----- */
@container sony-lp (min-width: 1376px) and (max-width: 1499px) {
  #sony-lp .collection2 {
    --c2-section-pb: 33px;
    --c2-heading-top: 124px;
    --c2-frost-top: 532px;
    --c2-frost-w: 1196px;
    --c2-frost-h: 688px;
    --c2-frost-radius: 50px;
    --c2-frost-inner-pt: 420px;
    --c2-frost-inner-px: 0px;
    --c2-frost-inner-pb: 60px;
    --c2-ftm-w: 1196px;
    --c2-ftm-h: 150px;
    --c2-ftm-above: 74px;
    --c2-hero-top-1: 124px;
    --c2-hero-w-1: 980px;
    --c2-hero-h-1: 980px;
    --c2-hero-top-2: 124px;
    --c2-hero-w-2: 980px;
    --c2-hero-h-2: 980px;
    --c2-title-mt: 0px;
    --c2-title-maxw: 100%;
    --c2-title-fs: 60px;
    --c2-title-lh: 79px;
    --c2-desc-wrap-mt: 13px;
    --c2-desc-maxw: 994px;
    --c2-copy-minh: 116px;
    --c2-copy-px: 0px;
    --c2-copy-pt: 0px;
    --c2-radios-mt: 0px;
    --c2-radios-pt: 0px;
    --c2-footnote-maxw: 994px;
    --c2-footnote-px: 0px;
    --c2-footnote-py: 0px;
    --c2-section-min-h: 1308px;
  }
}

/* ----- Desktop band: >=1500 ----- */
@container sony-lp (min-width: 1500px) {
  #sony-lp .collection2 {
    --c2-section-min-h: 1320px;
    --c2-section-pb: 33px;
    --c2-heading-top: 124px;
    --c2-frost-top: 532px;
    --c2-frost-w: 1320px;
    --c2-frost-h: 700px;
    --c2-frost-radius: 50px;
    --c2-frost-inner-pt: 420px;
    --c2-frost-inner-px: 99px;
    --c2-frost-inner-pb: 60px;
    --c2-ftm-w: 1304px;
    --c2-ftm-h: 150px;
    --c2-ftm-above: 75px;
    --c2-hero-top-1: 124px;
    --c2-hero-w-1: 980px;
    --c2-hero-h-1: 980px;
    --c2-hero-top-2: 124px;
    --c2-hero-w-2: 980px;
    --c2-hero-h-2: 980px;
    --c2-title-mt: 0px;
    --c2-title-maxw: 100%;
    --c2-title-fs: 60px;
    --c2-title-lh: 79px;
    --c2-desc-wrap-mt: 13px;
    --c2-desc-maxw: 1122px;
    --c2-copy-minh: 116px;
    --c2-copy-px: 0px;
    --c2-copy-pt: 0px;
    --c2-radios-mt: 0px;
    --c2-radios-pt: 0px;
    --c2-footnote-maxw: 1118px;
    --c2-footnote-px: 0px;
    --c2-footnote-py: 0px;
  }
}

/* ----- Heading font follows title font >=920 ----- */
@container sony-lp (min-width: 920px) {
  #sony-lp .collection2 {
    --c2-heading-fs: var(--c2-title-fs);
    --c2-heading-lh: var(--c2-title-lh);
  }
}

/* ==========================================================================
 * Base styles
 * ========================================================================== */

#sony-lp .collection2 {
  position: relative;
  width: 100%;
  max-width: var(--c2-width);
  margin: 0 auto;
  overflow: hidden;
  background-color: transparent;
  background-image: linear-gradient(131deg, #cbc0bc 0%, #8a7b76 100%);
  background-repeat: no-repeat;
  background-position: 0 0;
  font-family: "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#sony-lp .collection2__heading {
  margin: 0;
  text-align: center;
  letter-spacing: 0;
  color: #ffffff;
  opacity: 1;
}

#sony-lp .collection2__heading-br {
  display: none;
}

@container sony-lp (max-width: 919px) {
  #sony-lp .collection2__heading-br {
    display: inline;
  }
}

@container sony-lp (max-width: 919px) and (min-width: 700px) {
  #sony-lp .collection2__heading-br {
    display: none;
  }
}

#sony-lp .collection2__ftm {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#sony-lp .collection2__ftm-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

#sony-lp .collection2__ftm::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 40px;
  background: linear-gradient(180deg, rgba(138, 118, 117, 0.38) 0%, rgba(138, 118, 117, 0) 100%);
  filter: blur(10px);
}

#sony-lp .collection2__hero-wrap {
  pointer-events: none;
}

#sony-lp .collection2__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.4s ease;
}

#sony-lp .collection2__hero-img--visible {
  opacity: 1;
}

#sony-lp .collection2__frost {
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 0 rgba(255, 214, 222, 0.18);
}

#sony-lp .collection2__frost::before {
  content: "";
  position: absolute;
  inset: -22px;
  border-radius: 72px;
  background-image: linear-gradient(180deg, #e1d7d799 0%, rgb(199 181 187 / 36%) 100%);
  filter: blur(12px) saturate(104%) brightness(99%);
}

#sony-lp .collection2__frost-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
}

#sony-lp .collection2__title {
  margin: 0;
  text-align: center;
  letter-spacing: 0;
  color: #ffffff;
}

#sony-lp .collection2__desc-wrap {
  width: 100%;
}

#sony-lp .collection2__desc {
  margin: 0;
  text-align: center;
  letter-spacing: 0;
  color: #f5f5f7;
  opacity: 1;
}

#sony-lp .collection2__desc b {
  font-weight: 700;
}

#sony-lp .collection2__desc[hidden] {
  display: none;
}

#sony-lp .collection2__radios {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

#sony-lp .collection2__radio {
  display: inline-flex;
  cursor: pointer;
}

#sony-lp .collection2__radio-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0 0 0 0);
}

#sony-lp .collection2__radio-visual {
  display: block;
  width: 95px;
  height: 12px;
  border: 0;
  border-radius: 15px;
  background: #ffffff;
  opacity: 0.2;
  transition: opacity 0.25s ease, width 0.25s ease;
}

#sony-lp .collection2__radio-input:checked + .collection2__radio-visual {
  width: 96px;
  opacity: 1;
}

#sony-lp .collection2__radio-input:focus-visible + .collection2__radio-visual {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}

#sony-lp .collection2__footnote {
  margin: 0;
  text-align: center;
  font: normal normal normal 13px/17px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0;
  color: #d8c7c8;
  opacity: 1;
}

/* ---------- Mobile <=919 ---------- */
@container sony-lp (max-width: 919px) {
  #sony-lp .collection2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-bottom: var(--c2-mobile-section-pb);
  }

  #sony-lp .collection2__heading {
    position: relative;
    order: 1;
    width: 100%;
    padding: var(--c2-mobile-heading-pt) var(--c2-mobile-heading-px) 0;
    font: normal normal bold var(--c2-mobile-heading-fs) / var(--c2-mobile-heading-lh) "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
    z-index: var(--c2-z-heading);
  }

  #sony-lp .collection2__hero-wrap {
    position: relative;
    order: 2;
    left: auto;
    top: var(--c2-mobile-hero-mt);
    transform: none;
    width: var(--c2-mobile-hero-w);
    max-width: 100%;
    aspect-ratio: 1 / 0.84;
    height: auto;
    margin: 0 auto;
    flex-shrink: 0;
    z-index: var(--c2-z-hero);
  }

  #sony-lp .collection2[data-active-variant="2"] {
    --c2-mobile-hero-mt: 0;
  }

  #sony-lp .collection2[data-active-variant="2"] .collection2__hero-wrap {
    transform: translateY(var(--c2-mobile-hero-v2-shift));
  }

  #sony-lp .collection2__ftm {
    position: relative;
    order: 3;
    left: auto;
    top: var(--c2-mobile-ftm-top);
    transform: none;
    width: var(--c2-mobile-ftm-w);
    max-width: 100%;
    aspect-ratio: 516 / 80;
    height: auto;
    flex-shrink: 0;
    margin-top: var(--c2-mobile-ftm-mt);
    margin-bottom: var(--c2-mobile-ftm-mb);
    margin-left: auto;
    margin-right: auto;
    z-index: var(--c2-z-ftm);
  }

  #sony-lp .collection2__frost {
    position: relative;
    order: 4;
    left: auto;
    top: auto;
    transform: none;
    width: var(--c2-mobile-frost-w);
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin: 0 auto;
    align-self: center;
    border-radius: var(--c2-mobile-frost-radius);
    z-index: var(--c2-z-frost);
  }

  #sony-lp .collection2__frost-inner {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: var(--c2-mobile-frost-inner-pt) 0 var(--c2-mobile-frost-inner-pb);
  }

  #sony-lp .collection2__title {
    flex-shrink: 0;
    margin-top: var(--c2-mobile-title-mt);
    margin-inline: 30px;
    max-width: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: normal normal bold var(--c2-mobile-title-fs) / var(--c2-mobile-title-lh) "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  #sony-lp .collection2__desc-wrap {
    margin-top: var(--c2-mobile-desc-mt);
    padding: 0 var(--c2-mobile-desc-px);
    box-sizing: border-box;
    flex: 0 0 auto;
    min-height: var(--c2-mobile-desc-minh);
    max-width: 100%;
  }

  #sony-lp .collection2__desc {
    font: normal normal normal 18px/23px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  #sony-lp .collection2__radios {
    margin-top: var(--c2-mobile-radios-mt);
    padding: 0;
    flex-shrink: 0;
  }

  #sony-lp .collection2__footnote {
    position: relative;
    order: 5;
    width: 100%;
    max-width: var(--c2-mobile-frost-w);
    margin: 0 auto;
    padding: var(--c2-mobile-footnote-py) 0;
    z-index: var(--c2-z-footnote);
  }

  #sony-lp .collection2__hero-img {
    object-fit: cover;
    object-position: center 58%;
    transition: opacity 0.45s ease, transform 0.45s ease;
  }

  #sony-lp .collection2__hero-img[data-variant="2"] {
    object-position: center 52%;
    transform: translateY(20px);
  }
}

@container sony-lp (max-width: 919px) and (min-width: 500px) {
  #sony-lp .collection2__hero-img {
    object-position: center 56%;
  }

  #sony-lp .collection2__hero-img[data-variant="2"] {
    object-position: center 50%;
    transform: translateY(24px);
  }
}

@container sony-lp (max-width: 919px) and (min-width: 700px) {
  #sony-lp .collection2__hero-img {
    object-position: center 56%;
  }

  #sony-lp .collection2__hero-img[data-variant="2"] {
    object-position: center 52%;
    transform: translateY(26px);
  }
}

/* ---------- Desktop >=920 ---------- */
@container sony-lp (min-width: 920px) {
  #sony-lp .collection2 {
    position: relative;
    min-height: var(--c2-section-min-h);
    height: auto;
    overflow-x: hidden;
    overflow-y: visible;
    padding-bottom: var(--c2-section-pb, 0px);
  }

  #sony-lp .collection2__heading {
    position: absolute;
    left: 50%;
    top: var(--c2-heading-top);
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--c2-width);
    padding: 0;
    text-align: center;
    font: normal normal bold var(--c2-heading-fs) / var(--c2-heading-lh) "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
    z-index: var(--c2-z-heading);
    pointer-events: none;
  }

  #sony-lp .collection2__ftm {
    position: absolute;
    left: 50%;
    top: calc(var(--c2-frost-top) - var(--c2-ftm-above));
    transform: translateX(-50%);
    width: min(var(--c2-ftm-w), calc(100% - 48px));
    min-height: 0;
    height: auto;
    max-height: var(--c2-ftm-h);
    z-index: var(--c2-z-ftm);
  }

  #sony-lp .collection2__frost {
    position: absolute;
    left: 50%;
    top: var(--c2-frost-top);
    transform: translateX(-50%);
    width: min(var(--c2-frost-w), calc(100% - 48px));
    min-height: var(--c2-frost-h);
    height: auto;
    border-radius: var(--c2-frost-radius);
    z-index: var(--c2-z-frost);
    display: flex;
    flex-direction: column;
  }

  #sony-lp .collection2__frost-inner {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    padding: var(--c2-frost-inner-pt) var(--c2-frost-inner-px) var(--c2-frost-inner-pb);
  }

  #sony-lp .collection2__title {
    margin-top: var(--c2-title-mt);
    max-width: var(--c2-title-maxw);
    width: 100%;
    flex-shrink: 0;
    font: normal normal bold var(--c2-title-fs) / var(--c2-title-lh) "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  #sony-lp .collection2__desc-wrap {
    margin-top: var(--c2-desc-wrap-mt);
    max-width: var(--c2-desc-maxw);
    padding: var(--c2-copy-pt) var(--c2-copy-px) 0;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: var(--c2-copy-minh);
  }

  #sony-lp .collection2__desc {
    min-height: var(--c2-copy-minh);
    font: normal normal normal 18px/23px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  #sony-lp .collection2__radios {
    flex-shrink: 0;
    margin-top: var(--c2-radios-mt);
    padding-top: var(--c2-radios-pt);
  }

  #sony-lp .collection2__footnote {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--c2-footnote-maxw, none);
    padding: var(--c2-footnote-py) var(--c2-footnote-px);
    z-index: var(--c2-z-footnote);
  }

  #sony-lp .collection2__hero-wrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--c2-z-hero);
  }

  #sony-lp .collection2[data-active-variant="1"] .collection2__hero-wrap {
    top: var(--c2-hero-top-1);
    width: var(--c2-hero-w-1);
    height: var(--c2-hero-h-1);
  }

  #sony-lp .collection2[data-active-variant="2"] .collection2__hero-wrap {
    top: var(--c2-hero-top-2);
    width: var(--c2-hero-w-2);
    height: var(--c2-hero-h-2);
  }
}

/* 960-1217: footnote below frost (gap + section padding) */
@container sony-lp (min-width: 960px) and (max-width: 1217px) {
  #sony-lp .collection2__footnote {
    top: auto;
    bottom: 28px;
    letter-spacing: 0;
    color: #d8c7c8;
  }
}

/* 1218-1375: footnote 28px from section bottom */
@container sony-lp (min-width: 1218px) and (max-width: 1375px) {
  #sony-lp .collection2__footnote {
    top: auto;
    bottom: 28px;
    letter-spacing: 0;
    color: #d8c7c8;
  }
}

/* 1376-1499: footnote 33px from section bottom */
@container sony-lp (min-width: 1376px) and (max-width: 1499px) {
  #sony-lp .collection2__footnote {
    top: auto;
    bottom: 33px;
    letter-spacing: 0;
    color: #d8c7c8;
  }

  #sony-lp .collection2__radios {
    margin-top: auto;
    padding-top: var(--c2-radios-pt);
  }
}

/* >=1500: footnote 33px from section bottom */
@container sony-lp (min-width: 1500px) {
  #sony-lp .collection2__footnote {
    top: auto;
    bottom: 33px;
    letter-spacing: 0;
    color: #d8c7c8;
  }
}

/* ========== 8-double-video-slider/styles.css ========== */

/*
 * 8-double-video-slider — scoped under #sony-lp (see ARCHITECTURE.md).
 * Width breakpoints use @container double-video-slider; no viewport @media.
 */

#sony-lp .double-video-slider {
  position: relative;
  width: 100%;
  max-width: var(--double-video-slider-width);
  margin: 0 auto;
  background-color: var(--double-video-slider-bg);
}

#sony-lp .double-video-slider__inner {
  position: relative;
  width: 100%;
  min-height: var(--double-video-slider-section-min-h);
  height: auto;
  margin: 0;
  padding: var(--double-video-slider-pad-top) 0 var(--double-video-slider-pad-bottom);
  font-family: var(--double-video-slider-font);
  display: flex;
  flex-direction: column;
}

#sony-lp .double-video-slider__carousel {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  flex-shrink: 0;
}

#sony-lp .double-video-slider__viewport {
  width: 100%;
  max-width: 100%;
  height: var(--double-video-slider-slide-h);
  margin: 0 auto;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  isolation: isolate;
  contain: paint;
}

#sony-lp .double-video-slider__track {
  display: flex;
  flex-direction: row;
  gap: var(--double-video-slider-slide-gap);
  /* Mobile (default): full-bleed track. Desktop adds horizontal padding. */
  padding: 0;
  height: 100%;
  width: max-content;
  transform: translate3d(0, 0, 0);
  transition: transform var(--double-video-slider-transition-track);
  will-change: transform;
}

#sony-lp .double-video-slider__slide {
  flex: 0 0 var(--double-video-slider-slide-w);
  width: var(--double-video-slider-slide-w);
  max-width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--double-video-slider-border-radius);
  background: var(--double-video-slider-slide-bg);
  overflow: hidden;
}

#sony-lp .double-video-slider__image {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: center center;
  /* Default <img> is draggable in browsers; native drag breaks carousel pointer swipe back to video. */
  user-select: none;
  -webkit-user-drag: none;
}

/*
 * Arrows — mobile (default).
 * Top edge of the arrow box meets the bottom edge of the image (viewport).
 * Coordinates are relative to .double-video-slider__inner (positioned ancestor).
 */
#sony-lp .double-video-slider__arrow {
  position: absolute;
  top: calc(var(--double-video-slider-pad-top) - 1px + var(--double-video-slider-slide-h));
  transform: none;
  width: var(--double-video-slider-arrow-size);
  height: var(--double-video-slider-arrow-size);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

#sony-lp .double-video-slider__arrow svg {
  display: block;
  width: var(--double-video-slider-arrow-size);
  height: var(--double-video-slider-arrow-size);
}

#sony-lp .double-video-slider__arrow:focus-visible {
  outline: var(--double-video-slider-focus-outline-width) solid var(--double-video-slider-color-text);
  outline-offset: var(--double-video-slider-focus-outline-offset);
}

#sony-lp .double-video-slider__arrow[hidden] {
  display: none;
}

#sony-lp .double-video-slider__arrow--prev {
  left: var(--double-video-slider-arrow-offset-x-prev, var(--double-video-slider-arrow-offset-x));
}

#sony-lp .double-video-slider__arrow--next {
  right: var(--double-video-slider-arrow-offset-x);
}

#sony-lp .double-video-slider__copy {
  box-sizing: border-box;
  margin-top: var(--double-video-slider-copy-gap);
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--double-video-slider-copy-pad-left);
  padding-right: var(--double-video-slider-copy-pad-right);
  flex: 1;
  min-height: 0;
  display: flex;
  /* Mobile (default): heading above text in a single column. */
  flex-direction: column;
  align-items: stretch;
  gap: var(--double-video-slider-copy-inner-gap);
}

#sony-lp .double-video-slider__copy[hidden] {
  display: none;
}

#sony-lp .double-video-slider__title {
  flex: 0 0 var(--double-video-slider-title-col);
  width: var(--double-video-slider-title-col);
  max-width: 100%;
  margin: 0;
  text-align: left;
  font-style: normal;
  font-weight: var(--double-video-slider-title-weight);
  font-size: var(--double-video-slider-title-size);
  line-height: var(--double-video-slider-title-lh);
  font-family: var(--double-video-slider-font);
  letter-spacing: 0;
  color: var(--double-video-slider-color-text);
  opacity: 1;
}

#sony-lp .double-video-slider__text {
  flex: 1;
  min-width: 0;
  margin: 0;
  text-align: left;
  font-style: normal;
  font-weight: var(--double-video-slider-text-weight);
  font-size: var(--double-video-slider-text-size);
  line-height: var(--double-video-slider-text-lh);
  font-family: var(--double-video-slider-font);
  letter-spacing: 0;
  color: var(--double-video-slider-color-text-muted);
  opacity: 1;
}

#sony-lp .double-video-slider__radios {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--double-video-slider-radios-gap);
  flex-shrink: 0;
  padding-top: var(--double-video-slider-radios-pad-top);
}

#sony-lp .double-video-slider__radio {
  cursor: pointer;
  display: inline-flex;
}

#sony-lp .double-video-slider__radio-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0 0 0 0);
}

#sony-lp .double-video-slider__radio-visual {
  display: block;
  width: var(--double-video-slider-radio-w);
  height: var(--double-video-slider-radio-h);
  border: 0;
  border-radius: var(--double-video-slider-radio-border-radius);
  background: var(--double-video-slider-color-text);
  opacity: var(--double-video-slider-radio-opacity-idle);
  transition: opacity var(--double-video-slider-transition-radio);
}

#sony-lp .double-video-slider__radio-input:checked + .double-video-slider__radio-visual {
  opacity: var(--double-video-slider-radio-opacity-active);
}

#sony-lp .double-video-slider__radio-input:focus-visible + .double-video-slider__radio-visual {
  outline: var(--double-video-slider-focus-outline-width) solid var(--double-video-slider-color-text);
  outline-offset: var(--double-video-slider-focus-outline-offset);
}

/* Video player surface (inside the first slide). */
#sony-lp .double-video-slider__player {
  position: relative;
  width: 100%;
  height: 100%;
}

#sony-lp .double-video-slider__poster,
#sony-lp .double-video-slider__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

#sony-lp .double-video-slider__poster {
  object-fit: cover;
}

#sony-lp .double-video-slider__frame {
  opacity: 0;
  transition: opacity 0.25s ease;
}

#sony-lp .double-video-slider__player[data-loaded="true"] .double-video-slider__frame {
  opacity: 1;
}

#sony-lp .double-video-slider__surface {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

#sony-lp .double-video-slider__controls {
  position: absolute;
  left: 13px;
  bottom: 15px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

#sony-lp .double-video-slider__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

#sony-lp .double-video-slider__control {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

#sony-lp .double-video-slider__control [data-icon] {
  width: 26px;
  height: 26px;
  display: none;
}

#sony-lp .double-video-slider__control[data-control="play"] [data-icon="play"] {
  display: block;
}

#sony-lp .double-video-slider__toggle[data-toggle="playing"]:checked + .double-video-slider__control[data-control="play"] [data-icon="play"] {
  display: none;
}

#sony-lp .double-video-slider__toggle[data-toggle="playing"]:checked + .double-video-slider__control[data-control="play"] [data-icon="pause"] {
  display: block;
}

#sony-lp .double-video-slider__control[data-control="mute"] [data-icon="unmute"] {
  display: block;
}

#sony-lp .double-video-slider__toggle[data-toggle="muted"]:checked + .double-video-slider__control[data-control="mute"] [data-icon="unmute"] {
  display: none;
}

#sony-lp .double-video-slider__toggle[data-toggle="muted"]:checked + .double-video-slider__control[data-control="mute"] [data-icon="mute"] {
  display: block;
}

@container double-video-slider (min-width: 920px) {
  #sony-lp .double-video-slider__controls {
    left: 40px;
    bottom: 40px;
    gap: 8px;
  }
}

@container double-video-slider (min-width: 1376px) {
  #sony-lp .double-video-slider__controls {
    left: 46px;
    bottom: 46px;
    gap: 8px;
  }
}

/* Mobile band (500–919): center the copy text. */
@container double-video-slider (min-width: 500px) and (max-width: 919px) {
  #sony-lp .double-video-slider__title,
  #sony-lp .double-video-slider__text {
    text-align: center;
  }
}

/* Desktop band (≥920): padded carousel track + arrows vertically centered. */
@container double-video-slider (min-width: 920px) {
  #sony-lp .double-video-slider__track {
    padding-left: var(--double-video-slider-pad-left);
    padding-right: var(--double-video-slider-pad-right);
  }

  #sony-lp .double-video-slider__arrow {
    top: calc(var(--double-video-slider-pad-top) + var(--double-video-slider-slide-h) / 2);
    transform: translateY(-50%);
  }

  #sony-lp .double-video-slider__text {
    max-width: var(--double-video-slider-text-max-w);
    min-height: var(--double-video-slider-text-min-h);
  }
}

/* Row copy only from 1218+ (920–1217 keeps the column stack from the spec). */
@container double-video-slider (min-width: 1218px) {
  #sony-lp .double-video-slider__copy {
    flex-direction: row;
    align-items: flex-start;
  }
}

/* ========== 9-counter/styles.css ========== */

/**
 * 9-counter — scoped under #sony-lp (see ARCHITECTURE.md).
 * No width-based @media here (typography is fixed across breakpoints).
 */

#sony-lp {
  --counter-bg: #f5f5f7;
  --counter-color: #000000;
  --counter-font:
    "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#sony-lp .counter {
  --counter-width: var(--lp-max-width, 100%);
  width: 100%;
  max-width: var(--counter-width);
  margin: 0 auto;
  padding: 23px 0 115px;
  background: var(--counter-bg);
  text-align: center;
}

#sony-lp .counter__headline,
#sony-lp .counter__suffix {
  margin: 0;
  padding: 0;
  text-align: center;
  font: normal normal bold 40px/52px var(--counter-font);
  letter-spacing: 0;
  color: var(--counter-color);
  opacity: 1;
}

#sony-lp .counter__value {
  margin: 0;
  padding: 0;
  text-align: center;
  font: normal normal bold 110px/123px var(--counter-font);
  letter-spacing: 0;
  color: var(--counter-color);
  opacity: 1;
}

/* ========== 9-full-video-slider/styles.css ========== */

/*
 * 9-full-video-slider — scoped under #sony-lp (see ARCHITECTURE.md).
 * Width breakpoints use @container sony-lp; no viewport @media.
 */

#sony-lp .full-video-slider {
  position: relative;
  width: 100%;
  max-width: var(--full-video-slider-width);
  margin: 0 auto;
  padding: var(--full-video-slider-pad-top) 0 var(--full-video-slider-pad-bottom);
  background-color: var(--full-video-slider-bg);
  font-family: var(--full-video-slider-font);
  display: flex;
  flex-direction: column;
}

#sony-lp .full-video-slider__media {
  position: relative;
  width: 100%;
}

#sony-lp .full-video-slider__carousel {
  width: 100%;
}

#sony-lp .full-video-slider__viewport {
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  aspect-ratio: var(--lp-video-aspect-w) / var(--lp-video-aspect-h);
  border-radius: var(--full-video-slider-border-radius);
  isolation: isolate;
  contain: paint;
}

#sony-lp .full-video-slider__track {
  display: flex;
  gap: 0;
  height: 100%;
  width: calc(var(--full-video-slider-slides, 2) * 100%);
  transform: translate3d(0, 0, 0);
  transition: transform var(--full-video-slider-transition-track);
  will-change: transform;
}

#sony-lp .full-video-slider__slide {
  flex: 0 0 calc(100% / var(--full-video-slider-slides, 2));
  height: 100%;
  overflow: hidden;
  background: var(--full-video-slider-slide-bg);
}

#sony-lp .full-video-slider__arrow {
  position: absolute;
  /* Mobile (<920): arrow sits right below the video. */
  top: 99%;
  transform: none;
  width: var(--full-video-slider-arrow-size);
  height: var(--full-video-slider-arrow-size);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

@container sony-lp (min-width: 920px) {
  #sony-lp .full-video-slider__arrow {
    top: 50%;
    transform: translateY(-50%);
  }
}

#sony-lp .full-video-slider__arrow svg {
  width: var(--full-video-slider-arrow-size);
  height: var(--full-video-slider-arrow-size);
  display: block;
}

#sony-lp .full-video-slider__arrow:focus-visible {
  outline: var(--full-video-slider-focus-outline-width) solid var(--full-video-slider-color-text);
  outline-offset: var(--full-video-slider-focus-outline-offset);
}

#sony-lp .full-video-slider__arrow[hidden] {
  display: none;
}

#sony-lp .full-video-slider__arrow--prev {
  left: var(--full-video-slider-arrow-offset-x-prev, var(--full-video-slider-arrow-offset-x));
}

#sony-lp .full-video-slider__arrow--next {
  right: var(--full-video-slider-arrow-offset-x);
}

#sony-lp .full-video-slider__player {
  position: relative;
  width: 100%;
  height: 100%;
}

#sony-lp .full-video-slider__poster,
#sony-lp .full-video-slider__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  will-change: opacity;
}

#sony-lp .full-video-slider__poster {
  object-fit: cover;
  opacity: 1;
  transition: opacity 0.6s ease 0.05s;
  z-index: 1;
}

#sony-lp .full-video-slider__frame {
  opacity: 0;
  transition: opacity 0.6s ease;
  background: transparent;
  pointer-events: none;
}

#sony-lp .full-video-slider__player[data-painted="true"] .full-video-slider__frame {
  opacity: 1;
  pointer-events: auto;
}

#sony-lp .full-video-slider__player[data-painted="true"] .full-video-slider__poster {
  opacity: 0;
}

#sony-lp .full-video-slider__surface {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

#sony-lp .full-video-slider__controls {
  position: absolute;
  left: 13px;
  bottom: 15px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

#sony-lp .full-video-slider__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

#sony-lp .full-video-slider__control {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

#sony-lp .full-video-slider__control [data-icon] {
  width: 26px;
  height: 26px;
  display: none;
}

#sony-lp .full-video-slider__control[data-control="play"] [data-icon="play"] {
  display: block;
}

#sony-lp .full-video-slider__toggle[data-toggle="playing"]:checked + .full-video-slider__control[data-control="play"] [data-icon="play"] {
  display: none;
}

#sony-lp .full-video-slider__toggle[data-toggle="playing"]:checked + .full-video-slider__control[data-control="play"] [data-icon="pause"] {
  display: block;
}

#sony-lp .full-video-slider__control[data-control="mute"] [data-icon="unmute"] {
  display: block;
}

#sony-lp .full-video-slider__toggle[data-toggle="muted"]:checked + .full-video-slider__control[data-control="mute"] [data-icon="unmute"] {
  display: none;
}

#sony-lp .full-video-slider__toggle[data-toggle="muted"]:checked + .full-video-slider__control[data-control="mute"] [data-icon="mute"] {
  display: block;
}

@container sony-lp (min-width: 920px) {
  #sony-lp .full-video-slider__controls {
    left: 40px;
    bottom: 40px;
    gap: 8px;
  }
}

@container sony-lp (min-width: 1376px) {
  #sony-lp .full-video-slider__controls {
    left: 46px;
    bottom: 46px;
    gap: 8px;
  }
}

/*
 * Copy block.
 * Mobile default: column stack (heading above description, left text).
 * 500–919 centers the text via the rule below.
 * >=1218 swaps to a horizontal row (heading left, description right).
 */
#sony-lp .full-video-slider__copy {
  margin-top: var(--full-video-slider-copy-gap);
}

#sony-lp .full-video-slider__copy-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--full-video-slider-copy-inner-gap);
  padding-left: var(--full-video-slider-copy-pad-left);
  padding-right: var(--full-video-slider-copy-pad-right);
  box-sizing: border-box;
  width: 100%;
}

#sony-lp .full-video-slider__heading {
  flex-shrink: 0;
  width: var(--full-video-slider-heading-col);
  max-width: 100%;
  margin: 0;
  text-align: left;
  font-style: normal;
  font-weight: var(--full-video-slider-title-weight);
  font-size: var(--full-video-slider-heading-size);
  line-height: var(--full-video-slider-heading-lh);
  font-family: var(--full-video-slider-font);
  letter-spacing: 0;
  color: var(--full-video-slider-color-text);
  opacity: 1;
}

#sony-lp .full-video-slider__desc-col {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: var(--full-video-slider-text-min-h);
  height: var(--full-video-slider-desc-col-h);
  max-width: var(--full-video-slider-text-max-w);
}

#sony-lp .full-video-slider__desc {
  margin: 0;
}

#sony-lp .full-video-slider__desc[hidden] {
  display: none;
}

#sony-lp .full-video-slider__lead {
  margin: 0;
  text-align: left;
  font-style: normal;
  font-weight: var(--full-video-slider-text-weight);
  font-size: var(--full-video-slider-text-size);
  line-height: var(--full-video-slider-text-lh);
  font-family: var(--full-video-slider-font);
  letter-spacing: 0;
  color: var(--full-video-slider-color-text-muted);
}

#sony-lp .full-video-slider__footnotes {
  margin: 30px 0 0;
}

#sony-lp .full-video-slider__fine {
  margin: 0;
  text-align: left;
  font-style: normal;
  font-weight: var(--full-video-slider-text-weight);
  font-size: 13px;
  line-height: 17px;
  font-family: var(--full-video-slider-font);
  letter-spacing: 0;
  color: var(--full-video-slider-color-text-muted);
}

#sony-lp .full-video-slider__fine + .full-video-slider__fine {
  margin-top: 0.35em;
}

#sony-lp .full-video-slider__radios {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--full-video-slider-radios-gap);
  margin-top: var(--full-video-slider-radios-pad-top);
}

#sony-lp .full-video-slider__radio {
  cursor: pointer;
  display: inline-flex;
}

#sony-lp .full-video-slider__radio-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0 0 0 0);
}

#sony-lp .full-video-slider__radio-visual {
  display: block;
  width: var(--full-video-slider-radio-w);
  height: var(--full-video-slider-radio-h);
  border: 0;
  border-radius: var(--full-video-slider-radio-border-radius);
  background: var(--full-video-slider-color-text);
  opacity: var(--full-video-slider-radio-opacity-idle);
  transition: opacity var(--full-video-slider-transition-radio);
}

#sony-lp .full-video-slider__radio-input:checked + .full-video-slider__radio-visual {
  opacity: var(--full-video-slider-radio-opacity-active);
}

#sony-lp .full-video-slider__radio-input:focus-visible + .full-video-slider__radio-visual {
  outline: var(--full-video-slider-focus-outline-width) solid var(--full-video-slider-color-text);
  outline-offset: var(--full-video-slider-focus-outline-offset);
}

/* Mobile band (500–919): center the heading and description. */
@container sony-lp (min-width: 500px) and (max-width: 919px) {
  #sony-lp .full-video-slider__heading,
  #sony-lp .full-video-slider__lead,
  #sony-lp .full-video-slider__fine {
    text-align: center;
  }

  #sony-lp .full-video-slider__desc-col {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Row copy from 1218+; below stays column. */
@container sony-lp (min-width: 1218px) {
  #sony-lp .full-video-slider__copy-row {
    flex-direction: row;
    align-items: flex-start;
  }
}

/* ========== 12-3-collection/styles.css ========== */

/*
 * 12-3-collection — scoped under #sony-lp (see ARCHITECTURE.md).
 * Width breakpoints use @container sony-lp; no viewport @media.
 */

#sony-lp .collection3 {
  --collection3-width: var(--lp-max-width, 100%);
  /* Variant swap: effectively instant; keep collection3.js IMG_FADE_MS in sync (1). */
  --collection3-variant-duration: 1ms;
  --collection3-variant-ease: ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--collection3-width);
  margin: 0 auto;
  padding: var(--collection3-section-pt) 0 var(--collection3-section-pb);
  box-sizing: border-box;
  overflow-x: hidden;
  background-color: #605e62;
  font-family: "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  transition: background-color var(--collection3-variant-duration) var(--collection3-variant-ease);
}

#sony-lp .collection3[data-active-variant="2"] {
  background-color: #dad8d7;
}

#sony-lp .collection3__title {
  margin: 0;
  width: 100%;
  max-width: 100%;
  padding: 0 var(--collection3-title-pad-inline);
  box-sizing: border-box;
  text-align: center;
  font: normal normal bold var(--collection3-title-fs) / var(--collection3-title-lh) "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0;
  color: #ffffff;
  opacity: 1;
  flex-shrink: 0;
  transition: color var(--collection3-variant-duration) var(--collection3-variant-ease);
}

#sony-lp .collection3[data-active-variant="2"] .collection3__title {
  color: #6b6b6b;
}

#sony-lp .collection3__hero {
  margin-top: var(--collection3-hero-mt);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--collection3-gap-img-subtitle);
  width: 100%;
  flex-shrink: 0;
}

#sony-lp .collection3__media {
  position: relative;
  width: min(var(--collection3-img), 100%);
  max-width: var(--collection3-img);
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

#sony-lp .collection3__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--collection3-variant-duration) var(--collection3-variant-ease);
}

#sony-lp .collection3__img--visible {
  opacity: 1;
}

#sony-lp .collection3__subtitle {
  margin: 0;
  width: 100%;
  max-width: 100%;
  padding: 0 var(--collection3-subtitle-pad-inline);
  box-sizing: border-box;
  text-align: center;
  font: normal normal bold var(--collection3-subtitle-fs) / var(--collection3-subtitle-lh) "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0;
  color: #ffffff;
  opacity: 1;
  flex-shrink: 0;
  transition: color var(--collection3-variant-duration) var(--collection3-variant-ease);
}

#sony-lp .collection3[data-active-variant="2"] .collection3__subtitle {
  color: #6b6b6b;
}

#sony-lp .collection3__desc-wrap {
  margin-top: var(--collection3-gap-sub-desc);
  width: min(100%, var(--collection3-desc-max-w));
  max-width: var(--collection3-desc-max-w);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--collection3-pad-inline);
  box-sizing: border-box;
  min-height: var(--collection3-desc-min-h);
  height: var(--collection3-desc-fixed-h);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: var(--collection3-desc-wrap-justify);
}

#sony-lp .collection3__pane {
  box-sizing: border-box;
  overflow: auto;
}

@container sony-lp (max-width: 919px) {
  #sony-lp .collection3__pane {
    height: auto;
    flex: 0 0 auto;
  }
}

@container sony-lp (min-width: 920px) {
  #sony-lp .collection3__desc-wrap {
    justify-content: flex-start;
  }

  #sony-lp .collection3__pane {
    flex: 1 1 auto;
    min-height: 0;
  }
}

#sony-lp .collection3__pane[hidden] {
  display: none;
}

#sony-lp .collection3__desc {
  margin: 0;
  text-align: center;
  font: normal normal normal 18px/23px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0;
  color: #e8e6e7;
  opacity: 1;
  transition: color var(--collection3-variant-duration) var(--collection3-variant-ease);
}

#sony-lp .collection3[data-active-variant="2"] .collection3__desc {
  color: #6b6b6b;
}

#sony-lp .collection3__pane .collection3__desc + .collection3__desc {
  margin-top: 1.15em;
}

#sony-lp .collection3__br--lg {
  display: none;
}

@container sony-lp (min-width: 1376px) {
  #sony-lp .collection3__br--lg {
    display: inline;
  }
}

/* Never break the title between DOUSZNE and WF-1000XM6 — always render inline. */
#sony-lp .collection3__br--sm {
  display: none;
}

#sony-lp .collection3__radios {
  margin-top: var(--collection3-gap-desc-radios);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--collection3-radios-h);
  flex-shrink: 0;
}

#sony-lp .collection3__radio {
  display: inline-flex;
  cursor: pointer;
}

#sony-lp .collection3__radio-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0 0 0 0);
}

#sony-lp .collection3__radio-visual {
  display: block;
  width: 96px;
  height: 12px;
  border-radius: 15px;
  background: #ffffff;
  opacity: 0.2;
  transition: opacity 0.25s ease, background-color var(--collection3-variant-duration) var(--collection3-variant-ease);
}

#sony-lp .collection3[data-active-variant="2"] .collection3__radio-visual {
  background: #000000;
}

#sony-lp .collection3__radio-input:checked + .collection3__radio-visual {
  opacity: 1;
}

#sony-lp .collection3__disclaimer {
  margin-top: var(--collection3-gap-radios-foot);
  width: min(100%, var(--collection3-foot-max-w));
  max-width: var(--collection3-foot-max-w);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--collection3-pad-inline);
  box-sizing: border-box;
  min-height: var(--collection3-foot-min-h);
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: normal normal normal 13px/17px "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0;
  color: #c5c2c4;
  opacity: 1;
  flex-shrink: 0;
  transition: color var(--collection3-variant-duration) var(--collection3-variant-ease);
}

#sony-lp .collection3[data-active-variant="2"] .collection3__disclaimer {
  color: #8a8a8a;
}

/* ========== 13-double-video-section-2/styles.css ========== */

/*
 * 13-double-video-section-2 — scoped under #sony-lp (see ARCHITECTURE.md).
 * Width breakpoints use @container double-video-2 / @container sony-lp;
 * no viewport @media. *,*::before,*::after reset removed — covered by 0-tokens.css.
 */

#sony-lp .double-video-2 {
  position: relative;
  width: 100%;
  max-width: var(--double-video-2-width);
  margin: 0 auto;
  background-color: var(--double-video-2-bg);
}

#sony-lp .double-video-2__inner {
  position: relative;
  width: 100%;
  min-height: var(--double-video-2-section-min-h);
  height: auto;
  margin: 0;
  padding: var(--double-video-2-pad-top) 0 var(--double-video-2-pad-bottom);
  font-family: var(--double-video-2-font);
  display: flex;
  flex-direction: column;
}

#sony-lp .double-video-2__carousel {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  flex-shrink: 0;
}

#sony-lp .double-video-2__viewport {
  width: 100%;
  max-width: 100%;
  height: var(--double-video-2-slide-h);
  margin: 0 auto;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  isolation: isolate;
  contain: paint;
}

#sony-lp .double-video-2__track {
  display: flex;
  flex-direction: row;
  gap: var(--double-video-2-slide-gap);
  /* Mobile (default): full-bleed track. Desktop adds horizontal padding. */
  padding: 0;
  height: 100%;
  width: max-content;
  transform: translate3d(0, 0, 0);
  transition: transform var(--double-video-2-transition-track);
  will-change: transform;
}

#sony-lp .double-video-2__slide {
  flex: 0 0 var(--double-video-2-slide-w);
  width: var(--double-video-2-slide-w);
  max-width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--double-video-2-border-radius);
  background: var(--double-video-2-slide-bg);
  overflow: hidden;
}

#sony-lp .double-video-2__image {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: center center;
}

/*
 * Arrows — mobile (default).
 * Top edge of the arrow box meets the bottom edge of the image (viewport).
 * Coordinates are relative to .double-video-2__inner (positioned ancestor).
 */
#sony-lp .double-video-2__arrow {
  position: absolute;
  top: calc(var(--double-video-2-pad-top) - 1px + var(--double-video-2-slide-h));
  transform: none;
  width: var(--double-video-2-arrow-size);
  height: var(--double-video-2-arrow-size);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

#sony-lp .double-video-2__arrow svg {
  display: block;
  width: var(--double-video-2-arrow-size);
  height: var(--double-video-2-arrow-size);
}

#sony-lp .double-video-2__arrow:focus-visible {
  outline: var(--double-video-2-focus-outline-width) solid var(--double-video-2-color-text);
  outline-offset: var(--double-video-2-focus-outline-offset);
}

#sony-lp .double-video-2__arrow[hidden] {
  display: none;
}

#sony-lp .double-video-2__arrow--prev {
  left: var(--double-video-2-arrow-offset-x-prev, var(--double-video-2-arrow-offset-x));
}

#sony-lp .double-video-2__arrow--next {
  right: var(--double-video-2-arrow-offset-x);
}

#sony-lp .double-video-2__copy {
  box-sizing: border-box;
  margin-top: var(--double-video-2-copy-gap);
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--double-video-2-copy-pad-left);
  padding-right: var(--double-video-2-copy-pad-right);
  flex: 1;
  min-height: 0;
  display: flex;
  /* Mobile (default): heading above text in a single column. */
  flex-direction: column;
  align-items: stretch;
  gap: var(--double-video-2-copy-inner-gap);
}

#sony-lp .double-video-2__copy[hidden] {
  display: none;
}

#sony-lp .double-video-2__title {
  flex: 0 0 var(--double-video-2-title-col);
  width: var(--double-video-2-title-col);
  max-width: 100%;
  margin: 0;
  text-align: left;
  font-style: normal;
  font-weight: var(--double-video-2-title-weight);
  font-size: var(--double-video-2-title-size);
  line-height: var(--double-video-2-title-lh);
  font-family: var(--double-video-2-font);
  letter-spacing: 0;
  color: var(--double-video-2-color-text);
  opacity: 1;
}

#sony-lp .double-video-2__text {
  flex: 1;
  min-width: 0;
  margin: 0;
  text-align: left;
  font-style: normal;
  font-weight: var(--double-video-2-text-weight);
  font-size: var(--double-video-2-text-size);
  line-height: var(--double-video-2-text-lh);
  font-family: var(--double-video-2-font);
  letter-spacing: 0;
  color: var(--double-video-2-color-text-muted);
  opacity: 1;
}

#sony-lp .double-video-2__radios {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--double-video-2-radios-gap);
  flex-shrink: 0;
  padding-top: var(--double-video-2-radios-pad-top);
}

#sony-lp .double-video-2__radio {
  cursor: pointer;
  display: inline-flex;
}

#sony-lp .double-video-2__radio-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0 0 0 0);
}

#sony-lp .double-video-2__radio-visual {
  display: block;
  width: var(--double-video-2-radio-w);
  height: var(--double-video-2-radio-h);
  border: 0;
  border-radius: var(--double-video-2-radio-border-radius);
  background: var(--double-video-2-color-text);
  opacity: var(--double-video-2-radio-opacity-idle);
  transition: opacity var(--double-video-2-transition-radio);
}

#sony-lp .double-video-2__radio-input:checked + .double-video-2__radio-visual {
  opacity: var(--double-video-2-radio-opacity-active);
}

#sony-lp .double-video-2__radio-input:focus-visible + .double-video-2__radio-visual {
  outline: var(--double-video-2-focus-outline-width) solid var(--double-video-2-color-text);
  outline-offset: var(--double-video-2-focus-outline-offset);
}

/* Video player: poster <img> on top, iframe underneath; cross-fade on first frame. */
#sony-lp .double-video-2__player {
  position: relative;
  width: 100%;
  height: 100%;
}

#sony-lp .double-video-2__poster,
#sony-lp .double-video-2__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  will-change: opacity;
}

#sony-lp .double-video-2__poster {
  object-fit: cover;
  opacity: 1;
  transition: opacity 0.6s ease 0.05s;
  z-index: 1;
}

#sony-lp .double-video-2__frame {
  opacity: 0;
  transition: opacity 0.6s ease;
  background: transparent;
  pointer-events: none;
}

#sony-lp .double-video-2__player[data-painted="true"] .double-video-2__frame {
  opacity: 1;
  pointer-events: auto;
}

#sony-lp .double-video-2__player[data-painted="true"] .double-video-2__poster {
  opacity: 0;
}

#sony-lp .double-video-2__surface {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

#sony-lp .double-video-2__controls {
  position: absolute;
  left: 13px;
  bottom: 15px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

#sony-lp .double-video-2__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

#sony-lp .double-video-2__control {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

#sony-lp .double-video-2__control [data-icon] {
  width: 26px;
  height: 26px;
  display: none;
}

#sony-lp .double-video-2__control[data-control="play"] [data-icon="play"] {
  display: block;
}

#sony-lp .double-video-2__toggle[data-toggle="playing"]:checked + .double-video-2__control[data-control="play"] [data-icon="play"] {
  display: none;
}

#sony-lp .double-video-2__toggle[data-toggle="playing"]:checked + .double-video-2__control[data-control="play"] [data-icon="pause"] {
  display: block;
}

#sony-lp .double-video-2__control[data-control="mute"] [data-icon="unmute"] {
  display: block;
}

#sony-lp .double-video-2__toggle[data-toggle="muted"]:checked + .double-video-2__control[data-control="mute"] [data-icon="unmute"] {
  display: none;
}

#sony-lp .double-video-2__toggle[data-toggle="muted"]:checked + .double-video-2__control[data-control="mute"] [data-icon="mute"] {
  display: block;
}

@container double-video-2 (min-width: 920px) {
  #sony-lp .double-video-2__controls {
    left: 40px;
    bottom: 40px;
    gap: 8px;
  }
}

@container double-video-2 (min-width: 1376px) {
  #sony-lp .double-video-2__controls {
    left: 46px;
    bottom: 46px;
    gap: 8px;
  }
}

/* Mobile band (500–919): center the copy text. */
@container double-video-2 (min-width: 500px) and (max-width: 919px) {
  #sony-lp .double-video-2__title,
  #sony-lp .double-video-2__text {
    text-align: center;
  }
}

/* Desktop band (>=920): padded carousel track + arrows vertically centered. */
@container double-video-2 (min-width: 920px) {
  #sony-lp .double-video-2__track {
    padding-left: var(--double-video-2-pad-left);
    padding-right: var(--double-video-2-pad-right);
  }

  #sony-lp .double-video-2__arrow {
    top: calc(var(--double-video-2-pad-top) + var(--double-video-2-slide-h) / 2);
    transform: translateY(-50%);
  }

  #sony-lp .double-video-2__text {
    max-width: var(--double-video-2-text-max-w);
    min-height: var(--double-video-2-text-min-h);
  }
}

/* Row copy only from 1218+ (920–1217 keeps the column stack from the spec). */
@container double-video-2 (min-width: 1218px) {
  #sony-lp .double-video-2__copy {
    flex-direction: row;
    align-items: flex-start;
  }
}

/* ========== 14-full-video-slider-2/styles.css ========== */

/*
 * 14-full-video-slider-2 — scoped under #sony-lp (see ARCHITECTURE.md).
 * Width breakpoints use @container sony-lp; no viewport @media.
 * *,*::before,*::after reset removed — covered by 0-tokens.css.
 */

#sony-lp .full-video-2 {
  position: relative;
  width: 100%;
  max-width: var(--full-video-2-width);
  margin: 0 auto;
  padding: var(--full-video-2-pad-top) 0 var(--full-video-2-pad-bottom);
  background-color: var(--full-video-2-bg);
  font-family: var(--full-video-2-font);
  display: flex;
  flex-direction: column;
}

#sony-lp .full-video-2__media {
  position: relative;
  width: 100%;
}

#sony-lp .full-video-2__carousel {
  width: 100%;
}

#sony-lp .full-video-2__viewport {
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  aspect-ratio: var(--lp-video-aspect-w) / var(--lp-video-aspect-h);
  border-radius: var(--full-video-2-border-radius);
  isolation: isolate;
  contain: paint;
}

#sony-lp .full-video-2__track {
  display: flex;
  gap: 0;
  height: 100%;
  width: calc(var(--full-video-2-slides, 2) * 100%);
  transform: translate3d(0, 0, 0);
  transition: transform var(--full-video-2-transition-track);
  will-change: transform;
}

#sony-lp .full-video-2__slide {
  flex: 0 0 calc(100% / var(--full-video-2-slides, 2));
  height: 100%;
  overflow: hidden;
  background: var(--full-video-2-slide-bg);
}

#sony-lp .full-video-2__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border: 0;
  /* Same as double-video / triple-slider: native <img> drag breaks swipe / drag-to-slide. */
  user-select: none;
  -webkit-user-drag: none;
}

#sony-lp .full-video-2__arrow {
  position: absolute;
  /* Mobile (<920): arrow sits right below the video. */
  top: 100%;
  transform: none;
  width: var(--full-video-2-arrow-size);
  height: var(--full-video-2-arrow-size);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

@container sony-lp (min-width: 920px) {
  #sony-lp .full-video-2__arrow {
    top: 50%;
    transform: translateY(-50%);
  }
}

#sony-lp .full-video-2__arrow svg {
  width: var(--full-video-2-arrow-size);
  height: var(--full-video-2-arrow-size);
  display: block;
}

#sony-lp .full-video-2__arrow:focus-visible {
  outline: var(--full-video-2-focus-outline-width) solid var(--full-video-2-color-text);
  outline-offset: var(--full-video-2-focus-outline-offset);
}

#sony-lp .full-video-2__arrow[hidden] {
  display: none;
}

#sony-lp .full-video-2__arrow--prev {
  left: var(--full-video-2-arrow-offset-x-prev, var(--full-video-2-arrow-offset-x));
}

#sony-lp .full-video-2__arrow--next {
  right: var(--full-video-2-arrow-offset-x);
}

#sony-lp .full-video-2__player {
  position: relative;
  width: 100%;
  height: 100%;
}

#sony-lp .full-video-2__poster,
#sony-lp .full-video-2__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  will-change: opacity;
}

#sony-lp .full-video-2__poster {
  object-fit: cover;
  opacity: 1;
  transition: opacity 0.6s ease 0.05s;
  z-index: 1;
}

#sony-lp .full-video-2__frame {
  opacity: 0;
  transition: opacity 0.6s ease;
  background: transparent;
  pointer-events: none;
}

#sony-lp .full-video-2__player[data-painted="true"] .full-video-2__frame {
  opacity: 1;
  pointer-events: auto;
}

#sony-lp .full-video-2__player[data-painted="true"] .full-video-2__poster {
  opacity: 0;
}

#sony-lp .full-video-2__surface {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

/*
 * Video controls — banded via @container sony-lp (matching the spec already in
 * use across 6-video-section / 8-double-video-slider). Mobile = 13/15/4,
 * >=920 = 40/40/8, >=1376 = 46/46/8.
 */
#sony-lp .full-video-2__controls {
  position: absolute;
  left: 13px;
  bottom: 15px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

#sony-lp .full-video-2__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

#sony-lp .full-video-2__control {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

#sony-lp .full-video-2__control [data-icon] {
  width: 26px;
  height: 26px;
  display: none;
}

#sony-lp .full-video-2__control[data-control="play"] [data-icon="play"] {
  display: block;
}

#sony-lp .full-video-2__toggle[data-toggle="playing"]:checked + .full-video-2__control[data-control="play"] [data-icon="play"] {
  display: none;
}

#sony-lp .full-video-2__toggle[data-toggle="playing"]:checked + .full-video-2__control[data-control="play"] [data-icon="pause"] {
  display: block;
}

#sony-lp .full-video-2__control[data-control="mute"] [data-icon="unmute"] {
  display: block;
}

#sony-lp .full-video-2__toggle[data-toggle="muted"]:checked + .full-video-2__control[data-control="mute"] [data-icon="unmute"] {
  display: none;
}

#sony-lp .full-video-2__toggle[data-toggle="muted"]:checked + .full-video-2__control[data-control="mute"] [data-icon="mute"] {
  display: block;
}

@container sony-lp (min-width: 920px) {
  #sony-lp .full-video-2__controls {
    left: 40px;
    bottom: 40px;
    gap: 8px;
  }
}

@container sony-lp (min-width: 1376px) {
  #sony-lp .full-video-2__controls {
    left: 46px;
    bottom: 46px;
    gap: 8px;
  }
}

/*
 * Copy block.
 * Mobile default: column stack (heading above description, left text).
 * 500–919 centers the text via the rule below.
 * >=1218 swaps to a horizontal row (heading left, description right).
 */
#sony-lp .full-video-2__copy {
  margin-top: var(--full-video-2-copy-gap);
}

#sony-lp .full-video-2__copy-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--full-video-2-copy-inner-gap);
  padding-left: var(--full-video-2-copy-pad-left);
  padding-right: var(--full-video-2-copy-pad-right);
  box-sizing: border-box;
  width: 100%;
}

#sony-lp .full-video-2__heading {
  flex-shrink: 0;
  width: var(--full-video-2-heading-col);
  max-width: 100%;
  margin: 0;
  text-align: left;
  font-style: normal;
  font-weight: var(--full-video-2-title-weight);
  font-size: var(--full-video-2-heading-size);
  line-height: var(--full-video-2-heading-lh);
  font-family: var(--full-video-2-font);
  letter-spacing: 0;
  color: var(--full-video-2-color-text);
  opacity: 1;
}

#sony-lp .full-video-2__desc-col {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: var(--full-video-2-text-min-h);
  height: var(--full-video-2-desc-col-h);
  max-width: var(--full-video-2-text-max-w);
}

#sony-lp .full-video-2__desc {
  margin: 0;
  min-height: var(--full-video-2-desc-min-h, 0);
}

#sony-lp .full-video-2__desc[hidden] {
  display: none;
}

#sony-lp .full-video-2__lead {
  margin: 0;
  text-align: left;
  font-style: normal;
  font-weight: var(--full-video-2-text-weight);
  font-size: var(--full-video-2-text-size);
  line-height: var(--full-video-2-text-lh);
  font-family: var(--full-video-2-font);
  letter-spacing: 0;
  color: var(--full-video-2-color-text-muted);
}

#sony-lp .full-video-2__footnotes {
  margin: 30px 0 0;
}

#sony-lp .full-video-2__fine {
  margin: 0;
  text-align: left;
  font-style: normal;
  font-weight: var(--full-video-2-text-weight);
  font-size: 13px;
  line-height: 17px;
  font-family: var(--full-video-2-font);
  letter-spacing: 0;
  color: var(--full-video-2-color-text-muted);
}

#sony-lp .full-video-2__fine + .full-video-2__fine {
  margin-top: 0.35em;
}

#sony-lp .full-video-2__radios {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--full-video-2-radios-gap);
  margin-top: var(--full-video-2-radios-pad-top);
}

#sony-lp .full-video-2__radio {
  cursor: pointer;
  display: inline-flex;
}

#sony-lp .full-video-2__radio-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0 0 0 0);
}

#sony-lp .full-video-2__radio-visual {
  display: block;
  width: var(--full-video-2-radio-w);
  height: var(--full-video-2-radio-h);
  border: 0;
  border-radius: var(--full-video-2-radio-border-radius);
  background: var(--full-video-2-color-text);
  opacity: var(--full-video-2-radio-opacity-idle);
  transition: opacity var(--full-video-2-transition-radio);
}

#sony-lp .full-video-2__radio-input:checked + .full-video-2__radio-visual {
  opacity: var(--full-video-2-radio-opacity-active);
}

#sony-lp .full-video-2__radio-input:focus-visible + .full-video-2__radio-visual {
  outline: var(--full-video-2-focus-outline-width) solid var(--full-video-2-color-text);
  outline-offset: var(--full-video-2-focus-outline-offset);
}

/* Mobile band (500–919): center the heading and description. */
@container sony-lp (min-width: 500px) and (max-width: 919px) {
  #sony-lp .full-video-2__heading,
  #sony-lp .full-video-2__lead,
  #sony-lp .full-video-2__fine {
    text-align: center;
  }

  #sony-lp .full-video-2__desc-col {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Row copy from 1218+; below stays column. */
@container sony-lp (min-width: 1218px) {
  #sony-lp .full-video-2__copy-row {
    flex-direction: row;
    align-items: flex-start;
  }
}

/* ========== 15-timeline/styles.css ========== */

/*
 * 15-timeline — scoped under #sony-lp (see ARCHITECTURE.md).
 * Mobile mirrors 5-firsttimeline convention. Width breakpoints use @container sony-lp.
 *
 * Two layout modes, switched at 1218px (container inline-size):
 *   · scroll-list (< 1218): all cards fully unfolded, horizontal scroll,
 *     swipe-hint pill is visible, first card peeks from the left edge.
 *   · accordion (≥ 1218): all thumbs collapsed (185px) by default; exactly
 *     one expands to 505px on hover, keyboard focus, or click-to-pin (JS).
 */

#sony-lp .timeline {
  /* ----- Mobile-first defaults (320–919) — scroll-list ----- */
  --timeline-width: var(--lp-max-width, 100%);

  --timeline-swipe-display: flex;
  --timeline-swipe-pad-x: 13px;
  --timeline-swipe-pad-top: 0px;
  --timeline-swipe-pad-bottom: 24px;

  --timeline-track-overflow-x: auto;
  --timeline-track-height: auto;

  --timeline-list-justify: flex-start;
  --timeline-list-gap: 27px;
  /* `list-pad-left` is the scrollable space before the first card.
     `peek-crop` is how many px of that first card stay clipped at first paint.
     timeline.js sets scrollLeft = list-pad-left + peek-crop, so the user can
     swipe left to see the full card (down to scrollLeft = list-pad-left). */
  --timeline-list-pad-left: 50px;
  --timeline-list-pad-right: 13px;
  --timeline-peek-crop: 50px;
  --timeline-edge-inset-start: 0px;
  --timeline-edge-inset-end: 0px;

  --timeline-card-w: 293px;
  --timeline-card-h: 293px;
  --timeline-card-radius: 50px;
  --timeline-fold-width: 293px;
  --timeline-expand: 293px;

  --timeline-text-gap: 18px;
  --timeline-title-align: center;
  --timeline-title-size: 17px;
  --timeline-title-lh: 22px;

  --timeline-section-pad-top: 56px;
  --timeline-section-pad-bottom: 56px;
  --timeline-section-height: auto;

  width: 100%;
  max-width: var(--timeline-width);
  margin: 0 auto;
  background-color: #f5f5f7;
  font-family: "SST", "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding-inline: 0;
  padding-block: var(--timeline-section-pad-top) var(--timeline-section-pad-bottom);
  height: var(--timeline-section-height);
  overflow: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#sony-lp .timeline::-webkit-scrollbar {
  display: none;
}

#sony-lp .timeline__swipe-hint {
  display: var(--timeline-swipe-display);
  justify-content: center;
  padding: var(--timeline-swipe-pad-top) var(--timeline-swipe-pad-x) var(--timeline-swipe-pad-bottom);
}

#sony-lp .timeline__swipe-hint-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  background: #ffffff;
  box-shadow: 0px 0px 50px #00000029;
  border-radius: 50px;
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: 0;
  color: #6d6e71;
}

#sony-lp .timeline__swipe-hint-icon {
  display: block;
  width: 13px;
  height: 16px;
  flex: 0 0 auto;
}

#sony-lp .timeline__track {
  height: var(--timeline-track-height);
  overflow-x: var(--timeline-track-overflow-x);
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#sony-lp .timeline__track::-webkit-scrollbar {
  display: none;
}

#sony-lp .timeline__list {
  list-style: none;
  margin: 0;
  padding-left: var(--timeline-list-pad-left);
  padding-right: var(--timeline-list-pad-right);
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: var(--timeline-list-justify);
  align-items: stretch;
  gap: var(--timeline-list-gap);
  width: max-content;
  height: 100%;
}

#sony-lp .timeline__item {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  scroll-margin-inline: 8px;
}

#sony-lp .timeline__item:focus {
  outline: none;
}

#sony-lp .timeline__item:focus-visible {
  outline: 2px solid #000;
  outline-offset: 4px;
}

#sony-lp .timeline__media {
  width: var(--timeline-fold-width);
  height: var(--timeline-card-h);
  border-radius: var(--timeline-card-radius);
  overflow: hidden;
  flex-shrink: 0;
  z-index: 1;
}

#sony-lp .timeline__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#sony-lp .timeline__text {
  margin: 0;
  padding: 0;
  width: var(--timeline-card-w);
  max-width: var(--timeline-card-w);
  margin-top: var(--timeline-text-gap);
}

#sony-lp .timeline__title,
#sony-lp .timeline__year {
  margin: 0;
  padding: 0;
  text-align: var(--timeline-title-align);
  letter-spacing: 0;
  font-size: var(--timeline-title-size);
  line-height: var(--timeline-title-lh);
}

#sony-lp .timeline__title {
  font-weight: bold;
  color: #000000;
}

#sony-lp .timeline__year {
  font-weight: normal;
  color: #6b6b6b;
}

/* ----- 920+ — scroll-list, 505 cards, swipe-hint visible, left-aligned text ----- */
@container sony-lp (min-width: 920px) {
  #sony-lp .timeline {
    --timeline-swipe-pad-x: 92px;
    --timeline-swipe-pad-bottom: 41px;

    --timeline-list-gap: 27px;
    --timeline-list-pad-left: 40px;
    --timeline-list-pad-right: 40px;
    --timeline-peek-crop: 0px;

    --timeline-card-w: 505px;
    --timeline-card-h: 505px;
    --timeline-fold-width: 505px;
    --timeline-expand: 505px;
    --timeline-title-align: left;

    --timeline-section-pad-top: 40px;
    --timeline-section-pad-bottom: 99px;
  }
}

/* 960–1217 — narrower section padding-bottom, restore 56 top inset */
@container sony-lp (min-width: 960px) and (max-width: 1217px) {
  #sony-lp .timeline {
    --timeline-section-pad-top: 56px;
    --timeline-section-pad-bottom: 83px;
    --timeline-swipe-pad-bottom: 19px;
  }
}

/* ----- 1218+ — accordion: folded thumbs that expand on hover/click ----- */
@container sony-lp (min-width: 1218px) {
  #sony-lp .timeline {
    --timeline-swipe-display: none;
    --timeline-swipe-pad-bottom: 0;
    --timeline-swipe-pad-top: 0;

    --timeline-track-overflow-x: auto;
    --timeline-track-height: 100%;

    /* Mirror 5-firsttimeline: let the list flow with width:max-content from
       the base rule. Centering breaks scroll math once a card expands past
       the container width. */
    --timeline-list-justify: flex-start;
    --timeline-list-gap: 17px;
    --timeline-list-pad-left: 0px;
    --timeline-list-pad-right: 0px;
    --timeline-edge-inset-start: 89px;
    --timeline-edge-inset-end: 136px;

    --timeline-card-w: 185px;
    --timeline-card-h: 505px;
    --timeline-fold-width: 185px;
    --timeline-expand: 505px;
    --timeline-title-align: left;

    --timeline-section-pad-top: 0px;
    --timeline-section-pad-bottom: 84px;
    --timeline-section-height: 710px;
  }

  #sony-lp .timeline__item:first-child {
    padding-left: var(--timeline-edge-inset-start);
  }

  #sony-lp .timeline__item:last-child {
    padding-right: var(--timeline-edge-inset-end);
  }

  /* Alternate caption position: even items get caption above. */
  #sony-lp .timeline__item:nth-child(odd) {
    flex-direction: column;
  }

  #sony-lp .timeline__item:nth-child(even) {
    flex-direction: column-reverse;
  }

  #sony-lp .timeline__media {
    transition: width 0.35s ease, box-shadow 0.35s ease;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }

  /* Expansion is driven entirely by the JS-managed --active class so a click
     on the open card folds it back without :hover / :focus-visible keeping it
     open. JS adds --active on mouseenter / focus and removes it on mouseleave
     / blur when the card is not pinned, and toggles pin on click. */
  #sony-lp .timeline__item--active .timeline__media {
    width: var(--timeline-expand);
    max-width: min(var(--timeline-expand), 100%);
    z-index: 6;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12);
  }

  #sony-lp .timeline__text {
    width: auto;
    max-width: var(--timeline-expand);
    margin-top: 0;
  }

  #sony-lp .timeline__item:nth-child(odd) .timeline__text {
    margin-top: var(--timeline-text-gap);
    margin-bottom: 0;
  }

  #sony-lp .timeline__item:nth-child(even) .timeline__text {
    margin-top: 0;
    margin-bottom: var(--timeline-text-gap);
  }
}

/* ----- 1376+ — wider edge insets ----- */
@container sony-lp (min-width: 1376px) {
  #sony-lp .timeline {
    --timeline-edge-inset-start: 192px;
    --timeline-edge-inset-end: 191px;
    --timeline-section-pad-bottom: 95px;
  }
}

/* ----- 1500+ — widest edge insets ----- */
@container sony-lp (min-width: 1500px) {
  #sony-lp .timeline {
    --timeline-edge-inset-start: 253.5px;
    --timeline-edge-inset-end: 253.5px;
    --timeline-section-pad-bottom: 114px;
  }
}

/* ========== 17-footer/styles.css ========== */

/**
 * 17-footer — scoped under #sony-lp (see ARCHITECTURE.md).
 * Width breakpoints use @container sony-lp, not viewport @media.
 */

#sony-lp {
  --site-footer-bg: #000000;
}

#sony-lp .site-footer {
  --site-footer-width: var(--lp-max-width, 100%);
  /* 320 (default ≤919) — stacked, centered, breathing-room padding. */
  --site-footer-pt: 100px;
  --site-footer-pb: 100px;
  --site-footer-logo-gap: 40px;
  --site-footer-logo-top: 192px;
  --site-footer-left-x: 90px;
  --site-footer-right-x: 90px;

  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--site-footer-width);
  margin: 0 auto;
  background: var(--site-footer-bg);
  padding: var(--site-footer-pt) 16px var(--site-footer-pb);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--site-footer-logo-gap);
}

#sony-lp .site-footer__logo {
  display: block;
}

#sony-lp .site-footer__logo--left {
  width: 186px;
  height: 33px;
}

#sony-lp .site-footer__logo--right {
  width: 280px;
  height: auto;
}

@container sony-lp (min-width: 920px) {
  #sony-lp .site-footer {
    display: block;
    padding: 0 0 var(--site-footer-pb);
    min-height: calc(var(--site-footer-logo-top) + 33px + var(--site-footer-pb));
  }

  #sony-lp .site-footer__logo {
    position: absolute;
    top: var(--site-footer-logo-top);
  }

  #sony-lp .site-footer__logo--left {
    left: var(--site-footer-left-x);
    width: 186px;
    height: 33px;
  }

  #sony-lp .site-footer__logo--right {
    right: var(--site-footer-right-x);
    width: 264px;
    height: 33px;
  }
}

@container sony-lp (min-width: 920px) and (max-width: 959px) {
  #sony-lp .site-footer {
    --site-footer-pb: 148px;
    --site-footer-left-x: 90px;
    --site-footer-right-x: 90px;
  }
}

@container sony-lp (min-width: 960px) and (max-width: 1217px) {
  #sony-lp .site-footer {
    --site-footer-pb: 141px;
    --site-footer-left-x: 90px;
    --site-footer-right-x: 50px;
  }
}

@container sony-lp (min-width: 1218px) and (max-width: 1375px) {
  #sony-lp .site-footer {
    --site-footer-pb: 148px;
    --site-footer-left-x: 90px;
    --site-footer-right-x: 90px;
  }
}

@container sony-lp (min-width: 1376px) and (max-width: 1499px) {
  #sony-lp .site-footer {
    --site-footer-pb: 145px;
    --site-footer-left-x: 90px;
    --site-footer-right-x: 90px;
  }
}

@container sony-lp (min-width: 1500px) {
  #sony-lp .site-footer {
    --site-footer-pb: 145px;
    --site-footer-left-x: 90px;
    --site-footer-right-x: 90px;
  }
}

/* scentre.pl clickable image links */
#sony-lp .banner__panel a {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

#sony-lp .collection__hero-wrap a {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#sony-lp .collection__hero-wrap a:has(.collection__hero-img--visible) {
  pointer-events: auto;
}

#sony-lp .collection2__hero-wrap a {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#sony-lp .collection2__hero-wrap a:has(.collection2__hero-img--visible) {
  pointer-events: auto;
}

#sony-lp .collection3__media a {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#sony-lp .collection3__media a:has(.collection3__img--visible) {
  pointer-events: auto;
}

#sony-lp .productcard a:has(.productcard__img) {
  display: block;
}