:root {
  --yellow: #F8BC20;
  --yellow-deep: #D9970A;
  --ink: #17171C;
  --bg: #F1F0EB;
  --card: #FFFFFF;
  --muted: #6B6B72;
  --line: #E6E4DC;
  --red: #E5484D;
  --green: #2FAE5D;
  --radius: 20px;
  --maxw: 880px;
}

* { box-sizing: border-box; }

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

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

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

header.site {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 900;
  font-size: 19px;
  color: var(--ink);
}

.brand img {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: block;
}

nav.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
}

nav.site-nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--muted);
}

nav.site-nav a:hover,
nav.site-nav a.active {
  color: var(--ink);
}

/* ---- Platform/Features/Resources dropdowns ---- */

.nav-drop {
  position: relative;
}

.nav-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--muted);
  cursor: pointer;
}

.nav-drop-btn:hover,
.nav-drop.open .nav-drop-btn {
  color: var(--ink);
}

.nav-drop-chevron {
  transition: transform 0.15s ease;
  flex: none;
}

.nav-drop.open .nav-drop-chevron {
  transform: rotate(180deg);
}

.nav-drop-menu {
  display: none;
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 230px;
  max-width: min(320px, calc(100vw - 32px));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 16px 36px rgba(23, 23, 28, 0.14);
  z-index: 40;
}

.nav-drop.open .nav-drop-menu {
  display: flex;
  flex-direction: column;
}

.nav-drop-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: normal;
}

.nav-drop-menu a:hover {
  background: var(--bg);
}

/* ---- mobile nav: hamburger toggle + collapsible panel ---- */

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 6px;
  margin: -6px;
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle-icon path {
  transition: transform 0.2s ease, opacity 0.2s ease;
  transform-origin: 10px 10px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-top { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-mid { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bottom { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 700px) {
  header.site { position: relative; }

  .nav-toggle { display: flex; align-items: center; justify-content: center; }

  /* Full-width dropdown sheet instead of an inline row — positioned off
     header.site (not .wrap), so it isn't clipped to the wrap's own
     max-width/padding and can span edge to edge under the header. */
  nav.site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 32px rgba(23, 23, 28, 0.12);
    padding: 4px 24px 16px;
    z-index: 50;
    max-height: 80vh;
    overflow-y: auto;
  }

  nav.site-nav.open { display: flex; }

  nav.site-nav > a {
    padding: 14px 2px;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
  }

  /* Platform/Features/Resources become full-width accordion sections —
     a 320px floating panel (the desktop shape) makes no sense once the
     whole nav is already a full-width sheet. */
  .nav-drop {
    width: 100%;
    border-bottom: 1px solid var(--line);
  }

  .nav-drop-btn {
    width: 100%;
    justify-content: space-between;
    padding: 14px 2px;
    font-size: 15px;
  }

  .nav-drop-menu {
    display: none;
    position: static;
    transform: none;
    max-width: none;
    min-width: 0;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0 0 8px;
  }

  .nav-drop.open .nav-drop-menu { display: flex; }

  .nav-drop-menu a { padding: 10px 8px; }
}

main {
  padding: 56px 0 80px;
}

h1 {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  line-height: 1.08;
}

/* ---- hero: two-column, phone mockup on the right (Lucen-style layout) ---- */

.hero-band {
  padding: 8px 0 24px;
}

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

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.hero-copy .tagline {
  font-size: 18px;
  color: var(--muted);
  max-width: 460px;
  margin: 0 0 28px;
}

.hero-copy .store-row,
.hero-copy .trust-row {
  justify-content: flex-start;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 4px;
}

.trust-pill {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
}

.hero-how {
  display: inline-block;
  margin-top: 22px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
}

.hero-how:hover { color: var(--ink); }

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}

.phone-mock {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 40px rgba(23, 23, 28, 0.18));
}

.float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: 0 10px 28px rgba(23, 23, 28, 0.12);
  max-width: 200px;
}

.float-card .float-emoji { font-size: 20px; flex: none; }

.float-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.float-text strong { font-size: 12.5px; font-weight: 800; }
.float-text span { font-size: 11px; color: var(--muted); }

