:root {
  --v2-paper: #f6f5f1;
  --v2-ink: #111213;
  --v2-night: #121315;
  --v2-night-soft: #1a1c1e;
  --v2-bone: #eceae3;
  --v2-yellow: #ffd60a;
  --v2-muted: rgba(246, 245, 241, 0.64);
  --v2-rule: rgba(246, 245, 241, 0.16);
  --v2-shadow: 0 30px 90px rgba(0, 0, 0, 0.36);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --v2-paper: #f7f6f2;
  --v2-ink: #131313;
  --v2-night: #e9e7df;
  --v2-night-soft: #dedbd1;
  --v2-bone: #171817;
  --v2-muted: rgba(19, 19, 19, 0.68);
  --v2-rule: rgba(19, 19, 19, 0.16);
  --v2-shadow: 0 30px 90px rgba(31, 29, 23, 0.18);
  color-scheme: light;
}

* { box-sizing: border-box; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--v2-paper);
  color: var(--v2-ink);
  font-family: "Space Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, a { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--v2-yellow); outline-offset: 4px; }

.stage {
  min-height: max(720px, 100svh);
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  isolation: isolate;
  color: var(--v2-bone);
  background: var(--v2-night);
}

.stage-media,
.stage-video,
.stage-media-shade {
  position: absolute;
  inset: 0;
}
.stage-media { z-index: 0; overflow: hidden; background: var(--v2-night-soft); cursor: pointer; }
.stage-video { width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: saturate(0.92) contrast(1.03) brightness(0.8); transform: scale(1.018); transition: opacity 1500ms ease, transform 2200ms cubic-bezier(.2,.75,.2,1), filter 620ms ease; }
.stage-video.is-active { opacity: 1; transform: scale(1); }
.stage:not(.is-in-viewport) .stage-analog,
.stage:not(.is-in-viewport) .stage-artifacts,
.stage:not(.is-in-viewport) .stage-halftone,
.stage:not(.is-in-viewport) .stage-bloom,
.stage:not(.is-in-viewport) .stage-liquid,
.stage:not(.is-in-viewport) .stage-prism,
.stage:not(.is-in-viewport) .signal { animation-play-state: paused !important; }
.stage-media-shade {
  z-index: 1;
  background: linear-gradient(90deg, rgba(9, 10, 10, 0.9) 0%, rgba(9, 10, 10, 0.62) 40%, rgba(9, 10, 10, 0.12) 74%, rgba(9, 10, 10, 0.44) 100%), linear-gradient(0deg, rgba(9, 10, 10, 0.7) 0%, transparent 34%, rgba(9, 10, 10, 0.24) 100%);
}
:root[data-theme="light"] .stage-video { filter: saturate(0.68) contrast(1.05) brightness(0.94); }
:root[data-theme="light"] .stage-media-shade { background: linear-gradient(90deg, rgba(233,231,223,.94) 0%, rgba(233,231,223,.72) 43%, rgba(233,231,223,.12) 76%, rgba(233,231,223,.48) 100%), linear-gradient(0deg, rgba(233,231,223,.56) 0%, transparent 42%, rgba(233,231,223,.18) 100%); }

.stage-analog {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: soft-light;
  background:
    repeating-linear-gradient(0deg, rgba(3, 9, 9, .44) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 1px 1px, rgba(244, 255, 230, .72) 1px, transparent 1.2px);
  background-size: 100% 4px, 4px 4px;
  animation: analog-drift 12s steps(8, end) infinite;
}
.stage-analog::before {
  content: "";
  position: absolute;
  inset: -35% -10%;
  background: linear-gradient(106deg, transparent 35%, rgba(210, 255, 241, .28) 48%, transparent 60%);
  filter: blur(17px);
  animation: glass-sweep 9s ease-in-out infinite;
}
@keyframes analog-drift { 50% { background-position: 0 2px, 2px 1px; } }
@keyframes glass-sweep { 50% { transform: translate3d(18%, -4%, 0); opacity: .7; } }

.stage-artifacts,
.stage-halftone,
.stage-bloom {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 420ms ease;
}
.stage-artifacts {
  background:
    repeating-linear-gradient(0deg, transparent 0 11px, rgba(255,236,191,.18) 11px 12px, transparent 12px 29px),
    linear-gradient(90deg, rgba(255,43,98,.12), transparent 22% 76%, rgba(38,236,255,.14));
  mix-blend-mode: screen;
}
.stage-artifacts::before,
.stage-artifacts::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 18px, rgba(255,255,255,.13) 18px 20px, transparent 20px 47px);
  mix-blend-mode: difference;
}
.stage-artifacts::after {
  background: linear-gradient(90deg, transparent 0 31%, rgba(255,55,107,.28) 32% 33%, transparent 34% 68%, rgba(34,236,255,.22) 69% 70%, transparent 71%);
}
.stage-halftone {
  background-image: radial-gradient(circle at 1px 1px, rgba(255,247,210,.74) 1px, transparent 1.25px);
  background-size: 4px 4px;
  mix-blend-mode: soft-light;
}
.stage-bloom {
  inset: -12%;
  background:
    radial-gradient(ellipse 38% 48% at 72% 18%, rgba(255,232,135,.48), transparent 68%),
    radial-gradient(ellipse 34% 42% at 18% 82%, rgba(255,86,166,.28), transparent 72%),
    linear-gradient(115deg, transparent 41%, rgba(190,255,250,.16) 50%, transparent 58%);
  filter: blur(20px) saturate(1.35);
  mix-blend-mode: screen;
}
@keyframes artifact-skip {
  0%, 100% { transform: translate3d(0, 0, 0); }
  17% { transform: translate3d(-1.5%, 1px, 0); }
  18% { transform: translate3d(1%, -1px, 0); }
  58% { transform: translate3d(0, 0, 0); }
  59% { transform: translate3d(.8%, 2px, 0); }
}
@keyframes bloom-breathe { 50% { transform: scale(1.04) translate3d(-1%, 1%, 0); opacity: .8; } }
@keyframes halftone-drift { 50% { background-position: 2px 1px; } }

.stage-liquid,
.stage-prism {
  position: absolute;
  inset: -10%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
}
.stage-liquid {
  background:
    radial-gradient(ellipse 36% 46% at 16% 18%, rgba(236,255,252,.34), transparent 70%),
    radial-gradient(ellipse 34% 42% at 82% 76%, rgba(255,198,111,.22), transparent 72%);
  filter: blur(16px) saturate(1.12);
  mix-blend-mode: screen;
  transform: translate3d(-2%, 1%, 0) scale(1.05);
}
.stage-prism {
  background:
    linear-gradient(118deg, transparent 27%, rgba(255,247,186,.24) 42%, transparent 53%),
    linear-gradient(294deg, transparent 36%, rgba(88,247,235,.2) 49%, transparent 62%);
  filter: blur(9px);
  mix-blend-mode: color-dodge;
  transform: translate3d(-12%, 0, 0) rotate(-3deg);
}
@keyframes liquid-wander {
  50% { transform: translate3d(5%, -3%, 0) scale(1.14) rotate(1deg); }
}
@keyframes prism-drift {
  50% { transform: translate3d(10%, -2%, 0) rotate(3deg); }
}

