/* Static Pages feature page — local overrides and layout primitives */

:root {
  /* override primary text color to charcoal so we're never using navy as text on white */
  --c-ink:      #1A1A1A;
  --c-ink-2:    #4A4A4A;
  --c-ink-3:    #7A7A7A;
  --c-hairline: #ECECEC;
  --c-panel:    #FAFAFA;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: #fff; color: var(--c-ink); }
body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }

h1, h2, h3, h4, h5, p { color: var(--c-ink); margin: 0; }
p { color: var(--c-ink-2); }

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

/* ---- Containers ---- */
.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.container-sm { max-width: 980px; margin: 0 auto; padding: 0 32px; }

/* ---- Eyebrow ---- */
.eyebrow {
  font-family: 'Inter';
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #FF6A5B;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "§";
  font-weight: 700;
  letter-spacing: 0;
  color: #FF6A5B;
}
.eyebrow.plain::before { content: ""; display: none; }

/* Dash-style eyebrow matching the ad */
.eyebrow-dash {
  font-family: 'Inter';
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #FF6A5B;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow-dash::before {
  content: "";
  width: 22px;
  height: 2px;
  background: #FF6A5B;
  display: inline-block;
}

/* ---- Display type ---- */
.display {
  font-family: 'Inter';
  font-weight: 800;
  font-size: clamp(48px, 6vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--c-ink);
}
.display .it {
  font-style: italic;
  font-weight: 700;
}
.display .coral { color: #FF6A5B; }

h2.section-h {
  font-family: 'Inter';
  font-weight: 800;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--c-ink);
}
h2.section-h .it { font-style: italic; font-weight: 700; }
h2.section-h.invert { color: #fff; }

.lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--c-ink-2);
  max-width: 620px;
}
.lead.invert { color: rgba(255,255,255,.72); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter';
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 14px 22px;
  border-radius: 999px;
  cursor: pointer;
  border: none;
  transition: all 200ms cubic-bezier(.2,.6,.2,1);
  white-space: nowrap;
}
/* Kill inherited link hover color across all buttons */
.btn, .btn:link, .btn:visited { text-decoration: none; }
.btn-primary,
.btn-primary:link,
.btn-primary:visited,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active { color: #0D2743 !important; }
.btn-ghost-light,
.btn-ghost-light:link,
.btn-ghost-light:visited,
.btn-ghost-light:hover,
.btn-ghost-light:focus,
.btn-ghost-light:active { color: #fff !important; }
.btn-ghost-dark,
.btn-ghost-dark:link,
.btn-ghost-dark:visited { color: var(--c-ink) !important; }
.btn-ghost-dark:hover,
.btn-ghost-dark:focus,
.btn-ghost-dark:active { color: #fff !important; }

/* Primary button — color driven by --btn-bg / --btn-bg-hover so it's themeable */
:root {
  --btn-bg:       #FFB3AA;  /* Coral Mist — light coral, not peach */
  --btn-bg-hover: #F89A8F;
}
.btn-primary,
a.btn-primary,
button.btn-primary {
  background: var(--btn-bg) !important;
  background-color: var(--btn-bg) !important;
  color: #0D2743 !important;
  box-shadow: none;
}
.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover {
  background: var(--btn-bg-hover) !important;
  background-color: var(--btn-bg-hover) !important;
  color: #0D2743 !important;
  transform: translateY(-1px);
}
.btn-primary:focus-visible {
  outline: 3px solid rgba(10,102,208,0.35);
  outline-offset: 2px;
}
.btn-ghost-light {
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,.4);
}
.btn-ghost-light:hover { background: rgba(255,255,255,.08); border-color: #fff; }
.btn-ghost-dark {
  background: transparent; color: var(--c-ink);
  border: 1.5px solid var(--c-ink);
}
.btn-ghost-dark:hover { background: var(--c-ink); color: #fff; }
.btn .arrow { font-size: 12px; }

.btn-link {
  font-weight: 600; font-size: 14.5px; color: #FF6A5B;
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms;
}
.btn-link:hover { border-bottom-color: #FF6A5B; }

/* ---- Sections ---- */
section { position: relative; }
.dark { background: #0D2743; color: #fff; }
.dark h2, .dark h3, .dark h4, .dark p { color: #fff; }
.dark p { color: rgba(255,255,255,.72); }

.py-xl { padding: 120px 0; }
.py-lg { padding: 96px 0; }
.py-md { padding: 72px 0; }

/* ---- Cards (light) ---- */
.card {
  background: #fff;
  border: 1px solid var(--c-hairline);
  border-radius: 16px;
  padding: 28px;
}
.dark .card {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
}
.dark .card p { color: rgba(255,255,255,.7); }

/* ---- Utility ---- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; gap: 48px; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .py-xl { padding: 80px 0; }
  .py-lg { padding: 64px 0; }
}

/* ---- Subtle grain / noise (optional) ---- */
.noise::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' seed='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  opacity: .6;
}