/* SMART — shared styling for the business pages
   (track record, terms, for business, accessibility, trust)
   Every colour is set explicitly. Nothing inherits from a dark section. */

:root{
  --ink:#0F0E0C;
  --cream:#FAF6EC;
  --sage:#7FA88F;
  --rule:#ddd6c4;
  --muted:#6b6a64;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SFMono-Regular',Consolas,'Courier New',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 22px;border-bottom:1px solid var(--rule);
  position:sticky;top:0;background:var(--cream);z-index:10;
}
.topbar .logo{
  font-family:var(--sans);font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;font-weight:600;
}
.topbar .logo span{color:var(--sage)}
.topbar .back{
  font-size:12px;letter-spacing:.1em;color:var(--muted);text-decoration:none;
  min-height:44px;display:flex;align-items:center;
}
.topbar .back:hover{color:var(--ink)}

.wrap{max-width:720px;margin:0 auto;padding:52px 22px 96px}

.eyebrow{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sage);margin:0 0 16px;
}
h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(36px,8vw,58px);line-height:1.04;letter-spacing:-.01em;
  margin:0 0 18px;color:var(--ink);
}
h1 em{font-style:italic;color:var(--ink)}
.lede{font-size:18px;line-height:1.6;max-width:48ch;margin:0 0 12px;color:var(--ink)}
.lede.sub{font-size:15px;color:var(--muted);margin-bottom:48px}

section{border-top:1px solid var(--rule);padding:36px 0 10px}
h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(24px,5vw,32px);
  line-height:1.15;margin:0 0 14px;color:var(--ink);
}
h3{font-family:var(--sans);font-weight:600;font-size:15px;margin:26px 0 8px;color:var(--ink)}
p{margin:0 0 15px;max-width:60ch;color:var(--ink)}
p.muted{color:var(--muted);font-size:15px}

ul.plain{margin:0 0 18px;padding:0;list-style:none;max-width:60ch}
ul.plain li{
  padding:13px 0;border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:1fr;gap:3px;
}
ul.plain li b{font-weight:600;font-size:15px}
ul.plain li span{color:var(--muted);font-size:15px}

ul.bullets{margin:0 0 18px;padding-left:20px;max-width:60ch}
ul.bullets li{margin:0 0 9px}

.record{margin:0 0 18px;padding:0;list-style:none;max-width:60ch}
.record li{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--rule);
}
.record .k{
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--sage);
  white-space:nowrap;
}
.record .v{font-size:15px}

.fill{
  background:rgba(127,168,143,.24);padding:1px 7px;border-radius:2px;
  font-family:var(--mono);font-size:13px;color:var(--ink);
}
.note{
  border-left:2px solid var(--sage);padding:2px 0 2px 16px;margin:0 0 16px;
  color:var(--muted);font-size:15px;max-width:60ch;
}
.callout{
  border:1px solid var(--rule);border-radius:2px;padding:22px 20px;margin:0 0 18px;
  max-width:60ch;
}
.callout h3{margin-top:0}

a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--sage)}
a:hover{color:var(--sage)}
a:focus-visible{outline:2px solid var(--sage);outline-offset:3px}

.cta{
  display:inline-block;font-family:var(--sans);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;padding:16px 26px;background:var(--ink);color:var(--cream);
  border:0;border-radius:2px;text-decoration:none;margin-top:6px;min-height:44px;
}
.cta:hover{background:var(--sage);color:var(--ink)}

footer.page{
  border-top:1px solid var(--rule);margin-top:64px;padding-top:24px;
  font-size:13px;color:var(--muted);line-height:2;
}
footer.page a{color:var(--muted);border-bottom-color:var(--rule)}
footer.page .legal{margin-top:14px;font-size:12px}

@media (max-width:680px){
  .wrap{padding:36px 20px 72px}
  .record li{grid-template-columns:1fr;gap:4px}
  body{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}
@media print{
  .topbar{display:none}
  body{background:#fff}
}
