/* =========================================================================
   CURAPOD-M — Early Access (six-state signup / payment flow)
   Figma 1hDXw9DsfJ7ibaoxADsHzJ · section 440:3899
   desktop 474:5051 / 440:2845 / 440:3107 / 440:3479 / 440:3682 / 440:3851
   mobile  474:5226 / 465:4108 / 465:4166 / 465:4224 / 465:4254 / 465:4313
   Mobile-first. Desktop breakpoint: min-width 1024px.
   Base tokens come from css/home.css — nothing is redefined here that
   already exists there. Only page-local (status / geometry) tokens below.
   ========================================================================= */

:root{
  /* status — DS 2.7 (Notice / Status, 289:983) */
  --st-info-soft:#0b0b0b14;
  --st-info-base:#616161;
  --st-info-text:#3d3d3d;
  --st-err-soft:var(--accent-soft);
  --st-err-base:var(--accent-base);
  --st-err-text:var(--text-accent-light);
  --st-ok-base:#157a45;

  /* controls — Input / Field (448:1539) */
  --ctrl-rule:#0b0b0b73;         /* border/control · 3.15:1 */
  --ctrl-rule-focus:#E8543D;

  /* layout */
  --ea-rail-w:390px;
  --ea-pane-max:724px;
}

.page-ea{background:var(--bg-page-light);color:var(--text-primary)}

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

/* =========================================================================
   Shell
   ========================================================================= */
.ea{
  display:flex;flex-direction:column;
  min-height:100vh;min-height:100dvh;
}

/* ---------- Left rail — 474:5053 (desktop only; the mobile frames drop it) ---------- */
.ea-rail{display:none}

/* ---------- Right pane ---------- */
.ea-pane{
  display:flex;flex-direction:column;
  flex:1 1 auto;min-width:0;
  padding:20px var(--gutter) 32px;
  position:relative;
}

.ea-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:34px;margin-bottom:28px;flex:0 0 auto;
}
.ea-topbar__brand{display:block}
.ea-topbar__brand img{width:150px;height:auto}
/* No site nav on this flow by design (fewer exits mid-checkout) -- the close
   button is the only way out, so it needs to read as a real, always-visible
   control rather than a faint hover-only glyph. */
.ea-close{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--radius-full);
  background:var(--bg-sunken);border:1px solid var(--border-default);
  color:var(--text-primary);flex:0 0 auto;
  transition:background-color .18s ease,border-color .18s ease;
}
.ea-close .i-close{width:18px;height:18px}
.ea-close:hover{background:var(--accent-soft);border-color:var(--border-accent)}

/* =========================================================================
   Panes — one visible at a time, .on carries it
   ========================================================================= */
.pane{display:none}
.pane.on{
  display:flex;flex-direction:column;align-items:flex-start;
  flex:1 1 auto;min-width:0;width:100%;
  animation:ea-rise .42s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes ea-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .pane.on{animation:none}
}

.pane__h{
  font-size:var(--title-md);line-height:var(--title-md-lh);
  font-weight:600;letter-spacing:var(--tr-title);
  color:var(--text-primary);max-width:520px;margin-top:8px;
}
.pane__h:focus-visible{outline:2px solid var(--accent-base);outline-offset:4px}
.pane__sub{
  font-size:var(--body-md);line-height:var(--body-md-lh);
  color:var(--text-secondary);max-width:520px;margin-top:8px;
}
.ea-eyebrow{
  font-size:var(--label-xs);line-height:var(--label-xs-lh);
  font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--text-accent-light);
}

/* =========================================================================
   01 · Lead capture — fields (Input / Field 448:1539)
   ========================================================================= */
