/* ============================================================================
   getapps.cafe - macOS-toned skin (the site's only theme)
   Loaded by every page. The former warm-coffee theme has been retired.

   Design tokens borrowed from the pixpresso desktop app: neutral macOS grays
   for light/dark, SF system blue accent, -apple-system font. Light/dark is
   driven by prefers-color-scheme by default; a sidebar toggle can force a
   theme via :root[data-theme].

   IMPORTANT: this stylesheet reuses the existing markup hooks so app.js /
   signin.js work unchanged - class/id names (#sidebar, .nav-item, .plan-cta,
   .auth-modal, …) match the default theme on purpose.
============================================================================ */

/* ---- Light tokens (default) ---- */
:root {
  --bg: #eef1f5;
  --bg-warm: #e4e8ee;
  --panel: #ffffff;
  --panel-soft: #f3f5f9;
  --card: var(
    --panel
  ); /* alias: some admin/account inline styles use var(--card) */
  --ink: #1a2233;
  --ink-soft: #3d4759;
  --muted: #8a93a3;
  --accent: #007aff;
  --accent-soft: #5aa9ff;
  --accent-hover: #0066d6;
  --on-accent: #ffffff;
  --accent-rgb: 0, 122, 255;
  --accent-tint: rgba(0, 122, 255, 0.12);
  /* Free/"On the House" green - same hue as the FREE ribbon on the cards. */
  --free: #1f8a4c;
  --free-tint: rgba(31, 138, 76, 0.14);
  --line: rgba(26, 34, 51, 0.12);
  --line-strong: rgba(26, 34, 51, 0.2);
  --shadow-sm:
    0 1px 2px rgba(26, 34, 51, 0.06), 0 1px 1px rgba(26, 34, 51, 0.04);
  --shadow-md: 0 6px 20px rgba(26, 34, 51, 0.1);
  --shadow-lg: 0 20px 60px rgba(26, 34, 51, 0.18);
  --backdrop: rgba(26, 34, 51, 0.4);
}

/* ---- Dark tokens ---- */
/* Forced dark (toggle) … */
:root[data-theme="dark"] {
  --bg: #16181d;
  --bg-warm: #2a2e36;
  --panel: #1e2127;
  --panel-soft: #24272e;
  --ink: #f0f2f5;
  --ink-soft: #c2c8d2;
  --muted: #828b99;
  --accent: #0a84ff;
  --accent-soft: #4ea3ff;
  --accent-hover: #3d9bff;
  --on-accent: #ffffff;
  --accent-rgb: 10, 132, 255;
  --accent-tint: rgba(10, 132, 255, 0.18);
  --free: #3ddc84;
  --free-tint: rgba(61, 220, 132, 0.18);
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.2);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);
  --backdrop: rgba(0, 0, 0, 0.6);
}
/* … and system-dark unless the user forced light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #16181d;
    --bg-warm: #2a2e36;
    --panel: #1e2127;
    --panel-soft: #24272e;
    --ink: #f0f2f5;
    --ink-soft: #c2c8d2;
      --muted: #828b99;
    --accent: #0a84ff;
    --accent-soft: #4ea3ff;
    --accent-hover: #3d9bff;
    --on-accent: #ffffff;
    --accent-rgb: 10, 132, 255;
    --accent-tint: rgba(10, 132, 255, 0.18);
    --free: #3ddc84;
    --free-tint: rgba(61, 220, 132, 0.18);
    --line: rgba(255, 255, 255, 0.12);
    --line-strong: rgba(255, 255, 255, 0.2);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);
    --backdrop: rgba(0, 0, 0, 0.6);
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  letter-spacing: -0.005em;
}

a {
  color: inherit;
  text-decoration: none;
}
.mono {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}
.hidden {
  display: none !important;
}

/* ============================== LAYOUT ============================== */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  overflow-y: auto;
  z-index: 60;
  /* The menu is taller than a short viewport, so this scrolls. Unstyled, Chrome
     draws its classic 16px track down the sidebar's edge - a permanent grey
     stripe beside the earners board. A 6px bar costs 7px of width, which the
     rows absorb without wrapping, so it stays.
     NOTE: do not add `scrollbar-width: thin` here. Chrome honours that over the
     ::-webkit- width and goes back to reserving 12px. It is set for Firefox
     only, below. */
}
.sidebar::-webkit-scrollbar {
  width: 6px;
}
.sidebar::-webkit-scrollbar-track {
  background: transparent;
}
/* Thumb only while pointing at the sidebar: nothing drawn at rest, but the
   affordance appears the moment you go looking for it. */
.sidebar::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
}
.sidebar:hover::-webkit-scrollbar-thumb {
  background: var(--line);
}
/* Firefox has no ::-webkit- rules; `thin` is the only lever it offers. */
@supports (-moz-appearance: none) {
  .sidebar {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  .sidebar:hover {
    scrollbar-color: var(--line) transparent;
  }
}
main {
  margin-left: 260px;
  min-height: 100vh;
  padding: 0 clamp(20px, 5vw, 64px);
}

/* ============================== BRAND ============================== */
.brand {
  padding: 6px 8px 18px;
}
.brand-name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.brand-name .dot {
  color: var(--accent);
}
.brand-tag {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

/* ============================== NAV ============================== */
.nav-section-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 16px 8px 6px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
}
.nav-item:hover {
  background: var(--bg-warm);
  color: var(--ink);
}
.nav-item.active {
  background: var(--accent-tint);
  color: var(--accent);
}
.nav-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Lucide icons (lucide.dev) use a 24x24 viewBox, so the 2.2 stroke tuned for
   the 64x64 coffee icons renders ~3x too heavy. Drop the weight on these so
   they sit at the same visual line thickness as the brand category icons. */
.nav-icon svg.lucide,
.theme-toggle svg.lucide,
.footer-icon-btn svg.lucide {
  stroke-width: 1.6;
}
.nav-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-count {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--muted);
  background: var(--bg-warm);
  padding: 1px 7px;
  border-radius: 20px;
}
.nav-item.active .nav-count {
  background: var(--accent);
  color: var(--on-accent);
}
.signin-hint {
  font-size: 11px;
  color: var(--muted);
  padding: 6px 10px 0;
  line-height: 1.4;
}

.sidebar-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 6px 4px 10px;
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

/* ---- footer profile icon (sign-in / account gate, left corner) ---- */
.footer-icon-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--ink-soft);
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
}
.footer-icon-btn:hover {
  background: var(--bg-warm);
  color: var(--ink);
}
.footer-icon-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- theme toggle (icon-only, pinned to the footer's right corner) ---- */
.theme-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--ink-soft);
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
}
.theme-toggle:hover {
  background: var(--bg-warm);
  color: var(--ink);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle .ico-moon {
  display: none;
}
:root[data-theme="dark"] .theme-toggle .ico-sun {
  display: none;
}
:root[data-theme="dark"] .theme-toggle .ico-moon {
  display: inline;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .ico-sun {
    display: none;
  }
  :root:not([data-theme="light"]) .theme-toggle .ico-moon {
    display: inline;
  }
}

/* ============================== MOBILE BAR ============================== */
.mobile-bar {
  display: none;
}
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  z-index: 55;
  opacity: 0;
  transition: opacity 0.2s;
}
.overlay.show {
  opacity: 1;
}

