/* Same bundled OFL webfonts as the Sidecar app itself (fonts.css in the
   sidecar repo): Playfair Display for display/headings, Manrope for UI/body. */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/playfair-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/playfair-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/manrope-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/manrope-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/manrope-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/manrope-700.woff2') format('woff2');
}

/* Same velvet/purple palette as the extension's own welcome page
   (welcome.css in the sidecar repo), so the site feels like an extension
   of the app rather than a separate marketing skin. */
:root {
  --bg: #0a0118;
  --bg-2: #140428;
  --velvet-1: #23114a;
  --velvet-2: #160a30;
  --border: rgba(167, 139, 250, 0.16);
  --border-strong: rgba(167, 139, 250, 0.30);
  --accent: #ea772f;
  --gold: #cba14e;
  --gold-soft: rgba(203, 161, 78, 0.5);
  --purple: #a78bfa;
  --lav: #bda1ff;
  --text: #f1e8f8;
  --text-muted: #9a86c4;
  --text-dim: #6f5fa0;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-ui: 'Manrope', system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='38'%20height='38'%3E%3Cpath%20d='M0%2019%2019%200%2038%2019%2019%2038Z'%20fill='none'%20stroke='%23a78bfa'%20stroke-opacity='0.05'/%3E%3Ccircle%20cx='19'%20cy='19'%20r='1'%20fill='%23cba14e'%20fill-opacity='0.08'/%3E%3C/svg%3E"),
    radial-gradient(1100px 480px at 50% -12%, rgba(167, 139, 250, 0.14), transparent 60%),
    radial-gradient(820px 560px at 115% 112%, rgba(234, 119, 47, 0.12), transparent 55%),
    linear-gradient(165deg, #170630 0%, var(--bg) 62%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: fixed;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
}

a {
  color: inherit;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
}

.brand img {
  height: 2.25rem;
  width: auto;
}

.site-nav ul {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.site-nav a {
  display: inline-block;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.site-nav a:hover {
  color: var(--text);
  border-color: var(--border);
}

.site-nav a[aria-current="page"] {
  color: var(--lav);
  background: rgba(167, 139, 250, 0.14);
  border-color: rgba(167, 139, 250, 0.5);
}

.site-nav a.nav-install {
  background: linear-gradient(180deg, #f29248, var(--accent) 55%, #d4621f);
  color: #1c0c00;
  font-weight: 700;
  padding: 0.45rem 1.15rem;
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 14px rgba(234, 119, 47, 0.28);
}

.site-nav a.nav-install:hover {
  filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 18px rgba(234, 119, 47, 0.34);
}

.nav-toggle-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.6rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  cursor: pointer;
}

.nav-toggle-btn span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}

/* Middle tier: keep the nav inline but tightened — at full size the ten pills
   need ~1080px and clip below that. The burger takes over at 860px. */
@media (min-width: 861px) and (max-width: 1100px) {
  .site-header {
    padding: 1.5rem 1.25rem;
    gap: 0.75rem;
  }

  .site-nav ul {
    gap: 0.2rem;
  }

  .site-nav a {
    font-size: 0.82rem;
    padding: 0.35rem 0.6rem;
  }

  .site-nav a.nav-install {
    padding: 0.4rem 0.85rem;
  }

  .brand img {
    height: 2rem;
  }
}

@media (max-width: 860px) {
  .site-header {
    flex-wrap: wrap;
    padding: 1.25rem 1.5rem;
  }

  .nav-toggle-btn {
    display: flex;
  }

  .site-nav {
    flex-basis: 100%;
    display: none;
  }

  .nav-toggle:checked ~ .site-nav {
    display: block;
  }

  .site-nav ul {
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .site-nav a {
    display: block;
    text-align: center;
    padding: 0.85rem 1.25rem;
    font-size: 1rem;
  }

  .site-nav a.nav-install {
    padding: 0.85rem 1.25rem;
  }

  .nav-toggle:checked ~ .nav-toggle-btn span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle:checked ~ .nav-toggle-btn span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle:checked ~ .nav-toggle-btn span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 2rem 5rem;
}

.hero {
  text-align: center;
  padding: 2rem 0 3rem;
}

.hero img.hero-logo {
  height: 5rem;
  width: auto;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.55));
}

.hero h1 {
  font-size: 2.25rem;
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
}

.hero p {
  color: var(--text-muted);
  max-width: 55ch;
  margin: 0 auto 2rem;
  line-height: 1.65;
}

.link-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.btn {
  display: inline-block;
  background: linear-gradient(180deg, var(--velvet-1), var(--velvet-2));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.65rem 1.35rem;
  text-decoration: none;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}

.btn:hover {
  border-color: var(--gold-soft);
  box-shadow: 0 0 0 3px rgba(203, 161, 78, 0.1);
  transform: translateY(-1px);
}

.btn-primary {
  background: linear-gradient(180deg, #f29248, var(--accent) 55%, #d4621f);
  color: #1c0c00;
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 22px rgba(234, 119, 47, 0.28);
}

.btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 26px rgba(234, 119, 47, 0.34);
}

@media (max-width: 640px) {
  .link-row .btn {
    text-align: center;
  }

  .link-row .btn-primary {
    flex: 1 1 100%;
  }

  .link-row .btn:not(.btn-primary) {
    flex: 1 1 0;
  }
}

.slideshow {
  position: relative;
  margin: 2rem 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(22, 10, 48, 0.7);
  backdrop-filter: blur(4px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
}

.slideshow-track {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.slideshow-track img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.slideshow-track img.active {
  opacity: 1;
}

.slideshow-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 0;
}

.slideshow-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--border-strong);
  cursor: pointer;
  transition: background 0.15s;
}

