/* Clear sky SEO pages: read-mode article + comparison template. Link after clearsky.css. */

/* article head */
.ahead{padding-block:clamp(20px,3vw,40px) clamp(28px,3.6vw,44px)}
.ahead .crumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:4px}
.ahead .crumb a{color:var(--cobalt);font-weight:600}
.ahead .h1{max-width:20ch}
.dek{font-size:clamp(17px,1.6vw,19px);line-height:1.55;color:var(--ink-soft);max-width:62ch;margin-top:18px;text-wrap:pretty}
.ahead .hero-ctas{margin-top:24px}
.ameta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:18px;font-size:13px;color:var(--muted)}
.ameta span{display:inline-flex;align-items:center;gap:8px}

/* body: contents rail left, reading column right */
.alayout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(24px,4vw,64px);border-top:1px solid var(--line-strong);padding-bottom:clamp(32px,4vw,56px)}
.toc{position:sticky;top:76px;align-self:start;padding-top:32px}
.toc-t{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:8px}
.toc a{display:flex;align-items:center;min-height:36px;padding:4px 0 4px 12px;border-left:2px solid var(--line);font-size:14px;line-height:1.3;color:var(--ink-soft);transition:color .15s,border-color .15s}
.toc a:hover{color:var(--ink);border-left-color:var(--cobalt)}
.abody{min-width:0}
.asec{padding-block:clamp(28px,3.4vw,40px);border-top:1px solid var(--line);scroll-margin-top:72px}
.asec:first-child{border-top:0}
.asec>h2{font-family:var(--f-d);font-weight:400;font-size:clamp(26px,2.8vw,34px);line-height:1.12;letter-spacing:-.006em;max-width:26ch;text-wrap:balance}
.asec>h2 em{font-style:italic;color:var(--cobalt)}
.asec>p,.asec .prose p{font-size:17px;line-height:1.7;color:var(--ink-soft);max-width:68ch;margin-top:14px;text-wrap:pretty}
.asec>p b,.asec>p strong{color:var(--ink);font-weight:600}
.asec p a,.asec li a:not(.link),.summ a,.note a,.term dd a{color:var(--cobalt);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(44,91,208,.35)}
.asec p a:hover,.asec li a:not(.link):hover,.note a:hover,.term dd a:hover{text-decoration-color:currentColor}

/* "In short" and pull-out boxes */
.summ{max-width:68ch;margin-top:4px;background:var(--panel);border-radius:var(--r-p);padding:18px 22px}
.summ-t{font-size:13px;font-weight:600;color:var(--cobalt)}
.summ p{font-size:16.5px;line-height:1.6;color:var(--ink);margin-top:4px}
.note{max-width:68ch;margin-top:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-p);padding:16px 20px}
.note p{font-size:15.5px;line-height:1.6;color:var(--ink-soft);margin:0}
.note p+p{margin-top:8px}
.note b{color:var(--ink);font-weight:600}
.note.ppl{border-color:rgba(20,179,161,.35)}

/* plain ruled lists inside the reading column */
.alist{list-style:none;max-width:72ch;margin-top:18px;border-top:1px solid var(--line-strong)}
.alist li{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.55;color:var(--ink-soft)}
.alist li>b{color:var(--ink);font-weight:600}
.alist li .chip{margin-left:6px;vertical-align:1px}

/* comparison table: clean on desktop, stacks on mobile */
.ctab{width:100%;border-collapse:collapse;margin-top:24px;font-size:15px;line-height:1.45}
.ctab caption{text-align:left;font-size:13px;color:var(--muted);padding-bottom:10px}
.ctab thead th{text-align:left;vertical-align:bottom;font-size:13px;font-weight:600;color:var(--muted);padding:8px 16px 10px 0;border-bottom:1px solid var(--line-strong)}
.ctab thead th.us{color:var(--cobalt)}
.ctab tbody th{text-align:left;vertical-align:top;font-weight:600;color:var(--ink);font-size:14.5px;padding:14px 16px 14px 0;border-bottom:1px solid var(--line);width:20%}
.ctab td{vertical-align:top;color:var(--ink-soft);padding:14px 16px 14px 0;border-bottom:1px solid var(--line)}
.ctab td.us{color:var(--ink)}
.ctab .k{display:none}

/* side-by-side answers (same markup as the product pages) */
table.side{width:100%;border-collapse:collapse;margin-top:8px;font-size:14.5px}
.side th.ppl{color:var(--teal-strong)}
.side .chip.agree{background:var(--teal-soft);color:var(--on-teal-soft)}

/* one product visual per page */
.avis{margin:26px 0 0;max-width:640px}
.avis .aw-b{min-width:0}
.avis figcaption{font-size:12.5px;color:var(--muted);margin-top:10px}
.avis.wide{max-width:none}
.avis .pgrid figcaption{margin-top:0}
.avis .chart{max-width:560px}
.avis .call-top{grid-template-columns:56px 1fr}

/* glossary terms */
.terms{margin-top:22px;border-top:1px solid var(--line-strong)}
.term{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:6px 32px;padding:20px 0;border-bottom:1px solid var(--line);scroll-margin-top:72px}
.term dt{font-family:var(--f-d);font-size:23px;line-height:1.3;color:var(--ink)}
.term dt small{display:block;font-family:var(--f-ui);font-size:13px;color:var(--muted);margin-top:6px;line-height:1.4}
.term dd{margin:0;font-size:16.5px;line-height:1.65;color:var(--ink-soft);max-width:64ch}
.term dd .chip{margin-left:4px;vertical-align:1px}

