/* ==========================================================================
   Shabbos Kiddush sponsorship page — afytd.org/kiddush
   Shabbos DAY in the Yeshiva's courtyard in Tzfat: deep mountain-sky blues,
   sunlit stone arches, golden light — the Kiddush happens after davening in
   the open air, so the page is daylight, not candlelight.

   No web fonts. The rest of this repo runs on the system Inter/system-ui stack
   with Georgia for display type (see styles.css), so this page does the same —
   nothing to download, nothing to wait for on a phone opening a WhatsApp link.

   Every decorative animation is transform/opacity only, and all of them are
   switched off under prefers-reduced-motion at the bottom of this file.
   ========================================================================== */

:root {
  /* Sky, zenith to horizon. The names are positional (sky-1 = top of page). */
  --sky-1: #0e3767;
  --sky-2: #17548c;
  --sky-3: #2670a8;
  --sky-4: #3b86ba;

  --ivory: #fdfbf3;
  --muted: #e2ebf2;
  --hint: #c6d7e3;

  --gold: #f0c87e;
  --gold-bright: #ffd694;
  --gold-deep: #c79a44;

  --glass: rgba(255, 255, 255, 0.08);
  --glass-strong: rgba(255, 255, 255, 0.12);
  --glass-line: rgba(255, 236, 190, 0.3);
  --glass-line-soft: rgba(255, 255, 255, 0.16);

  /* Sunlit courtyard stone (the arches, the ledge). */
  --stone-light: #f7eeda;
  --stone: #e8d9ba;
  --stone-shade: #c9b48d;

  --ok: #a5e8bf;
  --bad: #ffb3b3;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --ease-out: cubic-bezier(0.22, 0.7, 0.28, 1);
  --spring: cubic-bezier(0.22, 1.4, 0.36, 1);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--sky-1);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

body.modal-open { overflow: hidden; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

/* A fieldset defaults to `min-width: min-content`, which no other element does.
   Left alone, the horizontal week strip inside step 1 refuses to shrink and
   drags the whole page wider than the phone it is being read on. */
fieldset { min-width: 0; }

a { color: var(--gold-bright); }
a:hover { color: #fff0d2; }

h1, h2, h3, blockquote { font-family: var(--serif); font-weight: 600; }

.container {
  width: min(1120px, calc(100% - 36px));
  margin: 0 auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 60;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--gold-bright);
  color: #241505;
  font-weight: 700;
  text-decoration: none;
  transition: top 180ms var(--ease-out);
}

.skip-link:focus { top: 12px; }

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

/* --------------------------------------------------------------------------
   Twilight sky + embers
   -------------------------------------------------------------------------- */

.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(1100px 640px at 50% -10%, rgba(255, 244, 205, 0.4), transparent 62%),
    radial-gradient(880px 640px at 84% 16%, rgba(255, 232, 170, 0.16), transparent 64%),
    radial-gradient(820px 640px at 8% 82%, rgba(120, 200, 220, 0.14), transparent 68%),
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 30%, var(--sky-3) 62%, var(--sky-4) 88%, #4a90c0 100%);
}

/* Repurposed from ember-rise: the same slow drift now reads as dust motes
   glinting in the courtyard sunlight — softer, whiter, less of them visible
   at once. */
.ember {
  position: absolute;
  bottom: -6vh;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8e1 0%, rgba(255, 248, 225, 0) 70%);
  opacity: 0;
  animation-name: ember-rise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

@keyframes ember-rise {
  0%   { transform: translate3d(0, 0, 0) scale(0.5); opacity: 0; }
  8%   { opacity: 0.5; }
  50%  { transform: translate3d(16px, -52vh, 0) scale(1.15); opacity: 0.34; }
  88%  { opacity: 0.16; }
  100% { transform: translate3d(-12px, -108vh, 0) scale(0.5); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */

.topbar { padding: 20px 0 4px; }

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.brand-lockup {
  display: block;
  width: min(148px, 42vw);
  /* The logo art is dark ink on transparent; lift it onto the night sky. */
  filter: brightness(0) invert(1) opacity(0.86);
  transition: filter 200ms var(--ease-out);
}

.brand-lockup:hover { filter: brightness(0) invert(1) opacity(1); }

.logo { display: block; width: 100%; height: auto; }

.bsd {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: 0.02em;
}

/* English ⇄ עברית toggle, injected by kiddush.js between the logo and בס״ד. */
.lang-toggle {
  margin-inline-start: auto;
  padding: 7px 16px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass);
  color: var(--ivory);
  font-size: 13.5px;
  font-weight: 600;
  transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out);
}

