:root {
  /* "Classic Trust" palette — navy + gold on warm cream, serif display
     type. Ported from the Claude Design canvas ("Parents With Love —
     Homepage Directions" → Main.dc.html) — the OTHER landing-page design
     track in this project, replacing the "Classical" bronze/parchment
     system this file previously held. Still self-contained rather than
     shared with public/styles.css, so this page has zero dependency on
     the app's Design Mode override system — editing this file can't
     accidentally touch (or be touched by) live in-app admin theme edits. */
  --bg: #f7f5f0;
  --surface: #ffffff;
  --surface-sunken: #e9e3d3;
  --surface-alt: #efe9d8;
  --text: #232323;
  --muted: #5a5a5a;
  --muted-light: #8a8a8a;
  --border: #dcd6c8;
  --navy: #1f3552;
  --accent: #c08a2e;
  --accent-tint: #f6ead3;
  --accent-contrast: #ffffff;
  --green: #3f7a4c;
  --error: #a3372b;
  --shadow: 0 1px 2px rgba(31, 53, 82, 0.08);
  --shadow-lg: 0 12px 32px rgba(31, 53, 82, 0.14);
  --font-body: "PT Sans", -apple-system, sans-serif;
  --font-display: "Libre Baskerville", Georgia, 'Times New Roman', serif;
  --max-width: 1080px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

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

a { color: inherit; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- top nav ---------- */

.landing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 0;
  gap: 1rem;
}

.brand-lockup { display: flex; align-items: center; gap: 0.65rem; }

.brand-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.brand-wordmark .brand-with { color: var(--muted); font-weight: 400; margin: 0 0.05em; font-family: var(--font-body); }
.brand-wordmark .brand-love { color: var(--accent); font-style: italic; }

.beta-pill {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 20px;
  padding: 0.15rem 0.6rem;
}

.nav-right { display: flex; align-items: center; gap: 1.1rem; }

.nav-login-link {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy);
  text-decoration: none;
  padding: 0.5rem 0.6rem;
  border-radius: 4px;
  transition: color 0.15s ease;
}
.nav-login-link:hover { color: var(--accent); }

.nav-cta {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--accent-contrast);
  background: var(--accent);
  text-decoration: none;
  padding: 0.6rem 1.1rem;
  border-radius: 3px;
  white-space: nowrap;
  transition: background 0.12s ease;
}
.nav-cta:hover { background: color-mix(in srgb, var(--accent) 85%, black); }

/* ---------- hero ---------- */
/* The hero photo/video is the background of `.hero-media`; the text header
   overlays it directly (rather than sitting below it) so the headline and
   CTA read as part of the scene. `.hero-media` takes its height from `.hero`
   itself (the only normal-flow child — the video and scrim are both
   absolutely positioned), so the video simply crops to fill whatever height
   the text content needs at any screen width. That means there's no fixed
   aspect-ratio to overflow: short text -> shorter banner, wrapped text on a
   narrow phone -> a taller one, and the video always fills it via
   object-fit: cover. `--hero-min-h` is just a floor so the video still reads
   as a real banner even when the text is short. */

.hero-media {
  position: relative;
  width: 100%;
  overflow: hidden;
  --hero-min-h: 460px;
  min-height: var(--hero-min-h);
}
@media (max-width: 700px) {
  .hero-media { --hero-min-h: 420px; }
}

.hero-photo-banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    rgba(14, 24, 39, 0.86) 0%,
    rgba(14, 24, 39, 0.72) 32%,
    rgba(14, 24, 39, 0.32) 58%,
    rgba(14, 24, 39, 0) 82%
  );
}

.hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  justify-content: center;
  gap: 1rem;
  min-height: var(--hero-min-h);
  box-sizing: border-box;
  padding: 2.75rem 2.5rem;
  max-width: 580px;
  margin: 0;
}
@media (max-width: 700px) {
  .hero { padding: 2.25rem 1.25rem; max-width: 100%; }
}

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f4ead9;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  padding: 0.32rem 0.75rem;
}
.eyebrow-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.25;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
  margin: 0;
}
.hero h1 .accent-text { color: var(--accent); }

.hero-sub {
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
  max-width: 52ch;
  margin: 0;
}

/* ---------- signup form (reused for hero + bottom CTA) ---------- */

.signup-form {
  display: flex;
  gap: 0.6rem;
  max-width: 440px;
}
@media (max-width: 480px) {
  .signup-form { flex-direction: column; }
}

.signup-form input[type="email"] {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.95rem;
  padding: 0.8rem 1rem;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.signup-form input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.signup-btn {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent-contrast);
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 3px;
  padding: 0.8rem 1.35rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease;
}
.signup-btn:hover { background: color-mix(in srgb, var(--navy) 85%, black); }
.signup-btn:active { background: color-mix(in srgb, var(--navy) 70%, black); }
.signup-btn:disabled { opacity: 0.5; cursor: default; }

