/* twoplus11.com — shared stylesheet */

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  min-height: 100dvh;
  background: #0A0A0C;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; }

/* ── Design tokens ──────────────────────────────────────────────── */
:root {
  --bg:         #0A0A0C;
  --s1:         #131318;
  --s2:         #1C1C24;
  --s3:         #26262F;
  --b0:         rgba(255,255,255,0.05);
  --b1:         rgba(255,255,255,0.09);
  --b2:         rgba(255,255,255,0.18);
  --blue:       #0A84FF;
  --blue-d:     rgba(10,132,255,0.12);
  --blue-g:     rgba(10,132,255,0.28);
  /* The brand blue is only 3.65:1 under white ink, so a filled button uses these two
     darker steps instead. --blue itself stays the accent for links, glows and rules. */
  --blue-btn:   #0870D9;
  --blue-btn-h: #0974E0;
  --purple:     #9B72FF;
  --purple-d:   rgba(155,114,255,0.12);
  --purple-g:   rgba(155,114,255,0.24);
  /* Four legible steps, not three legible ones and a whisper. Every level clears
     WCAG AA (4.5:1) on the darkest *and* lightest surface it is used on — the ramp
     separates by weight, size and tracking, never by fading text out of reach. */
  --t1: #FFFFFF;                      /* 21.0:1  headings                        */
  --t2: rgba(255,255,255,0.78);       /*  9.6:1  body copy                       */
  --t3: rgba(255,255,255,0.58);       /*  6.0:1  labels, secondary               */
  --t4: rgba(255,255,255,0.48);       /*  4.6:1  microtext, meta, legal          */
  --nav-h: 60px;
  --r-lg: 20px;
  --r-xl: 24px;
}

/* ── Dot-grid texture ───────────────────────────────────────────── */
.bg-grid {
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

/* ── Wordmark ───────────────────────────────────────────────────── */
.wordmark {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  text-decoration: none;
  color: var(--t1);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}
.wordmark em {
  font-style: normal;
  color: #0A84FF;
}

/* ── Navigation ─────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(10,10,12,0.84);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid var(--b1);
}
.nav__i {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  margin-left: auto;
}
.nav__links a {
  display: block;
  padding: 0.4rem 0.8rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--t3);
  text-decoration: none;
  border-radius: 10px;
  transition: color 0.15s, background 0.15s;
  letter-spacing: -0.01em;
}
.nav__links a:hover { color: var(--t1); background: var(--b0); }
.nav__links .nav-cta {
  color: var(--blue);
  background: var(--blue-d);
  border: 1px solid rgba(10,132,255,0.2);
}
.nav__links .nav-cta:hover {
  background: rgba(10,132,255,0.2);
  color: var(--blue);
}
.nav__burger {
  display: none;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--t2);
  padding: 0.45rem;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.nav__burger:hover { color: var(--t1); background: var(--b0); }
.nav__mobile {
  position: absolute;
  top: var(--nav-h);
  left: 0;
  right: 0;
  background: #131318;
  border-bottom: 1px solid var(--b1);
  padding: 0.5rem 1rem 0.75rem;
}
.nav__mobile a {
  display: block;
  padding: 0.7rem 1rem;
  font-size: 0.925rem;
  font-weight: 500;
  color: var(--t2);
  text-decoration: none;
  border-radius: 12px;
  transition: color 0.15s, background 0.15s;
  letter-spacing: -0.01em;
}
.nav__mobile a:hover { color: var(--t1); background: var(--b0); }
/* Tip CTA — same gradient as the support button, with the soft outer glow
   the download buttons use, slowly breathing so it catches the eye. */
.nav__links .nav-tip,
.nav__mobile .nav-tip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(100deg, #0A84FF 0%, #9B72FF 55%, #FF78C0 100%);
  animation: tip-glow 2.8s ease-in-out infinite;
}
.nav__links .nav-tip {
  margin-left: 0.35rem;
  padding: 0.42rem 0.95rem;
}
.nav__mobile .nav-tip {
  display: flex;
  justify-content: center;
  margin-top: 0.35rem;
}
.nav__links .nav-tip:hover,
.nav__mobile .nav-tip:hover {
  color: #fff;
  filter: brightness(1.08);
  background: linear-gradient(100deg, #0A84FF 0%, #9B72FF 55%, #FF78C0 100%);
  box-shadow: 0 8px 32px rgba(255,120,192,0.55);
  animation: none;
}
.nav-tip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nav-tip__heart {
  flex-shrink: 0;
  filter: drop-shadow(0 0 5px rgba(255,255,255,0.85));
  animation: tip-beat 2.8s ease-in-out infinite;
}
@keyframes tip-glow {
  0%, 100% { box-shadow: 0 4px 20px rgba(155,114,255,0.32); }
  50%      { box-shadow: 0 6px 30px rgba(255,120,192,0.58); }
}
@keyframes tip-beat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-tip, .nav-tip__heart { animation: none; }
  .nav-tip { box-shadow: 0 4px 20px rgba(155,114,255,0.40); }
}
@media (max-width: 800px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; align-items: center; justify-content: center; }
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1.4rem;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s, border-color 0.18s, color 0.18s;
  border: none;
  cursor: pointer;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.btn svg { flex-shrink: 0; }
.btn--primary {
  background: var(--blue-btn);
  color: #fff;
  box-shadow: 0 4px 20px var(--blue-g);
}
.btn--primary:hover {
  background: var(--blue-btn-h);
  transform: translateY(-1px);
  box-shadow: 0 8px 32px var(--blue-g);
}
.btn--ghost {
  background: var(--b0);
  color: var(--t2);
  border: 1px solid var(--b1);
}
.btn--ghost:hover {
  background: var(--b1);
  color: var(--t1);
  border-color: var(--b2);
}
.btn--grabbr {
  background: #F8B437;
  color: #312003;
  box-shadow: 0 4px 20px rgba(248,180,55,0.28);
}
.btn--grabbr:hover {
  background: #9D6D00;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(248,180,55,0.38);
}
.btn--gifmint {
  background: #33BAA2;
  color: #042B24;
  box-shadow: 0 4px 20px rgba(51,186,162,0.28);
}
.btn--gifmint:hover {
  background: #008673;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(51,186,162,0.38);
}
.btn--stapl {
  background: #A667E8;
  color: #2C054A;
  box-shadow: 0 4px 20px rgba(166,103,232,0.28);
}
.btn--stapl:hover {
  background: #9556D5;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(166,103,232,0.38);
}
.btn--morphr {
  background: #8770F4;
  color: #210656;
  box-shadow: 0 4px 20px rgba(135,112,244,0.28);
}
.btn--morphr:hover {
  background: #7960E2;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(135,112,244,0.38);
}
.btn--liftr {
  background: #C061D6;
  color: #370541;
  box-shadow: 0 4px 20px rgba(192,97,214,0.28);
}
.btn--liftr:hover {
  background: #AD4EC2;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(192,97,214,0.38);
}
.btn--squishr {
  background: #F76E33;
  color: #401402;
  box-shadow: 0 4px 20px rgba(247,110,51,0.28);
}
.btn--squishr:hover {
  background: #CE4C00;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(247,110,51,0.38);
}
.btn--trimr {
  background: #D157B9;
  color: #390330;
  box-shadow: 0 4px 20px rgba(209,87,185,0.28);
}
.btn--trimr:hover {
  background: #BE45A7;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(209,87,185,0.38);
}
.btn--redlinr {
  background: #F1565C;
  color: #48050D;
  box-shadow: 0 4px 20px rgba(241,86,92,0.28);
}
.btn--redlinr:hover {
  background: #D63C46;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(241,86,92,0.38);
}
.btn--scrubbr {
  background: #2FA9BE;
  color: #042930;
  box-shadow: 0 4px 20px rgba(47,169,190,0.28);
}
.btn--scrubbr:hover {
  background: #008295;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(47,169,190,0.38);
}
.btn--heftr {
  background: #2DA1CC;
  color: #042836;
  box-shadow: 0 4px 20px rgba(45,161,204,0.28);
}
.btn--heftr:hover {
  background: #0080A7;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(45,161,204,0.38);
}
.btn--wakr {
  background: #F4D33E;
  color: #2B2403;
  box-shadow: 0 4px 20px rgba(244,211,62,0.28);
}
.btn--pulsr {
  background: #55C44B;
  color: #052D03;
  box-shadow: 0 4px 20px rgba(85,196,75,0.28);
}
.btn--pulsr:hover {
  background: #0C8A00;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(85,196,75,0.38);
}
.btn--renamr {
  background: #6A81F4;
  color: #130A6B;
  box-shadow: 0 4px 20px rgba(106,129,244,0.28);
}
.btn--renamr:hover {
  background: #586DDE;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(106,129,244,0.38);
}
.btn--loopr {
  background: #31B1B1;
  color: #042A2A;
  box-shadow: 0 4px 20px rgba(49,177,177,0.28);
}
.btn--loopr:hover {
  background: #008484;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(49,177,177,0.38);
}
.btn--blockr {
  background: #35BF89;
  color: #042C1C;
  box-shadow: 0 4px 20px rgba(53,191,137,0.28);
}
.btn--blockr:hover {
  background: #00875B;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(53,191,137,0.38);
}
.btn--copyr {
  background: #478EF4;
  color: #02224E;
  box-shadow: 0 4px 20px rgba(71,142,244,0.28);
}
.btn--copyr:hover {
  background: #2E75D9;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(71,142,244,0.38);
}
.btn--diskr {
  background: #2B99E4;
  color: #03263F;
  box-shadow: 0 4px 20px rgba(43,153,228,0.28);
}
.btn--diskr:hover {
  background: #007BC0;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(43,153,228,0.38);
}
.btn--wakr:hover {
  background: #8B7500;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(244,211,62,0.38);
}
.btn--support {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: linear-gradient(100deg, #0A84FF 0%, #9B72FF 55%, #FF78C0 100%);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.8rem 2rem;
  border-radius: 14px;
  text-decoration: none;
  transition: all 0.2s;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 20px rgba(155,114,255,0.30);
}
.btn--support:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 10px 32px rgba(155,114,255,0.42);
}
.btn--support svg { flex-shrink: 0; }

/* ── Sections ───────────────────────────────────────────────────── */
.section {
  position: relative;
  z-index: 1;
  padding: 6rem 1.5rem;
}
.section[id] {
  scroll-margin-top: var(--nav-h);
}
.wrap {
  max-width: 1080px;
  margin: 0 auto;
}
.s-header {
  margin-bottom: 3rem;
  text-align: center;
}
.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.65rem;
}
.s-title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--t1);
  margin-bottom: 0.6rem;
  line-height: 1.15;
}
.s-sub {
  font-size: 0.975rem;
  color: var(--t3);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.65;
}

