/* Shared article and tool pages; the established TemplePC theme stays intact. */
[hidden] { display: none !important; }
.hero-copy h2 a { display: block; font: inherit; letter-spacing: inherit; color: inherit; }
.hero-copy h2 a:hover, .article-card h3 a:hover { color: var(--accent); }
.hero-read { display: inline-block; }
.article-card h3 a { display: block; font: inherit; letter-spacing: inherit; }
.article-card h3 a:focus-visible { outline-offset: 4px; }
.breadcrumbs { padding: 27px 0 22px; color: var(--muted); font-size: 11px; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 0; margin: 0; }
.breadcrumbs li + li:before { content: '/'; color: #a1a2a4; margin-right: 9px; }
.breadcrumbs li[aria-current] { overflow-wrap: anywhere; }
.breadcrumbs a:hover { color: var(--accent); }
.reader-heading { max-width: 1030px; padding: 5px 0 30px; }
.reader-heading h1, .tool-page-heading h1, .not-found-content h1 { font: 750 clamp(32px, 4.2vw, 53px)/1.1 var(--display); letter-spacing: -1.8px; margin: 14px 0 18px; text-wrap: balance; }
.reader-lead { max-width: 820px; color: var(--muted); font-size: 17px; line-height: 1.65; margin: 0 0 22px; }
.reader-meta { display: flex; flex-wrap: wrap; gap: 9px 24px; color: var(--muted); font-size: 11px; }
.reader-meta span + span { color: var(--accent); }
.ranking-progress { max-width: 820px; margin: 20px 0 0; padding: 12px 15px; border-left: 3px solid var(--accent); background: var(--soft); color: var(--muted); font-size: 12px; line-height: 1.65; }
.reader-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 55px; align-items: start; }
.reader-content { min-width: 0; }
.reader-figure { margin: 0 0 33px; }
.reader-cover { width: 100%; height: 300px; display: block; object-fit: cover; }
.reader-cover.reader-cover-uncropped { height: auto; object-fit: contain; }
.reader-content .article-photo { margin: 30px 0 34px; }
.article-photo img { width: 100%; height: auto; display: block; }
.article-photo figcaption { margin-top: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.65; color: var(--muted); }
.article-photo figcaption a, .reader-figure figcaption a { text-decoration: underline; text-underline-offset: 3px; }
.reader-content .article-pullquote { margin: 26px 0; padding: 5px 0 5px 22px; border-left: 3px solid var(--accent); color: var(--ink); font: 650 clamp(19px, 2.2vw, 23px)/1.55 var(--display); }
.reader-content .article-pullquote p { margin: 0; }
.reader-content .article-warning, .reader-content .article-checklist { margin: 24px 0; padding: 20px 24px; border: 1px solid var(--line); background: var(--soft); }
.reader-content .article-warning p:last-child, .reader-content .article-checklist p:last-child { margin-bottom: 0; }
.reader-content .article-checklist h2 { margin-top: 0; font-size: 22px; }
.reader-content .article-checklist ul { padding-left: 20px; margin-bottom: 0; }
.reader-content .article-checklist li { margin-bottom: 9px; }
.reader-content .article-checklist li:last-child { margin-bottom: 0; }
.reader-content .article-cta { margin: 27px 0; }
.reader-content .article-cta .button { font-size: 14px; }
.reader-content .article-rights { border-top: 1px solid var(--line); padding-top: 20px; font-size: 12px; color: var(--muted); line-height: 1.7; }
html[data-monetization="none"] .ad-slot, html[data-monetization="none"] [data-promo-placement] { display: none !important; }
@media(min-width:761px) {
  .article-grid.homepage-four { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .homepage-four .text-card { padding: 28px; background: var(--soft); }
}
@media(min-width:1100px) {
  .homepage-four .article-card:not(.text-card) { display: grid; grid-template-columns: minmax(140px,32%) minmax(0,1fr); grid-template-rows: auto auto 1fr auto; gap: 0 22px; padding: 24px 0; border-top: 3px solid var(--accent); }
  .homepage-four .article-card:not(.text-card) .card-image { grid-column: 1; grid-row: 1 / 5; aspect-ratio: auto; height: 100%; min-height: 210px; }
  .homepage-four .article-card:not(.text-card) .card-image img { width: 100%; height: 100%; object-fit: cover; }
  .homepage-four .article-card:not(.text-card) .card-meta,
  .homepage-four .article-card:not(.text-card) h3,
  .homepage-four .article-card:not(.text-card) p,
  .homepage-four .article-card:not(.text-card) .card-bottom { grid-column: 2; }
  .homepage-four .article-card:not(.text-card) .card-meta { margin-top: 0; }
  .homepage-four .article-card h3 { font-size: 23px; }
}
.reader-figure figcaption { margin-top: 10px; font-size: 10px; color: var(--muted); }
.reader-content .article-body { font-size: 16px; line-height: 1.85; }
.reader-content .article-body h2 { font: 700 26px/1.25 var(--display); letter-spacing: -.65px; margin: 32px 0 13px; scroll-margin-top: 25px; }
.reader-content .article-body p { margin: 0 0 20px; }
.reader-content .article-body ol { padding-left: 24px; }
.reader-content .article-body li { padding-left: 6px; margin-bottom: 17px; }
.reader-sidebar { display: grid; gap: 28px; }
.article-toc { border-top: 2px solid var(--ink); padding-top: 17px; }
.article-toc h2 { font-size: 14px; font-weight: 700; margin: 0 0 14px; }
.article-toc ol, .article-toc ul { padding-left: 20px; margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.article-toc ul { list-style: none; padding-left: 0; }
.article-toc li { padding-left: 3px; margin-bottom: 11px; }
.article-toc a:hover { color: var(--accent); }
.ranking-sidebar { top: 24px; }
.ranking-jump { display: none; }
.reader-content .ranking-entry { padding-top: 28px; margin-top: 46px; border-top: 1px solid var(--line); }
.reader-content .ranking-entry:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.reader-content .ranking-entry h2 { display: flex; gap: 14px; align-items: baseline; font-size: 30px; margin-top: 0; margin-bottom: 23px; }
.rank-number { flex-shrink: 0; color: var(--accent); font-variant-numeric: tabular-nums; }
.reader-content .ranking-entry h3 { font: 700 21px/1.25 var(--display); letter-spacing: -.3px; margin: 34px 0 14px; scroll-margin-top: 25px; }
.reader-content .ranking-entry p { max-width: 76ch; }
.ranking-media { margin: 28px 0 34px; }
.ranking-media img { display: block; width: 100%; height: auto; background: #242321; }
.ranking-media figcaption { padding-top: 12px; border-bottom: 1px solid var(--line); padding-bottom: 15px; }
.ranking-media-caption { display: block; font-size: 13px; line-height: 1.65; color: var(--ink); }
.ranking-media-credit { display: block; margin-top: 6px; font-size: 11px; line-height: 1.65; color: var(--muted); }
.ranking-media-credit a { text-decoration: underline; text-underline-offset: 3px; }
.ranking-media-credit a:hover { color: var(--accent); }
.ranking-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 17px 0; margin: 0 0 26px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ranking-summary dt { font-size: 11px; line-height: 1.5; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 7px; }
.ranking-summary dd { margin: 0; font-size: 13px; line-height: 1.65; color: var(--muted); }
.reader-content .ranking-pullquote { margin: 0 0 22px; padding: 0 0 0 20px; border-left: 2px solid var(--accent); font: 650 21px/1.5 var(--display); }
.reader-content .ranking-pullquote p { margin: 0; }
.reader-content .ranking-verdict { padding: 18px 20px; border-left: 3px solid var(--accent); background: var(--soft); }
.reader-content .ranking-verdict .eyebrow { display: block; margin-bottom: 10px; font-size: 10px; }
.reader-content .ranking-verdict p { margin-bottom: 0; }
.ranking-mention { padding: 24px; margin-top: 24px; border: 1px solid var(--line); background: #fff; }
.reader-content .ranking-mention h3 { margin-top: 8px; }
.reader-content .ranking-mention p:last-child { margin-bottom: 0; }
.mention-status { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.excerpt-card { padding: 26px; border: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; }
.excerpt-number { font: 750 38px/1 var(--display); color: var(--accent); letter-spacing: -1px; margin-bottom: 24px; }
.excerpt-card .card-meta { margin-top: 0; }
.excerpt-read { display: block; padding-top: 18px; margin-top: auto; border-top: 1px solid var(--line); font-size: 12px; color: var(--accent); }
@media(min-width:761px) and (min-height:640px) { .ranking-sidebar { position: sticky; } }
.reader-tool-card { border: 1px solid #ded8d0; background: var(--soft); padding: 22px; }
.reader-tool-card img { display: block; width: 100%; height: 145px; object-fit: contain; margin-top: 15px; }
.reader-tool-card h2 { font: 700 23px/1.2 var(--display); letter-spacing: -.6px; margin: 12px 0; }
.reader-tool-card p { font-size: 12px; line-height: 1.7; color: var(--muted); }
.reader-tool-card .button { display: flex; gap: 8px; padding: 12px; font-size: 11px; margin-top: 18px; }
.reader-content .demo-notice { margin-top: 30px; padding: 15px 18px; font-size: 11px; line-height: 1.7; }
.related-articles { margin: 54px 0 50px; padding-top: 30px; border-top: 2px solid var(--ink); }
.related-articles .section-header { margin-bottom: 25px; }
.related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.related-grid .card-image { aspect-ratio: 2.1; }
.tool-page-heading { padding: 0 0 27px; }
.tool-page-heading h1 { margin-bottom: 14px; }
.tool-page-heading p { max-width: 800px; color: var(--muted); font-size: 15px; line-height: 1.7; margin: 0; }
.planner-tool { border: 1px solid var(--line); padding: 25px; background: #fff; }
.planner-tool .planner-controls { margin: 0 0 22px; gap: 16px; }
.planner-tool .planner-controls label { min-width: 110px; font-size: 11px; }
.planner-tool .planner-controls select { padding: 11px; font-size: 13px; }
.planner-tool .planner-controls button { font-size: 11px; padding: 12px; }
.planner-tool .planner-toolbar { margin-top: 0; }
.planner-tool .planner-canvas-wrap { padding: 12px; }
.planner-tool .planner-canvas-wrap svg { height: clamp(340px, 48vw, 580px); }
.planner-tool .planner-summary { margin-top: 20px; }
.planner-tool .planner-note { margin-bottom: 0; font-size: 11px; line-height: 1.7; color: var(--muted); }
.not-found-content { padding: 65px 0 90px; max-width: 800px; }
.not-found-content p { color: var(--muted); line-height: 1.7; font-size: 16px; }
.not-found-content > div { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.planner-tool .measurement-field { display: flex; align-items: center; border: 1px solid #cfd0d0; background: #fff; font-weight: 400; }
.measurement-field input { min-width: 0; width: 100%; padding: 11px; background: none; color: var(--ink); border: 0; font-size: 13px; }
.measurement-field > span { padding-right: 11px; font-size: 11px; color: var(--muted); }
.measurement-field:has(input[aria-invalid=true]) { border-color: var(--accent); }
.monitor-configs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.monitor-configs:has(#monitor-b-control[hidden]) { grid-template-columns: 1fr; }
.monitor-config { min-width: 0; margin: 0; padding: 12px 16px 16px; border: 1px solid var(--line); }
.monitor-config legend { padding: 0 7px; font-size: 12px; font-weight: 700; }
.monitor-fields { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; }
.monitor-fields label { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 11px; color: var(--muted); }
.monitor-fields select { min-width: 0; width: 100%; padding: 11px 7px; font-size: 12px; background: #fff; border: 1px solid #cfd0d0; color: var(--ink); }
.measurement-help { margin: 10px 0 18px; font-size: 10px; color: var(--muted); }
.measurement-error { margin: 0 0 14px; padding: 10px 12px; background: var(--soft); border-left: 3px solid var(--accent); color: var(--accent); font-size: 12px; }
.planner-tool .planner-toolbar > span { margin-left: auto; }
.planner-tool .planner-toolbar > .button { padding: 11px 14px; font-size: 11px; display: flex; gap: 10px; }
.share-layout { padding: 15px; border: 1px solid var(--line); background: var(--paper); margin-bottom: 10px; }
.share-layout label { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 600; }
.share-layout input { width: 100%; min-width: 0; border: 1px solid #cfd0d0; padding: 10px; font-size: 12px; background: #fff; color: var(--ink); }
.share-layout p { margin: 8px 0 0; font-size: 10px; color: var(--muted); }
.share-feedback { font-size: 11px; color: var(--accent); margin: 0 0 12px; }
.share-feedback:empty { display: none; }
@media(max-width:1000px) {
  .reader-grid { grid-template-columns: minmax(0, 1fr) 240px; gap: 30px; }
  .reader-tool-card { padding: 18px; }
}
@media(max-width:760px) {
  .breadcrumbs { padding: 20px 0 17px; font-size: 10px; }
  .reader-heading { padding-bottom: 24px; }
  .reader-heading h1, .tool-page-heading h1, .not-found-content h1 { font-size: clamp(30px, 7.3vw, 43px); letter-spacing: -1.1px; line-height: 1.12; }
  .reader-lead { font-size: 15px; margin-bottom: 18px; }
  .reader-grid { grid-template-columns: 1fr; gap: 30px; }
  .reader-cover { height: 220px; }
  .reader-content .article-body { font-size: 15px; line-height: 1.85; }
  .reader-content .article-body h2 { font-size: 23px; }
  .reader-sidebar { grid-template-columns: 1fr; }
  .reader-sidebar .article-toc { display: none; }
  .ranking-sidebar { display: none; }
  .ranking-jump { display: block; border: 1px solid var(--line); background: #fff; margin: 0 0 24px; }
  .ranking-jump summary { padding: 15px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); }
  .ranking-jump ul { list-style: none; padding: 0 15px 15px; margin: 0; }
  .ranking-jump li { border-top: 1px solid var(--line); }
  .ranking-jump a { display: block; padding: 10px 0; font-size: 12px; line-height: 1.5; }
  .reader-content .ranking-entry h2 { font-size: 25px; gap: 10px; }
  .reader-content .ranking-entry { margin-top: 33px; padding-top: 24px; }
  .reader-content .ranking-verdict { padding: 15px; }
  .ranking-summary { gap: 14px; }
  .ranking-summary dd { font-size: 12px; }
  .reader-content .ranking-entry h3 { font-size: 20px; }
  .ranking-mention { padding: 17px; }
  .excerpt-card { padding: 22px; }
  .reader-tool-card { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0 18px; }
  .reader-tool-card .eyebrow, .reader-tool-card h2, .reader-tool-card p, .reader-tool-card .button { grid-column: 1; }
  .reader-tool-card img { grid-column: 2; grid-row: 1 / span 4; height: 130px; margin: 0; }
  .reader-tool-card h2 { font-size: 22px; }
  .reader-tool-card p { font-size: 11px; }
  .reader-tool-card .button { grid-column: 1 / -1; }
  .related-articles { margin: 35px 0; padding-top: 25px; }
  .related-articles .section-header h2 { font-size: 27px; }
  .tool-page-heading { padding-bottom: 22px; }
  .tool-page-heading p { font-size: 13px; }
  .planner-tool { padding: 17px; }
  .planner-tool .planner-controls { gap: 13px; }
  .planner-tool .planner-controls label, .planner-tool .planner-controls .pc-placement-control { min-width: calc(50% - 7px); }
  .planner-tool .planner-controls button { flex-basis: 100%; }
  .planner-tool .planner-canvas-wrap { padding: 0; }
  .planner-tool .planner-canvas-wrap svg { height: clamp(230px, 60vw, 430px); }
  .planner-tool .planner-status { font-size: 11px; }
  .monitor-configs { grid-template-columns: 1fr; gap: 13px; }
  .monitor-fields { gap: 10px; }
  .planner-tool .planner-toolbar { display: grid; grid-template-columns: 1fr; }
  .planner-tool .planner-toolbar > span { margin: 0; }
  .planner-tool .planner-toolbar > .button { justify-content: center; }
}
@media(max-width:430px) {
  .breadcrumbs li[aria-current] { display: none; }
  .reader-meta { font-size: 10px; gap: 7px 14px; }
  .reader-cover { height: 185px; }
  .related-grid { grid-template-columns: 1fr; }
  .ranking-summary { grid-template-columns: 1fr; gap: 16px; }
  .planner-tool { padding: 13px; }
  .planner-tool .planner-controls { gap: 12px 10px; }
  .planner-tool .planner-controls label, .planner-tool .planner-controls .pc-placement-control { min-width: calc(50% - 5px); }
  .monitor-config { padding: 10px 11px 13px; }
  .monitor-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .monitor-fields label:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}

.footer-bottom { flex-wrap: wrap; align-items: center; }
.footer-contact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0; font-size: 11px; }
.footer-contact a, .contact-email { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.footer-contact a:hover, .contact-email:hover { color: var(--accent); }
.about-contact { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 20px; }
.about-contact h3 { margin: 0; font-size: 18px; font-weight: 600; }
.about-contact p { margin: 9px 0 13px; font-size: 14px; line-height: 1.7; color: var(--muted); }
.contact-email { font-size: 16px; }
@media(max-width:760px) {
  .footer-bottom { align-items: flex-start; }
}
/* Shared article layout. Ad positions stay invisible until a real ad integration exists. */
.article-card.text-card{padding-top:28px;border-top:3px solid var(--accent,#a64b36)}
.article-body img{display:block;max-width:100%;height:auto}
.article-body figure{margin:2.2em 0}
.article-body figcaption{font:13px/1.6 "Segoe UI",Arial,sans-serif;color:#6c716d;margin-top:10px}
.article-body blockquote{margin:1.5em 0;border-left:3px solid #a64b36;padding:8px 0 8px 24px}
.ad-slot[hidden]{display:none}
html[data-preview-ads] .ad-slot[hidden]{display:flex!important;align-items:center;justify-content:center;height:120px;margin:36px 0;border:1px dashed #b4a497;background:#eee9e1;color:#6c655d;font:12px "Segoe UI",Arial,sans-serif}
.local-editor-bar{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;padding:12px 20px;background:#252c29;color:#fff;font:13px "Segoe UI",Arial,sans-serif}
.local-editor-bar a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.local-editor-bar label{display:flex;align-items:center;gap:6px;font-size:12px}
@media(max-width:600px){.local-editor-bar{gap:12px;font-size:12px}.local-editor-bar>span{width:100%;text-align:center}}