/* redoist.com — tokens from packages/ui/src/theme/tokens.ts */
@font-face { font-family: 'Fraunces'; font-weight: 500; font-display: swap;
  src: url('fonts/fraunces-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 400; font-display: swap;
  src: url('fonts/hanken-grotesk-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 600; font-display: swap;
  src: url('fonts/hanken-grotesk-latin-600.woff2') format('woff2'); }

:root {
  --ground: #F0F2EF; --surface: #F7F8F6; --surface-raised: #FFFFFF;
  --tide: #4C7A6E; --tide-deep: #3C6457; --dusk: #5B6CB0;
  --tide-fill: rgba(76,122,110,0.16); --dusk-soft: rgba(91,108,176,0.12);
  --sand-soft: rgba(228,214,193,0.45); --accent: #4C7A6E;
  --text-1: #23282A; --text-2: #586360; --text-3: #7E8A87;
  --text-on-accent: #F5F8F6;
  --hairline: rgba(35,40,42,0.09); --hairline-strong: rgba(35,40,42,0.16);
  --shadow: 0 6px 20px rgba(35,40,42,0.08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #1A1E1F; --surface: #23282A; --surface-raised: #2A3133;
    --tide: #7CA89B; --tide-deep: #93BBAF; --dusk: #8B98D6;
    --tide-fill: rgba(124,168,155,0.18); --dusk-soft: rgba(139,152,214,0.16);
    --sand-soft: rgba(205,191,166,0.16); --accent: #6B9789;
    --text-1: #E9EDEB; --text-2: #AEB8B5; --text-3: #8C9794;
    --text-on-accent: #10201B;
    --hairline: rgba(233,237,235,0.10); --hairline-strong: rgba(233,237,235,0.18);
    --shadow: 0 6px 20px rgba(0,0,0,0.38);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--text-1);
  font: 400 17px/1.5 'Hanken Grotesk', system-ui, sans-serif;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tide-deep); }

.wrap { max-width: 1024px; margin: 0 auto; padding: 0 24px; }

.site-header { padding: 24px 0; }
.site-header .wrap { display: flex; align-items: baseline; justify-content: space-between; }
.wordmark { font: 500 24px 'Fraunces', serif; color: var(--text-1); text-decoration: none; }
.site-header nav a { margin-left: 20px; color: var(--text-2); text-decoration: none; font-size: 15px; }
.site-header nav a:hover { color: var(--text-1); }

/* Hero */
.hero .wrap { display: flex; align-items: center; gap: 48px; padding-top: 48px; padding-bottom: 64px; }
.hero-copy { flex: 1; }
.tagline { font: 500 clamp(38px, 6vw, 56px)/1.12 'Fraunces', serif; letter-spacing: -0.4px; margin: 0 0 16px; }
.lede { font-size: 20px; line-height: 1.5; color: var(--text-2); margin: 0 0 32px; max-width: 34em; }
.badge-appstore {
  display: inline-block; background: var(--accent); color: var(--text-on-accent);
  text-decoration: none; font-weight: 600; font-size: 17px;
  padding: 14px 28px; border-radius: 999px;
}
.badge-note { font-size: 13px; color: var(--text-2); margin-top: 12px; }

/* Device frame */
.phone {
  width: min(300px, 72vw); border-radius: 44px; overflow: hidden;
  border: 1px solid var(--hairline-strong); box-shadow: var(--shadow);
  background: var(--surface); flex-shrink: 0;
}
.phone img { width: 100%; }
picture.phone-src { display: contents; }

/* Principle cards */
.cards { background: var(--surface); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.cards .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 64px; padding-bottom: 64px; }
.card { background: var(--surface-raised); border: 1px solid var(--hairline); border-radius: 20px; padding: 28px; }
.card h2 { font: 500 20px/1.28 'Fraunces', serif; margin: 0 0 10px; }
.card p { margin: 0; color: var(--text-2); font-size: 15px; }

/* Screenshots band */
.shots { padding: 72px 0; }
.shots h2, .privacy-band h2 { font: 500 30px/1.28 'Fraunces', serif; text-align: center; margin: 0 0 40px; }
.shots-row { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; }
.shot figcaption { text-align: center; color: var(--text-2); font-size: 14px; margin-top: 12px; }
.shot { margin: 0; }

/* Privacy band */
.privacy-band { background: var(--tide-fill); padding: 64px 0; }
.privacy-band p { max-width: 42em; margin: 0 auto; text-align: center; color: var(--text-2); font-size: 17px; }

/* Footer */
.site-footer { padding: 48px 0 64px; color: var(--text-2); font-size: 14px; }
.site-footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.site-footer a { color: var(--text-2); text-decoration: none; margin-right: 16px; }
.site-footer a:hover { color: var(--text-1); }

/* Inner pages (privacy, support) */
.prose { max-width: 680px; margin: 0 auto; padding: 24px 24px 96px; }
.prose h1 { font: 500 38px/1.12 'Fraunces', serif; margin: 24px 0 8px; }
.prose h2 { font: 500 24px/1.28 'Fraunces', serif; margin: 40px 0 8px; }
.prose p, .prose li { color: var(--text-2); }
.prose .meta { color: var(--text-2); font-size: 14px; }
.faq dt { font-weight: 600; margin-top: 28px; }
.faq dd { margin: 8px 0 0; color: var(--text-2); }

@media (max-width: 800px) {
  .hero .wrap { flex-direction: column; text-align: center; }
  .lede { margin-inline: auto; }
  .cards .wrap { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-copy, .phone { animation: rise 0.6s ease-out both; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}