/* ============================================================
   DigitalSandbox — app product pages (Putt Maker, Qubo, Sideline
   Score). Section patterns from the design library's app-page
   section kit (ui_kits/putt-maker + app-page-sections reference):
   hero A "logo + phone" / hero B "centered rings", numbered
   feature rows, framed screenshot reel, split pricing band,
   ink closing CTA. Retinted per app via [data-app] on <main>.
   Requires css/design-system.css.
   ============================================================ */

/* ---------------- Hero (shared) ---------------- */
.dsa-hero { position: relative; overflow: hidden; }
.dsa-hero__deco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* field diagrams running diagonally across opposite hero corners (Sideline).
   Widths track the viewport (strokes scale with them, like the other heroes'
   sliced decos), and max() pins each field near the centered content on wide
   screens instead of letting it drift to the far corner. */
.dsa-hero__field { position: absolute; height: auto; pointer-events: none; }
.dsa-hero__field--tl { width: clamp(620px, 46vw, 900px); top: -150px; left: clamp(-170px, calc(50% - 1120px), -60px); transform: rotate(-20deg); }
.dsa-hero__field--br { width: clamp(520px, 40vw, 800px); bottom: -150px; right: clamp(-150px, calc(50% - 1080px), -60px); transform: rotate(-20deg); }
@media (max-width: 760px) {
  .dsa-hero__field--tl { width: 430px; top: -100px; left: -130px; }
  .dsa-hero__field--br { width: 370px; bottom: -92px; right: -118px; }
}

.dsa-fineprint {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--text-subtle);
}

/* variant A — copy left, framed phone right */
.dsa-hero__grid {
  position: relative; max-width: 1104px; margin: 0 auto; padding: 64px 48px 72px;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center;
}
.dsa-hero__copy { display: flex; flex-direction: column; gap: 18px; }
.dsa-hero__meta { display: flex; align-items: center; gap: 14px; }
.dsa-hero__logo { margin: 0; }
.dsa-hero__logo img { width: min(340px, 88%); height: auto; display: block; }
.dsa-hero__tag {
  margin: 0; font-size: 17px; line-height: 1.6; color: var(--text-muted);
  max-width: 460px; text-wrap: pretty;
}
.dsa-hero__stores { display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.dsa-hero__stage { position: relative; display: flex; justify-content: center; padding: 16px 0; }
.dsa-hero__overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* variant B — centered, rings behind, phone emerging below */
.dsa-hero--center { text-align: center; }
.dsa-ring {
  position: absolute; left: 50%; transform: translateX(-50%);
  border-radius: var(--radius-pill); border: 1.5px solid var(--accent-border);
  pointer-events: none;
}
.dsa-hero__center {
  position: relative; max-width: 820px; margin: 0 auto; padding: 60px 48px 0;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.dsa-hero__appicon { width: 72px; height: 72px; border-radius: 18px; box-shadow: var(--shadow-lg); display: block; }
.dsa-hero__h1 {
  margin: 0; font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: clamp(38px, 4.6vw, 54px); line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter); color: var(--sand-900); text-wrap: balance;
}
.dsa-hero__stagec {
  position: relative; display: flex; justify-content: center; align-items: flex-end;
  gap: 26px; padding: 34px 48px 0;
}
.dsa-chip {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: 14px; box-shadow: var(--shadow-md); padding: 14px 18px; text-align: left;
}
.dsa-chip--up { margin-bottom: 150px; }
.dsa-chip--up2 { margin-bottom: 190px; }
.dsa-chip__label {
  display: block; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-subtle);
}
.dsa-chip__val {
  display: block; font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: 26px; color: var(--sand-900); white-space: nowrap;
}

/* phone frames */
.dsa-phone {
  position: relative; background: var(--sand-950); border-radius: 42px;
  padding: 11px; box-shadow: var(--shadow-pop); flex: none;
}
.dsa-phone--tilt { transform: rotate(2deg); }
.dsa-phone > img, .dsa-phone > video { display: block; width: 248px; height: auto; border-radius: 32px; }
/* Safari won't reliably honor border-radius on a playing <video>; clip-path
   rounds the corners for real (border-radius above stays as the fallback) */
.dsa-phone > video { clip-path: inset(0 round 32px); }
.dsa-phone--half {
  border-radius: 42px 42px 0 0; padding-bottom: 0;
  width: 280px; height: 341px; overflow: hidden;
}
.dsa-phone--half > img, .dsa-phone--half > video { width: 258px; border-radius: 32px 32px 0 0; }
.dsa-phone--half > video { clip-path: inset(0 round 32px 32px 0 0); }

/* ---------------- Section scaffolding ---------------- */
.dsa-sect { max-width: 1104px; margin: 0 auto; padding: 64px 48px; }
.dsa-band {
  background: var(--surface-card);
  border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
}
.dsa-kicker {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--accent-text);
}
.dsa-h2 {
  margin: 10px 0 0; font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: 32px; letter-spacing: var(--ls-tight); color: var(--sand-900);
}

/* ---------------- Features — numbered rows ---------------- */
.dsa-feat { max-width: 900px; margin: 0 auto; padding: 64px 48px; }
.dsa-feat__head { text-align: center; margin: 0 0 30px; }
.dsa-feat__head .dsa-lead {
  margin: 14px auto 0; font-size: 15.5px; line-height: 1.65;
  color: var(--text-muted); max-width: 46em; text-wrap: pretty;
}
.dsa-rows { display: flex; flex-direction: column; }
.dsa-row {
  display: grid; grid-template-columns: 90px 1fr auto; gap: 24px; align-items: center;
  padding: 22px 8px; border-top: 1px solid var(--border-subtle);
}
.dsa-row:last-child { border-bottom: 1px solid var(--border-subtle); }
.dsa-row__num {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: 40px; color: var(--accent-border);
}
.dsa-row__t { display: block; font-size: 16.5px; font-weight: var(--fw-semibold); color: var(--sand-900); }
.dsa-row__d { display: block; margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.dsa-row__icon {
  width: 42px; height: 42px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent); display: grid; place-items: center;
}
.dsa-row__icon svg { width: 20px; height: 20px; }

