/* ═══════════════════════════════════════════════════════════════
   Reminder123 website: the app's design language on the web.
   canvas #0B0B0C · element #161719 · green #0DB35C · Poppins.
   ═══════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Poppins'; src: url('assets/fonts/Poppins_400Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('assets/fonts/Poppins_500Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('assets/fonts/Poppins_600SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('assets/fonts/Poppins_700Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --green: #0DB35C;
  --green-dark: #06A052;
  --green-soft: rgba(13, 179, 92, 0.16);
  --on-green: #04130C;
  --bg: #07080A;
  --bg-el: #101216;
  --bg-sel: #1E2024;
  --card-a: #15181D;
  --card-b: #0B0D10;
  --text: #FFFFFF;
  --text-2: #9CA1A7;
  --hairline: rgba(255, 255, 255, 0.06);
  --line: #2A2D31;
  --track: #191B1F;
  --neon: #35F576;
  --glow-strong: rgba(53, 245, 118, 0.55);
  --glow-soft: rgba(13, 179, 92, 0.22);
  --danger: #E5484D;
  --amber: #F0A93C;
  --radius: 20px;
  --pill: 999px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* faint mission-control dot texture behind the hero */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(13, 179, 92, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
  z-index: 0;
}

main, header, footer { position: relative; z-index: 1; }

h1, h2, h3 { font-weight: 600; line-height: 1.2; }
h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); text-align: center; }

/* short green underline under section headings, per the design language */
section > h2::after,
.privacy-inner > h2::after,
.launch-inner > h2::after {
  content: '';
  display: block;
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--neon) 0 12px, transparent 12px 17px,
    var(--neon) 17px 29px, transparent 29px 34px,
    var(--neon) 34px 44px);
  margin: 14px auto 0;
}

section { padding: clamp(56px, 9vw, 110px) clamp(20px, 6vw, 72px); max-width: 1180px; margin: 0 auto; }

a { color: var(--green); text-decoration: none; }

/* ── buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-block;
  border-radius: var(--pill);
  padding: 13px 28px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  border: none;
}
.btn-primary {
  background: linear-gradient(180deg, var(--neon), var(--green-dark));
  color: var(--on-green);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.25); }
.btn-ghost {
  background: transparent;
  color: var(--green);
  border: 1.5px solid var(--green);
}
.btn-ghost:hover { background: var(--green-soft); }

/* ── nav ─────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px clamp(20px, 5vw, 56px);
  background: rgba(11, 11, 12, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
  z-index: 10;
}
.nav-logo { display: flex; align-items: center; gap: 10px; }
/* the real app icon, its corners rounded the way a phone shows it. Each copy is 4 times the
   size it is shown at (icon-128.png at 32px, icon-152.png at 38px), so it stays sharp on any
   screen and on paper: a printer uses the picture the screen loaded, and a 1x copy prints
   blocky next to the text. */
.mark { display: block; flex: none; width: 32px; height: 32px; border-radius: 22.5%; }
.footer-lockup { display: inline-flex; align-items: center; gap: 10px; }
.footer-lockup .mark { width: 38px; height: 38px; }
.footer-lockup .wordmark { font-size: 1.3rem; }
.wordmark { font-weight: 600; font-size: 1.15rem; color: var(--text); letter-spacing: -0.01em; }
.wordmark em { font-style: normal; color: var(--neon); }
.nav-links { display: flex; gap: 22px; margin-left: auto; }
.nav-links a { color: var(--text-2); font-size: 0.92rem; font-weight: 500; }
.nav-links a:hover { color: var(--text); }
.nav-cta { padding: 10px 20px; font-size: 0.88rem; }