/* Experience modes intentionally change hierarchy, material and type - not only color. */
.stage-signal-glitch { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: repeating-linear-gradient(0deg, transparent 0 21px, rgba(220,255,248,.28) 21px 23px, transparent 23px 48px), linear-gradient(90deg, rgba(255,54,112,.18), transparent 20% 78%, rgba(41,242,255,.2)); mix-blend-mode: screen; }
.stage.is-experience-changing .stage-signal-glitch { animation: experience-signal-swap 680ms steps(1, end); }
.stage.is-experience-changing [data-experience-copy] { animation: experience-copy-glitch 680ms cubic-bezier(.2,.75,.2,1); }
.stage.is-experience-changing .stage-video.is-active { transform: scale(1.012); filter: blur(.65px) saturate(1.12); }
.stage.is-shader-changing .stage-media { animation: shader-flash 640ms ease; }
@keyframes experience-signal-swap {
  0%, 100% { opacity: 0; transform: translateX(0); }
  16% { opacity: .62; transform: translateX(-1.5%); }
  31% { opacity: .18; transform: translateX(1%); }
  47% { opacity: .5; transform: translateX(0); }
}
@keyframes experience-copy-glitch {
  0%, 100% { opacity: 1; filter: none; text-shadow: 0 0 transparent; transform: translateX(0); }
  13% { opacity: .4; filter: contrast(1.3); text-shadow: 3px 0 #ff5a76, -3px 0 #55f1ff; transform: translateX(-2px); }
  28% { opacity: .92; filter: contrast(1.12); text-shadow: -2px 0 #ff5a76, 2px 0 #55f1ff; transform: translateX(2px); }
  46% { opacity: .68; filter: blur(.45px) contrast(1.2); text-shadow: 0 0 transparent; transform: translateX(0); }
  68% { opacity: 1; filter: none; text-shadow: 1px 0 rgba(255,90,118,.55), -1px 0 rgba(85,241,255,.55); transform: translateX(0); }
}
@keyframes shader-flash { 45% { filter: brightness(1.14) contrast(1.1); } }

:root[data-experience="editorial"] .stage {
  --v2-muted: rgba(244, 232, 212, .69);
  --v2-rule: rgba(244, 232, 212, .2);
  color: #f4e8d4;
  background: #2d211c;
}
:root[data-experience="editorial"] .stage-media { background: #2d211c; }
:root[data-experience="editorial"] .stage-media-shade { background: linear-gradient(96deg, rgba(45,33,28,.94) 0%, rgba(65,43,34,.72) 43%, rgba(105,62,48,.16) 78%), linear-gradient(0deg, rgba(46,29,25,.72), transparent 57%); }
:root[data-experience="editorial"] .stage-video { filter: saturate(.72) contrast(1.06) brightness(.72) sepia(.13); }
:root[data-experience="editorial"] .stage-analog { opacity: .28; mix-blend-mode: soft-light; }
:root[data-experience="editorial"] h1 { max-width: 920px; font-family: "DM Sans", sans-serif; font-size: clamp(4rem, 8.1vw, 8.15rem); font-weight: 900; letter-spacing: -.065em; line-height: .79; }
:root[data-experience="editorial"] h1 em { color: #c8755d; font-family: inherit; font-size: .82em; font-style: normal; font-weight: inherit; }
:root[data-experience="editorial"] .usecase-window { color: #d58a70; }
:root[data-experience="editorial"] .primary-action { border: 1px solid rgba(244,232,212,.42); border-radius: 3px; color: #2d211c; background: #c8755d; box-shadow: 7px 7px 0 rgba(244,232,212,.72); font-family: "DM Sans", sans-serif; font-weight: 900; }
:root[data-experience="editorial"] .primary-action:hover { background: #d98a70; box-shadow: 4px 4px 0 rgba(244,232,212,.72); }

:root[data-experience="japanese"] .stage {
  --v2-muted: rgba(43, 35, 29, .67);
  --v2-rule: rgba(43, 35, 29, .18);
  color: #2b231d;
  background: #eee3ce;
}
:root[data-experience="japanese"] .stage-media { background: #eee3ce; }
:root[data-experience="japanese"] .stage-media-shade { background: linear-gradient(100deg, rgba(244,235,216,.94) 0%, rgba(230,211,184,.68) 48%, rgba(177,78,58,.1) 82%), linear-gradient(0deg, rgba(190,120,91,.2), transparent 60%); }
:root[data-experience="japanese"] .stage-video { filter: saturate(.83) contrast(1.04) brightness(.97) sepia(.1); }
:root[data-experience="japanese"] .stage-analog { opacity: .25; mix-blend-mode: multiply; background: repeating-linear-gradient(135deg, rgba(63,45,34,.2) 0 1px, transparent 1px 7px); }
:root[data-experience="japanese"] h1 { max-width: 860px; font-family: "Archivo Black", sans-serif; font-size: clamp(3.75rem, 7.4vw, 7.5rem); font-weight: 400; letter-spacing: -.04em; line-height: .82; }
:root[data-experience="japanese"] h1 em { color: #b94e3b; font-family: inherit; font-size: .86em; font-style: normal; font-weight: inherit; }
:root[data-experience="japanese"] .usecase-window { color: #b94e3b; }
:root[data-experience="japanese"] .offer-note strong,
:root[data-experience="japanese"] .text-action,
:root[data-experience="japanese"] .channel-button { color: #2b231d; }
:root[data-experience="japanese"] .primary-action { border: 2px solid #2b231d; border-radius: 0; color: #f7edda; background: #b94e3b; box-shadow: 8px 8px 0 #2b231d; font-family: "Archivo Black", sans-serif; font-size: 14px; font-weight: 400; text-transform: uppercase; }
:root[data-experience="japanese"] .primary-action:hover { background: #c9604b; box-shadow: 4px 4px 0 #2b231d; }

:root[data-experience="cinema"] .stage {
  --v2-muted: rgba(255, 239, 220, .68);
  --v2-rule: rgba(255, 239, 220, .19);
  color: #fff0dd;
  background: #4a302c;
}
:root[data-experience="cinema"] .stage-media { background: #4a302c; }
:root[data-experience="cinema"] .stage-media-shade { background: linear-gradient(104deg, rgba(58,37,34,.91) 0%, rgba(91,54,48,.67) 46%, rgba(202,139,116,.12) 82%), linear-gradient(0deg, rgba(53,31,30,.67), transparent 58%); }
:root[data-experience="cinema"] .stage-video { filter: saturate(.75) contrast(.94) brightness(.79) sepia(.14) blur(.25px); transform: scale(1.025); }
:root[data-experience="cinema"] .stage-analog { opacity: .17; mix-blend-mode: screen; }
:root[data-experience="cinema"] .stage-liquid { opacity: .34; background: radial-gradient(ellipse 38% 46% at 18% 20%, rgba(255,226,193,.2), transparent 72%), radial-gradient(ellipse 30% 42% at 82% 72%, rgba(198,117,98,.18), transparent 72%); animation: liquid-wander 15s ease-in-out infinite; }
:root[data-experience="cinema"] h1 { max-width: 880px; font-family: "Manrope", sans-serif; font-size: clamp(4rem, 8vw, 8rem); font-weight: 800; letter-spacing: -.065em; line-height: .8; }
:root[data-experience="cinema"] h1 em { color: #d7967f; font-family: inherit; font-size: .88em; font-style: normal; font-weight: inherit; }
:root[data-experience="cinema"] .usecase-window { color: #e0a58f; }
:root[data-experience="cinema"] .primary-action { border: 1px solid rgba(255,239,220,.38); border-radius: 999px; color: #432b28; background: #e0a58f; box-shadow: 0 16px 38px rgba(27,15,14,.34); font-family: "Manrope", sans-serif; font-weight: 800; }
:root[data-experience="cinema"] .primary-action:hover { background: #edb8a4; }

:root[data-experience="utility"] .stage {
  --v2-muted: rgba(49, 42, 37, .68);
  --v2-rule: rgba(49, 42, 37, .18);
  color: #312a25;
  background: #eee8de;
}
:root[data-experience="utility"] .stage-media { background: #eee8de; }
:root[data-experience="utility"] .stage-media-shade { background: linear-gradient(96deg, rgba(244,239,231,.95) 0%, rgba(229,217,204,.69) 46%, rgba(190,111,91,.09) 82%), linear-gradient(0deg, rgba(192,140,119,.18), transparent 60%); }
:root[data-experience="utility"] .stage-video { filter: saturate(.7) contrast(1.06) brightness(.98) sepia(.08); }
:root[data-experience="utility"] .stage-analog { opacity: .12; mix-blend-mode: multiply; }
:root[data-experience="utility"] h1 { max-width: 860px; font-family: "Inter Tight", sans-serif; font-size: clamp(4rem, 8.2vw, 8.25rem); font-weight: 900; letter-spacing: -.06em; line-height: .79; }
:root[data-experience="utility"] h1 em { color: #b96855; font-family: inherit; font-size: inherit; font-style: normal; font-weight: inherit; }
:root[data-experience="utility"] .usecase-window { color: #b96855; }
:root[data-experience="utility"] .offer-note strong,
:root[data-experience="utility"] .text-action,
:root[data-experience="utility"] .channel-button { color: #312a25; }
:root[data-experience="utility"] .primary-action { border: 2px solid #312a25; border-radius: 4px; color: #fff8ed; background: #b96855; box-shadow: 6px 6px 0 #312a25; font-family: "Inter Tight", sans-serif; font-weight: 900; }
:root[data-experience="utility"] .primary-action:hover { background: #c77a66; box-shadow: 3px 3px 0 #312a25; }

:root[data-experience="midnight"] .stage { color: #fbf4e8; }
:root[data-experience="midnight"] .stage-media-shade { background: linear-gradient(90deg, rgba(4,4,7,.93) 0%, rgba(4,4,7,.74) 47%, rgba(4,4,7,.08) 78%), linear-gradient(0deg, rgba(52,8,9,.72), transparent 55%); }
:root[data-experience="midnight"] .stage-video { filter: saturate(.76) contrast(1.2) brightness(.52) hue-rotate(326deg); }
:root[data-experience="midnight"] .stage-analog { opacity: .16; mix-blend-mode: screen; background: repeating-linear-gradient(0deg, rgba(255,255,255,.15) 0 1px, transparent 1px 5px); }
:root[data-experience="midnight"] h1 { max-width: 790px; font-family: "DM Mono", ui-monospace, monospace; font-size: clamp(3.5rem, 7.2vw, 7.3rem); font-weight: 500; letter-spacing: -.07em; line-height: .86; }
:root[data-experience="midnight"] h1 em { color: #ff624d; font-family: inherit; font-size: inherit; font-style: normal; }
:root[data-experience="midnight"] .primary-action { border-radius: 0; color: #f8efe3; background: #ec4a39; box-shadow: 7px 7px 0 rgba(248,239,227,.84); text-transform: uppercase; letter-spacing: .06em; }
:root[data-experience="midnight"] .primary-action:hover { background: #ff624d; box-shadow: 4px 4px 0 rgba(248,239,227,.84); }

:root[data-experience="tide"] .stage { color: #ecfffd; }
:root[data-experience="tide"] .stage-media-shade { background: linear-gradient(105deg, rgba(2,33,39,.82) 0%, rgba(3,65,72,.44) 46%, rgba(125,241,236,.10) 76%), linear-gradient(0deg, rgba(0,30,36,.48), transparent 50%); }
:root[data-experience="tide"] .stage-video { filter: saturate(1.15) contrast(1.03) brightness(.83) hue-rotate(8deg); }
:root[data-experience="tide"] .stage-analog { opacity: .23; mix-blend-mode: overlay; background: radial-gradient(circle at 20% 10%, rgba(172,255,244,.64) 0 1px, transparent 1.4px); background-size: 5px 5px; }
:root[data-experience="tide"] h1 { max-width: 770px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(4.3rem, 8.8vw, 8.7rem); font-weight: 400; line-height: .82; }
:root[data-experience="tide"] h1 em { font-family: "Space Grotesk", system-ui, sans-serif; font-size: .86em; font-style: normal; font-weight: 700; letter-spacing: -.05em; }
:root[data-experience="tide"] .primary-action { border: 1px solid rgba(224,255,253,.74); border-radius: 999px; color: #effffd; background: rgba(209,255,250,.13); box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 12px 30px rgba(0,28,34,.35); backdrop-filter: blur(16px); }
:root[data-experience="tide"] .primary-action:hover { background: rgba(209,255,250,.24); }

:root[data-experience="poster"] .stage { color: #10100f; }
:root[data-experience="poster"] .stage-media-shade { background: linear-gradient(90deg, rgba(255,216,58,.9) 0%, rgba(255,216,58,.62) 45%, rgba(255,92,62,.1) 78%), linear-gradient(0deg, rgba(255,92,62,.55), transparent 62%); mix-blend-mode: screen; }
:root[data-experience="poster"] .stage-video { filter: saturate(1.38) contrast(1.12) brightness(.77); }
:root[data-experience="poster"] .stage-analog { opacity: .34; mix-blend-mode: multiply; background: repeating-linear-gradient(135deg, rgba(16,16,15,.3) 0 1px, transparent 1px 6px); }
:root[data-experience="poster"] h1 { max-width: 700px; font-size: clamp(3.6rem, 7.7vw, 7.6rem); font-weight: 700; letter-spacing: -.075em; line-height: .76; }
:root[data-experience="poster"] h1 em { color: #e9432e; font-family: inherit; font-size: inherit; font-style: normal; }
:root[data-experience="poster"] .stage-description,
:root[data-experience="poster"] .offer-note,
:root[data-experience="poster"] .stage-metrics { color: rgba(16,16,15,.76); }
:root[data-experience="poster"] .offer-note strong,
:root[data-experience="poster"] .text-action,
:root[data-experience="poster"] .channel-button { color: #10100f; }
:root[data-experience="poster"] .primary-action { border: 2px solid #10100f; border-radius: 0; color: #fff9e8; background: #10100f; box-shadow: 8px 8px 0 #ff5c3e; font-size: 16px; font-weight: 800; }
:root[data-experience="poster"] .primary-action:hover { background: #2e2e2b; box-shadow: 4px 4px 0 #ff5c3e; }

:root[data-experience="dream"] .stage { color: #fff7ee; }
:root[data-experience="dream"] .stage-media-shade { background: linear-gradient(102deg, rgba(22,13,16,.82) 0%, rgba(47,27,31,.52) 48%, rgba(250,181,123,.08) 82%), linear-gradient(0deg, rgba(26,10,17,.58), transparent 58%); }
:root[data-experience="dream"] .stage-video { filter: saturate(.84) contrast(.94) brightness(.87) sepia(.07) blur(.35px); transform: scale(1.032); }
:root[data-experience="dream"] .stage-video.is-active { transform: scale(1.014); }
:root[data-experience="dream"] .stage-analog { opacity: .2; mix-blend-mode: screen; background: radial-gradient(circle at 20% 18%, rgba(255,255,255,.34) 0 .8px, transparent 1.2px); background-size: 4px 4px; }
:root[data-experience="dream"] .stage-liquid { opacity: .72; animation: liquid-wander 13s ease-in-out infinite; }
:root[data-experience="dream"] .stage-prism { opacity: .16; animation: prism-drift 18s ease-in-out infinite; }
:root[data-experience="dream"] h1 { max-width: 760px; font-family: "DM Serif Display", Georgia, serif; font-size: clamp(4.15rem, 8.2vw, 8.3rem); font-weight: 400; line-height: .79; letter-spacing: -.035em; }
:root[data-experience="dream"] h1 em { color: #ffd38f; font-family: "Space Grotesk", system-ui, sans-serif; font-size: .7em; font-style: normal; font-weight: 700; letter-spacing: -.08em; }
:root[data-experience="dream"] .primary-action { border-color: rgba(255,244,232,.45); border-radius: 999px; color: #371c25; background: #ffd38f; box-shadow: 0 12px 38px rgba(0,0,0,.3); }
:root[data-experience="dream"] .primary-action:hover { background: #ffe4b8; }

:root[data-experience="prism"] .stage { color: #fff6e8; }
:root[data-experience="prism"] .stage-media-shade { background: linear-gradient(110deg, rgba(28,12,15,.88) 0%, rgba(67,25,24,.54) 45%, rgba(255,183,102,.1) 77%), linear-gradient(0deg, rgba(28,9,12,.68), transparent 56%); }
:root[data-experience="prism"] .stage-video { filter: saturate(1.28) contrast(1.08) brightness(.73) hue-rotate(338deg); }
:root[data-experience="prism"] .stage-analog { opacity: .1; mix-blend-mode: screen; background: repeating-linear-gradient(90deg, rgba(255,255,255,.24) 0 1px, transparent 1px 7px); }
:root[data-experience="prism"] .stage-liquid { opacity: .86; background: radial-gradient(ellipse 36% 46% at 16% 18%, rgba(255,237,191,.42), transparent 70%), radial-gradient(ellipse 34% 42% at 82% 76%, rgba(255,113,92,.32), transparent 72%); animation: liquid-wander 9s ease-in-out infinite; }
:root[data-experience="prism"] .stage-prism { opacity: .82; background: linear-gradient(118deg, transparent 27%, rgba(255,232,170,.34) 42%, transparent 53%), linear-gradient(294deg, transparent 36%, rgba(255,116,91,.26) 49%, transparent 62%); animation: prism-drift 7s ease-in-out infinite; }
:root[data-experience="prism"] h1 { max-width: 690px; font-family: "Space Grotesk", system-ui, sans-serif; font-size: clamp(4rem, 8vw, 8rem); font-weight: 700; line-height: .76; letter-spacing: -.075em; }
:root[data-experience="prism"] h1 em { color: #ffbf7e; font-family: inherit; font-style: normal; }
:root[data-experience="prism"] .primary-action { border: 1px solid rgba(255,233,205,.68); border-radius: 5px; color: #251014; background: #ffbf7e; box-shadow: 6px 6px 0 #ff715c, inset 0 1px 0 rgba(255,255,255,.75); }
:root[data-experience="prism"] .primary-action:hover { background: #ffd7a8; box-shadow: 3px 3px 0 #ff715c, inset 0 1px 0 rgba(255,255,255,.75); }

:root[data-experience="scan"] .stage { color: #f6ffdb; }
:root[data-experience="scan"] .stage-media-shade { background: linear-gradient(93deg, rgba(1,13,17,.92) 0%, rgba(3,31,33,.63) 44%, rgba(11,244,201,.04) 78%), linear-gradient(0deg, rgba(1,17,13,.68), transparent 57%); }
:root[data-experience="scan"] .stage-video { filter: saturate(1.16) contrast(1.24) brightness(.64) hue-rotate(14deg); }
:root[data-experience="scan"] .stage-analog { opacity: .48; mix-blend-mode: screen; background: repeating-linear-gradient(0deg, rgba(164,255,224,.25) 0 1px, transparent 1px 4px); animation-duration: 6s; }
:root[data-experience="scan"] .stage-liquid { opacity: .2; animation: liquid-wander 8s ease-in-out infinite; }
:root[data-experience="scan"] .stage-prism { opacity: .52; animation: prism-drift 5s steps(4, end) infinite; }
:root[data-experience="scan"] h1 { max-width: 650px; font-family: "Bebas Neue", Impact, sans-serif; font-size: clamp(5.5rem, 12vw, 11rem); font-weight: 400; line-height: .67; letter-spacing: .01em; text-shadow: 4px 0 #12eac3, -4px 0 rgba(255,94,69,.72); }
:root[data-experience="scan"] h1 em { color: #ffe65c; font-family: inherit; font-size: inherit; font-style: normal; }
:root[data-experience="scan"] .eyebrow { color: #83ffdf; }
:root[data-experience="scan"] .primary-action { border: 2px solid #b5ffe8; border-radius: 0; color: #00150e; background: #b5ffe8; box-shadow: 8px 8px 0 #f15f45; font-family: "DM Mono", ui-monospace, monospace; letter-spacing: .05em; text-transform: uppercase; }
:root[data-experience="scan"] .primary-action:hover { background: #e0fff4; box-shadow: 4px 4px 0 #f15f45; }

:root[data-experience="daybreak"] .stage {
  --v2-muted: rgba(55, 43, 35, .7);
  --v2-rule: rgba(55, 43, 35, .18);
  color: #372b23;
  background: #e9dec8;
}
:root[data-experience="daybreak"] .stage-media-shade { background: linear-gradient(102deg, rgba(248,239,217,.88) 0%, rgba(232,207,164,.58) 48%, rgba(207,165,134,.1) 82%), linear-gradient(0deg, rgba(221,178,137,.24), transparent 62%); }
:root[data-experience="daybreak"] .stage-media { background: #e9dec8; }
:root[data-experience="daybreak"] .stage-video { filter: saturate(.93) contrast(.98) brightness(1.02) sepia(.06); }
:root[data-experience="daybreak"] .stage-analog { opacity: .2; mix-blend-mode: multiply; }
:root[data-experience="daybreak"] h1 { max-width: 780px; font-family: "Space Grotesk", system-ui, sans-serif; font-size: clamp(4rem, 8.5vw, 8.5rem); font-weight: 700; letter-spacing: -.07em; line-height: .77; }
:root[data-experience="daybreak"] h1 em { color: #b96048; font-family: inherit; font-size: inherit; font-style: normal; }
:root[data-experience="daybreak"] .offer-note strong,
:root[data-experience="daybreak"] .text-action,
:root[data-experience="daybreak"] .channel-button { color: #372b23; }
:root[data-experience="daybreak"] .primary-action { border: 1px solid #372b23; border-radius: 5px; color: #fff8ee; background: #b96048; box-shadow: 7px 7px 0 #49362b; font-size: 16px; font-weight: 800; }
:root[data-experience="daybreak"] .primary-action:hover { background: #c8735c; box-shadow: 4px 4px 0 #49362b; }

:root[data-experience="gallery"] .stage {
  --v2-muted: rgba(61, 43, 37, .68);
  --v2-rule: rgba(61, 43, 37, .18);
  color: #3d2b25;
  background: #e8d9cb;
}
:root[data-experience="gallery"] .stage-media-shade { background: linear-gradient(106deg, rgba(245,235,222,.91) 0%, rgba(227,205,187,.66) 46%, rgba(199,151,126,.12) 82%), linear-gradient(0deg, rgba(220,181,157,.24), transparent 58%); }
:root[data-experience="gallery"] .stage-media { background: #e8d9cb; }
:root[data-experience="gallery"] .stage-video { filter: saturate(.82) contrast(.98) brightness(1.02) sepia(.1); }
:root[data-experience="gallery"] .stage-analog { opacity: .14; mix-blend-mode: multiply; }
:root[data-experience="gallery"] .stage-liquid { opacity: .32; background: radial-gradient(ellipse 36% 46% at 16% 18%, rgba(255,238,213,.42), transparent 70%), radial-gradient(ellipse 34% 42% at 82% 76%, rgba(181,103,82,.22), transparent 72%); mix-blend-mode: screen; animation: liquid-wander 13s ease-in-out infinite; }
:root[data-experience="gallery"] h1 { max-width: 805px; font-family: "DM Serif Display", Georgia, serif; font-size: clamp(4.45rem, 8.7vw, 8.8rem); font-weight: 400; letter-spacing: -.045em; line-height: .78; }
:root[data-experience="gallery"] h1 em { color: #a86650; font-family: "Space Grotesk", system-ui, sans-serif; font-size: .68em; font-style: normal; font-weight: 700; letter-spacing: -.075em; }
:root[data-experience="gallery"] .offer-note strong,
:root[data-experience="gallery"] .text-action,
:root[data-experience="gallery"] .channel-button { color: #3d2b25; }
:root[data-experience="gallery"] .primary-action { border: 1px solid #3d2b25; border-radius: 999px; color: #fff8ee; background: #a86650; box-shadow: 0 13px 28px rgba(118,72,55,.18); }
:root[data-experience="gallery"] .primary-action:hover { background: #b97963; }

:root[data-experience="solar"] .stage {
  --v2-muted: rgba(37, 20, 34, .7);
  --v2-rule: rgba(37, 20, 34, .18);
  color: #251422;
  background: #dfb99a;
}
:root[data-experience="solar"] .stage-media-shade { background: linear-gradient(96deg, rgba(244,225,204,.9) 0%, rgba(218,178,145,.58) 49%, rgba(190,119,102,.12) 84%), linear-gradient(0deg, rgba(202,139,111,.24), transparent 58%); }
:root[data-experience="solar"] .stage-media { background: #dfb99a; }
:root[data-experience="solar"] .stage-video { filter: saturate(.96) contrast(1.02) brightness(1.02) sepia(.08); }
:root[data-experience="solar"] .stage-analog { opacity: .16; mix-blend-mode: multiply; }
:root[data-experience="solar"] .stage-prism { opacity: .24; background: linear-gradient(118deg, transparent 27%, rgba(255,230,197,.28) 42%, transparent 53%), linear-gradient(294deg, transparent 36%, rgba(175,84,69,.18) 49%, transparent 62%); mix-blend-mode: screen; animation: prism-drift 8s ease-in-out infinite; }
:root[data-experience="solar"] h1 { max-width: 760px; font-family: "Bebas Neue", Impact, sans-serif; font-size: clamp(5.2rem, 10vw, 10.2rem); font-weight: 400; letter-spacing: .01em; line-height: .69; }
:root[data-experience="solar"] h1 em { color: #ad5547; font-family: inherit; font-size: inherit; font-style: normal; }
:root[data-experience="solar"] .offer-note strong,
:root[data-experience="solar"] .text-action,
:root[data-experience="solar"] .channel-button { color: #251422; }
:root[data-experience="solar"] .primary-action { border: 2px solid #251422; border-radius: 0; color: #fff2e1; background: #382923; box-shadow: 8px 8px 0 #ad5547; font-weight: 800; }
:root[data-experience="solar"] .primary-action:hover { background: #503a32; box-shadow: 4px 4px 0 #ad5547; }

:root[data-experience="poster"] .usecase-window { color: #e9432e; }
:root[data-experience="daybreak"] .usecase-window { color: #b96048; }
:root[data-experience="gallery"] .usecase-window { color: #a86650; }
:root[data-experience="solar"] .usecase-window { color: #ad5547; }

/* Shader modes stay independent from Experience: they only change the media surface. */
:root[data-shader="analog"] .stage-analog {
  opacity: .48;
  mix-blend-mode: soft-light;
}
:root[data-shader="analog"] .stage-video.is-active { filter: contrast(1.07) saturate(.96) brightness(.82); }

:root[data-shader="artifacts"] .stage-artifacts {
  opacity: .62;
  animation: artifact-skip 4.2s steps(1, end) infinite;
}
:root[data-shader="artifacts"] .stage-analog { opacity: .14; mix-blend-mode: screen; }
:root[data-shader="artifacts"] .stage-video.is-active { filter: contrast(1.14) saturate(1.2) brightness(.8); }

:root[data-shader="halftone"] .stage-halftone {
  opacity: .72;
  animation: halftone-drift 8s steps(4, end) infinite;
}
:root[data-shader="halftone"] .stage-analog { opacity: .22; mix-blend-mode: multiply; }
:root[data-shader="halftone"] .stage-video.is-active { filter: contrast(1.16) saturate(.9) brightness(.79); }

:root[data-shader="bloom"] .stage-bloom {
  opacity: .76;
  animation: bloom-breathe 10s ease-in-out infinite;
}
:root[data-shader="bloom"] .stage-analog { opacity: .12; mix-blend-mode: screen; }
:root[data-shader="bloom"] .stage-video.is-active { filter: contrast(1.04) saturate(1.16) brightness(.88); }

:root[data-shader="glitch"] .stage-artifacts {
  opacity: .82;
  animation: artifact-skip 1.6s steps(1, end) infinite;
  mix-blend-mode: color-dodge;
}
:root[data-shader="glitch"] .stage-artifacts::before { animation: artifact-skip .75s steps(1, end) infinite reverse; }
:root[data-shader="glitch"] .stage-halftone { opacity: .24; mix-blend-mode: screen; }
:root[data-shader="glitch"] .stage-analog { opacity: .52; mix-blend-mode: screen; animation-duration: 3s; }
:root[data-shader="glitch"] .stage-video.is-active { filter: contrast(1.22) saturate(1.36) brightness(.72) hue-rotate(8deg); }

:root[data-shader="clean"] .stage-analog,
:root[data-shader="clean"] .stage-artifacts,
:root[data-shader="clean"] .stage-halftone,
:root[data-shader="clean"] .stage-bloom { opacity: 0; }

.v2-header,
.stage-content,
.stage-footer,
.preview,
.closing { width: min(1400px, calc(100% - 56px)); margin-inline: auto; }
.stage > .v2-header,
.stage > .stage-content,
.stage > .stage-footer { position: relative; z-index: 3; }
.v2-header { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.v2-brand { display: inline-flex; align-items: center; gap: 8px; }
.v2-brand img { height: auto; display: block; object-fit: contain; }
.v2-brand .v2-brand-mark { width: 28px; flex: 0 0 28px; }
.v2-brand .v2-brand-wordmark { width: clamp(136px, 11vw, 152px); }
.v2-nav { display: flex; align-items: center; gap: 26px; font-family: "DM Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .06em; }
.v2-nav a { opacity: .74; transition: opacity 180ms ease; }
.v2-nav a:hover { opacity: 1; }
.v2-nav .new-pack-pill {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid rgba(255,214,10,.76);
  border-radius: 999px;
  background: rgba(17,18,19,.3);
  box-shadow: 0 0 0 1px rgba(255,214,10,.08) inset, 0 8px 24px rgba(0,0,0,.12);
  opacity: 1;
  backdrop-filter: blur(12px);
}
.v2-nav .new-pack-pill i { color: var(--v2-yellow); font-size: 11px; }
.v2-nav .new-pack-pill:hover { color: #111; background: var(--v2-yellow); }
.v2-nav .new-pack-pill:hover i { color: #111; }
.experience-button,
.shader-button { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 9px; border: 1px solid var(--v2-rule); border-radius: 4px; color: inherit; background: rgba(255,255,255,.07); font-family: "DM Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .04em; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease; }
.experience-button:hover,
.shader-button:hover { transform: translateY(-1px); background: rgba(255,255,255,.18); border-color: rgba(255,214,10,.7); }
.experience-button b,
.shader-button b { color: var(--v2-yellow); font-size: 9px; font-weight: 500; }
.theme-button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--v2-rule); border-radius: 50%; color: inherit; background: rgba(255,255,255,.06); transition: background 180ms ease, transform 180ms ease; }
.theme-button:hover { background: rgba(255,255,255,.16); transform: rotate(12deg); }

.stage-content { align-self: center; display: grid; grid-template-rows: clamp(420px, 52vh, 520px) auto auto; align-content: center; padding-block: 72px 48px; max-width: min(1400px, calc(100% - 56px)); }
.stage-content { pointer-events: none; }
.stage-content > * { max-width: 710px; }
.stage-content > * { pointer-events: auto; }
.stage-copy { height: clamp(420px, 52vh, 520px); overflow: hidden; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; font-family: "DM Mono", ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: .11em; line-height: 1.3; }
.signal { width: 7px; height: 7px; border-radius: 50%; background: var(--v2-yellow); box-shadow: 0 0 0 5px rgba(255,214,10,.17); animation: signal-pulse 2s ease-in-out infinite; }
@keyframes signal-pulse { 50% { box-shadow: 0 0 0 8px rgba(255,214,10,0); } }

h1, h2 { margin: 0; letter-spacing: 0; font-weight: 600; line-height: .92; }
h1 { font-size: clamp(3.7rem, 8.4vw, 8.35rem); max-width: 850px; }
h1 em { font-family: Georgia, "Times New Roman", serif; font-size: 1.06em; font-weight: 400; }
.usecase-rotator { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 0; color: inherit; font-family: "DM Mono", ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: .08em; line-height: 1.4; }
.usecase-prefix { white-space: nowrap; opacity: .76; }
.usecase-window { position: relative; display: inline-block; width: 19ch; height: 1.4em; overflow: hidden; vertical-align: bottom; color: var(--v2-yellow); }
.usecase-copy { position: absolute; inset: 0 auto auto 0; white-space: nowrap; color: inherit; }
.usecase-copy.is-active { transform: translateY(0); opacity: 1; }
.usecase-copy.is-leaving { animation: usecase-out 470ms cubic-bezier(.4,0,.2,1) forwards; }
.usecase-copy.is-entering { animation: usecase-in 470ms cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes usecase-out {
  0% { opacity: 1; transform: translateY(0); text-shadow: 0 0 transparent; }
  16% { text-shadow: 2px 0 #ff5f74, -2px 0 #62f3ff; }
  54%, 100% { opacity: 0; transform: translateY(-115%); text-shadow: 0 0 transparent; }
}
@keyframes usecase-in {
  0%, 54% { opacity: 0; transform: translateY(115%); text-shadow: 0 0 transparent; }
  69% { opacity: 1; transform: translateY(36%); text-shadow: 2px 0 #ff5f74, -2px 0 #62f3ff; }
  100% { opacity: 1; transform: translateY(0); text-shadow: 0 0 transparent; }
}
.stage-description { margin: 30px 0 0; color: inherit; max-width: 470px; font-size: clamp(1rem, 1.5vw, 1.24rem); line-height: 1.45; opacity: .82; text-shadow: 0 2px 20px rgba(0,0,0,.24); }
.stage-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; margin-top: 0; }
.primary-action { min-height: 92px; display: grid; grid-template-columns: minmax(0, 1fr) auto 38px; align-items: center; gap: 20px; padding: 12px 14px 12px 25px; border: 1px solid rgba(13,13,13,.34); border-radius: 8px; color: #111; background: var(--v2-yellow); box-shadow: 0 11px 27px rgba(0,0,0,.25); font-size: 15px; font-weight: 700; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; }
.stage .primary-action { width: min(520px, 100%); }
.primary-action-copy { display: grid; gap: 5px; min-width: 0; text-align: left; line-height: 1.08; }
.primary-action-kicker { font-family: "DM Mono", ui-monospace, monospace; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .67; }
.primary-action-copy > strong { font-size: 18px; font-weight: 900; letter-spacing: -.025em; white-space: nowrap; }
.primary-action-price { display: grid; justify-items: end; min-width: 82px; line-height: .86; }
.primary-action-price strong { font-size: 29px; font-weight: 950; letter-spacing: -.055em; }
.primary-action-price small { margin-top: 7px; font-family: "DM Mono", ui-monospace, monospace; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.primary-action-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(17,17,17,.24); border-radius: 50%; }
.primary-action:hover { background: #ffe14d; transform: translateY(-2px); box-shadow: 0 15px 27px rgba(0,0,0,.28); }
.primary-action:active { transform: translateY(0); }
.offer-note { display: inline-flex; gap: 7px; width: fit-content; margin: 9px 0 0; padding: 0; border: 0; color: #fff7eb !important; background: transparent; font-size: 12px; font-weight: 650; line-height: 1.3; opacity: .88; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.offer-note strong { color: inherit; }

.stage-footer { position: relative; min-height: 86px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; border-top: 1px solid var(--v2-rule); }
.stage-metrics { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 32px); color: inherit; font-family: "DM Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .06em; white-space: nowrap; opacity: .76; }
.stage-metrics span + span::before { content: "+"; margin-right: clamp(12px, 2.4vw, 32px); color: var(--v2-yellow); }
.stage-scroll-cue { min-width: 156px; min-height: 52px; display: grid; place-items: center; align-content: center; gap: 4px; padding: 5px 12px; border: 0; color: inherit; background: transparent; font-family: "DM Mono", ui-monospace, monospace; font-size: 10px; font-weight: 500; letter-spacing: .07em; line-height: 1.2; text-align: center; opacity: .62; animation: stage-cue-drift 2.6s ease-in-out 3; transition: opacity 180ms ease; }
.stage-scroll-cue i { font-size: 9px; }
.stage-scroll-cue:hover, .stage-scroll-cue:focus-visible { color: inherit; opacity: 1; animation-play-state: paused; }
@keyframes stage-cue-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
.channel-button { justify-self: end; display: inline-flex; align-items: center; gap: 9px; padding: 9px 0; border: 0; color: inherit; background: transparent; font-family: "DM Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .07em; opacity: .75; transition: opacity 180ms ease; }
.channel-button:hover { opacity: 1; }
.channel-glyph { position: relative; display: grid; grid-template-columns: repeat(3, 4px); gap: 2px; align-items: center; justify-content: center; width: 24px; height: 19px; border: 1px solid currentColor; border-radius: 3px; }
.channel-glyph i { position: absolute; top: -7px; left: 8px; width: 6px; height: 7px; border-left: 1px solid currentColor; transform: skew(-22deg); }
.channel-glyph b { display: block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

.preview { padding-block: clamp(88px, 11vw, 150px); }
.preview-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 30px; align-items: end; padding-bottom: 40px; }
.preview-heading .eyebrow { grid-column: 1 / -1; color: rgba(17,18,19,.55); }
.preview h2, .closing h2 { font-size: clamp(2.75rem, 6vw, 6.4rem); color: var(--v2-ink); }
.catalog-link { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--v2-ink); color: var(--v2-ink); font-family: "DM Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .05em; transition: gap 180ms ease; }
.catalog-link:hover { gap: 15px; }
.loop-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.loop-tile { position: relative; display: block; min-height: 430px; overflow: hidden; border: 1px solid rgba(17,18,19,.12); background: radial-gradient(circle at 72% 18%, #517c72, #223b38 56%, #172624); color: var(--v2-bone); box-shadow: var(--v2-shadow); transform: translateY(0); transition: transform 400ms cubic-bezier(.2,.75,.2,1), box-shadow 400ms ease; }
.loop-tile:hover { transform: translateY(-9px); box-shadow: 0 38px 70px rgba(0,0,0,.25); }
.loop-tile video { width: 100%; height: 100%; min-height: 430px; object-fit: cover; vertical-align: bottom; opacity: 0; filter: saturate(.85); transition: opacity 280ms ease, transform 900ms cubic-bezier(.2,.75,.2,1), filter 350ms ease; }
.loop-tile video.is-media-ready { opacity: 1; }
.loop-tile:hover video { transform: scale(1.045); filter: saturate(1); }
.loop-label { position: absolute; inset: auto 0 0; display: flex; align-items: end; justify-content: space-between; gap: 15px; padding: 28px 18px 17px; background: linear-gradient(transparent, rgba(8,9,9,.86)); font-family: "DM Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .06em; }
.loop-label span { max-width: 74%; }
.loop-label i { color: var(--v2-yellow); }
.loading-copy { grid-column: 1 / -1; margin: 0; color: rgba(17,18,19,.5); font-family: "DM Mono", ui-monospace, monospace; font-size: 12px; }
.pack-gift-tile {
  position: relative;
  min-height: 430px;
  display: block;
  overflow: hidden;
  padding: 0;
  border: 2px solid var(--v2-yellow);
  border-radius: 6px;
  color: var(--v2-ink);
  background: #111;
  box-shadow: var(--v2-shadow);
  text-align: left;
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.pack-gift-peek {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  background: #111;
}
.pack-gift-peek video { width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: saturate(.82); transition: opacity 260ms ease; }
.pack-gift-peek video.is-media-ready { opacity: 1; }
.pack-gift-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,18,19,.04), rgba(17,18,19,.3) 42%, rgba(17,18,19,.96)); }
.pack-gift-content { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-start; flex-direction: column; justify-content: flex-end; padding: 28px; color: #fff; }
.pack-gift-tile:hover {
  transform: translateY(-9px);
  box-shadow: 0 38px 70px rgba(0,0,0,.2);
}
.pack-gift-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  margin-bottom: auto;
  border-radius: 50%;
  color: #111;
  background: var(--v2-yellow);
  font-size: 25px;
}
.pack-gift-tile strong {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: clamp(2.1rem, 3.8vw, 4rem);
  font-weight: 900;
  line-height: .92;
  letter-spacing: 0;
}
.pack-gift-content > span:last-child {
  margin-top: 24px;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
}
.pack-gift-content > span:last-child i { margin-left: 8px; }

.closing { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(74px, 10vw, 140px) 0; border-top: 1px solid rgba(17,18,19,.16); }
.closing .eyebrow { color: rgba(17,18,19,.55); }
.closing h2 { margin-bottom: 36px; }

.pack-purchase {
  display: flex;
  align-items: center;
  gap: 18px;
}
.pack-purchase > span {
  color: rgba(17,18,19,.58);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 11px;
  white-space: nowrap;
}
.pack-purchase strong {
  color: var(--v2-ink);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 24px;
  font-weight: 900;
}
.pack-action {
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--v2-ink);
  border-radius: 5px;
  color: var(--v2-paper);
  background: var(--v2-ink);
  font-weight: 800;
}
.pack-action i { margin-left: 10px; }

.pack-library {
  width: min(100% - 48px, 1400px);
  margin-inline: auto;
  padding: clamp(78px, 9vw, 128px) 0;
  border-top: 1px solid rgba(17,18,19,.16);
}
.pack-library-heading {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(260px,420px);
  align-items: end;
  gap: 40px;
  margin-bottom: 42px;
}
.pack-library-heading .eyebrow { color: inherit; opacity: .58; }
.pack-library-heading h2 { margin: 13px 0 0; font-size: clamp(3rem,6.5vw,6.8rem); font-weight: 900; line-height: .87; letter-spacing: 0; }
.pack-library-heading > p { margin: 0; color: inherit; line-height: 1.55; opacity: .64; }
.pack-heading-mobile { display: none; }
.pack-library-mobile-guide { display: none; }
.pack-library-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(18px,2.2vw,30px); }
.focused-pack { position:relative; min-width: 0; border-top: 1px solid rgba(17,18,19,.2); }
.focused-pack-preview { position: relative; display: block; width: 100%; aspect-ratio: 16/10; margin-top: 14px; padding: 0; overflow: hidden; border: 0; border-radius: 5px; background: #111; box-shadow: 0 22px 45px rgba(17,18,19,.14); }
.focused-pack-mosaic { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6,1fr); gap: 3px; padding: 10px; background: radial-gradient(circle at 78% 15%, #5b8075, #1b2c29 58%, #111); }
.focused-pack-mosaic video { width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: saturate(.82) contrast(.96); transition: opacity 280ms ease, transform .7s cubic-bezier(.2,.75,.2,1),filter .3s ease; }
.focused-pack-mosaic video.is-media-ready { opacity: 1; }
.focused-pack-preview:hover video { transform: scale(1.04); filter: saturate(1); }
.focused-pack-preview::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 48%,rgba(8,9,9,.46)); pointer-events:none; }
.focused-pack-gift { position:absolute; z-index:1; left:18px; bottom:17px; display:grid; place-items:center; width:44px; height:44px; border:1px solid rgba(255,255,255,.68); border-radius:50%; color:#111; background:var(--v2-yellow); }
.focused-pack-price-badge { display: none; }
.focused-pack-count { position:absolute; z-index:1; right:16px; bottom:17px; color:#fff; font:700 9px "DM Mono",monospace; letter-spacing:.08em; }
.focused-pack-quick-buy { position:absolute; z-index:2; left:72px; margin-top:-65px; min-height:38px; display:inline-flex; align-items:center; gap:7px; padding:0 12px; border:1px solid rgba(255,255,255,.72); border-radius:4px; color:#fff; background:rgba(17,18,19,.78); backdrop-filter:blur(10px); font-size:10px; font-weight:800; transition:background 180ms ease,transform 180ms ease; }
.focused-pack-quick-buy:hover { color:#111; background:#fff; transform:translateY(-1px); }
.focused-pack-copy { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:20px 2px 7px; }
.focused-pack-copy span { color:rgba(17,18,19,.46); font:700 9px "DM Mono",monospace; letter-spacing:.08em; }
.focused-pack-copy h3 { margin:6px 0 7px; font-size:clamp(1.5rem,2.5vw,2.55rem); font-weight:900; letter-spacing:0; }
.focused-pack-copy p { max-width:390px; margin:0; color:rgba(17,18,19,.55); font-size:13px; line-height:1.45; }
.focused-pack-actions { display:flex; align-items:center; flex-direction:column; gap:7px; flex:0 0 auto; }
.focused-pack-actions button,.focused-pack-actions a { min-width:112px; min-height:38px; display:inline-flex; align-items:center; justify-content:center; padding:0 12px; border:1px solid #111; border-radius:4px; color:#111; background:#fff; font-size:10px; font-weight:800; }
.focused-pack-actions a { color:#fff; background:#111; }

.catalog-section {
  width: min(100% - 48px, 1400px);
  margin-inline: auto;
  padding-block: clamp(80px, 10vw, 140px);
  border-top: 1px solid rgba(17,18,19,.16);
}
.catalog-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 48px;
}
.catalog-heading h2 {
  margin: 0;
  color: #111213;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: clamp(3rem, 7vw, 7rem);
  font-weight: 900;
  line-height: .88;
  letter-spacing: 0;
}
.catalog-heading h2 span { display: block; }
.catalog-heading h2 b {
  color: inherit;
  font: inherit;
}
.catalog-heading h2 .catalog-price-line {
  margin-top: .12em;
  color: var(--v2-coral);
  font-size: .58em;
  line-height: .96;
}
.catalog-heading h2 { grid-column: 1; grid-row: 1; }
.catalog-value-note { grid-column: 1; grid-row: 2; margin: 14px 0 0; color: rgba(17,18,19,.58); font-size: 14px; line-height: 1.45; }
.catalog-value-note strong { color: var(--v2-coral); font-weight: 900; }
.catalog-heading-cta {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 64px;
  padding: 0 22px;
  border: 1px solid var(--v2-ink);
  border-radius: 4px;
  color: var(--v2-paper);
  background: var(--v2-ink);
  box-shadow: 8px 8px 0 var(--v2-coral);
  font-size: 12px;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.catalog-heading-cta:hover {
  color: var(--v2-paper);
  background: #292b2c;
  box-shadow: 5px 5px 0 var(--v2-coral);
  transform: translate(3px, 3px);
}
.catalog-heading-cta span { font-weight: 900; }
.catalog-heading-cta strong { color: rgba(246,245,241,.68); font-family: "DM Mono", ui-monospace, monospace; font-size: 10px; }
.catalog-heading-cta i { font-size: 11px; }
.catalog-toolbar {
  position: sticky;
  z-index: 8;
  top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 48px 0 30px;
  padding: 10px;
  border: 1px solid rgba(17,18,19,.13);
  border-radius: 7px;
  background: rgba(246,245,241,.9);
  box-shadow: 0 14px 35px rgba(17,18,19,.08);
  backdrop-filter: blur(18px);
}
.catalog-filter {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: rgba(17,18,19,.62);
  background: transparent;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.catalog-filter:hover,
.catalog-filter.is-active {
  border-color: rgba(17,18,19,.22);
  color: var(--v2-paper);
  background: var(--v2-ink);
}
#catalogCount {
  margin-left: auto;
  padding-right: 8px;
  color: rgba(17,18,19,.48);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 10px;
}
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.catalog-card {
  display: grid;
  grid-template-rows: auto 68px;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(17,18,19,.14);
  border-radius: 6px;
  color: var(--v2-ink);
  background: rgba(255,255,255,.48);
  text-align: left;
  box-shadow: 0 15px 34px rgba(17,18,19,.08);
  transition: transform 260ms ease, box-shadow 260ms ease;
}
.catalog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 48px rgba(17,18,19,.14);
}
.catalog-card-frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 9px solid #121315;
  border-bottom-width: 15px;
  background: radial-gradient(circle at 72% 18%, #4d756d, #203936 52%, #121315);
}
.catalog-card.is-portrait .catalog-card-frame { aspect-ratio: 4 / 5; }
.catalog-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  vertical-align: bottom;
  transition: opacity 260ms ease, transform 700ms cubic-bezier(.2,.75,.2,1);
}
.catalog-card video.is-media-ready { opacity: 1; }
.catalog-card:hover video { transform: scale(1.035); }
.catalog-card-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 5px 7px;
  border-radius: 3px;
  color: #111;
  background: var(--v2-yellow);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 8px;
  font-weight: 700;
}
.catalog-card-copy {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  padding: 10px 13px;
}
.catalog-card-copy strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.catalog-card-copy span {
  color: rgba(17,18,19,.5);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 9px;
  text-transform: uppercase;
}

.loop-dialog {
  width: min(100% - 16px, 1440px);
  max-height: calc(100svh - 16px);
  padding: 16px;
  overflow: auto;
  border: 0;
  border-radius: 8px;
  color: #f6f5f1;
  background: #111213;
  box-shadow: 0 40px 100px rgba(0,0,0,.5);
}
.loop-dialog::backdrop {
  background: rgba(7,8,8,.72);
  backdrop-filter: blur(14px);
}
.dialog-close {
  position: absolute;
  z-index: 2;
  top: 13px;
  right: 13px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  color: #fff;
  background: rgba(0,0,0,.5);
}
.dialog-tv {
  position: relative;
  aspect-ratio: 16 / 9;
  padding: 12px 12px 22px;
  border-radius: 7px;
  background: #050606;
}
.loop-dialog.is-landscape .dialog-tv { width: 100%; max-height: 80svh; }
.loop-dialog.is-portrait { width: min(100% - 16px, 900px); }
.loop-dialog.is-portrait .dialog-tv {
  width: min(100%, 560px);
  height: min(80svh, 980px);
  aspect-ratio: auto;
  margin-inline: auto;
}
.dialog-tv video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.dialog-tv-led {
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--v2-yellow);
  box-shadow: 0 0 9px var(--v2-yellow);
}
.dialog-copy {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  padding-top: 12px;
}
.dialog-copy .eyebrow { color: rgba(255,255,255,.5); }
.dialog-copy h2 {
  max-width: 34ch;
  margin: 5px 0 2px;
  font-size: clamp(1.15rem, 2vw, 1.8rem);
  line-height: 1.02;
}
.dialog-copy p { margin: 0; color: rgba(255,255,255,.55); }
.dialog-actions { display: flex; gap: 9px; flex-shrink: 0; }
.dialog-actions a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
}
.dialog-subscribe { border-color: var(--v2-yellow) !important; color: #111; background: var(--v2-yellow); }

.pack-gallery {
  width: 100vw;
  max-width: none;
  height: 100svh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  color: #111213;
  background: #fff;
  box-shadow: none;
}
.pack-gallery::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  background:
    radial-gradient(circle at 12% 12%, rgba(255,214,10,.22), transparent 26%),
    radial-gradient(circle at 88% 76%, rgba(83,143,133,.18), transparent 29%),
    repeating-linear-gradient(115deg, rgba(17,18,19,.025) 0 1px, transparent 1px 8px);
  mix-blend-mode: multiply;
}
.pack-gallery[data-pack-shader="signal"]::before {
  background: repeating-linear-gradient(0deg,rgba(225,77,50,.06) 0 2px,transparent 2px 9px),radial-gradient(circle at 80% 16%,rgba(225,77,50,.18),transparent 28%);
}
.pack-gallery[data-pack-shader="scan"]::before {
  background: repeating-linear-gradient(90deg,rgba(44,69,66,.06) 0 1px,transparent 1px 11px),radial-gradient(circle at 16% 78%,rgba(107,142,137,.22),transparent 30%);
}
.pack-gallery[data-pack-shader="grain"]::before {
  background: radial-gradient(circle at 18% 16%,rgba(190,116,88,.18),transparent 32%),repeating-radial-gradient(circle at 65% 40%,rgba(17,18,19,.035) 0 1px,transparent 1px 6px);
}
.pack-gallery[data-pack-shader="sunwash"]::before {
  background: radial-gradient(ellipse at 80% 12%,rgba(237,174,76,.2),transparent 34%),repeating-linear-gradient(125deg,rgba(93,126,100,.04) 0 1px,transparent 1px 10px);
}
.pack-overview {
  position: relative;
  z-index: 1;
  height: calc(100svh - 116px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px max(24px,calc((100vw - 1400px)/2)) 70px;
}
.pack-overview-intro { display: flex; justify-content: space-between; gap: 20px; margin: 0 0 22px; color: rgba(17,18,19,.55); }
.pack-overview-intro strong { color: #111; font-size: 15px; }
.pack-overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(14px, 1.6vw, 22px); padding-bottom: 16px; }
.pack-gallery[data-pack-orientation="portrait"] .pack-overview-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }
.pack-overview-item { min-width: 0; padding: 0; border: 1px solid rgba(17,18,19,.16); border-radius: 5px; overflow: hidden; color: #111; background: #fff; text-align: left; transition: transform 180ms ease, box-shadow 180ms ease; }
.pack-overview-item:hover { transform: translateY(-3px); box-shadow: 0 15px 28px rgba(17,18,19,.12); }
.pack-overview-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border: 9px solid #111213; border-bottom-width: 15px; background: #111; }
.pack-gallery[data-pack-orientation="portrait"] .pack-overview-media { aspect-ratio: 9 / 16; border-width:6px; border-bottom-width:10px; }
.pack-overview-media video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 260ms ease; }
.pack-overview-media video.is-media-ready { opacity: 1; }
.pack-overview-media i { position: absolute; inset: 50% auto auto 50%; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #111; background: rgba(255,214,10,.94); transform: translate(-50%,-50%); opacity: 0; transition: opacity 180ms ease; }
.pack-overview-item:hover .pack-overview-media i, .pack-overview-item:focus-visible .pack-overview-media i { opacity: 1; }
.pack-overview-item > span:last-child { display: flex; gap: 9px; padding: 10px; font-size: 11px; font-weight: 700; }
.pack-overview-item b { color: rgba(17,18,19,.4); font-family: "DM Mono", monospace; font-size: 9px; }
.pack-theatre-view[hidden], .pack-overview[hidden] { display: none; }
.pack-theatre-view { position:relative; z-index:1; height:calc(100svh - 116px); overflow-y:auto; padding:18px max(24px,calc((100vw - 1400px)/2)) 30px; }
.pack-back { min-height: 36px; margin: 0 0 10px; padding: 0 10px; border: 1px solid rgba(17,18,19,.2); border-radius: 4px; color: #111; background: #fff; font-size: 10px; font-weight: 800; }
.pack-back i { margin-right: 7px; }
.pack-theatre-stage { display: grid; grid-template-columns: 48px minmax(0,1fr) 48px; align-items: center; gap: 12px; }
.pack-theatre-nav { width: 48px; height: 48px; border: 1px solid #111; border-radius: 50%; color: #111; background: #fff; font-size: 15px; transition: color 180ms ease, background 180ms ease; }
.pack-theatre-nav:hover { color: #fff; background: #111; }
.pack-gallery::backdrop {
  background: rgba(12,13,13,.72);
  backdrop-filter: blur(14px);
}
.pack-gallery-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  min-height: 116px;
  padding: 22px max(24px,calc((100vw - 1400px)/2));
  border-bottom: 1px solid rgba(17,18,19,.15);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(18px);
}
.pack-gallery-header .eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(17,18,19,.52);
}
.pack-gallery-header .eyebrow i { color: #d9b500; }
.pack-gallery-header h2 {
  margin: 7px 0 0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: clamp(1.8rem, 4vw, 3.5rem);
  font-weight: 900;
  line-height: .95;
  letter-spacing: 0;
}
.pack-gallery-actions { display: flex; align-items: center; gap: 10px; }
.pack-gallery-actions a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 4px;
  color: #111;
  background: var(--v2-yellow);
  font-size: 12px;
  font-weight: 900;
}
.pack-gallery-actions button {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(17,18,19,.25);
  border-radius: 50%;
  color: #111;
  background: #fff;
}
.pack-theatre {
  width: 100%;
  height: min(64svh, 720px);
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 12px solid #111213;
  border-bottom-width: 20px;
  border-radius: 6px;
  background: #080909;
}

.free-signup { width: min(100% - 28px, 940px); padding: 0; overflow: hidden; border: 0; border-radius: 8px; color: #111; background: #fff; box-shadow: 0 45px 120px rgba(0,0,0,.4); }
.free-signup::backdrop { background: rgba(12,13,13,.72); backdrop-filter: blur(14px); }
.free-signup-close { position: absolute; z-index: 2; top: 14px; right: 14px; width: 42px; height: 42px; border: 1px solid rgba(17,18,19,.2); border-radius: 50%; color: #111; background: rgba(255,255,255,.9); }
.free-signup-art { position: relative; min-height: 300px; overflow: hidden; background: #111; }
.free-signup-art video { width: 100%; height: 100%; position: absolute; object-fit: cover; }
.free-signup-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent, rgba(0,0,0,.42)); }
.free-signup-art > span { position: absolute; z-index: 1; left: 22px; bottom: 18px; color: #fff; font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .12em; }
.free-signup-copy { padding: clamp(28px,5vw,56px); }
.free-signup-copy .eyebrow { color: rgba(17,18,19,.5); }
.free-signup-copy h2 { margin: 12px 0 14px; font-family: "DM Sans", sans-serif; font-size: clamp(2.8rem,7vw,5.8rem); font-weight: 900; line-height: .87; letter-spacing: 0; }
.free-signup-copy > p:not(.eyebrow,.free-signup-message) { max-width: 540px; color: rgba(17,18,19,.6); line-height: 1.5; }
.free-signup form { margin-top: 28px; }
.free-signup label { display: block; margin-bottom: 8px; font-family: "DM Mono", monospace; font-size: 9px; text-transform: uppercase; }
.free-signup form > div { display: flex; gap: 8px; }
.free-signup input { flex: 1; min-width: 0; min-height: 50px; padding: 0 14px; border: 1px solid rgba(17,18,19,.28); border-radius: 4px; font: inherit; }
.free-signup form button { min-height: 50px; padding: 0 18px; border: 1px solid #111; border-radius: 4px; color: #111; background: var(--v2-yellow); font-weight: 900; }
.free-signup-message { min-height: 20px; margin: 10px 0 0; font-size: 12px; font-weight: 700; }
.free-signup-skip { margin-top: 8px; padding: 0; border: 0; border-bottom: 1px solid rgba(17,18,19,.4); color: rgba(17,18,19,.6); background: transparent; font-size: 11px; }

.site-footer {
  width: 100%;
  padding: clamp(54px, 7vw, 92px) max(24px, calc((100vw - 1400px) / 2));
  color: #f2ead8;
  background: #111213;
  border-top: 8px solid #df6045;
}
.site-footer a { color: inherit; }
.site-footer-lead {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.2fr) auto;
  align-items: center;
  gap: clamp(28px, 5vw, 76px);
  padding-bottom: clamp(42px, 6vw, 74px);
  border-bottom: 1px solid rgba(242,234,216,.22);
}
.site-footer-brand { display: inline-flex; align-items: center; gap: 10px; width: fit-content; }
.site-footer-mark { width: 34px; height: 34px; border: 1px solid rgba(242,234,216,.45); border-radius: 6px; }
.site-footer-wordmark { width: min(190px, 26vw); height: auto; }
.site-footer-lead p {
  max-width: 520px;
  margin: 0;
  color: rgba(242,234,216,.68);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  line-height: 1.45;
}
.site-footer-cta {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 20px;
  border: 1px solid #f2ead8;
  border-radius: 3px;
  background: #df6045;
  font-weight: 900;
  white-space: nowrap;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}
.site-footer-cta:hover { color: #111213; background: #f2ead8; transform: translateY(-2px); }
.site-footer-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  padding-block: clamp(42px, 6vw, 68px);
}
.site-footer-links nav { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.site-footer-links strong {
  margin-bottom: 7px;
  color: rgba(242,234,216,.48);
  font-family: "DM Mono", monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.site-footer-links a {
  border-bottom: 1px solid transparent;
  font-size: 13px;
  font-weight: 700;
  transition: border-color 160ms ease, color 160ms ease;
}
.site-footer-links a:hover { color: #fff; border-color: #df6045; }
.site-footer-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(242,234,216,.22);
  color: rgba(242,234,216,.45);
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.pack-theatre.is-portrait video {
  width: 100%;
  height: 100%;
}
.pack-theatre video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.pack-theatre-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 2px 16px;
}
.pack-theatre-copy strong { font-size: 15px; }
.pack-theatre-copy span {
  color: rgba(17,18,19,.5);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 9px;
}
.pack-carousel {
  display: flex;
  gap: 12px;
  padding: 10px 2px 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.pack-thumb {
  position: relative;
  flex: 0 0 clamp(142px, 14vw, 190px);
  aspect-ratio: 16 / 10;
  padding: 0;
  overflow: hidden;
  border: 6px solid #111213;
  border-bottom-width: 10px;
  border-radius: 5px;
  background: #111;
  scroll-snap-align: center;
}
.pack-thumb.is-portrait { flex-basis:clamp(82px,8vw,110px); aspect-ratio:9/16; }
.pack-thumb.is-active { box-shadow: 0 0 0 3px var(--v2-yellow); }
.pack-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 240ms ease;
}
.pack-thumb video.is-media-ready { opacity: .72; }
.pack-thumb.is-active video.is-media-ready { opacity: 1; }
.pack-thumb span {
  position: absolute;
  right: 5px;
  bottom: 4px;
  padding: 2px 4px;
  color: #fff;
  background: rgba(0,0,0,.65);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 8px;
}

@media (min-width: 761px) and (max-width: 1050px) {
  .pack-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pack-gallery[data-pack-orientation="portrait"] .pack-overview-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .pack-library-grid { grid-template-columns: 1fr; }
}

@media (min-width:761px) {
  .pack-gallery[data-pack-orientation="portrait"] .pack-theatre-stage {
    grid-template-columns:48px auto 48px;
    justify-content:center;
  }
  .pack-gallery[data-pack-orientation="portrait"] .pack-theatre {
    width:auto;
    height:min(60svh,680px);
    aspect-ratio:9/16;
  }
}

@media (max-width: 760px) {
  .stage { min-height: max(700px, 100svh); }
  .stage-video { object-position: center 46%; filter: saturate(.86) contrast(1.03) brightness(.68); transform: scale(1.01); }
  :root[data-shader] .stage .stage-video.is-active {
    filter: saturate(1.02) contrast(1.03) brightness(.9);
  }
  :root[data-experience] .stage .stage-media-shade {
    background:
      linear-gradient(180deg, rgba(9,10,10,.28) 0%, rgba(9,10,10,.02) 24%, rgba(9,10,10,.1) 43%, rgba(9,10,10,.7) 72%, rgba(9,10,10,.9) 100%),
      linear-gradient(90deg, rgba(9,10,10,.16), transparent 48%, rgba(9,10,10,.08));
    mix-blend-mode: normal;
  }
  :root[data-experience] .stage {
    --v2-muted: rgba(255,247,235,.78);
    --v2-rule: rgba(255,247,235,.25);
    color: #fff7eb;
  }
  :root[data-experience] .stage h1 {
    color: #fffaf0;
    text-shadow:
      0 0 6px rgba(255, 250, 240, 0.40),
      0 0 22px rgba(255, 244, 224, 0.24),
      0 3px 22px rgba(0, 0, 0, 0.36);
  }
  :root[data-experience] .stage h1 em {
    color: #ff8069;
    text-shadow: none;
  }
  :root[data-experience] .stage .eyebrow,
  :root[data-experience] .stage .usecase-prefix,
  :root[data-experience] .stage .stage-metrics,
  :root[data-experience] .stage .text-action,
  :root[data-experience] .stage .channel-button { color: rgba(255,247,235,.86); }
  :root[data-experience] .stage .usecase-window { color: #ffb39f; }
  .v2-header, .stage-content, .stage-footer, .preview, .closing, .catalog-section, .pack-library { width: min(100% - 36px, 1400px); }
  .v2-header { min-height: 64px; }
  .v2-brand { gap: 6px; }
  .v2-brand .v2-brand-mark { width: 24px; flex-basis: 24px; }
  .v2-brand .v2-brand-wordmark { width: 112px; }
  .v2-nav { gap: 10px; }
  .v2-nav a { display: none; }
  .v2-nav .new-pack-pill {
    min-height: 32px;
    display: inline-flex;
    padding-inline: 10px;
  }
  .v2-nav .new-pack-pill span { display: none; }
  .experience-button span,
  .experience-button b,
  .shader-button span,
  .shader-button b { display: none; }
  .experience-button,
  .shader-button { width: 34px; justify-content: center; padding: 0; border-radius: 50%; }
  .stage-content {
    align-self: end;
    grid-template-rows: auto auto auto;
    align-content: end;
    gap: 0;
    max-width: calc(100% - 36px);
    padding: clamp(128px, 22svh, 190px) 0 18px;
  }
  .stage-copy { height: auto; min-height: 0; overflow: visible; }
  .stage-copy .eyebrow { max-width: 32ch; margin-bottom: 12px; font-size: 9px; line-height: 1.45; }
  h1 { font-size: clamp(3.32rem, 16.7vw, 5.25rem); line-height: .9; }
  :root[data-experience="editorial"] h1,
  :root[data-experience="japanese"] h1,
  :root[data-experience="cinema"] h1,
  :root[data-experience="utility"] h1,
  :root[data-experience="tide"] h1,
  :root[data-experience="poster"] h1,
  :root[data-experience="dream"] h1,
  :root[data-experience="prism"] h1,
  :root[data-experience="scan"] h1,
  :root[data-experience="daybreak"] h1,
  :root[data-experience="gallery"] h1,
  :root[data-experience="solar"] h1 {
    max-width: 355px;
    font-size: clamp(2.85rem, 13.2vw, 4rem);
    line-height: .85;
  }
  .usecase-rotator { gap: 5px 7px; margin-top: 14px; font-size: 9px; letter-spacing: .055em; }
  .usecase-window { width: 19ch; }
  .stage-description { display: none; }
  .stage-actions { display: grid; grid-template-columns: 1fr; align-items: stretch; gap: 6px; margin-top: 18px; }
  .stage .primary-action { min-height: 78px; width: 100%; max-width: none; grid-template-columns: minmax(0, 1fr) auto 32px; padding: 9px 10px 9px 16px; gap: 10px; }
  .primary-action-kicker { font-size: 8px; }
  .primary-action-copy > strong { font-size: 14px; }
  .primary-action-price { min-width: 66px; }
  .primary-action-price strong { font-size: 24px; }
  .primary-action-price small { margin-top: 5px; font-size: 7px; }
  .primary-action-icon { width: 32px; height: 32px; }
  .offer-note { display: flex; justify-content: center; width: 100%; margin-top: 8px; padding: 0; font-size: 9px; text-align: center; }
  .stage-footer { min-height: 62px; grid-template-columns: 1fr auto 1fr; gap: 5px; }
  .stage-metrics { max-width: none; gap: 13px; font-size: 8px; }
  .stage-metrics span + span::before { margin-right: 13px; }
  .stage-metrics span:nth-child(3) { display: none; }
  .channel-button > span:last-child { display: none; }
  .channel-button { min-width: 44px; justify-content: center; }
  .stage-scroll-cue { min-width: 92px; min-height: 48px; padding-inline: 4px; font-size: 8px; letter-spacing: .05em; }
  .preview { padding-block: 70px 82px; overflow: hidden; }
  .preview-heading { display: block; padding-bottom: 29px; }
  .preview h2 { max-width: 350px; }
  .pack-purchase { justify-content: space-between; margin-top: 24px; }
  .loop-rail {
    width: calc(100vw - 18px);
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 8px 22px 30px 0;
    scroll-padding-inline: 0 22px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    touch-action: auto;
  }
  .loop-rail::-webkit-scrollbar { display: none; }
  .loop-tile,
  .pack-gift-tile {
    flex: 0 0 min(82vw, 340px);
    min-height: 420px;
    scroll-snap-align: start;
  }
  .loop-tile video { min-height: 420px; }
  .pack-gift-tile { min-height: 420px; }
  .closing { padding-block: 72px 80px; }
  .closing h2 { font-size: clamp(3rem, 13vw, 4.4rem); }
  .catalog-section { padding-block: 64px 80px; }
  .catalog-heading { grid-template-columns: 1fr; align-items: start; gap: 18px; }
  .catalog-heading h2 { font-size: clamp(3.25rem, 15vw, 4.8rem); }
  .catalog-heading h2, .catalog-value-note, .catalog-heading-cta { grid-column: 1; grid-row: auto; }
  .catalog-value-note { margin: 0; font-size: 12px; }
  .catalog-heading-cta { width: 100%; min-height: 58px; padding-inline: 18px; }
  .catalog-toolbar { margin-top: 34px; overflow-x: auto; padding-right: 14px; }
  #v2DialogVideo::-webkit-media-controls,
  #v2PackTheatreVideo::-webkit-media-controls { display: none !important; }
  .catalog-filter { flex: 0 0 auto; }
  #catalogCount { display: none; }
  .catalog-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .catalog-card { grid-template-rows: auto 58px; }
  .catalog-card-copy { padding-inline: 9px; }
  .catalog-card-copy strong { font-size: 11px; }
  .dialog-copy { display: block; }
  .dialog-actions { margin-top: 20px; }
  .dialog-actions a { flex: 1; justify-content: center; }
  .pack-gallery {
    width: 100vw;
    height: 100svh;
  }
  .pack-gallery-header { min-height:96px; align-items:center; padding:14px 16px; }
  .pack-gallery-header h2 { font-size: 1.55rem; }
  .pack-gallery-actions a { min-height: 40px; padding-inline: 11px; font-size: 10px; }
  .pack-gallery-actions button { width: 40px; height: 40px; }
  .pack-overview { height:calc(100svh - 96px); padding:20px 16px 60px; }
  .pack-theatre-view { height:calc(100svh - 96px); padding:14px 12px 24px; }
  .pack-overview-intro { align-items: flex-start; flex-direction: column; gap: 3px; }
  .pack-overview-grid { grid-template-columns: 1fr; gap: 14px; }
  .pack-gallery[data-pack-orientation="portrait"] .pack-overview-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap:10px; }
  .pack-gallery[data-pack-orientation="portrait"] .pack-overview-media { border-width:5px; border-bottom-width:8px; }
  .pack-overview-item > span:last-child { padding: 10px; font-size: 11px; }
  .pack-theatre-stage { position: relative; display: block; }
  .pack-theatre { height: min(52svh, 560px); border-width: 8px; border-bottom-width: 14px; }
  .pack-gallery[data-pack-orientation="portrait"] .pack-theatre { width:auto; height:min(58svh,560px); margin-inline:auto; aspect-ratio:9/16; }
  .pack-theatre-nav { position: absolute; z-index: 2; top: 50%; width: 42px; height: 42px; border-color: rgba(255,255,255,.65); color: #111; background: rgba(255,255,255,.9); transform: translateY(-50%); }
  #v2PackPrev { left: 10px; }
  #v2PackNext { right: 10px; }
  .pack-theatre-copy { align-items: flex-start; flex-direction: column; gap: 4px; }
  .pack-thumb { flex-basis: 138px; }
  .pack-thumb.is-portrait { flex-basis:86px; }
  .pack-library { overflow: hidden; }
  .pack-library-heading { grid-template-columns:1fr; gap:18px; margin-bottom: 24px; }
  .pack-heading-desktop { display: none; }
  .pack-heading-mobile { display: inline; }
  .pack-library-heading h2 .pack-heading-mobile { display: block; }
  .pack-library-mobile-guide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    color: inherit;
    opacity: .58;
    font: 500 9px "DM Mono", monospace;
    letter-spacing: .09em;
    text-transform: uppercase;
  }
  .pack-library-mobile-guide span:first-child::after { content: " →"; color: #df6045; }
  .pack-library-grid {
    width: calc(100vw - 18px);
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 2px 22px 28px 0;
    scroll-padding-inline: 0 22px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    touch-action: auto;
  }
  .pack-library-grid::-webkit-scrollbar { display: none; }
  .subscription-pack {
    position: relative;
    flex: 0 0 min(84vw, 360px);
    overflow: hidden;
    border: 1px solid rgba(17,18,19,.2);
    border-radius: 5px;
    background: #111413;
    box-shadow: 0 18px 38px rgba(17,18,19,.16);
    scroll-snap-align: start;
  }
  .subscription-pack-link {
    position: relative;
    min-height: 580px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    color: #fffaf0;
  }
  .subscription-pack-media,
  .subscription-pack-shade {
    position: absolute;
    inset: 0;
  }
  .subscription-pack-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.88) contrast(1.04) brightness(.72);
    transform: scale(1.02);
  }
  .subscription-pack-shade {
    background:
      linear-gradient(180deg, rgba(17,20,19,.08) 8%, rgba(17,20,19,.42) 46%, rgba(17,20,19,.96) 100%),
      linear-gradient(120deg, rgba(26,60,54,.2), rgba(196,91,66,.16));
  }
  .subscription-pack-copy {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 580px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px 20px 20px;
  }
  .subscription-pack-kicker,
  .subscription-pack-detail {
    font: 600 9px "DM Mono", monospace;
    letter-spacing: 0;
  }
  .subscription-pack-kicker {
    margin-bottom: auto;
    padding: 8px 10px;
    border: 1px solid rgba(255,250,240,.54);
    border-radius: 3px;
    background: rgba(17,20,19,.38);
    backdrop-filter: blur(10px);
  }
  .subscription-pack-kicker i { margin-right: 7px; color: #ff8068; }
  .subscription-pack-top-price {
    position: absolute;
    top: 24px;
    right: 20px;
    padding: 7px 9px;
    border-radius: 3px;
    color: rgba(255,250,240,.72);
    background: rgba(17,20,19,.62);
    backdrop-filter: blur(10px);
    font: 700 9px "DM Mono", monospace;
  }
  .subscription-pack-top-price b { color: #ff8068; font-size: 12px; }
  .subscription-pack-copy > strong {
    max-width: 290px;
    font-size: 2.8rem;
    font-weight: 900;
    line-height: .88;
  }
  .subscription-pack-detail { margin-top: 16px; color: rgba(255,250,240,.7); }
  .subscription-pack-price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-top: 17px;
    color: rgba(255,250,240,.7);
    font-size: 12px;
  }
  .subscription-pack-price b { color: #ff8068; font-size: 2rem; line-height: 1; }
  .subscription-pack-action {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    padding: 0 14px;
    border-radius: 4px;
    color: #111413;
    background: #fffaf0;
    font-size: 11px;
    font-weight: 900;
  }
  .focused-pack {
    flex: 0 0 min(84vw, 360px);
    padding-top: 0;
    border: 1px solid rgba(17,18,19,.16);
    border-radius: 5px;
    color: #111213;
    background: #f8f6f0;
    box-shadow: 0 18px 38px rgba(17,18,19,.1);
    scroll-snap-align: start;
  }
  .focused-pack-preview { aspect-ratio: 4/5; margin-top: 0; border-radius: 4px 4px 0 0; box-shadow: none; }
  .focused-pack-price-badge {
    position: absolute;
    z-index: 2;
    top: 14px;
    right: 12px;
    display: block;
    padding: 7px 9px;
    border: 1px solid rgba(255,255,255,.58);
    border-radius: 3px;
    color: #111213;
    background: #fffaf0;
    font: 700 8px "DM Mono", monospace;
  }
  .focused-pack-price-badge b { margin-right: 3px; color: #df6045; font-size: 12px; }
  .focused-pack-mosaic { grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); padding:7px; gap:3px; }
  .focused-pack-copy { flex-direction:column; gap:16px; padding:20px 16px 16px; }
  .focused-pack-copy h3 { color: #111213; }
  .focused-pack-quick-buy { left:68px; }
  .focused-pack-actions { width:100%; flex-direction:row; }
  .focused-pack-actions button,.focused-pack-actions a { flex:1; }
  .free-signup { max-height: calc(100svh - 16px); overflow-y: auto; }
  .free-signup-art { min-height: 210px; }
  .free-signup form > div { flex-direction: column; }
  .free-signup form button { width: 100%; }
  .site-footer { padding: 52px 18px 34px; border-top-width: 6px; }
  .site-footer-lead { grid-template-columns: 1fr; gap: 24px; padding-bottom: 42px; }
  .site-footer-wordmark { width: 150px; }
  .site-footer-lead p { max-width: 360px; font-size: 1rem; }
  .site-footer-cta { width: 100%; }
  .site-footer-links { grid-template-columns: 1fr 1fr; gap: 38px 24px; padding-block: 44px; }
  .site-footer-base { align-items: flex-start; flex-direction: column; gap: 8px; line-height: 1.5; }
}

/* Dark theme
   Keep this final so theme colors win over the individual experience and
   component palettes above. Every darkened surface owns its foreground pair. */
:root[data-theme="dark"] {
  --v2-paper: #08090b;
  --v2-ink: #f4efe6;
  --v2-night: #090a0c;
  --v2-night-soft: #121417;
  --v2-bone: #f4efe6;
  --v2-muted: rgba(244, 239, 230, 0.68);
  --v2-rule: rgba(244, 239, 230, 0.16);
  --v2-shadow: 0 30px 90px rgba(0, 0, 0, 0.56);
  color-scheme: dark;
}

:root[data-theme="dark"] body {
  background: var(--v2-paper);
  color: var(--v2-ink);
}

/* Experience modes may change typography and accent, but dark mode owns the
   hero luminance so switching experiences never turns the page light again. */
:root[data-theme="dark"][data-experience] .stage {
  --v2-muted: rgba(255, 247, 235, 0.72);
  --v2-rule: rgba(255, 247, 235, 0.20);
  color: #fff7eb;
  background: #090a0c;
}

:root[data-theme="dark"][data-experience] .stage-media {
  background: #090a0c;
}

:root[data-theme="dark"][data-experience] .stage-media-shade {
  background:
    linear-gradient(96deg, rgba(5, 6, 8, 0.44) 0%, rgba(8, 10, 13, 0.22) 45%, rgba(8, 10, 13, 0.04) 79%),
    linear-gradient(0deg, rgba(5, 6, 8, 0.28), transparent 58%);
  mix-blend-mode: normal;
}

:root[data-theme="dark"][data-experience] .stage-video.is-active {
  filter: saturate(0.96) contrast(1.03) brightness(0.88);
}

:root[data-theme="dark"][data-experience] .stage h1,
:root[data-theme="dark"][data-experience] .stage .eyebrow,
:root[data-theme="dark"][data-experience] .stage .usecase-prefix,
:root[data-theme="dark"][data-experience] .stage .stage-description,
:root[data-theme="dark"][data-experience] .stage .offer-note,
:root[data-theme="dark"][data-experience] .stage .stage-metrics,
:root[data-theme="dark"][data-experience] .stage .text-action,
:root[data-theme="dark"][data-experience] .stage .channel-button {
  color: #fff7eb;
}

:root[data-theme="dark"][data-experience] .stage h1 {
  text-shadow:
    0 0 6px rgba(255, 250, 240, 0.40),
    0 0 22px rgba(255, 244, 224, 0.24),
    0 3px 22px rgba(0, 0, 0, 0.36);
}

:root[data-theme="dark"][data-experience] .stage h1 em {
  text-shadow: none;
}

:root[data-theme="dark"] .preview-heading .eyebrow,
:root[data-theme="dark"] .closing .eyebrow,
:root[data-theme="dark"] .pack-purchase > span,
:root[data-theme="dark"] .loading-copy,
:root[data-theme="dark"] .pack-library-heading > p,
:root[data-theme="dark"] .focused-pack-copy span,
:root[data-theme="dark"] .focused-pack-copy p,
:root[data-theme="dark"] .catalog-value-note,
:root[data-theme="dark"] #catalogCount,
:root[data-theme="dark"] .catalog-card-copy span {
  color: var(--v2-muted);
}

:root[data-theme="dark"] .preview h2,
:root[data-theme="dark"] .closing h2,
:root[data-theme="dark"] .pack-purchase strong,
:root[data-theme="dark"] .pack-library-heading h2,
:root[data-theme="dark"] .focused-pack-copy h3,
:root[data-theme="dark"] .catalog-heading h2 {
  color: var(--v2-ink);
}

:root[data-theme="dark"] .closing,
:root[data-theme="dark"] .pack-library,
:root[data-theme="dark"] .catalog-section,
:root[data-theme="dark"] .focused-pack {
  border-color: var(--v2-rule);
}

:root[data-theme="dark"] .pack-action,
:root[data-theme="dark"] .catalog-heading-cta {
  border-color: rgba(244, 239, 230, 0.72);
  color: #111213;
  background: #f4efe6;
}

:root[data-theme="dark"] .focused-pack-actions button,
:root[data-theme="dark"] .focused-pack-actions a {
  border-color: var(--v2-rule);
  color: var(--v2-ink);
  background: #15171a;
}

:root[data-theme="dark"] .focused-pack-actions a {
  border-color: rgba(255, 214, 10, 0.62);
  color: #111;
  background: var(--v2-yellow);
}

:root[data-theme="dark"] .catalog-toolbar {
  border-color: var(--v2-rule);
  background: rgba(15, 17, 20, 0.90);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.34);
}

:root[data-theme="dark"] .catalog-filter {
  color: var(--v2-muted);
}

:root[data-theme="dark"] .catalog-filter:hover,
:root[data-theme="dark"] .catalog-filter.is-active {
  border-color: rgba(244, 239, 230, 0.26);
  color: #111;
  background: var(--v2-yellow);
}

:root[data-theme="dark"] .catalog-card {
  border-color: var(--v2-rule);
  color: var(--v2-ink);
  background: #121417;
  box-shadow: 0 15px 34px rgba(0, 0, 0, 0.34);
}

:root[data-theme="dark"] .catalog-card:hover {
  box-shadow: 0 25px 48px rgba(0, 0, 0, 0.48);
}

/* Full-screen pack and signup surfaces also follow the selected theme. */
:root[data-theme="dark"] .pack-gallery,
:root[data-theme="dark"] .free-signup {
  color: var(--v2-ink);
  background: #0d0f12;
}

:root[data-theme="dark"] .pack-gallery::before {
  opacity: 0.26;
  mix-blend-mode: screen;
}

:root[data-theme="dark"] .pack-gallery-header {
  border-color: var(--v2-rule);
  background: rgba(13, 15, 18, 0.92);
}

:root[data-theme="dark"] .pack-gallery-header .eyebrow,
:root[data-theme="dark"] .pack-overview-intro,
:root[data-theme="dark"] .free-signup-copy .eyebrow,
:root[data-theme="dark"] .free-signup-copy > p:not(.eyebrow, .free-signup-message) {
  color: var(--v2-muted);
}

:root[data-theme="dark"] .pack-overview-intro strong {
  color: var(--v2-ink);
}

:root[data-theme="dark"] .pack-overview-item {
  border-color: var(--v2-rule);
  color: var(--v2-ink);
  background: #15171a;
}

:root[data-theme="dark"] .pack-overview-item b {
  color: var(--v2-muted);
}

:root[data-theme="dark"] .pack-gallery-actions button,
:root[data-theme="dark"] .pack-back,
:root[data-theme="dark"] .pack-theatre-nav,
:root[data-theme="dark"] .free-signup-close {
  border-color: var(--v2-rule);
  color: var(--v2-ink);
  background: #1a1c20;
}

:root[data-theme="dark"] .free-signup input {
  border-color: var(--v2-rule);
  color: var(--v2-ink);
  background: #15171a;
}

:root[data-theme="dark"] .free-signup input::placeholder {
  color: rgba(244, 239, 230, 0.46);
}

:root[data-theme="dark"] .free-signup-skip {
  border-color: rgba(244, 239, 230, 0.42);
  color: var(--v2-muted);
}

@media (max-width: 430px) {
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-card.is-portrait .catalog-card-frame { aspect-ratio: 4 / 5; }
  .loop-dialog { padding: 12px; }
  .loop-dialog.is-landscape .dialog-tv {
    width: calc(100vw - 56px);
    max-height: none;
  }
  .loop-dialog.is-portrait .dialog-tv {
    width: min(100%, calc((100svh - 230px) * .5625));
    height: min(72svh, calc(100svh - 230px));
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}