/* ============================================================
   Short Sale Realtor Site — shared styles
   Design tokens live as CSS custom properties in :root so the
   whole palette/type system can be retuned from one place.
   ============================================================ */

:root{
  --limestone:#EDE8DD;
  --panel:#F5F2E9;
  --ink:#2B2621;
  --ink-soft:#5B5348;
  --denim:#2E4057;
  --denim-deep:#1F2C3D;
  --rust:#B24C25;
  --juniper:#3F5D45;
  --rule-light:#D8D1C1;
  --white:#FFFDF9;

  --font-head:'Bitter', Georgia, serif;
  --font-body:'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --max-width:1080px;
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-body);
  background:var(--limestone);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

h1, h2, h3, h4{
  font-family:var(--font-head);
  margin:0;
  font-weight:600;
  line-height:1.15;
  letter-spacing:-0.01em;
}

p{ margin:0; line-height:1.6; }

a{ color:inherit; }

img{ max-width:100%; display:block; }

button{ font-family:inherit; }

/* focus visibility — keep this, don't remove for aesthetics */
a:focus-visible,
button:focus-visible,
summary:focus-visible{
  outline:2px solid var(--denim);
  outline-offset:2px;
}

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

/* ---------------- header / nav ---------------- */
.site-header{
  border-bottom:1px solid var(--rule-light);
}
nav.main-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px 0;
}
.brand{
  font-family:var(--font-head);
  font-size:19px;
  font-weight:600;
  text-decoration:none;
}
.brand .dot{ color:var(--rust); }

.navlinks{
  display:flex;
  gap:19px;
  font-size:13.5px;
  color:var(--ink-soft);
  list-style:none;
  margin:0; padding:0;
}
.navlinks a{ text-decoration:none; }
.navlinks a:hover, .navlinks a[aria-current="page"]{ color:var(--ink); }

.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--ink);
  border-radius:2px;
  padding:6px 10px;
  font-size:13px;
  cursor:pointer;
}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-block;
  padding:11px 22px;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
}
.btn.rust{ background:var(--rust); color:var(--white); }
.btn.juniper{ background:var(--juniper); color:var(--white); }
.btn.denim{ background:var(--denim); color:var(--white); }
.btn.line{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn.block{ width:100%; text-align:center; display:block; }

/* ---------------- hero (homepage) ---------------- */
.hero{
  padding:72px 0 56px;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:56px;
  align-items:center;
}
.hero h1{ font-size:44px; margin-bottom:20px; }
.hero p.lede{ font-size:17px; color:var(--ink-soft); max-width:46ch; margin-bottom:28px; }
.hero-photo{
  aspect-ratio:4/5;
  border-radius:2px;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 20%;
  background:linear-gradient(160deg,#4A5D6B 0%, #2E4057 55%, #1F2C3D 100%) center/cover;
}

/* ---------------- seller/buyer fork ---------------- */
.fork{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  background:var(--rule-light);
  border:1px solid var(--rule-light);
  margin:56px 0 0;
}
.fork-half{ background:var(--white); padding:32px 34px; }
.fork-half.seller{ border-top:3px solid var(--rust); }
.fork-half.buyer{ border-top:3px solid var(--juniper); }
.fork-kicker{ font-size:13px; font-weight:600; margin-bottom:10px; }
.fork-half.seller .fork-kicker{ color:var(--rust); }
.fork-half.buyer .fork-kicker{ color:var(--juniper); }
.fork-half h3{ font-size:23px; margin-bottom:10px; }
.fork-half p{ color:var(--ink-soft); font-size:14.5px; margin-bottom:20px; }

/* ---------------- probate-short-sale spotlight callout ---------------- */
.spotlight{
  margin-top:28px;
  border:1px solid var(--rust);
  background:var(--white);
  padding:26px 30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:28px;
}
.spotlight-tag{ font-size:12.5px; font-weight:600; color:var(--rust); margin-bottom:8px; }
.spotlight h3{ font-size:20px; margin-bottom:8px; }
.spotlight p{ font-size:14px; color:var(--ink-soft); max-width:56ch; }
.spotlight .btn{ flex:none; }

/* ---------------- generic section shell ---------------- */
section{ padding:56px 0; border-bottom:1px solid var(--rule-light); }
section:last-of-type{ border-bottom:none; }
.section-head{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:32px; gap:24px; flex-wrap:wrap;
}
.section-head h2{ font-size:28px; }
.section-head .section-note{ font-size:13px; color:var(--ink-soft); max-width:34ch; text-align:right; }

/* ---------------- trust strip ---------------- */
.trust-row{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule-light);
  border-bottom:1px solid var(--rule-light);
}
.trust-item{ padding:20px 24px; border-left:1px solid var(--rule-light); }
.trust-item:first-child{ border-left:none; }
.trust-item .num{ font-family:var(--font-head); font-size:26px; font-weight:600; color:var(--denim); }
.trust-item .cap{ font-size:12.5px; color:var(--ink-soft); margin-top:4px; }

/* ---------------- explainer / video ---------------- */
.explainer{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }

/* Reusable YouTube embed slot. Two states:
   .video-embed.placeholder — shown until a real video exists (play icon + caption)
   .video-embed (no modifier) — wraps a real <iframe>, sized by the aspect-ratio below.
   See the HTML comment next to each instance for how to swap placeholder -> real embed. */
.video-embed{
  aspect-ratio:16/9;
  background:var(--denim-deep);
  border-radius:2px;
  position:relative;
  overflow:hidden;
  width:100%;
}
.video-embed iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}
.video-embed.placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:20px;
}
.video-caption{
  font-size:12.5px;
  color:rgba(255,253,249,0.6);
  text-align:center;
}
.video-caption a{ color:rgba(255,253,249,0.85); text-decoration:underline; }
.video-caption a:hover{ color:var(--white); }

