/* ============================================================
   THE WAVELENGTH OF MONEY — free live webinar with Meir Ezra
   Registration page · built 2026-09-01
   ------------------------------------------------------------
   Structure is the Marketing Love Languages registration page,
   cut from twelve sections to seven on Zman's brief: keep the
   top, keep the proof, keep the man, drop the rest.
   Palette is the Money Manual's, so the free webinar and the
   event it feeds look like one thing:
       acid green  #C7F04B   the signature, and every action
       champagne   #C9A55C   the prosperity anchor
       green-black #08110A   the bands that carry weight
   Display: Archivo (the Money Manual face) · Body: Figtree
   ============================================================ */
:root{
  /* paper + ink — warmed a half-degree toward green */
  --paper:#FFFFFF;
  --paper-2:#F5FAF1;
  --paper-3:#EFF6E9;
  --ink:#0F1410;
  --muted:#5F6A60;

  /* THE GREEN — acid on dark, deep on light */
  --lime:#C7F04B;         /* the signature. Buttons, chips, rules */
  --lime-hi:#DCFF7E;
  --lime-ink:#0E1305;     /* the only text colour that belongs on lime */
  --green:#17A05A;        /* vivid emerald — mid-tone */
  --green-deep:#0A6B3D;   /* accent text on white (6.9:1) */
  --green-black:#08110A;  /* the dark bands */
  --green-black-2:#0D1A0F;

  /* GP champagne gold — the prosperity anchor */
  --gold:#C9A55C;
  --gold-2:#E8C77A;
  --gold-deep:#7A5E24;

  /* gradients */
  --g-green:linear-gradient(96deg,#0A6B3D 0%,#17A05A 44%,#7FA80E 100%);
  --g-green-lit:linear-gradient(96deg,#DCFF7E 0%,#C7F04B 46%,#5FD98C 100%);
  --g-btn:linear-gradient(165deg,#DCFF7E 0%,#C7F04B 48%,#A8D62F 100%);
  --g-gold:linear-gradient(96deg,var(--gold-2),var(--gold) 52%,var(--gold-deep));

  --line:rgba(15,20,16,.10);
  --line-soft:rgba(15,20,16,.06);
  --maxw:1180px;
  --r:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Figtree",system-ui,sans-serif;
  font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;                       /* clip, never hidden — sticky survives */
}
img{max-width:100%;display:block}
::selection{background:var(--lime);color:var(--lime-ink)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--paper-3)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#DCFF7E,#7FA80E);border-radius:6px;border:2px solid var(--paper-3)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#C7F04B,#0A6B3D)}

/* scroll progress */
#prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:1000;
  background:linear-gradient(90deg,#DCFF7E,#C7F04B 45%,#17A05A);
  box-shadow:0 0 14px rgba(199,240,75,.6)}

/* ============================================================
   TYPE
   ============================================================ */
.d1,.d2,.d3,.kick{font-family:"Archivo",system-ui,sans-serif;text-transform:uppercase}
.d1{font-size:clamp(30px,3.7vw,52px);font-weight:800;line-height:1.08;letter-spacing:.02em}
.d2{font-size:clamp(23px,2.9vw,38px);font-weight:800;line-height:1.13;letter-spacing:.025em}
.d3{font-size:clamp(16px,1.7vw,21px);font-weight:700;letter-spacing:.06em}
.kick{font-size:12.5px;font-weight:600;letter-spacing:.32em;color:var(--green-deep);
  display:inline-flex;align-items:center;gap:14px}
.kick::before{content:"";width:34px;height:1px;background:var(--g-green);display:inline-block}
.kick.center{justify-content:center}
.kick.center::after{content:"";width:34px;height:1px;background:var(--g-green);display:inline-block}

/* the accent word — deep green on paper, acid green on the dark bands */
.acc{background:var(--g-green);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.gold{background:var(--g-gold);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.dark .acc,.stage .acc{background:var(--g-green-lit);-webkit-background-clip:text;background-clip:text}
.dark .kick,.stage .kick{color:var(--lime)}
.dark .kick::before,.dark .kick.center::after,
.stage .kick::before,.stage .kick.center::after{background:var(--g-green-lit)}

.lead{font-size:clamp(17px,1.5vw,20px);color:var(--muted)}
.lead strong{color:var(--ink);font-weight:600}
.dark .lead{color:rgba(238,246,234,.72)}
.dark .lead strong{color:#F2F8EE}

/* ============================================================
   SHELLS + GRIDS
   ============================================================ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,44px)}
section{padding:clamp(64px,8vw,108px) 0;position:relative}
.hairline{border-top:1px solid var(--line-soft)}
.wash{position:relative;background:var(--paper-2)}
.wash::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 480px at 82% -8%, rgba(23,160,90,.10), transparent 62%),
    radial-gradient(700px 420px at 8% 108%, rgba(199,240,75,.20), transparent 60%);
}
.wash > .wrap{position:relative;z-index:1}
.dark{background:var(--green-black);color:#EEF6EA;position:relative;overflow:hidden}
.dark::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(760px 420px at 84% -12%, rgba(199,240,75,.16), transparent 60%),
    radial-gradient(680px 380px at 4% 112%, rgba(23,160,90,.20), transparent 62%);
}
.dark > .wrap{position:relative;z-index:1}

.g2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,34px)}
@media(max-width:820px){ .g2,.g3{grid-template-columns:1fr} }

/* ============================================================
   HEADER
   ============================================================ */
header.bar{position:sticky;top:0;z-index:900;background:rgba(8,17,10,.88);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(199,240,75,.16)}
header.bar .wrap{display:flex;align-items:center;justify-content:space-between;
  padding-top:11px;padding-bottom:11px;gap:16px}
header.bar img{height:36px;width:auto;display:block}

/* ============================================================
   PILLS — acid green, the only action colour on the page
   ============================================================ */
.pill{
  font-family:"Archivo",system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:.11em;font-weight:700;font-size:12.5px;
  color:var(--lime-ink);background:var(--g-btn);
  padding:12px 22px;border-radius:999px;text-decoration:none;display:inline-block;
  box-shadow:0 8px 26px rgba(199,240,75,.30), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
  white-space:nowrap;
}
.pill:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(199,240,75,.42), inset 0 1px 0 rgba(255,255,255,.5)}
.pill:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.pill.big{font-size:14px;padding:17px 34px;letter-spacing:.13em}

/* ============================================================
   1 · THE STAGE — register is the first thing you see
   ============================================================ */
.stage{
  padding:0;                 /* ← the hero NEVER inherits section padding */
  position:relative;overflow:hidden;
  background:var(--green-black);color:#EEF6EA;
  --mx:72%; --my:30%;
}
.stage::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(620px 620px at var(--mx) var(--my), rgba(199,240,75,.13), transparent 68%);
  transition:background .5s ease-out}
.stage-img{position:absolute;inset:0;z-index:0}
/* the landscape plate was SHOT for this layout — Meir sits right of centre with
   an empty dark half beside him. Anchoring the crop to the right keeps his face
   clear of the copy column at every desktop width. */
.stage-img img{width:100%;height:100%;object-fit:cover;object-position:82% 42%}
/* the scrim: the photo dissolves INTO the copy, never behind a hard edge */
.stage-img::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,#08110A 0%,rgba(8,17,10,.92) 34%,rgba(8,17,10,.55) 56%,rgba(8,17,10,.10) 82%),
    linear-gradient(180deg,rgba(8,17,10,.55) 0%,transparent 22%,transparent 64%,rgba(8,17,10,.6) 100%)}

.stage-grid{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,var(--stagecol,580px)) 1fr;
  align-items:center;min-height:calc(100svh - 56px);
  padding-top:clamp(26px,3.4vw,42px);padding-bottom:clamp(30px,4.4vw,52px)}
.stage-copy{max-width:min(600px,46vw)}
.stage-kick{color:var(--lime)}
.stage-title{font-family:"Archivo",system-ui,sans-serif;font-weight:800;
  font-size:clamp(33px,4.3vw,58px);line-height:1.0;letter-spacing:-.005em;
  text-transform:uppercase;margin:18px 0 0}
.stage-title span{display:inline-block;background:var(--g-green-lit);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.stage-sub{font-size:clamp(17px,1.7vw,21px);color:rgba(238,246,234,.78);margin-top:14px;max-width:30ch}
.stage-sub strong{color:var(--lime);font-weight:600}

/* date + time chips, with ONE band of light gliding across the run of them */
.whenrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;
  --wave-band:180px;--wave-end:520px}
.whenrow span{
  position:relative;overflow:hidden;
  font-family:"Archivo",system-ui,sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  padding:9px 16px;border-radius:999px;
  border:1px solid rgba(199,240,75,.34);background:rgba(199,240,75,.07);color:#EAF6D8;
}
.whenrow span.au{color:rgba(238,246,234,.8);border-color:rgba(238,246,234,.2);background:rgba(238,246,234,.05)}
.whenrow span::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,rgba(199,240,75,.42) 46%,transparent 92%);
  width:var(--wave-band);transform:translateX(calc(var(--x,0px) - var(--off,0px) - var(--wave-band)));
  animation:glide 5.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes glide{0%,12%{--x:0px}88%,100%{--x:var(--wave-end)}}
@property --x{syntax:'<length>';inherits:false;initial-value:0px}

/* the seat card — white on the dark stage, so it is the brightest thing here */
.regcard{margin-top:clamp(18px,2.2vw,24px);background:#fff;color:var(--ink);
  border-radius:22px;padding:clamp(20px,2.4vw,28px);
  box-shadow:0 30px 70px rgba(0,0,0,.42), 0 0 0 1px rgba(199,240,75,.22);
  position:relative;overflow:hidden}
.regcard::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--g-btn)}
.regcard h3{font-family:"Archivo",system-ui,sans-serif;font-size:clamp(19px,1.9vw,23px);
  font-weight:800;text-transform:uppercase;letter-spacing:.02em;line-height:1.1}
