/* Property Tax Buddy, site-wide styles.
   Design B, "friendly guide", chosen by Lance on 2026-10-07. Modeled on his
   RAV Buddy site. The approved mockup is design-preview/b-friendly-guide.html.

   These rules restyle the class names the existing pages already use (.wrap,
   .stat, .callout, .sources, .cta, .grid, tables), so an article picks up the
   new look by linking this file, without its body being rewritten. */

:root {
  --bg: #FFFFFF; --sand: #F6F1EA; --sand-deep: #EDE4D6; --line: #E6E1D8; --sky: #DDEFFA;
  --ink: #1D2321; --ink-soft: #4E5753; --ink-faint: #858D89;
  --pine: #1E6B57; --pine-deep: #154F40; --pine-soft: #E3F1EC;
  --orange: #FF8A3D; --orange-deep: #E5641A; --orange-soft: #FFF0E5;
  --amber-soft: #FBF1D3; --amber: #9A6B00;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--ink); line-height: 1.65; font-size: 17px; }
a { color: var(--pine); }
img { max-width: 100%; }
h1, h2, h3, .ptb-logo { font-family: "Bricolage Grotesque", "Figtree", sans-serif; }

/* ---------- top bar, header, menu ---------- */
.ptb-bar { background: var(--pine-deep); color: #fff; text-align: center; font-size: 14px; font-weight: 600; padding: 8px 16px; line-height: 1.4; }
.ptb-bar a { color: #fff; }
.ptb-header { border-bottom: 1px solid var(--line); background: #fff; position: sticky; top: 0; z-index: 20; }
.ptb-header .ptb-top { display: flex; align-items: center; gap: 18px; padding: 12px 20px; max-width: 1120px; margin: 0 auto; }
.ptb-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 21px; line-height: 1; }
.ptb-logo i { width: 38px; height: 38px; border-radius: 11px; background: var(--pine); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 18px; flex: 0 0 38px; }
.ptb-logo span { color: var(--orange-deep); }
.ptb-logo small { display: block; font-family: "Figtree", sans-serif; font-size: 10px; letter-spacing: .1em; color: var(--ink-faint); font-weight: 700; margin-top: 3px; }
.ptb-search { flex: 1; max-width: 420px; position: relative; }
.ptb-search input { width: 100%; font: inherit; font-size: 15px; border: 1.5px solid var(--line); border-radius: 999px; padding: 9px 16px 9px 38px; color: var(--ink); background: #fff; }
.ptb-search::before { content: "\1F50D"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; opacity: .6; }
.ptb-search ul { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; list-style: none; box-shadow: 0 12px 30px rgba(20,40,33,.12); max-height: 320px; overflow: auto; display: none; z-index: 30; }
.ptb-search ul.show { display: block; }
.ptb-search li a { display: block; padding: 9px 14px; text-decoration: none; color: var(--ink); font-size: 15px; }
.ptb-search li a:hover, .ptb-search li a.on { background: var(--pine-soft); }
.ptb-search li small { color: var(--ink-faint); margin-left: 6px; }
.ptb-cta { margin-left: auto; background: var(--orange); color: #fff !important; font-weight: 800; text-decoration: none; padding: 10px 20px; border-radius: 999px; font-size: 15px; white-space: nowrap; }
.ptb-cta:hover { background: var(--orange-deep); }
.ptb-menu { display: flex; align-items: center; gap: 22px; padding: 0 20px 12px; max-width: 1120px; margin: 0 auto; font-weight: 700; font-size: 15px; white-space: nowrap; }
.ptb-menu > a { color: var(--ink); text-decoration: none; }
.ptb-menu > a:hover, .ptb-menu > a.on { color: var(--pine); }

/* The state menu: state, then county, then town, side by side on a computer
   and folding open one inside the other on a phone. Built 2026-10-07. */
.ptb-states-btn { font: inherit; font-weight: 800; color: var(--pine-deep); background: var(--pine-soft); border: 0; border-radius: 999px; padding: 8px 16px; cursor: pointer; }
.ptb-states-btn b { font-size: 12px; margin-left: 4px; display: inline-block; transition: transform .15s; }
.ptb-states-btn[aria-expanded="true"] { background: var(--pine); color: #fff; }
.ptb-states-btn[aria-expanded="true"] b { transform: rotate(180deg); }
.ptb-mega { position: absolute; top: calc(100% - 2px); left: 50%; transform: translateX(-50%); width: min(1080px, calc(100vw - 32px)); height: 470px; background: #fff; border: 1px solid var(--line); border-radius: 0 0 18px 18px; box-shadow: 0 18px 40px rgba(20,40,33,.16); z-index: 40; white-space: normal; font-weight: 500; }
.ptb-mega[hidden] { display: none; }
.ptb-mega ul { list-style: none; }
.ptb-mega .opener { display: block; width: 100%; text-align: left; font: inherit; font-size: 16px; font-weight: 700; color: var(--ink); background: none; border: 0; border-radius: 12px; padding: 10px 14px; cursor: pointer; position: relative; }
.ptb-mega .opener::after { content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); font-size: 20px; }
.ptb-mega .opener small { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-faint); }
.ptb-mega .on > .opener { background: var(--pine-soft); color: var(--pine-deep); }
.ptb-mega .lv1s { width: 250px; height: 100%; overflow: auto; padding: 12px 10px; border-right: 1px solid var(--line); }
.ptb-mega .lv2s { display: none; position: absolute; left: 250px; top: 0; bottom: 0; width: 280px; padding: 12px 10px; border-right: 1px solid var(--line); }
.ptb-mega .lv1.on > .lv2s { display: block; }
.ptb-mega .lv1[data-k="other"] > .lv2s { width: auto; right: 0; border-right: 0; overflow: auto; }
.ptb-mega .lv3 { display: none; position: absolute; left: 280px; top: 0; bottom: 0; width: calc(min(1080px, 100vw - 32px) - 532px); overflow: auto; padding: 18px 22px; }
.ptb-mega .lv2.on > .lv3 { display: block; }
.ptb-mega h5 { font-family: "Bricolage Grotesque", sans-serif; font-size: 20px; margin-bottom: 6px; }
.ptb-mega h6 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin: 16px 0 6px; }
.ptb-mega .lv3 > a { display: block; padding: 5px 0; color: var(--ink); text-decoration: none; font-weight: 600; }
.ptb-mega .lv3 > a.go { color: var(--orange-deep); }
.ptb-mega a:hover { color: var(--pine); text-decoration: underline; }
.ptb-mega .fill { columns: 3 140px; column-gap: 18px; font-size: 14.5px; }
.ptb-mega .fill a { display: block; padding: 3px 0; color: var(--ink-soft); text-decoration: none; break-inside: avoid; }
.ptb-mega .navguides { margin-top: 12px; padding: 12px 14px 4px; border-top: 1px solid var(--line); }
.ptb-mega .navguides .label { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; margin-bottom: 6px; }
.ptb-mega .navguides a { display: block; padding: 4px 0; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; }
.ptb-mega .navguides.other { margin: 0; border: 0; padding: 8px 16px; }
.ptb-mega .soon { color: var(--ink-soft); font-size: 15px; margin-bottom: 12px; max-width: 640px; }
.ptb-mega .navguides.other .cols { columns: 4 150px; column-gap: 18px; }

/* ---------- footer ---------- */
.ptb-footer { background: var(--pine-deep); color: #CFE3DB; margin-top: 72px; padding: 40px 0 48px; font-size: 14px; }
.ptb-footer .in { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.ptb-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; margin-bottom: 26px; }
.ptb-footer h4 { color: #fff; font-family: "Bricolage Grotesque", sans-serif; font-size: 16px; margin-bottom: 8px; }
.ptb-footer a { color: #CFE3DB; text-decoration: none; display: block; padding: 2px 0; }
.ptb-footer a:hover { color: #fff; }
.ptb-footer .fine { border-top: 1px solid rgba(255,255,255,.15); padding-top: 18px; font-size: 12.5px; color: #A9C7BC; }

/* ---------- article pages (all the existing class names) ---------- */
.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px 20px; }
.wrap > header { display: none; }  /* old in-page logo header, replaced by .ptb-header */
.crumbs { font-size: 14px; color: var(--ink-faint); margin: 22px 0 0; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.wrap h1 { font-size: 42px; line-height: 1.08; letter-spacing: -.02em; font-weight: 800; margin: 18px 0 12px; }
.meta { color: var(--ink-faint); font-size: 14px; margin-bottom: 8px; }
.standfirst { font-size: 19px; color: var(--ink-soft); margin: 14px 0 26px; line-height: 1.6; }
.wrap h2 { font-size: 27px; line-height: 1.15; letter-spacing: -.01em; font-weight: 800; margin: 44px 0 12px; }
.wrap h3 { font-size: 20px; margin: 26px 0 6px; }
.wrap p { margin: 14px 0; }
.wrap ul, .wrap ol { margin: 12px 0 12px 24px; }
.wrap li { margin: 8px 0; }
.wrap table { border-collapse: separate; border-spacing: 0; width: 100%; margin: 20px 0; font-size: 15px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.wrap th { background: var(--sand); color: var(--ink-soft); text-align: left; padding: 11px 14px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.wrap td { padding: 11px 14px; border-top: 1px solid var(--line); vertical-align: top; }
td.r, th.r { text-align: right; }
.wrap blockquote { background: var(--sand); border-left: 4px solid var(--orange); padding: 16px 20px; margin: 20px 0; border-radius: 14px; color: var(--ink-soft); }
.stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 24px 0; }
.stat > div { background: var(--pine-soft); border-radius: 18px; padding: 18px; }
.stat .n { font-family: "Bricolage Grotesque", sans-serif; font-size: 32px; font-weight: 800; color: var(--pine-deep); line-height: 1.05; }
.stat .l { font-size: 14px; color: var(--ink-soft); margin-top: 6px; line-height: 1.4; }
.stat > div:nth-child(2) { background: var(--orange-soft); }
.stat > div:nth-child(2) .n { color: var(--orange-deep); }
.stat > div:nth-child(3) { background: var(--sky); }
.stat > div:nth-child(3) .n { color: #1F5E8A; }
.stat > div:nth-child(4) { background: var(--sand); }
.callout { background: var(--pine-soft); border-radius: 18px; padding: 18px 22px; margin: 22px 0; border: 1px solid #CBE5DA; }
.callout.amber, .callout.warn { background: var(--orange-soft); border-color: #FBDCC4; }
.callout p { margin: 6px 0; }
.sources { background: var(--sand); border-radius: 18px; padding: 20px 22px; margin: 36px 0 10px; font-size: 15px; }
.sources h2, .sources h3 { margin-top: 0 !important; font-size: 18px !important; }
.cta { display: inline-block; background: var(--orange); color: #fff !important; font-weight: 800; padding: 14px 26px; border-radius: 14px; text-decoration: none; margin: 8px 0; }
.cta:hover { background: var(--orange-deep); }
.grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; font-size: 15px; }
.grid a, .grid span { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; text-decoration: none; color: var(--ink); white-space: nowrap; }
.grid a:hover { border-color: var(--pine); color: var(--pine); }
.grid span { background: var(--pine-soft); border-color: var(--pine-soft); font-weight: 700; }
.wrap > footer { display: none; }  /* old in-page footer, replaced by .ptb-footer */
.dim { color: var(--ink-faint); }

/* ---------- homepage pieces ---------- */
.home { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.home .hero { margin: 24px 0 0; border-radius: 26px; overflow: hidden; position: relative; background: linear-gradient(#DDEFFA, #EAF5FC 60%); min-height: 430px; }
.home .hero svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.home .hero .card { position: relative; z-index: 2; max-width: 560px; margin: 40px; background: rgba(255,255,255,.95); border-radius: 22px; padding: 30px; box-shadow: 0 14px 40px rgba(20,60,50,.10); }
.pill { display: inline-block; background: var(--pine-soft); color: var(--pine-deep); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.home .hero h1 { font-size: 50px; line-height: 1.02; letter-spacing: -.02em; font-weight: 800; margin: 14px 0 12px; }
.home .hero p { color: var(--ink-soft); }
.finder { display: flex; gap: 8px; margin-top: 18px; }
.finder select, .finder input { font: inherit; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); }
.finder select { flex: 0 0 140px; }
.finder input { flex: 1; min-width: 0; }
.finder button { font: inherit; font-weight: 800; background: var(--orange); color: #fff; border: 0; border-radius: 14px; padding: 13px 18px; cursor: pointer; }
.finder button:hover { background: var(--orange-deep); }
.home .hero .note { font-size: 13px; color: var(--ink-faint); margin-top: 8px; }
.home section { margin-top: 64px; }
.home h2 { font-size: 34px; line-height: 1.1; letter-spacing: -.01em; font-weight: 800; }
.sub { color: var(--ink-soft); margin: 6px 0 22px; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tile { border-radius: 20px; padding: 22px; text-decoration: none; color: var(--ink); text-align: center; transition: transform .15s; display: block; }
.tile:hover { transform: translateY(-3px); }
.tile .ic { font-size: 34px; }
.tile h3 { font-size: 21px; margin: 8px 0 4px; }
.tile p { font-size: 14px; color: var(--ink-soft); }
.tile .tag { display: block; margin-top: 10px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pine); }
.split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: start; }
.odds { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; font-size: 15px; }
.odds th { background: var(--sand); text-align: left; padding: 12px 14px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.odds td { padding: 12px 14px; border-top: 1px solid var(--line); }
.odds td a { color: var(--ink); text-decoration: none; font-weight: 600; }
.odds td a:hover { color: var(--pine); }
.odds td.n { text-align: right; font-weight: 800; }
.bar-cell { display: flex; align-items: center; gap: 10px; }
.bar-cell i { height: 8px; border-radius: 99px; background: var(--pine); display: block; }
.take { background: var(--orange-soft); border-radius: 20px; padding: 24px; border: 1px solid #FBDCC4; }
.take h3 { font-size: 22px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.take h3 i { width: 36px; height: 36px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 15px; }
.take p + p { margin-top: 10px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.step { background: var(--sand); border-radius: 20px; padding: 22px; }
.step b { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pine); color: #fff; font-family: "Bricolage Grotesque", sans-serif; margin-bottom: 10px; }
.step h3 { font-size: 20px; margin-bottom: 4px; }
.step p { font-size: 15px; color: var(--ink-soft); }
.guides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.guide { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; text-decoration: none; color: var(--ink); display: block; transition: transform .15s; }
.guide:hover { transform: translateY(-3px); }
.guide .art { height: 120px; display: grid; place-items: center; font-size: 46px; }
.guide div.txt { padding: 16px 18px 20px; }
.guide small { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-deep); }
.guide h3 { font-size: 20px; line-height: 1.2; margin-top: 4px; }

@media (max-width: 860px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .split, .steps, .guides { grid-template-columns: 1fr; }
  /* Most visitors are on phones, so the town search drops to its own full-width
     row instead of disappearing. */
  .ptb-header .ptb-top { flex-wrap: wrap; }
  .ptb-search { order: 3; flex: 1 1 100%; max-width: none; }
  /* On a phone the header is three rows tall, so it scrolls away with the page
     instead of staying pinned over a third of the screen. */
  .ptb-header { position: relative; }
  /* On a phone the state menu opens downward, one level inside the other. */
  .ptb-menu { flex-wrap: wrap; gap: 8px 18px; padding: 0 14px 10px; font-size: 14.5px; }
  .ptb-states { flex: 1 1 100%; }
  .ptb-states-btn { width: 100%; text-align: left; padding: 10px 16px; }
  .ptb-mega { position: static; transform: none; width: auto; height: auto; max-height: 70vh; overflow: auto; margin-top: 8px; border-radius: 14px; box-shadow: none; }
  .ptb-mega .lv1s { width: auto; height: auto; border: 0; padding: 6px; overflow: visible; }
  .ptb-mega .lv2s, .ptb-mega .lv1[data-k="other"] > .lv2s { position: static; width: auto; border: 0; padding: 0 0 6px 12px; overflow: visible; }
  .ptb-mega .lv3 { position: static; width: auto; padding: 4px 6px 10px 14px; overflow: visible; }
  .ptb-mega .opener::after { content: "▾"; font-size: 13px; }
  .ptb-mega .on > .opener::after { content: "▴"; }
  .ptb-mega h5 { display: none; }
  .ptb-mega .fill { columns: 2 120px; }
  .ptb-mega .navguides.other .cols { columns: 2 120px; }
  .home .hero .card { margin: 16px; padding: 22px; } .home .hero h1 { font-size: 36px; }
  .finder { flex-wrap: wrap; } .finder select, .finder input, .finder button { flex: 1 1 100%; }
  .ptb-footer .cols { grid-template-columns: 1fr 1fr; }
  .wrap h1 { font-size: 32px; }
}
@media (max-width: 520px) {
  .ptb-cta { padding: 9px 14px; font-size: 14px; }
  .ptb-logo small { display: none; }
  .ptb-logo { font-size: 17px; gap: 8px; } .ptb-logo div { white-space: nowrap; } .ptb-logo i { width: 32px; height: 32px; flex-basis: 32px; }
  .ptb-header .ptb-top { gap: 10px; padding: 10px 14px; }
  .tiles { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .ptb-cta { padding: 8px 11px; font-size: 13px; }
  .ptb-logo { font-size: 15px; } .ptb-logo i { width: 28px; height: 28px; flex-basis: 28px; }
  .ptb-header .ptb-top { gap: 8px; padding: 10px 10px; }
}

/* ---------- smaller article pieces ---------- */
.wrap .step { display: flex; gap: 14px; margin: 16px 0; background: none; padding: 0; border-radius: 0; }
.wrap .stepnum { flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--pine); color: #fff; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; display: grid; place-items: center; font-size: 15px; }
.box { background: var(--sand); border-radius: 18px; padding: 18px 22px; margin: 18px 0; }
.updated { color: var(--ink-faint); font-size: 14px; }