/* ── Hero ───────────────────────────────────────────────────────── */
.hero {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 4.5rem 0 4.25rem;
}
/* One light source, anchored behind the app wall — the glow comes from the
   product rather than floating in the corners. */
.hero__glow {
  position: absolute;
  width: 760px; height: 760px;
  right: -190px; top: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at center, rgba(94,92,230,0.17) 0%, transparent 62%);
  pointer-events: none;
  z-index: 0;
}
/* Same 1080px + 1.5rem gutter as .wrap / .nav__i, so the headline lines up
   with the wordmark above it and the app cards below it. */
.hero__i {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  /* Copy column is deliberately the wider one: it has to hold
     "Small Mac apps that" on one line before the break. */
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  align-items: center;
  gap: 3.5rem;
}
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--t2);
  margin-bottom: 1.6rem;
}
.hero__eyebrow::before {
  content: "";
  width: 34px; height: 1px;
  background: var(--b2);
  flex-shrink: 0;
}
.hero__h {
  font-size: clamp(2.4rem, 4.6vw, 3.7rem);
  font-weight: 800;
  letter-spacing: -0.042em;
  line-height: 1.06;
  color: var(--t1);
  text-wrap: balance;
  margin-bottom: 1.4rem;
}
.hero__sub {
  font-size: 1.0625rem;
  color: var(--t2);
  line-height: 1.72;
  max-width: 47ch;
  margin-bottom: 2.25rem;
}
.hero__ctas {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.hero__link {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--t2);
  text-decoration: none;
  border-bottom: 1px solid var(--b2);
  padding-bottom: 3px;
  transition: color 0.18s, border-color 0.18s;
}
.hero__link:hover { color: var(--t1); border-color: var(--t2); }
.hero__link:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 2px; }

/* App wall — the real icons, one tile per app. */
.hero__wall {
  --wall-gap: 0.85rem;
  max-width: 410px;
  margin-left: auto;
}
/* The tiles sit in the wall until the script wraps them in a track, so both carry
   the grid: the wall for the no-JS fallback, the track once the loop is built. */
.hero__wall,
.hero__wall .wall__track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--wall-gap);
}
.hero__wall .wall__t {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 22.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s;
}
/* Loop mode. The wall becomes a window three rows tall — 5 columns by 3 rows is
   aspect-ratio 5/3, give or take a gap — and the track crawls up through it so the
   whole catalog goes by instead of the 15 tiles that fit. Slow on purpose: the mask
   fades tiles in and out at the edges rather than clipping them, and any hover or
   focus stops the strip so a tile can be read and clicked. --wall-shift and
   --wall-dur are set by the script, which knows how many tiles there are. */
