/*
 * Grok Bot Use Cases: shared styles for every page.
 * Palette: #FBFBFD and #F5F5F7 backgrounds, #1D1D1F text, #6E6E73 secondary text, one accent #0071E3.
 *
 * Motion follows the 12 principles of animation, tuned calm:
 *  - Slow in and slow out: every move uses an ease-out or ease-in-out curve, never linear.
 *  - Squash and stretch: only a percent or two, on presses, check marks, and vote counts.
 *  - Anticipation: buttons and chips dip before they act; the hero phone dips before it rises.
 *  - Staging, timing, overlapping action: one thing moves at a time, children trail their parent.
 *  - Arcs: the hero phone travels on a curve (separate X and Y easings).
 * Reveals are visible by default. They only hide when <html> has .reveal-on, which the head
 * script adds when IntersectionObserver exists, motion is allowed, and ?static=1 is absent.
 */

:root {
  --bg: #FBFBFD;
  --bg-alt: #F5F5F7;
  --surface: #FFFFFF;
  --text: #1D1D1F;
  --muted: #6E6E73;
  --accent: #0071E3;
  --accent-soft: rgba(0, 113, 227, 0.08);
  --line: rgba(0, 0, 0, 0.08);
  --line-2: rgba(0, 0, 0, 0.14);
  --error: #C4161C; /* Form errors only. Not used as a decorative color. */
  --max: 1120px;
  --radius: 22px;
  --font: "Inter Tight", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft-overshoot: cubic-bezier(0.34, 1.32, 0.64, 1);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.04), 0 18px 40px -18px rgba(0, 0, 0, 0.16);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.04), 0 40px 80px -30px rgba(0, 0, 0, 0.22);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-underline-offset: 3px; }