.play{
  width:52px; height:52px; border-radius:50%;
  background:var(--white); display:flex; align-items:center; justify-content:center;
  border:none; cursor:default; padding:0;
}
.play::after{
  content:"";
  border-left:14px solid var(--denim-deep);
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  margin-left:4px;
}

/* Grid of video-embed slots, e.g. a "Latest videos" section */
.video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.video-grid .video-embed{ aspect-ratio:16/9; }
.video-grid .video-caption{ font-size:11.5px; }

/* ---------------- about page ---------------- */
.about-hero{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:center; padding:64px 0 56px; }
.about-hero .hero-photo{ aspect-ratio:4/5; }
.about-hero h1{ font-size:36px; margin-bottom:16px; }
.about-hero p.lede{ font-size:16px; color:var(--ink-soft); margin-bottom:22px; }

.credential-row{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--rule-light); }
.credential{ padding:22px 24px; border-left:1px solid var(--rule-light); }
.credential:first-child{ border-left:none; }
.credential h4{ font-family:var(--font-head); font-size:16px; margin-bottom:6px; }
.credential p{ font-size:13px; color:var(--ink-soft); }

/* ---------------- testimonials ---------------- */
.testi-row{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--rule-light); }
.testi{ padding:26px 26px 0; border-left:1px solid var(--rule-light); }
.testi:first-child{ border-left:none; }
.testi p.quote{ font-family:var(--font-head); font-size:16px; line-height:1.5; margin-bottom:14px; }
.testi p.attr{ font-size:12.5px; color:var(--ink-soft); }

/* ---------------- breadcrumb ---------------- */
.breadcrumb{ padding:18px 0 0; font-size:12.5px; color:var(--ink-soft); }
.breadcrumb a{ text-decoration:none; color:var(--ink-soft); }
.breadcrumb a:hover{ color:var(--ink); }

/* ---------------- path hero (seller/buyer landing) ---------------- */
.path-hero{ padding:64px 0 48px; border-bottom:1px solid var(--rule-light); }
.path-hero .tag{ font-size:13px; font-weight:600; margin-bottom:12px; }
.path-hero.seller .tag{ color:var(--rust); }
.path-hero.buyer .tag{ color:var(--juniper); }
.path-hero h1{ font-size:36px; max-width:20ch; margin-bottom:16px; }
.path-hero p.lede{ font-size:16px; color:var(--ink-soft); max-width:52ch; margin-bottom:22px; }

/* ---------------- qualification checklist + lead form ---------------- */
.qual-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; }
.checklist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.check-row{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; }
.check-row .mark{ width:18px; height:18px; flex:none; margin-top:2px; border:1.5px solid var(--rust); border-radius:3px; }
.path-hero.buyer ~ .wrap .check-row .mark,
.buyer-page .check-row .mark{ border-color:var(--juniper); }