/* ============================== SEARCH ============================== */
/* Sidebar search box (desktop): sits under the brand, above Today's Menu. */
.sidebar-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 2px 4px 4px;
}
.search-input {
  width: 100%;
  height: 36px;
  padding: 0 34px;
  border: none;
  border-radius: 10px;
  background: var(--bg-warm);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: background 0.12s;
}
.search-input::placeholder {
  color: var(--muted);
}
.search-input:focus {
  background: rgba(var(--accent-rgb), 0.06);
}
/* Suppress the browser's built-in search clear control; we render our own. */
.search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.search-icon {
  position: absolute;
  left: 11px;
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.search-clear {
  position: absolute;
  right: 6px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
}
.search-clear:hover {
  background: var(--line);
  color: var(--ink);
}
.search-clear svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.search-clear[hidden] {
  display: none;
}

/* Mobile search controls are hidden on desktop. */
.mobile-search-btn,
.mobile-search {
  display: none;
}

/* Search results view: hide marketing sections + empty categories/cards. */
body.searching .hero,
body.searching #pricing,
body.searching .site-intro,
body.searching footer,
/* Merchandising row - its cards are duplicates of real category cards, so it
   steps aside during search instead of showing every free app twice. */
body.searching .category-derived,
body.searching .collection-shelf {
  display: none;
}
.category.search-hidden,
.app-card.search-hidden {
  display: none;
}
.search-empty {
  padding: clamp(48px, 9vw, 90px) 0;
  color: var(--ink-soft);
  font-size: 17px;
}
.search-empty[hidden] {
  display: none;
}
.search-empty-hint {
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
}

/* ============================== BUTTONS ============================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    transform 0.05s;
}
.btn:active {
  transform: translateY(1px);
}
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn-primary:hover {
  background: var(--accent-hover);
}
.btn-ghost {
  border-color: var(--line-strong);
  color: var(--ink);
  background: var(--panel);
}
.btn-ghost:hover {
  background: var(--bg-warm);
}

/* ============================== HERO ============================== */
.hero {
  padding: clamp(48px, 9vw, 100px) 0 56px;
  max-width: 760px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-tint);
  padding: 6px 12px;
  border-radius: 20px;
  margin-bottom: 22px;
}
.hero-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.2);
}
.hero h1 {
  font-size: clamp(34px, 5.4vw, 56px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
h1 .italic {
  color: var(--accent);
  font-style: normal;
}
.hero-sub {
  font-size: clamp(16px, 2vw, 19px);
  color: var(--ink-soft);
  margin-top: 20px;
  max-width: 620px;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}
/* Downloads ticker, left of the primary CTA. */
.hero-downloads {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  white-space: nowrap;
}
.hero-downloads svg {
  width: 15px;
  height: 15px;
  align-self: center;
  color: var(--accent);
  flex: none;
}
.hero-downloads-num {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hero-downloads-label {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Savings estimate line, under the hero CTA row. */
.hero-savings {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 560px;
  margin-top: 16px;
  padding-left: 12px;
  border-left: 2px solid var(--free);
}
.hero-savings strong {
  color: var(--free);
  font-weight: 600;
}
.hero-meta {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--muted);
  margin-top: 18px;
}
.platforms {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.platform-label {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  /* Static labels, not interactive: no text selection, plain arrow cursor. */
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}
.platform-badge svg {
  width: 15px;
  height: 15px;
}

/* Inline platform tags inside the hero copy. Kept shorter than the line box
   (line-height: 1.3 on a 0.78em font, no vertical padding) so they don't widen
   the paragraph's line spacing. */
.platform-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
  margin: 0 2px;
  padding: 0 9px;
  font-size: 0.78em;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-soft);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  cursor: default;
}
.platform-tag svg {
  width: 13px;
  height: 13px;
  color: var(--accent);
  /* Icon isn't text; keep it out of any drag-selection of the paragraph. */
  user-select: none;
  -webkit-user-select: none;
}

.site-intro {
  max-width: 760px;
  margin: 8px auto 64px;
  padding: 48px 44px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.site-intro-badge {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 14px;
}
.site-intro-title {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.site-intro p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.75;
  margin-top: 18px;
  text-align: left;
}
.site-intro p + p {
  margin-top: 14px;
}
.site-intro a {
  color: var(--accent);
  text-decoration: none;
}
.site-intro a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================== CATEGORY ============================== */
.category {
  padding: 40px 0;
  scroll-margin-top: 24px;
}
.category-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.cat-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-tint);
  color: var(--accent);
  border-radius: 10px;
}
.cat-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.category-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
/* Plain-language gloss after the coffee name ("Espresso · Quick Utilities") -
   inside the h2 so the heading carries meaning, styled to stay secondary. */
.category-gloss {
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}
.category-desc {
  font-size: 14px;
  color: var(--muted);
  margin-left: auto;
  text-align: right;
}
/* "On the House" wears the FREE-ribbon green so the section header and the
   badges on its cards read as one signal instead of two. Top Paid and
   Barista's Picks join it: the three curated rows at the top of the page share
   a colour, which is what separates them from the category rows below. The
   sidebar counts carry the same green for the same three, so the menu mirrors
   the page instead of greening only the free row. */
.category-derived .cat-icon,
.collection-shelf .cat-icon {
  background: var(--free-tint);
  color: var(--free);
}
.sidebar .nav-item[data-cat="house"] .nav-count,
.sidebar .nav-item[data-cat="top-paid"] .nav-count,
.sidebar .nav-item[data-cat="barista-picks"] .nav-count {
  background: var(--free-tint);
  color: var(--free);
}
.sidebar .nav-item[data-cat="house"].active .nav-count,
.sidebar .nav-item[data-cat="top-paid"].active .nav-count,
.sidebar .nav-item[data-cat="barista-picks"].active .nav-count {
  background: var(--free);
  color: #fff;
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

/* ============================== APP CARD ============================== */
.app-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.1s;
}
a.app-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.app-card-coming {
  opacity: 0.85;
  cursor: default;
}
.app-icon {
  position: relative;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-warm);
  font-size: 26px;
  color: var(--muted);
}
.app-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  transform: scale(1.2);
}
.app-icon .app-icon-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transform: scale(1.2);
}
.app-icon:has(svg),
.app-icon:has(.app-icon-img) {
  background: transparent;
}
.app-info {
  min-width: 0;
  flex: 1;
}
.app-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.app-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  transform: scale(1.2);
}
.app-icon:has(svg) {
  background: transparent;
}
.app-info {
  min-width: 0;
}
.app-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.app-desc {
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Name and one-off price share a row, price flush right. Mono and muted so it
   reads as a note next to the name rather than a second heading - the
   subscription is the offer the page is making. Not green: green means free
   here. A card with no price just renders the name, so nothing shifts. */
.app-name-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.app-name-row .app-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-price {
  margin-left: auto;
  flex-shrink: 0;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: -0.02em;
  color: var(--muted);
  transition: color 0.15s;
}
.app-price-unit {
  margin-left: 4px;
  font-size: 9.5px;
  letter-spacing: 0.02em;
  opacity: 0.75;
}
a.app-card:hover .app-price {
  color: var(--ink-soft);
}
/* Admin list: an app with a price of its own reads a shade stronger than one
   inheriting the catalogue default, so the exceptions stand out at a glance. */
.app-price-own {
  color: var(--ink-soft);
  font-weight: 600;
}

.app-coming-ribbon {
  position: absolute;
  top: 12px;
  right: -2px;
  height: 20px;
  width: auto;
}

/* "FREE" corner ribbon - same geometry as the coming-soon one, green so the
   two never read as the same state. Shown when apps.is_free is on. */
.app-free-ribbon {
  position: absolute;
  top: 12px;
  right: -2px;
  height: 20px;
  width: auto;
}

/* ============================== PRICING ============================== */
.pricing {
  padding: 64px 0 48px;
  scroll-margin-top: 24px;
}
.pricing-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 40px;
}
.pricing-badge {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 14px;
}
.pricing h2 {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.pricing h2 .italic {
  color: var(--accent);
  font-style: normal;
}
.pricing-sub {
  font-size: 16px;
  color: var(--ink-soft);
  margin-top: 12px;
}

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  max-width: 720px;
  margin: 0 auto;
}
.plan {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.plan-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--accent);
  padding: 5px 13px;
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.plan.featured {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent),
    var(--shadow-md);
}
.plan-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-tint);
  color: var(--accent);
  border-radius: 12px;
  margin-bottom: 18px;
}
.plan-icon svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.plan-name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.plan-tagline {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}
.plan-price {
  margin: 20px 0 4px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.plan-price .amount {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.plan-price .amount .italic {
  font-style: normal;
  color: var(--ink-soft);
}
.plan-price .period {
  font-size: 15px;
  color: var(--muted);
}
.plan-price .was {
  font-size: 18px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.plan-price .save {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: #e0392b;
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: auto;
}
.plan-devices {
  font-size: 13px;
  color: var(--ink-soft);
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.plan ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.plan ul li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  color: var(--ink-soft);
}
.plan ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 16px;
  height: 9px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
/* Stripe Embedded Checkout (billing.js). Stripe's payment page renders in a
   cross-origin iframe we mount inside this modal, so only the shell is ours -
   the form itself is themed in the Stripe dashboard (Settings -> Appearance). */
.checkout-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--backdrop);
  z-index: 600;              /* above the auth modal (500) and drawer (60) */
  padding: 20px;
}
.checkout-modal.open {
  display: flex;
  animation: gac-fade 0.15s ease-out;
}
.checkout-box {
  position: relative;
  width: 560px;
  max-width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 44px 20px 20px;
  animation: gac-pop 0.18s ease-out;
}
.checkout-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.checkout-close:hover {
  color: var(--ink);
}
.checkout-status {
  padding: 24px 8px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.checkout-status-ok {
  color: var(--ink);
}
.checkout-mount {
  min-height: 0;
}
/* Lock the page behind the checkout so the iframe scrolls, not the body. */
body.checkout-open {
  overflow: hidden;
}
/* "Apps you own" list on the billing page. */
.owned-apps {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.owned-apps li a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  background: var(--panel);
  transition: border-color 0.15s;
}
.owned-apps li a:hover {
  border-color: var(--accent);
}
/* The catalogue icon is raw SVG (or an <img> for R2-hosted PNGs); box it so
   both shapes land at the same size in the pill. */
.owned-app-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  overflow: hidden;
}
.owned-app-icon svg,
.owned-app-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

/* One-off app purchase block on the app detail page. Deliberately quieter than
   the download buttons: the subscription is the main path, this is the escape
   hatch for someone who wants exactly one app. */
.app-detail-buy {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.app-detail-buy-note {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.app-detail-owned {
  color: #3d8b58;
  font-weight: 600;
}
/* The subscription link inside the one-off note. Kept inline and quiet - it is
   a nudge, not a second call to action - but tinted so the eye finds it. */
.app-detail-buy-note a {
  color: var(--accent);
  text-decoration: none;
}
.app-detail-buy-note a:hover {
  text-decoration: underline;
}

/* Billing cadence tabs above the pricing cards. Annual is the default and
   carries the -50% tag; the pill styling matches .plan-badge so the two read as
   one family. */
.billing-toggle {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 0 auto 26px;
  padding: 4px;
  background: var(--panel-2, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--line);
  border-radius: 999px;
  width: fit-content;
}
.billing-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.billing-tab:hover {
  color: var(--ink);
}
.billing-tab.active {
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.billing-tab-save {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: #e0392b;
  border-radius: 999px;
  padding: 2px 7px;
}
/* "billed $59.88 a year" - the real amount charged, under the per-month
   headline. Never let the card show only the per-month figure for an annual
   plan; that is the surprise this whole site says it does not do. */
.plan-billed {
  font-size: 12px;
  color: var(--muted);
  margin: -2px 0 6px;
  min-height: 16px;
}

/* "Current plan" indicator on the homepage cards (JS-set, non-clickable). */
.plan-cta.is-current {
  opacity: 0.55;
  pointer-events: none;
  cursor: default;
}
.plan-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 46px;
  margin-top: 24px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  border-radius: 11px;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  transition:
    background 0.15s,
    border-color 0.15s;
}
.plan-cta.primary {
  background: var(--accent);
  color: var(--on-accent);
}
.plan-cta.primary:hover {
  background: var(--accent-hover);
}
.plan-cta.ghost {
  border-color: var(--line-strong);
  color: var(--ink);
}
.plan-cta.ghost:hover {
  background: var(--bg-warm);
}

/* ============================== FOOTER ============================== */
footer {
  padding: 40px 0;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
footer p + p {
  margin-top: 4px;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 0;
  margin-bottom: 5px;
}
/* Count beside a section heading, and the three-number status line under the
   toolbar of a curated list (API / component / DOM). Quiet by design - they
   are there to be checked, not read. */
.section-count {
  margin-left: 8px;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.curated-status {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11.5px;
  margin-top: 10px;
}
.curated-status strong {
  color: var(--ink-soft);
  font-weight: 600;
}

/* Guide links, one line above the site nav. Styled exactly like the nav row
   below it: colour is inherited from <footer>, same divider, same size. */
.footer-guides {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 0;
  margin-bottom: 5px;
}
.footer-guides a + a::before {
  content: "·";
  margin: 0 14px;
  color: var(--muted);
  pointer-events: none;
}

/* "·" divider centered between each item (skipped before the first). */
.footer-nav a + a::before {
  content: "·";
  margin: 0 14px;
  color: var(--muted);
  pointer-events: none;
}

/* ============================== AUTH MODAL (signin.js) ============================== */
.auth-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--backdrop);
  z-index: 500;
  padding: 20px;
}
.auth-modal.open {
  display: flex;
  animation: gac-fade 0.15s ease-out;
}
@keyframes gac-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.auth-box {
  position: relative;
  width: 400px;
  max-width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 28px;
  animation: gac-pop 0.18s ease-out;
}
@keyframes gac-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.auth-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
}
.auth-close:hover {
  background: var(--bg-warm);
  color: var(--ink);
}
.auth-box h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.auth-sub {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 8px 0 18px;
}
/* Contextual prompt under the title (e.g. "Please sign in before downloading.").
   Tinted so it reads as a reason-for-this-modal, not body copy. */
.auth-note {
  font-size: 14px;
  text-align: center;
  color: var(--accent);
  background: var(--accent-tint);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 10px 0 4px;
}
.auth-note[hidden] {
  display: none;
}
.auth-step input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  font: inherit;
  font-size: 15px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.12s;
}
.auth-step input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.auth-step input#authCode {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  letter-spacing: 0.4em;
  text-align: center;
  font-size: 22px;
}
.auth-btn {
  width: 100%;
  height: 46px;
  margin-top: 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.auth-btn:hover {
  background: var(--accent-hover);
}
/* A disabled primary button has to LOOK disabled - otherwise "Save" reads as
   clickable when there is nothing to save, and the click just does nothing. */
.auth-btn:disabled,
.auth-btn:disabled:hover {
  opacity: 0.4;
  background: var(--accent);
  cursor: default;
}
.auth-link {
  display: block;
  width: 100%;
  margin-top: 14px;
  background: none;
  border: none;
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  text-align: center;
}
.auth-link:hover {
  color: var(--ink);
}
.auth-error {
  margin-top: 14px;
  font-size: 13px;
  color: #ff453a;
  min-height: 18px;
  text-align: center;
}

/* Google Sign-In button (rendered by GIS) + "or" divider above the email step.
   Hidden until GIS confirms the feature is enabled, so email-only stays clean. */
.auth-google {
  margin-top: 4px;
}
.auth-google #googleBtn {
  display: flex;
  justify-content: center;
  min-height: 40px;
  color-scheme: light; /* keep GIS iframe from inheriting page dark scheme oddly */
}
.auth-divider {
  display: flex;
  align-items: center;
  margin: 16px 0 6px;
  color: var(--muted);
  font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.auth-divider span {
  padding: 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ============================== APP DETAIL ============================== */
.app-detail {
  padding: clamp(32px, 6vw, 64px) 0 24px;
  max-width: 860px;
}
.app-detail-back {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 28px;
  transition: color 0.12s;
}
.app-detail-back:hover {
  color: var(--accent);
}
.app-detail-header {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.app-detail-icon {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-warm);
  font-size: 40px;
  color: var(--muted);
}
.app-detail-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  transform: scale(1.2);
}
.app-detail-icon .app-icon-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transform: scale(1.2);
}
.app-detail-icon:has(svg),
.app-detail-icon:has(.app-icon-img) {
  background: transparent;
}
.app-detail-meta {
  flex: 1;
  min-width: 240px;
}
.app-detail-cat {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.app-detail-cat .italic {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
}
.app-detail-name {
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 6px;
}
.app-detail-tagline {
  font-size: 16px;
  color: var(--ink-soft);
  margin-top: 8px;
}
/* Free-app banner under the tagline: green FREE badge + the plain-English
   promise (no account, no subscription). Mirrors the card's corner ribbon. */
.app-detail-free {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  font-size: 14px;
  color: var(--ink-soft);
}
.free-badge {
  flex: none;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fff;
  background: #1f8a4c;
  padding: 4px 10px;
  border-radius: 6px;
}
.app-detail-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  align-items: center;
}
/* On phones (iPhone 15 Pro Max width and below) drop the "Download for " prefix
   so the buttons read just "<icon> macOS" / "<icon> Windows" and stay compact. */
