:root {
  color-scheme: dark;
  --bg: #0A0A0F;
  --surface: #17171E;
  --surface-variant: #1C1C24;
  --border: #2A2A34;
  --text: #F2F2F5;
  --text-secondary: #9A9AA4;
  /* Was #55555F - 2.2-2.7:1 on these surfaces, under WCAG AA's 4.5:1
     for text. Now >=4.65:1 on every surface up to the post card's #1E1E29
     (e2e/a11y.spec.js enforces it). */
  --text-muted: #878793;
  --cyan: #00E5FD;
  --blue: #2E8CF0;
  --violet: #7B4AEA;
  /* The accents as TEXT (links, active icons) rather than fills: same
     hue, but pinned to >=4.5:1 against this theme's surfaces - redefined
     for light below, where cyan text on white is 1.5:1. Fills, gradients
     and borders keep using the plain accent tokens. */
  --cyan-text: var(--cyan);
  --blue-text: var(--blue);
  --violet-text: #9771EF;
  --magenta: #D93FC0;
  --pink: #FB5A90;
  --coral: #FD7E59;
  --brand-gradient: linear-gradient(90deg, var(--cyan), var(--blue), var(--violet), var(--magenta), var(--pink), var(--coral));
  /* "Danger"/error red - split into an rgb-triplet (for rgba() backgrounds/
     borders) and a solid text tone, since the two need different lightness
     in light mode: a pale-red-tinted background still needs a DARKER red
     for the text sitting on it to stay readable (matches WaveLenErrorLight
     in Color.kt), not the same light salmon dark mode uses on near-black. */
  --error-rgb: 255, 107, 107;
  --error-text: #FF9E9E;
}

/* WaveLen is dark-mode-first (see ui/theme/Theme.kt's own doc comment on
   Android) - light mode is an explicit opt-in via Settings > Appearance,
   never something that follows the OS/browser's prefers-color-scheme.
   Values mirror WaveLenLight* in Color.kt exactly; the brand/accent colors
   above are deliberately NOT redefined here, same as Android's
   WaveLenLightColorScheme keeping the same accent hues on light surfaces
   instead of black. [data-theme] is set by the inline script at the top of
   every page's <head> (reading localStorage before first paint, so a
   light-mode user never sees a flash of the dark default) and re-set live
   by settings.js's toggle. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #FAFAFA;
  --surface: #FFFFFF;
  --surface-variant: #F0F0F2;
  --border: #E0E0E4;
  --text: #16161C;
  --text-secondary: #5C5C66;
  --text-muted: #6B6B75; /* was #8A8A94, 3.0-3.4:1 - see the dark value's comment */
  --cyan-text: #007784;
  --blue-text: #0F70D8;
  --violet-text: var(--violet);
  --error-rgb: 179, 38, 30;
  --error-text: #B3261E;
}

/* High contrast (AccessibilityPreferences.highContrast on Android, mirrored
   here) - an explicit opt-in layered on top of dark/light, not a third
   theme: pushes background/surface/text to the true extremes and collapses
   the muted/secondary text tiers, since the whole point is that nothing
   reads as "decorative enough to skip". Brand accent hues (cyan/blue/
   violet/magenta/pink/coral) are deliberately NOT redefined here, same as
   Color.kt's WaveLenHighContrast* values - they're never used to carry text
   on their own background, only as accents on full-contrast surfaces.
   [data-contrast] is set the same way [data-theme] is - see that comment
   above. */
:root[data-contrast="high"] {
  --bg: #000000;
  --surface: #000000;
  --surface-variant: #1A1A1A;
  --border: #FFFFFF;
  --text: #FFFFFF;
  --text-secondary: #FFFFFF;
  --text-muted: #D0D0D0;
  --error-rgb: 255, 82, 82;
  --error-text: #FF5252;
}
:root[data-theme="light"][data-contrast="high"] {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-variant: #EDEDED;
  --border: #000000;
  --text: #000000;
  --text-secondary: #000000;
  --text-muted: #000000;
  --error-rgb: 176, 0, 32;
  --error-text: #B00020;
}