.hero__wall--scroll {
  display: block;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, black 13%, black 87%, transparent);
  mask-image: linear-gradient(transparent, black 13%, black 87%, transparent);
}
.hero__wall--scroll .wall__track {
  /* One gap of padding makes the track a whole number of row pitches tall, so the
     percentage shift below lands exactly on a row boundary. */
  padding-bottom: var(--wall-gap);
  animation: wall-scroll var(--wall-dur) linear infinite;
}
.hero__wall--scroll:hover .wall__track,
.hero__wall--scroll:focus-within .wall__track { animation-play-state: paused; }
@keyframes wall-scroll {
  from { transform: translateY(0); }
  to { transform: translateY(calc(-1 * var(--wall-shift))); }
}
.hero__wall .wall__t:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 14px 30px rgba(0,0,0,0.6);
}
.hero__wall .wall__t:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .hero__wall .wall__t { transition: none; }
  .hero__wall .wall__t:hover { transform: none; }
  /* Nothing moves: drop the window and the loop's copies and show every app at once. */
  .hero__wall--scroll {
    aspect-ratio: auto;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero__wall--scroll .wall__track { animation: none; padding-bottom: 0; }
  .hero__wall--scroll .wall__t[aria-hidden="true"] { display: none; }
}
.hero__wall .wall__t svg { width: 54%; height: 54%; color: #fff; }
.hero__wall .icon-gifmint svg { width: 100%; height: 100%; }

@media (max-width: 900px) {
  .hero { padding: 3.5rem 0 3.25rem; }
  .hero__i { grid-template-columns: 1fr; gap: 3rem; }
  .hero__wall { margin: 0; max-width: 400px; }
  .hero__glow { right: 50%; top: auto; bottom: -280px; transform: translateX(50%); width: 620px; height: 620px; }
}
@media (max-width: 560px) {
  .hero__sub { font-size: 1rem; }
  .hero__ctas { gap: 1.25rem; }
  .hero__wall { --wall-gap: 0.7rem; }
}

/* ── Marquee ────────────────────────────────────────────────────── */
.marquee-wrap {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--b1);
  border-bottom: 1px solid var(--b1);
  overflow: hidden;
  padding: 0.9rem 0;
  background: var(--s1);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.marquee__t {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee__t:hover { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.m-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--t3);
  padding: 0 1.5rem;
  letter-spacing: 0.01em;
}
.m-pill svg { opacity: 0.5; flex-shrink: 0; }
.m-sep {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--b2);
  flex-shrink: 0;
  margin: 0 0.25rem;
}
@media (prefers-reduced-motion: reduce) {
  .marquee__t { animation: none; }
}

