/* zoltadvisors.com, new look (ZT-194): the inner pages that kept their words (city pages, guides, ITIN, advisors, back
   taxes, cost, CPA vs EA, not-us, book, thanks, 404 and the legal pages). Their content blocks keep their old class names
   (.prose, .answer, .cards, .steps, .checklist, .legal…); this file draws them in the new look, scoped to main.compat so
   nothing leaks into the lab-built pages. Loads after pages.css and before site.css. */

/* ---------- Sections ---------- */
main.compat{background:var(--night);color:var(--on-dark)}
main.compat>section:not(.svc-hero):not(.sv-cta):not(.faq):not(.sv-sec):not(.sv-who){padding-block:clamp(64px,7vw,112px);background:var(--night)}
main.compat>section.alt{background:var(--night-2)}
main.compat h2,main.compat h3{color:var(--paper)}
main.compat a:not(.btn){color:var(--paper);text-underline-offset:3px;text-decoration-color:var(--pearl-rule)}
main.compat a:not(.btn):hover{text-decoration-color:var(--gold-l)}

/* The old section heading block (not the site header, which is also .head in style.css). */
main.compat .head{position:static;inset:auto;z-index:auto;max-width:720px;margin-bottom:var(--s7);color:inherit}
main.compat .head::before{content:none}
main.compat .head h2{margin:var(--s3) 0 var(--s4);font-size:clamp(30px,2.4vw + 14px,52px);line-height:1.04;letter-spacing:-.04em;text-wrap:balance}
main.compat .head p{margin:0;color:var(--on-dark);font-size:var(--t-lead)}
main.compat .eyebrow{display:block;color:var(--gold-l);font-size:var(--t-small);font-weight:600;letter-spacing:.02em}
main.compat .lead{max-width:34em;color:var(--on-dark);font-size:var(--t-lead)}

/* ---------- Articles ---------- */
main.compat .prose{max-width:720px}
main.compat .prose>:first-child{margin-top:0}
main.compat .prose h2{margin:var(--s8) 0 var(--s4);font-size:clamp(26px,1.6vw + 16px,36px);line-height:1.1;letter-spacing:-.03em}
main.compat .prose h3{margin:var(--s6) 0 var(--s3);font:600 20px/1.3 var(--f-body);letter-spacing:0}
main.compat .prose p,main.compat .prose li{color:var(--on-dark);font-size:17px;line-height:1.7}
main.compat .prose p{margin:0 0 var(--s4)}
main.compat .prose ul,main.compat .prose ol{margin:0 0 var(--s4);padding-left:22px}
main.compat .prose li{margin-bottom:var(--s2)}
main.compat .prose b,main.compat .prose strong{color:var(--paper)}
main.compat .answer{margin:0 0 var(--s6);padding:var(--s5) var(--s6);border-left:2px solid var(--gold-l);background:var(--night-2)}
main.compat .answer p{margin:0;color:var(--paper);font-size:var(--t-lead);line-height:1.6}
main.compat .answer p+p{margin-top:var(--s3)}
main.compat .byline{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 var(--s6);color:var(--on-dark-2);font-size:var(--t-small)}
main.compat .byline b{color:var(--paper);font-weight:600}
main.compat .checklist{margin:0 0 var(--s6);padding:0;list-style:none}
main.compat .checklist li{display:grid;grid-template-columns:20px 1fr;gap:2px 12px;align-items:start;margin:0;padding:10px 0;border-bottom:1px solid var(--pearl-faint);color:var(--paper);font-size:16.5px;line-height:1.5}
main.compat .checklist li::before{content:"";width:16px;height:16px;margin-top:4px;border:1.5px solid var(--gold-l)}
main.compat .checklist li span{grid-column:2;display:block;margin-top:2px;color:var(--on-dark-2);font-size:14.5px}
main.compat .printbtn{margin:0 0 var(--s6)}

/* ---------- Cards (now a quiet grid of ruled items) ---------- */
main.compat .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6) var(--s6)}
main.compat .card{padding-top:var(--s5);border-top:1px solid var(--pearl-rule)}
main.compat .card h3{margin-bottom:var(--s2);font:600 18px/1.3 var(--f-body);letter-spacing:0}
main.compat .card p{margin:0;color:var(--on-dark);font-size:15.5px;line-height:1.55}
@media (max-width:900px){main.compat .cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){main.compat .cards{grid-template-columns:1fr}}

/* ---------- Steps (not the homepage's bolt timeline, which is .steps inside [data-bolt]) ---------- */
main.compat ol.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);counter-reset:none}
main.compat ol.steps li{height:auto;padding:var(--s5) 0 0;border-top:1px solid var(--pearl-rule)}
main.compat .step .n{display:block;margin-bottom:var(--s3);color:var(--gold-l);font:600 15px/1 var(--f-mark)}
main.compat .step h3{margin-bottom:var(--s2);font:600 20px/1.3 var(--f-display);letter-spacing:-.02em}
main.compat .step p{margin:0;color:var(--on-dark);font-size:16px;line-height:1.55}
@media (max-width:760px){main.compat ol.steps{grid-template-columns:1fr}}