/* Reduce motion (AccessibilityPreferences.reduceMotion) - collapses every
   transition/animation to effectively instant rather than hunting down each
   of the handful of transition: rules individually, same standard approach
   as the widely-used @media(prefers-reduced-motion) snippet. This is an
   app-specific opt-in independent of the OS setting, same as Android's
   LocalReduceMotion - someone can want less motion in WaveLen specifically
   without changing it system-wide. */
:root[data-motion="reduce"] *,
:root[data-motion="reduce"] *::before,
:root[data-motion="reduce"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* Same collapse when the OS asks for reduced motion (Windows/macOS/iOS/Android
   "reduce motion"), so people who already set it system-wide get it here
   without also finding the in-app toggle. The in-app setting above still
   works on its own for people who want it only in WaveLen. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

* { box-sizing: border-box; }

html {
  /* AccessibilityPreferences.textScale, mirrored - scales every rem-sized
     font-size sitewide (every font-size in this codebase is rem, layout
     dimensions like padding/gap are px, so this only ever affects text,
     never layout - see wavelen-util.js's setTextScale). --text-scale is set
     inline by the same pre-paint script as data-theme/data-motion/
     data-contrast above; the var()'s 1 fallback covers the "never touched
     this setting" case. Clamped to 0.85-1.3 by setTextScale, matching
     AccessibilityPreferences.TEXT_SCALE_RANGE on Android. */
  font-size: calc(100% * var(--text-scale, 1));
  /* Fallback canvas color for overscroll/rubber-band regions beyond body's
     own box - body's background is normally the same color, except on
     profile.html when a wallpaper photo is active (see app.css's
     body.has-wallpaper), where body itself goes transparent so that fixed
     layer can show through. */
  background: var(--bg);
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}
.wrap-wide { max-width: 1180px; }
.placeholder {
  background: rgba(123, 74, 234, 0.14);
  border: 1px dashed var(--violet);
  border-radius: 6px;
  padding: 0 4px;
}

/* Header */
header.site {
  padding: 28px 0;
}
header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.brand span {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
}
header.site .wrap { gap: 12px; }
/* Groups the logo with the always-visible menu trigger (nav-drawer /
   mobile-menu-wrap) so both sit together on the left, instead of the menu
   trigger floating off with whatever else is in the nav cluster. Shared
   between the marketing header (landing.css) and the authenticated app
   header (app.css's .app-header-inner), since both dropped their text
   wordmark down to logo-only. */
.brand-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
nav.site-auth {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
nav.site-auth a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  margin-left: 20px;
}
nav.site-auth a:hover { color: var(--text); }
nav.site-auth a.nav-cta {
  width: auto;
  padding: 8px 18px;
  font-size: 0.85rem;
  color: #fff;
}

/* Nav drawer - <details>/<summary>, no JS needed. Always visible (not just
   on mobile) now that the header no longer carries a separate desktop link
   row - see .brand-group above. */
.nav-drawer { display: block; }
.nav-drawer summary {
  list-style: none;
  cursor: pointer;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.nav-drawer summary::-webkit-details-marker { display: none; }
.nav-drawer summary svg { width: 18px; height: 18px; }
.nav-drawer .nav-drawer-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 8px 24px 16px;
  display: flex;
  flex-direction: column;
  z-index: 20;
}
.nav-drawer .nav-drawer-panel a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.nav-drawer .nav-drawer-panel a:last-child { border-bottom: none; }
.nav-drawer .nav-drawer-panel a.active { color: var(--text); }
.nav-drawer[open] summary { border-color: var(--violet); }
header.site { position: relative; }

/* Hero */
.hero {
  padding: 64px 0 48px;
  text-align: center;
}
.hero img.logo {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  margin-bottom: 28px;
  box-shadow: 0 0 60px rgba(123, 74, 234, 0.35);
}
.hero h1 {
  font-size: clamp(1.9rem, 5vw, 2.75rem);
  line-height: 1.2;
  margin: 0 0 18px;
  color: var(--text);
}
.hero p.lede {
  max-width: 560px;
  margin: 0 auto;
  color: var(--text-secondary);
  font-size: 1.05rem;
}
.hero-cta {
  max-width: 380px;
  margin: 32px auto 0;
}
.hero-cta .btn { width: auto; flex: 1; }
.hero-note {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 16px 0 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 10px 20px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  background: var(--surface);
}
.badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

/* Screenshots strip under the hero: real app screens, so the page shows
   what WaveLen is instead of only describing it. */
.screens {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 8px 16px 24px;
  margin: 0;
}
.screens figure { margin: 0; flex: 0 1 240px; text-align: center; }
.screens img {
  width: 100%;
  height: auto;
  border-radius: 22px;
  border: 1px solid var(--border);
  box-shadow: 0 18px 40px rgba(10, 10, 15, 0.25);
}
.screens figcaption { margin-top: 12px; font-size: 0.9rem; color: var(--text-secondary); }
@media (max-width: 720px) {
  .screens { overflow-x: auto; justify-content: flex-start; scroll-snap-type: x mandatory; }
  .screens figure { flex: 0 0 62%; scroll-snap-align: center; }
}

.calm-statement { padding: 40px 0 8px; text-align: center; }
.calm-statement h2 {
  max-width: 640px;
  margin: 0 auto;
  font-size: clamp(1.25rem, 3.2vw, 1.6rem);
  line-height: 1.35;
}

/* Features */
.features {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 16px 72px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 720px) {
  .features { grid-template-columns: 1fr; }
}
.feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
}
.feature .icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(var(--surface-variant), var(--surface-variant)) padding-box,
    linear-gradient(135deg, rgba(0, 229, 253, 0.35), rgba(123, 74, 234, 0.35), rgba(253, 126, 89, 0.35)) border-box;
  border: 1px solid transparent;
}
.feature .icon { color: var(--violet-text, var(--violet)); }
.feature .icon svg {
  width: 22px;
  height: 22px;
}
.feature h3 {
  margin: 0 0 8px;
  font-size: 1.02rem;
}
.feature p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.92rem;
}
.feature p a {
  color: var(--blue-text);
}
.feature p a:hover {
  text-decoration: underline;
}

