/* 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;
}

/* ---------- Pain strip ---------- */

.pain {
  padding: 30px 0 56px;
}

.pain-text {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  font-size: 19px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: balance;
}

.pain-text strong {
  color: var(--ink);
  font-weight: 700;
}

/* ---------- 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;
}

/* ---------- Feature grid ---------- */

.features {
  padding: 24px 0 8px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

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

.feature-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  color: var(--accent);
  margin-bottom: 18px;
}

.feature-icon svg {
  width: 24px;
  height: 24px;
}

.feature-card h3 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.feature-card > p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 14px;
}

.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);
}

/* ---------- Payment flow ---------- */

.flow {
  padding: 48px 0 56px;
}

.flow-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.flow-steps li {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 24px 20px;
}

.flow-num {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.flow-steps h4 {
  font-size: 15.5px;
  font-weight: 800;
  margin: 0 0 6px;
}

.flow-steps p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.flow-footnote {
  margin: 20px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 640px;
}

/* ---------- Built for ---------- */

.built-for {
  padding: 8px 0 56px;
}

.built-for-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 44px 0;
}

.built-for-item h4 {
  font-size: 15.5px;
  font-weight: 800;
  margin: 0 0 8px;
}

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

/* ---------- Final CTA ---------- */

.final-cta {
  padding: 8px 0 60px;
}

.final-cta-inner {
  text-align: center;
  max-width: 560px;
}

.final-cta h2 {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 26px;
  text-wrap: balance;
}

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

@media (max-width: 900px) {
  .built-for-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 780px) {
  .hero h1 { font-size: 38px; }
  .hero-sub { font-size: 16px; }
  .feature-grid { grid-template-columns: 1fr; }
  .flow-steps { grid-template-columns: 1fr 1fr; }
  .built-for-grid { grid-template-columns: 1fr; gap: 28px; }
  .section-title { font-size: 25px; }
}

@media (max-width: 480px) {
  .flow-steps { grid-template-columns: 1fr; }
}

/* ---------- 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; }

/* ---------- Live activity showcase ---------- */

.live-activity {
  padding: 6px 0 48px;
}

.live-activity-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.la-text {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 16px 0 20px;
}

.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;
}

/* ---------- Booking-page showcase ---------- */

.site-showcase {
  padding: 12px 0 56px;
}

.site-showcase-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 48px;
  align-items: center;
}

.ss-visual {
  display: flex;
  justify-content: center;
}

.browser-card {
  width: 100%;
  max-width: 320px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 60px -24px rgba(32,43,30,0.16), 0 0 0 1px rgba(32,43,30,0.03);
}

.browser-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: color-mix(in srgb, var(--ink) 4%, var(--surface));
  border-bottom: 1px solid var(--hairline);
}

.browser-dots { display: flex; gap: 5px; }
.browser-dots span { width: 8px; height: 8px; border-radius: 999px; background: var(--hairline); }

.browser-url {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg);
  border-radius: 999px;
  padding: 5px 12px;
  text-align: center;
}

.bc-body { padding: 18px 18px 20px; }

.bc-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.bc-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; }

.bc-avatar {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #14161c));
  flex-shrink: 0;
}

.bc-book-now {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  border-radius: 999px;
  padding: 5px 11px;
}

.bc-pin {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-radius: 999px;
  padding: 5px 10px;
  margin-bottom: 10px;
}

.bc-body h4 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  line-height: 1.15;
}

.bc-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 3px;
  margin-bottom: 12px;
}

.bc-tab {
  flex: 1;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  padding: 7px 0;
  border-radius: 999px;
  color: var(--muted);
}

.bc-tab.on { background: var(--accent); color: var(--accent-ink); }

.bc-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }

.bc-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  color: var(--ink);
}

.bc-pill.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.bc-cta {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 999px;
  padding: 11px 0;
}

.ss-copy .stat-strip {
  display: flex;
  gap: 22px;
  margin: 20px 0 22px;
  flex-wrap: wrap;
}

.stat-strip div { min-width: 90px; }

.stat-strip b {
  display: block;
  font-size: 21px;
  font-weight: 800;
  color: var(--accent);
}

.stat-strip span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  margin-top: 2px;
}

@media (max-width: 900px) {
  .site-showcase-grid { grid-template-columns: 1fr; gap: 30px; }
  .ss-copy .section-title, .ss-copy .section-eyebrow { text-align: center !important; margin-left: auto !important; }
  .ss-copy .la-text, .ss-copy p { text-align: center; }
  .ss-copy .feature-list { align-items: center; }
  .ss-copy .feature-list li { text-align: left; }
  .stat-strip { justify-content: center; }
}

