/* Hound-Up marketing landing page — layers on top of style.css's existing
   --bg/--surface/--ink/--muted/--hairline/--accent/--accent-ink tokens, so
   light/dark mode (and the data-theme override) keep working with zero
   extra logic here. Manrope is the app's own real typeface (see
   Packages/DesignSystem/Sources/DesignSystem/Typography/Font+Manrope.swift
   in the app repo) — the .otf files in fonts/ are copied straight from
   there, same font the app itself ships, not a substitute. Licensed under
   the SIL Open Font License (see fonts/OFL.txt). */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Manrope-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Manrope-Medium.otf") format("opentype");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Manrope-SemiBold.otf") format("opentype");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Manrope-Bold.otf") format("opentype");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/Manrope-ExtraBold.otf") format("opentype");
}

/* Hound-Up marketing landing page — layers on top of style.css's existing
   --bg/--surface/--ink/--muted/--hairline/--accent/--accent-ink tokens, so
   light/dark mode (and the data-theme override) keep working with zero
   extra logic here. Manrope is the app's own real typeface (see
   Packages/DesignSystem/Sources/DesignSystem/Typography/Font+Manrope.swift)
   — embedded above as data URIs since the Artifact/static-hosting context
   can't reach a font CDN reliably and this keeps the page self-contained. */

body {
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* No brand-token override here — this page inherits style.css's tokens
   verbatim (the microsite's "meadow" green, same fixed brand as help.html/
   the legal pages), so the whole site reads as one product. */

/* Scroll-triggered reveal — toggled by reveal.js via IntersectionObserver.
   --index (set inline per grid item) staggers a cascade instead of every
   card in a row arriving at once. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--index, 0) * 90ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.wrap--wide {
  max-width: 1080px;
  /* style.css's base .wrap carries a 56px/96px top/bottom padding sized for
     one single legal-page wrap — every section here is its own separate
     .wrap, so that padding was compounding between every section and was
     the actual source of the big dead gaps. Each section below owns its
     own vertical rhythm instead; this only keeps the horizontal gutter. */
  padding-top: 0;
  padding-bottom: 0;
}

header.top {
  border-bottom: none;
  margin-bottom: 0;
  padding-top: 28px;
}

header.top .brand {
  font-weight: 800;
  font-size: 19px;
}

main h1, main h2, main h3, main h4 {
  font-family: "Manrope", -apple-system, sans-serif;
}

/* ---------- Hero ---------- */

.hero {
  padding: 64px 0 20px;
}

.hero-inner {
  text-align: center;
  max-width: 720px;
}

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}

.hero h1 {
  font-size: 52px;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0 0 20px;
}

.hero-sub {
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto 34px;
  text-wrap: balance;
}

.hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.app-store-badge {
  display: inline-flex;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.app-store-badge:hover {
  transform: translateY(-1px);
  opacity: 0.88;
}

.app-store-badge img {
  display: block;
  height: 60px;
  width: auto;
}

.btn-ghost {
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  opacity: 0.72;
}

.btn-ghost:hover {
  opacity: 1;
}

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

/* ---------- Section headers ---------- */

.section-eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
  text-align: center;
}

.section-title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
  max-width: 620px;
  margin: 0 auto 44px;
  text-wrap: balance;
}

/* ---------- Checklists ---------- */
/* Ticked lists (pricing plans). */

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feature-list li {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding-left: 22px;
  position: relative;
}

.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 8px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* ---------- Responsive ---------- */

@media (max-width: 780px) {
  .hero h1 { font-size: 38px; }
  .hero-sub { font-size: 16px; }
  .section-title { font-size: 25px; }
}

/* ---------- See all features ---------- */

