/* Maxi Score Sheet static site. No build step, no CDN.

   Self-hosted in the formats we have: Carter One as TrueType, Montserrat as
   CFF OpenType. Both load everywhere, but the four files together weigh about
   200 KB where WOFF2 would be nearer 90 KB. Worth converting before this page
   sees real traffic.

   The three Montserrat faces are separate files under one family, selected by
   font-weight. Declaring them this way is what lets `font-weight: 700` pick
   the real bold cut instead of having the browser synthesise one. */

@font-face { font-family: 'Carter One'; src: url('../fonts/CarterOne-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Light.otf') format('opentype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }

:root {
  --brand: #99161D;
  --brand-dark: #8D1117;
  --gold: #DFAB3D;
  --orange: #E1882E;
  --red: #D43D22;
  --ink: #333333;
  --ink-soft: #5B5B5B;
  --bg: #FFFFFF;
  --bg-alt: #F8F8F8;
  --rule: #EBE7E4;
  --link: #99161D;
  --link-hover: #D43D22;
  --display: 'Carter One', Georgia, serif;
  --body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #7E1218;
    --brand-dark: #6B0F14;
    --ink: #F2EFEC;
    --ink-soft: #C4BCB7;
    --bg: #201A1A;
    --bg-alt: #2A2222;
    --rule: #3A2F2F;
    --link: #DFAB3D;
    --link-hover: #E1882E;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
img { max-width: 100%; height: auto; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }

h2 { margin: 0 0 8px; font-family: var(--display); font-weight: 400; font-size: 32px; line-height: 1.12; }
h3 { margin: 12px 0 0; font-family: var(--body); font-weight: 700; font-size: 18px; line-height: 1.35; }
p { margin: 0 0 14px; text-wrap: pretty; }

/* Hero */
.hero {
  background: var(--brand);
  color: #FFFFFF;
  padding: 56px 0 64px;
  background-image: repeating-linear-gradient(rgba(255, 255, 255, .05) 0 1px, transparent 1px 34px);
}
.hero-inner { display: flex; flex-direction: column; align-items: center; gap: 36px; text-align: center; }
.hero-icon { width: 132px; height: auto; filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .3)); }
.hero-text { display: flex; flex-direction: column; gap: 22px; align-items: center; }
.logotype { margin: 0; font-family: var(--display); font-weight: 400; font-size: 48px; line-height: 1.02; }
.logotype span { display: block; }
.logotype-top { color: var(--gold); }
.lede { margin: 0; max-width: 520px; font-size: 18px; color: rgba(255, 255, 255, .92); }
.stores { margin: 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btn { display: inline-flex; align-items: center; padding: 15px 24px; text-decoration: none; font-weight: 700; font-size: 15px; }
.btn-primary { background: #FFFFFF; color: var(--brand); }
.btn-primary:hover { color: var(--brand-dark); }
.btn-ghost { color: #FFFFFF; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }
.btn-ghost:hover { color: var(--gold); }

/* Sections */
.section { padding: 64px 0; background: var(--bg); }
.section-alt { background: var(--bg-alt); }
.cols { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.col { flex: 1 1 320px; min-width: 280px; }
.eyebrow { margin: 0 0 14px; font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--link); }

.langs {
  list-style: none;
  margin: 0; padding: 2px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 2px;
  background: var(--rule);
}
.langs li { background: var(--bg-alt); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; font-weight: 400; font-size: 16px; }
.section-alt .langs li { background: var(--bg); }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: .1em; color: var(--ink-soft); }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; margin-top: 32px; }
.feature p { margin: 8px 0 0; font-size: 16px; }
.pip { display: block; width: 24px; height: 24px; transform: rotate(45deg); }
.pip-gold { background: var(--gold); }
.pip-orange { background: var(--orange); }
.pip-red { background: var(--red); }
.pip-brand { background: var(--brand); }

.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; align-items: start; max-width: 1128px; margin: 32px auto 0; }
.shot img { display: block; width: 100%; }

/* Prose pages (privacy policy) */
.page-head { background: var(--brand); color: #FFFFFF; padding: 40px 0 36px; }
.page-head a { color: var(--gold); text-decoration: none; font-size: 15px; font-weight: 700; }
.page-head a:hover { color: #FFFFFF; text-decoration: underline; }
.page-title { margin: 14px 0 6px; font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1.1; }
.page-date { margin: 0; font-size: 15px; color: rgba(255, 255, 255, .82); }

.prose { max-width: 720px; padding-top: 56px; padding-bottom: 72px; }
.prose h2 { margin: 44px 0 10px; font-size: 26px; }
.prose h2:first-of-type { margin-top: 0; }
.prose h3 { margin: 26px 0 4px; font-size: 17px; }
.prose p, .prose li { font-size: 17px; }
.prose ul { margin: 0 0 14px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }

.callout {
  margin: 0 0 28px;
  padding: 20px 22px;
  background: var(--bg-alt);
  border-left: 4px solid var(--gold);
}
.callout p:last-child { margin-bottom: 0; }

.prose table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 15px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule); }
.prose th { font-weight: 700; }
.table-scroll { overflow-x: auto; }

@media (min-width: 760px) {
  .page-head { padding: 56px 0 48px; }
  .page-title { font-size: 44px; }
  .prose h2 { font-size: 30px; }
}

/* Footer */
.footer { background: var(--brand-dark); color: rgba(255, 255, 255, .9); padding: 40px 0; font-size: 15px; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }
.footer p { margin: 0; }
.footer a { color: var(--gold); text-decoration: none; }
.footer a:hover { color: #FFFFFF; text-decoration: underline; }
.linkish {
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; color: var(--gold); text-decoration: none; cursor: pointer;
}
.linkish:hover { color: #FFFFFF; text-decoration: underline; }

/* Consent bar, never a modal: the store buttons stay reachable */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: var(--bg-alt); color: var(--ink);
  border-top: 2px solid var(--brand);
  padding: 16px 0;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .12);
}
.consent[hidden] { display: none; }
/* the fixed bar is out of flow, so reserve room and it never covers the footer */
body.consent-open { padding-bottom: 180px; }
@media (min-width: 760px) { body.consent-open { padding-bottom: 120px; } }
.consent-inner { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.consent-text { margin: 0; flex: 1 1 320px; font-size: 15px; line-height: 1.55; }
.consent-text a { color: var(--link); }
.consent-actions { display: flex; gap: 12px; flex: 0 0 auto; }
.btn-consent {
  min-width: 132px; justify-content: center;
  padding: 13px 22px; font-size: 15px;
  background: var(--brand); color: #FFFFFF; border: 0; cursor: pointer;
}
.btn-consent:hover { background: var(--brand-dark); color: #FFFFFF; }
@media (prefers-color-scheme: dark) {
  .btn-consent { background: var(--gold); color: #2A1A0A; }
  .btn-consent:hover { background: var(--orange); color: #2A1A0A; }
}

@media (min-width: 760px) {
  body { font-size: 18px; }
  .hero { padding: 88px 0 96px; }
  .hero-inner { flex-direction: row; text-align: left; gap: 64px; }
  .hero-text { align-items: flex-start; }
  .hero-icon { width: 188px; }
  .logotype { font-size: 72px; }
  .lede { font-size: 20px; }
  .stores { justify-content: flex-start; }
  h2 { font-size: 42px; }
  .section { padding: 96px 0; }
}