@media (max-width: 430px) {
  .app-detail-downloads .dl-prefix {
    display: none;
  }
}
.btn-version {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.22);
}
.btn-ghost .btn-version {
  background: var(--bg-warm);
  color: var(--muted);
}
.app-detail-hint {
  font-size: 14px;
  color: var(--muted);
}

/* download dropdown (Windows multi-arch) */
.dl-dropdown {
  position: relative;
}
.dl-dropdown summary {
  list-style: none;
  cursor: pointer;
}
.dl-dropdown summary::-webkit-details-marker {
  display: none;
}
.dl-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 6px;
}
.dl-dropdown-menu a {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--ink);
  border-radius: 7px;
  white-space: nowrap;
}
.dl-dropdown-menu a:hover {
  background: var(--bg-warm);
}

/* screenshots slider */
.app-screenshots {
  margin-top: 48px;
}
.app-screenshots-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.app-screenshots-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.app-screenshots-arrows {
  display: flex;
  gap: 8px;
}
.screenshots-arrow {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  background: var(--panel);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
}
.screenshots-arrow:hover {
  background: var(--bg-warm);
  color: var(--ink);
}
.app-screenshots-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.app-screenshot {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: min(420px, 80%);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
  cursor: zoom-in;
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
}
.app-screenshot:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}
.app-screenshot img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background: var(--bg-warm);
}

/* rendered description (Quill HTML output) */
.app-detail-body {
  margin-top: 40px;
  max-width: 720px;
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.7;
}
.app-detail-body h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 32px 0 12px;
}
.app-detail-body h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 24px 0 10px;
}
.app-detail-body p {
  margin: 12px 0;
}
.app-detail-body ul,
.app-detail-body ol {
  margin: 12px 0;
  padding-left: 22px;
}
.app-detail-body li {
  margin: 6px 0;
}
.app-detail-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.app-detail-body img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 16px 0;
}
.app-detail-body table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: 20px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  border-spacing: 0;
  background: var(--panel);
  font-size: 14.5px;
  line-height: 1.45;
}
.app-detail-body th,
.app-detail-body td {
  min-width: 150px;
  padding: 11px 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.app-detail-body th,
.app-detail-body tbody tr:first-child td {
  background: var(--bg-warm);
  color: var(--ink);
  font-weight: 650;
}
.app-detail-body tr > *:last-child {
  border-right: 0;
}
.app-detail-body tbody tr:last-child > * {
  border-bottom: 0;
}
.app-detail-body tbody tr:not(:first-child):nth-child(odd) td {
  background: var(--panel-soft);
}
.app-detail-body code {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 0.9em;
  background: var(--bg-warm);
  padding: 2px 6px;
  border-radius: 5px;
}
.app-detail-body pre {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  overflow-x: auto;
  margin: 16px 0;
}
.app-detail-body pre code {
  background: none;
  padding: 0;
}
.app-detail-body blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 16px;
  margin: 16px 0;
  color: var(--muted);
}

/* freshness line under the tagline ("Updated June 2026 · v1.1.0") */
.app-detail-updated {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}

/* FAQ - visible Q&A pairs below the description */
.app-faq {
  margin-top: 48px;
  max-width: 720px;
}
.app-faq-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.app-faq-item {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.app-faq-q {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.app-faq-a {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.7;
  margin-top: 8px;
}

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
}
.lightbox[hidden] {
  display: none;
}
.lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
}
.lightbox-close,
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  /* Dark translucent fill + light ring so the controls stay visible over light
     screenshots (a faint white fill washed out against bright images). */
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.12s;
}
.lightbox-nav:hover,
.lightbox-close:hover {
  background: rgba(0, 0, 0, 0.78);
}
.lightbox-prev {
  left: 20px;
}
.lightbox-next {
  right: 20px;
}
.lightbox-close {
  top: 20px;
  right: 20px;
  transform: none;
  width: 40px;
  height: 40px;
  font-size: 22px;
}
.lightbox-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

/* ============================== 404 ============================== */
.notfound {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 0;
  max-width: 560px;
  margin: 0 auto;
}
.notfound-art {
  width: clamp(180px, 40vw, 240px);
  height: auto;
  margin-bottom: 12px;
}
.notfound-steam .steam {
  opacity: 0;
  animation: steam-rise 3s ease-in-out infinite;
}
.notfound-steam .steam-2 {
  animation-delay: 0.6s;
}
.notfound-steam .steam-3 {
  animation-delay: 1.2s;
}
@keyframes steam-rise {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  40% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}
.notfound-badge {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--accent);
  background: var(--accent-tint);
  padding: 6px 12px;
  border-radius: 20px;
  margin-bottom: 18px;
}
.notfound h1 {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.notfound h1 .italic {
  color: var(--accent);
  font-style: normal;
}
.notfound-sub {
  font-size: 16px;
  color: var(--ink-soft);
  margin-top: 14px;
}
.notfound-cta {
  margin-top: 28px;
}

/* ============================== RESPONSIVE ============================== */
@media (max-width: 880px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open {
    transform: none;
  }
  main {
    margin-left: 0;
    padding-top: 64px;
  }

  .mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    padding: 0 16px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    z-index: 50;
  }
  /* Overlay visibility is driven by JS (app.js .show()/.hide() on index,
     Vue inline :style on /account) - never force display here or the
     transparent overlay would sit above the bar and swallow hamburger taps. */
  .mobile-brand {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-decoration: none;
  }
  .mobile-brand .dot {
    color: var(--accent);
  }

  /* On mobile the header already carries search, so drop the sidebar copy. */
  .sidebar-search {
    display: none;
  }

  /* Search icon in the header's right corner. */
  .mobile-search-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink);
  }
  .mobile-search-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  /* Expanding panel that covers the whole bar once opened. */
  .mobile-search {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    background: var(--panel);
  }
  .mobile-search.open {
    display: flex;
  }
  .mobile-search .search-icon {
    position: static;
    flex-shrink: 0;
    margin-right: 6px;
  }
  .mobile-search .search-input {
    flex: 1;
    height: 40px;
    border: none;
    background: transparent;
    padding: 0;
    /* 16px keeps iOS Safari from zooming the viewport on focus. */
    font-size: 16px;
  }
  .mobile-search .search-input:focus {
    background: transparent;
  }
  .mobile-search .search-clear {
    position: static;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
  }
  .hamburger {
    width: 40px;
    height: 40px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
  }
  .hamburger span {
    width: 20px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition:
      transform 0.2s,
      opacity 0.2s;
  }
  .hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .hamburger.open span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .category-desc {
    display: none;
  }
}

/* ============================================================================
   ACCOUNT (Vue SPA at /account) + ACTIVATE (/activate)
   These pages reuse the shell (sidebar/nav/pricing) classes above; below are
   the view-specific pieces. Loaded only by the *.macos.html shells.
============================================================================ */
.account-view {
  max-width: 760px;
  padding: clamp(32px, 6vw, 56px) 0 40px;
}

.account-header {
  margin-bottom: 24px;
}
.account-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.account-title-row h1 {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.plan-pill {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--accent-tint);
  padding: 4px 10px;
  border-radius: 20px;
}
.plan-pill-ok       { color: #1f8a4c; background: rgba(31,138,76,0.12); }
.plan-pill-pending  { color: #a67207; background: rgba(166,114,7,0.12); }
.plan-pill-claimed  { color: #4a5b70; background: rgba(74,91,112,0.14); }
.plan-pill-approved { color: #1f6bb0; background: rgba(31,107,176,0.12); }
.plan-pill-denied   { color: #a83b3b; background: rgba(168,59,59,0.12); }
/* Larger pill for inline emphasis inside body copy. */
.plan-pill-lg {
  font-size: 14px;
  padding: 5px 12px;
}
/* Solid accent fill for key value props in referral copy. */
.plan-pill-hero {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  cursor: default;
}

/* Referral page (/account#/referral) + homepage sidebar badge. */
.nav-item-referral {
  margin-top: 16px;
}
/* When signed in, .signin-hint gets .hidden (app.js renderAccount), so pull
   the referral badge up flush against the account item showing the email. */
.signin-hint.hidden + .nav-item-referral {
  margin-top: 0;
}
.nav-item-referral .nav-label {
  color: var(--accent);
}

/* Top earners board, directly under the Refer & Earn item. */
.earners {
  margin: 8px 10px 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
}
.earners-title {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.earners-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.earner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.earner-rank {
  flex: none;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 9px;
  font-weight: 700;
}
.earner-email {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.earner-amount {
  flex: none;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--free);
}
.referral-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  flex-wrap: wrap;
}
.referral-banner-approved { border-color: var(--accent); background: var(--accent-tint); }
.referral-banner strong { margin-right: 6px; }
/* Floating meme that follows the pointer while hovering a hero pill. */
.referral-meme-float {
  position: fixed;
  z-index: 9999;
  width: 520px;
  max-width: 80vw;
  height: auto;
  pointer-events: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  background: #fff;
}
.referral-link-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.referral-link-input {
  flex: 1;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 13px;
}
/* Payout wallet modal (referral-view.js). A little wider than the stock
   .auth-box so a full 0x… address fits on one line. */
.payout-box {
  width: 480px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.payout-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 14px 0 4px;
}
.payout-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 100%;
}
.payout-field-sm {
  flex: 1 1 calc(50% - 6px);
}
.payout-label {
  font-size: 12px;
  color: var(--muted);
}
.payout-field .referral-link-input {
  width: 100%;
}
/* Inline result of the on-blur address check. */
.payout-check {
  font-size: 12px;
  line-height: 1.4;
}
.payout-check-ok {
  color: #3d8b58;
}
.payout-check-error {
  color: #c94b4b;
}

/* Irreversible-transfer warning. Muted rather than alarm-red: it must be read,
   not scare the user off entering an address at all. */
.payout-warn {
  margin: 12px 0 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  border-left: 2px solid var(--line);
  padding-left: 10px;
}
@media (max-width: 560px) {
  .payout-field-sm { flex: 1 1 100%; }
}
/* Bank details cell in the admin claims table - dense, copy-friendly. */
.payout-cell {
  font-size: 12px;
  line-height: 1.4;
  min-width: 210px;
}
.payout-cell code {
  user-select: all;
}
/* A 0x… address is 42 chars - let it wrap rather than stretch the table. */
.payout-wallet {
  word-break: break-all;
}
.payout-cell-muted {
  color: var(--muted);
}

/* Replace the default (browser-dependent, often clunky) select arrow with a
   clean chevron. Gray #8a94a6 reads on both the light (#fff) and dark (#1e2127)
   panel backgrounds without needing a per-theme override. */
select.referral-link-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}
.referral-progress-wrap { margin-top: 8px; }
.referral-progress-bar {
  height: 12px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.referral-progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
}
.referral-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-soft);
  flex-wrap: wrap;
}
.referral-cap-warn { color: #a83b3b; font-weight: 600; }
.referral-actions { margin-top: 16px; }
.referral-hint { color: var(--ink-soft); font-size: 14px; margin-top: 6px; }

/* Referral earnings breakdown: earned / paid out / in review / claimable. */
.referral-earnings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.referral-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.referral-stat-accent { border-color: var(--accent); background: var(--accent-tint); }
.referral-stat-value { font-size: 22px; font-weight: 700; color: var(--ink); }
.referral-stat-label { font-size: 13px; color: var(--ink-soft); }

/* Pricing banner (index.ejs) shown when a ref cookie is present. */
.referral-cta-banner {
  display: inline-block;
  margin-top: 14px;
  padding: 10px 16px;
  background: var(--accent-tint);
  color: var(--accent);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
}
.account-sub {
  font-size: 15px;
  color: var(--ink-soft);
  margin-top: 10px;
  line-height: 1.5;
}
/* Referral page: emphasize the "share to earn cash commission" line. */
.account-sub-highlight {
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 2px solid var(--accent);
  background: var(--accent-tint);
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
}
.account-sub-highlight strong { color: var(--accent); }
.account-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.account-actions .auth-btn {
  width: auto;
  margin: 0;
  padding: 0 18px;
}

/* device list */
.device-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.device-empty {
  font-size: 15px;
  color: var(--muted);
  padding: 24px 0;
}
.device-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.device-info {
  min-width: 0;
}
.device-name {
  font-size: 15px;
  font-weight: 600;
}
.device-meta {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.device-remove {
  flex-shrink: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #ff453a;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
  transition:
    background 0.12s,
    border-color 0.12s;
}
.device-remove:hover {
  background: rgba(255, 69, 58, 0.1);
  border-color: rgba(255, 69, 58, 0.4);
}

/* trial / license banner */
.trial-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  margin: 18px 0;
  background: var(--accent-tint);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 12px;
  font-size: 14px;
  color: var(--ink);
}
.trial-banner.expired {
  background: rgba(255, 69, 58, 0.1);
  border-color: rgba(255, 69, 58, 0.35);
}
.trial-banner-text {
  min-width: 0;
}
.trial-banner .auth-btn {
  width: auto;
  margin: 0;
  padding: 8px 16px;
  flex-shrink: 0;
}
.trial-banner.expired .auth-btn {
  background: #ff453a;
}

/* billing flash bar */
.billing-flash {
  padding: 12px 16px;
  margin: 16px 0;
  border-radius: 10px;
  font-size: 14px;
  border: 1px solid var(--line);
}
.billing-flash-ok {
  background: rgba(48, 209, 88, 0.12);
  border-color: rgba(48, 209, 88, 0.35);
  color: var(--ink);
}
.billing-flash-cancelled {
  background: var(--bg-warm);
  color: var(--ink-soft);
}
.billing-flash-warn {
  background: rgba(255, 159, 10, 0.12);
  border-color: rgba(255, 159, 10, 0.4);
  color: var(--ink);
}
.billing-flash-error {
  background: rgba(255, 69, 58, 0.1);
  border-color: rgba(255, 69, 58, 0.4);
  color: var(--ink);
}

.billing-actions {
  text-align: center;
  margin-top: 24px;
}
.plan-cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.plan-upgrade-hint {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--bg-warm);
  border-radius: 8px;
}
.plan-upgrade-hint-note {
  display: block;
  margin-top: 4px;
  opacity: 0.8;
}

/* ---- billing: payment history ---- */
.billing-history {
  margin-top: 40px;
}
.billing-history .section-title {
  margin-bottom: 14px;
}
.billing-amount-col {
  text-align: right;
  white-space: nowrap;
}

/* ---- ACTIVATE page (standalone, no sidebar) ---- */
main.activate-shell {
  margin-left: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 26px;
}
.activate-brand {
  text-align: center;
}
.activate-brand .brand-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.activate-brand .dot {
  color: var(--accent);
}
.activate-card {
  width: 100%;
  max-width: 460px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  padding: 32px;
}
.activate-card h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.activate-replace-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.activate-replace-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition:
    border-color 0.12s,
    background 0.12s;
}
.activate-replace-item:hover {
  background: var(--bg-warm);
}
.activate-replace-item:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.activate-replace-item input {
  margin-top: 3px;
  accent-color: var(--accent);
}
.activate-replace-item span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ---- floating theme toggle (for pages without a sidebar toggle) ---- */
.theme-toggle-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 80;
  width: 42px;
  height: 42px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.theme-toggle-float:hover {
  background: var(--bg-warm);
}
.theme-toggle-float svg {
  width: 20px;
  height: 20px;
}

