/* Public pages: landing, games, rules, connector, contact, legal (pages/site).
   Plain CSS on the design tokens and box.css (hg- components), no Tailwind,
   so these pages don't depend on the app's CSS build. The look is the card
   box: docs/STYLE_GUIDE.md. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--hg-cream);
  color: var(--hg-navy);
  font-family: var(--font-family);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--hg-navy); text-underline-offset: 3px; }
a:hover { color: var(--hg-navy-deep); }
img { max-width: 100%; }
h1, h2, h3 { text-wrap: balance; }
::selection { background: var(--hg-gold); color: var(--hg-navy); }

.s-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.s-narrow { max-width: 820px; }

/* ── Header / footer (hg-head, hg-foot in box.css) ─────────────────────── */
/* .s-top: sticky, like every .hg-head (box.css). */
.s-foot-blurb { max-width: 40rem; text-transform: none; letter-spacing: 0; font-size: 0.875rem; }

/* ── Buttons (the old names, in the new look) ──────────────────────────── */
.s-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  background: var(--hg-gold); color: var(--hg-navy) !important;
  border: 2px solid var(--hg-navy); box-shadow: 4px 4px 0 var(--hg-navy);
  font: inherit; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border-radius: 0;
}
.s-btn:hover { background: var(--color-primary-hover); }
.s-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--hg-navy); }
.s-btn--quiet { background: transparent; box-shadow: none; font-weight: 700; }
.s-btn--quiet:hover { background: rgba(29, 42, 68, 0.06); }
.s-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* ── Landing ───────────────────────────────────────────────────────────── */
.s-hero { padding: 56px 24px 64px; }
.s-hero-box {
  max-width: 1120px; margin: 0 auto;
  border: 3px solid var(--hg-navy); outline: 1px solid var(--hg-navy); outline-offset: 6px;
  padding: 48px 40px; background: var(--hg-paper);
  display: flex; flex-wrap: wrap; gap: 44px; align-items: center;
}
.s-hero-copy { flex: 1 1 480px; min-width: 0; }
.s-hero h1 {
  margin: 16px 0 0;
  font-family: var(--font-family-display); font-weight: 900;
  font-size: clamp(2.9rem, 7vw, 5.25rem); line-height: 0.92; letter-spacing: 0.01em;
  text-transform: uppercase; color: var(--hg-navy);
}
.s-hero h1 span { color: var(--hg-oxblood); display: block; }
.s-rule { width: 140px; height: 0; border-top: 3px double var(--hg-navy); margin: 24px 0; }
.s-hero-lede { margin: 0; max-width: 34rem; font-size: 1.25rem; color: var(--hg-ink-2); }
.s-hero .s-ctas { margin-top: 28px; }
.s-small { margin: 16px 0 0; font-size: 0.9375rem; color: var(--hg-ink-3); }

.s-describe { flex: 1 1 360px; min-width: 0; }
.s-describe textarea { margin-top: 8px; min-height: 140px; }
.s-describe .hg-btn { margin-top: 12px; }
.s-checks {
  list-style: none; margin: 16px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--hg-navy);
  font-family: var(--font-family-mono); font-size: 0.95rem; display: flex; flex-direction: column; gap: 6px;
}
.s-checks li { display: flex; gap: 10px; }
.s-checks b { color: var(--hg-oxblood); }

.s-band { padding: 68px 0; }
.s-band .hg-kicker { text-align: center; color: var(--hg-blush); }
.s-band h2 {
  margin: 10px 0 0; text-align: center;
  font-family: var(--font-family-display); font-weight: 900;
  font-size: clamp(2.4rem, 6vw, 4rem); line-height: 0.95; letter-spacing: 0.02em; text-transform: uppercase;
}
.s-band-lede { margin: 14px auto 0; max-width: 42rem; text-align: center; color: var(--hg-blush); }
.s-three {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px;
}
.s-three li {
  border: 1px solid rgba(201, 168, 76, 0.7); outline: 1px solid rgba(201, 168, 76, 0.35); outline-offset: 5px;
  padding: 26px 24px; background: rgba(40, 6, 9, 0.22);
}
.s-three .s-n { font-family: var(--font-family-display); font-weight: 900; font-size: 3.4rem; line-height: 1; color: var(--hg-gold); }
.s-three h3 { margin: 8px 0 6px; font-family: var(--font-family-display); font-weight: 800; font-size: 1.75rem; text-transform: uppercase; }
.s-three p { margin: 0; font-size: 1rem; color: var(--hg-blush); }
.s-band .s-ctas { justify-content: center; margin-top: 38px; }
.s-band .s-btn { box-shadow: 4px 4px 0 #2A0609; }
.s-band .s-btn--quiet { color: var(--hg-cream) !important; border-color: var(--hg-cream); box-shadow: none; }
.s-band .s-btn--quiet:hover { background: rgba(242, 232, 208, 0.08); }

.s-navy { background-color: var(--hg-navy); background-image: var(--hg-weave); color: var(--hg-cream); }
.s-navy .s-wrap { padding-top: 64px; padding-bottom: 64px; }
.s-navy h2 {
  margin: 0; text-align: center; font-family: var(--font-family-display); font-weight: 900;
  font-size: clamp(2.2rem, 5vw, 3.25rem); line-height: 1; letter-spacing: 0.03em; text-transform: uppercase;
}
.s-navy .s-center-lede { margin: 10px auto 0; max-width: 40rem; text-align: center; color: var(--hg-cream-2); }
.s-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin-top: 36px; }
.s-feature { background: var(--hg-cream); color: var(--hg-navy); padding: 24px; outline: 1px solid var(--hg-gold); outline-offset: -8px; }
.s-feature .s-no { margin: 0; font-family: var(--font-family-mono); font-weight: 700; color: var(--hg-oxblood); }
.s-feature h3 { margin: 6px 0; font-family: var(--font-family-display); font-weight: 800; font-size: 1.75rem; line-height: 1; text-transform: uppercase; }
.s-feature p { margin: 0; font-size: 1rem; color: var(--hg-ink-2); }