.lead-box{ background:var(--white); border:1px solid var(--rule-light); padding:26px; }
.lead-box h3{ font-size:18px; margin-bottom:16px; }
.lead-box label{ display:block; font-size:12.5px; color:var(--ink-soft); margin-bottom:4px; }
.lead-box .field{
  width:100%;
  height:38px; border:1px solid var(--rule-light); background:var(--limestone);
  margin-bottom:14px; border-radius:2px; padding:0 10px; font-family:inherit; font-size:14px;
}
.lead-box textarea.field{ height:80px; padding:8px 10px; resize:vertical; }

/* Honeypot field — invisible to real visitors and hidden from screen
   readers, but present in the DOM for bots that auto-fill every field. */
.hp-field{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }

/* Success/error banner shown after a form redirect from contact.php */
.form-banner{ padding:12px 16px; border-radius:2px; font-size:13.5px; margin-bottom:16px; border:1px solid; }
.form-banner.success{ background:#EAF3EC; color:var(--juniper); border-color:var(--juniper); }
.form-banner.error{ background:#FBEAE4; color:var(--rust); border-color:var(--rust); }

/* ---------------- timeline ---------------- */
.timeline{ display:flex; list-style:none; margin:0; padding:0; }
.tl-step{ flex:1; text-align:left; position:relative; padding-right:18px; }
.tl-step:not(:last-child)::after{
  content:""; position:absolute; top:15px; left:38px; right:0; height:1px; background:var(--rule-light);
}
.tl-num{
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:600; font-size:14px;
  background:var(--denim); color:var(--white);
  margin-bottom:12px; position:relative; z-index:1;
}
.tl-step h4{ font-family:var(--font-body); font-weight:600; font-size:14px; margin-bottom:6px; }
.tl-step p{ font-size:12.5px; color:var(--ink-soft); }

/* ---------------- FAQ (native details/summary — accessible, no JS needed) ---------------- */
.faq-item{ border-bottom:1px solid var(--rule-light); }
.faq-item:last-child{ border-bottom:none; }
.faq-item summary{
  padding:18px 0;
  font-size:15px;
  cursor:pointer;
  list-style:none;
  display:flex; justify-content:space-between; align-items:center;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .plus{ font-size:18px; color:var(--ink-soft); transition:transform .15s ease; }
.faq-item[open] summary .plus{ transform:rotate(45deg); }
.faq-item .faq-answer{ padding:0 0 18px; color:var(--ink-soft); font-size:14px; max-width:70ch; }

/* ---------------- pitfalls / feature triples ---------------- */
.triple-row{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--rule-light); }
.triple{ padding:22px 24px; border-left:1px solid var(--rule-light); }
.triple:first-child{ border-left:none; }
.triple h4{ font-family:var(--font-head); font-size:16px; margin-bottom:8px; }
.triple p{ font-size:13px; color:var(--ink-soft); }

/* ---------------- listing cards ---------------- */
.listing-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.listing-card{ border:1px solid var(--rule-light); background:var(--white); }
.listing-photo{ aspect-ratio:4/3; background:linear-gradient(150deg,#5B6E52,#3F5D45); }
.listing-body{ padding:16px; }
.listing-body .price{ font-family:var(--font-head); font-weight:600; font-size:18px; }
.listing-body .addr{ font-size:13px; color:var(--ink-soft); margin-top:4px; }
.listing-body .badge{
  display:inline-block; margin-top:10px; font-size:11px;
  color:var(--juniper); border:1px solid var(--juniper); padding:2px 8px; border-radius:2px;
}

/* ---------------- pros/cons & CMA-vs-appraisal comparison ---------------- */
.compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--rule-light); border:1px solid var(--rule-light); }
.compare-col{ background:var(--white); padding:26px 28px; }
.compare-col h3{ font-size:16px; margin-bottom:16px; }
.compare-col.good h3{ color:var(--juniper); }
.compare-col.bad h3{ color:var(--rust); }
.compare-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.compare-col li{ font-size:14px; padding-left:20px; position:relative; color:var(--ink-soft); }
.compare-col.good li::before{ content:"+"; position:absolute; left:0; color:var(--juniper); font-weight:700; }
.compare-col.bad li::before{ content:"–"; position:absolute; left:0; color:var(--rust); font-weight:700; }

/* ---------------- vertical numbered step list (fuller text than .timeline) ---------------- */
.step-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.step-list-item{ display:flex; gap:20px; padding:22px 0; border-bottom:1px solid var(--rule-light); }
.step-list-item:last-child{ border-bottom:none; }
.step-list-item .tl-num{ flex:none; margin-bottom:0; }
.step-list-item h4{ font-family:var(--font-head); font-size:17px; margin-bottom:6px; }
.step-list-item p{ font-size:14px; color:var(--ink-soft); max-width:64ch; }

/* ---------------- situation cards (link out to specialty pages) ---------------- */
.situation-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--rule-light); border:1px solid var(--rule-light); }
.situation-card{
  background:var(--white); padding:20px; text-decoration:none; color:var(--ink);
  display:block; border-top:3px solid var(--rust);
}
.situation-card h4{ font-family:var(--font-head); font-size:17px; margin-bottom:8px; }
.situation-card p{ font-size:13.5px; color:var(--ink-soft); margin-bottom:12px; }
.situation-card .go{ font-size:13px; font-weight:600; color:var(--rust); }

