/* LetsReview marketing site.

   Same structure and class names as civpass-web so the family of sites stays
   one codebase in spirit; only the tokens below differ. They are lifted from
   lib/app/theme.dart in the app repo (see docs/branding.md there). */

:root {
  --navy: #183356;
  --navy-deep: #0f2340;
  --primary: #1d4275;
  --accent: #0e7c5a;
  --red: #dc2626;
  --gold: #ddb049;

  --bg: #ffffff;
  --bg-soft: #f4f6fa;
  --card: #ffffff;
  --text: #1b2430;
  --text-dim: #5c6b7a;
  --border: #dfe4ec;
  --shadow: 0 1px 2px rgba(24, 51, 86, 0.06), 0 8px 24px rgba(24, 51, 86, 0.08);

  --max: 1080px;
  --radius: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f151d;
    --bg-soft: #151d27;
    --card: #182230;
    --text: #e8edf3;
    --text-dim: #9aa8b8;
    --border: #263341;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
  height: auto; /* the imgs carry width/height attrs; without this they keep the intrinsic 1920px height */
  display: block;
}

a {
  color: var(--primary);
}

@media (prefers-color-scheme: dark) {
  a {
    color: #7fb0ea;
  }
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.brand img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.site-nav {
  margin-left: auto;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}

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

@media (max-width: 640px) {
  .site-nav {
    gap: 14px;
  }
  .site-nav a {
    font-size: 0.88rem;
  }
}

/* ---------- hero ---------- */

.hero {
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(221, 176, 73, 0.18), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  padding: 64px 0 72px;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.3rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 8px;
}

.hero .tagline {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--gold);
  margin: 0 0 18px;
}

.hero p.lede {
  font-size: 1.08rem;
  color: rgba(255, 255, 255, 0.82);
  max-width: 46ch;
  margin: 0 0 28px;
}

.hero-shot {
  justify-self: center;
  width: 100%;
  max-width: 290px;
}

/* The source screenshots are 1080x1920. At full aspect ratio the device would
   be ~500px tall and push the hero copy off a laptop viewport, so the frame is
   capped and the image cropped from the top. */
.hero-shot .phone {
  height: 500px;
}

.hero-shot .phone img {
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.phone {
  border-radius: 30px;
  border: 8px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
  overflow: hidden;
  background: var(--bg-soft);
}

.phone img {
  width: 100%;
}

@media (max-width: 820px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero-shot {
    max-width: 250px;
  }
  .hero-shot .phone {
    height: 420px;
  }
}

/* ---------- download banner ----------
   Carries both store links now that Android is listed too. .store-row wraps, so
   on a narrow screen the second button drops to its own line rather than being
   squeezed alongside the first. */

.beta-box {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(221, 176, 73, 0.55);
  border-radius: var(--radius);
  padding: 22px 24px;
  max-width: 46ch;
}

.beta-box h2 {
  font-size: 1.12rem;
  margin: 0 0 8px;
  color: var(--gold);
  letter-spacing: 0;
}

.beta-box p {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.97rem;
}

.badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--gold);
  color: #3d2f0c;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.store-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.store-note {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.62);
  margin: 14px 0 0;
}

.store-note a {
  color: rgba(255, 255, 255, 0.86);
}

.btn-light {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 12px;
  background: var(--gold);
  color: #2b2107;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.98rem;
}

.btn-light:hover {
  background: #e8c165;
}

/* ---------- generic sections ---------- */

section {
  padding: 72px 0;
}

section.soft {
  background: var(--bg-soft);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 10px;
}

h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

h2 + p.sub {
  color: var(--text-dim);
  max-width: 60ch;
  margin: 0 0 40px;
}

/* ---------- features ---------- */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.feature {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

.feature .ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(29, 66, 117, 0.1);
  color: var(--primary);
  margin-bottom: 14px;
}

.feature.pro .ico {
  background: rgba(14, 124, 90, 0.12);
  color: var(--accent);
}

