/* Static guide pages (/guides/*).
   These pages are generated HTML, not part of the React bundle, so they carry
   their own stylesheet. The token block and the chrome rules (nav, buttons,
   store pills, footer) are copied from src/App.css and src/WhatsNew.css and
   kept in sync by hand. Everything is scoped under .app like the rest of the
   site so a future merge into the bundle would not leak. */

html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; }

.app {
  --red: #E5342B;
  --red-dk: #C42B22;
  --green: #1B9E48;
  --ink: #0E1116;
  --ink-2: #3A3F47;
  --muted: #8A8E96;
  --line: #E7E8EC;
  --bg: #FFFFFF;
  --bg-2: #F5F6F8;
  --r: 22px;
  --shadow: 0 18px 50px -22px rgba(14, 17, 22, .28);
  --font: -apple-system, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", sans-serif;

  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  letter-spacing: -.01em;
  min-height: 100vh;
}

.app * { box-sizing: border-box; margin: 0; padding: 0; }
.app a { color: inherit; text-decoration: none; }
.app img { max-width: 100%; }
.app .wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

/* ---- chrome (from App.css) ---- */
.app .logo { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 18px; letter-spacing: -.02em; }
.app .ball { width: 34px; height: 34px; flex: none; border-radius: 8px; border: 1px solid rgba(14, 17, 22, .08); }