/* ---------------- resource list ---------------- */
.resource-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.resource-list li{ padding:14px 0; border-bottom:1px solid var(--rule-light); font-size:14.5px; display:flex; gap:14px; }
.resource-list li:last-child{ border-bottom:none; }
.resource-list strong{ flex:none; width:15em; font-family:var(--font-head); font-weight:600; font-size:14.5px; }
.resource-list span{ color:var(--ink-soft); }

/* ---------------- footer CTA ---------------- */
.site-footer{ background:var(--denim-deep); color:var(--limestone); padding:44px 0; margin-top:20px; }
.site-footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; }
.site-footer h3{ color:var(--white); font-size:22px; margin-bottom:8px; }
.site-footer p{ color:rgba(237,232,221,0.65); font-size:13.5px; }
.site-footer .btn.line{ border-color:var(--limestone); color:var(--limestone); }
.site-footer .wrap.fine{ display:block; padding-top:16px; font-size:12px; color:rgba(237,232,221,0.5); } /* one line of text, not spread across the row */

/* ---------------- TREC-required notices (IABS + Consumer Protection) ----------------
   Texas Real Estate Commission rules 531.20(b) and 531.18(b) require a link to each
   of these on the homepage of a license holder's business website, in a readily
   noticeable place, at minimum 10pt type (~13.3px) if using the long-form label. */
.trec-links{
  display:flex; flex-wrap:wrap; gap:8px 28px;
  padding-top:26px; margin-top:26px;
  border-top:1px solid rgba(237,232,221,0.15);
}
.trec-links a{
  font-size:14px; /* comfortably over the 10pt (~13.3px) minimum */
  color:rgba(237,232,221,0.85);
  text-decoration:underline;
}
.trec-links a:hover{ color:var(--white); }

/* ============================================================
   BLOG — index page, article layout, and article visuals
   (flowchart, timeline, comparison table). Uses the same tokens
   as the rest of the site; nothing here overrides earlier rules.
   ============================================================ */

