/* ============================================================
   BUSINESS EMERGENCY ROOM — free live webinar with Gal Ezra
   Registration + thank-you pages · built 2026-09-03 · NOT DEPLOYED
   ------------------------------------------------------------
   The brief: the Wavelength page's length and bones (register is
   the first thing you see, the proof, the man, the close), in a
   new skin. Gal's own Business Emergency Room artwork is a maroon
   arms-crossed cutout under RED and BLUE light, so that is the
   palette: red is the symptom, blue is the cure, and the page
   travels from one to the other as you scroll.

       ER red        #FF2A3D   the alarm. Symptoms, the first CTA
       ER blue       #2F6BFF   the cure. Guarantee, the close
       night         #06080F   blue-black. The dark bands
       paper         #F6F7FB   the chart. Light bands

   Display: Anton (the same face as the ad campaign's hook lines,
   so the ads and the page read as one thing). Body: Figtree (the
   GP house body). Mono: JetBrains Mono, LABELS ONLY, four words max.
   ============================================================ */
:root{
  --night:#06080F;
  --night-2:#0B0F1A;
  --night-3:#121828;
  --paper:#F6F7FB;
  --paper-2:#ECEEF5;
  --ink:#0B0F1A;
  --muted:#5B6272;

  --txt:#F2F4FA;
  --txt-2:rgba(242,244,250,.74);
  --txt-3:rgba(242,244,250,.50);

  --red:#FF2A3D;
  --red-hi:#FF7C88;
  --red-deep:#C4102A;      /* accent text on paper (5.2:1) */
  --red-ink:#2A0308;

  --blue:#2F6BFF;
  --blue-hi:#8FB1FF;
  --blue-deep:#1E49C7;     /* accent text on paper (6.1:1) */

  --gold:#C9A55C;
  --gold-2:#E8C77A;
  --gold-deep:#7A5E24;
  --g-gold:linear-gradient(165deg,#F1D999 0%,#C9A55C 48%,#8A6A2A 100%);

  --g-er:linear-gradient(90deg,#FF2A3D 0%,#B23BFF 52%,#2F6BFF 100%);
  --g-red:linear-gradient(165deg,#FF6B78 0%,#FF2A3D 46%,#D3122A 100%);
  --g-blue:linear-gradient(165deg,#7FA6FF 0%,#2F6BFF 48%,#1E49C7 100%);

  --line:rgba(242,244,250,.10);
  --line-paper:rgba(11,15,26,.10);
  --maxw:1180px;
  --r:18px;

  --disp:Anton,"Archivo Black",Impact,sans-serif;
  --body:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* the scroll ramp: 0 = red (top of the page), 1 = blue (the close) */
  --mix:0;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:var(--body);
  background:var(--night);
  color:var(--txt);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--red);color:#fff}
html::-webkit-scrollbar{width:10px}
html::-webkit-scrollbar-track{background:var(--night)}
html::-webkit-scrollbar-thumb{background:var(--night-3);border-radius:8px;border:2px solid var(--night)}

/* scroll progress — the one place the whole red→blue ramp shows at once */
#prog{position:fixed;top:0;left:0;height:3px;width:0;background:var(--g-er);z-index:60;pointer-events:none}

/* ============================================================
   THE AMBIENT — a red glow and a blue glow behind every dark band.
   er.js drives --mix from scroll position, so the room is red at
   the top and blue by the close. No backdrop-filter anywhere: this
   is two radial gradients on a fixed layer, nothing more.
   ============================================================ */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient i{position:absolute;border-radius:50%;filter:blur(20px);will-change:opacity,transform}
.ambient .a-r{
  width:70vmax;height:70vmax;left:-25vmax;top:-20vmax;
  background:radial-gradient(circle,rgba(255,42,61,.34) 0%,rgba(255,42,61,.10) 38%,transparent 66%);
  opacity:calc(1 - var(--mix)*.85);
}
.ambient .a-b{
  width:80vmax;height:80vmax;right:-30vmax;bottom:-30vmax;
  background:radial-gradient(circle,rgba(47,107,255,.36) 0%,rgba(47,107,255,.10) 38%,transparent 66%);
  opacity:calc(.22 + var(--mix)*.78);
}
main,header,footer,section{position:relative;z-index:1}

/* ============================================================
   TYPE
   ============================================================ */
.wrap{width:min(var(--maxw),calc(100% - 40px));margin:0 auto}
.disp{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.92}
.d1{font-family:var(--disp);font-weight:400;text-transform:uppercase;line-height:.9;letter-spacing:.002em;font-size:clamp(56px,6.5vw,98px)}
.d2{font-family:var(--disp);font-weight:400;text-transform:uppercase;line-height:.94;letter-spacing:.004em;font-size:clamp(36px,4.8vw,66px)}
.d3{font-family:var(--disp);font-weight:400;text-transform:uppercase;line-height:1;font-size:clamp(22px,2.2vw,30px)}
.lead{font-size:clamp(17px,1.25vw,20px);line-height:1.6;color:var(--txt-2)}
.paper .lead{color:var(--muted)}
.acc-r{color:var(--red)}
.acc-b{color:var(--blue-hi)}
.acc-g{color:var(--gold-2)}
.paper .acc-r{color:var(--red-deep)}
.paper .acc-b{color:var(--blue-deep)}

/* the label — mono, caps, never more than four words */
.tag{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-3);
}
.tag::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
.tag.center{justify-content:center}
.tag.center::before{display:none}
.tag.red{color:var(--red)}
.tag.blue{color:var(--blue-hi)}
.tag.gold{color:var(--gold-2)}
.paper .tag{color:var(--muted)}
.paper .tag.red{color:var(--red-deep)}
.paper .tag.blue{color:var(--blue-deep)}

/* ============================================================
   BUTTONS
   ============================================================ */
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--body);font-weight:700;font-size:15px;letter-spacing:.01em;
  padding:14px 24px;border-radius:999px;border:0;cursor:pointer;
  background:var(--g-red);color:#fff;
  box-shadow:0 10px 30px -10px rgba(255,42,61,.75),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,filter .28s;
  white-space:nowrap;
}
.pill:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(255,42,61,.85),inset 0 1px 0 rgba(255,255,255,.3);filter:saturate(1.08)}
.pill:active{transform:translateY(0)}
.pill.big{padding:18px 32px;font-size:16.5px}
.pill.blue{background:var(--g-blue);box-shadow:0 10px 30px -10px rgba(47,107,255,.8),inset 0 1px 0 rgba(255,255,255,.28)}
.pill.blue:hover{box-shadow:0 18px 40px -12px rgba(47,107,255,.9),inset 0 1px 0 rgba(255,255,255,.3)}
.pill.ghost{background:transparent;color:var(--txt);border:1px solid var(--line);box-shadow:none}
.pill.ghost:hover{border-color:rgba(242,244,250,.35);box-shadow:none}
.paper .pill.ghost{color:var(--ink);border-color:var(--line-paper)}
.ghostlink{color:var(--txt-2);font-weight:600;font-size:15px;border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .2s,border-color .2s}
.ghostlink:hover{color:var(--txt);border-color:var(--txt-2)}

