/* ================================================================
   Ohio Orthopedic Network
   ================================================================ */

:root{
  --red:        #b40505;
  --red-dark:   #8c0303;
  --ink:        #1a1a1a;
  --ink-soft:   #4a4a4a;
  --line:       #e4e4e4;
  --bg-tint:    #f7f7f8;
  --white:      #fff;

  --wrap:       1180px;
  --radius:     6px;
  --font:       "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--red); text-decoration:none; }
a:hover{ text-decoration:underline; }

:focus-visible{ outline:3px solid var(--red); outline-offset:2px; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px; }

.skip{
  position:absolute; left:-9999px;
  background:var(--red); color:#fff; padding:10px 16px; z-index:200;
}
.skip:focus{ left:12px; top:12px; }

/* ----------------------------------------------------------------
   HEADER
   ---------------------------------------------------------------- */
.site-head{
  position:sticky; top:0; z-index:100;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.head-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; min-height:84px;
}
.logo img{ width:176px; height:auto; }

.nav{ display:flex; align-items:center; gap:28px; }
.nav-list{
  display:flex; align-items:center; gap:4px;
  list-style:none; margin:0; padding:0;
}
.nav-list li{ position:relative; }

.nav-link{
  display:flex; align-items:center; gap:6px;
  padding:10px 14px;
  font:inherit; font-size:14.5px; font-weight:600;
  letter-spacing:.2px;
  color:var(--ink); background:none; border:0;
  cursor:pointer; border-radius:var(--radius);
}
.nav-link:hover{ color:var(--red); text-decoration:none; background:var(--bg-tint); }
.nav-list .accent > .nav-link{ color:var(--red); }
.nav-link[aria-current="page"]{ color:var(--red); }

.caret{ width:10px; height:6px; flex:none; }

.sub{
  position:absolute; top:100%; left:0; min-width:240px;
  list-style:none; margin:0; padding:8px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 10px 28px rgba(0,0,0,.09);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .14s, transform .14s;
}
.has-kids:hover > .sub,
.has-kids.open > .sub{ opacity:1; visibility:visible; transform:none; }

.sub a{
  display:block; padding:9px 12px;
  font-size:14.5px; font-weight:500; color:var(--ink); border-radius:4px;
}
.sub a:hover{ background:var(--bg-tint); color:var(--red); text-decoration:none; }

.head-call{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px;
  background:var(--red); color:#fff;
  font-size:15px; font-weight:600;
  border-radius:var(--radius); white-space:nowrap;
}
.head-call:hover{ background:var(--red-dark); text-decoration:none; }

.burger{
  display:none;
  width:46px; height:46px; padding:11px;
  background:none; border:1px solid var(--line); border-radius:var(--radius);
  cursor:pointer;
}
.burger span{
  display:block; height:2px; background:var(--ink); border-radius:2px;
}
.burger span + span{ margin-top:5px; }

/* ----------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------- */
.site-foot{
  margin-top:72px;
  background:var(--red); color:#fff;
}
.site-foot a{ color:#fff; }

.foot-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1.4fr;
  gap:48px;
  padding-top:56px; padding-bottom:40px;
}

.foot-name{ margin:0 0 6px; font-size:19px; font-weight:700; }
.foot-about address{ font-style:normal; line-height:1.8; opacity:.94; }
.foot-call{
  display:inline-block; margin-top:14px;
  font-size:20px; font-weight:700;
}

.social{ display:flex; gap:10px; list-style:none; margin:22px 0 0; padding:0; }
.social a{
  display:grid; place-items:center;
  width:40px; height:40px;
  background:rgba(255,255,255,.14); border-radius:50%;
}
.social a:hover{ background:#fff; color:var(--red); }

.foot-links h2,
.foot-form h2{
  margin:0 0 16px;
  font-size:14px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  opacity:.85;
}
.foot-links ul{ list-style:none; margin:0; padding:0; columns:2; column-gap:24px; }
.foot-links li{ margin-bottom:9px; break-inside:avoid; }
.foot-links a{ font-size:14.5px; opacity:.94; }

/* ---- footer form ---- */
.foot-form form{ display:block; }
.foot-form label{
  display:block; margin-bottom:5px;
  font-size:13px; font-weight:500; opacity:.9;
}
.foot-form input,
.foot-form textarea{
  width:100%; padding:11px 13px; margin-bottom:14px;
  font:inherit; font-size:15px; color:var(--ink);
  background:#fff; border:1px solid rgba(0,0,0,.12); border-radius:var(--radius);
}
.foot-form textarea{ resize:vertical; }
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.foot-form button{
  width:100%; padding:13px 24px;
  font:inherit; font-size:16px; font-weight:600;
  color:var(--red); background:#fff;
  border:0; border-radius:var(--radius); cursor:pointer;
}
.foot-form button:hover{ background:#f0f0f0; }

.form-ok{
  padding:12px 14px; margin-bottom:16px;
  background:rgba(255,255,255,.16); border-radius:var(--radius); font-size:15px;
}
.hp{ position:absolute; left:-9999px; }

.foot-base{
  padding:18px 20px;
  border-top:1px solid rgba(255,255,255,.2);
  font-size:13.5px; opacity:.85;
}
.foot-base p{ margin:0; }

/* ----------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------- */
@media (max-width:1024px){
  .burger{ display:block; }

  .nav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    padding:12px;
    background:#fff; border-bottom:1px solid var(--line);
    box-shadow:0 14px 28px rgba(0,0,0,.08);
  }
  .nav.open{ display:flex; }

  .nav-list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav-link{ width:100%; justify-content:space-between; padding:14px 12px; font-size:16px; }

  .sub{
    position:static; display:none;
    opacity:1; visibility:visible; transform:none;
    border:0; box-shadow:none; padding:0 0 8px 12px;
    min-width:0;
  }
  .has-kids.open > .sub{ display:block; }
  .has-kids:hover > .sub{ display:none; }
  .has-kids.open:hover > .sub{ display:block; }

  .head-call{ margin-top:10px; justify-content:center; padding:14px 20px; }

  .foot-grid{ grid-template-columns:1fr 1fr; }
  .foot-form{ grid-column:1 / -1; }
}

@media (max-width:640px){
  .head-inner{ min-height:70px; }
  .logo img{ width:142px; }
  .foot-grid{ grid-template-columns:1fr; gap:36px; padding-top:40px; }
  .foot-links ul{ columns:2; }
  .row-2{ grid-template-columns:1fr; gap:0; }
}

/* ================================================================
   HOMEPAGE
   ================================================================ */

.section{ padding:72px 0; }
.section-tint{ background:var(--bg-tint); }
.wrap-narrow{ max-width:820px; }

.section-head{
  margin:0 0 40px;
  font-size:clamp(26px,3.4vw,34px); font-weight:700; line-height:1.25;
  text-align:center;
}

/* ---- hero ---- */
.hero{
  padding:80px 0 76px;
  background:linear-gradient(160deg,#2a2a2d 0%,#17171a 100%);
  color:#fff; text-align:center;
}
.hero h1{
  max-width:17ch;
  margin:0 auto 18px;
  font-size:clamp(30px,4.6vw,48px); font-weight:700; line-height:1.18;
  letter-spacing:-.4px;
}
.hero-sub{
  max-width:60ch; margin:0 auto 32px;
  font-size:clamp(16px,1.9vw,18.5px); line-height:1.7; color:rgba(255,255,255,.82);
}
.hero-actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }

.btn{
  display:inline-block; padding:15px 32px;
  font-size:16px; font-weight:600; border-radius:var(--radius);
}
.btn:hover{ text-decoration:none; }
.btn-solid{ background:var(--red); color:#fff; }
.btn-solid:hover{ background:var(--red-dark); }
.btn-ghost{ background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4); }
.btn-ghost:hover{ background:rgba(255,255,255,.1); }

/* ---- service tiles ---- */
.tiles{
  display:grid; grid-template-columns:repeat(3,1fr); gap:30px;
  list-style:none; margin:0; padding:0;
}
.tile a{
  display:block; height:100%;
  color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:#fff;
  transition:box-shadow .16s, border-color .16s;
}
.tile a:hover{
  text-decoration:none;
  border-color:#d2d2d2;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
}
.tile img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.tile h3{
  margin:20px 22px 7px;
  font-size:18px; font-weight:600; color:var(--red);
}
.tile p{ margin:0 22px 22px; font-size:14.5px; line-height:1.6; color:var(--ink-soft); }

/* ---- faq ---- */
.faq{ margin:0; }
.faq-item{ padding:22px 0; border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq dt{ margin:0 0 7px; font-size:17px; font-weight:600; }
.faq dd{ margin:0; font-size:16px; color:var(--ink-soft); max-width:70ch; }

/* ---- stats ---- */
.stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  list-style:none; margin:0; padding:0; text-align:center;
}
.stats li{
  padding:34px 20px;
  background:var(--red); color:#fff; border-radius:var(--radius);
}
.stats strong{ display:block; font-size:clamp(34px,4.6vw,46px); font-weight:700; line-height:1.1; }
.stats span{ display:block; margin-top:6px; font-size:14.5px; opacity:.92; }

@media (max-width:900px){
  .tiles{ grid-template-columns:repeat(2,1fr); gap:22px; }
}
@media (max-width:640px){
  .section{ padding:52px 0; }
  .hero{ padding:58px 0 54px; }
  .hero-actions .btn{ width:100%; }
  .tiles{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; gap:14px; }
  .stats li{ padding:26px 20px; }
}

/* ================================================================
   INNER PAGES
   ================================================================ */

/* ---- page head ---- */
.page-head{
  padding:46px 0 40px;
  background:var(--bg-tint);
  border-bottom:1px solid var(--line);
}
.crumb{ font-size:13.5px; color:var(--ink-soft); margin-bottom:14px; }
.crumb a{ color:var(--ink-soft); }
.crumb a:hover{ color:var(--red); }
.crumb span[aria-hidden]{ margin:0 7px; opacity:.5; }

.page-head h1{
  max-width:20ch;
  margin:0;
  font-size:clamp(28px,4.2vw,42px); font-weight:700; line-height:1.18;
  letter-spacing:-.3px;
}
.page-head .lede{
  max-width:62ch; margin:16px 0 0;
  font-size:clamp(16px,1.9vw,18.5px); line-height:1.65; color:var(--ink-soft);
}

/* ---- split (text + image) ---- */
.split{ padding:72px 0; }
.split-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
}
.split-text h2{ margin:0 0 18px; font-size:clamp(23px,2.9vw,30px); font-weight:700; line-height:1.3; }
.split-text p{ margin:0 0 16px; font-size:16.5px; line-height:1.72; color:var(--ink-soft); max-width:52ch; }
.split-text .btn{ margin-top:10px; }
.split-img img{ width:100%; border-radius:var(--radius); }

/* ---- prose ---- */
.prose-lead{
  margin:0 0 26px;
  font-size:17.5px; line-height:1.75; color:var(--ink-soft); max-width:68ch;
}

/* ---- tick list ---- */
.ticks{ list-style:none; margin:0; padding:0; }
.ticks li{
  position:relative; padding:0 0 0 32px; margin-bottom:13px;
  font-size:16.5px; line-height:1.6;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:16px; height:9px;
  border-left:2.5px solid var(--red); border-bottom:2.5px solid var(--red);
  transform:rotate(-45deg);
}
.ticks-sm li{ font-size:15px; margin-bottom:10px; padding-left:28px; }

/* ---- generic cards ---- */
.cards{
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
  list-style:none; margin:0; padding:0;
}
.cards-3{ grid-template-columns:repeat(3,1fr); }
.card{
  padding:26px 28px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
}
.section-tint .card{ background:#fff; }
.card h3{ margin:0 0 9px; font-size:17.5px; font-weight:600; color:var(--red); }
.card p{ margin:0; font-size:15.5px; line-height:1.65; color:var(--ink-soft); }

/* ---- numbered steps ---- */
.steps{ counter-reset:step; list-style:none; margin:0; padding:0; }
.steps li{
  counter-increment:step;
  position:relative; padding:0 0 28px 62px;
}
.steps li::before{
  content:counter(step);
  position:absolute; left:0; top:0;
  width:38px; height:38px;
  display:grid; place-items:center;
  background:var(--red); color:#fff;
  font-size:16px; font-weight:700; border-radius:50%;
}
.steps li::after{
  content:""; position:absolute; left:18.5px; top:44px; bottom:6px;
  width:1.5px; background:var(--line);
}
.steps li:last-child{ padding-bottom:0; }
.steps li:last-child::after{ display:none; }
.steps h3{ margin:7px 0 6px; font-size:17.5px; font-weight:600; }
.steps p{ margin:0; font-size:16px; line-height:1.65; color:var(--ink-soft); max-width:60ch; }

.mini-steps{ counter-reset:ms; list-style:none; margin:0 0 28px; padding:0; }
.mini-steps li{
  counter-increment:ms;
  position:relative; padding-left:32px; margin-bottom:11px;
  font-size:15px; line-height:1.6; color:var(--ink-soft);
}
.mini-steps li::before{
  content:counter(ms);
  position:absolute; left:0; top:1px;
  width:22px; height:22px; display:grid; place-items:center;
  background:var(--red); color:#fff;
  font-size:12px; font-weight:700; border-radius:50%;
}

/* ---- locations ---- */
.area-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  list-style:none; margin:0; padding:0;
}
.area-grid li{
  padding:22px 24px;
  border:1px solid var(--line); border-left:4px solid var(--red);
  border-radius:var(--radius); background:#fff;
}
.area-grid h3{ margin:0 0 6px; font-size:16.5px; font-weight:600; }
.area-grid p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-soft); }
.area-note{
  margin:34px 0 0; text-align:center;
  font-size:16px; color:var(--ink-soft);
}