/* ============================================================================
   ADMIN dashboard (/admin Vue SPA: database / apps / revenue + Quill editor)
   Reuses the account shell + account-header/account-sub/auth-* already styled.
   Loaded only by admin.macos.html.
============================================================================ */
/* Admin views need more room than the 760px account column. */
.account-view:has(.admin-db),
.account-view:has(.admin-apps),
.account-view:has(.kpi-grid) {
  max-width: 1120px;
}

.account-actions-hint {
  font-size: 12px;
  color: var(--muted);
}
a.account-actions-hint {
  cursor: pointer;
}
a.account-actions-hint:hover {
  color: var(--accent);
}
.section-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 32px 0 14px;
}

/* Section title with a small round (i) toggle to its right (reveals a hint). */
.section-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 32px 0 14px;
}
.section-title-row .section-title {
  margin: 0;
}
.info-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 0.12s,
    color 0.12s;
}
.info-toggle:hover,
.info-toggle.active {
  border-color: var(--accent);
  color: var(--accent);
}

/* Kebab (⋮) "more options" menu, e.g. on the Refer & Earn header. */
.kebab-wrap {
  position: relative;
}
.kebab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-soft);
  color: var(--ink-soft);
  cursor: pointer;
  transition:
    background 0.12s,
    border-color 0.12s,
    color 0.12s;
}
.kebab-btn:hover,
.kebab-btn.active {
  background: var(--bg-warm);
  color: var(--ink);
}
/* Transparent full-screen catcher so a click anywhere else closes the menu. */
.kebab-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
}
.kebab-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 41;
  min-width: 180px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}
.kebab-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}
.kebab-menu button:hover {
  background: var(--bg-warm);
}

/* two-column layout: left list + right pane */
.admin-db,
.admin-apps {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 20px;
  margin-top: 8px;
  align-items: start;
}
.admin-tables {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
}
.admin-table-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
}
.admin-table-item:hover {
  background: var(--bg-warm);
  color: var(--ink);
}
.admin-table-item.active {
  background: var(--accent-tint);
  color: var(--accent);
}
.admin-table-name {
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-table-meta {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}
.admin-backup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  margin-top: 8px;
  width: auto;
  text-decoration: none;
  font-size: 13px;
  padding: 9px 12px;
}

.admin-pane {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* result table */
.admin-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.admin-pager {
  display: flex;
  gap: 6px;
}
.admin-pager .auth-link {
  width: auto;
  margin: 0;
  padding: 4px 8px;
}
.admin-pager .auth-link:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.admin-grid-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.admin-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-grid th,
.admin-grid td {
  padding: 9px 12px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.admin-grid th {
  position: sticky;
  top: 0;
  background: var(--panel-soft);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.admin-grid tbody tr:last-child td {
  border-bottom: none;
}
.admin-grid tbody tr:hover {
  background: var(--bg-warm);
}
.admin-grid td.null {
  color: var(--muted);
  font-style: italic;
}
.admin-grid td {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  color: var(--ink);
}

/* editable / copyable timestamp cells */
.admin-ts-cell,
.admin-ts-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.admin-ts-copy {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  padding: 2px 4px;
  border-radius: 5px;
}
.admin-ts-copy:hover {
  background: var(--bg-warm);
  color: var(--accent);
}
.admin-ts-input {
  font-family: inherit;
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink);
}
.admin-ts-btn {
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--ink);
}
.admin-ts-btn:hover:not(:disabled) {
  background: var(--bg-warm);
}
.admin-ts-err {
  color: #ff453a;
  font-size: 11px;
}

/* ---- APPS view ---- */
.apps-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.apps-toolbar .auth-btn {
  width: auto;
  margin: 0;
  padding: 9px 16px;
}
/* Blog header quick actions - inline "Write [New post] or edit [dropdown]"
   sentence that replaces the static subtitle. Wraps on narrow viewports. */
.blog-sub-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.blog-sub-actions .blog-sub-btn {
  width: auto;
  height: auto;
  margin: 0;
  padding: 6px 14px;
  font-size: 14px;
  border-radius: 8px;
}
.blog-sub-select {
  font: inherit;
  font-size: 14px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--ink);
  outline: none;
  min-width: 240px;
  max-width: 100%;
  cursor: pointer;
}
.blog-sub-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.app-grid-admin {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.app-card-admin {
  cursor: pointer;
}
.app-card-admin.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.app-card-admin.draft {
  opacity: 0.7;
}
.draft-pill {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg-warm);
  padding: 2px 6px;
  border-radius: 5px;
  margin-left: 6px;
  vertical-align: middle;
}
.draft-pill.coming {
  color: var(--accent);
  background: var(--accent-tint);
}

/* app editor */
.app-editor {
  margin-top: 24px;
  padding: 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.app-editor-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.status-segment {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin-left: auto;
}
.status-segment input {
  display: none;
}
.status-segment label {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  border-right: 1px solid var(--line);
  transition:
    background 0.12s,
    color 0.12s;
}
.status-segment label:last-of-type {
  border-right: none;
}
.status-segment input:checked + label {
  background: var(--accent);
  color: var(--on-accent);
}

.app-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.app-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.app-field-wide {
  grid-column: 1 / -1;
}
.app-field > span {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.app-field input,
.app-field select {
  font: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-soft);
  color: var(--ink);
  outline: none;
}
.app-field input:focus,
.app-field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

/* ---- toggle switch (app editor "Free app" flag) ---- */
.switch-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
/* The real checkbox stays in the DOM (label click + keyboard still work) but
   is visually hidden, so .app-field's input styling can't reach it. */
.app-field input.switch,
input.switch {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.switch-track {
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--line);
  transition: background 0.16s;
}
.switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.16s;
}
input.switch:checked + .switch-track {
  background: #1f8a4c;
}
input.switch:checked + .switch-track .switch-thumb {
  transform: translateX(18px);
}
input.switch:focus-visible + .switch-track {
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.switch-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
.app-icon-picker {
  display: flex;
  align-items: center;
  gap: 12px;
}
.app-icon-preview {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-warm);
  font-size: 22px;
  color: var(--muted);
}
.app-icon-preview svg {
  width: 100%;
  height: 100%;
  transform: scale(1.2);
}
.app-icon-preview .app-icon-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transform: scale(1.2);
}
.app-icon-preview:has(svg),
.app-icon-preview:has(.app-icon-img) {
  background: transparent;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: flex-start;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-soft);
  color: var(--ink);
  cursor: pointer;
  transition:
    background 0.12s,
    border-color 0.12s;
}
.icon-btn:hover {
  background: var(--bg-warm);
}
.icon-btn-ghost {
  background: transparent;
  color: var(--muted);
}
.icon-btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.app-editor-rt {
  display: flex;
  flex-direction: column;
}
.app-editor-rt-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
}

/* screenshots */
.screenshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.screenshot-cell {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel-soft);
  aspect-ratio: 16 / 10;
}
.screenshot-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.screenshot-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 4px;
}
.screenshot-btn {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  border-radius: 6px;
}
.screenshot-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.screenshot-btn-danger:hover {
  background: #ff453a;
}
.screenshot-cell-uploading img {
  opacity: 0.5;
}
.screenshot-uploading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
}
.screenshot-waiting {
  font-size: 11px;
  color: #fff;
}
.screenshot-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: macspin 0.7s linear infinite;
}
@keyframes macspin {
  to {
    transform: rotate(360deg);
  }
}

/* Inline spinner for CTA buttons/links while a request is in flight.
   Inherits the button's text color via currentColor so it works on both
   ghost and primary plan buttons. */
.cta-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: macspin 0.7s linear infinite;
  vertical-align: -2px;
  margin-right: 4px;
}

.app-editor-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.app-editor-actions .auth-btn {
  width: auto;
  margin: 0;
  padding: 9px 20px;
}
.app-editor-actions .auth-link {
  width: auto;
  margin: 0;
}

/* ---- REVENUE view ---- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.kpi-card {
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.kpi-primary {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent),
    var(--shadow-sm);
}
.kpi-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kpi-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 6px 0 4px;
}
.kpi-sub {
  font-size: 12px;
  color: var(--muted);
}

.revenue-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.seg-group {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}
.seg-btn {
  appearance: none;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  padding: 6px 14px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s;
}
.seg-btn:last-child { border-right: 0; }
/* Exclude .active: otherwise this higher-specificity hover repaints the
   selected button with --card while its text stays --bg (white-on-white). */
