/* Landing page only. The game keeps its full-screen layout in style.css. */
body { display: block; overflow: auto; }
main { width: auto; max-width: none; height: auto; padding: 0; display: block; overflow: visible; }

.site { max-width: 1040px; margin: 0 auto; padding: 20px; }
.site-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 8px 0 16px; }
.brand { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 44px; gap: 2px; text-decoration: none; color: var(--navy); }
.brand .logo { font-size: 28px; }
.brand .tag { font: 600 12px/1 var(--font); color: var(--navy-60); letter-spacing: 0.01em; }
.site-nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font: 600 15px/1 var(--font); color: var(--navy-60); text-decoration: none; }
.site-nav a:hover { color: var(--navy); }
.site-nav a.head-btn, .site-nav a.head-btn:hover { color: var(--white); }
.site-nav .head-btn { width: auto; min-width: 0; padding: 12px 17px; font-size: 14px; }

/* Hero: cream, one clear promise, one tactile card. No second coral block. */
.intro { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(28px, 5vw, 64px); padding: clamp(28px, 5vw, 56px) 0 clamp(36px, 6vw, 64px); }
.eyebrow { font: 600 11px/1.2 var(--font); letter-spacing: 0.13em; text-transform: uppercase; color: var(--navy-60); margin: 0 0 12px; }
.intro h1 { font-size: clamp(44px, 6.7vw, 68px); line-height: 1.01; letter-spacing: -0.025em; margin: 0 0 20px; }
.lede { font: 500 18px/1.55 var(--font); color: var(--navy-60); max-width: 540px; margin: 0 0 24px; }
.intro-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.intro-actions .btn { width: auto; min-width: 220px; }
.intro .tiny { margin-top: 24px; }
.quiet-link { display: inline-flex; align-items: center; min-height: 44px; font: 600 15px/1.2 var(--font); color: var(--navy); text-decoration-line: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.quiet-link:hover { color: var(--coral-ink); }
.intro-actions .quiet-link, .seo-links .quiet-link, .legal .back { display: inline-flex; align-items: center; min-height: 44px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 10; padding: 12px 16px; background: var(--navy); color: var(--white); font: 600 14px/1 var(--font); border-radius: 0 0 10px 0; }
.skip:focus { left: 0; }
.tiny { font: 500 12px/1.45 var(--font); color: var(--navy-60); margin: 14px 0 0; }
.center { text-align: center; }

.poster { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 360px; margin: 0 auto; padding: 28px 22px 24px; background: var(--white); border-radius: 28px; box-shadow: 8px 8px 0 var(--coral-soft), 0 2px 0 var(--edge); }
@media (prefers-reduced-motion: no-preference) {
  .poster { animation: poster-in 0.7s 0.05s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .poster .letter { animation: letter-pop 0.8s 0.18s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
  .poster-chips .ex { animation: chip-in 0.45s 0.3s both; }
  .poster-chips .ex:nth-child(2) { animation-delay: 0.45s; }
}
@keyframes poster-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
@keyframes letter-pop { from { opacity: 0; transform: scale(0.75) rotate(-6deg); } }
@keyframes chip-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .steps .reveal:nth-child(2) { transition-delay: 0.08s; }
  .js .steps .reveal:nth-child(3) { transition-delay: 0.16s; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}
@media (hover: hover) {
  .site .btn:hover { transform: translateY(-2px); }
  .site .btn:active { transform: translateY(3px); }
}
.poster .dot { position: absolute; border-radius: 50%; }
.poster .dot.sun { width: 16px; height: 16px; background: var(--sun); right: 22px; top: 22px; }
.poster .dot.soft { width: 18px; height: 18px; background: var(--coral-soft); right: 30px; bottom: 40px; }
.poster .letter { display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; background: var(--coral); color: var(--white); font: 700 82px/1 var(--font); box-shadow: 0 6px 0 var(--coral-ink); margin: 6px 0 2px; }
.poster .label { margin: 0; }
.poster .note { margin: 0; }
.poster-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0; }
.poster-chips { flex-direction: column; flex-wrap: nowrap; width: 100%; gap: 8px; }
.poster-chips .ex { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--cream); border-radius: 16px; }
.poster-chips .ex .w { font: 600 20px/1.1 var(--font); color: var(--navy); }
.poster-chips .chip { font-size: 12px; padding: 8px 11px; }

/* A quiet ruled band instead of a floating stat card. */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 clamp(36px, 6vw, 64px); border-top: 2px solid var(--edge); border-bottom: 2px solid var(--edge); }
.facts div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 8px; border-right: 2px solid var(--edge); }
.facts div:last-child { border-right: 0; }
.facts b { font: 700 30px/1 var(--font); color: var(--coral); }
.facts span { font: 600 11px/1.3 var(--font); color: var(--navy-60); text-align: center; letter-spacing: 0.02em; }

