/* Smoky Mountain CPAs - shared stylesheet
   v4 ART DIRECTION PASS (2026-07-30). The v3 system (tokens, 8px spacing
   scale, component-depth) stays intact - this pass replaces the palette,
   swaps system fonts for self-hosted Fraunces + Schibsted Grotesk, and adds
   the ridgeline identity system: a self-hosted SVG ridge motif used as a
   section divider on dark bands, a faint topographic contour texture on
   those same bands, ghosted giant numerals behind numbered content, an
   editorial pull-quote band, a comparison table, a framed/overlapping hero
   photo, whisper-quiet scroll motion, and a restyled pricing calculator.
   Still hand-rolled, no framework/build step, no CDN - fonts are woff2
   files self-hosted in /assets/fonts/. */

/* ------------------------------------------------------------------ */
/* Fonts - self-hosted, OFL-licensed. No CDN links.                    */
/* ------------------------------------------------------------------ */
@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url("/assets/fonts/fraunces-variable.woff2") format("woff2");
}
@font-face{
  font-family:"Fraunces";
  font-style:italic;
  font-weight:300 900;
  font-display:swap;
  src:url("/assets/fonts/fraunces-variable-italic.woff2") format("woff2");
}
@font-face{
  font-family:"Schibsted Grotesk";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("/assets/fonts/schibsted-grotesk-variable.woff2") format("woff2");
}

:root{
  /* ---- Color tokens - the Smoky Mountain autumn palette ---- */
  --ink:#1F2A24;           /* pine-charcoal - dark bands, headings */
  --paper:#FAF6EE;         /* warm cream - page background */
  --cream:#FAF6EE;         /* same warm cream - light text on dark, light fills */
  --mist:#ECEFE8;          /* alternate light band (.section-alt) */
  --maple:#C4622D;         /* THE accent - CTAs (large scale), flourish word, active states */
  --maple-deep:#AC521F;    /* darkened maple for solid button fills (AA w/ light text) */
  --maple-ink:#8C421A;     /* darkened maple for small maple-colored text */
  --brass:#B0863A;         /* secondary accent - rules, frames, watermarks (decorative, not text) */
  --brass-ink:#7C5A24;     /* brass, darkened - eyebrow/label text on light grounds */
  --brass-light:#C99A4A;   /* brass, lightened - eyebrow/label text on dark grounds */
  --pine:#2E5E4A;          /* links on light, hover states */
  --surface:#ffffff;       /* true white - elevated cards/footer columns sit on this */
  --muted:#5B6B5C;
  --line:#E2DAC8;
  --max:1120px;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* ---- Legacy aliases - kept so every existing rule/inline style still
     resolves correctly under the new palette without a full markup churn. ---- */
  --accent:var(--maple);
  --gold:var(--brass-light);
  --accent-ink:var(--maple-ink);
  --rust:var(--pine);
  --teal-dark:var(--ink);
  --teal:var(--ink);

  /* Spacing scale - 8px base, used everywhere instead of one-off px values. */
  --sp-1:8px;
  --sp-2:16px;
  --sp-3:24px;
  --sp-4:32px;
  --sp-5:48px;
  --sp-6:64px;
  --sp-7:88px;
  /* v5 SPACING PUNCH LIST (2026-07-31): section padding trimmed - the old
     40-64px (standard) / 56-88px (hero) scale was stacking with the
     ridgeline divider + adjacent section's own padding into 400-650px
     voids between content blocks (measured, not eyeballed - see the
     acceptance audit in the job ticket). Two sizes only, both smaller. */
  --section-pad: clamp(28px, 4vw, 40px);
  --section-pad-lg: clamp(40px, 6vw, 60px);

  /* Component depth */
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(31,42,36,.07), 0 2px 8px rgba(31,42,36,.06);
  --shadow-md: 0 4px 12px rgba(31,42,36,.09), 0 12px 28px rgba(31,42,36,.09);

  /* ---- The ownable motif - smoky ridgelines (self-hosted inline SVG,
     no external requests). Cream-tinted for use on dark ink bands; ink-
     tinted for use as a faint watermark on light surfaces. Three layered
     silhouettes baked into each asset at opacity .06/.12/.2 - deliberately
     subtle; the failure mode we're guarding against is kitsch. ---- */
  --ridge-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0,120 L90,70 L180,100 L260,55 L340,95 L430,50 L520,90 L610,60 L700,98 L790,58 L880,92 L970,52 L1060,96 L1150,60 L1240,94 L1330,55 L1440,90 L1440,160 L0,160 Z' fill='%23FAF6EE' fill-opacity='0.06'/%3E%3Cpath d='M0,135 L110,95 L200,125 L300,85 L400,130 L500,90 L600,132 L700,95 L800,128 L900,88 L1000,130 L1100,92 L1200,126 L1300,90 L1440,120 L1440,160 L0,160 Z' fill='%23FAF6EE' fill-opacity='0.12'/%3E%3Cpath d='M0,150 L130,120 L230,145 L340,110 L450,148 L560,115 L670,150 L780,118 L890,146 L1000,112 L1110,148 L1220,116 L1440,140 L1440,160 L0,160 Z' fill='%23FAF6EE' fill-opacity='0.2'/%3E%3C/svg%3E");
  --ridge-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0,120 L90,70 L180,100 L260,55 L340,95 L430,50 L520,90 L610,60 L700,98 L790,58 L880,92 L970,52 L1060,96 L1150,60 L1240,94 L1330,55 L1440,90 L1440,160 L0,160 Z' fill='%231F2A24' fill-opacity='0.06'/%3E%3Cpath d='M0,135 L110,95 L200,125 L300,85 L400,130 L500,90 L600,132 L700,95 L800,128 L900,88 L1000,130 L1100,92 L1200,126 L1300,90 L1440,120 L1440,160 L0,160 Z' fill='%231F2A24' fill-opacity='0.12'/%3E%3Cpath d='M0,150 L130,120 L230,145 L340,110 L450,148 L560,115 L670,150 L780,118 L890,146 L1000,112 L1110,148 L1220,116 L1440,140 L1440,160 L0,160 Z' fill='%231F2A24' fill-opacity='0.2'/%3E%3C/svg%3E");
  --contour-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23FAF6EE' stroke-width='1'%3E%3Cpath d='M20,40 Q60,10 110,30 T200,50'/%3E%3Cpath d='M10,80 Q70,50 120,75 T210,90'/%3E%3Cpath d='M25,120 Q80,95 130,115 T205,130'/%3E%3Cpath d='M15,160 Q75,140 125,158 T200,170'/%3E%3Cpath d='M30,195 Q85,178 135,192 T210,205'/%3E%3C/g%3E%3C/svg%3E");
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  font-size:17px;
}
/* NOTE: deliberately NOT overflow-x:hidden on body/html - that breaks
   position:sticky on .site-header (any ancestor with overflow other than
   visible disables sticky for its descendants). Horizontal overflow from
   the decorative motifs is prevented at the source instead: every
   full-bleed pseudo-element below is sized/positioned to stay within its
   own element's box. */