.float-card--1 { top: 8%; left: -6%; }
.float-card--2 { top: 42%; right: -12%; }
.float-card--3 { bottom: 6%; left: -10%; }

@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-copy .tagline { margin-left: auto; margin-right: auto; }
  .hero-copy .store-row, .hero-copy .trust-row { justify-content: center; }
  .hero-visual { margin-top: 20px; }
  /* Floating cards need real room on either side of the phone to make
     sense — on a narrow single-column layout there isn't any, so they'd
     just clip off-screen. The phone mockup alone still reads fine. */
  .float-card { display: none; }
}

.cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid transparent;
}

.btn.primary {
  background: var(--ink);
  color: #fff;
}

.btn.ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 56px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}

.card .emoji {
  font-size: 26px;
  display: block;
  margin-bottom: 10px;
}

.card h3 {
  font-size: 16px;
  margin: 0 0 6px;
  font-weight: 800;
}

.card p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

.legal h1 {
  font-size: 30px;
  text-align: left;
}

.legal .updated {
  color: var(--muted);
  font-size: 13.5px;
  margin-bottom: 36px;
}

.legal h2 {
  font-size: 18px;
  font-weight: 800;
  margin: 36px 0 10px;
}

.legal h2:first-of-type { margin-top: 0; }

.legal p, .legal li {
  font-size: 15px;
  color: #2c2c33;
}

.legal ul { padding-left: 20px; }

.legal .note {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 14px;
  color: var(--muted);
  margin: 18px 0;
}

/* ---- home page: extra sections ---- */

.section-head {
  text-align: center;
  max-width: 520px;
  margin: 0 auto 40px;
}

.kicker {
  display: inline-block;
  background: var(--yellow);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
}

.section-head h2 {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

.section-head p {
  color: var(--muted);
  font-size: 15.5px;
  margin: 0;
}

/* ---- "why it exists": narrative copy + a sample stat card ---- */

.why-band {
  padding: 60px 0;
}

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

.why-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

.why-copy h2 {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 20px;
}

.why-copy h2 .hl {
  color: var(--yellow-deep);
}

.why-copy p {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0 0 16px;
}

.stat-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
}

.stat-card-label {
  display: block;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
}

.stat-row span { color: var(--muted); }
.stat-row strong { font-weight: 800; }
.stat-row .stat-good { color: var(--green); }

@media (max-width: 860px) {
  .why-grid { grid-template-columns: 1fr; }
  .why-copy { text-align: center; }
  .why-copy p { max-width: 480px; margin-left: auto; margin-right: auto; }
  .stat-card { max-width: 420px; margin: 24px auto 0; }
}

/* ---- "what Chakam analyzes": the full, detailed feature grid ---- */

.analyze-band {
  padding: 64px 0;
  border-top: 1px solid var(--line);
}

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

.analyze-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.analyze-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.analyze-card .tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 18px;
}

.tag-neutral { background: var(--bg); color: var(--ink); }
.tag-red { background: #FBEAEA; color: #B23A3E; }
.tag-green { background: #E0F1E9; color: #227A48; }

.analyze-card h3 {
  font-size: 17px;
  font-weight: 800;
  margin: 0 0 8px;
}

.analyze-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* ---- "why choose Chakam": narrative + a checklist grid ---- */

.choose-band {
  padding: 64px 0;
  border-top: 1px solid var(--line);
}

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

.choose-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.choose-copy h2 {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 18px;
}

.choose-copy p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 14px;
}

.choose-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.check-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.check-item .tick {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
}

@media (max-width: 860px) {
  .choose-grid { grid-template-columns: 1fr; }
  .choose-copy { text-align: center; }
  .choose-copy p { max-width: 480px; margin-left: auto; margin-right: auto; }
  .choose-checks { grid-template-columns: 1fr; margin-top: 8px; }
}

/* ---- "why it matters": emotional-intelligence framing, 2x2 cards ---- */

.insight-band {
  padding: 64px 0;
  border-top: 1px solid var(--line);
}

.insight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

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

section.block {
  padding: 64px 0;
  border-top: 1px solid var(--line);
}

section.block:first-of-type { border-top: none; }

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.step {
  position: relative;
  padding: 26px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.step .num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.step h3 {
  font-size: 16.5px;
  font-weight: 800;
  margin: 0 0 6px;
}

.step p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

.sources-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.source-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 10px 18px 10px 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.15s ease;
}

a.source-pill:hover {
  border-color: var(--ink);
}

.source-pill img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: cover;
}