.fields{display:flex;flex-direction:column;flex:1 1 auto;width:100%;max-width:520px;margin-top:32px}
.fld{display:flex;flex-direction:column;width:100%;margin-bottom:24px}
.fld__label{
  font-size:var(--label-sm);line-height:var(--label-sm-lh);
  font-weight:500;letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--text-muted);padding-top:8px;
}
.fld__row{
  display:flex;align-items:center;gap:2px;
  margin-top:4px;padding-bottom:8px;
  border-bottom:1px solid var(--ctrl-rule);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.fld__row:hover{border-bottom-color:var(--accent-base)}
.fld__row:focus-within{
  border-bottom-width:2px;padding-bottom:7px;
  border-bottom-color:var(--ctrl-rule-focus);
  box-shadow:0 6px 14px -8px var(--focus-glow);
}
.fld__cc{
  font-size:var(--body-md);line-height:var(--body-md-lh);
  font-weight:700;color:var(--text-primary);
}
.fld__bar{width:1px;height:18px;margin:0 10px 0 8px;background:var(--border-default)}
.fld__input{
  flex:1 1 auto;min-width:0;width:100%;
  border:0;background:none;padding:0;margin:0;
  font-family:inherit;font-size:var(--body-md);line-height:var(--body-md-lh);
  color:var(--text-primary);
}
.fld__input::placeholder{color:var(--text-muted)}
.fld__input:focus{outline:none}
.fld__input:focus-visible{outline:none}
.fld__err{
  font-size:var(--body-sm);line-height:var(--body-sm-lh);
  color:var(--st-err-text);margin-top:6px;display:none;
}
.fld.bad .fld__err{display:block}
.fld.bad .fld__row{border-bottom-color:var(--st-err-base)}

.opt{display:flex;align-items:center;gap:12px;margin:8px 0 0}
.opt input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:18px;height:18px;flex:0 0 auto;margin:0;
  border:1px solid var(--accent-base);border-radius:4px;
  background:var(--accent-soft);cursor:pointer;position:relative;
}
.opt input[type=checkbox]:checked::after{
  content:"";position:absolute;left:5px;top:1px;
  width:5px;height:10px;border:solid var(--text-accent-light);
  border-width:0 2px 2px 0;transform:rotate(45deg);
}
.opt label{
  font-size:var(--body-sm);line-height:var(--body-sm-lh);
  color:var(--text-secondary);cursor:pointer;
}
.opt__required{
  display:inline-flex;align-items:center;margin-left:6px;padding:2px 7px;
  border-radius:999px;background:var(--accent-soft);color:var(--text-accent-light);
  font-size:10px;line-height:14px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
}

/* =========================================================================
   Buttons — Btn / Modal (272:890): 18/30/18/34, body/md-semibold, arrow 24
   ========================================================================= */
.actions{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:auto;padding-top:32px}
.actions--row{flex-direction:column;align-items:stretch}

/* Same component spec as .btn-primary in css/home.css (index/makers/science) --
   padding, type scale, weight and resting shadow now match exactly, so this
   is the same black CTA, not a parallel one-off. */
.eabtn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 20px;border-radius:var(--radius-full);
  background:var(--text-primary);color:var(--text-inverse);
  font-size:var(--body-sm);line-height:var(--body-sm-lh);font-weight:700;
  box-shadow:0 10px 24px -6px rgba(11,11,11,.18);
  text-align:center;width:100%;
  transition:opacity .18s ease,transform .18s ease,background-color .18s ease,box-shadow .18s ease;
}
.eabtn .i-arrow{width:24px;height:24px}
/* "Black CTAs turn red on hover" -- replaces the old opacity-dim with the
   same product-red turn used everywhere else. .eabtn--ghost below declares
   its own background on hover, so it isn't affected by this rule. */
.eabtn:hover{
  background:#E23532;
  box-shadow:0 0 20px 2px rgba(226,53,50,.55),0 0 46px 10px rgba(226,53,50,.3);
}
.eabtn:active{transform:translateY(1px)}
.eabtn.off,.eabtn:disabled{opacity:.32;cursor:not-allowed;pointer-events:none}
.eabtn--ghost{
  background:none;color:var(--text-primary);
  border:1px solid var(--accent-base);
  box-shadow:none;
}
.eabtn--ghost:hover{background:var(--accent-soft);opacity:1}

.textlink{
  font-size:var(--body-sm);line-height:var(--body-sm-lh);
  color:var(--text-muted);text-align:center;padding:8px 0;
}
.textlink:hover{color:var(--text-primary)}
.ref{
  font-size:var(--body-sm);line-height:var(--body-sm-lh);
  color:var(--text-muted);
}
.foot-note{
  font-size:var(--body-sm);line-height:var(--body-sm-lh);
  color:var(--text-muted);margin-top:12px;
}
.pay-methods{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;
  font-size:var(--label-xs);line-height:var(--label-xs-lh);
  font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--text-muted);
}
.pay-methods i{width:3px;height:3px;border-radius:50%;background:currentColor;display:block;opacity:.7}

/* =========================================================================
   02 · Benefits — 440:2845
   ========================================================================= */
.triplet{
  display:flex;flex-wrap:wrap;gap:24px;margin-top:8px;
  font-size:var(--body-md);line-height:var(--body-md-lh);
  color:var(--text-secondary);
}
.strip{
  display:flex;flex-direction:column;gap:4px;width:100%;margin-top:32px;
  padding:12px 16px;border-radius:16px;
  background:var(--accent-soft);border:1px solid var(--border-default);
}
.strip b{font-size:var(--body-md);line-height:var(--body-md-lh);font-weight:600}
.strip span{font-size:var(--body-sm);line-height:var(--body-sm-lh);color:var(--text-secondary)}

