/* ============================================================
   calm.css — density pass, loaded ON TOP of invo.css by /c and /d
   ------------------------------------------------------------
   /a and /b stay untouched so the comparison is honest.

   The problem measured on /a and /b: ~19 text elements and 3.2
   glass panels per screen, with 5 accent colours competing
   inside a single card. Users scan rather than read, so every
   extra element costs attention that should be going to one
   message per screenful.

   Four moves:
     1. One proof mechanism per beat, not five stacked.
     2. One accent per component. The win streak is the signal;
        everything else steps back to type.
     3. Proximity: big gaps BETWEEN sections, tight gaps within,
        so the eye chunks the page instead of reading a wall.
     4. Fewer panels. Text that does not need a container sits
        directly on the sky.
   ============================================================ */

/* ---------- spacing scale ----------
   An audit found seven different internal gap values in use (10/12/14/16/
   18/22/34px), which is what reads as "inconsistent padding". Everything
   now snaps to five steps and nothing sets spacing inline.

     8px   a caption tied to its own element
     12px  a section label to its content, or content to its footnote
     18px  peer blocks inside one section
     28px  groups inside the hero
     60px  between sections
   ---------------------------------------------------------------- */
:root{
  --sp-1:8px; --sp-2:12px; --sp-3:18px; --sp-4:28px; --sp-5:60px;

  /* Panel insets. Gaps BETWEEN panels were already uniform; what still read
     as inconsistent was the inset INSIDE them. Eight panels were using eight
     different paddings and five different radii, so text started at a
     different distance from the edge in every box and nothing lined up
     optically. One inset, one radius, one emphasis variant. */
  --pad-panel:16px;
  --pad-panel-lg:20px;
  --r-panel:18px;
}

/* every panel, same inset and same corner */
.bar,
.card,
.card--solid,
.startbar,
.reassure,
.leaders,
.vs-col{
  padding:var(--pad-panel);
  border-radius:var(--r-panel);
}
.bar{padding:var(--sp-2) var(--pad-panel)}            /* slim header */
.card--solid{padding:var(--pad-panel-lg)}             /* the one emphasis card */
.leaders{padding:4px var(--pad-panel)}                /* rows supply their own */
.lrow{padding:var(--sp-2) 0}
.rev{padding:0 0 0 var(--pad-panel)}                  /* rule, not a box */

/* utility gaps, remapped onto the scale (calm.css only loads on /c and /d,
   so /a and /b keep the originals) */
.gap-8 {gap:var(--sp-2)}
.gap-10{gap:var(--sp-2)}
.gap-12{gap:var(--sp-2)}
.gap-14{gap:var(--sp-3)}
.gap-18{gap:var(--sp-3)}
.gap-24{gap:var(--sp-3)}

/* stacks of peer blocks */
.revstack{display:flex;flex-direction:column;gap:var(--sp-3)}
/* a note that belongs to the block above it */
.cardnote{margin-top:var(--sp-2)}

/* ---------- rhythm: sections breathe, contents tighten ----------
   Cutting elements alone did not lower per-screen density, because the
   page shortened as fast as the content did. The gap between sections
   has to grow too, so each screenful carries fewer things even though
   the page is still shorter overall than /a and /b. */
.mt-30{margin-top:var(--sp-5)}
.mt-22{margin-top:var(--sp-4)}
.mt-14{margin-top:var(--sp-3)}
.wrap{padding-bottom:132px}
.bar{margin-top:14px}

/* a section heading is ONE thing, not a label plus a paragraph */
.section-label{
  display:block;font-size:12px;letter-spacing:.6px;font-weight:700;
  text-transform:none;color:rgba(255,255,255,.78);margin-bottom:var(--sp-2);
}
.section-note{display:none}          /* the duplicated sub-paragraph */

/* ---------- type: fewer steps, more contrast between them ---------- */
h1{font-size:33px;line-height:1.12;letter-spacing:-1.1px}
h2{font-size:21px}
.sub{font-size:15px;line-height:1.5;color:rgba(255,255,255,.90)}
.hero-sub{max-width:20.5em;margin-left:auto;margin-right:auto}

/* isolation: whitespace around the primary button raises tap rate, while
   its caption stays tight to it so they read as one unit */
.btn-note{margin-top:var(--sp-1);font-size:12.5px}
.statline{margin-top:var(--sp-3) !important}