/* ============================================================
   HEADER — logo, FREE WEBINAR, register
   ============================================================ */
.bar{position:absolute;top:0;left:0;right:0;z-index:20;padding:14px 0}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(1340px,calc(100% - 48px))}
.bar img{height:76px;width:auto}
.bar .right{display:flex;align-items:center;gap:14px}
.freetag{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--txt);padding:9px 14px;border-radius:999px;white-space:nowrap;
  border:1px solid rgba(255,42,61,.5);background:rgba(255,42,61,.10);
}
.freetag i{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(255,42,61,.6);animation:beacon 1.6s ease-out infinite}
@keyframes beacon{0%{box-shadow:0 0 0 0 rgba(255,42,61,.65)}100%{box-shadow:0 0 0 12px rgba(255,42,61,0)}}
.bar .pill{padding:11px 18px;font-size:14px}
@media (max-width:640px){
  .bar .pill{display:none}
  .bar img{height:56px}
  .freetag{font-size:11px;letter-spacing:.14em;padding:8px 12px}   /* one line beside the logo at 360-390 */
}

/* ============================================================
   1 · THE STAGE — the hero. Red on the left, blue on the right,
   both breathing slowly out of phase, like ER lights through
   frosted glass. Gal's cutout stands in the seam of the two.
   ============================================================ */
.stage{
  position:relative;overflow:hidden;
  min-height:0;
  padding:100px 0 0;   /* round 7: 8px up, so the heartbeat + the next heading show at a 779px laptop fold */
  background:var(--night);
  isolation:isolate;
  display:flex;flex-direction:column;
}
.stage::before,.stage::after{
  content:"";position:absolute;z-index:0;border-radius:50%;pointer-events:none;
  filter:blur(28px);will-change:opacity,transform;
}
.stage::before{
  /* THE RED SIDE — a wash over the whole left half, brightest behind Gal's left shoulder */
  width:110vmax;height:110vmax;left:-40vmax;top:-30vmax;
  background:radial-gradient(circle at 62% 58%,rgba(255,42,61,.78) 0%,rgba(255,42,61,.46) 22%,rgba(255,42,61,.16) 42%,transparent 60%);
  animation:breathe 6.4s ease-in-out infinite alternate;
}
.stage::after{
  /* THE BLUE SIDE — the mirror, brightest behind his right shoulder */
  width:110vmax;height:110vmax;right:-40vmax;top:-30vmax;
  background:radial-gradient(circle at 38% 58%,rgba(47,107,255,.8) 0%,rgba(47,107,255,.48) 22%,rgba(47,107,255,.16) 42%,transparent 60%);
  animation:breathe 6.4s ease-in-out infinite alternate-reverse;
}
@keyframes breathe{from{opacity:.78;transform:scale(.98)}to{opacity:1;transform:scale(1.03)}}
/* the seam itself: a hard-ish red→blue shift straight behind him, mid-height */
.stage .split{
  position:absolute;z-index:0;pointer-events:none;
  left:50%;top:14%;transform:translateX(-50%);
  width:min(62vw,900px);height:78%;border-radius:50%;
  background:linear-gradient(90deg,rgba(255,42,61,.75) 0%,rgba(255,42,61,.55) 38%,rgba(120,60,220,.5) 50%,rgba(47,107,255,.55) 62%,rgba(47,107,255,.8) 100%);
  filter:blur(46px);opacity:.9;
}

/* a faint tile grid — the room, not a gradient */
.stage .tiles{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(242,244,250,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(242,244,250,.045) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,#000 30%,transparent 100%);
}
.stage .vign{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 90% 80% at 50% 30%,transparent 40%,rgba(6,8,15,.7) 100%)}