img{max-width:100%;height:auto;display:block;}
/* figure carries a 1em/40px browser default margin - zeroed so wrapping a
   dense content block (data table, comparison grid, stat row, pull-quote)
   in <figure> never adds unintended whitespace around it. figure is also
   used deliberately here as the semantic wrapper for exactly these
   self-contained blocks (v5 spacing fix - see style.css header note). */
figure{margin:32px 0;}
figure:first-child{margin-top:0;}
figure:last-child{margin-bottom:0;}
figure + figure{margin-top:24px;}
a{color:var(--pine);}
a:hover{color:var(--maple-ink);}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--sp-3);}

h1,h2,h3,h4{
  font-family:var(--serif);
  color:var(--ink);
  line-height:1.08;
  letter-spacing:-.01em;
  margin:0 0 .6em;
  font-weight:600;
  font-variation-settings:"opsz" 40;
}
h1{font-size:clamp(2.8rem,7vw,5.5rem);line-height:1.05;font-weight:600;}
h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.1;}
h3{font-size:clamp(19px,2.4vw,24px);line-height:1.2;}
h4{font-size:clamp(17px,2vw,18px);margin-bottom:.5em;line-height:1.3;font-weight:600;}
/* The italic flourish word - ONE per major headline, per the art direction
   spec. Large-scale use only (headline sizes clear WCAG AA-large 3:1 against
   both cream and ink; body-text-scale maple is handled by --maple-ink). */
h1 em,h2 em,h3 em{
  font-style:italic;font-weight:600;color:var(--maple);
}
.hero h1 em,.hero h2 em,.hero h3 em,.section-dark h1 em,.section-dark h2 em,.section-dark h3 em{
  color:var(--maple);
}
p{margin:0 0 1.15em;}
ul,ol{margin:0 0 1.15em;padding-left:1.3em;}
li{margin-bottom:.5em;}
article p,article li,.prose p,.prose li{max-width:70ch;}