.seg-btn:hover:not(:disabled):not(.active) { background: var(--card); }
.seg-btn.active {
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
}
.seg-btn:disabled { opacity: 0.55; cursor: default; }

.signup-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 140px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.signup-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 4px;
}
.signup-bar {
  width: 100%;
  max-width: 16px;
  min-height: 2px;
  background: var(--accent);
  border-radius: 3px 3px 0 0;
  transition: height 0.2s;
}
.signup-count {
  font-size: 9px;
  color: var(--muted);
  font-family: ui-monospace, monospace;
}
.signup-axis {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
  padding: 0 14px;
}

/* ---- toasts ---- */
.toast-stack {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 700;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.toast {
  padding: 11px 18px;
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  cursor: pointer;
  max-width: 90vw;
  animation: toast-in 0.2s ease-out;
}
.toast-error {
  border-left-color: #ff453a;
}
.toast-success {
  border-left-color: #30d158;
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- Quill (snow theme) retint for light/dark ---- */
.rt-editor {
  background: var(--card);
}
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
  border-color: var(--line);
}
.ql-toolbar.ql-snow {
  border-radius: 10px 10px 0 0;
  background: var(--panel-soft);
}
.ql-container.ql-snow {
  border-radius: 0 0 10px 10px;
}
/* Editor content mirrors .app-detail-body so the editor is true WYSIWYG.
   Scoped under .rt-editor (which Quill turns into .ql-container) to outrank
   quill.snow.css's own .ql-editor heading/list rules. */
.rt-editor .ql-editor {
  min-height: 200px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.rt-editor .ql-editor.ql-blank::before {
  color: var(--muted);
  font-style: normal;
}
.rt-editor .ql-editor h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 32px 0 14px;
}
.rt-editor .ql-editor h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 32px 0 12px;
}
.rt-editor .ql-editor h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 24px 0 10px;
}
.rt-editor .ql-editor p {
  margin: 12px 0;
}
.rt-editor .ql-editor ul,
.rt-editor .ql-editor ol {
  margin: 12px 0;
  padding-left: 22px;
}
.rt-editor .ql-editor li {
  margin: 6px 0;
}
.rt-editor .ql-editor a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rt-editor .ql-editor img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 16px 0;
}
.rt-editor .ql-editor code {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 0.9em;
  background: var(--bg-warm);
  padding: 2px 6px;
  border-radius: 5px;
}
.rt-editor .ql-editor pre {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  overflow-x: auto;
  margin: 16px 0;
}
.rt-editor .ql-editor pre code {
  background: none;
  padding: 0;
}
.rt-editor .ql-editor blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 16px;
  margin: 16px 0;
  color: var(--muted);
}
.ql-snow .ql-stroke {
  stroke: var(--ink-soft);
}
.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
  fill: var(--ink-soft);
}
.ql-snow .ql-picker {
  color: var(--ink-soft);
}
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke {
  stroke: var(--accent);
}
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill {
  fill: var(--accent);
}
.ql-snow .ql-picker-options {
  background: var(--panel);
  border-color: var(--line);
}

/* ---- quill-html-edit-button popup retint for light/dark ----
   The plugin appends its "Edit HTML source" popup to <body> with a hardcoded
   white textArea, but the <pre> inside inherits the page text color (--ink,
   near-white in dark mode) → white-on-white blank popup. Pin readable colors. */
.ql-html-popupContainer {
  background: var(--panel) !important;
  color: var(--ink);
}
.ql-html-popupTitle {
  color: var(--ink);
  padding: 16px 20px 0;
}
.ql-html-textArea {
  background: var(--card) !important;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.ql-html-textArea > pre,
.ql-html-textArea textarea {
  color: var(--ink);
  background: transparent;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
  padding: 12px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.ql-html-buttonCancel,
.ql-html-buttonOk {
  background: var(--panel-soft);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 5px 14px;
  cursor: pointer;
}
.ql-html-buttonOk {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ---- admin responsive: stack the two-column panes ---- */
@media (max-width: 880px) {
  .admin-db,
  .admin-apps {
    grid-template-columns: 1fr;
  }
  .app-editor-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   ABOUT / LEGAL PAGES
   Ported from the former cream stylesheet. Uses only shared design tokens
   (--card, --ink, --line, --accent, --muted, ...) which the macOS :root
   above defines, so these adopt the macOS palette and dark mode for free.
   ============================================================================ */
.about {
  max-width: 920px;
  margin-bottom: 72px;
}

/* Legal-entity block at the top of /about. Plain and unstyled-looking on
   purpose: it's a disclosure, not a pitch, and the hero right below it is
   doing the selling. */
.about-entity {
  /* Same top run-in the hero used to have, so the page doesn't open flush
     against the browser chrome. `main` supplies no vertical padding. */
  margin: clamp(48px, 9vw, 100px) 0 0;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.about-entity-lede {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 640px;
}
/* One field per line, label above value. A single column reads as a formal
   record; the auto-fit grid it replaced reflowed into 1-4 columns depending on
   viewport, which made the same disclosure look different on every screen. */
.about-entity-facts {
  margin-top: 22px;
}
.about-entity-facts > div + div {
  margin-top: 14px;
}
.about-entity-facts dt {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.about-entity-facts dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.about-entity-facts a {
  color: var(--accent);
  text-decoration: none;
}
.about-entity-facts a:hover {
  text-decoration: underline;
}

/* --- Hero stamps: mono pills under the hero copy --- */
.about-hero {
  padding-top: clamp(24px, 4vw, 48px);
  margin-bottom: 56px;
}

.about-stamps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.about-stamps li {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  background: var(--card);
}

/* --- Story block --- */
.about-block {
  margin-bottom: 72px;
}

.about-lede {
  font-size: 21px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 720px;
  margin-bottom: 36px;
}

.about-quote {
  margin: 0 0 36px;
  padding: 4px 0 4px 28px;
  border-left: 3px solid var(--accent);
}
.about-quote blockquote {
  font-size: clamp(28px, 4.4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--ink);
}
.about-quote figcaption {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 14px;
}

.about-prose,
.about-prose p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 720px;
  margin: 0 0 16px;
}
.about-prose em {
  font-style: italic;
  color: var(--accent);
}
.about-prose a {
  color: var(--accent);
}

/* --- Section scaffolding --- */
.about-section {
  margin-bottom: 72px;
}

.about-section-head {
  margin-bottom: 28px;
}
.about-section-head .eyebrow {
  display: block;
  margin-bottom: 12px;
}
.about-section-head h2 {
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.about-section-head h2 .italic {
  font-style: italic;
  color: var(--accent);
  font-weight: 500;
}

/* --- How it works: numbered steps --- */
.about-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.about-step {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 22px 26px;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
.about-step:hover {
  transform: translateY(-2px);
  border-color: var(--accent-soft);
  box-shadow: 0 12px 28px rgba(43, 24, 16, 0.08);
}
.about-step-num {
  display: block;
  font-family: "Fraunces", serif;
  font-size: 40px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.03em;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 14px;
}
.about-step h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.about-step p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* --- Plans: two cups --- */
.about-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.about-plan {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 22px;
}
.about-plan-name {
  display: block;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.about-plan-devices {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 6px 0 14px;
}
.about-plan p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.about-fineprint {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-top: 18px;
}
.about-fineprint a {
  color: var(--accent);
}
.about-plat {
  white-space: nowrap;
}
.about-plat svg {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
  margin-right: 4px;
  color: var(--muted);
}

/* --- Contact: warm closing slab --- */
.about-contact {
  position: relative;
  overflow: hidden;
  /* Always a dark slab with light text, in both themes. Pinned (not var(--ink))
     because --ink flips light in dark mode, which would wash out the hardcoded
     cream text below. */
  background: #1a2233;
  border-radius: 24px;
  padding: 56px 40px;
  text-align: center;
}
.about-contact::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(200, 75, 28, 0.28), transparent 70%);
  pointer-events: none;
}
.about-contact-inner {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
}
.about-contact .eyebrow {
  color: rgba(245, 239, 230, 0.6);
}
.about-contact h2 {
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #f5efe6;
  margin: 12px 0 14px;
}
.about-contact h2 .italic {
  font-style: italic;
  color: var(--accent-soft);
  font-weight: 500;
}
.about-contact p {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(245, 239, 230, 0.72);
  margin-bottom: 28px;
}
/* Lift on hover; color/background come from the shared .btn-primary:hover
   (accent-hover blue), which reads fine on the dark contact slab. */
.about-contact .btn-primary:hover {
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .about-quote {
    padding-left: 20px;
  }
  .about-contact {
    padding: 44px 24px;
  }
}

/* === Blog ================================================================ */
/* Index list + single-post layout. Reuses .app-detail-body typography for the
   post body (see admin Quill output), so only layout/cards live here. */
.blog-index {
  padding: clamp(32px, 6vw, 64px) 0 24px;
  max-width: 960px;
}
.blog-index-head {
  margin-bottom: 36px;
}
.blog-index-title {
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 10px 0 8px;
}
.blog-index-sub {
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 620px;
  line-height: 1.6;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.1s;
}
.blog-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.blog-card-cover {
  aspect-ratio: 16 / 9;
  background: var(--bg-warm);
  overflow: hidden;
}
.blog-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-card-body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.blog-card-tags,
.post-header .blog-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.blog-tag {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-tint);
  padding: 2px 8px;
  border-radius: 999px;
}
.blog-card-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 2px 0 0;
  line-height: 1.3;
}
.blog-card-excerpt {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}
.blog-card-meta {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.blog-card-dot {
  opacity: 0.6;
}

/* Single post */
.post {
  padding: clamp(32px, 6vw, 64px) 0 24px;
  max-width: 760px;
}
.post-header {
  margin: 18px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.post-title {
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
  margin: 0;
}
.post-excerpt {
  font-size: 19px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}
.post-meta {
  font-size: 14px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.post-author {
  font-weight: 600;
  color: var(--ink-soft);
}
.post-cover {
  margin: 8px 0 8px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-warm);
}
.post-cover img {
  width: 100%;
  height: auto;
  display: block;
}
.post-body {
  margin-top: 24px;
}
.post-body blockquote,
.app-detail-body blockquote {
  margin: 20px 0;
  padding: 4px 18px;
  border-left: 3px solid var(--accent);
  color: var(--ink-soft);
  font-style: italic;
}
.post-footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* ============================================================================
   SCREEN CAPTURE PILLARS
   The screenshot page uses a selection marquee; the recorder sub-hub uses a
   live timeline. Both stay inside the site-wide macOS token system below.
============================================================================ */
.capture-guide {
  --capture-link: #0066d6;
  --capture-button: #0066d6;
  --capture-button-hover: #005bbf;
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 58px) 0 72px;
}
:root[data-theme="dark"] .capture-guide {
  --capture-link: #78b9ff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .capture-guide {
    --capture-link: #78b9ff;
  }
}
.capture-guide .btn-primary {
  background: var(--capture-button);
}
.capture-guide .btn-primary:hover {
  background: var(--capture-button-hover);
}
.capture-product-guide {
  max-width: 720px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 48px;
  padding: 22px 24px;
  border: 1px solid rgba(var(--accent-rgb), 0.36);
  border-radius: 16px;
  background:
    linear-gradient(135deg, var(--accent-tint), transparent 72%),
    var(--panel);
}
.capture-product-guide-label {
  color: var(--accent);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.capture-product-guide h2 {
  margin-top: 5px;
  font-size: 18px;
  letter-spacing: -0.015em;
}
.capture-product-guide p:last-child {
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
}
.capture-product-guide .btn {
  flex: none;
}
.capture-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 22px;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--muted);
}
.capture-crumbs a:hover {
  color: var(--accent);
}
.capture-hero {
  position: relative;
  min-height: 470px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: clamp(34px, 6vw, 72px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), transparent 44%),
    var(--panel);
  box-shadow: var(--shadow-md);
}
.capture-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.48;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom right, #000, transparent 72%);
  pointer-events: none;
}
.capture-frame {
  position: absolute;
  top: 44px;
  right: 48px;
  width: min(45%, 450px);
  aspect-ratio: 16 / 10;
  border: 2px solid var(--accent);
  border-radius: 4px;
  background: rgba(var(--accent-rgb), 0.035);
  box-shadow:
    0 0 0 999px rgba(26, 34, 51, 0.035),
    0 12px 44px rgba(var(--accent-rgb), 0.12);
  pointer-events: none;
}
.capture-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid var(--panel);
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.capture-handle-nw { top: -6px; left: -6px; }
.capture-handle-ne { top: -6px; right: -6px; }
.capture-handle-sw { bottom: -6px; left: -6px; }
.capture-handle-se { right: -6px; bottom: -6px; }
.capture-crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
}
.capture-crosshair::before,
.capture-crosshair::after {
  content: "";
  position: absolute;
  background: var(--accent);
  opacity: 0.62;
}
.capture-crosshair::before {
  top: 12px;
  left: 0;
  width: 26px;
  height: 1px;
}
.capture-crosshair::after {
  top: 0;
  left: 12px;
  width: 1px;
  height: 26px;
}
.capture-size {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 4px 7px;
  border-radius: 5px;
  background: var(--capture-button);
  color: #fff;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.03em;
}
.recording-guide {
  --capture-link: #087f8c;
  --capture-button: #087f8c;
  --capture-button-hover: #066d78;
}
:root[data-theme="dark"] .recording-guide {
  --capture-link: #74d6de;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .recording-guide {
    --capture-link: #74d6de;
  }
}
.recording-hero {
  background:
    radial-gradient(circle at 82% 20%, rgba(218, 52, 65, 0.12), transparent 28%),
    linear-gradient(135deg, rgba(8, 127, 140, 0.14), transparent 48%),
    var(--panel);
}
.recording-monitor {
  position: absolute;
  top: 42px;
  right: 48px;
  width: min(43%, 430px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(8, 127, 140, 0.48);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(8, 127, 140, 0.1), transparent 60%),
    var(--panel-soft);
  box-shadow: 0 18px 48px rgba(8, 127, 140, 0.14);
}
.recording-monitor-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.recording-monitor-bar time {
  margin-left: auto;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.recording-rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #da3441;
  box-shadow: 0 0 0 4px rgba(218, 52, 65, 0.12);
  animation: recording-pulse 1.8s ease-in-out infinite;
}
.recording-wave {
  position: absolute;
  inset: 44px 24px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.recording-wave i {
  width: 4px;
  height: var(--wave-height, 30%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--capture-link) 72%, transparent);
}
.recording-wave i:nth-child(1),
.recording-wave i:nth-child(9) { --wave-height: 18%; }
.recording-wave i:nth-child(2),
.recording-wave i:nth-child(8) { --wave-height: 42%; }
.recording-wave i:nth-child(3),
.recording-wave i:nth-child(7) { --wave-height: 66%; }
.recording-wave i:nth-child(4),
.recording-wave i:nth-child(6) { --wave-height: 38%; }
.recording-wave i:nth-child(5) { --wave-height: 84%; }
.recording-timeline {
  position: absolute;
  right: 18px;
  bottom: 17px;
  left: 18px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}
