/* ============================================================
   Textout:) — Early access page
   Loads after style.css and reuses its tokens.
   ============================================================ */

/* ---- First 1,000 theme values ------------------------------------------
   Copied from the special_custom_chatters row (id ba718e4d-…).
   If you edit the theme in Supabase, update these to match.             */
.ea-stage {
  --t1k-text:        #00ffff;                 /* text_color                  */
  --t1k-glow:        rgba(0, 255, 255, .6);   /* same colour, for the glow   */
  --t1k-tint:        rgba(0, 255, 255, .16);  /* avatar + badge tint         */
  --t1k-overlay:     #ff00ff;                 /* background_overlay_color    */
  --t1k-overlay-op:  0;                       /* overlay is disabled in the app (opacity .30 if enabled) */
  --t1k-msg-bg:      rgba(51, 0, 102, .6);    /* #330066 at message_background_opacity .60 */
}

/* ============ HERO ============ */
.ea-hero { padding-bottom: 80px; overflow: clip; }   /* clip (not hidden) so the sticky text column works */
.ea-hero h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.5rem);
  letter-spacing: -1.6px;
  line-height: 1.08;
}
.ea-hero .lead { margin-bottom: 22px; }

/* founding-member counter */
.ea-count {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 26px;
}
.ea-count__hash { font-size: 1.1rem; font-weight: 900; color: rgba(255, 255, 255, .3); }
.ea-count__num  {
  font-size: 2.3rem; font-weight: 900; letter-spacing: 2px; line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 26px var(--glow);
}
.ea-count__of { color: var(--muted); font-size: .95rem; margin-left: 4px; }

/* ============ FORM ============ */
.ea-form {
  width: min(100%, 600px);
  padding: 30px 28px; border-radius: var(--radius);   /* card around the form, same as the support page */
  background: linear-gradient(145deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 42%), var(--surface);
  border: 1px solid rgba(255, 255, 255, .04);
  box-shadow: var(--raised), inset 0 1px 0 rgba(255, 255, 255, .06);
}
@media (max-width: 600px) { .ea-form { padding: 24px 20px; } }