/* ---------------- blog index ---------------- */
.post-list{ display:flex; flex-direction:column; border-top:1px solid var(--rule-light); }
.post-card{
  display:grid; grid-template-columns:160px 1fr; gap:32px;
  padding:28px 0; border-bottom:1px solid var(--rule-light);
  text-decoration:none; color:var(--ink);
}
.post-card .post-card-meta{ font-size:12.5px; color:var(--ink-soft); line-height:1.6; }
.post-card .post-card-meta .cat{ display:block; color:var(--rust); font-weight:600; margin-bottom:4px; }
.post-card h3{ font-size:22px; margin-bottom:10px; max-width:32ch; }
.post-card p{ font-size:14.5px; color:var(--ink-soft); max-width:62ch; margin-bottom:12px; }
.post-card .go{ font-size:13.5px; font-weight:600; color:var(--rust); }
.post-card:hover h3{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.blog-note{ font-size:13.5px; color:var(--ink-soft); margin-top:24px; }

/* ---------------- article ---------------- */
.post-meta{ font-size:13px; color:var(--ink-soft); }
.post-meta span + span::before{ content:"·"; margin:0 8px; color:var(--rule-light); }

.post-body{ max-width:720px; padding:48px 0 16px; }
.post-body > * + *{ margin-top:18px; }
.post-body p, .post-body li{ font-size:16px; line-height:1.7; }
.post-body h2{ font-size:26px; margin-top:52px; padding-top:28px; border-top:1px solid var(--rule-light); }
.post-body h2:first-child{ margin-top:0; padding-top:0; border-top:none; }
.post-body h3{ font-size:18px; margin-top:28px; }
.post-body ul, .post-body ol{ padding-left:22px; }
.post-body li + li{ margin-top:8px; }
.post-body a{ color:var(--rust); text-underline-offset:2px; }
.post-body strong{ font-weight:600; }
.post-body .note{ font-size:14px; color:var(--ink-soft); }

.post-callout{
  background:var(--white); border:1px solid var(--rule-light); border-left:3px solid var(--rust);
  padding:20px 24px;
}
.post-callout p{ font-size:15px; }

.post-disclaimer{
  max-width:720px; font-size:13px; color:var(--ink-soft); line-height:1.6;
  border-top:1px solid var(--rule-light); padding:20px 0 0; margin-top:8px;
}

.related{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--rule-light); border:1px solid var(--rule-light); }

/* ---------------- article figures (shared) ---------------- */
.post-figure{
  margin:32px 0 0; background:var(--white); border:1px solid var(--rule-light);
  padding:28px 28px 22px;
}
.post-figure .fig-title{ font-family:var(--font-head); font-size:18px; font-weight:600; margin-bottom:24px; line-height:1.3; }
.post-figure figcaption{ font-size:12.5px; color:var(--ink-soft); margin-top:22px; line-height:1.5; }
.fig-kicker{ display:block; font-size:11.5px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:4px; }

/* ---------------- flowchart: which probate path ----------------
   Built in HTML/CSS (not an image) so it stays sharp and readable,
   and restacks into a single column on phones. Connectors are drawn
   with ::before/::after lines between boxes. */
.flow{ --line:#B9B09E; --gap:28px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.flow-node{
  position:relative; border-radius:2px; padding:12px 18px;
  font-size:14px; line-height:1.4; background:var(--white);
}
.flow-start{ background:var(--denim-deep); color:var(--white); font-weight:600; padding:13px 22px; }
.flow-q{ border:1.5px solid var(--denim); color:var(--ink); font-weight:600; max-width:280px; }
.flow-q .fig-kicker{ color:var(--denim); }
.flow-out{ border:1px solid var(--rule-light); border-top:3px solid var(--rust); background:var(--limestone); text-align:left; padding:14px 16px; width:100%; }
.flow-out h4{ font-family:var(--font-head); font-size:15.5px; margin-bottom:6px; }
.flow-out p{ font-size:13px; color:var(--ink-soft); line-height:1.5; }
.flow-out .fig-kicker{ color:var(--rust); }

/* vertical connector into every node except the first */
.flow > .flow-node + .flow-node{ margin-top:var(--gap); }
.flow > .flow-node + .flow-node::before,
.flow-split > * > .flow-node:first-child::before{
  content:""; position:absolute; left:50%; top:calc(-1 * var(--gap)); height:var(--gap);
  border-left:1px solid var(--line);
}

/* a split: a line drops from the node above, then a bar spans the two children */
.flow-split{
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:24px;
  width:100%; padding-top:var(--gap);
}
.flow-split::before{ /* drop from parent */
  content:""; position:absolute; left:50%; top:0; height:calc(var(--gap) / 2 + 1px); border-left:1px solid var(--line);
}
.flow-split::after{ /* horizontal bar between child centres */
  content:""; position:absolute; top:calc(var(--gap) / 2); left:calc((100% - 24px) / 4); right:calc((100% - 24px) / 4);
  border-top:1px solid var(--line);
}
.flow-split > *{ display:flex; flex-direction:column; align-items:center; }
.flow-split > * > .flow-node:first-child::before{ top:calc(-1 * var(--gap) / 2); height:calc(var(--gap) / 2); }
.flow-split .flow-split{ gap:14px; }
.flow-split .flow-split::after{ left:calc((100% - 14px) / 4); right:calc((100% - 14px) / 4); }