img, svg { display: block; }
p { margin: 0; }
h1, h2, h3 { margin: 0; color: var(--text); }
h1, h2 { font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip {
  position: absolute; left: 16px; top: 12px; z-index: 300;
  background: var(--text); color: #fff; padding: 10px 16px; border-radius: 999px;
  text-decoration: none; font-weight: 600; transform: translateY(-160%); transition: transform 0.3s var(--ease-out);
}
.skip:focus { transform: none; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }

.eyebrow { display: inline-block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--accent); }
.lede { color: var(--muted); font-size: clamp(18px, 1.7vw, 21px); line-height: 1.45; max-width: 660px; letter-spacing: -0.012em; }
.grad-text {
  background: linear-gradient(180deg, #1D1D1F 30%, #4a4a4f 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 251, 253, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 56px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 600; font-size: 16px; letter-spacing: -0.02em; }
.brand-mark {
  position: relative; width: 22px; height: 22px; border-radius: 7px;
  background: linear-gradient(180deg, #2b2b2e, #1D1D1F);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform 0.5s var(--ease-soft-overshoot);
}
.brand-mark::after { content: ""; position: absolute; left: 6px; top: 6px; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
.brand:hover .brand-mark { transform: rotate(90deg); }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; }
.nav-links a { text-decoration: none; color: var(--muted); transition: color 0.2s ease; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); }
@media (max-width: 760px) { .nav-links .hide-sm { display: none; } }
@media (max-width: 440px) { .nav-links .hide-xs { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; border: 1px solid transparent;
  background: var(--accent); color: #fff; font: inherit; font-size: 16px; font-weight: 500; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer;
  transition: transform 0.35s var(--ease-out), background-color 0.2s ease, box-shadow 0.35s var(--ease-out), border-color 0.2s ease;
}
.btn:hover { background: #0077ED; transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(0, 113, 227, 0.55); }
/* Anticipation: a small press squash before the action happens. */
.btn:active { transform: translateY(0) scale(0.98, 0.97); transition-duration: 0.1s; }
.btn-ghost { background: transparent; color: var(--accent); border-color: rgba(0, 113, 227, 0.35); }
.btn-ghost:hover { background: var(--accent-soft); box-shadow: none; }
.nav .btn-ghost { color: var(--text); border-color: var(--line-2); }
.nav .btn-ghost:hover { background: rgba(0,0,0,0.04); }
.btn-sm { padding: 8px 15px; font-size: 14px; }
.btn .arrow { display: inline-block; transition: transform 0.45s var(--ease-soft-overshoot) 0.03s; }
.btn:hover .arrow { transform: translateX(3px); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; background: var(--accent); }

/* ---------- Reveal and entrance motion (visible by default) ---------- */
.reveal-on .reveal:not(.is-in) { opacity: 0; transform: translate3d(0, 24px, 0); }
.reveal-on .reveal {
  transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.motion .enter { animation: enter 1s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 90ms + 60ms); }
@keyframes enter { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }

/* ---------- Sections ---------- */
.section { padding: clamp(88px, 11vw, 140px) 0; }
.section-alt { background: var(--bg-alt); }
.section-head { display: grid; gap: 16px; max-width: 760px; margin-bottom: clamp(40px, 5vw, 56px); }
.section-head h2 { font-size: clamp(36px, 5vw, 56px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(64px, 8vw, 104px) 0 clamp(40px, 5vw, 64px);
  background:
    radial-gradient(120% 70% at 50% 0%, #FFFFFF 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
}
.hero-inner { display: grid; justify-items: center; text-align: center; gap: 22px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  font-size: 14px; color: var(--muted); text-decoration: none; background: rgba(255,255,255,0.8);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: color 0.2s ease, border-color 0.2s ease;
}
.pill:hover { color: var(--text); border-color: var(--line-2); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.hero h1 { font-size: clamp(42px, 6.8vw, 80px); letter-spacing: -0.042em; line-height: 1.04; max-width: 920px; }
.hero h1 .soft { color: var(--muted); }
.hero .lede { margin: 0 auto; }
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 6px; }
.capabilities { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--muted); }
.capabilities b { color: var(--text); font-weight: 600; margin-right: 4px; }

/* ---------- Hero devices: real screenshots in CSS frames ---------- */
/* Sizes use container units (cqw = 1% of .device-stage), so both frames scale together and keep their proportions.
   Each screen box has the exact aspect ratio of its screenshot, so object-fit: cover never crops anything. */
.devices { margin: clamp(48px, 6vw, 72px) 0 0; width: 100%; display: grid; justify-items: center; gap: 0; }
.device-stage {
  position: relative; width: min(100%, 700px); container-type: inline-size;
  margin-bottom: min(42px, 6vw); /* room for the phone, which hangs a little below the tablet */
}
.device-stage::before {
  /* Soft studio light under the devices. Neutral, not a colored glow. */
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -3%; height: 18%; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,0.18), rgba(0,0,0,0) 70%);
  filter: blur(18px);
}
.device-stage img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.tablet {
  position: relative; width: 74%; width: 74cqw; padding: 2.3%; padding: 2.3cqw;
  border-radius: 28px; border-radius: 4.6cqw;
  background: linear-gradient(160deg, #2c2c2e, #1D1D1F 45%, #111113);
  box-shadow: 0 0 0 1px #c9c9ce, 0 0 0 2px #ececf0, var(--shadow-lg);
}
.tablet::before { content: ""; position: absolute; top: 0.85cqw; left: 50%; width: 0.6cqw; height: 0.6cqw; margin-left: -0.3cqw; border-radius: 50%; background: #3a3a3c; }
.tablet-screen { overflow: hidden; border-radius: 2.4cqw; background: #fff; aspect-ratio: 1228 / 1640; }

.phone-pos { position: absolute; right: 0; bottom: -6cqw; width: 30%; width: 30cqw; z-index: 2; }
.phone {
  position: relative; padding: 1%; padding: 1cqw; border-radius: 14%; border-radius: 5cqw;
  background: linear-gradient(145deg, #3a3a3c, #1D1D1F 40%, #0e0e10);
  box-shadow: 0 0 0 1px #a1a1a6, 0 0 0 2.5px rgba(251,251,253,0.9), 0 30px 50px -18px rgba(0,0,0,0.5), 0 10px 22px -8px rgba(0,0,0,0.25);
}
.phone::before, .phone::after { content: ""; position: absolute; width: 0.4cqw; border-radius: 0.4cqw; background: #8e8e93; }
.phone::before { left: -0.5cqw; top: 11cqw; height: 4cqw; box-shadow: 0 5.5cqw 0 #8e8e93; } /* volume keys */
.phone::after { right: -0.5cqw; top: 14cqw; height: 6.5cqw; } /* side button */
.phone-screen { overflow: hidden; border-radius: 4cqw; background: #fff; aspect-ratio: 858 / 1960; }

.device-credit { margin-top: 18px; font-size: 13px; line-height: 1.4; color: var(--muted); text-align: center; }

/* Entrance, calm and in order (staging): the tablet rises first, the phone follows on a curve, the credit fades in last. */
.motion .tablet { animation: device-in 1.4s var(--ease-out) 0.35s both; }
@keyframes device-in { from { opacity: 0; transform: translate3d(0, 48px, 0) scale(0.97); } to { opacity: 1; transform: none; } }
/* Arc: X eases out while Y eases in-out, so the phone travels on a curve. Anticipation: a small dip first.
   Follow through: it lifts a few pixels past its mark, then settles. */
.motion .phone-pos { animation: phone-x 1.3s var(--ease-out) 1.05s both; }
.motion .phone { animation: phone-y 1.3s var(--ease-in-out) 1.05s both; }
@keyframes phone-x { from { opacity: 0; transform: translate3d(48px, 0, 0); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes phone-y {
  0% { transform: translate3d(0, 44px, 0) scale(0.97); }
  12% { transform: translate3d(0, 50px, 0) scale(0.97); }
  82% { transform: translate3d(0, -4px, 0) scale(1); }
  100% { transform: none; }
}
.motion .device-credit { animation: fade-in 0.9s ease-out 2.1s both; }

/* ---------- Ad slots ---------- */
.ad-band { padding: clamp(40px, 6vw, 72px) 0; }
.ad-band-hero { background: var(--bg-alt); padding-top: clamp(56px, 7vw, 88px); padding-bottom: 0; }
.ad-band-footer { padding: 0 0 56px; }
.ad-slot {
  position: relative; display: grid; place-items: center; margin: 0 auto; width: 100%;
  border-radius: 18px; border: 1px dashed var(--line-2); text-decoration: none; color: var(--text);
  background: linear-gradient(180deg, #FFFFFF, #F7F7F9);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.25s ease;
}
.ad-hero { max-width: 970px; aspect-ratio: 970 / 250; }
.ad-rect { max-width: 300px; aspect-ratio: 300 / 250; }
.ad-footer { max-width: 728px; aspect-ratio: 728 / 90; }
@media (max-width: 760px) {
  .ad-hero { max-width: 320px; aspect-ratio: 320 / 100; }
  .ad-footer { max-width: 320px; aspect-ratio: 320 / 50; }
}
.ad-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }
.ad-slot .ad-tag { position: absolute; top: 10px; left: 14px; }
.ad-dims { position: absolute; top: 10px; right: 14px; font-size: 11px; color: var(--muted); line-height: 1; font-variant-numeric: tabular-nums; }
.ad-dims .d-sm { display: none; }
@media (max-width: 760px) { .ad-dims .d-lg { display: none; } .ad-dims .d-sm { display: inline; } }
.ad-cta { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(14px, 1.6vw, 17px); font-weight: 500; padding: 0 14px; }
.ad-plus {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-size: 17px; line-height: 1; transition: transform 0.5s var(--ease-soft-overshoot);
}
.ad-slot .arrow { color: var(--accent); transition: transform 0.45s var(--ease-soft-overshoot) 0.06s; }
.ad-slot:hover, .ad-slot:focus-visible { transform: translateY(-2px); border-style: solid; border-color: rgba(0,113,227,0.35); box-shadow: var(--shadow-md); }
.ad-slot:hover .ad-plus, .ad-slot:focus-visible .ad-plus { transform: rotate(90deg); }
.ad-slot:hover .arrow, .ad-slot:focus-visible .arrow { transform: translateX(3px); }
.ad-slot:active { transform: translateY(0) scale(0.995, 0.985); transition-duration: 0.1s; }
@media (max-width: 760px) {
  .ad-hero .ad-cta, .ad-footer .ad-cta { font-size: 12.5px; gap: 7px; }
  .ad-hero .ad-plus, .ad-footer .ad-plus { width: 20px; height: 20px; font-size: 14px; }
  .ad-footer .ad-tag { top: 5px; font-size: 9px; }
  .ad-footer .ad-dims { display: none; }
  .ad-footer .ad-cta { margin-top: 10px; }
}

/* ---------- Filters and category sponsor ---------- */
/*
 * A segmented Personal / Business toggle with subcategory chips beneath it. Both are generated
 * from data/templates.json by data/build.py. The page script animates them; see "Category filters".
 */
.filters { display: none; flex-direction: column; align-items: flex-start; gap: 14px; margin: 0 0 18px; }
.js .filters { display: flex; }

.seg {
  position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  width: min(100%, calc(var(--n, 3) * 150px)); padding: 3px; border-radius: 12px;
  background: rgba(118, 118, 128, 0.12);
}
/* The thumb is one segment wide. The script slides it with transform only. */
.seg-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n, 3));
  transform: translateX(calc(var(--i, 0) * 100%)); pointer-events: none;
}
.seg-thumb i {
  display: block; height: 100%; border-radius: 9px; background: var(--surface);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 3px 8px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}
.seg-btn {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 36px; padding: 6px 14px; border: 0; border-radius: 9px; background: none; color: var(--muted);
  font: inherit; font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; cursor: pointer;
  transition: color 0.3s ease, transform 0.3s var(--ease-out);
}
.seg-btn:hover { color: var(--text); }
/* Anticipation: a small dip on press, before the thumb sets off. */
.seg-btn:active { transform: scale(0.96, 0.94); transition-duration: 0.1s; }
.seg-btn[aria-pressed="true"] { color: var(--text); font-weight: 600; }
.seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.seg-count { font-size: 12.5px; font-weight: 500; opacity: 0.55; font-variant-numeric: tabular-nums; }

.subchips { display: flex; flex-wrap: wrap; gap: 8px; }
.subchips > [hidden] { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font: inherit; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; cursor: pointer;
  transition: transform 0.3s var(--ease-out), background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease;
}
.chip:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.chip:active { transform: scale(0.97, 0.95); transition-duration: 0.1s; }
.chip[aria-pressed="true"] { background: var(--text); color: #fff; border-color: var(--text); }
.chip-lead { color: var(--muted); }
.chip-lead[aria-pressed="true"] { color: #fff; }
.chip.is-picked { animation: chip-pop 0.45s var(--ease-out); }
@keyframes chip-pop { 0% { transform: scale(0.97, 0.95); } 55% { transform: scale(1.02, 0.99); } 100% { transform: none; } }
.chip-count { font-size: 12.5px; font-weight: 500; opacity: 0.6; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .seg { width: 100%; } .seg-btn { padding: 6px 8px; } }

.cat-sponsor {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px;
  padding: 10px 18px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
  font-size: 14.5px; color: var(--muted);
}
.cat-sponsor .ad-tag { padding-right: 12px; border-right: 1px solid var(--line-2); }
.cat-sponsor-name { display: inline-block; color: var(--text); font-weight: 600; }
.cat-sponsor a { color: var(--accent); font-weight: 500; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.cat-sponsor a:hover { text-decoration: underline; }
.cat-sponsor a .arrow { transition: transform 0.45s var(--ease-soft-overshoot); }
.cat-sponsor a:hover .arrow { transform: translateX(3px); }
@media (max-width: 620px) { .cat-sponsor { border-radius: 16px; row-gap: 4px; } }
.filter-status { font-size: 14px; color: var(--muted); min-height: 1.4em; margin: 0 0 22px; }

/* ---------- Cards ---------- */
.cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin: 0; padding: 0; list-style: none; }
.cards > li { display: flex; }
.cards > li[hidden] { display: none; }
.card {
  position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%;
  padding: 26px 26px 20px; border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,0.04);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.kind { font-size: 12.5px; font-weight: 600; color: var(--muted); letter-spacing: -0.005em; }
.kind-tpl { color: var(--accent); }
.badge-new {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; vertical-align: 1px;
  background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 600;
}
.kind-ad { color: var(--muted); }
.icon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(180deg, #FFFFFF, #F2F2F5); border: 1px solid var(--line); color: var(--text);
  transition: transform 0.6s var(--ease-soft-overshoot);
}
.icon svg { width: 20px; height: 20px; }
.card-tpl .icon { color: var(--accent); }
/* Secondary action: the icon tilts a little after the card lifts. */
.card:hover .icon { transform: rotate(-6deg) translateY(-1px); }
.cat { font-size: 13px; color: var(--muted); }
.card h3 { font-size: 20px; }
.card p { color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.card .ex { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.card .inspired { font-size: 13.5px; padding-top: 10px; border-top: 1px solid var(--line); margin-top: auto; }
.card .inspired a { color: var(--accent); text-decoration: none; }
.card .inspired a:hover { text-decoration: underline; }
.card-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; }
.card .inspired + .card-foot { margin-top: 0; padding-top: 4px; }
.card-ad { background: linear-gradient(180deg, #FFFFFF, #F7F7F9); border: 1px dashed var(--line-2); box-shadow: none; }
.card-cta { justify-content: space-between; background: linear-gradient(180deg, #FFFFFF 0%, #F2F6FC 100%); }
.card-cta h3 { font-size: 24px; letter-spacing: -0.025em; }

/* Votes */
.votes { display: inline-flex; gap: 6px; margin-left: auto; }
.vote {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; font-size: 13.5px; cursor: pointer;
  transition: transform 0.25s var(--ease-out), color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.vote svg { width: 14px; height: 14px; }
.vote:hover { color: var(--text); border-color: var(--line-2); }
.vote:active { transform: scale(0.94, 0.9); transition-duration: 0.1s; }
.vote[aria-pressed="true"] { color: var(--accent); border-color: rgba(0,113,227,0.35); background: var(--accent-soft); }
.vote-down[aria-pressed="true"] { color: var(--text); border-color: var(--line-2); background: #EDEDF0; }
.vote-count { display: inline-block; min-width: 1ch; font-variant-numeric: tabular-nums; }
.vote-up.is-bumped svg { animation: hop-up 0.5s var(--ease-out); }
.vote-down.is-bumped svg { animation: hop-down 0.5s var(--ease-out); }
.vote.is-bumped .vote-count { animation: count-roll 0.4s var(--ease-out) 0.06s both; }
@keyframes hop-up { 0% { transform: none; } 25% { transform: translateY(1px) scale(1.06, 0.92); } 60% { transform: translateY(-3px) scale(0.97, 1.04); } 100% { transform: none; } }
@keyframes hop-down { 0% { transform: none; } 25% { transform: translateY(-1px) scale(1.06, 0.92); } 60% { transform: translateY(3px) scale(0.97, 1.04); } 100% { transform: none; } }
@keyframes count-roll { from { opacity: 0; transform: translateY(var(--roll, 6px)); } to { opacity: 1; transform: none; } }

/* ---------- Sponsors tiers ---------- */
.tiers { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.tier {
  display: flex; flex-direction: column; gap: 14px; padding: 32px 30px; border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,0.04);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.tier:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tier.featured { box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-md); }
.tier-label { font-size: 13px; font-weight: 600; color: var(--accent); }
.tier h3 { font-size: 26px; letter-spacing: -0.03em; }
.tier p { color: var(--muted); }
.tier ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 15px; }
.tier li { padding-left: 24px; position: relative; }
.tier li::before { content: ""; position: absolute; left: 2px; top: 0.45em; width: 11px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.tier .btn { margin-top: auto; align-self: flex-start; }
.note { margin-top: 28px; color: var(--muted); font-size: 15px; max-width: 760px; }

/* ---------- CTA band, newsletter ---------- */
.cta-band, .newsletter {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; align-items: center;
  padding: clamp(36px, 5vw, 60px); border-radius: 28px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 100%); box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,0.04);
}
.cta-band h2, .newsletter h2 { font-size: clamp(30px, 3.8vw, 44px); margin-top: 10px; }
.cta-band .lede, .newsletter .lede { margin-top: 14px; font-size: 18px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
@media (max-width: 820px) { .cta-band, .newsletter { grid-template-columns: 1fr; } .cta-actions { justify-content: flex-start; } }
.nl-form { display: grid; gap: 10px; }
.nl-row { display: flex; flex-wrap: wrap; gap: 10px; }
.nl-row input { flex: 1 1 220px; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0; max-width: 860px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 2px; cursor: pointer; list-style: none; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-weight: 600; }
.plus { position: relative; flex: none; width: 22px; height: 22px; transition: transform 0.45s var(--ease-soft-overshoot); }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.75px; margin: -0.9px 0 0 -7px; border-radius: 2px; background: var(--text); }
.plus::after { transform: rotate(90deg); transition: transform 0.45s var(--ease-out); }
details[open] .plus { transform: rotate(180deg); }
details[open] .plus::after { transform: rotate(0deg); }
.answer { padding: 0 2px 26px; color: var(--muted); max-width: 720px; }
.motion details[open] .answer { animation: answer-in 0.5s var(--ease-out); }
@keyframes answer-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-aside { display: grid; gap: 16px; }
.contact-aside h2 { font-size: clamp(36px, 5vw, 56px); }
.direct { color: var(--muted); font-size: 15px; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.direct strong { color: var(--text); font-weight: 600; }
form.contact {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: clamp(24px, 3.5vw, 36px);
  border-radius: 28px; background: var(--surface); box-shadow: var(--shadow-md); border: 1px solid rgba(0,0,0,0.04);
}
@media (max-width: 620px) { form.contact { grid-template-columns: 1fr; } }
.field { display: grid; gap: 7px; align-content: start; }
.field.full, .form-foot, form.contact .status { grid-column: 1 / -1; }
.field[hidden] { display: none; }
label { font-size: 14px; font-weight: 600; color: var(--text); }
.req { color: var(--accent); margin-left: 2px; }
.opt { color: var(--muted); font-weight: 400; margin-left: 6px; }
input, select, textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--text);
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.25s ease;
}
textarea { min-height: 130px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #a1a1a6; }
input:hover, select:hover, textarea:hover { border-color: rgba(0,0,0,0.24); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0,113,227,0.15); }
[aria-invalid="true"] { border-color: var(--error); }
[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(196,22,28,0.12); border-color: var(--error); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.hint { font-size: 13.5px; color: var(--muted); }
.error { font-size: 13.5px; color: var(--error); }
.error:empty { display: none; }
.motion .error:not(:empty) { animation: nudge 0.4s var(--ease-out); }
@keyframes nudge { 0% { opacity: 0; transform: translateX(-5px); } 100% { opacity: 1; transform: none; } }
.status { font-size: 15px; padding: 14px 16px; border-radius: 12px; margin-top: 4px; }
.status:empty { display: none; }
.status.ok { background: var(--accent-soft); border: 1px solid rgba(0,113,227,0.25); color: var(--text); }
.status.err { background: #FBEDED; border: 1px solid rgba(196,22,28,0.25); color: var(--text); }
.status a { color: var(--accent); }
.flash { animation: flash 0.8s var(--ease-out); }
@keyframes flash { 0% { transform: scale(0.99); } 45% { transform: scale(1.005); } 100% { transform: none; } }

/* ---------- Footer ---------- */
footer { background: var(--bg-alt); border-top: 1px solid var(--line); padding: 56px 0 64px; color: var(--muted); font-size: 14px; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px; align-items: flex-start; }
.foot nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.foot a { text-decoration: none; color: var(--muted); transition: color 0.2s ease; }
.foot a:hover, .foot a[aria-current="page"] { color: var(--text); }
.foot .brand { color: var(--text); }
.foot small { display: block; margin-top: 10px; font-size: 13px; max-width: 460px; }
.copyright { display: block; margin-top: 28px; font-size: 13px; }
.disclaimer { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; max-width: 720px; }

/* ---------- Terms clickwrap modal ---------- */
.modal-root { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.modal-root[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(245, 245, 247, 0.72); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
.modal {
  position: relative; display: grid; gap: 16px; width: min(540px, 100%); padding: clamp(26px, 4vw, 36px);
  border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.06), var(--shadow-lg);
}
.modal:focus { outline: none; }
.modal h2 { font-size: clamp(26px, 3vw, 32px); }
.modal p { color: var(--muted); font-size: 15.5px; }
.modal .tpl-name { color: var(--text); font-weight: 600; }
.consent { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--bg-alt); border: 1px solid transparent; transition: border-color 0.25s ease, background-color 0.25s ease; }
.consent:has(input:checked) { border-color: rgba(0,113,227,0.35); background: var(--accent-soft); }
.consent label { font-size: 15px; font-weight: 500; line-height: 1.5; cursor: pointer; }
.consent input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0; padding: 0;
  border-radius: 7px; border: 1.5px solid #b8b8bd; background: #fff; cursor: pointer; display: grid; place-items: center;
}
.consent input[type="checkbox"]::after { content: ""; width: 10px; height: 5px; margin-top: -3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) scale(0); transition: transform 0.3s var(--ease-soft-overshoot); }
.consent input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); animation: check-pop 0.4s var(--ease-out); }
.consent input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); }
@keyframes check-pop { 0% { transform: scale(0.9); } 50% { transform: scale(1.08, 0.94); } 100% { transform: none; } }
.modal-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; margin-top: 4px; }
.btn.is-ready { animation: ready-hop 0.5s var(--ease-out); }
@keyframes ready-hop { 0% { transform: none; } 30% { transform: scale(1.03, 0.97); } 65% { transform: translateY(-2px) scale(0.99, 1.01); } 100% { transform: none; } }
.modal-root.is-open .modal-backdrop { animation: fade-in 0.35s var(--ease-out) both; }
.modal-root.is-open .modal { animation: modal-in 0.6s var(--ease-out) 0.04s both; }
.modal-root.is-open .modal > * { animation: enter 0.6s var(--ease-out) both; animation-delay: calc(var(--m, 0) * 50ms + 140ms); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translate3d(0, 20px, 0) scale(0.97); } to { opacity: 1; transform: none; } }
.modal-root.is-closing .modal-backdrop { animation: fade-out 0.3s var(--ease-in-out) 0.06s both; }
.modal-root.is-closing .modal { animation: modal-out 0.32s var(--ease-in-out) both; }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes modal-out { 0% { opacity: 1; transform: none; } 25% { opacity: 1; transform: translate3d(0, -3px, 0); } 100% { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.97); } }
body.modal-lock { overflow: hidden; }

/* ---------- Inner pages (blog, post, terms) ---------- */
.page-head {
  padding: clamp(72px, 10vw, 120px) 0 clamp(40px, 6vw, 64px);
  background: radial-gradient(120% 80% at 50% 0%, #FFFFFF 0%, rgba(255,255,255,0) 60%), linear-gradient(180deg, var(--bg), var(--bg-alt));
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(48px, 7vw, 80px);
}
.page-head .wrap { display: grid; gap: 18px; max-width: 860px; }
.page-head h1 { font-size: clamp(42px, 6.4vw, 72px); letter-spacing: -0.045em; }
.meta { font-size: 14px; color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: #a1a1a6; }
.crumbs a { color: var(--muted); text-decoration: none; transition: color 0.2s ease; }
.crumbs a:hover { color: var(--text); }
.inner .section { padding: 0 0 clamp(72px, 10vw, 120px); }
.section-title { font-size: 28px; letter-spacing: -0.03em; margin-bottom: 22px; }
.posts { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); margin: 0; padding: 0; list-style: none; }
.post-card {
  display: grid; gap: 12px; height: 100%; padding: 30px; border-radius: var(--radius); text-decoration: none; color: inherit;
  background: var(--surface); box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,0.04);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.post-card .tag { font-size: 13px; font-weight: 600; color: var(--accent); }
.post-card h2 { font-size: 24px; letter-spacing: -0.03em; line-height: 1.2; }
.post-card p { color: var(--muted); font-size: 16px; }
.post-card .more { display: inline-flex; gap: 6px; align-items: center; font-size: 15px; font-weight: 500; color: var(--accent); }
.post-card .more .arrow { display: inline-block; transition: transform 0.45s var(--ease-soft-overshoot) 0.05s; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.post-card:hover .more .arrow { transform: translateX(3px); }

.prose, .legal { max-width: 760px; margin: 0 auto; padding: 0 24px clamp(72px, 10vw, 120px); }
.prose section { margin-bottom: 48px; }
.prose h2, .legal h2 { font-size: clamp(26px, 2.8vw, 32px); letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 14px; }
.prose h3 { margin: 22px 0 8px; }
.prose p, .prose li, .legal p, .legal li { color: #424245; font-size: 17px; line-height: 1.6; }
.prose p + p, .legal p + p { margin-top: 14px; }
.prose ol, .prose ul, .legal ul { margin: 14px 0 0; padding-left: 22px; }
.prose li, .legal li { margin: 8px 0; }
.prose .small { font-size: 15px; color: var(--muted); }
.callout { padding: 18px 20px; border-radius: 16px; background: var(--bg-alt); color: var(--text); margin-bottom: 36px; }
.legal .callout { margin: 0; }
.callout p { color: var(--text); font-weight: 500; }
.pick { padding: 22px 24px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,0.04); margin-top: 14px; }
.pick h3 { margin-top: 0; }
.ph { padding: 1px 6px; border-radius: 6px; border: 1px dashed rgba(0,113,227,0.45); background: var(--accent-soft); color: #0058b0; }

.toc { padding: 24px 26px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,0.04); margin-bottom: 48px; }
.legal .toc h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--muted); margin-bottom: 12px; }
.toc ol { margin: 0; padding-left: 20px; columns: 2 240px; column-gap: 32px; color: var(--muted); font-size: 15px; }
.legal .toc li { margin: 0; padding: 3px 0; break-inside: avoid; font-size: 15px; }
.legal .toc a { text-decoration: none; color: var(--text); transition: color 0.2s ease; }
.legal .toc a:hover { color: var(--accent); }
.legal section { padding-top: 12px; margin-bottom: 40px; scroll-margin-top: 80px; }
.legal h2 .n { font-size: 0.55em; color: var(--muted); margin-right: 12px; vertical-align: 0.25em; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.legal .caps { font-size: 14.5px; letter-spacing: 0.01em; }

/* ---------- Show all templates ---------- */
/*
 * The full grid shows its first rows only; the page script works out how many from the live column count.
 * Collapsed cards keep their place in the DOM, so search and filters still see every one of them.
 * Motion: the button dips on press (anticipation), the chevron swings over with a small overshoot
 * (follow through), and the revealed cards rise one after another (overlapping action).
 */
.cards > li.is-collapsed { display: none; }
.more-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 30px 0 0; }
.more-wrap[hidden] { display: none; }
.more-btn {
  gap: 12px; padding: 12px 16px 12px 24px; background: var(--surface); color: var(--text);
  border-color: var(--line-2); box-shadow: var(--shadow-sm);
}
.more-btn:hover { background: var(--surface); border-color: rgba(0, 0, 0, 0.24); box-shadow: var(--shadow-md); }
.more-label { display: inline-block; }
.more-count { display: inline-block; color: var(--muted); font-variant-numeric: tabular-nums; }
.chev {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  transition: transform 0.6s var(--ease-soft-overshoot);
}
.chev svg { width: 13px; height: 13px; }
/* A small nudge in the direction the content will go, before the click. */
.more-btn:hover .chev { transform: translateY(2px); }
.more-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.more-btn[aria-expanded="true"]:hover .chev { transform: rotate(180deg) translateY(2px); }
.more-note { font-size: 13.5px; color: var(--muted); }
.more-note:empty { display: none; }

/* ---------- Contact hub (home) and form pages ---------- */
.hub { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 0; padding: 0; list-style: none; }
.hub .post-card h3 { font-size: 24px; letter-spacing: -0.03em; line-height: 1.2; }
.hub-direct { margin-top: 22px; font-size: 15px; color: var(--muted); }
.form-aside { display: grid; gap: 16px; align-content: start; }
.form-aside h2 { font-size: clamp(26px, 2.8vw, 32px); letter-spacing: -0.03em; line-height: 1.15; }
.form-aside p { color: var(--muted); }
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; counter-reset: step; }
.steps li { position: relative; padding-left: 38px; color: #424245; font-size: 16px; line-height: 1.5; counter-increment: step; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--accent); background: var(--accent-soft);
}
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.field legend { padding: 0; margin-bottom: 7px; font-size: 14px; font-weight: 600; color: var(--text); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; display: inline-flex; font-weight: 500; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line-2); background: #fff; color: var(--text); font-size: 15px; letter-spacing: -0.01em;
  transition: transform 0.3s var(--ease-out), background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease;
}
.choice:hover span { border-color: rgba(0, 0, 0, 0.24); box-shadow: var(--shadow-sm); }
.choice input:active + span { transform: scale(0.97, 0.95); transition-duration: 0.1s; }
.choice input:checked + span { background: var(--text); color: #fff; border-color: var(--text); }
.motion .choice input:checked + span { animation: chip-pop 0.45s var(--ease-out); }
.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.choices[aria-invalid="true"] .choice span { border-color: var(--error); }
select:disabled { color: var(--muted); background: var(--bg-alt); cursor: not-allowed; }
.counter { font-size: 12.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.consent.field { display: flex; }
.consent[aria-invalid="true"] { border-color: var(--error); }
.status.is-new { animation: status-in 0.55s var(--ease-out); }
@keyframes status-in {
  0% { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.99); }
  65% { opacity: 1; transform: translate3d(0, -1px, 0) scale(1.003, 0.998); }
  100% { opacity: 1; transform: none; }
}
form.contact .btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
  .card:hover, .tier:hover, .post-card:hover, .btn:hover, .ad-slot:hover, .chip:active, .seg-btn:active, .vote:active, .card:hover .icon,
  .more-btn:hover .chev, .choice input:active + span { transform: none; }
  .more-btn[aria-expanded="true"] .chev, .more-btn[aria-expanded="true"]:hover .chev { transform: rotate(180deg); }
}

/* Links from the section intro into a subcategory filter. */
.section-head .lede a { color: var(--accent); text-decoration: none; }
.section-head .lede a:hover { text-decoration: underline; }
.inspired .source-tag{display:inline-block;font-size:.72em;font-weight:600;padding:.1em .55em;margin-right:.4em;border-radius:999px;background:rgba(37,99,235,.12);color:#2563eb}

/* ---------- v3 layout: compact header, trending row, templates first ---------- */
.lead { padding: clamp(28px, 4vw, 44px) 0 clamp(18px, 2.4vw, 26px); background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%); }
.lead-inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; }
.lead-copy { display: grid; gap: 8px; max-width: 640px; }
.lead h1 { font-size: clamp(32px, 4.2vw, 48px); letter-spacing: -0.038em; line-height: 1.05; }
.lead-sub { margin: 0; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.45; color: var(--muted); }
.lead-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.search {
  display: flex; align-items: center; gap: 10px; width: min(380px, 100%); height: 46px; padding: 0 16px;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  color: var(--muted); transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.search svg { width: 18px; height: 18px; flex: none; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--text); }
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.lead .pill { white-space: nowrap; }
.section-tight { padding-top: clamp(20px, 2.6vw, 28px); }
.row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 6px 0 14px; }
.row-head-all { margin-top: 30px; }
.row-head-all .row-title { scroll-margin-top: 76px; }
.row-title { font-size: clamp(20px, 2vw, 24px); letter-spacing: -0.02em; line-height: 1.2; }
.row-link { font-size: 15px; color: var(--accent); text-decoration: none; white-space: nowrap; }
.row-link:hover { text-decoration: underline; }
.trending[hidden] { display: none; }
.trend-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 14px;
  margin: 0 calc(-1 * var(--gutter, 24px)); padding: 4px var(--gutter, 24px) 14px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter, 24px); scrollbar-width: thin;
}
@media (min-width: 1100px) { .trend-row { grid-auto-columns: calc((100% - 3 * 14px - 2 * var(--gutter, 24px)) / 4); } }
.trend-item { display: flex; scroll-snap-align: start; }
.trend-card {
  display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 18px 18px 16px;
  border-radius: var(--radius); background: var(--surface); border: 1px solid rgba(0,0,0,0.04); box-shadow: var(--shadow-sm);
  color: var(--text); text-decoration: none; transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.trend-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.trend-card:active { transform: translateY(-1px) scale(0.99); transition-duration: 0.12s; }
.trend-top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.trend-top .badge-new { margin-left: 0; }
.trend-top .icon { margin-left: auto; }
.trend-rank { font-size: 13px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; min-width: 22px; }
.icon-sm { width: 32px; height: 32px; border-radius: 10px; }
.icon-sm svg { width: 18px; height: 18px; }
.trend-card .cat { font-size: 12.5px; color: var(--muted); }
.trend-name { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.trend-desc { font-size: 14px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.trend-open { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 500; color: var(--accent); }
.trend-card .arrow { display: inline-block; transition: transform 0.35s var(--ease-out); }
.trend-card:hover .arrow { transform: translateX(3px); }
.motion .trend-item { animation: enter 0.9s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms + 260ms); }
.section-foot { margin: clamp(48px, 6vw, 72px) 0 0; }
.section-foot h2 { font-size: clamp(26px, 3vw, 34px); }

/* App screenshots, small, near the bottom. */
.app-shots { padding: 8px 0 clamp(40px, 5vw, 56px); }
.app-shots .devices { margin: 0; }
.app-shots .device-stage { width: auto; height: 220px; margin: 0; display: flex; align-items: flex-end; justify-content: center; gap: 18px; container-type: normal; }
.app-shots .device-stage::before { display: none; }
.app-shots .tablet, .app-shots .phone-pos { position: static; width: auto; height: 220px; animation: none !important; }
.app-shots .tablet { padding: 7px; border-radius: 16px; aspect-ratio: auto; }
.app-shots .tablet::before { display: none; }
.app-shots .tablet-screen { height: 206px; width: auto; border-radius: 10px; }
.app-shots .phone { height: 220px; padding: 4px; border-radius: 22px; animation: none !important; }
.app-shots .phone::before, .app-shots .phone::after { display: none; }
.app-shots .phone-screen { height: 212px; width: auto; border-radius: 18px; }
.app-shots .device-credit { margin-top: 12px; }
@media (max-width: 760px) {
  .lead-inner { align-items: stretch; }
  .lead-tools, .search { width: 100%; }
  .lead .pill { display: none; }
  .trend-row { grid-auto-columns: 78%; }
  .app-shots .device-stage, .app-shots .tablet, .app-shots .phone-pos, .app-shots .phone { height: 180px; }
  .app-shots .tablet-screen { height: 166px; }
  .app-shots .phone-screen { height: 172px; }
}
.trending { margin-top: 8px; }
@media (min-width: 1100px) {
  .trend-row { margin: 0; padding: 4px 0 14px; grid-auto-columns: calc((100% - 3 * 14px) / 4); scroll-padding: 0; }
}
@media (max-width: 760px) {
  /* One swipeable row of chips on phones, so the templates stay near the top. */
  .subchips { flex-wrap: nowrap; overflow-x: auto; width: calc(100% + 48px); margin: 0 -24px; padding: 2px 24px 6px; scrollbar-width: none; }
  .subchips::-webkit-scrollbar { display: none; }
  .subchips .chip { flex: none; }
  .lead { padding-top: 22px; }
  .lead-copy { gap: 6px; }
}