/* Streaks Strokes site — shared by all pages. No external assets. */
:root {
  --coral: #FF704C;
  --bg: #ffffff;
  --fg: #1a1a1a;
  --fg-soft: #555555;
  --hairline: rgba(0, 0, 0, 0.12);
  --shot-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111111;
    --fg: #f2f2f2;
    --fg-soft: #a8a8a8;
    --hairline: rgba(255, 255, 255, 0.16);
    --shot-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  }
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 960px; margin: 0 auto; padding: 0 24px; }
a { color: var(--coral); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

/* Hero */
.hero { text-align: center; padding: 72px 0 40px; }
.hero-icon { width: 144px; height: 144px; margin: 0 auto 28px; border-radius: 22.37%; overflow: hidden;
             box-shadow: 0 8px 28px rgba(0,0,0,0.22); }
.hero-icon img, .hero-icon video { width: 100%; height: 100%; display: block; }
.hero-icon-still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-icon-video { display: none; }
  .hero-icon-still { display: block; }
}
/* The app's own wordmark face (the STROKES masthead and sheet titles): Helvetica Neue Condensed
   Bold. It ships on every Apple device, reached by its PostScript name; elsewhere the closest
   condensed sans stands in. */
.wordmark { font-family: "HelveticaNeue-CondensedBold", "Helvetica Neue Condensed Bold", "Helvetica Neue",
                         "Arial Narrow", "Roboto Condensed", sans-serif;
            font-stretch: condensed; font-weight: 700;
            font-size: clamp(2.6rem, 8vw, 4.25rem); letter-spacing: 0.01em; line-height: 1; }
/* Balanced, so the tagline never leaves one word on a line of its own. */
.tagline { font-size: clamp(1.15rem, 3vw, 1.5rem); color: var(--fg-soft); margin: 14px auto 28px; max-width: 34ch;
           text-wrap: balance; }
.badge-link img { height: 54px; width: auto; margin: 0 auto; }
/* The two launch stages (body[data-launch]): only the current one shows. */
.store-soon { display: inline-block; font-weight: 650; padding: 14px 24px; border-radius: 999px;
              border: 1.5px solid var(--hairline); color: var(--fg-soft); }
[data-launch="soon"] .store > :not(.store-soon),
[data-launch="live"] .store > :not(.store-live) { display: none; }

/* Wake divider */
.wake { display: block; margin: 56px auto; width: 120px; color: var(--coral); }

/* Sections */
section.band { padding: 8px 0; }
h2 { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 750; line-height: 1.25; margin-bottom: 12px; }
.lede { text-align: center; max-width: 60ch; margin: 0 auto; font-size: 1.2rem; }
.lede + .shot { margin: 40px auto 0; width: fit-content; }

/* Machines: three columns */
.cols { display: grid; gap: 28px; margin-top: 32px; }
@media (min-width: 720px) { .cols { grid-template-columns: 1fr 1fr 1fr; } }
.cols h3 { font-size: 1.1rem; margin-bottom: 6px; }
.cols p { color: var(--fg-soft); font-size: 0.98rem; }

/* Feature rows */
.feature { display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 40px 0; }
.feature .shot { flex: 0 0 auto; }
.feature .copy { max-width: 46ch; }
.feature .copy p { color: var(--fg-soft); }
@media (min-width: 720px) {
  .feature { flex-direction: row; justify-content: center; gap: 64px; }
  .feature.flip { flex-direction: row-reverse; }
}
/* Shots arrive already framed in a device bezel (Tools/marketing-shots/frame-shots.swift), so the
   shadow follows the frame's outline rather than a box around it. */
.shot img { width: 300px; height: auto; filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.22)); }
.shot.watch img { width: 220px; }
.landscape-shots { display: flex; flex-direction: column; align-items: center; gap: 36px; margin-top: 40px; }
.shot.landscape img { width: 620px; max-width: 100%; }

/* Watch & Health cards */
.cards { display: grid; gap: 24px; margin: 8px 0 24px; }
@media (min-width: 720px) { .cards { grid-template-columns: 1fr 1fr; } }
.card { border: 1px solid var(--hairline); border-radius: 20px; padding: 28px; }
.card svg { width: 44px; height: 44px; color: var(--coral); margin-bottom: 14px; }
.card p { color: var(--fg-soft); }

/* CTA + footer */
.cta { text-align: center; padding: 32px 0 56px; }
.site-footer { border-top: 1px solid var(--hairline); padding: 40px 0 56px; font-size: 0.95rem; color: var(--fg-soft); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 18px; }
.site-footer .suite { margin-bottom: 18px; color: var(--fg); }
.site-footer .suite a { font-weight: 600; }

/* Prose pages (privacy, support, press) */
.prose { padding: 48px 24px; max-width: 768px; margin: 0 auto; }
.prose h1 { font-size: 2rem; line-height: 1.25; margin-bottom: 24px; text-wrap: balance; }
.prose h2 { font-size: 1.25rem; margin: 32px 0 8px; }
.prose p, .prose li { color: var(--fg-soft); margin-bottom: 12px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose .updated { font-size: 0.95rem; }
/* Long bare URLs (Apple's EULA in the terms) mustn't force sideways scrolling on phones. */
.prose a { overflow-wrap: anywhere; }
.backlink { display: inline-block; margin-top: 40px; }

/* Facts line under the hero tagline, and the pricing line in the body. */
.facts { font-size: 1rem; color: var(--fg-soft); max-width: 52ch; margin: -12px auto 28px; text-wrap: balance; }

/* Guides (guides/): the prose column, plus a byline, a list of guides and an App Store card. */
.prose h3 { font-size: 1.05rem; margin: 24px 0 6px; }
.prose strong { color: var(--fg); }
.prose table { border-collapse: collapse; width: 100%; margin: 8px 0 20px; font-size: 0.98rem; }
.prose th, .prose td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--hairline); }
.prose th { color: var(--fg); font-weight: 650; }
.prose td { color: var(--fg-soft); }
.byline { font-size: 0.95rem; color: var(--fg-soft); margin: -12px 0 28px; }
.guide-list { list-style: none; padding: 0 !important; }
.guide-list li { border: 1px solid var(--hairline); border-radius: 16px; padding: 20px 22px; margin-bottom: 16px; }
.guide-list h2 { margin: 0 0 6px; }
.guide-list p { margin: 0; }
/* A screenshot inside a guide, with a caption under it. */
.prose figure { margin: 28px auto; text-align: center; }
.prose figcaption { font-size: 0.95rem; color: var(--fg-soft); margin: 14px auto 0; max-width: 46ch; }
.app-card { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; border: 1px solid var(--hairline);
            border-radius: 20px; padding: 22px; margin: 32px 0; }
.app-card img.app-icon { width: 64px; height: 64px; border-radius: 22.37%; }
.app-card .app-card-copy { flex: 1 1 260px; }
.app-card .app-card-copy p { margin: 0; }
.app-card .app-card-copy strong { display: block; margin-bottom: 2px; }
.app-card .badge-link img { height: 44px; margin: 0; }