/* =========================================================================
   RENTERFIXES.COM — site styles
   A niche blog in the Piffleworks network. "Warm Newsprint, Renter Green."
   Built on the Piffleworks tokens (tokens.css). Two-sided color system:
     --fix   (teal)  = DIY repairs, projects, apartment upgrades
     --money (coral) = deposits, landlords, calculators, renter rights
   ========================================================================= */

:root{
  /* RenterFixes accent = teal (the "fix it" green). Overrides DS default. */
  --accent:      #1F8A70;
  --accent-deep: #166B57;
  --accent-soft: #D8EEE7;
  --fix:         #1F8A70;
  --fix-deep:    #166B57;
  --fix-soft:    #D8EEE7;
  /* Money / deposit / risk pop = coral (already in tokens as --coral) */
  --money:       #F0502E;
  --money-deep:  #D63C1B;
  --money-soft:  #FCE3D9;
  --ink-deep:    #14100A;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; background-color:var(--paper);}
body.pw, body{
  margin:0; color:var(--ink);
  background-color:var(--paper);
  /* faded cracked brickwork — revealed only inside irregular worn "plaster chipped
     away" patches, scattered randomly across every page (tiles every 1500×1400px). */
  background-image:url("brick-patches.svg?v=3");
  background-size:1500px 1400px;
  background-repeat:repeat;
  font-family:var(--font-body); font-size:var(--text-base); line-height:var(--leading-normal);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* Keep the brickwork in negative space only — text columns sit on clean paper so the
   texture never runs behind readable copy. Cards, grids, margins and section padding
   stay transparent, so the patches still show in the gaps. Scoped off tinted sections
   (they're already opaque) so we don't lighten them. */
.hero__copy,
.wrap--reading,
.article,
.crumb,
.pager,
.section:not(.section--tint) .section-head__t,
.section:not(.section--tint) .section-link{
  background-color:var(--paper);
}
img{max-width:100%; display:block;}
a{color:var(--accent-deep); text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--ink); line-height:1.12;
  letter-spacing:var(--tracking-tight); font-weight:800; margin:0; text-wrap:pretty;}

.wrap{max-width:var(--container); margin:0 auto; padding:0 24px;}
.wrap--reading{max-width:760px;}
.eyebrow{font-family:var(--font-ui); font-size:var(--text-xs); font-weight:700;
  letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--accent);
  display:inline-block; margin:0;}
.eyebrow--money{color:var(--money-deep);}
.mono{font-family:var(--font-mono);}
mark{background:var(--marker); padding:0.04em 0.22em; border-radius:3px;}

/* ============================ BUTTONS ============================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-ui); font-weight:700; font-size:16px; letter-spacing:0.005em;
  padding:0 24px; height:52px; border-radius:var(--radius-pill);
  border:2px solid transparent; white-space:nowrap; color:#fff;
  transition:transform .14s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
}
.btn svg{width:20px; height:20px;}
/* override .pw a link color (tokens.css) which otherwise tints button text */
.pw a.btn{color:#fff;}
.pw a.btn--ghost{color:var(--ink);}
.pw a.btn--ink{color:var(--paper);}
.btn--fix{background:var(--fix);} .btn--fix:hover{background:var(--fix-deep);}
.btn--money{background:var(--money);} .btn--money:hover{background:var(--money-deep);}
.btn--ink{background:var(--ink); color:var(--paper);} .btn--ink:hover{background:var(--ink-deep);}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line-strong);}
.btn--ghost:hover{border-color:var(--ink); background:var(--ink-wash);}
.btn--sm{height:42px; font-size:14px; padding:0 18px;}
/* The "sticker press" — hard offset shadow that collapses on press */
.btn--sticker{border-color:var(--line-ink); box-shadow:var(--shadow-hard); border-radius:12px;}
.btn--sticker:hover{transform:translate(1px,1px); box-shadow:3px 3px 0 var(--line-ink);}
.btn--sticker:active{transform:translate(4px,4px); box-shadow:0 0 0 var(--line-ink);}

/* ============================ HEADER ============================ */
.site-header{position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(10px) saturate(1.1);
  border-bottom:1px solid var(--line);}
.site-header__bar{display:flex; align-items:center; gap:28px; height:74px;}
.wordmark{font-family:var(--font-display); font-weight:800; letter-spacing:-0.03em;
  font-size:25px; line-height:1; color:var(--ink); display:inline-flex; align-items:center; gap:10px;}
.wordmark__mark{width:34px; height:34px; border-radius:9px; background:var(--fix); flex-shrink:0;
  display:grid; place-items:center; color:#fff; border:2.5px solid var(--line-ink);
  box-shadow:2.5px 2.5px 0 var(--line-ink); transform:rotate(-3deg);}
.wordmark__mark svg{width:19px; height:19px;}
.wordmark .dot{color:var(--money);}
.main-nav{display:flex; align-items:center; gap:20px; margin-left:auto;}
.main-nav a{font-family:var(--font-ui); font-weight:600; font-size:15px; color:var(--ink-2);
  padding:6px 0; position:relative; transition:color .15s var(--ease); white-space:nowrap;}