.tick-line{display:flex;align-items:center;gap:9px;margin-top:9px;
  font-size:13.5px;font-weight:600;color:var(--green-deep);font-variant-numeric:tabular-nums}
.dotp{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none;
  box-shadow:0 0 0 0 rgba(23,160,90,.55);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(23,160,90,0)}100%{box-shadow:0 0 0 0 rgba(23,160,90,0)}}
.ghlform{margin-top:14px;min-height:345px}
.ghlform iframe{width:100%;border:0;display:block;min-height:345px}
.fine{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.5}
.bonus{font-size:13.5px;line-height:1.55;margin-top:12px;padding:12px 14px;border-radius:12px;
  background:var(--paper-3);border:1px solid rgba(23,160,90,.16);color:#3B463C}
.bonus strong{color:var(--green-deep)}

/* ---- the hero, on a portrait screen: copy first, Meir behind it ---- */
@media(max-aspect-ratio:1/1),(max-width:900px){
  .stage-img{inset:0;opacity:.30}
  .stage-img img{object-position:50% 12%}
  .stage-img::after{background:
    linear-gradient(180deg,rgba(8,17,10,.72) 0%,rgba(8,17,10,.55) 38%,rgba(8,17,10,.92) 100%)}
  .stage-grid{grid-template-columns:1fr;min-height:0;
    padding-top:clamp(26px,7vw,40px);padding-bottom:clamp(30px,8vw,48px)}
  .stage-copy{max-width:none}
  .stage-sub{max-width:none}
}
/* ---- the 1366x768 trap: the form has to fit by HEIGHT, not width ---- */
@media(min-width:901px) and (max-height:830px){
  .stage-grid{min-height:0;padding-top:26px;padding-bottom:34px}
  .stage-title{font-size:clamp(32px,3.9vw,46px)}
  .stage-sub{margin-top:12px;font-size:17px}
  .whenrow{margin-top:16px}
  .regcard{margin-top:18px;padding:20px}
  .bonus{display:none}
}
@media(min-width:901px) and (max-height:760px){
  .stage-grid{padding-top:18px;padding-bottom:24px}
  .stage-title{font-size:clamp(29px,3.4vw,38px)}
  .stage-sub{display:none}
  .regcard{margin-top:14px;padding:18px}
  .fine{display:none}
}

/* ============================================================
   CARDS · QUOTES · LISTS
   ============================================================ */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2.2vw,26px);box-shadow:0 10px 30px rgba(15,20,16,.05)}