.s-house { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; padding-top: 72px; padding-bottom: 72px; }
.s-house > div { flex: 1 1 460px; min-width: 0; }
.s-house h2 { margin: 0; font-family: var(--font-family-display); font-weight: 900; font-size: clamp(2.2rem, 5vw, 3.25rem); line-height: 1; text-transform: uppercase; }
.s-house .s-sub { margin: 8px 0 22px; color: var(--hg-ink-3); }
.s-more { margin: 20px 0 0; }
.s-more a { font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.s-sheet { flex: 1 1 360px; min-width: 0; margin: 0; background: var(--hg-card); border: 2px solid var(--hg-navy); padding: 22px 24px; }
.s-sheet figcaption { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 3px double var(--hg-navy); padding-bottom: 8px; }
.s-sheet figcaption b { font-family: var(--font-family-display); font-weight: 900; font-size: 1.9rem; text-transform: uppercase; }
.s-sheet table { width: 100%; border-collapse: collapse; font-family: var(--font-family-mono); font-size: 1.05rem; margin-top: 8px; }
.s-sheet th { text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.1em; text-align: right; padding: 6px 0; }
.s-sheet th:first-child, .s-sheet td:first-child { text-align: left; }
.s-sheet td { text-align: right; padding: 7px 0; border-top: 1px solid var(--hg-rule); }
.s-sheet td:last-child { font-weight: 700; }
.s-sheet .s-down { color: var(--hg-oxblood); }
.s-sheet tr.s-total td { border-top: 3px double var(--hg-navy); font-weight: 700; }
.s-sheet p { margin: 10px 0 0; font-size: 0.875rem; color: var(--hg-ink-3); }

.s-section { padding: 56px 0; border-top: 3px double var(--hg-navy); }
.s-section h2 { margin: 0 0 10px; font-family: var(--font-family-display); font-weight: 900; font-size: 2.25rem; line-height: 1; text-transform: uppercase; }
.s-lede { color: var(--hg-ink-2); margin: 0 0 24px; max-width: 46em; }

.s-faq dt { font-weight: 700; margin-top: 18px; }
.s-faq dd { margin: 4px 0 0; color: var(--hg-ink-2); }

/* ── Game cards (games index, more games) ──────────────────────────────── */
.s-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.s-card {
  background: var(--hg-card); border: 2px solid var(--hg-navy);
  padding: 18px 20px; color: var(--hg-navy);
}
.s-card h3 { margin: 0; font-family: var(--font-family-display); font-weight: 900; font-size: 1.6rem; line-height: 1; text-transform: uppercase; }
.s-card .s-tag { display: block; margin: 6px 0 8px; font-family: var(--font-family-mono); font-size: 0.875rem; color: var(--hg-oxblood); }
.s-card p { margin: 0; color: var(--hg-ink-2); font-size: 0.95rem; }
a.s-card { text-decoration: none; display: block; transition: transform 150ms ease, box-shadow 150ms ease; }
a.s-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--hg-navy); }
a.s-card:focus-visible { outline: 3px solid var(--hg-gold); outline-offset: 2px; }

/* ── Inner pages ───────────────────────────────────────────────────────── */
.s-page { padding: 36px 0 64px; }
.s-crumbs { font-family: var(--font-family-mono); font-size: 0.9375rem; color: var(--hg-ink-3); margin-bottom: 14px; }
.s-crumbs a { color: var(--hg-ink-3); }
.s-page h1 {
  margin: 0 0 14px; font-family: var(--font-family-display); font-weight: 900;
  font-size: clamp(2.6rem, 6vw, 4rem); line-height: 0.95; text-transform: uppercase;
}
.s-page h1 span { color: var(--hg-oxblood); display: block; }
.s-page h2 {
  margin: 40px 0 10px; font-family: var(--font-family-display); font-weight: 900;
  font-size: 2rem; line-height: 1.05; text-transform: uppercase;
  border-bottom: 3px double var(--hg-navy); padding-bottom: 6px;
}
.s-page .s-lede { font-size: 1.15rem; }
.s-steps { padding-left: 1.3em; }
.s-steps li { margin: 8px 0; }
.s-steps b { font-family: var(--font-family-mono); }

