/* App Store "screens": marketing tiles authored at App Store dimensions that
   double as the live website gallery and the capture source. Each .screen is a
   container; everything inside is sized in container-query units (cq*), so the
   composition is pixel-native at capture width and fluid at any smaller size. */

/* Scoped, not global. This stylesheet is now loaded on the app page too (the
   per-platform galleries embed the same tiles), where a bare `*` reset would
   flatten the site's prose. .screens-body keeps the screens pages byte-identical;
   .screen * keeps the tile internals reset wherever a tile is rendered. */
.screens-body,
.screens-body *,
.screen * { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  /* Design tokens copied from site.css so the shared signup component renders
     identically here (the screens pages don't load site.css). */
  --ratio: 1.25;
  --base: 1.125rem;
  --line: calc(var(--base) * 1.5);
  --text-sm: calc(var(--base) / var(--ratio));
  --space-sm: calc(var(--line) * 0.5);
  --space-md: var(--line);
  --space-xl: calc(var(--line) * 3);   /* matches site.css so the hero aligns */
  --transition-fast: 0.15s ease;
}

/* Page bg is the product accent so margins/overscroll match the screens.
   --surface is the accent in light mode and a touch darker + desaturated in dark
   mode (see the dark block at the bottom). Everything accent-colored — the body,
   the panels, the footer — reads from --surface, so the whole page eases back in
   dark mode from one place. */
.screens-body {
  --surface: var(--accent);
  background: var(--surface);
}