/* ── App cards ──────────────────────────────────────────────────── */
.apps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 620px) {
  .apps-grid { grid-template-columns: 1fr; }
}
/* A lone card on the last row (odd count) is centered rather than stranded left. */
@media (min-width: 621px) {
  .apps-grid > .app-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 0.625rem);
    justify-self: center;
  }
}
.app-card {
  background: var(--s2);
  border: 1px solid var(--b1);
  border-radius: var(--r-xl);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s;
}
.app-card:hover {
  border-color: var(--b2);
  transform: translateY(-3px);
}
.card-grabbr:hover {
  box-shadow: 0 24px 60px rgba(248,180,55,0.14), inset 0 0 0 1px rgba(248,180,55,0.14);
}
.card-gifmint:hover {
  box-shadow: 0 24px 60px rgba(51,186,162,0.14), inset 0 0 0 1px rgba(51,186,162,0.14);
}
.card-stapl:hover {
  box-shadow: 0 24px 60px rgba(166,103,232,0.14), inset 0 0 0 1px rgba(166,103,232,0.14);
}
.card-morphr:hover {
  box-shadow: 0 24px 60px rgba(135,112,244,0.14), inset 0 0 0 1px rgba(135,112,244,0.14);
}
.card-liftr:hover {
  box-shadow: 0 24px 60px rgba(192,97,214,0.16), inset 0 0 0 1px rgba(192,97,214,0.16);
}
.card-squishr:hover {
  box-shadow: 0 24px 60px rgba(247,110,51,0.16), inset 0 0 0 1px rgba(247,110,51,0.16);
}
.card-trimr:hover {
  box-shadow: 0 24px 60px rgba(209,87,185,0.16), inset 0 0 0 1px rgba(209,87,185,0.16);
}
.card-redlinr:hover {
  box-shadow: 0 24px 60px rgba(241,86,92,0.16), inset 0 0 0 1px rgba(241,86,92,0.16);
}
.card-scrubbr:hover {
  box-shadow: 0 24px 60px rgba(47,169,190,0.16), inset 0 0 0 1px rgba(47,169,190,0.16);
}
.card-heftr:hover {
  box-shadow: 0 24px 60px rgba(45,161,204,0.16), inset 0 0 0 1px rgba(45,161,204,0.16);
}
.card-pulsr:hover {
  box-shadow: 0 24px 60px rgba(85,196,75,0.16), inset 0 0 0 1px rgba(85,196,75,0.16);
}
.card-renamr:hover {
  box-shadow: 0 24px 60px rgba(106,129,244,0.16), inset 0 0 0 1px rgba(106,129,244,0.16);
}
.card-loopr:hover {
  box-shadow: 0 24px 60px rgba(49,177,177,0.16), inset 0 0 0 1px rgba(49,177,177,0.16);
}
.card-blockr:hover {
  box-shadow: 0 24px 60px rgba(53,191,137,0.16), inset 0 0 0 1px rgba(53,191,137,0.16);
}
.card-diskr:hover {
  box-shadow: 0 24px 60px rgba(43,153,228,0.16), inset 0 0 0 1px rgba(43,153,228,0.16);
}
.card-copyr:hover {
  box-shadow: 0 24px 60px rgba(71,142,244,0.16), inset 0 0 0 1px rgba(71,142,244,0.16);
}
.card-wakr:hover {
  box-shadow: 0 24px 60px rgba(244,211,62,0.16), inset 0 0 0 1px rgba(244,211,62,0.16);
}
.app-icon {
  width: 64px; height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-grabbr {
  background: linear-gradient(145deg, #CC5F22, #ECAB34);
  box-shadow: 0 8px 24px rgba(248,180,55,0.40);
}
.icon-gifmint {
  background: linear-gradient(180deg, #186567, #30AF99);
  box-shadow: 0 8px 24px rgba(51,186,162,0.40);
}
.icon-gifmint svg { width: 100%; height: 100%; }
.icon-stapl {
  background: linear-gradient(145deg, #431495, #9D5EDD);
  box-shadow: 0 8px 24px rgba(166,103,232,0.40);
}
.icon-morphr {
  background: linear-gradient(145deg, #4B1183, #7F66E9);
  box-shadow: 0 8px 24px rgba(135,112,244,0.40);
}
.icon-liftr {
  background: linear-gradient(145deg, #58148C, #B657CC);
  box-shadow: 0 8px 24px rgba(192,97,214,0.40);
}
.icon-squishr {
  background: linear-gradient(145deg, #991927, #EC6527);
  box-shadow: 0 8px 24px rgba(247,110,51,0.40);
}
.icon-trimr {
  background: linear-gradient(145deg, #611175, #C74DAF);
  box-shadow: 0 8px 24px rgba(209,87,185,0.40);
}
.icon-redlinr {
  background: linear-gradient(145deg, #7F1340, #E64C53);
  box-shadow: 0 8px 24px rgba(241,86,92,0.40);
}
.icon-scrubbr {
  background: linear-gradient(180deg, #12536F, #2C9FB3);
  box-shadow: 0 8px 24px rgba(47,169,190,0.40);
}
.icon-heftr {
  background: linear-gradient(145deg, #0F4B76, #2A97C0);
  box-shadow: 0 8px 24px rgba(45,161,204,0.40);
}
.icon-wakr {
  background: linear-gradient(180deg, #C06E23, #D7B935);
  box-shadow: 0 8px 24px rgba(244,211,62,0.35);
}
.icon-pulsr {
  background: linear-gradient(145deg, #1B7154, #4ABA41);
  box-shadow: 0 8px 24px rgba(85,196,75,0.40);
}
.icon-renamr {
  background: linear-gradient(145deg, #3F169C, #5F75F3);
  box-shadow: 0 8px 24px rgba(106,129,244,0.40);
}
.icon-loopr {
  background: linear-gradient(145deg, #155C6B, #2EA7A7);
  box-shadow: 0 8px 24px rgba(49,177,177,0.40);
}
.icon-blockr {
  background: linear-gradient(145deg, #196A61, #31B581);
  box-shadow: 0 8px 24px rgba(53,191,137,0.40);
}
.icon-diskr {
  background: linear-gradient(145deg, #0B3F90, #2790D6);
  box-shadow: 0 8px 24px rgba(43,153,228,0.40);
}
.icon-copyr {
  background: linear-gradient(145deg, #2C1AB1, #3483F3);
  box-shadow: 0 8px 24px rgba(71,142,244,0.40);
}
.app-icon svg { width: 30px; height: 30px; color: #fff; }
.app-hd { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.app-name {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--t1);
}
.app-badge {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}
.badge-v { background: rgba(248,180,55,0.12); border: 1px solid rgba(248,180,55,0.28); color: #FFE37D; }
.badge-g { background: rgba(51,186,162,0.12); border: 1px solid rgba(51,186,162,0.28); color: #80ECD5; }
.badge-s { background: rgba(166,103,232,0.12); border: 1px solid rgba(166,103,232,0.28); color: #D69FFF; }
.badge-c { background: rgba(135,112,244,0.12); border: 1px solid rgba(135,112,244,0.28); color: #B7A6FF; }
.badge-l { background: rgba(192,97,214,0.14); border: 1px solid rgba(192,97,214,0.30); color: #F19AFF; }
.badge-sq { background: rgba(247,110,51,0.16); border: 1px solid rgba(247,110,51,0.34); color: #FFA976; }
.badge-t { background: rgba(209,87,185,0.16); border: 1px solid rgba(209,87,185,0.34); color: #FF91E9; }
.badge-rl { background: rgba(241,86,92,0.16); border: 1px solid rgba(241,86,92,0.34); color: #FF9392; }
.badge-scr { background: rgba(47,169,190,0.16); border: 1px solid rgba(47,169,190,0.34); color: #79DBEE; }
.badge-hef { background: rgba(45,161,204,0.16); border: 1px solid rgba(45,161,204,0.34); color: #76D4FC; }
.badge-wak { background: rgba(244,211,62,0.16); border: 1px solid rgba(244,211,62,0.34); color: #FFEE73; }
.badge-pul { background: rgba(85,196,75,0.16); border: 1px solid rgba(85,196,75,0.34); color: #95F78B; }
.badge-ren { background: rgba(106,129,244,0.16); border: 1px solid rgba(106,129,244,0.34); color: #9CB6FF; }
.badge-loo { background: rgba(49,177,177,0.16); border: 1px solid rgba(49,177,177,0.34); color: #7DE3E3; }
.badge-blk { background: rgba(53,191,137,0.16); border: 1px solid rgba(53,191,137,0.34); color: #81F2BD; }
.badge-dsk { background: rgba(43,153,228,0.16); border: 1px solid rgba(43,153,228,0.34); color: #73CCFF; }
.badge-cpr { background: rgba(71,142,244,0.16); border: 1px solid rgba(71,142,244,0.34); color: #81C2FF; }
.badge-wk { background: rgba(22,104,227,0.16); border: 1px solid rgba(22,104,227,0.34); color: #A6C9FB; }
.badge-png { background: rgba(229,77,120,0.16); border: 1px solid rgba(229,77,120,0.34); color: #FF8AAB; }
.badge-snp { background: rgba(5,150,105,0.16); border: 1px solid rgba(5,150,105,0.34); color: #A7F3D0; }
.badge-anc { background: rgba(179,204,55,0.16); border: 1px solid rgba(179,204,55,0.34); color: #E3FD81; }
.badge-swp { background: rgba(14,165,233,0.16); border: 1px solid rgba(14,165,233,0.34); color: #7DD3FC; }
.app-pricing {
  font-size: 0.78rem;
  color: var(--t4);
  margin-top: 0.15rem;
}
.app-pricing strong { font-weight: 600; }
.card-grabbr .app-pricing strong { color: #F8B437; }
.card-gifmint .app-pricing strong { color: #33BAA2; }
.card-stapl .app-pricing strong { color: #A667E8; }
.card-morphr .app-pricing strong { color: #8770F4; }
.card-liftr .app-pricing strong { color: #C061D6; }
.card-squishr .app-pricing strong { color: #F76E33; }
.card-trimr .app-pricing strong { color: #D157B9; }
.card-redlinr .app-pricing strong { color: #F1565C; }
.card-scrubbr .app-pricing strong { color: #2FA9BE; }
.card-heftr .app-pricing strong { color: #2DA1CC; }
.card-wakr .app-pricing strong { color: #F4D33E; }
.card-pulsr .app-pricing strong { color: #55C44B; }
.card-renamr .app-pricing strong { color: #6A81F4; }
.card-loopr .app-pricing strong { color: #31B1B1; }
.card-blockr .app-pricing strong { color: #35BF89; }
.card-diskr .app-pricing strong { color: #2B99E4; }
.card-copyr .app-pricing strong { color: #478EF4; }
.card-pingr .app-pricing strong { color: #E54D78; }
.card-anchr .app-pricing strong { color: #B3CC37; }
.card-winkeys .app-pricing strong { color: #A6C9FB; }
.card-snapr .app-pricing strong { color: #A7F3D0; }
.card-sweepr .app-pricing strong { color: #7DD3FC; }
.app-desc {
  font-size: 0.875rem;
  color: var(--t2);
  line-height: 1.68;
  flex: 1;
}
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chip {
  font-size: 0.7rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--b1);
  background: var(--b0);
  color: var(--t3);
}
.app-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.74rem;
  color: var(--t4);
}
.app-meta span { display: flex; align-items: center; gap: 0.3rem; }
.app-meta svg { flex-shrink: 0; }
.app-actions { display: flex; gap: 0.6rem; }
.app-actions .btn { flex: 1; justify-content: center; padding-left: 0.9rem; padding-right: 0.9rem; }

/* ── Stats strip ────────────────────────────────────────────────── */
.stats-strip {
  position: relative;
  z-index: 1;
  background: var(--s1);
  border-top: 1px solid var(--b1);
  border-bottom: 1px solid var(--b1);
  padding: 4rem 1.5rem;
}
.stats-row {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
}
@media (max-width: 680px) {
  .stats-row { grid-template-columns: 1fr 1fr; }
  .stats-row > :last-child { grid-column: 1 / -1; }
}
.stat-num {
  display: block;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--t1);
  line-height: 1;
  margin-bottom: 0.45rem;
}
.stat-label {
  font-size: 0.78rem;
  color: var(--t4);
  line-height: 1.4;
}

/* ── Reviews ────────────────────────────────────────────────────── */
.reviews-grid {
  display: grid;
  /* auto-fill, not auto-fit: the last page can hold fewer than a full row, and
     collapsing the empty tracks would blow those cards up to double width. */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  /* Real reviews run from two words to eight lines. Stretching every card in a row
     to match the longest one strands the short ones above 150px of dead card, so
     each card hugs its own quote and the wall goes ragged at the bottom instead. */
  align-items: start;
}
@media (max-width: 560px) { .reviews-grid { grid-template-columns: 1fr; } }
.review-card {
  background: var(--s2);
  border: 1px solid var(--b1);
  border-radius: 20px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.review-stars {
  color: #FFB020;
  font-size: 0.9rem;
  letter-spacing: 2px;
  line-height: 1;
}
.review-body {
  font-size: 0.9rem;
  color: var(--t2);
  line-height: 1.65;
  flex: 1;
}
.review-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--b0);
}
.review-author {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--t1);
}
.review-app-badge {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.review-app-badge:hover,
.review-app-badge:focus-visible {
  filter: brightness(1.25);
  transform: translateY(-1px);
}
.reviews-empty {
  text-align: center;
  color: var(--t3);
  font-size: 0.9rem;
  padding: 1rem 0;
}
.reviews-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.25rem;
}
.reviews-pager .btn {
  padding: 0.55rem 1.1rem;
  font-size: 0.85rem;
}
.reviews-pager .btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.reviews-pager .btn:disabled {
  opacity: 0.35;
  pointer-events: none;
}
.reviews-pager__count {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--t3);
  letter-spacing: 0.02em;
  min-width: 5.5rem;
  text-align: center;
}

/* ── About section ──────────────────────────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
@media (max-width: 720px) {
  .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
.about-text .eyebrow { margin-bottom: 0.5rem; }
.about-text h2 {
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--t1);
  margin-bottom: 1.25rem;
  line-height: 1.18;
}
.about-text p {
  font-size: 0.95rem;
  color: var(--t2);
  line-height: 1.72;
  margin-bottom: 0.85rem;
}
.about-text .btn { margin-top: 0.5rem; }
.about-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
.val-card {
  background: var(--s2);
  border: 1px solid var(--b1);
  border-radius: 16px;
  padding: 1.25rem;
  transition: border-color 0.2s, background 0.2s;
}
.val-card:hover { border-color: var(--b2); background: var(--s3); }
.val-icon {
  width: 34px; height: 34px;
  background: var(--b0);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.7rem;
  color: var(--blue);
}
.val-icon svg { width: 16px; height: 16px; }
.val-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 0.3rem;
  letter-spacing: -0.01em;
}
.val-sub {
  font-size: 0.78rem;
  color: var(--t3);
  line-height: 1.5;
}

/* ── Portfolio ──────────────────────────────────────────────────── */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}
@media (max-width: 560px) { .portfolio-grid { grid-template-columns: 1fr; } }
.port-card {
  background: var(--s2);
  border: 1px solid var(--b1);
  border-radius: 20px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}
.port-card:hover { border-color: var(--b2); transform: translateY(-2px); }
.port-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.port-hd { display: flex; align-items: center; gap: 0.75rem; }
.port-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--s3);
  border: 1px solid var(--b1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t3);
  flex-shrink: 0;
}
.port-icon svg { width: 20px; height: 20px; }
.port-name {
  font-size: 0.975rem;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -0.02em;
}
.port-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--t4);
  margin-top: 0.15rem;
}
.port-desc {
  font-size: 0.83rem;
  color: var(--t3);
  line-height: 1.62;
  flex: 1;
}
.port-link {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  transition: color 0.15s;
  align-self: flex-start;
}
.port-card:hover .port-link { color: #4da3ff; }

/* ── Hire CTA (sits under the portfolio grid) ───────────────────── */
.hire-panel {
  margin-top: 1.25rem;
  background: linear-gradient(135deg, var(--blue-d), var(--purple-d)), var(--s2);
  border: 1px solid var(--b1);
  border-radius: 20px;
  padding: 2rem 1.9rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.75rem;
}
@media (max-width: 760px) {
  .hire-panel { grid-template-columns: 1fr; gap: 1.4rem; padding: 1.6rem 1.4rem; }
}
.hire-title {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -0.025em;
  margin-bottom: 0.55rem;
}
.hire-copy {
  font-size: 0.86rem;
  color: var(--t2);
  line-height: 1.68;
  max-width: 62ch;
}
.hire-copy + .hire-copy { margin-top: 0.6rem; }
.hire-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.hire-chip {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--t3);
  background: var(--b0);
  border: 1px solid var(--b1);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  white-space: nowrap;
}
.hire-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; }
.hire-note { font-size: 0.72rem; color: var(--t3); }

/* ── Support card ───────────────────────────────────────────────── */
.support-panel {
  position: relative;
  overflow: hidden;
  background: var(--s1);
  border: 1px solid var(--b1);
  border-radius: var(--r-xl);
  padding: 3.25rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  box-shadow: 0 24px 60px rgba(10,132,255,0.07);
}
.support-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(100deg, #0A84FF 0%, #9B72FF 55%, #FF78C0 100%);
}
.support-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(480px 260px at 12% -10%, rgba(10,132,255,0.14), transparent 60%),
    radial-gradient(480px 260px at 88% 110%, rgba(155,114,255,0.14), transparent 60%);
  pointer-events: none;
}
.support-panel > * { position: relative; z-index: 1; }
.support-icon {
  width: 60px; height: 60px;
  border-radius: 17px;
  background: linear-gradient(145deg, #0A3875 0%, #6B4FD6 55%, #B24FA0 100%);
  box-shadow: 0 8px 24px rgba(155,114,255,0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.support-icon svg { width: 27px; height: 27px; }
.support-headline {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--t1);
}
.support-sub {
  font-size: 0.9rem;
  color: var(--t3);
  max-width: 28rem;
  line-height: 1.65;
}
.support-form {
  width: 100%;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 0.25rem;
}
.support-amounts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.amount-chip {
  background: var(--s2);
  border: 1px solid var(--b1);
  color: var(--t1);
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  padding: 0.6rem 1.1rem;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.amount-chip:hover { border-color: var(--b2); transform: translateY(-1px); }
.amount-chip.is-selected {
  background: linear-gradient(135deg, rgba(10,132,255,0.20), rgba(155,114,255,0.20));
  border-color: rgba(155,114,255,0.55);
  color: #fff;
  box-shadow: 0 4px 16px rgba(155,114,255,0.22);
}
.amount-custom {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--s2);
  border: 1px solid var(--b1);
  border-radius: 12px;
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--t2);
}
.amount-custom input {
  width: 4rem;
  background: transparent;
  border: none;
  color: var(--t1);
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
}
.amount-custom input:focus { outline: none; }
.amount-custom input::-webkit-outer-spin-button,
.amount-custom input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.support-err {
  font-size: 0.82rem;
  color: #ff6b6b;
  min-height: 1.1em;
}
#support-submit { border: none; cursor: pointer; }
#support-submit:disabled { opacity: 0.7; cursor: default; transform: none; }

/* ── Footer ─────────────────────────────────────────────────────── */
.footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--b1);
  padding: 3.5rem 1.5rem 2.5rem;
  margin-top: 5rem;
}
.footer__i {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: start;
}
.footer__brand .wordmark { font-size: 1.05rem; }
.footer__brand p {
  font-size: 0.82rem;
  color: var(--t4);
  margin-top: 0.4rem;
  line-height: 1.5;
}
.footer__copy {
  font-size: 0.78rem;
  color: var(--t4);
  margin-top: 1.5rem;
}
.footer__cols { display: flex; gap: 3rem; }
.footer__col h3 {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t4);
  margin-bottom: 0.9rem;
}
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.footer__col a {
  font-size: 0.85rem;
  color: var(--t3);
  text-decoration: none;
  transition: color 0.15s;
  letter-spacing: -0.01em;
}
.footer__col a:hover { color: var(--t1); }
@media (max-width: 700px) {
  .footer__i { grid-template-columns: 1fr; gap: 2rem; }
  .footer__cols { gap: 2rem; }
}
@media (max-width: 420px) {
  .footer__cols { flex-direction: column; gap: 1.5rem; }
}

/* ── Legal pages ────────────────────────────────────────────────── */
.legal-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 4rem 1.5rem 7rem;
}
.legal-header {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--b1);
}
.legal-header .eyebrow { margin-bottom: 0.5rem; }
.legal-title {
  font-size: clamp(1.8rem, 5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--t1);
  margin-bottom: 0.6rem;
  line-height: 1.1;
}
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 0.9rem;
}
.legal-meta span {
  font-size: 0.82rem;
  color: var(--t4);
}
.legal-shortlinks {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}
.legal-shortlinks a {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--blue);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--blue-d);
  border: 1px solid rgba(10,132,255,0.2);
  transition: background 0.15s;
}
.legal-shortlinks a:hover { background: rgba(10,132,255,0.2); }
.legal-content section { margin-bottom: 2.75rem; }
.legal-content h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -0.02em;
  margin-bottom: 0.8rem;
  padding-top: 0.25rem;
}
.legal-content p {
  font-size: 0.925rem;
  color: var(--t2);
  line-height: 1.72;
  margin-bottom: 0.75rem;
}
.legal-content p:last-child { margin-bottom: 0; }
.legal-content ul {
  list-style: none;
  margin-bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.legal-content ul li {
  font-size: 0.925rem;
  color: var(--t2);
  line-height: 1.65;
  padding-left: 1.35rem;
  position: relative;
}
.legal-content ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--t4);
}
.legal-content strong { color: var(--t1); font-weight: 600; }

/* ── Site changelog ─────────────────────────────────────────────────
   Reuses the legal page's shell and type, and adds only what a dated
   history needs: a rail down the left with a node per entry. Every app
   has kept a public changelog for months; this is the same courtesy for
   twoplus11.com itself, which had nowhere to record a change. */
.cl-list {
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0 0 0 1.9rem;
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
}
.cl-list::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.55rem;
  bottom: 0.55rem;
  width: 1px;
  background: linear-gradient(to bottom, var(--b2), var(--b1) 30%, transparent);
}
.cl-entry { position: relative; }
.cl-entry::before {
  content: '';
  position: absolute;
  left: -1.9rem;
  top: 0.42rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--s3);
  border: 1px solid var(--b2);
}
.cl-entry--now::before {
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 0 0 4px var(--blue-d);
}
.cl-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.7rem;
}
.cl-date {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--t3);
  font-variant-numeric: tabular-nums;
}
.cl-tag {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--b2);
  color: var(--t3);
  white-space: nowrap;
}
.cl-tag--legal { color: #7BB6F0; border-color: rgba(10,132,255,0.36); background: var(--blue-d); }
.cl-tag--apps  { color: #C4A6FF; border-color: rgba(155,114,255,0.36); background: var(--purple-d); }
.cl-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -0.02em;
  flex-basis: 100%;
  margin: 0;
}
.cl-entry ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0;
}
.cl-entry ul li {
  font-size: 0.925rem;
  color: var(--t2);
  line-height: 1.65;
  padding-left: 1.35rem;
  position: relative;
}
.cl-entry ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--t4);
}
.cl-entry strong { color: var(--t1); font-weight: 600; }
.cl-entry a { color: var(--blue); text-decoration: none; }
.cl-entry a:hover { text-decoration: underline; }
.cl-foot {
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--b1);
  font-size: 0.875rem;
  color: var(--t3);
  line-height: 1.7;
}
.cl-foot a { color: var(--blue); text-decoration: none; }
.cl-foot a:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .cl-list { padding-left: 1.5rem; gap: 2.25rem; }
  .cl-entry::before { left: -1.5rem; }
}
.legal-callout {
  background: var(--s2);
  border: 1px solid var(--b1);
  border-left: 3px solid var(--blue);
  border-radius: 0 12px 12px 0;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}
.legal-callout p {
  font-size: 0.875rem;
  margin: 0;
  color: var(--t2);
}
.legal-contact {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--blue);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}
.legal-contact:hover { color: #4da3ff; text-decoration: underline; }
.legal-divider {
  height: 1px;
  background: var(--b1);
  margin: 2.5rem 0;
}

/* ── Accessibility utility ──────────────────────────────────────── */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Live download counter ──────────────────────────────────────── */
.dlc {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 5.5rem 1.5rem;
  text-align: center;
  background: var(--bg);
  border-bottom: 1px solid var(--b1);
}
.dlc[data-state="error"] { display: none; }

.dlc__aura {
  position: absolute;
  top: 50%; left: 50%;
  width: min(760px, 130%);
  height: 440px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 36% 42%, rgba(10,132,255,0.20) 0%, transparent 60%),
    radial-gradient(circle at 66% 58%, rgba(155,114,255,0.16) 0%, transparent 62%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
  animation: dlc-aura 9s ease-in-out infinite;
}
@keyframes dlc-aura {
  0%, 100% { opacity: 0.7;  transform: translate(-50%,-50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%,-50%) scale(1.06); }
}

.dlc__i {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}

.dlc__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t2);
  margin-bottom: 1.15rem;
}
.dlc__live {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.2rem 0.6rem 0.2rem 0.55rem;
  border: 1px solid rgba(52,199,89,0.34);
  background: rgba(52,199,89,0.10);
  color: #4ade80;
  border-radius: 999px;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
}
.dlc__live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #34C759;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(52,199,89,0.55);
  animation: dlc-live 2s ease-out infinite;
}
@keyframes dlc-live {
  0%   { box-shadow: 0 0 0 0 rgba(52,199,89,0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(52,199,89,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,199,89,0); }
}
.dlc__live.is-ticking { animation: dlc-chip-pop 0.6s ease; }
@keyframes dlc-chip-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.dlc__count {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 1em;
}
/* Shared gradient-text utility (the hero no longer uses it; the counter does). */
.grad {
  background: linear-gradient(100deg, #0A84FF 0%, #BD80FF 55%, #FF78C0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dlc__num {
  display: none;
  font-size: clamp(3.2rem, 13vw, 7rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: filter 0.5s ease;
  will-change: filter;
}
.dlc[data-state="ready"] .dlc__num { display: inline-block; }
.dlc__num.is-glow { filter: drop-shadow(0 0 24px rgba(120,150,255,0.6)); }

.dlc__skeleton {
  display: inline-block;
  width: clamp(210px, 46vw, 360px);
  height: clamp(3.2rem, 12vw, 6rem);
  border-radius: 18px;
  background: linear-gradient(100deg, var(--s2) 28%, var(--s3) 50%, var(--s2) 72%);
  background-size: 220% 100%;
  animation: dlc-shimmer 1.4s linear infinite;
}
.dlc[data-state="ready"] .dlc__skeleton { display: none; }
@keyframes dlc-shimmer {
  from { background-position: 220% 0; }
  to   { background-position: -120% 0; }
}

.dlc__flourish {
  position: absolute;
  left: 50%; top: 0;
  transform: translate(-50%, 0);
  font-size: clamp(1.05rem, 3vw, 1.5rem);
  font-weight: 800;
  color: #4ade80;
  letter-spacing: -0.01em;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 2px 18px rgba(52,199,89,0.5);
  animation: dlc-float 1.2s ease-out forwards;
}
@keyframes dlc-float {
  0%   { opacity: 0; transform: translate(-50%, 0.4em) scale(0.9); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -1.8em) scale(1); }
}

.dlc__sub {
  font-size: 0.95rem;
  color: var(--t2);
  max-width: 460px;
  margin: 1.15rem auto 0;
  line-height: 1.6;
}

.dlc__meta {
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  margin-top: 1.9rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--b1);
  border-radius: 999px;
  background: var(--s1);
}
.dlc__meta-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}
.dlc__meta-num {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--t1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.dlc__meta-label {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t2);
}
.dlc__meta-sep {
  width: 1px;
  height: 28px;
  background: var(--b1);
  flex-shrink: 0;
}

@media (max-width: 420px) {
  .dlc__meta { gap: 0.95rem; padding: 0.7rem 1.1rem; }
  .dlc__meta-num { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dlc__aura,
  .dlc__live-dot,
  .dlc__skeleton { animation: none; }
}

/* ── WinKeys, Pingr, Snapr ── */

/* WinKeys and Snapr have no hue in theme.py yet, so these stay on the two fills
   their own sites ship — ordered the same way as every other card: the brighter
   fill with dark ink, hover walking down to the one that holds white. */
.btn--winkeys {
  background: #2B7BEE;
  color: #000F2F;
  box-shadow: 0 4px 20px rgba(22,104,227,0.28);
}
.btn--winkeys:hover {
  background: #1668E3;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(22,104,227,0.38);
}
.card-winkeys:hover {
  box-shadow: 0 24px 60px rgba(22,104,227,0.16), inset 0 0 0 1px rgba(22,104,227,0.16);
}
.icon-winkeys {
  background: linear-gradient(145deg, #0E2A4F, #1668E3);
  box-shadow: 0 8px 24px rgba(22,104,227,0.40);
}

/* Pingr's generated palette (theme.py, slug "pingr", hue 7). Like every card here
   the button takes the luminous #E54D78 and carries dark ink on it — white would
   be only 3.71:1 — and hover walks the fill down to #D33B6A, which does hold white. */
.btn--pingr {
  background: #E54D78;
  color: #3B0316;
  box-shadow: 0 4px 20px rgba(229,77,120,0.28);
}
.btn--pingr:hover {
  background: #D33B6A;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(229,77,120,0.38);
}
.card-pingr:hover {
  box-shadow: 0 24px 60px rgba(229,77,120,0.16), inset 0 0 0 1px rgba(229,77,120,0.16);
}
/* Exactly `icon_gradient("pingr")` — the same two stops the .icns is drawn from,
   so the tile here and the app in the Dock are the same object. */
.icon-pingr {
  background: linear-gradient(145deg, #6E0F49, #DB4370);
  box-shadow: 0 8px 24px rgba(229,77,120,0.40);
}

.btn--snapr {
  background: #10B981;
  color: #042C1C;
  box-shadow: 0 4px 20px rgba(5,150,105,0.28);
}
/* #059669 is Snapr's own darker fill but only carries white at 3.77:1, so the
   hover walks it one step further down. */
.btn--snapr:hover {
  background: #21835F;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(5,150,105,0.38);
}
.card-snapr:hover {
  box-shadow: 0 24px 60px rgba(5,150,105,0.16), inset 0 0 0 1px rgba(5,150,105,0.16);
}
.icon-snapr {
  background: linear-gradient(145deg, #065F46, #10B981);
  box-shadow: 0 8px 24px rgba(5,150,105,0.40);
}
.btn--anchr {
  background: #B3CC37;
  color: #212803;
  box-shadow: 0 4px 20px rgba(179,204,55,0.28);
}
.btn--anchr:hover {
  background: #6D7E00;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(179,204,55,0.38);
}
.card-anchr:hover {
  box-shadow: 0 24px 60px rgba(179,204,55,0.16), inset 0 0 0 1px rgba(179,204,55,0.16);
}
.icon-anchr {
  background: linear-gradient(145deg, #259626, #AAC233);
  box-shadow: 0 8px 24px rgba(179,204,55,0.40);
}
.btn--sweepr {
  background: #0EA5E9;
  color: #052F42;
  box-shadow: 0 4px 20px rgba(14,165,233,0.28);
}
.btn--sweepr:hover {
  background: #075985;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(14,165,233,0.38);
}
.card-sweepr:hover {
  box-shadow: 0 24px 60px rgba(14,165,233,0.16), inset 0 0 0 1px rgba(14,165,233,0.16);
}
.icon-sweepr {
  background: linear-gradient(145deg, #075985, #0EA5E9);
  box-shadow: 0 8px 24px rgba(14,165,233,0.40);
}

/* ── Download-all trigger ───────────────────────────────────────── */
.apps-all {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.apps-all__note {
  font-size: 0.8rem;
  color: var(--t4);
  letter-spacing: -0.01em;
}
#dlall-open:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ── Download-all sheet ─────────────────────────────────────────── */
.dlall {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.dlall[hidden] { display: none; }
.dlall__scrim {
  position: absolute;
  inset: 0;
  background: rgba(6,6,9,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.dlall__sheet {
  position: relative;
  width: 100%;
  max-width: 32rem;
  max-height: min(86vh, 44rem);
  display: flex;
  flex-direction: column;
  background: var(--s1);
  border: 1px solid var(--b1);
  border-radius: var(--r-xl);
  box-shadow: 0 32px 90px rgba(0,0,0,0.6);
  padding: 1.6rem 1.6rem 0;
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.dlall__sheet:focus { outline: none; }
/* Off-screen rather than display:none, which can stop a frame loading at all. */
.dlall__frames {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.dlall__frames iframe { width: 0; height: 0; border: 0; }
.dlall.is-open .dlall__scrim { opacity: 1; }
.dlall.is-open .dlall__sheet { opacity: 1; transform: none; }
.dlall__hd {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.dlall__title {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--t1);
  line-height: 1.2;
}
.dlall__x {
  margin-left: auto;
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--b0);
  border: 1px solid var(--b1);
  border-radius: 10px;
  color: var(--t3);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.dlall__x:hover { color: var(--t1); background: var(--b1); border-color: var(--b2); }
.dlall__x:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.dlall__sub {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--t3);
  line-height: 1.55;
}
.dlall__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 1.1rem -0.4rem 0;
  padding: 0 0.4rem;
}
.dlall__bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-bottom: 0.7rem;
  font-size: 0.78rem;
}
.dlall__link {
  background: none;
  border: none;
  padding: 0;
  color: var(--blue);
  font-size: inherit;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border-radius: 4px;
}
.dlall__link:hover { text-decoration: underline; }
.dlall__link:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.dlall__dot { color: var(--t4); }
.dlall__sizing {
  margin-left: auto;
  color: var(--t4);
  font-variant-numeric: tabular-nums;
}
/* Select all/none and the sort headers pin together, so only the apps scroll. */
.dlall__head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--s1);
  margin: 0 -0.4rem;
  padding: 0 0.4rem;
}
.dlall__cols {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.1rem 0.5rem 0.5rem;
  background: var(--s1);
}
.dlall__sort {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  padding: 0.25rem 0.35rem;
  border-radius: 7px;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t4);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.dlall__sort:hover { color: var(--t2); background: var(--b0); }
.dlall__sort:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.dlall__sort.is-active { color: var(--blue); }
/* The caret stays faintly visible on the idle header so both columns read as sortable. */
.dlall__sort svg { opacity: 0.22; transition: opacity 0.15s, transform 0.15s; }
.dlall__sort:hover svg { opacity: 0.5; }
.dlall__sort.is-active svg { opacity: 1; }
.dlall__sort.is-desc svg { transform: rotate(180deg); }
.dlall__sort--size { margin-left: auto; }
.dlall__list { list-style: none; }
.dlall__row + .dlall__row { border-top: 1px solid var(--b0); }
.dlall__lbl {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.5rem;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.dlall__lbl:hover { background: var(--b0); }
.dlall__cb {
  width: 17px; height: 17px;
  flex-shrink: 0;
  accent-color: var(--blue);
  cursor: pointer;
}
.dlall__cb:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* The card icons are 64px; scale the clone rather than restyling each one, so every
   per-app gradient and svg rule keeps working untouched. */
.dlall__icon {
  position: relative;
  width: 28px; height: 28px;
  flex-shrink: 0;
}
.dlall__icon .app-icon {
  position: absolute;
  top: 0; left: 0;
  transform: scale(0.4375);
  transform-origin: top left;
}
.dlall__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--t1);
  letter-spacing: -0.015em;
}
.dlall__size {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--t3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dlall__lbl:has(.dlall__cb:not(:checked)) .dlall__name { color: var(--t3); }
.dlall__lbl:has(.dlall__cb:not(:checked)) .dlall__icon { opacity: 0.42; }
.dlall__list--run .dlall__row { padding: 0.55rem 0.5rem; display: flex; align-items: center; gap: 0.7rem; }
.dlall__status {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--t4);
  white-space: nowrap;
}
.dlall__status.is-started { color: #30D158; }
.dlall__ft {
  flex-shrink: 0;
  margin: 0 -1.6rem;
  padding: 0.9rem 1.6rem 1.3rem;
  border-top: 1px solid var(--b0);
  background: var(--s1);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.dlall__note {
  font-size: 0.75rem;
  color: var(--t4);
  line-height: 1.5;
  margin-bottom: 0.8rem;
}
.dlall__note strong { color: var(--t2); font-weight: 700; }
.dlall__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.dlall__actions[hidden] { display: none; }
.dlall__total {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--t2);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.dlall__actions .btn { margin-left: auto; }
.dlall__actions .btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.dlall__tip {
  margin-top: 1.1rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--b1);
  text-align: center;
}
.dlall__tip-hd {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--t1);
}
.dlall__tip-sub {
  margin: 0.35rem auto 1rem;
  max-width: 24rem;
  font-size: 0.82rem;
  color: var(--t3);
  line-height: 1.55;
}
.dlall__tip-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.dlall__tip-form .support-amounts { gap: 0.5rem; }
.dlall__tip-form .amount-chip { padding: 0.5rem 0.9rem; font-size: 0.85rem; }
.dlall__tip-form .amount-custom { padding: 0.5rem 0.75rem; font-size: 0.85rem; }
.dlall__tip-form .amount-custom input { width: 3.4rem; font-size: 0.85rem; }
.dlall__tip-form .btn--support { padding: 0.7rem 1.6rem; }
.dlall__tip-form .btn--support[disabled] { opacity: 0.55; cursor: progress; }
.dlall__tip-form .amount-chip:focus-visible,
.dlall__tip-form .btn--support:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dlall__tip-skip {
  font-size: 0.72rem;
  color: var(--t4);
}
@media (max-width: 560px) {
  .dlall { padding: 0; align-items: flex-end; }
  .dlall__sheet {
    max-width: none;
    max-height: 92vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-bottom: none;
    padding: 1.3rem 1.2rem 0;
  }
  .dlall__ft { margin: 0 -1.2rem; padding: 0.9rem 1.2rem 1.1rem; border-radius: 0; }
  .dlall__actions { flex-wrap: wrap; }
  .dlall__actions .btn { width: 100%; justify-content: center; }
  .dlall__total { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .dlall__scrim, .dlall__sheet { transition: none; }
  .dlall__sheet { transform: none; }
}