.main-nav a::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2.5px;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .18s var(--ease);}
.main-nav a:hover{color:var(--ink);} .main-nav a:hover::after{transform:scaleX(1);}
.main-nav a.is-active{color:var(--ink);} .main-nav a.is-active::after{transform:scaleX(1);}
.nav-search{width:42px; height:42px; border-radius:var(--radius-pill); display:grid; place-items:center;
  color:var(--ink-2); border:1px solid var(--line-strong);}
.nav-search:hover{color:var(--ink); border-color:var(--ink);}
.nav-search svg{width:19px; height:19px;}
.hamburger{display:none; width:44px; height:44px; border-radius:10px; align-items:center; justify-content:center;
  color:var(--ink); border:1px solid var(--line-strong);}
.hamburger svg{width:24px; height:24px;}
.mobile-drawer{display:none; position:fixed; inset:74px 0 0; z-index:55; background:var(--paper);
  padding:20px 24px; flex-direction:column; gap:2px; overflow:auto;
  transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .2s var(--ease), transform .2s var(--ease);}
.mobile-drawer.open{opacity:1; transform:none; pointer-events:auto;}
.mobile-drawer a{font-family:var(--font-display); font-weight:700; font-size:21px; color:var(--ink);
  padding:15px 4px; border-bottom:1px solid var(--line);}

/* ============================ ADSENSE SLOTS ============================ */
.ad{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:repeating-linear-gradient(135deg, var(--paper-2), var(--paper-2) 11px, #efe6d4 11px, #efe6d4 22px);
  border:1px dashed var(--line-strong); border-radius:var(--radius-sm); color:var(--ink-3);
  font-family:var(--font-mono); font-size:12px; text-align:center; gap:4px;}
.ad::before{content:"ADVERTISEMENT"; font-size:10px; letter-spacing:0.14em; color:var(--ink-3);
  position:absolute; top:7px; left:0; right:0; font-weight:600;}
.ad__size{font-weight:600; color:var(--ink-2);}
.ad--leaderboard{width:100%; max-width:728px; height:90px; margin:0 auto;}
.ad--rect{width:100%; max-width:336px; height:280px; margin:0 auto;}
.ad--halfpage{width:300px; height:600px;}
.ad--inline{width:100%; min-height:130px; padding:26px 16px 14px;}
.ad-band{padding:18px 0; background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

/* mobile sticky anchor ad */
.ad-anchor{display:none; position:fixed; left:0; right:0; bottom:0; z-index:70; height:60px;
  background:var(--card); border-top:1px solid var(--line-strong); box-shadow:0 -4px 16px rgba(28,22,15,.1);
  align-items:center; justify-content:center;}
.ad-anchor .ad{width:320px; height:50px; border:none; background:var(--paper-2);}
.ad-anchor__close{position:absolute; top:-22px; right:10px; width:26px; height:22px; border-radius:6px 6px 0 0;
  background:var(--card); border:1px solid var(--line-strong); border-bottom:none; display:grid; place-items:center; color:var(--ink-2);}

/* ============================ HERO ============================ */
.hero{position:relative; overflow:hidden; padding:72px 0 64px; background:transparent;}
.hero__grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center;}
.hero h1{font-size:clamp(40px,5.4vw,64px); line-height:1.02; margin:14px 0 0;}
.hero h1 .fix{color:var(--fix);}
.hero h1 .money{color:var(--money);}
.hero__sub{font-size:var(--text-lg); color:var(--ink-2); max-width:34ch; margin:18px 0 0; line-height:1.5;}
.hero__cta{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap;}
.hero__trust{display:flex; align-items:center; gap:18px; margin-top:26px; color:var(--ink-2);
  font-size:14px; font-family:var(--font-ui); font-weight:600; flex-wrap:wrap;}
.hero__trust .dot{width:5px; height:5px; border-radius:50%; background:var(--line-strong);}
.hero__trust svg{width:16px; height:16px; color:var(--fix); vertical-align:-3px; margin-right:5px;}

/* hero visual = the "deposit hinge" stat card stack */
.hinge-card{background:var(--card); border:2.5px solid var(--line-ink); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-hard); padding:26px 26px 22px; transform:rotate(1.5deg);}
.hinge-card__label{font-family:var(--font-ui); font-weight:700; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--money-deep);}
.hinge-card__big{font-family:var(--font-display); font-weight:800; font-size:54px; line-height:1; color:var(--ink);
  margin:6px 0 4px; font-variant-numeric:tabular-nums;}
.hinge-card__note{font-size:14px; color:var(--ink-2); margin:0;}
.hinge-card__bar{height:10px; border-radius:99px; background:var(--paper-2); margin:16px 0 8px; overflow:hidden;}
.hinge-card__bar span{display:block; height:100%; background:var(--fix); border-radius:99px;}
.hinge-mini{display:flex; gap:12px; margin-top:14px;}
.hinge-mini__item{flex:1; background:var(--fix-soft); border-radius:12px; padding:12px 14px;}
.hinge-mini__item.is-money{background:var(--money-soft);}
.hinge-mini__item b{display:block; font-family:var(--font-display); font-size:22px; color:var(--ink);}
.hinge-mini__item span{font-size:12px; color:var(--ink-2); font-family:var(--font-ui); font-weight:600;}

