/*
Theme Name: Trusted Local Realtor
Theme URI: https://trustedlocalrealtor.com
Author: Sonic 777
Description: Custom authority theme for Trusted Local Realtor, Baltimore MD. Design DNA: Corporate Trust (Social Proof-Focused). Built to STYLE-GUIDE.md.
Version: 1.0
License: GPL-2.0-or-later
Text Domain: tlr
*/

/* ============================================================
   0. FONTS  (self hosted. Google Fonts cost 853ms of render blocking
   on the live host, which was the whole LCP gap.)
   ============================================================ */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/inter-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/inter-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/inter-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/manrope-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/manrope-800.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}


/* ============================================================
   1. TOKENS  (verbatim from STYLE-GUIDE.md section 9)
   ============================================================ */
:root{
  --bg:#FFFFFF; --surface:#F6F8FB; --border:#DDE4EC;
  --ink:#0E1B2C; --muted:#5A6B80; --deep:#0A1524;
  --primary:#123C6D; --accent:#1D70D0; --cta:#F59E0B; --cta-ink:#0E1B2C;
  --gain:#0F766E; --warning:#B45309; --danger:#B42318;
  --font-display:'Manrope',system-ui,-apple-system,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --radius:8px;
  --shadow:0 1px 3px rgba(14,27,44,.08),0 1px 2px rgba(14,27,44,.04);
  --shadow-lift:0 6px 18px rgba(14,27,44,.10),0 2px 6px rgba(14,27,44,.06);
  --maxw:1200px; --gutter:24px; --section:80px; --measure:68ch;
}