/* Tinder/Bumble/Hinge have no icon asset sourced yet — same brand-color +
   glyph fallback the Flutter app itself uses (see import_screen.dart's
   _SourceIcon) rather than inventing a different look here. */
.source-pill .source-glyph {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
}

.source-pill-more {
  color: var(--muted);
  border-style: dashed;
}

/* ---- privacy: checklist with real detail + a lock mark ---- */

.privacy-band {
  padding: 64px 0;
  border-top: 1px solid var(--line);
}

.privacy-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 28px;
}

.privacy-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.privacy-item .tick {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
}

.privacy-item h3 {
  font-size: 15.5px;
  font-weight: 800;
  margin: 0 0 4px;
}

.privacy-item p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

.privacy-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.privacy-ring {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.privacy-ring--outer {
  width: 280px;
  height: 280px;
  border: 1px solid var(--line);
}

.privacy-ring--inner {
  width: 190px;
  height: 190px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(23, 23, 28, 0.08);
}

/* The lock, blended with the mark itself rather than sitting apart from
   it — the logo is the badge; the lock is what it's promising. */
.privacy-logo {
  width: 108px;
  height: 108px;
  border-radius: 26px;
  display: block;
}

.privacy-lock-badge {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(23, 23, 28, 0.25);
}

@media (max-width: 860px) {
  .privacy-visual { margin-top: 8px; }
  .privacy-ring--outer { width: 200px; height: 200px; }
  .privacy-ring--inner { width: 140px; height: 140px; }
  .privacy-logo { width: 80px; height: 80px; border-radius: 20px; }
  .privacy-lock-badge { width: 36px; height: 36px; }
}

.faq {
  max-width: 680px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}

.faq-item:first-child { padding-top: 0; }

.faq-item h3 {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 8px;
}

.faq-item p {
  font-size: 14.5px;
  color: var(--muted);
  margin: 0;
}

/* ---- /help/ ---- */

.help-hero {
  max-width: 620px;
  margin: 8px 0 36px;
}

.help-hero h1 {
  font-size: 36px;
  margin: 0 0 14px;
}

.help-hero p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

.help-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
  margin-bottom: 48px;
}

.help-contact h2 {
  font-size: 18px;
  font-weight: 900;
  margin: 0 0 4px;
}

.help-contact p {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
  max-width: 440px;
}

.help-category {
  max-width: 680px;
  margin: 0 auto 48px;
}

.help-category h2 {
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--yellow-deep);
  margin: 0 0 4px;
}

.help-category .faq { max-width: none; }

@media (max-width: 560px) {
  .help-hero h1 { font-size: 28px; }
  .help-contact { text-align: center; justify-content: center; }
}

.final-cta {
  text-align: center;
  background: var(--ink);
  border-radius: 28px;
  padding: 56px 32px;
  color: #fff;
}

.final-cta h2 {
  font-size: 30px;
  font-weight: 900;
  margin: 0 0 12px;
  color: #fff;
}

.final-cta p {
  color: #C9C9D1;
  font-size: 15.5px;
  max-width: 420px;
  margin: 0 auto 26px;
}

.final-cta .btn.primary {
  background: var(--yellow);
  color: var(--ink);
}

.final-cta .btn.ghost {
  border-color: rgba(255,255,255,0.25);
  color: #fff;
}

@media (max-width: 700px) {
  .trust-split {
    grid-template-columns: 1fr;
  }
}

footer.site {
  border-top: 1px solid var(--line);
  padding: 28px 0;
}

footer.site .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

footer.site p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

footer.site .links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}

footer.site .links a {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}

footer.site .links a:hover { color: var(--ink); }

@media (max-width: 560px) {
  h1 { font-size: 30px; }

  /* Same overflow shape as the header nav above, now that the footer
     carries 8 links — wrap and center instead of trying to fit one row. */
  footer.site .wrap {
    flex-direction: column;
    text-align: center;
  }
  footer.site .links {
    justify-content: center;
  }
}

/* ---- blog ---- */