/* ── hero ────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding-top: clamp(48px, 7vw, 96px);
}
.badge {
  display: inline-block;
  background: rgba(13, 179, 92, 0.08);
  border: 1px solid rgba(53, 245, 118, 0.5);
  color: var(--neon);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--pill);
  padding: 6px 14px;
  margin-bottom: 20px;
  text-wrap: balance; /* on a phone the store line wraps into two even halves */
}
.hero h1 { font-size: clamp(2.1rem, 5.4vw, 3.4rem); font-weight: 700; letter-spacing: -0.02em; }
.neon-word { color: var(--neon); }
.lede { color: var(--text-2); font-size: clamp(1rem, 1.6vw, 1.12rem); margin: 20px 0 28px; max-width: 34em; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.trust-chips { display: flex; gap: 10px; list-style: none; margin-top: 26px; flex-wrap: wrap; }
.trust-chips li {
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 5px 14px;
  font-size: 0.8rem;
  color: var(--text-2);
}
.trust-chips li::before { content: '✓ '; color: var(--green); font-weight: 600; }

/* ── the dashboard demo ──────────────────────────────────── */
.hero-dash {
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, var(--card-a), var(--card-b));
  border-radius: 26px;
  padding: 22px;
  /* layered machined bezel: seam, deep channel, outer rim, drop depth */
  box-shadow:
    0 0 0 1px #2E3339,
    0 0 0 7px #0C0E11,
    0 0 0 8px #22262C,
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 26px 60px rgba(0, 0, 0, 0.65);
}
/* corner plates, like the icon's frame hardware */
.hero-dash .corner {
  position: absolute;
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, #30353C, #171A1E 70%);
  border: 1px solid #3A4048;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 5px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.hero-dash .c-tl { top: -14px; left: -14px; clip-path: polygon(0 0, 100% 0, 0 100%); border-radius: 10px 0 0 0; }
.hero-dash .c-tr { top: -14px; right: -14px; clip-path: polygon(0 0, 100% 0, 100% 100%); border-radius: 0 10px 0 0; }
.hero-dash .c-bl { bottom: -14px; left: -14px; clip-path: polygon(0 0, 0 100%, 100% 100%); border-radius: 0 0 0 10px; }
.hero-dash .c-br { bottom: -14px; right: -14px; clip-path: polygon(100% 0, 100% 100%, 0 100%); border-radius: 0 0 10px 0; }
/* the metallic check seal from the icon, riding the panel edge */
.dash-seal {
  position: absolute;
  top: -16px;
  right: 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #63E69B, #0DB35C 55%, #067A3E);
  box-shadow: 0 0 0 3px #262B31, 0 0 0 4px #40464E, 0 4px 8px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dash-seal svg { width: 16px; height: 16px; stroke: #06130C; stroke-width: 3.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dash-title { font-weight: 600; font-size: 1rem; }
.country-toggle { display: flex; gap: 6px; background: var(--bg); border-radius: var(--pill); padding: 4px; }
.country-toggle button {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2);
  background: transparent;
  border: none;
  border-radius: var(--pill);
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.country-toggle button.is-on {
  background: linear-gradient(180deg, var(--neon), var(--green-dark));
  color: var(--on-green);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 5px rgba(0, 0, 0, 0.5);
}

.dash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.tile {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.01) 0 2px, transparent 2px 5px),
    var(--bg-el);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 14px 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}
.tile-icon { position: absolute; top: 10px; left: 12px; width: 15px; height: 15px; }
.tile-icon svg { width: 100%; height: 100%; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ring-wrap { position: relative; width: 92px; height: 92px; margin: 6px 0 8px; }
.ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--track); stroke-width: 7; }
.ring-arc {
  fill: none;
  stroke-width: 6.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 1, 0.36, 1), stroke 0.4s ease;
}
/* crisp LED segment strip (the icon's dashed light ring) */
.ring-ticks { fill: none; stroke-width: 3; stroke-dasharray: 7 6.2; stroke-linecap: round; opacity: 0.85; }
/* dark machined groove the arc sits in */
.ring-groove { fill: none; stroke: #06070A; stroke-width: 10; }
/* gear-tooth ring behind the number, engraved */
.ring-gear { fill: none; stroke: #1D2126; stroke-width: 5; stroke-dasharray: 4.5 4; }
/* comet head riding the arc tip */
.ring-dotg { transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: 48px 48px; }
/* sorted tiles earn the icon's check seal */
.tile-check {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #63E69B, #0DB35C 55%, #067A3E);
  box-shadow: 0 0 0 2px #23272D, 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tile-check svg { width: 10px; height: 10px; stroke: #06130C; stroke-width: 3.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
}
.ring-num { font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; }
.ring-unit { font-size: 0.62rem; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; }
.tile-name { font-weight: 600; font-size: 0.78rem; margin-top: 2px; }
.tile-type { font-size: 0.68rem; color: var(--text-2); }
/* Now / Soon / Sorted: printed only (see the print section), so the colour is never the only cue on paper */
.tile-flag { display: none; }

.u-red { color: var(--danger); }
.u-amber { color: var(--amber); }
.u-green { color: var(--green); }

.dash-caption { color: var(--text-2); font-size: 0.8rem; margin-top: 16px; text-align: center; }

/* ── steps (easy as 123) ─────────────────────────────────── */
.steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.step {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, var(--card-a), var(--card-b));
  border: 1px solid var(--hairline);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  padding: 28px 24px;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #23272D, #101317 65%);
  border: 1.5px solid rgba(53, 245, 118, 0.6);
  box-shadow: 0 0 0 4px #0C0E11, 0 0 0 5px #262B31, 0 3px 7px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--neon);
  font-weight: 700;
  font-size: 1.3rem;
  margin-bottom: 16px;
}
.step h3 { font-size: 1.08rem; margin-bottom: 8px; }
.step p { color: var(--text-2); font-size: 0.92rem; }

/* ── screens (straight from the app) ─────────────────────── */
.screens-sub { color: var(--text-2); text-align: center; margin: 18px auto 0; max-width: 34em; font-size: 0.95rem; }
.screens-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 250px));
  gap: clamp(24px, 4vw, 44px);
  justify-content: center;
  margin-top: 44px;
}
.screens-row:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; border-radius: 12px; }
.screen img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  background: var(--bg-el);
  /* the same machined bezel as the dashboard panel */
  box-shadow:
    0 0 0 1px #2E3339,
    0 0 0 7px #0C0E11,
    0 0 0 8px #22262C,
    0 22px 50px rgba(0, 0, 0, 0.6);
}
.screen figcaption { color: var(--text-2); font-size: 0.85rem; text-align: center; margin-top: 22px; }