/* FAQ: the question stays an H3 for the page outline */
.asec .faq{margin-top:16px}
.faq summary{padding-top:4px}
.faq summary h3{font:inherit;margin:0;padding-block:12px}

/* related pages */
.rel{display:grid;grid-template-columns:200px minmax(0,1fr);gap:8px clamp(24px,4vw,64px);padding-block:24px clamp(32px,4vw,48px);border-top:1px solid var(--line)}
.rel-g+.rel-g{margin-top:6px}
.rel-t{font-size:14px;font-weight:600;color:var(--ink-soft);padding-top:11px}
.rel ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 26px}
.rel a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:600;color:var(--cobalt)}
.rel a:hover{text-decoration:underline}

@media(max-width:1000px){
  .alayout{grid-template-columns:1fr}
  .toc{display:none}
  .rel{grid-template-columns:1fr}
  .rel-t{padding-top:0}
}
@media(max-width:760px){
  .ahead .hero-ctas .btn,.ahead .hero-ctas .btn-line{flex:1 1 100%}
  .asec>p,.asec .prose p{font-size:16.5px}
  .alist li{grid-template-columns:1fr;gap:2px}
  .summ{padding:16px 18px}
  .ctab,.ctab tbody,.ctab tr,.ctab th,.ctab td{display:block;width:auto}
  .ctab thead{display:none}
  .ctab caption{display:block}
  .ctab tbody tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .ctab tbody tr:first-child{border-top:1px solid var(--line-strong)}
  .ctab tbody th{border:0;padding:0 0 6px;font-family:var(--f-d);font-weight:400;font-size:21px;width:auto}
  .ctab td{border:0;padding:4px 0;display:grid;grid-template-columns:112px minmax(0,1fr);gap:10px;font-size:15px}
  .ctab .k{display:block;font-size:12.5px;font-weight:600;color:var(--muted);padding-top:1px}
  .ctab td.us .k{color:var(--cobalt)}
  table.side,.side tbody,.side tr,.side td{display:block}
  .side thead{display:none}
  .side caption{display:block;width:auto}
  .side tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .side td{padding:3px 0;border:0}
  .side td:first-child{margin-bottom:6px}
  .side .k{display:inline-block;min-width:118px;font-size:12.5px;color:var(--muted)}
  .term{grid-template-columns:1fr;gap:6px}
  .term dt{font-size:22px}
  .faq summary h3{padding-block:10px}
}

/* ---- phone-light pages: folds inside the reading column (laptop unchanged) ---- */
.asec>details.m-fold>p{font-size:17px;line-height:1.7;color:var(--ink-soft);max-width:68ch;margin-top:14px;text-wrap:pretty}
.asec>details.m-fold>p b,.asec>details.m-fold>p strong{color:var(--ink);font-weight:600}
@media(max-width:760px){
  .m-x{display:none}
  .asec>details.m-fold>p{font-size:16.5px}
  .asec>details.m-fold{margin:14px 0 0}
  .asec>details.m-fold>summary{font-size:15px;color:var(--cobalt)}
  .asec .m-sum{font-size:16px;line-height:1.6;color:var(--ink-soft);margin-top:10px}
  .m-light .asec{padding-block:24px}
  /* compact two-column contrast (comparison pages) */
  .m-vs{margin-top:16px;border-top:1px solid var(--line-strong);font-size:14px;line-height:1.4}
  .m-vs>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;padding:9px 0;border-bottom:1px solid var(--line);color:var(--muted)}
  .m-vs>div>span+span{color:var(--ink)}
  .m-vs .m-vs-h{font-size:13px;font-weight:600;color:var(--muted)}
  .m-vs .m-vs-h span+span{color:var(--cobalt)}
  /* tighter comparison table and lists (pages that opt in with .m-light) */
  .m-light .ctab thead{display:block}
  .m-light .ctab thead tr,.m-light .ctab tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 14px}
  .m-light .ctab thead th{border:0;padding:0 0 6px}
  .m-light .ctab thead th:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);padding:0}
  .m-light .ctab tbody tr{padding:10px 0}
  .m-light .ctab tbody th{grid-column:1/-1;font-size:18px;padding-bottom:4px}
  .m-light .ctab td{display:block;font-size:14px;line-height:1.4;padding:0}
  .m-light .ctab td .k{display:none}
  .m-light .alist li{padding:10px 0;font-size:15px;line-height:1.5}
  .m-short .alist li{grid-template-columns:1fr}
}
@media(max-width:760px){
  /* .m-light tables with more than two options: two-up grid, each value keeps its label */
  .m-light .ctab:has(thead th:nth-child(4)) thead{display:none}
  .m-light .ctab:has(thead th:nth-child(4)) tbody tr{gap:6px 14px}
  .m-light .ctab:has(thead th:nth-child(4)) td .k{display:block;font-size:12.5px;line-height:1.3;margin-bottom:2px}
  /* glossary: term over its first sentence */
  .m-light .term{padding:14px 0;gap:4px}
  .m-light .term dd{font-size:16px;line-height:1.55}
  /* folds that sit after a short lead paragraph */
  .asec>details.m-fold+.note{margin-top:16px}
}