/* ---------------- timeline: probate to closing ---------------- */
.ptl{ list-style:none; margin:0; padding:0; }
.ptl-step{ display:grid; grid-template-columns:30px 1fr auto; gap:6px 16px; align-items:start; padding:16px 0; border-bottom:1px solid var(--rule-light); }
.ptl-step:last-child{ border-bottom:none; }
.ptl-step .tl-num{ margin:0; }
.ptl-step h4{ font-family:var(--font-head); font-size:16px; margin:4px 0 4px; }
.ptl-step p{ font-size:13.5px; color:var(--ink-soft); line-height:1.5; }
.ptl-time{ font-size:12.5px; color:var(--ink-soft); white-space:nowrap; padding-top:6px; }
.ptl-step.key{ background:#F6E9E1; border:1.5px solid var(--rust); border-radius:2px; padding:16px 14px; margin:6px -14px; }
.ptl-step.key .tl-num{ background:var(--rust); }
.ptl-step.key .ptl-time{ color:var(--rust); font-weight:600; }

.ptl-group{ display:grid; grid-template-columns:1fr 200px; gap:22px; align-items:stretch; }
.ptl-top{ margin-right:222px; } /* keeps steps 1-2 the same width as 3-6 */
.ptl-aside{
  border-left:1px solid var(--line, #B9B09E); padding:4px 0 4px 18px;
  display:flex; flex-direction:column; justify-content:center;
}
.ptl-aside h4{ font-family:var(--font-head); font-size:15px; margin-bottom:8px; }
.ptl-aside ul{ list-style:none; margin:0; padding:0; }
.ptl-aside li{ font-size:13px; color:var(--ink-soft); line-height:1.45; padding:5px 0 5px 14px; position:relative; }
.ptl-aside li::before{ content:""; position:absolute; left:0; top:12px; width:6px; height:6px; border-radius:50%; background:var(--denim); }

/* ---------------- comparison table ---------------- */
.table-wrap{ margin-top:24px; }
.compare-table{ width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--rule-light); font-size:13.5px; }
.compare-table th, .compare-table td{ padding:12px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--rule-light); line-height:1.5; }
.compare-table thead th{ background:var(--denim-deep); color:var(--white); font-weight:600; font-size:12.5px; }
.compare-table tbody th{ font-family:var(--font-head); font-weight:600; font-size:14.5px; width:19%; }
.compare-table td{ color:var(--ink-soft); }
.compare-table .yes{ color:var(--rust); font-weight:600; }
.compare-table .no{ color:var(--juniper); font-weight:600; }

/* ---------------- blog responsive ---------------- */
@media (max-width: 860px){
  .post-card{ grid-template-columns:1fr; gap:10px; }
  .related{ grid-template-columns:1fr; }
  .ptl-group{ grid-template-columns:1fr; gap:4px; }
  .ptl-top{ margin-right:0; }
  .ptl-aside{ border-left:none; border-top:1px solid var(--rule-light); padding:16px 0 4px; }

  /* table becomes one card per row */
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td{ display:block; width:100%; }
  .compare-table thead{ position:absolute; left:-9999px; }
  .compare-table{ border:none; background:none; }
  .compare-table tr{ background:var(--white); border:1px solid var(--rule-light); border-top:3px solid var(--denim); margin-bottom:12px; }
  .compare-table tbody th{ width:100%; border-bottom:1px solid var(--rule-light); }
  .compare-table td{ border-bottom:none; padding:8px 14px; }
  .compare-table td::before{ content:attr(data-label); display:block; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink); margin-bottom:2px; }
}
@media (max-width: 640px){
  .post-figure{ padding:22px 16px 18px; margin-left:-6px; margin-right:-6px; }
  .post-body p, .post-body li{ font-size:15.5px; }
  .post-body h2{ font-size:23px; }

  /* flowchart restacks into a single column */
  .flow-split, .flow-split .flow-split{ grid-template-columns:1fr; gap:var(--gap); }
  .flow-split::after{ display:none; }
  .flow-split::before{ height:var(--gap); }
  .flow-split{ padding-top:var(--gap); }
  .flow-split > * > .flow-node:first-child::before{ top:calc(-1 * var(--gap)); height:var(--gap); }
  .flow-split > * + *{ border-top:1px dashed var(--rule-light); padding-top:var(--gap); }
  .flow-split > * + * > .flow-node:first-child::before{ display:none; }
  .flow-q{ max-width:none; width:100%; }

  .ptl-step{ grid-template-columns:30px 1fr; }
  .ptl-time{ grid-column:2; padding-top:0; }
}