.lang-toggle:hover {
  border-color: var(--gold);
  background: var(--glass-strong);
}

/* RTL (Hebrew) adjustments. Flex/grid flip on their own; the two exceptions
   are pinned here: בס״ד stays in the top-right corner per the brand rule, and
   Hebrew gets a font stack with real Hebrew glyphs for the display type. */
[dir="rtl"] .topbar-inner { flex-direction: row-reverse; }
[dir="rtl"] .lang-toggle { margin-inline-start: 0; margin-inline-end: auto; }

html[lang="he"] {
  --serif: "SF Hebrew", "Arial Hebrew", "Noto Serif Hebrew", David, Georgia, serif;
}

html[lang="he"] h1,
html[lang="he"] h2,
html[lang="he"] h3 {
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Hero — courtyard arches, kiddush cup, headline
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: 8px 0 46px;
}

/* The courtyard itself — a Tzfat-style painting of the real thing (roses on
   the arches, lemon and olive trees, the fountain, the covered deck) — laid
   softly behind the kos and faded into the sky before the headline, so the
   text always sits on clean blue. Tinted toward the page's own sky so the
   painting reads as scenery, not a pasted photo. */
.hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: min(1400px, 100vw);
  height: min(600px, 96vw);
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, rgba(23, 84, 140, 0.42) 0%, rgba(23, 84, 140, 0.3) 48%, rgba(23, 84, 140, 0.62) 100%),
    url("/assets/images/kiddush-courtyard.jpg") center 32% / cover no-repeat;
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.95) 46px, rgba(0, 0, 0, 0.85) 52%, transparent 94%),
    radial-gradient(120% 100% at 50% 40%, #000 55%, transparent 98%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.95) 46px, rgba(0, 0, 0, 0.85) 52%, transparent 94%),
    radial-gradient(120% 100% at 50% 40%, #000 55%, transparent 98%);
  mask-composite: intersect;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  max-width: 820px;
}


.tableau {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 46px;
  height: 244px;
  margin-bottom: 6px;
}

.tableau-glow {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 560px;
  height: 380px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 72%, rgba(255, 243, 200, 0.5) 0%, rgba(255, 236, 170, 0.18) 34%, rgba(255, 236, 170, 0) 68%);
  filter: blur(10px);
  animation: breathe 6.5s ease-in-out infinite;
  will-change: transform, opacity;
  pointer-events: none;
}

@keyframes breathe {
  0%, 100% { transform: translateX(-50%) scale(1);     opacity: 0.86; }
  50%      { transform: translateX(-50%) scale(1.075); opacity: 1; }
}

.tablecloth {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(620px, 96%);
  height: 5px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(247, 238, 218, 0.75) 16%, #fff7e6 50%, rgba(247, 238, 218, 0.75) 84%, transparent);
  box-shadow: 0 6px 18px rgba(9, 40, 70, 0.35);
}

/* The arches, roses, trees, fountain and covered deck all live in the
   courtyard painting behind the hero (.hero::before) — the kos stands alone
   in front of it. */

/* Kiddush cup -------------------------------------------------------------- */

.cup {
  position: relative;
  margin-bottom: 2px;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.55));
}

.cup svg { display: block; }