.perks{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:32px}
.perks li{
  display:flex;align-items:flex-start;gap:12px;
  font-size:var(--body-md);line-height:var(--body-md-lh);
  color:var(--text-primary);
}
.perks li.hi{color:var(--text-accent-light);font-weight:600}
/* Perk tick — 440:3027: a bare rose check glyph, no chip behind it */
.tick{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:20px;height:20px;margin-top:3px;color:var(--text-accent-light);
}
.tick svg{width:16px;height:16px;display:block}

/* =========================================================================
   03 / 03b · Price ledger — 440:3185 / 440:3856
   ========================================================================= */
.ledger{
  display:flex;flex-direction:column;gap:12px;width:100%;margin-top:32px;
  padding:20px;border-radius:18px;
  background:var(--accent-soft);border:1px solid var(--accent-base);
}
.ledger .row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:var(--body-sm);line-height:var(--body-sm-lh);
  color:var(--text-secondary);
}
.ledger .row .v{white-space:nowrap;text-align:right}
.ledger .cut .v{color:var(--text-accent-light)}
.ledger .rule{height:1px;width:100%;background:var(--border-subtle)}
.ledger .total{color:var(--text-primary);font-weight:600;font-size:var(--body-md);line-height:var(--body-md-lh)}
.ledger .total .v{font-size:var(--title-sm);line-height:var(--title-sm-lh);letter-spacing:var(--tr-title)}
.ledger .now{color:var(--text-accent-light);font-weight:600;font-size:var(--body-md);line-height:var(--body-md-lh)}
.ledger .now .v{font-size:var(--title-md);line-height:var(--title-md-lh);letter-spacing:var(--tr-title)}

/* Notice / Status — 289:983 */
.notice{
  display:flex;align-items:flex-start;gap:12px;width:100%;margin-top:16px;
  padding:14px 20px 14px 17px;border-radius:8px;border-left:3px solid;
  font-size:var(--body-sm);line-height:var(--body-sm-lh);
}
.notice__ico{flex:0 0 auto;width:16px;height:16px;margin-top:3px}
.notice__ico svg{width:16px;height:16px;display:block}
.notice--info{background:var(--st-info-soft);border-left-color:var(--st-info-base);color:var(--st-info-text)}
.notice--info .notice__ico{color:var(--st-info-base)}
.notice--err{background:var(--st-err-soft);border-left-color:var(--st-err-base);color:var(--st-err-text)}
.notice--err .notice__ico{color:var(--st-err-base)}

/* =========================================================================
   03a · Processing — 440:3479
   ========================================================================= */
.pane--mid.on{align-items:center;justify-content:center;text-align:center}
.mid{display:flex;flex-direction:column;align-items:center;gap:8px;margin:auto 0;width:100%}
.mid .pane__h,.mid .pane__sub{text-align:center;max-width:340px}
.mid .pane__h{margin-top:0}   /* spinner gap is exactly 20 + 8 = the Figma 28 */
/* Spinner 440:3471 — a ~270° rose arc with round caps and no track.
   SVG, not a border ring: a border cannot round its caps. */
.spinner{
  width:52px;height:52px;margin-bottom:20px;   /* + .mid gap 8 = the 28px Figma gap */
  color:var(--accent-base);
  animation:ea-spin 900ms linear infinite;
}
@keyframes ea-spin{to{transform:rotate(360deg)}}
.paychip{
  display:inline-flex;align-items:center;gap:8px;margin-top:17px;
  padding:8px 12px;border-radius:100px;
  background:var(--accent-soft);border:1px solid var(--accent-base);
  font-size:var(--body-sm);line-height:var(--body-sm-lh);color:var(--text-secondary);
}
.paychip b{font-weight:700;color:var(--text-accent-light)}

/* =========================================================================
   04 · Confirmation — 440:3682
   ========================================================================= */
.tickmark{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:56px;height:56px;border-radius:100px;margin-bottom:28px;
  background:var(--st-ok-base);color:#fff;
  box-shadow:0 8px 22px -4px rgba(183,110,121,.22);
  animation:ea-pop .5s cubic-bezier(.22,1.2,.36,1) both;
}
.tickmark svg{width:24px;height:24px;display:block;
  stroke-dasharray:26;stroke-dashoffset:26;
  animation:ea-draw .5s .18s ease forwards;
}
.pane--done .pane__h{margin-top:0}   /* tick gap is the .tickmark margin alone */
@keyframes ea-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes ea-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .tickmark,.tickmark svg{animation:none}
  .tickmark svg{stroke-dashoffset:0}
  .spinner{animation-duration:2.4s}
}