.blog-hero {
  text-align: center;
  padding: 40px 0 8px;
}

.blog-hero h1 { font-size: 36px; }

.blog-hero p {
  color: var(--muted);
  font-size: 16px;
  max-width: 460px;
  margin: 0 auto;
}

.blog-hero .store-row {
  justify-content: center;
  margin-top: 20px;
}

/* Three recent posts on the home page. Reuses the blog index's card
   styles so there is one card design on the site, not two that drift. */
.home-posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.home-posts .post-card h3 {
  font-size: 17.5px;
  font-weight: 900;
  margin: 0;
  line-height: 1.22;
  letter-spacing: -0.01em;
}

.home-posts .post-card p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-posts-more {
  margin: 24px 0 0;
  text-align: center;
}

.home-posts-more a {
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--yellow);
  padding-bottom: 2px;
}

@media (max-width: 900px) {
  .home-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .home-posts { grid-template-columns: minmax(0, 1fr); }
}

/* Shared chrome for every /quiz/ page: the hub and each test. Lives
   here rather than in a page style block because both pages need it,
   and a page-scoped copy meant the hub rendered unstyled. Test-only
   styling (the question card, options, result, share card) stays in
   anxious-attachment-test.astro. */
.quiz-wrap {
      max-width: 720px;
      margin: 0 auto;
      padding: 0 20px 80px;
    }

.quiz-head { text-align: center; padding: 48px 0 32px; }

.quiz-backlink {
      display: block;
      font-size: 14px;
      font-weight: 700;
      color: var(--muted);
      text-decoration: none;
      margin-bottom: 20px;
      text-align: left;
    }

.quiz-backlink:hover { color: var(--ink); }

.quiz-kicker {
      display: inline-block;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink);
      background: var(--yellow);
      padding: 6px 14px;
      border-radius: 100px;
    }

.quiz-head h1 {
      font-size: 44px;
      line-height: 1.05;
      letter-spacing: -0.025em;
      margin: 18px 0 14px;
    }

.quiz-sub {
      font-size: 17.5px;
      line-height: 1.5;
      color: var(--muted);
      margin: 0 auto;
      max-width: 34em;
    }

.quiz-note {
      font-size: 13.5px;
      line-height: 1.45;
      color: var(--muted);
      max-width: 34em;
      margin: 18px auto 0;
      padding-top: 16px;
      border-top: 1px solid var(--line);
    }

.quiz-prose { margin-top: 64px; }

.quiz-prose h2 {
      font-size: 27px;
      letter-spacing: -0.018em;
      margin: 44px 0 14px;
    }

.quiz-prose h3 { font-size: 18.5px; margin: 26px 0 8px; }

.quiz-prose p {
      font-size: 17px;
      line-height: 1.62;
      color: var(--ink);
      margin: 0 0 16px;
    }

.quiz-faq p { color: var(--muted); font-size: 16px; }

@media (max-width: 640px) {
  .quiz-head { padding: 34px 0 26px; }
  .quiz-head h1 { font-size: 33px; }
  .quiz-sub { font-size: 16px; }
  .quiz-prose h2 { font-size: 23px; }
  .quiz-prose p { font-size: 16px; }
}

/* Blog index cards. A grid of boxes rather than a stack of text rows:
   every post carries a hero image, so leading with it makes the index
   scannable instead of a wall of similar-looking headlines. The newest
   post gets a wider treatment (image beside the text) so page one has a
   clear entry point rather than eight equal cards. */
.post-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  margin-top: 44px;
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
}


.post-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.post-card:hover {
  transform: translateY(-3px);
  border-color: var(--ink);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.09);
}

/* The image lives inside a wrapper rather than being sized directly. An
   <img> stretched by flex/grid falls back to its own intrinsic height
   (these are 1344x750), which made the lead card absurdly tall. A plain
   div has no intrinsic height, so it can be stretched or given an aspect
   ratio freely, and the image just fills it. */
.post-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.post-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card-body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.post-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.post-card-tag { color: var(--yellow-deep); }
.post-card-meta .post-date { color: var(--muted); font-weight: 700; }
.post-card-meta .dot { color: var(--line); }