.recording-timeline span {
  display: block;
  width: 58%;
  height: 100%;
  border-radius: inherit;
  background: var(--capture-link);
}
@keyframes recording-pulse {
  0%,
  100% { opacity: 1; }
  50% { opacity: 0.46; }
}
.capture-hero-copy {
  position: relative;
  z-index: 1;
  width: min(760px, 76%);
}
.capture-kicker,
.capture-eyebrow,
.capture-toc-label,
.capture-review-tag,
.capture-pick-label {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.capture-kicker,
.capture-eyebrow {
  color: var(--capture-link);
}
.capture-hero h1 {
  max-width: 760px;
  margin-top: 14px;
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 750;
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.capture-deck {
  max-width: 650px;
  margin-top: 22px;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
  color: var(--ink-soft);
}
.capture-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 24px;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--muted);
}
.capture-disclosure {
  margin: 18px 0 0;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 4px 12px 12px 4px;
  background: var(--panel-soft);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
}
.capture-disclosure strong {
  color: var(--ink);
}
.capture-layout {
  display: grid;
  grid-template-columns: 176px minmax(0, 760px);
  justify-content: center;
  gap: clamp(34px, 6vw, 78px);
  margin-top: 64px;
}
.capture-toc {
  position: sticky;
  top: 28px;
  align-self: start;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}
.capture-toc-label {
  color: var(--muted);
  margin-bottom: 12px;
}
.capture-toc ol {
  list-style: none;
  display: grid;
  gap: 9px;
}
.capture-toc li {
  position: relative;
}
.capture-toc a {
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
}
.capture-toc a:hover {
  color: var(--accent);
}
/* Reading position, set by initGuideToc (public/js/guide-toc.js). The bar sits
   on top of the column's own border-left, so the rule doubles as the track. */
.capture-toc a.active {
  color: var(--accent);
  font-weight: 600;
}
.capture-toc a.active::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 1px;
  bottom: 1px;
  width: 2px;
  border-radius: 1px;
  background: var(--accent);
}
.capture-content {
  min-width: 0;
}
.capture-section {
  scroll-margin-top: 28px;
  margin-bottom: 76px;
}
.capture-section h2 {
  max-width: 700px;
  margin: 9px 0 22px;
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 720;
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.capture-section > p:not(.capture-eyebrow, .capture-source-note),
.capture-review > p,
.capture-criteria p,
.capture-paths > p {
  margin-top: 15px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.75;
}
.capture-section p a {
  color: var(--capture-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.capture-lede {
  font-size: 19px !important;
  line-height: 1.65 !important;
  color: var(--ink) !important;
}
.capture-picks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}
.capture-pick {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}
a.capture-pick {
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
a.capture-pick:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.capture-pick-featured {
  border-color: rgba(var(--accent-rgb), 0.46);
  background:
    linear-gradient(135deg, var(--accent-tint), transparent 70%),
    var(--panel);
}
.capture-pick-label {
  color: var(--ink-soft);
  font-size: 9px;
}
.capture-pick strong {
  font-size: 17px;
}
.capture-pick > span:not(.capture-pick-label, .capture-pick-arrow) {
  color: var(--muted);
  font-size: 13px;
}
.capture-pick-arrow {
  margin-top: 8px;
  color: var(--capture-link);
  font-size: 13px;
  font-weight: 600;
}
.capture-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin-top: 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}
.capture-table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.5;
}
.capture-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.capture-table th,
.capture-table td {
  padding: 14px 15px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.capture-table thead th {
  background: var(--panel-soft);
  color: var(--ink-soft);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.capture-table tbody th {
  width: 134px;
  color: var(--ink);
  font-size: 14px;
}
.capture-table tbody th span {
  display: block;
  width: fit-content;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--panel-soft);
  color: var(--ink-soft);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 9px;
  text-transform: uppercase;
}
.capture-table tbody tr:last-child > * {
  border-bottom: 0;
}
.capture-table tbody td {
  color: var(--ink-soft);
}
.capture-table-own {
  background: rgba(var(--accent-rgb), 0.035);
}
.capture-table a {
  color: var(--capture-link);
}
.capture-source-note {
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.capture-section kbd {
  display: inline-block;
  min-width: 24px;
  padding: 2px 6px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 0.82em;
  text-align: center;
}
.capture-callout {
  margin: 26px 0;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}
.capture-callout strong {
  display: block;
  margin-bottom: 10px;
}
.capture-callout ul {
  padding-left: 20px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.7;
}
.capture-callout li + li {
  margin-top: 4px;
}
.capture-inline-figure {
  margin: -22px 0 76px;
}
.capture-inline-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--shadow-md);
}
.capture-inline-figure figcaption {
  max-width: 680px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.capture-review {
  margin-top: 18px;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}
.capture-review-own {
  border-color: rgba(var(--accent-rgb), 0.46);
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), transparent 48%),
    var(--panel);
}
.capture-review-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: start;
  gap: 13px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.capture-rank {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
  color: var(--capture-link);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
}
.capture-review-tag {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 9px;
}
.capture-review h3 {
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.capture-review-app {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
}
.capture-review-icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.capture-price {
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--ink-soft);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 10px;
  white-space: nowrap;
}
.capture-review-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}
.capture-review-actions span {
  color: var(--muted);
  font-size: 13px;
}
.capture-criteria {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}
.capture-criteria section {
  padding: 20px;
  border-top: 2px solid var(--accent);
  border-radius: 4px 4px 14px 14px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}