.dark .card{background:rgba(238,246,234,.05);border-color:rgba(199,240,75,.18);box-shadow:none}

.quote{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--lime);
  border-radius:14px;padding:20px 22px}
.quote p{font-size:16.5px;line-height:1.6;font-style:italic;color:var(--ink)}
.quote .who{margin-top:10px;font-family:"Archivo",system-ui,sans-serif;font-size:11.5px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green-deep)}
.dark .quote{background:rgba(238,246,234,.05);border-color:rgba(238,246,234,.12);border-left-color:var(--lime)}
.dark .quote p{color:#EEF6EA}
.dark .quote .who{color:var(--lime)}

/* the walk-away list */
.gets{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.2vw,26px);margin-top:34px}
@media(max-width:820px){ .gets{grid-template-columns:1fr} }
.get{display:flex;gap:16px;align-items:flex-start}
.get .no{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-size:14px;
  color:var(--lime-ink);background:var(--g-btn);box-shadow:0 6px 18px rgba(199,240,75,.34)}
.get h4{font-family:"Archivo",system-ui,sans-serif;font-size:17px;font-weight:700;
  letter-spacing:.01em;line-height:1.25;margin-bottom:5px}
.get p{font-size:15.5px;color:var(--muted);line-height:1.55}

/* ============================================================
   PROOF — 16:9 tiles, click to play right here
   ============================================================ */