.signup-note {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0.15rem 0 0;
}
.cta-section .signup-note { color: var(--muted-light); }

.signup-feedback {
  font-size: 0.88rem;
  font-weight: 600;
  margin: 0;
  min-height: 1.2em;
}
.signup-feedback.is-success { color: var(--green); }
.signup-feedback.is-error { color: var(--error); }
/* Brighter variants for the hero, which sits on the dark video scrim rather
   than the light page background the base colors were tuned for. */
.hero .signup-feedback.is-success { color: #7fd996; }
.hero .signup-feedback.is-error { color: #ff9a8a; }

/* ---------- generic section scaffolding ---------- */

section.landing-section {
  padding: 3.25rem 0;
  border-top: 1px solid var(--border);
}
section.landing-section.is-tinted { background: var(--surface-alt); }

.section-head { max-width: 640px; margin: 0 auto 2rem; text-align: center; }
.section-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.5rem;
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.8vw, 1.9rem);
  color: var(--navy);
  margin: 0 0 0.6rem;
}
.section-head p {
  color: var(--muted);
  line-height: 1.55;
  margin: 0 auto;
}
.section-rule {
  width: 48px; height: 2px;
  background: var(--accent);
  margin: 0.9rem auto 0;
}

/* ---------- feature / privacy card grids ---------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .feature-grid { grid-template-columns: 1fr; } }

.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1.3rem 1.1rem;
}
.feature-card svg { color: var(--accent); margin-bottom: 0.85rem; }
.feature-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
  margin: 0 0 0.4rem;
}
.feature-card p {
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.feature-card--wide {
  grid-column: span 2;
}
@media (max-width: 480px) {
  .feature-card--wide { grid-column: span 1; }
}
.feature-card--wide p { margin-bottom: 0.9rem; }

.other-issue-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-start;
}
.other-issue-form textarea {
  flex: 1;
  min-width: 200px;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.65rem 0.85rem;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  resize: vertical;
}
.other-issue-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.other-issue-btn {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent-contrast);
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 3px;
  padding: 0.65rem 1.2rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease;
}
.other-issue-btn:hover { background: color-mix(in srgb, var(--navy) 85%, black); }
.other-issue-btn:active { background: color-mix(in srgb, var(--navy) 70%, black); }
.other-issue-btn:disabled { opacity: 0.5; cursor: default; }

.other-issue-feedback {
  font-size: 0.82rem;
  font-weight: 600;
  margin: 0.5rem 0 0;
  min-height: 1.2em;
}
.other-issue-feedback.is-success { color: var(--green); }
.other-issue-feedback.is-error { color: var(--error); }

.other-issue-result {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.9rem;
}
.other-issue-result .chat-bubble { max-width: 100%; }
.other-issue-sources {
  font-size: 0.76rem;
  color: var(--muted-light);
  margin: -0.2rem 0 0;
}

/* ---------- trust bar (research / self-checks / customization) ---------- */

.trust-bar-section { padding: 2.5rem 0; border-top: none; }
.trust-bar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}
@media (max-width: 760px) {
  .trust-bar-grid { grid-template-columns: 1fr; gap: 1.6rem; }
}
.trust-bar-item { text-align: center; padding: 0 0.5rem; }
.trust-bar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--navy);
  margin-bottom: 0.8rem;
}
.trust-bar-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--navy);
  margin-bottom: 0.35rem;
}
.trust-bar-body {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
  max-width: 30ch;
  margin-inline: auto;
}

/* ---------- chat demo ("see it in action") ---------- */

.chat-demo-section {
  background: var(--surface-sunken);
  padding: 3.5rem 0;
}
.chat-demo-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 820px) {
  .chat-demo-grid { grid-template-columns: 1fr; }
}
.chat-demo-copy .section-eyebrow { text-align: left; }
.chat-demo-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  color: var(--navy);
  font-weight: 700;
  margin: 0.4rem 0 0.9rem;
}
.chat-demo-copy p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 42ch;
  margin: 0 0 1.2rem;
}
.chat-demo-copy .chat-demo-links { display: flex; align-items: center; gap: 1.3rem; }
.chat-demo-copy .chat-demo-link { font-weight: 700; color: var(--navy); border-bottom: 1px solid var(--navy); padding-bottom: 2px; }

