/* Blog: article building blocks in the site style, and the topic filter on the blog index.
   Used by every blog page; generated pages link it from content/blog/_template.html. */

/* brush highlight on article headlines, same as page heroes */
.article-hero h1 em{font-style:normal;color:var(--brush-ink);background-image:var(--brush);background-repeat:no-repeat;background-position:0 62%;background-size:100% 80%;padding:0 .1em;margin:0 -.04em;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:brushIn .75s cubic-bezier(.3,.9,.4,1) .35s both}
.article-hero h1{max-width:22ch}
@media (prefers-reduced-motion:reduce){.article-hero h1 em{animation:none}}

/* sections */
.prose section{scroll-margin-top:100px}
.prose section+section{margin-top:8px}
.prose strong{color:var(--ink);font-weight:650}
.prose ul{margin:0 0 20px;padding-left:22px}
.prose ul li::marker{color:var(--green)}

/* figures */
.prose figure{margin:32px 0}
.prose figure img{width:100%;height:auto;display:block;border-radius:var(--r-panel)}
.prose figcaption{margin-top:10px;font-size:13.5px;color:var(--muted);line-height:1.5}

/* headline numbers */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:32px 0}
.stat-item{padding:22px 18px;border:1px solid var(--line);border-radius:var(--r-panel);background:var(--light)}
.stat-num{display:block;font-size:clamp(30px,3.4vw,40px);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--green-strong);margin-bottom:10px}
.stat-label{display:block;font-size:13.5px;line-height:1.45;color:var(--muted)}

/* callouts */
.key-insight{margin:32px 0;padding:22px 24px;border-left:3px solid var(--green);border-radius:0 var(--r-panel) var(--r-panel) 0;background:var(--mint)}
.key-insight-label{display:block;font-size:12px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--green-strong);margin-bottom:6px}
.key-insight p{margin:0;opacity:1}
.pull-quote{margin:36px 0;padding:6px 0 6px 24px;border-left:3px solid var(--green)}
.pull-quote blockquote{margin:0;font-size:clamp(20px,2.2vw,24px);line-height:1.4;letter-spacing:-.02em;font-weight:600;color:var(--ink)}
.pull-quote cite{display:block;margin-top:10px;font-size:13px;font-style:normal;color:var(--muted)}

/* cards */
.card-grid,.audience-grid{display:grid;gap:14px;margin:28px 0}
.card-grid{grid-template-columns:repeat(3,1fr)}
.audience-grid{grid-template-columns:1fr 1fr}
.card,.aud-card{padding:20px;border:1px solid var(--line);border-radius:var(--r-panel);background:var(--paper)}
.card-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--mint);color:var(--green);margin-bottom:12px}
.card-icon .icon{width:20px;height:20px;margin:0}
.card h4,.aud-card h4{font-size:17px;margin:0 0 6px;letter-spacing:-.01em}
.card p,.aud-card p{font-size:14.5px;line-height:1.55;margin:0}

/* comparison table: scrolls sideways on phones */
.table-scroll{margin:28px 0;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-panel);-webkit-overflow-scrolling:touch}
.comparison-table{width:100%;min-width:640px;border-collapse:collapse;font-size:14px;line-height:1.5}
.comparison-table th{background:var(--deep);color:var(--deep-ink);text-align:left;font-size:13px;font-weight:700;padding:14px 16px}
.comparison-table.us-last th:last-child{background:var(--green);color:var(--on-green)}
.comparison-table td{padding:13px 16px;border-top:1px solid var(--line);vertical-align:top;color:var(--muted)}
.comparison-table td:first-child{font-weight:650;color:var(--ink);width:24%}
.comparison-table.us-last td:last-child{background:color-mix(in srgb,var(--mint) 60%,transparent);color:var(--ink)}

/* checklist */
.checklist{margin:32px 0;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-panel);background:var(--paper)}
.checklist-heading{font-size:18px;font-weight:700;color:var(--ink);margin:0 0 8px!important;opacity:1!important}
.checklist-item{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.55;color:var(--muted)}
.checklist-item:first-of-type{border-top:0}
.checklist-item strong{display:block;color:var(--ink)}
.check-box{flex:none;display:flex;align-items:center;justify-content:center;width:22px;height:22px;margin-top:2px;border-radius:50%;background:var(--green);color:var(--on-green)}
.check-box .icon{width:12px;height:12px;stroke-width:3}

