/* Match Sterling shared visual system. Loaded last on /, /calculator, /profit-log, /matched-betting
   and every generated guide. Tokens first; components below only use tokens. No content changes. */
:root{
  /* type scale (16px base, ~1.25 ratio; headings fluid) */
  --ms-fs-xs:13px; --ms-fs-sm:14px; --ms-fs-md:16px; --ms-fs-lg:19px;
  --ms-fs-h3:clamp(19px,0.6vw + 16px,23px);
  --ms-fs-h2:clamp(28px,1.6vw + 21px,40px);
  --ms-fs-h2-article:clamp(23px,0.8vw + 19px,29px);
  --ms-fs-h1:clamp(38px,3.6vw + 22px,64px);
  --ms-lh-body:1.65; --ms-lh-head:1.2;
  /* spacing scale */
  --ms-s1:4px; --ms-s2:8px; --ms-s3:12px; --ms-s4:16px; --ms-s5:24px; --ms-s6:32px; --ms-s7:48px; --ms-s8:72px;
  /* shape and surfaces */
  --ms-radius:12px; --ms-radius-sm:8px; --ms-border:1px solid var(--line);
  --ms-card-bg:#fff; --ms-card-pad:var(--ms-s5); --ms-tint:#e8f1eb; --ms-th-bg:#f0f4eb;
  --ms-shadow:0 1px 2px rgba(20,40,63,.05);
  --ms-btn-h:48px; --ms-btn-fs:15px; --ms-btn-pad:0 var(--ms-s5);
  --ms-measure:760px;
}

/* type */
body{font-size:var(--ms-fs-md);line-height:var(--ms-lh-body)}
h1{font-size:var(--ms-fs-h1);line-height:var(--ms-lh-head);letter-spacing:-.035em}
.landing-hero h1,.hero h1,.editorial h1,.plog h1{font-size:var(--ms-fs-h1);letter-spacing:-.035em}
main h2,.section-heading h2,.sectionheading h2,.faq h2,.closing h2,.before-start h2{font-size:var(--ms-fs-h2);line-height:var(--ms-lh-head);letter-spacing:-.025em}
.editorial h2,.guide-article h2,.plog-card h2,.signup h2{font-size:var(--ms-fs-h2-article);letter-spacing:-.02em}
main h3,.tool-card h3,.guide-card h3,.steps h3,.offer-card h3,.editorial h3{font-size:var(--ms-fs-h3);letter-spacing:-.015em}
.lede,.editorial .lead{font-size:var(--ms-fs-lg)}
.steps p,.tool-card p,.guide-card p,.check-list p,.section-heading>p,.tooltitle p,details p,.offercards p{font-size:var(--ms-fs-sm)}
.fine,.disclosure,.checked-on,.guide-article .checked-on{font-size:var(--ms-fs-xs)}
.eyebrow{font-size:11px;letter-spacing:.14em}

/* readable measure for long-form guides */
.guide-article{max-width:var(--ms-measure);margin-left:auto;margin-right:auto}
.guide-article p,.guide-article li{max-width:none}

/* spacing rhythm */
.section{padding-block:var(--ms-s8)}
.guide-article h2{margin:var(--ms-s7) 0 var(--ms-s3)}
.guide-article h3{margin:var(--ms-s5) 0 var(--ms-s2)}

/* buttons */
.button,.signup-form button{min-height:var(--ms-btn-h);padding:var(--ms-btn-pad);font-size:var(--ms-btn-fs);font-weight:650;border-radius:var(--ms-radius-sm);gap:var(--ms-s3)}
.button.small{min-height:40px;padding:0 var(--ms-s4);font-size:var(--ms-fs-sm)}
.button.ghost{background:var(--ms-card-bg);color:var(--ink);border:var(--ms-border)}

/* cards */
.calc,.signup,.plog-card,.guide,.guide-card,.tool-card,.editorial-note,.provider-card,.offer-card,.example-board{border-radius:var(--ms-radius)}
.calc,.signup,.plog-card,.guide-card,.tool-card,.offer-card{border:var(--ms-border);box-shadow:var(--ms-shadow)}
.calc,.signup,.plog-card{background:var(--ms-card-bg);padding:var(--ms-card-pad)}
.editorial-note,.provider-card,.plog-notice{background:var(--ms-tint);border-radius:var(--ms-radius)}

/* tables (guides, matched-betting worked example, profit log; not the dark hero board) */
.tablewrap{border-radius:var(--ms-radius-sm)}
.guide-article table,.guidebody table,#plog-table{width:100%;border-collapse:collapse;font-size:var(--ms-fs-sm);background:var(--ms-card-bg);border:var(--ms-border)}
.guide-article th,.guide-article td,.guidebody th,.guidebody td,#plog-table th,#plog-table td{padding:var(--ms-s3) var(--ms-s4);border-bottom:var(--ms-border);text-align:left;vertical-align:top}
.guide-article thead th,.guidebody thead th,#plog-table thead th{background:var(--ms-th-bg);font-size:12px;letter-spacing:.04em;text-transform:uppercase}

/* form controls */
.calc input,.calc select,.signup-form input[type=email],.plog-grid input,.plog-grid select{min-height:44px;font-size:var(--ms-fs-md);border-radius:var(--ms-radius-sm)}

@media (max-width:767px){
  :root{--ms-card-pad:var(--ms-s4)}
  .section{padding-block:var(--ms-s7)}
  .landing-hero .button,.calc .button{width:100%}
}

/* D1 phase 2. Heading token stays the floor for multi-line h1s (brand/editorial set 1.02 and 1.1). */
h1,
.landing-hero h1,
.hero h1,
.editorial h1,
.plog h1,
.guide-article h1{line-height:var(--ms-lh-head)}

/* Home hero secondary CTAs: cream outline on felt, 48px. Primary .button.red is unchanged. */
.landing-hero .actions a.button.outline{
  box-sizing:border-box;
  min-height:var(--ms-btn-h);
  height:var(--ms-btn-h);
  padding:0 20px;
  border:2px solid #fff8eb;
  background:transparent;
  color:#fff8eb;
  text-decoration:none;
  line-height:1.2;
}
.landing-hero .actions a.button.outline:hover{
  background:#d9f2e4;
  color:#171c19;
  border-color:#d9f2e4;
}