.chat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.chat-card-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--border);
}
.chat-card-dot {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-sunken);
  display: flex; align-items: center; justify-content: center;
}
.chat-card-dot span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.chat-card-title { font-size: 0.85rem; font-weight: 700; color: var(--navy); }
.chat-card-body { padding: 1.1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.chat-bubble {
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  font-size: 0.85rem;
  line-height: 1.5;
  max-width: 88%;
}
.chat-bubble.from-parent {
  background: var(--navy);
  color: #fff;
  border-bottom-right-radius: 3px;
  align-self: flex-end;
}
.chat-bubble.from-app {
  background: var(--surface-alt);
  color: var(--text);
  border-bottom-left-radius: 3px;
  align-self: flex-start;
}

/* ---------- app demo (phone fan) ---------- */
/* Real screenshots of the actual app (public/images/app-demo-*.png), not
   hand-drawn illustrations — see the chat-demo section above for the
   smaller teaser version of this idea. */

.app-demo-fan {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 0 0.5rem;
}

.app-demo-phone {
  flex-shrink: 0;
  background: var(--navy);
  border-radius: 30px;
  padding: 12px;
  box-shadow: 0 18px 34px -14px rgba(31, 53, 82, 0.38);
}
.app-demo-phone::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  margin: 0 auto 8px;
}
.app-demo-phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.app-demo-phone--main {
  width: 278px;
  z-index: 3;
  position: relative;
  padding: 14px;
  border-radius: 34px;
  box-shadow: 0 28px 48px -16px rgba(31, 53, 82, 0.45);
}
.app-demo-phone--main img { border-radius: 20px; }

.app-demo-phone--side { width: 238px; z-index: 1; }
.app-demo-phone--left { margin-right: -46px; transform: rotate(-7deg) translateY(34px); }
.app-demo-phone--right { margin-left: -46px; transform: rotate(7deg) translateY(34px); }

@media (max-width: 700px) {
  .app-demo-phone--side { display: none; }
  .app-demo-phone--main { width: 220px; }
}

.app-demo-captions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  max-width: 900px;
  margin: 3.25rem auto 0;
}
.app-demo-caption { text-align: center; padding: 0 0.5rem; }
.app-demo-caption svg { color: var(--accent); margin-bottom: 0.7rem; }
.app-demo-caption-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
  font-size: 1rem;
  margin-bottom: 0.4rem;
}
.app-demo-caption-body { color: var(--muted); font-size: 0.88rem; line-height: 1.5; }

@media (max-width: 700px) {
  .app-demo-captions { grid-template-columns: 1fr; gap: 1.4rem; }
}

.app-demo-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.75rem;
}
.app-demo-btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  border-radius: 6px;
  padding: 1rem 2.25rem;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  border: 2px solid var(--navy);
  transition: background 0.12s ease, color 0.12s ease;
}
.app-demo-btn--primary { background: var(--navy); color: #fff; }
.app-demo-btn--primary:hover { background: color-mix(in srgb, var(--navy) 85%, black); }
.app-demo-btn--secondary { background: transparent; color: var(--navy); }
.app-demo-btn--secondary:hover { background: var(--navy); color: #fff; }

.app-demo-note {
  text-align: center;
  color: var(--muted-light);
  font-size: 0.8rem;
  margin: 0.75rem 0 0;
}

/* ---------- how it works: six steps ---------- */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps-grid { grid-template-columns: 1fr; } }

.step-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1.15rem 1.2rem;
}
.step-card .step-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.5rem;
}
.step-card p { font-size: 0.88rem; line-height: 1.55; color: var(--muted); margin: 0; }

/* ---------- comparison: why not just search it ---------- */

.compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 700px) { .compare-grid { grid-template-columns: 1fr; } }

.compare-col {
  border-radius: 4px;
  padding: 1.75rem;
}
.compare-col--negative { background: var(--surface); border: 1px solid var(--border); }
.compare-col--positive { background: var(--navy); }

.compare-col-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 1.1rem;
}
.compare-col--negative .compare-col-label { color: var(--muted-light); }
.compare-col--positive .compare-col-label { color: var(--accent); }

.compare-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.compare-list li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9rem; line-height: 1.5; }
.compare-list .mark { font-weight: 700; flex: none; }
.compare-col--negative .mark { color: var(--muted-light); }
.compare-col--negative li { color: var(--muted); }
.compare-col--positive .mark { color: var(--accent); }
.compare-col--positive li { color: #fff; }

/* ---------- sources credibility grid ---------- */
/* Real organization logos (see the `logo` field in src/research-sources.js,
   captured from each org's own live site), replacing the original invented
   monogram-badge treatment per Avi's request. Each logo sits in a fixed-size
   white card via object-fit so very differently-shaped real logos (a square
   badge, a wide wordmark) still line up in one tidy grid. Since showing a
   real org's mark next to pwl7's own brand can otherwise read as a formal
   endorsement/partnership that doesn't exist, the grid is paired with a
   small disclaimer line (.sources-disclaimer) directly below it. */

.sources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.25rem 0.5rem;
  max-width: 860px;
  margin: 0 auto;
}
.source-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  padding: 1.25rem 0.75rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.source-card:hover,
.source-card:focus-visible {
  background: var(--surface);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  outline: none;
}
.source-logo {
  display: block;
  width: 100%;
  max-width: 148px;
  height: 46px;
  object-fit: contain;
  object-position: center;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid var(--accent-tint, rgba(192, 138, 46, 0.25));
  box-sizing: content-box;
}
.source-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--accent);
  box-shadow: inset 0 0 0 3px var(--accent-tint);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  color: var(--navy);
}
.source-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.3;
  color: var(--navy);
}
.source-title {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--muted-light);
}
.sources-disclaimer {
  max-width: 640px;
  margin: 1.5rem auto 0;
  text-align: center;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--muted-light);
}

