/* ============================================
   TAXAVY BLOG — SHARED DESIGN SYSTEM
   Drop this file + taxavy-blog.js alongside every
   post HTML file in the same folder on your domain.
   ============================================ */

:root {
  --navy: #0B2545;
  --navy-light: #14335E;
  --gold: #C9A227;
  --gold-tint: #F0E6C8;
  --cream: #F7F5F0;
  --charcoal: #22252A;
  --white: #FFFFFF;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter', sans-serif;
  color:var(--charcoal);
  background:var(--cream);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1, h2, h3, .badge-vs, .brand, .cta-band h2, .author-avatar { font-family:'Fraunces', serif; }
a { color:inherit; }
img { max-width:100%; display:block; }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }

.wrap { max-width:1100px; margin:0 auto; padding:0 24px; }
.article-wrap { max-width:700px; margin:0 auto; padding:0 24px; }

/* NAV */
nav.site-nav { background:var(--navy); padding:18px 0; }
nav.site-nav .wrap { display:flex; align-items:center; justify-content:space-between; }
.brand { color:var(--white); font-size:1.3rem; font-weight:600; letter-spacing:0.5px; text-decoration:none; }
.nav-links { display:flex; gap:28px; list-style:none; align-items:center; }
.nav-links a { color:var(--cream); text-decoration:none; font-size:0.92rem; font-weight:500; opacity:0.85; transition:opacity .2s; }
.nav-links a:hover { opacity:1; }
.btn-nav { background:var(--gold); color:var(--navy); padding:9px 18px; border-radius:4px; opacity:1 !important; font-weight:600; }
.btn-nav:focus-visible { outline-color:var(--navy); }

/* HERO */
.hero { background:linear-gradient(160deg, var(--navy) 0%, var(--navy-light) 100%); color:var(--cream); padding:76px 0 64px; }
.eyebrow { display:inline-block; font-size:0.78rem; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--gold); border:1px solid rgba(201,162,39,0.5); padding:5px 14px; border-radius:100px; margin-bottom:24px; }
.hero h1 { font-size:clamp(2.1rem, 4.5vw, 3.1rem); font-weight:500; line-height:1.15; max-width:820px; margin-bottom:20px; }
.hero .dek { font-size:1.15rem; color:rgba(247,245,240,0.82); max-width:620px; margin-bottom:28px; font-weight:400; }
.hero .meta { font-size:0.85rem; color:rgba(247,245,240,0.6); display:flex; gap:16px; align-items:center; }
.hero .meta span + span::before { content:"•"; margin-right:16px; color:var(--gold); }

/* ARTICLE */
article.body { padding:64px 0 8px; }
article.body p { margin-bottom:22px; font-size:1.05rem; }
article.body h2 { font-size:1.65rem; font-weight:500; margin:48px 0 18px; color:var(--navy); }
article.body ul { margin:0 0 24px 22px; }
article.body li { margin-bottom:10px; font-size:1.02rem; }
.lede { font-size:1.2rem; color:var(--navy); font-weight:500; }

/* CARD BASE (shared by all signature components) */
.tcard { background:var(--white); border:1px solid rgba(11,37,69,0.08); border-radius:12px; box-shadow:0 1px 3px rgba(11,37,69,0.06); }

/* SIGNATURE 1 — COMPARE (two paths / a binary choice) */
.compare { margin:56px 0; }
.compare-grid { display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:center; }
.compare-card { padding:32px 28px; height:100%; }
.compare-card h3 { font-size:1.25rem; color:var(--navy); margin-bottom:16px; font-weight:600; }
.compare-card ul { margin:0; list-style:none; }
.compare-card li { display:flex; gap:10px; margin-bottom:13px; font-size:0.96rem; }
.compare-card li::before { content:"—"; color:var(--gold); flex-shrink:0; }
.badge-vs { display:flex; align-items:center; justify-content:center; width:52px; height:52px; background:var(--gold); color:var(--navy); border-radius:50%; font-weight:600; font-size:1rem; margin:0 -26px; position:relative; z-index:2; box-shadow:0 4px 10px rgba(201,162,39,0.35); justify-self:center; }

/* SIGNATURE 2 — GRID4 (the parts of a whole) */
.grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:56px 0; }
.grid4 .g-card { padding:24px 20px; }
.grid4 .g-card .num { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--gold-tint); color:var(--navy); font-weight:600; font-size:0.9rem; margin-bottom:14px; }
.grid4 .g-card h3 { font-size:1.02rem; color:var(--navy); margin-bottom:8px; font-weight:600; }
.grid4 .g-card p { font-size:0.88rem; margin:0; }