/* Header */
.site-header{
  background:rgba(250,246,238,.82);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
  transition:box-shadow .2s ease;
}
.site-header.is-scrolled{box-shadow:0 2px 18px rgba(31,42,36,.14);}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:14px;padding-bottom:14px;gap:24px;
  transition:padding .2s ease;
}
.site-header.is-scrolled .header-inner{padding-top:8px;padding-bottom:8px;}
.brand{
  font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:-.01em;
  color:var(--ink);text-decoration:none;white-space:nowrap;line-height:44px;
}
.brand:hover{color:var(--maple-ink);}
.site-nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.site-nav a{
  color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;
}
.site-nav a:hover{color:var(--maple-ink);}
.btn-nav{
  background:var(--ink);color:var(--cream) !important;
  padding:9px 18px;border-radius:4px;font-weight:600 !important;
}
.btn-nav:hover{background:var(--maple-deep);}
.nav-toggle{
  display:none;background:none;border:1px solid var(--line);border-radius:4px;
  font-size:20px;padding:0;cursor:pointer;
  min-width:44px;min-height:44px;align-items:center;justify-content:center;
}
.btn-nav{min-height:44px;display:inline-flex;align-items:center;}

@media (max-width:820px){
  .site-nav{
    display:none;flex-direction:column;align-items:stretch;
    position:absolute;top:100%;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--line);padding:8px 24px 16px;gap:2px;
    max-height:calc(100vh - 72px);overflow-y:auto;
  }
  .site-nav.open{display:flex;}
  .nav-toggle{display:inline-flex;}
  .site-nav a{padding:12px 0;min-height:44px;display:flex;align-items:center;width:100%;box-sizing:border-box;}
  .site-nav a.btn-nav{justify-content:center;margin-top:8px;}
}

.nav-dropdown{position:relative;}
.nav-dropdown summary{
  cursor:pointer;color:var(--ink);font-size:15px;font-weight:500;
  list-style:none;display:flex;align-items:center;gap:4px;
}
.nav-dropdown summary:hover{color:var(--maple-ink);}
.nav-dropdown summary::-webkit-details-marker{display:none;}
.nav-dropdown summary::after{content:"\25BE";font-size:11px;}
.nav-dropdown[open] summary::after{content:"\25B4";}
.nav-dropdown .dropdown-panel{display:flex;flex-direction:column;}
@media (min-width:821px){
  .nav-dropdown summary{min-height:44px;}
  .nav-dropdown .dropdown-panel{
    position:absolute;top:100%;left:0;background:var(--paper);
    border:1px solid var(--line);border-radius:6px;padding:8px;
    min-width:190px;box-shadow:0 6px 18px rgba(31,42,36,.14);margin-top:6px;
  }
  .nav-dropdown .dropdown-panel a{padding:9px 10px;border-radius:4px;white-space:nowrap;}
  .nav-dropdown .dropdown-panel a:hover{background:var(--mist);}
}
@media (max-width:820px){
  .nav-dropdown summary{padding:12px 0;min-height:44px;}
  .nav-dropdown .dropdown-panel{padding:0 0 4px 16px;}
  .nav-dropdown .dropdown-panel a{padding:10px 0;min-height:44px;}
}

@media (max-width:480px){
  .btn,.btn-outline,.btn-light{
    display:block;width:100%;box-sizing:border-box;text-align:center;margin:6px 0;
  }
  .step{gap:12px;}
}

/* Hero / sections - alternating bands (ink / cream / mist / white). Flat
   ink, not a gradient. */