.stage-grid{
  width:min(1340px,calc(100% - 48px));
  position:relative;z-index:2;flex:1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr) minmax(0,1.07fr);
  column-gap:clamp(18px,2vw,28px);row-gap:0;align-items:end;
  padding-bottom:66px;   /* the monitor's band — nothing but the figure sits under it.
                            66px > the heartbeat's peak (58.6px), so the copy and the
                            card can never be stabbed by it (round 6, widened round 7) */
}
.stage-copy{align-self:center;padding:0 0 8px}
.stage-card{align-self:center;padding:0 0 8px}
.kickrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.kickrow .with{font-size:14px;font-weight:500;color:var(--txt-2)}
.stage-kick{color:var(--txt-2)}
.stage-kick b{color:var(--red);font-weight:500}
.stage-title{margin:0 0 26px;color:var(--txt);text-shadow:0 2px 40px rgba(6,8,15,.6)}
.stage-title .em{
  color:var(--red);
  background:var(--g-er);-webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 100%;animation:sheen 7s ease-in-out infinite;
}
@keyframes sheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.stage-slogan{
  font-family:var(--disp);text-transform:uppercase;letter-spacing:.02em;line-height:1.05;
  font-size:clamp(18px,1.7vw,24px);color:var(--txt);
}
.stage-slogan .late{color:var(--red)}
.stage-sub{margin:18px 0 0;max-width:540px;font-size:clamp(16px,1.15vw,18px)}
.stage-sub strong{color:var(--txt);font-weight:700}

.whenrow{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
.whenrow span{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 14px;border-radius:999px;border:1px solid var(--line);
  background:rgba(242,244,250,.04);font-weight:600;font-size:14px;color:var(--txt-2);
}
.whenrow span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue-hi)}
.whenrow span.r::before{background:var(--red)}

/* THE REGISTRATION CARD — the hero's whole reason */
.regcard{
  position:relative;
  background:linear-gradient(180deg,rgba(18,24,40,.96),rgba(10,14,26,.96));
  border:1px solid transparent;
  border-radius:var(--r);
  padding:clamp(26px,2.4vw,34px);
  max-width:none;
  box-shadow:0 50px 100px -40px rgba(0,0,0,.95),0 0 80px -20px rgba(47,107,255,.35),0 0 60px -30px rgba(255,42,61,.35),inset 0 1px 0 rgba(255,255,255,.1);
}
/* the edge: a red→blue hairline all the way round, drawn on a shadow-free pseudo */
.regcard::before{
  content:"";position:absolute;inset:-1px;border-radius:calc(var(--r) + 1px);padding:1.5px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,42,61,.95) 0%,rgba(255,120,140,.35) 30%,rgba(140,170,255,.35) 70%,rgba(47,107,255,.95) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.regcard h3{font-family:var(--disp);text-transform:uppercase;font-size:clamp(26px,2.4vw,34px);letter-spacing:.01em;line-height:1;color:var(--txt)}
.tick-line{display:flex;align-items:flex-start;gap:10px;margin:12px 0 18px;font-size:15px;color:var(--txt-2);font-weight:500}
.tick-line .dotp{flex:none;margin-top:6px;width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(255,42,61,.6);animation:beacon 1.8s ease-out infinite}
.tick-line strong{color:var(--txt);font-weight:700}

/* the fields — styled to disappear into the card */
.fields{display:grid;gap:11px}
.fld{
  width:100%;height:56px;padding:0 18px;border-radius:12px;
  border:1px solid rgba(242,244,250,.14);background:rgba(242,244,250,.06);
  color:var(--txt);font:inherit;font-size:16px;font-weight:500;outline:none;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.fld::placeholder{color:var(--txt-3)}
.fld:focus{border-color:rgba(143,177,255,.7);background:rgba(242,244,250,.08);box-shadow:0 0 0 4px rgba(47,107,255,.18)}
.fields .pill{width:100%;margin-top:6px;height:60px;font-size:17px}
.fine{margin-top:12px;font-size:13px;line-height:1.5;color:var(--txt-3)}
/* the hero's button PULSES — an ER beacon ring on a shadow-free pseudo, so it
   never fights the hover glow. Reduced motion runs it once and it fades out. */
.stage .fields .pill{position:relative;isolation:isolate}
.stage .fields .pill::after{
  content:"";position:absolute;inset:0;border-radius:999px;z-index:-1;pointer-events:none;
  box-shadow:0 0 0 0 rgba(255,42,61,.7);
  animation:pulse-ring 2.2s cubic-bezier(.2,.7,.3,1) infinite;
}
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(255,42,61,.7)}70%,100%{box-shadow:0 0 0 18px rgba(255,42,61,0)}}

/* GoHighLevel's iframe, once the form exists — same rules as Wavelength */
.ghlform{position:relative;margin:0 -6px}
.ghlform iframe{width:100%;border:0;display:block;min-height:320px}

/* GAL — the cutout, lit red from the left and blue from the right */
.stage-fig{
  position:relative;align-self:end;justify-self:center;
  width:100%;height:auto;
  padding-top:18px;      /* air between the header and his name (round 6, trimmed round 7) */
  margin-bottom:-80px;   /* into the monitor band. 🪤 The under-arm cuff sits 15.6% above the image bottom and the
                            watch hand 24%: with -80px both stay ABOVE the fade, which only starts 42% into the band */
  pointer-events:none;
  display:flex;flex-direction:column;align-items:center;
}
/* .galfig — the cutout plus the split light. The light layer is a plain
   gradient MASKED BY THE SAME IMAGE, so it exists only on his silhouette,
   then blended onto him: red on his left, blue on his right, face untouched.
   🪤 No mask on the img itself: a mask clips drop-shadow to the box. The
   mask lives on the light layer, which has no shadow. */
