/* Shared look for the public shop. Loaded after each page's own styles. */
:root {
  --ink: #172033;
  --muted: #5c6b7a;
  --line: #e4dfd4;
  --paper: #f6f3ec;
  --card: #fffdf8;
  --navy: #172033;
  --cream: #f6f1e8;
  --accent: #1f6b4a;
  --gold: #c9852a;
}

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(980px 320px at 8% -12%, rgba(31, 107, 74, 0.08), transparent 55%),
    var(--paper) !important;
  color: var(--ink);
  font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif;
}

h1, h2, .brand, .logo {
  font-family: "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;
  letter-spacing: -0.02em;
}

h1 {
  font-weight: 600;
  line-height: 1.12;
}

.lede, .lead { max-width: 40rem; }

header.topbar,
header.top,
.wrap > .top {
  background: var(--navy) !important;
  color: var(--cream) !important;
}

header.top a,
header.topbar a,
.wrap > .top a,
header.top .brand,
header.top .logo,
.wrap > .top .brand,
header.topbar .logo {
  color: var(--cream) !important;
  text-decoration: none;
}

header.topbar .topnav a,
header.top nav a,
header.top .nav,
.wrap > .top nav a {
  color: #d7d0c4 !important;
  font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0;
}

header.topbar .topnav a:hover,
header.top nav a:hover,
header.top .nav:hover,
.wrap > .top nav a:hover {
  color: #fff !important;
}

.card,
.box,
.check,
.featured,
.how div,
.modal-card {
  background: var(--card);
  border-color: var(--line) !important;
  box-shadow: 0 12px 32px rgba(23, 32, 51, 0.05);
}

a.buy,
button.buy,
button.copy,
a.primary {
  background: var(--accent) !important;
  color: #f4fff8 !important;
  border-radius: 999px !important;
}

a.buy:hover,
button.buy:hover,
button.copy:hover,
a.primary:hover {
  background: #18583c !important;
}

.buy-box {
  background: var(--navy) !important;
  border-radius: 18px !important;
}

.buy-box button {
  background: var(--gold) !important;
  color: #1d1406 !important;
  border-radius: 999px !important;
}

.agent-band {
  background: var(--navy) !important;
  border-radius: 18px !important;
}

.foot,
.site-footer {
  border-top: 1px solid var(--line);
}