/* do / avoid */
.do-avoid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0}
.do-col,.avoid-col{padding:20px;border:1px solid var(--line);border-radius:var(--r-panel);background:var(--paper)}
.do-col{border-top:3px solid var(--green)}
.avoid-col{border-top:3px solid #c0533f}
.do-col-label,.avoid-col-label{display:block;font-size:12px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--green-strong);margin-bottom:12px}
.avoid-col-label{color:#a8432f}
@media (prefers-color-scheme:dark){.avoid-col-label{color:#f0a493}}
.da-item{display:flex;gap:10px;margin-bottom:12px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.da-item:last-child{margin-bottom:0}
.da-icon{flex:none;font-weight:700;color:var(--green)}
.avoid-col .da-icon{color:#c0533f}
.da-text strong{display:block;color:var(--ink)}

/* in-article call to action */
.article-cta.mid{margin:40px 0}

/* blog index: topic filter */
.blog-filter{display:flex;flex-wrap:wrap;gap:8px;margin:36px 0 4px}
.blog-chip{min-height:40px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font:inherit;font-size:14px;font-weight:650;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.blog-chip:hover{border-color:var(--green)}
.blog-chip[aria-pressed="true"]{background:var(--deep);border-color:var(--deep);color:#fff}
@media (prefers-color-scheme:dark){.blog-chip[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--on-green)}}
.blog-chip:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.post-card[hidden]{display:none}
.blog-empty{margin-top:22px;color:var(--muted)}

@media (max-width:760px){
  .stat-row,.card-grid,.audience-grid,.do-avoid{grid-template-columns:1fr}
  .prose figure{margin:24px 0}
}

/* let wide blocks scroll inside the article instead of widening the page */
.article-layout>*,.prose,.prose section{min-width:0}

/* buttons inside an article keep button colours, not link colours */
.prose .btn{color:var(--on-green);text-decoration:none}
.prose .btn:hover{color:var(--on-green)}

/* provider cards (numbered options with a price pill and tags) */
.provider-list{display:grid;gap:14px;margin:28px 0}
.pcard{border:1px solid var(--line);border-radius:var(--r-panel);background:var(--paper);overflow:hidden}
.pcard-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 20px;background:var(--light);border-bottom:1px solid var(--line)}
.pcard-rank-name{display:flex;align-items:center;gap:12px;min-width:0}
.pcard-num{font-size:20px;font-weight:700;letter-spacing:-.03em;color:var(--green-strong)}
.pcard-name{font-size:17px;font-weight:700;color:var(--ink)}
.pcard-pill{padding:5px 12px;border-radius:999px;background:var(--deep);color:#fff;font-size:12.5px;font-weight:700;white-space:nowrap}
.pcard-body{padding:16px 20px 18px}
.pcard-body p{font-size:15px;margin:0 0 10px}
.pcard-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.pcard-tags .tag{font-size:12px}
/* information box */
.info-box{margin:28px 0;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-panel);background:var(--light)}
.info-box-heading{font-size:16px;font-weight:700;color:var(--ink);opacity:1!important;margin:0 0 8px!important}
.info-box p{font-size:14.5px;margin:0 0 8px}
.info-box p:last-child{margin-bottom:0}
@media (prefers-color-scheme:dark){.pcard-pill{background:var(--green);color:var(--on-green)}}
/* tick table: yes / partly / no marks, our row highlighted */
.tick-table{min-width:880px}
.tick-table th,.tick-table td{padding:12px 12px;vertical-align:middle}
.tick-table td:last-child{min-width:170px}
.tick-table th:nth-child(n+3):not(:last-child),.tick-table td:nth-child(n+3):not(:last-child){text-align:center}
.tick-table td:first-child{width:auto;white-space:nowrap}
.mk{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;vertical-align:middle}
.mk .icon{width:14px;height:14px;stroke-width:2.6}
.mk.yes{background:var(--green);color:var(--on-green)}
.mk.no{background:transparent;color:var(--muted);border:1.5px solid color-mix(in srgb,var(--muted) 45%,transparent)}
.mk.no .icon{width:11px;height:11px}
.mk.part{border:2px solid var(--green);background:linear-gradient(90deg,var(--green) 50%,transparent 50%);width:20px;height:20px}
.rating{font-size:13.5px}
.rating.r-exc{font-weight:700;color:var(--green-strong)}
.tick-table tr.top-row td{background:color-mix(in srgb,var(--mint) 70%,transparent);color:var(--ink);border-top:2px solid var(--green)}
.tick-table tr.top-row td:first-child{box-shadow:inset 4px 0 0 var(--green)}
.table-legend{display:flex;flex-wrap:wrap;gap:10px 22px;margin:-14px 0 28px;font-size:13px;color:var(--muted)}
.legend-item{display:inline-flex;align-items:center;gap:8px}
.legend-item .mk{width:20px;height:20px}.legend-item .mk.part{width:17px;height:17px}
.pcard-top{border:2px solid var(--green)}
.pcard-top .pcard-head{background:var(--mint)}
.pcard-top .pcard-pill{background:var(--green);color:var(--on-green)}