.cup-shine {
  animation: cup-shine 7s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes cup-shine {
  0%        { transform: translateX(0) skewX(-18deg);    opacity: 0; }
  10%       { opacity: 0.3; }
  34%       { opacity: 0.3; }
  52%, 100% { transform: translateX(200px) skewX(-18deg); opacity: 0; }
}

/* The overflowing kos: wine beads at the trail tip, lets go, falls, and pools
   on the foot. Transforms and opacity only, so it stays cheap. Under reduced
   motion the universal kill runs each animation once in 0.001ms and returns to
   base styles: trails full, the drop resting at the trail tip, the pool hidden
   by its base opacity — a coherent still illustration. */
.wine-drip {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: wine-drip 7s ease-in-out infinite alternate;
}

.wine-drip-2 {
  animation-duration: 9s;
  animation-delay: -3.4s;
}

@keyframes wine-drip {
  from { transform: scaleY(0.9); }
  to   { transform: scaleY(1); }
}

.wine-drop {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: wine-drop 5.6s ease-in infinite;
}

@keyframes wine-drop {
  0%   { transform: translateY(0) scale(0.45); opacity: 0.55; }
  42%  { transform: translateY(0) scale(1); opacity: 0.95; }
  46%  { transform: translateY(3px) scale(1.05, 1.2); opacity: 0.95; }
  66%  { transform: translateY(54px) scale(1, 1.12); opacity: 0.95; }
  70%, 100% { transform: translateY(54px) scale(0.4); opacity: 0; }
}

.wine-pool {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  opacity: 0;
  animation: wine-pool 5.6s ease-out infinite;
}

@keyframes wine-pool {
  0%, 63% { transform: scale(0.4, 0.5); opacity: 0; }
  68%     { transform: scale(1.25, 1); opacity: 0.85; }
  86%     { transform: scale(1, 0.9); opacity: 0.35; }
  100%    { transform: scale(0.9, 0.8); opacity: 0; }
}

.wine-surface {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: wine-slosh 4.8s ease-in-out infinite alternate;
}

@keyframes wine-slosh {
  from { transform: scaleX(0.995) translateY(0); }
  to   { transform: scaleX(1.02) translateY(-0.6px); }
}

.wine-glint {
  transform-box: fill-box;
  animation: wine-glint 4.8s ease-in-out infinite alternate;
}

@keyframes wine-glint {
  from { transform: translateX(-2.5px); opacity: 0.55; }
  to   { transform: translateX(3px); opacity: 0.85; }
}

/* Hero copy ---------------------------------------------------------------- */

.eyebrow {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0 0 18px;
  font-size: clamp(38px, 7.4vw, 74px);
  line-height: 1.03;
  letter-spacing: -0.015em;
  color: #fffaf0;
  text-shadow: 0 0 46px rgba(255, 186, 96, 0.28);
}

.hero h1 em {
  display: block;
  font-style: italic;
  background: linear-gradient(100deg, var(--gold-deep), var(--gold-bright) 42%, #fff3d6 58%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  max-width: 620px;
  margin: 0 0 22px;
  color: var(--muted);
  font-size: clamp(16px, 2.1vw, 19px);
  line-height: 1.62;
}

.hero-sub:last-of-type { margin-bottom: 28px; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  overflow: hidden;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out),
              background 200ms var(--ease-out), border-color 200ms var(--ease-out);
}

/* Sheen sweep on hover. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.4) 48%, transparent 64%);
  transform: translateX(-130%);
  transition: transform 760ms var(--ease-out);
  pointer-events: none;
}

.btn:hover::after { transform: translateX(130%); }

.btn-gold {
  background: linear-gradient(160deg, #ffdda6 0%, var(--gold) 46%, #d9a44c 100%);
  color: #2a1a05;
  box-shadow: 0 14px 34px rgba(214, 158, 70, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn-gold:hover {
  color: #2a1a05;
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(214, 158, 70, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.btn-ghost {
  border-color: var(--glass-line);
  background: var(--glass);
  color: var(--ivory);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn-ghost:hover {
  color: #fff;
  border-color: rgba(233, 192, 120, 0.5);
  background: var(--glass-strong);
  transform: translateY(-2px);
}

.btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; }

.btn-wa svg { flex: none; color: #6fdc8c; }

.btn[disabled] { opacity: 0.6; cursor: wait; transform: none; }
.btn[disabled]::after { display: none; }

.link-button {
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--hint);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-button:hover { color: var(--gold-bright); }

/* --------------------------------------------------------------------------
   Shared card + reveal
   -------------------------------------------------------------------------- */

.card {
  border: 1px solid var(--glass-line-soft);
  border-radius: 20px;
  background: linear-gradient(158deg, var(--glass-strong), rgba(255, 255, 255, 0.025));
  backdrop-filter: blur(16px) saturate(118%);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

html.js .reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 760ms var(--ease-out),
    transform 760ms var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms);
  will-change: transform, opacity;
}

html.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

.section-title {
  margin: 0 0 10px;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.1;
  color: #fffaf0;
}

/* --------------------------------------------------------------------------
   How it works
   -------------------------------------------------------------------------- */

.how { padding: 26px 0 10px; }