/* ── features ────────────────────────────────────────────── */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.card {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, var(--card-a), var(--card-b));
  border: 1px solid var(--hairline);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  padding: 26px 24px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-3px); border-color: rgba(53, 245, 118, 0.55); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5); }
.f-icon { width: 26px; height: 26px; fill: none; stroke: var(--green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px; }
.card h3 { font-size: 1.02rem; margin-bottom: 8px; }
.card p { color: var(--text-2); font-size: 0.9rem; }

/* ── privacy ─────────────────────────────────────────────── */
.privacy-inner {
  background: linear-gradient(180deg, #191B1F, #0E0F11);
  border: 1px solid rgba(53, 245, 118, 0.28);
  border-radius: 26px;
  padding: clamp(36px, 6vw, 64px);
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(53, 245, 118, 0.12), 0 20px 50px rgba(0, 0, 0, 0.5);
}
.privacy-sub { color: var(--neon); font-weight: 600; margin-top: 18px; }
.privacy-list {
  list-style: none;
  margin: 28px auto 0;
  max-width: 34em;
  text-align: left;
  display: grid;
  gap: 12px;
}
.privacy-list li { padding-left: 30px; position: relative; color: var(--text); font-size: 0.98rem; }
.privacy-list li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.privacy-site-note { color: var(--text-2); font-size: 0.85rem; margin-top: 28px; }

/* ── pricing ─────────────────────────────────────────────── */
/* Three cards: Free, Plus and Family (Family is its own plan with its own price). */
.price-row { display: grid; grid-template-columns: repeat(3, minmax(0, 340px)); gap: 22px; justify-content: center; margin-top: 44px; }
.price-card {
  background: linear-gradient(180deg, var(--card-a), var(--card-b));
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 30px 28px;
}
.price-plus { border-color: rgba(53, 245, 118, 0.5); box-shadow: inset 0 1px 0 rgba(53, 245, 118, 0.18), 0 14px 30px rgba(0, 0, 0, 0.5); }
.price-card h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-2); }
.price-plus h3 { color: var(--green); }
.price-tag { font-size: 2.1rem; font-weight: 700; margin: 8px 0 2px; }
.price-tag span { font-size: 0.95rem; font-weight: 500; color: var(--text-2); }
.price-note { color: var(--text-2); font-size: 0.85rem; margin-bottom: 18px; }
.price-card ul { list-style: none; display: grid; gap: 10px; }
.price-card li { padding-left: 26px; position: relative; font-size: 0.92rem; }
.price-card li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.price-footnote { text-align: center; color: var(--text-2); font-size: 0.8rem; margin-top: 26px; }

