:root { --olive: #3f4a2c; --dark: #2b331d; --gold: #c9a24c; --sage: #8e9c56; --cream: #f7f5ec; --paper: #fffdf8; --ink: #26261e; --muted: #656555; --max: 920px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0px; background: var(--cream); color: var(--ink); font: 16px / 1.7 Sora, system-ui, sans-serif; }
a { color: var(--olive); }
.wrap { max-width: var(--max); margin: auto; padding: 0px 24px; }
header { background: var(--olive); color: rgb(255, 255, 255); }
.nav { height: 70px; display: flex; align-items: center; gap: 24px; }
.brand { margin-right: auto; color: rgb(255, 255, 255); text-decoration: none; font: 600 25px Fraunces, Georgia, serif; }
.nav > a:not(.brand) { color: rgb(255, 255, 255); text-decoration: none; font-size: 14px; }
.cta { background: var(--gold); padding: 9px 16px; border-radius: 99px; font-weight: 700; color: var(--dark) !important; }
.hero { background: var(--olive); color: rgb(255, 255, 255); padding: 74px 0px 82px; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.18em; color: rgb(227, 200, 127); font-size: 12px; font-weight: 700; }
h1, h2, h3 { font-family: Fraunces, Georgia, serif; line-height: 1.15; }
h1 { font-size: clamp(38px, 6vw, 58px); max-width: 15ch; margin: 14px 0px 20px; }
h2 { font-size: 32px; margin-top: 48px; }
.hero p { max-width: 650px; color: rgb(229, 228, 213); font-size: 18px; }
.content { padding: 56px 0px 80px; }
.card { background: var(--paper); border: 1px solid rgb(233, 229, 215); border-radius: 16px; padding: 28px; margin: 22px 0px; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.item { background: var(--paper); border: 1px solid rgb(233, 229, 215); border-radius: 12px; padding: 20px; }
.item h3 { margin: 0px 0px 8px; font-size: 21px; }
.item p { margin: 0px; color: var(--muted); }
.button { display: inline-block; background: var(--gold); color: var(--dark); text-decoration: none; padding: 13px 20px; border-radius: 99px; font-weight: 700; }
.crumbs { font-size: 13px; margin-bottom: 24px; }
.crumbs a { color: rgb(230, 226, 207); }
.faq details { background: var(--paper); border: 1px solid rgb(233, 229, 215); border-radius: 10px; padding: 16px 18px; margin: 10px 0px; }
.faq summary { font-weight: 700; cursor: pointer; }
.faq p { color: var(--muted); }
.lead { font-size: 18px; color: var(--muted); }
.checklist { padding-left: 22px; }
.checklist li { margin: 8px 0; }
.comparison-table { width: 100%; border-collapse: collapse; margin: 22px 0; background: var(--paper); border-radius: 12px; overflow: hidden; }
.comparison-table th, .comparison-table td { padding: 14px 16px; border-bottom: 1px solid rgb(233, 229, 215); text-align: left; vertical-align: top; }
.comparison-table th { background: var(--olive); color: white; }
.comparison-table tr:last-child td { border-bottom: 0; }
.note { border-left: 4px solid var(--gold); background: var(--paper); padding: 16px 18px; margin: 24px 0; color: var(--muted); }
.reviewed { margin-top: 36px; font-size: 13px; color: var(--muted); }
footer { background: var(--dark); color: rgb(201, 203, 187); padding: 38px 0px; }
footer a { color: rgb(255, 255, 255); }
@media (max-width: 700px) {
  .nav > a:not(.brand):not(.cta) { display: none; }
  .grid { grid-template-columns: 1fr; }
  .hero { padding: 54px 0px; }
  .content { padding-top: 38px; }
  .comparison-table { display: block; overflow-x: auto; }
}