.post-card h2 {
  font-size: 20px;
  font-weight: 900;
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.post-card p {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

/* The lead card: spans the grid and turns side-by-side, so the newest
   post reads as the headline rather than as one tile among many. */
.post-card.is-featured {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: stretch;
}

.post-card.is-featured .post-thumb {
  width: 46%;
  flex: 0 0 46%;
  aspect-ratio: auto;
  align-self: stretch;
  min-height: 260px;
  border-bottom: none;
  border-right: 1px solid var(--line);
}

.post-card.is-featured .post-card-body {
  justify-content: center;
  padding: 32px 34px;
  gap: 10px;
}

.post-card.is-featured h2 { font-size: 30px; line-height: 1.12; }
.post-card.is-featured p { font-size: 16px; }

@media (max-width: 760px) {
  .post-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .post-card.is-featured { flex-direction: column; }
  .post-card.is-featured .post-thumb {
    width: 100%;
    flex: none;
    aspect-ratio: 16 / 9;
    min-height: 0;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .post-card.is-featured .post-card-body { padding: 20px 22px 24px; }
  .post-card.is-featured h2 { font-size: 22px; }
  .post-card.is-featured p { font-size: 15px; }
}

/* On a narrow card the tag and date wrap, which left the separator dot
   dangling at the end of the first line. Tighten the line so it fits, and
   drop the dot entirely if it still has to wrap. */
@media (max-width: 480px) {
  .post-card-meta { font-size: 11px; letter-spacing: 0.03em; gap: 6px; }
}

@media (max-width: 400px) {
  .post-card-meta .dot { display: none; }
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--maxw);
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.pagination-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid var(--line);
}

.pagination-link:not(.pagination-disabled):hover {
  border-color: var(--ink);
}

.pagination-disabled {
  color: var(--muted);
  opacity: 0.5;
  cursor: default;
}

.pagination-status {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

@media (max-width: 480px) {
  .pagination { flex-wrap: wrap; justify-content: center; text-align: center; }
  .pagination-status { order: 3; width: 100%; }
}

.post-header {
  max-width: 680px;
  margin: 0 auto 40px;
}

.post-header .post-date {
  font-size: 13px;
  font-weight: 800;
  color: var(--yellow-deep);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.post-header .post-byline {
  font-size: 14px;
  color: var(--muted);
  margin: 6px 0 0;
}

.post-header .post-byline a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.post-header .post-byline a:hover { border-bottom-color: var(--yellow); }

.post-header h1 {
  font-size: 34px;
  text-align: left;
  margin: 10px 0 12px;
}

.post-header .post-desc {
  color: var(--muted);
  font-size: 16.5px;
  margin: 0;
}

/* The quick-answer block under the H1. Deliberately plain, un-nested
   markup (a div wrapping one <p>) rather than a <details>, an accordion or
   anything JS-driven: answer engines read the raw HTML, and content they
   have to expand or execute to reach is content they skip. The left rule
   and tint mark it as the summary for a human skimming, without hiding it
   from anything. */
.post-answer {
  max-width: 680px;
  margin: -16px auto 40px;
  padding: 20px 24px;
  background: var(--card);
  border-left: 4px solid var(--yellow);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.post-answer p {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--ink);
}

@media (max-width: 640px) {
  .post-answer { padding: 16px 18px; margin-top: -8px; }
  .post-answer p { font-size: 16.5px; }
}

/* In-post promo for a /quiz/ test. Sits directly under the answer block
   rather than at the end of the article: the reader has just been told
   what the post concludes, which is the moment they most want to check
   it against themselves, and it is visible on mobile without scrolling
   to the bottom. */
.post-quiz-cta {
  display: block;
  max-width: 680px;
  margin: 0 auto 40px;
  padding: 22px 26px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.post-quiz-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

.post-quiz-kicker {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow);
}

.post-quiz-cta strong {
  display: block;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.015em;
  margin: 8px 0 6px;
}

.post-quiz-sub {
  display: block;
  font-size: 14.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}

.post-quiz-go {
  display: inline-block;
  margin-top: 14px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--yellow);
}

@media (max-width: 640px) {
  .post-quiz-cta { padding: 18px 20px; }
  .post-quiz-cta strong { font-size: 19px; }
}

.post-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.post-tags a {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  color: var(--muted);
}

/* Post body — Markdown renders into plain <h2>/<p>/<ul>/etc, unstyled by
   default, so this is what actually gives a post readable typography. */
.prose {
  max-width: 680px;
  margin: 0 auto;
  font-size: 16.5px;
}

.prose h2 {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 40px 0 14px;
}

.prose h2:first-child { margin-top: 0; }

.prose h3 {
  font-size: 18px;
  font-weight: 800;
  margin: 28px 0 10px;
}

.prose p { margin: 0 0 18px; }

.prose ul, .prose ol {
  padding-left: 22px;
  margin: 0 0 18px;
}

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

.prose a { text-decoration: underline; text-decoration-color: var(--line); }

/* Comparison tables (situationship-vs-relationship and similar posts use
   these directly in Markdown via GFM). Nothing styled them before, so they
   fell back to the bare browser default: no borders, no row separation, no
   header weight. Wrapped in a scroll container for narrow phones, where a
   3+ column table cannot honestly fit and forcing it to would just break
   the layout instead. */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 26px;
  font-size: 15px;
}

.prose th, .prose td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.prose thead th {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid var(--ink);
}

.prose tbody th, .prose td:first-child {
  font-weight: 800;
  white-space: nowrap;
}

.prose tbody tr:nth-child(even) { background: var(--card); }

@media (max-width: 640px) {
  .prose table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .prose td, .prose th { white-space: normal; }
  .prose tbody th, .prose td:first-child { white-space: nowrap; }
}



.prose blockquote {
  margin: 24px 0;
  padding: 4px 20px;
  border-left: 3px solid var(--yellow);
  color: var(--muted);
  font-style: italic;
}

.prose strong { font-weight: 800; }

/* ---- in-article images — same "ship placeholder, upgrade later"
   pattern as ScreenshotSlot.astro, but as raw HTML (these live inside
   Markdown post bodies, which Astro passes raw HTML straight through,
   so no component/plugin is needed) and landscape-shaped, not the
   portrait phone-mockup shape ScreenshotSlot is built for. ---- */
.blog-fig {
  margin: 32px 0;
}

.blog-fig img {
  width: 100%;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.blog-fig-placeholder {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  aspect-ratio: 16 / 9;
  background: var(--card);
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 14px;
}

.blog-fig-placeholder code {
  background: var(--bg);
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 700;
}

.blog-fig figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.blog-fig-hero {
  max-width: var(--maxw);
  margin: 0 auto 40px;
}

.blog-fig-hero .blog-fig-placeholder { aspect-ratio: 16 / 8; }

/* Mid-article download prompt — same store-badge markup as the sidebar
   CTA, just framed as an inline card so it reads as part of the article
   flow rather than a repeat of the sidebar. */
.inline-cta {
  margin: 40px 0;
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}

.inline-cta p {
  margin: 0 0 16px;
  font-weight: 700;
}

.inline-cta .store-row { justify-content: center; }

/* ---- two-column post layout: article + sidebar (CTA, TOC, related) ---- */

.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 40px;
  align-items: start;
  max-width: var(--maxw);
  margin: 0 auto;
}

.post-layout .prose { max-width: none; margin: 0; }

/* Images written inline in a post's Markdown, which arrive as a bare <img>
   rather than in a .blog-fig wrapper. Without a width cap they render at
   their natural size — the blog's own heroes are 1344px wide — and since
   .post-layout's first column is a grid track, an oversized child overflows
   it and runs under the sidebar instead of making the column scroll. Matches
   .blog-fig's treatment so an inline image and a hero look like the same
   site. `height: auto` keeps the aspect ratio once the width is capped. */
.prose img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 32px 0;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

/* Markdown wraps a lone image in a <p>, which would otherwise add its own
   paragraph spacing on top of the image's margin. */
.prose p:has(> img:only-child) {
  margin: 0;
}

.post-sidebar {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidebar-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}

.sidebar-card h3 {
  font-size: 14px;
  font-weight: 900;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.sidebar-cta p {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0 0 14px;
}

.sidebar-cta .store-row { flex-direction: column; }
.sidebar-cta .store-badge { width: 100%; }

.toc-list, .related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toc-list a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.4;
}

.toc-list a:hover { color: var(--yellow-deep); }

.related-list a {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.4;
}

.related-list a:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .post-layout {
    grid-template-columns: 1fr;
  }
  .post-sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .post-sidebar .sidebar-card {
    flex: 1 1 240px;
  }
  .sidebar-cta .store-row { flex-direction: row; flex-wrap: wrap; }
}

.post-cta {
  margin-top: 48px;
  text-align: center;
  background: var(--ink);
  border-radius: var(--radius);
  padding: 40px 28px;
  color: #fff;
}

.post-cta h2 {
  color: #fff;
  font-size: 22px;
  margin: 0 0 10px;
}

.post-cta p {
  color: #C9C9D1;
  font-size: 14.5px;
  max-width: 400px;
  margin: 0 auto 22px;
}

.post-cta .btn.primary {
  background: var(--yellow);
  color: var(--ink);
}

.back-link {
  display: inline-block;
  margin-bottom: 28px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
}

.back-link:hover { color: var(--ink); }

/* ---- store badges ---- */

.store-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: #fff;
  border-radius: 14px;
  padding: 10px 18px;
  text-decoration: none;
}