/* ── faq ─────────────────────────────────────────────────── */
.faq { max-width: 760px; }
.faq details {
  background: var(--bg-el);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  margin-top: 14px;
  overflow: hidden;
}
.faq details:first-of-type { margin-top: 44px; }
.faq summary {
  cursor: pointer;
  padding: 18px 22px;
  font-weight: 600;
  font-size: 0.98rem;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 22px; color: var(--green); font-weight: 600; transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 22px 20px; color: var(--text-2); font-size: 0.92rem; }

/* ── coming soon (no form: nothing is collected) ─────────── */
.launch-inner {
  background: linear-gradient(180deg, #14251C, #0D1410);
  border: 1px solid rgba(13, 179, 92, 0.3);
  border-radius: 26px;
  padding: clamp(36px, 6vw, 60px);
  text-align: center;
}
.launch-inner > p { color: var(--text-2); margin: 14px auto 0; max-width: 36em; }
.launch-inner > .btn { margin-top: 26px; }

/* ── footer ──────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--hairline);
  padding: 48px clamp(20px, 6vw, 72px) 40px;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  gap: 24px;
  text-align: center;
}
.footer-brand p { color: var(--text-2); font-size: 0.88rem; margin-top: 6px; }
.footer-links { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.footer-links a { color: var(--text-2); font-size: 0.88rem; }
.footer-links a:hover { color: var(--text); }
.footer-note { color: var(--text-2); font-size: 0.8rem; line-height: 1.8; }
.footer-note a { color: var(--text-2); text-decoration: underline; }

/* ── reveal on scroll ────────────────────────────────────── */
/* Hidden only once app.js has run (it adds .js to <html>), so with JavaScript off,
   or if app.js fails to load, every block simply shows. */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s ease; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal.in { opacity: 1; transform: none; transition: none; }
  .ring-arc { transition: none; }
}

/* ── responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .steps-row, .feature-grid { grid-template-columns: 1fr 1fr; }
  .price-row { grid-template-columns: 1fr; }
  .nav-links { display: none; }
}
@media (max-width: 560px) {
  .steps-row, .feature-grid { grid-template-columns: 1fr; }
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-cta { padding: 8px 16px; font-size: 0.8rem; }
  /* phones: the three screens become a swipeable strip instead of three tall stacks */
  .screens-row {
    display: flex;
    justify-content: flex-start; /* centred overflow would push the first screen out of reach */
    gap: 26px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* bleed to the screen edges: the section's side padding is max(20px, 6vw) here */
    margin: 32px calc(-1 * max(20px, 6vw)) 0;
    padding: 14px max(20px, 6vw) 22px;
    scroll-padding-inline: max(20px, 6vw);
  }
  .screen { flex: 0 0 66%; scroll-snap-align: start; }
}
@media (max-width: 360px) {
  .ring-wrap { width: 82px; height: 82px; }
  .tile { padding: 12px 6px 10px; }
}

/* ── print ───────────────────────────────────────────────── */
/* A printer never scrolls, so nothing here waits for the reveal: every block prints, in
   place. Paper is white, so the dark theme becomes dark ink on white, with no glows, plates
   or shadows. The same result whether or not "Background graphics" is ticked. Every colour
   that carries meaning also carries a word or a shape, so a black and white printer loses
   nothing: the Now / Soon / Sorted words on the demo tiles, a box round the chosen country,
   a heavier frame on the Plus plan. app.js opens the Q & A answers just before printing. */
@page { margin: 12mm; }