/* SIGNATURE 3 — FLOW (a repeating cycle) */
.flow { display:flex; align-items:stretch; gap:0; margin:56px 0; }
.flow .f-card { flex:1; padding:22px 16px; text-align:center; }
.flow .f-card .num { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--navy); color:var(--gold); font-weight:600; font-size:0.85rem; margin-bottom:12px; }
.flow .f-card h3 { font-size:0.96rem; color:var(--navy); margin-bottom:6px; font-weight:600; }
.flow .f-card p { font-size:0.84rem; margin:0; }
.flow .arrow { display:flex; align-items:center; color:var(--gold); font-size:1.3rem; padding:0 6px; flex-shrink:0; }

/* SIGNATURE 4 — STEPS (a one-time sequential process) */
.steps { margin:56px 0; position:relative; padding-left:52px; }
.steps::before { content:""; position:absolute; left:19px; top:6px; bottom:6px; width:2px; background:rgba(11,37,69,0.12); }
.steps .step-item { position:relative; margin-bottom:28px; }
.steps .step-item:last-child { margin-bottom:0; }
.steps .step-item .num { position:absolute; left:-52px; top:0; width:40px; height:40px; border-radius:50%; background:var(--navy); color:var(--gold); display:flex; align-items:center; justify-content:center; font-weight:600; }
.steps .step-item h3 { font-size:1.05rem; color:var(--navy); margin-bottom:6px; font-weight:600; }
.steps .step-item p { margin:0; font-size:0.96rem; }

/* CALLOUT */
.callout { background:var(--gold-tint); border-left:4px solid var(--gold); padding:20px 24px; border-radius:6px; margin:36px 0; font-size:0.96rem; color:var(--navy-light); }
.callout strong { color:var(--navy); }

/* CTA BAND */
.cta-band { background:var(--navy); color:var(--white); padding:56px 0; margin-top:64px; text-align:center; }
.cta-band h2 { font-size:1.9rem; font-weight:500; margin-bottom:14px; }
.cta-band p { color:rgba(247,245,240,0.8); max-width:480px; margin:0 auto 28px; }
.btn-cta { display:inline-block; background:var(--gold); color:var(--navy); padding:14px 34px; border-radius:6px; font-weight:600; text-decoration:none; font-size:1rem; transition:transform .2s, box-shadow .2s; }
.btn-cta:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(201,162,39,0.35); }
.btn-cta:focus-visible { outline-color:var(--white); }

/* AUTHOR */
.author { display:flex; gap:14px; align-items:center; padding:40px 0; border-top:1px solid rgba(11,37,69,0.1); margin-top:8px; }
.author-avatar { width:46px; height:46px; border-radius:50%; background:var(--navy); color:var(--gold); display:flex; align-items:center; justify-content:center; font-weight:600; flex-shrink:0; }
.author small { color:rgba(34,37,42,0.6); }

/* FOOTER */
footer { background:var(--charcoal); color:rgba(247,245,240,0.6); padding:32px 0; text-align:center; font-size:0.85rem; }
footer a { color:rgba(247,245,240,0.8); text-decoration:none; margin:0 10px; }

/* BLOG INDEX CARDS (used on blog.html only) */
.post-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin:48px 0 72px; }
.post-card { padding:0; overflow:hidden; text-decoration:none; display:block; transition:transform .2s, box-shadow .2s; }
.post-card:hover { transform:translateY(-3px); box-shadow:0 8px 20px rgba(11,37,69,0.12); }
.post-card .pc-tag { display:inline-block; font-size:0.7rem; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold-tint); background:var(--navy); padding:4px 12px; border-radius:100px; margin:24px 0 14px 24px; }
.post-card h3 { font-size:1.2rem; color:var(--navy); padding:0 24px; margin-bottom:10px; font-weight:600; }
.post-card p { font-size:0.92rem; padding:0 24px 24px; margin:0; color:var(--charcoal); }

/* MOTION */
.reveal { opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  html { scroll-behavior:auto; }
}

/* RESPONSIVE */
@media (max-width:720px) {
  .compare-grid { grid-template-columns:1fr; gap:32px; }
  .badge-vs { margin:-16px auto; }
  .nav-link-item { display:none; }
  .hero { padding:56px 0 48px; }
  .compare-card { padding:26px 22px; }
  .grid4 { grid-template-columns:1fr 1fr; }
  .flow { flex-direction:column; }
  .flow .arrow { transform:rotate(90deg); padding:6px 0; align-self:center; }
  .post-grid { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .grid4 { grid-template-columns:1fr; }
}