.next-label{
  font-size:var(--label-xs);line-height:var(--label-xs-lh);
  font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--text-muted);margin-top:32px;
}
.next{display:flex;flex-direction:column;gap:16px;width:100%;margin-top:16px}
.next li{
  display:flex;align-items:flex-start;gap:12px;
  font-size:var(--body-sm);line-height:var(--body-sm-lh);color:var(--text-secondary);
}
.next li i{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:24px;height:24px;border-radius:100px;
  background:var(--accent-soft);border:1px solid var(--accent-base);
  color:var(--text-accent-light);font-style:normal;
  font-size:var(--label-xs);line-height:var(--label-xs-lh);font-weight:600;
}

/* =========================================================================
   Per-step chrome — 440:3368 / 465:4224 carry no close control at all, and
   440:3480 / 465:4313 drop it too while centring the wordmark. Hiding the
   × on processing also stops the page contradicting its own copy
   ("Please don't close this window or press back").
   ========================================================================= */
.page-ea[data-step="processing"] .ea-topbar{display:none}
.page-ea[data-step="done"] .ea-close{display:none}
.page-ea[data-step="done"] .ea-topbar{justify-content:center}
/* mobile confirmation centres the tick; heading and body stay left — 465:4313 */
.page-ea[data-step="done"] .tickmark{margin-inline:auto}

/* =========================================================================
   DESKTOP — 1024+ : two-column split, rail 390 / pane 1fr (474:5051)
   ========================================================================= */