.galfig{
  position:relative;flex:none;
  height:clamp(440px,34vw,520px);     /* 490px at 1440 — the figure follows the page width, never the viewport height */
  filter:drop-shadow(0 30px 44px rgba(0,0,0,.7));
  animation:arrive 1.6s cubic-bezier(.2,.8,.2,1) both;
}
.galfig img{display:block;height:100%;width:auto;max-width:none}
@keyframes arrive{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
/* the halo behind him — the seam where red meets blue */
.stage-fig::before{
  content:"";position:absolute;left:50%;bottom:4%;transform:translateX(-50%);
  width:150%;height:78%;border-radius:50%;z-index:-1;
  background:linear-gradient(90deg,rgba(255,42,61,.7) 0%,rgba(255,42,61,.5) 40%,rgba(47,107,255,.5) 60%,rgba(47,107,255,.72) 100%);
  filter:blur(34px);
}
.stage-fig .name{
  flex:none;margin-bottom:24px;white-space:nowrap;text-align:center;line-height:1.2;
}
.stage-fig .name span{
  display:block;margin-top:6px;
  font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-2);
}
.stage-fig .name b{display:block;color:var(--txt);font-family:var(--disp);font-weight:400;font-size:28px;letter-spacing:.05em;text-transform:uppercase;text-shadow:0 2px 24px rgba(6,8,15,.7)}

/* THE MONITOR — the heartbeat along the foot of the hero */
.ecg{
  position:absolute;left:0;right:0;bottom:0;z-index:3;height:104px;pointer-events:none;
  /* the fade starts 48% down the band (below his hands AND the under-arm cuff), then dissolves the torso into the floor */
  background:linear-gradient(180deg,transparent 0%,transparent 48%,rgba(6,8,15,.5) 72%,var(--night) 100%);
}
.ecg svg{width:100%;height:100%}
.ecg .trace{fill:none;stroke:url(#ecg-g);stroke-width:1.6;opacity:.28;stroke-linejoin:round;stroke-linecap:round}
.ecg .sweep{
  fill:none;stroke:url(#ecg-g);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:190 1700;stroke-dashoffset:1890;
  animation:sweep 5.2s linear infinite;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.35));
}
@keyframes sweep{to{stroke-dashoffset:0}}

/* the stage breathes toward the pointer — light follows you */
.stage{--mx:50%;--my:40%}
.stage .follow{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle 360px at var(--mx) var(--my),rgba(242,244,250,.07),transparent 70%);
}

/* the "on call" strip that replaces the figure on a phone */
.oncall{display:none}

/* a SHORT laptop viewport (1366x768 = ~680px tall): Gal a step smaller so the
   whole card, button included, still sits above the fold */
@media (min-width:1101px) and (max-height:760px){
  .galfig{height:clamp(400px,31.5vw,470px)}
  .stage-fig{padding-top:10px;margin-bottom:-70px}
}
@media (max-width:1100px){
  /* below the three-column hero the header and hero go back to the page's own 20px margins */
  .bar .wrap,.stage-grid{width:calc(100% - 40px)}
  .stage-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .stage-fig{display:none}
}
@media (max-width:900px){
  .stage{padding-top:96px;min-height:0;display:block}
  .stage-grid{grid-template-columns:1fr;align-items:start;padding-bottom:0}
  .stage-copy,.stage-card{padding:0}
  .whenrow{margin-bottom:0}
  .stage-card{margin-top:26px}
  .regcard{max-width:none}
  .stage-fig{display:none}
  /* the photo comes AFTER the form on a phone — Gal's own rule from the
     Love Languages brief. A narrow band, lit the same, then the monitor. */
  .oncall{
    display:grid;grid-template-columns:1fr auto;align-items:end;gap:16px;
    margin-top:34px;position:relative;z-index:2;min-height:220px;
  }
  .oncall .who{padding-bottom:70px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);line-height:1.9}
  .oncall .who b{display:block;color:var(--txt);font-weight:500;font-size:12px}
  .oncall .galfig{height:260px;margin-right:-10px;flex:none;filter:drop-shadow(0 20px 30px rgba(0,0,0,.7));animation:none}
  .oncall{background:linear-gradient(90deg,rgba(255,42,61,.28),rgba(47,107,255,.32));border-radius:18px;padding:0 14px}
  .ecg{height:80px}
}

/* ============================================================
   BANDS
   ============================================================ */
section.band{padding:clamp(72px,9vw,128px) 0}
section.dark{background:transparent;color:var(--txt)}
section.dark.solid{background:var(--night)}
section.blueroom{background:linear-gradient(180deg,rgba(47,107,255,0) 0%,rgba(47,107,255,.11) 28%,rgba(47,107,255,.14) 72%,rgba(47,107,255,0) 100%)}
section.goldroom{background:linear-gradient(180deg,rgba(201,165,92,0) 0%,rgba(201,165,92,.09) 26%,rgba(201,165,92,.12) 74%,rgba(201,165,92,0) 100%)}
.bigtag{
  font-family:var(--disp);text-transform:uppercase;letter-spacing:.04em;line-height:1;
  font-size:clamp(30px,3.6vw,50px);color:var(--gold-2);
  text-shadow:0 0 40px rgba(201,165,92,.35);
}
.goldroom .guar h4{font-size:clamp(28px,3vw,42px)}
.goldroom .guar{border-color:rgba(201,165,92,.24);background:rgba(201,165,92,.045)}
.goldroom .guar::before{background:var(--g-gold)}
.goldroom .guar .n{color:var(--gold-2)}
.goldroom .guar p strong{color:var(--gold-2)}
.goldroom .stamp{
  width:170px;height:170px;font-size:18px;
  border-color:rgba(232,199,122,.85);color:var(--gold-2);
  box-shadow:inset 0 0 0 6px var(--night),inset 0 0 0 7px rgba(201,165,92,.5),0 0 60px -14px rgba(201,165,92,.55);
}
section.paper{background:var(--paper);color:var(--ink)}
section.paper-2{background:var(--paper-2);color:var(--ink)}
.paper-2 .lead{color:var(--muted)}
.paper-2 .acc-r{color:var(--red-deep)}
.paper-2 .acc-b{color:var(--blue-deep)}
.paper-2 .tag{color:var(--muted)}
.paper-2 .tag.red{color:var(--red-deep)}
.paper-2 .tag.blue{color:var(--blue-deep)}
.paper-2 .pill.ghost{color:var(--ink);border-color:var(--line-paper)}
section.paper .d2,section.paper-2 .d2,section.paper .d3{color:var(--ink)}
.hair{border-top:1px solid var(--line)}
.sechead{max-width:820px}
.sechead .d2{margin:18px 0 14px}
.sechead.center{margin:0 auto;text-align:center}

