html { scrollbar-color: #647459 #121811; scrollbar-width: thin; }
html:has(.landing-page[data-theme="clean"]) { scrollbar-color: #82937a #e8eee1; }
.landing-page [hidden] { display: none !important; }

.landing-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-top: clamp(22px, 4.5vh, 37px);
}
.landing-actions .landing-button { margin: 0; }
.landing-jump {
  --type-size: clamp(.8rem, 1.35vw, .98rem);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 11px;
  min-height: 44px;
  max-width: 100%;
  padding: 8px 13px;
  border: 1px solid currentColor;
  border-color: var(--jump-border, color-mix(in srgb, var(--fg) 30%, transparent));
  border-radius: var(--button-radius, 9px);
  background: var(--jump-fill, color-mix(in srgb, var(--background) 76%, transparent));
  color: var(--jump-ink, var(--fg));
  font-size: var(--type-size);
  font-weight: 650;
  text-decoration: none;
  transition: border-color 230ms ease, background 230ms ease;
}
.landing-jump:is(:hover, :focus-visible) {
  border-color: var(--jump-border, color-mix(in srgb, var(--fg) 69%, transparent));
  background: color-mix(in srgb, var(--jump-fill, var(--background)) 88%, var(--jump-ink, var(--fg)));
}
.landing-jump span { overflow-wrap: anywhere; }
.landing-jump svg { width: 16px; height: 16px; flex: 0 0 16px; transition: transform 200ms ease; }
.landing-jump:hover svg { transform: translateY(3px); }
.landing-jump:focus-visible { outline: 2px solid var(--fg); outline-offset: 5px; }

.landing {
  --motion-ease: cubic-bezier(.18,.75,.23,1);
  --pointer-x: 0px;
  --pointer-y: 0px;
  --scroll-progress: 0;
  --scroll-photo: 0px;
  --scroll-copy: 0px;
  --scroll-shade: .18;
  --scroll-picture-scale: 1;
  --scroll-picture-radius: 0px;
  --scroll-picture-opacity: 1;
  --guide-seam: #121911;
}
.landing[data-theme="neon"] { --guide-seam: #101021; }
.landing[data-theme="clean"] { --guide-seam: #edf2e8; }
.landing[data-cover-mode="banner"] {
  --photo-zoom-from: .94;
  --photo-zoom-to: 1;
  --photo-pan-scale: .94;
  --photo-pan-travel: 1.4%;
  --photo-arrive-scale: .97;
  --guide-depart-scale: .976;
}

.landing-title-line { display: block; }

.landing.motion-ready:not([data-cover-mode="banner"]) .landing-media {
  translate: calc(var(--pointer-x) * var(--photo-pointer, 1))
    calc(var(--pointer-y) * var(--photo-pointer, 1) + var(--photo-scroll-y, var(--scroll-photo)));
  transition: translate 360ms var(--motion-ease);
}
.landing[data-image-motion="none"] { --photo-pointer: 0; }
.landing[data-image-motion="none"]:is([data-scroll-motion="depth"], :not([data-scroll-motion])) { --photo-scroll-y: 0px; }
.landing[data-image-motion="parallax"] { --photo-pointer: 2.1; }
.landing-media picture { position: absolute; inset: 0; display: block; }
.landing.motion-ready:is([data-scroll-motion="dolly"], [data-scroll-motion="dissolve"], [data-scroll-motion="recede"]) .landing-media picture {
  scale: var(--scroll-picture-scale);
  opacity: var(--scroll-picture-opacity);
  border-radius: var(--scroll-picture-radius);
  overflow: hidden;
}
.landing.motion-ready:not([data-cover-mode="banner"]) .landing-content {
  translate: 0 var(--text-scroll-y, var(--scroll-copy));
  transition: translate 250ms var(--motion-ease);
}
.landing[data-scroll-motion="dolly"] {
  --scroll-picture-scale: calc(1 + var(--scroll-progress) * .105);
  --photo-scroll-y: calc(var(--scroll-photo) * -.34);
  --text-scroll-y: calc(var(--scroll-copy) * -.56);
}
.landing[data-scroll-motion="dolly"][data-cover-mode="banner"] {
  --scroll-picture-scale: calc(1 - var(--scroll-progress) * .075);
}
.landing[data-scroll-motion="lift"] {
  --photo-scroll-y: calc(var(--scroll-photo) * 1.42);
  --text-scroll-y: calc(var(--scroll-copy) * -1.65);
}
.landing.motion-ready[data-scroll-motion="lift"][data-cover-mode="banner"] .landing-media {
  translate: 0 calc(var(--scroll-photo) * .55);
}
.landing[data-scroll-motion="dissolve"] {
  --scroll-picture-opacity: calc(1 - var(--scroll-progress) * .72);
  --scroll-picture-scale: calc(1 - var(--scroll-progress) * .034);
  --photo-scroll-y: calc(var(--scroll-photo) * .37);
}
.landing[data-scroll-motion="recede"] {
  --scroll-picture-scale: calc(1 - var(--scroll-progress) * .13);
  --scroll-picture-radius: calc(var(--scroll-progress) * 42px);
  --photo-scroll-y: calc(var(--scroll-photo) * .25);
  --text-scroll-y: calc(var(--scroll-copy) * -.7);
}
.landing.motion-ready[data-guide="on"] .landing-shade::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(0deg, var(--guide-seam), transparent);
  opacity: var(--scroll-shade);
  transition: opacity 210ms linear;
}
.landing.motion-ready[data-scroll-motion="dissolve"][data-guide="on"] .landing-shade::after {
  height: 78%;
  opacity: calc(.14 + var(--scroll-progress) * .86);
}
.landing.motion-ready:not([data-image-motion="none"]) .landing-glow {
  opacity: .19;
  translate: calc(var(--pointer-x) * -.8) calc(var(--pointer-y) * -.8 - var(--scroll-photo) * .28);
  transition: translate 480ms var(--motion-ease);
  animation: stadium-light 12s ease-in-out infinite alternate;
}
.landing.motion-ready:not([data-image-motion="none"]) .landing-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 23%, #ecffd300 39%, #f6ffdf91 51%, #e5ffcf00 65%, transparent 76%);
  mask-image: radial-gradient(ellipse at 74% 41%, #000 8%, transparent 66%);
  animation: light-sweep 15s ease-in-out infinite alternate;
}
.landing[data-theme="clean"].motion-ready .landing-glow { opacity: .12; }
.landing[data-theme="clean"].motion-ready .landing-glow::after { display: none; }
.landing.motion-ready[data-image-motion="zoom"] .landing-art {
  animation: photo-breathe 14s ease-in-out infinite alternate;
}
.landing.motion-ready[data-image-motion="pan"] .landing-art {
  animation: photo-drift 16s ease-in-out infinite alternate;
}
.landing.motion-ready[data-image-motion="parallax"]:not([data-cover-mode="banner"]) .landing-art { scale: 1.12; }
.landing.motion-ready[data-image-motion="parallax"][data-cover-mode="banner"] .landing-art {
  scale: .954;
  translate: clamp(-6px, var(--pointer-x), 6px) clamp(-6px, calc(var(--pointer-y) + var(--scroll-photo)), 6px);
  transition: translate 360ms var(--motion-ease);
}
.landing.motion-ready[data-image-motion="light"]:not([data-cover-mode="banner"]) .landing-art { scale: 1.1; }
.landing.motion-ready[data-image-motion="light"] .landing-media::after {
  content: "";
  position: absolute;
  inset: -12%;
  background: linear-gradient(111deg, transparent 29%, #d3e8ff27 42%, #fff6 49%, #ffe9b426 56%, transparent 70%);
  mix-blend-mode: screen;
  animation: banner-light-pass 8s var(--motion-ease) infinite;
}
.landing.motion-ready[data-image-motion="glide"] .landing-art {
  animation: photo-glide 19s ease-in-out infinite alternate;
}
.landing[data-cover-mode="banner"] { --glide-scale: .95; --glide-end: .99; --glide-shift: 1.2%; }
@keyframes stadium-light {
  from { transform: translate3d(2%, -4%, 0) scale(.97); }
  to { transform: translate3d(-8%, 5%, 0) scale(1.13); }
}
@keyframes light-sweep {
  from { transform: translate3d(12%, -5%, 0) rotate(-6deg); opacity: .24; }
  to { transform: translate3d(-14%, 6%, 0) rotate(7deg); opacity: .60; }
}
@keyframes photo-breathe {
  from { scale: var(--photo-zoom-from, 1.125); }
  to { scale: var(--photo-zoom-to, 1.063); }
}
@keyframes photo-drift {
  from { scale: var(--photo-pan-scale, 1.15); translate: calc(var(--photo-pan-travel, 2.7%) * -1) 1%; }
  to { scale: var(--photo-pan-scale, 1.13); translate: var(--photo-pan-travel, 2.7%) -1%; }
}
@keyframes photo-glide {
  from { scale: var(--glide-scale, 1.095); translate: var(--glide-shift, 2.1%) -.6%; }
  42% { translate: 0 .9%; }
  to { scale: var(--glide-end, 1.15); translate: calc(var(--glide-shift, 2.1%) * -1) -.2%; }
}
@keyframes banner-light-pass {
  0%, 78% { translate: -57% 0; opacity: 0; }
  8% { opacity: .6; }
  30%, 76% { translate: 57% 0; opacity: 0; }
  100% { opacity: 0; }
}

.landing.motion-enter:not([data-image-motion="none"]) .landing-media {
  animation: background-arrive 1040ms var(--motion-ease) both;
}
.landing.motion-enter:not([data-theme="clean"], [data-image-motion="light"], [data-image-motion="none"]) .landing-media::after {
  content: "";
  position: absolute;
  inset: -28%;
  background:
    linear-gradient(114deg, transparent 27%, #f2ffdd00 40%, #f5ffe7af 50%, #ebffd600 62%),
    radial-gradient(ellipse at 77% 39%, color-mix(in srgb, var(--accent) 57%, #f5ffe4), transparent 36%);
  mask-image: radial-gradient(ellipse at 74% 44%, #000 3%, transparent 61%);
  mix-blend-mode: screen;
  animation: opening-light 1370ms cubic-bezier(.25,.54,.38,1) 35ms both;
}
.landing.motion-enter .landing-brand,
.landing.motion-enter .landing-eyebrow,
.landing.motion-enter .landing-description,
.landing.motion-enter .landing-actions {
  animation: content-arrive 720ms var(--motion-ease) both;
}
.landing.motion-enter .landing-brand { animation-delay: 20ms; }
.landing.motion-enter .landing-eyebrow { animation-delay: 55ms; }
.landing.motion-enter .landing-title-line {
  animation: headline-arrive 850ms var(--motion-ease) calc(78ms + var(--line-delay, 0ms)) both;
}
.landing.motion-enter .landing-description { animation-delay: 205ms; }
.landing.motion-enter .landing-actions { animation-delay: 250ms; }
.landing.motion-enter:is([data-intro="curtain"], [data-intro="editorial"], [data-intro="focus"], [data-intro="iris"]):not([data-image-motion="light"]) .landing-media::after {
  content: none;
}
.landing.motion-enter[data-intro="curtain"] .landing-media {
  animation: curtain-arrive 1280ms cubic-bezier(.22,.72,.17,1) backwards;
}
.landing.motion-enter[data-intro="curtain"] .landing-title-line {
  animation: type-rise 980ms var(--motion-ease) calc(170ms + var(--line-delay, 0ms)) backwards;
}
.landing.motion-enter[data-intro="editorial"] .landing-media {
  animation: editorial-image 1040ms var(--motion-ease) backwards;
}
.landing.motion-enter[data-intro="editorial"] .landing-title-line {
  animation: type-rise 850ms var(--motion-ease) calc(65ms + var(--line-delay, 0ms)) backwards;
}
.landing.motion-enter[data-intro="focus"] .landing-media {
  animation: focus-arrive 1160ms var(--motion-ease) backwards;
}
.landing.motion-enter[data-intro="focus"] .landing-title-line {
  animation: type-focus 900ms var(--motion-ease) calc(130ms + var(--line-delay, 0ms)) backwards;
}
.landing.motion-enter[data-intro="iris"] .landing-media {
  animation: iris-arrive 1230ms cubic-bezier(.21,.73,.19,1) backwards;
}
.landing.motion-enter[data-intro="iris"] .landing-title-line {
  animation: type-iris 970ms var(--motion-ease) calc(155ms + var(--line-delay, 0ms)) backwards;
}
.landing.motion-enter:is([data-intro="curtain"], [data-intro="iris"]) .landing-description { animation-delay: 300ms; }
.landing.motion-enter:is([data-intro="curtain"], [data-intro="iris"]) .landing-actions { animation-delay: 375ms; }
@keyframes background-arrive {
  from { opacity: .64; scale: var(--photo-arrive-scale, 1.035); }
  to { opacity: 1; scale: 1; }
}
@keyframes opening-light {
  0% { opacity: 0; transform: translate3d(21%, -6%, 0) rotate(-7deg); }
  32% { opacity: .24; }
  66% { opacity: .17; }
  100% { opacity: 0; transform: translate3d(-17%, 6%, 0) rotate(3deg); }
}
@keyframes content-arrive {
  from { opacity: .48; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes headline-arrive {
  from { opacity: .22; transform: translate3d(0, .25em, 0); filter: blur(3px); }
  55% { opacity: .94; filter: blur(.4px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}
@keyframes curtain-arrive {
  from { clip-path: inset(14% 0 14% 0); opacity: .64; scale: var(--photo-arrive-scale, 1.055); }
  to { clip-path: inset(0); opacity: 1; scale: 1; }
}
@keyframes editorial-image {
  from { clip-path: inset(0 0 17% 0); opacity: .49; }
  to { clip-path: inset(0); opacity: 1; }
}
@keyframes focus-arrive {
  from { opacity: .5; filter: blur(6px); scale: var(--photo-arrive-scale, 1.075); }
  70% { filter: blur(.5px); }
  to { opacity: 1; filter: blur(0); scale: 1; }
}
@keyframes iris-arrive {
  from { clip-path: inset(15% 12% 15% 12% round 28px); opacity: .56; }
  to { clip-path: inset(0 round 0); opacity: 1; }
}
@keyframes type-rise {
  from { clip-path: inset(0 -.25em 91%); opacity: .34; transform: translateY(.34em); }
  to { clip-path: inset(-.23em -.25em -.35em); opacity: 1; transform: translateY(0); }
}
@keyframes type-focus {
  from { opacity: .27; filter: blur(5px); transform: translateY(.12em); }
  60% { filter: blur(.4px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes type-iris {
  from { opacity: .35; transform: translateY(.12em) scale(.972); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.landing-title-line { transform-origin: left center; }
[dir="rtl"] .landing-title-line { transform-origin: right center; }

.landing-button { position: relative; overflow: hidden; isolation: isolate; }
.landing-button[href]::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(108deg, transparent 28%, #fff7 50%, transparent 71%);
  mix-blend-mode: soft-light;
  translate: -110% 0;
  transition: translate 540ms var(--motion-ease, ease);
}
.landing-button[href]:is(:hover, :focus-visible)::after { translate: 110% 0; }
.landing-button svg { transition: translate 260ms var(--motion-ease, ease); }
.landing-button[href]:is(:hover, :focus-visible) svg { translate: 4px 0; }
[dir="rtl"] .landing-button[href]:is(:hover, :focus-visible) svg { translate: -4px 0; }

.landing-logo {
  display: block;
  width: auto;
  max-width: min(calc(220px * var(--logo-scale, 1)), calc(53vw * var(--logo-scale, 1)), 68vw);
  max-height: calc(clamp(32px, 6.7vh, 66px) * var(--logo-scale, 1));
  object-fit: contain;
  object-position: left center;
}
[dir="rtl"] .landing-logo { object-position: right center; }

.guide {
  --guide-bg: #121911;
  --guide-ink: #f4f7ee;
  --guide-muted: #b8c4b2;
  --guide-card: #1b2419;
  --guide-line: #354031;
  --guide-mark: #d9f775;
  --guide-shot-height: clamp(230px, 49svh, 480px);
  padding: clamp(23px, 4.5vw, 66px) clamp(18px, 7.1vw, 145px) clamp(44px, 7vw, 100px);
  background: var(--guide-bg);
  background: radial-gradient(ellipse at 76% 18%, color-mix(in srgb, var(--guide-bg) 91%, var(--guide-mark)), transparent 48%), var(--guide-bg);
  color: var(--guide-ink);
}
.guide:focus { outline: none; }
.guide[data-interactive="on"] { min-height: 100svh; }
.landing-page[data-theme="neon"] .guide {
  --guide-bg: #101021; --guide-ink: #f6f2ff; --guide-muted: #ccc7e0;
  --guide-card: #1a1930; --guide-line: #3b3758; --guide-mark: #c4b5ff;
}
.landing-page[data-theme="clean"] .guide {
  --guide-bg: #edf2e8; --guide-ink: #1d241d; --guide-muted: #465146;
  --guide-card: #f6f9f3; --guide-line: #ccd8c5; --guide-mark: #334d2f;
}
.landing-page .guide[data-custom-background] {
  --guide-bg: var(--custom-guide-bg);
  --guide-ink: var(--custom-guide-ink);
  --guide-muted: color-mix(in srgb, var(--guide-ink) 75%, var(--guide-bg));
  --guide-card: color-mix(in srgb, var(--guide-bg) 93%, var(--guide-ink));
  --guide-line: color-mix(in srgb, var(--guide-bg) 77%, var(--guide-ink));
  --guide-mark: var(--guide-ink);
}
.guide-inner { width: min(100%, 1150px); margin-inline: auto; }
.guide-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: clamp(12px, 2.8vw, 34px);
}
.guide-heading {
  --type-size: clamp(1.85rem, 4.55vw, 4.65rem);
  margin: 0;
  max-width: 24ch;
  font: 760 var(--type-size)/1.01 "Inter", system-ui, sans-serif;
  letter-spacing: -.06em;
  overflow-wrap: anywhere;
}
.guide-step-state {
  flex: none;
  padding: 7px 11px;
  border: 1px solid var(--guide-line);
  border-radius: 100px;
  background: var(--guide-card);
  color: var(--guide-mark);
  font: 680 .78rem var(--design-family, "Inter", system-ui, sans-serif);
  white-space: nowrap;
}
.guide-steps { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.guide-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 17px;
  min-width: 0;
  min-height: 92px;
  padding: clamp(14px, 3vw, 25px);
  border: 1px solid var(--guide-line);
  border-radius: 12px;
  background: var(--guide-card);
}
.guide-step-text {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}
.guide-step-number { color: var(--guide-mark); font: 800 1.7rem/1 var(--design-family, "Barlow Condensed", "Inter", system-ui, sans-serif); }
.guide-step-content { min-width: 0; }
.guide-step h3 { --type-size: clamp(1.07rem, 2.35vw, 1.9rem); margin: 0; font-size: var(--type-size); font-weight: 750; letter-spacing: -.036em; line-height: 1.12; overflow-wrap: anywhere; }
.guide-step p { --type-size: clamp(.87rem, 1.55vw, 1.07rem); margin: 8px 0 0; color: var(--guide-muted); font-size: var(--type-size); line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.guide-step p:first-child { margin-top: 0; }

.guide[data-interactive="on"] .guide-shell {
  overflow: hidden;
  border: 1px solid var(--guide-line);
  border-radius: clamp(15px, 2.1vw, 24px);
  background: var(--guide-card);
  background: linear-gradient(140deg, color-mix(in srgb, var(--guide-card) 95%, var(--guide-mark)), var(--guide-card) 59%);
  box-shadow: 0 20px 55px #0002;
}
.guide[data-interactive="on"] .guide-step { border: 0; border-radius: 0; background: none; }
.guide[data-interactive="on"] .guide-step-text { padding-inline: clamp(0px, 1vw, 13px); }

.guide-shot {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: var(--guide-shot-height);
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(8px, 1.5vw, 16px);
  border: 1px solid var(--guide-line);
  border-radius: clamp(11px, 1.55vw, 17px);
  background: var(--guide-bg);
  background:
    radial-gradient(ellipse at 57% 43%, color-mix(in srgb, var(--guide-card) 81%, var(--guide-mark)), transparent 66%),
    color-mix(in srgb, var(--guide-bg) 90%, var(--guide-mark));
  color: var(--guide-ink);
  cursor: zoom-in;
}
.guide-shot:hover, .guide-shot:focus-visible { border-color: var(--guide-mark); }
.guide-step-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: calc(var(--guide-shot-height) - clamp(16px, 3vw, 32px));
  object-fit: contain;
  border-radius: 9px;
  box-shadow: 0 10px 32px #0006;
}
.guide-shot-icon {
  position: absolute;
  z-index: 2;
  inset-block-start: 9px;
  inset-inline-end: 9px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #b6cbb64a;
  border-radius: 8px;
  background: #0c130ded;
  color: #ecf4e9;
}
.guide-shot-icon svg, .guide-image-close svg { width: 17px; height: 17px; }

.guide-navigation {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: clamp(9px, 1.55vw, 16px);
  border-block-start: 1px solid var(--guide-line);
  background: var(--guide-bg);
  background: color-mix(in srgb, var(--guide-card) 72%, var(--guide-bg));
}
.guide-thumbnails {
  display: grid;
  flex: 1;
  min-width: 0;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 7px;
}
.guide-thumbnail, .guide-direction button {
  color: var(--guide-ink);
  border: 1px solid var(--guide-line);
  border-radius: 9px;
  background: var(--guide-card);
  font: 660 .8rem var(--design-family, "Inter", system-ui, sans-serif);
  cursor: pointer;
}
.guide-thumbnail {
  display: flex;
  min-height: 44px;
  min-width: 0;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  text-align: start;
}
.guide-thumbnail:hover, .guide-thumbnail[aria-pressed="true"], .guide-direction button:hover:not([aria-disabled="true"]) {
  border-color: var(--guide-mark);
  background: color-mix(in srgb, var(--guide-card) 90%, var(--guide-mark));
}
.guide-thumbnail:focus-visible, .guide-direction button:focus-visible {
  outline: 2px solid var(--guide-mark);
  outline-offset: 2px;
}
.guide-thumbnail img {
  flex: none;
  width: 24px;
  height: 32px;
  object-fit: cover;
  object-position: center top;
  border-radius: 4px;
}
.guide-thumbnail-number { color: var(--guide-mark); font-weight: 760; }
.guide-thumbnail-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.guide-direction { display: flex; gap: 7px; }
.guide-direction button {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 9px;
  white-space: nowrap;
}
.guide-direction button[aria-disabled="true"] { opacity: .46; cursor: default; }
.guide-direction svg { width: 15px; height: 15px; }
.guide-previous svg, [dir="rtl"] .guide-next svg { rotate: 180deg; }
[dir="rtl"] .guide-previous svg { rotate: 0deg; }

.landing.motion-ready.guide-departure .landing-media {
  animation: var(--departure-animation, guide-depart) 770ms var(--motion-ease) both;
}
.landing[data-guide-motion="wipe"] { --departure-animation: guide-depart-wipe; }
.landing[data-guide-motion="lift"] { --departure-animation: guide-depart-lift; }
.landing[data-guide-motion="fade"] { --departure-animation: guide-depart-fade; }
.guide-arrive .guide-header { animation: var(--header-arrival, guide-header-arrive) 730ms cubic-bezier(.19,.74,.27,1) both; }
.guide-arrive .guide-shell { animation: var(--shell-arrival, guide-shell-arrive) var(--arrival-time, 1030ms) cubic-bezier(.19,.74,.27,1) both; }
.guide-arrive .guide-step-image { animation: var(--screen-arrival, guide-screen-arrive) var(--screen-time, 910ms) cubic-bezier(.17,.78,.23,1) 48ms both; }
.guide-arrive .guide-navigation { animation: var(--header-arrival, guide-header-arrive) 690ms cubic-bezier(.19,.74,.27,1) 90ms both; }
.guide[data-guide-motion="wipe"] {
  --shell-arrival: guide-shell-wipe;
  --screen-arrival: guide-screen-wipe;
}
.guide[data-guide-motion="lift"] {
  --shell-arrival: guide-shell-lift;
  --screen-arrival: guide-screen-lift;
  --screen-time: 700ms;
  --arrival-time: 890ms;
}
.guide[data-guide-motion="fade"] {
  --header-arrival: guide-fade;
  --shell-arrival: guide-shell-fade;
  --screen-arrival: guide-fade;
  --screen-time: 510ms;
  --arrival-time: 800ms;
}
.guide-arrive:is([data-guide-motion="cinema"], :not([data-guide-motion])) .guide-shot::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -45%;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 32%, color-mix(in srgb, var(--guide-mark) 40%, transparent) 52%, transparent 70%);
  animation: guide-frame-light 920ms ease-out both;
}
.guide-step-change {
  --step-shift: 20px;
  animation: var(--step-arrival, guide-step-arrive) var(--step-time, 560ms) cubic-bezier(.19,.74,.27,1) both;
}
.guide-step-change[data-direction="previous"], [dir="rtl"] .guide-step-change[data-direction="next"] { --step-shift: -20px; }
[dir="rtl"] .guide-step-change[data-direction="previous"] { --step-shift: 20px; }
.guide-step-change .guide-step-image { animation: var(--step-screen-arrival, guide-screen-change) var(--step-screen-time, 510ms) cubic-bezier(.19,.74,.27,1) 25ms both; }
.guide[data-step-motion="crossfade"] {
  --step-arrival: guide-step-fade;
  --step-screen-arrival: none;
  --step-time: 440ms;
}
.guide[data-step-motion="focus"] {
  --step-arrival: guide-step-fade;
  --step-screen-arrival: guide-screen-focus;
}
.guide[data-step-motion="lift"] {
  --step-arrival: guide-step-lift;
  --step-screen-arrival: none;
  --step-time: 500ms;
}

@keyframes guide-depart {
  0% { transform: scale(1); opacity: 1; }
  65% { transform: scale(var(--guide-depart-scale, 1.065)); opacity: .71; }
  100% { transform: scale(var(--guide-depart-scale, 1.065)); opacity: .84; }
}
@keyframes guide-depart-wipe {
  0%, 100% { clip-path: inset(0 round 0); opacity: 1; }
  55% { clip-path: inset(0 2.4% 2.8% round 18px); opacity: .73; }
}
@keyframes guide-depart-lift {
  0%, 100% { transform: translateY(0); }
  55% { transform: translateY(-18px); }
}
@keyframes guide-depart-fade {
  0%, 100% { opacity: 1; }
  60% { opacity: .72; }
}
@keyframes guide-header-arrive {
  from { opacity: .54; transform: translate3d(0, 16px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes guide-shell-arrive {
  from { opacity: .69; transform: translate3d(0, 27px, 0) scale(.986); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes guide-screen-arrive {
  from { opacity: .73; transform: perspective(790px) translate3d(0, 25px, 0) rotateX(9deg) scale(.92); }
  to { opacity: 1; transform: perspective(790px) translate3d(0, 0, 0) rotateX(0) scale(1); }
}
@keyframes guide-shell-wipe {
  from { opacity: .62; transform: translateY(19px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes guide-screen-wipe {
  from { clip-path: inset(0 0 39% round 12px); opacity: .54; transform: translateY(14px); }
  to { clip-path: inset(0 round 0); opacity: 1; transform: translateY(0); }
}
@keyframes guide-shell-lift {
  from { opacity: .55; transform: translateY(44px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes guide-screen-lift {
  from { opacity: .68; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes guide-fade { from { opacity: .58; } to { opacity: 1; } }
@keyframes guide-shell-fade { from { opacity: .52; } to { opacity: 1; } }
@keyframes guide-frame-light {
  0% { opacity: 0; transform: translateX(30%); }
  43% { opacity: .48; }
  100% { opacity: 0; transform: translateX(-29%); }
}
@keyframes guide-step-arrive {
  from { opacity: .53; transform: translate3d(var(--step-shift), 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes guide-screen-change {
  from { opacity: .62; transform: scale(.963); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes guide-step-fade { from { opacity: .46; } to { opacity: 1; } }
@keyframes guide-step-lift {
  from { opacity: .56; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes guide-screen-focus {
  from { opacity: .62; filter: blur(4px); transform: scale(.985); }
  to { opacity: 1; filter: blur(0); transform: scale(1); }
}
.guide-image-dialog {
  max-width: min(94vw, 900px);
  max-height: 92svh;
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid #4b5846;
  border-radius: 12px;
  background: #0e150e;
  color: #edf1ea;
  box-shadow: 0 20px 80px #0009;
}
.guide-image-dialog::backdrop { background: #040604e8; }
.guide-image-dialog.guide-zoom-motion[open] { animation: guide-image-zoom 330ms cubic-bezier(.22,.76,.24,1) both; }
.guide-image-dialog.guide-zoom-motion[open]::backdrop { animation: guide-image-backdrop 290ms ease-out both; }
@keyframes guide-image-zoom {
  from { opacity: .5; transform: translateY(11px) scale(.955); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes guide-image-backdrop { from { opacity: 0; } to { opacity: 1; } }
.guide-image-content { position: relative; }
.guide-image-content img { display: block; max-width: min(92vw, 860px); min-height: 30px; object-fit: contain; }
.guide-image-close {
  position: sticky;
  z-index: 1;
  top: 10px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 9px 9px -51px auto;
  padding: 0;
  border: 1px solid #82907786;
  border-radius: 50%;
  background: #101910ed;
  color: #eef3ec;
  cursor: pointer;
}
@media (min-width: 710px) {
  .guide-step-illustrated { grid-template-columns: minmax(0, .74fr) minmax(245px, 1.26fr); gap: clamp(16px, 3vw, 43px); }
}
@media (max-width: 709px) {
  .guide { --guide-shot-height: clamp(201px, 45svh, 370px); }
  .guide-step-illustrated .guide-shot { grid-row: 1; }
  .guide-navigation { flex-wrap: wrap; }
  .guide-thumbnails { flex: 1 1 100%; }
  .guide-direction { width: 100%; justify-content: space-between; }
}

.guide-footer { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.guide-footer .landing-button { margin: 0; }
.guide-promo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 11px;
  max-width: 100%;
  padding: 7px 10px 7px 13px;
  border: 1px solid var(--guide-line);
  border-radius: 8px;
  background: var(--guide-card);
}
.guide-promo-label { color: var(--guide-muted); font-size: .79rem; }
.guide-promo code { overflow-wrap: anywhere; font: 700 .9rem ui-monospace, monospace; }
.guide-copy {
  min-height: 37px;
  padding-inline: 10px;
  border: 1px solid var(--guide-line);
  border-radius: 6px;
  background: var(--guide-bg);
  color: var(--guide-ink);
  font: 650 .78rem var(--design-family, "Inter", system-ui, sans-serif);
  cursor: pointer;
}
.guide-copy:hover, .guide-copy:focus-visible { border-color: var(--guide-mark); }
.guide-status:empty { display: none; }
.guide-status { color: var(--guide-mark); font-size: .76rem; }

@media (max-width: 630px) {
  .landing-actions { gap: 8px 13px; }
  .landing-jump { min-height: 39px; padding: 7px 9px; }
  .guide-step { gap: 11px; padding: 10px; }
  .guide-step-text { gap: 8px; }
  .guide-step-number { font-size: 1.35rem; }
  .guide-thumbnail { justify-content: center; padding-inline: 4px; }
  .guide-thumbnail-title { display: none; }
  .guide-direction button { min-height: 40px; }
}
@media (max-width: 370px) {
  .guide-thumbnail img { width: 18px; }
  .guide-thumbnail { gap: 3px; padding-inline: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing.motion-ready *,
  .landing.motion-ready *::before,
  .landing.motion-ready *::after,
  .guide-arrive *,
  .guide-arrive *::after,
  .guide-step-change,
  .guide-step-change .guide-step-image,
  .guide-image-dialog.guide-zoom-motion[open],
  .guide-image-dialog.guide-zoom-motion[open]::backdrop { animation: none !important; transition: none !important; }
  .landing-button[href]::after, .landing-jump, .landing-jump svg { transition: none; }
}