/* ============================================================
   2. RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.12;margin:0 0 .5em}
p{margin:0 0 1.1em;max-width:var(--measure)}
ul,ol{margin:0 0 1.1em;padding-left:1.2em}
figure{margin:0}

/* Numbers never reflow while animating */
.stat,.num,table,.tabular{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ============================================================
   3. LAYOUT
   ============================================================ */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.section--tight{padding-block:calc(var(--section) * .65)}
.section--surface{background:var(--surface)}
.section--deep{background:var(--deep);color:#fff}
.section--deep h2,.section--deep h3{color:#fff}
.section--primary{background:var(--primary);color:#fff}
.section--primary h2,.section--primary h3{color:#fff}

.eyebrow{
  font-family:var(--font-body);font-size:13px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
  margin:0 0 .75rem;
}
.section--deep .eyebrow,.section--primary .eyebrow{color:#8FC0F5}

/* ============================================================
   4. TYPE SCALE
   ============================================================ */
.display{font-size:clamp(40px,5.2vw,64px);letter-spacing:-.03em}
h1{font-size:clamp(34px,4vw,48px);letter-spacing:-.02em}
h2{font-size:clamp(27px,3vw,34px);letter-spacing:-.01em}
h3{font-size:clamp(21px,2vw,24px);font-weight:700}
.lead{font-size:clamp(17px,1.4vw,19px);line-height:1.65;color:var(--muted)}
.section--deep .lead,.section--primary .lead{color:#B8CADF}
.stat{font-family:var(--font-display);font-weight:800;font-size:clamp(40px,4.4vw,56px);line-height:1;letter-spacing:-.02em}

/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;padding:0 28px;border-radius:var(--radius);
  font-family:var(--font-display);font-weight:800;font-size:17px;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s ease,background-color .18s ease;
}
/* Amber CTA. Ink text ONLY. White on amber is 2.15:1 and banned. */
.btn--cta{background:var(--cta);color:var(--cta-ink);box-shadow:var(--shadow)}
.btn--cta:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);background:#FFB020}
.btn--primary{background:var(--primary);color:#fff}
.btn--primary:hover{transform:translateY(-2px);background:#0E3159}
.btn--ghost{background:transparent;color:var(--primary);border-color:var(--border)}
.btn--ghost:hover{border-color:var(--primary);background:var(--surface)}
.section--deep .btn--ghost,
.section--primary .btn--ghost{color:#fff;border-color:rgba(255,255,255,.34)}
.section--deep .btn--ghost:hover,
.section--primary .btn--ghost:hover{background:rgba(255,255,255,.10);border-color:#fff}
.btn--lg{min-height:60px;font-size:18px;padding:0 34px}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;border-radius:4px;
}

/* ============================================================
   6. HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:50;background:#fff;
  border-bottom:1px solid var(--border);
}
.site-header__inner{display:flex;align-items:center;gap:32px;height:76px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex-shrink:0}
.brand__mark{
  width:36px;height:36px;border-radius:var(--radius);background:var(--primary);
  display:grid;place-items:center;color:#fff;font-family:var(--font-display);
  font-weight:800;font-size:17px;letter-spacing:-.04em;
}
.brand__name{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.02em;line-height:1.1}
.brand__loc{display:block;font-family:var(--font-body);font-weight:500;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{
  font-size:15.5px;font-weight:500;color:var(--ink);text-decoration:none;
  white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--primary);border-bottom-color:var(--accent)}
.header-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}
.header-phone{
  font-family:var(--font-display);font-weight:800;font-size:17px;
  color:var(--primary);text-decoration:none;white-space:nowrap;
}
.header-phone:hover{color:var(--accent)}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;cursor:pointer;align-items:center;justify-content:center}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink)}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--primary);color:#fff;padding:12px 20px;border-radius:0 0 var(--radius) 0;
  font-weight:600;text-decoration:none;
}
.skip-link:focus{left:0}

/* ============================================================
   7. HERO  (DNA: split hero)
   ============================================================ */
.hero{padding-block:72px 0;border-bottom:1px solid var(--border)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero__sub{font-size:19px;line-height:1.6;color:var(--muted);max-width:46ch;margin-bottom:28px}
.hero__media{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lift)}
.hero__media img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* REBA valuation module: the sitewide primary CTA */
.reba{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:22px;
}
.reba__label{
  display:block;font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px;
}
.reba__row{display:flex;gap:10px}
.reba__row input{
  flex:1;min-height:52px;padding:0 16px;font-family:var(--font-body);font-size:16px;
  border:1px solid var(--border);border-radius:var(--radius);background:#fff;color:var(--ink);
}
.reba__row input::placeholder{color:#8A99AC}
.reba__row input:focus{border-color:var(--accent)}
.reba__note{margin:12px 0 0;font-size:14.5px;color:var(--muted);max-width:none}

/* ============================================================
   8. TRUST STAT BAR  (DNA: trust stat bar)
   ============================================================ */
.statbar{background:var(--deep);color:#fff}
.statbar__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-block:44px}
.statbar__item{border-left:2px solid rgba(255,255,255,.14);padding-left:20px}
.statbar .stat{color:#fff;display:block}
.statbar__label{font-size:14.5px;color:#9FB3C9;margin:8px 0 0;max-width:22ch}

/* ============================================================
   9. BADGE ROW  (DNA: badge row)
   ============================================================ */
.badges{border-bottom:1px solid var(--border);background:#fff}
.badges__grid{display:flex;flex-wrap:wrap;gap:14px;padding-block:20px}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border:1px solid var(--border);border-radius:var(--radius);
  font-size:14.5px;font-weight:600;color:var(--primary);background:#fff;
}
.badge svg{width:17px;height:17px;flex-shrink:0;stroke:var(--accent)}

/* ============================================================
   10. THE FORK  (asymmetric. anti-slop bans 3 equal cards)
   ============================================================ */
.fork__grid{display:grid;grid-template-columns:1.35fr 1fr;gap:20px}
.fork__stack{display:grid;grid-template-rows:1fr 1fr;gap:20px}
.fork__card{
  border:1px solid var(--border);border-radius:var(--radius);
  padding:28px;background:#fff;text-decoration:none;color:inherit;display:block;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s cubic-bezier(.16,1,.3,1);
}
.fork__card:hover{border-color:var(--accent);box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.fork__card h3{margin-bottom:8px}
.fork__card p{font-size:15.5px;color:var(--muted);margin:0}
/* Lead-card overrides MUST follow the base rules: .fork__card--lead p and
   .fork__card p have identical specificity, so source order decides. */
.fork__card--lead{background:var(--primary);color:#fff;border-color:var(--primary);padding:34px;display:flex;flex-direction:column;justify-content:center}
.fork__card--lead h3{color:#fff;font-size:26px}
.fork__card--lead p{color:#DCE7F3}
.fork__card--lead .fork__more{color:#FFD07A}
.fork__more{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--accent);margin-top:14px;display:inline-block}

/* ============================================================
   11. PATH  (verb-labelled, no "Step 1" labels)
   ============================================================ */
.path{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.path__item{padding:32px 28px;border-right:1px solid var(--border);background:#fff}
.path__item:last-child{border-right:0}
.path__verb{font-family:var(--font-display);font-weight:800;font-size:22px;margin:0 0 8px;color:var(--primary)}
.path__time{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--gain);margin-bottom:14px}
.path__item p{font-size:15.5px;color:var(--muted);margin:0}

/* ============================================================
   12. ZIGZAG  (renovation partnership)
   ============================================================ */
.zig{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.zig--flip .zig__media{order:-1}
.zig__media img{border-radius:var(--radius);width:100%;aspect-ratio:4/3;object-fit:cover;box-shadow:var(--shadow)}
.gainlist{list-style:none;padding:0;margin:24px 0 0}
.gainlist li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);font-size:16px}
.gainlist li:last-child{border-bottom:0}
.gainlist .num{font-family:var(--font-display);font-weight:800;color:var(--gain);font-size:18px;flex-shrink:0;min-width:96px}

/* ============================================================
   13. CASE STUDY
   ============================================================ */
.case__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.case__figures{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.14);border-radius:var(--radius);overflow:hidden}
.case__fig{background:var(--deep);padding:26px}
.case__fig .stat{font-size:clamp(32px,3.4vw,44px);color:#fff}
.case__fig--gain .stat{color:#5EEAD4}
.case__fig p{font-size:14px;color:#9FB3C9;margin:8px 0 0;max-width:none}

/* ============================================================
   14. COMPARISON TABLE
   ============================================================ */
.cmp{width:100%;overflow-x:auto}
.cmp table{width:100%;border-collapse:collapse;min-width:620px;background:#fff}
.cmp th,.cmp td{padding:16px 18px;text-align:left;font-size:15.5px;border-bottom:1px solid var(--border)}
.cmp thead th{
  font-family:var(--font-display);font-weight:800;font-size:15px;
  background:var(--surface);color:var(--ink);border-bottom:2px solid var(--border);
}
.cmp thead th.is-us{background:var(--primary);color:#fff}
.cmp td.is-us{background:rgba(18,60,109,.045);font-weight:600}
.cmp tbody th{font-weight:600;color:var(--muted);font-family:var(--font-body)}
.cmp .yes{color:var(--gain);font-weight:700}
.cmp .no{color:var(--muted)}

/* ============================================================
   15. TESTIMONIALS  (static. no carousel: review count is thin)
   ============================================================ */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.quote{
  border:1px solid var(--border);border-radius:var(--radius);
  padding:26px;background:#fff;
}
.quote--wide{grid-column:1 / -1;background:var(--surface)}
.quote__text{font-size:16.5px;line-height:1.65;margin:0 0 16px;max-width:none}
.quote__who{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--primary);margin:0}
.quote__ctx{font-size:14px;color:var(--muted);margin:2px 0 0}

/* ============================================================
   16. SITUATIONS  (bento, real variation, exact cell count)
   ============================================================ */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bento__cell{
  border:1px solid var(--border);border-radius:var(--radius);padding:24px;
  background:#fff;text-decoration:none;color:inherit;display:block;
  transition:border-color .18s ease,transform .18s cubic-bezier(.16,1,.3,1);
}
.bento__cell:hover{border-color:var(--accent);transform:translateY(-2px)}
.bento__cell h3{font-size:19px;margin-bottom:6px}
.bento__cell p{font-size:15px;color:var(--muted);margin:0}
.bento__cell--tall{grid-row:span 2;background:var(--surface)}
.bento__cell--tint{background:var(--surface)}
.bento__cell--media{padding:0;overflow:hidden}
.bento__cell--media img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}

/* ============================================================
   17. CTA BAND + FOOTER
   ============================================================ */
.ctaband__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.ctaband h2{margin-bottom:12px}
.ctaband__actions{display:flex;flex-wrap:wrap;gap:14px}

.site-footer{background:var(--deep);color:#9FB3C9;padding-block:56px 28px;font-size:15px}
.site-footer a{color:#C3D5EA;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer__grid h4{color:#fff;font-size:15px;margin:0 0 14px;font-family:var(--font-display);font-weight:800}
.footer__grid ul{list-style:none;padding:0;margin:0}
.footer__grid li{margin-bottom:9px}
.footer__bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:13.5px}
.footer__disc{max-width:70ch;font-size:13px;color:#7D93AB;margin:14px 0 0}

/* ============================================================
   18. PAGE / CONTENT
   ============================================================ */
.page-hero{background:var(--surface);border-bottom:1px solid var(--border);padding-block:56px}
.page-hero .lead{max-width:60ch}
.entry{padding-block:56px}
.entry__body{max-width:var(--measure)}
.entry__body h2{margin-top:2em}
.entry__body h3{margin-top:1.6em}
.entry__body ul li{margin-bottom:.5em}

/* ============================================================
   19. MOTION  (bold tier. see MOTION-PROFILE.md)
   ============================================================ */
/* Progressive enhancement: content is visible by default and is only hidden
   once JS has proven it is running and able to reveal it again. If the script
   fails, errors, or never loads, nothing is ever invisible. */
.motion-ready .sonic-fade-on-scroll{opacity:0;transform:translateY(32px)}
.motion-ready .sonic-stagger-children > *{opacity:0;transform:translateY(32px)}
.motion-ready .sonic-word{opacity:0;transform:translateY(32px)}
.sonic-word{display:inline-block}
.motion-ready .is-revealed{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .sonic-fade-on-scroll,.sonic-stagger-children > *,.sonic-word{opacity:1 !important;transform:none !important}
  .btn:hover,.fork__card:hover,.bento__cell:hover{transform:none !important}
}

/* ============================================================
   20. RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .hero__grid,.zig,.case__grid,.ctaband__grid{grid-template-columns:1fr;gap:36px}
  .zig--flip .zig__media{order:0}
  .fork__grid{grid-template-columns:1fr}
  .statbar__grid{grid-template-columns:repeat(2,1fr);gap:26px}
  .footer__grid{grid-template-columns:1fr 1fr;gap:32px}
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento__cell--tall{grid-row:span 1}
}
@media (max-width:820px){
  :root{--section:56px}
  .nav{display:none}
  .nav-toggle{display:flex}
  .nav.is-open{
    display:flex;flex-direction:column;position:absolute;top:76px;left:0;right:0;
    background:#fff;border-bottom:1px solid var(--border);padding:18px var(--gutter);gap:4px;
  }
  .nav.is-open a{padding:12px 0;border-bottom:1px solid var(--border)}
  .header-phone{display:none}
  .path{grid-template-columns:1fr}
  .path__item{border-right:0;border-bottom:1px solid var(--border)}
  .path__item:last-child{border-bottom:0}
  .quotes{grid-template-columns:1fr}
  .case__figures{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .statbar__grid{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .reba__row{flex-direction:column}
  .btn{width:100%}
  .header-actions .btn{width:auto}
  /* Header at 390px: brand + CTA + toggle do not fit on one line.
     The toggle is the only control that must survive; the hero CTA is
     one thumb-scroll away and the sticky mobile CTA arrives in Sonic Boom. */
  .site-header__inner{gap:12px}
  .brand__name{font-size:15.5px}
  .brand__loc{display:none}
  .brand__mark{width:32px;height:32px;font-size:15px}
  .header-actions .btn--cta{display:none}
  .quote__text{font-size:15.5px}
}
/* Never let a wide table widen the document. It scrolls inside its own box. */
.cmp{max-width:100%;-webkit-overflow-scrolling:touch}

/* ============================================================
   21. AKA PAGE TEMPLATE  (Stage 4)
   ============================================================ */
.crumbs{font-size:14px;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent);text-decoration:underline}
.crumbs span{margin:0 6px;color:#5A6B80}

.tier-badge{
  display:inline-block;font-size:12px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--accent);border:1px solid var(--border);
  border-radius:var(--radius);padding:5px 10px;background:#fff;margin-bottom:14px;
}

.aka__grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.aka__main{min-width:0}
.aka__aside{position:sticky;top:100px}

.toc{border:1px solid var(--border);border-radius:var(--radius);padding:20px;background:var(--surface);margin-bottom:20px}
.toc h2{font-size:14px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;font-family:var(--font-body);font-weight:600}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc li{margin-bottom:9px;line-height:1.4}
.toc a{font-size:14.5px;color:var(--ink);text-decoration:none;display:block}
.toc a:hover{color:var(--accent)}

.aside-cta{border:1px solid var(--border);border-radius:var(--radius);padding:22px;background:#fff}
.aside-cta h3{font-size:19px;margin-bottom:8px}
.aside-cta p{font-size:14.5px;color:var(--muted);margin-bottom:14px}
.aside-cta .btn{width:100%}
.aside-phone{display:block;text-align:center;margin-top:10px;font-size:14.5px;color:var(--muted);text-decoration:none}

/* Long-form body */
.entry__body{max-width:none}
.entry__body > h2{margin-top:2.2em;padding-top:.2em;scroll-margin-top:100px}
.entry__body > h2:first-child{margin-top:0}
.entry__body > h3{margin-top:1.7em;scroll-margin-top:100px}
.entry__body p{max-width:72ch}
.entry__body ul,.entry__body ol{max-width:72ch}
.entry__body li{margin-bottom:.45em}
.entry__body blockquote{
  margin:1.6em 0;padding:18px 22px;border-left:3px solid var(--accent);
  background:var(--surface);border-radius:0 var(--radius) var(--radius) 0;
}
.entry__body blockquote p:last-child{margin-bottom:0}
.entry__body a{color:var(--accent);font-weight:500}

/* FAQ */
.faq{margin-top:3em;border-top:1px solid var(--border);padding-top:2em}
.faq__item{border-bottom:1px solid var(--border);padding:18px 0}
.faq__item:last-child{border-bottom:0}
.faq__q{font-family:var(--font-display);font-weight:800;font-size:18px;margin:0 0 8px;color:var(--ink)}
.faq__a{margin:0;color:var(--muted);font-size:16px}

/* Related */
.related{margin-top:3em;border-top:1px solid var(--border);padding-top:2em}
.related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.related__card{
  border:1px solid var(--border);border-radius:var(--radius);padding:18px;
  text-decoration:none;color:inherit;transition:border-color .18s ease,transform .18s cubic-bezier(.16,1,.3,1);
}
.related__card:hover{border-color:var(--accent);transform:translateY(-2px)}
.related__card strong{display:block;font-family:var(--font-display);font-size:16px;margin-bottom:4px}
.related__card span{font-size:14px;color:var(--muted)}

/* Sticky mobile CTA (conversion mechanic) */
.mobile-cta{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:#fff;border-top:1px solid var(--border);padding:10px 16px;
  gap:10px;box-shadow:0 -2px 12px rgba(14,27,44,.08);
}
.mobile-cta .btn{flex:1;min-height:48px;font-size:16px}

@media (max-width:1024px){
  .aka__grid{grid-template-columns:1fr;gap:32px}
  .aka__aside{position:static;order:-1}
  .toc{margin-bottom:0}
  .aside-cta{display:none}
  .related__grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .mobile-cta{display:flex}
  body{padding-bottom:72px}
}

/* Footer column headings are h2 for a valid outline; styled small on purpose. */
.footer__grid .footer__h{
  color:#fff;font-size:15px;margin:0 0 14px;
  font-family:var(--font-display);font-weight:800;letter-spacing:0;
}