/* Bin Bliss: Option B, clean layout (Apple-inspired). Same HTML, different stylesheet. */
:root{
  /* brand */
  --green:#1F7A3D; --green-2:#17602F; --lime:#CDEB6B; --lime-soft:#EEF8CF;
  --navy:#1B1F9A; --star:#E8A317; --miss:#B4412A; --grime:#8A6A3F;

  /* surfaces */
  --bg:#FFFFFF;
  --alt:#F5F5F7;                  /* alternate band */
  --tile:#FFFFFF;
  --dark:#1D1D1F;
  --line:rgba(0,0,0,.1);
  --ph:rgba(31,122,61,.1);

  /* type colors */
  --text:#1D1D1F;
  --body-c:#1D1D1F;
  --muted:#6E6E73;
  --on-dark:#F5F5F7;
  --on-dark-muted:#A1A1A6;

  --disp:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --body:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;

  --r:28px;
  --wrap:1060px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(60px + env(safe-area-inset-top,0px))}
body{margin:0; background:var(--bg); color:var(--body-c); font-family:var(--body); font-size:17px; line-height:1.5;
  -webkit-font-smoothing:antialiased; letter-spacing:-.005em}
h1,h2,h3{font-family:var(--disp); margin:0; color:var(--text); letter-spacing:-.025em; line-height:1.07; text-wrap:balance}
p{margin:0; text-wrap:pretty}
a{color:var(--green)}
:focus-visible{outline:3px solid var(--green); outline-offset:3px; border-radius:8px}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
section{padding:120px 0}
.h2{font-size:clamp(36px,5.2vw,56px); font-weight:800; text-align:center}
.lede{color:var(--muted); font-size:clamp(19px,2.1vw,22px); line-height:1.4; max-width:40ch; margin:18px auto 0; text-align:center}
.ph{background:var(--ph); border-radius:4px; padding:0 3px}

/* motion: one gentle fade */
html.js .reveal{opacity:0; transform:translateY(16px)}
html.js .reveal.in{opacity:1; transform:none; transition:opacity .9s ease, transform 1s cubic-bezier(.16,1,.3,1)}
html.js .reveal.d1.in{transition-delay:.1s}
html.js .reveal.d2.in{transition-delay:.2s}
@media(prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1!important; transform:none!important}
  *{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
}

/* NAV */
header.nav{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.8);
  backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top,0px)}
.nav-in{display:flex; align-items:center; gap:28px; height:56px}
.brand{display:flex; align-items:center; gap:7px; text-decoration:none; margin-right:auto}

.lockup{display:flex; flex-direction:column; line-height:1}
.wordmark{font-family:var(--disp); font-weight:800; font-size:19px; letter-spacing:-.02em; color:var(--navy)}
.wordmark span{color:var(--green)}
.tagline{font-size:10px; font-weight:600; color:var(--muted); margin-top:3px; white-space:nowrap}
.navlinks{display:flex; gap:26px; white-space:nowrap}
.navlinks a{font-size:13.5px; color:var(--text); text-decoration:none; opacity:.8}
.navlinks a:hover{opacity:1}
@media(max-width:980px){ .navlinks{display:none} }

/* BUTTONS: pills */
.btn{display:inline-block; text-align:center; line-height:1.3; font-family:var(--body); font-weight:700; font-size:17px;
  text-decoration:none; cursor:pointer; padding:13px 26px; border-radius:980px; border:0; min-height:48px;
  transition:background .2s ease}