.slideshow-dot:hover {
  background: var(--text-muted);
}

.slideshow-dot.active {
  background: var(--gold);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 2.5rem 0;
}

.feature-card {
  background: rgba(22, 10, 48, 0.7);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem;
  backdrop-filter: blur(4px);
  transition: border-color 0.15s, box-shadow 0.18s, transform 0.18s;
}

.feature-card:hover {
  border-color: rgba(167, 139, 250, 0.35);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.08), 0 10px 28px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
}

.feature-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  color: var(--gold);
}

.feature-card p, .feature-card ul {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.55;
}

.feature-card ul {
  padding-left: 1.1rem;
}

.section-kicker,
.release-label {
  margin: 0 0 0.4rem;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.release-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.release-page-intro {
  max-width: 60ch;
}

.release-page-cta,
.release-github-link {
  flex: none;
}

/* Chrome + Firefox store buttons side by side; stacks on narrow screens. */
.release-page-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: none;
}

.release-page-header h1 {
  margin: 0 0 0.75rem;
}

.release-page-header p:not(.section-kicker) {
  color: var(--text-muted);
  margin: 0;
}

.release-card {
  background: rgba(22, 10, 48, 0.7);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.35rem;
  margin: 2rem 0;
  backdrop-filter: blur(4px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35);
}

.release-card h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.35rem;
}

.release-teaser,
.release-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.release-card-header {
  align-items: flex-start;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.release-meta {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin: 0.45rem 0 0;
}

.release-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
}

.release-actions--compact {
  justify-content: flex-end;
  margin: 0;
}

.release-actions .btn {
  text-align: center;
}

/* Download picker on /releases — one neutral card per store build, Chrome
   first (ordering handled server-side in sidecar_release_downloads()). No
   orange fill: the gold CTA is reserved for the store-install path; these
   manual zip downloads stay velvet. */
.release-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 1.25rem 0 0;
}

.download-card {
  flex: 1 1 240px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--velvet-1), var(--velvet-2));
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}

.download-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.12);
  transform: translateY(-1px);
}

.download-card-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.download-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.download-card-browser {
  font-weight: 700;
  font-size: 1rem;
}

.download-card-zip {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  padding: 0.12rem 0.42rem;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  color: var(--lav);
  background: rgba(167, 139, 250, 0.12);
}