/* ---------- bottom CTA ---------- */

.cta-section {
  text-align: center;
  padding: 3.5rem 0 3rem;
}
.cta-section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  color: var(--navy);
  margin: 0 0 0.6rem;
}
.cta-section p { color: var(--muted); margin: 0 0 1.5rem; }
.cta-section .signup-form { margin: 0 auto; }
.cta-section .signup-note { text-align: center; }
.cta-section .signup-feedback { text-align: center; }

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

.landing-footer {
  border-top: 1px solid var(--border);
  padding: 1.75rem 0 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.82rem;
  color: var(--muted-light);
}
.landing-footer a { text-decoration: none; color: var(--navy); font-weight: 700; }
.landing-footer a:hover { color: var(--accent); }
.footer-links { display: flex; gap: 1.1rem; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .eyebrow-pill .dot { animation: none !important; }
}

/* ---------- design mode (live visual editor, public/landing-design.js) ----------
   Only ever activated for a logged-in admin viewing this page — see
   landing-design.js for the loggedIn check. Regular visitors never see any
   of this; they only get the *result* of saved theme/content/order/
   visibility overrides, applied as plain inline CSS custom-properties/
   textContent/[hidden], no extra markup or classes. Mirrors the equivalent
   block in public/styles.css for the app's own Design Mode. */

.design-mode-toggle {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--navy);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.83rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px -4px rgba(31, 53, 82, 0.4);
}
.design-mode-toggle.is-active { background: var(--accent); }

body.design-mode-active {
  outline: 3px dashed var(--accent);
  outline-offset: -3px;
}

body.design-mode-active [data-editable] {
  cursor: text;
  border-radius: 3px;
  outline: 1px dashed transparent;
  outline-offset: 2px;
}
body.design-mode-active [data-editable]:hover,
body.design-mode-active [data-editable]:focus {
  outline-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

body.design-mode-active [data-reorder-group] > [data-reorder-id] {
  cursor: grab;
  outline: 1px dashed transparent;
  outline-offset: 3px;
}
body.design-mode-active [data-reorder-group] > [data-reorder-id]:hover {
  outline-color: var(--muted);
}
body.design-mode-active [data-reorder-group] > [data-reorder-id].is-dragging {
  opacity: 0.5;
  cursor: grabbing;
}
body.design-mode-active [data-reorder-group] > [data-reorder-id].is-drop-target {
  outline: 2px dashed var(--accent);
  outline-offset: 3px;
}

.design-mode-panel {
  position: fixed;
  right: 1.1rem;
  bottom: 4.2rem;
  z-index: 500;
  width: min(320px, calc(100vw - 2.2rem));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 32px -8px rgba(31, 53, 82, 0.35);
  padding: 1rem;
  font-family: var(--font-body);
}
.design-mode-panel[hidden] { display: none; }

.design-mode-panel h3 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--navy);
  margin: 0 0 0.6rem;
}
.design-mode-panel .design-hint {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 0.9rem;
  line-height: 1.4;
}

.design-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
}
.design-field-row label {
  font-size: 0.8rem;
  color: var(--text);
}
.design-field-row input[type="color"] {
  width: 2.1rem;
  height: 1.6rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: none;
  cursor: pointer;
}
.design-field-row select {
  font-family: inherit;
  font-size: 0.78rem;
  padding: 0.3rem 0.4rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  max-width: 11.5rem;
}
.design-field-row input[type="range"] {
  width: 6.5rem;
  accent-color: var(--accent);
}
.design-field-row input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--accent);
  cursor: pointer;
}
.design-field-row input[type="text"] {
  width: 9.5rem;
  font-family: inherit;
  font-size: 0.78rem;
  padding: 0.3rem 0.4rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.design-field-row.is-stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
}
.design-field-row.is-stacked input[type="text"] { width: 100%; }

.design-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0.9rem 0 0.5rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
}
.design-section-label:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }

.design-panel-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}
.design-panel-actions button {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.7rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.design-panel-actions button.design-reset-btn {
  color: var(--error);
  border-color: var(--error);
}

.design-mode-status {
  font-size: 0.72rem;
  color: var(--muted);
  min-height: 1em;
  margin-top: 0.5rem;
}