.how .section-title { text-align: center; margin-bottom: 26px; }

.how-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.how-step { padding: 26px 24px 24px; }

.how-num {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  border: 1px solid var(--glass-line);
  border-radius: 50%;
  background: rgba(233, 192, 120, 0.1);
  color: var(--gold-bright);
  font-family: var(--serif);
  font-size: 18px;
}

.how-step h3 {
  margin: 0 0 8px;
  font-size: 20px;
  color: #fffaf0;
}

.how-step p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   The Alter Rebbe
   -------------------------------------------------------------------------- */

.quote-section { padding: 64px 0 58px; }

.quote {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 22px;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 12px;
  text-align: center;
}

.quote-rule {
  width: min(240px, 60%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep) 30%, var(--gold-bright) 50%, var(--gold-deep) 70%, transparent);
}

.quote-mark {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: 190px;
  line-height: 1;
  color: rgba(233, 192, 120, 0.11);
  pointer-events: none;
  user-select: none;
}

.quote blockquote {
  position: relative;
  margin: 6px 0 0;
  font-size: clamp(23px, 3.5vw, 38px);
  line-height: 1.32;
  font-style: italic;
  letter-spacing: -0.005em;
  color: #fff6e6;
  text-wrap: balance;
}

.quote figcaption {
  color: var(--gold);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Sponsor form
   -------------------------------------------------------------------------- */

.sponsor { padding: 8px 0 60px; scroll-margin-top: 20px; }

.sponsor-head {
  max-width: 640px;
  margin: 0 auto 26px;
  text-align: center;
}

.sponsor-lede {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
}

.noscript-note {
  max-width: 720px;
  margin: 0 auto 20px;
  padding: 16px 18px;
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  background: rgba(255, 154, 154, 0.08);
  text-align: center;
}

.sponsor-form {
  max-width: 780px;
  margin: 0 auto;
  padding: 34px 32px 30px;
}

.step {
  margin: 0 0 34px;
  padding: 0 0 30px;
  border: 0;
  border-bottom: 1px solid var(--glass-line-soft);
}

.step:last-of-type { border-bottom: 0; padding-bottom: 6px; }

.step > legend {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  padding: 0;
}

.step-num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--glass-line);
  border-radius: 50%;
  background: rgba(233, 192, 120, 0.12);
  color: var(--gold-bright);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1;
}

.step-title {
  font-family: var(--serif);
  font-size: 23px;
  color: #fffaf0;
}

.step-lede {
  margin: 12px 0 18px;
  color: var(--muted);
  font-size: 15px;
}

.hint {
  display: block;
  margin: 10px 0 0;
  color: var(--hint);
  font-size: 13.5px;
  line-height: 1.55;
}

/* Inline links inside body copy are only ~16px tall. Vertical padding grows the
   touch target on a phone without moving a single line of text. */
.hint a,
.picker-hint a,
.coordinate-card p a,
.noscript-note a { padding-block: 7px; }

.req { color: var(--gold); }

/* Calendar picker ----------------------------------------------------------
   A year of Shabbosim, grouped by month, scrolling inside a fixed-height
   panel with sticky month headers. Every row is a radio in the same `week`
   group the old strip used, so the rest of the form logic is untouched. */

.picker { min-width: 0; margin-top: 16px; }

.cal {
  max-height: 460px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--glass-line-soft);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  scrollbar-width: thin;
  scrollbar-color: rgba(233, 192, 120, 0.4) transparent;
}

.cal::-webkit-scrollbar { width: 6px; }
.cal::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 99px; }
.cal::-webkit-scrollbar-thumb { background: rgba(233, 192, 120, 0.36); border-radius: 99px; }