.download-card-note {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.download-card-file {
  font-size: 0.8rem;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

.download-card-cue {
  flex: none;
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  opacity: 0.9;
}

.release-notes {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.release-notes > h3 {
  margin: 0 0 1rem;
  color: var(--gold);
  font-size: 1rem;
}

.release-markdown {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

.release-markdown :first-child {
  margin-top: 0;
}

.release-markdown :last-child {
  margin-bottom: 0;
}

.release-markdown h1,
.release-markdown h2,
.release-markdown h3,
.release-markdown h4 {
  color: var(--text);
  margin: 1.4rem 0 0.5rem;
  font-size: 1.05rem;
}

.release-markdown p,
.release-markdown ul,
.release-markdown ol {
  margin: 0 0 1rem;
}

.release-markdown ul,
.release-markdown ol {
  padding-left: 1.3rem;
}

.release-markdown li + li {
  margin-top: 0.45rem;
}

.release-markdown strong {
  color: var(--text);
}

.release-markdown a {
  color: var(--lav);
  text-decoration: none;
}

.release-markdown a:hover {
  text-decoration: underline;
}

.release-markdown code {
  color: var(--text);
  background: rgba(10, 1, 24, 0.65);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.08rem 0.28rem;
  font-size: 0.9em;
}

.release-status {
  margin-bottom: 1rem;
}

.release-empty p {
  color: var(--text-muted);
  margin: 0.6rem 0 0;
}

@media (max-width: 640px) {
  .release-card {
    padding: 1.1rem;
  }

  .release-teaser,
  .release-card-header {
    align-items: stretch;
    flex-direction: column;
  }

  .release-actions,
  .release-actions--compact {
    justify-content: stretch;
  }

  .release-actions .btn {
    flex: 1 1 100%;
  }
}

.page-body {
  color: var(--text-muted);
}

.page-body h1 {
  color: var(--text);
}

.page-body h2 {
  color: var(--text);
  font-size: 1.15rem;
  margin-top: 2rem;
}

.page-body strong {
  color: var(--text);
}

/* Review carousel: all slides share one grid cell, so the container is sized to
   the tallest quote and cross-fading between reviews never shifts the layout. */
.testimonial-carousel {
  margin: 2.5rem 0;
}

.testimonial-carousel:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 6px;
  border-radius: 12px;
}

.testimonial-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 1rem;
}

.testimonial-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(22, 10, 48, 0.55);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.testimonial-arrow svg {
  width: 1.1rem;
  height: 1.1rem;
}

.testimonial-arrow:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: rgba(22, 10, 48, 0.9);
}

.testimonial-arrow:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 2px;
}

.testimonial-track {
  display: grid;
}

.testimonial-track .testimonial {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}

.testimonial-track .testimonial.active {
  opacity: 1;
  visibility: visible;
}

.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.testimonial-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--border-strong);
  cursor: pointer;
  transition: background 0.15s;
}

.testimonial-dot:hover {
  background: var(--text-muted);
}

.testimonial-dot.active {
  background: var(--gold);
}

.testimonial {
  background: rgba(22, 10, 48, 0.55);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 0 12px 12px 0;
  padding: 1.5rem 1.75rem;
  margin: 2.5rem 0;
}

.testimonial blockquote {
  margin: 0 0 1.1rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text);
}

.testimonial figcaption {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-strong);
  flex-shrink: 0;
}

.testimonial-who {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.testimonial-who a {
  font-weight: 600;
  color: var(--lav);
  text-decoration: none;
}

.testimonial-who a:hover {
  text-decoration: underline;
}

.testimonial-who span {
  font-size: 0.85rem;
  color: var(--text-dim);
}

.site-footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem 2rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "copy badge links";
  align-items: center;
  column-gap: 1.5rem;
  row-gap: 1rem;
  color: var(--text-dim);
  font-size: 0.85rem;
}

.site-footer a {
  color: var(--text-dim);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--text-muted);
}

.site-footer > p {
  grid-area: copy;
  justify-self: start;
  margin: 0;
}

.footer-links {
  grid-area: links;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.footer-badge {
  grid-area: badge;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.footer-badge a {
  display: inline-flex;
  background: #fff;
  padding: 6px 8px;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s, box-shadow 0.15s;
}

.footer-badge a:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
}

.footer-badge img {
  display: block;
  width: 160px;
  height: auto;
}

/* Mozilla's badge carries its own blue (#109ad6, sampled from the asset), so its
   card uses that instead of the Chrome badge's white — while matching the same
   footprint, radius, and shadow so the pair reads as one set. The badge art is
   narrower than Chrome's (2.87:1 vs 3.31:1), so it centers in the shared width
   rather than stretching to fill it. */
.footer-badge a.footer-badge-amo {
  background: #109ad6;
  align-items: center;
  justify-content: center;
  width: 176px;
}

.footer-badge a.footer-badge-amo img {
  width: auto;
  height: 48px;
}

@media (max-width: 640px) {
  .site-footer {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "links"
      "badge";
    justify-items: center;
    text-align: center;
  }

  .site-footer > p,
  .footer-links,
  .footer-badge {
    justify-self: center;
  }
}

.support-page {
  text-align: center;
}

.support-page p {
  max-width: 55ch;
  margin: 0 auto 2rem;
}

.support-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 320px;
  margin: 0 auto;
  background: rgba(22, 10, 48, 0.7);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem 1.5rem;
  backdrop-filter: blur(4px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
}

.support-qr {
  width: 200px;
  height: 200px;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}

.support-copy {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  text-align: center;
}

.support-page .hint {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin: 0;
}

.contact-section {
  margin-top: 3.5rem;
}

.support-form {
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-field label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
}

.form-field .optional {
  font-weight: 400;
  color: var(--text-dim);
}

.form-field input,
.form-field textarea {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--text);
  background: rgba(10, 1, 24, 0.6);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-field textarea {
  resize: vertical;
  min-height: 8rem;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.12);
}

