/* ===========================================================================
   Party Replay — landing page
   Dark, high-contrast party palette. Hot pink + acid lime on near-black.
   RTL Hebrew. No framework, no build step.

   Deliberately NOT used: gradient text, coloured glow shadows, neon bloom,
   glassmorphism. The energy comes from flat saturated colour blocking, weight
   and scale — not from effects.
   =========================================================================== */

:root {
  /* surfaces — near-black with a violet cast so the photos read warm on it */
  --bg:         #0B0A10;
  --bg-deep:    #060509;
  --surface:    #15121C;
  --surface-2:  #1E1926;

  /* ink */
  --ink:        #F6F3FF;
  --ink-soft:   #A9A2BC;
  --ink-mute:   #948DAB;
  --ink-dim:    #8A83A0;

  /* lines */
  --line:       rgba(255, 255, 255, 0.10);
  --line-loud:  rgba(255, 255, 255, 0.18);

  /* accents — both carry dark text, which is what keeps them AA-legible */
  --accent:     #FF2E63;   /* hot pink — primary action */
  --accent-2:   #CCFF00;   /* acid lime — highlights, marquee, the loud block */
  --accent-3:   #6C3BFF;   /* violet — occasional third note */
  --on-accent:  #0B0A10;

  --serif: 'Rubik', system-ui, sans-serif;   /* kept as a name; no serif anymore */
  --sans:  'Rubik', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  --r-sm: 8px;
  --r:    12px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;

  --gutter: min(5vw, 64px);
  --maxw:   1200px;
}

/* --------------------------------------------------------------------- base */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Film grain over the whole page. Stops the large flat dark fields from
   looking like dead vector space. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { display: block; max-width: 100%; }
a { color: var(--accent-2); }
a:hover { color: var(--accent-2); }

h1, h2, h3 { margin: 0; }
p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  inset-inline-start: 50%;
  top: -100px;
  transform: translateX(50%);
  z-index: 999;
  background: var(--accent-2);
  color: var(--on-accent);
  padding: 12px 22px;
  border-radius: 0 0 var(--r) var(--r);
  font-weight: 700;
  text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: 0; color: var(--on-accent); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Numerals, prices and Latin fragments inside Hebrew keep their own direction. */
.num { unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.ltr { direction: ltr; unicode-bidi: isolate; }

/* ------------------------------------------------------------ shared pieces */

/* Bracketed technical label — brackets come from CSS so they mirror correctly. */
.kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent-2);
}
.kicker::before { content: "[ "; }
.kicker::after  { content: " ]"; }

.section-title {
  font-weight: 900;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.lede {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 15px 32px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease,
              color .18s ease, transform .18s ease;
}
.btn--solid { background: var(--accent); color: var(--on-accent); }
.btn--solid:hover { background: var(--accent-2); color: var(--on-accent); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-loud); }
.btn--ghost:hover { border-color: var(--accent-2); color: var(--accent-2); transform: translateY(-2px); }

/* ------------------------------------------------------------------- header */

.site-header {
  position: absolute;
  top: 0; inset-inline: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 22px min(4.5vw, 52px);
}

.brand { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.brand__name {
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.04em;
}
.brand__tag { font-size: 12.5px; color: var(--ink-mute); font-weight: 500; }

.site-nav {
  display: flex;
  align-items: center;
  gap: min(24px, 3vw);
  font-size: 14.5px;
  font-weight: 600;
}
.site-nav a { color: var(--ink); text-decoration: none; transition: color .18s ease; }
.site-nav a:hover { color: var(--accent-2); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent) !important;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: background-color .18s ease, transform .18s ease;
}
.nav-cta:hover { background: var(--accent-2); transform: translateY(-2px); }

/* --------------------------------------------------------------------- hero */

.hero { position: relative; height: 260svh; background: var(--bg); }