.cal-month-name {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0;
  padding: 9px 16px 7px;
  background: rgba(21, 66, 106, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--gold);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cal-week { display: block; }

.cal-week input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.cal-week-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-inline-start: 3px solid transparent;
  cursor: pointer;
  transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.cal-week-card:hover { background: rgba(255, 214, 148, 0.09); }

.cal-week input:checked + .cal-week-card {
  background: linear-gradient(90deg, rgba(255, 214, 148, 0.18), rgba(255, 214, 148, 0.04));
  border-inline-start-color: var(--gold);
}

.cal-week input:focus-visible + .cal-week-card {
  outline: 3px solid var(--gold-bright);
  outline-offset: -3px;
}

.cal-day {
  display: grid;
  justify-items: center;
  gap: 1px;
}

.cal-day b {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  color: #fffaf0;
}

.cal-day small {
  color: var(--hint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cal-day-question b { color: var(--gold); }

.cal-main { display: grid; gap: 1px; min-width: 0; }

.cal-parasha {
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.25;
  color: #fffaf0;
  overflow-wrap: anywhere;
}

.cal-hebrew { color: var(--hint); font-size: 12.5px; }

.cal-status {
  justify-self: end;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cal-status.is-open { color: var(--ok); border: 1px solid rgba(140, 214, 160, 0.4); }
.cal-status.is-partial { color: var(--gold-bright); border: 1px solid rgba(233, 192, 120, 0.5); }
.cal-status.is-full { color: var(--hint); border: 1px solid rgba(255, 255, 255, 0.18); }

/* Fully sponsored weeks stay selectable — extra gifts roll toward an
   unsponsored Shabbos per the note under the tiers — but read as spoken-for. */
.cal-week.is-full .cal-week-card { opacity: 0.72; }
.cal-week.is-full .cal-week-card:hover,
.cal-week.is-full input:checked + .cal-week-card { opacity: 1; }

.cal-coordinate .cal-week-card {
  border-top: 0;
  border-bottom: 1px dashed rgba(233, 192, 120, 0.3);
  background: rgba(255, 255, 255, 0.02);
}

.cal-skeleton {
  height: 54px;
  margin: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.045) 30%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.045) 70%);
  background-size: 260% 100%;
  animation: shimmer 1.5s linear infinite;
}

@keyframes shimmer {
  0%   { background-position: 130% 0; }
  100% { background-position: -130% 0; }
}

.picker-loading {
  margin: 4px 0 0;
  color: var(--hint);
  font-size: 13.5px;
}

.picker-hint { margin-top: 14px; }

.picker-fallback { margin-top: 16px; }

/* Tiers -------------------------------------------------------------------- */

.tiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.tier { position: relative; display: block; }

.tier-flagship { grid-column: 1 / -1; }

.tier input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.tier-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 4px;
  height: 100%;
  min-height: 118px;
  padding: 18px 16px 16px;
  overflow: hidden;
  border: 1px solid var(--glass-line-soft);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  cursor: pointer;
  transition: transform 260ms var(--ease-out), border-color 220ms var(--ease-out),
              box-shadow 260ms var(--ease-out), background 220ms var(--ease-out);
}