.store-badge img {
  width: 26px;
  height: 26px;
  flex: none;
}

.store-badge .store-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.store-badge .store-eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  color: #C9C9D1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.store-badge .store-name {
  font-size: 16.5px;
  font-weight: 800;
}

/* On the dark final-cta card, the badge would disappear against its own
   ink background — flip it to a light badge there instead. */
.final-cta .store-badge {
  background: #fff;
  color: var(--ink);
}

.final-cta .store-badge .store-eyebrow { color: var(--muted); }

.final-cta .store-badge img[alt="App Store"] {
  filter: invert(1);
}

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

.pricing-hero {
  text-align: center;
  max-width: 620px;
  margin: 8px auto 44px;
}

.pricing-hero h1 {
  font-size: 38px;
  margin: 0 0 14px;
}

.pricing-hero .tagline {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.pricing-hero .store-row { justify-content: center; margin-top: 8px; }

.plans-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 780px;
  margin: 0 auto 64px;
}

.plan-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  display: flex;
  flex-direction: column;
}

.plan-card--premium {
  border-color: var(--ink);
  box-shadow: 0 16px 36px rgba(23, 23, 28, 0.1);
}

.plan-label {
  display: inline-block;
  align-self: flex-start;
  background: var(--bg);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 16px;
}

.plan-label--premium { background: var(--yellow); }