.vidcell .yt{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:#0B120C center/cover no-repeat;cursor:pointer;
  border:1px solid var(--line);box-shadow:0 14px 34px rgba(15,20,16,.10);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s}
.vidcell .yt:hover{transform:translateY(-3px);box-shadow:0 22px 46px rgba(15,20,16,.16)}
.vidcell .yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vidcell .yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:60px;height:60px;border-radius:50%;background:var(--g-btn);display:grid;place-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .25s}
.yt:hover .play{transform:translate(-50%,-50%) scale(1.08)}
.yt .play svg{width:24px;height:24px;margin-left:3px}
.vidcell .quote{border:0;border-left:0;background:none;padding:14px 2px 0;border-radius:0}
.vidcell .quote p{font-size:16px}

/* ============================================================
   THE RECORD — stat strip on the dark band
   ============================================================ */
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px);
  margin-top:clamp(34px,4vw,48px)}
@media(max-width:820px){ .statgrid{grid-template-columns:repeat(2,1fr)} }
.stat{text-align:center;padding:22px 12px;border-radius:16px;
  background:rgba(238,246,234,.045);border:1px solid rgba(199,240,75,.18)}
.stat .n{font-family:"Archivo",system-ui,sans-serif;font-weight:800;
  font-size:clamp(28px,3.4vw,44px);line-height:1;
  background:var(--g-green-lit);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;font-variant-numeric:tabular-nums}
.stat .u{margin-top:9px;font-size:12.5px;line-height:1.4;color:rgba(238,246,234,.66)}

/* ============================================================
   WHO IS SPEAKING
   ============================================================ */
.bioband{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:clamp(26px,4vw,56px);align-items:center}
@media(max-width:900px){ .bioband{grid-template-columns:1fr} }
.bioband .photo{border-radius:20px;overflow:hidden;position:relative;
  box-shadow:0 26px 60px rgba(15,20,16,.18)}
.bioband .photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 58%,rgba(8,17,10,.28) 100%)}
.bioband .photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%}
.rules{margin-top:26px;display:grid;gap:10px}
.rules p{font-family:"Archivo",system-ui,sans-serif;font-size:14.5px;font-weight:600;
  line-height:1.4;padding-left:16px;border-left:2px solid var(--lime);color:var(--ink)}


/* ============================================================
   WHAT YOU WALK AWAY WITH — a single ruled column, so it reads
   as a list of takeaways and never as a second card grid
   ============================================================ */
.walk{max-width:900px;margin:clamp(30px,3.6vw,42px) 0 0}   /* left edge shared with the headline */
.walkrow{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.4vw,28px);
  padding:clamp(20px,2.4vw,26px) 0;border-top:1px solid var(--line);align-items:start}
.walkrow:last-of-type{border-bottom:1px solid var(--line)}
.walkrow .mk{font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-size:13px;
  letter-spacing:.1em;color:var(--green-deep);padding-top:4px;min-width:26px}
