@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --navy:#071b31;
  --navy-soft:#0d2a49;
  --gold:#d4a24c;
  --gold-light:#e6c27a;
  --ink:#111827;
  --muted:#5e6675;
  --paper:#f8f7f4;
  --surface:#ffffff;
  --line:#dedbd4;
}

* { box-sizing:border-box; }

html {
  scroll-behavior:smooth;
  background:var(--paper);
}

body {
  margin:0;
  overflow-x:hidden;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.65;
}

a { color:inherit; }

.public-header {
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:12px max(24px,calc((100vw - 1180px) / 2));
  border-bottom:1px solid rgba(7,27,49,.12);
  background:rgba(255,255,255,.96);
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--navy);
  font-size:22px;
  font-weight:900;
  line-height:1;
  text-decoration:none;
}

.brand > span > span { color:#b67b1d; }

.brand img { flex:0 0 auto; }

.header-cta,
.primary-cta {
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:11px 18px;
  border:1px solid #a96f13;
  border-radius:8px;
  background:var(--gold);
  color:#17120b;
  font-size:14px;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 8px 20px rgba(119,77,13,.18);
}

.header-cta:hover,
.primary-cta:hover { background:var(--gold-light); }

.header-cta:focus-visible,
.primary-cta:focus-visible,
.brand:focus-visible,
summary:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:3px;
}

.hero {
  position:relative;
  min-height:min(690px,calc(100dvh - 76px));
  display:flex;
  align-items:center;
  isolation:isolate;
  padding:64px max(24px,calc((100vw - 1180px) / 2));
  overflow:hidden;
  background-image:url('/assets/images/brand/dartsboard-social-1200x630.png');
  background-position:center;
  background-size:cover;
}

.hero-overlay {
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(3,18,34,.87);
}

.hero-content {
  width:min(720px,100%);
  color:#fff;
}

.eyebrow,
.section-kicker {
  margin:0 0 10px;
  color:var(--gold-light);
  font-size:12px;
  font-weight:800;
  letter-spacing:0;
  text-transform:uppercase;
}

.hero h1 {
  max-width:760px;
  margin:0 0 22px;
  color:#fff;
  font-size:clamp(38px,6vw,68px);
  line-height:1.04;
}

.hero p {
  max-width:680px;
  margin:0 0 13px;
  color:rgba(255,255,255,.9);
  font-size:17px;
}

.hero .hero-lead {
  color:#fff;
  font-size:21px;
  font-weight:700;
}

.hero .primary-cta { margin-top:22px; }

.content-band { padding:82px 24px; }

.content-shell {
  width:min(1120px,100%);
  margin:0 auto;
}

.narrow-copy { width:min(820px,100%); }

.content-band h2,
.final-cta h2 {
  max-width:780px;
  margin:0 0 20px;
  color:var(--navy);
  font-size:34px;
  line-height:1.16;
}

.content-band p {
  margin:0 0 14px;
  color:var(--muted);
  font-size:16px;
}

.intro-band { background:var(--surface); }

.modes-band { background:#f0eee8; }

.mode-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:34px;
}

.mode-card {
  min-width:0;
  padding:26px;
  border:1px solid #d9d5cc;
  border-top:3px solid var(--gold);
  border-radius:8px;
  background:var(--surface);
  box-shadow:0 12px 28px rgba(7,27,49,.07);
}

.mode-icon {
  min-width:46px;
  height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  border-radius:50%;
  background:var(--navy);
  color:var(--gold-light);
  font-size:13px;
  font-weight:900;
}

.mode-card h3 {
  margin:18px 0 10px;
  color:var(--navy);
  font-size:21px;
}

.mode-card p { margin:0; }

.split-copy {
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:70px;
  align-items:start;
}

.trial-band { background:var(--navy); }

.trial-band h2 { color:#fff; }

.trial-band p { color:rgba(255,255,255,.78); }

.offline-band { background:#f4ead8; }

.stats-band { background:var(--surface); }

.faq-band { background:#f0eee8; }

.faq-shell { width:min(860px,100%); }

.faq-list {
  display:grid;
  gap:10px;
  margin-top:28px;
}

.faq-list details {
  border:1px solid #d9d5cc;
  border-radius:8px;
  background:#fff;
}

.faq-list summary {
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 18px;
  color:var(--navy);
  font-weight:800;
  cursor:pointer;
  list-style:none;
}

.faq-list summary::-webkit-details-marker { display:none; }

.faq-list summary::after {
  content:'+';
  color:#a86f17;
  font-size:22px;
  line-height:1;
}

.faq-list details[open] summary::after { content:'−'; }

.faq-list details p {
  margin:0;
  padding:0 18px 18px;
}

.final-cta {
  padding:76px 24px;
  background:var(--navy);
  color:#fff;
  text-align:center;
}

.final-cta .content-shell {
  display:flex;
  align-items:center;
  flex-direction:column;
}

.final-cta h2 {
  margin:18px 0 10px;
  color:#fff;
}

.final-cta p {
  margin:0 0 22px;
  color:rgba(255,255,255,.8);
}

.final-cta strong {
  margin-top:24px;
  color:var(--gold-light);
  font-size:13px;
}

footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:22px max(24px,calc((100vw - 1120px) / 2));
  border-top:1px solid rgba(7,27,49,.12);
  background:#fff;
}

.footer-brand { font-size:18px; }

footer p {
  margin:0;
  color:var(--muted);
  font-size:13px;
}

@media (max-width:800px) {
  .content-band { padding:62px 22px; }
  .mode-grid { grid-template-columns:1fr; }
  .split-copy { grid-template-columns:1fr; gap:18px; }
}

@media (max-width:560px) {
  .public-header { min-height:68px; padding:10px 16px; }
  .brand { font-size:18px; }
  .brand img { width:40px; height:40px; }
  .header-cta { min-height:44px; padding:9px 12px; font-size:12px; }
  .hero { min-height:calc(100dvh - 68px); padding:48px 20px; background-position:62% center; }
  .hero h1 { font-size:39px; overflow-wrap:anywhere; }
  .hero p { font-size:15px; }
  .hero .hero-lead { font-size:18px; }
  .content-band { padding:52px 20px; }
  .content-band h2,
  .final-cta h2 { font-size:28px; overflow-wrap:anywhere; }
  .mode-card { padding:22px 20px; }
  .final-cta { padding:58px 20px; }
  footer { align-items:flex-start; flex-direction:column; padding:22px 20px; }
}

@media (max-width:380px) {
  .header-cta { width:44px; overflow:hidden; padding:9px; color:transparent; }
  .header-cta::before { content:'→'; color:#17120b; font-size:18px; }
  .hero h1 { font-size:34px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
}