/* Paint Color Match — shared art direction */
:root {
  --site-ink: #18201b;
  --site-ink-2: #26332b;
  --site-paper: #f5f0e7;
  --site-paper-2: #ebe4d8;
  --site-white: #fffdf8;
  --site-muted: #716f66;
  --site-rule: rgba(24, 32, 27, .14);
  --site-accent: #dd754c;
  --site-accent-2: #efb26c;
  --site-sage: #a5b29a;
  --site-blue: #4775a8;
  --site-serif: Newsreader, Georgia, 'Times New Roman', serif;
  --site-sans: "Libre Franklin", Figtree, system-ui, sans-serif;
  --site-ease: cubic-bezier(.2, .8, .2, 1);
}

body.home-page,
body.landing-page,
body.guide-page,
body.download-page {
  overflow-x: hidden;
}

body.home-page,
body.landing-page,
body.guide-page {
  background: var(--site-paper);
  color: var(--site-ink);
  font-family: var(--site-sans);
}

body.home-page h1,
body.home-page h2,
body.home-page h3,
body.home-page h4,
body.landing-page h1,
body.landing-page h2,
body.landing-page h3,
body.guide-page h1,
body.guide-page h2 {
  font-family: var(--site-serif);
}

/* Home */
.home-page header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 240, 231, .88);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(18px);
  transition: background .3s ease, border-color .3s ease;
}
.home-page header.scrolled { border-color: var(--site-rule); background: rgba(245, 240, 231, .96); }
.home-page .container { max-width: 1280px; }
.home-page .nav-container { min-height: 76px; gap: 1.25rem; }
.home-page .logo { gap: .7rem; color: var(--site-ink); }
.home-page .logo img { width: 38px; height: 38px; border-radius: 11px; }
.home-page .logo-text { font-family: var(--site-serif); font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; }
.home-page .nav-links { gap: 1.35rem; }
.home-page .nav-links a { color: var(--site-muted); font-size: .84rem; font-weight: 600; letter-spacing: .02em; }
.home-page .nav-links a:hover { color: var(--site-ink); }
.home-page .app-cta { gap: .55rem; }
.home-page .app-cta .get-app-btn,
.home-page .app-cta .store-btn { position: relative; }
.home-page .app-cta .store-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .78rem 1rem; font-size: .78rem; font-weight: 700; }
.home-page .app-cta .store-btn .qr-popup { top: calc(100% + 14px); bottom: auto; left: 50%; transform: translateX(-50%) translateY(-8px); }
.home-page .app-cta .store-btn:is(:hover, :focus-visible) .qr-popup { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.home-page .app-cta .get-app-btn:is(:hover, :focus-visible) .qr-popup { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.home-page .btn,
.home-page .get-app-btn,
.home-page .store-btn { border-radius: 6px; min-height: 46px; font-family: var(--site-sans); }
.home-page .btn-secondary { border-color: var(--site-ink); color: var(--site-ink); }
.home-page .btn-secondary:hover { background: var(--site-ink); color: var(--site-paper); }
.home-page .get-app-btn,
.home-page .store-btn { background: var(--site-ink); color: var(--site-white); }
.home-page .get-app-btn:hover,
.home-page .store-btn:hover { background: var(--site-accent); }
.home-page .hero {
  min-height: calc(100svh - 76px);
  padding: clamp(4rem, 8vw, 8rem) 0 clamp(4rem, 7vw, 7rem);
  display: flex;
  align-items: center;
  color: var(--site-white);
  background:
    radial-gradient(circle at 78% 18%, rgba(165, 178, 154, .24), transparent 26%),
    radial-gradient(circle at 4% 98%, rgba(221, 117, 76, .18), transparent 25%),
    var(--site-ink);
}
.home-page .hero::before,
.home-page .hero::after,
.home-page .paint-swatch { display: none; }
.home-page .hero-content { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(300px, .78fr); gap: clamp(3rem, 8vw, 9rem); align-items: center; }
.home-page .hero-text { max-width: 690px; }
.home-page .hero-label { display: inline-flex; margin: 0 0 1.5rem; padding: 0; background: none; color: var(--site-accent-2); border-radius: 0; font-size: .75rem; letter-spacing: .14em; }
.home-page .hero-label i { display: none; }
.home-page .hero h1 { max-width: 730px; margin: 0 0 1.45rem; color: var(--site-white); font-size: clamp(3.3rem, 7.2vw, 7.2rem); line-height: .95; letter-spacing: -.065em; }
.home-page .hero-tagline { max-width: 560px; margin-bottom: 2.35rem; color: rgba(255, 253, 248, .75); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; }
.home-page .hero-benefits { max-width: 620px; margin: 0 0 2.4rem; }
.home-page .hero-benefits li { margin: 0; padding: .8rem 0; border-top: 1px solid rgba(255,255,255,.17); color: rgba(255, 253, 248, .9); font-size: .92rem; }
.home-page .hero-benefits li:last-child { border-bottom: 1px solid rgba(255,255,255,.17); }
.home-page .hero-benefits i { color: var(--site-accent-2); font-size: .75rem; }
.home-page .social-proof { display: none; }
.home-page .hero-cta { gap: .7rem; }
.home-page .hero-cta .btn-primary { background: var(--site-accent); color: var(--site-white); }
.home-page .hero-cta .btn-primary:hover { background: #ef9561; box-shadow: none; }
.home-page .hero-cta .btn-secondary { color: var(--site-white); border-color: rgba(255,255,255,.48); }
.home-page .hero-cta .btn-secondary:hover { background: var(--site-white); color: var(--site-ink); }
.home-page .hero-image { max-width: 430px; justify-self: end; }
.home-page .hero-image-inner { padding: 0; }
.home-page .hero-image img { position: relative; z-index: 1; width: min(100%, 410px); border: 9px solid rgba(255,253,248,.94); border-radius: 28px; box-shadow: 22px 28px 0 rgba(221,117,76,.22); transform: rotate(2.5deg); }
.home-page .hero-shelf,
.home-page .hero-chip { display: none; }
.home-page .features,
.home-page .screenshots,
.home-page .faq { background: var(--site-paper); }
.home-page .features { padding: clamp(5rem, 10vw, 9rem) 0; }
.home-page .section-heading { max-width: 630px; margin-bottom: 3.5rem; text-align: left; }
.home-page .section-label { color: var(--site-accent); font-size: .73rem; letter-spacing: .14em; font-weight: 700; text-transform: uppercase; }
.home-page .section-heading h2 { margin: .65rem 0 .7rem; font-size: clamp(2.4rem, 4vw, 4.6rem); letter-spacing: -.06em; }
.home-page .section-heading p { color: var(--site-muted); }
.home-page .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--site-rule); }
.home-page .feature-card { min-height: 240px; padding: 1.8rem 2rem 1.8rem 0; border: 0; border-right: 1px solid var(--site-rule); border-radius: 0; background: none; box-shadow: none; }
.home-page .feature-card + .feature-card { padding-left: 2rem; }
.home-page .feature-card:last-child { border-right: 0; }
.home-page .feature-icon { margin: 1.2rem 0 1.3rem; color: var(--site-accent); background: none; font-size: 1.2rem; }
.home-page .step-number { color: var(--site-muted); font-family: var(--site-serif); font-size: 1.35rem; }
.home-page .feature-card h3 { margin-bottom: .7rem; font-size: 1.55rem; letter-spacing: -.03em; }
.home-page .feature-card p { color: var(--site-muted); font-size: .94rem; }
.home-page .screenshots { padding: clamp(5rem, 9vw, 8rem) 0; background: var(--site-paper-2); }
.home-page .screenshots-slider { gap: 1.3rem; padding-bottom: 1rem; }
.home-page .screenshot-item { flex: 0 0 196px; padding: 0; border: 0; border-radius: 18px; background: var(--site-white); box-shadow: 0 18px 40px rgba(24,32,27,.12); transition: transform .35s var(--site-ease); }
.home-page .screenshot-item:hover { transform: translateY(-9px); }
.home-page .screenshot-item:nth-child(even) { transform: translateY(18px); }
.home-page .screenshot-item:nth-child(even):hover { transform: translateY(9px); }
.home-page .screenshot-item img { border-radius: 18px; }
.home-page .screenshots-nav { display: none; }
.home-page .faq { padding: clamp(5rem, 9vw, 8rem) 0; }
.home-page .faq-container { max-width: 900px; margin-left: auto; }
.home-page .faq-item { border-top: 1px solid var(--site-rule); border-radius: 0; background: none; box-shadow: none; }
.home-page .faq-item:last-child { border-bottom: 1px solid var(--site-rule); }
.home-page .faq-question { min-height: 72px; color: var(--site-ink); font-family: var(--site-serif); font-size: 1.25rem; }
.home-page .faq-answer p { color: var(--site-muted); }
.home-page .sms-section { margin: 0 auto 5rem; padding: clamp(2.2rem, 5vw, 4.2rem); border-radius: 0; color: var(--site-white); background: var(--site-ink-2); }
.home-page .sms-section h3 { color: var(--site-white); font-family: var(--site-serif); font-size: clamp(2rem, 3.5vw, 3rem); }
.home-page .sms-form input { border: 1px solid rgba(255,255,255,.25); border-radius: 4px; background: transparent; color: var(--site-white); }
.home-page .sms-form button { border-radius: 4px; background: var(--site-accent); }
.home-page .consent-text { color: rgba(255,255,255,.88); }
.home-page .sms-country-note { color: var(--site-white); opacity: 1 !important; }
.home-page .guides-teaser { margin-bottom: 5rem; }
.home-page .guides-teaser-card { padding: clamp(2rem, 4vw, 3.5rem) 0; border-top: 1px solid var(--site-rule); border-bottom: 1px solid var(--site-rule); border-radius: 0; background: none; box-shadow: none; }
.home-page .guides-teaser-label { color: var(--site-accent); }
.home-page .guides-teaser-title { max-width: 800px; margin: .7rem 0; font-family: var(--site-serif); font-size: clamp(2rem, 4vw, 4rem); letter-spacing: -.05em; }
.home-page .guides-teaser-copy { max-width: 610px; color: var(--site-muted); }
.home-page .cta-section { margin-bottom: 5rem; padding: clamp(3rem, 7vw, 6rem); border-radius: 0; text-align: left; color: var(--site-white); background: var(--site-accent); }
.home-page .cta-section h2 { max-width: 700px; color: var(--site-white); font-size: clamp(2.5rem, 5vw, 5rem); letter-spacing: -.06em; }
.home-page .cta-section p { color: rgba(255,255,255,.82); }
.home-page .cta-section .btn-primary { background: var(--site-ink); }
.home-page footer { background: var(--site-ink); color: rgba(255,255,255,.7); }
.home-page footer h2, .home-page footer h3 { color: var(--site-white); }
.home-page footer a:hover { color: var(--site-accent-2); }
.home-page footer .locale-nav { border-color: rgba(255,255,255,.14); }
.home-page .qr-popup, .home-page .qr-popup-top { z-index: 60; }
.home-page .hero-cta .store-btn,
.home-page .cta-section .store-btn { position: relative; display: inline-flex; align-items: center; gap: .45rem; padding: .9rem 1.2rem; font-size: .85rem; font-weight: 700; }
.home-page .hero-cta .store-btn .qr-popup,
.home-page .cta-section .store-btn .qr-popup { top: calc(100% + 14px); bottom: auto; left: 50%; transform: translateX(-50%) translateY(-8px); }
.home-page .hero-cta .store-btn:is(:hover, :focus-visible) .qr-popup,
.home-page .cta-section .store-btn:is(:hover, :focus-visible) .qr-popup { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.home-page .hero-cta .qr-button-top:is(:hover, :focus-visible) .qr-popup-top,
.home-page .cta-section .qr-button-top:is(:hover, :focus-visible) .qr-popup-top { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.home-page .get-app-btn:focus-visible .qr-popup,
.home-page .qr-button-top:focus-visible .qr-popup-top { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* Google Play QR cards open upward so they stay attached to the button without
   falling below the fold in hero and footer CTA rows. */
.home-page .app-cta .play-store-btn .qr-popup,
.home-page .hero-cta .play-store-btn .qr-popup,
.home-page .cta-section .play-store-btn .qr-popup,
.guide-page .hub-actions .play-download-btn .qr-popup,
.landing-page .nav-store-actions .play-download-btn .qr-popup,
.landing-page .hero-actions .play-download-btn .qr-popup,
.landing-page .cta-card .play-download-btn .qr-popup,
.download-page .stores #play-store .qr-popup {
  top: auto;
  bottom: calc(100% + 14px);
  transform: translateX(-50%) translateY(8px);
}
.home-page .app-cta .play-store-btn:is(:hover, :focus-visible) .qr-popup,
.home-page .hero-cta .play-store-btn:is(:hover, :focus-visible) .qr-popup,
.home-page .cta-section .play-store-btn:is(:hover, :focus-visible) .qr-popup,
.guide-page .hub-actions .play-download-btn:is(:hover, :focus-visible) .qr-popup,
.landing-page .nav-store-actions .play-download-btn:is(:hover, :focus-visible) .qr-popup,
.landing-page .hero-actions .play-download-btn:is(:hover, :focus-visible) .qr-popup,
.landing-page .cta-card .play-download-btn:is(:hover, :focus-visible) .qr-popup,
.download-page .stores #play-store:is(:hover, :focus-visible) .qr-popup {
  transform: translateX(-50%) translateY(0);
}

/* QR cards sit on light surfaces, including the accent CTA footer. */
.home-page .cta-section .qr-popup p,
.home-page .cta-section .qr-popup-top p,
.home-page .cta-section .qr-route-note,
.landing-page .cta-card .qr-popup p,
.landing-page .cta-card .qr-route-note {
  color: var(--site-ink) !important;
  -webkit-text-fill-color: var(--site-ink);
}

/* Guide hubs */
.guide-page { min-height: 100vh; }
.guide-page .shell { max-width: 1280px; padding: 1.5rem clamp(1.25rem, 4vw, 3.5rem) 5rem; }
.guide-page .topbar { padding-bottom: 1.2rem; border-bottom: 1px solid var(--site-rule); color: var(--site-muted); }
.guide-page .topbar a:first-child { color: var(--site-accent); font-weight: 700; }
.guide-page .hero { padding: clamp(4rem, 10vw, 9rem) 0 4.2rem; background: none; }
.guide-page .eyebrow { color: var(--site-accent); font-size: .72rem; letter-spacing: .14em; }
.guide-page h1 { max-width: 900px; margin: .7rem 0 1.3rem; color: var(--site-ink); font-size: clamp(3rem, 7vw, 7rem); letter-spacing: -.065em; }
.guide-page .hero p { max-width: 650px; color: var(--site-muted); font-size: 1.08rem; }
.guide-page .hub-cta { margin-top: 1.2rem; border-radius: 4px; background: var(--site-ink); box-shadow: none; }
.guide-page .hub-cta:hover { background: var(--site-accent); }
.guide-page .hub-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }
.guide-page .hub-actions .hub-cta { margin-top: 0; position: relative; }
.guide-page .hub-actions .play-download-btn { background: var(--site-blue); }
.guide-page .hub-actions .play-download-btn:hover { background: #315e8d; }
.guide-page .hub-actions .qr-popup { position: absolute; top: calc(100% + 14px); bottom: auto; left: 50%; z-index: 20; width: 170px; padding: .85rem; border: 1px solid var(--site-rule); border-radius: 16px; background: var(--site-white); box-shadow: 0 18px 42px rgba(24,32,27,.18); text-align: center; opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-8px); transition: opacity .25s ease, transform .25s ease, visibility .25s ease; pointer-events: none; }
.guide-page .hub-actions .hub-cta:is(:hover, :focus-visible) .qr-popup { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.guide-page .hub-actions .qr-popup img { display: block; width: 100%; border-radius: 10px; }
.guide-page .hub-actions .qr-popup p { margin: .6rem 0 0; padding: .4rem .55rem; border-radius: 999px; background: rgba(24,32,27,.06); color: var(--site-ink); font-size: .78rem; font-weight: 700; line-height: 1.3; }
.guide-page .guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; margin: 0; border-top: 1px solid var(--site-rule); }
.guide-page .guide-card { min-height: 170px; padding: 1.4rem 1.5rem 1.5rem 0; border: 0; border-right: 1px solid var(--site-rule); border-bottom: 1px solid var(--site-rule); border-radius: 0; background: none; box-shadow: none; transition: color .25s ease, padding .25s ease; }
.guide-page .guide-card:nth-child(3n + 2), .guide-page .guide-card:nth-child(3n + 3) { padding-left: 1.5rem; }
.guide-page .guide-card:nth-child(3n) { border-right: 0; }
.guide-page .guide-card:hover { padding-top: 1.1rem; transform: none; color: var(--site-accent); box-shadow: none; }
.guide-page .guide-card h2 { margin: 0; max-width: 250px; font-size: clamp(1.2rem, 1.8vw, 1.65rem); letter-spacing: -.03em; }
.guide-page .guide-card::after { content: "↗"; display: block; margin-top: 2.6rem; color: var(--site-muted); font-size: 1.1rem; }

/* SEO landing pages */
.landing-page { background: var(--site-paper); }
.landing-page nav { background: rgba(245,240,231,.86); border-color: var(--site-rule); }
.landing-page .nav-inner, .landing-page .page-shell, .landing-page .footer-inner { max-width: 1280px; }
.landing-page .nav-links { color: var(--site-muted); }
.landing-page .nav-links a:hover { color: var(--site-ink); }
.landing-page .download-btn { border-radius: 4px; background: var(--site-ink); box-shadow: none; }
.landing-page .download-btn:hover { background: var(--site-accent); box-shadow: none; }
.landing-page .play-download-btn { background: var(--site-blue); }
.landing-page .play-download-btn:hover { background: #315e8d; }
.landing-page .play-download-btn { position: relative; }
.landing-page .nav-store-actions .download-btn:not(.play-download-btn) .qr-popup { top: calc(100% + 16px); bottom: auto; z-index: 20; transform: translateX(-50%) translateY(-8px); }
.landing-page .download-btn:is(:hover, :focus-visible) .qr-popup { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.landing-page .play-download-btn .qr-popup { color: var(--site-ink); -webkit-text-fill-color: var(--site-ink); }
.landing-page .hero { padding: clamp(4rem, 8vw, 7.5rem) 1.25rem 3rem; background: var(--site-ink); }
.landing-page .hero-inner { max-width: 1280px; grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr); gap: clamp(2.5rem, 8vw, 9rem); }
.landing-page .hero-copy { padding: 0; background: none; border-radius: 0; box-shadow: none; }
.landing-page .eyebrow { padding: 0; border-radius: 0; background: none; color: var(--site-accent-2); letter-spacing: .14em; }
.landing-page .hero h1 { max-width: 800px; margin: 1rem 0 1.2rem; font-size: clamp(2.8rem, 6.6vw, 6.5rem); letter-spacing: -.06em; line-height: .96; }
.landing-page .hero p { max-width: 650px; font-size: 1.07rem; line-height: 1.65; }
.landing-page .hero-actions { gap: .7rem; }
.landing-page .benefits { gap: 0; margin-top: 2rem; }
.landing-page .benefits div { padding: .85rem 1rem .85rem 0; border: 0; border-top: 1px solid rgba(255,255,255,.18); border-radius: 0; background: none; color: rgba(255,255,255,.78); font-size: .9rem; }
.landing-page .hero-shot { min-width: 0; padding: .6rem; border-radius: 22px; background: var(--site-paper-2); box-shadow: 18px 22px 0 rgba(221,117,76,.22); transform: rotate(2deg); }
.landing-page .hero-shot img { max-width: 100%; border-radius: 15px; }
.landing-page .page-shell { padding-top: clamp(4rem, 8vw, 7rem); }
.landing-page .workflow-card { padding: 0 0 3rem; margin: 0 0 2rem; border: 0; border-bottom: 1px solid var(--site-rule); border-radius: 0; background: none; }
.landing-page .workflow-card-header { margin-bottom: 2rem; }
.landing-page .workflow-card-header h2 { margin: .6rem 0 .4rem; font-size: clamp(2.3rem, 4vw, 4.5rem); letter-spacing: -.06em; }
.landing-page .workflow-card-header p, .landing-page .ed-card p, .landing-page .faq-item p { color: var(--site-muted); }
.landing-page .workflow-grid { gap: 0; border-top: 1px solid var(--site-rule); }
.landing-page .workflow-step { min-height: 165px; padding: 1.3rem 1.3rem 1.3rem 0; border: 0; border-right: 1px solid var(--site-rule); border-radius: 0; background: none; }
.landing-page .workflow-step + .workflow-step { padding-left: 1.3rem; }
.landing-page .workflow-step:last-child { border-right: 0; }
.landing-page .workflow-step-num { color: var(--site-accent); }
.landing-page .workflow-step h3 { font-family: var(--site-serif); font-size: 1.3rem; }
.landing-page .ed-main { max-width: none; }
.landing-page .ed-main::before { background: var(--site-rule); }
.landing-page .ed-section { padding: 2.5rem 0 2.5rem 3.5rem; margin-bottom: 0; border-bottom: 1px solid var(--site-rule); }
.landing-page .ed-section-num { left: 0; top: 2rem; color: var(--site-accent); font-size: 3.3rem; opacity: .8; }
.landing-page .ed-card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.landing-page .ed-card h2 { margin: 0 0 .7rem; font-size: clamp(1.8rem, 3.5vw, 3.4rem); letter-spacing: -.05em; }
.landing-page .best-for { grid-template-columns: repeat(3, 1fr); gap: 0; }
.landing-page .best-for li { padding: .85rem 1rem .85rem 0; border-top: 1px solid var(--site-rule); border-radius: 0; background: none; color: var(--site-muted); }
.landing-page .faq-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 2rem; }
.landing-page .faq-item { padding: 1.15rem 0; border: 0; border-top: 1px solid var(--site-rule); border-radius: 0; background: none; box-shadow: none; }
.landing-page .faq-item h3 { font-family: var(--site-serif); font-size: 1.22rem; }
.landing-page .related-grid { gap: 0; grid-template-columns: repeat(2, minmax(0,1fr)); }
.landing-page .related-card { padding: 1.1rem 1rem 1.1rem 0; border: 0; border-top: 1px solid var(--site-rule); border-radius: 0; background: none; box-shadow: none; }
.landing-page .related-card:hover { color: var(--site-accent); }
.landing-page .cta-card { margin-top: 3rem; padding: 2.2rem 0 0; border: 0; border-top: 1px solid var(--site-rule); border-radius: 0; background: none; }
.landing-page .cta-card h3 { font-family: var(--site-serif); font-size: 2rem; }
.landing-page footer { border-color: var(--site-rule); background: transparent; }

/* Download handoff */
.download-page { display: grid; min-height: 100svh; place-items: center; margin: 0; padding: 1rem; background: var(--site-ink); color: var(--site-white); font-family: var(--site-sans); }
.download-page main { width: min(100%, 560px); padding: clamp(1.5rem, 6vw, 4rem); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.045); }
.download-page .download-mark { display: inline-flex; width: 56px; height: 56px; margin-bottom: 2rem; overflow: hidden; border-radius: 16px; }
.download-page .download-mark img { width: 100%; height: 100%; }
.download-page h1 { margin: 0 0 .8rem; color: var(--site-white); font-family: var(--site-serif); font-size: clamp(2.4rem, 7vw, 5rem); line-height: .95; letter-spacing: -.06em; }
.download-page p { color: rgba(255,255,255,.68); }
.download-page .stores { display: grid; gap: .7rem; margin-top: 2rem; }
.download-page .stores a { min-width: 0; padding: 1rem 1.1rem; border-radius: 4px; background: var(--site-accent); color: var(--site-white); text-align: center; overflow-wrap: anywhere; }
.download-page .stores a:last-child { background: var(--site-blue); }
.download-page .stores a:hover { filter: brightness(1.08); }
.download-page .stores a { position: relative; }
.download-page .stores .qr-popup { position: absolute; top: calc(100% + 14px); left: 50%; z-index: 20; width: 170px; padding: .85rem; border: 1px solid var(--site-rule); border-radius: 16px; background: var(--site-white); box-shadow: 0 18px 42px rgba(24,32,27,.18); color: var(--site-ink); opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-8px); transition: opacity .25s ease, transform .25s ease, visibility .25s ease; pointer-events: none; }
.download-page .stores a:is(:hover, :focus-visible) .qr-popup { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.download-page .stores .qr-popup img { display: block; width: 100%; border-radius: 10px; }
.download-page .stores .qr-popup p { margin: .6rem 0 0; color: var(--site-ink); font-size: .78rem; font-weight: 700; line-height: 1.3; }
.qr-route-note { display: block; margin-top: .3rem; color: inherit; font-size: .68rem; font-weight: 500; letter-spacing: .02em; opacity: .68; }

@media (max-width: 900px) {
  .home-page .hero-content, .landing-page .hero-inner { grid-template-columns: 1fr; }
  .home-page .hero-image, .landing-page .hero-shot { justify-self: start; max-width: min(100%, 430px); }
  .home-page .features-grid, .guide-page .guide-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .home-page .feature-card:nth-child(2) { border-right: 0; }
  .home-page .feature-card:nth-child(3) { grid-column: span 2; border-top: 1px solid var(--site-rule); padding-left: 0; }
  .guide-page .guide-card:nth-child(3n) { border-right: 1px solid var(--site-rule); }
  .guide-page .guide-card:nth-child(even) { padding-left: 1.5rem; border-right: 0; }
  .guide-page .guide-card:nth-child(odd) { padding-left: 0; }
  .landing-page .workflow-grid, .landing-page .best-for { grid-template-columns: 1fr; }
  .landing-page .workflow-step, .landing-page .workflow-step + .workflow-step { padding-left: 0; border-right: 0; border-bottom: 1px solid var(--site-rule); }
  .landing-page .workflow-step:last-child { border-bottom: 0; }
}

@media (max-width: 680px) {
  .home-page .nav-container { flex-wrap: wrap; }
  .home-page .nav-container > nav { order: 4; width: 100%; }
  .home-page .nav-links { display: none; }
  .home-page .nav-links.active { display: grid; grid-template-columns: repeat(2, 1fr); padding: .9rem 0; }
  .home-page .app-cta { margin-left: auto; }
  .home-page .app-cta .btn-secondary { display: none; }
  .home-page .hero { min-height: auto; }
  .home-page .hero h1, .landing-page .hero h1 { font-size: clamp(2.65rem, 13vw, 4.7rem); }
  .home-page .hero-content { gap: 3.2rem; }
  .home-page .hero-image img { width: 92%; }
  .home-page .features-grid, .home-page .feature-card:nth-child(3), .guide-page .guide-grid { display: block; }
  .home-page .feature-card, .home-page .feature-card + .feature-card { min-height: auto; padding: 1.5rem 0; border: 0; border-top: 1px solid var(--site-rule); }
  .home-page .screenshots-slider { margin-right: -1.25rem; }
  .home-page .screenshot-item { flex-basis: 160px; }
  .guide-page .guide-card, .guide-page .guide-card:nth-child(even), .guide-page .guide-card:nth-child(odd) { min-height: 135px; padding: 1.2rem 0; border-right: 0; }
  .guide-page .guide-card::after { margin-top: 1.2rem; }
  .landing-page nav { padding-inline: .8rem; }
  .landing-page .nav-inner { align-items: flex-start; }
  .landing-page .nav-links { gap: .5rem; font-size: .8rem; }
  .landing-page .nav-store-actions { width: 100%; justify-content: flex-start; }
  .landing-page .nav-store-actions .download-btn { flex: 1; min-width: 0; font-size: .78rem; }
  .landing-page .hero { padding-inline: 1rem; }
  .landing-page .hero-actions { display: grid; grid-template-columns: 1fr; }
  .landing-page .hero-actions .download-btn { width: 100%; }
  .landing-page .page-shell { padding-inline: 1rem; }
  .landing-page .ed-section { padding-left: 2.4rem; }
  .landing-page .faq-grid, .landing-page .related-grid { grid-template-columns: 1fr; }
  .landing-page .ed-section-num { font-size: 2.5rem; }
  .home-page .store-btn .qr-popup,
  .guide-page .hub-actions .qr-popup,
  .download-page .stores .qr-popup { display: none; }
  .download-page { padding: .75rem; }
  .download-page main { padding: 1.35rem; }
}

/* Sending the link is a desktop fallback; mobile visitors already have the store buttons. */
@media (hover: none) and (pointer: coarse) {
  .home-page a[onclick*="scrollToSMS"] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Install CTA system
   --------------------------------------------------------------------------
   One component for every download button on every archetype.

   Device adaptation is pure CSS, keyed off a class stamped on <html> before
   first paint. Nothing is rewritten after parse, so the most important element
   on the page never reflows and contributes no layout shift.

   Both store links stay in the DOM on every device. The non-matching one is
   demoted to a small text link, never removed: crawlers need the real URLs,
   the JSON-LD downloadUrl array must stay honest, and an Android user browsing
   on an iPad still needs a way through.
   ========================================================================== */
:root {
  /* Action colour is reserved exclusively for install CTAs. The old accent
     (#dd754c) scored 3.07:1 on white -- the most important element on the site
     was its least legible. This is 6.05:1 and passes WCAG AA. */
  --pm-action: #a8401c;
  --pm-action-hover: #8f3514;
  --pm-action-tint: rgba(168, 64, 28, .09);
  /* Editorial accent, kept separate so the action colour retains its isolation.
     One colour doing six jobs cannot signal "act here". */
  --pm-mark: #9e3b18;
  --pm-verify: #2e5b4a;
  --pm-star: #c77a12;
  --pm-star-deep: #e8a33d;
  --pm-bar-h: 58px;
}

.pm-cta { display: grid; gap: .85rem; justify-items: start; }
.pm-cta__buttons { display: grid; gap: .6rem; width: 100%; max-width: 430px; }

.pm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: 0 1.4rem;
  border: 0; border-radius: 10px;
  background: var(--pm-action); color: #fff;
  font-family: var(--site-sans); font-size: .875rem; font-weight: 600; line-height: 1.3;
  text-align: center; cursor: pointer;
  box-shadow: 0 1px 0 rgba(21,24,28,.10), 0 8px 20px -8px rgba(168,64,28,.55);
  transition: background .2s var(--site-ease), transform .12s var(--site-ease);
}
.pm-btn:hover { background: var(--pm-action-hover); color: #fff; }
.pm-btn:active { transform: translateY(1px); }
.pm-btn:focus-visible { outline: 2px solid var(--site-ink); outline-offset: 3px; }
.pm-btn__alt { display: none; }
.pm-btn--handoff, .pm-handoff { display: none; }

/* --- Device reshaping ---------------------------------------------------- */
/* Demote the non-matching store to a quiet text link. Still a real anchor. */
.pm-ios .pm-btn--android,
.pm-android .pm-btn--ios {
  order: 9; justify-self: start;
  min-height: 0; padding: 0; border-radius: 0;
  background: none; box-shadow: none;
  color: var(--site-muted); font-size: .8125rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.pm-ios .pm-btn--android:hover,
.pm-android .pm-btn--ios:hover { background: none; color: var(--pm-action); }
.pm-ios .pm-btn--android .pm-btn__label,
.pm-android .pm-btn--ios .pm-btn__label { display: none; }
.pm-ios .pm-btn--android .pm-btn__alt,
.pm-android .pm-btn--ios .pm-btn__alt { display: inline; }

/* Desktop cannot install anything, so the handoff leads and the stores follow. */
.pm-desktop .pm-cta__buttons { grid-auto-flow: column; grid-auto-columns: max-content; max-width: none; }
.pm-desktop .pm-btn--handoff { display: inline-flex; order: -1; }
.pm-desktop .pm-btn--ios,
.pm-desktop .pm-btn--android {
  background: transparent; color: var(--site-ink);
  box-shadow: inset 0 0 0 1px var(--site-rule);
}
.pm-desktop .pm-btn--ios:hover,
.pm-desktop .pm-btn--android:hover {
  background: var(--pm-action-tint); color: var(--pm-action-hover);
  box-shadow: inset 0 0 0 1px var(--pm-action);
}
.pm-desktop .pm-handoff:not([hidden]) {
  display: flex; align-items: center; gap: 1rem;
  margin-top: .3rem; padding: 1rem;
  border: 1px solid var(--site-rule); border-radius: 14px;
  background: var(--site-white);
}
.pm-handoff img { display: block; width: 110px; height: 110px; border-radius: 4px; }
.pm-handoff p { margin: 0; max-width: 15ch; color: var(--site-muted); font-size: .8125rem; line-height: 1.4; }

/* --- Assurance line ------------------------------------------------------ */
/* Every claim here is verifiable: the listing is free, the privacy policy
   states photos never leave the device and that no name or email is collected. */
.pm-cta__assure { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0; color: var(--site-muted); font-size: .8125rem; line-height: 1.5; }
.pm-cta__assure span { padding-left: 1.1em; background: no-repeat left .3em / .75em .75em url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6.4l3 3L11 2' stroke='%232e5b4a' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* --- Rating strip -------------------------------------------------------- */
/* Partial fill via a gradient clipped to the glyphs: one text node, no images,
   no half-star sprite, and it scales with the real rating value. */
.pm-rating { display: flex; align-items: baseline; gap: .45rem; margin: 0; font-size: .8125rem; }
.pm-rating__stars {
  --pm-fill: 80%;
  font-size: .95rem; letter-spacing: .06em; line-height: 1;
  color: var(--pm-star);
  background: linear-gradient(90deg, var(--pm-star) var(--pm-fill), var(--site-rule) var(--pm-fill));
  -webkit-background-clip: text; background-clip: text;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .pm-rating__stars { color: transparent; }
}
.pm-rating__value { font-weight: 700; color: var(--site-ink); }
.pm-rating__meta { color: var(--site-muted); }

/* On the dark hero panel the palette flips. */
.pm-cta--hero .pm-cta__assure, .pm-cta--hero .pm-rating__meta { color: rgba(255,253,248,.72); }
.pm-cta--hero .pm-rating__value { color: var(--site-white); }
.pm-cta--hero .pm-rating__stars {
  color: var(--pm-star-deep);
  background: linear-gradient(90deg, var(--pm-star-deep) var(--pm-fill), rgba(255,253,248,.28) var(--pm-fill));
  -webkit-background-clip: text; background-clip: text;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .pm-cta--hero .pm-rating__stars { color: transparent; }
}

/* --- Variants ------------------------------------------------------------ */
.pm-cta--mini { gap: 0; }
.pm-cta--mini .pm-cta__assure, .pm-cta--mini .pm-rating, .pm-cta--mini .pm-handoff { display: none; }
.pm-cta--mini .pm-cta__buttons { grid-auto-flow: column; grid-auto-columns: max-content; max-width: none; gap: .4rem; }
.pm-cta--mini .pm-btn { min-height: 40px; padding: 0 .9rem; font-size: .8125rem; }
.pm-cta--inline .pm-rating { display: none; }

/* --- Sticky install bar --------------------------------------------------- */
/* Fixed, so it never enters flow. The body padding that reserves its space is
   applied by the same <html> class set before first paint, so revealing the bar
   shifts nothing: its layout-shift contribution is zero by construction. */
.pm-bar {
  position: fixed; inset: auto 0 0 0; z-index: 80;
  display: none; grid-template-columns: auto auto 1fr auto; align-items: center; gap: .7rem;
  height: calc(var(--pm-bar-h) + env(safe-area-inset-bottom));
  padding: 0 .9rem env(safe-area-inset-bottom);
  background: var(--site-white);
  box-shadow: 0 -1px 0 var(--site-rule), 0 -12px 32px -16px rgba(24,32,27,.35);
  transform: translateY(100%); opacity: 0;
  transition: transform .28s var(--site-ease), opacity .28s var(--site-ease);
}
.pm-ios .pm-bar, .pm-android .pm-bar { display: grid; }
.pm-bar--in { transform: none; opacity: 1; }
.pm-bar-off .pm-bar { display: none; }
.pm-ios body, .pm-android body { padding-bottom: calc(var(--pm-bar-h) + env(safe-area-inset-bottom)); }
.pm-bar-off body { padding-bottom: 0; }
.pm-bar__close {
  position: relative; width: 26px; height: 26px; padding: 0;
  display: grid; place-items: center;
  border: 0; background: none; color: var(--site-muted);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
}
/* 26px visual, 44px touch target. */
.pm-bar__close::before { content: ""; position: absolute; width: 44px; height: 44px; }
.pm-bar__icon { border-radius: 7px; }
.pm-bar__text { display: grid; min-width: 0; line-height: 1.25; }
.pm-bar__text strong { font-size: .8125rem; color: var(--site-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-bar__meta { color: var(--site-muted); font-size: .75rem; }
.pm-bar__go { min-height: 38px; padding: 0 1.1rem; border-radius: 999px; font-size: .8125rem; box-shadow: none; }
.pm-ios .pm-bar .pm-btn--android, .pm-android .pm-bar .pm-btn--ios { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pm-bar { transition: none; transform: none; opacity: 0; visibility: hidden; }
  .pm-bar--in { opacity: 1; visibility: visible; }
}

@media (max-width: 680px) {
  .pm-cta__buttons { max-width: none; }
  .pm-desktop .pm-cta__buttons { grid-auto-flow: row; grid-auto-columns: auto; }
}

/* The mid-page CTA is a break in the reading flow, not a numbered section, so
   it carries no section numeral and no left rule. */
.landing-page .pm-midway { padding-left: 0; }
.landing-page .pm-midway .ed-card { padding: .5rem 0; }

/* The hero device shot is now a transparent cut-out, so the paper card and
   offset shadow that used to frame a rectangular screenshot would just box in
   empty space. Let it sit directly on the hero instead. */
.landing-page .hero-shot {
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
}
.landing-page .hero-shot img,
.landing-page .hero-shot picture {
  display: block;
  width: 100%;
  height: auto;
  max-width: 340px;
  border-radius: 0;
  filter: drop-shadow(18px 22px 30px rgba(0, 0, 0, .38));
}
@media (max-width: 900px) {
  /* On phones the shot follows the CTA, so cap it: the visitor should reach
     the next section without a full extra screen of scrolling. */
  .landing-page .hero-shot img,
  .landing-page .hero-shot picture { max-width: 260px; }
}

/* On phones the nav CTA is pure redundancy: the hero CTA sits above the fold
   and the sticky bar covers everything past it. Dropping it reclaims ~90px at
   the top of every landing page, which is exactly the space the hero needs. */
@media (max-width: 900px) {
  .landing-page nav .pm-cta--mini { display: none; }
  .landing-page .nav-inner { align-items: center; }
}

/* Keep the bar to a single line; it is a persistent chrome element and must
   never grow tall enough to cover content. */
.pm-bar__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-bar__go { white-space: nowrap; }

/* Hub cards carry a summary now, so they need room to breathe and the arrow
   has to sit under the text rather than float over it. */
.guide-page .guide-card { display: flex; flex-direction: column; min-height: 210px; }
.guide-page .guide-card h2 { max-width: none; }
.guide-page .guide-card p {
  margin: .55rem 0 0; color: var(--site-muted);
  font-size: .875rem; line-height: 1.5;
}
.guide-page .guide-card::after { margin-top: auto; padding-top: .9rem; }
.guide-page .hub-footer-cta { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* ==========================================================================
   Display type scale
   --------------------------------------------------------------------------
   The old scale was tuned for a magazine cover: landing h1 reached 6.5rem and
   the hub 7rem, so a hub title -- which is a full sentence, not a headline --
   ran to five lines and pushed the CTA off the first screen entirely. These
   caps keep the serif voice while giving the action somewhere to sit.
   ========================================================================== */
.landing-page .hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.7rem); letter-spacing: -.035em; line-height: 1.03; }
.guide-page h1 { font-size: clamp(1.9rem, 3.4vw, 3rem); letter-spacing: -.03em; line-height: 1.08; max-width: 20ch; }
.landing-page .workflow-card-header h2 { font-size: clamp(1.75rem, 2.8vw, 2.6rem); }
.landing-page .ed-card h2 { font-size: clamp(1.45rem, 2.2vw, 2rem); }
.landing-page .cta-card h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); }

/* Long-form prose was running the full 1280px shell -- about 140 characters a
   line, which is punishing for 600 words of body copy. */
.landing-page .ed-card p, .landing-page .ed-card li { max-width: 68ch; }
.landing-page .hero p { max-width: 56ch; }

@media (max-width: 680px) {
  .landing-page .hero h1, .home-page .hero h1 { font-size: clamp(2rem, 8.2vw, 2.6rem); }
  .guide-page h1 { font-size: clamp(1.85rem, 7.4vw, 2.4rem); }
}

/* Homepage hero shot is a transparent cut-out now, like the landing pages. */
.home-page .hero-image img,
.home-page .hero-image picture {
  display: block;
  width: min(100%, 380px);
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  filter: drop-shadow(18px 22px 30px rgba(0, 0, 0, .38));
}
/* Same reasoning as the landing pages: on phones the hero CTA is above the
   fold and the sticky bar covers the rest, so the header CTA is redundant and
   costs ~70px of the first screen. */
@media (max-width: 900px) {
  .home-page header .pm-cta--mini { display: none; }
}

/* Homepage display type, on the same footing as the landing pages: the old
   7.2rem cap ran the h1 to three lines and pushed the CTA to the very bottom
   edge of a 900px viewport. */
.home-page .hero h1 { font-size: clamp(2.3rem, 4.8vw, 4rem); letter-spacing: -.04em; line-height: 1.02; }
.home-page .section-heading h2 { font-size: clamp(1.75rem, 3vw, 2.8rem); }
.home-page .guides-teaser-title { font-size: clamp(1.6rem, 2.6vw, 2.4rem); }
.home-page .cta-section h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
.home-page .sms-section h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }

/* The hero sits on the dark ink panel, so the desktop secondary store buttons
   cannot use ink-on-transparent -- that renders as invisible text. */
.pm-cta--hero .pm-btn--ios,
.pm-cta--hero .pm-btn--android {
  color: var(--site-white);
  box-shadow: inset 0 0 0 1px rgba(255, 253, 248, .34);
}
.pm-desktop .pm-cta--hero .pm-btn--ios:hover,
.pm-desktop .pm-cta--hero .pm-btn--android:hover {
  background: rgba(255, 253, 248, .1);
  color: var(--site-white);
  box-shadow: inset 0 0 0 1px rgba(255, 253, 248, .6);
}
/* On phones the demoted store link is a plain underlined link, not a bordered
   button, so it must not inherit the outline above. */
.pm-ios .pm-cta--hero .pm-btn--android,
.pm-android .pm-cta--hero .pm-btn--ios {
  color: rgba(255, 253, 248, .72);
  box-shadow: none;
}

/* ==========================================================================
   Contrast corrections
   --------------------------------------------------------------------------
   Measured against --site-paper (#f5f0e7):
     --site-muted  #716f66  4.44:1  just under the 4.5:1 AA floor, and it is
                                    the colour of nearly all secondary copy
     --site-accent #dd754c  2.75:1  used for section numerals and eyebrows
   Both are raised here rather than at their definitions so the original
   palette intent stays legible in the file.
   ========================================================================== */
:root {
  --site-muted: #5e5a52;  /* 6.05:1 */
}
/* Numerals and eyebrows move to the accessible mark colour. The action colour
   stays reserved for install buttons. */
.landing-page .ed-section-num,
.landing-page .workflow-step-num,
.home-page .step-number,
.home-page .section-label,
.home-page .guides-teaser-label,
.guide-page .eyebrow,
.guide-page .topbar a:first-child { color: var(--pm-mark); }

/* Buttons on the paper background need the action colour, not the old accent. */
.home-page .btn-primary,
.home-page .sms-form button { background: var(--pm-action); color: #fff; }
.home-page .btn-primary:hover,
.home-page .sms-form button:hover { background: var(--pm-action-hover); }

/* The SMS band sits on --site-ink-2; its label and helper text need the
   light-on-dark treatment, not the paper-tuned muted token. */
.home-page .sms-section .consent-text,
.home-page .sms-section p { color: rgba(255, 253, 248, .82); }

/* Language picker items were rendering near-invisible (1.05:1). */
.home-page .lang-dropdown a { color: var(--site-ink); }
.home-page .lang-dropdown a.active { color: var(--pm-mark); }

/* Inline SVG replacements for the Font Awesome glyphs. */
.pm-icon { display: inline-block; vertical-align: -0.125em; flex: none; }

/* Images carry intrinsic width/height attributes so the browser can reserve
   space before they load. Wherever CSS then constrains the width, height must
   go back to auto or the attribute is used as the literal height and the image
   is squashed -- the gallery was rendering 600x1300 shots at 196x1300. */
.home-page .screenshot-item img,
.home-page .hero-image img,
.landing-page .hero-shot img,
.pm-handoff img,
.pm-bar__icon,
.home-page .logo img,
.home-page .footer-logo img { height: auto; }

/* The gallery shows full App Store composites, headline and all, so the cards
   need enough width for that text to be readable -- 196px rendered them too
   small to make out. */
.home-page .screenshot-item { flex: 0 0 clamp(230px, 20vw, 290px); }
@media (max-width: 680px) {
  .home-page .screenshot-item { flex-basis: min(62vw, 250px); }
}

/* The handoff panel is a sibling of the button row, not a member of it --
   inside the row it stretched the grid and every button grew when it opened. */
.pm-handoff[hidden] { display: none; }
.pm-desktop .pm-handoff:not([hidden]) { display: flex; }

/* Newsreader has a larger x-height and lower stroke contrast than Fraunces, so
   the aggressive negative tracking that suited a display face now just crowds
   the letters. Loosen it and let the headline breathe. */
.home-page .hero h1 { letter-spacing: -.02em; line-height: 1.06; }
.landing-page .hero h1 { letter-spacing: -.02em; line-height: 1.08; }
.guide-page h1 { letter-spacing: -.018em; }
.home-page .section-heading h2,
.home-page .guides-teaser-title,
.home-page .cta-section h2,
.landing-page .workflow-card-header h2,
.landing-page .ed-card h2 { letter-spacing: -.02em; }

/* ==========================================================================
   Headings: sans, not display serif
   --------------------------------------------------------------------------
   Fraunces and then Newsreader both render the hero headline as a
   high-contrast display serif -- thin hairlines and tight apertures that get
   harder to read the larger they are, which is the opposite of what a hero
   needs. The grotesque is unambiguously legible at any size and is what the
   body copy already uses, so the page reads as one voice.

   The editorial character never lived in the typeface anyway: it comes from
   the hairline rules, the generous spacing and the paper palette, all of which
   are untouched.
   ========================================================================== */
body.home-page h1, body.home-page h2, body.home-page h3, body.home-page h4,
body.landing-page h1, body.landing-page h2, body.landing-page h3,
body.guide-page h1, body.guide-page h2 {
  font-family: var(--site-sans);
  font-weight: 700;
}
.home-page .hero h1,
.landing-page .hero h1,
.guide-page h1 { letter-spacing: -.028em; }
.home-page .hero h1 { line-height: 1.08; }
.landing-page .hero h1 { line-height: 1.1; }
/* The serif survives where it still reads well at text size. */
.home-page .logo-text,
.landing-page .ed-section-num,
.landing-page .workflow-step-num { font-family: var(--site-serif); }

/* The handoff panel is a light card that can sit inside any coloured section --
   including the terracotta footer CTA band, whose white body text cascaded into
   it and rendered "Scan with your phone camera" white-on-white (1.02:1).
   The panel owns its own text colour, at a specificity that does not depend on
   source order relative to the section rules. */
.home-page .pm-cta .pm-handoff,
.landing-page .pm-cta .pm-handoff,
.guide-page .pm-cta .pm-handoff { color: var(--site-ink); }
.home-page .pm-cta .pm-handoff p,
.landing-page .pm-cta .pm-handoff p,
.guide-page .pm-cta .pm-handoff p { color: var(--site-muted); }

/* ==========================================================================
   Contrast on the terracotta CTA band and the dark footer
   --------------------------------------------------------------------------
   Measured on the rendered page, not inferred from the cascade:
     white on the old --site-accent #dd754c   3.12:1  (band copy, assurance line)
     --site-muted on that band                2.20:1  (rating count)
     --pm-mark on legacy --terracotta         1.61:1  (feature step numbers)
     --site-ink on the dark footer            1.05:1  (current language) -- invisible
   ========================================================================== */

/* Darkening the band to the action colour takes its white text from 3.12:1 to
   6.05:1, and matches the colour the install buttons already use. */
.home-page .cta-section { background: var(--pm-action); }
.home-page .cta-section p,
.home-page .cta-section .pm-cta__assure span { color: rgba(255, 255, 255, .92); }
.home-page .cta-section .pm-rating__meta { color: rgba(255, 255, 255, .88); }
.home-page .cta-section .pm-rating__value { color: #fff; }
/* The band's own button must not be the same colour as the band. */
.home-page .cta-section .pm-btn--handoff,
.home-page .cta-section .btn-primary { background: var(--site-ink); color: #fff; }
.home-page .cta-section .pm-btn--handoff:hover,
.home-page .cta-section .btn-primary:hover { background: #0f1512; }

/* Step numerals sit on the legacy terracotta card, where the mark colour is
   nearly invisible. */
.home-page .step-number { color: rgba(255, 255, 255, .95); }

/* The active language was rendering ink-on-ink in the dark footer. */
.home-page footer .locale-nav span[aria-current] { color: var(--site-white); font-weight: 600; }
.home-page footer .locale-nav a { color: rgba(255, 253, 248, .72); }
.home-page footer .locale-nav a:hover { color: var(--site-white); }

/* Secondary store buttons in the CTA band were ink-on-terracotta at 2.71:1.
   On a coloured band they need the same light treatment as the dark hero. */
.home-page .cta-section .pm-btn--ios,
.home-page .cta-section .pm-btn--android {
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}
.home-page .cta-section .pm-btn--ios:hover,
.home-page .cta-section .pm-btn--android:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75);
}

/* The band inherited centring from the legacy stylesheet, so its heading,
   copy, buttons, assurance line and rating each started at a different left
   edge (208 / 420 / 208 / 420 / 563px). Line them all up. */
.home-page .cta-section > .container,
.home-page .cta-section .container { margin-inline: 0; }
.home-page .cta-section h2,
.home-page .cta-section p,
.home-page .cta-section .pm-cta,
.home-page .cta-section .pm-cta__buttons,
.home-page .cta-section .pm-cta__assure,
.home-page .cta-section .pm-rating,
.home-page .cta-section .pm-handoff {
  margin-inline: 0;
  justify-content: flex-start;
  text-align: left;
}

/* The assurance ticks are drawn in the verify green, which goes muddy against
   the terracotta band. Use white there, as on the dark hero. */
.home-page .cta-section .pm-cta__assure span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6.4l3 3L11 2' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Guides teaser spacing
   --------------------------------------------------------------------------
   The card had `padding: clamp(...) 0` -- vertical only -- so its icon, label,
   heading, copy and button all sat flush against the rules that bound it.
   ========================================================================== */
.home-page .guides-teaser-card { padding-inline: clamp(1.25rem, 3vw, 2.75rem); }

/* ==========================================================================
   Editorial section numerals
   --------------------------------------------------------------------------
   The numeral was absolutely positioned at left:0 and the section reserved a
   fixed padding-left for it -- effectively a guess at how wide "01" renders.
   At the current face it comes out 64px inside a 56px gutter, so it overlapped
   every heading by 8px (9px on phones).

   A two-column grid gives the numeral a real column, so it cannot collide
   again whatever the typeface or size.
   ========================================================================== */
.landing-page .ed-section {
  display: grid;
  /* A fixed first column, not max-content: each section is its own grid, so a
     content-sized column made the numeral-less CTA break collapse narrower
     than the rest and its content hang left of every other section's copy.
     The width comfortably clears the numeral at the sizes set below. */
  grid-template-columns: 4.75rem minmax(0, 1fr);
  column-gap: clamp(.85rem, 1.5vw, 1.5rem);
  align-items: start;
  padding-left: 0;
}
.landing-page .ed-section-num {
  position: static;
  line-height: 1;
  padding-top: .12em;
}
/* The mid-page CTA break carries no numeral. Put it in the content column so
   it lines up with every other section's body rather than hanging further
   left than the copy it sits between. */
.landing-page .ed-section > .ed-card:only-child { grid-column: 2; }

/* ==========================================================================
   Headings missed by the switch to the sans
   --------------------------------------------------------------------------
   These carry class-level font-family rules that outrank the element-level
   selector, so they were still rendering in the display serif.
   ========================================================================== */
.home-page .faq-question,
.home-page .sms-section h3,
.home-page .guides-teaser-title,
.landing-page .workflow-step h3,
.landing-page .faq-item h3,
.landing-page .cta-card h3,
.guide-page .guide-card h2 { font-family: var(--site-sans); }

/* Phones use a smaller numeral, so the column narrows with it. */
@media (max-width: 680px) {
  .landing-page .ed-section { grid-template-columns: 3.25rem minmax(0, 1fr); }
}