/* Umix USDT Earn — viral waitlist
   Light, RTL, one centred column at every width. The column grows and the
   type scales up on a big screen; it never splits into side-by-side panels,
   because the page only ever asks for one thing at a time. */

@font-face {
  font-family: "IRANYekanX";
  src: url("IRANYekanX-Regular.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "IRANYekanX";
  src: url("IRANYekanX-DemiBold.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}
/* The wordmark's own face, subset to the four letters of "Umix" — a kilobyte
   for the one word that has to be drawn correctly. */
@font-face {
  font-family: "Fredoka";
  src: url("Fredoka-Umix.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}

:root {
  /* Neutrals carry a faint green bias so white sits with the brand, not against it. */
  --paper:     #FBFDFB;
  --card:      #FFFFFF;
  --sunken:    #F1F6F2;
  --line:      #E2EBE5;
  --line-firm: #CBD9CF;
  --ink:       #071310;
  --ink-2:     #40514A;
  --muted:     #6B7B73;
  --muted-2:   #93A29A;

  --brand:     #14EC81;   /* fills and large shapes */
  --brand-ink: #04160C;   /* text on a brand fill */
  --brand-txt: #067C46;   /* brand colour for TEXT — passes contrast on paper */
  --brand-wash:#EAFBF2;
  --danger:    #C0362B;

  /* One type scale. Every size on the page comes from this list — nothing
     picks its own value, which is what kept the old sheet at 21 distinct
     sizes. Each step is roughly a 1.15x jump. */
  --fs-xs:  .75rem;      /* legal text, dates, units */
  --fs-sm:  .8125rem;    /* labels, captions, secondary UI */
  --fs-md:  .875rem;     /* body */
  --fs-lg:  1rem;        /* lead paragraph, buttons, section headings */
  --fs-xl:  1.25rem;     /* the largest non-display size */
  --fs-money:      clamp(1.85rem, 8vw, 2.35rem);   /* the accruing dollars */
  --fs-money-lg:   3.25rem;
  --fs-title:      clamp(1.125rem, 5vw, 1.4rem);   /* the hero's second line */
  --fs-title-lg:   1.75rem;                        /* ...with room to breathe */
  --fs-display:    clamp(3rem, 16vw, 4.25rem);     /* the rate and the queue number */
  --fs-display-lg: 6.5rem;

  --radius:    16px;
  --lift:      0 1px 2px rgba(7, 40, 25, .05), 0 10px 30px rgba(7, 40, 25, .06);
  --lift-soft: 0 1px 2px rgba(7, 40, 25, .04), 0 4px 14px rgba(7, 40, 25, .04);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* The layout sets display on these elements, so [hidden] needs to win. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "IRANYekanX", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.8;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* One soft brand wash behind the hero. No other gradients on the page. */
.glow {
  position: fixed;
  inset-block-start: -24rem;
  inset-inline-end: -16rem;
  width: 44rem; height: 44rem;
  background: radial-gradient(circle, rgba(20, 236, 129, .18) 0%, rgba(20, 236, 129, 0) 64%);
  pointer-events: none;
  z-index: 0;
}

/* ONE container, always. Width and rhythm scale; the structure does not. */
.shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 27rem;
  margin-inline: auto;
  padding: 1.5rem 1.15rem calc(2.5rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.brand { display: flex; }
.brand a {
  display: inline-flex; align-items: center; gap: .5rem;
  color: inherit; text-decoration: none;
  border-radius: .5rem;
}
.brand a:focus-visible { outline: 2px solid var(--brand-txt); outline-offset: 4px; }
.brand img { width: 2.25rem; height: 2.25rem; border-radius: .55rem; display: block; }
.brand span {
  /* Set to the mark's cap height rather than to the type scale: a wordmark
     that reads smaller than the logo beside it looks like a mistake. */
  font-family: "Fredoka", "IRANYekanX", sans-serif;
  font-size: 1.6rem; font-weight: 600; line-height: 1;
  letter-spacing: -.005em; direction: ltr;
}

/* ---------------------------------------------------------------- hero */

.hero { display: flex; flex-direction: column; gap: 1rem; }

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(6, 124, 70, .5); }
  70%  { box-shadow: 0 0 0 .45rem rgba(6, 124, 70, 0); }
  100% { box-shadow: 0 0 0 0 rgba(6, 124, 70, 0); }
}

h1 { display: flex; flex-direction: column; gap: .1rem; }

.rate {
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--brand-txt);
  font-variant-numeric: tabular-nums;
}

.rate-caption {
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}

.lede { color: var(--muted); font-size: var(--fs-md); }

/* ------------------------------------------------------------- counter */

/* The feeling of money accruing. One calm 30-second sweep across a year, a
   beat on the total, then it dissolves and starts again. */
.earn {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--lift);
  padding: .95rem 1.15rem 1.1rem;
  display: flex; flex-direction: column; gap: .2rem;
  overflow: hidden;
}
.earn-label { font-size: var(--fs-sm); font-weight: 400; color: var(--muted); }
.earn-amount {
  display: flex; align-items: baseline; gap: .12rem;
  direction: ltr; align-self: flex-start;
  font-size: var(--fs-money);
  font-weight: 600; line-height: 1.2;
  letter-spacing: -.03em;
  color: var(--brand-txt);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  transition: opacity .45s ease;
}
/* The loop dissolves instead of stopping: the total fades out and the next
   climb is already underway by the time it fades back in. */
.earn.resetting .earn-amount { opacity: .12; }
.earn.resetting .earn-fill { opacity: 0; }
.earn-amount .sym { font-size: .58em; font-weight: 400; color: var(--muted); }
.earn-amount .frac { font-size: .58em; color: #2FA96C; }

/* A hairline that fills across the sweep, so the reset reads as deliberate. */
.earn-track {
  margin-block: .2rem .1rem;
  height: 2px; border-radius: 2px;
  background: var(--sunken);
  overflow: hidden;
}
.earn-fill {
  display: block; height: 100%; width: 0%;
  background: var(--brand);
  border-radius: 2px;
  transition: opacity .35s ease;
}

/* -------------------------------------------------------------- ticker */

/* The live price. It moves only when tgju's intraday feed actually moves —
   the pulse is the liveness cue, the digits are the truth. */
.ticker {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: .7rem .95rem;
  box-shadow: var(--lift-soft);
  font-size: var(--fs-sm);
  display: flex; flex-direction: column; gap: .6rem;
}
.ticker-title {
  font-size: var(--fs-sm); font-weight: 400; color: var(--muted);
  line-height: 1.5;
}
.ticker-title b { color: var(--brand-txt); font-weight: 600; }

/* Two readings of the same thing, one live and one fixed, split by a rule so
   the comparison is the point rather than something to be worked out. */
.ticker-grid { display: grid; grid-template-columns: 1fr 1fr; }
.ticker-cell {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .1rem; min-width: 0; text-align: center;
}
.ticker-cell + .ticker-cell {
  border-inline-start: 1px solid var(--line);
  padding-inline-start: .9rem;
}
.ticker-cell:first-child { padding-inline-end: .9rem; }

.ticker-when {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  font-size: var(--fs-xs); color: var(--muted-2); line-height: 1.6;
}
.ticker-value { display: flex; align-items: baseline; gap: .3rem; }
.ticker-sub { font-size: var(--fs-xs); color: var(--muted-2); line-height: 1.6; }

/* "live" is a claim, so it is spelled out rather than left to a dot. The
   fixed side takes the same pill in ink, so the two readings are labelled the
   same way and only the colour says which one is moving. */
.live-tag, .past-tag {
  display: inline-flex; align-items: center; gap: .35rem;
  font-weight: 600;
  border-radius: 999px;
  padding: .05rem .5rem;
}
.live-tag { color: var(--brand-txt); background: var(--brand-wash); }
.past-tag { color: var(--ink);       background: var(--sunken); }
.live { flex: none; display: inline-flex; width: .5rem; height: .5rem; }
.live i {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--brand);
  animation: pulse 2.4s ease-out infinite;
}
.ticker-price, .ticker-past span:first-child {
  font-weight: 600; font-size: var(--fs-lg); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* A move is announced by colour alone: the digits go green or red as they
   change, then ease back to ink. Fast in, slow out. */
.ticker-price { transition: color 1.1s ease-out; }
.ticker-price.up   { color: var(--brand-txt); transition-duration: .12s; }
.ticker-price.down { color: var(--danger);    transition-duration: .12s; }
.ticker-past span:first-child { color: var(--muted); }
.ticker-unit { color: var(--muted-2); font-size: var(--fs-xs); }
/* -------------------------------------------------------------- buttons */

.btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%;
  min-height: 3.5rem;
  border: 0; border-radius: 13px;
  font-family: inherit; font-size: var(--fs-md); font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background-color .16s ease,
              opacity .16s ease, box-shadow .16s ease;
}
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .5; cursor: default; }
.btn:focus-visible, .link-copy:focus-visible, .input:focus-visible,
.resend:focus-visible, .share-native:focus-visible {
  outline: 2px solid var(--brand-txt); outline-offset: 2px;
}

.btn-primary {
  background: var(--brand); color: var(--brand-ink);
  box-shadow: 0 1px 2px rgba(7, 40, 25, .10), 0 6px 18px rgba(20, 236, 129, .30);
}
.btn-primary:hover:not(:disabled) { background: #0FD976; }

.btn-share {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line-firm);
  min-height: 2.9rem;
  font-size: var(--fs-sm);
  gap: .4rem;
  padding-inline: .4rem;
}
.btn-share:hover { border-color: var(--brand-txt); background: var(--brand-wash); }
.btn-share svg {
  flex: none; width: 1.1rem; height: 1.1rem;
  fill: var(--brand-txt); color: var(--brand-txt);
}
/* Instagram only reads as itself in outline. */
.btn-share svg.stroked {
  fill: none; stroke: var(--brand-txt); stroke-width: 1.9;
  color: var(--brand-txt);
}

.spinner {
  width: 1.05rem; height: 1.05rem;
  border: 2px solid rgba(4, 22, 12, .22);
  border-top-color: var(--brand-ink);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spinner-dark { border-color: rgba(7, 19, 16, .15); border-top-color: var(--brand-txt); }

/* ---------------------------------------------------------------- card */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--lift);
  padding: 1.4rem 1.25rem;
}

.step { display: flex; flex-direction: column; gap: .7rem; }

.field-label { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.field-label b { color: var(--ink); font-weight: 600; }

.input {
  width: 100%;
  min-height: 3.5rem;
  background: var(--sunken);
  border: 1px solid var(--line-firm);
  border-radius: 13px;
  color: var(--ink);
  font-family: inherit; font-size: var(--fs-lg); font-weight: 600;
  padding-inline: 1rem;
  text-align: center;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.input::placeholder { color: var(--muted-2); letter-spacing: .04em; }
.input:focus {
  background: var(--card);
  border-color: var(--brand-txt);
  box-shadow: 0 0 0 3px rgba(6, 124, 70, .12);
}
/* One box per digit. They share the row rather than taking a fixed width, so
   five of them still fit on a 320px screen. */
.code-group { display: flex; gap: .5rem; direction: ltr; }
.code-box {
  flex: 1 1 0; min-width: 0;
  height: 3.5rem;
  background: var(--sunken);
  border: 1px solid var(--line-firm);
  border-radius: 12px;
  color: var(--ink);
  font-family: inherit; font-size: var(--fs-xl); font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  outline: none; padding: 0;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.code-box:focus {
  background: var(--card);
  border-color: var(--brand-txt);
  box-shadow: 0 0 0 3px rgba(6, 124, 70, .12);
}
.code-box.filled { background: var(--card); border-color: var(--brand-txt); }
.code-group.busy .code-box { opacity: .55; }

.code-note {
  color: var(--brand-txt); font-size: var(--fs-sm); text-align: center;
}

.code-status {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  color: var(--muted); font-size: var(--fs-sm);
}

/* Hidden without moving it off-canvas: a negative offset would extend the
   document on an RTL page instead of being clipped. */
.honeypot {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.error { color: var(--danger); font-size: var(--fs-sm); font-weight: 600; }

/* The second delivery channel. Deliberately quieter than the primary flow —
   the code is already on its way by SMS; this is for people who prefer Bale. */
.bale-link {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  align-self: center;
  color: var(--brand-txt); font-size: var(--fs-sm); font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--line-firm);
  border-radius: 999px;
  padding: .4rem .9rem;
  transition: border-color .16s ease, background-color .16s ease;
}
.bale-link:hover { border-color: var(--brand-txt); background: var(--brand-wash); }
.bale-link img { width: 1.15rem; height: 1.15rem; border-radius: .3rem; display: block; }

.resend {
  background: none; border: 0; padding: .2rem;
  color: var(--muted); font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; align-self: center; border-radius: 6px;
}
.resend:disabled { color: var(--muted-2); cursor: default; }
.resend:not(:disabled) { color: var(--brand-txt); }

/* --------------------------------------------------------------- queue */

.queue {
  text-align: center;
  padding-block: 1rem 0;
  display: flex; flex-direction: column; gap: .25rem;
}
.queue-label { color: var(--muted); font-size: var(--fs-md); font-weight: 400; }

.queue-number {
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.04em;
  color: var(--brand-txt);
  font-variant-numeric: tabular-nums;
  transition: opacity .25s ease;
}
.queue-number.updating { opacity: .35; }

.queue-ahead { font-size: var(--fs-md); color: var(--ink); }
.queue-ahead b { font-weight: 600; }
.queue-ahead { text-wrap: balance; }
.queue-behind { font-size: var(--fs-sm); color: var(--muted); }

/* -------------------------------------------------------------- invite */

.invite { display: flex; flex-direction: column; gap: .9rem; }
.invite h2 { font-size: var(--fs-lg); font-weight: 600; line-height: 1.55; }
.invite-copy { color: var(--muted); font-size: var(--fs-md); }

.link-row {
  display: flex; align-items: center; gap: .5rem;
  background: var(--sunken);
  border: 1px solid var(--line-firm);
  border-radius: 13px;
  padding: .3rem .3rem .3rem .75rem;
}
.link-text {
  flex: 1; min-width: 0;
  font-size: var(--fs-sm); color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: left; direction: ltr;
}
.link-copy {
  flex-shrink: 0;
  background: var(--brand); color: var(--brand-ink);
  border: 0; border-radius: 10px;
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  padding: .62rem 1.15rem;
  cursor: pointer;
  transition: background-color .16s ease;
}
.link-copy:hover { background: #0FD976; }

.share-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

.share-native {
  background: none; border: 0; padding: .2rem;
  color: var(--muted); font-family: inherit; font-size: var(--fs-sm);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; align-self: center; border-radius: 6px;
}

/* Story card modal. It opens with the card already rendered — the thumbnails
   below only swap the artwork, they are not a step the member has to complete
   before anything happens. */
.modal {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: rgba(7, 19, 16, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  overflow-y: auto;
}
.modal-sheet {
  position: relative;
  width: 100%; max-width: 24rem;
  max-height: 100%;
  overflow-y: auto;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(7, 40, 25, .28);
  padding: 1.25rem .85rem .9rem;
  display: flex; flex-direction: column; gap: .65rem;
  animation: sheet-in .22s ease-out;
}
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(1rem) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.modal-close {
  position: absolute; inset-block-start: .5rem; inset-inline-start: .6rem;
  width: 2rem; height: 2rem;
  background: none; border: 0; border-radius: 50%;
  color: var(--muted); font-size: 1.5rem; line-height: 1;
  cursor: pointer;
}
.modal-close:hover { background: var(--sunken); color: var(--ink); }
.modal-title { font-size: var(--fs-lg); font-weight: 600; text-align: center; }

.story-stage {
  position: relative;
  border-radius: 12px; overflow: hidden;
  background: var(--sunken);
  /* Instagram's story ratio, so the preview is exactly what gets posted. */
  aspect-ratio: 9 / 16;
  /* Capped so the two actions stay on screen on a short phone without
     scrolling; `contain` then guarantees the whole card is visible. */
  max-height: 68vh;
  margin-inline: auto;
}
.story-preview { width: 100%; height: 100%; object-fit: contain; display: block; opacity: 0; transition: opacity .25s ease; }
.story-preview.ready { opacity: 1; }
.story-spinner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.story-spinner[hidden] { display: none; }

/* Small on purpose: the big preview is the subject, these are just switches. */
.story-thumbs { display: flex; justify-content: center; gap: .4rem; }
.story-pick {
  width: 2.4rem; flex: none;
  padding: 0; border: 2px solid transparent; border-radius: 8px;
  background: var(--sunken); overflow: hidden; cursor: pointer; line-height: 0;
  transition: border-color .16s ease, transform .12s ease;
}
.story-pick:hover { border-color: var(--line-firm); }
.story-pick.on { border-color: var(--brand-txt); }
.story-pick:active { transform: scale(.97); }
.story-pick img { width: 100%; height: auto; display: block; }

/* Saving is the secondary path, so it rides on the image itself rather than
   taking a second full-width button under the primary action. */
.story-save {
  /* Physical right, not inline-end: the page is RTL, so the logical property
     would put this on the left, on top of the poster's own logo. */
  position: absolute; top: .55rem; right: .55rem;
  width: 2.4rem; height: 2.4rem;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(7, 40, 25, .25);
  cursor: pointer;
  transition: background-color .16s ease, transform .12s ease;
}
.story-save:hover { background: #fff; }
.story-save:active { transform: scale(.94); }
.story-save svg { width: 1.15rem; height: 1.15rem; }
.story-hint { font-size: var(--fs-xs); color: var(--muted-2); text-align: center; line-height: 1.7; }

.toast { text-align: center; font-size: var(--fs-sm); font-weight: 600; color: var(--brand-txt); }

/* --------------------------------------------------------------- foot */

.foot {
  border-top: 1px solid var(--line);
  padding-block-start: 1.35rem;
  display: flex; flex-direction: column; gap: 1.15rem;
}

/* Trust marks. Greyscale at rest so a row of foreign brand colours does not
   compete with the page; they come back to full colour on hover. */
.badges {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 1rem 1.5rem;
}
.badge {
  display: flex; align-items: center;
  width: auto;
  filter: grayscale(1); opacity: .62;
  transition: filter .2s ease, opacity .2s ease;
}
.badge:hover { filter: none; opacity: 1; }
/* Sized by optical weight, not by pixels: the Sharif mark carries a lot of
   internal padding and Snapp Pay is a solid two-line wordmark. */
.badge-sharif { height: 5rem; }
.badge-snapp  { height: 2.9rem; }
.badge-enamad { height: 4.5rem; }
.badge-shenasa { height: 3.4rem; }

.contact {
  display: flex; flex-direction: column; gap: .3rem;
  color: var(--muted-2); font-size: var(--fs-xs); line-height: 1.9;
  text-align: center;
}
.contact b { color: var(--muted); font-weight: 600; }
.contact a { color: var(--muted); text-decoration: none; }
.contact a:hover { color: var(--brand-txt); text-decoration: underline; }


/* =====================================================================
   Width steps. Same single column throughout — it just gets more room,
   more air and bigger type as the screen grows.
   ===================================================================== */

/* Very small phones (iPhone SE and below): buy back horizontal space. */
@media (max-width: 22.5rem) {
  .shell { padding-inline: .9rem; gap: 1.25rem; }
  .card, .earn { padding-inline: 1rem; }
  .code-group { gap: .35rem; }
  .code-box { height: 3.1rem; font-size: var(--fs-lg); }
  .btn-share { font-size: var(--fs-sm); }
}

/* Big phones and up. */
@media (min-width: 26rem) {
  .share-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Tablet: more air, a wider measure, still one column. */
@media (min-width: 48rem) {
  .shell {
    max-width: 34rem;
    padding: 3rem 2rem 4rem;
    gap: 1.85rem;
  }
  .card { padding: 1.65rem 1.6rem; }
  .earn { padding: 1.2rem 1.6rem 1.35rem; }
  .ticker { padding: .85rem 1.15rem; font-size: var(--fs-md); }
}

/* Desktop: the column is the composition. Centre it, scale the type up so it
   reads as a landing page rather than a phone screenshot, and let the money
   numbers carry the width. */
@media (min-width: 64rem) {
  .shell {
    max-width: 40rem;
    /* Tight enough at the top that the form's edge stays in the first
       screenful on a laptop — the sell is above it, not instead of it. */
    padding: 2.75rem 2rem 5rem;
    gap: 1.75rem;
    text-align: center;
  }

  .brand { justify-content: center; }
  .hero { align-items: center; gap: 1.1rem; }

  .rate { font-size: var(--fs-display-lg); letter-spacing: -.05em; }
  .rate-caption { font-size: var(--fs-title-lg); }
  .lede { font-size: var(--fs-lg); max-width: 34rem; }


  .ticker { font-size: var(--fs-md); padding: 1.15rem 1.5rem; }
  .ticker-title { font-size: var(--fs-md); }
  .ticker-price, .ticker-past span:first-child { font-size: var(--fs-xl); }
  .ticker-when { font-size: var(--fs-xs); }

  .card { padding: 2rem 2.25rem; }
  .earn { padding: 1.4rem 2rem 1.5rem; align-items: center; }
  .earn-label { font-size: var(--fs-md); }
  .earn-amount { font-size: var(--fs-money-lg); align-self: center; }
  .earn-track { width: 100%; }
  .field-label, .invite-copy, .invite h2 { text-align: right; }
  .input { font-size: var(--fs-lg); }

  .queue { padding-block-start: 2rem; }
  .queue-number { font-size: var(--fs-display-lg); }
  .queue-ahead { font-size: var(--fs-lg); }
  .share-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .foot { text-align: center; padding-block-start: 2rem; gap: 1.25rem; }
  .badge-sharif { height: 6rem; }
  .badge-snapp { height: 3.4rem; }
  .badge-enamad { height: 5.25rem; }
  .badge-shenasa { height: 4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==================================================================
   Flying money — decorative layer behind the column. Fixed and
   non-interactive; the script that creates the notes skips it entirely
   for prefers-reduced-motion.
   ================================================================== */

.flyers {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.flyer {
  position: absolute;
  bottom: -6rem;
  width: 3.25rem;
  height: 3.25rem;
  background: url("dollar-wings.svg") center/contain no-repeat;
  opacity: 0;
  will-change: transform, opacity;
  animation-name: fly-up;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes fly-up {
  0%   { opacity: 0;   transform: translate3d(0, 0, 0) scale(var(--scale, 1)) rotate(-6deg); }
  12%  { opacity: .32; }
  50%  { transform: translate3d(var(--drift, 40px), -52vh, 0) scale(var(--scale, 1)) rotate(6deg); }
  88%  { opacity: .16; }
  100% { opacity: 0;   transform: translate3d(0, -108vh, 0) scale(var(--scale, 1)) rotate(-4deg); }
}

@media (min-width: 64rem) {
  .flyer { width: 4rem; height: 4rem; }
}