.section { padding: clamp(40px, 7vw, 68px) 0; }
.section h2 { font-size: clamp(28px, 3.9vw, 40px); line-height: 1.08; letter-spacing: -0.015em; max-width: 760px; margin: 0 0 24px; }

/* Three editorial steps, not three floating cards. */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 44px); margin-top: 28px; }
.section-link { margin: 28px 0 0; }
.step { padding-top: 16px; border-top: 2px solid var(--edge); }
.step h3 { font: 700 20px/1.15 var(--font); margin: 12px 0 8px; }
.step p { font: 500 15px/1.55 var(--font); color: var(--navy-60); margin: 0; }
.num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--coral-soft); color: var(--coral-ink); font: 700 15px/1 var(--font); }

/* The one white panel in the middle: the category-game answer. */
.seo { background: var(--white); border-radius: 28px; padding: clamp(28px, 5vw, 44px); margin: clamp(24px, 4vw, 40px) 0; box-shadow: 0 2px 0 var(--edge); }
.seo h2 { font-size: clamp(26px, 3.4vw, 36px); }
.seo .tiny { margin-top: 16px; }
.seo-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; }
.seo-links .quiet-link { display: inline-block; }

/* One quiet card for all questions; rows separated by hairlines. */
.faq { max-width: 820px; margin-top: 8px; background: var(--white); border-radius: 24px; padding: 2px 22px; box-shadow: 0 2px 0 var(--edge); }
.faq details { border-bottom: 2px solid var(--cream); }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 0; font: 600 16px/1.3 var(--font); color: var(--navy); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 700 21px/1 var(--font); color: var(--coral); }
.faq details[open] summary::after { content: '−'; }
.faq p { margin: 0 0 18px; font: 500 15px/1.55 var(--font); color: var(--navy-60); max-width: 640px; }

.cta-panel { display: flex; flex-direction: column; align-items: center; gap: 18px; margin: clamp(30px, 6vw, 56px) 0 0; padding: clamp(32px, 6vw, 52px); border-radius: 28px; background: var(--navy); color: var(--white); text-align: center; }
.cta-panel .eyebrow { color: rgba(255, 255, 255, 0.78); margin: 0; }
.cta-panel h2 { color: var(--white); max-width: 680px; margin: 0; font-size: clamp(26px, 3.6vw, 36px); }
.cta-panel .btn { width: auto; min-width: 230px; margin: 6px 0 5px; background: var(--coral); box-shadow: 0 5px 0 var(--coral-ink); }
.cta-panel .tiny { color: rgba(255, 255, 255, 0.78); margin: 10px 0 0; }

.site-foot { display: flex; flex-direction: column; gap: 10px; padding: 30px 0 18px; margin-top: 36px; border-top: 2px solid var(--edge); font: 500 14px/1.5 var(--font); color: var(--navy-60); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.site-foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--navy-60); text-decoration: none; }
.site-foot a:hover, .site-foot a:focus-visible { color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }
.site-foot .tiny { margin: 4px 0 0; }

