/* Shared landing-page theme. Mobile-first (ad traffic is mostly mobile), fast, one column.
   No external fonts or frameworks — keeps load time low so we don't lose the ad click. */

:root {
  --bg: #ffffff;
  --ink: #14171a;
  --muted: #5b646e;
  --line: #e6e9ec;
  --accent: #E0A838;        /* Magellan gold — CTA + badge fills (brand_assets/brand.md) */
  --accent-ink: #0E1F3D;    /* navy text on gold — high contrast */
  --accent-deep: #B07A1C;   /* deep gold for small marks on white (arrows, focus) */
  --navy: #0E1F3D;
  --ok: #1f9d55;
  --radius: 14px;
  --maxw: 560px;            /* single-product focus; narrow = mobile-native feel */
}

* { box-sizing: border-box; }

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

.lp { max-width: var(--maxw); margin: 0 auto; padding: 0 18px 56px; }

/* BRAND HEADER */
.lp-brand { display: flex; justify-content: center; padding: 16px 0 6px; }
.lp-brand img { width: auto; height: 52px; max-width: 78%; display: block; }

.lp-badge {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

/* HERO */
.hero { padding: 22px 0 8px; }
.hero-media > .hero-img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
  background: #f3f5f7;
}

/* GALLERY THUMBNAILS */
.thumbs { display: flex; gap: 10px; margin-top: 10px; }
.thumb {
  flex: 1 1 0;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #f3f5f7;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .04s ease;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb:hover { border-color: #c7ccd2; }
.thumb:active { transform: translateY(1px); }
.thumb.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.hero-copy { padding-top: 18px; }
.product-name { font-size: 26px; line-height: 1.15; margin: 0 0 6px; font-weight: 800; }
.headline { font-size: 19px; font-weight: 600; margin: 0 0 6px; }
.subhead { color: var(--muted); margin: 0 0 16px; }

.price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.price { font-size: 28px; font-weight: 800; }
.compare-at { color: var(--muted); text-decoration: line-through; font-size: 18px; }
.save-badge {
  font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  color: var(--accent-ink); background: var(--accent); padding: 5px 12px; border-radius: 999px;
  white-space: nowrap; box-shadow: 0 2px 8px rgba(224, 168, 56, .35);
}

/* "cheaper here than Amazon/TikTok" callout */
.platform-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  margin: 0 0 16px; padding: 10px 14px;
  background: #f4fbf6; border: 1px solid #cdebd8; border-radius: 12px; font-size: 14px;
}
.platform-note .pn-other { color: var(--muted); }
.platform-note .pn-here { color: var(--ok); font-weight: 800; }

/* CTA — shared by buy / waitlist / preorder forms */
.cta-wrap { margin: 8px 0 14px; }
.cta {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .01em;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius);
  padding: 16px 18px;
  cursor: pointer;
  transition: transform .04s ease, filter .15s ease;
}
.cta:active { transform: translateY(1px); }
.cta:hover { filter: brightness(1.04); }
.cta:disabled { opacity: .6; cursor: default; }

.cta-form { display: flex; flex-direction: column; gap: 10px; }
.cta-form input[type="email"],
.cta-form input[type="text"] {
  width: 100%;
  font-size: 16px;              /* >=16px stops iOS zoom-on-focus */
  padding: 14px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: none;
}
.cta-form input:focus { border-color: var(--accent); }

.cta-note { font-size: 13px; color: var(--muted); margin: 10px 2px 0; text-align: center; }
.cta-note strong { color: var(--ink); }

/* success state injected by capture.js */
.cta-success {
  text-align: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f4fbf6;
  color: var(--ok);
  font-weight: 700;
}
.cta-error { color: #c0392b; font-size: 13px; text-align: center; margin-top: 8px; }

/* TRUST ROW */
.trust-row {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px;
  padding: 14px 0 0; margin: 0; font-size: 13px; color: var(--muted);
}
.trust-row li { display: flex; align-items: center; gap: 6px; }
.trust-row li::before { content: "✓"; color: var(--ok); font-weight: 800; }

/* BENEFITS */
.benefits { padding: 26px 0 6px; border-top: 1px solid var(--line); margin-top: 26px; }
.benefits h2, .faq h2 { font-size: 20px; margin: 0 0 12px; }
.benefit-list { margin: 0; padding-left: 0; list-style: none; }
.benefit-list li { padding: 10px 0 10px 28px; position: relative; border-bottom: 1px solid var(--line); }
.benefit-list li::before {
  content: "→"; position: absolute; left: 0; top: 10px; color: var(--accent-deep); font-weight: 800;
}

/* PREVIEW — real captioned app screenshots ("see it in action") */
.preview { padding: 26px 0 6px; border-top: 1px solid var(--line); margin-top: 26px; }
.preview h2 { font-size: 20px; margin: 0 0 4px; }
.preview-lead { color: var(--muted); margin: 0 0 20px; }
.preview-item { margin: 0 0 24px; }
.preview-shot {
  width: 100%; display: block; border-radius: var(--radius);
  border: 1px solid var(--line); background: #fff;
  box-shadow: 0 8px 24px rgba(14, 31, 61, .12);
}
.preview-cap {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 12px 2px 0; font-size: 14.5px; line-height: 1.5; color: var(--ink);
}
.preview-cap .n {
  flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center;
}

/* SPECS */
.specs { padding: 26px 0 6px; border-top: 1px solid var(--line); margin-top: 26px; }
.specs h2 { font-size: 20px; margin: 0 0 12px; }
.spec-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.spec {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px;
}
.spec .k { color: var(--muted); }
.spec .v { font-weight: 700; text-align: right; }
@media (max-width: 520px) { .spec-list { grid-template-columns: 1fr; } }

/* STORY */
.story { padding: 22px 0; color: #2a2f35; }
.story p { margin: 0 0 14px; }

/* CTA repeat */
.cta-repeat { padding: 8px 0 4px; }

/* FAQ */
.faq { padding: 20px 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 12px 0; }
.faq summary { font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--muted); }
.faq details[open] summary::after { content: "–"; }
.faq p { color: var(--muted); margin: 10px 0 2px; }

/* FOOTER */
.lp-footer { padding-top: 28px; text-align: center; color: var(--muted); font-size: 13px; }
.lp-footer .fine { font-size: 12px; opacity: .8; }

/* "Already have the app?" — fixed bottom-right recovery link for returning buyers */
.recovery {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 50;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 15px; border-radius: 999px;
  background: var(--navy); color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 600; line-height: 1;
  box-shadow: 0 6px 20px rgba(14, 31, 61, .28), inset 0 0 0 1px rgba(224, 168, 56, .35);
  transition: transform .1s cubic-bezier(.2,.8,.2,1), box-shadow .15s ease;
}
.recovery .recovery-q { color: #cdd6e4; }
.recovery .recovery-cta { color: var(--accent); font-weight: 800; }  /* bright gold on navy = high contrast */
.recovery:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(14, 31, 61, .34), inset 0 0 0 1px rgba(224, 168, 56, .6); }
.recovery:active { transform: translateY(0); }
.recovery:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 460px) {
  .recovery { padding: 9px 13px; font-size: 12px; }
  .recovery .recovery-q { display: none; }  /* tight screens: just "Open it →" */
}

@media (min-width: 600px) {
  .lp { padding-top: 8px; }
  .product-name { font-size: 30px; }
}