/* the seam between a dark band and a paper band — a strip of the ramp,
   so a section change reads as a cut in the light, not a cut in the page */
.seam{height:2px;background:var(--g-er);opacity:.9;position:relative;z-index:1}

/* ============================================================
   2 · TRIAGE — are these your symptoms?
   ============================================================ */
.symgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:start}
.symgrid .sticky{position:sticky;top:96px}
.symlist{display:grid;gap:6px;counter-reset:sym}
.symrow{
  display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;
  padding:14px 16px 14px 12px;border-radius:14px;
  border:1px solid transparent;
  transition:background .3s,border-color .3s;
}
.symrow:hover{background:rgba(255,42,61,.06);border-color:rgba(255,42,61,.18)}
.symrow .x{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  border:1px solid rgba(255,42,61,.35);background:rgba(255,42,61,.08);
  color:var(--red);font-family:var(--disp);font-size:22px;line-height:1;
}
.symrow p{font-size:clamp(17px,1.35vw,20px);font-weight:500;color:var(--txt);line-height:1.3}
.symrow.in .x{animation:flash .6s ease-out both}
@keyframes flash{0%{background:rgba(255,42,61,.8);color:#fff}100%{background:rgba(255,42,61,.08);color:var(--red)}}
.cure{
  margin-top:22px;padding:24px 26px;border-radius:var(--r);
  background:linear-gradient(135deg,rgba(47,107,255,.16),rgba(47,107,255,.06));
  border:1px solid rgba(47,107,255,.35);
  display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;
}
.cure .ok{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--g-blue);color:#fff;font-family:var(--disp);font-size:20px;box-shadow:0 10px 24px -10px rgba(47,107,255,.9)}
.cure h4{font-family:var(--disp);text-transform:uppercase;font-size:clamp(22px,2.1vw,30px);line-height:1;color:var(--txt);letter-spacing:.01em}
.cure p{margin-top:10px;color:var(--txt-2);font-size:16.5px}
.cure .act{margin-top:18px}
.cure .pill{white-space:normal;text-align:center;line-height:1.25;padding-top:12px;padding-bottom:12px}
@media (max-width:900px){
  .symgrid{grid-template-columns:1fr}
  .symgrid .sticky{position:static}
}
.symh{margin-top:18px}
.symgrid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin:clamp(30px,3.6vw,48px) auto 0;max-width:1000px}
.symgrid2 .symrow{padding:14px 18px;border-radius:14px;background:rgba(255,42,61,.055);border:1px solid rgba(255,42,61,.18)}
.symgrid2 .symrow:hover{background:rgba(255,42,61,.055);border-color:rgba(255,42,61,.18)}
.symgrid2 .symrow p{font-size:clamp(18px,1.5vw,22px);font-weight:600}
.cure.center{max-width:760px;margin:clamp(28px,3vw,40px) auto 0}
@media (max-width:700px){.symgrid2{grid-template-columns:1fr}}

/* ============================================================
   3 · THE DIAGNOSIS — the chart, on paper
   ============================================================ */
.rxgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(34px,4vw,54px)}
.rx{
  position:relative;padding:26px 26px 26px 26px;border-radius:var(--r);
  background:#fff;border:1px solid var(--line-paper);
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
}
.rx:hover{transform:translateY(-3px);box-shadow:0 24px 50px -30px rgba(11,15,26,.35)}
.rx .no{
  font-family:var(--disp);font-size:44px;line-height:.9;letter-spacing:.01em;
  background:var(--g-er);-webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:600% 100%;background-position:var(--pos,0%) 50%;
}
.rx h4{font-size:19px;font-weight:700;color:var(--ink);line-height:1.25}
.rx p{margin-top:8px;color:var(--muted);font-size:15.5px;line-height:1.55}
.rx:nth-child(1) .no{--pos:0%}
.rx:nth-child(2) .no{--pos:20%}
.rx:nth-child(3) .no{--pos:40%}
.rx:nth-child(4) .no{--pos:60%}
.rx:nth-child(5) .no{--pos:80%}
.rx:nth-child(6) .no{--pos:100%}
@media (max-width:760px){.rxgrid{grid-template-columns:1fr}}

.pullq{
  margin:clamp(40px,5vw,64px) auto 0;max-width:900px;text-align:center;
  padding:clamp(28px,3.6vw,44px) clamp(20px,3vw,40px);
  border-radius:var(--r);position:relative;
}
.pullq p{font-family:var(--disp);text-transform:uppercase;font-size:clamp(26px,3.4vw,46px);line-height:1;letter-spacing:.005em;color:var(--ink)}
.dark .pullq p{color:var(--txt)}
.pullq .who{margin-top:16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.dark .pullq .who{color:var(--txt-3)}
.pullq::before,.pullq::after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:80px;height:2px;background:var(--g-er)}
.pullq::before{top:0}
.pullq::after{bottom:0}

/* ============================================================
   4 · DOUBLE GUARANTEED
   ============================================================ */
.guargrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(34px,4vw,54px)}
.guar{
  position:relative;padding:clamp(26px,3vw,38px);border-radius:var(--r);
  background:rgba(242,244,250,.035);border:1px solid var(--line);
  overflow:hidden;
}
.guar::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--g-blue)}
.guar .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-hi)}
.guar h4{margin:12px 0 12px;font-family:var(--disp);text-transform:uppercase;font-size:clamp(24px,2.4vw,34px);line-height:1;color:var(--txt)}
.guar p{color:var(--txt-2);font-size:16.5px}
.guar p strong{color:var(--txt)}
.stamp{
  display:inline-grid;place-items:center;margin-top:24px;
  width:150px;height:150px;border-radius:50%;
  border:2px solid rgba(47,107,255,.6);
  font-family:var(--disp);text-transform:uppercase;text-align:center;line-height:1.05;font-size:17px;color:var(--blue-hi);
  transform:rotate(-8deg);
  box-shadow:inset 0 0 0 6px var(--night),inset 0 0 0 7px rgba(47,107,255,.35);
}
@media (max-width:760px){.guargrid{grid-template-columns:1fr}}

/* ============================================================
   5 · WHAT PEOPLE SAY — lite YouTube tiles
   ============================================================ */
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
section.proof{padding:clamp(22px,2.6vw,30px) 0 clamp(56px,6vw,84px)}
.proofhead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:14px}
.proofhead .proof-h2{font-size:clamp(28px,3vw,40px);margin-top:8px}
.proofhead .proof-lead{max-width:420px;font-size:15px;margin-bottom:4px}
.marquee{
  --tile:calc((min(var(--maxw),100vw - 40px) - 48px) / 4);
  overflow:hidden;margin:0 calc(50% - 50vw);padding:6px 0 4px;
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.marquee .track{display:flex;width:max-content;animation:mq 72s linear infinite;will-change:transform}
.marquee .vidcell{flex:0 0 var(--tile);margin-right:16px}
.marquee .yt .play{width:52px;height:52px}
.marquee .quote p{font-size:15.5px}
@keyframes mq{to{transform:translateX(-50%)}}
.marquee:hover .track,.marquee.paused .track{animation-play-state:paused}
@media (max-width:1100px){.marquee{--tile:calc((100vw - 56px) / 2)}}
@media (max-width:560px){.marquee{--tile:74vw}}
@media (prefers-reduced-motion:reduce){.marquee{overflow-x:auto;mask:none;-webkit-mask:none}.marquee .track{animation:none}}
.g6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.g6 .yt .play{width:42px;height:42px}
.g6 .yt .play svg{width:18px;height:18px;margin-left:2px}
.g6 .quote{margin-top:10px}
.g6 .quote p{font-size:14.5px;line-height:1.35}
.g6 .quote .who{font-size:10px;margin-top:4px}
@media (max-width:1100px){.g6{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.g6 .yt .play{width:54px;height:54px}.g6 .quote p{font-size:15.5px}}
@media (max-width:560px){.g6{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.vidcell{min-width:0}
.yt{
  position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;cursor:pointer;
  background:#0B0F1A;border:1px solid var(--line-paper);
}
.yt img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .4s}
.yt:hover img{transform:scale(1.04)}
.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:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.94);box-shadow:0 14px 34px -12px rgba(0,0,0,.6);
  transition:transform .3s,background .3s;
}
.yt .play svg{width:26px;height:26px;margin-left:3px}
.yt:hover .play{transform:translate(-50%,-50%) scale(1.08);background:#fff}
.quote{margin-top:12px}
.quote p{font-weight:600;font-size:16.5px;color:var(--ink);line-height:1.4}
.quote .who{margin-top:5px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dark .quote p{color:var(--txt)}
.dark .quote .who{color:var(--txt-3)}
.evaq{
  margin-top:18px;padding:22px 26px;border-radius:var(--r);
  background:#fff;border:1px solid var(--line-paper);
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
}
.evaq .mark{font-family:var(--disp);font-size:54px;line-height:.7;color:var(--red-deep)}
.evaq p{font-size:17.5px;font-weight:600;color:var(--ink);line-height:1.45}
.evaq .who{margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (max-width:900px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.g3{grid-template-columns:1fr}}

/* ============================================================
   6 · ON CALL — Gal
   ============================================================ */
.bioband{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:center}
.bioband .photo{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5}
.bioband .photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.bioband .photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(6,8,15,.75) 100%),
             linear-gradient(90deg,rgba(255,42,61,.18),transparent 40%,transparent 60%,rgba(47,107,255,.2));
  mix-blend-mode:normal;
}
.bioband .photo .cap{
  position:absolute;left:20px;bottom:18px;right:20px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-2);line-height:1.8;
}
.bioband .photo .cap b{display:block;color:var(--txt);font-weight:500}
.mission{
  font-family:var(--disp);text-transform:uppercase;font-size:clamp(24px,2.6vw,36px);line-height:1;letter-spacing:.005em;
  color:var(--txt);margin:0 0 18px;
}
.mission span{color:var(--blue-hi)}
.statgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:28px}
.stat{padding:18px 18px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(242,244,250,.03)}
.stat .n{font-family:var(--disp);font-size:clamp(34px,3.4vw,48px);line-height:.95;color:var(--txt)}
.stat .n small{font-size:.5em;color:var(--blue-hi);margin-left:2px}
.stat .u{margin-top:8px;font-size:13px;color:var(--txt-3);line-height:1.4}
@media (max-width:900px){
  .bioband{grid-template-columns:1fr}
  .bioband .photo{aspect-ratio:4/3;max-height:440px}
  .statgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================
   7 · STRAIGHT TALK — not / will, the commitment, honest answers
   ============================================================ */
.twocol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(34px,4vw,54px);align-items:start}
.col{padding:clamp(24px,2.8vw,34px);border-radius:var(--r);background:#fff;border:1px solid var(--line-paper)}
.col h4{font-family:var(--disp);text-transform:uppercase;font-size:clamp(22px,2.2vw,30px);line-height:1;color:var(--ink)}
.col h4 span{color:var(--red-deep)}
.col.will h4 span{color:var(--blue-deep)}
.col ol{list-style:none;margin-top:18px;display:grid;gap:14px;counter-reset:n}
.col li{position:relative;padding-left:34px;counter-increment:n;font-size:15.5px;color:var(--muted);line-height:1.55}
.col li::before{
  content:counter(n,decimal-leading-zero);position:absolute;left:0;top:2px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--red-deep);
}
.col.will li::before{color:var(--blue-deep)}
.col li strong{color:var(--ink);font-weight:700;display:block;margin-bottom:2px}
.commit{
  margin-top:16px;padding:clamp(24px,2.8vw,34px);border-radius:var(--r);
  background:var(--night);color:var(--txt);
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;
}
.commit .clock{
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  border:2px solid rgba(47,107,255,.6);font-family:var(--disp);font-size:20px;color:var(--blue-hi);
}
.commit p{font-size:17px;color:var(--txt-2)}
.commit p strong{color:var(--txt)}
@media (max-width:760px){
  .twocol{grid-template-columns:1fr}
  .commit{grid-template-columns:1fr}
}
.faq{margin-top:clamp(34px,4vw,54px);display:grid;gap:12px;max-width:820px}
details.card{
  border-radius:14px;background:#fff;border:1px solid var(--line-paper);padding:0 22px;
}
details.card summary{
  cursor:pointer;list-style:none;padding:18px 0;font-weight:700;font-size:16.5px;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
details.card summary::-webkit-details-marker{display:none}
details.card summary::after{content:"+";font-family:var(--disp);font-size:22px;color:var(--red-deep);transition:transform .3s}
details.card[open] summary::after{transform:rotate(45deg);color:var(--blue-deep)}
details.card p{padding:0 0 18px;color:var(--muted);font-size:15.5px;line-height:1.6}

/* ============================================================
   8 · THE CLOSE
   ============================================================ */
.closecard{margin:28px auto 0;max-width:560px;text-align:left}
.closecard .regcard{max-width:none}
.closecard .regcard::before{background:linear-gradient(135deg,rgba(143,177,255,.9),rgba(47,107,255,.4) 50%,rgba(47,107,255,.95))}
.closecard .tick-line .dotp{background:var(--blue-hi);animation-name:beaconb}
@keyframes beaconb{0%{box-shadow:0 0 0 0 rgba(47,107,255,.65)}100%{box-shadow:0 0 0 12px rgba(47,107,255,0)}}

/* ============================================================
   FOOTER — logo, contact, privacy + terms, the small print
   ============================================================ */
footer{padding:44px 0 60px;border-top:1px solid var(--line);background:var(--night);position:relative;z-index:1}
footer .top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
footer img{height:30px;width:auto}
footer .links{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14px;color:var(--txt-2)}
footer .links a{border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
footer .links a:hover{color:var(--txt);border-color:var(--txt-3)}
footer .small{margin-top:28px;display:grid;gap:12px;max-width:980px;font-size:12.5px;line-height:1.6;color:var(--txt-3)}
footer .small strong{color:var(--txt-2);font-weight:600}
footer .copy{margin-top:22px;font-size:12.5px;color:var(--txt-3)}

/* sticky phone CTA — the door stays with you once the hero is gone */
#stickycta{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:none;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(6,8,15,.92);border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
#stickycta.show{transform:translateY(0)}
#stickycta .when{font-size:12px;line-height:1.3;color:var(--txt-3);font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase}
#stickycta .when span{display:block;color:var(--txt);font-family:var(--body);font-weight:700;letter-spacing:0;text-transform:none;font-size:14px}
#stickycta .pill{padding:12px 18px;font-size:14px;flex:none}
@media (max-width:760px){#stickycta{display:flex}}

/* ============================================================
   REVEALS
   ============================================================ */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.08s}
[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}
[data-reveal][data-delay="4"]{transition-delay:.32s}
[data-reveal][data-delay="5"]{transition-delay:.40s}
[data-reveal][data-delay="6"]{transition-delay:.48s}
[data-reveal][data-delay="7"]{transition-delay:.56s}
[data-reveal][data-delay="8"]{transition-delay:.64s}
[data-reveal][data-delay="9"]{transition-delay:.72s}
[data-reveal][data-delay="10"]{transition-delay:.80s}

/* the hero's own load sequence */
.up{opacity:0;transform:translateY(16px);animation:up .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes up{to{opacity:1;transform:none}}

/* ============================================================
   THANK-YOU PAGE — the arrival
   ============================================================ */
.arrive{
  position:relative;overflow:hidden;min-height:100svh;
  padding:clamp(110px,14vh,150px) 0 clamp(60px,8vh,100px);
  display:flex;flex-direction:row;align-items:center;
}
.arrive .wrap{width:min(var(--maxw),calc(100% - 40px));margin:0 auto}
.arrive::before,.arrive::after{
  content:"";position:absolute;z-index:0;border-radius:50%;pointer-events:none;filter:blur(28px);
}
.arrive::before{
  width:70vmax;height:70vmax;left:-28vmax;top:-22vmax;
  background:radial-gradient(circle,rgba(255,42,61,.32) 0%,rgba(255,42,61,.10) 36%,transparent 64%);
  animation:calm 2.4s ease-out 1.2s both;
}
.arrive::after{
  width:84vmax;height:84vmax;right:-30vmax;top:-14vmax;
  background:radial-gradient(circle,rgba(47,107,255,.62) 0%,rgba(47,107,255,.2) 36%,transparent 64%);
  animation:breathe 6s ease-in-out infinite alternate;
}
/* the red light settles once you are in — the room goes blue */
@keyframes calm{from{opacity:1}to{opacity:.28}}
.arrivegrid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:clamp(28px,5vw,72px);row-gap:34px;align-items:center}
.a-h1{font-size:clamp(52px,7.2vw,104px)}
.a-line{margin-top:14px;font-family:var(--disp);text-transform:uppercase;font-size:clamp(18px,1.9vw,26px);line-height:1.05;color:var(--blue-hi)}
.a-sub{margin-top:18px;max-width:520px}
.a-sub strong{color:var(--txt)}

.pass{
  position:relative;border-radius:var(--r);
  background:rgba(10,14,26,.84);border:1px solid rgba(242,244,250,.14);
  padding:clamp(22px,2.4vw,30px);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08);
}
.pass::before{content:"";position:absolute;left:24px;right:24px;top:-1px;height:1px;background:var(--g-blue)}
.passtop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.plabel{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-3)}
.pstatus{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:var(--g-blue);color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.02em}
.pstatus svg{width:14px;height:14px}
.ptitle{margin:18px 0 6px;font-family:var(--disp);text-transform:uppercase;font-size:clamp(26px,2.6vw,36px);line-height:.95;color:var(--txt)}
.pmeta{color:var(--txt-2);font-size:15px}
.prow{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid var(--line);font-size:15px}
.prow:first-of-type{margin-top:18px}
.prow span{color:var(--txt-3)}
.prow strong{color:var(--txt);font-weight:600;text-align:right}
.pfine{margin-top:16px;font-size:12.5px;color:var(--txt-3);line-height:1.5}