.tier-name {
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tier-tagline {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.2;
  color: #fffaf0;
}

.tier-amount {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1.1;
  color: #fffaf0;
}

.tier-shekel {
  color: var(--hint);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.tier-note {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.tier-plan {
  margin-top: 10px;
  color: var(--gold);
  font-size: 12.5px;
  font-weight: 600;
}

/* The rollover promise: what happens when a Shabbos raises more than a full
   Kiddush. Styled as a quiet reassurance, not a legal disclaimer. */
.overflow-note {
  margin: 18px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--glass-line-soft);
  border-left: 3px solid rgba(233, 192, 120, 0.55);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.tier-card:hover {
  transform: translateY(-3px);
  border-color: rgba(233, 192, 120, 0.5);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38);
}

.tier input:checked + .tier-card {
  border-color: var(--gold);
  background: linear-gradient(160deg, rgba(255, 214, 148, 0.2), rgba(255, 168, 90, 0.06));
  box-shadow: 0 0 0 1px rgba(255, 214, 148, 0.45), 0 18px 40px rgba(214, 158, 70, 0.24);
  animation: tap-spring 460ms var(--spring);
}

.tier input:focus-visible + .tier-card {
  outline: 3px solid var(--gold-bright);
  outline-offset: 3px;
}

/* The $600 card carries the weight of the page. */
.tier-flagship .tier-card {
  min-height: 0;
  padding: 24px 26px 22px;
  border-color: rgba(233, 192, 120, 0.42);
  background:
    radial-gradient(600px 200px at 82% 0%, rgba(255, 186, 96, 0.2), transparent 62%),
    linear-gradient(160deg, rgba(255, 214, 148, 0.13), rgba(255, 255, 255, 0.03));
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.tier-flagship .tier-amount { font-size: 46px; }

/* Keep the tagline clear of the corner banner at every width. */
.tier-flagship .tier-tagline { padding-right: 86px; }

.tier-flagship input:checked + .tier-card {
  box-shadow: 0 0 0 1px rgba(255, 214, 148, 0.6), 0 26px 60px rgba(214, 158, 70, 0.34);
}

/* Corner banner: a horizontal band pinned past the top-right corner and turned
   45deg, so `overflow: hidden` on the card clips it into a clean flag. */
.tier-ribbon {
  position: absolute;
  top: 22px;
  right: -56px;
  width: 200px;
  /* Asymmetric padding nudges the centred label down the 45deg axis so it
     lands in the middle of the wedge the card corner actually leaves visible. */
  padding: 5px 0 5px 26px;
  transform: rotate(45deg);
  background: linear-gradient(100deg, var(--gold-deep), var(--gold-bright));
  color: #2a1a05;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.tier-other .tier-card { min-height: 0; }

.other-amount { margin-top: 16px; }

/* Occasions ---------------------------------------------------------------- */

.occasions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.occasion { position: relative; display: block; }

.occasion input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.occasion-card {
  display: grid;
  align-content: start;
  gap: 8px;
  height: 100%;
  padding: 20px 18px 18px;
  border: 1px solid var(--glass-line-soft);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  cursor: pointer;
  transition: transform 260ms var(--ease-out), border-color 220ms var(--ease-out),
              box-shadow 260ms var(--ease-out), background 220ms var(--ease-out);
}

.occasion-icon { color: var(--gold); line-height: 0; }

.occasion-title {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.25;
  color: #fffaf0;
}

.occasion-copy {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.occasion-card:hover {
  transform: translateY(-3px);
  border-color: rgba(233, 192, 120, 0.5);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38);
}

.occasion input:checked + .occasion-card {
  border-color: var(--gold);
  background: linear-gradient(160deg, rgba(255, 214, 148, 0.2), rgba(255, 168, 90, 0.06));
  box-shadow: 0 0 0 1px rgba(255, 214, 148, 0.45), 0 18px 40px rgba(214, 158, 70, 0.24);
  animation: tap-spring 460ms var(--spring);
}

.occasion input:checked + .occasion-card .occasion-icon { color: var(--gold-bright); }

.occasion input:focus-visible + .occasion-card {
  outline: 3px solid var(--gold-bright);
  outline-offset: 3px;
}

.occasion-clear-row { margin: 12px 0 20px; min-height: 20px; }

/* Fields ------------------------------------------------------------------- */

.field { display: block; margin: 0 0 18px; }

.field-label {
  display: block;
  margin-bottom: 8px;
  color: var(--ivory);
  font-size: 14.5px;
  font-weight: 600;
}

.field input,
.field textarea {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--ivory);
  /* 16px minimum: anything smaller makes iOS Safari zoom on focus. */
  font-size: 16px;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out),
              box-shadow 180ms var(--ease-out);
}

.field textarea { min-height: 74px; resize: vertical; }

/* Light enough to read on the daylight-blue glass, dimmer than typed text. */
.field input::placeholder,
.field textarea::placeholder { color: rgba(226, 235, 242, 0.62); }

.field input:hover,
.field textarea:hover { border-color: rgba(233, 192, 120, 0.4); }

.field input:focus,
.field textarea:focus {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.085);
  box-shadow: 0 0 0 3px rgba(255, 214, 148, 0.18);
  outline: none;
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 2px;
}

.field .hint { margin-top: 7px; }

.two-up {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.check {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
}

.check input {
  width: 20px;
  height: 20px;
  accent-color: var(--gold-deep);
  cursor: pointer;
}

/* Dedication preview ------------------------------------------------------- */

.dedication-preview {
  margin-top: 4px;
  padding: 16px 18px;
  border: 1px dashed rgba(233, 192, 120, 0.36);
  border-radius: 14px;
  background: rgba(233, 192, 120, 0.06);
}

.dedication-preview-label {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.dedication-preview-text {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.45;
  color: #fff6e6;
}

.dedication-count {
  margin: 10px 0 0;
  color: var(--hint);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

/* Payment ------------------------------------------------------------------ */

.method-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.method { position: relative; display: block; }

.method input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.method span {
  display: grid;
  place-items: center;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--glass-line-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out),
              background 200ms var(--ease-out);
}

.method span:hover { border-color: rgba(233, 192, 120, 0.5); transform: translateY(-1px); }

.method input:checked + span {
  border-color: var(--gold);
  background: linear-gradient(160deg, rgba(255, 214, 148, 0.2), rgba(255, 168, 90, 0.06));
  color: #fff6e6;
}

.method input:focus-visible + span {
  outline: 3px solid var(--gold-bright);
  outline-offset: 3px;
}

.method-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 14.5px;
}

.card-fields { margin-top: 22px; }

.card-input-wrap { position: relative; display: block; }

.card-input-wrap input {
  padding-right: 124px;
  font-variant-numeric: tabular-nums;
}

.card-brand-strip {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 4px;
  align-items: center;
  pointer-events: none;
}

.card-brand-strip img {
  width: 26px;
  height: auto;
  opacity: 0.34;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.card-brand-strip img.is-active,
.card-brand-strip:not(.has-active) img { opacity: 0.85; }

.card-brand-strip img.is-active { opacity: 1; transform: translateY(-1px) scale(1.08); }

.card-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 12px;
}

.card-row .field { margin-bottom: 0; }

/* Summary + submit --------------------------------------------------------- */

.summary {
  margin: 4px 0 18px;
  padding: 18px 20px;
  border: 1px solid var(--glass-line);
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(255, 214, 148, 0.1), rgba(255, 255, 255, 0.025));
}

.summary dl { display: grid; gap: 10px; margin: 0; }

.summary div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
}

