/* ==========================================================================
   SmartWot — custom styles
   Tailwind handles layout/utilities; this file owns the design system:
   tints, gradients, cards, motion. No build step required.
   ========================================================================== */

:root {
  --sw-ring: 226 232 240;          /* slate-200 */
  --sw-surface: 255 255 255;
  --sw-muted: 100 116 139;         /* slate-500 */
  --sw-grad: linear-gradient(135deg, #7325e8 0%, #9333ea 50%, #d946ef 100%);
}

.dark {
  --sw-ring: 255 255 255;
  --sw-surface: 20 16 36;
  --sw-muted: 148 163 184;
  --sw-grad: linear-gradient(135deg, #8247f5 0%, #a855f7 50%, #e879f9 100%);
}

* { -webkit-tap-highlight-color: transparent; }

body { text-rendering: optimizeLegibility; overflow-x: hidden; }

::selection { background: #7325e8; color: #fff; }

/* Scrollbar ---------------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(148 163 184 / .35); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgb(148 163 184 / .6); background-clip: content-box; }

/* Accessibility ------------------------------------------------------------ */
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  border-radius: .75rem; background: #7325e8; color: #fff;
  padding: .6rem 1rem; font-weight: 700; font-size: .875rem;
  transition: top .2s ease;
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 2px solid #8247f5; outline-offset: 3px; border-radius: .6rem; }

/* ==========================================================================
   BRAND BITS
   ========================================================================== */
.logo-mark {
  display: grid; place-items: center; flex: none;
  height: 2.25rem; width: 2.25rem; border-radius: .85rem;
  background: var(--sw-grad);
  box-shadow: 0 6px 18px -6px rgb(115 37 232 / .65);
}

.logo-text { font-size: 1.35rem; }

.gradient-text {
  background: linear-gradient(100deg, #7325e8 0%, #a855f7 42%, #ec4899 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.dark .gradient-text {
  background: linear-gradient(100deg, #a78bfa 0%, #c084fc 42%, #f472b6 100%);
  -webkit-background-clip: text; background-clip: text;
}

.eyebrow {
  font-size: .78rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #7325e8;
}
.dark .eyebrow { color: #c4b5fd; }

.inline-link { font-weight: 600; color: #6218c9; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px; }
.inline-link:hover { color: #441685; }
.dark .inline-link { color: #c4b5fd; }
.dark .inline-link:hover { color: #e9d5ff; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn-download {
  position: relative; display: inline-flex; align-items: center; gap: .5rem;
  border-radius: .85rem; padding: .65rem 1.05rem;
  font-size: .875rem; font-weight: 700; color: #fff;
  background: var(--sw-grad); background-size: 160% 160%;
  box-shadow: 0 8px 22px -8px rgb(115 37 232 / .75);
  transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, background-position .5s ease;
}
.btn-download:hover { transform: translateY(-1.5px); background-position: 100% 0; box-shadow: 0 12px 28px -8px rgb(115 37 232 / .85); }
.btn-download:active { transform: translateY(0); }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  border-radius: 1rem; padding: .95rem 1.6rem;
  font-size: 1rem; font-weight: 700; color: #fff;
  background: var(--sw-grad); background-size: 160% 160%;
  box-shadow: 0 12px 30px -10px rgb(115 37 232 / .7);
  transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, background-position .5s ease;
}
.btn-primary:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 18px 38px -12px rgb(115 37 232 / .8); }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 1rem; border: 1px solid rgb(15 23 42 / .1);
  background: rgb(255 255 255 / .8); padding: .95rem 1.5rem;
  font-size: 1rem; font-weight: 700; color: rgb(30 41 59);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgb(16 12 40 / .04);
  transition: all .2s cubic-bezier(.16,1,.3,1);
}
.btn-secondary:hover { transform: translateY(-2px); border-color: rgb(130 71 245 / .5); color: #6218c9; box-shadow: 0 12px 26px -14px rgb(76 29 149 / .5); }
.dark .btn-secondary { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .12); color: #fff; }
.dark .btn-secondary:hover { background: rgb(255 255 255 / .11); color: #e9d5ff; }

.pill-meta {
  display: inline-flex; align-items: center;
  border-radius: 999px; border: 1px solid rgb(15 23 42 / .08);
  background: rgb(255 255 255 / .75); padding: .3rem .8rem;
  font-size: .78rem; font-weight: 600; color: rgb(71 85 105);
}
.dark .pill-meta { background: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .1); color: rgb(203 213 225); }

/* ==========================================================================
   HEADER
   ========================================================================== */
#nav-shell.is-stuck {
  background: rgb(255 255 255 / .8);
  border-color: rgb(15 23 42 / .07);
  box-shadow: 0 1px 2px rgb(16 12 40 / .04), 0 12px 32px -18px rgb(16 12 40 / .35);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
}
.dark #nav-shell.is-stuck {
  background: rgb(18 13 34 / .74);
  border-color: rgb(255 255 255 / .08);
}

.nav-link {
  border-radius: .7rem; padding: .5rem .8rem;
  font-size: .9rem; font-weight: 600; color: rgb(71 85 105);
  transition: color .18s ease, background-color .18s ease;
}
.nav-link:hover { color: #0f172a; background: rgb(15 23 42 / .05); }
.dark .nav-link { color: rgb(203 213 225); }
.dark .nav-link:hover { color: #fff; background: rgb(255 255 255 / .07); }

.icon-btn {
  display: grid; place-items: center; flex: none;
  height: 2.5rem; width: 2.5rem; border-radius: .75rem;
  color: rgb(51 65 85); background: rgb(15 23 42 / .04);
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.icon-btn:hover { background: rgb(15 23 42 / .09); transform: translateY(-1px); }
.dark .icon-btn { color: rgb(226 232 240); background: rgb(255 255 255 / .07); }
.dark .icon-btn:hover { background: rgb(255 255 255 / .13); }

.mobile-link {
  display: block; border-radius: .75rem; padding: .75rem .9rem;
  font-size: .95rem; font-weight: 600; color: rgb(51 65 85);
}
.mobile-link:hover { background: rgb(15 23 42 / .05); }
.dark .mobile-link { color: rgb(226 232 240); }
.dark .mobile-link:hover { background: rgb(255 255 255 / .07); }

#mobile-menu { animation: dropIn .22s cubic-bezier(.16,1,.3,1); margin-top: .5rem; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   HERO BACKDROP
   ========================================================================== */
.hero-aurora {
  position: absolute; inset: -20% -10% auto -10%; height: 70rem;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(38rem 26rem at 14% 10%, rgb(167 139 250 / .42), transparent 62%),
    radial-gradient(32rem 22rem at 78% 4%,  rgb(244 114 182 / .34), transparent 60%),
    radial-gradient(30rem 22rem at 92% 46%, rgb(56 189 248 / .22), transparent 62%),
    radial-gradient(40rem 26rem at 45% 44%, rgb(129 140 248 / .24), transparent 65%);
  filter: blur(6px);
}
.dark .hero-aurora {
  background:
    radial-gradient(38rem 26rem at 14% 10%, rgb(124 58 237 / .5), transparent 62%),
    radial-gradient(32rem 22rem at 78% 4%,  rgb(219 39 119 / .3), transparent 60%),
    radial-gradient(30rem 22rem at 92% 46%, rgb(14 165 233 / .22), transparent 62%),
    radial-gradient(40rem 26rem at 45% 44%, rgb(59 130 246 / .22), transparent 65%);
}

.hero-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgb(15 23 42 / .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(15 23 42 / .045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(75% 60% at 40% 30%, #000 40%, transparent 100%);
  mask-image: radial-gradient(75% 60% at 40% 30%, #000 40%, transparent 100%);
}
.dark .hero-grid {
  background-image:
    linear-gradient(to right, rgb(255 255 255 / .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / .05) 1px, transparent 1px);
}

/* Search ------------------------------------------------------------------- */
.search-shell {
  display: flex; align-items: center; gap: .75rem;
  border-radius: 1.1rem; border: 1px solid rgb(15 23 42 / .09);
  background: rgb(255 255 255 / .92);
  padding: .95rem 1.1rem;
  box-shadow: 0 1px 2px rgb(16 12 40 / .04), 0 18px 40px -22px rgb(76 29 149 / .45);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.search-shell:focus-within {
  border-color: rgb(130 71 245 / .6);
  box-shadow: 0 0 0 4px rgb(130 71 245 / .13), 0 20px 44px -22px rgb(76 29 149 / .55);
  transform: translateY(-1px);
}
.dark .search-shell { background: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .12); }

input[type="search"]::-webkit-search-cancel-button { display: none; }

.quick-tag {
  border-radius: 999px; border: 1px solid rgb(15 23 42 / .08);
  background: rgb(255 255 255 / .7); padding: .3rem .75rem;
  font-size: .8rem; font-weight: 600; color: rgb(71 85 105);
  transition: all .18s ease;
}
.quick-tag:hover { border-color: rgb(130 71 245 / .5); color: #6218c9; background: #f4f2ff; }
.dark .quick-tag { background: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .1); color: rgb(203 213 225); }
.dark .quick-tag:hover { background: rgb(130 71 245 / .18); color: #ddd6fe; border-color: rgb(167 139 250 / .5); }

/* Stats -------------------------------------------------------------------- */
.stat {
  border-radius: 1rem; border: 1px solid rgb(15 23 42 / .07);
  background: rgb(255 255 255 / .72); padding: .9rem 1rem;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 2px rgb(16 12 40 / .03);
}
.dark .stat { background: rgb(255 255 255 / .04); border-color: rgb(255 255 255 / .09); }
.stat dt { font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--sw-muted)); }
.stat dd { margin-top: .15rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }

/* ==========================================================================
   PHONE MOCKUP
   ========================================================================== */
.phone-stage { position: relative; display: flex; justify-content: center; padding: .5rem 0; }

.phone-glow {
  position: absolute; inset: 8% 12%; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle, rgb(147 51 234 / .38), transparent 68%);
  filter: blur(46px);
}

.phone {
  position: relative; z-index: 1;
  width: 100%; max-width: 19rem;
  aspect-ratio: 9 / 19;
  border-radius: 2.6rem;
  padding: .55rem;
  background: linear-gradient(160deg, #2b2440, #17121f 55%, #241d33);
  box-shadow:
    0 0 0 1.5px rgb(255 255 255 / .1) inset,
    0 34px 70px -26px rgb(46 16 101 / .6),
    0 12px 24px -12px rgb(16 12 40 / .4);
  animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.phone-notch {
  position: absolute; left: 50%; top: .95rem; z-index: 3;
  height: .38rem; width: 3.2rem; transform: translateX(-50%);
  border-radius: 999px; background: rgb(255 255 255 / .22);
}

.phone-screen {
  height: 100%; width: 100%; overflow: hidden;
  border-radius: 2.15rem; padding: 1.4rem .8rem .8rem;
  background: linear-gradient(168deg, #fdf0fb 0%, #f4e7ff 42%, #fde6f3 100%);
}

.phone-chip {
  border-radius: 999px; background: rgb(255 255 255 / .75);
  padding: .18rem .55rem; font-size: .55rem; font-weight: 700; color: #6b5b8a;
  box-shadow: 0 1px 2px rgb(16 12 40 / .05);
}
.phone-chip.is-on { background: #7325e8; color: #fff; box-shadow: 0 3px 8px -2px rgb(115 37 232 / .6); }

.phone-tool {
  border-radius: .7rem; background: rgb(255 255 255 / .82);
  padding: .45rem .5rem; box-shadow: 0 1px 3px rgb(16 12 40 / .07);
}
.phone-tool .pt-icon {
  display: grid; place-items: center; height: 1.15rem; width: 1.15rem;
  border-radius: .35rem; background: var(--tint-bg); color: var(--tint-fg);
}
.phone-tool .pt-icon svg { height: .7rem; width: .7rem; }
.phone-tool .pt-name {
  margin-top: .3rem; font-size: .52rem; font-weight: 700; color: #2b2340;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.phone-tool .pt-desc {
  font-size: .45rem; color: #7b7091;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.float-badge {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: .6rem;
  border-radius: 1rem; border: 1px solid rgb(15 23 42 / .07);
  background: rgb(255 255 255 / .92); padding: .6rem .8rem;
  box-shadow: 0 12px 28px -14px rgb(16 12 40 / .45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: floaty 7s ease-in-out infinite;
}
.dark .float-badge { background: rgb(26 20 44 / .92); border-color: rgb(255 255 255 / .1); }
/* Anchored to the stage edges so they overlap only the device bezel, never the
   simulated app's header. */
.float-badge--tl { left: -1.5rem; top: 44%; animation-delay: -1.2s; }
.float-badge--br { right: -1.25rem; bottom: 14%; animation-delay: -3.5s; }

@media (max-width: 460px) {
  .float-badge { display: none; }
}

/* ==========================================================================
   CATEGORY FILTERS
   ========================================================================== */
.filter-row { scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.filter-row::-webkit-scrollbar { display: none; }

/* Swipeable on small screens; wraps once there is room, so no chip is clipped. */
@media (min-width: 1024px) {
  .filter-row { flex-wrap: wrap; overflow-x: visible; }
}

.chip {
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  border-radius: 999px; border: 1px solid rgb(15 23 42 / .08);
  background: #fff; padding: .6rem 1rem;
  font-size: .875rem; font-weight: 600; color: rgb(51 65 85);
  box-shadow: 0 1px 2px rgb(16 12 40 / .04);
  transition: all .18s ease;
}
.chip:hover { border-color: rgb(130 71 245 / .45); color: #6218c9; transform: translateY(-1px); }
.dark .chip { background: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .1); color: rgb(203 213 225); }
.dark .chip:hover { color: #e9d5ff; border-color: rgb(167 139 250 / .45); }

.chip[aria-selected="true"] {
  background: var(--sw-grad);
  border-color: transparent; color: #fff;
  box-shadow: 0 8px 20px -8px rgb(115 37 232 / .7);
}
.chip[aria-selected="true"] .chip-count { background: rgb(255 255 255 / .25); color: #fff; }

.chip-count {
  border-radius: 999px; background: rgb(15 23 42 / .06);
  padding: .05rem .4rem; font-size: .7rem; font-weight: 700; color: rgb(71 85 105);
}
.dark .chip-count { background: rgb(255 255 255 / .1); color: rgb(203 213 225); }

/* ==========================================================================
   TOOL CARDS
   ========================================================================== */
.tool-card {
  position: relative; display: flex; flex-direction: column;
  border-radius: 1.15rem; border: 1px solid rgb(15 23 42 / .07);
  background: #fff; padding: .95rem;
  text-align: left; overflow: hidden;
  box-shadow: 0 1px 2px rgb(16 12 40 / .04);
  transition: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s ease, border-color .22s ease;
  animation: cardIn .4s cubic-bezier(.16,1,.3,1) both;
}
.dark .tool-card { background: rgb(255 255 255 / .035); border-color: rgb(255 255 255 / .08); }

.tool-card::before {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(120% 90% at 50% 0%, var(--tint-soft), transparent 70%);
  transition: opacity .25s ease; pointer-events: none;
}
.tool-card:hover { transform: translateY(-4px); border-color: var(--tint-line); box-shadow: 0 2px 6px rgb(16 12 40 / .05), 0 22px 40px -24px var(--tint-shadow); }
.tool-card:hover::before { opacity: 1; }

@keyframes cardIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

.tool-icon {
  display: grid; place-items: center;
  height: 2.75rem; width: 2.75rem; border-radius: .9rem;
  background: var(--tint-bg); color: var(--tint-fg);
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.tool-card:hover .tool-icon { transform: scale(1.07) rotate(-3deg); }
.tool-icon svg { height: 1.35rem; width: 1.35rem; }

.tool-name {
  margin-top: .7rem; font-size: .95rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.tool-desc {
  margin-top: .25rem; font-size: .8rem; line-height: 1.45; color: rgb(var(--sw-muted));
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.card-badges { display: flex; align-items: center; gap: .3rem; }

/* Whole-card click target.
   .card-hit stretches across the entire tile so a click anywhere — including
   the icon and the badge row — activates the link or the modal. Only the star
   sits above it, so favouriting still works independently.
   An earlier version raised .card-top instead, which left the top third of
   every card dead: clicking the icon did nothing, and people read that as the
   card being slow rather than unclickable. */
.tool-card { cursor: pointer; }
.tool-card > .card-body {
  position: static; display: block; width: 100%; text-align: left;
  color: inherit; font: inherit;
}
.card-hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.fav-btn { position: relative; z-index: 3; }

.badge-hot {
  display: inline-flex; align-items: center; gap: .2rem;
  border-radius: 999px; background: var(--tint-bg); color: var(--tint-fg);
  padding: .12rem .45rem; font-size: .62rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}

.badge-live {
  display: inline-flex; align-items: center; gap: .2rem;
  border-radius: 999px; background: rgb(5 150 105 / .14); color: #047857;
  padding: .12rem .45rem; font-size: .62rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}
.dark .badge-live { background: rgb(16 185 129 / .18); color: #6ee7b7; }

.fav-btn {
  display: grid; place-items: center; height: 1.75rem; width: 1.75rem;
  border-radius: .55rem; color: rgb(148 163 184);
  transition: color .18s ease, background-color .18s ease, transform .18s ease;
}
.fav-btn:hover { background: rgb(15 23 42 / .05); color: #f59e0b; transform: scale(1.12); }
.dark .fav-btn:hover { background: rgb(255 255 255 / .1); }
.fav-btn svg { height: 1rem; width: 1rem; }
.fav-btn.is-fav { color: #f59e0b; }
.fav-btn.is-fav svg { fill: #f59e0b; }

mark.hl { background: rgb(250 204 21 / .38); color: inherit; border-radius: .2rem; padding: 0 .1rem; }
.dark mark.hl { background: rgb(250 204 21 / .28); color: #fde68a; }

/* Tints -------------------------------------------------------------------- */
.tint-violet  { --tint-bg:#f1ecfe; --tint-fg:#7c3aed; --tint-line:rgb(124 58 237/.4); --tint-shadow:rgb(124 58 237/.5); --tint-soft:rgb(124 58 237/.07); }
.tint-blue    { --tint-bg:#e8efff; --tint-fg:#2563eb; --tint-line:rgb(37 99 235/.4);  --tint-shadow:rgb(37 99 235/.5);  --tint-soft:rgb(37 99 235/.07); }
.tint-sky     { --tint-bg:#e2f4fd; --tint-fg:#0284c7; --tint-line:rgb(2 132 199/.4);  --tint-shadow:rgb(2 132 199/.5);  --tint-soft:rgb(2 132 199/.07); }
.tint-teal    { --tint-bg:#dcf6f1; --tint-fg:#0d9488; --tint-line:rgb(13 148 136/.4); --tint-shadow:rgb(13 148 136/.5); --tint-soft:rgb(13 148 136/.07); }
.tint-emerald { --tint-bg:#dcf7e6; --tint-fg:#059669; --tint-line:rgb(5 150 105/.4);  --tint-shadow:rgb(5 150 105/.5);  --tint-soft:rgb(5 150 105/.07); }
.tint-amber   { --tint-bg:#fdf0d5; --tint-fg:#c2810b; --tint-line:rgb(217 119 6/.4);  --tint-shadow:rgb(217 119 6/.5);  --tint-soft:rgb(217 119 6/.07); }
.tint-orange  { --tint-bg:#feeadb; --tint-fg:#ea580c; --tint-line:rgb(234 88 12/.4);  --tint-shadow:rgb(234 88 12/.5);  --tint-soft:rgb(234 88 12/.07); }
.tint-rose    { --tint-bg:#fee7ec; --tint-fg:#e11d48; --tint-line:rgb(225 29 72/.4);  --tint-shadow:rgb(225 29 72/.5);  --tint-soft:rgb(225 29 72/.07); }
.tint-fuchsia { --tint-bg:#fbe8fb; --tint-fg:#c026d3; --tint-line:rgb(192 38 211/.4); --tint-shadow:rgb(192 38 211/.5); --tint-soft:rgb(192 38 211/.07); }
.tint-indigo  { --tint-bg:#e8eafe; --tint-fg:#4f46e5; --tint-line:rgb(79 70 229/.4);  --tint-shadow:rgb(79 70 229/.5);  --tint-soft:rgb(79 70 229/.07); }
.tint-slate   { --tint-bg:#eef1f6; --tint-fg:#475569; --tint-line:rgb(71 85 105/.4);  --tint-shadow:rgb(71 85 105/.5);  --tint-soft:rgb(71 85 105/.07); }
.tint-lime    { --tint-bg:#e8f7d5; --tint-fg:#4d7c0f; --tint-line:rgb(77 124 15/.4);  --tint-shadow:rgb(77 124 15/.5);  --tint-soft:rgb(77 124 15/.07); }

.dark .tint-violet  { --tint-bg:rgb(124 58 237/.2); --tint-fg:#c4b5fd; }
.dark .tint-blue    { --tint-bg:rgb(37 99 235/.2);  --tint-fg:#93c5fd; }
.dark .tint-sky     { --tint-bg:rgb(2 132 199/.2);  --tint-fg:#7dd3fc; }
.dark .tint-teal    { --tint-bg:rgb(13 148 136/.2); --tint-fg:#5eead4; }
.dark .tint-emerald { --tint-bg:rgb(5 150 105/.2);  --tint-fg:#6ee7b7; }
.dark .tint-amber   { --tint-bg:rgb(217 119 6/.2);  --tint-fg:#fcd34d; }
.dark .tint-orange  { --tint-bg:rgb(234 88 12/.2);  --tint-fg:#fdba74; }
.dark .tint-rose    { --tint-bg:rgb(225 29 72/.2);  --tint-fg:#fda4af; }
.dark .tint-fuchsia { --tint-bg:rgb(192 38 211/.2); --tint-fg:#f0abfc; }
.dark .tint-indigo  { --tint-bg:rgb(79 70 229/.2);  --tint-fg:#a5b4fc; }
.dark .tint-slate   { --tint-bg:rgb(148 163 184/.2);--tint-fg:#cbd5e1; }
.dark .tint-lime    { --tint-bg:rgb(101 163 13/.2); --tint-fg:#bef264; }

/* Phone mockup mini-cards keep the light tints even in dark mode, because the
   simulated app screen has its own light background. */
.dark .phone-tool .tint-violet  { --tint-bg:#f1ecfe; --tint-fg:#7c3aed; }
.dark .phone-tool .tint-teal    { --tint-bg:#dcf6f1; --tint-fg:#0d9488; }
.dark .phone-tool .tint-rose    { --tint-bg:#fee7ec; --tint-fg:#e11d48; }
.dark .phone-tool .tint-indigo  { --tint-bg:#e8eafe; --tint-fg:#4f46e5; }
.dark .phone-tool .tint-blue    { --tint-bg:#e8efff; --tint-fg:#2563eb; }
.dark .phone-tool .tint-fuchsia { --tint-bg:#fbe8fb; --tint-fg:#c026d3; }

/* ==========================================================================
   FEATURE / STEP CARDS
   ========================================================================== */
.feature-card {
  position: relative; overflow: hidden;
  border-radius: 1.35rem; border: 1px solid rgb(15 23 42 / .07);
  background: #fff; padding: 1.35rem;
  box-shadow: 0 1px 2px rgb(16 12 40 / .04);
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.feature-card::before {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(110% 80% at 0% 0%, var(--tint-soft), transparent 65%);
  transition: opacity .25s ease; pointer-events: none;
}
.feature-card:hover { transform: translateY(-4px); border-color: var(--tint-line); box-shadow: 0 2px 6px rgb(16 12 40 / .05), 0 26px 46px -26px var(--tint-shadow); }
.feature-card:hover::before { opacity: 1; }
.dark .feature-card { background: rgb(255 255 255 / .035); border-color: rgb(255 255 255 / .08); }
.feature-card h3 { position: relative; margin-top: .9rem; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.feature-card p { position: relative; margin-top: .5rem; font-size: .92rem; line-height: 1.6; color: rgb(var(--sw-muted)); }

.feature-icon {
  position: relative; display: grid; place-items: center; height: 3rem; width: 3rem;
  border-radius: 1rem; background: var(--tint-bg); color: var(--tint-fg);
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.feature-card:hover .feature-icon { transform: scale(1.06) rotate(-3deg); }
.feature-icon svg { height: 1.5rem; width: 1.5rem; }

.step-card {
  position: relative; border-radius: 1.35rem;
  border: 1px solid rgb(15 23 42 / .07); background: #fff; padding: 1.45rem;
  box-shadow: 0 1px 2px rgb(16 12 40 / .04);
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;
}
.step-card:hover { transform: translateY(-3px); box-shadow: 0 2px 6px rgb(16 12 40 / .05), 0 24px 44px -26px rgb(76 29 149 / .4); }
.dark .step-card { background: rgb(255 255 255 / .035); border-color: rgb(255 255 255 / .08); }
.step-num {
  display: inline-block; font-size: 2.25rem; font-weight: 800; line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(140deg, #7325e8, #ec4899);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.step-card h3 { margin-top: .85rem; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.step-card p { margin-top: .5rem; font-size: .92rem; line-height: 1.6; color: rgb(var(--sw-muted)); }

/* ==========================================================================
   DOWNLOAD SECTION
   ========================================================================== */
.download-card {
  position: relative; display: flex; flex-direction: column;
  border-radius: 1.5rem; border: 1px solid rgb(15 23 42 / .08);
  background: #fff; padding: 1.5rem;
  box-shadow: 0 1px 2px rgb(16 12 40 / .04);
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.dark .download-card { background: rgb(255 255 255 / .035); border-color: rgb(255 255 255 / .09); }
.download-card:hover { transform: translateY(-4px); box-shadow: 0 2px 6px rgb(16 12 40 / .05), 0 26px 50px -28px rgb(76 29 149 / .45); }

.download-card.is-primary {
  border-color: rgb(130 71 245 / .35);
  box-shadow: 0 1px 2px rgb(16 12 40 / .04), 0 20px 44px -26px rgb(115 37 232 / .55);
}
/* The label lives in the HTML (data-badge) rather than here, so two cards can
   carry different badges. Keyed on the attribute, not on .is-primary, so a
   card without a label simply has no badge instead of an empty pill. */
.download-card[data-badge]::after {
  content: attr(data-badge); position: absolute; right: 1.25rem; top: 1.4rem;
  border-radius: 999px; background: var(--sw-grad); color: #fff;
  padding: .18rem .6rem; font-size: .62rem; font-weight: 800;
  letter-spacing: .05em;
  /* No text-transform: uppercase here. It would render "iOS" as "IOS", which
     is not how Apple writes it. The labels are written in their final casing
     in the HTML instead. */
  box-shadow: 0 6px 14px -6px rgb(115 37 232 / .7);
}

.download-icon {
  display: grid; place-items: center; height: 3.25rem; width: 3.25rem;
  border-radius: 1.1rem; background: var(--tint-bg); color: var(--tint-fg);
}
.download-icon svg { height: 1.6rem; width: 1.6rem; }

.download-card h3 { margin-top: 1rem; font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; }
.download-card p  { margin-top: .5rem; font-size: .92rem; line-height: 1.6; color: rgb(var(--sw-muted)); }

.download-btn {
  /* auto, not a fixed margin: the cards have different amounts of body copy,
     so pinning the button to the bottom is what actually lines them up across
     the row rather than each one floating under its own paragraph. */
  margin-top: auto;
  padding-top: 1.15rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  width: 100%; border-radius: .95rem; padding: .85rem 1.2rem;
  font-size: .95rem; font-weight: 700;
  /* A label that wraps made the App Store button a line taller than Google
     Play's. min-height fixes the height for every button, and nowrap stops a
     longer label from ever reintroducing the problem. */
  min-height: 3.05rem;
  white-space: nowrap;
  transition: all .2s cubic-bezier(.16,1,.3,1);
}

/* The paragraph above the button stretches instead, so cards stay equal height
   without the text being vertically centred against a ragged edge. */
.download-card > p:not(.download-note) { flex: 1 1 auto; }

/* Long store names on a narrow phone: shrink a step rather than wrap. */
@media (max-width: 380px) {
  .download-btn { font-size: .875rem; padding-left: .8rem; padding-right: .8rem; }
}
.download-btn--solid { color: #fff; background: var(--sw-grad); background-size: 160% 160%; box-shadow: 0 10px 26px -10px rgb(115 37 232 / .7); }
.download-btn--solid:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 16px 32px -12px rgb(115 37 232 / .8); }
.download-btn--ghost { border: 1px solid rgb(15 23 42 / .1); color: rgb(30 41 59); background: rgb(15 23 42 / .02); }
.download-btn--ghost:hover { border-color: rgb(130 71 245 / .45); color: #6218c9; background: #f8f6ff; }
.dark .download-btn--ghost { border-color: rgb(255 255 255 / .12); color: #e2e8f0; background: rgb(255 255 255 / .04); }
.dark .download-btn--ghost:hover { background: rgb(255 255 255 / .09); color: #e9d5ff; }

.download-note { margin-top: .75rem !important; text-align: center; font-size: .78rem !important; color: rgb(148 163 184) !important; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { padding: 1rem 1.4rem; }
.faq summary {
  cursor: pointer; list-style: none; position: relative;
  padding-right: 2rem; font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0; top: .35rem;
  height: .55rem; width: .55rem;
  border-right: 2.2px solid currentColor; border-bottom: 2.2px solid currentColor;
  color: rgb(148 163 184);
  transform: rotate(45deg); transition: transform .22s ease;
}
.faq[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq p { margin-top: .7rem; font-size: .93rem; line-height: 1.65; color: rgb(var(--sw-muted)); animation: fadeUp .25s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   CTA + FOOTER
   ========================================================================== */
.cta-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(30rem 18rem at 12% 0%, rgb(255 255 255 / .28), transparent 60%),
    radial-gradient(26rem 16rem at 88% 100%, rgb(255 255 255 / .18), transparent 60%);
}

.footer-head { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgb(100 116 139); }
.dark .footer-head { color: rgb(148 163 184); }
.footer-list { margin-top: .9rem; display: grid; gap: .6rem; font-size: .9rem; }
.footer-list a { color: rgb(71 85 105); transition: color .16s ease; }
.footer-list a:hover { color: #7325e8; }
.dark .footer-list a { color: rgb(203 213 225); }
.dark .footer-list a:hover { color: #c4b5fd; }

.social {
  display: grid; place-items: center; height: 2.25rem; width: 2.25rem;
  border-radius: .7rem; color: rgb(71 85 105); background: rgb(15 23 42 / .05);
  transition: all .18s ease;
}
.social:hover { background: #7325e8; color: #fff; transform: translateY(-2px); }

/* Ownership line under the copyright — deliberately quieter than it, so the
   legal notice is present without competing with the brand. */
.legal-owner {
  margin-top: .2rem;
  font-size: .8125rem;
  color: rgb(100 116 139);
}
.dark .legal-owner { color: rgb(148 163 184); }
.dark .social { background: rgb(255 255 255 / .07); color: rgb(226 232 240); }

/* ==========================================================================
   MODAL
   ========================================================================== */
#modal.is-open { display: flex; }
#modal.is-open #modal-backdrop { animation: fade .2s ease; }
#modal.is-open #modal-panel { animation: panelIn .3s cubic-bezier(.16,1,.3,1); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes panelIn { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }

.note {
  border-radius: .9rem; border-left: 3px solid #7325e8;
  background: rgb(115 37 232 / .06); padding: .75rem 1rem;
  font-size: .87rem; line-height: 1.6;
}
.dark .note { background: rgb(167 139 250 / .12); border-left-color: #a78bfa; }

.modal-tag {
  border-radius: 999px; background: rgb(15 23 42 / .05);
  padding: .25rem .7rem; font-size: .75rem; font-weight: 700; color: rgb(71 85 105);
}
.dark .modal-tag { background: rgb(255 255 255 / .08); color: rgb(203 213 225); }

.modal-point { display: flex; gap: .6rem; align-items: flex-start; }
.modal-point svg { height: 1.05rem; width: 1.05rem; flex: none; margin-top: .1rem; color: #16a34a; }

#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   PRIVACY PAGE
   ========================================================================== */
.breadcrumb {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .85rem; font-weight: 600; color: rgb(var(--sw-muted));
}
.breadcrumb a { color: rgb(var(--sw-muted)); transition: color .16s ease; }
.breadcrumb a:hover { color: #7325e8; }
.dark .breadcrumb a:hover { color: #c4b5fd; }
.breadcrumb svg { color: rgb(148 163 184); }

.trust-card {
  border-radius: 1.25rem; border: 1px solid rgb(15 23 42 / .07);
  background: rgb(255 255 255 / .78); padding: 1.25rem;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 2px rgb(16 12 40 / .04);
}
.dark .trust-card { background: rgb(255 255 255 / .04); border-color: rgb(255 255 255 / .09); }
.trust-icon {
  display: grid; place-items: center; height: 2.4rem; width: 2.4rem;
  border-radius: .8rem; background: var(--tint-bg); color: var(--tint-fg);
}
.trust-icon svg { height: 1.2rem; width: 1.2rem; }
.trust-card h2 { margin-top: .7rem; font-size: .98rem; font-weight: 800; letter-spacing: -.01em; }
.trust-card p  { margin-top: .3rem; font-size: .84rem; line-height: 1.5; color: rgb(var(--sw-muted)); }

/* Table of contents -------------------------------------------------------- */
.toc {
  border-radius: 1.25rem; border: 1px solid rgb(15 23 42 / .07);
  background: rgb(248 250 252 / .8); padding: 1.25rem;
}
.dark .toc { background: rgb(255 255 255 / .035); border-color: rgb(255 255 255 / .09); }
@media (min-width: 1024px) { .toc { position: sticky; top: 6.5rem; } }

.toc-head { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--sw-muted)); }
.toc nav { margin-top: .85rem; display: grid; gap: .1rem; }
.toc nav a {
  border-radius: .55rem; padding: .42rem .6rem;
  font-size: .86rem; font-weight: 600; color: rgb(71 85 105);
  transition: all .16s ease;
}
.toc nav a:hover { background: rgb(115 37 232 / .08); color: #6218c9; }
.toc nav a.is-active { background: rgb(115 37 232 / .1); color: #6218c9; }
.dark .toc nav a { color: rgb(203 213 225); }
.dark .toc nav a:hover, .dark .toc nav a.is-active { background: rgb(167 139 250 / .16); color: #ddd6fe; }

/* Long-form legal copy ----------------------------------------------------- */
.legal { max-width: 46rem; font-size: 1rem; line-height: 1.75; color: rgb(51 65 85); }
.dark .legal { color: rgb(203 213 225); }

.legal .lead { font-size: 1.1rem; line-height: 1.7; color: rgb(30 41 59); font-weight: 500; }
.dark .legal .lead { color: rgb(226 232 240); }

.legal p { margin-top: .85rem; }

.legal h2 {
  scroll-margin-top: 6.5rem;
  margin-top: 2.1rem; padding-top: 1.35rem;
  border-top: 1px solid rgb(15 23 42 / .08);
  font-size: 1.55rem; font-weight: 800; letter-spacing: -.025em;
  color: rgb(15 23 42);
}
.dark .legal h2 { color: #fff; border-color: rgb(255 255 255 / .1); }
.legal > .lead + p + h2 { margin-top: 2.5rem; }

.legal h3 {
  margin-top: 1.4rem; font-size: 1.08rem; font-weight: 800; letter-spacing: -.015em;
  color: rgb(15 23 42);
}
.dark .legal h3 { color: #f1f5f9; }

.legal ul { margin-top: .85rem; display: grid; gap: .6rem; padding-left: 0; list-style: none; }
.legal ul li { position: relative; padding-left: 1.5rem; }
.legal ul li::before {
  content: ""; position: absolute; left: .25rem; top: .68em;
  height: .4rem; width: .4rem; border-radius: 999px; background: #a855f7;
}

.legal strong { font-weight: 700; color: rgb(15 23 42); }
.dark .legal strong { color: #fff; }
.legal em { font-style: normal; font-weight: 700; color: rgb(var(--sw-muted)); }

.legal a:not(.btn-primary):not(.btn-secondary) {
  font-weight: 600; color: #6218c9;
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px;
}
.legal a:not(.btn-primary):not(.btn-secondary):hover { color: #441685; }
.dark .legal a:not(.btn-primary):not(.btn-secondary) { color: #c4b5fd; }
.dark .legal a:not(.btn-primary):not(.btn-secondary):hover { color: #e9d5ff; }

.legal code {
  border-radius: .35rem; background: rgb(15 23 42 / .06);
  padding: .1rem .35rem; font-size: .88em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #6218c9;
}
.dark .legal code { background: rgb(255 255 255 / .09); color: #ddd6fe; }

.legal hr { margin-top: 2.2rem; border: 0; border-top: 1px solid rgb(15 23 42 / .08); }
.dark .legal hr { border-color: rgb(255 255 255 / .1); }

.legal .disclaimer { font-size: .88rem; font-style: italic; color: rgb(var(--sw-muted)); }

.legal .contact-line { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.05rem; font-weight: 600; }
.legal .contact-line svg { height: 1.2rem; width: 1.2rem; color: #7325e8; }

/* Callouts */
.callout {
  margin-top: 1.1rem; border-radius: 1rem;
  border: 1px solid rgb(115 37 232 / .2);
  border-left: 4px solid #7325e8;
  background: rgb(115 37 232 / .05);
  padding: 1rem 1.25rem; font-size: .95rem; line-height: 1.65;
}
.dark .callout { background: rgb(167 139 250 / .1); border-color: rgb(167 139 250 / .25); border-left-color: #a78bfa; }
.callout--strong { border-left-color: #059669; border-color: rgb(5 150 105 / .25); background: rgb(5 150 105 / .07); font-weight: 600; }
.dark .callout--strong { background: rgb(16 185 129 / .1); border-color: rgb(16 185 129 / .25); border-left-color: #34d399; }

/* Grid children default to min-width:auto, so a wide table inside one stretches
   its column and pushes the page sideways on mobile. The tables already scroll
   inside .table-wrap; this lets that container actually shrink to the column. */
main .grid > *, .legal { min-width: 0; }
.table-wrap { max-width: 100%; }

/* Long URLs (the AdMob policy links) have no break opportunity, so they push
   their list item — and the page — wider than the viewport on a phone. */
.legal a, .legal li, .legal code, .info a, .info code { overflow-wrap: anywhere; }

/* Tables */
.table-wrap {
  margin-top: 1.1rem; overflow-x: auto;
  border-radius: 1rem; border: 1px solid rgb(15 23 42 / .09);
  box-shadow: 0 1px 2px rgb(16 12 40 / .04);
  -webkit-overflow-scrolling: touch;
}
.dark .table-wrap { border-color: rgb(255 255 255 / .1); }

.legal table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .9rem; background: #fff; }
.dark .legal table { background: rgb(255 255 255 / .025); }
.legal thead th {
  background: rgb(248 250 252); text-align: left;
  padding: .8rem 1rem; font-weight: 800; font-size: .78rem;
  letter-spacing: .05em; text-transform: uppercase; color: rgb(71 85 105);
  border-bottom: 1px solid rgb(15 23 42 / .09);
}
.dark .legal thead th { background: rgb(255 255 255 / .05); color: rgb(203 213 225); border-color: rgb(255 255 255 / .1); }
.legal tbody td { padding: .8rem 1rem; border-top: 1px solid rgb(15 23 42 / .06); vertical-align: top; }
.dark .legal tbody td { border-color: rgb(255 255 255 / .07); }
.legal tbody tr:nth-child(odd) td { background: rgb(248 250 252 / .5); }
.dark .legal tbody tr:nth-child(odd) td { background: rgb(255 255 255 / .015); }
.legal tbody td:first-child { font-weight: 600; color: rgb(15 23 42); }
.dark .legal tbody td:first-child { color: #f1f5f9; }

/* ==========================================================================
   MOBILE HEADER
   The bar carries five items (logo, wordmark, theme toggle, download, menu).
   Both flex groups are shrink-0 in the markup so they can never compress into
   one another; these rules shrink the items themselves instead, so the whole
   row fits on one clean line down to a 320px viewport.
   ========================================================================== */
@media (max-width: 639px) {
  .logo-mark { height: 2rem; width: 2rem; border-radius: .7rem; }
  .logo-mark svg { height: 1.05rem; width: 1.05rem; }

  .logo-text { font-size: 1.15rem; }

  .icon-btn { height: 2.25rem; width: 2.25rem; border-radius: .65rem; }
  .icon-btn svg { height: 1.15rem; width: 1.15rem; }

  .btn-download {
    gap: .35rem; border-radius: .7rem;
    padding: .5rem .7rem; font-size: .78rem;
  }
  .btn-download svg { height: .85rem; width: .85rem; }
}

/* Small handsets (≤400px): trim once more so nothing clips at the right edge. */
@media (max-width: 400px) {
  .logo-text { font-size: 1.05rem; }
  .icon-btn { height: 2.1rem; width: 2.1rem; }
  .btn-download { gap: .3rem; padding: .45rem .58rem; font-size: .72rem; }
  .btn-download svg { height: .8rem; width: .8rem; }
}

/* Compact handsets (≤360px, e.g. iPhone SE / Galaxy S8): the tightest tier that
   still keeps all five header items on one line with the menu fully on-screen. */
@media (max-width: 360px) {
  .logo-mark { height: 1.85rem; width: 1.85rem; border-radius: .6rem; }
  .logo-mark svg { height: .95rem; width: .95rem; }
  .logo-text { font-size: .95rem; }
  .icon-btn { height: 1.95rem; width: 1.95rem; border-radius: .6rem; }
  .icon-btn svg { height: 1.05rem; width: 1.05rem; }
  .btn-download { padding: .4rem .5rem; font-size: .68rem; border-radius: .6rem; }
  .btn-download svg { height: .75rem; width: .75rem; }
}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .07s; }
.reveal-d2 { transition-delay: .14s; }
.reveal-d3 { transition-delay: .21s; }
.reveal-d4 { transition-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .phone, .float-badge { animation: none !important; }
}

/* Per-platform spec blocks in the download header. Two columns so Android and
   iOS facts never read as one list — a 76 MB arm64 build is not what an iPhone
   visitor is being offered. */
.platform-specs {
  border: 1px solid rgb(226 232 240);
  border-radius: 14px;
  padding: .85rem 1rem;
  text-align: left;
  background: rgb(255 255 255 / .6);
}
.dark .platform-specs {
  border-color: rgb(255 255 255 / .1);
  background: rgb(255 255 255 / .04);
}
.platform-specs__head {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
  font-size: .875rem;
  color: rgb(30 41 59);
}
.dark .platform-specs__head { color: rgb(226 232 240); }
.platform-specs__pills {
  margin-top: .55rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .6rem;
}
.platform-specs__link {
  display: inline-block;
  margin-top: .6rem;
  font-size: .8125rem;
  font-weight: 600;
  color: #7325e8;
}
.platform-specs__link:hover { text-decoration: underline; }
.dark .platform-specs__link { color: #c4a4ff; }