.btn-primary{background:var(--green); color:#fff}
.btn-primary:hover{background:var(--green-2)}
.btn-lime{background:var(--green); color:#fff}
.btn-outline{background:transparent; color:var(--green); box-shadow:inset 0 0 0 1px var(--green)}
.btn-sm{font-size:13.5px; padding:7px 15px; min-height:32px; white-space:nowrap}
.kw{font-weight:800}
.nw{white-space:nowrap}

/* phones: text button · computers: number + QR */
.sms-only{display:inline-block}
.desk-only{display:none}
@media (hover:hover) and (pointer:fine){
  .sms-only{display:none!important}
  .desk-only{display:flex}
}
.deskbook{align-items:center; gap:20px; background:var(--alt); border-radius:22px; padding:16px 26px 16px 16px; text-align:left}
.qr{width:104px; height:104px; flex:0 0 104px; border-radius:14px; background:#fff; padding:8px}
.qr svg,.qr img{display:block; width:100%; height:100%}
.db-k{font-size:14px; color:var(--muted)}
.db-k b{color:var(--text)}
.db-num{white-space:nowrap; font-weight:800; font-size:26px; letter-spacing:-.02em; color:var(--text); line-height:1.2}
.db-hint{font-size:13px; color:var(--muted)}
.copy{margin-top:6px; font:inherit; font-size:14px; font-weight:700; color:var(--green); background:none; border:0; padding:4px 0; cursor:pointer}
.copy:hover{text-decoration:underline}

/* HERO: text left, video right */
.hero{padding:80px 0 40px}
.hero-in{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
h1{font-size:clamp(44px,6vw,72px); font-weight:800; letter-spacing:-.035em}
.deck{margin-top:20px; font-size:clamp(19px,2vw,23px); line-height:1.4; color:var(--muted); max-width:30ch}
.hero .cta-block{margin-top:32px; display:flex}
.area{margin-top:18px; font-size:15px; font-weight:600; color:var(--muted)}
.video{margin:0; width:100%; position:relative; aspect-ratio:4/5; border-radius:var(--r); overflow:hidden; background:var(--dark)}
.video video,.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover}
.video-ph{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  color:var(--on-dark-muted); text-align:center; padding:24px}
.play{flex:0 0 76px; width:76px; height:76px; border-radius:50%; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center}
.play svg{width:26px; height:26px; margin-left:4px}
.play path{fill:#fff}
.video-ph b{font-size:22px; color:var(--on-dark)}
.video-ph span{font-size:15px; max-width:30ch}
@media(max-width:900px){
  .hero{padding-top:56px; text-align:center}
  .hero-in{grid-template-columns:1fr; gap:44px}
  .hero-in > div:first-child{display:flex; flex-direction:column; align-items:center}
  .deck{margin-left:auto; margin-right:auto}
  .hero .cta-block{justify-content:center}
  .video{aspect-ratio:4/5; max-width:520px; margin:0 auto}
}

/* AT A GLANCE: quiet row */
.glance{padding:56px 0 96px}
.glance-in{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px}
.gl{display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px}
.gl-ic{width:40px; height:40px; display:flex; align-items:center; justify-content:center}
.gl-ic svg{width:32px; height:32px}
.gl-ic svg *{fill:none; stroke:var(--green); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.gl-star svg path{fill:var(--star); stroke:none}
.gl b{display:block; font-weight:800; font-size:19px; color:var(--text); line-height:1.25}
.gl div > span{display:block; margin-top:4px; font-size:14.5px; line-height:1.4; color:var(--muted)}
.gl a{color:var(--green); text-decoration:none}
.gl a:hover{text-decoration:underline}
@media(max-width:820px){ .glance-in{grid-template-columns:1fr 1fr; gap:40px 20px} }

/* MICROBES: gray band, white tiles */
.lab{background:var(--alt)}
.lab-head{display:flex; flex-direction:column; align-items:center; text-align:center}
.lab-head .h2{max-width:none}
.lab .lede{max-width:70ch}
@media(min-width:1000px){ .lab .lede{font-size:18px} }
.microbes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:64px}
.mb{background:var(--tile); border-radius:var(--r); overflow:hidden; padding:0 28px 32px}
.mb-img{margin:0 -28px 24px; aspect-ratio:4/3; background:#E8E8ED; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center}
.mb-img img{width:100%; height:100%; object-fit:cover; display:block}
.mb-img figcaption{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.mb-img.noimg img{display:none}
.mb-img.noimg figcaption{position:static; width:auto; height:auto; clip:auto; font-size:14px; color:var(--muted); padding:16px; text-align:center}
.mb-top{display:flex; align-items:center; gap:12px}
.mb-top svg{width:34px; height:34px; flex:0 0 34px}
.mb-top svg *{fill:none; stroke:var(--green); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.mb h3{font-size:24px; font-weight:800; font-style:italic}
.mb .kind{display:block; margin-top:3px; font-size:13px; font-weight:600; color:var(--muted)}
.mb p{margin-top:12px; font-size:16px; color:var(--muted)}
.mb p b{color:var(--text); font-weight:700}
@media(max-width:900px){ .microbes{grid-template-columns:1fr 1fr} }
@media(max-width:600px){ .microbes{grid-template-columns:1fr} }

/* HOW WE CLEAN */
.kill{background:var(--bg)}
.kill .h2{margin:0 auto}
.lede.oneline{max-width:none}
@media(min-width:1000px){ .lede.oneline{white-space:nowrap; font-size:18px} }
.kill-steps{list-style:none; margin:64px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; position:relative}
.kill-steps::before{content:''; position:absolute; top:19px; left:12.5%; right:12.5%; height:2px;
  background:linear-gradient(90deg, var(--green) 0 0) no-repeat, var(--line); background-size:0% 100%, 100% 100%}
html.js .kill-steps.fill::before{background-size:100% 100%, 100% 100%; transition:background-size 1.6s cubic-bezier(.4,0,.2,1) .2s}
html:not(.js) .kill-steps::before{background-size:100% 100%, 100% 100%}
.ks{display:flex; flex-direction:column; align-items:center}
.ks-n{position:relative; z-index:1; width:40px; height:40px; border-radius:50%; background:var(--green); color:#fff;
  font-weight:800; font-size:17px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 6px var(--bg); margin-bottom:22px}
.ks-card{width:100%; flex:1; background:var(--alt); border-radius:var(--r); padding:30px 20px 32px; display:flex; flex-direction:column}
.ks-art{background:var(--tile); border-radius:20px; aspect-ratio:5/4; display:flex; align-items:center; justify-content:center; margin-bottom:22px; overflow:hidden}
.ks-art svg{width:100%; height:auto; padding:6px}
.ks-art img{width:100%; height:100%; object-fit:cover}
.ks-art .ln{fill:none; stroke:var(--text); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.ks-art .thin{stroke-width:1.6}
.ks-art .acc{fill:none; stroke:var(--green); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.ks-art .acc.thin{stroke-width:2}
.ks-art .acc-fill{fill:var(--green)}
.ks-art .grime circle{fill:var(--grime)}
.ks-art .grime-fly{fill:none; stroke:var(--grime); stroke-width:2.4; stroke-linecap:round}
.ks-art .spray circle,.ks-art .mist circle{fill:var(--green); opacity:.55}
.ks-art .drops path{fill:var(--grime); opacity:.8}
.ks-art .leaf{fill:var(--lime); stroke:var(--green); stroke-width:2}
.ks-art .spark{stroke:var(--lime); stroke-width:3}
.ks-step{font-size:13px; font-weight:700; color:var(--green); padding:0 8px}
.ks h3{font-size:22px; font-weight:800; padding:0 8px}
.ks-card > p{margin-top:10px; font-size:16px; color:var(--muted); padding:0 8px}
.ks .targets{margin-top:14px; font-size:14px; font-weight:700; color:var(--green)}
.ks .scents{padding:0 8px}
@media(max-width:980px){
  .kill-steps{grid-template-columns:1fr 1fr; gap:36px 20px}
  .kill-steps::before{display:none}
}
@media(max-width:600px){
  .kill-steps{grid-template-columns:1fr; gap:0; padding-left:0}
  .kill-steps::before{display:block; top:20px; bottom:40px; left:19px; right:auto; width:2px; height:auto;
    background:linear-gradient(180deg, var(--green) 0 0) no-repeat, var(--line); background-size:100% 0%, 100% 100%}
  html.js .kill-steps.fill::before{background-size:100% 100%, 100% 100%}
  .ks{display:grid; grid-template-columns:40px 1fr; gap:16px; align-items:start; padding-bottom:28px}
  .ks-n{margin:0}
}
.scents{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px}
.chip{font-size:13px; font-weight:700; color:var(--text); background:var(--tile); padding:5px 12px; border-radius:980px}
@media(max-width:980px){ .kill-steps{grid-template-columns:1fr 1fr} }
@media(max-width:600px){ .kill-steps{grid-template-columns:1fr} }

/* COMPARE: clean spec table */
.cmp{margin:72px auto 0; max-width:900px}
.cmp table{width:100%; border-collapse:collapse}
.cmp th,.cmp td{padding:20px 16px; text-align:left; vertical-align:top; font-size:16.5px; border-bottom:1px solid var(--line)}
.cmp thead th{font-size:21px; font-weight:800; color:var(--text); border-bottom:1px solid var(--text)}
.cmp thead th.us{color:var(--green)}
.cmp th[scope=row]{font-weight:600; color:var(--muted); width:20%}
.cmp td{color:var(--muted)}
.cmp td.us{color:var(--text); font-weight:600}
.cmp .x,.cmp .v{display:inline-block; width:14px; height:14px; margin-right:8px; vertical-align:-1px}
.cmp .x path{stroke:var(--miss); stroke-width:2.2; fill:none; stroke-linecap:round}
.cmp .v path{stroke:var(--green); stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round}
@media(max-width:700px){
  .cmp thead{display:none}
  .cmp tr{display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line)}
  .cmp th[scope=row]{grid-column:1/-1; width:auto; padding-bottom:0; border:0}
  .cmp td{border:0; padding:10px 16px 18px; font-size:15px}
  .cmp td::before{content:attr(data-h); display:block; font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:4px}
  .cmp td.us::before{color:var(--green)}
}

/* REVIEWS */
#reviews{background:var(--alt)}
.rev-head{display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center}
.rev-stars{display:flex; align-items:center; gap:10px; font-size:17px; font-weight:600; color:var(--muted)}
.rev-stars .stars svg{width:20px; height:20px}
.rev-score{display:flex; align-items:center; gap:14px}
.rev-score .big{font-weight:800; font-size:56px; line-height:1; color:var(--text); letter-spacing:-.03em}
.rev-score p{font-size:15px; color:var(--muted); text-align:left}
.stars{display:inline-flex; gap:2px}
.stars svg{width:18px; height:18px}
.stars path{fill:var(--star)}
.reviews{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:56px}
.review{margin:0; background:var(--tile); border-radius:var(--r); padding:32px 28px; display:flex; flex-direction:column; gap:16px}
.review blockquote{margin:0; font-size:18px; line-height:1.5; color:var(--text)}
.review figcaption{margin-top:auto; font-size:14.5px; color:var(--muted)}
.review figcaption b{color:var(--text)}
@media(max-width:900px){ .reviews{grid-template-columns:1fr} }

/* PRICING */
.pricing{background:var(--bg)}
.pricing .h2{margin:0 auto}
.price-grid{display:grid; grid-template-columns:1fr; gap:40px; margin-top:64px; justify-items:center}
.price-grid > div:first-child{width:100%}
.tiers{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.tier{background:var(--alt); border-radius:var(--r); padding:40px 20px; text-align:center}
.tier .qty{font-weight:700; font-size:17px; color:var(--text)}
.tier .amt{font-weight:800; font-size:clamp(44px,5.4vw,64px); line-height:1; letter-spacing:-.04em; color:var(--text); margin-top:14px}
.tier .per{font-size:14px; color:var(--muted); margin-top:8px}
.tier .each{font-size:14px; font-weight:700; color:var(--green); margin-top:12px}
.includes{margin:28px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px}
.includes li{font-size:15.5px; color:var(--muted); display:flex; align-items:center; gap:8px}
.includes svg{width:16px; height:16px}
.includes path{stroke:var(--green); stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round}
.multi{margin-top:14px; font-size:15.5px; color:var(--muted); text-align:center}
.bookcard{width:100%; max-width:720px; background:var(--dark); color:var(--on-dark-muted); border-radius:var(--r); padding:48px 40px; text-align:center}
.bookcard h3{color:var(--on-dark); font-size:32px; font-weight:800}
.bookcard ol{margin:24px auto 0; padding:0; list-style:none; counter-reset:b; display:grid; gap:12px; max-width:440px; text-align:left}
.bookcard li{counter-increment:b; display:grid; grid-template-columns:30px 1fr; gap:10px; font-size:16px}
.bookcard li::before{content:counter(b); width:26px; height:26px; border-radius:50%; background:var(--on-dark); color:var(--dark);
  font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center}
.bookcard li b{color:var(--on-dark)}
.bookcard .cta-block{margin-top:30px; display:flex; justify-content:center}
.bookcard .deskbook{background:#2C2C2E}
.bookcard .db-num{color:var(--on-dark)} .bookcard .db-k{color:var(--on-dark-muted)} .bookcard .db-k b{color:var(--on-dark)}
.bookcard .copy{color:var(--lime)}
.fine{font-size:12.5px; line-height:1.45; color:var(--on-dark-muted); margin-top:18px}
.fine a{color:inherit}
@media(max-width:600px){ .tiers{gap:8px} .tier{padding:26px 8px} .bookcard{padding:36px 22px} }

/* FAQ */
#faq{background:var(--alt)}
.faq-grid{display:block; max-width:820px}
.faq-list{margin-top:48px; border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer; list-style:none; padding:24px 0; font-weight:700; font-size:19px; color:var(--text);
  display:flex; justify-content:space-between; align-items:center; gap:18px}
summary::-webkit-details-marker{display:none}
summary::after{content:'+'; color:var(--green); font-size:26px; font-weight:400; line-height:1}
details[open] summary::after{content:'–'}
details p{padding:0 0 24px; color:var(--muted); font-size:17px; max-width:62ch}

/* FINAL CTA */
.final{background:var(--bg); padding:140px 0}
.final-in{display:flex; flex-direction:column; align-items:center; text-align:center}
.final .h2{max-width:16ch}
.final .cta-block{margin-top:34px; display:flex; justify-content:center}

/* FOOTER */
footer{background:var(--alt); color:var(--muted); padding:36px 0 32px; font-size:12.5px; border-top:1px solid var(--line)}
.foot-in{display:flex; gap:12px 24px; align-items:center; flex-wrap:wrap; padding-bottom:18px; border-bottom:1px solid var(--line)}
footer .tagline{color:var(--muted)}
.foot-links{margin-left:auto; display:flex; gap:20px; flex-wrap:wrap}
footer a{color:var(--text); text-decoration:none}
footer a:hover{text-decoration:underline}
.copyline{margin-top:16px}
.credits{margin-top:4px}
.credits a{color:var(--muted); text-decoration:underline}
@media(max-width:620px){ .foot-links{margin-left:0} }

/* sticky phone CTA */
.mcta{display:none}
@media(max-width:620px) and (hover:none){
  .mcta{display:block; position:fixed; left:14px; right:14px; bottom:calc(14px + env(safe-area-inset-bottom,0px)); z-index:70;
    box-shadow:0 12px 30px -10px rgba(0,0,0,.35)}
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:560px){ .tagline{white-space:normal; max-width:140px; line-height:1.25} }

/* PRIVACY PAGE */
.doc{padding:80px 0 110px}
.doc .wrap{max-width:720px}
.doc h1{font-size:clamp(38px,5.4vw,56px); max-width:none}
.doc .meta{margin-top:14px; color:var(--muted); font-size:15px}
.doc h2{font-size:clamp(22px,2.6vw,28px); font-weight:800; margin:48px 0 0}
.doc p,.doc li{font-size:17px; line-height:1.7; color:var(--body-c)}
.doc p{margin-top:14px}
.doc ul{margin:14px 0 0; padding-left:22px}
.doc li{margin-top:6px}
.doc .callout{margin-top:32px; background:var(--alt); border-radius:22px; padding:24px 26px}
.doc .callout p:first-child{margin-top:0}

/* BLOG INDEX */
.blog-index{padding:88px 0 120px}
.blog-index h1{font-size:clamp(44px,6.4vw,76px); text-align:center; margin:0 auto}
.blog-dek{margin:18px auto 0; max-width:56ch; text-align:center; font-size:clamp(18px,2vw,21px); line-height:1.45; color:var(--muted)}
.rss-line{text-align:center; margin-top:12px; font-size:14px}
.rss-line a{color:var(--green); font-weight:700; text-decoration:none}
.fchips{display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:40px}
.fchip{font:inherit; font-size:14.5px; font-weight:700; color:var(--text); background:var(--alt); border:0; border-radius:980px; padding:9px 18px; cursor:pointer; min-height:40px}
.fchip[aria-pressed="true"]{background:var(--text); color:#fff}
.post-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:44px}
.post-card{display:flex; flex-direction:column; text-decoration:none; color:inherit; background:var(--alt); border-radius:var(--r); overflow:hidden; transition:transform .25s ease}
.post-card:hover{transform:translateY(-3px)}
.post-card[hidden]{display:none}
.pc-img{aspect-ratio:16/9; background:#E8E8ED; overflow:hidden}
.pc-img img{width:100%; height:100%; object-fit:cover; display:block}
.pc-body{padding:24px 26px 30px}
.pc-meta{font-size:13px; font-weight:700; color:var(--green)}
.post-card h2,.post-card h3{font-size:22px; font-weight:800; line-height:1.2; margin-top:8px; letter-spacing:-.015em}
.post-card p{margin-top:10px; font-size:15.5px; color:var(--muted)}
@media(max-width:760px){ .post-grid{grid-template-columns:1fr} }

/* ARTICLE */
.article{padding:56px 0 110px}
.article .wrap{max-width:760px}
.crumbs{font-size:13.5px; color:var(--muted)}
.crumbs a{color:var(--green); text-decoration:none}
.post-cat{display:block; margin-top:28px; font-size:14px; font-weight:700; color:var(--green)}
.article h1{font-size:clamp(34px,4.8vw,52px); letter-spacing:-.03em; margin-top:10px; line-height:1.08}
.dek{margin-top:18px; font-size:clamp(19px,2.1vw,22px); line-height:1.45; color:var(--muted)}
.tags{list-style:none; padding:0; margin:20px 0 0; display:flex; flex-wrap:wrap; gap:6px}
.tags li{font-size:12.5px; font-weight:700; color:var(--text); background:var(--alt); border-radius:980px; padding:4px 11px}
.byline{margin-top:18px; font-size:14px; color:var(--muted)}
.byline a{color:var(--green); font-weight:700; text-decoration:none}
.post-hero{margin:36px auto 0; max-width:1060px; padding:0 24px}
.post-hero img{width:100%; aspect-ratio:16/8; object-fit:cover; border-radius:var(--r); display:block; background:#E8E8ED}
.post-hero figcaption{margin-top:10px; font-size:13px; color:var(--muted); font-style:italic; text-align:center}
.about-box{margin-top:40px; font-size:16px; line-height:1.55; color:var(--body-c); background:var(--alt); border-radius:20px; padding:18px 22px}
.about-box a{color:var(--green); font-weight:700; text-decoration:none; white-space:nowrap}
.box-h{font-size:17px; font-weight:800; letter-spacing:-.01em}
.takeaways{margin-top:20px; background:var(--lime-soft); border-radius:20px; padding:22px 24px}
.takeaways ul{margin:12px 0 0; padding-left:20px}
.takeaways li{margin-top:8px; font-size:16.5px; line-height:1.5; color:var(--text)}
.toc{margin-top:20px; border:1px solid var(--line); border-radius:20px; padding:20px 24px}
.toc ol{margin:10px 0 0; padding-left:22px}
.toc li{margin-top:6px; font-size:16px}
.toc a{color:var(--text); text-decoration:none}
.toc a:hover{color:var(--green); text-decoration:underline}
.prose{margin-top:44px}
.prose p,.prose li{font-size:18px; line-height:1.72; color:var(--body-c)}
.prose p{margin-top:20px}
.prose .lead{margin-top:0}
.prose h2{font-size:clamp(26px,3vw,32px); letter-spacing:-.02em; margin:56px 0 0; scroll-margin-top:80px}
.prose h3{font-size:21px; font-weight:800; margin:34px 0 0}
.prose h3 + p{margin-top:10px}
.prose ol,.prose ul{margin:18px 0 0; padding-left:24px}
.prose li{margin-top:10px}
.prose a{color:var(--green); font-weight:700}
.table-wrap{margin-top:22px; overflow-x:auto}
.prose table{width:100%; border-collapse:collapse; min-width:440px}
.prose th,.prose td{text-align:left; padding:14px 12px; border-bottom:1px solid var(--line); font-size:16.5px}
.prose thead th{border-bottom:1px solid var(--text); font-weight:800}
.post-faq{margin-top:72px; border-top:0}
.post-faq h2{font-size:clamp(26px,3vw,32px); margin-bottom:18px; scroll-margin-top:80px}
.post-faq details:first-of-type{border-top:1px solid var(--line)}
.keep{margin-top:72px}
.keep > h2{font-size:clamp(24px,2.8vw,30px)}
.keep .post-grid{margin-top:22px; grid-template-columns:1fr}
.author-box{margin-top:64px; display:flex; gap:18px; align-items:flex-start; border-top:1px solid var(--line); padding-top:32px}
.author-av{flex:0 0 52px; width:52px; height:52px; border-radius:50%; background:var(--green); color:#fff; font-weight:800; font-size:22px; display:flex; align-items:center; justify-content:center}
.author-box b{font-size:17px; color:var(--text)}
.author-box p{margin-top:4px; font-size:15.5px; color:var(--muted)}
.author-links{display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:10px}
.author-links a{font-size:15px; font-weight:700; color:var(--green); text-decoration:none}
.disclaimer{margin-top:32px; font-size:13px; line-height:1.55; color:var(--muted)}

/* LOGO */
.brand{gap:12px}
.brand .brand-mark{height:36px; width:auto; display:block}
.brand-tag{font-size:11.5px; font-weight:700; line-height:1.25; color:var(--navy); max-width:150px; padding-left:12px; border-left:1px solid var(--line)}
.foot-logo{height:64px; width:auto; display:block}
@media(max-width:560px){ .brand .brand-mark{height:32px} .brand-tag{display:none} }

.sources{margin-top:56px; border-top:1px solid var(--line); padding-top:24px}
.sources ul{margin:10px 0 0; padding-left:20px}
.sources li{margin-top:6px; font-size:15px}
.sources a{color:var(--green)}

/* CITY + AREAS PAGES */
.city-hero{padding:56px 0 64px}
.city-hero h1{font-size:clamp(40px,6vw,68px); letter-spacing:-.035em; margin-top:18px; max-width:15ch}
.city-dek{margin-top:18px; font-size:clamp(19px,2.1vw,22px); line-height:1.45; color:var(--muted); max-width:46ch}
.city-hero .cta-block{margin-top:30px; display:flex}
.city-facts{list-style:none; padding:0; margin:22px 0 0; display:flex; flex-wrap:wrap; gap:8px 22px; font-size:15px; font-weight:700; color:var(--text)}
.city-facts li::before{content:'✓'; color:var(--green); margin-right:7px}
.city-local{background:var(--alt); padding:96px 0}
.city-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:40px 64px; align-items:start}
.city-local h2{font-size:clamp(30px,3.8vw,42px); font-weight:800}
.city-why{margin-top:16px; font-size:18px; line-height:1.6; color:var(--muted)}
.local-list{list-style:none; margin:0; padding:0; background:var(--tile); border-radius:var(--r); padding:10px 28px}
.local-list li{padding:16px 0; border-bottom:1px solid var(--line); font-size:16.5px; line-height:1.55; color:var(--muted)}
.local-list li:last-child{border-bottom:0}
.local-list b{color:var(--text)}
.city-steps-sec{padding:104px 0}
.city-steps{list-style:none; margin:56px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px}
.city-step{background:var(--alt); border-radius:var(--r); padding:28px 24px 30px; display:flex; flex-direction:column; gap:14px}
.cs-n{width:40px; height:40px; border-radius:50%; background:var(--green); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center}
.city-step h3{font-size:21px; font-weight:800}
.city-step p{margin-top:8px; font-size:16px; color:var(--muted)}
.city-price{padding:0 0 110px}
.city-price .tiers{margin-top:52px}
.city-book{margin-top:32px; display:flex; justify-content:center}
.city-fine{text-align:center; color:var(--muted)}
.city-fine a{color:var(--muted)}
.city-faq{background:var(--alt); padding:104px 0}
.city-more{padding:88px 0 104px}
.more-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px 64px}
.more-grid h2{font-size:24px; font-weight:800}
.guide-list{margin:16px 0 0; padding:0; list-style:none}
.guide-list li{padding:14px 0; border-bottom:1px solid var(--line)}
.guide-list a{color:var(--text); font-weight:700; text-decoration:none; font-size:17px}
.guide-list a:hover{color:var(--green)}
.near{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
a.fchip{text-decoration:none; display:inline-flex; align-items:center}
.areas{padding:88px 0 120px}
.areas h1{font-size:clamp(44px,6.4vw,76px); text-align:center}
.area-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:56px}
.area-card{display:flex; flex-direction:column; gap:10px; background:var(--alt); border-radius:var(--r); padding:30px 28px; text-decoration:none; color:inherit; transition:transform .25s ease}
.area-card:hover{transform:translateY(-3px)}
.area-card h2{font-size:28px; font-weight:800}
.area-card p{font-size:15.5px; color:var(--muted)}
.area-link{margin-top:auto; padding-top:8px; font-weight:700; color:var(--green); font-size:15px}
.area-other{margin:64px auto 0; max-width:640px; text-align:center}
.area-other h2{font-size:30px; font-weight:800}
.area-other p{margin-top:10px; color:var(--muted); font-size:17px}
.area-other .cta-block{margin-top:24px; display:flex; justify-content:center}
@media(max-width:1180px){ .navlinks{gap:18px} }
@media(max-width:980px){ .city-grid,.more-grid{grid-template-columns:1fr} .city-steps{grid-template-columns:1fr 1fr} .area-grid{grid-template-columns:1fr 1fr} }
@media(max-width:600px){ .city-steps,.area-grid{grid-template-columns:1fr} .city-hero{text-align:left} }
.brand{flex-shrink:0}
.brand-tag{min-width:150px}
@media(max-width:1180px){ .navlinks a{font-size:13px} }