@media (min-width:768px){
  .ea{flex-direction:row;align-items:stretch}

  .ea-rail{
    position:relative;isolation:isolate;overflow:hidden;
    display:flex;flex-direction:column;gap:32px;
    flex:0 0 var(--ea-rail-w);width:var(--ea-rail-w);
    /* right inset 44 so the content box is Figma's 298, not 294 — the rail
       sub-copy breaks a word early at 294 (474:5057) */
    padding:48px 44px 48px 48px;
    /* High-contrast dark ground, same language as .mk-close on the other
       three pages -- was a light .bg-sunken card; every colour below is
       flipped to its dark-ground counterpart accordingly. Padding/gaps also
       trimmed from the previous pass so the counter card never falls below
       the fold on ordinary laptop viewport heights. */
    background:var(--bg-page-dark);color:var(--text-inverse);
  }
  /* Ambient glow -- identical mechanism to .mk-close__glow (js/earlyaccess.js
     sets --glow-x/--glow-y on mousemove over the rail), just sized down for
     the narrower column. Off by default, fades in on hover/focus-within. */
  .ea-rail__glow{
    position:absolute;left:var(--glow-x,50%);top:var(--glow-y,50%);
    transform:translate(-50%,-50%);
    width:560px;height:560px;max-width:220%;max-height:220%;
    z-index:-2;border-radius:50%;pointer-events:none;
    background:radial-gradient(closest-side,rgba(226,53,50,.32) 0%,rgba(226,53,50,0) 70%);
    opacity:0;
    transition:opacity .6s ease,left .5s cubic-bezier(.22,.61,.36,1),top .5s cubic-bezier(.22,.61,.36,1);
  }
  .ea-rail:hover .ea-rail__glow,
  .ea-rail:focus-within .ea-rail__glow{opacity:1}
  @media (prefers-reduced-motion:reduce){
    .ea-rail__glow{transition:opacity .3s ease}
  }
  .ea-rail__top{display:flex;flex-direction:column;align-items:center;gap:16px;padding:0}
  .ea-rail__wordmark{width:180px;height:auto}
  /* early-access-product.jpg ships with its own dark ground — kept verbatim,
     no asset edit; the radius just seats it, and a soft dual shadow (a warm
     brand-glow lift + a grounding drop shadow) gives it a lit product-shot
     presence instead of sitting flat on the rail. */
  /* LED=Off.png (529x310, transparent bg) replaces the old opaque JPG so the
     podwrap glow below actually shows through around the device instead of
     being hidden behind a flat black card -- object-fit is `contain` rather
     than `cover` accordingly, since there's no longer a filled background to
     crop into. */
  .ea-rail__pod{
    display:block;width:100%;height:auto;aspect-ratio:529 / 310;object-fit:contain;border-radius:12px;
    box-shadow:0 28px 48px -22px rgba(226,53,50,.28),0 14px 26px -14px rgba(11,11,11,.4);
  }
  /* "the device back glows significantly on hover" -- a second, much
     stronger red glow scoped to just the product shot, separate from the
     rail's own ambient mouse-follow glow. isolate + a negative-z ::before so
     it sits behind the image, not on top of it. */
  .ea-rail__podwrap{position:relative;isolation:isolate}
  .ea-rail__podwrap::before{
    content:"";position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);
    width:150%;height:150%;z-index:-1;border-radius:50%;pointer-events:none;
    background:radial-gradient(closest-side,rgba(226,53,50,.65) 0%,rgba(226,53,50,0) 70%);
    opacity:0;transition:opacity .35s ease;
  }
  .ea-rail__podwrap:hover::before{opacity:1}
  @media (prefers-reduced-motion:reduce){
    .ea-rail__podwrap::before{transition:opacity .15s ease}
  }
  .ea-rail__body{display:flex;flex-direction:column;gap:32px;width:100%}
  .ea-rail__copy{display:flex;flex-direction:column;gap:12px}
  .ea-rail__head{
    font-size:var(--title-sm);line-height:var(--title-sm-lh);
    font-weight:400;letter-spacing:var(--tr-title);color:var(--text-inverse);
  }
  .ea-rail__sub{
    font-size:var(--body-sm);line-height:var(--body-sm-lh);color:var(--mk-dark-secondary);
  }
  /* the eyebrow above the headline is .ea-eyebrow, shared with the right
     pane's step labels -- give the rail its own dark-ground tint here
     rather than touching the shared class, so the pane (staying white)
     is untouched. */
  .ea-rail__copy .ea-eyebrow{color:var(--mk-accent-dark)}

  /* hairline ahead of the badge shelf and the counter card -- reads as
     considered sections rather than one long stacked list. Icons only, no
     names, on this screen -- the labels stay in the DOM as .sr-only (the
     other three pages' credential rows keep their own labels, untouched)
     so a row of just the marks reads horizontally instead of stacked. */
  .ea-marks{display:flex;flex-direction:row;align-items:center;gap:16px;padding-top:16px;border-top:1px solid var(--mk-dark-border)}
  .ea-mark{display:flex;align-items:center;height:40px}
  .ea-mark__logo{
    display:flex;align-items:center;justify-content:center;flex:0 0 auto;
    width:40px;height:40px;overflow:hidden;border-radius:6px;
    /* dark-ink certification marks need a white backing chip on this dark
       ground -- IEC already had one (its source PNG has no fill of its
       own); CDSCO/FDA relied on the rail's old light background, so they
       need the same treatment now. */
    background:#fff;
  }
  .ea-mark__logo img{display:block}
  .ea-mark__logo--cdsco img{width:53px;height:40px;object-fit:cover;max-width:none}
  /* FDA ships its own true white variant (early-access-fda-white.svg), so it
     drops the white backing chip that CDSCO/IEC still need -- see home.css's
     .mk-cred__logo--fda for the same treatment on the other pages' dark footer. */
  .ea-mark__logo--fda{background:transparent}
  .ea-mark__logo--fda img{width:36px;height:19px;object-fit:cover}
  .ea-mark__logo--iec img{width:38px;height:38px;object-fit:cover}
  .ea-mark__label{
    font-size:var(--label-xs);line-height:var(--label-xs-lh);
    font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;
    color:var(--mk-dark-muted);
  }

  /* self-bordered card, so it reads as its own section already -- no extra
     divider needed the way the bare badge shelf above it gets one */
  /* .accent-soft is a ~9%-opacity red wash meant to sit on a light ground --
     on the new dark rail it would just read as almost-invisible near-black,
     so this is now the same frosted-glass formula the rest of the dark UI
     uses (.nav__pill, .limited-spots), kept in the brand red rather than
     neutral so it still reads as "the" accent card. */
  .ea-counter{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    width:100%;padding:20px;border-radius:12px;
    background:rgba(232,84,61,.14);border:1px solid #E8543D33;text-align:center;
    box-shadow:0 18px 34px -22px rgba(232,84,61,.4);
  }
  .ea-counter__n{
    font-size:var(--display-sm);line-height:var(--display-sm-lh);
    font-weight:300;letter-spacing:var(--tr-display);color:var(--text-inverse);
    /* the count animates down from 500, so the glyphs must not change width mid-run */
    font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  }

  /* Odometer — each digit is its own wheel. The column is a fixed-height window and the
     strip inside it slides, so a digit turning over reads as a wheel rotating rather than
     as text being replaced. --odo-h is the window height AND the cell height; the JS
     translates by a multiple of it, so the two can never drift apart. */
  .odo{--odo-h:1.15em;display:inline-flex;align-items:flex-end}
  .odo__col{display:block;overflow:hidden;height:var(--odo-h)}
  .odo__strip{display:block;will-change:transform}
  .odo__d{display:block;height:var(--odo-h);line-height:var(--odo-h);text-align:center}
  @media (prefers-reduced-motion:reduce){
    .odo__strip{transition:none !important}
  }
  /* the reveal moment (post-payment) earns a bigger number -- same weight,
     more presence, matching how the rest of the site treats a "big number". */
  .ea-counter.is-member .ea-counter__n{font-size:var(--display-md)}
  .ea-counter__l{
    font-size:var(--label-xs);line-height:var(--label-xs-lh);
    font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;
    color:var(--mk-dark-secondary);
  }
  .ea-counter__note{
    font-size:var(--body-sm);line-height:var(--body-sm-lh);color:var(--mk-dark-secondary);
  }
  /* member-number variant, once paid — 440:3664 */
  .ea-counter.is-member{align-items:flex-start;text-align:left;padding:20px}

  /* Delivery date — a quiet footnote under the counter card, not a fourth competing block.
     The date itself takes the ink weight; the sentence around it stays secondary. */
  .ea-rail__ship{
    /* the rail body already spaces its children; no extra margin on top of that */
    text-align:center;
    font-size:var(--body-xs,13px);line-height:1.45;color:var(--mk-dark-secondary);
  }
  .ea-rail__ship b{color:var(--text-inverse);font-weight:600}

  .ea-pane{padding:48px 84px 56px 82px}
  /* Btn · Close sits on the page edge in Figma (474:5098 · x 1206 / y 48) */
  .ea-topbar{position:absolute;top:48px;right:40px;margin:0;z-index:2}
  .ea-topbar__brand{display:none}

  .pane.on{flex:0 0 auto;max-width:var(--ea-pane-max);width:100%;margin-block:auto;padding-block:32px}
  .pane--mid.on{max-width:none;flex:1 1 auto}
  .fields{flex:0 0 auto}

  .actions{flex-direction:row;flex-wrap:wrap;align-items:center;gap:20px;margin-top:0;padding-top:64px}
  .actions--row{flex-direction:row;flex-wrap:wrap;align-items:center;gap:16px}
  .eabtn{width:auto}
  .textlink{padding:0}
  .pane--done.on .actions{padding-top:48px}
  /* 64px is the lead/benefits/pay gap (Frame 35 · space/64). The failed pane
     is a tighter stack — 440:3851 sets space/16 between notice and CTA block. */
  #p-failed .actions{padding-top:16px}

  /* the pay reassurance notice is 560 wide in 440:3204; the failed error
     notice (440:3874) really does run the full pane, so this stays scoped */
  #p-pay .notice{max-width:560px}

  /* Success Mark → copy is space/64 on desktop (440:3682), 28 on mobile;
     desktop keeps the tick flush left, only the mobile frame centres it */
  .tickmark{margin-bottom:64px}
  .page-ea[data-step="done"] .tickmark{margin-inline:0}

  /* member-number tile nests a lighter inset panel — 440:3661 wraps 440:3664 */
  .ea-counter.is-member{padding:12px;background:rgba(232,84,61,.14)}
  .ea-counter.is-member .ea-counter__inset{
    display:flex;flex-direction:column;align-items:flex-start;gap:4px;
    width:100%;padding:20px;border-radius:10px;background:#ffffffb3;
  }
  /* the inset card above is a near-white chip on purpose (440:3664) -- give
     its own text dark ink instead of inheriting the rail's white default,
     or the member number would vanish against it. */
  .ea-counter.is-member .ea-counter__inset .ea-counter__n{color:var(--text-primary)}
  .ea-counter.is-member .ea-counter__inset .ea-counter__l,
  .ea-counter.is-member .ea-counter__inset .ea-counter__note{color:var(--text-secondary)}
}