:root { --pro: #8A7025; --pro-bg: #F3ECDA; }
@media (prefers-color-scheme: dark) { :root { --pro: #C9B06B; --pro-bg: #2b2410; } }
:root[data-theme="dark"] { --pro: #C9B06B; --pro-bg: #2b2410; }
:root[data-theme="light"] { --pro: #8A7025; --pro-bg: #F3ECDA; }

.all-features {
  margin-top: 36px;
  border-top: 1px solid var(--hairline);
  padding-top: 36px;
}

.all-features summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--accent);
  padding: 10px;
}

.all-features summary::-webkit-details-marker { display: none; }

.all-features .chev { width: 17px; height: 17px; transition: transform 0.2s ease; }
.all-features[open] .chev { transform: rotate(180deg); }

.all-features-body {
  max-width: 760px;
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px 44px;
}

.feat-topic h3 {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}

.feat-topic ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feat-topic li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  padding-left: 18px;
  position: relative;
}

.feat-topic li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}

.feat-topic li strong {
  color: var(--ink);
  font-weight: 700;
}

.pro-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--pro);
  background: var(--pro-bg);
  border-radius: 5px;
  padding: 2px 6px;
  margin-left: 4px;
  vertical-align: 1px;
}

.pro-summary {
  grid-column: 1 / -1;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 22px 24px;
  margin-top: 6px;
}

.pro-summary p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

.pro-summary p + p { margin-top: 10px; }

.pro-summary strong { color: var(--ink); }

@media (max-width: 680px) {
  .all-features-body { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- Paw branding ---------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  display: block;
  box-shadow: 0 0 0 1px var(--hairline);
}

.brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
}

.hero { position: relative; }
.hero-inner { position: relative; z-index: 1; }

/* ---------- Lock Screen walk card ---------- */
/* The "On the walk" step's visual: a real Dynamic Island capture above an
   illustrated Lock Screen live walk. */

.la-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* A real screenshot, not an illustration (unlike .la-card below) — sized
   to roughly match a Dynamic Island's actual on-screen proportions above
   the illustrated Lock Screen card, so it reads as "here's the real
   thing" rather than another mockup. */
.la-island-shot {
  width: 78%;
  max-width: 230px;
  height: auto;
  display: block;
}

/* Fixed dark palette, deliberately not tied to --ink/--accent — this
   mimics a real iOS Lock Screen Live Activity, which keeps its own dark
   material regardless of the device's own light/dark setting. Tying it
   to --ink previously meant the card inverted to a near-white background
   in the site's own dark mode. */
.la-card {
  width: 100%;
  max-width: 300px;
  background: linear-gradient(160deg, #1d1f28, #14161c);
  color: #f2f2f1;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 26px;
  padding: 20px 20px 18px;
  /* The page's own dark-mode background is itself near-black, so a
     black-tinted shadow alone (fine against the light-mode page)
     disappears completely there — the border above plus this pale outer
     glow are what actually separate the card from the page in both
     themes, not the shadow. */
  box-shadow: 0 30px 60px -24px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.3), 0 12px 40px -8px rgba(136,133,183,0.12);
}

.la-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  opacity: 0.85;
  margin-bottom: 14px;
}

.la-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #6FCF7C;
  box-shadow: 0 0 0 4px rgba(111,207,124,0.25);
}

/* A stylized map tile (road hierarchy, a park, a river, city blocks —
   all invented shapes, not a real map provider's tiles) sitting behind
   the route, rather than the route floating on plain black. */
.la-map {
  position: relative;
  width: 100%;
  aspect-ratio: 240 / 128;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
  cursor: zoom-in;
  transition: opacity 0.15s ease;
}

.la-map:hover,
.la-map:focus-visible {
  opacity: 0.88;
}

.la-map-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.la-card-bottom {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.la-card-bottom b {
  display: block;
  font-size: 18px;
  font-weight: 800;
}

.la-card-bottom span {
  display: block;
  font-size: 10.5px;
  opacity: 0.65;
  font-weight: 600;
  margin-top: 1px;
}

.la-stop {
  margin-left: auto;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent);
  border: none;
  border-radius: 999px;
  padding: 9px 14px;
  cursor: default;
}

/* ---------- Header call to action ---------- */

header.top nav a.nav-cta {
  color: var(--accent-ink);
  background: var(--accent);
  padding: 8px 16px;
  border-radius: 999px;
}

header.top nav a.nav-cta:hover { color: var(--accent-ink); opacity: 0.9; }

/* Phones: only the call to action fits beside the brand. */
@media (max-width: 600px) {
  header.top nav a:not(.nav-cta) { display: none; }
}

/* ---------- Store badges ---------- */