/* ============================ SECTION SHELL ============================ */
.section{padding:64px 0;}
.section--tint{background:var(--paper-2);}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:30px; flex-wrap:wrap;}
.section-head__t{display:flex; flex-direction:column; gap:8px;}
.section-head h2{font-size:clamp(28px,3.4vw,40px);}
.section-head p{margin:0; color:var(--ink-2); font-size:var(--text-lg); max-width:54ch;}
.section-link{font-family:var(--font-ui); font-weight:700; font-size:15px; color:var(--accent-deep);
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;}
.section-link svg{width:18px; height:18px; transition:transform .15s var(--ease);}
.section-link:hover svg{transform:translateX(4px);}

/* pillar header chip */
.pillar-tag{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-ui); font-weight:700;
  font-size:13px; letter-spacing:.06em; text-transform:uppercase; padding:7px 15px; border-radius:var(--radius-pill);}
.pillar-tag svg{width:16px; height:16px;}
.pillar-tag--fix{background:var(--fix-soft); color:var(--fix-deep);}
.pillar-tag--money{background:var(--money-soft); color:var(--money-deep);}

/* ============================ CATEGORY CARDS ============================ */
.cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.cat-card{display:flex; flex-direction:column; gap:10px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:24px; box-shadow:var(--shadow-sm);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);}
.cat-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--line-strong);}
.cat-card__icon{width:48px; height:48px; border-radius:12px; display:grid; place-items:center; margin-bottom:4px;
  background:var(--fix-soft); color:var(--fix-deep);}
.cat-card__icon svg{width:26px; height:26px;}
.cat-card.is-money .cat-card__icon{background:var(--money-soft); color:var(--money-deep);}
.cat-card h3{font-size:var(--text-xl); font-weight:700;}
.cat-card p{margin:0; color:var(--ink-2); font-size:15px; line-height:1.5; flex:1;}
.cat-card__count{font-family:var(--font-mono); font-size:12px; color:var(--ink-3);}
.cat-card__link{font-family:var(--font-ui); font-weight:700; font-size:14px; color:var(--accent-deep);
  display:inline-flex; align-items:center; gap:6px;}
.cat-card.is-money .cat-card__link{color:var(--money-deep);}
.cat-card__link svg{width:15px; height:15px; transition:transform .15s var(--ease);}
.cat-card:hover .cat-card__link svg{transform:translateX(3px);}

/* ============================ GUIDE (ARTICLE) CARDS ============================ */
.guide-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.guide-card{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease);}
.guide-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.guide-card__media{aspect-ratio:16/10; position:relative; overflow:hidden;}
.guide-card__body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:9px; flex:1;}
.guide-card__cat{font-family:var(--font-ui); font-weight:700; font-size:11.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--fix-deep);}
.guide-card__cat.is-money{color:var(--money-deep);}
.guide-card h3{font-size:20px; font-weight:700; line-height:1.15;}
.guide-card__meta{margin-top:auto; padding-top:12px; display:flex; align-items:center; gap:12px;
  border-top:1px solid var(--line); font-family:var(--font-mono); font-size:12px; color:var(--ink-3);}
.guide-card__meta svg{width:14px; height:14px; vertical-align:-2px; margin-right:3px;}

/* featured (zine) variant */
.guide-card--feature{border:2.5px solid var(--line-ink); box-shadow:var(--shadow-hard);}
.guide-card--feature:hover{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--line-ink);}