@media print {
  :root {
    --green: #067A3E;
    --green-dark: #067A3E;
    --green-soft: transparent;
    --neon: #067A3E;
    --on-green: #000000;
    --bg: #FFFFFF;
    --bg-el: #FFFFFF;
    --bg-sel: #FFFFFF;
    --card-a: #FFFFFF;
    --card-b: #FFFFFF;
    --text: #000000;
    --text-2: #333333;
    --hairline: #9A9A9A;
    --line: #9A9A9A;
    --track: #E4E4E4;
    --danger: #B42318;
    --amber: #8A5300;
  }

  html { scroll-behavior: auto; }
  body { background: #FFFFFF; color: #000000; overflow: visible; }
  body::before { display: none; }

  /* every reveal block fully visible and where it belongs, whether it was scrolled to or not */
  .reveal,
  .js .reveal,
  .js .reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { transition: none !important; animation: none !important; }

  /* the menu bar prints once, at the top, instead of riding over the content */
  .nav {
    position: static;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid var(--hairline);
    padding: 0 0 6px;
  }

  /* less air on paper; the page margin does the side gutters */
  section { padding: 30px 0; max-width: none; }
  /* the hero stacks: as a grid it moves to page 2 whole and leaves page 1 with only the menu.
     The tight gaps above and below the hero text let the whole dashboard share page 1 on A4
     (with about 30px to spare); with more air it misses by a few pixels and page 1 is half
     empty. */
  .hero { display: block; padding-top: 12px; }
  .hero-dash { margin-top: 18px; }
  .footer { padding: 24px 0 0; max-width: none; }

  /* panels: white with a plain frame, nothing clipped away */
  .hero-dash,
  .step,
  .card,
  .price-card,
  .privacy-inner,
  .launch-inner,
  .faq details,
  .tile {
    background: #FFFFFF !important;
    box-shadow: none !important;
    clip-path: none !important;
    border: 1px solid var(--hairline);
  }
  .step, .card { border-radius: 14px; }
  .hero-dash { border: 1.5px solid #000000; }
  /* the corner plates and the seal hang outside the panel, where a page edge would slice them */
  .hero-dash .corner,
  .dash-seal { display: none; }
  .privacy-inner, .launch-inner { border: 1.5px solid var(--green); }
  .price-plus { border: 2.5px solid var(--green); }

  /* the check seals, as outlined discs */
  .tile-check {
    background: #FFFFFF;
    box-shadow: none;
    border: 1.5px solid #000000;
  }
  .step-num {
    background: #FFFFFF;
    box-shadow: none;
    border: 1.5px solid #000000;
  }

  /* the rings: light grooves under the coloured arcs instead of near-black ones */
  .ring-groove { stroke: #E4E4E4; }
  .ring-gear { stroke: #C8C8C8; }
  .ring-ticks { opacity: 0.6; }

  /* the urgency word under each tile */
  .tile-flag {
    display: block;
    margin-top: 6px;
    padding: 0 6px;
    border: 1px solid currentColor;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.6;
    text-transform: uppercase;
  }

  /* the chosen country keeps a box round it, so it still stands out without colour */
  .country-toggle { background: #FFFFFF; border: 1px solid var(--hairline); }
  .country-toggle button { color: #333333; }
  .country-toggle button.is-on {
    background: #FFFFFF;
    box-shadow: none;
    color: #000000;
    font-weight: 700;
    outline: 1.5px solid #000000;
  }

  /* buttons and chips as outlines */
  .btn,
  .btn-primary {
    background: #FFFFFF;
    color: #000000;
    box-shadow: none;
    border: 1.5px solid #000000;
  }
  .btn-ghost { color: var(--green); border-color: var(--green); }
  .badge { background: #FFFFFF; border-color: var(--green); color: var(--green); }

  /* the three app screens in one row, never a scrolling strip that paper would cut off */
  .screens-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 200px)); /* short enough that a screen and its caption share a landscape page */
    justify-content: center;
    gap: 28px;
    overflow: visible;
    margin: 32px 0 0;
    padding: 0;
  }
  .screen { flex: none; }
  .screen img { box-shadow: none; border: 1px solid var(--hairline); }

  /* the Q & A prints open, answers showing; the +/x toggle means nothing on paper */
  .faq summary::after { display: none; }
  .faq details:first-of-type { margin-top: 30px; }

  /* the green dashed underline under each heading is drawn as a background, which a browser
     drops when "Background graphics" is off (Chrome's default); this keeps it on paper */
  section > h2::after,
  .privacy-inner > h2::after,
  .launch-inner > h2::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* keep each block whole on one page, and headings (with their green underline) with what
     follows them, so no heading is left alone at the foot of a page */
  h2, h3, summary,
  .screens-sub,
  .privacy-sub { break-after: avoid; page-break-after: avoid; }
  h2, h3 { break-inside: avoid; page-break-inside: avoid; }
  .hero-dash,
  .step,
  .card,
  .screen,
  .price-card,
  .faq details,
  .privacy-inner,
  .launch-inner,
  .footer-brand,
  .footer-note { break-inside: avoid; page-break-inside: avoid; }
}

/* Newer browsers can show a closed <details> answer from CSS alone (app.js covers the rest).
   Kept as its own rule: a browser that does not know ::details-content drops only this one. */
@media print {
  details::details-content { content-visibility: visible; display: block; }
}