.plan-price {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.plan-sub {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 22px;
}

.plan-checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plan-checks .privacy-item p {
  font-size: 14px;
  color: var(--ink);
  font-weight: 600;
}

.plan-cta {
  margin-top: 24px;
  width: 100%;
}

.premium-grid { margin-top: 44px; margin-bottom: 64px; }

.pricing-table-wrap {
  overflow-x: auto;
  margin: 36px 0 64px;
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
  font-size: 14.5px;
}

.pricing-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 0 12px 12px;
  border-bottom: 1px solid var(--line);
}

.pricing-table th:not(:first-child),
.pricing-table td:not(:first-child) {
  text-align: center;
  width: 110px;
}

.pricing-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
}

.pricing-table td.yes { color: var(--green); font-weight: 800; }
.pricing-table td.no { color: var(--muted); }

@media (max-width: 700px) {
  .plans-grid { grid-template-columns: 1fr; }
  .pricing-hero h1 { font-size: 28px; }
}

/* ---- screenshot slot: real image if it exists, a visible placeholder
   if it doesn't (see ScreenshotSlot.astro) ---- */

.screenshot-slot {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

.screenshot-slot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
  filter: drop-shadow(0 20px 36px rgba(23, 23, 28, 0.16));
}

.screenshot-placeholder {
  display: none; /* only shown if the <img> above 404s, via onerror */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  aspect-ratio: 9 / 17;
  border: 2px dashed var(--line);
  border-radius: 24px;
  background: var(--card);
  padding: 24px;
  text-align: center;
}

.screenshot-placeholder-text {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}

.screenshot-placeholder-text code {
  display: inline-block;
  margin-top: 6px;
  font-size: 11.5px;
  background: var(--bg);
  color: var(--ink);
  padding: 3px 8px;
  border-radius: 6px;
}