.walkrow h4{font-family:"Archivo",system-ui,sans-serif;font-size:clamp(17px,1.8vw,20px);
  font-weight:700;line-height:1.25;margin-bottom:7px}
.walkrow p{font-size:16px;color:var(--muted);line-height:1.6}
.walkrow p em{font-style:italic;color:var(--ink)}
@media(max-width:640px){
  .walkrow{grid-template-columns:1fr;gap:6px}
  .walkrow .mk{padding-top:0}
}

/* the pull quote — his own published words, doing the closing argument */
.pullq{max-width:820px;margin:clamp(34px,4.4vw,52px) auto 0;text-align:center}
.pullq p{font-family:"Archivo",system-ui,sans-serif;font-weight:700;
  font-size:clamp(21px,2.7vw,34px);line-height:1.24;letter-spacing:-.005em;
  background:var(--g-green);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.pullq .who{margin-top:14px;font-family:"Archivo",system-ui,sans-serif;font-size:11.5px;
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ============================================================
   HONEST ANSWERS
   ============================================================ */
details.card{padding:0;overflow:hidden}
details.card summary{list-style:none;cursor:pointer;padding:18px 22px;
  font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:16px;line-height:1.35;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
details.card summary::-webkit-details-marker{display:none}
details.card summary::after{content:"";flex:none;width:11px;height:11px;
  border-right:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:rotate(45deg) translateY(-3px);transition:transform .25s}
details.card[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
details.card p{padding:0 22px 20px;color:var(--muted);font-size:16px}

/* ============================================================
   THE CLOSE + FOOTER
   ============================================================ */
.closecard{max-width:620px;margin:clamp(28px,4vw,40px) auto 0;text-align:left}
footer{background:var(--green-black);color:rgba(238,246,234,.5);padding:44px 0;font-size:13px}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
footer img{height:26px;width:auto;opacity:.9}

/* sticky phone CTA — appears once the hero is behind you */
#stickycta{position:fixed;left:0;right:0;bottom:0;z-index:950;
  padding:10px clamp(14px,4vw,20px) calc(10px + env(safe-area-inset-bottom));
  background:rgba(8,17,10,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid rgba(199,240,75,.2);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.7,.3,1)}
#stickycta.show{transform:none}
#stickycta .when{font-family:"Archivo",system-ui,sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--lime);line-height:1.35}
#stickycta .when span{display:block;color:rgba(238,246,234,.62);letter-spacing:.06em}
@media(min-width:901px){ #stickycta{display:none} }
/* the sticky bar must never sit ON the last thing on the page */
@media(max-width:900px){ body{padding-bottom:78px} }


/* ============================================================
   THE THANK-YOU PAGE — the arrival + the seat pass
   ============================================================ */
.arrive{padding:clamp(56px,7vw,104px) 0 clamp(52px,7vw,96px);display:flex;align-items:center}
/* on THIS page the photograph is texture, not the subject — the seat pass sits
   exactly where Meir's face lands on the landing page, so drop him back and let
   the two bright things (the seal, the pass) own the screen */
.arrive .stage-img{opacity:.34}
.arrive .stage-img::after{background:
  linear-gradient(180deg,rgba(8,17,10,.72) 0%,rgba(8,17,10,.5) 40%,rgba(8,17,10,.85) 100%)}
.arrivegrid{display:grid;grid-template-columns:1fr minmax(0,420px);gap:clamp(30px,5vw,64px);
  align-items:center;width:100%}
@media(max-width:920px){ .arrivegrid{grid-template-columns:1fr} }

/* the mark being made — a seal that DRAWS itself, not a flashed graphic */
.seal{width:74px;height:74px;margin-bottom:22px}
.seal svg{width:100%;height:100%;fill:none;stroke-linecap:round;stroke-linejoin:round}
.seal .ring{stroke:rgba(199,240,75,.28);stroke-width:2;
  stroke-dasharray:296;stroke-dashoffset:296;animation:draw 1.05s .1s cubic-bezier(.4,0,.2,1) forwards}
.seal .tick{stroke:url(#sealgrad);stroke-width:6.5;
  stroke-dasharray:58;stroke-dashoffset:58;animation:draw .55s .72s cubic-bezier(.4,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.a-h1{font-family:"Archivo",system-ui,sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(38px,6vw,80px);line-height:.98;letter-spacing:-.01em;margin:16px 0 0}
.a-sub{font-size:clamp(17px,1.6vw,20px);color:rgba(238,246,234,.76);margin-top:18px;max-width:44ch}

/* the seat pass — the hero's registration card, now filled in */
.pass{background:#fff;color:var(--ink);border-radius:22px;padding:clamp(22px,2.6vw,30px);
  box-shadow:0 30px 70px rgba(0,0,0,.42), 0 0 0 1px rgba(199,240,75,.22);
  position:relative;overflow:hidden}
.pass::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--g-btn)}
.passtop{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.plabel{font-family:"Archivo",system-ui,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.pstatus{display:inline-flex;align-items:center;gap:7px;font-family:"Archivo",system-ui,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lime-ink);background:var(--g-btn);padding:6px 12px;border-radius:999px}
.pstatus svg{width:11px;height:11px}
.ptitle{font-family:"Archivo",system-ui,sans-serif;font-size:clamp(20px,2.1vw,25px);font-weight:800;
  text-transform:uppercase;letter-spacing:.01em;line-height:1.1;margin:18px 0 6px}
.pmeta{font-size:14px;color:var(--muted)}
.prow{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:12px 0;border-top:1px solid var(--line-soft);font-size:15px}
.prow:first-of-type{margin-top:18px}
.prow span{color:var(--muted)}
.prow strong{font-family:"Archivo",system-ui,sans-serif;font-weight:700;text-align:right}
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px;
  padding-top:18px;border-top:1px solid var(--line-soft)}
.count .unit{text-align:center;padding:10px 4px;border-radius:12px;background:var(--paper-3)}
.count .n{font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-size:clamp(19px,2vw,24px);
  line-height:1;color:var(--green-deep);font-variant-numeric:tabular-nums}
.count .u{margin-top:5px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.joinbox{margin-top:18px;padding-top:18px;border-top:1px solid var(--line-soft)}
.joinbtn{display:block;text-align:center}
.joinmeta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;font-size:13px;color:var(--muted)}
/* ADD TO CALENDAR — deliberately QUIETER than the lime Join button, so that
   when GP_JOIN lands "Join on Zoom" is still the one loud thing in the card. */
.calbox{margin-top:18px;padding-top:18px;border-top:1px solid var(--line-soft)}
.calbtn{display:flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 22px;border:1.5px solid var(--ink);border-radius:999px;
  font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  transition:background .22s ease,color .22s ease,transform .22s ease}
.calbtn svg{width:18px;height:18px;flex:none}
.calbtn:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.calbtn:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.calalt{margin-top:11px;text-align:center;font-size:12.5px;color:var(--muted);line-height:1.5}
.calalt a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.calalt a:hover{color:var(--ink)}
.pfine{margin-top:16px;font-size:13px;color:var(--muted);line-height:1.5}

/* the numbered "what happens next" cards */
.steps{display:grid;gap:14px;margin-top:30px}
.step{display:flex;gap:20px;align-items:flex-start;padding:22px 26px}
.step .no{font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-size:18px;
  background:var(--g-green);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.step p{color:var(--muted);font-size:16px;line-height:1.6}
.step strong{color:var(--ink);font-weight:600}
.signoff{margin-top:clamp(28px,3.4vw,40px);text-align:center;color:var(--muted);font-size:16px}

/* ============================================================
   REVEALS — the whole page arrives, it does not just appear
   ============================================================ */
[data-reveal]{opacity:0;transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
[data-reveal].in{opacity:1;transform:none}
/* THE COMMUNITY LOCKUPS on the thank-you page (mirrors Gal's /thanks). Stacked
   in the arrival's left column — three lockups measured wider than the column
   at every width, so a row was never honest here. Platform colours stay TRUE;
   the one deliberate set of colours outside the lime/green palette. */
.joinnote{margin-top:10px;text-align:center;font-size:12.5px;color:var(--muted);line-height:1.5}
/* the lockups are the grid's THIRD child so a phone can order them AFTER the
   seat card: on a phone the Zoom button must come before the community, never
   under it. On desktop the card spans both rows; copy sits at the foot of row 1
   and the lockups at the head of row 2, so the pair still reads as one block
   centred on the card. */
/* two auto rows, the card spanning both: a spanning item's height is shared out
   across auto rows (it is NOT across fr rows — measured, they collapsed to 0),
   so copy anchored to the FOOT of row 1 and lockups to the HEAD of row 2 meet in
   the middle of the card. row-gap:0 here — the 64px column gap was also being
   applied between the rows and opened a hole under the copy. */
.arrivegrid{row-gap:0}
.arrivegrid>div:first-child{grid-column:1;grid-row:1;align-self:end}
.socials{display:grid;gap:16px;max-width:44ch;grid-column:1;grid-row:2;align-self:start;margin-top:28px}
.arrivegrid>.pass{grid-column:2;grid-row:1/3}
.soc{display:inline-flex;align-items:center;gap:13px;text-decoration:none;justify-self:start}
.soc-t1{display:block;font-size:14.5px;font-weight:600;line-height:1.3;color:rgba(238,246,234,.92);transition:color .2s ease}
.soc-t2{display:block;font-size:13.5px;line-height:1.3;color:rgba(238,246,234,.58);transition:color .2s ease;text-wrap:balance}
.soc:hover .soc-t1{color:#fff}
.soc:hover .soc-t2{color:rgba(238,246,234,.8)}
.soc-ic{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%}
.soc-ic svg{width:27px;height:27px;display:block;fill:#fff}
.soc--wa .soc-ic{background:linear-gradient(135deg,#2BE06F,#1DA851);box-shadow:0 6px 18px rgba(37,211,102,.32);animation:soc-wa 2.2s cubic-bezier(.4,0,.2,1) infinite}
.soc--ig .soc-ic{background:linear-gradient(135deg,#FEDA75 0%,#FA7E1E 26%,#D62976 55%,#962FBF 78%,#4F5BD5 100%);box-shadow:0 6px 18px rgba(214,41,118,.34);animation:soc-ig 2.2s cubic-bezier(.4,0,.2,1) .35s infinite}
.soc--yt .soc-ic{background:linear-gradient(135deg,#FF4B4B,#CC0000);box-shadow:0 6px 18px rgba(255,45,45,.32);animation:soc-yt 2.2s cubic-bezier(.4,0,.2,1) .7s infinite}
@keyframes soc-wa{0%{box-shadow:0 6px 18px rgba(37,211,102,.32),0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 6px 18px rgba(37,211,102,.32),0 0 0 13px rgba(37,211,102,0)}100%{box-shadow:0 6px 18px rgba(37,211,102,.32),0 0 0 0 rgba(37,211,102,0)}}
@keyframes soc-ig{0%{box-shadow:0 6px 18px rgba(214,41,118,.34),0 0 0 0 rgba(214,41,118,.5)}70%{box-shadow:0 6px 18px rgba(214,41,118,.34),0 0 0 13px rgba(214,41,118,0)}100%{box-shadow:0 6px 18px rgba(214,41,118,.34),0 0 0 0 rgba(214,41,118,0)}}
@keyframes soc-yt{0%{box-shadow:0 6px 18px rgba(255,45,45,.32),0 0 0 0 rgba(255,45,45,.5)}70%{box-shadow:0 6px 18px rgba(255,45,45,.32),0 0 0 13px rgba(255,45,45,0)}100%{box-shadow:0 6px 18px rgba(255,45,45,.32),0 0 0 0 rgba(255,45,45,0)}}
@media(max-width:920px){ .arrivegrid{row-gap:clamp(30px,5vw,64px)} .arrivegrid>div:first-child,.arrivegrid>.pass{grid-column:1;grid-row:auto;align-self:auto} .socials{max-width:none;grid-column:1;grid-row:auto;align-self:auto;margin-top:4px} }
@media(prefers-reduced-motion:reduce){ .soc--wa .soc-ic,.soc--ig .soc-ic,.soc--yt .soc-ic{animation:none} }

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;transition:none}
  .whenrow span::after{animation:none;opacity:0}
  .dotp{animation:none}
  .stage::before{transition:none}
  .pill,.vidcell .yt,.yt .play{transition:none}
}