/* very short viewports — let the rail scroll with the page, never clip */
@media (min-width:768px) and (max-height:700px){
  .ea-rail{padding:32px 40px;gap:20px}
  .ea-rail__top{gap:12px;padding:0}
  .ea-rail__body{gap:24px}
  .ea-marks{padding-top:12px}
  .ea-pane{padding-block:32px 40px}
}

/* ---------- Laptop and up — centre the rail stack in the column ----------
   The rail content is ~620px tall in a viewport that is usually 900+, and it was pinned to
   the top: wordmark 48px down, then 460px of dead ground under the counter. Centring it
   distributes that slack instead of dumping all of it below the fold-line of attention.
   `safe` so a viewport too short for the content still starts at the top rather than
   clipping the wordmark off the screen — overflow on the rail is hidden. */
@media (min-width:1024px){
  .ea-rail{justify-content:safe center}
}

/* ---------- Tablet — the rail lies down instead of disappearing ----------
   Below 1024 the rail was display:none, so a tablet got a form floating alone on a white
   page: no product shot, no certifications, no spots counter. Nothing was wrong with the
   content, only with the axis — so at tablet widths the same rail turns on its side and
   sits above the form, proof first, fields second. */
@media (min-width:768px) and (max-width:1023px){
  .ea{flex-direction:column}

  .ea-rail{
    flex:0 0 auto;width:100%;
    flex-direction:row;align-items:center;gap:32px;
    padding:32px 40px;
  }
  .ea-rail__top{flex:0 0 42%;max-width:300px}
  .ea-rail__wordmark{width:150px}
  .ea-rail__body{flex:1 1 auto;gap:20px}
  .ea-rail__sub{max-width:44ch}
  /* the hairline above the badge shelf is a column-layout device; sideways it would cut
     the band in half, so the shelf just sits tighter to the copy instead. */
  .ea-marks{padding-top:16px;border-top:0}
  .ea-counter{padding:14px}

}

