/* PICKR — publication layer. Sits on top of site.css and reuses its tokens.
   The agency site sold a service; this one has to read like something you'd trust
   to rank other people's companies. So: editorial measure, visible sourcing,
   restraint over decoration. */

:root{
  --pub-max: 1180px;
  --measure: 68ch;
  --col: 660px;   /* ONE shared column width in px — `ch` cannot be shared across
                     elements because it scales with each element's own font-size,
                     so a 68px headline at 68ch is ~4x wider than body text at 68ch. */
  --rule: rgba(11,11,15,.12);
  --paper: #FBFBF9;
  --flag: #006CFF;
}

/* ---------- masthead ---------------------------------------------------- */
.mast{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--rule)}
.mast__in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:62px}
.mast .mark{font:800 23px/1 var(--display);letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.mast .mark span{color:var(--flag)}
.mast__nav{display:flex;gap:26px}
.mast__nav a{font:600 15px/1 var(--body);color:var(--ink-2);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.mast__nav a:hover{color:var(--ink)}
.mast__nav a[aria-current]{color:var(--ink);border-bottom-color:var(--flag)}
@media (max-width:620px){ .mast__nav{gap:16px} .mast__nav a{font-size:14px} }

/* ---------- long-form document ------------------------------------------ */
.doc{padding:0 0 110px}
.doc__head{padding:72px 0 34px}
.doc__head>*{margin-left:auto;margin-right:auto}
.doc__head h1{font:800 clamp(38px,6.2vw,68px)/1.04 var(--display);letter-spacing:-.028em;margin:12px auto 0;max-width:var(--col)}
.doc .kicker{font:700 12.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--flag);margin:0 auto;max-width:var(--col)}
.doc .lede{font:400 clamp(18.5px,2.1vw,22px)/1.52 var(--body);color:var(--ink-2);max-width:var(--col);margin:22px auto 0}
.doc__meta{margin:26px auto 0;font:500 14px/1 var(--body);color:var(--muted);padding-top:18px;border-top:1px solid var(--rule);max-width:var(--col)}

.doc__body{padding-top:8px}
.doc__body>*{margin-left:auto;margin-right:auto}
.doc__body h2{font:800 clamp(24px,3vw,32px)/1.2 var(--display);letter-spacing:-.02em;margin:56px auto 14px;max-width:var(--col)}
.doc__body h3{font:700 19px/1.3 var(--display);margin:0 0 7px}
.doc__body p{font:400 17.5px/1.68 var(--body);color:var(--ink-2);margin:0 auto 17px;max-width:var(--col)}
.doc__body a{color:var(--blue-ink);text-underline-offset:3px}
.doc__body strong{color:var(--ink);font-weight:650}
.doc__body em{font-style:italic}

/* numbered criteria — the spine of the methodology page */
.crit{list-style:none;counter-reset:c;margin:30px auto 0;padding:0;display:grid;gap:2px;max-width:var(--col)}
.crit li{counter-increment:c;position:relative;padding:24px 0 24px 62px;border-top:1px solid var(--rule)}
.crit li:last-child{border-bottom:1px solid var(--rule)}
.crit li::before{content:counter(c,decimal-leading-zero);position:absolute;left:0;top:25px;font:700 13px/1 var(--body);letter-spacing:.06em;color:var(--flag)}
.crit p{margin:0}

.steps{counter-reset:s;list-style:none;margin:26px auto 0;padding:0;display:grid;gap:14px;max-width:var(--col)}
.steps li{counter-increment:s;position:relative;padding-left:42px;font:400 17.5px/1.62 var(--body);color:var(--ink-2)}
.steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:50%;background:var(--blue-soft);color:var(--blue-ink);font:700 13px/26px var(--body);text-align:center}

.plain{list-style:none;margin:24px auto 0;padding:0;display:grid;gap:15px;max-width:var(--col)}
.plain li{position:relative;padding-left:22px;font:400 17.5px/1.62 var(--body);color:var(--ink-2)}
.plain li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:7px;border-radius:50%;background:var(--flag)}

/* ---------- footer ------------------------------------------------------ */
.foot{border-top:1px solid var(--rule);padding:46px 0;background:var(--paper)}
.foot__in{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px}
.foot .mark{font:800 20px/1 var(--display);color:var(--ink);text-decoration:none}
.foot .mark span{color:var(--flag)}
.foot nav{display:flex;flex-wrap:wrap;gap:18px}
.foot nav a{font:500 14.5px/1 var(--body);color:var(--ink-2);text-decoration:none}
.foot nav a:hover{color:var(--ink);text-decoration:underline}
.foot__legal{flex-basis:100%;margin:4px 0 0;font:400 13.5px/1.5 var(--body);color:var(--muted)}