.capture-criteria h3 {
  font-size: 17px;
  line-height: 1.35;
}
.capture-criteria p {
  margin-top: 9px;
  font-size: 14px;
  line-height: 1.65;
}
.capture-path-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 26px;
}
.capture-path-grid a {
  display: flex;
  flex-direction: column;
  min-height: 190px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.capture-path-grid a:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.capture-path-grid a > span {
  color: var(--capture-link);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.capture-path-grid strong {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.3;
}
.capture-path-grid p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.capture-faq details {
  border-top: 1px solid var(--line);
}
.capture-faq details:last-child {
  border-bottom: 1px solid var(--line);
}
.capture-faq summary {
  position: relative;
  padding: 20px 38px 20px 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.capture-faq summary::-webkit-details-marker {
  display: none;
}
.capture-faq summary::after {
  content: "+";
  position: absolute;
  top: 18px;
  right: 2px;
  color: var(--capture-link);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 20px;
  font-weight: 400;
}
.capture-faq details[open] summary::after {
  content: "−";
}
.capture-faq details p {
  max-width: 680px;
  padding: 0 34px 22px 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.7;
}
.capture-final {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(28px, 5vw, 44px);
  border-radius: 22px;
  background: #1a2233;
  color: #f5f7fb;
}
.capture-final::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -80px;
  width: 320px;
  height: 320px;
  border: 1px solid rgba(90, 169, 255, 0.35);
  border-radius: 24px;
  transform: rotate(12deg);
  pointer-events: none;
}
.capture-final > * {
  position: relative;
  z-index: 1;
}
.capture-final .capture-eyebrow {
  color: #78b9ff;
}
.capture-final h2 {
  max-width: 520px;
  margin-top: 9px;
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.025em;
}
.capture-final p:not(.capture-eyebrow) {
  max-width: 520px;
  margin-top: 12px;
  color: rgba(245, 247, 251, 0.72);
  font-size: 15px;
  line-height: 1.65;
}
.capture-final .btn {
  flex: none;
}
.capture-guide a:focus-visible,
.capture-guide summary:focus-visible {
  outline: 3px solid rgba(var(--accent-rgb), 0.38);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (max-width: 1020px) {
  .capture-layout {
    grid-template-columns: minmax(0, 760px);
  }
  .capture-toc {
    position: static;
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 0 0 16px;
    border-left: 0;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
  }
  .capture-toc-label {
    flex: none;
    margin: 0;
  }
  .capture-toc ol {
    display: flex;
    flex: none;
    gap: 18px;
  }
  .capture-toc a {
    white-space: nowrap;
  }
  .capture-toc a.active::before {
    left: 0;
    right: 0;
    top: auto;
    bottom: -6px;
    width: auto;
    height: 2px;
  }
}
@media (max-width: 700px) {
  .capture-product-guide {
    align-items: flex-start;
    flex-direction: column;
  }
  .capture-guide {
    padding-top: 18px;
  }
  .capture-crumbs span:nth-last-child(n + 2) {
    display: none;
  }
  .capture-hero {
    min-height: 520px;
    align-items: flex-end;
    padding: 30px 24px;
    border-radius: 20px;
  }
  .capture-frame {
    top: 34px;
    right: 28px;
    width: 64%;
  }
  .recording-monitor {
    top: 28px;
    right: 24px;
    width: 66%;
  }
  .recording-hero {
    min-height: 0;
    padding-top: 190px;
  }
  .capture-hero-copy {
    width: 100%;
  }
  .capture-hero h1 {
    font-size: clamp(36px, 12vw, 52px);
  }
  .capture-layout {
    margin-top: 42px;
    gap: 36px;
  }
  .capture-section {
    margin-bottom: 58px;
  }
  .capture-inline-figure {
    margin: -8px 0 58px;
  }
  .capture-picks,
  .capture-criteria {
    grid-template-columns: 1fr;
  }
  .capture-path-grid {
    grid-template-columns: 1fr;
  }
  .capture-path-grid a {
    min-height: 0;
  }
  .capture-review-head {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .capture-review-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
  }
  .capture-price {
    grid-column: 2;
    width: fit-content;
  }
  .capture-final {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (prefers-reduced-motion: reduce) {
  .capture-guide *,
  .capture-guide *::before,
  .capture-guide *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================================
   ALTERNATIVES PAGES — "exit ramp"
   Job: help someone leave a named competitor. Signature is the vertical
   transfer ladder (from → to), not the capture marquee used on /best/.
============================================================================ */
.alt-guide {
  --alt-ink: var(--ink);
  --alt-soft: var(--ink-soft);
  --alt-muted: var(--muted);
  --alt-rail: rgba(var(--accent-rgb), 0.55);
  --capture-link: #0066d6;
  --capture-button: #0066d6;
  --capture-button-hover: #0057b8;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) 0 80px;
}
:root[data-theme="dark"] .alt-guide {
  --capture-link: #78b9ff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .alt-guide {
    --capture-link: #78b9ff;
  }
}
.alt-guide .btn-primary {
  background: var(--capture-button, var(--accent));
}
.alt-guide .btn-primary:hover {
  background: var(--capture-button-hover, var(--accent-hover));
}
.alt-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 28px;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--alt-muted);
}
.alt-crumbs a:hover { color: var(--accent); }

.alt-hero {
  position: relative;
  padding: clamp(28px, 4vw, 40px) 0 8px;
  border-bottom: 1px solid var(--line);
}
.alt-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--capture-link);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.alt-hero-kicker::before {
  content: "";
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.alt-hero h1 {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(32px, 5.5vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.alt-hero-deck {
  margin-top: 16px;
  max-width: 58ch;
  color: var(--alt-soft);
  font-size: 17px;
  line-height: 1.55;
}
.alt-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 20px;
  color: var(--alt-muted);
  font-size: 13px;
}
.alt-from-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--alt-ink);
  font-size: 13px;
  font-weight: 560;
}
.alt-from-chip > span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}

.alt-disclosure {
  margin-top: 22px;
  padding: 14px 16px;
  border-left: 3px solid rgba(var(--accent-rgb), 0.55);
  background: var(--panel-soft);
  border-radius: 0 12px 12px 0;
  color: var(--alt-soft);
  font-size: 13px;
  line-height: 1.55;
}
.alt-disclosure strong { color: var(--alt-ink); }

.alt-passport {
  display: block;
  margin-top: 36px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(160deg, rgba(var(--accent-rgb), 0.08), transparent 55%),
    var(--panel);
  box-shadow: var(--shadow-sm);
}
.alt-passport > .alt-passport-body {
  display: grid;
  gap: 18px;
}
@media (min-width: 640px) {
  .alt-passport > .alt-passport-body {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}
.alt-passport-label {
  color: var(--alt-muted);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.alt-passport h2 {
  margin: 6px 0 0;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.alt-passport p {
  margin-top: 10px;
  color: var(--alt-soft);
  font-size: 14px;
  line-height: 1.6;
}
.alt-passport-price {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  text-align: right;
}
.alt-passport-price strong {
  display: block;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.alt-passport-price span {
  display: block;
  margin-top: 4px;
  color: var(--alt-muted);
  font-size: 12px;
  line-height: 1.4;
  max-width: 220px;
}

.alt-section {
  margin-top: 48px;
}
.alt-section > h2 {
  margin: 0 0 12px;
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.alt-section > p {
  color: var(--alt-soft);
  font-size: 15px;
  line-height: 1.65;
  max-width: 62ch;
}
.alt-section > p + p { margin-top: 12px; }
.alt-section a {
  color: var(--capture-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.alt-section a:hover { text-decoration: underline; }
.alt-section a.btn,
.alt-section .alt-related a {
  text-decoration: none;
}
.alt-section a.btn {
  color: #fff;
}
.alt-section kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--panel);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85em;
}

.alt-triggers {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}
@media (min-width: 640px) {
  .alt-triggers { grid-template-columns: 1fr 1fr; }
}
.alt-trigger {
  position: relative;
  padding: 14px 16px 14px 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  color: var(--alt-soft);
  font-size: 13.5px;
  line-height: 1.5;
}
.alt-trigger::before {
  content: "→";
  position: absolute;
  left: 14px;
  top: 14px;
  color: var(--accent);
  font-weight: 700;
}

.alt-ladder {
  position: relative;
  margin-top: 28px;
  padding-left: 0;
  list-style: none;
}
.alt-ladder::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 28px;
  bottom: 28px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--alt-rail),
    rgba(var(--accent-rgb), 0.12)
  );
  border-radius: 1px;
}
.alt-rung {
  position: relative;
  display: grid;
  gap: 10px 16px;
  margin: 0 0 14px;
  padding: 18px 18px 18px 56px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.alt-rung:hover {
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.alt-rung-own {
  border-color: rgba(var(--accent-rgb), 0.4);
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), transparent 60%),
    var(--panel);
}
.alt-rung-num {
  position: absolute;
  left: 8px;
  top: 18px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--panel);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
}
:root[data-theme="dark"] .alt-rung-num {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .alt-rung-num {
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--line-strong);
  }
}
.alt-rung-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}
.alt-rung-tag {
  display: block;
  margin-bottom: 4px;
  color: var(--capture-link);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.alt-rung h3 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.015em;
}
.alt-rung-price {
  color: var(--alt-muted);
  font-size: 13px;
  font-weight: 560;
  white-space: nowrap;
}
.alt-rung p {
  margin: 0;
  color: var(--alt-soft);
  font-size: 14px;
  line-height: 1.55;
}
.alt-rung-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.alt-rung-actions .btn { font-size: 13px; padding: 8px 14px; }
.alt-rung-footer {
  margin-top: 2px;
  color: var(--alt-muted);
  font-size: 13px;
}
.alt-rung-footer a { color: var(--capture-link, var(--accent)); }

.alt-table-wrap {
  margin-top: 20px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.alt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.alt-table caption {
  padding: 12px 16px;
  text-align: left;
  color: var(--alt-muted);
  font-size: 12px;
  border-bottom: 1px solid var(--line);
}
.alt-table th,
.alt-table td {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
}
.alt-table thead th {
  border-top: 0;
  background: var(--panel-soft);
  color: var(--alt-soft);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.alt-table tbody th {
  font-weight: 600;
  color: var(--alt-ink);
}
.alt-table-own {
  background: rgba(var(--accent-rgb), 0.06);
}
.alt-table-own th span {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--capture-link);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.alt-source-note {
  margin-top: 10px;
  color: var(--alt-muted);
  font-size: 12px;
  line-height: 1.45;
}

.alt-stay {
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px dashed var(--line-strong);
  background: var(--panel-soft);
}
.alt-stay strong {
  display: block;
  margin-bottom: 8px;
  color: var(--alt-ink);
}
.alt-stay ul {
  margin: 0;
  padding-left: 18px;
  color: var(--alt-soft);
  font-size: 14px;
  line-height: 1.55;
}
.alt-stay li + li { margin-top: 4px; }

.alt-related {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
@media (min-width: 560px) {
  .alt-related { grid-template-columns: 1fr 1fr; }
}
.alt-related a {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.alt-related a:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  text-decoration: none;
}
.alt-related a span {
  display: block;
  color: var(--capture-link);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.alt-related a strong {
  display: block;
  margin-top: 6px;
  font-size: 15px;
}

.alt-faq details {
  border-top: 1px solid var(--line);
}
.alt-faq details:last-child { border-bottom: 1px solid var(--line); }
.alt-faq summary {
  cursor: pointer;
  padding: 16px 28px 16px 0;
  list-style: none;
  font-weight: 600;
  font-size: 15px;
}
.alt-faq summary::-webkit-details-marker { display: none; }
.alt-faq summary::after {
  content: "+";
  float: right;
  color: var(--alt-muted);
  font-weight: 500;
}
.alt-faq details[open] summary::after { content: "–"; }
.alt-faq details p {
  margin: 0 0 16px;
  color: var(--alt-soft);
  font-size: 14px;
  line-height: 1.6;
  max-width: 62ch;
}

.alt-final {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 48px;
  padding: 24px;
  border-radius: 18px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), transparent 70%),
    var(--panel);
}
.alt-final h2 {
  margin: 0 0 6px;
  font-size: 20px;
  letter-spacing: -0.015em;
}
.alt-final p {
  margin: 0;
  color: var(--alt-soft);
  font-size: 14px;
  line-height: 1.5;
  max-width: 42ch;
}

@media (max-width: 560px) {
  .alt-ladder::before { left: 15px; }
  .alt-rung { padding-left: 48px; }
  .alt-rung-num { left: 4px; }
  .alt-passport-price { text-align: left; }
  .alt-passport-price span { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .alt-rung,
  .alt-related a {
    transition: none;
  }
}

/* ============================================================================
   VS PAGES — dual scoreboard
   Job: decide between A and B. Signature is the split arena + VS medallion.
   Our app appears only as a labeled third lane, never as a fake vs opponent.
============================================================================ */
.vs-guide {
  --capture-link: #0066d6;
  --capture-button: #0066d6;
  --capture-button-hover: #0057b8;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) 0 80px;
}
:root[data-theme="dark"] .vs-guide {
  --capture-link: #78b9ff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vs-guide {
    --capture-link: #78b9ff;
  }
}
.vs-guide .btn-primary {
  background: var(--capture-button, var(--accent));
}
.vs-guide .btn-primary:hover {
  background: var(--capture-button-hover, var(--accent-hover));
}
.vs-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 24px;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--muted);
}
.vs-crumbs a:hover { color: var(--accent); }

.vs-title {
  margin-bottom: 18px;
}
.vs-title h1 {
  margin: 6px 0 0;
  font-size: clamp(28px, 4.5vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-weight: 700;
  max-width: 18ch;
}
.vs-guide > h1 {
  margin: 0 0 18px;
  font-size: clamp(28px, 4.5vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-weight: 700;
  max-width: 18ch;
}
.vs-arena {
  position: relative;
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow-md);
}
@media (min-width: 720px) {
  .vs-arena { grid-template-columns: 1fr auto 1fr; }
}
.vs-fighter {
  padding: clamp(24px, 4vw, 36px);
  background:
    radial-gradient(ellipse at top, rgba(var(--accent-rgb), 0.1), transparent 60%),
    var(--panel);
}
.vs-fighter-right {
  background:
    radial-gradient(ellipse at top, rgba(26, 34, 51, 0.06), transparent 60%),
    var(--panel-soft);
}
:root[data-theme="dark"] .vs-fighter-right {
  background:
    radial-gradient(ellipse at top, rgba(255, 255, 255, 0.05), transparent 60%),
    var(--panel-soft);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vs-fighter-right {
    background:
      radial-gradient(ellipse at top, rgba(255, 255, 255, 0.05), transparent 60%),
      var(--panel-soft);
  }
}
.vs-fighter-label {
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.vs-fighter h1,
.vs-fighter .vs-fighter-name {
  margin: 8px 0 0;
  font-size: clamp(26px, 4vw, 36px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-weight: 700;
}
.vs-fighter p {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
  max-width: 34ch;
}
.vs-fighter-price {
  display: inline-block;
  margin-top: 16px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
.vs-medallion {
  display: grid;
  place-items: center;
  z-index: 1;
  padding: 12px 0;
  background: var(--panel);
}
@media (min-width: 720px) {
  .vs-medallion {
    padding: 0 8px;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }
}
.vs-medallion span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--panel);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-md);
}
:root[data-theme="dark"] .vs-medallion span {
  background: #f0f2f5;
  color: #1a2233;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vs-medallion span {
    background: #f0f2f5;
    color: #1a2233;
  }
}