/* image placeholder treatment */
.imgph{display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;
  background:linear-gradient(135deg, var(--fix-soft), #cfe8df); color:var(--fix-deep);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; text-align:center; padding:14px; height:100%;}
.imgph svg{width:38px; height:38px; opacity:.75;}
.imgph--money{background:linear-gradient(135deg, var(--money-soft), #f7cdbf); color:var(--money-deep);}
.imgph--neutral{background:var(--paper-2); color:var(--ink-3);}
.imgph small{opacity:.8;}

/* ============================ ARTICLE BODY ============================ */
.article{font-size:var(--text-base); line-height:1.7;}
.article > p, .article > ul, .article > ol, .article > h2, .article > h3,
.article > blockquote, .article > .callout, .article > figure, .article > .ad-inwrap{max-width:68ch;}
.article p{margin:0 0 1.15em; color:var(--ink); text-wrap:pretty;}
.article .lead{font-size:var(--text-lg); color:var(--ink-2); line-height:1.55;}
.article h2{font-size:var(--text-2xl); font-weight:700; margin:1.6em 0 .5em; scroll-margin-top:96px;}
.article h3{font-size:var(--text-xl); font-weight:700; margin:1.4em 0 .4em; scroll-margin-top:96px;}
.article ul, .article ol{margin:0 0 1.2em; padding-left:1.3em;}
.article li{margin-bottom:.5em;}
.article a{text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:2px;}
.article a:hover{text-decoration-thickness:3px;}
.article blockquote{margin:1.5em 0; padding:4px 0 4px 22px; border-left:4px solid var(--accent);
  font-style:italic; font-size:var(--text-lg); color:var(--ink-2);}
.article figure{margin:2em 0;}
.article figcaption{font-family:var(--font-mono); font-size:12px; color:var(--ink-3); margin-top:10px; text-align:center;}
.article hr{border:none; border-top:1px solid var(--line); margin:2.4em 0;}

/* callout boxes */
.callout{margin:1.8em 0; padding:20px 22px; border-radius:var(--radius-md); border:1px solid var(--line);
  background:var(--card); display:flex; gap:14px;}
.callout__icon{flex-shrink:0; width:34px; height:34px; border-radius:9px; display:grid; place-items:center; color:#fff;}
.callout__icon svg{width:19px; height:19px;}
.callout h4{font-family:var(--font-ui); font-size:15px; font-weight:700; margin:0 0 5px; letter-spacing:0;}
.callout p{margin:0; font-size:15px; line-height:1.55; color:var(--ink-2);}
.callout--tip{background:var(--fix-soft); border-color:#bfe0d5;}
.callout--tip .callout__icon{background:var(--fix);}
.callout--tip h4{color:var(--fix-deep);}
.callout--warn{background:var(--money-soft); border-color:#f3c3b3;}
.callout--warn .callout__icon{background:var(--money);}
.callout--warn h4{color:var(--money-deep);}
.callout--cost{background:#FBF0CF; border-color:#ecd899;}
.callout--cost .callout__icon{background:var(--mustard);}
.callout--cost h4{color:var(--mustard-deep);}

/* key takeaways box (zine) */
.takeaways{margin:2em 0; border:2.5px solid var(--line-ink); border-radius:var(--radius-md);
  box-shadow:var(--shadow-hard); background:var(--card); overflow:hidden;}
.takeaways__head{background:var(--ink); color:var(--paper); padding:14px 22px; font-family:var(--font-ui);
  font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase; display:flex; align-items:center; gap:10px;}
.takeaways__head svg{width:18px; height:18px;}
.takeaways ul{margin:0; padding:18px 22px 18px 42px; list-style:none;}
.takeaways li{position:relative; margin-bottom:11px; font-size:15.5px; line-height:1.5; color:var(--ink);}
.takeaways li::before{content:""; position:absolute; left:-24px; top:7px; width:11px; height:11px; border-radius:3px;
  background:var(--fix); border:2px solid var(--line-ink);}
.takeaways li:last-child{margin-bottom:0;}

/* cost / comparison table */
.tbl{width:100%; border-collapse:collapse; margin:2em 0; font-size:15px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden;}
.tbl th, .tbl td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line);}
.tbl thead th{font-family:var(--font-ui); font-weight:700; font-size:13px; letter-spacing:.04em;
  text-transform:uppercase; background:var(--paper-2); color:var(--ink-2);}
.tbl tbody tr:last-child td{border-bottom:none;}
.tbl tbody tr:hover{background:var(--ink-wash);}
.tbl td.num{font-family:var(--font-mono); text-align:right; font-variant-numeric:tabular-nums;}
.tbl .pill{display:inline-block; font-family:var(--font-ui); font-weight:700; font-size:12px; padding:3px 10px; border-radius:99px;}
.tbl .pill--fix{background:var(--fix-soft); color:var(--fix-deep);}
.tbl .pill--money{background:var(--money-soft); color:var(--money-deep);}

/* author / meta byline */
.byline{display:flex; align-items:center; gap:13px; margin:18px 0 0;}
.byline__avatar{width:46px; height:46px; border-radius:50%; background:var(--fix-soft); color:var(--fix-deep);
  display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:18px; flex-shrink:0; border:1px solid var(--line);}
.byline__who{font-family:var(--font-ui); font-weight:700; font-size:15px; color:var(--ink);}
.byline__meta{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-3);}
.byline__meta svg{width:13px; height:13px; vertical-align:-2px; margin:0 3px 0 8px;}

/* TOC */
.toc{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:20px 22px;}
.toc h4{font-family:var(--font-ui); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 12px;}
.toc ol{margin:0; padding:0; list-style:none; counter-reset:toc;}
.toc li{counter-increment:toc; margin-bottom:9px; font-size:14.5px; line-height:1.4;}
.toc a{display:flex; gap:10px; color:var(--ink-2); transition:color .14s var(--ease);}
.toc a::before{content:counter(toc,decimal-leading-zero); font-family:var(--font-mono); font-size:12px;
  color:var(--accent); font-weight:600; flex-shrink:0;}
.toc a:hover, .toc a.is-active{color:var(--ink);}
.toc a.is-active::before{color:var(--money);}

/* ============================ LAYOUT: content + sidebar ============================ */
.with-sidebar{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:48px; align-items:start;}
.sidebar{position:sticky; top:96px; display:flex; flex-direction:column; gap:24px;}
.sidebar__card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:20px;}
.sidebar__card h4{font-family:var(--font-ui); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 14px;}
.pop-list{display:flex; flex-direction:column; gap:14px;}
.pop-item{display:flex; gap:12px; align-items:flex-start;}
.pop-item__n{font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--line-strong); line-height:1;}
.pop-item a{font-family:var(--font-ui); font-weight:600; font-size:14.5px; color:var(--ink); line-height:1.3; text-decoration:none;}
.pop-item a:hover{color:var(--accent-deep);}

/* breadcrumb */
.crumb{display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12.5px; color:var(--ink-3);
  flex-wrap:wrap; padding:18px 0 0;}
.crumb a{color:var(--ink-2);} .crumb a:hover{color:var(--accent-deep);}
.crumb .sep{color:var(--line-strong);}

/* tag chips */
.chips{display:flex; flex-wrap:wrap; gap:9px;}
.chip{font-family:var(--font-ui); font-weight:600; font-size:13px; color:var(--ink-2); background:var(--card);
  border:1px solid var(--line-strong); border-radius:var(--radius-pill); padding:6px 14px; transition:all .14s var(--ease);}
.chip:hover, .chip.is-active{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.chip--fix.is-active{background:var(--fix); border-color:var(--fix);}
.chip--money.is-active{background:var(--money); border-color:var(--money);}

/* newsletter band */
.signup{background:var(--ink); color:var(--paper); border-radius:var(--radius-lg); padding:44px 48px; position:relative; overflow:hidden;}
.signup h2{color:var(--paper); font-size:clamp(26px,3vw,38px);}
.signup p{color:#c9c0b0; margin:10px 0 0; max-width:46ch;}
.signup__form{display:flex; gap:10px; margin-top:22px; max-width:480px;}
.signup__form input{flex:1; height:52px; border-radius:var(--radius-pill); border:1px solid #3a3329; background:#26211a;
  color:var(--paper); padding:0 20px; font-family:var(--font-ui); font-size:15px; outline:none;}
.signup__form input::placeholder{color:#8a8070;}
.signup__note{font-family:var(--font-mono); font-size:12px; color:#8a8070; margin-top:12px;}

/* ============================ FOOTER ============================ */
.site-footer{background:var(--ink); color:#b8af9e; padding:56px 0 26px; margin-top:8px;}
.footer-top{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:36px; padding-bottom:36px; border-bottom:1px solid #322c22;}
.footer-brand .wordmark{color:var(--paper); margin-bottom:14px;}
.footer-brand p{font-size:14.5px; color:#9a917f; max-width:32ch; line-height:1.55; margin:0;}
.footer-col h4{font-family:var(--font-ui); font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper); margin:0 0 14px;}
.footer-col a{display:block; font-size:14.5px; color:#b8af9e; padding:6px 0; transition:color .14s var(--ease);}
.footer-col a:hover{color:var(--paper);}
.footer-disclosure{font-size:12.5px; color:#8a8070; line-height:1.6; max-width:70ch; margin:26px 0 0;}
.footer-disclosure a{color:#b8af9e; text-decoration:underline;}
.footer-bottom{display:flex; align-items:center; justify-content:space-between; gap:18px; padding-top:22px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:12.5px; color:#8a8070;}
.footer-bottom__links{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.footer-bottom__links a{color:#b8af9e;} .footer-bottom__links a:hover{color:var(--paper);}

/* ============================ STEP-FLOW DIAGRAM ============================ */
.stepflow{display:flex; flex-direction:column; gap:0; margin:2em 0; counter-reset:step;}
.step{display:grid; grid-template-columns:48px 1fr; gap:20px; position:relative; padding-bottom:26px;}
.step:last-child{padding-bottom:0;}
.step::before{counter-increment:step; content:counter(step); grid-row:1; grid-column:1;
  width:48px; height:48px; border-radius:50%; background:var(--fix); color:#fff; font-family:var(--font-display);
  font-weight:800; font-size:22px; display:grid; place-items:center; border:2.5px solid var(--line-ink);
  box-shadow:2.5px 2.5px 0 var(--line-ink); z-index:2;}
.step::after{content:""; position:absolute; left:23px; top:48px; bottom:0; width:2px; background:var(--line-strong); z-index:1;}
.step:last-child::after{display:none;}
.step__body{padding-top:2px;}
.step__body h4{font-family:var(--font-display); font-size:19px; font-weight:700; margin:0 0 6px; letter-spacing:-0.01em;}
.step__body p{margin:0 0 12px; font-size:15.5px; color:var(--ink-2); line-height:1.55;}
.step__media{border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:16/8; margin-top:6px; border:1px solid var(--line);}

/* ============================ INFOGRAPHIC: wear vs damage ============================ */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:2em 0;}
.compare__col{border-radius:var(--radius-md); border:2px solid; padding:20px;}
.compare__col--ok{background:var(--fix-soft); border-color:#bfe0d5;}
.compare__col--bad{background:var(--money-soft); border-color:#f3c3b3;}
.compare__h{display:flex; align-items:center; gap:10px; font-family:var(--font-ui); font-weight:700; font-size:16px; margin-bottom:14px;}
.compare__h svg{width:22px; height:22px; flex-shrink:0;}
.compare__col--ok .compare__h{color:var(--fix-deep);}
.compare__col--bad .compare__h{color:var(--money-deep);}
.compare ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px;}
.compare li{font-size:14.5px; line-height:1.45; color:var(--ink); padding-left:22px; position:relative;}
.compare li::before{position:absolute; left:0; top:1px; font-family:var(--font-mono); font-weight:700;}
.compare__col--ok li::before{content:"✓"; color:var(--fix-deep);}
.compare__col--bad li::before{content:"✕"; color:var(--money-deep);}

/* ============================ BAR CHART ============================ */
.chart{margin:2em 0; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:24px 26px;}
.chart__title{font-family:var(--font-ui); font-weight:700; font-size:16px; margin:0 0 4px; letter-spacing:0;}
.chart__sub{font-size:13.5px; color:var(--ink-3); margin:0 0 20px;}
.chart__rows{display:flex; flex-direction:column; gap:16px;}
.bar-row{display:grid; grid-template-columns:140px 1fr; gap:14px; align-items:center;}
.bar-row__label{font-family:var(--font-ui); font-weight:600; font-size:13.5px; color:var(--ink-2); line-height:1.2;}
.bar-track{height:34px; background:var(--paper-2); border-radius:7px; position:relative; overflow:hidden;}
.bar-fill{height:100%; border-radius:7px; display:flex; align-items:center; justify-content:flex-end; padding-right:12px;
  font-family:var(--font-mono); font-weight:600; font-size:13px; color:#fff; min-width:54px;
  transition:width 1s var(--ease);}
.bar-fill--fix{background:var(--fix);}
.bar-fill--money{background:var(--money);}
.bar-fill--mute{background:var(--line-strong); color:var(--ink);}
.chart__foot{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); margin:18px 0 0; text-align:right;}

/* ============================ PRODUCT / AFFILIATE CARD ============================ */
.tools-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:2em 0;}
.tool-card{display:flex; gap:14px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:16px;}
.tool-card__img{width:74px; height:74px; border-radius:var(--radius-sm); flex-shrink:0; overflow:hidden;}
.tool-card__body{display:flex; flex-direction:column; gap:4px; min-width:0;}
.tool-card__name{font-family:var(--font-ui); font-weight:700; font-size:15px; color:var(--ink); line-height:1.2;}
.tool-card__desc{font-size:13px; color:var(--ink-2); line-height:1.4; margin:0; flex:1;}
.tool-card__cta{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-ui); font-weight:700; font-size:13px;
  color:var(--money-deep); margin-top:2px;}
.tool-card__cta svg{width:14px; height:14px;}

/* ============================ FAQ ACCORDION ============================ */
.faq{margin:1.5em 0; border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; background:var(--card);}
.faq__item{border-bottom:1px solid var(--line);}
.faq__item:last-child{border-bottom:none;}
.faq__q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; text-align:left;
  padding:18px 22px; font-family:var(--font-ui); font-weight:700; font-size:16px; color:var(--ink);}
.faq__q svg{width:20px; height:20px; color:var(--accent); flex-shrink:0; transition:transform .2s var(--ease);}
.faq__item.open .faq__q svg{transform:rotate(45deg);}
.faq__a{max-height:0; overflow:hidden; transition:max-height .25s var(--ease);}
.faq__a-inner{padding:0 22px 18px; font-size:15px; line-height:1.6; color:var(--ink-2);}
.faq__a p{margin:0;}

/* inline CTA band to a tool */
.tool-cta{display:flex; align-items:center; gap:20px; background:var(--ink); color:var(--paper);
  border-radius:var(--radius-md); padding:22px 26px; margin:2em 0; flex-wrap:wrap;}
.tool-cta__icon{width:50px; height:50px; border-radius:12px; background:var(--money); display:grid; place-items:center; flex-shrink:0;}
.tool-cta__icon svg{width:26px; height:26px; color:#fff;}
.tool-cta__t{flex:1; min-width:200px;}
.tool-cta__t b{display:block; font-family:var(--font-display); font-size:19px; color:var(--paper);}
.tool-cta__t span{font-size:14px; color:#c9c0b0;}

/* difficulty / spec strip under article header */
.spec-strip{display:flex; flex-wrap:wrap; gap:0; margin:20px 0 0; border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; background:var(--card);}
.spec{flex:1 1 120px; padding:14px 18px; border-right:1px solid var(--line);}
.spec:last-child{border-right:none;}
.spec__k{font-family:var(--font-ui); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);}
.spec__v{font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--ink); margin-top:3px;}
.spec__v.fix{color:var(--fix-deep);} .spec__v.money{color:var(--money-deep);}

/* ============================ PAGE HERO BANNER (category/about) ============================ */
.page-hero{background:var(--fix); color:#fff; padding:56px 0; position:relative; overflow:hidden;}
.page-hero--money{background:var(--money);}
.page-hero::after{content:""; position:absolute; top:-60px; right:-30px; width:300px; height:300px; border-radius:50%;
  background:rgba(255,255,255,.07);}
.page-hero__inner{position:relative; max-width:720px;}
.page-hero .eyebrow{color:rgba(255,255,255,.85);}
.page-hero h1{color:#fff; font-size:clamp(32px,4.4vw,52px); margin:10px 0 0; line-height:1.08;}
.page-hero p{color:rgba(255,255,255,.9); font-size:var(--text-lg); margin:14px 0 0; max-width:56ch; line-height:1.5;}
.page-hero__stats{display:flex; gap:32px; margin-top:24px; flex-wrap:wrap;}
.page-hero__stat b{display:block; font-family:var(--font-display); font-weight:800; font-size:28px; line-height:1;}
.page-hero__stat span{font-family:var(--font-ui); font-size:13px; color:rgba(255,255,255,.8); font-weight:600;}

/* pagination */
.pager{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:40px;}
.pager a, .pager span{min-width:42px; height:42px; padding:0 12px; border-radius:10px; display:inline-flex; align-items:center;
  justify-content:center; font-family:var(--font-ui); font-weight:700; font-size:15px; color:var(--ink-2);
  border:1px solid var(--line-strong); background:var(--card);}
.pager a:hover{border-color:var(--ink); color:var(--ink);}
.pager .is-current{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.pager .pager__nav{gap:6px;} .pager .pager__nav svg{width:16px; height:16px;}

/* ============================ CALCULATORS ============================ */
.calc-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px;}
.calc-tab{display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:var(--radius-pill);
  font-family:var(--font-ui); font-weight:700; font-size:14.5px; color:var(--ink-2); background:var(--card);
  border:1px solid var(--line-strong); transition:all .14s var(--ease);}
.calc-tab svg{width:17px; height:17px;}
.calc-tab:hover{border-color:var(--ink); color:var(--ink);}
.calc-tab.is-active{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.calc-tab.is-active.is-money{background:var(--money); border-color:var(--money);}

.calc-panel{display:none;}
.calc-panel.is-active{display:block;}
.calc-shell{display:grid; grid-template-columns:1fr 0.85fr; gap:0; background:var(--card); border:2.5px solid var(--line-ink);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-hard); overflow:hidden;}
.calc-form{padding:30px 32px;}
.calc-form h2{font-size:24px; margin:0 0 6px;}
.calc-form > p{font-size:15px; color:var(--ink-2); margin:0 0 22px; line-height:1.5;}
.calc-result{background:var(--ink); color:var(--paper); padding:30px 32px; display:flex; flex-direction:column;}

.field{margin-bottom:20px;}
.field__label{display:flex; justify-content:space-between; align-items:baseline; font-family:var(--font-ui); font-weight:600;
  font-size:14px; color:var(--ink); margin-bottom:8px;}
.field__label .val{font-family:var(--font-mono); font-weight:600; color:var(--accent-deep);}
.field__label .val.money{color:var(--money-deep);}
.input-money{display:flex; align-items:center; border:1px solid var(--line-strong); border-radius:10px; background:var(--paper);
  padding:0 14px; height:50px; transition:border-color .14s var(--ease);}
.input-money:focus-within{border-color:var(--accent);}
.input-money span{font-family:var(--font-mono); color:var(--ink-3); font-size:16px;}
.input-money input{border:none; background:none; outline:none; width:100%; font-family:var(--font-mono); font-size:17px;
  font-weight:600; color:var(--ink); padding:0 0 0 6px;}
input[type=range].slider{-webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:99px;
  background:var(--paper-2); outline:none; margin:6px 0;}
input[type=range].slider::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--accent); border:2.5px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.25); cursor:pointer;}
input[type=range].slider.money::-webkit-slider-thumb{background:var(--money);}
input[type=range].slider::-moz-range-thumb{width:20px; height:20px; border-radius:50%; background:var(--accent); border:2.5px solid #fff; cursor:pointer;}
.seg{display:flex; gap:6px; background:var(--paper-2); border-radius:10px; padding:4px;}
.seg button{flex:1; padding:9px 8px; border-radius:7px; font-family:var(--font-ui); font-weight:600; font-size:13.5px;
  color:var(--ink-2); transition:all .12s var(--ease);}
.seg button.is-active{background:var(--card); color:var(--ink); box-shadow:var(--shadow-sm);}

/* checklist-style toggle rows for deposit estimator */
.tog-row{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line);}
.tog-row:last-child{border-bottom:none;}
.tog-row__main{flex:1; min-width:0;}
.tog-row__main b{display:block; font-family:var(--font-ui); font-weight:600; font-size:14.5px; color:var(--ink); line-height:1.2;}
.tog-row__main span{font-size:12.5px; color:var(--ink-3);}
.tog-row__cost{font-family:var(--font-mono); font-weight:600; font-size:14px; color:var(--money-deep); white-space:nowrap;}
.switch{position:relative; width:46px; height:26px; border-radius:99px; background:var(--line-strong); flex-shrink:0; transition:background .15s var(--ease); cursor:pointer;}
.switch::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .15s var(--ease); box-shadow:0 1px 3px rgba(0,0,0,.2);}
.switch.on{background:var(--fix);} .switch.on::after{transform:translateX(20px);}

/* result panel pieces */
.result-eyebrow{font-family:var(--font-ui); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#9fd9c8;}
.result-big{font-family:var(--font-display); font-weight:800; font-size:52px; line-height:1; margin:8px 0 4px; color:#fff; font-variant-numeric:tabular-nums;}
.result-big.money{color:#ffb59f;}
.result-note{font-size:14px; color:#c9c0b0; margin:0; line-height:1.5;}
.result-rows{margin-top:auto; padding-top:22px; display:flex; flex-direction:column; gap:11px;}
.result-row{display:flex; justify-content:space-between; align-items:center; font-size:14px;}
.result-row span{color:#c9c0b0;} .result-row b{font-family:var(--font-mono); color:#fff; font-weight:600;}
.result-bar{height:8px; border-radius:99px; background:rgba(255,255,255,.14); overflow:hidden; margin-top:4px;}
.result-bar span{display:block; height:100%; border-radius:99px; background:#9fd9c8; transition:width .4s var(--ease);}
.result-divider{height:1px; background:rgba(255,255,255,.14); margin:6px 0;}
.result-cta{margin-top:20px;}

/* ============================ CHECKLIST ============================ */
.ck-layout{display:grid; grid-template-columns:1fr 320px; gap:40px; align-items:start;}
.ck-progress{position:sticky; top:96px; background:var(--card); border:2.5px solid var(--line-ink); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-hard); padding:24px; text-align:center;}
.ck-ring{width:150px; height:150px; margin:6px auto 14px; position:relative;}
.ck-ring svg{transform:rotate(-90deg);}
.ck-ring__num{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.ck-ring__num b{font-family:var(--font-display); font-weight:800; font-size:38px; line-height:1; color:var(--ink);}
.ck-ring__num span{font-family:var(--font-ui); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);}
.ck-progress p{font-size:14px; color:var(--ink-2); margin:0 0 16px; line-height:1.5;}
.ck-reset{font-family:var(--font-ui); font-weight:600; font-size:13px; color:var(--ink-3); text-decoration:underline; background:none; cursor:pointer; margin-top:12px;}
.ck-reset:hover{color:var(--money-deep);}

.ck-section{margin-bottom:26px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden;}
.ck-section__head{display:flex; align-items:center; gap:13px; padding:18px 22px; background:var(--paper-2); border-bottom:1px solid var(--line);}
.ck-section__icon{width:38px; height:38px; border-radius:10px; background:var(--fix-soft); color:var(--fix-deep); display:grid; place-items:center; flex-shrink:0;}
.ck-section.is-money .ck-section__icon{background:var(--money-soft); color:var(--money-deep);}
.ck-section__icon svg{width:21px; height:21px;}
.ck-section__head h3{font-size:18px; font-weight:700;}
.ck-section__head .ck-count{margin-left:auto; font-family:var(--font-mono); font-size:13px; color:var(--ink-3);}
.ck-item{display:flex; align-items:flex-start; gap:13px; padding:14px 22px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .12s var(--ease);}
.ck-item:last-child{border-bottom:none;}
.ck-item:hover{background:var(--ink-wash);}
.ck-box{width:24px; height:24px; border-radius:7px; border:2px solid var(--line-strong); flex-shrink:0; margin-top:1px; display:grid; place-items:center; transition:all .14s var(--ease);}
.ck-box svg{width:15px; height:15px; color:#fff; opacity:0; transition:opacity .12s var(--ease);}
.ck-item.done .ck-box{background:var(--fix); border-color:var(--fix);}
.ck-item.done .ck-box svg{opacity:1;}
.ck-item__t{flex:1;}
.ck-item__t b{display:block; font-family:var(--font-ui); font-weight:600; font-size:15px; color:var(--ink); line-height:1.3; transition:color .12s var(--ease);}
.ck-item__t span{font-size:13px; color:var(--ink-3); line-height:1.4;}
.ck-item.done .ck-item__t b{color:var(--ink-3); text-decoration:line-through;}
.ck-item__tag{font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--money-deep); background:var(--money-soft); padding:3px 8px; border-radius:99px; white-space:nowrap; margin-top:1px;}

/* ============================ RESPONSIVE ============================ */
/* switch to the mobile menu before the 7-item nav can wrap */
@media (max-width:1000px){
  .main-nav{display:none;} .hamburger{display:flex;} .mobile-drawer{display:flex;}
}
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr; gap:34px;}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .guide-grid{grid-template-columns:repeat(2,1fr);}
  .with-sidebar{grid-template-columns:1fr; gap:36px;}
  .sidebar{position:static; flex-direction:row; flex-wrap:wrap;}
  .sidebar__card{flex:1 1 260px;}
  .footer-top{grid-template-columns:1fr 1fr;} .footer-brand{grid-column:1/-1;}
}
@media (max-width:760px){
  .main-nav{display:none;} .hamburger{display:flex;} .mobile-drawer{display:flex;}
  .section{padding:48px 0;} .hero{padding:48px 0 44px;}
  .cat-grid, .guide-grid{grid-template-columns:1fr;}
  .signup{padding:32px 24px;} .signup__form{flex-direction:column;}
  .signup__form input, .signup__form .btn{width:100%;}
  .ad-anchor{display:flex;} body{padding-bottom:60px;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .section-head{flex-direction:column; align-items:flex-start; gap:12px;}
  .compare, .tools-grid{grid-template-columns:1fr;}
  .bar-row{grid-template-columns:1fr; gap:6px;}
  .bar-row__label{font-size:13px;}
  .calc-shell{grid-template-columns:1fr;}
  .ck-layout{grid-template-columns:1fr;}
  .ck-progress{position:static;}
}
@media (max-width:440px){
  .wrap{padding:0 18px;} .footer-top{grid-template-columns:1fr;}
  .hinge-mini{flex-direction:column;}
}