.app nav.site-nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .8); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.app .nav-in { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.app .nav-links { display: flex; gap: 28px; align-items: center; }
.app .nav-links a:not(.btn) { font-size: 14.5px; color: var(--ink-2); font-weight: 500; }
.app .nav-links a:not(.btn):hover, .app .nav-links a.active { color: var(--ink); }

.app .btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; border-radius: 999px; padding: 12px 22px; transition: .18s; cursor: pointer; border: 0; font-family: inherit; }
.app .btn-red { background: var(--red); color: #fff; }
.app .btn-red:hover { background: var(--red-dk); transform: translateY(-1px); }
.app .btn-sm { padding: 9px 18px; font-size: 14px; }

.app .mobile-menu-btn { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: 0; cursor: pointer; padding: 8px; }
.app .mobile-menu-btn span { display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px; transition: .2s; }

@media (max-width: 820px) {
  .app .mobile-menu-btn { display: flex; }
  .app .nav-links { position: absolute; top: 66px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 18px 40px -24px rgba(14, 17, 22, .35); flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 28px 20px; display: none; }
  .app .nav-links.open { display: flex; }
  .app .nav-links a { display: block; width: 100%; padding: 11px 0; font-size: 16px; }
  .app .nav-links .btn { width: auto; margin-top: 8px; }
}

.app .cta-row { display: flex; gap: 14px; justify-content: center; align-items: center; margin-top: 34px; flex-wrap: wrap; }
.app .appstore { display: inline-flex; align-items: center; gap: 11px; background: var(--ink); color: #fff; padding: 11px 22px 11px 20px; border-radius: 14px; transition: .18s; }
.app .appstore:hover { transform: translateY(-1px); background: #000; }
.app .appstore svg { width: 26px; height: 26px; }
.app .appstore .s { font-size: 11px; opacity: .78; line-height: 1.1; display: block; }
.app .appstore .b { font-size: 18px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.app .playstore svg { fill: #3DDC84; }

/* CTA + footer (from WhatsNew.css) */
.app .wn-cta { background: var(--bg-2); border: 1px solid var(--line); border-radius: 24px; padding: 40px; text-align: center; margin: 20px 0 70px; }
.app .wn-cta h3 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 22px; }
.app .wn-cta p { color: var(--ink-2); font-size: 16px; margin-bottom: 22px; }
.app .wn-cta .cta-row { margin-top: 0; }

.app footer { border-top: 1px solid var(--line); padding: 40px 0; }
.app .wn-foot { max-width: 1120px; margin: 0 auto; padding: 0 28px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; align-items: center; color: var(--muted); font-size: 13.5px; }
.app .wn-foot a { color: var(--ink-2); }
.app .wn-foot a:hover { color: var(--red); }
.app .wn-foot-links { display: flex; gap: 22px; flex-wrap: wrap; }

/* ---- guide layout ---- */
.guide .guide-wrap { max-width: 820px; margin: 0 auto; padding: 0 28px; }

.guide .crumbs { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); padding: 26px 0 0; }
.guide .crumbs a { color: var(--ink-2); }
.guide .crumbs a:hover { color: var(--red); }
.guide .crumbs [aria-current] { color: var(--muted); }

.guide .guide-head { padding: 22px 0 8px; }
.guide h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.06; font-weight: 800; letter-spacing: -.035em; max-width: 20ch; }
.guide .lede { font-size: clamp(17px, 2.2vw, 20px); color: var(--ink-2); max-width: 58ch; margin-top: 16px; }
.guide .byline { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); }
.guide .byline .by { font-size: 15px; color: var(--ink); }
.guide .byline .author { font-weight: 700; }
.guide .byline .role { font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }
.guide .dateline { font-size: 13.5px; color: var(--muted); margin-top: 8px; font-weight: 500; }

.guide .toc { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; margin: 26px 0 10px; }
.guide .toc p { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.guide .toc ol { list-style: none; display: grid; gap: 6px; }
.guide .toc a { color: var(--ink-2); font-size: 15px; }
.guide .toc a:hover { color: var(--red); }

/* prose */
.guide .prose { padding: 10px 0 30px; font-size: 17px; line-height: 1.65; color: var(--ink); }
.guide .prose h2 { font-size: 27px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; margin: 46px 0 14px; scroll-margin-top: 84px; }
.guide .prose h3 { font-size: 19.5px; font-weight: 700; letter-spacing: -.02em; margin: 30px 0 10px; scroll-margin-top: 84px; }
.guide .prose p { margin: 0 0 16px; }
.guide .prose ul, .guide .prose ol { margin: 0 0 18px; padding-left: 24px; }
.guide .prose li { margin: 6px 0; }
.guide .prose li::marker { color: var(--red); font-weight: 700; }
.guide .prose a { color: var(--red); text-decoration: underline; text-decoration-color: rgba(229, 52, 43, .35); text-underline-offset: 3px; }
.guide .prose a:hover { text-decoration-color: var(--red); }
.guide .prose strong { font-weight: 650; }
.guide .prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.guide .prose blockquote { margin: 22px 0; padding: 16px 20px; background: var(--bg-2); border-radius: 14px; color: var(--ink-2); }
.guide .prose blockquote p:last-child { margin-bottom: 0; }
.guide .prose hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }

/* board tables */
.guide .board-table { margin: 22px 0 26px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.guide .board-table table { border-collapse: collapse; width: 100%; font-size: 15.5px; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.guide .table-caption { text-align: left; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.guide .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.guide .board-table th, .guide .board-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.guide .board-table thead th { background: var(--bg-2); font-size: 13px; font-weight: 700; color: var(--ink-2); }
.guide .board-table tbody th { font-weight: 650; white-space: nowrap; }
.guide .board-table tbody tr:last-child th, .guide .board-table tbody tr:last-child td { border-bottom: 0; }
.guide .board-table td:not(:first-child) { font-variant-numeric: tabular-nums; }
.guide .table-note { font-size: 14px; color: var(--muted); margin-top: 10px; }

/* lane diagram */
.guide .lane { margin: 24px auto 30px; max-width: 360px; }
.guide .lane svg { display: block; width: 100%; height: auto; }
.guide .lane figcaption, .guide .shot figcaption { font-size: 14px; color: var(--muted); text-align: center; margin-top: 10px; }
.guide .lane-bed { fill: #F3E4C9; }
.guide .lane-gutter { fill: #D9D6CE; }
.guide .lane-approach { fill: var(--bg-2); }
.guide .lane-foul { stroke: var(--ink); stroke-width: 2; }
.guide .lane-boardline { stroke: rgba(14, 17, 22, .12); stroke-width: 1; }
.guide .lane-arrow { fill: #6B6252; }
.guide .lane-arrow.target { fill: var(--red); }
.guide .lane-num { font: 600 11px var(--font); fill: var(--muted); }
.guide .lane-path { fill: none; stroke: var(--red); stroke-width: 2.5; stroke-dasharray: 6 5; stroke-linejoin: round; }
.guide .lane-pin { fill: #fff; stroke: var(--ink-2); stroke-width: 1.5; }
.guide .lane-pin.down { fill: #EEE; stroke: #C9CBD0; }
.guide .lane-pin.key { fill: var(--red); stroke: var(--red-dk); }
.guide .lane-pinnum { font: 700 9px var(--font); fill: var(--ink-2); pointer-events: none; }
.guide .lane-pin.down + .lane-pinnum { fill: #B8BBC1; }
.guide .lane-pinnum.key { fill: #fff; }
.guide .lane-stance { fill: var(--ink); }
.guide .lane-label { font: 600 12px var(--font); fill: var(--ink); }
.guide .lane-target-label { fill: var(--red); paint-order: stroke; stroke: #F3E4C9; stroke-width: 4px; stroke-linejoin: round; }

/* screenshots and clips */
.guide .shot { margin: 26px auto 30px; max-width: 300px; }
.guide .phone-frame { position: relative; border-radius: 46px; background: #0E1116; padding: 11px; box-shadow: var(--shadow); border: 1px solid #20242c; }
.guide .phone-frame .notch { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 108px; height: 28px; background: #0E1116; border-radius: 0 0 16px 16px; z-index: 3; }
.guide .phone-frame img, .guide .phone-frame video { display: block; width: 100%; height: auto; border-radius: 36px; }
.guide .phone-frame .poster-fallback { display: none; }
@media (prefers-reduced-motion: reduce) {
  .guide .phone-frame video { display: none; }
  .guide .phone-frame .poster-fallback { display: block; }
}
.guide .shot-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.guide .shot-row .shot { margin: 16px auto; }
@media (max-width: 560px) { .guide .shot-row { grid-template-columns: 1fr; } }

/* FAQ h3s get a little room */
.guide .prose h3 + p { margin-top: 4px; }

/* related */
.guide .related { padding: 10px 0 30px; border-top: 1px solid var(--line); margin-top: 20px; }
.guide .related h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 28px 0 16px; }
.guide .rel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.guide .rel-card { display: block; background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; transition: .18s; }
.guide .rel-card:hover { border-color: #F2C9C6; background: #fff; box-shadow: var(--shadow); }
.guide .rel-card b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 4px; }
.guide .rel-card span { font-size: 14px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 560px) { .guide .rel-grid { grid-template-columns: 1fr; } }

/* hub */
.guide .guide-group { padding: 14px 0 20px; }
.guide .guide-group h2 { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin: 26px 0 14px; }
.guide .guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.guide .guide-card { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 22px 18px; transition: .18s; }
.guide .guide-card:hover { border-color: #F2C9C6; box-shadow: var(--shadow); transform: translateY(-1px); }
.guide .guide-card h3 { font-size: 19px; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; }
.guide .guide-card p { font-size: 14.5px; color: var(--ink-2); flex: 1; }
.guide .guide-card .meta { font-size: 12.5px; color: var(--muted); font-weight: 500; }
@media (max-width: 620px) { .guide .guide-grid { grid-template-columns: 1fr; } }