/* Hallmark · genre: modern-minimal · macrostructure: Workbench · theme: locked house system (Gymmy iOS tokens) · enrichment: real product screenshots (hairline figures) · nav: N1a (justified: two genuine destinations) · footer: Ft5 Statement */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R5 V4 */
/* Owner law override: no em dashes in any copy. House tokens are hex by law (GymmyTheme.swift); all values route through tokens below. */

:root {
  --paper: #F7F7F5;
  --surface: #FFFFFF;
  --elev: #FBFBF9;
  --ink: #111111;
  --ink-2: #6B7280;
  --ink-3: #9AA0A8;
  --line: #ECECEC;
  --accent: #2FB48E;
  --badge: #111111;
  --badge-ink: #FFFFFF;
  --caution: #CC7A1F;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --s1: 8px; --s2: 12px; --s3: 16px; --s4: 20px; --s5: 24px; --s6: 32px; --s7: 40px; --s8: 64px; --s9: 96px;
  --r-card: 20px;
  --r-ctl: 12px;
  --r-shot: 28px;
  --text-display: clamp(2.4rem, 5vw + 0.6rem, 4.2rem);
  --text-h2: clamp(1.35rem, 2vw + 0.6rem, 1.8rem);
  --text-lede: clamp(1.05rem, 0.8vw + 0.9rem, 1.25rem);
  --dur: 140ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #090C11;
    --surface: #12161D;
    --elev: #181E27;
    --ink: #FFFFFF;
    --ink-2: #A0A8B3;
    --ink-3: #6E7682;
    --line: #242B35;
    --accent: #5FD6B6;
    --badge: #FFFFFF;
    --badge-ink: #0E1116;
    --caution: #E6B25A;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; }
html { color-scheme: light dark; }
body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.wrap { max-width: 1040px; margin-inline: auto; padding-inline: var(--s4); }
@media (min-width: 720px) { .wrap { padding-inline: var(--s6); } }

/* Nav: wordmark + one destination. Static, unbordered, quiet. */
.nav { display: flex; align-items: baseline; justify-content: space-between; padding-block: var(--s5) var(--s2); }
.wordmark {
  font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em;
  text-decoration: none; color: var(--ink);
}
.wordmark .dot { color: var(--accent); }
.nav a.quiet {
  font-size: 0.95rem; font-weight: 500; color: var(--ink-2); text-decoration: none;
  white-space: nowrap; padding: var(--s1) 0;
}
.nav a.quiet:hover { color: var(--ink); }

/* Hero: left-biased, content-height, one filled primary (the badge). */
.hero { padding-block: var(--s8) var(--s7); max-width: 640px; }
.hero h1 {
  font-size: var(--text-display); font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.04; overflow-wrap: anywhere; min-width: 0;
}
.hero .lede { margin-top: var(--s4); font-size: var(--text-lede); color: var(--ink-2); max-width: 54ch; }
.cta-row { margin-top: var(--s6); display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.store-badge {
  display: inline-flex; flex-direction: column; justify-content: center;
  background: var(--badge); color: var(--badge-ink);
  border-radius: var(--r-ctl); padding: 10px 22px; min-height: 56px;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.store-badge:hover { opacity: 0.9; }
.store-badge:active { transform: translateY(1px); }
.store-badge .pre { font-size: 0.7rem; font-weight: 500; opacity: 0.85; letter-spacing: 0.01em; }
.store-badge .name { font-size: 1.1rem; font-weight: 650; letter-spacing: -0.01em; }
.cta-note { font-size: 0.9rem; color: var(--ink-3); white-space: nowrap; }

/* The tour: real screenshots, hairline figures, captions beside. */
.tour { display: flex; flex-direction: column; gap: var(--s9); padding-block: var(--s7) var(--s8); }
.step { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-items: center; }
@media (min-width: 720px) {
  .step { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s8); }
  .step:nth-child(even) .shot { order: 2; }
}
.shot { margin: 0; justify-self: center; }
.shot img {
  width: min(320px, 78vw); height: auto;
  border-radius: var(--r-shot);
  border: 1px solid var(--line);
  background: var(--surface);
}
.step-copy .k {
  font-size: 0.85rem; font-weight: 600; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.step-copy h2 { font-size: var(--text-h2); font-weight: 650; letter-spacing: -0.015em; margin-top: var(--s1); overflow-wrap: anywhere; min-width: 0; }
.step-copy p { margin-top: var(--s2); color: var(--ink-2); max-width: 46ch; }

/* FAQ: native details, no icons, no chrome. */
.faq { padding-block: var(--s7) var(--s8); border-top: 1px solid var(--line); }
.faq h2 { font-size: var(--text-h2); font-weight: 650; letter-spacing: -0.015em; }
.faq details { border-bottom: 1px solid var(--line); padding-block: var(--s3); }
.faq details:first-of-type { margin-top: var(--s4); }
.faq summary {
  font-weight: 600; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink-3); font-weight: 500; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin-top: var(--s2); color: var(--ink-2); max-width: 62ch; }

/* Closing CTA strip: the repetition is the call to action. */
.close-cta {
  padding-block: var(--s8);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4);
  border-top: 1px solid var(--line);
}
.close-cta p { font-size: var(--text-lede); color: var(--ink-2); max-width: 46ch; }

/* Footer: statement close. */
.footer { border-top: 1px solid var(--line); padding-block: var(--s7) var(--s6); }
.footer .statement { font-size: 1.3rem; font-weight: 650; letter-spacing: -0.015em; }
.footer .links { margin-top: var(--s4); display: flex; gap: var(--s4); flex-wrap: wrap; }
.footer .links a { font-size: 0.92rem; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.footer .links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
.footer .legal { margin-top: var(--s4); font-size: 0.85rem; color: var(--ink-3); }

/* Marketing landing (gymmy-social-site V1): additive classes only; the tour/FAQ classes
   above stay for compatibility. Captures are always dark product shots, framed. */
.eyebrow {
  font-size: 0.8rem; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--accent);
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s7);
  align-items: center; padding-block: var(--s7) var(--s8);
}
@media (min-width: 920px) {
  .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s8); padding-block: var(--s8) var(--s9); }
}
.hero-grid h1 {
  margin-top: var(--s3);
  font-size: var(--text-display); font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.04; overflow-wrap: anywhere; min-width: 0;
}
.hero-grid h1 .payoff { color: var(--accent); }
.hero-grid .lede { margin-top: var(--s4); font-size: var(--text-lede); color: var(--ink-2); max-width: 54ch; }
.hero-shot { margin: 0; justify-self: center; }
.hero-shot img, .wide-shot img, .proof-card img, .spotlight-shot img {
  height: auto; border-radius: var(--r-shot);
  border: 1px solid var(--line); background: #0B0E12;
}
.hero-shot img { width: min(340px, 82vw); }