/* ---------------- Screenshots — framed reel ---------------- */
.dsa-shots__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; margin: 0 0 24px;
}
.dsa-shots__hint { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--ls-caps); color: var(--text-faint); }
.dsa-reel {
  display: grid; grid-auto-flow: column; grid-auto-columns: 232px; gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px 4px 18px; scrollbar-width: thin;
}
.dsa-shot { scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; }
.dsa-shot__frame { background: var(--sand-950); border-radius: 30px; padding: 8px; box-shadow: var(--shadow-lg); }
.dsa-shot__frame img { display: block; width: 100%; height: auto; border-radius: 23px; }
.dsa-shot__cap {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  color: var(--text-subtle); text-align: center; text-transform: uppercase;
}
/* accent-wash variant (Qubo "reel" treatment) */
.dsa-shots--wash { background: var(--accent-soft); }
.dsa-shots--wash .dsa-shot__cap { color: var(--accent-soft-text); }

/* Store-poster artwork (headline + device baked into the image) shown as a
   flat rounded card — never inside a second device frame */
.dsa-poster {
  width: 300px; height: 360px; overflow: hidden;
  border-radius: 28px 28px 0 0; box-shadow: var(--shadow-pop);
}
.dsa-poster > img { display: block; width: 100%; height: auto; }
.dsa-shot__frame--poster { background: none; padding: 0; border-radius: 24px; overflow: hidden; }
.dsa-shot__frame--poster img { border-radius: 0; }

/* ---------------- Pricing — split band ---------------- */
.dsa-price {
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: 24px; box-shadow: var(--shadow-sm);
  display: grid; grid-template-columns: 1fr 1px 1fr; overflow: hidden;
}
.dsa-price__col { padding: 36px 40px; display: flex; flex-direction: column; gap: 12px; }
.dsa-price__col--hi { background: var(--accent-soft); }
.dsa-price__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-subtle); }
.dsa-price__col--hi .dsa-price__label { color: var(--accent-text); }
.dsa-price__amt { display: flex; align-items: baseline; gap: 10px; }
.dsa-price__big { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 40px; color: var(--sand-900); }
.dsa-price__note { font-size: 13px; color: var(--text-muted); }
.dsa-price__col--hi .dsa-price__note { color: var(--accent-soft-text); }
.dsa-price__desc { font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.dsa-price__col--hi .dsa-price__desc { color: var(--accent-soft-text); }
.dsa-price__div { background: var(--border-subtle); }

/* ---------------- Closing CTA — ink panel ---------------- */
.dsa-cta { background: var(--sand-950); }
.dsa-cta__inner {
  max-width: 1104px; margin: 0 auto; padding: 64px 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.dsa-cta__lockup { display: flex; align-items: center; gap: 24px; }
.dsa-cta__icon { width: 84px; height: 84px; border-radius: 20px; box-shadow: var(--shadow-lg); flex: none; }
.dsa-cta__h {
  margin: 0 0 8px; font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: 36px; letter-spacing: -0.025em; color: var(--white);
}
.dsa-cta__p { margin: 0; font-size: 14.5px; color: var(--sand-400); }
.dsa-cta__stores { display: flex; gap: 10px; flex: none; flex-wrap: wrap; }
.dsa-cta .ds-store { background: var(--white); color: var(--sand-900); }
.dsa-cta .ds-store:hover { background: var(--sand-100); }

/* ---------------- Responsive ---------------- */
@media (max-width: 880px) {
  .dsa-hero__grid { grid-template-columns: 1fr; gap: 40px; padding: 48px 32px 56px; }
  .dsa-hero__overlay { display: none; }
  .dsa-hero__center { padding: 48px 32px 0; }
  .dsa-hero__stagec { gap: 14px; padding: 28px 32px 0; }
  .dsa-chip--up { margin-bottom: 90px; }
  .dsa-chip--up2 { margin-bottom: 120px; }
  .dsa-chip__val { font-size: 20px; }
  .dsa-sect, .dsa-feat { padding: 48px 32px; }
  .dsa-cta__inner { padding: 48px 32px; }
  .dsa-row { grid-template-columns: 56px 1fr; }
  .dsa-row__num { font-size: 30px; }
  .dsa-row__icon { display: none; }
  .dsa-price { grid-template-columns: 1fr; }
  .dsa-price__div { height: 1px; }
}
@media (max-width: 560px) {
  .dsa-sect, .dsa-feat { padding: 40px 20px; }
  .dsa-hero__grid, .dsa-hero__center { padding-left: 20px; padding-right: 20px; }
  .dsa-cta__inner { padding: 48px 20px; }
  .dsa-cta__lockup { flex-direction: column; align-items: flex-start; gap: 16px; }
  .dsa-cta__h { font-size: 30px; }
  .dsa-chip { display: none; }
  .dsa-shots__hint { display: none; }
  .dsa-reel { grid-auto-columns: 200px; gap: 16px; }
}

@media (prefers-reduced-motion: no-preference) {
  .dsa-reel { scroll-behavior: smooth; }
}