/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

:root {
  /* landing page */
  --paper:   #faf8f3;
  --ink:     #1c1917;
  --ink-mid: #44403c;
  --ink-dim: #78716c;
  --rule:    #d6d3cd;
  --max:     1100px;
  /* game colors */
  --c0:#f9df6d; --c1:#a0c35a; --c2:#b0c4ef; --c3:#ba81c5;
  /* game UI */
  --gbg:#ffffff; --gtext:#1a1a1b;
  --card-bg:#efefe6; --card-hover:#e0e0d5;
  --card-sel:#5a594e; --card-sel-text:#ffffff;
}

body {
  font-family: 'Source Serif 4', Georgia, serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}


/* ── Responsive ── */
@media(max-width:900px){
  .about-grid      { grid-template-columns:1fr; }
  .htp-steps       { grid-template-columns:1fr 1fr; gap:36px; }
  .diff-row        { grid-template-columns:1fr 1fr; }
  .tips-grid       { grid-template-columns:1fr 1fr; }
  .faq-layout      { grid-template-columns:1fr; gap:32px; }
  .cta-band-inner  { grid-template-columns:1fr; gap:28px; }
  .footer-inner    { grid-template-columns:1fr 1fr; gap:36px; }
}
@media(max-width:600px){
  .topbar-nav      { display:none; }
  .htp-steps       { grid-template-columns:1fr; }
  .tips-grid       { grid-template-columns:1fr; }
  .footer-inner    { grid-template-columns:1fr; }
  .footer-bottom   { flex-direction:column; align-items:flex-start; gap:12px; }
  .diff-row        { grid-template-columns:1fr 1fr; }
}