/* ---------- hero stats become one quiet line, not three tiles ---------- */
.statline{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:6px 10px;margin-top:16px;
  font-size:12.5px;font-weight:600;color:rgba(255,255,255,.80);
}
.statline b{font-weight:800;color:#fff}
.statline .dot{opacity:.45}

/* ---------- trader card: 9 data points down to 5 ---------- */
.trader{gap:13px}
.trader-top{gap:11px}
.trader-top img{width:40px;height:40px;border-radius:12px}
.trader-id .nm{font-size:16px}
/* pair and leverage move up beside the name; handle and timestamp go */
.trader-id .pairline{
  font-size:12.5px;color:rgba(255,255,255,.80);margin-top:2px;font-weight:600;
}
.spark{height:40px;opacity:.9}

/* the position row: P&L is the number that matters, the $100 is its
   translation, so they stack in one place instead of two blocks */
.result{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.result .lhs{font-size:12.5px;color:rgba(255,255,255,.8);font-weight:600;line-height:1.4}
.result .rhs{text-align:right;line-height:1.15}
.result .pct{font-size:26px;font-weight:800;letter-spacing:-.8px;color:#d6ffe4;display:block}
.result .per100{
  font-size:12px;font-weight:600;color:rgba(255,255,255,.82);
  margin-top:3px;display:block;
}

/* ---------- one accent per component ----------
   The orange streak stays loud because "this person wins" is the
   whole pitch. The green money strip loses its fill and becomes
   type, so a card has one shout and one supporting voice. */
.mimic-calc{display:none}
.pos{display:none}

/* ---------- compact rows: lighter, no second accent ---------- */
.lrow .who b{font-size:14.5px}
.lrow .res b{font-size:15px}
.lrow .res span{color:rgba(255,255,255,.78);font-weight:600}

/* ---------- panels: fewer, softer ---------- */

.bare{background:none;border:0;box-shadow:none;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.rev{
  background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-left:2px solid rgba(255,255,255,.34);
}
.rev p{font-size:14px;color:rgba(255,255,255,.93);margin-top:0}
.rev .stars{display:none}          /* the quote marks already say "review" */
.rev .by{margin-top:6px}
.chips{display:none}               /* the same trust points are in the copy */

/* ---------- steps: numbers carry the structure, drop the panel ---------- */
.steps{gap:var(--sp-3)}
.step-n{width:24px;height:24px;font-size:12.5px;background:rgba(255,255,255,.92)}
.step-b .t{font-size:15px}
.step-b .d{font-size:13.5px;color:rgba(255,255,255,.84);margin-top:3px}

/* ---------- the sticky CTA stops shouting ----------
   A pulsing, glinting button is itself "something going on". It keeps a
   slow breath so it still draws the eye on a long scroll, but the scale
   jump and the gloss sweep are gone. */
.dock .btn{animation:dockCalm 4.2s ease-in-out infinite}
.dock .btn::after{display:none}
.dock .tiny{font-size:11px;color:rgba(255,255,255,.86)}
@keyframes dockCalm{
  0%,100%{box-shadow:0 10px 26px rgba(8,42,80,.30)}
  50%    {box-shadow:0 14px 34px rgba(8,42,80,.44)}
}

/* ---------- the three steps, as one compact signpost ----------
   The density pass pushed "download, register, deposit" to the bottom of
   /c and off /d entirely, so the thing the user actually has to DO stopped
   being obvious. This puts it directly under the hero CTA as a single row:
   one element, high on the page, instead of a section buried at the end.

   All three steps carry equal visual weight on purpose. Emphasising the
   deposit would make it read as a hurdle; levelling it makes it read as
   the third of three routine steps. */
.startbar{
  display:grid;grid-template-columns:repeat(3,1fr);
  background:linear-gradient(160deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.14) 100%);
  border:1px solid var(--glass-line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 8px 24px rgba(8,38,72,.18), inset 0 1px 0 rgba(255,255,255,.38);
}
.startbar .st{position:relative;text-align:center;padding:0 4px}
/* connector: a dim static track with a bright fill drawn over it */
.startbar .st:not(:last-child)::after,
.startbar .st:not(:last-child)::before{
  content:"";position:absolute;top:11px;left:calc(50% + 16px);right:calc(-50% + 16px);
  height:2px;border-radius:2px;
}
.startbar .st:not(:last-child)::after{background:rgba(255,255,255,.20)}
.startbar .st:not(:last-child)::before{
  background:rgba(255,255,255,.70);z-index:1;
  transform:scaleX(0);transform-origin:left center;
}
.startbar .n{
  width:22px;height:22px;border-radius:50%;margin:0 auto;
  background:#fff;color:var(--ink);
  font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;
}
.startbar .t{font-size:13px;font-weight:700;margin-top:8px;letter-spacing:-.2px;line-height:1.2}
.startbar .d{font-size:10.5px;font-weight:600;color:rgba(255,255,255,.78);margin-top:3px;line-height:1.25}
.startbar-cap{
  text-align:center;font-size:12px;font-weight:600;
  color:rgba(255,255,255,.80);margin-bottom:var(--sp-1);
}

/* ---------- the sequence animation ----------
   Pure CSS: no JS, no extra request, nothing to download. Only `transform`
   and `opacity` are animated, so it runs on the compositor and costs
   essentially nothing on a cheap phone. It plays ONCE on load and then sits
   still, rather than looping forever and burning battery for the rest of
   the session. Every step ends in its natural visible state via
   `animation-fill-mode: both`, so if the animation never runs the signpost
   simply renders complete. */
@keyframes stepPop{
  from{opacity:0;transform:scale(.55)}
  70% {opacity:1;transform:scale(1.08)}
  to  {opacity:1;transform:scale(1)}
}
@keyframes stepText{
  from{opacity:0;transform:translateY(5px)}
  to  {opacity:1;transform:translateY(0)}
}
@keyframes stepLine{
  from{transform:scaleX(0)}
  to  {transform:scaleX(1)}
}

.startbar .n{animation:stepPop .42s cubic-bezier(.34,1.5,.64,1) both}
.startbar .t{animation:stepText .38s ease both}
.startbar .d{animation:stepText .38s ease both}
.startbar .st:not(:last-child)::before{animation:stepLine .40s ease both}

.startbar .st:nth-child(1) .n{animation-delay:.25s}
.startbar .st:nth-child(1) .t{animation-delay:.35s}
.startbar .st:nth-child(1) .d{animation-delay:.40s}

.startbar .st:nth-child(2) .n{animation-delay:.85s}
.startbar .st:nth-child(2) .t{animation-delay:.95s}
.startbar .st:nth-child(2) .d{animation-delay:1.00s}

.startbar .st:nth-child(3) .n{animation-delay:1.45s}
.startbar .st:nth-child(3) .t{animation-delay:1.55s}
.startbar .st:nth-child(3) .d{animation-delay:1.60s}

/* ---------- the continual pass ----------
   After the intro has drawn itself, a ping travels 1 -> 2 -> 3 forever so
   the row stays alive rather than freezing into a static graphic. The
   stagger is what sells it as a sequence and not three blinking dots.

   Cost control: the ping is a pseudo-element ring on each number, so it
   adds no markup, and it animates only `transform` and `opacity` on five
   tiny elements. Nothing here triggers layout or paint, so it stays on the
   compositor and is cheap enough to run indefinitely on a weak phone.
   The intro animations use `transform`, these use `opacity`, so the two
   never fight even while both are declared on the same element. */
.startbar .n::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:2px solid rgba(255,255,255,.92);
  pointer-events:none;opacity:0;transform:scale(.8);
  animation:stepPing 3.6s ease-out infinite;
}
@keyframes stepPing{
  0%  {opacity:0;   transform:scale(.8)}
  9%  {opacity:.72; transform:scale(1)}
  32% {opacity:0;   transform:scale(1.8)}
  100%{opacity:0;   transform:scale(1.8)}
}
.startbar .st:nth-child(1) .n::after{animation-delay:2.00s}
.startbar .st:nth-child(2) .n::after{animation-delay:2.45s}
.startbar .st:nth-child(3) .n::after{animation-delay:2.90s}

/* the connectors brighten just behind the ping, so the pulse reads as
   travelling along the line rather than hopping between dots */
@keyframes lineGlow{
  0%,100%{opacity:.55}
  11%    {opacity:1}
  34%    {opacity:.55}
}
.startbar .st:not(:last-child)::before{
  animation:stepLine .40s ease both, lineGlow 3.6s ease-in-out infinite;
}
.startbar .st:nth-child(1):not(:last-child)::before{animation-delay:.55s, 2.15s}
.startbar .st:nth-child(2):not(:last-child)::before{animation-delay:1.15s, 2.60s}

/* The global reduced-motion rule zeroes DURATION but not DELAY, which would
   leave these hidden for up to 1.6s. Zero the delays and stop the loop. */
@media (prefers-reduced-motion:reduce){
  .startbar .n,.startbar .t,.startbar .d,
  .startbar .st::before,.startbar .n::after{
    animation-delay:0s !important;
  }
  .startbar .n::after{animation:none !important;opacity:0 !important}
}

@media (max-width:344px){
  .startbar .t{font-size:12px}
  .startbar .d{font-size:10px}
}

/* ---------- top bar without a CTA ----------
   Three "Download Invo" buttons visible at once (nav, hero, sticky dock)
   split attention between identical actions. The nav one goes; the dock is
   always on screen anyway, so nothing is lost. With the button gone the
   brand centres, otherwise the bar reads as half-empty. */
.bar{justify-content:center}

/* ---------- deposit reassurance ----------
   The offer pays $2 on registration and $10 on a $10 deposit, so the
   deposit is 5x the value and every depositor is already a registrant.
   Optimising for the deposit therefore costs nothing on the first leg.
   The two things that stop a 18-25 year old funding a crypto app are
   "can I get it back" and "is $10 even enough", so both get answered
   next to the step that asks for the money. */
.reassure{
  display:flex;align-items:flex-start;gap:9px;
  margin-top:var(--sp-2);
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.26);
}
.reassure svg{flex:0 0 auto;width:15px;height:15px;margin-top:1px;color:#b9ffd3}
.reassure p{font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.92)}
.reassure b{font-weight:700;color:#fff}

/* one-line trust strip near the close, replacing the four chips */
.trustline{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px 9px;
  font-size:11.5px;font-weight:600;color:var(--ink-soft);opacity:.9;
}
.trustline .dot{opacity:.4}

/* ---------- final card ---------- */
.card--solid.gap-14{gap:var(--sp-3)}
/* the flex gap owns the spacing here; margins on the children would stack */
.card--solid .store-icons,
.card--solid .trustline{margin-top:0}

/* ---------- footer: quieter, it is not the pitch ---------- */
.foot{margin-top:var(--sp-5)}
.risk{font-size:10px;line-height:1.55;opacity:.9}

@media (min-width:768px){
  h1{font-size:38px}
}