.vs-verdict {
  margin-top: 18px;
  padding: 18px 22px;
  border-radius: 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  background:
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.12), transparent 70%),
    var(--panel);
}
.vs-verdict-label {
  color: var(--capture-link);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.vs-verdict p {
  margin: 8px 0 0;
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  font-weight: 560;
  max-width: 68ch;
}
.vs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
}
.vs-disclosure {
  margin-top: 16px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.vs-rail {
  position: sticky;
  top: 12px;
  z-index: 5;
  display: flex;
  gap: 6px;
  margin: 28px 0 8px;
  padding: 6px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  scrollbar-width: none;
}
.vs-rail::-webkit-scrollbar { display: none; }
.vs-rail a {
  flex: none;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 560;
  white-space: nowrap;
  text-decoration: none;
}
.vs-rail a:hover { background: var(--panel-soft); color: var(--ink); }
.vs-rail a.active {
  background: var(--ink);
  color: var(--panel);
}
:root[data-theme="dark"] .vs-rail a.active {
  background: #f0f2f5;
  color: #1a2233;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vs-rail a.active {
    background: #f0f2f5;
    color: #1a2233;
  }
}

.vs-section {
  margin-top: 40px;
  scroll-margin-top: 76px;
}
.vs-section > h2 {
  margin: 0 0 12px;
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: -0.02em;
}
.vs-section > p {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.65;
  max-width: 66ch;
}
.vs-section > p + p { margin-top: 12px; }
.vs-section a {
  color: var(--capture-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vs-section a:hover { text-decoration: underline; }
.vs-section a.btn {
  color: #fff;
  text-decoration: none;
}
.vs-section kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--panel);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85em;
}

.vs-scoreboard {
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--panel);
}
.vs-score-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.vs-score-row:first-child { border-top: 0; }
.vs-score-row > * {
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
}
.vs-score-head {
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 11px !important;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.vs-score-feat {
  font-weight: 600;
  color: var(--ink);
  background: var(--panel-soft);
}
.vs-score-row > :nth-child(2),
.vs-score-row > :nth-child(3) {
  border-left: 1px solid var(--line);
  color: var(--ink-soft);
}
.vs-score-win {
  color: var(--ink) !important;
  font-weight: 600;
  background: rgba(var(--accent-rgb), 0.07);
}
@media (max-width: 640px) {
  .vs-score-row {
    grid-template-columns: 1fr;
  }
  .vs-score-row > :nth-child(2),
  .vs-score-row > :nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 14px;
  }
  .vs-score-row > :nth-child(2)::before,
  .vs-score-row > :nth-child(3)::before {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .vs-score-row[data-left] > :nth-child(2)::before {
    content: attr(data-left);
  }
  .vs-scoreboard[data-left] .vs-score-row:not(.vs-score-head) > :nth-child(2)::before {
    content: attr(data-left);
  }
}

.vs-dim {
  display: grid;
  gap: 0;
  margin-top: 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  .vs-dim { grid-template-columns: 1fr 1fr; }
}
.vs-dim-card {
  padding: 20px 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.vs-dim-card h3 {
  margin: 0 0 10px;
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vs-dim-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
}
.vs-dim-card-left {
  background: transparent;
}
.vs-dim-card-right {
  border-top: 1px solid var(--line);
  background: transparent;
}
.vs-dim-card-left h3 {
  color: var(--capture-link);
}
@media (min-width: 720px) {
  .vs-dim-card-right {
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}

.vs-picks {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
@media (min-width: 640px) {
  .vs-picks { grid-template-columns: 1fr 1fr; }
}
.vs-pick {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.vs-pick span {
  display: block;
  color: var(--capture-link);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vs-pick strong {
  display: block;
  margin-top: 8px;
  font-size: 16px;
}
.vs-pick p {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
}

.vs-third {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
  padding: 22px 24px;
  border-radius: 16px;
  border: 1px dashed rgba(var(--accent-rgb), 0.45);
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), transparent 65%),
    var(--panel);
}
.vs-third-label {
  color: var(--capture-link);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.vs-third h2 {
  margin: 6px 0 0;
  font-size: 20px;
  letter-spacing: -0.015em;
}
.vs-third p {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
  max-width: 48ch;
}

.vs-faq details { border-top: 1px solid var(--line); }
.vs-faq details:last-child { border-bottom: 1px solid var(--line); }
.vs-faq summary {
  cursor: pointer;
  padding: 16px 28px 16px 0;
  list-style: none;
  font-weight: 600;
  font-size: 15px;
}
.vs-faq summary::-webkit-details-marker { display: none; }
.vs-faq summary::after {
  content: "+";
  float: right;
  color: var(--muted);
}
.vs-faq details[open] summary::after { content: "–"; }
.vs-faq details p {
  margin: 0 0 16px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
  max-width: 64ch;
}

.vs-final {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 48px;
  padding: 24px;
  border-radius: 18px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
}
.vs-final h2 {
  margin: 0 0 6px;
  font-size: 20px;
}
.vs-final p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  max-width: 46ch;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .vs-rail { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.curated-endpoint {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
}
.curated-endpoint-label {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.curated-endpoint-url {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
}
.curated-endpoint-url:hover {
  text-decoration: underline;
}
.curated-endpoint-copy {
  width: auto;
  margin: 0 0 0 auto;
  font-size: 12px;
}
/* The inline example URL gets its own line and scrolls rather than breaking
   mid-path: a URL split across lines can't be read or copied at a glance. */
.curated-example {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  vertical-align: bottom;
  white-space: nowrap;
  word-break: normal;
}

/* --- Curated app lists (admin: Internal Ads, Top Paid) ---------------------
   Drag-sortable list. Rows are cards rather than table rows because a table
   row can't be dragged intact across browsers, and the ordering is the content
   here - it needs to be grabbable, not tabular.

   The classes are `curated-*`, NOT `ad-*`. They were `ad-row` / `ad-list` and
   ad blockers hid every row with a cosmetic filter: the elements stayed in the
   DOM (so the count looked right) but computed to display:none, which reads
   exactly like "the list didn't render" and produces no console error. An
   admin screen must not depend on the operator disabling their blocker. Don't
   reintroduce `ad-` on anything that has to be visible. */
.curated-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.curated-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.curated-row.dragging {
  opacity: 0.55;
  border-color: var(--accent);
}
.curated-row.muted {
  background: var(--panel-soft);
}
.curated-handle {
  cursor: grab;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  user-select: none;
}
.curated-row.dragging .curated-handle {
  cursor: grabbing;
}
.curated-pos {
  min-width: 22px;
  text-align: right;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.curated-row .app-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  overflow: hidden;
}
.curated-meta {
  flex: 1;
  min-width: 0;
}
.curated-name {
  font-weight: 600;
  font-size: 14px;
}
.curated-desc {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.curated-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.curated-actions .auth-link[disabled] {
  opacity: 0.35;
  cursor: default;
}

/* --- Share row (app detail) ----------------------------------------------
   Brand-coloured circles, monochrome glyphs. Colour only on hover/focus so a
   row of eight saturated logos doesn't out-shout the download CTA above it. */
.share-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.share-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.share-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.share-btn svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}
/* The hand-drawn glyphs (email, copy, native share) are strokes, not fills. */
.share-email svg,
.share-copy svg,
.share-native svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.share-btn:hover,
.share-btn:focus-visible {
  color: #fff;
  border-color: transparent;
  transform: translateY(-1px);
}
.share-facebook:hover,  .share-facebook:focus-visible  { background: #1877f2; }
.share-x:hover,         .share-x:focus-visible         { background: #000; }
.share-whatsapp:hover,  .share-whatsapp:focus-visible  { background: #25d366; }
.share-reddit:hover,    .share-reddit:focus-visible    { background: #ff4500; }
.share-telegram:hover,  .share-telegram:focus-visible  { background: #26a5e4; }
.share-linkedin:hover,  .share-linkedin:focus-visible  { background: #0a66c2; }
.share-instagram:hover, .share-instagram:focus-visible {
  background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7);
}
.share-email:hover,     .share-email:focus-visible     { background: var(--accent); }
.share-copy:hover,      .share-copy:focus-visible,
.share-native:hover,    .share-native:focus-visible    { background: var(--accent); }
.share-flash {
  font-size: 13px;
  color: var(--muted);
  min-height: 18px;
}
@media (max-width: 560px) {
  .share-row { gap: 10px; }
  .share-flash { flex-basis: 100%; }
}

/* ===================== EDITOR CHOICES / COLLECTIONS =====================
   Banners on the homepage, and one landing page per collection. Banners are a
   CSS gradient plus type - no image files to commission, resize, or forget to
   update when a collection changes. */
.collection-banners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.collection-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  min-height: 132px;
  padding: 18px 20px;
  border-radius: 16px;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(135deg, var(--banner-from), var(--banner-to));
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s, box-shadow 0.15s;
}
.collection-banner:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
/* A soft sweep so the type never sits on the flattest part of the gradient. */
.collection-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 90% 0%, rgba(255, 255, 255, 0.22), transparent 60%);
  pointer-events: none;
}
.collection-banner-name {
  position: relative;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.collection-banner-tagline {
  position: relative;
  font-size: 13px;
  opacity: 0.92;
}
.collection-banner-count {
  position: relative;
  margin-top: 6px;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.8;
}
.collection-banner-plain {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
}
.collection-banner-plain::after {
  display: none;
}

/* ---- Collection landing page ---- */
.collection {
  max-width: 920px;
  /* `main` has no vertical padding - each page brings its own - so without this
     the back-link and hero sat flush against the browser chrome. */
  padding-top: clamp(28px, 5vw, 56px);
  padding-bottom: 24px;
}
.collection-hero {
  margin-top: 22px;
  padding: 34px 28px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--banner-from), var(--banner-to));
}
.collection-eyebrow {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}
.collection-hero h1 {
  margin-top: 10px;
  font-size: clamp(30px, 5vw, 44px);
  letter-spacing: -0.02em;
}
.collection-tagline {
  margin-top: 6px;
  font-size: 17px;
  opacity: 0.94;
}
.collection-intro {
  margin: 26px 0 8px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 760px;
}

.collection-app {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.collection-app-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.collection-app-head .app-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
}
.collection-app-title {
  flex: 1;
  min-width: 200px;
}
.collection-app-title h2 {
  font-size: 24px;
  letter-spacing: -0.02em;
}
.collection-app-tagline {
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
}
.collection-app-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.collection-price {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11.5px;
  color: var(--muted);
}

/* Screenshots scroll sideways rather than shrinking to thumbnails - on a page
   whose job is to show the apps, a legible strip beats a tidy grid. */
.collection-shots {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  padding-bottom: 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
/* Each shot is a button now - it opens the same lightbox the app page uses,
   so the frame has to look clickable and take focus like one. */
.collection-shot {
  flex: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  cursor: zoom-in;
  overflow: hidden;
  scroll-snap-align: start;
  transition: border-color 0.15s, transform 0.1s;
}
.collection-shot:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}
.collection-shots img {
  height: 260px;
  width: auto;
  display: block;
}
.collection-summary {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 760px;
}

.collection-notes {
  margin-top: 22px;
}
.collection-notes-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* The attribution is not decoration: these are our notes, and saying so is the
   difference between an editorial verdict and a fake customer review. */
.collection-notes-by {
  margin-left: 6px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.collection-notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.collection-note {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.collection-note-stars {
  font-size: 12px;
  letter-spacing: 1px;
  color: #e0a33f;
}
.collection-note-stars-off {
  color: var(--line);
}
.collection-note-title {
  margin-top: 6px;
  font-weight: 600;
  font-size: 14px;
}
.collection-note-body {
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.collection-app-foot {
  display: inline-block;
  margin-top: 18px;
  font-size: 14px;
  color: var(--accent);
}
.collection-app-foot:hover {
  text-decoration: underline;
}
.collection-more {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.collection-more h2 {
  font-size: 20px;
  margin-bottom: 14px;
}
@media (max-width: 700px) {
  .collection-app-cta {
    align-items: flex-start;
  }
  .collection-shots img {
    height: 190px;
  }
}