:root{
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'DM Sans',system-ui,sans-serif;
  --color-primary:#1a4b8c;
  --color-primary-light:#2563eb;
  --color-accent:#f59e0b;
  --color-bg:#faf9f6;
  --color-bg-alt:#f2efe8;
  --color-bg-dark:#1a1a2e;
  --color-surface:#ffffff;
  --color-text:#1a1a2e;
  --color-text-light:#6b7280;
  --color-border:#dfddd5;
  --color-success:#10b981;
  --color-danger:#ef4444;
  --border-radius:12px;
  --shadow:0 10px 24px rgba(15, 23, 42, 0.08);
  --max-width:1120px;
  --section-pad:clamp(3rem,7vw,5.5rem);
}

*,
*::before,
*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--color-primary);text-decoration:none}
img{display:block;max-width:100%}

.wrap{
  width:min(100% - 2rem,var(--max-width));
  margin:0 auto;
}

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid rgba(223,221,213,0.95);
  background:rgba(250,249,246,0.92);
  backdrop-filter:blur(10px);
}

.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0.95rem 0;
}

.brand{
  font-family:var(--font-display);
  font-size:1.3rem;
  font-weight:700;
  letter-spacing:-0.03em;
  color:var(--color-text);
}

.brand span{color:var(--color-primary)}

.nav-links{
  display:flex;
  align-items:center;
  gap:1.25rem;
  flex-wrap:wrap;
}

.nav-links a{
  color:var(--color-text-light);
  font-size:0.95rem;
  font-weight:500;
}

.nav-links a:hover{color:var(--color-primary)}

.button,
button.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.45rem;
  border:0;
  border-radius:999px;
  padding:0.9rem 1.35rem;
  font:600 0.98rem var(--font-body);
  cursor:pointer;
  transition:transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.button:hover{transform:translateY(-1px)}

.button-primary{
  background:var(--color-primary);
  color:#fff;
}

.button-primary:hover{background:var(--color-primary-light)}

.button-secondary{
  background:transparent;
  color:var(--color-text);
  border:1px solid var(--color-border);
}

.button-secondary:hover{
  background:#fff;
  border-color:var(--color-primary);
}

.hero{
  padding:var(--section-pad) 0 calc(var(--section-pad) - 1rem);
}

.hero-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:2rem;
  align-items:start;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.45rem 0.85rem;
  border-radius:999px;
  background:rgba(37,99,235,0.08);
  color:var(--color-primary);
  font-size:0.82rem;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

.eyebrow::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--color-accent);
}

h1,h2,h3,h4{
  margin:0 0 0.85rem;
  line-height:1.15;
  letter-spacing:-0.03em;
  font-family:var(--font-display);
}

h1{font-size:clamp(2.3rem,6vw,4.5rem)}
h2{font-size:clamp(1.8rem,4vw,3rem)}
h3{font-size:clamp(1.25rem,2.4vw,1.7rem)}

.lede,
.section-intro{
  max-width:62ch;
  font-size:1.08rem;
  color:var(--color-text-light);
}

.hero-copy .actions{
  display:flex;
  flex-wrap:wrap;
  gap:0.9rem;
  margin-top:1.5rem;
}

.bullet-row{
  display:flex;
  flex-wrap:wrap;
  gap:0.9rem 1.5rem;
  margin-top:1.35rem;
  color:var(--color-text-light);
  font-size:0.95rem;
}

.bullet-row span::before{
  content:"•";
  color:var(--color-accent);
  margin-right:0.45rem;
}

.card,
.panel{
  background:var(--color-surface);
  border:1px solid rgba(223,221,213,0.9);
  border-radius:var(--border-radius);
  box-shadow:var(--shadow);
}

.hero-panel{
  padding:1.35rem;
  background:linear-gradient(165deg,#ffffff 0%,#eef4ff 100%);
}

.hero-panel .stack{
  display:grid;
  gap:1rem;
}

.mini-stat{
  padding:1rem 1.1rem;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(223,221,213,0.85);
}

.mini-stat strong{
  display:block;
  margin-bottom:0.35rem;
  font-size:1rem;
}

.section{
  padding:var(--section-pad) 0;
}

.section.alt{background:var(--color-bg-alt)}

.grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.5rem;
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;
}

.card{
  padding:1.35rem;
}

.card p:last-child{margin-bottom:0}

.tag{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  margin-bottom:0.8rem;
  color:var(--color-primary);
  font-size:0.8rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-weight:700;
}