.ea-platform { border: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.ea-platform legend {
  grid-column: 1 / -1;
  font-size: .95rem; font-weight: 700; color: #fff;
  margin-bottom: 12px; padding: 0;
}

.ea-opt { position: relative; display: block; cursor: pointer; }
.ea-opt input { position: absolute; inset: 0; z-index: 2; opacity: 0; cursor: pointer; margin: 0; }

.ea-opt__face {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 20px;
  background: linear-gradient(145deg, #16161b, #0c0c0f);   /* raised tile */
  box-shadow: var(--raised-sm), inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.ea-opt__face > svg { width: 26px; height: 26px; flex: none; color: var(--muted); transition: color .2s; }
.ea-opt__text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.ea-opt__text strong { font-size: 1rem; }
.ea-opt__text small  { font-size: .74rem; color: var(--muted); }

.ea-opt__tick {
  margin-left: auto; width: 20px; height: 20px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22);
  transition: background .2s, box-shadow .2s;
}

.ea-opt:hover .ea-opt__face { transform: translateY(-2px); box-shadow: var(--raised), inset 0 1px 0 rgba(255, 255, 255, .06); }

.ea-opt input:checked + .ea-opt__face {
  background: linear-gradient(180deg, rgba(255, 122, 26, .2), rgba(255, 122, 26, .05)), #0a0a0c;
  box-shadow:
    var(--inset),
    0 0 0 1px rgba(255, 122, 26, .65),
    0 0 24px rgba(255, 122, 26, .28);
  transform: none;
}
.ea-opt input:checked + .ea-opt__face > svg { color: #fff; }
.ea-opt input:checked + .ea-opt__face .ea-opt__tick {
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23140a04' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 12.5 10.5 17 18 8'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: 0 0 12px rgba(255, 122, 26, .7);
}
.ea-opt input:focus-visible + .ea-opt__face { outline: 3px solid #4d63ff; outline-offset: 3px; }

.ea-form.is-invalid-platform .ea-platform legend { color: #ff8a8a; }

/* email field */
.ea-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.ea-field label { font-size: .95rem; font-weight: 700; }
.ea-field input {
  width: 100%; padding: 16px 20px; border-radius: 999px; border: 0;
  background: #08080a; color: #fff; font: inherit; font-size: 1rem;
  box-shadow: inset 7px 7px 15px #000, inset -4px -4px 10px rgba(255, 255, 255, .05), 0 0 0 1.5px rgba(255, 255, 255, .32);   /* pressed-in well + visible border */
  transition: box-shadow .2s;
}
.ea-field input:hover:not(:focus):not([aria-invalid="true"]) { box-shadow: var(--inset), 0 0 0 1.5px rgba(255, 255, 255, .5); }
.ea-field input::placeholder { color: rgba(169, 169, 184, .6); }
.ea-field input:focus { outline: none; box-shadow: var(--inset), 0 0 0 2px #4d63ff, 0 0 22px rgba(77, 99, 255, .4); }
.ea-field input[aria-invalid="true"] { box-shadow: var(--inset), 0 0 0 2px #ff6b6b; }

.ea-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.ea-submit { width: 100%; padding: 16px 30px; font-size: 1.02rem; }
.ea-submit:disabled { opacity: .6; cursor: progress; transform: none; }

.ea-msg { min-height: 1.4em; margin: 12px 4px 0; font-size: .92rem; color: #ff9a9a; }
.ea-msg.is-ok { color: #8be0a4; }
.ea-fine { margin-top: 6px; }

/* ============ SUCCESS ============ */
.ea-done {
  width: min(100%, 470px);
  padding: 30px 28px; border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--raised), 0 0 0 1px rgba(255, 122, 26, .3);
}
.ea-done[hidden] { display: none; }
.ea-done:focus { outline: none; }
.ea-done__badge {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%; margin-bottom: 16px;
  background: var(--accent); color: #140a04;
  box-shadow: 0 0 24px rgba(255, 122, 26, .6);
}
.ea-done__badge svg { width: 24px; height: 24px; }
.ea-done h2 { font-size: 1.5rem; letter-spacing: -.4px; margin-bottom: 8px; }
.ea-done p  { color: #cfd1dd; margin-bottom: 20px; }
.ea-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.js .ea-done:not([hidden]) { animation: ea-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes ea-pop { from { opacity: 0; transform: scale(.94) translateY(8px); } }

/* ============ THEME PREVIEW ============ */
.ea-visual { min-height: auto; }

.ea-stage {
  position: relative; z-index: 2;
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: 34px;
}
.ea-poster {
  width: min(78%, 340px);
  border-radius: 18px; overflow: hidden; min-height: 280px;
  background: #111;
  box-shadow: var(--raised);
  border: 1px solid rgba(255, 255, 255, .1);
}
.ea-poster img { width: 100%; height: auto; }

/* beneath the poster: the themed chatter and the real app screen, side by side */
.ea-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 22px 16px;
  padding: 14px 0;
}

/* the real app screen, standing beside the poster so the theme is still
   visible when the chatter sits on top of the poster */
.ea-phone {
  position: relative; flex: none;
  width: min(300px, calc(100vw - 48px)); margin: 0;
  container-type: inline-size;
  border-radius: 26px; overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: var(--raised), 0 0 26px var(--t1k-glow);
  transform: rotate(-4deg);
}
.js .ea-phone { opacity: 0; transform: rotate(-4deg) translateY(24px); }
.js .ea-visual.in .ea-phone {
  opacity: 1; transform: rotate(-4deg) translateY(0);
  transition: opacity .45s var(--ease) .3s, transform .6s cubic-bezier(.34, 1.56, .64, 1) .3s;
}


/* ---- Discover screen, built from scratch. Every size is in cqw (1% of the
        screen width) so the whole screen scales cleanly. ---------------- */
.ea-screen {
  position: relative; width: 100%;
  padding: 15cqw 0 8.5cqw;            /* black status area + home-indicator area, as in the app */
  background: #000; overflow: hidden;
  font-size: 4cqw; line-height: 1.2;
  color: #fff;
}
/* iPhone-style status bar in the black area above the app screen */
.ea-screen__status {
  position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 15cqw;
  display: flex; align-items: center; justify-content: space-between;
  padding: 3cqw 8cqw 0 11cqw;
  color: #fff;
}
.ea-screen__time { font-size: 4.4cqw; font-weight: 700; letter-spacing: -.1cqw; }
.ea-screen__sys { display: flex; align-items: center; gap: 1.8cqw; }
.ea-screen__sys svg { display: block; height: auto; }
.ea-sig  { width: 5cqw; }
.ea-wifi { width: 5cqw; }
.ea-bat  { width: 7.6cqw; }
.ea-screen__stage {
  position: relative; width: 100%;
  aspect-ratio: 100 / 192;
  display: grid; grid-template-rows: 32fr 97fr 63fr;
  overflow: hidden;
}
.ea-screen__home {
  position: absolute; left: 50%; bottom: 2.4cqw; transform: translateX(-50%);
  width: 35cqw; height: 1.2cqw; border-radius: 99px;
  background: rgba(255, 255, 255, .8);
}
.ea-screen__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* top bar */
.ea-screen__top {
  position: relative; z-index: 2;
  display: flex; align-items: flex-start; gap: 12cqw;
  padding: 4.2cqw 0 0 6.5cqw;
}
.ea-screen__close { width: 4.2cqw; height: 4.2cqw; flex: none; margin: 1.2cqw 8cqw 0 0; }
.ea-screen__tab { position: relative; font-weight: 800; font-size: 4.6cqw; line-height: 1.2; color: rgba(255, 255, 255, .5); }
.ea-screen__tab.is-on { color: #fff; font-size: 5.6cqw; }
.ea-screen__tabav {
  position: absolute; left: -3.6cqw; top: -4.4cqw;
  width: 5cqw; height: 5cqw; border-radius: 1.6cqw;
  display: grid; place-items: center;
  font-size: 2.4cqw; font-weight: 800; color: var(--t1k-text);
  background: var(--t1k-tint);
  box-shadow: inset 0 0 0 .3cqw rgba(255, 255, 255, .18);
}

/* the chatter card */
.ea-screen__card {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0 10cqw;
  background: rgba(66, 12, 128, .74);
}
.ea-screen__card p {
  font-size: 3.7cqw; line-height: 1.42; font-weight: 400;
  text-align: center; color: var(--t1k-text);
}
.ea-screen__next {
  position: absolute; left: 6.8cqw; top: 59%;
  width: 5.4cqw; height: 7cqw; color: rgba(200, 170, 255, .5);
}

/* bottom area */
.ea-screen__bottom {
  position: relative; z-index: 2;
  background: linear-gradient(to bottom, rgba(0, 8, 40, 0) 0%, rgba(0, 8, 40, .78) 100%);
}
.ea-screen__pill {
  position: absolute; left: 5cqw; right: 5cqw; top: 27.5cqw; height: 11.8cqw;
  display: flex; align-items: center; gap: 2.4cqw; padding-left: 2.4cqw;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(20, 150, 165, .62), rgba(20, 150, 165, .42));
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
/* same "Y" avatar as the chatter */
.ea-screen__av {
  position: relative; width: 8.8cqw; height: 8.8cqw; flex: none;
  border-radius: 3cqw;
  display: grid; place-items: center;
  font-size: 3.7cqw; font-weight: 800; color: var(--t1k-text);
  background: var(--t1k-tint);
  box-shadow: inset 0 0 0 .5cqw rgba(255, 255, 255, .18);
}
.ea-screen__badge {
  position: absolute; left: -1.1cqw; bottom: -1.1cqw;
  width: 4.4cqw; height: 4.4cqw; border-radius: 50%;
  display: grid; place-items: center;
  border: .3cqw solid var(--t1k-text);
  background: #001a1a;
}
.ea-screen__badge svg { width: 2.2cqw; height: 2.2cqw; }
.ea-screen__who { display: flex; flex-direction: column; gap: .4cqw; min-width: 0; }
.ea-screen__who b { font-size: 3.7cqw; font-weight: 800; color: #fff; }
.ea-screen__who span { font-size: 3.2cqw; color: rgba(255, 255, 255, .7); }
.ea-screen__who strong { color: #fff; font-weight: 800; }

.ea-screen__btn {
  position: absolute; top: 43cqw; height: 11.4cqw;
  display: flex; align-items: center; justify-content: center; gap: 1.6cqw;
  border-radius: 999px;
  background: rgba(20, 28, 52, .68);
  color: var(--t1k-text);
  font-size: 3.8cqw; font-weight: 600;
}
.ea-screen__btn svg { width: 6.8cqw; height: 6.8cqw; flex: none; }
.ea-screen__btn--reso { left: 10cqw; width: 14.8cqw; }
.ea-screen__btn--like { left: 41cqw; width: 17.4cqw; }
.ea-screen__btn--more { left: 74.5cqw; width: 13.8cqw; }

.ea-screen__stamp {
  position: absolute; left: 0; right: 0; top: 56.5cqw;
  text-align: center; font-size: 4cqw; font-weight: 800;
  color: rgba(0, 190, 195, .72);
}

/* The chatter below copies the real chatter from the "chat + post = Chatter"
   demo on the home page (.demo-chatter): same width, padding, corner shape,
   avatar, type sizes, 30px like / resonance icons and owl watermark.
   Only the colours come from the First 1,000 theme, and it is tilted. */
.ea-chatter {
  --ea-cw: min(380px, calc(100vw - 48px));   /* same 380px max as the demo chatter */

  position: relative; flex: none;
  width: var(--ea-cw);
  padding: 5px;
  display: flex; flex-direction: column;
  overflow: hidden;

  /* same corner shape as the demo chatter: square top-left, round elsewhere */
  border-radius: 0 30px 30px 30px;
  border: 1px solid var(--t1k-text);
  box-shadow: 0 0 18px var(--t1k-glow), 0 16px 34px rgba(0, 0, 0, .55);
  background: #0d0d10;
  color: var(--t1k-text);
  text-align: left;

  transform: rotate(6deg);
}
.js .ea-chatter { opacity: 0; transform: rotate(6deg) scale(.82); }
.js .ea-visual.in .ea-chatter {
  opacity: 1; transform: rotate(6deg) scale(1);
  transition:
    opacity .35s var(--ease) .5s,
    transform .55s cubic-bezier(.34, 1.56, .64, 1) .5s;
}

.ea-chatter__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ea-chatter__overlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: var(--t1k-overlay); opacity: var(--t1k-overlay-op);
}
.ea-chatter__head,
.ea-chatter__body,
.ea-chatter__actions,
.ea-chatter__timeview { position: relative; z-index: 2; }

/* --- header --- */
.ea-chatter__head { display: flex; align-items: center; }
.ea-chatter__avatar {
  position: relative; flex: none;
  width: 32px; height: 32px; margin-right: 5px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .85rem;
  background: var(--t1k-tint);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18);
}
.ea-chatter__badge {
  position: absolute; left: -4px; bottom: -4px;
  width: 16px; height: 16px; border-radius: 9px; display: grid; place-items: center;
  border: 1.2px solid var(--t1k-text);
  background: #001a1a;
}
.ea-chatter__badge svg { width: 8px; height: 8px; }

.ea-chatter__top {
  display: flex; flex-direction: row;
  justify-content: space-between; align-items: center;
  width: 80%; min-width: 0;
}
.ea-chatter__meta {
  display: flex; flex-direction: column; justify-content: space-between;
  align-items: flex-start; min-width: 0; flex: 1;
}
.ea-chatter__user { font-weight: 700; font-size: .78rem; line-height: 1.2; padding: 2px 0; }
.ea-chatter__to {
  display: flex; align-items: center; gap: 3px;
  font-size: .72rem; font-weight: 300; line-height: 1.2;
}
.ea-chatter__to-label { font-weight: 300; opacity: .95; }
.ea-chatter__to-name  { font-weight: 700; }

.ea-chatter__end { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; }
.ea-chatter__more {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 20px; opacity: .9;
}
.ea-chatter__more svg { width: 22px; height: 22px; }
.ea-chatter__shorttime { font-size: .72rem; font-weight: 300; opacity: .65; line-height: 1.2; margin-top: 2px; }

/* --- message (keeps the theme's message background) --- */
.ea-chatter__body {
  padding: 5px; margin: 5px 0; max-width: 100%;
  border-radius: 18px;
  background: var(--t1k-msg-bg);
}
.ea-chatter__body p { font-size: 1rem; line-height: 1.375; font-weight: 500; }

/* --- like / resonance row --- */
.ea-chatter__actions { display: flex; align-items: center; gap: 20px; padding: 10px; }
.ea-chatter__actions .like,
.ea-chatter__actions .reso {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 1rem; font-weight: 600; opacity: .95;
  padding: 2px 4px; border-radius: 6px;
}
.ea-chatter__actions .reso { gap: 5px; }
.ea-chatter__actions svg { width: 30px; height: 30px; display: block; }

/* --- timestamp + watermark --- */
.ea-chatter__timeview { display: flex; justify-content: center; }
.ea-chatter__stamp { font-size: .9375rem; font-weight: 700; opacity: .62; }
.ea-chatter__wm {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  width: 22px; height: 22px; object-fit: contain; opacity: .9;
}

/* ============ PERKS ============ */
.ea-perks-section {
  padding: 44px 0 40px;
  background:
    radial-gradient(720px 420px at 50% 40%, rgba(0, 16, 155, .38), transparent 68%),
    var(--band);
  border-top: 1px solid rgba(255, 255, 255, .05);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.ea-perks-section h2 {
  text-align: center;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 900; letter-spacing: -.8px;
  text-shadow: 0 0 30px var(--glow);
  margin-bottom: 26px;
}
.ea-perks {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--raised);
  overflow: hidden;
}
.ea-perks li { display: flex; gap: 14px; padding: 28px 28px; }
.ea-perks li + li { border-left: 1px solid rgba(255, 255, 255, .07); }
.ea-perks li > svg {
  flex: none; width: 22px; height: 22px; margin-top: 2px;
  color: var(--accent); filter: drop-shadow(0 0 8px rgba(255, 122, 26, .6));
}
.ea-perks strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.ea-perks span   { display: block; color: var(--muted); font-size: .95rem; line-height: 1.5; }
/* feedback invitation card */
.ea-feedback {
  display: flex; align-items: center; gap: 20px;
  margin-top: 16px; padding: 24px 28px;
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255, 122, 26, .12), rgba(255, 122, 26, 0) 55%),
    var(--surface);
  box-shadow: var(--raised), 0 0 0 1px rgba(255, 122, 26, .35), 0 0 32px rgba(255, 122, 26, .12);
}
.ea-feedback__ic {
  flex: none; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent); color: #140a04;
  box-shadow: 0 0 24px rgba(255, 122, 26, .55);
}
.ea-feedback__ic svg { width: 26px; height: 26px; }
.ea-feedback__tag {
  display: inline-block; margin-bottom: 6px;
  font-size: .72rem; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--accent);
}
.ea-feedback h3 { font-size: 1.2rem; letter-spacing: -.3px; margin-bottom: 4px; }
.ea-feedback p  { color: var(--muted); font-size: .95rem; line-height: 1.55; max-width: 720px; }
@media (max-width: 560px) {
  .ea-feedback { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 22px; }
}

.ea-note { text-align: center; color: var(--muted); font-size: .92rem; max-width: 560px; margin: 18px auto 0; }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
  .ea-form, .ea-done { margin-left: auto; margin-right: auto; text-align: left; }
  .ea-done { text-align: center; }
  .ea-done__badge { margin-left: auto; margin-right: auto; }
  .ea-count { justify-content: center; }
  .ea-visual { min-height: auto; padding-bottom: 8px; }
  .ea-perks { grid-template-columns: 1fr; }
  .ea-perks li + li { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .07); }
}
@media (max-width: 560px) {
  .ea-hero { padding-bottom: 56px; }
  .ea-platform { gap: 10px; }
  .ea-opt__face { padding: 12px 12px; gap: 10px; }
  .ea-opt__face > svg { width: 22px; height: 22px; }
  .ea-phone { border-radius: 18px; }
  .ea-perks li { padding: 22px 22px; }
}
@media (max-width: 380px) {
  .ea-opt__tick { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .ea-chatter,
  .js .ea-visual.in .ea-chatter { opacity: 1; transform: rotate(6deg); transition: none; }
  .js .ea-phone,
  .js .ea-visual.in .ea-phone { opacity: 1; transform: rotate(-4deg); transition: none; }
  .js .ea-done:not([hidden]) { animation: none; }
  .ea-opt__face, .ea-field input { transition: none; }
}

/* ============ IMAGE PROTECTION ============ */
.ea-poster, .ea-chatter, .ea-phone, .ea-poster img, .ea-chatter img, .ea-phone img {
  -webkit-touch-callout: none;   /* no iOS long-press "Save image" menu */
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ============ IMAGE ROW (all screen sizes) ============
   The page is three rows: perks, then the theme image with the Discover tile
   and the chatter in front of it, then the title + form. The tile + chatter
   are laid out at a fixed design size and scaled to fit the image (the scale
   is set by early-access.js as --ea-s). */
.ea-showcase {
  padding: 64px 0 28px;
  background: radial-gradient(760px 460px at 50% 38%, rgba(0, 16, 155, .5), transparent 62%), var(--bg);
  overflow-x: clip;       /* still stop sideways spill (no horizontal scrollbar)... */
  overflow-y: visible;    /* ...but never crop the tilted chatter / phone at the bottom */
}
.ea-showcase .ea-visual { width: min(100%, 560px); max-width: none; margin: 0 auto; }
/* style.css (.hero-visual / .reveal) can clip its children; the tilted chatter and
   phone poke out past the stage, so make sure nothing between here and the
   section's own clip cuts them off. */
.ea-showcase .wrap,
.ea-showcase .ea-visual,
.ea-showcase .ea-stage { overflow: visible; contain: none; clip-path: none; }

.ea-stage  { display: block; container-type: inline-size; aspect-ratio: 100 / 131; }   /* not height: 131cqw, which on a container resolves against the viewport width and made the stage huge on desktop */
.ea-poster {
  position: absolute; left: 50%; top: 0; z-index: 1;
  width: 62%; transform: translateX(-50%);
}
.ea-row {
  position: absolute; z-index: 4;
  left: 50%; bottom: 7cqw;
  width: 620px; margin-left: -310px; padding: 0; gap: 0;
  display: flex; flex-direction: row-reverse; flex-wrap: nowrap;
  align-items: flex-end; justify-content: flex-start;
  transform: scale(var(--ea-s, .5));
  transform-origin: 50% 100%;
}
.ea-row .ea-chatter { --ea-cw: 380px; z-index: 2; margin-left: -60px; }   /* in front of the tile */
.ea-row .ea-phone   { width: 300px; z-index: 1; }

/* ============ TITLE ROW (top) ============ */
.ea-intro { padding: 56px 0 0; }
.ea-intro-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ea-intro h1 { max-width: 1040px; }
.ea-intro .lead { max-width: 820px; margin-left: auto; margin-right: auto; }
.ea-intro .ea-count { justify-content: center; margin-bottom: 0; }
/* Bottom padding gives the tilted chatter, the phone and their glow/shadow room.
   .ea-showcase clips overflow, so with only 10px here the bottom of the chatter
   was being cut off. */
.ea-showcase { padding: 32px 0 72px; }

/* ============ FORM ROW (bottom) ============ */
.ea-signup { padding: 40px 0 64px; background: var(--bg); }
.ea-signup-wrap { display: flex; flex-direction: column; align-items: center; }
.ea-signup .ea-form, .ea-signup .ea-done { margin-left: auto; margin-right: auto; text-align: left; }
.ea-signup .ea-done { text-align: center; }
.ea-signup .ea-done__badge { margin-left: auto; margin-right: auto; }
.ea-signup { scroll-margin-top: 70px; }   /* keeps the title clear of the sticky nav after the "waitlist" link jumps here */
.ea-signup__title {
  text-align: center;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 900; letter-spacing: -.8px;
  color: var(--accent);
  text-shadow: 0 4px 14px rgba(0, 0, 0, .7), 0 0 30px rgba(255, 122, 26, .55);
  margin-bottom: 8px;
}
.ea-signup__sub { text-align: center; color: var(--muted); margin-bottom: 26px; }
.ea-signup-wrap:has(.ea-done:not([hidden])) .ea-signup__title,
.ea-signup-wrap:has(.ea-done:not([hidden])) .ea-signup__sub { display: none; }   /* success card replaces the form, so drop the title */

/* the orange underlined "waitlist" word in the intro */
.ea-jump {
  color: var(--accent); font-weight: 700;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px;
  transition: color .2s, text-shadow .2s;
}
.ea-jump:hover { color: #ff9a4d; text-shadow: 0 0 16px rgba(255, 122, 26, .55); }
.ea-jump:focus-visible { outline: 3px solid #4d63ff; outline-offset: 3px; border-radius: 4px; }

@media (max-width: 560px) {
  .ea-intro { padding: 36px 0 0; }
  .ea-showcase { padding: 20px 0 48px; }
  .ea-perks-section { padding: 34px 0 30px; }
  .ea-signup { padding: 32px 0 48px; }
}

/* ============ TOAST ============ */
.ea-toasts {
  position: fixed; z-index: 200;
  left: 50%; transform: translateX(-50%);
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  width: min(92vw, 420px);
  display: flex; justify-content: center;
  pointer-events: none;
}
.ea-toast {
  --tc: #8be0a4;
  pointer-events: auto; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px 12px 12px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 50%), var(--surface);
  color: #fff; font-size: .94rem; font-weight: 600; line-height: 1.3;
  box-shadow: 8px 8px 20px #000, -4px -4px 12px rgba(255, 255, 255, .05),
              0 0 0 1px var(--tc), 0 0 26px color-mix(in srgb, var(--tc) 35%, transparent);
  animation: ea-toast-in .38s cubic-bezier(.34, 1.56, .64, 1) both;
}
.ea-toast.is-info  { --tc: #ff7a1a; }
.ea-toast.is-error { --tc: #ff6b6b; }
.ea-toast.is-out   { animation: ea-toast-out .25s ease forwards; }
.ea-toast__ic {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .95rem; font-weight: 900; color: #140a04;
  background: var(--tc);
  box-shadow: 0 0 14px var(--tc);
}
@keyframes ea-toast-in  { from { opacity: 0; transform: translateY(16px) scale(.94); } }
@keyframes ea-toast-out { to   { opacity: 0; transform: translateY(10px) scale(.96); } }
@media (prefers-reduced-motion: reduce) {
  .ea-toast, .ea-toast.is-out { animation: none; }
}

/* ============ DESKTOP: spread the images out across the page ============
   Wide screens get a horizontal layout: themed chatter on the left, the theme
   image in the middle, the Discover screen on the right. The whole stage is
   designed at 900px wide and scaled to fit (early-access.js reads --ea-w). */
.ea-stage { --ea-w: 640; }
@media (min-width: 981px) {
  .ea-stage { --ea-w: 900; }
  .ea-showcase .ea-visual { width: min(100%, 1000px); }
  .ea-stage  { aspect-ratio: 900 / 640; }
  .ea-poster {
    top: 50%; width: 37.8cqw;
    transform: translate(-50%, -50%);
  }
  .ea-row {
    width: 860px; margin-left: -430px; bottom: 6cqw;
    flex-direction: row; justify-content: space-between;
  }
  .ea-row .ea-chatter { margin-left: 0; }
  .ea-signup .ea-form, .ea-signup .ea-done { width: min(100%, 600px); }
}