/* ---------- Tablet and up — both columns centre their own content ----------
   The rail centres its stack; the form column has to do the same or the page reads as two
   unrelated halves — a balanced left panel against a form pinned to the left gutter with
   several hundred pixels of dead white beside it. Centring the COLUMN, not its contents:
   labels and fields still start on one line, which is what makes a form scannable. */
@media (min-width:768px){
  .ea-pane{align-items:center;justify-content:center}
  /* the close control belongs to the PAGE, so it spans the pane rather than being dragged
     inward to the form column's right margin. The brand lockup beside it is hidden at these
     widths (the rail carries it), which left space-between with nothing to space against --
     an auto margin pins the button to the right edge whether or not it has a sibling. */
  .ea-topbar{width:100%;max-width:none}
  .ea-close{margin-left:auto}
  .pane.on{width:100%;max-width:560px;flex:0 0 auto}
}

/* =========================================================================
   Thank-you screen — the celebration, the question, the shareable card
   ========================================================================= */

/* The bloom sits BEHIND everything and is purely atmospheric, so it is aria-hidden and
   pointer-events:none — it must never intercept a tap meant for the share button. */
.pane--done{position:relative}
.done__bloom{
  position:absolute;left:50%;top:-40px;width:min(680px,140%);aspect-ratio:1;
  transform:translateX(-50%) scale(.6);transform-origin:50% 30%;
  border-radius:50%;pointer-events:none;z-index:0;opacity:0;
  background:radial-gradient(closest-side,rgba(232,84,61,.22) 0%,rgba(232,84,61,.07) 45%,rgba(232,84,61,0) 72%);
}
.pane--done > *:not(.done__bloom){position:relative;z-index:1}

