/* Campaign art direction. Keeps the existing PHP form and winner roster.

   LOAD ORDER MATTERS: this sheet overrides style.css by source order alone
   (same specificity — .atmos position, .bills z-index, .site-header sticky,
   .form-shell animation, .form-card transform). index.php links it second;
   keep it that way, and do not concatenate the two files. */
:root {
  --shell: 1360px;
  --form-w: 640px;
  --text-muted: #c3d7ec;
  --text-faint: #a1bad4;
  --scene-height: 1140px;
  /* The notes used to fly 360px PAST the sky, straight through the
     winners heading. They now stop inside it and fade well above. */
  --money-scene-height: calc(var(--scene-height) - 20px);
  --page-background: #23242a;
}
body { background: var(--page-background); }
[hidden] { display: none !important; }
.atmos { position: absolute; height: var(--scene-height); bottom: auto; }
.atmos__base { background: #041830; }
.atmos__landscape {
  position: absolute;
  inset: 0;
  /* Two layers sharing ONE background-size and background-position, so the
     gradient always lands exactly on the photo however the breakpoints
     rescale it. It dissolves the cloud photo into the sky base before the
     photo's own bottom edge, which otherwise draws a hard horizontal line
     straight across the hero-to-winners transition. */
  background:
    linear-gradient(to bottom, rgba(4,24,48,0) 64%, rgba(4,24,48,.72) 86%, #041830 97%) center 54px / auto 1000px no-repeat,
    url("../images/campaign-backdrop.webp") center 54px / auto 1000px no-repeat;
  transform: translate3d(0, var(--cloud-parallax, 0px), 0);
  will-change: transform;
}

.atmos::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(1,13,29,.1), transparent 50%, rgba(3,19,41,.08) 75%, var(--page-background) 100%);
}
.atmos__rays { opacity: .2; }
.atmos__glow--blue { opacity: .32; }
.atmos__glow--orange { opacity: .4; bottom: 2%; }
.atmos__mist--a { top: 60%; opacity: .5; }
.atmos__mist--b { bottom: 0; }
.bokeh { opacity: .35; }
.particles { opacity: .55; }
.site-header { position: sticky; top: 0; z-index: 100; padding: 0 2rem; background: rgba(2,13,30,.78); border-bottom: 1px solid #598eb752; backdrop-filter: blur(14px) saturate(110%); -webkit-backdrop-filter: blur(14px) saturate(110%); }
.site-header__bar { min-height: 58px; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; padding: .45rem 0; }
.site-header__brand img { width: 196px; height: auto; }
.pill-btn { font-size: .8125rem; font-weight: 700; letter-spacing: .04em; padding: .5rem 1rem; border: 1px solid #ffda96; border-radius: 12px; background: linear-gradient(180deg,#ffc16a 0%,#ff8f20 17%,#ff5700 59%,#e84005 100%); box-shadow: inset 0 2px 5px #fff8,0 0 0 2px #ff801955,0 0 20px #ff710080,0 10px 24px #ff5c0045; }
.pill-btn:hover { background: linear-gradient(180deg,#ffd18a 0%,#ff9f32 17%,#ff6410 59%,#e84005 100%); border-color: #fff0c9; box-shadow: inset 0 2px 5px #fffa,0 0 0 2px #ff8b1977,0 0 30px #ff7100a3,0 13px 28px #ff5c0059; }
/* The form's bloom is deliberately wider than the card, and at narrow
   widths that pushes it past the viewport. Decoration must never create
   a scrollbar, so the hero clips it horizontally. `clip` rather than
   `hidden`: hidden would turn the hero into a scroll container. The
   atmosphere, the money layers and the header all live OUTSIDE
   <main class="hero">, so nothing that needs to bleed is affected. */
.hero { padding-top: 0; overflow-x: clip; }
.headline { margin-bottom: 1.25rem; }
.headline__h1--rendered { position: relative; width: min(920px, 76%); margin-inline: auto; }
.headline__art { position: relative; width: 100%; height: auto; filter: drop-shadow(0 7px 4px #01091ed9); }
.headline__h1--rendered::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../images/campaign-title.webp") center / 100% 100% no-repeat;
  filter: blur(10px) saturate(1.6) brightness(1.2); opacity: .8;
}
.title-scene { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.title-scene canvas { display: block; width: 100%; height: 100%; }
.title-scene .title-scene__glow { position: absolute; inset: 0; filter: blur(10px) saturate(1.6) brightness(1.2); opacity: .8; }
.title-scene .title-scene__surface { position: relative; filter: drop-shadow(0 7px 4px #01091ed9); }
.title-ready .title-scene { opacity: 1; }
.title-ready .headline__art { visibility: hidden; }
.title-ready .headline__h1--rendered::before { display: none; }
.headline__h1--rendered .headline__line {
  position: absolute; width: 1px; height: 1px; overflow: hidden; padding: 0; margin: -1px;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.headline__kicker { margin-top: -.2rem; font-size: .875rem; color: #f2f8ff; font-weight: 600; letter-spacing: .24em; }
/* The bloom is what sells the card as the nearest object, so it carries
   the extra weight rather than a heavier border would. */
.form-shell__aura { opacity: 1; inset: -15% -11%; filter: blur(52px); }
.form-card {
  padding: 1.6rem 1.9rem 1.25rem; border-radius: 30px; transform: none;
  border: 1px solid #c3ecff;
  background: linear-gradient(155deg, rgba(19,60,100,.86), rgba(5,25,50,.92) 58%, rgba(20,40,64,.94));
  box-shadow: 0 0 0 3px #1272b4, 0 0 0 5px #8fe0ffcc, inset 0 0 22px #32afff5c, 0 0 42px #25a9ffcc, 0 0 90px #1478c266, 0 30px 74px #010c1eeb;
}
.form-card::before { left: 10%; right: 10%; top: -5px; height: 3px; background: linear-gradient(90deg, transparent, #fff3e1 20%, #fff 50%, #a1e5ff 80%, transparent); box-shadow: 0 0 17px #87ddff; }
.field__label { font-size: .875rem; letter-spacing: 0; text-transform: none; color: #e8f4ff; margin-bottom: .3rem; }
.field__label::after { content: " *"; color: #ffad7c; }
.entry__row { gap: .8rem; }
.field, .entry__row { margin-bottom: .85rem; }
.field__box { background: #204b7359; border-color: #80b5db80; border-radius: 12px; }
.field__input { font-size: 1rem; padding-block: .75rem; border-radius: 12px; }
.field__select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.5rem; }
.field__box--select::after { content: ""; position: absolute; right: 1rem; top: 50%; width: .55rem; height: .55rem; border-right: 2px solid #cfe8ff; border-bottom: 2px solid #cfe8ff; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.field__select option { color: #09213b; background: #fff; }
.field__label--conditional::after { content: ""; }
.field--required .field__label--conditional::after { content: " *"; color: #ffad7c; }
.field__input--area { min-height: 94px; height: 104px; line-height: 1.45; }
.field__icon { color: #d4eaff; }
.field__count { font-size: .75rem; }
.field__error { font-size: .875rem; }
.cta { font-size: 1.4rem; font-weight: 700; margin-top: .75rem; padding-block: .88rem; border-radius: 12px; border-color: #ffe3b0; background: linear-gradient(180deg,#ffc16a 0%,#ff8f20 17%,#ff5700 59%,#e84005 100%); box-shadow: inset 0 2px 5px #fff9, 0 0 0 2px #ff9233a6, 0 0 18px #ff8420cc, 0 0 46px #ff6a0080, 0 14px 32px #ff5c0066; }
.cta__arrow { width: 1.4rem; height: 1.4rem; }
.entry__secure { font-size: .75rem; color: #dae7f6; margin-top: .9rem; }
.entry__lock { color: #eaf7ff; }

/* Under the card: the dates, then the rules link. No box - it sits straight
   on the sky, so the type is white and carries a deep shadow to hold its
   own against bright cloud. */
.form-notes {
  position: relative; z-index: 30;              /* above the card, its bloom and the winner cards */
  width: fit-content; max-width: 100%; margin: 1.3rem auto 0;
  text-align: center; font-size: 1rem; line-height: 1.75; color: #fff;
  text-shadow: 0 1px 2px #01091e, 0 2px 8px #01091ecc;
}
.form-notes__period { margin: 0; }
.form-notes__period span { color: #fff; font-weight: 500; }
.form-notes__period strong { margin-left: .35rem; color: #fff; font-weight: 700; }
.form-notes__rules { display: inline-block; margin-top: .05rem; color: #ffd39f; font-weight: 700; text-decoration: underline; text-decoration-color: #ff8a3d; text-underline-offset: 3px; }
.form-notes__rules:hover { color: #fff; text-decoration-color: #ff8a3d; }
.form-notes__rules:focus-visible { outline: 2px solid #ffb56c; outline-offset: 4px; border-radius: 4px; }
.field__hint { font-weight: 400; color: #a9c3dc; }


/* The rules, as a spotlight card over the dimmed page. Same glass and the
   same lit edge as the form card, so it reads as part of the same object.

   The <dialog> element IS the card. Browsers (and extensions such as Dark
   Reader) give a dialog its own background; with the corners on the dialog
   itself that background is clipped to them, so it can never show as a
   square behind a rounded card. Plain border and glows only: spread-ring
   shadows notched the corners in Chrome's top layer. */
.spotlight {
  width: 100%; max-width: min(92vw, 36rem); margin: auto; padding: 0; overflow: hidden;
  border: 2px solid #9fe0ff; border-radius: 24px; color: #e6f1fb;
  background: linear-gradient(155deg, rgba(19,60,100,.97), rgba(5,25,50,.985) 58%, rgba(20,40,64,.985));
  box-shadow: inset 0 0 18px #32afff47, 0 0 28px #25a9ffb3, 0 0 70px #1478c266, 0 30px 80px #010c1e;
}
.spotlight::backdrop { background: rgba(2, 10, 24, .74); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.spotlight__card { position: relative; padding: clamp(1.5rem, 4vw, 2.3rem) clamp(1.3rem, 4vw, 2.3rem); }
.spotlight__close {
  position: absolute; top: .7rem; right: .8rem; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid #ffffff2b; background: #ffffff10; color: #d6eaff;
  font-size: 1.6rem; line-height: 1; text-decoration: none;
}
.spotlight__close:hover { background: #ffffff22; color: #fff; }
.spotlight__close:focus-visible { outline: 2px solid #ffb56c; outline-offset: 3px; }
.spotlight__eyebrow { margin: 0 0 .35rem; font-size: .72rem; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; color: #ffa345; }
.spotlight__title { margin: 0 0 1.1rem; padding-right: 2.6rem; font-size: 1.35rem; font-weight: 700; color: #fff; }
.spotlight__list { display: grid; gap: .85rem; margin: 0; font-size: .9375rem; line-height: 1.55; }
.spotlight__list dt { font-weight: 700; color: #fff; }
.spotlight__list dd { margin: .15rem 0 0; color: #c3d7ec; }
.spotlight__list a { color: #ffd5ac; text-decoration: underline; text-underline-offset: 3px; }
.spotlight[open] .spotlight__card { animation: spotIn .28s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes spotIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.motion-paused .spotlight[open] .spotlight__card { animation: none; }
html:has(.spotlight[open]) { overflow: hidden; }
/* No JavaScript: the link targets the dialog and it shows in place, with
   the page dimmed behind it. */
.spotlight:target:not([open]) { display: block; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 200; width: min(92vw, 36rem); }
body:has(.spotlight:target:not([open]))::after { content: ""; position: fixed; inset: 0; z-index: 199; background: rgba(2, 10, 24, .8); }
.winners .photo-card {
  border-color: #8bceffaa;
  background: linear-gradient(145deg,#123d62,#071e38);
  box-shadow: inset 0 1px 0 #d2eeff40, 0 0 20px #47b7ff26, 0 24px 45px -16px #010b21d9;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* Further out than the shell edge: they frame the form rather than
   crowd it. Nothing clips - they are hidden entirely below 1024px. */
.winners .photo-card--left { left: -1.5%; }
.winners .photo-card--right { right: -1.5%; }
.winner-slot { display: grid; align-items: start; }
.winner-slot > .photo-card { grid-area: 1 / 1; width: 100%; }
.money-scene, .bills { position: absolute; inset: 0 0 auto; height: var(--money-scene-height); z-index: 2; pointer-events: none; overflow: hidden; }
.money-scene, .money-near, .bills {
  /* The sticky header's band, kept current per scroll frame by
     money-occlusion.js. A clip-path inset is a compositor property, so
     unlike the SVG mask below it costs nothing to move. */
  clip-path: inset(var(--header-clip, 0px) 0 0 0);
  /* Glass-panel cutouts intersect with a soft lower edge on both depth layers. */
  -webkit-mask-image: var(--content-mask,linear-gradient(#fff,#fff)), linear-gradient(to bottom,#fff 0%,#fff 60%,rgba(255,255,255,.78) 72%,transparent 83%);
  mask-image: var(--content-mask,linear-gradient(#fff,#fff)), linear-gradient(to bottom,#fff 0%,#fff 60%,rgba(255,255,255,.78) 72%,transparent 83%);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* Alone, the WebGL notes simply appear; over the image notes (.notes-dom)
   the two crossfade at the same .7s. */
.money-scene { opacity: 0; transition: opacity .45s ease; }
.notes-dom .money-scene { transition-duration: .7s; }
.money-scene canvas { display: block; width: 100%; height: 100%; }
.money-ready .money-scene { opacity: 1; }
/* The CSS banknotes drift on their own from the first paint, so notes are
   already flying before any of the WebGL work finishes. When the real scene
   is ready these fade out as it fades in — a crossfade between two moving
   sets, not a swap from stillness. */
/* Both layers fade over the same .7s. Because they are posed from one clock,
   the DOM notes and the WebGL notes are coincident throughout the fade.
   visibility flips only once the fade has finished — otherwise it would cut
   the DOM layer off on the first frame.

   The transition lives on the forward rule ONLY. A transition is taken from
   the after-change style, so adding money-ready still fades over .7s — but
   removing it (WebGL lost its context, wind.reclaim() took the clock back)
   is instant, so the DOM notes reappear the same frame the canvases go
   instead of leaving the sky empty for .7s and then popping in. */
.bills { opacity: 0; visibility: hidden; transition: none; }
/* Revealed by wind.js: lite mode, a lost WebGL context, or a long wait. */
.notes-dom .bills,
html:not(.js) .bills { opacity: 1; visibility: visible; }
.money-ready .bills { opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }

/* Notes driven by wind.js: fixed unscaled box, everything else is transform. */
.wind-note {
  position: absolute; top: 0; left: 0; width: 300px; height: auto;
  transform-origin: 50% 50%; will-change: transform, opacity;
  border-radius: 3px; pointer-events: none; user-select: none;
  backface-visibility: visible;
}
/* The title is never pre-hidden either: campaign-title.webp is a render of
   the very same mesh title-scene.js loads, so the handoff is imperceptible,
   while hiding it would leave the headline blank until the model arrived. */
.money-near { position: absolute; inset: 0 0 auto; height: var(--money-scene-height); z-index: 4; opacity: 0; overflow: hidden; pointer-events: none; }
/* Blur the paper before clipping, so blur never bleeds across an occluding edge. */
.money-near canvas { display: block; width: 100%; height: 100%; filter: blur(1.2px); }
.money-near { transition: opacity .45s ease; }
.notes-dom .money-near { transition-duration: .7s; }
.money-ready .money-near { opacity: 1; }
.bill img { width: 100%; height: auto; border-radius: 3px; }

/* ---- The CSS notes FLY. ----
   style.css positions each note at a fixed spot with a 42px drift over
   30–50 s, which reads as static. Here every note instead starts small at
   the form's centre and flies outward along the line to its configured spot
   and past it, growing and tumbling — the same emitter the WebGL scene
   runs, approximated. Negative delays from config mean the sky is already
   full of notes in flight on the very first paint, so the WebGL handoff is
   a crossfade between two flying sets rather than "static, then motion". */
.bill { top: 42%; left: 50%; }
.bill__inner {
  transform-origin: 50% 50%;
  animation: billFly calc(var(--dur) * .42) linear var(--delay) infinite;
  /* depth blur was tuned for stills; in flight it only needs to soften the
     near plane slightly, like the WebGL near layer's 1.2px */
  filter: blur(calc(var(--blur) * .18)) drop-shadow(0 18px 26px rgba(0,0,0,.45));
}
@keyframes billFly {
  0%   { transform: translate(-50%,-50%) translate(calc(var(--fx) * 2vmax),  calc(var(--fy) * 2vmax))  scale(.12) rotate(var(--rot)); opacity: 0; }
  7%   { opacity: var(--op); }
  96%  { opacity: var(--op); }
  100% { transform: translate(-50%,-50%) translate(calc(var(--fx) * var(--flight) * 1vmax), calc(var(--fy) * var(--flight) * 1vmax)) scale(1.25) rotate(calc(var(--rot) + 80deg)); opacity: 0; }
}
/* Every note takes part on every screen size now that they fly — the
   hide-* classes existed to thin out a static arrangement. On phones the
   largest notes are clamped so a near-plane note cannot span the screen. */
.bill--hide-sm, .bill--hide-md { display: block; }
@media(max-width:620px) { .bill { width: min(var(--w), 36vw); } }
.wall { padding-top: 5.25rem; margin-top: 5.5rem; scroll-margin-top: 2rem; }
.wall__head { max-width: 48rem; }
.wall__title { color: #ff5700; background-image: linear-gradient(180deg,#ffd09a 0%,#ff8a2a 42%,#ff5700 72%,#d93b00 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem,3.3vw,2.65rem); filter: drop-shadow(0 0 12px #ff570052); }
.wall__grid { column-gap: 1.25rem; }
.photo-card { background: linear-gradient(145deg,#102e4f,#071c33); border-radius: 17px; }
/* The page ground was lifted, so the cards lift with it - what matters
   is the separation between the two, not either absolute value. */
.wall__grid .photo-card { background: linear-gradient(145deg,#34363d,#2a2c33); border-color: #ffffff2e; box-shadow: inset 0 1px 0 #ffffff14,0 16px 32px -18px #000a; backdrop-filter: none; -webkit-backdrop-filter: none; }
.wall__grid .photo-card__amount { text-shadow: none; }
.photo-card__year { font-size: .75rem; letter-spacing: .08em; }
.photo-card__name { font-size: .875rem; }
.photo-card__row { flex-wrap: wrap; gap: .15rem .6rem; }
.photo-card__amount { font-size: 1.2rem; }

/* One shape for the whole wall. The hero floats still show their photo
   uncropped - that is where the "real snapshot" read matters. In the grid
   the opposite is true: identical frames, identical caption metrics and a
   single crop rule are what make the section feel considered. */
.wall__grid .photo-card { padding: 12px 12px 14px; }
.wall__grid .photo-card__frame { aspect-ratio: 4 / 5; }
.wall__grid .photo-card__frame img {
  width: 100%; height: 100%; object-fit: cover;
  /* Faces and cheques both sit above centre in these photos. */
  object-position: center 32%;
}
.wall__grid .photo-card__caption { padding: .7rem .25rem 0; }
.wall__grid .photo-card__row { flex-wrap: nowrap; align-items: baseline; justify-content: space-between; gap: .6rem; }
.wall__grid .photo-card__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wall__grid .photo-card__amount { flex: none; }
.site-footer { font-size: 1rem; gap: .7rem 1.9rem; padding-top: 1.75rem; padding-bottom: 4.5rem; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
/* The success tick is drawn BY its animation (dash-offset starts fully hidden),
   so it must still run for a visitor who pressed "Pause motion" — otherwise
   "You're Entered!" appears with an empty circle. */
.motion-paused .entered__circle, .motion-paused .entered__tick { animation-play-state: running !important; }
#entry-form { scroll-margin-top: 2rem; }

/* ============================ Stepped form ==============================
   Three panes over one <form>. Without JavaScript the rail and controls
   stay hidden, every .step stays visible, and it is one scrolling page. */

/* Steps size to their own content; the two connectors are separate elements
   that each take an equal share of what is left. (Previously the connector
   was a ::before inside the step, so the segment before "Vehicle" came out
   shorter than the one before "Debt" simply because the word is longer.) */
.rail { display: flex; align-items: center; gap: .55rem; margin: 0 0 1.3rem; padding: 0; }
.rail__item { display: flex; align-items: center; flex: 0 0 auto; color: #8fb0cd; cursor: default; transition: color .3s ease; }

/* A segment fills only once the step BEHIND it is complete: standing on
   step 1 has not travelled anything yet. It wipes left to right. */
.rail__line { position: relative; flex: 1 1 0; min-width: 14px; height: 2px; border-radius: 2px; background: #ffffff1f; overflow: hidden; }
.rail__line::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg,#ff8a3d,#ff5700);
  transform: scaleX(0); transform-origin: left; transition: transform .45s ease;
}
.rail__item.is-done + .rail__line::after { transform: scaleX(1); }

.rail__dot {
  display: grid; place-items: center; flex: none; width: 25px; height: 25px; border-radius: 50%;
  background: #ffffff12; border: 1px solid #ffffff2b; color: #b9d3ea; font-size: .8125rem; font-weight: 700;
  line-height: 1; transition: background .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.rail__num, .rail__dot::after { grid-area: 1 / 1; }   /* number and tick share one cell */

.rail__item.is-active .rail__dot { background: #ff5700; border-color: #ff7d33; color: #fff; box-shadow: 0 0 0 3px #ff57002e; }
.rail__item.is-active { color: #f2f9ff; }

/* Completed steps trade their number for a tick and become clickable. */
.rail__item.is-done { color: #cfe3f5; cursor: pointer; }
.rail__item.is-done .rail__dot { background: #ff57001f; border-color: #ff8f4f7a; }
.rail__item.is-done .rail__num { opacity: 0; }
.rail__item.is-done .rail__dot::after {
  content: ""; width: 6px; height: 10px; border: solid #ffb583;
  border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px,-1px);
}
.rail__item.is-done:hover .rail__dot { background: #ff57003d; border-color: #ffa76b; }
.rail__item.is-done:hover { color: #fff; }

.step__title { margin: 0 0 1rem; font-size: 1.0625rem; font-weight: 700; color: #fff; }
.step__title:focus { outline: none; }
.step__title:focus-visible { outline: 2px solid #ffb56c; outline-offset: 4px; border-radius: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }

.js .step[data-step]:not(.is-active) { display: none; }

/* A step swaps in rather than snapping. The hidden attribute does the real
   hiding, so this only ever animates the pane that is on screen. */
.step.is-active { animation: stepIn .32s ease both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.motion-paused .step.is-active { animation: none; }

.entry__nav { display: flex; align-items: center; gap: .7rem; margin-top: 1.1rem; }
.step-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .88rem 1.2rem; border-radius: 12px; font-size: 1.05rem; font-weight: 700;
  cursor: pointer; transition: filter .2s ease, box-shadow .2s ease, background .2s ease;
}
.step-btn--next {
  flex: 1; color: #fff; border: 1px solid #ffda96;
  background: linear-gradient(180deg,#ffc16a 0%,#ff8f20 17%,#ff5700 59%,#e84005 100%);
  box-shadow: inset 0 2px 5px #fff9, 0 0 0 2px #ff9233a6, 0 0 18px #ff8420cc, 0 0 46px #ff6a0080, 0 14px 32px #ff5c0066;
}
.step-btn--next:hover { filter: brightness(1.06); }
.step-btn--back { flex: none; color: #d6eaff; border: 1px solid #7fb4da66; background: #0b2743a6; }
.step-btn--back:hover { border-color: #b3e4ff; background: #10365bb8; }
.step-btn__arrow { width: 1.15rem; height: 1.15rem; }

@media(max-width:620px) {
  .rail { gap: .45rem; margin-bottom: 1rem; }
  .rail__dot { width: 22px; height: 22px; font-size: .75rem; }
  .step__title { font-size: 1rem; margin-bottom: .85rem; }
  .entry__nav { gap: .5rem; }
  .step-btn { padding: .8rem 1rem; font-size: 1rem; }
}
@media(min-width:1800px) { .atmos__landscape { background-size: cover; } }
@media(max-width:1200px) {
  .winners .photo-card--float { width: 163px; }
  .winners .photo-card--left { left: -1%; }
  .winners .photo-card--right { right: -1%; }
  .site-header__brand img { width: 178px; }
}
@media(max-width:1024px) {
  .headline__h1--rendered { width: min(850px,100%); }
  .atmos__landscape { background-position: center 52px; }
}
@media(max-width:620px) {
  :root { --scene-height: 1180px; }
  .site-header { padding-inline: .9rem; }
  .site-header__bar { min-height: 50px; gap: .75rem; padding: .35rem 0; }
  .site-header__brand img { width: 142px; max-width: 44vw; height: auto; }
  .pill-btn { padding: .42rem .7rem; font-size: .6875rem; letter-spacing: .01em; gap: .35rem; }
  .pill-btn__arrow { width: .85rem; height: .85rem; }
  .hero { padding-top: 0; }
  .headline { margin-bottom: 1.35rem; }
  .headline__h1--rendered { width: calc(100% + 1rem); margin-left: -.5rem; }
  .headline__kicker { max-width: 24rem; margin: .6rem auto 0; font-size: .875rem; line-height: 1.65; letter-spacing: .1em; }
  .form-card { padding: 1.45rem 1.05rem 1.2rem; border-radius: 23px; background: linear-gradient(155deg,#123c60ee,#061c37f7); }
  .field__input { padding-block: .75rem; }
  .entry__row { gap: .85rem; }
  .entry__secure { align-items: flex-start; font-size: .75rem; text-align: center; }
  .entry__lock { margin-top: .25rem; flex: none; }
  .atmos__landscape { background-size: auto 780px; background-position: 50% 46px; }
  .atmos__landscape { opacity: .9; }
  .money-near canvas { filter: blur(.8px); }
  .wall { margin-top: 3rem; padding-top: 3.75rem; }
  .wall__grid { columns: 2; column-gap: .7rem; }
  .photo-card__caption { padding-inline: .1rem; }
  .photo-card__amount { font-size: 1.1rem; }
  .photo-card__name { font-size: .8125rem; white-space: normal; }
  .photo-card__year { font-size: .75rem; letter-spacing: 0; }
}
@media(max-width:380px) {
  .pill-btn span { display: inline; }
  .pill-btn__arrow { display: none; }
  .site-header__brand img { width: 165px; }
  .wall__grid { columns: 1; }
}
@media(prefers-reduced-motion:reduce) {
  .atmos__landscape { transform: none; will-change: auto; }
}

/* ========================= G2 continuous corners ========================
   `corner-shape: squircle` replaces the circular arc of a normal
   border-radius with a superellipse, so curvature is continuous where the
   corner meets the straight edge (G2) instead of jumping (G1). Same silhouette
   Apple uses for app icons — softer, less "bubble".

   Progressive enhancement: everything keeps its existing border-radius, and
   browsers without corner-shape (Firefox, Safari < 26, Chrome < 139) simply
   render the ordinary rounded corner. Nothing depends on it.

   A squircle visually reads tighter than an arc at the same radius, so the
   radii are nudged up here to keep the shapes looking as round as before. */
@supports (corner-shape: squircle) {
  .form-card,
.field__box,
.cta,
.pill-btn,
.step-btn,
.entry__alert,
.photo-card,
.photo-card__frame,
.wall__grid .photo-card,
.winners .photo-card,
.entered__ref {
    corner-shape: squircle;
  }

  .form-card { border-radius: 36px; }
  .field__box { border-radius: 15px; }
  .cta, .step-btn, .pill-btn { border-radius: 15px; }
  .photo-card { border-radius: 21px; }
  .photo-card__frame { border-radius: 16px; }

  @media(max-width:620px) {
    .form-card { border-radius: 28px; }
  }
}