/* SKG Financial
   Editorial system built around the serif wordmark and the heritage crest.
   Brand: green #186340, ink #2E2E2E. Paper tones are derived, not invented. */

@font-face{font-family:'Bodoni';src:url('/assets/fonts/bodoni-moda-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap;font-style:normal}
@font-face{font-family:'Bodoni';src:url('/assets/fonts/bodoni-moda-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap;font-style:normal}
@font-face{font-family:'Bodoni';src:url('/assets/fonts/bodoni-moda-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap;font-style:normal}
@font-face{font-family:'Bodoni';src:url('/assets/fonts/bodoni-moda-latin-400-italic.woff2') format('woff2');font-weight:400;font-display:swap;font-style:italic}
@font-face{font-family:'Plex';src:url('/assets/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex';src:url('/assets/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Plex';src:url('/assets/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'PlexMono';src:url('/assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --green:#186340;
  --green-dk:#0d3f28;
  --green-dp:#0a3421;
  --green-lt:#e8efe9;
  --ink:#1f221f;
  --ink-2:#2E2E2E;
  --body:#4a504b;
  --muted:#6a706b;
  --paper:#fbfaf7;
  --paper-2:#f4f2ec;
  --rule:#ddd8cd;
  --rule-lt:#e9e5dc;
  --gold:#8a6a1c;
  --maxw:1180px;
  --col:70ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Plex',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:17.5px;
  line-height:1.62;
  color:var(--body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"kern" 1;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--green);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--green-dk)}

h1,h2{font-family:'Bodoni','Didot','Bodoni MT',Georgia,serif;color:var(--ink);font-weight:600;letter-spacing:-.005em;margin:0 0 .5em;line-height:1.14}
h3{font-family:'Plex',sans-serif;color:var(--ink);margin:0 0 .5em;line-height:1.14}
h1{font-size:clamp(2.05rem,4.1vw,3.3rem);line-height:1.1;letter-spacing:-.012em;font-weight:600;text-wrap:balance}
h2{font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:1.15;font-weight:600;text-wrap:balance}
h3{font-size:1.09rem;line-height:1.35;font-weight:600;letter-spacing:-.008em}
h4{font-family:'Plex',sans-serif;font-size:.79rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);margin:0 0 .9em}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.2em;padding-left:1.2em}
li{margin-bottom:.55em}
li::marker{color:var(--muted)}
strong,b{color:var(--ink);font-weight:600}
em{font-family:'Bodoni','Didot','Bodoni MT',Georgia,serif;font-style:italic;font-size:1.07em}
hr{border:0;border-top:1px solid var(--rule);margin:3rem 0}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.wrap.narrow{max-width:var(--maxw)}
.wrap.narrow>*{max-width:74ch}
.wrap.narrow>h1{max-width:20ch}
.wrap.narrow>h2{max-width:26ch}
.narrow{max-width:760px}
section{padding:84px 0}
section.tight{padding:52px 0}
.paper2{background:var(--paper-2)}
.ruled{border-top:1px solid var(--rule)}

/* eyebrow: mono, numbered, hairline */
.eyebrow{
  font-family:'PlexMono',ui-monospace,monospace;font-size:.735rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green);
  margin:0 0 1.15rem;display:flex;align-items:center;gap:14px
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--rule);max-width:120px}
.eyebrow.solo::after{display:none}
.center .eyebrow{justify-content:center}
.lede{font-size:1.16rem;line-height:1.6;color:var(--ink);font-weight:400;max-width:52ch}
.small{font-size:.905rem;line-height:1.55}
.muted{color:var(--muted)}
.center{text-align:center}
.serif{font-family:'Bodoni','Didot','Bodoni MT',Georgia,serif}

.skip{position:absolute;left:-9999px;top:0;background:var(--green);color:#fff;padding:12px 18px;z-index:300}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.dark :focus-visible,.band :focus-visible,footer.site :focus-visible,.topbar :focus-visible{outline-color:#fff}

/* ---------------- header ---------------- */
.topbar{background:var(--ink);color:#b9beb8;font-family:'PlexMono',monospace;font-size:.72rem;letter-spacing:.05em}
.topbar .wrap{display:flex;gap:16px;justify-content:space-between;align-items:center;min-height:36px;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none}
.topbar a:hover{text-decoration:underline}
.topbar .tb-hide{opacity:.85}

header.site{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:1px solid var(--rule)}
header.site .wrap{display:flex;align-items:center;gap:22px;min-height:82px}
.logo{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.logo img{height:54px;width:auto}
footer.site .logo img{height:62px}
@media (max-width:520px){.logo img{height:42px}header.site .wrap{min-height:66px}}

nav.main{margin-left:auto;display:flex;align-items:center;gap:2px}
nav.main a,.has-drop>button{
  font-family:'Plex',sans-serif;color:var(--ink);text-decoration:none;font-weight:500;font-size:.925rem;
  padding:10px 13px;background:none;border:0;cursor:pointer;white-space:nowrap;
  border-bottom:2px solid transparent;letter-spacing:.005em
}
nav.main a:hover,.has-drop>button:hover{color:var(--green);border-bottom-color:var(--green)}
nav.main a[aria-current="page"]{color:var(--green);border-bottom-color:var(--green)}

.has-drop{position:relative}
.has-drop>button{display:flex;align-items:center;gap:6px}
.has-drop>button::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.drop{
  position:absolute;top:100%;left:-4px;min-width:320px;background:var(--paper);
  border:1px solid var(--rule);box-shadow:0 20px 44px -22px rgba(20,30,22,.4);
  padding:6px;display:none
}
.has-drop.open .drop,.has-drop:hover .drop,.has-drop:focus-within .drop{display:block}
.drop a{display:block;padding:11px 14px;border-bottom:0;text-decoration:none}
.drop a strong{display:block;font-size:.95rem;color:var(--ink);font-weight:600}
.drop a small{display:block;color:var(--muted);font-weight:400;font-size:.83rem;line-height:1.45;margin-top:1px}
.drop a:hover{background:var(--paper-2)}
.drop a:hover strong{color:var(--green)}

.navcta{margin-left:10px}
nav.main .navcta a.btn{
  background:var(--green);color:#fff;border:1px solid var(--green);border-bottom:1px solid var(--green);
  padding:11px 20px;font-weight:600;font-size:.875rem
}
nav.main .navcta a.btn:hover{background:var(--green-dk);border-color:var(--green-dk);color:#fff}
.burger{
  margin-left:auto;display:none;width:44px;height:40px;border:1px solid var(--rule);
  background:none;cursor:pointer;padding:0;place-items:center
}
.burger span,.burger span::before,.burger span::after{
  content:"";display:block;width:19px;height:1.5px;background:var(--ink);position:relative
}
.burger span::before{position:absolute;top:-6px}
.burger span::after{position:absolute;top:6px}

@media (max-width:1060px){
  .js nav.main{display:none}
  nav.main{
    position:absolute;top:100%;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;
    padding:10px 26px 20px;gap:0;max-height:82vh;overflow:auto;
    box-shadow:0 24px 40px -26px rgba(20,30,22,.45)
  }
  nav.main.open{display:flex}
  nav.main a,.has-drop>button{padding:13px 2px;font-size:1.02rem;border-bottom:1px solid var(--rule-lt);width:100%}
  .has-drop{width:100%}
  .has-drop>button{justify-content:space-between;text-align:left}
  /* Accordion, not a permanently expanded list. Tapping the row opens it.
     Scoped to .js so that with scripting off every link is still reachable. */
  .drop{position:static;display:block;border:0;box-shadow:none;padding:0 0 10px 2px;min-width:0;background:none}
  .js .has-drop .drop,.js .has-drop:hover .drop,.js .has-drop:focus-within .drop{display:none}
  .js .has-drop.open .drop,.js .has-drop.open:hover .drop{display:block}
  .has-drop>button::after{transition:transform .15s ease}
  .has-drop.open>button::after{transform:rotate(-135deg) translateY(2px)}
  .has-drop.open>button{color:var(--green)}
  .drop a{border-bottom:0;padding:10px 0 10px 14px;border-left:2px solid var(--rule)}
  .drop a:hover,.drop a:active{background:none;border-left-color:var(--green)}
  .navcta{margin:14px 0 0}
  .navcta .btn{width:100%}
  .burger{display:grid}
  .topbar .tb-hide{display:none}
}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Plex',sans-serif;font-weight:600;font-size:.965rem;letter-spacing:.01em;
  background:var(--green);color:#fff!important;text-decoration:none;
  padding:15px 28px;border:1px solid var(--green);border-radius:2px;cursor:pointer;
  transition:background .16s ease,border-color .16s ease;line-height:1.2
}
.btn:hover{background:var(--green-dk);border-color:var(--green-dk)}
.btn.sm{padding:10px 18px;font-size:.875rem}
.btn.lg{padding:18px 34px;font-size:1.02rem}
.btn.ghost{background:transparent;color:var(--ink)!important;border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff!important}
.btn.white{background:#fff;color:var(--green-dk)!important;border-color:#fff}
.btn.white:hover{background:var(--paper-2)}
.btn.onlight{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.45)}
.btn.onlight:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:1.9rem 0 0}
.btn-note{font-size:.865rem;color:var(--muted);margin:1rem 0 0}

/* arrow link */
.arrow{
  font-family:'Plex',sans-serif;font-weight:600;font-size:.94rem;text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:2px;display:inline-block
}
.arrow::after{content:" →"}
.arrow:hover{border-bottom-color:transparent}

/* ---------------- hero ---------------- */
.hero{padding:96px 0 78px;background:var(--paper);border-bottom:1px solid var(--rule);position:relative;overflow:hidden}
.hero h1{max-width:17ch;margin-bottom:.42em}
.hero .lede{max-width:52ch}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:0;align-items:stretch}
.hero-grid>div:first-child{padding-right:64px}
.hero-grid>aside{border-left:1px solid var(--rule);padding-left:44px}
@media (max-width:980px){
  .hero{padding:52px 0 46px}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-grid>div:first-child{padding-right:0}
  .hero-grid>aside{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:36px}
}
.hero .crest{
  position:absolute;right:-130px;bottom:-150px;width:440px;opacity:.028;pointer-events:none;
  filter:grayscale(1)
}
@media (max-width:980px){.hero .crest{display:none}}

/* stat strip */
.strip{border-top:1px solid var(--rule);margin-top:38px;padding-top:24px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px 26px;align-items:start}
.strip div{font-size:.82rem;line-height:1.4;color:var(--muted)}
.strip b{display:block;font-family:'Bodoni','Didot','Bodoni MT',Georgia,serif;font-size:1.32rem;color:var(--ink);font-weight:600;line-height:1.2;letter-spacing:-.01em;margin-bottom:3px}
.strip b.stars{font-family:'Plex',sans-serif;font-size:.92rem;letter-spacing:1.5px;color:#936d18}
.stars{color:#936d18;letter-spacing:2px;font-size:.95rem}
.rating{text-decoration:none;font-weight:600;color:var(--ink)}
.rating b{color:#936d18;letter-spacing:2px}
.rating:hover{color:var(--green)}

/* ---------------- lanes (replaces card grid) ---------------- */
.lanes{display:grid;gap:0}
.lane{
  border-top:1px solid var(--rule);padding:34px 0 30px;
  display:grid;grid-template-columns:64px 1fr;gap:24px;text-decoration:none;color:inherit
}
.lane:last-child{border-bottom:1px solid var(--rule)}
.lane .num{
  font-family:'PlexMono',monospace;font-size:.78rem;color:var(--green);letter-spacing:.1em;
  padding-top:6px
}
.lane h3{font-size:1.34rem;line-height:1.25;margin-bottom:.35em;transition:color .15s ease}
.lane p{margin-bottom:.7em;max-width:var(--col)}
.small{max-width:var(--col)}
a.lane:hover h3{color:var(--green)}
a.lane:hover .go{border-bottom-color:transparent}
.go{
  font-weight:600;font-size:.92rem;color:var(--green);border-bottom:1px solid currentColor;
  padding-bottom:2px;display:inline-block;margin-top:4px
}
.go::after{content:" →"}
@media (max-width:600px){.lane{grid-template-columns:1fr;gap:8px}.lane .num{padding-top:0}}

/* Grid items default to min-width:auto, so a wide table stops the column
   shrinking and the whole page scrolls sideways on mobile. */
.split>*,.cols>*,.feature>*,.feature-body>*,.hero-grid>*,.band-grid>*,.fgrid>*{min-width:0}

/* ---------------- editorial columns ---------------- */
.cols{display:grid;gap:0 56px}
.c2{grid-template-columns:repeat(2,1fr)}
.c3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.c3{grid-template-columns:repeat(2,1fr);gap:0 40px}}
@media (max-width:660px){.c2,.c3{grid-template-columns:1fr}}

.item{border-top:2px solid var(--ink);padding:22px 0 32px}
.item.green{border-top-color:var(--green)}
.item h3{font-size:1.34rem;line-height:1.25;margin-bottom:.45em}
.item p:last-child{margin-bottom:0}
.kicker{
  font-family:'PlexMono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:10px
}
.priceblock.highlight .kicker{color:var(--green)}
a.item{text-decoration:none;color:inherit;transition:border-color .15s ease}
a.item:hover{border-top-color:var(--green)}
a.item:hover h3{color:var(--green)}

/* split: heading left, content right */
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:0 72px;align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:26px}}
.split-sticky{position:sticky;top:110px}
@media (max-width:900px){.split-sticky{position:static}}

/* ---------------- feature block (dark) ---------------- */
.dark{background:var(--green-dp);color:#c6d9cc;border-top:1px solid var(--green-dp)}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark .eyebrow{color:#8fc4a5}
.dark .eyebrow::after{background:rgba(255,255,255,.22)}
.dark .lede{color:#dcebe1}
.dark .muted{color:#9ab5a4}
.dark a{color:#fff}
.dark .item{border-top-color:rgba(255,255,255,.3)}
.dark .lane{border-color:rgba(255,255,255,.16)}
.dark .go{color:#fff}
.dark strong,.dark b{color:#fff}
.dark .btn-note{color:#9ab5a4}
.dark table{background:transparent;color:#c6d9cc}
.dark .tablewrap{border-color:rgba(255,255,255,.18)}
.dark th,.dark td{border-color:rgba(255,255,255,.14)}
.dark thead th{background:rgba(0,0,0,.25);color:#fff}
.dark tbody tr:nth-child(even){background:rgba(255,255,255,.03)}

/* feature block: asymmetric, not another 3-up */
.feature{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:0 76px;align-items:start}
@media (max-width:900px){.feature{grid-template-columns:1fr;gap:30px}}
.feature-body{display:grid;gap:44px}
.ex{border-left:1px solid rgba(255,255,255,.22);padding-left:30px}
.ex p:first-of-type{font-size:1.06rem;color:#e6f1ea}
.ex p:last-child{margin-bottom:0}
.ex .kicker{
  font-family:'PlexMono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:#8fc4a5;display:block;margin-bottom:12px
}
@media (max-width:900px){.ex{padding-left:22px}}

/* ---------------- pull quote / notes ---------------- */
.pull{font-family:'Bodoni','Didot','Bodoni MT',Georgia,serif;
  background:#fff;border:1px solid rgba(31,34,31,.10);border-radius:14px;
  padding:26px 26px 22px;margin:0;box-shadow:0 1px 2px rgba(31,34,31,.04);
  display:flex;flex-direction:column
}
.pull>p{flex:1 0 auto}
.cols.rail{gap:20px}
.pull cite{display:block;font-family:'Plex',sans-serif;font-size:.85rem;font-style:normal;color:var(--muted);margin-top:12px;letter-spacing:.02em}

.note{border:1px solid var(--rule);border-left:2px solid var(--green);background:var(--paper-2);padding:26px 28px}
.note>:last-child{margin-bottom:0}
.callout{border:1px solid #e0d4ae;border-left:2px solid #b8901f;background:#fdfaf1;padding:30px 32px}
.callout h3{color:#6b5210;margin-top:0}
.callout>:last-child{margin-bottom:0}

/* ---------------- tables ---------------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
table{border-collapse:collapse;width:100%;min-width:540px;font-size:.945rem;background:transparent}
th,td{text-align:left;padding:15px 18px 15px 0;border-bottom:1px solid var(--rule-lt);vertical-align:top}
th:last-child,td:last-child{padding-right:0}
thead th{
  font-family:'PlexMono',monospace;font-size:.7rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);padding-top:14px;padding-bottom:12px;
  border-bottom:1px solid var(--rule)
}
tbody tr:last-child td{border-bottom:0}
@media (max-width:640px){
  table{font-size:.9rem}
  th,td{padding:13px 14px 13px 0}
  /* two-column tables have room to wrap, so drop the scroll entirely */
  table.wrap2{min-width:0}
  table.wrap2 th,table.wrap2 td{padding-right:10px}
  /* Anything still scrolling gets a fade that stays pinned to the viewport
     edge instead of scrolling away with the content. */
  .tablewrap{position:relative;overflow-x:auto}
  .tablewrap>table{min-width:470px}
  .tablewrap>table.wrap2{min-width:0}
  .fadewrap{position:relative}
  .fadewrap::after{
    content:"";position:absolute;top:0;right:0;bottom:0;width:30px;pointer-events:none;
    background:linear-gradient(to right,rgba(251,250,247,0),var(--paper))
  }
}

/* ---------------- FAQ ---------------- */
.faq{border-top:1px solid var(--rule);margin-top:8px}
.faq details{border-bottom:1px solid var(--rule)}
/* Bodoni here was unreadable. Didone hairlines fall apart under about 24px,
   and a FAQ question sits at 17. Sans, and heavier, so it reads at a glance. */
.faq summary{font-family:'Plex',sans-serif;
  font-size:1.045rem;font-weight:600;line-height:1.4;letter-spacing:-.006em;color:var(--ink);
  cursor:pointer;padding:21px 44px 21px 0;list-style:none;position:relative;
}
.faq details[open] summary{color:var(--green)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{
  content:"";position:absolute;right:4px;background:var(--green);transition:transform .2s ease,opacity .2s ease
}
.faq summary::before{top:33px;width:13px;height:1.5px}
.faq summary::after{top:27px;right:9.75px;width:1.5px;height:13px}
.faq details[open] summary::after{opacity:0;transform:rotate(90deg)}
.faq summary:hover{color:var(--green)}
.faq .answer{padding:0 0 24px;max-width:var(--col)}
.faq .answer>:last-child{margin-bottom:0}

/* ---------------- steps ---------------- */
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{
  counter-increment:s;padding:24px 0 24px 74px;position:relative;margin:0;
  border-top:1px solid var(--rule)
}
.steps li:last-child{border-bottom:1px solid var(--rule)}
.steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:24px;
  font-family:'PlexMono',monospace;font-size:.82rem;color:var(--green);letter-spacing:.08em
}
.steps li strong{display:block;color:var(--ink);margin-bottom:2px;font-size:1.06rem}

/* ---------------- tick / cross lists ---------------- */
.ticks,.crosses{list-style:none;padding:0;margin:0 0 1.2em}
.ticks li,.crosses li{position:relative;padding-left:30px;margin-bottom:.68em}
.ticks li::before{
  content:"";position:absolute;left:2px;top:.52em;width:11px;height:6px;
  border-left:1.8px solid var(--green);border-bottom:1.8px solid var(--green);transform:rotate(-45deg)
}
.crosses li::before{
  content:"";position:absolute;left:4px;top:.72em;width:11px;height:1.8px;background:#9b4b3f;
  box-shadow:0 0 0 0 transparent;transform:rotate(45deg)
}
.crosses li::after{
  content:"";position:absolute;left:4px;top:.72em;width:11px;height:1.8px;background:#9b4b3f;transform:rotate(-45deg)
}

/* ---------------- breadcrumb ---------------- */
.crumb{
  font-family:'PlexMono',monospace;font-size:.72rem;letter-spacing:.09em;color:var(--muted);
  padding:20px 0 0;text-transform:uppercase
}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--green)}
.crumb span{margin:0 9px;opacity:.5}

/* ---------------- CTA band ---------------- */
.band{background:var(--green-dp);color:#c6d9cc;padding:88px 0}
.band h2{color:#fff;max-width:18ch;font-size:clamp(1.9rem,3.4vw,2.85rem)}
.band p{color:#c9e0d3;max-width:56ch;font-size:1.1rem}
.band .btn-note{color:#93b5a1}
.band .eyebrow{color:#8fc4a5}
.band .eyebrow::after{background:rgba(255,255,255,.22)}
.band-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:0 72px;align-items:end}
.band-grid>div:last-child{border-left:1px solid rgba(255,255,255,.18);padding-left:52px}
@media (max-width:860px){
  .band{padding:56px 0}
  .band-grid{grid-template-columns:1fr;gap:32px}
  .band-grid>div:last-child{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.18);padding-top:28px}
}

/* ---------------- tools ---------------- */
.tool{background:#fff;border:1px solid var(--rule);border-top:2px solid var(--green);padding:38px 40px;max-width:720px}
@media (max-width:600px){.tool{padding:26px 22px}}
.tool .field{margin-bottom:26px;border-bottom:1px solid var(--rule-lt);padding-bottom:26px}
.tool .field:last-of-type{border-bottom:0}
.tool label{
  display:block;font-family:'Plex',sans-serif;font-weight:600;color:var(--ink);
  margin-bottom:9px;font-size:1rem
}
.tool .hint{font-size:.86rem;color:var(--muted);margin:-5px 0 10px}
.tool select,.tool input[type=text],.tool input[type=email],.tool input[type=number],.tool input[type=date],.tool input[type=tel]{
  display:block;width:100%;max-width:100%;min-height:50px;
  padding:13px 14px;border:1px solid var(--rule);border-radius:2px;
  font-family:'Plex',sans-serif;font-size:16px;line-height:1.25;
  background:var(--paper);color:var(--ink);
  -webkit-appearance:none;appearance:none
}
/* Safari centres the date text and shrinks the field to its content unless
   both of these are set. 16px stops iOS zooming the page on focus. */
.tool input[type=date]{text-align:left}
.tool input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
.tool input[type=date]::-webkit-calendar-picker-indicator{opacity:.55}
.tool select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%236a706b' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px
}
.tool select:focus,.tool input:focus{outline:2px solid var(--green);outline-offset:0;border-color:var(--green)}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:block;padding:10px 16px;border:1px solid var(--rule);border-radius:2px;cursor:pointer;
  font-size:.92rem;font-weight:500;color:var(--ink);background:var(--paper);transition:.13s ease;user-select:none
}
.chip input:checked+span{background:var(--green);border-color:var(--green);color:#fff}
.chip input:focus-visible+span{outline:2px solid var(--green);outline-offset:2px}
.chip span:hover{border-color:var(--green)}
.tool input,.tool select,.tool textarea{border-color:#96928b}

.result{margin-top:30px;padding:30px 0 0;border-top:2px solid var(--green);display:none}
.result.show{display:block}
.result h3{margin-top:0;font-family:'Plex',sans-serif;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-size:.75rem}
.result h3 .figure{display:block;font-family:'Bodoni','Didot','Bodoni MT',Georgia,serif;font-size:2.6rem;letter-spacing:-.02em;line-height:1.1;text-transform:none;color:var(--green-dk);font-weight:600;margin-top:6px}
.result .figure{font-family:'Bodoni','Didot','Bodoni MT',Georgia,serif;
  color:var(--green-dk);letter-spacing:-.02em;line-height:1.08;margin:6px 0 6px;font-size:2.6rem
}
.result ul{margin-bottom:1.1em}
.scorebar{height:4px;background:var(--rule);margin:16px 0 20px;overflow:hidden}
.scorebar i{display:block;height:100%;background:var(--green);transition:width .55s ease}

.checklist{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}
.checklist li{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--rule-lt)}
.checklist input{margin-top:5px;width:17px;height:17px;accent-color:var(--green);flex:0 0 auto}
.checklist label{font-weight:400;color:var(--body);cursor:pointer}
.checklist label b{color:var(--ink);display:block;font-weight:500}

/* ---------------- HST lookup ---------------- */
.hst-filter{
  font-family:'Plex',sans-serif;padding:9px 16px;border:1px solid var(--rule);border-radius:2px;
  background:var(--paper);font-size:.9rem;font-weight:500;color:var(--ink);cursor:pointer
}
.hst-filter:hover{border-color:var(--green)}
.hst-filter.on{background:var(--green);border-color:var(--green);color:#fff}
.hst-list{border-top:1px solid var(--rule)}
.hst-row{border-bottom:1px solid var(--rule-lt)}
.hst-row summary{
  cursor:pointer;list-style:none;padding:15px 0;display:flex;gap:14px;align-items:baseline;
  justify-content:space-between
}
.hst-row summary::-webkit-details-marker{display:none}
.hst-row summary::after{content:"+";font-family:'PlexMono',monospace;color:var(--green);
  font-size:1.1rem;line-height:1;flex:0 0 auto;transition:transform .2s ease}
.hst-row[open] summary::after{content:"\2212"}
.hst-name{font-weight:600;color:var(--ink);font-size:1.02rem}
.hst-row:hover .hst-name{color:var(--green)}
.hst-tag{
  font-family:'PlexMono',monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;padding:4px 9px;border:1px solid;flex:0 0 auto
}
.hst-exempt .hst-tag{color:var(--green);border-color:#bcd6c6;background:#eef5f0}
.hst-taxable .hst-tag{color:#8c3d31;border-color:#e2c3bd;background:#fbf1ef}
.hst-depends .hst-tag{color:#7a5f12;border-color:#e4d5a8;background:#fdf8ec}
.hst-body{padding:0 0 18px;max-width:72ch}
.hst-body p{margin-bottom:.7em}
.hst-body p:last-child{margin-bottom:0}
.hst-empty{padding:26px 0}
@media (max-width:520px){
  .hst-row summary{flex-direction:column;gap:8px}
  .hst-tag{align-self:flex-start}
}

/* ---------------- subcontractor check ---------------- */
.se-lists{display:grid;grid-template-columns:1fr 1fr;gap:0 36px;margin:20px 0}
@media (max-width:640px){.se-lists{grid-template-columns:1fr;gap:22px}}
.se-col ul{padding-left:1.1em;margin-bottom:0}
.se-h-bad{color:#8c3d31}
.se-h-ok{color:var(--green)}
.result.se-bad{border-top-color:#8c3d31}
.result.se-warn{border-top-color:#b8901f}
.result.se-ok{border-top-color:var(--green)}

/* ---------------- footer ---------------- */
footer.site{background:var(--ink);color:#a8afa9;padding:72px 0 32px;font-size:.93rem}
footer.site a{color:#dfe4e0;text-decoration:none}
footer.site a:hover{color:#fff;text-decoration:underline}
footer.site h4{color:#fff;margin-bottom:16px}
.fgrid{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:40px}
@media (max-width:1100px){.fgrid{grid-template-columns:1.4fr repeat(2,1fr);gap:36px}}
@media (max-width:820px){.fgrid{grid-template-columns:1fr 1fr;gap:34px}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr}}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin-bottom:10px}
.fbot{
  margin-top:52px;padding-top:24px;border-top:1px solid #3d423e;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:'PlexMono',monospace;font-size:.72rem;letter-spacing:.05em;color:#828a83
}
.disclaimer{font-size:.85rem;color:#828a83;max-width:74ch;margin-top:18px;line-height:1.6}
.fcrest{width:104px;opacity:.62;margin:0 0 20px}

/* ---------------- sticky mobile bar ---------------- */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;
  background:var(--paper);border-top:1px solid var(--rule);padding:9px 12px;gap:9px;
  box-shadow:0 -8px 22px -14px rgba(20,30,22,.5)
}
.stickybar .btn{flex:1;padding:13px 8px;font-size:.92rem}
@media (max-width:1060px){.stickybar{display:flex}body{padding-bottom:70px}
  /* the sticky bar already carries the CTA, so the one inside the panel is
     a duplicate and it collides with the bar on a short screen */
  nav.main .navcta{display:none}
  nav.main{padding-bottom:26px}
}

/* ---------------- misc ---------------- */
.reviewed{
  font-family:'PlexMono',monospace;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:0 0 1.6rem
}
.postlist{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}
.postlist li{border-bottom:1px solid var(--rule-lt)}
.postlist a{font-family:'Plex',sans-serif;
  font-size:1.035rem;font-weight:600;letter-spacing:-.006em;
  text-decoration:none;color:var(--ink);line-height:1.4
}
.postlist a:hover{color:var(--green)}
.priceblock{border-top:2px solid var(--ink);padding:26px 0 30px;display:flex;flex-direction:column}
.priceblock .go{margin-top:auto;padding-top:18px}
.priceblock.highlight{border-top-color:var(--green)}
.priceblock .amt{font-family:'Bodoni','Didot','Bodoni MT',Georgia,serif;
  font-size:clamp(1.42rem,1.9vw,1.72rem);color:var(--ink);font-weight:600;
  letter-spacing:-.015em;line-height:1.2;margin:6px 0 2px
}
.priceblock.highlight .amt{color:var(--green-dk)}
.priceblock .per{display:block;font-size:.85rem;color:var(--muted);font-weight:400;font-family:'Plex',sans-serif;letter-spacing:.04em;margin-top:4px}

/* ---------------- post body ---------------- */
.prose>*{max-width:74ch}
.prose h2{font-size:clamp(1.55rem,2.3vw,1.85rem);margin:2.6rem 0 .6em}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:'Plex',sans-serif;font-size:1.04rem;font-weight:600;margin:2rem 0 .5em;letter-spacing:-.005em}
.prose p{margin:0 0 1.15em}
.prose ul,.prose ol{margin:0 0 1.3em}
.prose li{margin-bottom:.55em}
.prose blockquote{
  border-left:2px solid var(--green);margin:2rem 0;padding:2px 0 2px 26px;
  font-family:'Bodoni','Didot','Bodoni MT',Georgia,serif;font-size:1.28rem;line-height:1.4;color:var(--ink)
}
.prose blockquote p:last-child{margin-bottom:0}
.prose .tablewrap{margin:1.8rem 0;max-width:100%}
.prose code{
  font-family:'PlexMono',monospace;font-size:.88em;background:var(--paper-2);
  padding:2px 6px;border:1px solid var(--rule-lt)
}
.prose hr{margin:2.6rem 0}


/* ---------------- phone ---------------- */
@media (max-width:640px){
  body{font-size:16.5px;line-height:1.58}
  section{padding:52px 0}
  section.tight{padding:36px 0}
  .wrap{padding:0 20px}
  .hero{padding:36px 0 34px}
  .hero h1{max-width:none}
  .lede{font-size:1.08rem;line-height:1.5}

  /* the eyebrow rule eats width on a narrow screen */
  .eyebrow{margin-bottom:.85rem;gap:10px}
  .eyebrow::after{max-width:44px}

  /* stat strip reads better as a row of three than a stack */
  .strip{grid-template-columns:1fr 1fr;gap:18px 16px;margin-top:26px;padding-top:20px}
  .strip b{font-size:1.14rem}
  .strip div{font-size:.79rem;line-height:1.35}

  /* editorial blocks: tighter, with the rule doing more work */
  .item{padding:18px 0 24px}
  .cols{gap:0}
  .lane{padding:24px 0 22px}
  .steps li{padding:20px 0 20px 60px}
  .steps li::before{top:20px}

  .btn{width:100%;padding:15px 20px}
  .btn-row{gap:10px;margin-top:1.5rem}
  .btn-row .btn{flex:1 1 100%}

  .faq summary{padding:17px 34px 17px 0}
  .faq summary::before{top:29px}
  .faq summary::after{top:23px}

  .band{padding:52px 0}
  .band h2{max-width:none}
  .pull{font-size:1.18rem;padding-left:20px;margin:1.8rem 0}
  .tool{padding:24px 20px}
  .tool .field{margin-bottom:20px;padding-bottom:20px}
  .result .figure{font-size:2rem}
  .priceblock{padding:20px 0 24px}
  footer.site{padding:48px 0 26px}
  .fbot{margin-top:34px;font-size:.68rem}
  .crumb{font-size:.66rem;padding:14px 0 0}
}

@media print{header.site,footer.site,.stickybar,.band,.topbar{display:none}body{background:#fff}}

/* Blog index and hub listings: the description under each title */
.postlist li{padding:2px 0}
.postlist a{display:block;padding:16px 0 4px}
.postlist .pdesc{display:block;color:var(--muted);font-size:.9rem;line-height:1.5;padding:0 0 16px;max-width:70ch}

/* Salary vs dividends on a phone: the fourth column is hidden and repeated as
   its own row underneath, so the table fits without a sideways scroll. */
.sdnote{display:none}
@media (max-width:640px){
  #sdForm .tablewrap>table{min-width:0}
  #sdForm .tablewrap::after{display:none}
  #sdBody td:nth-child(4),#sdForm thead th:nth-child(4){display:none}
  #sdBody tr:not(.sdnote) td{border-bottom:0;padding-bottom:6px}
  .sdnote{display:table-row}
  .sdnote td{padding:0 0 15px;color:var(--muted);font-size:.85rem;line-height:1.5}
}

/* Tool cards sat on a different vertical axis from everything above them */
.tool{margin-left:0;margin-right:0}

/* Footer and aside column labels. These were <h4>, which skipped heading
   levels on every page; they are labels, not headings. */
.fcol{font-family:'Plex',sans-serif;font-size:.79rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:#fff;margin:0 0 16px}

/* The compliance-only tier is a real option, positioned last and pitched
   quieter than the two we actually recommend. */
.priceblock.lite{border-top-color:var(--rule)}
.priceblock.lite h3{color:var(--body)}
.priceblock.lite .amt{font-size:clamp(1.24rem,1.6vw,1.44rem);color:var(--body);font-weight:500}
.priceblock.lite .ticks li{font-size:.92rem}
.priceblock.lite .ticks li::before{opacity:.65}

/* CRA deadline checker on a phone. The third column carries a long sentence,
   so it becomes its own row rather than forcing a sideways scroll. */
.dlnote{display:none}
@media (max-width:640px){
  #dlForm .tablewrap>table{min-width:0}
  #dlBody td:nth-child(3),#dlForm thead th:nth-child(3){display:none}
  #dlForm thead th:nth-child(1),#dlBody td:nth-child(1){width:52%}
  #dlBody tr:not(.dlnote) td{border-bottom:0;padding-bottom:6px}
  .dlnote{display:table-row}
  .dlnote td{padding:0 0 15px;color:var(--muted);font-size:.85rem;line-height:1.5}
}
.dlcal{
  display:inline-block;margin-top:7px;white-space:nowrap;
  font-family:'PlexMono',monospace;font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;
  text-decoration:none;color:var(--green);border-bottom:1px solid var(--rule)
}
.dlcal:hover{border-bottom-color:var(--green)}

/* The four checkpoints */
.ckpts{display:grid;gap:0}
.ckpt{
  border-top:1px solid var(--rule);padding:26px 0 24px;
  display:grid;grid-template-columns:56px 1fr;gap:20px
}
.ckpt:last-child{border-bottom:1px solid var(--rule)}
.ckpt .num{font-family:'PlexMono',monospace;font-size:.78rem;color:var(--green);letter-spacing:.1em;padding-top:5px}
.ckpt h3{font-size:1.28rem;line-height:1.25;margin-bottom:.15em}
.ckpt .kick{
  font-family:'PlexMono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .7em
}
.ckpt p:last-child{margin-bottom:0;max-width:var(--col)}
@media (max-width:600px){.ckpt{grid-template-columns:1fr;gap:6px}.ckpt .num{padding-top:0}}

/* Contents list for the long reference page */
.toc{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px 40px;counter-reset:toc
}
.toc li{margin:0;border-top:1px solid var(--rule-lt);counter-increment:toc}
.toc a{
  display:block;padding:11px 0 11px 30px;text-decoration:none;color:var(--ink);
  font-size:.945rem;position:relative
}
.toc a::before{
  content:counter(toc,decimal-leading-zero);position:absolute;left:0;top:11px;
  font-family:'PlexMono',monospace;font-size:.7rem;color:var(--green);letter-spacing:.06em
}
.toc a:hover{color:var(--green)}
@media (max-width:820px){.toc{grid-template-columns:repeat(2,1fr);gap:2px 28px}}
@media (max-width:520px){.toc{grid-template-columns:1fr}}
/* jump links must not land under the sticky header */
:target{scroll-margin-top:104px}

/* Mobile density. The homepage read as a wall of text on a phone: 17px body at a
   1.58 line-height meant a three-sentence paragraph ran seven lines. Type stays at
   or above 16px so nothing gets harder to read, the savings come from leading,
   section padding and the gaps between stacked blocks. */
@media (max-width:600px){
  main section{padding-top:26px;padding-bottom:26px}
  main p,.ex p,.lede,.ckpt p,.item .small{line-height:1.45}
  .ex p{font-size:16px}
  .lede{font-size:16.5px}
  .feature{gap:22px}
  .ex{margin-bottom:18px}
  h2{margin-bottom:10px}
  .split{gap:20px}
  .lanes{gap:14px}
  .strip{gap:14px 18px}
}

/* Stacked-block density on phones. Everything below 900px stacks into one column,
   so the gaps that read as breathing room on desktop turn into dead vertical space. */
@media (max-width:600px){
  .lane{padding-top:12px;padding-bottom:12px}
  .lane .small{margin:2px 0 4px}
  .ckpts{gap:16px}
  .ckpt{padding-top:12px;padding-bottom:12px}
  .ckpt .kick{margin:1px 0 4px}
  .hero{padding-top:22px}
  .band-grid{gap:18px}
}

/* ============================================================
   Phone layout. Under 760px every two-column split collapses, and the page
   was left as heading, prose, hairline rule, repeat, which reads as an article
   rather than a business. Three fixes: contain the blocks in cards, turn the
   two repeating lists into swipeable rails, and let the bands differ in colour.
   Desktop is untouched.
   ============================================================ */
@media (max-width:760px){

  /* --- cards: blocks get an edge instead of sitting loose on the page --- */
  .lane,.ckpt,.pull,.faq details{
    background:#fff;border:1px solid rgba(31,34,31,.10);border-radius:14px;
    box-shadow:0 1px 2px rgba(31,34,31,.04)
  }
  .lane,.ckpt{border-top:0;padding:18px 16px}
  .lane:last-child,.ckpt:last-child{border-bottom:1px solid rgba(31,34,31,.10)}
  .pull{border-left:0;padding:18px 16px;margin:0}
  .faq{border-top:0;margin-top:14px}
  .faq details{border-bottom:1px solid rgba(31,34,31,.10);padding:2px 16px;margin-bottom:10px}
  .faq summary::before{top:35px;right:26px}
  .faq summary::after{top:29px;right:31.75px}
  .faq .answer{padding-bottom:18px}

  /* --- rails: swipe instead of scroll past --- */
  .rail{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--pad,20px) * -1);padding:2px var(--pad,20px) 10px;
    scrollbar-width:none
  }
  .rail::-webkit-scrollbar{display:none}
  /* Stacked, not scrolled. Three rails on one page was too much sideways motion,
     so only the testimonials keep it. These are compact enough to stack cheaply. */
  .lanes{display:grid;gap:10px}
  .ckpts{display:grid;gap:10px}
  .lanes>.lane,.ckpts>.ckpt{display:block;padding:14px 16px}
  .lane h3{font-size:1.16rem;margin-bottom:.2em}
  .lane p,.ckpt p{margin-bottom:.45em}
  .ckpt h3{font-size:1.1rem;margin-bottom:.1em}
  .ckpt .kick{margin:0 0 .4em}
  .rail>.pull{flex:0 0 83%;scroll-snap-align:start}
  .lane:last-child,.ckpt:last-child{border-bottom:1px solid rgba(31,34,31,.10)}

  /* --- bands: colour separates the sections, not a hairline --- */
  main>section{background:#fff}
  main>section.paper2{background:var(--paper-2)}
  main>section.hero{background:var(--paper)}
  .ruled{border-top:1px solid rgba(31,34,31,.08)}
}

/* --- compact tool chips: five things, one swipe, no stacking --- */
.toolbar-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.toolbar-head .eyebrow{margin:0}
.toolrail{display:flex;gap:10px;flex-wrap:wrap}
.tchip{
  display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  border:1px solid var(--green);border-radius:999px;background:#fff;
  font-family:'Plex',sans-serif;font-size:.92rem;font-weight:500;
  color:var(--green);text-decoration:none;white-space:nowrap;
  transition:background .15s ease,color .15s ease
}
.tchip:hover{background:var(--green);color:#fff}
@media (max-width:760px){.toolrail{flex-wrap:wrap;gap:8px}.tchip{min-height:40px;padding:0 13px;font-size:.86rem}}

/* Client marks on the testimonials. Three logos from three unrelated businesses,
   in red, black and red-on-black, sitting on a page built from green and ink.
   Muted by default so they read as proof rather than competing with the brand,
   full colour on hover and for anyone who has asked for reduced motion off. */
.pull footer{display:flex;align-items:center;gap:12px;margin-top:14px}
.clogo{
  height:30px;width:auto;flex:0 0 auto;object-fit:contain;
  filter:grayscale(1);opacity:.62;transition:filter .18s ease,opacity .18s ease
}
.pull:hover .clogo{filter:none;opacity:1}
.pull footer cite{margin-top:0}
@media (max-width:760px){.clogo{height:26px}}

/* Contrast through the middle. The page ran cream and white from the hero all the
   way to the footer, with the only dark band right at the bottom. The checkpoints
   now carry a full dark green band mid-page and the tools sit on the soft green,
   so the sequence reads cream, white, soft green, dark green, cream, white, dark. */
.tint{background:var(--green-lt)}
.dark .ckpt{border-top-color:rgba(255,255,255,.16)}
.dark .ckpt:last-child{border-bottom-color:rgba(255,255,255,.16)}
.dark .ckpt .num{color:#8fc4a5}
.dark .ckpt .kick{color:#8fc4a5}
.dark .ckpt p{color:#c6d9cc}
@media (max-width:760px){
  /* cards on the dark band are tinted glass, not white, or the light text vanishes */
  .dark .ckpt{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);box-shadow:none}
  .dark .ckpt:last-child{border-color:rgba(255,255,255,.16)}
  main>section.tint{background:var(--green-lt)}
  main>section.dark{background:var(--green-dp)}
}

/* Disclaimer inside a tool result. The footer and the notes below each tool already
   carry the site-wide wording, but neither is on screen at the moment someone reads
   a number off a calculator, which is the moment it matters. */
.toolnote{
  font-size:.83rem;line-height:1.5;color:var(--muted);
  border-left:2px solid var(--rule);padding:2px 0 2px 12px;margin:18px 0 14px
}
.dark .toolnote{color:#9ab5a4;border-left-color:rgba(255,255,255,.22)}