.support-form .btn {
  align-self: flex-start;
}

.captcha-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.captcha-row img {
  border-radius: 10px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.captcha-row input {
  flex: 1;
  min-width: 140px;
}

/* Honeypot: off-screen for humans, still in the DOM for bots to fill. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-banner {
  max-width: 480px;
  margin: 0 auto 1.5rem;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 0.9rem;
  text-align: center;
}

.form-banner--ok {
  color: var(--lav);
  border-color: rgba(167, 139, 250, 0.5);
  background: rgba(167, 139, 250, 0.12);
}

.form-banner--err {
  color: #f0b7a0;
  border-color: var(--gold-soft);
  background: rgba(234, 119, 47, 0.12);
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.gh-link,
.nostr-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.gh-icon,
.nostr-icon {
  display: block;
  flex-shrink: 0;
}

/* ===== Catalog pages (apps, wallets) =====
   Card grid ported from the extension's welcome.css, mapped onto site tokens.
   Data comes from public/data/*.json via scripts/sync-catalog.mjs. */
.catalog-intro {
  max-width: 60ch;
  margin: 0 0 1.75rem;
}

.catalog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.5rem;
}

.catalog-filter {
  padding: 7px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.catalog-filter:hover { border-color: var(--border-strong); color: var(--text); }
.catalog-filter.active {
  background: rgba(167, 139, 250, 0.14);
  border-color: rgba(167, 139, 250, 0.5);
  color: var(--lav);
}

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

.catalog-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 16px;
  background: rgba(22, 10, 48, 0.7);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.catalog-card:hover {
  border-color: rgba(167, 139, 250, 0.35);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.08), 0 10px 28px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
}
.catalog-card[hidden] { display: none; }

.catalog-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.catalog-icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--velvet-1);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* One artwork size for every card, framed or not. `flush` decides whether the
   velvet tile is painted behind the icon, and nothing else. Mirrors
   .favicon-wrap in the extension's welcome.css — the two catalogs render the
   same data and have to agree on how it looks.

   These used to differ: framed icons drew at 32px inside the 46px tile while
   flush ones filled all 46. That mostly passed because flush icons are usually
   apple-touch-icons carrying their own internal padding, so the glyph landed
   near the framed size by accident. An icon drawn edge to edge, with no padding
   of its own, exposed the gap by rendering half again as much ink as its
   neighbours. */
.catalog-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 8px; /* round square favicons for an app-icon look */
}
.catalog-icon.flush { background: transparent; border-color: transparent; }
.catalog-icon.flush img { object-fit: cover; }

/* Entries whose logo is inline SVG rather than a file. Their viewBox plus the
   default preserveAspectRatio letterboxes each inside the square, so a tall or
   wide mark scales to fit rather than being stretched. */
.catalog-icon svg {
  width: 36px;
  height: 36px;
  display: block;
}

.catalog-title { min-width: 0; }
.catalog-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--text);
}
.catalog-domain {
  display: block;
  font-size: 0.78rem;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-desc {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.cat-badge {
  align-self: flex-start;
  margin-top: auto;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.cat-social        { background: rgba(167, 139, 250, 0.14); color: var(--lav); }
.cat-media         { background: rgba(234, 119, 47,  0.14); color: var(--accent); }
.cat-gaming        { background: rgba(52,  211, 153, 0.14); color: #34d399; }
.cat-commerce      { background: rgba(232, 121, 249, 0.14); color: #e879f9; }
.cat-tools         { background: rgba(148, 163, 184, 0.12); color: #94a3b8; }
.cat-other         { background: rgba(203, 161, 78,  0.14); color: var(--gold); }
.cat-custodial     { background: rgba(203, 161, 78,  0.14); color: var(--gold); }
.cat-selfcustodial { background: rgba(52,  211, 153, 0.16); color: #34d399; }
.cat-ecash         { background: rgba(167, 139, 250, 0.14); color: var(--lav); }

.catalog-tips {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--text-dim);
}