/* Legal and SEO article pages. */
.legal { max-width: 760px; margin: 0 auto; padding: 12px 0 70px; }
.legal h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.05; margin: 8px 0 12px; }
.legal h2 { font-size: 24px; line-height: 1.15; margin: 32px 0 10px; }
.legal h3 { font: 700 19px/1.25 var(--font); margin: 24px 0 6px; }
.legal p, .legal li { font: 500 16px/1.6 var(--font); color: var(--navy-60); }
.legal p { margin: 0 0 14px; }
.legal ul, .legal ol { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--navy); text-decoration-line: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.legal .tiny { margin-top: 22px; }
.legal .back { display: inline-block; margin-bottom: 16px; text-decoration: none; }
.legal .back:hover, .legal .back:focus-visible { text-decoration: underline; }
.legal .btn { width: auto; min-width: 220px; }
.legal a.btn { text-decoration: none; }
.table-wrap { overflow-x: auto; margin: 16px 0 24px; }
.legal table { width: 100%; border-collapse: collapse; font: 500 14px/1.45 var(--font); color: var(--navy-60); }
.legal th, .legal td { padding: 10px 12px; text-align: left; border-bottom: 2px solid var(--cream); vertical-align: top; }
.legal th { font-weight: 700; color: var(--navy); background: var(--cream); }
.legal th:first-child { border-radius: 10px 0 0 0; }
.legal th:last-child { border-radius: 0 10px 0 0; }

@media (max-width: 820px) {
  .intro { grid-template-columns: 1fr; padding-top: 24px; }
  .intro-copy { order: 1; max-width: 620px; margin: 0 auto; text-align: center; }
  .intro .lede { margin-left: auto; margin-right: auto; }
  .intro-actions { justify-content: center; }
  .poster { order: 2; max-width: 340px; }
  .steps { grid-template-columns: 1fr; gap: 18px; }
  .step { padding-top: 14px; }
  .site-nav { gap: 14px; }
}
@media (max-width: 520px) {
  .site { padding: 14px; }
  .site-head { padding-bottom: 12px; }
  .site-nav { width: 100%; justify-content: space-between; gap: 10px; }
  .site-nav a { font-size: 13px; }
  .site-nav .head-btn { display: none; }
  .intro h1 { font-size: clamp(38px, 12vw, 50px); }
  .lede { font-size: 17px; }
  .intro-actions .btn { width: 100%; }
  .intro-actions { gap: 12px; }
  .poster { padding: 22px 16px; }
  .poster .dot.soft { display: none; }
  .poster .letter { width: 118px; height: 118px; font-size: 74px; }
  .facts b { font-size: 26px; }
  .facts span { font-size: 10px; }
  .cta-panel .btn { width: 100%; min-width: 0; }
  .faq { padding: 2px 16px; }
}

/* phones: the hero already links to the rules, so the header is just the logo */
@media (max-width: 640px) { .site-head .site-nav { display: none; } }

/* live line: today's letter, so the page feels like a daily thing */
.today { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 8px 14px; border-radius: 99px; background: var(--coral-soft); color: #a3331a; font: 600 14px/1.2 var(--font); }
.today b { font-weight: 700; }
.today .live { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 0 rgba(255, 90, 60, 0.5); }
@media (prefers-reduced-motion: no-preference) { .today .live { animation: live 2s infinite; } }
@keyframes live { 70% { box-shadow: 0 0 0 7px rgba(255, 90, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 90, 60, 0); } }

/* sharing: the grid is the viral part */
.share { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.share h2 { margin: 0 0 14px; }
.share .lede { margin-bottom: 18px; }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; font: 600 14px/1.3 var(--font); color: var(--navy-60); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.share-card { max-width: 340px; width: 100%; margin: 0 auto; padding: 22px 24px; background: var(--white); border-radius: 22px; box-shadow: 8px 8px 0 var(--coral-soft), 0 2px 0 var(--edge); }
.share-card p { margin: 0; }
.sc-head { font: 700 15px/1.3 var(--font); color: var(--navy); }
.sc-grid { font-size: 34px; line-height: 1.2; letter-spacing: 4px; margin: 12px 0 !important; }
.sc-score { font: 500 15px/1.4 var(--font); color: var(--navy-60); }
@media (max-width: 860px) {
  .share { grid-template-columns: 1fr; text-align: center; }
  .share .lede { margin-left: auto; margin-right: auto; }
  .legend { justify-content: center; }
  .intro-copy .today { margin-left: auto; margin-right: auto; }
}