.pricing-card{
  padding:1.65rem;
  background:var(--color-bg-dark);
  color:#fff;
}

.pricing-card p,
.pricing-card li{color:rgba(255,255,255,0.82)}

.price{
  font-family:var(--font-display);
  font-size:2.8rem;
  line-height:1;
}

.price small{
  font:600 0.95rem var(--font-body);
  color:rgba(255,255,255,0.75);
}

.tool-grid .card,
.post-grid .card{display:flex;flex-direction:column}

.tool-grid .button,
.post-grid .button{margin-top:auto}

.list-clean{
  list-style:none;
  padding:0;
  margin:1rem 0 0;
  display:grid;
  gap:0.7rem;
}

.list-clean li{
  padding-left:1.2rem;
  position:relative;
}

.list-clean li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:var(--color-success);
  font-weight:700;
}

.capture-strip{
  margin-top:1.5rem;
  padding:1.2rem;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(26,75,140,0.12),rgba(245,158,11,0.12));
  border:1px solid rgba(26,75,140,0.15);
}

.capture-form{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:0.8rem;
  margin-top:1rem;
}

.capture-form.compact{
  grid-template-columns:1fr auto;
}

input,
select,
textarea{
  width:100%;
  padding:0.9rem 1rem;
  border-radius:12px;
  border:1px solid var(--color-border);
  background:#fff;
  color:var(--color-text);
  font:500 0.98rem var(--font-body);
}

textarea{min-height:140px;resize:vertical}

.capture-message{
  margin-top:0.8rem;
  font-size:0.92rem;
  color:var(--color-text-light);
}

.capture-message.success{color:var(--color-success)}
.capture-message.error{color:var(--color-danger)}

.article-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:2rem;
}

.article-card{
  padding:1.7rem;
}

.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  gap:0.45rem;
  margin-bottom:1rem;
  color:var(--color-text-light);
  font-size:0.92rem;
}

.breadcrumbs a{color:var(--color-text-light)}

.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:0.9rem;
  margin:1rem 0 1.5rem;
  color:var(--color-text-light);
  font-size:0.93rem;
}

.article-card h2{
  margin-top:2.2rem;
  font-size:clamp(1.5rem,3vw,2.2rem);
}

.article-card h3{
  margin-top:1.5rem;
  font-size:clamp(1.15rem,2vw,1.45rem);
}

.article-card p,
.article-card li{
  color:#273142;
  font-size:1rem;
}

.article-card ul,
.article-card ol{
  padding-left:1.3rem;
}

.article-card blockquote{
  margin:1.5rem 0;
  padding:1rem 1.2rem;
  border-left:4px solid var(--color-accent);
  background:rgba(245,158,11,0.08);
  border-radius:0 12px 12px 0;
}

.callout{
  margin:1.6rem 0;
  padding:1.2rem;
  border-radius:14px;
  background:rgba(37,99,235,0.08);
  border:1px solid rgba(37,99,235,0.12);
}

.faq-list{
  display:grid;
  gap:1rem;
  margin-top:1.2rem;
}

.faq-item{
  padding:1rem 1.1rem;
  border:1px solid var(--color-border);
  border-radius:12px;
  background:#fff;
}

.sidebar{
  display:grid;
  gap:1rem;
  align-self:start;
  position:sticky;
  top:5.5rem;
}

.sidebar .card{padding:1.2rem}

.sidebar ul{
  padding-left:1.15rem;
  margin:0.8rem 0 0;
}

.calculator{
  display:grid;
  gap:1rem;
}

.calculator-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0.9rem;
}

.result-box{
  padding:1.15rem;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--color-border);
}

.result-box strong{
  display:block;
  font-size:2rem;
  font-family:var(--font-display);
  line-height:1.05;
}

.note{
  color:var(--color-text-light);
  font-size:0.92rem;
}

.site-footer{
  padding:2.5rem 0 3rem;
  border-top:1px solid var(--color-border);
  background:#fff;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:1.5rem;
}

.footer-grid h3{
  font-size:1rem;
  margin-bottom:0.7rem;
}

.footer-links{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:0.5rem;
}

.footer-links a{color:var(--color-text-light)}

@media (max-width: 920px){
  .hero-grid,
  .article-shell,
  .grid-2,
  .grid-3,
  .footer-grid{
    grid-template-columns:1fr;
  }

  .sidebar{position:static}
}

@media (max-width: 720px){
  .nav-links{display:none}
  .capture-form,
  .capture-form.compact,
  .calculator-grid{
    grid-template-columns:1fr;
  }
}