.summary dt {
  color: var(--hint);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.summary dd {
  margin: 0;
  color: var(--ivory);
  font-size: 15px;
  font-weight: 600;
  text-align: right;
}

.summary-total {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--glass-line-soft);
}

.summary-total dd {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--gold-bright);
}

.form-message {
  min-height: 22px;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}

.form-message.is-error { color: var(--bad); }
.form-message.is-success { color: var(--ok); }

.btn-submit {
  width: 100%;
  min-height: 58px;
  font-size: 17.5px;
}

.secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 0;
  color: var(--hint);
  font-size: 13px;
}

.secure-note svg { flex: none; }

/* --------------------------------------------------------------------------
   Coordinate with a person
   -------------------------------------------------------------------------- */

.coordinate { padding: 10px 0 70px; }

.coordinate-card {
  max-width: 780px;
  margin: 0 auto;
  padding: 34px 32px;
  text-align: center;
}

.coordinate-card h2 {
  margin: 0 0 12px;
  font-size: clamp(24px, 3.4vw, 32px);
  color: #fffaf0;
}

.coordinate-card p {
  max-width: 560px;
  margin: 0 auto 22px;
  color: var(--muted);
  line-height: 1.62;
}

.coordinate-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.coordinate-phone {
  margin: 18px 0 0 !important;
  color: var(--hint);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

footer {
  padding: 26px 0 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(0, 0, 0, 0.28);
  color: var(--hint);
  font-size: 13.5px;
  line-height: 1.7;
  text-align: center;
}

/* Agreement line under the sponsor button — quieter than the secure note it
   follows, so the two read as one small block rather than competing. */
.consent-note {
  margin: 8px 0 0;
  color: var(--hint);
  opacity: 0.75;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
}

.consent-note a {
  color: inherit;
  text-decoration: underline;
}

.consent-note a:hover { color: var(--gold); }

/* Privacy / terms links: deliberately quiet against the twilight footer. */
.footer-legal {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.6;
  opacity: 0.8;
}

.footer-legal a {
  color: inherit;
  text-decoration: underline;
}

.footer-legal a:hover { color: var(--gold); }

.footer-legal .sep {
  padding: 0 6px;
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   Confirmation modal
   -------------------------------------------------------------------------- */

.kiddush-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
}

.kiddush-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 14, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade-in 260ms var(--ease-out);
}

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

.kiddush-modal-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  max-height: min(760px, calc(100svh - 40px));
  overflow: auto;
  padding: 38px 34px 30px;
  border: 1px solid var(--glass-line);
  border-radius: 22px;
  background:
    radial-gradient(600px 260px at 50% -10%, rgba(255, 186, 96, 0.22), transparent 64%),
    linear-gradient(160deg, #123f6e, #1c5b90 60%, #2670a8);
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.62);
  outline: none;
  animation: modal-in 420ms var(--spring);
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.modal-sparks {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 22px;
  pointer-events: none;
}