/* ---------- 6-card grid ---------- */

.feature-grid {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  .live-activity-grid { grid-template-columns: 1fr; gap: 30px; }
  .live-activity-copy .section-title,
  .live-activity-copy .section-eyebrow { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
  .la-text { text-align: center; }
  .live-activity-copy .feature-list { align-items: center; }
  .live-activity-copy .feature-list li { text-align: left; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* ---------- Real-screens gallery ---------- */
/* Actual device screenshots (not illustrations, unlike .browser-card/
   .la-card above) — a plain CSS bezel around a real <img>, so the frame
   reads as "this is a real phone" without needing an SVG asset. */

.screens {
  padding: 88px 0 96px;
  text-align: center;
}

.screens-carousel-wrap {
  position: relative;
  margin-top: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* A true 3D ring (transform-style: preserve-3d), not a flat scroller —
   carousel3d.js continuously rotates .carousel3d-ring via
   requestAnimationFrame (not a CSS @keyframes loop) so the same tick
   can also fade/scale each card by its current angle from front-facing
   and support drag-to-spin. --card-width/--radius are read by JS at
   init and on resize, so the breakpoints below are the only place
   sizing lives. */
.carousel3d-stage {
  position: relative;
  width: 100%;
  max-width: 980px;
  height: 440px;
  overflow: hidden;
  /* A larger perspective than the "photographic" default (~1000-1400px)
     deliberately flattens the front-card magnification: CSS's
     perspective-projection scale factor is perspective / (perspective -
     translateZ), so at a fixed --radius, a bigger perspective value
     means the front-facing card grows less as it swings to the centre.
     At the old 1400px/380px pairing the front card was ~1.37x its
     nominal size — taller than this stage and clipped top/bottom no
     matter how much stage height alone was thrown at it. 2200px keeps
     the depth cue while capping that growth around ~1.2x. */
  perspective: 2200px;
  --card-width: 150px;
  --radius: 340px;
}

/* A soft ambient contact shadow under the ring — otherwise the cards
   read as floating in space rather than sitting on anything. Painted
   before .carousel3d-ring in the same stacking context, so it sits
   underneath every card regardless of the ring's live rotation. */
.carousel3d-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 55%;
  height: 40px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.18), transparent 72%);
  filter: blur(3px);
  pointer-events: none;
}

.carousel3d-ring {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  cursor: grab;
}

.carousel3d-ring.is-dragging {
  cursor: grabbing;
}

.carousel3d-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--card-width);
  will-change: transform, opacity;
}

@media (max-width: 680px) {
  .carousel3d-stage { height: 380px; --card-width: 130px; --radius: 295px; }
}

@media (max-width: 420px) {
  .carousel3d-stage { height: 300px; --card-width: 100px; --radius: 227px; }
}

.screen-frame {
  position: relative;
  width: 100%;
  border-radius: 26px;
  background: #0a0a0a;
  /* Taller top edge than the other three sides — real room for the
     notch below to sit in above the screenshot, rather than overlapping
     its own header content (these screenshots crop right up to the
     app's own title bar, with no blank status-bar margin to hide it in). */
  padding: 20px 4px 4px;
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.08);
  scroll-snap-align: center;
  cursor: zoom-in;
  /* Also carries the .reveal fade-in for this element (rather than
     letting .reveal's own generic `transition` shorthand apply) — two
     rules both setting `transition` on the same element don't merge,
     the later one in source wins wholesale, which would otherwise drop
     .reveal's opacity transition and stagger entirely. Delays are
     listed positionally per transition-property: opacity gets the
     --index stagger, transform/box-shadow (the hover response) stay
     instant regardless of card position. */
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
  transition-delay: calc(var(--index, 0) * 90ms), 0s, 0s;
}

.screen-frame:hover,
.screen-frame:focus-visible {
  transform: translateY(-6px) scale(1.045);
  box-shadow: 0 30px 56px -18px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.screen-frame:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.screen-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  pointer-events: none;
}

.screen-frame::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 7px;
  /* A touch lighter than the bezel itself — pure black-on-black would
     make this invisible now that it's fully inside the top edge rather
     than cutting into the (lighter) screenshot below it. */
  background: #2c2c2e;
  border-radius: 999px;
}

.carousel-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.25);
  transition: background 0.15s ease, transform 0.15s ease;
}

.carousel-arrow:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.carousel-arrow:active { transform: scale(0.9); }

@media (max-width: 420px) {
  .carousel-arrow { width: 36px; height: 36px; font-size: 17px; }
}


/* ---------- 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) {
  .screen-frame, .lightbox, .lightbox img { transition: none; }
}