@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  /* Rivid brand palette ("Graphite & Iron Red"); shared with the Rivid Log app (Resources/Styles/Colors.xaml) */
  --ink: #171a18;
  --muted: #626862;
  --paper: #f7f5ef;
  --surface: #ffffff;
  --line: #deded7;
  --soft: #ece9df;
  /* Iron Red: the red bar from the Rivid and Rivid Log marks */
  --accent: #b3241b;
  --accent-dark: #8a1b14;
  /* graphite (the app's dark theme) */
  --graphite: #141518;
  --graphite-surface: #1c1e21;
  --graphite-raised: #25282c;
  --graphite-line: #33373c;
  --graphite-text: #f2f3f4;
  --graphite-muted: #9da3a8;
  --accent-on-dark: #e8483d;
  --max: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "DM Sans", system-ui, sans-serif;
  line-height: 1.7;
}
a { color: inherit; }
.container { width: min(calc(100% - 40px), var(--max)); margin: 0 auto; }

.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(247,245,239,.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.nav {
  min-height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand {
  font-family: "Libre Baskerville", Georgia, serif;
  font-weight: 700; text-decoration: none; font-size: 1.25rem;
  letter-spacing: -.02em;
  display: inline-flex; align-items: center; gap: 10px;
}
.brand img { width: 36px; height: 36px; }
/* the app's name (and each nav link) stays on one line; "Rivid Dose" would otherwise wrap on narrow phones */
.brand-text { white-space: nowrap; }
.brand-text span { font-weight: 400; font-style: italic; }
nav { display: flex; gap: 24px; }
nav a { text-decoration: none; color: var(--muted); font-size: .9rem; white-space: nowrap; }
nav a:hover, nav a.active { color: var(--ink); }
nav a.nav-home { color: var(--ink); font-weight: 600; padding-right: 24px; border-right: 1px solid var(--line); }

.hero {
  min-height: 620px;
  display: flex; align-items: center;
  background:
    radial-gradient(circle at 80% 20%, rgba(179,36,27,.08), transparent 32%),
    linear-gradient(135deg, var(--paper), #efede5);
  border-bottom: 1px solid var(--line);
}
.hero-inner { padding: 100px 0; }
.hero-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; }
.hero-logo { width: clamp(160px, 22vw, 240px); height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.18)); }
.eyebrow {
  margin: 0 0 16px;
  font-size: .75rem; font-weight: 700; letter-spacing: .18em;
  color: var(--accent);
}
/* Brand signature: the short Iron Red bar from the Rivid and Rivid Log marks (also in the app) */
.eyebrow::before {
  content: ""; display: block;
  width: 32px; height: 3px; margin-bottom: 14px;
  border-radius: 2px; background: currentColor;
}
.centered .eyebrow::before { margin-left: auto; margin-right: auto; }
.card .eyebrow::before { display: none; }
h1, h2, h3 {
  font-family: "Libre Baskerville", Georgia, serif;
  line-height: 1.2;
}
h1 { font-size: clamp(2.7rem, 7vw, 5.4rem); letter-spacing: -.045em; margin: 0 0 28px; max-width: 850px; }
h1 em { font-weight: 400; }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0 0 16px; letter-spacing: -.03em; }
h3 { font-size: 1.2rem; margin: 0 0 10px; }
p { margin: 0 0 18px; }
.lead { max-width: 700px; color: var(--muted); font-size: 1.15rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.button {
  display: inline-block; padding: 12px 18px; border-radius: 999px;
  text-decoration: none; font-weight: 600; border: 1px solid var(--ink);
}
.button.primary { background: var(--ink); color: white; }
.button.secondary { background: transparent; }
.button.is-pending { opacity: .55; cursor: default; }
.actions-secondary { margin-top: 12px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.section { padding: 100px 0; }
.section.muted { background: var(--soft); }
.section-heading { max-width: 680px; margin-bottom: 42px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card {
  background: var(--surface); border: 1px solid var(--line);
  padding: 28px; border-radius: 12px;
}
.card p { color: var(--muted); font-size: .95rem; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.split > div:last-child { color: var(--muted); max-width: 600px; }
.centered { text-align: center; }
.narrow { max-width: 620px; margin: 0 auto 28px; color: var(--muted); }
.link-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 26px; font-weight: 600; }
.link-row a { text-decoration: underline; text-underline-offset: 4px; }

.legal { padding: 90px 0; }
.narrow-wide { max-width: 820px; }
.legal h1 { font-size: clamp(2.4rem, 6vw, 4.3rem); }
.legal h2 { font-size: 1.55rem; margin-top: 44px; }
.legal h3 { font-size: 1.05rem; margin-top: 30px; }
.updated, .small { color: var(--muted); font-size: .88rem; }
.notice, .support-box {
  margin: 34px 0; padding: 24px 26px;
  border: 1px solid var(--line); border-left: 4px solid var(--accent);
  background: var(--surface);
}
.support-email { font-weight: 700; font-size: 1.1rem; }

/* Tips & Features: section links, then one list of tips per section (a tip's name, then how to find it) */
.tip-jump { flex-wrap: wrap; gap: 8px 20px; margin: 8px 0 12px; }
.tip-jump a { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.tip-section { scroll-margin-top: 90px; }
.tips { margin: 0; }
.tips > div { padding: 16px 0; border-top: 1px solid var(--line); }
.tips > div:last-child { border-bottom: 1px solid var(--line); }
.tips dt { font-weight: 700; }
.tips dd { margin: 4px 0 0; color: var(--muted); }
footer { border-top: 1px solid var(--line); padding: 28px 0; color: var(--muted); font-size: .85rem; }
.footer-inner { display: flex; justify-content: space-between; gap: 20px; }

/* ===== Rivid Log product theme: graphite, like the app's dark mode =====
   The product pages (index.html, tips.html) go dark with the app's DM Sans. Rivid pages and the
   Rivid Log reading pages (privacy, terms, support) stay on warm paper with serif headings, for long-form legibility. */
body.theme-graphite {
  --ink: var(--graphite-text);
  --muted: var(--graphite-muted);
  --line: var(--graphite-line);
  --surface: var(--graphite-surface);
  --soft: var(--graphite-raised);
  --accent: var(--accent-on-dark);
  background: var(--graphite);
  color: var(--ink);
}
.theme-graphite .site-header { background: rgba(20,21,24,.88); }
.theme-graphite .brand,
.theme-graphite h1, .theme-graphite h2, .theme-graphite h3 {
  font-family: "DM Sans", system-ui, sans-serif; font-weight: 700;
}
.theme-graphite h1 { font-size: clamp(2.5rem, 5.6vw, 4.4rem); letter-spacing: -.035em; }
.theme-graphite h1 em { font-style: normal; font-weight: 700; color: var(--muted); }
.theme-graphite .brand-text span { font-style: normal; font-weight: 400; color: var(--muted); }
.theme-graphite .hero {
  background:
    radial-gradient(circle at 78% 30%, rgba(232,72,61,.12), transparent 34%),
    linear-gradient(160deg, #1b1d20, var(--graphite) 60%);
}
.theme-graphite .button.primary { color: var(--graphite); }
.theme-graphite .card { background: var(--surface); }

/* phone screenshots in a brushed-steel bezel, echoing the app icon */
.device {
  margin: 0; padding: 9px; border-radius: 46px;
  background: linear-gradient(145deg, #5b6066, #2a2d31 45%, #45494e 70%, #1c1e21);
  box-shadow: 0 30px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18);
}
.device img { display: block; width: 100%; height: auto; border-radius: 38px; }
.hero-devices { position: relative; width: clamp(260px, 30vw, 360px); }
.hero-devices .device { width: 76%; }
.hero-devices .back { position: absolute; top: 0; left: 0; transform: scale(.9); transform-origin: top left; opacity: .92; }
.hero-devices .front { position: relative; margin: 14% 0 0 auto; }
.device-caption { margin-top: 18px; text-align: center; color: var(--muted); font-size: .85rem; }

@media (max-width: 800px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 25px; }
  .hero-split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hero-logo { order: -1; width: 120px; }
  .hero-devices { width: min(320px, 80%); margin: 0 auto; }
}
@media (max-width: 560px) {
  .container { width: min(calc(100% - 28px), var(--max)); }
  .nav { min-height: 64px; }
  .brand img { width: 30px; height: 30px; }
  nav { gap: 13px; }
  nav a { font-size: .82rem; }
  nav a.nav-home { padding-right: 13px; }
  .hero { min-height: 540px; }
  .hero-inner { padding: 70px 0; }
  .section, .legal { padding: 70px 0; }
  .grid { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; }
}