.pane--done.is-celebrating .done__bloom{
  animation:done-bloom 1.6s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes done-bloom{
  0%{opacity:0;transform:translateX(-50%) scale(.6)}
  55%{opacity:1}
  100%{opacity:.9;transform:translateX(-50%) scale(1)}
}

/* Staggered arrival. Each element waits its turn so the screen resolves in the order a person
   reads it — tick, then who they are, then what it means — instead of appearing all at once. */
.pane--done.is-celebrating .tickmark{animation:done-in .5s cubic-bezier(.22,.61,.36,1) both}
.pane--done.is-celebrating .done__eyebrow{animation:done-in .5s cubic-bezier(.22,.61,.36,1) .12s both}
.pane--done.is-celebrating .pane__h{animation:done-in .5s cubic-bezier(.22,.61,.36,1) .2s both}
.pane--done.is-celebrating .pane__sub{animation:done-in .5s cubic-bezier(.22,.61,.36,1) .3s both}
.pane--done.is-celebrating .whofor{animation:done-in .5s cubic-bezier(.22,.61,.36,1) .42s both}
.pane--done.is-celebrating .share{animation:done-in .5s cubic-bezier(.22,.61,.36,1) .54s both}
@keyframes done-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.pane--done.no-anim *,
.pane--done.no-anim .done__bloom{animation:none !important;opacity:1 !important;transform:none !important}
@media (prefers-reduced-motion:reduce){
  .pane--done *,.pane--done .done__bloom{animation:none !important;opacity:1 !important}
  .done__bloom{transform:translateX(-50%) scale(1) !important}
}

.done__eyebrow{margin-bottom:6px}

/* ---------- the question ---------- */
.whofor{margin:24px 0 4px;width:100%}
.whofor__q{
  font-size:var(--label-xs);line-height:var(--label-xs-lh);font-weight:600;
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-secondary);
  margin-bottom:10px;
}
.whofor__opts{display:flex;flex-wrap:wrap;gap:10px}
.whofor__opt{
  appearance:none;cursor:pointer;font:inherit;
  font-size:var(--body-sm);line-height:1;
  padding:12px 18px;border-radius:999px;
  border:1px solid rgba(11,11,11,.16);background:transparent;color:var(--text-primary);
  transition:border-color .2s ease,background-color .2s ease,color .2s ease;
}
.whofor__opt:hover{border-color:rgba(232,84,61,.5)}
.whofor__opt.is-on{background:rgba(232,84,61,.1);border-color:#E8543D;color:#B8331F;font-weight:600}
.whofor__opt:focus-visible{outline:2px solid #E8543D;outline-offset:2px}
/* Once answered the prompt has done its job; it stays legible but stops competing with the
   card that appears under it. */
.whofor.is-answered .whofor__q{opacity:.55}

/* ---------- the shareable card ---------- */
.share{margin:26px 0 8px;width:100%}
.share__label{
  font-size:var(--label-xs);line-height:var(--label-xs-lh);font-weight:600;
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-secondary);
  margin-bottom:10px;
}
/* Displayed at a fraction of its pixel size: the canvas is 1080x1350 because that is what
   Instagram wants, not because anyone needs to see it that big here. */
.share__card{
  display:block;width:100%;max-width:300px;height:auto;border-radius:14px;
  box-shadow:0 22px 44px -26px rgba(11,11,11,.55);
}
.share__actions{margin-top:16px;align-items:center;gap:18px}
.share__alt{display:flex;gap:18px;margin-top:12px}
/* [hidden] loses to the display rule above it, which left the desktop-only fallback links
   visible on every device. Restore the attribute's meaning explicitly. */
.share__alt[hidden]{display:none}
/* A secondary-scale version of the page's own button — the share action is real but it is not
   the primary action on this screen; the primary action already happened. */
.eabtn--sm{width:auto;padding:14px 26px;align-self:flex-start}

/* ---------- Thank-you screen: composition ----------
   Every other pane is a FORM, so the base .pane.on left-aligns everything — labels and fields
   have to start on one line to be scannable. This pane is not a form; it is a moment, and
   left-aligned it reads as a list of six unrelated blocks. Centre it, give the card the room
   to be the centrepiece, and put a rule between the celebration and the admin below it. */
.pane--done.on{align-items:center;text-align:center}
.pane--done .tickmark{margin-inline:auto}
.pane--done .pane__sub{max-width:44ch;margin-inline:auto}
.pane--done .whofor__opts{justify-content:center}
.pane--done .share__actions{justify-content:center}
.pane--done .share__alt{justify-content:center}

/* The card earns its size: it is the thing being handed over, and at 300px it looked like a
   thumbnail of something rather than the thing itself. */
.pane--done .share__card{max-width:360px;margin-inline:auto}
.pane--done .share{margin-top:30px}

/* Share is the action on this screen now that the payment is behind them — give it the full
   pill rather than tucking it beside a text link. */
.pane--done .share__actions{flex-direction:column;gap:12px;margin-top:20px}
.pane--done #share-go{width:100%;max-width:360px;align-self:center}

/* "What happens next" is admin, not celebration. A rule and a colour step demote it without
   hiding it — and its numbered steps stay LEFT aligned, because a numbered list centred is
   unreadable. */
.pane--done .next-label{
  width:100%;max-width:420px;margin:38px auto 0;padding-top:26px;
  border-top:1px solid rgba(11,11,11,.1);
}
.pane--done .next{width:100%;max-width:420px;margin-inline:auto;text-align:left}

.pane--done .actions{justify-content:center;width:100%}

/* Mobile keeps the same composition, just tighter — the card is still the centrepiece. */
@media (max-width:520px){
  .pane--done .share__card{max-width:100%}
  .pane--done #share-go{max-width:100%}
}
/* The founding-member line is a badge, not a label sitting on the headline — its letterspacing
   makes it read as wide and thin, so it needs vertical room on both sides to hold as its own
   line rather than crowding the name below it. */
.pane--done .done__eyebrow{margin:6px 0 14px;letter-spacing:.16em}

/* ---------- Mistyped-domain suggestion ----------
   Sits below the field, in the accent rather than the error red: nothing is wrong yet, and
   colouring it as an error would read as a rejection of an address that may well be correct. */
.fld__hint{
  margin-top:6px;
  font-size:var(--body-xs,13px);line-height:1.45;color:var(--text-secondary);
}
.fld__hint[hidden]{display:none}
.fld__fix{
  appearance:none;border:0;background:none;padding:0;cursor:pointer;
  font:inherit;font-weight:600;color:#B8331F;text-decoration:underline;
  text-underline-offset:2px;
}
.fld__fix:hover{color:#E8543D}
.fld__fix:focus-visible{outline:2px solid #E8543D;outline-offset:2px;border-radius:2px}