/* Loot website — light chrome, SF Rounded everywhere. The home page scatters
   real cutouts from the app along the viewport edges; the cutout photography
   reads best on a near-white background, so the site is light by design. */

:root {
  --bg: #fafafa;
  --surface: #efeff2;
  --text: #111114;
  --muted: #6b7280;
  --faint: #9ca3af;
  --line: #e7e7ea;
  --accent: #111114;
}

/* The app-icon PNG already has its rounded (squircle) corners and transparent
   surround baked in, so the frame is just a positioning box for the image. */
.icon-frame {
  position: relative;
  display: block;
}
.icon-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN",
               Quicksand, "Arial Rounded MT", "Arial Rounded MT Bold",
               system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* The home page pins the hero to the viewport and crops cutouts at its
   edges; clip both axes so off-screen cutouts never create scrollbars. */
body.home-page { overflow: hidden; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { text-decoration-thickness: 2px; }

img { max-width: 100%; height: auto; display: block; }

/* ---------- Scattered cutouts (home) ---------- */

/* Flat — no drop shadows. The items are the app's own cutouts and sit
   directly on the background, same as inside the app. Edges only: each is
   placed in the outer gutters and several are cropped by the viewport, so
   the center column stays clear for the hero. */
.cutouts {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
/* The layer stays pointer-transparent, but each cutout takes pointer events
   so it can be picked up and dragged (JS translates the wrapper, so the
   float on the img and the ground shadow ::after ride along, and it springs
   back home on release). touch-action is safe to kill: the home page never
   scrolls. */
.cutout {
  position: absolute;
  isolation: isolate;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}
.cutout.grabbed { cursor: grabbing; }

/* Gentle floating bob. Each item gets its own duration, amplitude, and a
   NEGATIVE delay — negative delays start the animation mid-cycle, so the
   items drift out of sync instead of pumping up and down together. The
   item's tilt (--rot) is folded into the keyframes rather than living on
   the wrapper: the wrapper must stay unrotated so the ground shadow below
   (::after) sits flat. */
.cutout img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-user-drag: none;
  animation: cutout-float var(--float-dur, 6s) ease-in-out var(--float-delay, 0s) infinite;
  will-change: transform;
}
/* --drag-rot is the live swing while an item is dragged (JS spring); it adds
   to the baked-in tilt here because the running animation owns transform. */
@keyframes cutout-float {
  0%, 100% { transform: translateY(0) rotate(calc(var(--rot, 0deg) + var(--drag-rot, 0deg))); }
  50%      { transform: translateY(var(--float-amp, -10px)) rotate(calc(var(--rot, 0deg) + var(--drag-rot, 0deg))); }
}

/* Ground shadow: a soft oval pinned below each item, sized from the item's
   width only. It does NOT travel with the float — instead it runs a twin
   animation on the same clock (duration + delay), reacting to the bob:
   item at its lowest → small, denser; item at its highest → wider, fainter.
   Soft edges come from the radial gradient itself, so only transform and
   opacity animate (cheap, composited).

   --shadow-x re-centers the oval under the item's VISUAL bottom: the tilt
   (--rot) swings the bottom of the box sideways by ≈ (height/2)·sin(rot),
   which the box-centered oval can't know about. Each item's value below is
   that displacement, precomputed from its rendered size and angle.

   Dragging: the wrapper translates with the pointer, but the floor doesn't
   move — so the shadow counter-translates vertically (--shadow-y is the
   drag's -y) to stay pinned at the home ground line, while riding along
   horizontally. Lifting the item widens and fades the oval (--shadow-scale,
   --shadow-fade); pushing it below its floor line just fades it out. The
   vars feed the keyframes too, since the running animation owns
   transform/opacity and would otherwise override inline styles. */
.cutout::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(50% + var(--shadow-x, 0px));
  top: calc(100% + 12px);
  width: 64%;
  aspect-ratio: 5 / 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(17, 17, 20, 0.14), rgba(17, 17, 20, 0));
  transform: translate(-50%, var(--shadow-y, 0px)) scale(var(--shadow-scale, 1));
  opacity: var(--shadow-fade, 1);
  animation: cutout-shadow var(--float-dur, 6s) ease-in-out var(--float-delay, 0s) infinite;
  will-change: transform, opacity;
}
@keyframes cutout-shadow {
  0%, 100% {
    transform: translate(-50%, var(--shadow-y, 0px)) scale(var(--shadow-scale, 1));
    opacity: var(--shadow-fade, 1);
  }
  50% {
    transform: translate(-50%, var(--shadow-y, 0px))
               scale(calc(var(--shadow-scale, 1) * 1.22), calc(var(--shadow-scale, 1) * 1.06));
    opacity: calc(var(--shadow-fade, 1) * 0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cutout img { animation: none; transform: rotate(var(--rot, 0deg)); }
  .cutout::after { animation: none; }
}

/* The fox faces LEFT (head on the image's left edge), so unlike the other
   edge items it can't hang off-screen — that crops the face, not the tail.
   It sits just inside the viewport instead. */
.c-fox       { width: 300px; top: 4%;   left: 8px;    --rot: -8deg;  --shadow-x: 13px;  --float-dur: 7.2s; --float-delay: -1.8s; --float-amp: -12px; }
.c-robin     { width: 110px; top: 27%;  left: 6%;     --rot: 3deg;   --shadow-x: -4px;  --float-dur: 5.4s; --float-delay: -3.1s; --float-amp: -8px; }
.c-monstera  { width: 240px; bottom: -60px; left: 10%; --rot: 5deg;  --shadow-x: -9px;  --float-dur: 8.1s; --float-delay: -5.4s; --float-amp: -10px; }
.c-butterfly { width: 120px; bottom: -15px; left: 47%;  --rot: -7deg; --shadow-x: 7px;   --float-dur: 6.3s; --float-delay: -2.9s; --float-amp: -9px; }
.c-koi       { width: 220px; top: 48%;  left: -70px;  --rot: 14deg;  --shadow-x: -9px;  --float-dur: 6.6s; --float-delay: -4.2s; --float-amp: -11px; }
.c-succulent { width: 110px; top: 5px;   left: 36%;   --rot: -5deg;  --shadow-x: 6px;   --float-dur: 5.9s; --float-delay: -2.5s; --float-amp: -7px; }

.c-dress     { width: 150px; top: -50px; right: 12%;  --rot: 7deg;   --shadow-x: -22px; --float-dur: 7.8s; --float-delay: -6.3s; --float-amp: -10px; }
.c-sneaker   { width: 200px; top: 30%;  right: -60px; --rot: -12deg; --shadow-x: 19px;  --float-dur: 6.1s; --float-delay: -1.2s; --float-amp: -12px; }
.c-teapot    { width: 150px; bottom: 7%; right: 15%;  --rot: 4deg;   --shadow-x: -6px;  --float-dur: 5.2s; --float-delay: -3.8s; --float-amp: -8px; }
.c-jacket    { width: 180px; bottom: -50px; right: -40px; --rot: 11deg; --shadow-x: -17px; --float-dur: 7.5s; --float-delay: -2.1s; --float-amp: -9px; }
.c-mug       { width: 110px; top: 14%;  right: 1%;    --rot: -6deg;  --shadow-x: 5px;   --float-dur: 4.6s; --float-delay: -0.4s; --float-amp: -9px; }
.c-swan      { width: 180px; top: 56%;  right: -55px; --rot: 2deg;   --shadow-x: -2px;  --float-dur: 6.9s; --float-delay: -5.0s; --float-amp: -11px; }
.c-cone      { width: 105px; bottom: 24%; left: 14%;  --rot: 10deg;  --shadow-x: -6px;  --float-dur: 4.8s; --float-delay: -0.9s; --float-amp: -14px; }

/* ---------- Entrance choreography (home) ----------

   First visit: the page opens empty — just the icon and the name. The eyes
   glance around (scripted in JS), then the cutouts slide in from their
   nearest viewport edge, quick and staggered, and finally the rest of the
   text + CTA fade up. Driven by three classes on <html>:

     .intro              set before first paint (inline head script);
                         cutouts and secondary text are hidden
     .intro-cutouts      cutouts transition to their resting spots
     .intro-ui           tagline / blurb / CTA / fine-links fade up

   All three are removed when the show is over; the resting states below are
   identical to the defaults, so the cleanup is invisible. No JS (or reduced
   motion, or a repeat visit this session) means .intro is never added and
   the page renders complete, exactly as before. */

html.intro .cutout {
  opacity: 0;
  transform: translate(var(--enter-x, 0px), var(--enter-y, 0px));
  pointer-events: none; /* nothing to grab mid-flight */
  transition: none;
}
html.intro.intro-cutouts .cutout {
  opacity: 1;
  transform: translate(0, 0);
  /* Slight overshoot on the slide (same spring feel as the CTA button);
     opacity resolves faster so the item is solid while it settles. */
  transition: transform .6s cubic-bezier(0.3, 1.35, 0.55, 1) var(--enter-delay, 0s),
              opacity .35s ease-out var(--enter-delay, 0s);
}

/* Where each item flies in from: toward its nearest edge. The fade does the
   heavy lifting, so offsets just need to read as "from off the side". */
.c-fox       { --enter-x: -360px; --enter-delay: .05s; }
.c-robin     { --enter-x: -280px; --enter-delay: .30s; }
.c-monstera  { --enter-x: -180px; --enter-y: 240px;  --enter-delay: .12s; }
.c-butterfly { --enter-y: 260px;  --enter-delay: .36s; }
.c-koi       { --enter-x: -300px; --enter-delay: .22s; }
.c-succulent { --enter-y: -220px; --enter-delay: .18s; }
.c-dress     { --enter-x: 140px;  --enter-y: -220px; --enter-delay: .08s; }
.c-sneaker   { --enter-x: 320px;  --enter-delay: .28s; }
.c-teapot    { --enter-x: 120px;  --enter-y: 260px;  --enter-delay: .02s; }
.c-jacket    { --enter-x: 280px;  --enter-y: 200px;  --enter-delay: .20s; }
.c-mug       { --enter-x: 280px;  --enter-delay: .42s; }
.c-swan      { --enter-x: 320px;  --enter-delay: .14s; }
.c-cone      { --enter-x: -320px; --enter-delay: .38s; }

html.intro .hero .tagline,
html.intro .hero .blurb,
html.intro .hero .cta,
html.intro .hero .fine-links {
  opacity: 0;
  transform: translateY(10px);
}
html.intro.intro-ui .hero .tagline,
html.intro.intro-ui .hero .blurb,
html.intro.intro-ui .hero .cta,
html.intro.intro-ui .hero .fine-links {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease var(--ui-delay, 0s),
              transform .55s cubic-bezier(0.22, 1, 0.36, 1) var(--ui-delay, 0s);
}
html.intro-ui .hero .tagline    { --ui-delay: 0s; }
html.intro-ui .hero .blurb      { --ui-delay: .1s; }
html.intro-ui .hero .cta        { --ui-delay: .2s; }
html.intro-ui .hero .fine-links { --ui-delay: .32s; }

/* Narrow screens: fewer, smaller items pushed further out so nothing
   touches the hero text. */
@media (max-width: 760px) {
  .c-fox       { width: 190px; left: 4px; --shadow-x: 8px; }
  .c-dress     { width: 100px; right: 9%; --shadow-x: -15px; }
  .c-monstera  { width: 160px; bottom: -45px; --shadow-x: -6px; }
  .c-sneaker   { width: 120px; right: -45px; top: 24%; --shadow-x: 12px; }
  .c-teapot    { width: 110px; bottom: 4%; right: -20px; --rot: 8deg; --shadow-x: -9px; }
  .c-robin, .c-koi, .c-butterfly, .c-jacket, .c-mug, .c-swan, .c-succulent, .c-cone { display: none; }
}

/* ---------- Layout ---------- */

.site-header {
  padding: 24px;
  display: flex;
  justify-content: center;
}
.site-header a {
  display: inline-block;
  text-decoration: none;
  transition: transform .15s ease;
}
.site-header a:hover { transform: scale(1.03); }
.site-header .icon-frame {
  width: 56px;
  height: 56px;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

/* Home: hero centered in the viewport, above the cutout layer. */
main.home {
  justify-content: center;
  max-width: 560px;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: 24px;
  color: var(--muted);
  font-size: 14px;
}
.site-footer .inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--text); }
.site-footer nav {
  display: flex;
  gap: 24px;
}
.site-footer .maker {
  font-weight: 500;
}
@media (min-width: 600px) {
  .site-footer .inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ---------- Home ---------- */

/* Quieter than the original dark hero: the scattered cutouts carry the
   personality now, so the center reads like a calm caption. */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 0;
}
.hero .icon-frame {
  width: 88px;
  height: 88px;
}
/* The shadow lives on the img, NOT the frame: Safari clips a drop-shadow
   applied to a parent of an absolutely-positioned child to the parent's
   square border box (repainting on selection "fixes" it, which is the
   tell). translateZ(0) promotes the img to its own compositing layer so
   the shadow is rendered by the GPU path from the start. */
.hero .icon-frame img {
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .14));
  transform: translateZ(0);
}
.hero h1 {
  margin: 22px 0 6px;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.hero p.tagline {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}
.hero p.blurb {
  margin: 18px auto 0;
  max-width: 26em;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- Live icon eyes ---------- */

/* The two pill "eyes" are DOM elements drawn where the icon's pills live
   (geometry and colors sampled from the original PNG), so the pupils can
   track the pointer and blink. Without JS — or with reduced motion — the
   static overlay still looks identical to the real app icon. */
.hero .icon-frame .eye {
  position: absolute;
  top: 23%;
  width: 26%;
  height: 55%;
  border-radius: 999px;
}
.hero .icon-frame .eye-l { left: 19%; }
.hero .icon-frame .eye-r { left: 55%; }

/* .ball is the visible eye pill; it collapses as a whole (pupil included)
   on blink. The PNG underneath (app-icon-eyeless.png) has its pills erased,
   so the collapse reveals plain icon background — no ghost. translateZ(0) +
   will-change pin the ball to its own GPU layer so Safari doesn't leave
   stale pixels behind while the squash plays. */
.hero .icon-frame .ball {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(to bottom, #fdf5fe 0%, #f7dcfa 55%, #efb3f4 100%);
  overflow: hidden;
  transform-origin: 50% 55%;
  transform: translateZ(0);
  will-change: transform;
  transition: transform 0.07s ease-in;
}

/* .pupil is the JS-positioned carrier (inline transform); .core is the
   visible blob. The blink lives on .ball so the whole eye closes. */
.hero .icon-frame .pupil {
  position: absolute;
  left: 8%;
  bottom: 12%;
  width: 54%;
  height: 47%;
}
.hero .icon-frame .core {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: #300632;
}
/* The comma-shaped shine bite in the pupil's top-right corner. */
.hero .icon-frame .core::after {
  content: "";
  position: absolute;
  top: -10%;
  right: -16%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f8defa;
}
.hero .icon-frame.blinking .ball {
  transform: scaleY(0.06) translateZ(0);
  transition-duration: 0.06s;
}

/* Replaces the old footer on the home page: a row of soft pills. The
   "Replay intro" control is a <button> only for semantics (it acts rather
   than navigates) — visually it's the same pill as its sibling links. */
.fine-links {
  margin: 36px 0 0;
  font-size: 13px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.fine-links a,
.fine-links button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 0;
  margin: 0;
  padding: 6px 13px;
  border-radius: 999px;
  font: inherit;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.fine-links a:hover,
.fine-links button:hover {
  background: var(--line);
  color: var(--text);
}

/* The replay arrow winds up one full turn (counterclockwise, matching the
   glyph) while you hover — a little preview of what the button does. */
.fine-links button svg {
  transition: transform .5s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.fine-links button:hover svg {
  transform: rotate(-360deg);
}
@media (prefers-reduced-motion: reduce) {
  .fine-links button svg { transition: none; }
}

/* ---------- CTA ---------- */

.cta {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--bg);
  text-decoration: none;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  padding: 13px 26px;
  border-radius: 999px;
  /* Tactile feel: a springy overshoot on hover (the "pop"), pressed-down on
     click. translate3d + backface-visibility promote the button to its own
     GPU layer so the text doesn't shimmer during the transition. */
  transform: translate3d(0, 0, 0) scale(1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform .26s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}
.btn-primary:hover {
  transform: translate3d(0, -1px, 0) scale(1.04);
}
.btn-primary:active {
  transform: translate3d(0, 0, 0) scale(0.965);
  /* Snap down fast on press, no overshoot — feels like a real button. */
  transition-duration: .07s;
  transition-timing-function: ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary { transition-duration: .12s; transition-timing-function: ease; }
  .btn-primary:hover { transform: translate3d(0, 0, 0) scale(1.02); }
}
.btn-store img { height: 52px; width: auto; }

/* ---------- Prose (privacy / legal) ---------- */

.prose h1 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}
.prose .meta {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 32px;
}
.prose h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 32px 0 10px;
  letter-spacing: -0.01em;
}
.prose p, .prose ul {
  margin: 0 0 14px;
}
.prose ul {
  padding-left: 22px;
}
.prose li { margin-bottom: 6px; }
.prose strong { font-weight: 600; }
.prose code {
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.9em;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---------- Press kit ---------- */

.press-oneliner {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.4;
  margin: 0 0 28px;
}

.press-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  margin: 0 0 8px;
}
.press-toc a {
  color: var(--muted);
  text-decoration: none;
  padding: 7px 14px;
  background: var(--surface);
  border-radius: 999px;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}
.press-toc a:hover { color: var(--text); background: var(--line); }

.press-angles { list-style: none; padding: 0; }
.press-angles li {
  margin-bottom: 16px;
  padding: 16px 18px;
  background: var(--surface);
  border-radius: 14px;
}
.press-angles strong { display: block; margin-bottom: 4px; }

.press-steps { padding-left: 22px; }
.press-steps li { margin-bottom: 8px; }

.press-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  margin: 0;
}
.press-facts dt {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.press-facts dd { margin: 2px 0 0; }
@media (max-width: 560px) {
  .press-facts { grid-template-columns: 1fr; }
}

.press-quote {
  margin: 0 0 18px;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--line);
}
.press-quote p { margin: 0 0 6px; font-size: 18px; }
.press-quote cite { color: var(--muted); font-style: normal; font-size: 14px; }

.press-icon { border-radius: 22px; }

.press-shots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.press-shots img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line);
}
@media (max-width: 560px) {
  .press-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.press-cutouts {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  align-items: end;
}
.press-cutouts img { width: 100%; }
@media (max-width: 560px) {
  .press-cutouts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.press-founder {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
/* The avatar is wrapped in a link to the full-res image; the anchor is the
   flex item, so it must be the thing that refuses to shrink. */
.press-founder > a { flex-shrink: 0; }
.press-avatar {
  border-radius: 999px;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  object-fit: cover;
}
@media (max-width: 560px) {
  .press-founder { flex-direction: column; }
}

/* ---------- Support ---------- */

.support-card {
  text-align: center;
  padding: 32px 0;
}
.support-card h1 {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
}
.support-card p.lead {
  font-size: 19px;
  color: var(--muted);
  max-width: 520px;
  margin: 0 auto 32px;
}
.support-card .btn {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  text-decoration: none;
  font-weight: 600;
  font-size: 17px;
  padding: 14px 28px;
  border-radius: 999px;
  transition: opacity .15s ease, transform .04s ease;
}
.support-card .btn:hover { opacity: .88; }
.support-card .btn:active { transform: translateY(1px); }
.support-card .fine {
  margin-top: 28px;
  font-size: 13px;
  color: var(--muted);
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}