/* "Isn't this just Instagram Close Friends?" comparison. A real table for
   screen readers; on a phone each row stacks into a small card. */
.compare { padding: 8px 0 64px; }
.compare .wrap { max-width: 640px; }
.compare h2 { font-size: 1.25rem; margin: 0 0 8px; }
.compare-lede { color: var(--text-secondary); margin: 0 0 20px; line-height: 1.6; }
.versus-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  font-size: 0.92rem;
}
.versus-table th, .versus-table td {
  text-align: left;
  vertical-align: top;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.versus-table tbody tr:last-child th, .versus-table tbody tr:last-child td { border-bottom: none; }
.versus-table thead th { font-size: 0.8rem; color: var(--text-secondary); font-weight: 600; }
.versus-table thead th:last-child { color: var(--violet-text, var(--violet)); }
.versus-table tbody th { font-weight: 600; width: 30%; }
.versus-table td { color: var(--text-secondary); }
.versus-table td:last-child { color: var(--text); font-weight: 500; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 560px) {
  .versus-table thead { display: none; }
  .versus-table, .versus-table tbody, .versus-table tr, .versus-table th, .versus-table td { display: block; width: auto; }
  .versus-table tbody th { width: auto; padding-bottom: 4px; border-bottom: none; }
  .versus-table td { padding-top: 2px; padding-bottom: 2px; border-bottom: none; }
  .versus-table td::before { font-size: 0.78rem; color: var(--text-secondary); font-weight: 400; display: block; }
  .versus-table td:nth-of-type(1)::before { content: "Instagram Close Friends"; }
  .versus-table td:nth-of-type(2)::before { content: "WaveLen"; color: var(--violet-text, var(--violet)); }
  .versus-table td:last-child { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
  .versus-table tbody tr:last-child td:last-child { border-bottom: none; }
}

/* Founder note: a short, personal "why" in the maker's own words. */
.founder-note { padding: 8px 0 72px; }
.founder-note .wrap { max-width: 640px; }
.founder-note h2 { font-size: 1.25rem; margin: 0 0 12px; }
.founder-note p { color: var(--text-secondary); margin: 0 0 12px; line-height: 1.6; }
.founder-note .sig { color: var(--text); font-weight: 600; }
.founder-note a { color: var(--blue-text); }

/* Footer */
footer.site {
  border-top: 1px solid var(--border);
  padding: 48px 0 28px;
  color: var(--text-muted);
  font-size: 0.85rem;
}
footer.site .footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
}
footer.site .footer-brand p {
  color: var(--text-secondary);
  font-size: 0.85rem;
  max-width: 220px;
  margin: 12px 0 0;
}
footer.site .footer-col h4 {
  color: var(--text);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 14px;
}
footer.site .footer-col a {
  display: block;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.88rem;
  margin: 0 0 10px;
}
footer.site .footer-col a:hover { color: var(--text); }
footer.site .footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
footer.site .footer-bottom a {
  color: var(--text-secondary);
  text-decoration: none;
  margin-left: 18px;
}
footer.site .footer-bottom a:hover { color: var(--text); }
@media (max-width: 720px) {
  footer.site .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Shared sub-page header (Features / Manifesto / Pricing / Trust / About / Download) */
.page-hero {
  padding: 56px 0 40px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.page-hero .eyebrow {
  display: inline-block;
  color: var(--cyan-text);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.page-hero h1 {
  font-size: clamp(1.7rem, 4.5vw, 2.4rem);
  line-height: 1.2;
  margin: 0 0 16px;
}
.page-hero p.lede {
  max-width: 620px;
  margin: 0 auto;
  color: var(--text-secondary);
  font-size: 1.02rem;
}

/* Prose content sections shared by Manifesto / About / Trust */
.content-section {
  padding: 48px 0;
  max-width: 720px;
  margin: 0 auto;
}
.content-section + .content-section { border-top: 1px solid var(--border); }
.content-section h2 {
  font-size: 1.35rem;
  margin: 0 0 16px;
}
.content-section h3 {
  font-size: 1.05rem;
  margin: 28px 0 10px;
}
.content-section p {
  color: var(--text-secondary);
  font-size: 0.98rem;
  margin: 0 0 16px;
}
.content-section ul {
  color: var(--text-secondary);
  font-size: 0.96rem;
  padding-left: 20px;
  margin: 0 0 16px;
}
.content-section li { margin-bottom: 8px; }
.content-section .lead {
  color: var(--text);
  font-size: 1.12rem;
  line-height: 1.6;
}

/* Manifesto contrast list ("this, not that") */
.contrast-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0;
}
.contrast-col {
  border-radius: 16px;
  padding: 22px 24px;
  border: 1px solid var(--border);
}
.contrast-col.against { background: var(--surface); }
.contrast-col.for {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--brand-gradient) border-box;
  border: 1.5px solid transparent;
}
.contrast-col h4 {
  margin: 0 0 12px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.contrast-col.for h4 { color: var(--text); }
.contrast-col ul { margin: 0; padding-left: 18px; font-size: 0.92rem; }
.contrast-col li { margin-bottom: 8px; color: var(--text-secondary); }
.contrast-col.for li { color: var(--text); }
@media (max-width: 640px) {
  .contrast-grid { grid-template-columns: 1fr; }
}

/* Values grid (Home "core values" strip, reused on Manifesto) */
.values-strip {
  padding: 40px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.values-strip .wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
}
.values-strip .value h3 {
  font-size: 1.6rem;
  margin: 0 0 6px;
  color: var(--text);
}
.values-strip .value p {
  color: var(--text-secondary);
  font-size: 0.88rem;
  margin: 0;
}
@media (max-width: 720px) {
  .values-strip .wrap { grid-template-columns: 1fr; gap: 28px; }
}

/* Pricing */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 48px 0;
  max-width: 860px;
  margin: 0 auto;
}
.price-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 28px;
}
.price-card.featured {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--brand-gradient) border-box;
  border: 1.5px solid transparent;
}
.price-card .plan-name { font-size: 1.1rem; font-weight: 700; margin: 0 0 4px; }
.price-card .plan-price {
  font-size: 2.1rem;
  font-weight: 700;
  margin: 12px 0 4px;
}
.price-card .plan-price span { font-size: 0.9rem; font-weight: 400; color: var(--text-secondary); }
.price-card .plan-note { color: var(--text-secondary); font-size: 0.85rem; margin: 0 0 22px; }
.price-card ul { list-style: none; padding: 0; margin: 0 0 24px; }
.price-card li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.price-card li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--cyan-text); }
@media (max-width: 720px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

.compare-table-wrap { overflow-x: auto; padding: 0 0 56px; }
table.compare-table {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  border-collapse: collapse;
  font-size: 0.9rem;
}
table.compare-table th, table.compare-table td {
  padding: 14px 16px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
table.compare-table th:first-child, table.compare-table td:first-child {
  text-align: left;
  color: var(--text);
}
table.compare-table thead th {
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
}
table.compare-table td { color: var(--text-secondary); }
table.compare-table td.yes { color: var(--cyan-text); font-weight: 600; }

/* CTA band, repeated near the bottom of every sub-page */
.cta-band {
  padding: 56px 0;
  text-align: center;
  border-top: 1px solid var(--border);
}
.cta-band h2 { font-size: 1.5rem; margin: 0 0 10px; }
.cta-band p { color: var(--text-secondary); margin: 0 0 24px; }
.cta-band .btn-row { max-width: 380px; margin: 0 auto; }
.cta-band .btn-row .btn { width: auto; flex: 1; }

/* Waitlist form (Download page) */
.waitlist-form {
  display: flex;
  gap: 10px;
  max-width: 420px;
  margin: 24px auto 0;
}
.waitlist-form input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 12px 18px;
  color: var(--text);
  font-size: 0.92rem;
  font-family: inherit;
}
.waitlist-form input:focus { outline: 2px solid var(--violet); outline-offset: 1px; border-color: var(--violet); }
.waitlist-form button {
  flex-shrink: 0;
  padding: 12px 22px;
  border-radius: 999px;
  border: none;
  background: var(--brand-gradient);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
}
.waitlist-status { font-size: 0.85rem; margin-top: 12px; min-height: 18px; }
.waitlist-status.ok { color: var(--cyan-text); }
.waitlist-status.error { color: var(--error-text); }

/* Store badges (Download page) */
.store-badges {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 0.88rem;
  text-decoration: none;
}
.store-badge.disabled { opacity: 0.6; cursor: default; }
.store-badge svg { width: 20px; height: 20px; }

/* Trust page checklist */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 8px 0 48px;
}
.trust-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
}
.trust-card h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.trust-card h3 svg { width: 20px; height: 20px; color: var(--cyan-text); flex-shrink: 0; }
.trust-card p { color: var(--text-secondary); font-size: 0.9rem; margin: 0; }
.trust-card p a { color: var(--blue-text); }
.trust-card p a:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .trust-grid { grid-template-columns: 1fr; }
}