.hero__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__grid {
  position: relative;
  width: min(1100px, 94vw);
  height: min(72svh, 640px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: min(12px, 1.4vw);
}

.tile {
  border-radius: 14px;
  overflow: hidden;
  background: var(--tint, #2A2233);
  will-change: transform;
}
.tile--wide { grid-column: span 2; }
.tile img { width: 100%; height: 100%; object-fit: cover; }

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Dark radial scrim — a scrim, never a card floating over the animation. */
.hero__scrim {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 145%; height: 135%;
  background: radial-gradient(ellipse 54% 54% at 50% 50%,
              rgba(11,10,16,0.97) 26%,
              rgba(11,10,16,0.86) 50%,
              rgba(11,10,16,0) 74%);
}
.hero__copy {
  position: relative;
  max-width: 900px;
  padding: 0 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.hero__title {
  font-weight: 900;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
/* One line of the headline picks up the lime — colour as emphasis, on a
   plain text run, never a gradient fill. */
.hero__title em { font-style: normal; color: var(--accent-2); }

.hero__sub {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 620px;
  text-wrap: pretty;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.hero__captions {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
/* Sticker-style captions: flat colour, hard edge, a few degrees off true. */
.caption {
  position: absolute;
  opacity: 0;
  background: var(--accent-2);
  color: var(--on-accent);
  border-radius: 999px;
  padding: 16px 44px;
  font-weight: 900;
  font-size: clamp(26px, 4.4vw, 48px);
  letter-spacing: -0.03em;
}
.caption[data-cap="0"] { transform: rotate(-3deg); }
.caption[data-cap="1"] { background: var(--accent); transform: rotate(2.5deg); }
.caption[data-cap="2"] { transform: rotate(-1.5deg); }

.scroll-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* ------------------------------------------------------------- how it works */

.how { max-width: var(--maxw); margin: 0 auto;
       padding: clamp(80px,10vw,140px) var(--gutter) clamp(60px,7vw,90px); }
.how__title { margin: 16px 0 clamp(40px,5vw,64px); max-width: 700px; }
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.step { position: relative; }
/* Outlined numeral. It sits above the heading rather than behind it — at this
   weight it is no longer a ghost, and overlapping text just read as clutter. */
.step__n {
  display: block;
  font-weight: 900;
  font-size: clamp(76px, 8vw, 112px);
  line-height: 0.78;
  letter-spacing: -0.06em;
  margin-bottom: 18px;
  color: transparent;
  -webkit-text-stroke: 2px rgba(204, 255, 0, 0.55);
  user-select: none;
}
.step h3 { position: relative; font-size: 21px; font-weight: 800;
           letter-spacing: -0.02em; margin-bottom: 10px; }
.step p  { position: relative; font-size: 15.5px; line-height: 1.7;
           color: var(--ink-soft); text-wrap: pretty; }

/* ------------------------------------------------------------------ marquee */

.marquee {
  background: var(--accent);
  color: var(--on-accent);
  overflow: hidden;
  padding: 16px 0;
  border-block: 2px solid var(--on-accent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 0;
}
/* The track only animates once JS has cloned enough groups to cover the
   viewport twice over — otherwise the loop shows a bare gap each cycle. */
.marquee__track.is-ready {
  animation: mqScroll var(--mq-duration, 30s) linear infinite;
}
.marquee__group { display: flex; flex: 0 0 auto; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding-inline-end: 28px;
  font-weight: 900;
  font-size: clamp(18px, 2.4vw, 26px);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.marquee__item::after {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--on-accent);
  flex: 0 0 auto;
}
/* RTL: the track is flush to the right edge with its overflow off-screen to
   the LEFT, so it must travel right (positive X) to pull new content in.
   Travelling left just drags it out of frame and opens a gap. */
@keyframes mqScroll { to { transform: translateX(50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* --------------------------------------------------------------------- demo */

.demo { background: var(--surface); border-block: 1px solid var(--line); }
.demo__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(72px,9vw,120px) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 6vw, 90px);
}
.demo__copy { flex: 1 1 400px; max-width: 560px;
              display: flex; flex-direction: column; gap: 20px; }
.demo__toggle { display: flex; gap: 10px; flex-wrap: wrap; }

.seg {
  min-height: 46px;
  padding: 10px 22px;
  border: 2px solid var(--line-loud);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.seg:hover { border-color: var(--accent-2); color: var(--accent-2); }
.seg[aria-pressed="true"] {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: var(--on-accent);
}

.demo__disclaimer {
  margin: 0;
  color: var(--ink-mute);
  font-size: 14px;
  line-height: 1.5;
}

/* ------------------------------------------------------- phone mockup (light)
   Unchanged by request. It stays a bright device against the dark page, with
   its own local light tokens so the global dark palette cannot leak into it.
   Only the brand accent follows the rebrand. */

.demo__phone { flex: 0 1 390px; min-width: 0; max-width: 100%; }

.phone {
  --al-bg:   #FBF8F3;
  --al-ink:  #221B14;
  --al-soft: #6F6459;
  --al-mute: #9A8F80;
  --al-line: #EDE5D8;

  width: min(390px, 100%);
  height: 800px;
  border-radius: 48px;
  overflow: hidden;
  position: relative;
  background: #F2F2F7;
  box-shadow: 0 40px 90px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.10);
  -webkit-font-smoothing: antialiased;
}
.phone__island {
  position: absolute;
  top: 11px; left: 50%;
  transform: translateX(-50%);
  width: 126px; height: 37px;
  border-radius: 24px;
  background: #000;
  z-index: 50;
}
.phone__status {
  position: absolute;
  top: 0; inset-inline: 0;
  z-index: 10;
  display: flex;
  gap: 120px;
  align-items: center;
  padding: 21px 24px 19px;
  font-family: -apple-system, 'SF Pro', system-ui, sans-serif;
}
.phone__status > div { flex: 1; height: 22px; display: flex;
                       align-items: center; justify-content: center; }
.phone__time { font-weight: 590; font-size: 17px; line-height: 22px; color: #000; }
.phone__icons { gap: 7px; }
.phone__home {
  position: absolute;
  bottom: 0; inset-inline: 0;
  z-index: 60;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 8px;
  pointer-events: none;
}
.phone__home span { width: 139px; height: 5px; border-radius: 100px;
                    background: rgba(0,0,0,0.25); }

.album {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  background: var(--al-bg);
  color: var(--al-ink);
  padding-top: 58px;
}
.album__head { padding: 12px 16px 10px; border-bottom: 1px solid var(--al-line); }
.album__couple { font-weight: 800; font-size: 21px; letter-spacing: -0.02em; }
.album__meta { font-size: 12px; color: var(--al-soft); margin-top: 2px; }
.album__live {
  display: flex; align-items: center; gap: 7px;
  margin-top: 8px;
  font-size: 12.5px; font-weight: 700; color: var(--accent);
}
.album__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  animation: mmPulse 1.6s infinite;
}
.album__after { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--al-soft); }
.album__toast {
  margin: 10px 12px 0;
  background: rgba(255, 46, 99, 0.10);
  border: 1px solid rgba(255, 46, 99, 0.30);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  color: #C21447;
}
.album__grid { padding: 10px 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.album__cell {
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #E7DCCB;
}
.album__cell img { width: 100%; height: 100%; object-fit: cover; }
.album__uploading {
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, #EFE8DC 25%, #E0D5C3 50%, #EFE8DC 75%);
  background-size: 200% 100%;
  animation: mmShimmer 1.5s infinite;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; color: var(--al-mute);
}
.album__more {
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  background: #EFE8DC;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; color: var(--al-soft);
}

/* Live vs. after-the-event view of the album */
.album[data-mode="live"]  .only-after { display: none; }
.album[data-mode="after"] .only-live  { display: none; }

.album__cta { margin: auto 14px 14px; padding-top: 8px; }
.album__btn {
  width: 100%;
  min-height: 48px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
}

@keyframes mmPulse   { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
@keyframes mmShimmer { 0% { background-position: 150% 0 } 100% { background-position: -50% 0 } }

/* ----------------------------------------------------------------- packages */

.packages { max-width: var(--maxw); margin: 0 auto;
            padding: clamp(72px,9vw,120px) var(--gutter); }
.packages__title { margin: 16px 0 10px; }
.packages__note { font-size: 16px; color: var(--ink-soft); margin-bottom: clamp(36px,4vw,52px); }
.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  align-items: stretch;
}
.package {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: border-color .18s ease;
}
.package:hover { border-color: var(--line-loud); }
/* The middle tier is called out with a solid accent edge. */
.package--featured {
  background: var(--surface-2);
  border: 2px solid var(--accent);
}
.package__name { font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.package__price { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.package__amount {
  font-weight: 900;
  font-size: 48px;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
/* The shekel sign gets its own box: at this size and tracking it otherwise
   collides with the first digit. */
.package__cur {
  font-size: 0.6em;
  font-weight: 800;
  letter-spacing: 0;
  margin-inline-end: 0.14em;
  vertical-align: 0.1em;
  opacity: 0.75;
}
.package--featured .package__amount { color: var(--accent-2); }
.package__per { font-size: 13px; color: var(--ink-mute); }
.package__list { display: flex; flex-direction: column; gap: 12px;
                 font-size: 14.5px; line-height: 1.5; }
.package__item { display: flex; gap: 10px; align-items: baseline; }
.package__item svg { flex: 0 0 auto; transform: translateY(2px); color: var(--accent-2); }
/* Not-included rows stay visible with the reason spelled out — a hidden row
   is an undiscoverable row. */
.package__item--off { color: var(--ink-dim); }
.package__item--off svg { color: var(--ink-dim); }
.package__cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease,
              color .18s ease, transform .18s ease;
}
.package__cta--ghost { border: 2px solid var(--line-loud); color: var(--ink); }
.package__cta--ghost:hover { border-color: var(--accent-2); color: var(--accent-2); transform: translateY(-2px); }
.package__cta--solid { background: var(--accent); color: var(--on-accent); }
.package__cta--solid:hover { background: var(--accent-2); color: var(--on-accent); transform: translateY(-2px); }

/* ---------------------------------------------------------------------- faq */

.faq { background: var(--surface); border-block: 1px solid var(--line); }
.faq__inner { max-width: 800px; margin: 0 auto;
              padding: clamp(60px,7vw,90px) var(--gutter) clamp(80px,10vw,120px); }
.faq__title { font-size: clamp(30px, 4vw, 46px); margin: 16px 0 28px; }
.faq__list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 2px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: color .18s ease;
}
.faq summary:hover { color: var(--accent-2); }
.faq summary::-webkit-details-marker { display: none; }
.faq__icon { color: var(--accent-2); font-size: 24px; font-weight: 400;
             line-height: 1; transition: transform .2s ease; }
.faq details[open] .faq__icon { transform: rotate(45deg); }
.faq p { font-size: 15px; line-height: 1.7; color: var(--ink-soft);
         padding: 0 2px 22px; text-wrap: pretty; }

/* --------------------------------------------------------------------- lead */

.lead { background: var(--bg-deep); color: var(--ink); }
.lead__inner {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(80px,10vw,130px) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.lead__title {
  font-weight: 900;
  font-size: clamp(34px, 5.5vw, 68px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.lead__sub { font-size: 16.5px; line-height: 1.65;
             color: var(--ink-soft); max-width: 520px; text-wrap: pretty; }
.lead__wa { font-size: 17px; padding: 17px 36px; min-height: 56px; }

.lead__or {
  display: flex; align-items: center; gap: 14px;
  width: 100%; max-width: 480px;
  color: var(--ink-mute);
  font-size: 13px;
}
.lead__or span { flex: 1; height: 1px; background: var(--line); }

.lead__form { display: flex; flex-direction: column; gap: 16px;
              width: 100%; max-width: 560px; }
.lead__chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.chip {
  min-height: 44px;
  padding: 9px 22px;
  border: 2px solid var(--line-loud);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.chip:hover { border-color: var(--accent-2); color: var(--accent-2); }
.chip[aria-pressed="true"] {
  border-color: var(--accent-2);
  background: var(--accent-2);
  color: var(--on-accent);
}

.lead__fields { display: flex; flex-wrap: wrap; gap: 12px; }
.lead__fields input {
  min-height: 52px;
  padding: 12px 18px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color .18s ease;
}
.lead__fields input::placeholder { color: var(--ink-mute); }
.lead__fields input:focus  { border-color: var(--accent-2); }
.lead__fields input[type="text"] { flex: 1 1 160px; }
.lead__fields input[type="tel"]  { flex: 1 1 150px; }
.lead__fields input[type="date"] { flex: 1 1 160px; color-scheme: dark; }
.lead__fields input[aria-invalid="true"] { border-color: var(--accent); }

.lead__submit {
  min-height: 52px;
  border: 2px solid var(--line-loud);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-weight: 700;
  font-size: 15.5px;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.lead__submit:hover { border-color: var(--accent-2); color: var(--accent-2); }

.lead__error { font-size: 13.5px; font-weight: 600; color: var(--accent); }
.lead__error:empty { display: none; }
.lead__privacy { font-size: 12px; color: var(--ink-mute); line-height: 1.6; }

/* ------------------------------------------------------------------- footer */

.site-footer { background: var(--bg-deep); color: var(--ink);
               border-top: 1px solid var(--line); }
.site-footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 56px var(--gutter) 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
}
.site-footer__brand { display: flex; flex-direction: column; gap: 8px; max-width: 280px; }
.site-footer__brand b { font-weight: 900; font-size: 24px; letter-spacing: -0.04em; }
.site-footer__brand span { font-size: 13px; color: var(--ink-mute); line-height: 1.6; }
.site-footer__links { display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.site-footer__links a { color: var(--ink-soft); text-decoration: none;
                        transition: color .18s ease; }
.site-footer__links a:hover { color: var(--accent-2); }
.site-footer__b2b { display: flex; flex-direction: column; gap: 8px; max-width: 280px; }
.site-footer__b2b b { font-size: 14px; font-weight: 700; }
.site-footer__b2b a { font-size: 13.5px; color: var(--accent); text-decoration: none;
                      transition: color .18s ease; }
.site-footer__b2b a:hover { color: var(--accent-2); }
.site-footer__legal {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter) 32px;
  font-size: 12px;
  color: var(--ink-dim);
}

/* --------------------------------------------------------------- mobile trim
   The page ran to ~12.5 screens on a phone — a lot of scrolling for an ad
   landing page. This tightens the vertical rhythm and shortens the hero stage.
   The hero's per-tile animation window in site.js was lengthened at the same
   time, so a shorter stage does not make the assembly play faster. */

@media (max-width: 640px) {
  .hero { height: 200svh; }

  .how { padding: 56px var(--gutter) 44px; }
  .how__title { margin: 12px 0 30px; }
  .steps { gap: 26px; }
  .step__n { font-size: 62px; margin-bottom: 12px; }

  .demo__inner { padding: 52px var(--gutter); gap: 30px; }
  .packages { padding: 52px var(--gutter); }
  .packages__title { margin: 12px 0 8px; }
  .packages__note { margin-bottom: 26px; }

  /* Three stacked pricing cards cost ~1,650px of scroll on a phone. Swiping
     them costs ~560px and loses nothing: every card keeps its full feature
     list, the next one peeks in from the edge so it is obviously swipeable,
     and scroll-snap makes it land cleanly. Keyboard focus still pulls an
     off-screen card into view. */
  .package-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 10px;
    scrollbar-width: none;
  }
  .package-grid::-webkit-scrollbar { display: none; }
  .package {
    flex: 0 0 82%;
    scroll-snap-align: center;
    padding: 24px 20px;
    gap: 14px;
  }
  .package__list { gap: 10px; }
  .package__amount { font-size: 40px; }

  /* A real phone is 390x800. At ~336px wide the fixed 800px height was
     stretching the mockup as well as costing scroll. */
  .phone { height: auto; aspect-ratio: 390 / 800; }

  .faq__inner { padding: 52px var(--gutter) 60px; }
  .faq__title { margin: 12px 0 20px; }
  .faq summary { padding: 16px 2px; }
  .faq p { padding-bottom: 18px; }

  .lead__inner { padding: 56px var(--gutter); gap: 18px; }
  .site-footer__inner { padding: 40px var(--gutter) 28px; gap: 28px; }
}

/* ------------------------------------------------------------------- motion */

/* Without JS, or with reduced motion, the hero is one static screen instead
   of a 260svh scroll stage, and nothing loops. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { height: 100svh; }
  .caption { display: none; }
  .scroll-hint { display: none; }
  .album__dot, .album__uploading { animation: none; }
  .marquee__track, .marquee__track.is-ready { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ================================================================== legal
   Accessibility statement and privacy notice. Same language as the landing
   page, but quiet — these are documents, not a pitch. */

.legal-header {
  border-bottom: 1px solid var(--line);
  background: var(--bg-deep);
}
.legal-header__inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 22px var(--gutter);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.legal-header a.brand__name { text-decoration: none; color: var(--ink); }
.legal-back {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-2);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.legal-back svg { transition: transform .18s ease; }
.legal-back:hover svg { transform: translateX(-4px); }

.legal {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 84px) var(--gutter) clamp(64px, 9vw, 110px);
}
.legal h1 {
  font-weight: 900;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-bottom: 14px;
  text-wrap: balance;
}
.legal__updated { font-size: 13.5px; color: var(--ink-mute); margin-bottom: 40px; }
.legal h2 {
  font-weight: 800;
  font-size: clamp(20px, 2.6vw, 26px);
  letter-spacing: -0.02em;
  margin: 44px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.legal h2:first-of-type { border-top: none; padding-top: 0; }
.legal h3 { font-size: 17px; font-weight: 700; margin: 24px 0 8px; }
.legal p, .legal li { font-size: 16px; line-height: 1.75; color: var(--ink-soft); }
.legal p + p { margin-top: 14px; }
.legal ul, .legal ol { margin: 14px 0; padding-inline-start: 24px; }
.legal li + li { margin-top: 9px; }
.legal li::marker { color: var(--accent-2); }
.legal strong { color: var(--ink); font-weight: 700; }
.legal a { color: var(--accent-2); }

/* Contact block — the coordinator / privacy-request details. */
.legal-contact {
  background: var(--surface);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--accent-2);
  border-radius: var(--r-md);
  padding: 22px 24px;
  margin: 20px 0;
}
.legal-contact dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; }
.legal-contact dt { font-weight: 700; color: var(--ink); font-size: 15px; }
.legal-contact dd { margin: 0; font-size: 15px; color: var(--ink-soft); }
.legal-contact a { font-weight: 600; }

/* Anything still awaiting a real value is flagged loudly rather than quietly
   shipped as plausible-looking text. */
.legal-todo {
  background: rgba(255, 46, 99, 0.12);
  border: 1px dashed var(--accent);
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin: 20px 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
}
.legal-todo b { color: var(--accent); }

/* ============================================ accessibility widget (a11y)
   Chrome, so frosted glass is the right material here — unlike the flat
   data/content surfaces elsewhere on the page. */

.a11y-fab {
  position: fixed;
  inset-block-end: 22px;
  /* Inline-start is the RIGHT in RTL. */
  inset-inline-start: 22px;
  z-index: 10000;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border: 2px solid var(--on-accent);
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0,0,0,0.45);
  transition: transform .18s ease, background-color .18s ease;
}
.a11y-fab svg { width: 28px; height: 28px; }
.a11y-fab:hover { background: var(--accent-2); transform: translateY(-2px); }

.a11y-panel {
  position: fixed;
  inset-block-end: 88px;
  inset-inline-start: 22px;
  z-index: 10000;
  width: min(310px, calc(100vw - 44px));
  padding: 18px;
  border: 1px solid var(--line-loud);
  border-radius: var(--r-lg);
  background: rgba(21, 18, 28, 0.92);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 18px 50px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: min(76vh, 620px);
  overflow-y: auto;
}
.a11y-panel[hidden] { display: none; }

.a11y-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.a11y-panel__head h2 { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.a11y-x {
  width: 34px; height: 34px;
  border: 1px solid var(--line-loud);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
}
.a11y-x:hover { border-color: var(--accent-2); color: var(--accent-2); }

.a11y-group { display: flex; flex-direction: column; gap: 7px; }
.a11y-label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--ink-mute); }
.a11y-row { display: flex; align-items: stretch; gap: 8px; }
.a11y-row button {
  flex: 1;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line-loud);
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.a11y-row button:hover:not(:disabled) { border-color: var(--accent-2); color: var(--accent-2); }
.a11y-row button:disabled { opacity: .4; cursor: not-allowed; }
.a11y-row button[aria-pressed="true"] {
  background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent);
}
.a11y-level {
  min-width: 62px;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.a11y-toggle {
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--line-loud);
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  text-align: start;
  cursor: pointer;
  position: relative;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.a11y-toggle::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 14px;
  transform: translateY(-50%);
  width: 12px; height: 12px;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: .45;
}
.a11y-toggle[aria-pressed="true"] {
  background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent);
}
.a11y-toggle[aria-pressed="true"]::after { background: currentColor; opacity: 1; }
.a11y-toggle:hover:not([aria-pressed="true"]) { border-color: var(--accent-2); color: var(--accent-2); }

.a11y-reset {
  min-height: 44px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: transparent;
  color: var(--accent);
  font-family: inherit;
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
}
.a11y-reset:hover { background: var(--accent); color: var(--on-accent); }

.a11y-note { font-size: 12px; line-height: 1.6; color: var(--ink-mute); }
.a11y-note a { color: var(--accent-2); }

/* ---------------------------------------------------- widget: link mode */

html[data-a11y-links] a {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  outline: 1px dashed currentColor;
  outline-offset: 3px;
}

/* --------------------------------------------------- widget: motion off */

html[data-a11y-motion] *,
html[data-a11y-motion] *::before,
html[data-a11y-motion] *::after {
  animation-duration: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
}
html[data-a11y-motion] { scroll-behavior: auto !important; }

/* ------------------------------------------------ widget: readable font */

html[data-a11y-font] body,
html[data-a11y-font] body * {
  font-family: Arial, "Segoe UI", Tahoma, sans-serif !important;
  letter-spacing: 0.03em !important;
  word-spacing: 0.08em !important;
}
html[data-a11y-font] p,
html[data-a11y-font] li { line-height: 1.9 !important; }

/* ------------------------------------------------- widget: high contrast
   Both modes work by swapping the tokens, so every component that goes
   through them follows automatically. The handful of places that hardcode a
   colour are corrected explicitly below. */

html[data-a11y-contrast="dark"] {
  --bg: #000000; --bg-deep: #000000; --surface: #000000; --surface-2: #0B0B0B;
  --ink: #FFFFFF; --ink-soft: #FFFFFF; --ink-mute: #F2F2F2; --ink-dim: #E6E6E6;
  --line: #FFFFFF; --line-loud: #FFFFFF;
  --accent: #FFFF00; --accent-2: #FFFF00; --accent-3: #FFFF00;
  --on-accent: #000000;
}
html[data-a11y-contrast="light"] {
  --bg: #FFFFFF; --bg-deep: #FFFFFF; --surface: #FFFFFF; --surface-2: #F2F2F2;
  --ink: #000000; --ink-soft: #000000; --ink-mute: #1A1A1A; --ink-dim: #262626;
  --line: #000000; --line-loud: #000000;
  --accent: #0000CC; --accent-2: #0000CC; --accent-3: #0000CC;
  --on-accent: #FFFFFF;
}

/* Grain is texture, not information — it only muddies a high-contrast page. */
html[data-a11y-contrast] body::after { display: none; }

/* Hardcoded values that would otherwise fight the swapped tokens. */
html[data-a11y-contrast="dark"] .hero__scrim {
  background: radial-gradient(ellipse 54% 54% at 50% 50%,
              rgba(0,0,0,0.97) 30%, rgba(0,0,0,0.9) 55%, rgba(0,0,0,0) 76%);
}
html[data-a11y-contrast="light"] .hero__scrim {
  background: radial-gradient(ellipse 54% 54% at 50% 50%,
              rgba(255,255,255,0.97) 30%, rgba(255,255,255,0.9) 55%, rgba(255,255,255,0) 76%);
}
html[data-a11y-contrast="light"] .tile { background: #E6E6E6 !important; }
html[data-a11y-contrast="dark"]  .tile { background: #1A1A1A !important; }
html[data-a11y-contrast] .step__n { -webkit-text-stroke-color: var(--accent-2); }
html[data-a11y-contrast] .package--featured { border-color: var(--accent); }
html[data-a11y-contrast] .a11y-panel { background: var(--bg); backdrop-filter: none; }
html[data-a11y-contrast] .album__toast { color: #8A0F33; }