/* Rules page */
.s-rules { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 14px; align-items: flex-start; }
.s-rules > article { flex: 1 1 600px; min-width: 0; }
.s-rules > aside { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.s-rules h1 { font-size: clamp(2.8rem, 7vw, 4.75rem); line-height: 0.92; }
.s-facts { display: flex; flex-wrap: wrap; margin: 24px 0 0; border: 2px solid var(--hg-navy); }
.s-facts > div { flex: 1 1 160px; padding: 12px 16px; border-right: 1px solid var(--hg-navy); }
.s-facts > div:last-child { border-right: 0; }
.s-facts dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hg-ink-3); }
.s-facts dd { margin: 2px 0 0; font-family: var(--font-family-mono); font-size: 1.25rem; font-weight: 700; }
.s-hand { list-style: none; margin: 0; padding: 0; }
.s-hand li { display: flex; gap: 18px; padding: 14px 0; border-bottom: 1px dashed var(--hg-navy); }
.s-hand li:last-child { border-bottom: 0; }
.s-hand .s-n { flex: 0 0 42px; font-family: var(--font-family-display); font-weight: 900; font-size: 2.1rem; line-height: 1; color: var(--hg-oxblood); }
.s-hand strong { font-family: var(--font-family-mono); font-size: 1.125rem; }
.s-wins p { margin: 12px 0 0; }
.s-deal { padding: 26px; border: 4px double var(--hg-gold); }
.s-deal h2, .s-yours h2 { margin: 0; border: 0; padding: 0; font-size: 2.1rem; line-height: 1; }
.s-deal p { margin: 10px 0 0; color: var(--hg-blush); }
.s-deal .s-btn { margin-top: 16px; box-shadow: 4px 4px 0 #2A0609; }
.s-yours { background: var(--hg-card); border: 2px solid var(--hg-navy); box-shadow: 8px 8px 0 var(--hg-navy); padding: 22px; }
.s-yours h2 { font-size: 1.75rem; }
.s-yours p { margin: 8px 0 0; font-size: 1rem; color: var(--hg-ink-2); }
.s-yours .s-btn { margin-top: 14px; }
.s-also h2 { margin: 0; font-size: 1.5rem; padding-bottom: 4px; }
.s-also .hg-menu { font-size: 1rem; }

/* ── Forms (contact) ───────────────────────────────────────────────────── */
.s-beta { margin-left: 2px; }
.s-form { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.s-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.s-form input, .s-form select, .s-form textarea {
  font: inherit; font-size: 1.0625rem; font-weight: 400; letter-spacing: 0; text-transform: none;
  min-height: 46px; padding: 0 12px; border-radius: 0;
  background: var(--hg-paper); color: var(--hg-navy); border: 2px solid var(--hg-navy);
}
.s-form textarea { resize: vertical; padding: 12px 14px; font-family: var(--font-family-mono); line-height: 1.5; }
.s-form input:focus, .s-form select:focus, .s-form textarea:focus { outline: 3px solid var(--hg-gold); outline-offset: 1px; }
.s-form .s-btn { align-self: flex-start; }
.s-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 16px; }
.s-opt { font-weight: 400; color: var(--hg-ink-3); font-size: 0.85rem; letter-spacing: 0; text-transform: none; }
.s-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.s-note { padding: 12px 14px; margin: 0 0 16px; border: 2px solid var(--hg-navy); border-left-width: 6px; background: var(--hg-paper); }
.s-note--ok { border-color: var(--color-success-text); color: var(--hg-navy); }
.s-note--bad { border-color: var(--hg-oxblood); color: var(--hg-oxblood); background: #FBEFEA; }

/* ── Terms and privacy (pages/site/legal.rs) ─────────────────────────────── */
.s-legal h2 { font-size: 1.6rem; }
.s-legal ul { padding-left: 1.25rem; }
.s-legal li { margin: 0.35rem 0; }
.s-table-wrap { overflow-x: auto; margin: 1rem 0; border: 2px solid var(--hg-navy); background: var(--hg-card); }
.s-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.s-table th, .s-table td { text-align: left; vertical-align: top; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--hg-rule); }
.s-table th { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 3px double var(--hg-navy); }
.s-legal-also { margin-top: 2rem; color: var(--hg-ink-3); }
.s-check { display: flex; gap: 0.6rem; align-items: flex-start; }

/* ── The connector page (pages/site/connector.rs) ────────────────────────── */
.s-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0.5rem 0; }
.s-copy code {
  font-family: var(--font-family-mono); background: var(--hg-card); border: 2px solid var(--hg-navy);
  padding: 0.5rem 0.75rem; overflow-wrap: anywhere;
}
.s-copy .s-btn { min-height: 44px; }

@media (max-width: 640px) {
  .s-wrap { padding: 0 16px; }
  .s-hero { padding: 28px 12px 40px; }
  .s-hero-box { padding: 26px 18px; gap: 28px; outline-offset: 4px; }
  .s-band { padding: 48px 0; }
  .s-house { padding-top: 48px; padding-bottom: 48px; }
  .hg-nav .s-hide-sm { display: none; }
}