@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} }

/* ---------- PICKR Rating components ------------------------------------- */
.score{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.score__n{font:800 30px/1 var(--display);letter-spacing:-.03em;color:var(--ink);background:var(--blue-soft);border-radius:12px;padding:10px 13px;min-width:66px;text-align:center}
.score__m{display:flex;flex-direction:column;gap:3px}
.score__t{font:700 10.5px/1 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.score__b{font:700 15px/1 var(--body);color:var(--flag)}

.bands{margin:24px auto 8px;max-width:var(--col);border-top:1px solid var(--rule)}
.bandrow{display:grid;grid-template-columns:96px 120px 1fr;gap:14px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--rule)}
.bandrow__n{font:700 14px/1.3 var(--body);color:var(--ink)}
.bandrow__l{font:700 14px/1.3 var(--body);color:var(--flag)}
.bandrow__d{font:400 15px/1.5 var(--body);color:var(--ink-2)}
@media (max-width:620px){ .bandrow{grid-template-columns:84px 1fr;gap:4px 12px} .bandrow__d{grid-column:1/-1} }

/* company block inside a ranking */
.colist{display:grid;gap:18px;margin:26px auto 0;max-width:var(--col)}
.co{border:1px solid var(--rule);border-radius:14px;padding:22px 22px 18px;background:#fff}
.co__head{display:flex;align-items:flex-start;gap:14px;margin:0 0 12px}
.co__head>div{flex:1 1 auto;min-width:0}
.co__head h3{font:800 21px/1.25 var(--display);margin:0}
.co__rank{font:800 15px/30px var(--display);width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;text-align:center;flex:0 0 auto}
.co__where{margin:3px 0 0;font:500 14px/1.3 var(--body);color:var(--muted)}
.co__verdict{font:400 16.5px/1.6 var(--body);color:var(--ink-2);margin:0 0 15px}
.co__bars{display:grid;gap:7px;margin:0 0 14px}
.bar{display:grid;grid-template-columns:150px 1fr 56px;gap:10px;align-items:center}
.bar__k{font:500 13px/1.3 var(--body);color:var(--muted)}
.bar__t{height:7px;border-radius:99px;background:var(--tint);overflow:hidden}
.bar__t i{display:block;height:100%;background:var(--flag);border-radius:99px}
.bar__v{font:700 13px/1 var(--body);color:var(--ink);text-align:right}
.bar__v small{font-weight:500;color:var(--muted)}
@media (max-width:560px){ .bar{grid-template-columns:120px 1fr 48px} }
.co__ev summary{cursor:pointer;font:600 14px/1 var(--body);color:var(--blue-ink);padding:8px 0}
.ev{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.ev li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font:400 14px/1.45 var(--body);color:var(--ink-2);padding:8px 0;border-top:1px solid var(--rule)}
.ev__k{font-weight:650;color:var(--ink)}
.ev__s{color:var(--blue-ink)}
/* A non-winner's source is printed, not linked (only the article's pick gets a
   backlink). Style it as a citation so it reads deliberate, not like a dead link. */
.ev__s--txt{color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;word-break:break-all;cursor:text}
.ev__d{color:var(--muted);font-size:12.5px}
.unver{margin:12px 0 0;padding:13px 15px;border-radius:10px;background:var(--tint)}
.unver h4{margin:0 0 6px;font:700 13px/1 var(--body);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.unver ul{margin:0;padding-left:18px}
.unver li{font:400 14.5px/1.55 var(--body);color:var(--ink-2)}

/* index cards */
.cards{display:grid;gap:14px;margin:26px auto 0;max-width:var(--col)}
.card{display:block;border:1px solid var(--rule);border-radius:14px;padding:20px 22px;text-decoration:none;background:#fff}
.card:hover{border-color:var(--flag)}
.card__k{font:700 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--flag)}
.card h3{font:800 20px/1.3 var(--display);color:var(--ink);margin:8px 0 6px}
.card p{font:400 15.5px/1.55 var(--body);color:var(--ink-2);margin:0 0 10px}
.card__d{font:500 13px/1 var(--body);color:var(--muted)}

/* site.css re-asserts a marker on li; kill it on our lists */
.plain li,.crit li,.steps li,.unver li{list-style:none}
.unver ul{list-style:disc}
.unver li{list-style:disc}

/* comparison table for multi-company listicles */
/* A comparison table may break the text measure — it is data, not prose, and squeezing it
   into 660px forces a horizontal scroll on a screen with room to spare. */
.tablewrap{max-width:100%;width:100%;margin:26px auto 4px;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Only let it exceed the text measure once the screen can actually hold it. Setting a wide
   max-width unconditionally overflowed the viewport at 390px. */
@media (min-width:1060px){ .tablewrap{max-width:1000px} }
.cmp{border-collapse:collapse;width:100%;min-width:520px;font:400 14.5px/1.4 var(--body)}
.cmp th,.cmp td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
.cmp thead th{font:700 12px/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--ink)}
.cmp tbody th{font:650 14.5px/1.4 var(--body);color:var(--ink);white-space:nowrap}
.cmp .t__score{font:800 16px/1 var(--display);color:var(--flag);white-space:nowrap}
.cmp tbody tr:first-child{background:var(--blue-soft)}

/* FAQ — visible Q&A that doubles as FAQPage structured data (GEO: assistants lift these).
   🩸 Deliberately minimal. site.css already styles `.faq details`, `.faq summary` (including a
   CSS-drawn chevron on ::after) and `.faq details p`, and our markup is `.faq > details.faq__i`,
   so ALL of that already applies. An earlier version restyled summary::after with a "+" here,
   which did not replace the chevron — it merged with it and rendered as a smudge. Only add what
   site.css does not already provide. */
.faq{max-width:var(--col);margin:1.1rem 0 0}
.faq details:first-child{border-top:1px solid var(--line)}
.faq__i>div{padding:0 44px 4px 0}
.faq__i>div p{color:var(--muted);max-width:46em}

/* ---------- CTA panel ---------------------------------------------------
   The one prominent outbound click on an article. Only ever points at the
   article's WINNER, so the prose link pass renders it dofollow. */
.cta{max-width:var(--col);margin:34px 0 8px}
.cta__in{border:1px solid var(--rule);border-radius:16px;padding:26px 26px 22px;
  background:linear-gradient(180deg,#fff 0%,var(--paper) 100%);text-align:center}
.cta__k{margin:0 0 6px;font:700 11.5px/1 var(--body);letter-spacing:.11em;
  text-transform:uppercase;color:var(--flag)}
.cta__h{margin:0 0 8px;font:700 24px/1.22 var(--display,inherit);letter-spacing:-.02em}
.cta__s{margin:0 auto 18px;max-width:46ch;color:var(--ink-2);font-size:15.5px;line-height:1.55}
.cta__n{margin:12px 0 0;color:var(--muted);font-size:12.5px}
@media (max-width:560px){
  .cta__in{padding:22px 18px 18px;border-radius:14px}
  .cta__h{font-size:21px}
  .cta .btn{width:100%}
}
/* Secondary CTA button (app store, catalog, etc.) — sits beside the primary. */
.cta__in .btn+.btn{margin-left:10px}
.btn--alt{background:#0B0D10;border-color:#0B0D10;box-shadow:0 8px 20px -8px rgba(11,13,16,.5)}
.btn--alt:hover{background:#000;border-color:#000}
@media (max-width:560px){ .cta__in .btn+.btn{margin-left:0;margin-top:10px} }

/* Breadcrumb above an article's kicker (mirrors its BreadcrumbList markup) — added 2026-10-08 */
.doc .crumbs{font:500 13px/1.4 var(--body);opacity:.7;margin:0 auto 12px;max-width:var(--col)}
.doc .crumbs a{color:inherit;text-decoration:none}
.doc .crumbs a:hover{text-decoration:underline}

/* "More rankings" internal-link block at the foot of every article — added 2026-10-08 */
.cards--related{margin-top:1rem}
.cards--related .card h3{font-size:1.05rem}

/* Answer-first line: the article's SEO tag as its first sentence — added 2026-10-08 */
.doc .answer{font:500 19px/1.5 var(--body);margin:18px auto 0;max-width:var(--col);color:var(--ink)}
.doc .answer strong{font-weight:700}
/* Lead share card shown on the page, captioned with the same tag — added 2026-10-08 */
.doc .leadimg{margin:24px auto 0;max-width:var(--col)}
.doc .leadimg img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--rule)}
.doc .leadimg figcaption{font:500 13px/1.4 var(--body);color:#5F636D;margin-top:8px}