/* App detail pages — extends styles.css. Same Modernist grammar as the home
   page: 28px leading, 2px rules, blue spent as a mark, one field moment. */
:root {
  --leading: 28px;
  --half: 14px;
  --edge: clamp(20px, 5vw, 72px);
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; text-wrap: pretty; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }
.nav { padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge))); }
.nav a { white-space: nowrap; }
.nav a.btn-primary, .nav a.btn-primary:hover { color: var(--color-bg); }
@media (max-width: 480px) { .nav a:not(.btn) { display: none; } }

.rule2 { height: 2px; border: 0; margin: 0; background: var(--color-divider); }

.kicker {
  display: block; font-size: 13px; line-height: var(--half);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-700);
  font-feature-settings: "tnum" 1;
  margin: 0 0 calc(var(--leading) - var(--half));
}

.app-hero { padding: calc(3 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.app-hero h1 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(38px, 5.4vw, 72px); line-height: 1.06;
  letter-spacing: -0.02em; margin: 0; margin-left: -0.058em;
}
.app-hero .sub { font-size: 17px; line-height: var(--leading); max-width: 58ch;
  margin: var(--leading) 0 0; }
.app-hero .row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-top: var(--leading); }

/* — device frames — */
.shots { display: flex; gap: clamp(16px, 3vw, 40px); flex-wrap: wrap;
  align-items: flex-start; justify-content: center;
  padding: calc(2 * var(--leading)) 0 calc(3 * var(--leading)); }
.frame { background: #1c1a19; border-radius: 18px; padding: 10px;
  box-shadow: var(--shadow-lg); }
.frame img { display: block; width: 100%; height: auto; border-radius: 10px; }
.frame.phone { width: min(240px, 42vw); }
.frame.tablet { width: min(430px, 86vw); }
.frame.desktop { width: min(680px, 90vw); border-radius: 10px; padding: 8px 8px 6px; }
.frame.desktop::before { content: ""; display: block; height: 10px; margin: -2px 0 6px;
  background: radial-gradient(circle 3px at 8px 5px, #e15b5b 3px, transparent 3.5px),
              radial-gradient(circle 3px at 22px 5px, #e0b34c 3px, transparent 3.5px),
              radial-gradient(circle 3px at 36px 5px, #62b264 3px, transparent 3.5px); }
.shots figure { margin: 0; }
.shots figcaption { font-size: 13px; line-height: var(--leading); text-align: center;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin-top: var(--half); }

/* tilt pair: straightens on hover */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tilt-l, .tilt-r { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
  .tilt-l { transform: rotate(-2deg) translateY(6px); }
  .tilt-r { transform: rotate(2deg); }
  .tilt-l:hover, .tilt-r:hover { transform: rotate(0) translateY(0); }
}

/* — fact rows (the home page's ruled grammar) — */
.facts { padding: calc(1.5 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.fact { display: grid; grid-template-columns: minmax(64px, 160px) minmax(0, 1fr);
  gap: var(--half) clamp(24px, 4vw, 72px); align-items: baseline;
  padding: var(--leading) 0; }
.fact + .fact { border-top: 2px solid var(--color-divider); }
.fact h2 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px; line-height: var(--leading); letter-spacing: -0.01em; margin: 0; }
.fact p { font-size: 15.5px; line-height: var(--leading); margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent); max-width: 62ch; }
@media (max-width: 720px) { .fact { grid-template-columns: 1fr; gap: var(--half); } }

/* — the blue close — */
.close { background: var(--color-accent); color: var(--color-bg); }
.close .wrap { padding-top: calc(2.5 * var(--leading)); padding-bottom: calc(2.5 * var(--leading)); }
.close h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(30px, 3.8vw, 48px); line-height: 1.06;
  letter-spacing: -0.015em; margin: 0; margin-left: -0.058em; }
.close .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: calc(1.5 * var(--leading)); }
.close .btn-ghost { color: var(--color-bg); border-color: var(--color-bg); border: 1px solid; }
footer { padding: calc(2 * var(--leading)) 0; font-size: 13px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent); }

/* — scroll reveal (skipped entirely under reduced motion) — */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
  .reveal.in { opacity: 1; transform: none; }
  .reveal:nth-child(2) { transition-delay: 0.08s; }
  .reveal:nth-child(3) { transition-delay: 0.16s; }
  .reveal:nth-child(4) { transition-delay: 0.24s; }
}