.store-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.store-badge {
  display: inline-flex;
  border-radius: 10px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.store-badge:hover { transform: translateY(-1px); opacity: 0.88; }

.badge-apple { display: block; height: 54px; width: auto; }

/* Google's badge PNG carries its own transparent padding; the negative
   margin lines its visible edge up with the Apple badge. */
.badge-google { display: block; height: 80px; width: auto; margin: -13px; }

.hero-price {
  margin: 22px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}

/* ---------- A typical day ---------- */
/* One row per part of a walker's day: copy on one side, the real screen
   (tap to enlarge via the lightbox below) on the other, alternating.
   Every feature is introduced once, here; /features has the full list. */

.day {
  padding: 72px 0 40px;
  text-align: center;
}

.day-rows {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 72px;
  text-align: left;
}

.day-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

.day-row:nth-child(even) .day-row-copy { order: 2; }

.day-row-copy { max-width: 440px; justify-self: end; }
.day-row:nth-child(even) .day-row-copy { justify-self: start; }

.day-row-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.day-row-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13px;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.day-row h3 {
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.day-row-copy > p:last-child {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

.day-row-shot {
  justify-self: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  width: 100%;
  max-width: 250px;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--hairline), 0 26px 52px -28px rgba(0, 0, 0, 0.42);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.day-row-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 1392;
  object-fit: cover;
  object-position: top;
}

.day-row-shot:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px var(--hairline), 0 32px 58px -28px rgba(0, 0, 0, 0.48);
}

.day-row-shot:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.day-row .la-visual { justify-self: center; width: 100%; max-width: 340px; }

.day-more {
  margin: 56px 0 0;
  font-size: 16px;
  font-weight: 800;
}

.day-more a { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .day-row-shot { transition: none; }
  .day-row-shot:hover { transform: none; }
}

/* Phones and small tablets: copy above its screen, centred. */
@media (max-width: 760px) {
  .day-rows { gap: 56px; text-align: center; }
  .day-row { grid-template-columns: 1fr; gap: 24px; }
  .day-row:nth-child(even) .day-row-copy { order: 0; }
  .day-row-copy, .day-row:nth-child(even) .day-row-copy { justify-self: center; }
  .day-row-label { justify-content: center; }
  .day-row h3 { font-size: 22px; }
  .day-row-shot { max-width: 230px; }
}

/* ---------- Promise strip ---------- */

.promise {
  padding: 40px 0;
}

.promise-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding-top: 36px;
  padding-bottom: 36px;
}

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

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

@media (max-width: 760px) {
  .promise-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Pricing and get the app ---------- */

.get {
  padding: 64px 0 88px;
  text-align: center;
}

.get .section-title { max-width: 720px; margin: 0 auto; text-wrap: balance; }

.plans {
  margin: 40px auto 0;
  max-width: 760px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  text-align: left;
}

.plan {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 26px 28px 28px;
}

.plan--pro { border-color: var(--accent); }

.plan h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.plan-price {
  margin: 6px 0 18px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.plan-price span { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }

.plans-note {
  margin: 22px auto 30px;
  max-width: 600px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

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

/* ---------- Features page ---------- */

.features-page {
  padding: 48px 0 24px;
  text-align: center;
}

.features-page .section-title { font-size: 40px; margin-top: 4px; }

.features-intro {
  max-width: 620px;
  margin: 14px auto 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

.features-page .all-features-body { text-align: left; margin-top: 44px; }

.features-page .feat-topic h2 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}


/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: rgba(10, 10, 10, 0.82);
  opacity: 0;
  visibility: hidden;
  /* visibility in the transition list (not just opacity) so closing
     actually fades instead of vanishing the instant .is-open is
     removed — visibility flips at the end of the transition when going
     hidden, immediately when going visible, in every current browser. */
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox img {
  /* 420px comfortably fit the portrait phone screenshots this was
     built for — those are actually height-bound by max-height below
     well before hitting any width cap, so raising this only helps
     wider images (like the landscape map) without changing how the
     screenshots display. */
  max-width: min(900px, 92vw);
  max-height: 86vh;
  width: auto;
  border-radius: 28px;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6);
  transform: scale(0.96);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox.is-open img {
  transform: scale(1);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }

@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox img { transition: none; }
}