/* Proof strip: 4 capture cards; scroll-snap row on mobile, grid at width. */
.proof { padding-block: var(--s7) var(--s8); border-top: 1px solid var(--line); }
.proof h2, .why h2, .includes h2, .spotlight h2 {
  font-size: var(--text-h2); font-weight: 650; letter-spacing: -0.015em;
}
.proof-rail {
  margin-top: var(--s6); display: grid; grid-auto-flow: column;
  grid-auto-columns: min(268px, 74vw); gap: var(--s4);
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s2);
  scrollbar-width: thin;
}
.proof-card { scroll-snap-align: start; }
.proof-card img { width: 100%; }
.proof-card h3 { margin-top: var(--s3); font-size: 1.05rem; font-weight: 650; letter-spacing: -0.01em; }
.proof-card p { margin-top: 6px; font-size: 0.95rem; color: var(--ink-2); }
@media (min-width: 920px) {
  .proof-rail { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
}

/* Includes: one wide capture-led card. */
.includes { padding-block: var(--s7) var(--s8); border-top: 1px solid var(--line); }
.includes-card {
  margin-top: var(--s6); display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--s6); align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--s6);
}
@media (min-width: 920px) { .includes-card { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); padding: var(--s7); } }
.wide-shot { margin: 0; justify-self: center; }
.wide-shot img { width: min(300px, 74vw); }
.includes-list { list-style: none; }
.includes-list li {
  padding-block: var(--s2); color: var(--ink-2);
  display: flex; gap: var(--s2); align-items: baseline;
}
.includes-list li + li { border-top: 1px solid var(--line); }
.includes-list li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); transform: translateY(-2px); }
.includes-list strong { color: var(--ink); font-weight: 600; }

/* Why: three quiet benefit cards. */
.why { padding-block: var(--s7) var(--s8); border-top: 1px solid var(--line); }
.why-grid { margin-top: var(--s6); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
@media (min-width: 720px) { .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.why-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--s5);
}
.why-card h3 { font-size: 1.05rem; font-weight: 650; letter-spacing: -0.01em; }
.why-card p { margin-top: var(--s2); font-size: 0.95rem; color: var(--ink-2); }

/* Spotlight: the closer look, reversed, elevated. */
.spotlight { padding-block: var(--s7) var(--s8); border-top: 1px solid var(--line); }
.spotlight-card {
  margin-top: var(--s6); display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--s6); align-items: center;
  background: var(--elev); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--s6);
}
@media (min-width: 920px) {
  .spotlight-card { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); padding: var(--s7); }
  .spotlight-card .spotlight-shot { order: 2; }
}
.spotlight-shot { margin: 0; justify-self: center; }
.spotlight-shot img { width: min(300px, 74vw); }
.spotlight-copy h3 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.015em; margin-top: var(--s1); }
.spotlight-copy .lede { margin-top: var(--s3); color: var(--ink-2); max-width: 50ch; }
.spotlight-copy .lede + .lede { margin-top: var(--s2); }

.cta-legal { font-size: 0.85rem; color: var(--ink-3); max-width: 60ch; }
.cta-legal a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
.footer .contact { margin-top: var(--s3); font-size: 0.92rem; color: var(--ink-2); }
.footer .contact a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }

/* Document pages (privacy, terms, support). */
.doc { max-width: 720px; padding-block: var(--s6) var(--s8); }
.doc h1 { font-size: clamp(1.8rem, 3vw + 0.6rem, 2.6rem); font-weight: 700; letter-spacing: -0.02em; }
.doc .meta { margin-top: var(--s2); font-size: 0.9rem; color: var(--ink-3); }
.doc h2 { font-size: 1.2rem; font-weight: 650; margin-top: var(--s6); letter-spacing: -0.01em; }
.doc p, .doc li { color: var(--ink-2); margin-top: var(--s2); max-width: 66ch; }
.doc ul { margin-top: var(--s2); padding-left: 1.2em; }
.doc a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
.draft-note {
  margin-top: var(--s4); padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl); background: var(--surface);
  color: var(--ink-2); font-size: 0.92rem;
}
.draft-note strong { color: var(--caution); font-weight: 650; }
.doc h3 { font-size: 1.05rem; font-weight: 650; margin-top: var(--s5); color: var(--ink); }