.feature .ico svg {
  width: 22px;
  height: 22px;
}

.feature h3 {
  font-size: 1.06rem;
  margin: 0 0 6px;
}

.feature p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.96rem;
}

.tag-pro {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* ---------- screens strip ---------- */

.screens {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  /* Bleeds the full width so the strip can scroll off both edges, but the
     first phone still lines up with the heading above it instead of sitting
     against the window edge. Falls back to a flat 20px once the viewport is
     narrower than the content column. */
  padding: 6px 20px 20px;
  padding-inline: max(20px, calc((100% - var(--max)) / 2 + 20px));
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.screens figure {
  margin: 0;
  flex: none;
  width: 236px;
  scroll-snap-align: center;
}

.screens .phone {
  border-color: var(--border);
  border-width: 6px;
  box-shadow: var(--shadow);
}

.screens figcaption {
  font-size: 0.88rem;
  color: var(--text-dim);
  text-align: center;
  margin-top: 12px;
}

/* ---------- pricing ---------- */

.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  align-items: start;
}

.tier {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}

.tier.highlight {
  border-color: var(--accent);
  border-width: 2px;
}

.tier h3 {
  margin: 0 0 4px;
  font-size: 1.2rem;
}

.tier .price {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 6px 0 2px;
}

.tier .price small {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0;
}

.tier ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}

.tier li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  color: var(--text-dim);
  font-size: 0.97rem;
}

.tier li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.55em;
  width: 12px;
  height: 6px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* ---------- faq ---------- */

.faq {
  max-width: 760px;
}

.faq details {
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}

.faq summary {
  cursor: pointer;
  font-weight: 650;
  font-size: 1.03rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  color: var(--accent);
  font-weight: 700;
  flex: none;
}

.faq details[open] summary::after {
  content: "–";
}

.faq details p {
  margin: 12px 0 0;
  color: var(--text-dim);
}

/* ---------- content pages ---------- */

.page {
  padding: 56px 0 72px;
}

.page h1 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  letter-spacing: -0.025em;
  margin: 0 0 8px;
}

.page .updated {
  color: var(--text-dim);
  font-size: 0.92rem;
  margin: 0 0 36px;
}

.prose {
  max-width: 68ch;
}

.prose h2 {
  font-size: 1.25rem;
  margin: 38px 0 10px;
}

.prose p,
.prose li {
  color: var(--text-dim);
}

.prose ul {
  padding-left: 22px;
}

.prose li {
  margin-bottom: 8px;
}

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

.callout {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 28px 0;
}

.callout.beta {
  border-left-color: var(--gold);
}

.callout p {
  margin: 0;
}

.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 32px 0 8px;
}

.contact-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

.contact-card h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.contact-card p {
  margin: 0 0 14px;
  color: var(--text-dim);
  font-size: 0.95rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-weight: 650;
  text-decoration: none;
  font-size: 0.96rem;
}

.btn:hover {
  background: #21456f;
}

.btn.ghost {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--border);
}

@media (prefers-color-scheme: dark) {
  .btn.ghost {
    color: #7fb0ea;
  }
}

/* Two store buttons in one card: spaced apart on a line, and clear of each
   other when a narrow card makes them wrap. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

dl.meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 24px;
  margin: 0;
  font-size: 0.95rem;
}

dl.meta dt {
  font-weight: 650;
}

dl.meta dd {
  margin: 0;
  color: var(--text-dim);
}

@media (max-width: 520px) {
  dl.meta {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  dl.meta dd {
    margin-bottom: 10px;
  }
}

/* ---------- footer ---------- */

.site-footer {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.7);
  padding: 48px 0 40px;
  font-size: 0.93rem;
}

.site-footer .wrap {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
}

.site-footer a {
  color: #fff;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.site-footer .brand {
  color: #fff;
  margin-bottom: 12px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links strong {
  color: #fff;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.disclaimer {
  margin: 28px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 700px) {
  .site-footer .wrap {
    grid-template-columns: 1fr;
  }
}