.spark {
  position: absolute;
  top: 34%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff3d0, rgba(255, 214, 148, 0));
  opacity: 0;
  animation: spark-out 1500ms var(--ease-out) forwards;
  will-change: transform, opacity;
}

@keyframes spark-out {
  0%   { transform: translate3d(0, 0, 0) scale(0.3); opacity: 0; }
  14%  { opacity: 1; }
  100% { transform: translate3d(var(--sx), var(--sy), 0) scale(var(--ss, 1)); opacity: 0; }
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--glass-line-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ivory);
  font-size: 26px;
  line-height: 1;
}

.modal-close:hover { background: rgba(255, 255, 255, 0.12); }

.modal-check {
  position: relative;
  z-index: 1;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border: 1px solid rgba(233, 192, 120, 0.4);
  border-radius: 50%;
  background: rgba(233, 192, 120, 0.14);
  color: var(--gold-bright);
}

.modal-eyebrow {
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.kiddush-modal h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(28px, 5vw, 36px);
  line-height: 1.12;
  color: #fffaf0;
}

.modal-copy {
  position: relative;
  z-index: 1;
  margin: 14px 0 0;
  color: var(--muted);
  line-height: 1.58;
}

.modal-summary {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
  margin: 22px 0 16px;
  border: 1px solid var(--glass-line-soft);
  border-radius: 14px;
  overflow: hidden;
}

.modal-summary div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--glass-line-soft);
  background: rgba(255, 255, 255, 0.035);
}

.modal-summary div:last-child { border-bottom: 0; }

.modal-summary dt {
  color: var(--hint);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.modal-summary dd {
  margin: 0;
  color: var(--ivory);
  font-weight: 700;
  text-align: right;
}

.modal-note {
  position: relative;
  z-index: 1;
  margin: 0 0 20px;
  color: var(--hint);
  font-size: 13.5px;
}

.modal-primary { position: relative; z-index: 1; width: 100%; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .how-steps { grid-template-columns: 1fr; }
  .occasions { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .container { width: calc(100% - 28px); }

  .tableau { gap: 26px; height: 208px; }
  .tableau-glow { width: min(400px, 94vw); height: 300px; }
  .cup svg { width: 96px; height: 134px; }

  .quote-section { padding: 46px 0 40px; }
  .quote-mark { font-size: 140px; top: 0; }

  .sponsor-form { padding: 24px 18px 22px; }
  .cal { max-height: 400px; }

  .tiers { grid-template-columns: 1fr; }
  .tier-flagship .tier-card { padding: 22px 20px 20px; }
  .tier-flagship .tier-amount { font-size: 40px; }

  .two-up { grid-template-columns: 1fr; gap: 0; }
  .card-row { grid-template-columns: 1fr 1fr; }
  .card-row .field:last-child { grid-column: 1 / -1; }

  .coordinate-card { padding: 26px 20px; }
  .coordinate-actions .btn { width: 100%; }
  .hero-actions .btn { width: 100%; }

  .kiddush-modal { padding: 12px; align-items: end; }
  .kiddush-modal-panel { padding: 30px 22px 22px; }
}

/* Phone-width calendar rows. In the three-column row the status pill starves
   the text — "COORDINATE WITH RONI" alone is ~180px, leaving the parashah a
   sliver that wraps word-per-word. Below 560px the pill drops onto its own
   line under the text, the day block slims to the numeral, and every row gets
   the full width back. */
@media (max-width: 560px) {
  .cal-week-card {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 3px 12px;
    padding: 10px 12px;
  }

  .cal-day { grid-row: 1 / span 2; }
  .cal-day small { display: none; }
  .cal-day b { font-size: 21px; }

  .cal-status {
    grid-column: 2;
    justify-self: start;
    margin-top: 1px;
  }

  .cal-week input:focus-visible + .cal-week-card { outline-offset: -2px; }
}

@media (max-width: 400px) {
  .tableau { gap: 18px; }
}

/* --------------------------------------------------------------------------
   Reduced motion — every decorative animation off, and reveals forced visible
   so nobody is left staring at an empty page.
   -------------------------------------------------------------------------- */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  html.js .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .ember,
  .cup-shine,
  .spark { display: none !important; }

  .tableau-glow { opacity: 0.92; }

  .btn::after { display: none; }
}