/* the monitor on the arrival: erratic, then steady */
.monitor{margin-top:24px;height:64px;border-radius:12px;border:1px solid var(--line);background:rgba(242,244,250,.03);position:relative;overflow:hidden}
.monitor svg{width:100%;height:100%}
.monitor .trace{fill:none;stroke:var(--blue-hi);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;opacity:.9;
  stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 3.2s cubic-bezier(.2,.8,.2,1) .6s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.monitor .lbl{position:absolute;left:12px;top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3)}
.monitor .lbl b{color:var(--blue-hi);font-weight:500}

/* THE THREE DOORS — WhatsApp, Gal's Instagram, GP's YouTube */
.doors{
  grid-column:1 / -1;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:8px;
}
.door{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;
  padding:18px 20px;border-radius:16px;
  background:rgba(242,244,250,.04);border:1px solid var(--line);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,background .3s;
}
.door:hover{transform:translateY(-3px);background:rgba(242,244,250,.06);border-color:rgba(242,244,250,.22)}
.door .ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;flex:none}
.door .ic svg{width:26px;height:26px;fill:#fff}
.door.wa .ic{background:#25D366}
.door.ig .ic{background:radial-gradient(circle at 30% 110%,#FFD776 0%,#F56040 35%,#C13584 60%,#833AB4 85%)}
.door.yt .ic{background:#FF0000}
.door .t1{display:block;font-weight:700;font-size:15.5px;color:var(--txt)}
.door .t2{display:block;margin-top:3px;font-size:13.5px;color:var(--txt-3);line-height:1.4}
@media (max-width:900px){
  .arrivegrid{grid-template-columns:1fr}
  .doors{grid-template-columns:1fr}
}

/* next steps */
.steps{display:grid;gap:12px;margin-top:30px}
.step{
  padding:22px 24px;border-radius:14px;background:#fff;border:1px solid var(--line-paper);
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
}
.step .no{font-family:var(--disp);font-size:30px;line-height:.9;color:var(--blue-deep)}
.step p{color:var(--muted);font-size:16px}
.step p strong{color:var(--ink)}
.signoff{margin-top:34px;padding-top:26px;border-top:1px solid var(--line-paper);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.signoff p{color:var(--muted);max-width:620px;font-size:16px}

/* ============================================================
   REDUCED MOTION — the room holds still, nothing is hidden
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .stage::before,.stage::after,.arrive::after{opacity:.9;transform:none}
  .stage-fig img{animation:none;opacity:1}
  .up{opacity:1;transform:none;animation:none}
  [data-reveal]{opacity:1;transform:none}
  .ecg .sweep{animation:none;stroke-dasharray:none;stroke-dashoffset:0;opacity:.7}
  .monitor .trace{animation:none;stroke-dashoffset:0}
  .arrive::before{opacity:.28}
}

/* ============================================================
   PREVIEW NOTE — while the form is a dummy (client preview, Sep 2026).
   Desktop: a pill in the header's empty middle, so the fold does not
   move. Below 1100px: a static strip above the header; the header and
   the hero step down by its height. DELETE with the div at launch.
   ============================================================ */
.preview-note{
  position:absolute;top:37px;left:50%;transform:translateX(-50%);z-index:21;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  color:var(--txt-2);padding:8px 14px;border-radius:999px;
  border:1px solid var(--line);background:rgba(6,8,15,.55);
}
@media (max-width:1100px){
  .preview-note{
    position:static;transform:none;display:block;width:100%;white-space:normal;text-align:center;
    border:0;border-bottom:1px solid var(--line);border-radius:0;padding:8px 12px;font-size:10.5px;
    background:rgba(6,8,15,.85);text-wrap:balance;line-height:1.5;
  }
  .bar{top:32px}
  .stage{padding-top:132px}
}
@media (max-width:900px){.stage{padding-top:128px}}