/* ---------------- certification badges (About page + blog author box) ----------------
   Official logos are shown unaltered (no recoloring or stretching, per the
   certifying bodies' usage rules), on plain white tiles at a uniform height. */
.cred-logo{
  height:104px; background:var(--white); border:1px solid var(--rule-light);
  display:flex; align-items:center; justify-content:center; padding:14px 18px; margin-bottom:16px;
}
.cred-logo img{ max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain; }
.cred-logo img:not(.seal){ max-height:52px; } /* wordmarks read heavier than the round seal */
.cred-logo img.seal{ max-height:82px; }
.credential-note{ font-size:13.5px; color:var(--ink-soft); margin-top:22px; }

.author-box{
  display:grid; grid-template-columns:72px 1fr; gap:18px 20px; align-items:start;
  background:var(--white); border:1px solid var(--rule-light); padding:24px;
  max-width:720px; margin-top:40px;
}
.author-photo{
  width:72px; height:72px; border-radius:50%; object-fit:cover; object-position:center 20%;
  background:linear-gradient(160deg,#4A5D6B 0%, #2E4057 55%, #1F2C3D 100%);
}
.author-box .fig-kicker{ color:var(--rust); }
.author-box h3{ font-size:19px; margin-bottom:6px; }
.author-box p{ font-size:14px; color:var(--ink-soft); line-height:1.6; }
.author-box p a{ color:var(--rust); font-weight:600; text-underline-offset:2px; }
.author-badges{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:10px; border-top:1px solid var(--rule-light); padding-top:18px; }
.author-badges span{
  height:56px; padding:4px 12px; border:1px solid var(--rule-light); background:var(--white);
  display:flex; align-items:center;
}
.author-badges img{ max-height:30px; width:auto; }
.author-badges img.seal{ max-height:48px; }
@media (max-width: 640px){
  .author-box{ grid-template-columns:56px 1fr; padding:20px 16px; }
  .author-photo{ width:56px; height:56px; }
  .author-badges{ gap:8px; }
  .author-badges span{ height:48px; padding:4px 8px; }
  .author-badges img{ max-height:24px; }
  .author-badges img.seal{ max-height:40px; }
}

/* ---------------- responsive ---------------- */
@media (max-width: 1000px){
  .situation-row{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 860px){
  .wrap{ padding:0 22px; }
  .hero, .fork, .explainer, .qual-grid, .trust-row, .testi-row, .triple-row, .listing-row, .compare-grid, .situation-row, .video-grid, .about-hero, .credential-row{
    grid-template-columns:1fr !important;
  }
  .spotlight{ flex-direction:column; align-items:flex-start; }
  .trust-item, .testi, .triple, .credential{ border-left:none; border-top:1px solid var(--rule-light); }
  .trust-item:first-child, .testi:first-child, .triple:first-child, .credential:first-child{ border-top:none; }
  .resource-list li{ flex-direction:column; gap:2px; }
  .resource-list strong{ width:auto; }
  .timeline{ flex-direction:column; gap:22px; }
  .tl-step::after{ display:none; }
  .hero h1{ font-size:32px; }
  .path-hero h1{ font-size:28px; }

  .nav-toggle{ display:inline-block; }
  .navlinks{
    display:none;
    position:absolute;
    left:0; right:0; top:100%;
    background:var(--limestone);
    flex-direction:column;
    gap:0;
    border-bottom:1px solid var(--rule-light);
    padding:8px 22px 16px;
    z-index:20;
  }
  .navlinks.open{ display:flex; }
  .navlinks a{ display:block; padding:10px 0; border-top:1px solid var(--rule-light); }
  .navlinks li:first-child a{ border-top:none; }
  .site-header{ position:relative; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .faq-item summary .plus{ transition:none; }
}