/* ---------- Small parts ---------- */
main.compat .badge{display:inline-block;padding:6px 12px;border:1px solid var(--pearl-rule);color:var(--paper);font-size:13.5px;font-weight:600;line-height:1.35}
main.compat .creds{display:flex;flex-wrap:wrap;gap:8px;margin:var(--s4) 0;padding:0;list-style:none;border:0}
main.compat .creds li{padding:0;border:0}
main.compat .micro{color:var(--on-dark-2);font-size:var(--t-cap)}
main.compat .callbox{display:grid;grid-template-columns:1fr auto;gap:var(--s5);align-items:center;margin-top:var(--s7);padding:var(--s6);border:1px solid var(--pearl-rule);background:var(--night-2)}
main.compat .callbox h3{margin-bottom:var(--s2);font-size:22px}
main.compat .callbox ul{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0;padding:0;list-style:none;color:var(--on-dark)}
@media (max-width:700px){main.compat .callbox{grid-template-columns:1fr}}

/* Advisor photos (advisors pages, the chip on /book, /thanks and 404): the photo in a circle, with a thin ring. */
.avatar{position:relative;display:block;flex:none;width:var(--s);height:var(--s);border-radius:50%}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--night-2);box-shadow:0 0 0 1px var(--pearl-rule)}
.avatar .ring{position:absolute;inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px);max-width:none;transform:rotate(-90deg);pointer-events:none}
.avatar .ring circle{fill:none;stroke:var(--gold-l);stroke-width:1.2}
.chip{display:flex;align-items:center;gap:12px;margin:var(--s4) 0 0;color:var(--on-dark);font-size:14px;line-height:1.45}
.chip b{color:var(--paper);font-weight:600}
.chip-avs{display:flex;flex:none;padding-left:3px}
.chip-avs .avatar+.avatar{margin-left:calc(var(--s) * -.25)}
.chip .avatar img{box-shadow:0 0 0 2px var(--night),0 0 0 3px rgba(226,194,122,.55)}

/* ---------- The inner-page hero (nl/PageHero): the service hero without the object ---------- */
.phero .phero-grid{display:block;padding-top:calc(var(--head-h) + var(--s8));padding-bottom:var(--s8)}
.phero.is-compact .phero-grid{padding-top:calc(var(--head-h) + var(--s6));padding-bottom:var(--s6)}
.phero h1{max-width:14em}
.phero .deck{max-width:34em}
.phero-eyebrow{margin:0 0 var(--s4);color:var(--gold-l);font-size:var(--t-small);font-weight:600}
.phero .ctas{margin-top:var(--s6)}
.cta-note{margin-top:var(--s4)}

/* ---------- "Check us yourself" ---------- */
.ck-steps{margin:0;padding-left:1.2em;color:var(--on-dark);font-size:var(--t-lead);line-height:1.6}
.ck-steps li+li{margin-top:var(--s2)}
.ck-steps a,.ck-body a{color:var(--paper);font-weight:600;text-underline-offset:3px}
.ck-steps b{color:var(--paper)}
.ck-res{margin-top:var(--s4);color:var(--paper);font-size:var(--t-small)}
.ck-fine{margin-top:var(--s3);color:var(--on-dark-2);font-size:var(--t-cap)}

/* ---------- Legal pages: the words untouched, the new look around them ---------- */
main.compat.legal{max-width:820px;padding-top:calc(var(--head-h) + var(--s8));padding-bottom:var(--s9)}
main.compat.legal h1{margin-bottom:var(--s2);color:var(--paper);font-size:clamp(34px,2.4vw + 18px,48px);line-height:1.05;letter-spacing:-.03em}
main.compat.legal h2{margin:var(--s7) 0 var(--s3);font:600 21px/1.3 var(--f-body);letter-spacing:0}
main.compat.legal p,main.compat.legal li{color:var(--on-dark);font-size:16.5px;line-height:1.7}
main.compat.legal ul{padding-left:22px}
main.compat.legal b{color:var(--paper)}
main.compat.legal .upd{margin-bottom:var(--s6);color:var(--on-dark-2);font-size:var(--t-small)}

/* ---------- Hand-built page tops (404): the inner-page hero's look for the old .phero markup ---------- */
main.compat section.phero:not(.svc-hero){padding:calc(var(--head-h) + var(--s8)) 0 var(--s8);background:var(--night-0)}
main.compat section.phero:not(.svc-hero) h1{max-width:14em;margin:var(--s3) 0 var(--s5);color:var(--paper);font-size:var(--t-ch);line-height:.98;letter-spacing:-.045em}
main.compat section.phero:not(.svc-hero) .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);margin-top:var(--s6)}
main.compat .ghost{display:inline-flex;align-items:center;min-height:44px;color:var(--paper);font-weight:600}