/* ---- closing CTA band ---- */
.cta-band{
  padding:66px 0;
  background:linear-gradient(160deg,#2a2a2d 0%,#17171a 100%);
  color:#fff; text-align:center;
}
.cta-band h2{ margin:0 0 12px; font-size:clamp(25px,3.2vw,32px); font-weight:700; }
.cta-band p{ margin:0 auto 28px; max-width:56ch; font-size:17px; color:rgba(255,255,255,.8); }
.cta-actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }

/* ================================================================
   FORMS ON WHITE
   ================================================================ */
.form-layout{
  display:grid; grid-template-columns:1.35fr 1fr; gap:48px; align-items:start;
}

.form-card{
  padding:34px 36px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:#fff;
  box-shadow:0 2px 14px rgba(0,0,0,.04);
}
.form-card h2{ margin:0 0 24px; font-size:22px; font-weight:700; }

.lead-form label{
  display:block; margin-bottom:6px;
  font-size:14px; font-weight:500; color:var(--ink);
}
.lead-form input[type=text],
.lead-form input[type=tel],
.lead-form input[type=email],
.lead-form textarea{
  width:100%; padding:12px 14px; margin-bottom:18px;
  font:inherit; font-size:16px; color:var(--ink);
  background:#fff; border:1px solid #cfcfcf; border-radius:var(--radius);
}
.lead-form input:focus-visible,
.lead-form textarea:focus-visible{ border-color:var(--red); }
.lead-form textarea{ resize:vertical; }