section{padding:var(--section-pad) 0;}
.section-lg{padding:var(--section-pad-lg) 0;}
.hero{
  background:var(--ink);
  color:var(--paper);padding:var(--section-pad-lg) 0;
  position:relative;overflow:hidden;
}
.hero h1,.hero h2,.hero h3{color:#fffaf2;}
.hero p{color:#cfd9cf;}
.eyebrow{
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass-ink);margin-bottom:var(--sp-2);display:block;
}
.hero .eyebrow,.section-dark .eyebrow,.pull-quote .eyebrow{color:var(--brass-light);}

/* ---- Ridgeline motif: entry divider on dark bands + footer top edge.
   v5: the divider LIVES INSIDE the band transition - capped well under the
   96px ceiling from the punch list, and the section immediately before a
   divider is required to drop its own bottom padding to --sp-2 (below) so
   the divider reads as ONE transition, not a divider added on top of two
   full sections' worth of padding. ---- */
.hero,.section-dark,.stat-band,.pull-quote,.site-footer{position:relative;}
.section-dark::before,.stat-band::before,.pull-quote::before,.site-footer::before{
  content:"";
  display:block;
  width:100%;
  height:clamp(20px,3vw,32px);
  background-image:var(--ridge-cream);
  background-repeat:no-repeat;
  background-size:100% 100%;
  pointer-events:none;
}
.stat-band::before{transform:scaleX(-1);}
.pull-quote::before{background-position:center;transform:scaleX(-1) scaleY(-1);}
.site-footer::before{
  transform:scaleX(-1);
  height:clamp(24px,3.5vw,36px);
}
/* Sections whose NEXT sibling opens with a divider (dark band, stat band,
   pull-quote) drop their own bottom padding - the divider supplies the
   visual separation, so the two shouldn't stack. Same for whatever section
   sits last before the footer (which has its own divider). */
section:has(+ .section-dark),
section:has(+ .stat-band),
section:has(+ .pull-quote),
main > section:last-child{
  padding-bottom: var(--sp-3);
}
/* ...and the dark/divider band itself drops its facing top padding to match. */
.section-dark, .stat-band, .pull-quote{padding-top: var(--sp-3);}
/* Faint topographic contour texture - dark bands only, always BEHIND the
   text (never covering it): absolute, z-index 0, content sits at z-index 1. */
.hero::after,.section-dark::after,.stat-band::after,.pull-quote::after{
  content:"";
  position:absolute;inset:0;
  background-image:var(--contour-svg);
  background-repeat:repeat;
  background-size:220px 220px;
  opacity:.04;
  pointer-events:none;
  z-index:0;
}
.hero > .wrap,.section-dark > .wrap,.stat-band > .wrap,.pull-quote > .wrap{position:relative;z-index:1;}

/* Buttons - one radius/weight system, real hover AND focus-visible states. */
.btn,.btn-outline,.btn-light{
  border-radius:var(--radius-sm);font-weight:700;text-decoration:none;
  margin:6px 8px 6px 0;transition:background-color .15s,color .15s,border-color .15s,transform .1s;
}
.btn{
  display:inline-block;background:var(--maple-deep);color:var(--cream);
  padding:14px 28px;
}
.btn:hover{background:var(--ink);color:#fff;}
.btn:active{transform:translateY(1px);}
.btn-outline{
  display:inline-block;background:transparent;color:var(--paper);
  border:1.5px solid rgba(250,246,238,.4);
  padding:12.5px 26px;font-weight:600;
}
.btn-outline:hover{border-color:var(--brass-light);color:var(--brass-light);}
.btn-light{
  display:inline-block;background:var(--ink);color:var(--paper);
  padding:14px 28px;
}
.btn-light:hover{background:var(--maple-deep);}
.btn:focus-visible,.btn-outline:focus-visible,.btn-light:focus-visible,
.btn-nav:focus-visible,a:focus-visible{
  outline:3px solid var(--maple-ink);outline-offset:2px;
}

.section-alt{background:var(--mist);}
.section-dark{background:var(--ink);color:var(--cream);}
.section-dark h2,.section-dark h3,.section-dark h4{color:#fffaf2;}
.section-dark p{color:#cfd9cf;}
.section-dark hr,.divider-dark{border-color:rgba(250,246,238,.15);}
hr{border:none;border-top:1px solid var(--line);margin:var(--sp-4) 0;}

.grid{display:grid;gap:var(--sp-3);}
/* stacked grids butt together at 0px otherwise - match the internal row gap */
.grid + .grid{margin-top:var(--sp-3);}
/* same seam when a lone card (or paragraph) directly follows a grid */
.grid + .card{margin-top:var(--sp-3);}
.grid + p{margin-top:var(--sp-3);}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--sp-4);box-shadow:var(--shadow-sm);
  transition:transform .15s,box-shadow .15s;
}
.card > *:last-child{margin-bottom:0;}
.card:has(a):hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.card a{color:var(--maple-ink);font-weight:600;}
.card a:hover{color:var(--pine);}
.section-dark .card{
  background:rgba(250,246,238,.06);border-color:rgba(250,246,238,.14);
  box-shadow:none;
}
.section-dark .card:has(a):hover{box-shadow:0 8px 24px rgba(0,0,0,.3);}
.section-dark .card a{color:var(--brass-light);}
.step{
  display:flex;gap:var(--sp-2);align-items:flex-start;margin-bottom:var(--sp-2);
}
.step:last-child{margin-bottom:0;}
.step p:last-child,.step h4:last-child{margin-bottom:0;}
.step-num{
  flex:0 0 30px;width:30px;height:30px;border-radius:50%;
  background:var(--brass-light);color:var(--ink);font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:14px;
}

/* ---- Ghosted giant numerals - 3-step process cards (.step-grid) and
   numbered pain lists (.step-list). CSS counters, no markup duplication.
   Kept small/contained enough to never overlap neighboring rows or sit
   under running text - the failure mode we're guarding against. ---- */
.step-grid{counter-reset:stepnum;}
.step-grid .card{position:relative;overflow:hidden;}
.step-grid .card::before{
  counter-increment:stepnum;
  content:counter(stepnum,decimal-leading-zero);
  position:absolute;right:6px;bottom:-18px;
  font-family:var(--serif);font-weight:600;font-size:7rem;line-height:1;
  color:var(--ink);opacity:.07;
  pointer-events:none;z-index:0;
  font-variation-settings:"opsz" 40;
}
.step-grid .card > *{position:relative;z-index:1;}

.step-list{counter-reset:stepnum;}
.step-list .step{position:relative;}
.step-list .step-num{position:relative;z-index:1;}
.step-list .step::before{
  counter-increment:stepnum;
  content:counter(stepnum,decimal-leading-zero);
  position:absolute;left:-4px;top:50%;transform:translateY(-50%);
  font-family:var(--serif);font-weight:600;font-size:clamp(2.4rem,7vw,3.4rem);line-height:1;
  color:var(--ink);opacity:.07;
  pointer-events:none;z-index:0;
}

table{
  width:100%;border-collapse:collapse;margin:0 0 1.5em;background:var(--paper);
  font-size:15px;
}
caption{caption-side:top;text-align:left;font-weight:700;margin-bottom:10px;}
th,td{
  border:1px solid var(--line);padding:12px 14px;text-align:left;
}
th{background:var(--ink);color:var(--cream);font-weight:600;}
tr:nth-child(even) td{background:#F5F0E4;}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}

.headshot{
  width:120px;height:120px;border-radius:50%;object-fit:cover;
  border:3px solid var(--line);box-shadow:var(--shadow-sm);
}
.person{display:flex;gap:var(--sp-3);align-items:flex-start;margin-bottom:var(--sp-4);flex-wrap:wrap;}
.person:last-child{margin-bottom:0;}
/* inside a grid the gap owns the spacing - don't stack a margin on top of it */
.grid > .person{margin-bottom:0;}
.person > div{flex:1 1 auto;}
.person > div > *:last-child{margin-bottom:0;}

blockquote{
  border-left:3px solid var(--brass);margin:0 0 1em;padding:4px 0 4px 20px;
  font-style:italic;color:var(--muted);
}

.faq h4{margin-top:1.1em;}
.faq details{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  margin-bottom:10px;padding:0 18px;
}
.faq summary{
  cursor:pointer;font-family:var(--serif);font-weight:600;font-size:17px;
  padding:14px 0;list-style:none;position:relative;padding-right:28px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%);
  font-size:22px;color:var(--maple-ink);font-family:var(--sans);font-weight:400;
}
.faq details[open] summary::after{content:"\2212";}
.faq details > p{margin:0 0 16px;color:var(--muted);}

/* Mobile sticky click-to-call */
.sticky-call{display:none;}
@media (max-width:720px){
  .sticky-call{
    display:flex;align-items:center;justify-content:center;gap:8px;
    position:fixed;left:16px;bottom:16px;z-index:60;
    background:var(--ink);color:var(--cream);text-decoration:none;
    font-family:var(--sans);font-weight:600;font-size:14px;
    padding:12px 18px;border-radius:999px;box-shadow:0 6px 20px rgba(31,42,36,.35);
  }
  .sticky-call:hover{color:var(--cream);}
}

article img{border-radius:var(--radius-sm);margin:0 0 1.2em;box-shadow:var(--shadow-sm);}
article{max-width:760px;margin:0 auto;padding:48px 24px;box-sizing:content-box;}
.post-meta{color:var(--muted);font-size:14px;margin-bottom:1.5em;}
.breadcrumb{color:var(--muted);font-size:14px;margin:0 0 1em;}
.breadcrumb a{color:var(--muted);}

.post-list{display:grid;gap:28px;margin:0;padding:0;list-style:none;}
.post-list li{border:1px solid var(--line);border-radius:8px;padding:0;margin:0;}
.post-list li > a{
  display:grid;grid-template-columns:220px 1fr;grid-template-areas:"thumb title" "thumb excerpt";
  gap:6px 20px;align-items:start;
  padding:20px;text-decoration:none;color:inherit;
}
.post-list img{grid-area:thumb;border-radius:var(--radius-sm);width:100%;height:100%;object-fit:cover;margin:0;box-shadow:var(--shadow-sm);}
.post-list h2{grid-area:title;font-size:22px;margin-bottom:.3em;align-self:end;}
.post-list p{grid-area:excerpt;margin:0;}
.post-list li > a:hover h2{color:var(--maple-ink);}
@media (max-width:640px){
  .post-list li > a{grid-template-columns:1fr;grid-template-areas:"thumb" "title" "excerpt";}
}

/* Footer - v5: margin-top/divider/signoff padding trimmed together (was
   64 + up to 80 + 24 = up to 168px of dead space before a single word of
   footer content rendered, on top of whatever padding the last section on
   the page already had). */
.site-footer{background:var(--ink);color:#cfd9cf;margin-top:var(--sp-2);}
/* padding-top only: a `padding: X 0` shorthand here would zero out the
   horizontal padding these divs inherit from .wrap (same element) */
.footer-signoff{padding-top:var(--sp-1);}
.footer-signoff-line{
  font-family:var(--serif);font-weight:600;font-style:italic;
  font-size:clamp(1.6rem,4vw,2.6rem);color:var(--cream);margin:0;
}
.footer-main{
  padding-top:var(--sp-4);padding-bottom:var(--sp-4);
  display:grid;gap:var(--sp-4);
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  align-items:start;
}
.footer-brand{display:flex;flex-direction:column;gap:var(--sp-1);}
.footer-wordmark{
  font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:-.01em;
  color:var(--cream);margin:0;
}
.footer-brand p{margin:0;font-size:14px;color:#cfd9cf;}
.footer-brand .footer-credentials{
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brass-light);
}
.footer-col h4{
  color:#fffaf2;font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--sp-2);
}
.footer-col ul{list-style:none;margin:0;padding:0;}
.footer-col li{margin-bottom:.6em;}
.footer-col a{color:#cfd9cf;text-decoration:none;font-size:14px;}
.footer-col a:hover{color:var(--brass-light);}
.footer-bottom{
  border-top:1px solid rgba(250,246,238,.14);padding:var(--sp-2) 0;
  font-size:13px;color:#93a294;
}
.footer-bottom .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap;
}
@media (max-width:820px){
  .footer-main{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .footer-main{grid-template-columns:1fr;}
}

.footer-inner{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;
}
.footer-inner img{border-radius:6px;}
.footer-inner p{margin:0;}

/* Homepage proof/stat band */
.stat-band{background:var(--ink);}
.stat-band .grid{gap:1px;background:rgba(250,246,238,.14);border-radius:var(--radius);overflow:hidden;}
.stat-item{
  background:var(--ink);padding:var(--sp-4) var(--sp-3);text-align:center;
}
.stat-item .stat-value{
  display:block;font-family:var(--serif);font-size:clamp(22px,3vw,28px);font-weight:600;
  color:var(--brass-light);margin-bottom:4px;
}
.stat-item .stat-label{
  display:block;font-size:13px;color:#cfd9cf;
}

/* ---- Split hero - copy left, framed/overlapping photo right. ---- */
.hero-split{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:var(--sp-5);align-items:end;text-align:left;
}
.hero-copy .eyebrow{margin-bottom:var(--sp-2);}
.hero-trustline{
  display:flex;gap:var(--sp-1) var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-3);
  font-size:14px;color:#cfd9cf;list-style:none;padding:0;
}
.hero-photo{
  position:relative;
  z-index:6;
  margin-bottom:-64px; /* the overlap: bleeds ~64px into the section below */
}
.hero-photo::before{
  /* brass offset frame */
  content:"";position:absolute;top:-12px;left:-12px;right:12px;bottom:12px;
  border:1px solid var(--brass);border-radius:var(--radius);
  pointer-events:none;z-index:0;
}
.hero-photo img{
  position:relative;z-index:1;
  border-radius:var(--radius);box-shadow:var(--shadow-md);width:100%;
}
@media (max-width:820px){
  .hero-split{grid-template-columns:1fr;text-align:center;}
  .hero-trustline{justify-content:center;}
  .hero-photo{order:2;max-width:420px;margin:0 auto;}
  /* the overlap collapses gracefully - no bleed into the next band once stacked */
  .hero-photo{margin-bottom:0;}
  .hero-photo::before{top:-8px;left:-8px;right:8px;bottom:8px;}
}

.center{text-align:center;}
.small{font-size:13px;color:var(--muted);}
.form-placeholder{
  border:2px dashed var(--line);border-radius:8px;padding:24px;background:var(--mist);
}
.form-placeholder label{display:block;font-weight:600;margin:14px 0 6px;font-size:14px;}
.form-placeholder input,.form-placeholder textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:4px;
  font-family:var(--sans);font-size:15px;
}
.form-placeholder .todo-badge{
  display:inline-block;background:var(--maple-deep);color:#fff;font-size:11px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:3px;margin-bottom:10px;
}

/* ------------------------------------------------------------------ */
/* Pull-quote band - full-width ink editorial statement                */
/* ------------------------------------------------------------------ */
.pull-quote{background:var(--ink);color:var(--cream);}
.pull-quote blockquote{
  font-family:var(--serif);font-weight:600;font-style:normal;
  font-size:clamp(1.6rem,4.2vw,2.7rem);line-height:1.2;letter-spacing:-.01em;
  max-width:840px;margin:0 auto;padding:0;border:none;color:#fffaf2;
  text-align:center;
}
.pull-quote blockquote em{font-style:italic;color:var(--maple);}
.pull-quote cite{
  display:block;margin-top:22px;font-family:var(--sans);font-style:normal;
  font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass-light);text-align:center;
}

/* ------------------------------------------------------------------ */
/* Comparison table - "Your dad's bookkeeper vs. Smoky Mountain"       */
/* ------------------------------------------------------------------ */
.compare-table{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow-sm);margin-top:var(--sp-4);
}
.compare-row{display:contents;}
.compare-cell{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;font-size:15px;}
.compare-row:last-child .compare-cell{border-bottom:none;}
.compare-head .compare-cell{
  font-family:var(--serif);font-weight:600;font-size:17px;background:var(--mist);
}
.compare-label{font-weight:600;color:var(--ink);}
.compare-us{background:rgba(196,98,45,.05);border-left:2px solid var(--maple);font-weight:600;}
.compare-icon-yes{color:var(--pine);font-weight:700;font-size:18px;}
.compare-icon-no{color:var(--muted);font-size:18px;}
@media (max-width:640px){
  .compare-table{display:block;border:none;background:none;box-shadow:none;margin-top:var(--sp-3);}
  .compare-row{display:block;background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius);padding:14px 16px;margin-bottom:12px;box-shadow:var(--shadow-sm);}
  .compare-head{display:none;}
  .compare-cell{display:block;padding:3px 0;border:none;font-size:14px;}
  .compare-label{font-family:var(--serif);font-weight:600;font-size:17px;color:var(--ink);margin-bottom:6px;}
  .compare-cell.compare-them::before{content:"Most bookkeepers: ";font-weight:600;color:var(--muted);}
  .compare-cell.compare-us::before{content:"Smoky Mountain: ";font-weight:600;color:var(--maple-ink);}
  .compare-us{background:none;border-left:none;padding-left:0;}
}