.screens {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Per-platform App Store canvas (base CSS px = App Store px ÷ 2; capture @2×). */
.screens[data-platform="macos"]  .screen { --w: 1440; --h: 900; }   /* → 2880×1800 */
.screens[data-platform="ios"]    .screen { --w: 642;  --h: 1389; }  /* → 1284×2778 (6.5") */
.screens[data-platform="ipados"] .screen { --w: 1032; --h: 1376; }  /* → 2064×2752 (13") */

.screen {
  width: min(100%, calc(var(--w) * 1px));
  aspect-ratio: var(--w) / var(--h);
  container-type: size;
  position: relative;
  overflow: hidden;
  background: var(--surface);
  color: #fff;
  font-family: var(--font-display);
}

/* Soft lighter glow behind the artwork so the window lifts off the accent. */
.screen::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -20cqh;
  width: 120cqw;
  height: 120cqw;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.screen-body {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8cqh 9cqw 0;
}

.screen-headline {
  font-weight: 800;
  font-size: 7.2cqh;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 82cqw;
}

.screen-sub {
  font-weight: 500;
  font-size: 3.4cqh;
  line-height: 1.2;
  opacity: 0.92;
  margin-top: 2.6cqh;
  max-width: 58cqw;
  text-wrap: balance; /* even line breaks — no orphaned single word on its own line */
}

/* The app window (transparent PNG with its own shadow) sits below the copy and
   tucks off the bottom a touch so it feels alive. */
.screen-shot {
  margin-top: auto;
  width: 100%;
  display: flex;
  justify-content: center;
}

.screen-shot img {
  display: block;
  width: var(--shot-w, 62cqw);
  height: auto;
  transform: translateY(6cqh) rotate(var(--shot-rot, 0deg));
}

/* macOS windows are landscape and vary in aspect (light vs dark captures differ),
   so fit each INSIDE a box — bounded by width AND height — and center it in the
   space below the copy. Fills the frame either way, never overflows, whole window
   visible. No bottom-tuck: humans read these, so show the entire app. */
/* Centered in the space BELOW the copy, with a smaller height cap so there's a
   clear gap under the title (it was riding right up against the sub). */
.screens[data-platform="macos"] .screen-shot { margin: auto 0; }
.screens[data-platform="macos"] .screen-shot img {
  width: auto;
  height: auto;
  max-width: 90cqw;
  max-height: 58cqh;
  transform: rotate(var(--shot-rot, 0deg));
}

/* A whisper of tilt — much subtler than before (it read as crooked). */
.screen-shot img { --shot-rot: -1deg; }
.screen:nth-child(even) .screen-shot img { --shot-rot: 1deg; }

/* ── Hero screen: product name + subtitle left, app window peeking right
   (like the site hero / OG card), on the accent. It's the first App Store
   screen AND the visual header of the standalone page. ── */
.screen.hero { position: relative; overflow: hidden; }

.hero-copy {
  position: absolute;
  left: 9cqw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  max-width: 44cqw;
}

.hero-eyebrow {
  font-weight: 700;
  letter-spacing: 0.28em;
  font-size: 2.3cqh;
  opacity: 0.92;
}

.hero-name {
  font-weight: 800;
  font-size: 15cqh;
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin-top: 2.6cqh;
}

.hero-sub {
  font-weight: 500;
  font-size: 4.2cqh;
  line-height: 1.16;
  opacity: 0.94;
  margin-top: 3cqh;
  max-width: 17ch;
}

.hero-art {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58cqw;
  z-index: 1;
}

.hero-art img {
  display: block;
  width: 100%;
  height: auto;
  transform: translate(9%, 11%) rotate(-2deg);
  transform-origin: bottom left;
}

/* Displays: the window carries dense UI, so it runs bigger and bleeds off
   the right edge, and the copy hugs the left — clear air between the
   wordmark and the window. */
.screens[data-product="displays"] .hero-copy {
  left: 6.5cqw;
  max-width: 34cqw;
}

.screens[data-product="displays"] .hero-name {
  font-size: 12.5cqh;
}

.screens[data-product="displays"] .hero-art {
  width: 70cqw;
  right: -12cqw;
}

/* Portrait tiles: left-aligned copy (centered stacks read badly at phone
   aspect), headline a notch smaller, tighter outer padding, balanced lines. */
.screens[data-platform="ios"] .screen-body,
.screens[data-platform="ipados"] .screen-body {
  align-items: flex-start;
  text-align: left;
  padding: 6cqh 7cqw 0;
}

.screens[data-platform="ios"] .screen-headline,
.screens[data-platform="ipados"] .screen-headline {
  font-size: 5.6cqh;
  max-width: 86cqw;
  text-wrap: balance;
}

.screens[data-platform="ios"] .screen-sub,
.screens[data-platform="ipados"] .screen-sub {
  font-size: 3cqh;
  text-wrap: pretty;
  max-width: 32ch;
}

/* Portrait platforms (iOS/iPad): hero is a flex column — copy on top, device
   pushed to the bottom and bled off (like the feature tiles), so the name never
   overlaps the device. */
.screens[data-platform="ios"] .screen.hero,
.screens[data-platform="ipados"] .screen.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.screens[data-platform="ios"] .hero-copy,
.screens[data-platform="ipados"] .hero-copy {
  position: static;
  transform: none;
  max-width: none;
  padding: 8cqh 8cqw 0;
}

.screens[data-platform="ios"] .hero-name,
.screens[data-platform="ipados"] .hero-name { font-size: 10cqh; line-height: 0.95; }

.screens[data-platform="ios"] .hero-sub,
.screens[data-platform="ipados"] .hero-sub { font-size: 4.2cqh; max-width: 22ch; margin: 3cqh auto 0; }

.screens[data-platform="ios"] .hero-art,
.screens[data-platform="ipados"] .hero-art {
  position: static;
  transform: none;
  width: 82cqw;
  margin-top: auto;
}

.screens[data-platform="ios"] .hero-art img,
.screens[data-platform="ipados"] .hero-art img {
  width: 100%;
  transform: translateY(8cqh) rotate(-2.5deg);
  transform-origin: bottom center;
}

/* Device shots are pre-framed (bezel + shadow baked into the PNG), so no CSS
   rounding/shadow here — just size them (frames add padding, so a touch bigger). */
.screens[data-platform="ios"] .screen-shot img { --shot-w: 74cqw; }
.screens[data-platform="ipados"] .screen-shot img { --shot-w: 86cqw; }

/* ── Screenshot mode (html[data-screenshot], set by ?capture) ─────────────────
   Strip the shared product hero + footer so the .screen tiles stack flush from
   y=0 at exact App Store dimensions and the capture slices hold. (site.css isn't
   even loaded in capture; these are belt-and-suspenders in case it ever is.) ── */
html[data-screenshot] .platform-hero,
html[data-screenshot] .product-footer,
html[data-screenshot] .product-legal { display: none; }

/* ── Web presentation (everything EXCEPT during capture) ──────────────────────
   The page reads as a real responsive page: the platform-head is the hero, and
   each App Store tile is shown as a rounded PANEL — the SAME composition that
   gets captured (headline + subtitle + app window), just scaled down to a
   website-sized card so its text lands near the site's own sizes. The capture
   itself is byte-for-byte untouched. ── */
html:not([data-screenshot]) .screens {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  max-width: 1080px;
  margin-inline: auto;
  /* Extra top room so the panels sit comfortably below the hero's pocket. */
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 5vw, 2rem) clamp(3rem, 8vw, 5rem);
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

/* The App Store hero tile duplicates the platform-head hero on web — drop it.
   (.screens in the selector so it outranks the portrait .screens[...] .hero rule.) */
html:not([data-screenshot]) .screens .screen.hero { display: none; }

/* Each tile is a rounded panel, capped to a width that keeps its container-unit
   text near website size. Composition is identical to the captured screenshot. */
html:not([data-screenshot]) .screen {
  width: var(--web-shot-w, 320px);
  max-width: 100%;
  border-radius: 22px;
  /* Soft, tight lift. A wide/dark shadow reads as muddy sludge on the saturated
     accent, especially where three panels' shadows pool along the bottom edge. */
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
html:not([data-screenshot]) .screens[data-platform="ios"]    { --web-shot-w: 310px; }
html:not([data-screenshot]) .screens[data-platform="ipados"] { --web-shot-w: 480px; }
html:not([data-screenshot]) .screens[data-platform="macos"]  { --web-shot-w: 840px; }

/* Page hero: "<Product> for <Platform>" + tagline + a platform switcher —
   orients a visitor who lands here and lets them jump to the sibling platforms. */
.platform-head {
  /* Same container geometry as the product-page hero (1200px + space-xl inset)
     so the brand + H1 land on the exact same top-left spot — navigating between
     the product page and a platform page must not nudge them. */
  max-width: 1200px;
  margin-inline: auto;
  text-align: left;
  color: #fff;
  padding: clamp(3.25rem, 9vh, 6rem) var(--space-md) clamp(2rem, 5vh, 3.25rem);
  font-family: var(--font-display);
}
@media (min-width: 640px) {
  .platform-head { padding-inline: var(--space-xl); }
}

.platform-head-brand {
  display: inline-block;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.platform-head-brand:hover { color: #fff; }

.platform-head-title {
  font-weight: 800;
  font-size: clamp(2.6rem, 8vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: calc(0.75rem + 5px) 0 0;   /* match the product hero's brand→H1 gap */
  max-width: 18ch;
}
/* "for <Platform>" — lighter, so the product name reads as the subject. */
.platform-head-title span { font-weight: 500; color: rgba(255, 255, 255, 0.6); }

.platform-head-sub {
  font-weight: 500;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.82);
  margin: 1.1rem 0 0;
  max-width: 40ch;
}

.platform-head-pills {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.9rem;
}

.platform-head-pill {
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.5em 1.15em;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.platform-head-pill:hover { border-color: #fff; }
.platform-head-pill.is-active {
  background: #fff;
  color: var(--accent);
  border-color: #fff;
}

.platform-foot {
  position: relative;
  background: var(--surface);
  color: #fff;
  --page-text: #fff;   /* the signup component derives its colors from this */
  text-align: center;
  padding: clamp(4rem, 12vh, 8rem) 6vw clamp(5rem, 14vh, 9rem);
  font-family: var(--font-display);
}

.platform-foot-lead {
  font-weight: 700;
  font-size: clamp(1.5rem, 4.5vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 auto 1.6rem;
  max-width: 18ch;
}

/* Email signup — the exact product-page component (site.css .signup-*), so the
   notify-me form on a screens page matches the one on the product page. */
.platform-foot .signup-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.platform-foot .signup-status {
  font-size: var(--text-sm);
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.platform-foot .signup-form {
  display: flex;
  flex-direction: row;
  max-width: 30rem;
  width: 100%;
  background: oklch(from var(--page-text, #fff) l c h / 0.14);
  border-radius: 2px;
  overflow: hidden;
}

.platform-foot .signup-input {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  border: none;
  background: transparent;
  color: var(--page-text, #fff);
  flex: 1;
  min-width: 180px;
}

.platform-foot .signup-input:focus { outline: none; background: oklch(from var(--page-text, #fff) l c h / 0.08); }
.platform-foot .signup-input::placeholder { color: oklch(from var(--page-text, #fff) l c h / 0.5); }

.platform-foot .signup-button {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  font-weight: 600;
  /* Match the product-page pill (footer sets --page-text: #fff → white here). */
  background: var(--page-text, #fff);
  color: var(--accent);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--transition-fast);
}
.platform-foot .signup-button:hover { opacity: 0.9; }

/* Store-link CTA (when not Coming Soon) */
.platform-foot-cta {
  display: inline-block;
  background: #fff;
  color: var(--accent);
  font-weight: 700;
  padding: 0.9em 1.8em;
  border-radius: 6px;
  text-decoration: none;
}

/* ── Dark mode ────────────────────────────────────────────────────────────────
   Ease the accent back: same hue, a touch darker and desaturated, so the big
   color fields aren't glaring on a dark display. Derived once from --accent and
   inherited by every accent surface (body bg, panels, footer). Matches the same
   formula in site.css so screens and product pages don't drift. ── */
@media (prefers-color-scheme: dark) {
  /* :not([data-screenshot]) so a capture never desaturates — App Store shots
     always use the raw brand accent, regardless of the renderer's color scheme. */
  html:not([data-screenshot]) .screens-body {
    --surface: oklch(from var(--accent) calc(l * 0.92) calc(c * 0.7) h);
  }
}