.lead-form button{
  width:100%; padding:15px 24px;
  font:inherit; font-size:16.5px; font-weight:600;
  color:#fff; background:var(--red);
  border:0; border-radius:var(--radius); cursor:pointer;
}
.lead-form button:hover{ background:var(--red-dark); }

.field-set{ border:0; padding:0; margin:0 0 18px; }
.field-set legend{ padding:0; margin-bottom:10px; font-size:14px; font-weight:500; }
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip input{ position:absolute; opacity:0; pointer-events:none; }
.chip span{
  display:inline-block; padding:9px 15px;
  font-size:14.5px;
  border:1px solid #cfcfcf; border-radius:999px; cursor:pointer;
  transition:background .14s, border-color .14s, color .14s;
}
.chip span:hover{ border-color:var(--red); color:var(--red); }
.chip input:checked + span{ background:var(--red); border-color:var(--red); color:#fff; }
.chip input:focus-visible + span{ outline:3px solid var(--red); outline-offset:2px; }

.form-note{ margin:16px 0 0; font-size:13.5px; line-height:1.6; color:var(--ink-soft); }

.form-err{
  padding:13px 15px; margin-bottom:20px;
  background:#fdecec; border:1px solid #e3b4b4; border-radius:var(--radius);
  color:#8c0303; font-size:15px;
}
.section .form-ok{
  padding:13px 15px; margin-bottom:20px;
  background:#eaf6ec; border:1px solid #b5d8bd; border-radius:var(--radius);
  color:#1f5c2d; font-size:15px;
}
.section .form-ok a{ color:#1f5c2d; text-decoration:underline; }

/* ---- form sidebar ---- */
.form-aside h3{ margin:28px 0 12px; font-size:17px; font-weight:600; }
.form-aside h3:first-of-type{ margin-top:0; }
.form-aside address{ font-style:normal; line-height:1.75; color:var(--ink-soft); }
.form-aside p{ font-size:15px; line-height:1.65; color:var(--ink-soft); }

.aside-call{
  padding:24px 26px; margin-bottom:30px;
  background:var(--red); color:#fff; border-radius:var(--radius);
}
.aside-label{
  margin:0 0 4px !important;
  font-size:13px !important; letter-spacing:.5px; text-transform:uppercase;
  color:rgba(255,255,255,.8) !important;
}
.aside-phone{
  display:inline-block;
  font-size:clamp(23px,3vw,28px); font-weight:700; color:#fff;
}
.aside-phone:hover{ text-decoration:underline; }
.aside-note{ margin:8px 0 0 !important; font-size:14px !important; color:rgba(255,255,255,.85) !important; }
.form-aside .aside-note a{ color:#fff; text-decoration:underline; }
.form-aside > .aside-note,
.form-aside p.aside-note:not(.aside-call .aside-note){ color:var(--ink-soft) !important; }
.aside-call + h3{ margin-top:0; }

/* ---- map ---- */
.map-band{ line-height:0; }
.map-band iframe{
  width:100%; height:420px; border:0;
  border-top:1px solid var(--line);
}

/* ================================================================
   RESPONSIVE — inner pages
   ================================================================ */
@media (max-width:960px){
  .split-grid{ grid-template-columns:1fr; gap:34px; }
  .split-img{ order:-1; }
  .cards,
  .cards-3{ grid-template-columns:repeat(2,1fr); }
  .area-grid{ grid-template-columns:repeat(2,1fr); }
  .form-layout{ grid-template-columns:1fr; gap:36px; }
}

@media (max-width:640px){
  .page-head{ padding:30px 0 28px; }
  .split{ padding:44px 0; }
  .cards,
  .cards-3,
  .area-grid{ grid-template-columns:1fr; }
  .form-card{ padding:26px 22px; }
  .cta-band{ padding:48px 0; }
  .cta-actions .btn{ width:100%; }
  .steps li{ padding-left:52px; }
  .map-band iframe{ height:300px; }
}

/* ---- shared form, restyled for the red footer ---- */
.foot-form .lead-form label,
.foot-form .lead-form legend{ color:#fff; opacity:.92; }
.foot-form .lead-form input[type=text],
.foot-form .lead-form input[type=tel],
.foot-form .lead-form input[type=email],
.foot-form .lead-form textarea{ border-color:rgba(0,0,0,.12); margin-bottom:14px; }
.foot-form .lead-form button{
  background:#fff; color:var(--red); padding:13px 24px;
}
.foot-form .lead-form button:hover{ background:#f0f0f0; }
.foot-form .form-note{ color:rgba(255,255,255,.8); }
.foot-form .form-note a{ color:#fff; text-decoration:underline; }
.foot-form .form-ok{
  padding:12px 14px; margin-bottom:16px;
  background:rgba(255,255,255,.16); border-radius:var(--radius); font-size:15px;
}
.foot-form .form-ok a{ color:#fff; text-decoration:underline; }
.foot-form .form-err{
  background:rgba(0,0,0,.2); border-color:rgba(255,255,255,.3); color:#fff;
}
.foot-form .chip span{ border-color:rgba(0,0,0,.15); background:#fff; color:var(--ink); }

/* ================================================================
   ARTICLES
   ================================================================ */
.btn-line{
  background:#fff; color:var(--red);
  box-shadow:inset 0 0 0 1.5px var(--red);
}
.btn-line:hover{ background:var(--red); color:#fff; }

.article-head{
  padding:46px 0 34px;
  background:var(--bg-tint); border-bottom:1px solid var(--line);
}
.article-head h1{
  margin:0; max-width:24ch;
  font-size:clamp(27px,3.8vw,40px); font-weight:700; line-height:1.22;
  letter-spacing:-.3px;
}
.article-meta{
  margin:14px 0 0;
  font-size:14.5px; color:var(--ink-soft);
}
.article-meta span{ margin:0 6px; opacity:.5; }

/* ---- article body: styles whatever HTML the import brought ---- */
.article-body{ padding:50px 20px 12px; font-size:17px; line-height:1.78; }
.article-body > *{ max-width:70ch; }
.article-body p{ margin:0 0 20px; color:#2b2b2b; }
.article-body h2{
  margin:44px 0 14px; scroll-margin-top:100px;
  font-size:clamp(21px,2.6vw,27px); font-weight:700; line-height:1.3;
}
.article-body h3{
  margin:32px 0 10px; scroll-margin-top:100px;
  font-size:19px; font-weight:600;
}
.article-body ul,
.article-body ol{ margin:0 0 22px; padding-left:24px; }
.article-body li{ margin-bottom:9px; }
.article-body a{ text-decoration:underline; text-underline-offset:2px; }
.article-body img{ border-radius:var(--radius); margin:12px 0 24px; }
.article-body blockquote{
  margin:26px 0; padding:4px 0 4px 22px;
  border-left:3px solid var(--red);
  font-size:18px; color:var(--ink-soft);
}
.article-body table{
  width:100%; max-width:100%; border-collapse:collapse;
  margin:0 0 24px; font-size:15.5px;
}
.article-body th,
.article-body td{ padding:11px 13px; border:1px solid var(--line); text-align:left; }
.article-body th{ background:var(--bg-tint); font-weight:600; }

/* the imported table of contents */
.article-body .toc{
  max-width:100%;
  padding:22px 26px; margin:0 0 34px;
  background:var(--bg-tint); border:1px solid var(--line);
  border-radius:var(--radius);
}
.article-body .toc strong{ display:block; margin-bottom:12px; font-size:15px; }
.article-body .toc ul{ margin:0; padding-left:20px; }
.article-body .toc li{ margin-bottom:7px; font-size:15.5px; line-height:1.5; }

/* ---- in-article CTA ---- */
.article-cta{
  margin:40px 0 10px; padding:32px 34px;
  background:var(--bg-tint); border:1px solid var(--line);
  border-radius:var(--radius); text-align:center;
}
.article-cta h2{ margin:0 0 8px; font-size:22px; font-weight:700; }
.article-cta p{ margin:0 auto 22px; max-width:50ch; color:var(--ink-soft); }

.rel-list{ list-style:none; margin:0; padding:0; columns:2; column-gap:40px; }
.rel-list li{ margin-bottom:12px; break-inside:avoid; font-size:16px; line-height:1.5; }

/* ================================================================
   POST INDEX
   ================================================================ */
.filters{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:28px; }
.pill{
  display:inline-block; padding:8px 16px;
  font-size:14.5px; color:var(--ink);
  border:1px solid var(--line); border-radius:999px; background:#fff;
}
.pill:hover{ border-color:var(--red); color:var(--red); text-decoration:none; }
.pill.on{ background:var(--red); border-color:var(--red); color:#fff; }

.result-count{ margin:0 0 22px; font-size:14.5px; color:var(--ink-soft); }

.post-list{ list-style:none; margin:0; padding:0; max-width:76ch; }
.post-list li{ padding:26px 0; border-top:1px solid var(--line); }
.post-list li:last-child{ border-bottom:1px solid var(--line); }
.post-list h2{ margin:0 0 6px; font-size:20px; font-weight:600; line-height:1.35; }
.post-list h2 a{ color:var(--ink); }
.post-list h2 a:hover{ color:var(--red); text-decoration:none; }
.post-meta{ margin:0 0 8px; font-size:13.5px; color:var(--ink-soft); }
.post-meta span{ margin:0 5px; opacity:.5; }
.post-list p:last-child{ margin:0; font-size:15.5px; line-height:1.65; color:var(--ink-soft); }

.pager{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin-top:40px; font-size:15px; color:var(--ink-soft);
}

@media (max-width:640px){
  .article-body{ padding:34px 20px 8px; font-size:16.5px; }
  .article-cta{ padding:24px 20px; }
  .rel-list{ columns:1; }
  .pager{ flex-direction:column; gap:12px; }
  .pager .btn{ width:100%; text-align:center; }
}

.area-kind{
  margin-top:8px !important;
  font-size:13px !important; letter-spacing:.4px; text-transform:uppercase;
  color:var(--red) !important;
}

/* ---- FAQ page + legal pages ---- */
.faq-lg .faq-item{ padding:26px 0; }
.faq-lg dt{ font-size:18.5px; }
.faq-sub{ margin:12px 0 0; padding-left:22px; }
.faq-sub li{ margin-bottom:7px; font-size:15.5px; line-height:1.55; color:var(--ink-soft); }

.legal{ font-size:16.5px; line-height:1.78; color:var(--ink-soft); }
.legal p{ margin:0 0 18px; max-width:72ch; }
.legal h2{
  margin:36px 0 12px;
  font-size:21px; font-weight:700; color:var(--ink);
}
.legal ul{ margin:0 0 20px; padding-left:22px; max-width:72ch; }
.legal li{ margin-bottom:9px; }

/* Honeypot: off-screen rather than display:none — some bots skip
   anything that is explicitly hidden. */
.hp{
  position:absolute !important;
  left:-9999px !important; top:auto !important;
  width:1px !important; height:1px !important;
  overflow:hidden !important;
}