.footer-dock{display:flex;gap:10px;align-items:center}

/* ── Polish layer ───────────────────────────────────────────────────────────
   Appended last so it refines the rules above rather than rewriting them.
   Motion is disabled under prefers-reduced-motion at the end of the block. */

html{scroll-behavior:smooth}

/* ── Type ──
   Big display text needs tighter tracking and shorter leading than body copy,
   or it reads loose and amateurish at large sizes. */
h1,h2,.auth-hero-title,.hero-eyebrow{text-wrap:balance}
.hero h1{letter-spacing:-.055em;line-height:1.02}
.hero-sub{max-width:52ch;margin-left:auto;margin-right:auto;line-height:1.65;font-size:clamp(15px,1.6vw,18px)}
p{text-wrap:pretty}

/* The accent phrase carries the brand - give it the gradient rather than a
   flat colour, and a soft glow so it reads as the focal point. */
.hero h1 .accent,.auth-hero-title span{
  background:linear-gradient(120deg,var(--r-blue-light),#8fc2ff 45%,var(--r-blue));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 4px 22px rgba(86,161,255,.25));
}

/* ── Sticky nav ──
   The nav scrolled away with the page, so on a long landing page there was no
   persistent way back to Sign Up. Now it sticks and picks up a blurred bar
   once you scroll (the .scrolled class is set in marketing.js). */
.landing-nav{position:sticky;top:0;z-index:50;transition:padding .25s ease}
.landing-nav:before{
  content:'';position:absolute;inset:0;left:50%;translate:-50% 0;width:100vw;
  background:rgba(8,17,31,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  opacity:0;transition:opacity .25s ease,border-color .25s ease;pointer-events:none;
}
.landing-nav.scrolled:before{opacity:1;border-bottom-color:var(--r-line)}
.landing-nav.scrolled{padding-top:13px;padding-bottom:13px}
.landing-nav>*{position:relative;z-index:1}

/* ── Depth ──
   One consistent, layered shadow scale instead of ad-hoc single shadows -
   two stacked shadows (tight + wide) read as real elevation. */
.f-card,.auth-card,.mock-window,.donate-card,.contact-card{
  box-shadow:0 1px 2px rgba(0,0,0,.28),0 12px 34px rgba(0,0,0,.4);
}
.f-card{transition:transform .22s cubic-bezier(.2,.9,.3,1.1),border-color .22s ease,box-shadow .22s ease}
.f-card:hover{
  transform:translateY(-4px);border-color:var(--r-blue);
  box-shadow:0 2px 4px rgba(0,0,0,.3),0 20px 46px rgba(47,128,237,.22);
}

/* ── Buttons ──
   Every control should acknowledge hover and press. */
.btn{transition:transform .14s cubic-bezier(.2,.9,.3,1.2),box-shadow .2s ease,
     background .2s ease,border-color .2s ease,filter .2s ease}
.btn-primary{box-shadow:0 6px 20px rgba(47,128,237,.32)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(47,128,237,.45);filter:brightness(1.06)}
.btn-outline:hover,.btn-ghost:hover{border-color:var(--r-blue);color:#fff}