/* ------------------------------------------------------------------ */
/* Motion - whispers, not shouts. Everything below only runs when the  */
/* visitor hasn't asked for reduced motion; absent that, content is    */
/* simply visible with no transition, full stop.                      */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(10px);transition:opacity .5s ease-out,transform .5s ease-out;}
  .reveal.is-visible{opacity:1;transform:translateY(0);}
}

/* ------------------------------------------------------------------ */
/* Pricing calculator (v4 - restyled: Fraunces total, maple featured   */
/* tier, ridgeline watermark on the popular card)                      */
/* ------------------------------------------------------------------ */
.calc{margin-top:32px;}
.calc-levels{
  display:grid;gap:18px;margin-bottom:24px;padding-top:14px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.calc-level{
  position:relative;display:block;cursor:pointer;overflow:visible;
  background:var(--surface);border:2px solid var(--line);border-radius:var(--radius);
  padding:22px 20px;box-shadow:var(--shadow-sm);
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.calc-level:hover{border-color:var(--maple);box-shadow:var(--shadow-md);transform:translateY(-2px);}
.calc-level input{
  position:absolute;opacity:0;width:44px;height:44px;top:8px;right:8px;margin:0;cursor:pointer;
}
/* Featured/popular tier: maple top-border + a faint ridgeline watermark. */
.calc-level[data-popular="true"]{
  background:var(--ink);border-color:var(--maple);
  transform:scale(1.04);
  box-shadow:0 16px 44px rgba(31,42,36,.30);
  z-index:2;
}
.calc-level[data-popular="true"]:hover{transform:scale(1.04) translateY(-2px);}
.calc-level[data-popular="true"] .calc-level-name{color:var(--cream);}
.calc-level[data-popular="true"] .calc-level-price{color:var(--brass-light);}
.calc-level[data-popular="true"] .calc-level-price span{color:#A9B5AC;}
.calc-level[data-popular="true"] .calc-level-cadence{color:#B8C4BC;}
.calc-level[data-popular="true"] .calc-level-blurb{color:#DDE4DF;}
.calc-level[data-popular="true"]::after{
  content:"";position:absolute;inset:0;border-radius:inherit;overflow:hidden;
  background-image:var(--ridge-ink);
  background-repeat:no-repeat;background-position:bottom;background-size:100% 55%;
  opacity:.25;pointer-events:none;z-index:0;
}
.calc-level > *{position:relative;z-index:1;}
.calc-level:has(input:checked),.calc-level.is-selected{
  border-color:var(--maple-deep);box-shadow:0 0 0 2px var(--maple-deep) inset,var(--shadow-md);background:var(--mist);
}
/* the popular card is dark with cream text - selecting it must NOT swap in the
   light mist background or the cream text disappears into it */
.calc-level[data-popular="true"]:has(input:checked),.calc-level[data-popular="true"].is-selected{
  background:var(--ink);
  border-color:var(--maple);
  box-shadow:0 0 0 2px var(--maple) inset,0 16px 44px rgba(31,42,36,.30);
}
.calc-level:has(input:focus-visible){outline:3px solid var(--maple-ink);outline-offset:2px;}
.calc-level-badge{
  display:none;background:var(--maple-deep);color:#fff;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;border-radius:999px;
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);z-index:3;
  box-shadow:0 3px 10px rgba(31,42,36,.25);white-space:nowrap;
}
.calc-level[data-popular="true"] .calc-level-badge{display:inline-block;}
.calc-level-name{
  display:block;font-family:var(--serif);font-size:22px;font-weight:600;
  color:var(--ink);margin-bottom:2px;
}
.calc-level-price{
  display:block;font-family:var(--serif);font-size:30px;font-weight:600;color:var(--maple-ink);
  margin-bottom:6px;
}
.calc-level-price span{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--muted);}
.calc-level-cadence{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:8px;}
.calc-level-blurb{display:block;font-size:14px;color:var(--ink);margin:0;}

.calc-addons{
  border:1px solid var(--line);border-radius:10px;background:var(--mist);
  padding:6px 20px;margin-bottom:24px;
}
.calc-addon{
  display:flex;align-items:center;gap:14px;padding:14px 0;cursor:pointer;
  border-bottom:1px solid var(--line);min-height:44px;
}
.calc-addon:last-child{border-bottom:none;}
.calc-addon input{position:absolute;opacity:0;width:1px;height:1px;}
.calc-addon-toggle{
  flex:0 0 44px;width:44px;height:26px;border-radius:13px;background:#d8d0c2;
  position:relative;transition:background .15s;
}
.calc-addon-toggle::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.calc-addon input:checked + .calc-addon-toggle{background:var(--maple-deep);}
.calc-addon input:checked + .calc-addon-toggle::after{transform:translateX(18px);}
.calc-addon input:focus-visible + .calc-addon-toggle{outline:3px solid var(--brass);outline-offset:2px;}
.calc-addon-label{flex:1;font-weight:600;font-size:15px;}
.calc-addon-label .calc-addon-price{font-weight:500;color:var(--muted);font-size:14px;}

.calc-total-box{
  text-align:center;background:var(--ink);color:var(--cream);
  border-radius:10px;padding:32px 24px;position:relative;overflow:hidden;
}
.calc-total-box::before{
  content:"";position:absolute;inset:0;
  background-image:var(--contour-svg);background-repeat:repeat;background-size:180px 180px;
  opacity:.05;pointer-events:none;
}
.calc-total-box > *{position:relative;z-index:1;}
.calc-total-label{
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass-light);margin-bottom:6px;
}
.calc-total{
  font-family:var(--serif);font-size:clamp(38px,7vw,56px);font-weight:600;color:#fffaf2;
  margin:0 0 4px;font-variant-numeric:tabular-nums;
}
.calc-total span{font-family:var(--sans);font-size:16px;font-weight:500;color:#cfd9cf;}
.calc-qualifier{color:#cfd9cf;max-width:520px;margin:0 auto 20px;}
.calc-cta{font-size:16px;}
.calc-tax-note{
  color:#cfd9cf;margin:16px auto 0;max-width:520px;padding-top:16px;
  border-top:1px solid rgba(250,246,238,.2);
}

@media (max-width:480px){
  .calc-addons{padding:4px 16px;}
  .calc-total-box{padding:26px 18px;}
}

/* v7 spacing pass - checklist rhythm (2026-08-01) */
.checklist{list-style:none;padding-left:0;margin:20px 0 28px;}
.checklist li{margin-bottom:12px;line-height:1.55;padding-left:4px;}
.calc{margin-bottom:56px;}
#pricing h3{margin-top:44px;margin-bottom:14px;}
#pricing .checklist + p{margin-top:6px;}
section .wrap > h3 + p{margin-top:0;}