/* Self-hosted. The site's own Content Security Policy allows styles and fonts
   from 'self' only, so the Google stylesheet it used to load was fetched and then
   refused, and every page rendered in the fallback stack. Both families ship as one
   variable file, declared here over the weight range the design uses. */
@font-face{font-family:Outfit;font-style:normal;font-weight:300 600;font-display:swap;src:url(/fonts/pb/outfit.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/pb/jetbrains-mono.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
--ink:#08235C;--text:#1B1F2E;--muted:#5A6E86;--muted-2:#61748C;
/* muted, muted-2 and blue were measured against white and the two soft backgrounds and all
   three failed 4.5:1 for body text: 3.30, 1.80 and 3.83. They are the same hues, darkened until
   they pass, so meta lines, rank numbers and links can be read. */
--indigo:#4300FF;--violet:#7648F7;--blue:#1A66D6;--blue-2:#41AFFF;--sky:#0181DD;
--green:#06BC7B;--green-dk:#006D46;--gold:#EDC74B;--red:#DC2A2F;
--line:#DADADA;--line-soft:rgba(8,35,92,.1);--bg-soft:#F5FBFE;--bg-2:#F0F4FA;
--grad-band:linear-gradient(90deg,#7648F7 0%,#4300FF 45%,#1F6DFF 100%);
--grad-hero:linear-gradient(100deg,#5A18F0 0%,#4300FF 42%,#2B62FF 100%);
--grad-green:linear-gradient(170deg,#5EF696,#06BC7B 40%);
--grad-green-h:linear-gradient(170deg,#37D17D,#05A867 40%);
--grad-purple:linear-gradient(90deg,#4300FF,#7648F7);
--shadow:0 0 10px rgba(30,22,50,.1);--shadow-h:0 0 10px rgba(30,22,50,.2);--shadow-pop:0 4px 40px rgba(0,0,0,.1);
--sans:Outfit,system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;
--wrap:1200px;--t:.2s ease-out;
--star-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23edc74b'%3E%3Cpath d='M10,1.49,12.11,8H19l-5.53,4,2.11,6.5-5.53-4-5.53,4L6.58,12,1.05,8H7.89Z'/%3E%3C/svg%3E");
--star-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23d9dee7'%3E%3Cpath d='M10,1.49,12.11,8H19l-5.53,4,2.11,6.5-5.53-4-5.53,4L6.58,12,1.05,8H7.89Z'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{position:relative;margin:0;font-family:var(--sans);font-size:16px;line-height:1.5;font-weight:300;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{color:var(--ink);margin:0;line-height:1.15;font-weight:600;text-wrap:balance}
a{color:var(--blue);text-decoration:none;transition:color var(--t),background-color var(--t),border-color var(--t),box-shadow var(--t)}
a:hover,a:focus-visible{color:var(--blue-2)}
:focus-visible{outline:0}
p{margin:0 0 16px}
img{max-width:100%;display:block}
b,strong{font-weight:600}
figure{margin:0}
/* The hidden attribute must win over any component display rule. Without this,
   `.cookiebar{display:flex}` beats the UA `[hidden]` rule, so a dismissed cookie
   bar stays laid out at opacity:0 and keeps swallowing taps at the bottom of the
   screen, which is what killed the mobile back-to-top button. */
[hidden]{display:none!important}

/* Any text box has to say when it has focus. The contact form is styled inline and its textarea
   had no focus treatment at all, so a keyboard user could not see where they were. This is the
   floor; a form with its own look still overrides it. */
input:not([type=checkbox]):not([type=radio]):focus,textarea:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,102,214,.25);outline:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ---------- header ---------- */
.hd{background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 0 20px rgba(0,0,0,.08)}
.hd .top{height:56px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:600;font-size:22px;letter-spacing:.01em}
.brand:hover,.brand:focus-visible{color:var(--ink)}
.brand svg{width:30px;height:30px;color:var(--indigo)}
.hd .util{display:flex;gap:26px;align-items:center;font-size:12.5px;font-weight:500;letter-spacing:1px;text-transform:uppercase}
.hd .util a{color:var(--ink)}
.hd .util a:hover,.hd .util a:focus-visible{color:var(--indigo)}
.hd .navrow{border-top:1px solid var(--line-soft);height:50px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav{display:flex;gap:32px}
.nav a{font-size:12.5px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.nav a svg{width:8px;height:8px}
.nav a:hover,.nav a:focus-visible,.nav a[aria-current]{color:var(--indigo)}
.search{position:relative;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:4px;height:36px;padding:0 12px;width:264px;color:var(--muted);transition:border-color var(--t),box-shadow var(--t)}
.search svg{width:15px;height:15px;flex:none}
.search input{border:0;outline:0;font:inherit;font-weight:400;font-size:14px;width:100%;color:var(--ink);background:transparent;min-width:0}
.search input::placeholder{color:var(--muted)}
.search:hover,.search:focus-within{border-color:var(--blue);box-shadow:0 0 4px rgba(113,160,250,.5)}

/* ---------- buttons (slanted, DesignRush signature) ---------- */
.btn{position:relative;z-index:0;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:38px;padding:0 24px;font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:#fff;white-space:nowrap;cursor:pointer;border:0;background:transparent;transition:color var(--t)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:skew(-35deg);border-radius:.3em .5em;background:var(--grad-green);transition:background var(--t),border-color var(--t),opacity var(--t),box-shadow var(--t)}
.btn:hover,.btn:focus-visible{color:#fff}
.btn:hover::before,.btn:focus-visible::before{background:var(--grad-green-h)}
.btn .ar{width:6px;height:11px;transition:transform var(--t)}
.btn:hover .ar,.btn:focus-visible .ar{transform:translateX(2px)}
.btn.purple::before{background:var(--grad-purple)}
.btn.purple:hover::before,.btn.purple:focus-visible::before{background:linear-gradient(90deg,#3A00D6,#6A3AE8)}
.btn.outline{color:var(--ink)}
.btn.outline::before{background:#fff;border:1.5px solid var(--indigo)}
.btn.outline:hover,.btn.outline:focus-visible{color:var(--indigo)}
.btn.outline:hover::before,.btn.outline:focus-visible::before{background:#F0E8FF}
.btn.ghost{color:#fff}
.btn.ghost::before{background:transparent;border:1.5px solid #fff}
.btn.ghost:hover::before,.btn.ghost:focus-visible::before{background:rgba(255,255,255,.14)}
.btn.flat::before{transform:none;border-radius:5px}
.btn.flat.outline{color:var(--blue)}
.btn.flat.outline::before{border:1px solid #9CC0F5;background:#fff}
.btn.flat.outline:hover,.btn.flat.outline:focus-visible{color:var(--blue-2)}
.btn.flat.outline:hover::before,.btn.flat.outline:focus-visible::before{background:#F3F8FF;border-color:var(--blue)}
.btn.sm{height:32px;padding:0 16px;font-size:11.5px}
.btn.lg{height:44px;padding:0 30px;font-size:13.5px}

/* ---------- hero (white, home) ---------- */
.hero-w{padding:44px 0 26px;text-align:center}
.kick{font-size:17px;font-weight:300;letter-spacing:1px;text-transform:uppercase;color:var(--ink)}
.kick.sm{font-size:12px;font-weight:500}
.hero-w h1{font-size:clamp(34px,4vw,48px);margin:10px auto 18px;max-width:24ch}
.checks{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.checks span{display:inline-flex;align-items:center;gap:8px;background:var(--bg-soft);padding:5px 14px;font-size:14px;font-weight:400;color:var(--ink);border-radius:3px}
.checks svg{width:12px;height:12px;color:var(--indigo)}

/* ---------- section heads ---------- */
.sec{padding:60px 0}
.sec.tight{padding:36px 0}
.sec.soft{background:var(--bg-soft)}
.shead{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:30px}
.shead h2{font-size:clamp(28px,3vw,34px);font-weight:400}
.shead h2 em,.h-em em{font-style:normal;color:var(--indigo);font-weight:500}
.shead p{margin:0;font-size:18px;line-height:1.6}
.shead p strong{font-weight:500}
.shead.one{grid-template-columns:1fr auto}
.center-h{text-align:center}
.center-h h2{font-size:clamp(26px,2.8vw,32px);font-weight:400}

/* ---------- trending / news grid ---------- */
.trow{display:flex;align-items:center;gap:26px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);height:52px;margin:30px 0 22px}
.trow .lbl{font-size:12.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--ink);display:inline-flex;gap:8px;align-items:center;white-space:nowrap}
.trow .lbl svg{width:14px;height:14px;color:var(--indigo)}
.trow .tabs{display:flex;gap:24px;margin-left:10px;overflow-x:auto}
.trow .tabs a{font-size:12.5px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--ink);height:52px;display:inline-flex;align-items:center;border-bottom:2px solid transparent;white-space:nowrap;transition:color var(--t),border-color var(--t)}
.trow .tabs a:hover,.trow .tabs a:focus-visible,.trow .tabs a.on{color:var(--indigo);border-color:var(--indigo)}
.trow .btn{margin-left:auto}
.news{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:22px}
.news .big{grid-row:span 2}
.news a{color:var(--ink);display:block}
.news .ph{aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:#0B1548}
.news .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.news a:hover .ph img,.news a:focus-visible .ph img{transform:scale(1.03)}
.news .big .ph{aspect-ratio:16/10}
.news .cat{display:block;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--indigo);margin:12px 0 4px}
.news b{display:block;font-size:15px;font-weight:400;line-height:1.35;color:var(--ink);transition:color var(--t)}
.news .big b{font-size:26px;font-weight:500;line-height:1.2}
.news a:hover b,.news a:focus-visible b{color:var(--indigo)}
.more{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--ink);margin-top:22px}
.more svg{width:6px;height:11px;transition:transform var(--t)}
.more:hover,.more:focus-visible{color:var(--indigo)}
.more:hover svg,.more:focus-visible svg{transform:translateX(3px)}

/* ---------- gradient stats band ---------- */
.band{background:var(--grad-band);color:#fff;border-radius:6px;padding:26px 36px;display:flex;align-items:center;gap:40px;position:relative;overflow:hidden}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.08) 41%,rgba(255,255,255,.08) 55%,transparent 56%);pointer-events:none}
.band .logo svg{width:34px;height:34px;color:#fff}
.band .st{display:flex;flex-direction:column;position:relative;z-index:1}
.band .st b{font-size:28px;font-weight:600;line-height:1.1;letter-spacing:.3px}
.band .st span{font-size:14px;font-weight:400;opacity:.95;max-width:22ch;line-height:1.3}
.band .sep{width:1px;height:46px;background:rgba(255,255,255,.35);transform:skew(-25deg)}
.band .btn{margin-left:auto;position:relative;z-index:1}

/* ---------- library (home) ---------- */
.lib{display:grid;grid-template-columns:230px 1fr 380px;gap:50px;align-items:start}
.lib h3{font-size:20px;font-weight:400;margin-bottom:20px}
.lib h3 em{font-style:normal;color:var(--indigo);font-weight:500}
.cats{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.cats a{display:flex;align-items:center;gap:14px;padding:11px 14px;color:var(--ink);font-size:15px;font-weight:400;border-radius:4px;transition:all var(--t)}
.cats a svg{width:22px;height:22px;color:var(--ink);opacity:.85;flex:none}
.cats a:hover,.cats a:focus-visible,.cats a.on{background:#fff;box-shadow:var(--shadow-pop);color:var(--indigo)}
.cats a.on svg,.cats a:hover svg{color:var(--indigo);opacity:1}
.links{list-style:none;margin:0;padding:0 0 0 28px;columns:2;column-gap:40px;border-left:1px solid var(--line-soft)}
.links li{break-inside:avoid;margin-bottom:14px}
.links a{display:flex;gap:10px;align-items:baseline;color:var(--ink);font-size:15px;font-weight:400;line-height:1.3}
.links a::before{content:"\203A";color:var(--indigo);font-weight:600}
.links a:hover,.links a:focus-visible{color:var(--indigo)}
.feat{display:grid;gap:14px}
.fcard{background:#fff;border-radius:5px;box-shadow:var(--shadow);padding:16px 18px;transition:box-shadow .3s}
.fcard:hover{box-shadow:var(--shadow-h)}
.fcard .top{display:grid;grid-template-columns:70px 1fr auto;gap:14px;align-items:center}
.fcard .lg{width:70px;height:48px;border:1px solid var(--line);border-radius:5px;display:grid;place-items:center;padding:8px}
.fcard .lg img{width:30px;height:30px;object-fit:contain}
.fcard .nm{font-size:16px;font-weight:500;color:var(--ink)}
.fcard .nm small{display:block;font-size:13px;font-weight:300;color:var(--text)}
.fcard .nm a{color:inherit}
.fcard .nm a:hover,.fcard .nm a:focus-visible{color:var(--indigo)}
.rate{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--ink)}
.stars{position:relative;display:inline-block;width:80px;height:16px;background:var(--star-off) repeat-x 0 0/16px 16px;flex:none}
.stars::before{content:"";position:absolute;inset:0;width:var(--p,100%);background:var(--star-on) repeat-x 0 0/16px 16px}
.stars.lg{width:110px;height:22px;background-size:22px 22px}
.stars.lg::before{background-size:22px 22px}
.stars.sm{width:65px;height:13px;background-size:13px 13px}
.stars.sm::before{background-size:13px 13px}
.fcard .meta{display:flex;gap:18px;font-size:13px;font-weight:400;color:var(--text);margin:12px 0 0;align-items:center;flex-wrap:wrap}
.fcard .meta span{display:inline-flex;align-items:center;gap:6px}
.fcard .meta svg{width:14px;height:14px;color:var(--blue)}
.fcard .meta .btn{margin-left:auto}

/* ---------- hire section ---------- */
.hire{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.hire h2{font-size:clamp(28px,3vw,34px);font-weight:400}
.hire h2 em{font-style:normal;color:var(--indigo);font-weight:500}
.hire p{font-size:16px;max-width:46ch}
.hire p strong{font-weight:500}
.hire .big{font-size:28px;font-weight:400;color:var(--ink);margin:18px 0 20px}
.hire .big em{font-style:normal;color:var(--indigo);font-weight:500;text-decoration:underline;text-decoration-color:var(--indigo);text-underline-offset:6px;text-decoration-thickness:2px}
.snap{position:relative;border-radius:6px;overflow:hidden;min-height:300px;box-shadow:var(--shadow-pop)}
.snap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.snap::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(67,0,255,.2),rgba(8,35,92,.8))}
.snap .in{position:relative;z-index:1;color:#fff;padding:26px;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end}
.snap .in b{font-size:22px;font-weight:500}
.snap .in>span{font-size:14px;font-weight:300}
.snap .row{display:flex;gap:28px;margin-top:16px}
.snap .row div{display:flex;flex-direction:column}
.snap .row b{font-size:24px;font-weight:600;line-height:1.1}
.snap .row span{font-size:12px;opacity:.9}

/* ---------- trust rows ---------- */
.trust{text-align:center;padding:26px 0}
.trust p{font-size:15px;font-weight:400;color:var(--ink);margin-bottom:18px}
.trust .row{display:flex;justify-content:center;gap:56px;flex-wrap:wrap;align-items:center}
.trust .row span{font-size:19px;font-weight:600;letter-spacing:1px;color:var(--muted);text-transform:uppercase}
.strip{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:14px}
.strip>div{display:flex;gap:12px;align-items:flex-start;font-size:14px;font-weight:400;color:var(--ink)}
.strip>div>div{display:block}
.strip svg{width:20px;height:20px;color:var(--green);flex:none}
.strip small{display:block;font-weight:300;color:var(--text);font-size:13px}

/* ---------- rankings table ---------- */
.rt{width:100%;border-collapse:collapse;font-size:15px}
.rt th{font-size:11px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--ink);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-soft)}
.rt td{padding:16px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle;font-weight:400}
.rt tr:hover td{background:var(--bg-soft)}
.rt .ico{display:inline-flex;width:40px;height:40px;border:1px solid var(--line);border-radius:5px;align-items:center;justify-content:center;margin-right:12px;vertical-align:middle;background:#fff}
.rt .ico img{width:22px;height:22px}
.rt .nm{font-weight:500;color:var(--ink)}
.rt .nm a{color:inherit}
.rt .nm a:hover,.rt .nm a:focus-visible{color:var(--indigo)}
.rt small{display:block;font-size:12px;color:var(--muted);font-weight:400}
.rt .sc{text-align:right}
.score{display:inline-block;background:#F0E8FF;color:var(--indigo);font-weight:600;font-size:15px;padding:6px 14px;border-radius:5px;min-width:56px;text-align:center}
.center{display:flex;justify-content:center;gap:18px;margin-top:28px;flex-wrap:wrap}

/* ---------- quote / newsletter band ---------- */
.qband{background:var(--grad-band);border-radius:6px;padding:22px 30px;display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;color:#fff}
.qband .ic{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center}
.qband .ic svg{width:22px;height:22px}
.qband b{display:block;font-size:20px;font-weight:500}
.qband span{font-size:14px;font-weight:300}
.qband span strong{font-weight:600}
.qband form{display:flex;gap:12px;align-items:center;margin:0}
.qband input{height:40px;border:0;border-radius:20px;padding:0 18px;font:inherit;font-weight:400;font-size:14px;width:260px;color:var(--ink);outline:0}
.qband input:focus{box-shadow:0 0 0 3px rgba(255,255,255,.35)}

/* ---------- footer ---------- */
.ft{margin-top:60px;border-top:1px solid var(--line-soft);padding:50px 0 30px;color:var(--ink)}
.ft .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid var(--line-soft)}
.ft p{font-size:14px;line-height:1.55;max-width:34ch;margin:14px 0 0;font-weight:300}
.ft h2{font-size:20px;font-weight:500;color:var(--indigo);margin:0 0 16px}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ft li a{color:var(--ink);font-size:15px;font-weight:400}
.ft li a:hover,.ft li a:focus-visible{color:var(--indigo)}
.ft .bottom{display:flex;justify-content:space-between;align-items:center;padding-top:22px;font-size:13px;font-weight:400;flex-wrap:wrap;gap:14px}
.ft .bottom .pages{display:flex;gap:22px;flex-wrap:wrap}
.ft .bottom .pages a{color:var(--ink)}
.ft .bottom .pages a:hover,.ft .bottom .pages a:focus-visible{color:var(--indigo)}
.ft .social{display:flex;gap:12px}
.ft .social a{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center}
.ft .social svg{width:14px;height:14px}
.ft .social a:hover,.ft .social a:focus-visible{background:var(--indigo);color:#fff}

/* ---------- listing hero (city) ---------- */
.lhero{background:var(--grad-hero);color:#fff;padding:22px 0 30px;position:relative;overflow:hidden}
.lhero::before{content:"";position:absolute;right:-10%;top:-40%;width:55%;height:200%;background:linear-gradient(115deg,transparent 45%,rgba(255,255,255,.07) 46%,rgba(255,255,255,.07) 62%,transparent 63%);pointer-events:none}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;row-gap:4px;align-items:center;font-size:11px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:16px}
/* On a phone the last crumb is the longest thing on the line. Wrapping puts it on its own
   row, and min-width:0 lets it end in an ellipsis instead of being cut mid-word. */
.crumbs>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumbs a{color:#fff}
.crumbs a:hover,.crumbs a:focus-visible{color:#fff;text-decoration:underline}
.crumbs svg{width:5px;height:9px;opacity:.7}
.lhero .hg{display:grid;grid-template-columns:1fr 440px;gap:40px;align-items:start;position:relative}
.lhero h1{color:#fff;font-size:36px;font-weight:600;margin-bottom:12px}
.lhero .hg.mid{align-items:center}
.lhero .hg.w400{grid-template-columns:1fr 400px}
.lhero h1.big{font-size:40px;max-width:16ch}
.lhero .rv{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:500}
.lhero .rv i{width:16px;height:16px;border-radius:50%;border:1px solid #fff;font-size:11px;display:inline-grid;place-items:center;font-style:normal;font-weight:400}
/* Trust points in the service and get-quotes heroes: the check icon has a viewBox but
   no intrinsic size, so as a flex child it stretched to the span's height and ballooned
   on the ones whose label wrapped to two lines. Pin the icon and align it to its label. */
.lhero .rv span{display:inline-flex;align-items:center;gap:7px}
.lhero .rv span svg{width:16px;height:16px;flex:none}
.lhero .desc{font-size:15px;line-height:1.55;font-weight:300;padding-top:8px;margin:0}
.ltabs{border-bottom:1px solid var(--line-soft);background:#fff}
.ltabs ul{list-style:none;margin:0;padding:0;display:flex;gap:30px}
.ltabs a{display:inline-flex;height:46px;align-items:center;font-size:15px;font-weight:400;color:var(--ink);border-bottom:3px solid transparent;transition:color var(--t),border-color var(--t)}
.ltabs a.on,.ltabs a:hover,.ltabs a:focus-visible{color:var(--indigo);border-color:var(--indigo)}
.lhead{display:flex;justify-content:space-between;align-items:flex-end;margin:28px 0 20px;gap:20px}
.lhead h2{font-size:22px;font-weight:500}
.lhead .cnt{font-size:13px;text-align:right;font-weight:400;color:var(--ink)}
.lhead .cnt b{display:block;font-weight:500}
.filters{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr 1fr;gap:12px}
.fsel{height:40px;border:1px solid var(--line);border-radius:4px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:14px;font-weight:400;color:var(--ink);background:#fff;cursor:pointer;transition:border-color var(--t),box-shadow var(--t)}
.fsel:hover,.fsel:focus-visible{border-color:var(--blue);box-shadow:0 0 4px rgba(113,160,250,.3)}
.fsel svg{width:12px;height:12px;color:var(--indigo)}
.fsel.sort{background:var(--grad-purple);color:#fff;border:0}
.fsel.sort svg{color:#fff}
.disc{font-size:11px;color:var(--text);margin:10px 0 26px;font-weight:300}

/* ---------- provider cards (listing) ---------- */
.pl{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.pc{background:#fff;border-radius:5px;box-shadow:var(--shadow);display:grid;grid-template-columns:1fr 200px;transition:box-shadow .3s}
.pc:hover{box-shadow:var(--shadow-h)}
.pc .main{padding:20px 22px;display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:start}
.pc .lg{width:120px;height:74px;border:1px solid var(--line);border-radius:5px;display:grid;place-items:center;overflow:hidden;background:#fff}
.pc .lg svg{width:100%;height:100%;display:block}
.pc .hrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pc .nm{font-size:20px;font-weight:500;color:var(--blue)}
.pc .nm:hover,.pc .nm:focus-visible{color:var(--blue-2)}
.badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:11px;font-size:12px;font-weight:500;white-space:nowrap}
.badge svg{width:12px;height:12px}
.badge.ok{color:#047857;background:#DFF7EC}
.badge.ai{color:#6838E8;background:#F6F2FF}
.badge.gold{color:#8C6A18;background:#FFF9E8}
.badge.info{color:var(--blue);background:#EBF3FF}
.badge.more{color:var(--sky);background:#E6EFFA}
.badge.sample{color:var(--muted);background:#F0F2F5;font-weight:400}
.pc .nav2{display:flex;gap:18px;margin:8px 0 12px;border-bottom:1px solid var(--line-soft)}
.pc .nav2 a{font-size:14px;font-weight:400;color:var(--ink);padding-bottom:6px;border-bottom:2px solid transparent;position:relative;margin-bottom:-1px}
.pc .nav2 a.on{color:var(--blue);border-color:var(--blue)}
.pc .nav2 a.on::after{content:"";position:absolute;left:50%;top:calc(100% + 2px);transform:translateX(-50%);border-style:solid;border-width:6px 6px 0;border-color:var(--blue) transparent transparent}
.pc .nav2 a:hover,.pc .nav2 a:focus-visible{color:var(--blue)}
.pc .tag{font-size:16px;font-weight:500;color:var(--ink);margin:0 0 6px}
.pc .desc{font-size:14px;line-height:1.5;margin:0 0 12px}
.pc .svc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;font-weight:400;color:var(--ink)}
.chip{display:inline-flex;align-items:center;height:26px;padding:0 12px;border:1px solid #C7C7C7;border-radius:13px;font-size:13px;font-weight:400;color:var(--ink);background:#fff;transition:border-color var(--t),color var(--t)}
.chip:hover,.chip:focus-visible{border-color:var(--blue);color:var(--blue)}
.pc .meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px;font-size:13px;font-weight:400;color:var(--ink)}
.pc .meta span{display:inline-flex;align-items:center;gap:7px}
.pc .meta svg{width:15px;height:15px;color:var(--blue)}
.pc .side{border-left:1px solid var(--line-soft);padding:20px 18px;display:flex;flex-direction:column;gap:10px}
.pc .side .btn{width:100%}
.pc .ratings{display:grid;gap:8px;margin-top:6px}
.pc .ratings div{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--ink)}
.pc .ratings svg.src{width:16px;height:16px;flex:none}
.pc .ratings small{font-weight:300;color:var(--text)}
.pc .ratings a{color:var(--ink)}

/* ---------- shared content blocks ---------- */
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;font-size:17px;font-weight:500;color:var(--ink);display:flex;justify-content:space-between;gap:20px;transition:color var(--t)}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{margin:0;font:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit;letter-spacing:inherit;text-transform:none}
.faq summary::after{content:"+";font-size:22px;font-weight:300;color:var(--indigo);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover,.faq summary:focus-visible{color:var(--indigo)}
.faq p{margin:0 0 18px;max-width:72ch;font-size:15.5px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.snapl{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:10px 0 26px}
.snapl div{border-top:1px solid var(--ink);padding-top:14px}
.snapl b{display:block;font-size:26px;font-weight:600;color:var(--ink)}
.snapl span{font-size:14px}
.snapl small{display:block;font-size:12px;color:var(--muted);margin-top:4px}

/* ---------- article / concept ---------- */
.ahero{padding:34px 0 26px;border-bottom:1px solid var(--line-soft)}
.ahero .crumbs{color:var(--ink)}
.ahero .crumbs a{color:var(--ink)}
.ahero .crumbs a:hover,.ahero .crumbs a:focus-visible{color:var(--indigo);text-decoration:none}
.ahero h1{font-size:clamp(32px,3.6vw,44px);max-width:26ch;margin:8px 0 14px}
.ahero .dek{font-size:18px;line-height:1.55;max-width:66ch;margin-bottom:18px}
.by{display:flex;gap:26px;flex-wrap:wrap;font-size:13px;font-weight:400;color:var(--ink)}
.by span{display:inline-flex;align-items:center;gap:7px}
.by svg{width:15px;height:15px;color:var(--blue)}
.by b{font-weight:500}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:50px;padding:36px 0 60px;align-items:start}
.prose{font-size:17px;line-height:1.6}
.prose p{margin:0 0 18px;max-width:72ch}
.prose h2{font-size:28px;font-weight:500;margin:44px 0 14px;scroll-margin-top:130px}
.prose h2 .k{display:block;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--indigo);margin-bottom:6px}
.prose h3{font-size:20px;font-weight:500;margin:24px 0 8px}
.prose a{text-decoration:underline;text-underline-offset:3px}
.mono{font-family:var(--mono);font-size:.86em;font-weight:500}
.short{border:1px solid var(--indigo);border-radius:5px;padding:22px 26px;margin:0 0 10px;background:#FBFAFF}
.short .lbl{font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--indigo);margin-bottom:8px}
.short p{font-size:18px;line-height:1.5;margin:0 0 12px;color:var(--ink);max-width:none}
.short ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;font-weight:400}
.short li::before{content:"\2713";color:var(--green);margin-right:6px;font-weight:600}
.cia{list-style:none;margin:8px 0 22px;padding:0}
.cia li{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:14px 0;border-top:1px solid var(--line-soft);align-items:start}
.cia li:last-child{border-bottom:1px solid var(--line-soft)}
.cia b{font-size:28px;font-weight:600;color:var(--indigo);line-height:1}
.cia strong{display:block;font-weight:500;color:var(--ink)}
.cia span{font-size:15px}
.fig{background:#fff;border:1px solid var(--line);border-radius:5px;padding:22px;margin:22px 0 8px;position:relative;overflow-x:auto;--surface:#fff;--tint:#F5FBFE;--tint-2:#E6EEFF;--hair-2:#C9D4EE;--steel:#4300FF;--steel-ink:#08235C;--ink:#08235C;--muted:#7690AD}
.fig .fn{position:absolute;top:10px;right:14px;font-size:11px;font-weight:500;letter-spacing:1px;color:var(--muted)}
.fig svg{display:block;width:100%;height:auto;font-family:var(--mono);font-size:11px}
.fig svg g.node rect{transition:fill .15s}
.fig svg g.node:hover rect{fill:#4300FF}
.fig svg g.node:hover text{fill:#fff}
.fig .pulse{fill:none;stroke:#4300FF;stroke-width:2;animation:ring 2.4s ease-out infinite}
.fig .pulse.b{animation-delay:1.2s}
@keyframes ring{0%{r:6;opacity:.9}100%{r:22;opacity:0}}
.fig .cell{animation:lit 6s ease-in-out infinite}
.fig .cell.c1{animation-delay:0s}.fig .cell.c2{animation-delay:.6s}.fig .cell.c3{animation-delay:1.2s}.fig .cell.c4{animation-delay:1.8s}.fig .cell.c5{animation-delay:2.4s}
@keyframes lit{0%,70%,100%{fill:var(--tint)}10%,30%{fill:var(--tint-2)}}
.fig .cellt{animation:litt 6s ease-in-out infinite}
.fig .cellt.c1{animation-delay:0s}.fig .cellt.c2{animation-delay:.6s}.fig .cellt.c3{animation-delay:1.2s}.fig .cellt.c4{animation-delay:1.8s}.fig .cellt.c5{animation-delay:2.4s}
@keyframes litt{0%,70%,100%{fill:var(--ink)}10%,30%{fill:var(--steel)}}
figcaption{font-size:13px;color:var(--text);margin:8px 0 22px;font-weight:300}
figcaption b{font-weight:500}
.bits{margin:22px 0 30px}
.bits .scale{display:grid;grid-template-columns:repeat(32,1fr);gap:2px;font-family:var(--mono);font-size:10px;color:var(--muted);margin-bottom:6px}
.bits .scale span{text-align:center}
.bits .grid32{display:grid;grid-template-columns:repeat(32,1fr);gap:2px;font-family:var(--mono);font-size:11px}
.bits .f{background:#fff;border:1px solid #C9D4EE;border-radius:4px;padding:10px 6px;text-align:center;font-weight:500;color:var(--ink);min-height:42px;display:grid;place-items:center;transition:background var(--t)}
.bits .f:hover{background:#F5FBFE}
.bits .f.enc{background:var(--indigo);color:#fff;border-color:transparent}
.bits .f.dark{background:var(--ink);color:#fff;border-color:transparent}
.bits .cap{font-size:13px;color:var(--text);margin-top:10px}
.steps{list-style:none;padding:0;margin:14px 0 8px;counter-reset:s}
.steps li{display:grid;grid-template-columns:52px 1fr;gap:6px 16px;padding:20px 0;border-top:1px solid var(--line-soft)}
.steps li:last-child{border-bottom:1px solid var(--line-soft)}
.steps li>*{grid-column:2}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);grid-column:1;grid-row:1/4;font-size:26px;font-weight:500;color:var(--indigo);line-height:1}
.steps b{display:block;color:var(--ink);font-size:18px;font-weight:500}
.steps p{margin:0;font-size:15.5px}.steps p+p{margin-top:10px}
.xch{font-family:var(--mono);font-size:12.5px;margin:12px 0 0;padding:12px 14px;background:var(--bg-soft);border-radius:4px;display:grid;gap:5px}
.xch span{display:grid;grid-template-columns:64px 1fr;gap:12px}
.xch span i{font-style:normal;color:var(--indigo);font-weight:600;white-space:nowrap}
.metrics{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:20px;margin:28px 0;padding:22px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line-soft)}
.metrics h3{margin:0 0 4px}
.metrics p{margin:0;font-size:14px}
.metrics b{display:block;font-size:34px;font-weight:600;color:var(--indigo);line-height:1}
.metrics span{font-size:13px}
.cfg{margin:20px 0 30px;border-radius:5px;overflow:hidden;background:var(--ink);color:#fff;position:relative}
.cfg input{position:absolute;opacity:0;pointer-events:none}
.cfg .tabs{display:flex;background:#061A45;border-bottom:1px solid rgba(255,255,255,.1)}
.cfg .tabs label{padding:12px 18px;font-size:13px;font-weight:500;letter-spacing:.5px;cursor:pointer;color:rgba(255,255,255,.65);transition:color var(--t)}
.cfg .tabs label:hover{color:#fff}.cfg #t1:focus-visible~.tabs label[for=t1],.cfg #t2:focus-visible~.tabs label[for=t2],.cfg #t3:focus-visible~.tabs label[for=t3]{color:#fff;outline:2px solid #fff;outline-offset:-4px}
.cfg pre{margin:0;padding:20px 22px;font-family:var(--mono);font-size:13px;line-height:1.6;overflow-x:auto;display:none;color:#E6EAFF;font-weight:400}
.cfg pre .k{color:#7CD8FF}.cfg pre .v{color:#B7FF6A}.cfg pre .c{color:rgba(255,255,255,.45)}
.cfg #t1:checked~.tabs label[for=t1],.cfg #t2:checked~.tabs label[for=t2],.cfg #t3:checked~.tabs label[for=t3]{color:#fff;box-shadow:inset 0 -2px 0 #41AFFF}
.cfg #t1:checked~pre.p1,.cfg #t2:checked~pre.p2,.cfg #t3:checked~pre.p3{display:block}
.tbl-wrap{overflow-x:auto;margin:18px 0 8px}
table.cmp{width:100%;border-collapse:collapse;font-size:15px}
.cmp th{font-size:11px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--ink);text-align:left;padding:10px 12px;border-bottom:2px solid var(--ink)}
.cmp td{padding:12px;border-bottom:1px solid var(--line-soft);font-weight:400;vertical-align:top}
.cmp td:first-child{font-weight:500;color:var(--ink)}
.cmp tr:hover td{background:var(--bg-soft)}
.cmp .win{color:var(--green-dk)}
.cmp .win::before{content:"\2713  ";color:var(--green)}
.cmp .no{color:var(--muted)}
.cmp .num{font-family:var(--mono);font-size:13px}
.chooser{margin:22px 0 34px;background:var(--bg-soft);border-radius:5px;padding:22px 26px;position:relative}
.chooser h3{margin:0 0 4px}
.chooser p.q{margin:0 0 14px;font-size:14px}
.chooser input{position:absolute;opacity:0;pointer-events:none}
.chooser .opts{display:flex;flex-wrap:wrap;gap:8px}
.chooser .opts label{height:34px;display:inline-flex;align-items:center;padding:0 16px;border-radius:17px;border:1px solid #C7C7C7;font-weight:400;font-size:14px;cursor:pointer;background:#fff;color:var(--ink);transition:all var(--t)}
.chooser .opts label:hover{border-color:var(--blue);color:var(--blue)}.chooser #q1:focus-visible~.opts label[for=q1],.chooser #q2:focus-visible~.opts label[for=q2],.chooser #q3:focus-visible~.opts label[for=q3],.chooser #q4:focus-visible~.opts label[for=q4]{border-color:var(--blue);color:var(--blue);box-shadow:0 0 4px rgba(113,160,250,.5)}
.chooser .ans{display:none;margin-top:16px;padding:16px 20px;background:#fff;border-radius:5px;box-shadow:var(--shadow);font-size:15px;line-height:1.5;font-weight:300}
.chooser .ans .pick{font-size:18px;font-weight:500;display:block;margin-bottom:4px;color:var(--indigo)}
.chooser #q1:checked~.opts label[for=q1],.chooser #q2:checked~.opts label[for=q2],.chooser #q3:checked~.opts label[for=q3],.chooser #q4:checked~.opts label[for=q4]{background:var(--indigo);border-color:var(--indigo);color:#fff}
.chooser #q1:checked~.ans.a1,.chooser #q2:checked~.ans.a2,.chooser #q3:checked~.ans.a3,.chooser #q4:checked~.ans.a4{display:block}
.log{margin:20px 0 30px;background:var(--ink);color:#fff;border-radius:5px;padding:20px 22px;font-family:var(--mono);font-size:13px;line-height:1.7}
.log .t{font-family:var(--sans);font-weight:500;font-size:13px;color:rgba(255,255,255,.6);margin-bottom:10px}
.log .t i{display:none}
.log .l{display:grid;grid-template-columns:150px 1fr auto;gap:16px;padding:5px 0;border-bottom:1px dashed rgba(255,255,255,.12)}
.log .l:last-child{border-bottom:0}
.log .ok{color:#7CF5C8}.log .bad{color:#FF8A9A}.log .warn{color:#FFD166}
.log .fix{font-family:var(--sans);font-size:13.5px;color:rgba(255,255,255,.7);font-weight:300}
.log .fix b{color:#fff;font-weight:500}
.log .cur{display:inline-block;width:8px;height:14px;background:#fff;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.vend{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.vend span{display:inline-flex;align-items:center;height:28px;padding:0 12px;border:1px solid #C7C7C7;border-radius:14px;font-size:13px;font-weight:400;color:var(--ink)}
.tl{list-style:none;margin:20px 0 30px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0 16px}
.tl li{padding:14px 0;border-top:1px solid var(--ink)}
.tl b{display:block;font-size:22px;font-weight:500;color:var(--indigo);margin:0 0 6px}
.tl span{display:block;font-size:13.5px;line-height:1.45}
/* ---------- related concepts ----------
   Replaces .rel, which used CSS multi-column: items flowed down the left and
   then down the right, the two columns ended at different heights, the chevron
   sat inside a display:block anchor so wrapped titles indented under it, and
   every item carried a bottom rule including the last one in each column.

   The bigger problem it had was not visual. Five items of equal weight means
   the reader picks none of them, so this promotes one and demotes the rest.
   Which one is decided by the pivot in the template, not here.

   Everything is prefixed rc-. .lead, .kick, .meta, .t, .d and .tl are all
   already taken in this file, and .tl in particular puts a border-top in
   var(--ink) on every li. */
.rc-lead{display:block;background:var(--bg-soft);border-radius:6px;padding:26px 30px;color:var(--ink);transition:background-color var(--t)}
.rc-lead:hover,.rc-lead:focus-visible{background:#EAF4FD;color:var(--ink)}
.rc-kick{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--indigo)}
.rc-lead .rc-title{display:block;font-size:26px;font-weight:600;line-height:1.16;letter-spacing:-.015em;margin:8px 0 0;color:var(--ink);transition:color var(--t)}
.rc-lead:hover .rc-title,.rc-lead:focus-visible .rc-title{color:var(--indigo)}
.rc-lead .rc-desc{display:block;margin:9px 0 0;font-size:15px;line-height:1.5;font-weight:300;max-width:60ch;color:var(--text)}
.rc-go{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:14px;font-weight:600;color:var(--indigo)}
.rc-go .rc-ar{width:6px;height:11px;transition:transform var(--t)}
.rc-lead:hover .rc-ar,.rc-lead:focus-visible .rc-ar{transform:translateX(3px)}
.rc-min{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;font-weight:500;color:var(--muted);margin-left:12px}
.rc-rule{display:flex;align-items:center;gap:14px;margin:26px 0 12px}
.rc-rule span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;white-space:nowrap}
.rc-rule::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.rc-tail{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.rc-tail li{display:flex}
.rc-tail a{width:100%;background:var(--bg-soft);border-radius:6px;padding:16px 20px;color:var(--ink);transition:background-color var(--t)}
.rc-tail a:hover,.rc-tail a:focus-visible{background:#EAF4FD;color:var(--ink)}
.rc-eyebrow{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:5px;transition:color var(--t)}
.rc-tail a:hover .rc-eyebrow,.rc-tail a:focus-visible .rc-eyebrow{color:var(--indigo)}
.rc-tail .rc-title{display:block;font-size:16px;font-weight:600;line-height:1.28;color:var(--ink);transition:color var(--t)}
.rc-tail a:hover .rc-title,.rc-tail a:focus-visible .rc-title{color:var(--indigo)}
.rc-tail .rc-desc{display:block;margin:4px 0 0;font-size:13.5px;line-height:1.45;font-weight:300;color:var(--text)}
.psrc{margin:0 0 22px;padding:12px 16px;border-left:2px solid var(--line);font-size:13.5px;line-height:1.6;color:var(--muted);max-width:78ch}
.psrc a{font-weight:500}

/* ---------- verification record ---------- */
/* Shown, not summarised. A passed check and one nobody has done yet have to be distinguishable
   before a word is read, and neither is red, because not done is not a failure. */
.crec{border:1px solid var(--line);border-radius:6px;padding:22px 24px;margin:28px 0}
.crec-head{display:flex;align-items:flex-start;gap:16px;justify-content:space-between;flex-wrap:wrap}
.crec-head h2{font-size:22px;margin:0}
.crec-head p{margin:6px 0 0;font-size:14px;color:var(--muted);max-width:52ch}
.crec-count{flex:none;border:1px solid var(--line);border-radius:20px;padding:6px 14px;font-size:13px;color:var(--muted);white-space:nowrap}
.crec-count b{font-size:16px;font-weight:600;color:var(--ink)}
.crec-count.done{border-color:var(--green);color:var(--green-dk)}
.crec-count.done b{color:var(--green-dk)}
.crec-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:2px}
.crec-list li{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line-soft)}
.crec-list li>div{min-width:0}
.crec-state{flex:none;width:22px;height:22px;margin-top:2px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line)}
.crec-list .ok .crec-state{background:var(--green);border-color:var(--green);color:#fff}
.crec-list .ok .crec-state svg{width:12px;height:12px}
.crec-list .no .crec-state{border-color:var(--red)}
.crec-list li b{display:block;font-size:15.5px;font-weight:500;color:var(--ink)}
.crec-list .todo b{color:var(--text)}
.crec-tag{margin-left:8px;font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.crec-list .ok .crec-tag{color:var(--green-dk)}
.crec-list .no .crec-tag{color:var(--red)}
.crec-what{margin:3px 0 0;font-size:13.5px;color:var(--muted)}
.crec-note{margin:7px 0 0;font-size:14px;line-height:1.55;max-width:78ch}
.crec-date{display:block;margin-top:6px;font-size:12.5px;color:var(--muted)}
.crec-foot{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line-soft);font-size:13.5px;color:var(--muted);max-width:78ch}
.crec-foot a{margin-left:6px;font-weight:500}
/* The one-line version, on a listing card. */
.crec-sum{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.crec-sum svg{width:14px;height:14px}
.crec-sum.done{color:var(--green-dk)}
/* A count badge is a link to the record rather than a claim of its own. */
.badge.part{border-color:var(--line);color:var(--text);background:#fff}
.badge.part:hover,.badge.part:focus-visible{border-color:var(--indigo);color:var(--indigo)}
@media(max-width:700px){
  .crec{padding:18px 16px}
  .crec-head h2{font-size:19px}
}
/* ---------- author box ---------- */
/* One component, on every page with an editorial voice. The claim it carries is that a named
   person is accountable for what the page says, so everything in it is evidence for that: what
   has been published, the areas covered, the date this page was reviewed, and where to write
   when it is wrong. */
.abox{margin-top:44px;border:1px solid var(--line);border-radius:6px;padding:22px 24px;background:linear-gradient(180deg,var(--bg-soft),#fff 130px)}
.abox-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
/* No photograph on file, and a monogram is the honest way to fill the space. */
.abox-mono{flex:none;width:52px;height:52px;border-radius:6px;display:grid;place-items:center;background:var(--grad-purple);color:#fff;font-size:19px;font-weight:600;letter-spacing:.5px}
.abox-id{flex:1 1 240px;min-width:0}
.abox-kick{display:block;font-size:11.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.abox-id b{display:block;font-size:20px;font-weight:600;line-height:1.2;margin-top:3px}
.abox-id b a{color:var(--ink)}
.abox-id b a:hover,.abox-id b a:focus-visible{color:var(--indigo)}
.abox-role{display:block;font-size:13.5px;color:var(--indigo);font-weight:500;margin-top:2px}
.abox-cta{flex:none;align-self:center}
.abox-bio{margin:16px 0 0;font-size:15px;line-height:1.62;max-width:72ch}
.abox-covers{display:flex;align-items:baseline;gap:12px;margin-top:16px;flex-wrap:wrap}
.abox-lbl{flex:none;font-size:11.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.abox-facts{display:flex;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line-soft);flex-wrap:wrap;gap:14px 0}
.abox-facts>div{flex:1 1 132px;padding-right:18px}
.abox-facts dt{font-size:12.5px;color:var(--muted)}
.abox-facts dd{margin:2px 0 0;font-size:20px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.2}
/* A date is not a count and should not be set like one. */
.abox-facts .d dd{font-size:15px;font-weight:500}
.abox-rev{margin:14px 0 0;font-size:13.5px;color:var(--text)}
.abox-rev a{font-weight:500}
.abox-foot{display:flex;gap:8px 22px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.abox-foot a{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;color:var(--ink)}
.abox-foot svg{width:14px;height:14px;color:var(--blue);flex:none}
.abox-foot a:hover,.abox-foot a:focus-visible{color:var(--indigo)}
.abox.compact{padding:18px 20px;margin-top:32px}
.abox.compact .abox-bio{font-size:14.5px}
@media(max-width:700px){
  .abox{padding:18px 16px}
  .abox-id b{font-size:18px}
  .abox-cta{width:100%;justify-content:center;margin-top:2px}
  .abox-facts>div{flex:1 1 44%;padding-right:10px}
  .abox-facts dd{font-size:18px}
}
.side{position:sticky;top:124px;display:grid;gap:18px}
.card{background:#fff;border-radius:5px;box-shadow:var(--shadow);padding:18px 20px}
.card h4,
.card .hsub{font-size:16px;font-weight:500;margin-bottom:12px}
.toc{list-style:none;margin:0;padding:0}
.toc li a{display:block;padding:6px 0 6px 12px;font-size:14px;font-weight:400;color:var(--ink);border-left:2px solid var(--line-soft);transition:all var(--t)}
.toc li.on a,.toc li a:hover,.toc li a:focus-visible{color:var(--indigo);border-color:var(--indigo)}
/* Mobile "On this page": on phones the sidebar (with its sticky ToC) stacks below the
   whole article, so it is useless for navigation. This collapsible sits at the top of
   the article instead, shown only under 1000px where .side goes static. */
.toc-m{display:none;margin:0 0 22px;border:1px solid var(--line-soft);border-radius:6px;background:var(--bg-2);overflow:hidden}
.toc-m>summary{list-style:none;cursor:pointer;padding:12px 16px;font-weight:500;font-size:15px;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:12px}
.toc-m>summary::-webkit-details-marker{display:none}
.toc-m>summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-2px) rotate(45deg);transition:transform var(--t)}
.toc-m[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.toc-m .toc{padding:2px 16px 14px}
.toc-m .toc li a{border-left:0;padding-left:0}
.card dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:8px 12px;font-size:14px}
.card dt{color:var(--text)}
.card dd{margin:0;font-weight:500;color:var(--ink);text-align:right;font-family:var(--mono);font-size:13px}
.promo{background:var(--grad-band);color:#fff;border-radius:5px;padding:24px 20px;text-align:center}
.promo b{display:block;font-size:20px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.promo p{font-size:14px;margin:8px 0 16px;font-weight:300}
.share{display:flex;gap:8px}
.share a{flex:1;text-align:center;border:1px solid var(--line);border-radius:4px;padding:7px 0;font-size:13px;font-weight:400;color:var(--ink)}
.share a:hover,.share a:focus-visible{border-color:var(--indigo);color:var(--indigo)}

/* ---------- responsive ---------- */
@media(max-width:1000px){
.lib{grid-template-columns:1fr}.links{columns:1;border-left:0;padding-left:0}
.news{grid-template-columns:1fr 1fr}.news .big{grid-column:1/-1;grid-row:auto}
.hire,.two,.shead{grid-template-columns:1fr}
/* The tab row inside a provider card is five short links in a row. It fits from 360 up and
   hangs off the edge at 320, so below that it scrolls sideways on its own instead of taking the
   page with it. */
.pc .nav2{overflow-x:auto;scrollbar-width:none}.pc .nav2::-webkit-scrollbar{display:none}.pc .nav2 a{flex:none;white-space:nowrap}
/* .shead.one beats the line above on specificity, so its heading and its button stayed side
   by side on a phone and the button hung 3px off the right edge at 360. */
.shead.one{grid-template-columns:1fr}.shead.one>.btn{justify-self:start}
.lhero .hg,.lhero .hg.w400{grid-template-columns:1fr}
.filters{grid-template-columns:1fr 1fr}
.pc{grid-template-columns:1fr}.pc .side{border-left:0;border-top:1px solid var(--line-soft)}
.layout{grid-template-columns:1fr}.side{position:static}.toc-m{display:block}
.strip{grid-template-columns:1fr 1fr}
.band{flex-wrap:wrap;gap:24px}.band .sep{display:none}
.ft .cols{grid-template-columns:1fr 1fr}
.tl,.metrics{grid-template-columns:1fr 1fr}
.qband{grid-template-columns:1fr}.qband input{width:100%}
.hd .util{display:none}.nav{gap:18px;overflow-x:auto}
.rc-tail{grid-template-columns:1fr}
}
@media(max-width:640px){
.news,.filters,.strip,.tl,.metrics,.ft .cols,.snapl{grid-template-columns:1fr}
.pc .main{grid-template-columns:1fr}
.search{display:none}
.trow .btn{display:none}
.qband form{flex-direction:column;align-items:stretch}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ===== v5 page components (home additions, software, hub, blog, article, provider, service, about) ===== */

/* home additions */
.logos{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:6px 0 30px}
.logos span{width:56px;height:56px;border:1px solid var(--line);border-radius:5px;display:grid;place-items:center;background:#fff;transition:border-color var(--t),box-shadow .3s}
.logos span:hover{border-color:var(--blue);box-shadow:var(--shadow)}
.logos img{width:28px;height:28px;object-fit:contain}
.vsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}
.vsgrid a{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line-soft);color:var(--ink);font-weight:400;font-size:15px}
.vsgrid i{font-style:normal;font-size:10px;font-weight:600;letter-spacing:1px;color:#fff;background:var(--indigo);padding:2px 6px;border-radius:3px}
.vsgrid a:hover,.vsgrid a:focus-visible{color:var(--indigo)}
/* City index. It was four columns with one state per column, which is right for a directory that
   covers many states and left three quarters of the section empty while it covers one. Each
   state is now a full-width block and its cities flow in columns, alphabetical down each one,
   so a single state fills the width and more states stack under it. */
.states{display:grid;grid-template-columns:1fr;gap:36px}
.states h3{font-size:17px;font-weight:500;border-bottom:1px solid var(--ink);padding-bottom:10px;margin-bottom:0;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.states h3 small{font-size:12.5px;color:var(--muted);font-weight:400}
.states ul{list-style:none;margin:0;padding:0;columns:4;column-gap:44px}
.states li{break-inside:avoid;border-bottom:1px solid var(--line-soft)}
.states li a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;font-size:15.5px;font-weight:400;color:var(--ink);transition:color var(--t)}
.states li a b{flex:none;font-family:var(--mono);font-weight:500;color:var(--muted);font-size:12.5px;transition:color var(--t)}
.states li a:hover,.states li a:focus-visible,.states li a:hover b,.states li a:focus-visible b{color:var(--indigo)}
@media(max-width:1000px){.states ul{columns:3;column-gap:32px}}
@media(max-width:720px){.states ul{columns:2;column-gap:24px}}
@media(max-width:440px){.states ul{columns:1}}
.eband{background:var(--grad-band);color:#fff;border-radius:6px;padding:36px 40px;display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:30px;align-items:center}
.eband h2{color:#fff;font-size:28px;font-weight:300}
.eband h2 b{font-weight:600}
.eband .pl b{display:block;font-size:17px;font-weight:600;margin-bottom:4px}
.eband .pl span{font-size:14px;font-weight:300;line-height:1.4;display:block}
.eband .pl svg{width:24px;height:24px;margin-bottom:10px}
.eband .btn{margin-top:16px}
.tools4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tools4 a{border:1px solid var(--line);border-radius:5px;padding:18px 20px;color:var(--ink);display:block;transition:border-color var(--t),box-shadow .3s}
.tools4 a:hover,.tools4 a:focus-visible{border-color:var(--blue);box-shadow:var(--shadow);color:var(--ink)}
.tools4 svg{width:26px;height:26px;color:var(--indigo);margin-bottom:12px}
.tools4 b{display:block;font-weight:500;margin-bottom:4px}
.tools4 span{font-size:13.5px;color:var(--text)}
.editors{display:flex;gap:50px;justify-content:center;flex-wrap:wrap;text-align:center;margin-top:20px}
.editors div b{display:block;font-weight:500;color:var(--ink);font-size:16px}
.editors div span{font-size:13px;color:var(--muted)}
.editors div small{display:block;font-size:12px;color:var(--indigo);font-weight:500;margin-top:4px}

/* two-column white hero (software, blog, service) */
.hero2{display:grid;grid-template-columns:1fr 420px;gap:50px;align-items:center;padding:36px 20px 30px}
.hero2 h1{font-size:clamp(32px,3.6vw,44px);margin:8px 0 14px}
.hero2 .dek{font-size:18px;line-height:1.55;margin-bottom:18px;max-width:60ch}
.hero2 .crumbs{color:var(--ink)}.hero2 .crumbs a{color:var(--ink)}
.picklist{display:grid;gap:10px}
.pickrow{display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center;background:#fff;box-shadow:var(--shadow);border-radius:5px;padding:12px 14px;color:var(--ink);transition:box-shadow .3s}
.pickrow:hover,.pickrow:focus-visible{box-shadow:var(--shadow-h);color:var(--ink)}
.pickrow .lg{width:48px;height:48px;border:1px solid var(--line);border-radius:5px;display:grid;place-items:center}
.pickrow .lg img{width:26px;height:26px;object-fit:contain}
.pickrow b{display:block;font-weight:500}
.pickrow small{font-size:12.5px;color:var(--text)}
.pickrow .sc{font-size:22px;font-weight:600;color:var(--indigo)}
.pickrow .rk{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:1px}

/* software tool sections */
.tool{border:1px solid var(--line);border-radius:5px;padding:24px 26px;margin-top:28px;scroll-margin-top:130px}
.tool .th{display:flex;gap:16px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.tool .logo{width:56px;height:56px;border:1px solid var(--line);border-radius:5px;display:grid;place-items:center;flex:none}
.tool .logo img{width:30px;height:30px;object-fit:contain}
.tool h3{font-size:24px;font-weight:500;margin:0}
.tool .sub{font-size:14px;color:var(--text);margin-top:2px}
.tool .score{margin-left:auto;text-align:right}
.tool .score b{display:block;font-size:36px;font-weight:600;color:var(--indigo);line-height:1}
.tool .score small{font-size:12px;color:var(--muted)}
.glance{display:grid;grid-template-columns:repeat(3,1fr);gap:0 20px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);margin-bottom:16px}
.glance div{padding:10px 0;font-size:14px}
.glance span{display:block;font-size:12px;color:var(--muted)}
.glance b{font-weight:500;color:var(--ink)}
.tool>p{font-size:15.5px;max-width:none}
.pc2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px}
.pc2 h4,
.pc2 .hsub{font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin:0 0 4px}
.pc2 .p h4,
.pc2 .p .hsub{color:var(--green-dk)}.pc2 .c h4,.pc2 .c .hsub{color:var(--red)}
.pc2 ul{margin:0;padding:0;list-style:none;font-size:14.5px}
.pc2 li{padding:6px 0;border-top:1px solid var(--line-soft)}
.pc2 .p li::before{content:"+  ";color:var(--green);font-weight:600}
.pc2 .c li::before{content:"\2212  ";color:var(--red);font-weight:600}
.pricing h4,
.pricing .hsub{font-size:15px;font-weight:500;margin:18px 0 6px}
.cta-row{display:flex;gap:12px;align-items:center;margin-top:20px;flex-wrap:wrap}
.cta-row small{margin-left:auto;font-size:12px;color:var(--muted)}
.shortlist{list-style:none;margin:0;padding:0}
.shortlist li{display:flex;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.shortlist .n{color:var(--indigo);font-weight:600;width:18px}
.shortlist a{flex:1;color:var(--ink);font-weight:400}
.shortlist a:hover,.shortlist a:focus-visible{color:var(--indigo)}
.shortlist .s{font-weight:600;color:var(--indigo)}
.rubric dl{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:13.5px;margin:0}
.rubric dt{color:var(--text)}.rubric dd{margin:0;font-weight:500;color:var(--ink)}
.rubric i{grid-column:1/-1;height:4px;background:var(--line-soft);border-radius:2px;margin-bottom:6px;overflow:hidden;display:block}
.rubric i::after{content:"";display:block;height:100%;width:var(--w);background:var(--indigo)}
.cmp td .tl{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.cmp td .lg{width:30px;height:30px;border:1px solid var(--line);border-radius:4px;display:grid;place-items:center}
.cmp td .lg img{width:18px;height:18px}
.cmp .ok{color:var(--green-dk)}.cmp .ok::before{content:"\2713 ";color:var(--green)}

/* hub */
.startl{border-top:1px solid var(--ink)}
.startl a{display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line-soft);color:var(--ink)}
.startl .n{font-size:15px;font-weight:600;color:var(--indigo)}
.startl b{display:block;font-weight:500;font-size:17px;transition:color var(--t)}
.startl p{margin:0;font-size:14px;color:var(--text)}
.startl .v{font-size:12.5px;color:var(--muted);white-space:nowrap}
.startl a:hover b,.startl a:focus-visible b{color:var(--indigo)}
.index{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 40px}
.index h3{font-size:17px;font-weight:500;display:flex;justify-content:space-between;border-bottom:1px solid var(--ink);padding-bottom:8px;margin-bottom:10px}
.index h3 span{font-size:12px;color:var(--muted);font-weight:400}
.index ul{list-style:none;margin:0;padding:0}
.index li a{display:block;padding:6px 0;font-size:14.5px;color:var(--ink);font-weight:400}
.index li a::before{content:"\203A  ";color:var(--indigo)}
.index li a:hover,.index li a:focus-visible{color:var(--indigo)}
.mostrow{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.mostrow a{display:block;padding:14px 16px;border:1px solid var(--line);border-radius:5px;color:var(--ink);font-weight:500;font-size:15px;transition:box-shadow .3s,border-color var(--t)}
.mostrow a:hover,.mostrow a:focus-visible{border-color:var(--blue);box-shadow:var(--shadow);color:var(--ink)}
.mostrow small{display:block;font-weight:300;font-size:12.5px;color:var(--muted);margin-top:4px}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* blog */
.blayout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:50px;align-items:start;padding-bottom:50px}
.plist a{display:grid;grid-template-columns:200px 1fr;gap:22px;padding:20px 0;border-bottom:1px solid var(--line-soft);color:var(--ink);align-items:center}
.plist .ph{aspect-ratio:16/10;border-radius:4px;overflow:hidden}
.plist .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.plist a:hover .ph img,.plist a:focus-visible .ph img{transform:scale(1.03)}
.plist .cat{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--indigo)}
.plist b{display:block;font-size:19px;font-weight:500;margin:6px 0;line-height:1.3;transition:color var(--t)}
.plist p{margin:0 0 8px;font-size:14px;color:var(--text)}
.plist .meta{font-size:12.5px;color:var(--muted)}
.plist .meta em{font-style:normal;color:var(--blue)}
.plist a:hover b,.plist a:focus-visible b{color:var(--indigo)}
.trend{list-style:none;margin:0;padding:0}
.trend li{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft);align-items:center}
.trend li:last-child{border-bottom:0}
.trend .ph{aspect-ratio:1;border-radius:4px;overflow:hidden}
.trend img{width:100%;height:100%;object-fit:cover}
.trend a{font-size:13.5px;font-weight:400;color:var(--ink);line-height:1.35;display:block}
.trend a:hover,.trend a:focus-visible{color:var(--indigo)}
.trend small{display:block;font-size:11.5px;color:var(--muted)}
.pager{display:flex;gap:6px;justify-content:center;margin-top:26px;align-items:center}
.pager a{width:36px;height:36px;border:1px solid var(--line);border-radius:4px;display:grid;place-items:center;font-size:14px;font-weight:400;color:var(--ink)}
.pager a.on,.pager a:hover,.pager a:focus-visible{border-color:var(--indigo);color:var(--indigo)}
.pager span{color:var(--muted);padding:0 4px}
.card .sub{font-size:13.5px;margin:0 0 10px}
.card input.f{height:38px;border:1px solid var(--line);border-radius:4px;padding:0 12px;font:inherit;font-weight:400;font-size:14px;width:100%;outline:0;margin-bottom:8px}
.card input.f:focus{border-color:var(--blue);box-shadow:0 0 4px rgba(113,160,250,.5)}
.card .btn{width:100%}

/* article */
.cover{margin:26px 0 0}
.cover img{width:100%;aspect-ratio:2.2/1;object-fit:cover;border-radius:5px}
.cover figcaption{font-size:12.5px;color:var(--muted);margin:8px 0 0}
.callout{border:1px solid var(--line);border-radius:5px;padding:16px 20px;margin:22px 0;background:var(--bg-soft);font-size:15px}
.callout b{display:block;color:var(--ink);font-weight:500;margin-bottom:4px}
.callout p{margin:0;max-width:none}
.code{margin:18px 0 24px;background:var(--ink);color:#E6EAFF;border-radius:5px;padding:18px 22px;font-family:var(--mono);font-size:13px;line-height:1.7;overflow-x:auto;font-weight:400}
.code .k{color:#7CD8FF}.code .o{color:#B7FF6A}.code .c{color:rgba(255,255,255,.45)}
.quote{margin:30px 0;padding:22px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line-soft)}
.quote p{font-size:24px;line-height:1.35;font-weight:400;color:var(--ink);margin:0 0 8px;max-width:none}
.quote span{font-size:13px;color:var(--muted)}
.steps.from2{counter-reset:s 1}
.next{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:36px}
.next a{border:1px solid var(--line);border-radius:5px;padding:16px 18px;color:var(--ink);display:block;transition:border-color var(--t),box-shadow .3s}
.next a:hover,.next a:focus-visible{border-color:var(--blue);box-shadow:var(--shadow);color:var(--ink)}
.next small{display:block;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--indigo);margin-bottom:6px}
.next b{font-size:16px;font-weight:500;line-height:1.3}

/* provider profile */
.phead{display:grid;grid-template-columns:180px 1fr 240px;gap:26px;align-items:start;padding:26px 0 24px}
.phead .lg{width:180px;height:110px;border:1px solid var(--line);border-radius:5px;overflow:hidden}
.phead .lg svg{width:100%;height:100%;display:block}
.phead h1{font-size:30px;font-weight:600;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.phead .tag{font-size:18px;font-weight:400;color:var(--ink);margin:8px 0 10px}
.phead .addr{font-size:14px;font-weight:400;display:grid;gap:6px}
.phead .addr span{display:inline-flex;gap:8px;align-items:center}
.phead .addr svg{width:15px;height:15px;color:var(--blue);flex:none}
.phead .act{display:grid;gap:10px}
.phead .rv{display:grid;gap:8px;font-size:13px;font-weight:500;margin-bottom:4px}
.phead .rv div{display:flex;align-items:center;gap:8px}
.phead .rv small{font-weight:300}
.phead .rv .lbl{font-size:12px;color:var(--text);font-weight:400;width:110px}
.pcard{border:1px solid var(--line);border-radius:5px;padding:24px 26px;margin-top:22px;scroll-margin-top:130px}
.pcard h2{font-size:24px;font-weight:500;margin:0}
.ph2{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.pstats{display:flex;gap:30px;flex-wrap:wrap;margin-left:auto}
.pstats div{display:flex;gap:10px;align-items:center;font-size:14px}
.pstats svg{width:22px;height:22px;color:var(--blue);flex:none}
.pstats span{display:block;font-size:11.5px;color:var(--blue);font-weight:500}
.pstats b{font-weight:500;color:var(--ink)}
.ovw{display:grid;grid-template-columns:1fr;gap:22px}
.ovw .txt p{font-size:15.5px;max-width:74ch}
.ovw .txt h4,
.ovw .txt .hsub{font-size:16px;font-weight:500;margin:14px 0 4px}
.gal{display:grid;gap:8px;align-content:start}
.gal .main img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.gal .thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gal .thumbs img{aspect-ratio:4/3;object-fit:cover;border-radius:4px;width:100%}
.gal dl{margin:10px 0 0;font-size:13px;display:grid;gap:4px}
.gal dt{font-weight:500;color:var(--ink)}
.gal dd{margin:0 0 6px;font-weight:300}
.exp{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.exp h4,
.exp .hsub{font-size:15px;font-weight:500;margin:0 0 6px}
.exp ul{list-style:none;margin:0;padding:0}
.exp li{padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px;font-weight:400;display:flex;gap:10px;align-items:flex-start}
.exp li svg{width:16px;height:16px;color:var(--green);flex:none;margin-top:3px}
.exp li small{display:block;color:var(--muted);font-weight:300;font-size:12.5px}
.revs{display:grid;gap:14px}
.rev{border:1px solid var(--line-soft);border-radius:5px;padding:16px 18px}
.rev .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:500;color:var(--ink);font-size:15px;gap:12px;flex-wrap:wrap}
.rev p{margin:0 0 6px;font-size:15px;max-width:none}
.rev small{font-size:12px;color:var(--muted)}
.others{list-style:none;margin:0;padding:0}
.others li a{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:14px;color:var(--ink);font-weight:400}
.others li:last-child a{border-bottom:0}
.others .lg{width:88px;height:56px;border:1px solid var(--line-soft);border-radius:4px;background:#fff;display:block;overflow:hidden;flex:none}
.others .lg img,.others .lg svg{display:block;width:100%;height:100%}
.others .s{margin-left:auto;font-weight:600;color:var(--indigo)}
.others li a:hover,.others li a:focus-visible{color:var(--indigo)}
.sample-note{font-size:12px;color:var(--muted);margin-top:10px}

/* service landing */
.qform{background:#fff;border-radius:5px;box-shadow:var(--shadow-pop);padding:22px;color:var(--ink)}
.qform h2,.qform h3{font-size:18px;font-weight:500;margin-bottom:4px}
.qform p{font-size:13px;margin:0 0 14px;font-weight:300}
.qform .row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.qform input{height:40px;border:1px solid var(--line);border-radius:4px;padding:0 12px;font:inherit;font-weight:400;font-size:14px;width:100%;outline:0}
.qform input:focus{border-color:var(--blue);box-shadow:0 0 4px rgba(113,160,250,.5)}
.qform .sizes{display:flex;gap:6px;margin-bottom:10px}
.qform .sizes label{flex:1;text-align:center;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:4px;font-size:13px;font-weight:400;cursor:pointer;transition:all var(--t)}
.qform .sizes input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.qform .sizes label:hover,.qform .sizes label:has(input:checked){border-color:var(--indigo);color:var(--indigo);background:#F7F4FF}.qform .sizes label:has(input:focus-visible){border-color:var(--indigo);color:var(--indigo);background:#F7F4FF;box-shadow:0 0 0 2px rgba(90,70,200,.35)}
.qform .btn{width:100%}
.qform .fine{font-size:11.5px;color:var(--muted);margin:10px 0 0}
.incl{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.incl div svg{width:26px;height:26px;color:var(--indigo);margin-bottom:10px}
.incl b{display:block;font-weight:500;color:var(--ink);margin-bottom:6px;font-size:16px}
.incl p{margin:0;font-size:14px}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.steps3 div{border-top:1px solid var(--ink);padding-top:14px}
.steps3 b{display:block;font-size:24px;font-weight:500;color:var(--indigo)}
.steps3 strong{display:block;font-weight:500;color:var(--ink);font-size:17px;margin:6px 0}
.steps3 p{margin:0;font-size:14.5px}

/* about */
.lead{font-size:20px;line-height:1.6;max-width:70ch;font-weight:300}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.tm{border-top:1px solid var(--ink);padding-top:14px}
.tm b{display:block;font-size:18px;font-weight:500;color:var(--ink)}
.tm .role{display:block;font-size:12.5px;color:var(--indigo);font-weight:500;margin:2px 0 10px}
.tm p{font-size:14.5px;margin:0 0 10px}
.creds{display:flex;flex-wrap:wrap;gap:6px}
.rules{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.rules>div{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.rules .n{font-size:22px;font-weight:500;color:var(--indigo)}
.rules b{display:block;font-weight:500;color:var(--ink);margin-bottom:4px}
.rules p{margin:0;font-size:14.5px}
.money{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.money div{border:1px solid var(--line);border-radius:5px;padding:18px 20px}
.money b{display:block;font-weight:500;color:var(--ink);margin-bottom:6px}
.money p{margin:0;font-size:14px}

@media(max-width:1000px){
.vsgrid,.eband{grid-template-columns:1fr 1fr}.tools4,.incl{grid-template-columns:1fr 1fr}
.hero2,.blayout,.ovw,.exp,.rules,.pc2{grid-template-columns:1fr}
.index,.mostrow,.team,.money,.steps3{grid-template-columns:1fr 1fr}
.phead{grid-template-columns:120px 1fr}.phead .act{grid-column:1/-1}
.plist a{grid-template-columns:1fr}
}
@media(max-width:640px){
.vsgrid,.eband,.tools4,.incl,.index,.mostrow,.team,.money,.steps3,.glance,.next{grid-template-columns:1fr}
.phead{grid-template-columns:1fr}
}

/* ===== v5.2: Digital Silk derived sections (claims, filtered guide cards, quote band, process tabs, roles grid, lead magnet, changelog) ===== */
.claims{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.claims>div{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:start}
.claims .ph{width:64px;height:64px;border-radius:5px;overflow:hidden}
.claims img{width:100%;height:100%;object-fit:cover}
.claims b{display:block;font-weight:500;color:var(--ink);font-size:17px}
.claims p{margin:4px 0 0;font-size:14.5px}
.claims a{font-size:13px;font-weight:500}

/* radio tabs, zero JS */
.rtabs{position:relative}
.rtabs>input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.rtabs>nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px}
.rtabs>nav label{height:36px;display:inline-flex;align-items:center;padding:0 16px;border:1px solid #C7C7C7;border-radius:18px;font-size:14px;font-weight:400;color:var(--ink);cursor:pointer;transition:all var(--t);background:#fff}
.rtabs>nav label:hover{border-color:var(--blue);color:var(--blue)}.rtabs>input:nth-of-type(1):focus-visible~nav label:nth-of-type(1),.rtabs>input:nth-of-type(2):focus-visible~nav label:nth-of-type(2),.rtabs>input:nth-of-type(3):focus-visible~nav label:nth-of-type(3),.rtabs>input:nth-of-type(4):focus-visible~nav label:nth-of-type(4),.rtabs>input:nth-of-type(5):focus-visible~nav label:nth-of-type(5),.rtabs>input:nth-of-type(6):focus-visible~nav label:nth-of-type(6),.rtabs>input:nth-of-type(7):focus-visible~nav label:nth-of-type(7){border-color:var(--blue);color:var(--blue);box-shadow:0 0 4px rgba(113,160,250,.5)}
.rtabs>div{display:none}
.rtabs>input:nth-of-type(1):checked~nav label:nth-of-type(1),.rtabs>input:nth-of-type(2):checked~nav label:nth-of-type(2),.rtabs>input:nth-of-type(3):checked~nav label:nth-of-type(3),.rtabs>input:nth-of-type(4):checked~nav label:nth-of-type(4),.rtabs>input:nth-of-type(5):checked~nav label:nth-of-type(5),.rtabs>input:nth-of-type(6):checked~nav label:nth-of-type(6),.rtabs>input:nth-of-type(7):checked~nav label:nth-of-type(7){background:var(--indigo);border-color:var(--indigo);color:#fff}
.rtabs>input:nth-of-type(1):checked~div:nth-of-type(1),.rtabs>input:nth-of-type(2):checked~div:nth-of-type(2),.rtabs>input:nth-of-type(3):checked~div:nth-of-type(3),.rtabs>input:nth-of-type(4):checked~div:nth-of-type(4),.rtabs>input:nth-of-type(5):checked~div:nth-of-type(5),.rtabs>input:nth-of-type(6):checked~div:nth-of-type(6),.rtabs>input:nth-of-type(7):checked~div:nth-of-type(7){display:block}

/* guide cards with KPI list (DS featured projects) */
.gcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.gcard{border:1px solid var(--line);border-radius:5px;overflow:hidden;color:var(--ink);display:block;transition:box-shadow .3s,border-color var(--t);background:#fff}
.gcard:hover,.gcard:focus-visible{box-shadow:var(--shadow-h);border-color:var(--blue);color:var(--ink)}
.gcard .ph{aspect-ratio:16/9;overflow:hidden}
.gcard img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gcard:hover img,.gcard:focus-visible img{transform:scale(1.03)}
.gcard .in{padding:16px 18px}
.gcard .cat{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--indigo)}
.gcard b{display:block;font-size:17px;font-weight:500;margin:6px 0 8px;line-height:1.3}
.gcard p{font-size:14px;margin:0 0 12px;color:var(--text)}
.gcard ul{list-style:none;margin:0;padding:12px 0 0;border-top:1px solid var(--line-soft);display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--text)}
.gcard li b{display:inline;font-size:15px;color:var(--indigo);margin:0 4px 0 0;font-weight:600}
.gcard .more{margin-top:12px;font-size:12px}
.gcard .in > p:last-child{margin-bottom:0}

/* proc: tabs left, pane right (DS process / what sets apart) */
.proc{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:start}
.proc>nav{display:flex;flex-direction:column;gap:0;margin:0;border-top:1px solid var(--ink)}
.proc>nav label{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line-soft);font-size:16px;font-weight:400;color:var(--ink);cursor:pointer;transition:color var(--t)}
.proc>nav label i{font-style:normal;font-size:12px;color:var(--muted);font-weight:500;letter-spacing:1px}
.proc>nav label:hover{color:var(--indigo)}.proc>input:nth-of-type(1):focus-visible~nav label:nth-of-type(1),.proc>input:nth-of-type(2):focus-visible~nav label:nth-of-type(2),.proc>input:nth-of-type(3):focus-visible~nav label:nth-of-type(3),.proc>input:nth-of-type(4):focus-visible~nav label:nth-of-type(4),.proc>input:nth-of-type(5):focus-visible~nav label:nth-of-type(5),.proc>input:nth-of-type(6):focus-visible~nav label:nth-of-type(6),.proc>input:nth-of-type(7):focus-visible~nav label:nth-of-type(7){color:var(--indigo);box-shadow:inset 0 -2px 0 var(--indigo)}
.proc>div{display:none;border:1px solid var(--line);border-radius:5px;padding:26px 28px;grid-template-columns:1fr 260px;gap:26px;align-items:start}
.proc>div h3{font-size:22px;font-weight:500;margin-bottom:10px}
.proc>div p{font-size:15.5px;margin:0 0 12px}
.proc>div ul{margin:0;padding:0 0 0 18px;font-size:14.5px}
.proc>div li{margin:4px 0}
.proc>div .ph img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px}
.proc>div .ph small{display:block;font-size:12px;color:var(--muted);margin-top:8px}
.proc>input:nth-of-type(1):checked~nav label:nth-of-type(1),.proc>input:nth-of-type(2):checked~nav label:nth-of-type(2),.proc>input:nth-of-type(3):checked~nav label:nth-of-type(3),.proc>input:nth-of-type(4):checked~nav label:nth-of-type(4),.proc>input:nth-of-type(5):checked~nav label:nth-of-type(5),.proc>input:nth-of-type(6):checked~nav label:nth-of-type(6),.proc>input:nth-of-type(7):checked~nav label:nth-of-type(7){color:var(--indigo);font-weight:500}
.proc>input:nth-of-type(1):checked~nav label:nth-of-type(1) i,.proc>input:nth-of-type(2):checked~nav label:nth-of-type(2) i,.proc>input:nth-of-type(3):checked~nav label:nth-of-type(3) i,.proc>input:nth-of-type(4):checked~nav label:nth-of-type(4) i,.proc>input:nth-of-type(5):checked~nav label:nth-of-type(5) i,.proc>input:nth-of-type(6):checked~nav label:nth-of-type(6) i,.proc>input:nth-of-type(7):checked~nav label:nth-of-type(7) i{color:var(--indigo)}
.proc>input:nth-of-type(1):checked~div:nth-of-type(1),.proc>input:nth-of-type(2):checked~div:nth-of-type(2),.proc>input:nth-of-type(3):checked~div:nth-of-type(3),.proc>input:nth-of-type(4):checked~div:nth-of-type(4),.proc>input:nth-of-type(5):checked~div:nth-of-type(5),.proc>input:nth-of-type(6):checked~div:nth-of-type(6),.proc>input:nth-of-type(7):checked~div:nth-of-type(7){display:grid}

/* navy quote band (DS testimonial) */
.tq{background:#1B2C5C;color:#fff;border-radius:6px;padding:44px 40px;text-align:center}
.tq .stars{margin:0 auto 16px;display:block}
.tq p{font-size:26px;line-height:1.4;font-weight:300;max-width:56ch;margin:0 auto 16px}
.tq b{display:block;font-weight:500;font-size:16px}
.tq span{font-size:12px;opacity:.8;letter-spacing:1px;text-transform:uppercase}
.tq small{display:block;font-size:11px;opacity:.6;margin-top:14px}

/* roles grid (DS industries) */
.roles{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}
.roles a{border:1px solid var(--line);border-radius:5px;padding:18px 8px 14px;text-align:center;color:var(--ink);font-size:13px;font-weight:400;display:block;transition:border-color var(--t),box-shadow .3s;background:#fff}
.roles a:hover,.roles a:focus-visible{border-color:var(--blue);box-shadow:var(--shadow);color:var(--ink)}
.roles svg{width:24px;height:24px;color:var(--indigo);margin:0 auto 10px;display:block}

/* lead magnet */
.magnet{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;border:1px solid var(--line);border-radius:6px;padding:32px 38px;background:#fff}
.magnet h2{font-size:28px;font-weight:400}
.magnet h2 em{font-style:normal;color:var(--indigo);font-weight:500}
.magnet p{font-size:15px;margin:10px 0 0}
.magnet ul{list-style:none;margin:12px 0 0;padding:0;font-size:14px;font-weight:400;display:grid;gap:6px}
.magnet li::before{content:"\2713  ";color:var(--green);font-weight:600}
.magnet form{display:flex;gap:10px;margin-top:18px}
.magnet input{flex:1;height:40px;border:1px solid var(--line);border-radius:4px;padding:0 12px;font:inherit;font-size:14px;font-weight:400;outline:0}
.magnet input:focus{border-color:var(--blue);box-shadow:0 0 4px rgba(113,160,250,.5)}
.magnet .cov{position:relative;border-radius:5px;overflow:hidden;box-shadow:var(--shadow-pop)}
.magnet .cov img{width:100%;aspect-ratio:3/2;object-fit:cover}
.magnet .cov span{position:absolute;left:14px;top:14px;background:#fff;padding:5px 10px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--indigo)}

/* changelog and about block */
.chlog{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.chlog li{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px}
.chlog time{font-family:var(--mono);font-size:12.5px;color:var(--muted);padding-top:2px}
.chlog b{font-weight:500;color:var(--ink)}
.about-blk{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.about-blk p{font-size:16px;line-height:1.6}
.about-blk h3{font-size:18px;font-weight:500;margin:0 0 8px}
.faq2{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;align-items:start}
.nbh{display:grid;grid-template-columns:repeat(4,1fr);gap:0 30px}
.nbh a{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px;color:var(--ink);font-weight:400}
.nbh a b{font-weight:400;color:var(--muted);font-size:13px}
.nbh a:hover{color:var(--indigo)}

@media(max-width:1000px){.claims,.gcards,.faq2,.about-blk,.magnet{grid-template-columns:1fr}.proc{grid-template-columns:1fr}.proc>div{grid-template-columns:1fr}.roles{grid-template-columns:repeat(4,1fr)}.nbh{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.roles{grid-template-columns:1fr 1fr}.nbh{grid-template-columns:1fr}.gcards{grid-template-columns:1fr}}


/* ===== engine glue: nav dropdowns, honeypot, admin bar, skip link, cookie bar, pagination, prose, search, author ===== */
.skip{position:absolute;left:-9999px;top:0;background:var(--indigo);color:#fff;padding:8px 12px;z-index:100}
.skip:focus{left:8px;top:8px}
/* ---------- back to top ---------- */
/* No script and no scroll listener. The rail begins one and a half screens down the document and
   runs to the end of it; the link inside is sticky, so above that point it is simply out of view,
   and on a page shorter than the rail's own offset there is no rail and therefore no button. */
.totop-rail{position:fixed;right:20px;bottom:20px;width:44px;z-index:95;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity var(--t),transform var(--t),visibility var(--t)}.totop-rail.show{opacity:1;visibility:visible;transform:none}.totop{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--indigo);box-shadow:var(--shadow-pop);transition:border-color var(--t),color var(--t),box-shadow var(--t)}.totop:hover,.totop:focus-visible{border-color:var(--indigo);background:#F7F4FF;box-shadow:var(--shadow-h)}.totop svg{width:16px;height:16px}#cookiebar.on ~ .totop-rail.show{bottom:92px}@media(max-width:900px){.totop-rail{right:14px;bottom:14px;width:42px}.totop{width:42px;height:42px}
/* The mobile cookie bar is full-width and ~137px tall, so it covers the corner the
   back-to-top sits in. Rather than float the button awkwardly mid-screen, hide it
   while the consent bar is up; once the bar is dismissed the button works normally. */
#cookiebar.on ~ .totop-rail{display:none}}@media print{.totop-rail{display:none}}
.hpot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* Nav dropdown: the label is a plain link to the hub page (/reference, /find-an-msp). With a
   mouse the list opens on hover and with a keyboard on focus; a closed details element cannot
   be opened from CSS, which is why this is not one. On touch screens the chevron is the label
   of a hidden checkbox and a tap toggles the list. The list is hidden with visibility, not
   display, so it can fade, and the short visibility delay forgives a wobbly pointer. */
.navdd{position:relative;display:inline-flex;align-items:center;gap:6px}
.navdd .dd-cb{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.navdd .tg{cursor:pointer;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:4px;color:var(--ink);transition:color var(--t),background var(--t)}
.navdd .tg svg{width:8px;height:8px;transition:transform var(--t)}
.navdd:hover .tg,.navdd:focus-within .tg{color:var(--indigo)}
.navdd:hover .tg svg,.navdd:focus-within .tg svg{transform:rotate(180deg)}
.navdd .dd{position:absolute;left:-14px;top:calc(100% + 14px);background:#fff;box-shadow:var(--shadow-pop);border-radius:5px;padding:10px 0;min-width:230px;display:grid;z-index:60;visibility:hidden;opacity:0;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease,visibility .15s}
/* Bridges the 14px gap between the label and the list so the pointer never leaves .navdd. */
.navdd .dd::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.navdd:hover .dd,.navdd:focus-within .dd{visibility:visible;opacity:1;transform:none}
@media(hover:none){.navdd .dd-cb:checked ~ .dd{visibility:visible;opacity:1;transform:none}}
.navdd .dd a{padding:9px 18px;font-size:14px;font-weight:400;color:var(--ink);white-space:nowrap}
.navdd .dd a:hover,.navdd .dd a:focus-visible{background:var(--bg-soft);color:var(--indigo)}
.adminbar{background:#08235C;color:#cdd4e8;font-size:13px}
.adminbar .ab-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0;flex-wrap:wrap}
.adminbar .ab-left,.adminbar .ab-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.adminbar a{color:#cdd4e8;font-weight:500}
.adminbar a:hover{color:#fff}
.adminbar .ab-brand{font-weight:600;color:#fff}
.adminbar .ab-ctx{color:#8fa3c7}
.adminbar .ab-status{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:2px 9px;border-radius:10px;background:#1B2C5C;color:#fff}
.adminbar .ab-status.published{background:#06BC7B}
.adminbar .ab-status.draft,.adminbar .ab-status.gated,.adminbar .ab-status.pending{background:#A78128}
.cookiebar{position:fixed;left:16px;right:16px;bottom:16px;max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow-pop);padding:14px 18px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;z-index:90;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s;font-size:14px}
.cookiebar.on{opacity:1;transform:none}
.cookiebar-txt{margin:0;color:var(--ink);font-weight:400}
.cookiebar-btns{display:flex;gap:8px}
.cookiebar-btn{height:34px;padding:0 14px;border-radius:4px;border:1px solid var(--indigo);background:#fff;color:var(--indigo);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.cookiebar-acc{background:var(--indigo);color:#fff}
.promobar{background:var(--grad-band);color:#fff;text-align:center;font-size:13px;font-weight:400;padding:7px 16px}
.promobar a{color:#fff;text-decoration:underline}
.pagination{display:flex;gap:6px;justify-content:center;margin-top:26px;align-items:center;list-style:none;padding:0}
.pagination li a,.pagination li span{width:36px;height:36px;border:1px solid var(--line);border-radius:4px;display:grid;place-items:center;font-size:14px;font-weight:400;color:var(--ink)}
.pagination li.active span,.pagination li a:hover{border-color:var(--indigo);color:var(--indigo)}
.pagination li.disabled span{color:var(--muted);border-color:var(--line-soft)}
.prose ul,.prose ol{padding-left:22px;margin:0 0 18px}
.prose li{margin:4px 0}
.prose table{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 20px}
.prose th{font-size:11px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--ink);text-align:left;padding:10px 12px;border-bottom:2px solid var(--ink)}
.prose td{padding:12px;border-bottom:1px solid var(--line-soft);font-weight:400;vertical-align:top}
.prose pre{background:var(--ink);color:#E6EAFF;border-radius:5px;padding:18px 22px;font-family:var(--mono);font-size:13px;line-height:1.7;overflow-x:auto;margin:0 0 22px}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--bg-soft);padding:1px 5px;border-radius:3px}
.prose pre code{background:none;padding:0}
.prose img{border-radius:5px;margin:0 0 18px}
.prose blockquote{margin:30px 0;padding:22px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line-soft);font-size:22px;line-height:1.35;font-weight:400;color:var(--ink)}
.prose blockquote p{max-width:none;margin:0}
.rlist{border-top:1px solid var(--ink)}
.rlist a{display:grid;grid-template-columns:1fr 150px;gap:24px;padding:22px 0;border-bottom:1px solid var(--line-soft);color:var(--ink);align-items:start}
.rlist .kind{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--indigo)}
.rlist .kind span{color:var(--muted);font-weight:500;margin-left:8px}
.rlist b{display:block;font-size:19px;font-weight:500;margin:6px 0 6px;line-height:1.3;transition:color var(--t)}
.rlist p{margin:0 0 8px;font-size:14.5px;color:var(--text);max-width:70ch}
.rlist .meta{font-size:12.5px;color:var(--muted)}
.rlist a:hover b,.rlist a:focus-visible b{color:var(--indigo)}
.rlist mark{background:#F0E8FF;color:var(--indigo);font-weight:500;padding:0 2px}
/* A company or a tool in the results shows its own logo in the slot where other results show a photo. */
.rlist .ph.logo{display:grid;place-items:center;aspect-ratio:120/74;height:auto;padding:14px;border:1px solid var(--line-soft);border-radius:5px;background:#fff}
.rlist .ph.logo img{width:100%;height:100%;object-fit:contain}
.rhead{display:flex;justify-content:space-between;align-items:center;margin:10px 0 0;font-size:13px;color:var(--muted);flex-wrap:wrap;gap:10px}
.rhead h2{font-size:13px;font-weight:400;color:inherit;margin:0}
.srch{padding:30px 0 10px}
.srch h1{font-size:28px;font-weight:500;margin:6px 0 16px}
.srch h1 em{font-style:normal;color:var(--indigo)}
.bigsearch{display:flex;gap:10px;max-width:760px}
.bigsearch label{flex:1;display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:4px;height:46px;padding:0 14px;color:var(--muted);transition:border-color var(--t),box-shadow var(--t)}
.bigsearch label:focus-within,.bigsearch label:hover{border-color:var(--blue);box-shadow:0 0 4px rgba(113,160,250,.5)}
.bigsearch label svg{width:16px;height:16px}
.bigsearch input{border:0;outline:0;font:inherit;font-size:16px;font-weight:400;width:100%;color:var(--ink)}
.bigsearch .btn{height:46px;flex:none}
@media(max-width:560px){.bigsearch{flex-direction:column;align-items:stretch}.bigsearch .btn{width:100%}}
.facets{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 6px}
.facets .chip.on{background:var(--indigo);border-color:var(--indigo);color:#fff}
.related-q{list-style:none;margin:0;padding:0}
.related-q li a{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:14px;color:var(--ink);font-weight:400}
.related-q li:last-child a{border-bottom:0}
.related-q li a::before{content:"\203A";color:var(--indigo);font-weight:600}
.related-q li a:hover{color:var(--indigo)}
.ahead{display:grid;grid-template-columns:1fr 340px;gap:50px;align-items:start;padding:30px 0 26px;border-bottom:1px solid var(--line-soft)}
.ahead h1{font-size:36px;margin:6px 0 6px}
.ahead .role{font-size:16px;color:var(--indigo);font-weight:500;margin-bottom:14px;display:block}
.ahead p{font-size:16px;max-width:64ch}
.ahead .creds{margin-top:16px}
.ahead .alinks{display:flex;gap:18px;margin-top:18px;flex-wrap:wrap}
.ahead .alinks a{font-size:13.5px;font-weight:500;color:var(--ink);display:inline-flex;gap:6px;align-items:center}
.ahead .alinks svg{width:14px;height:14px;color:var(--blue)}
.ahead .alinks a:hover{color:var(--indigo)}
.astats{border:1px solid var(--line);border-radius:5px;padding:18px 20px}
.astats dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:10px 12px;font-size:14px}
.astats dt{color:var(--text)}.astats dd{margin:0;font-weight:500;color:var(--ink);text-align:right}
.astats .btn{width:100%;margin-top:14px}
.vrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pbmark{width:16px;height:16px;color:var(--indigo)}
.vlist{list-style:none;margin:0;padding:0}
.vlist li{padding:6px 0;border-bottom:1px solid var(--line-soft);font-size:14px;display:flex;gap:8px}
.vlist li:last-child{border-bottom:0}
.vlist li svg{width:14px;height:14px;color:var(--green);flex:none;margin-top:3px}
.lguide{max-width:72ch}
.notice{border:1px solid var(--line);border-radius:5px;padding:14px 18px;background:var(--bg-soft);font-size:14px;margin:0 0 20px}
@media(max-width:1000px){.ahead{grid-template-columns:1fr}.navdd .dd{position:static;box-shadow:none;padding:0 0 0 12px}}
@media(max-width:640px){.rlist a{grid-template-columns:1fr}}

/* ===== mobile navigation and small-screen corrections ===== */
.mnav-cb{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.mnav-btn{display:none;width:38px;height:38px;border:1px solid var(--line);border-radius:4px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px;flex:none;transition:border-color var(--t)}
.mnav-btn span{display:block;width:18px;height:2px;background:var(--ink);border-radius:1px;transition:transform var(--t),opacity var(--t)}
.mnav-btn:hover{border-color:var(--indigo)}
.mnav-cb:focus-visible + .mnav-btn{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(67,0,255,.18)}
/* Links that only belong in the stacked phone menu. Scoped under .nav so the rule outranks
   `.nav a{display:inline-flex}`; as a bare class it lost, and Search plus List your company
   showed up twice on desktop, once in the utility bar and again crammed into the nav row. */
.nav .mnav-only{display:none}

@media(max-width:1000px){
  .hd .navrow{gap:12px}
  .mnav-btn{display:flex}
  .mnav-cb:checked + .mnav-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .mnav-cb:checked + .mnav-btn span:nth-child(2){opacity:0}
  .mnav-cb:checked + .mnav-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .hd .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line-soft);box-shadow:0 18px 40px rgba(8,35,92,.12);flex-direction:column;gap:0;padding:8px 20px 16px;z-index:70;max-height:calc(100vh - 120px);overflow-y:auto}
  .mnav-cb:checked ~ .nav{display:flex}
  .hd .nav > a,.hd .navdd > a{padding:13px 48px 13px 0;border-bottom:1px solid var(--line-soft);width:100%;font-size:13.5px}
  /* In the stacked menu the label fills the row and the chevron sits on its right edge,
     absolutely placed so the details' in-flow content is only the list, which opens below. */
  .hd .navdd{display:block;width:100%;position:relative}
  .hd .navdd .tg{position:absolute;top:0;right:0;width:46px;height:46px;border-radius:0}
  /* In the stacked menu the list is in the flow and only the checkbox opens it: hover is
     emulated on touch and would otherwise leave a list stuck open after a tap. */
  .hd .navdd .dd,.hd .navdd:hover .dd,.hd .navdd:focus-within .dd{display:none;position:static;visibility:visible;opacity:1;transform:none;transition:none;box-shadow:none;padding:2px 0 8px 14px;min-width:0;border-radius:0}
  .hd .navdd .dd::before{display:none}
  .hd .navdd .dd-cb:checked ~ .dd{display:grid}
  .hd .navdd:hover .tg svg,.hd .navdd:focus-within .tg svg{transform:none}
  .hd .navdd .dd-cb:checked ~ .tg{background:var(--bg-soft);color:var(--indigo)}
  .hd .navdd .dd-cb:checked ~ .tg svg{transform:rotate(180deg)}
  .hd .navdd .dd a{padding:9px 0;font-size:14.5px}
  .hd .nav .mnav-only{display:inline-flex}
  .hd .wrap{position:relative}
}

@media(max-width:640px){
  .hd .top{height:52px}
  .brand{font-size:19px}
  .brand svg{width:26px;height:26px}
  .hd .navrow{height:48px}
  .hd .navrow > .btn{height:34px;padding:0 14px;font-size:11.5px}
  .hero-w{padding:30px 0 18px}
  .hero-w h1{font-size:30px}
  .kick{font-size:14px}
  .claims .ph{width:52px;height:52px}
  .band{padding:22px}
  .band .st b{font-size:24px}
  .lhero h1,.lhero h1.big,.ahead h1{font-size:28px}
  .lhero h1.big{max-width:none}
  .ahero h1{font-size:29px}
  .sec{padding:38px 0}
  .shead h2,.center-h h2,.hire h2,.magnet h2{font-size:26px}
  .prose h2{font-size:23px}
  .qband{padding:20px}
  .qband form{flex-direction:column;align-items:stretch}
  .qband input{width:100%}
  .tq{padding:28px 22px}
  .tq p{font-size:19px}
  .eband{padding:24px 22px}
  .eband h2{font-size:24px}
  .lhead{flex-direction:column;align-items:flex-start;gap:8px}
  .lhead .cnt{text-align:left}
  .phead .lg{width:120px;height:74px}
  .phead h1{font-size:24px}
  .pcard{padding:18px 16px}
  .ph2{flex-direction:column;align-items:flex-start;gap:10px}
  .pstats{margin-left:0;gap:16px}
  .tool{padding:18px 16px}
  .tool .th .score b{font-size:28px}
  .glance{grid-template-columns:1fr}
  .rt{font-size:14px}
  .startl a{grid-template-columns:32px 1fr;gap:10px}
  .startl .v{display:none}
  .plist a{gap:12px}
  .layout,.blayout{gap:32px;padding-bottom:40px}
  .editors{gap:24px}
  .footer-cols,.ft .cols{gap:26px}
  .ft .bottom{flex-direction:column;align-items:flex-start}
}

/* Grid and flex children default to min-width:auto, so a wide child refuses to shrink
   and pushes the page sideways. Every multi-column block gets an explicit floor. */
.claims > div,.gcards > *,.lib > div,.hire > div,.about-blk > div,.faq2 > div,.magnet > div,
.proc > div,.proc > div > div,.qband > div,.eband > div,.blayout > *,.layout > *,.hero2 > *,
.states > div,.incl > div,.steps3 > div,.money > div,.team > div,.exp > div,.ovw > *,.snapl > div,
.rules > div,.rules > div > div,.pc > *,.pc .main > *,.phead > *,.ahead > *,.trow .tabs{min-width:0}

.magnet form{flex-wrap:wrap}
.magnet input{min-width:0}
.qband form{min-width:0}
.qband input{min-width:0}

@media(max-width:640px){
  .magnet{padding:22px}
  .magnet input{flex:1 1 100%}
  .magnet .btn{width:100%}
  .claims{gap:22px}
  .lib{gap:34px}
  .links{columns:1}
  .rc-tail{grid-template-columns:1fr}
  .vsgrid a{font-size:14px}
  .logos span{width:48px;height:48px}
  .logos img{width:24px;height:24px}
  .editors{flex-direction:column;gap:18px}
  .roles a{font-size:12.5px}
  .proc > nav label{font-size:15px}
  .snap .in{padding:20px}
  .snap .row{gap:18px;flex-wrap:wrap}
  .snap .row b{font-size:20px}
  .cookiebar{flex-direction:column;align-items:stretch;gap:10px}
  .cookiebar-btns{justify-content:stretch}
  .cookiebar-btn{flex:1}
}

/* Section sub-nav scrolls sideways on narrow screens instead of widening the page. */
@media(max-width:1000px){
  .ltabs .wrap{padding-right:0}
  .ltabs ul{overflow-x:auto;flex-wrap:nowrap;gap:24px;padding-right:20px;scrollbar-width:none}
  .ltabs ul::-webkit-scrollbar{display:none}
  .ltabs a{white-space:nowrap}
  .trow{height:auto;flex-wrap:wrap;padding:10px 0;gap:12px}
  .trow .tabs{margin-left:0;order:3;width:100%;scrollbar-width:none}
  .trow .tabs::-webkit-scrollbar{display:none}
  .trow .tabs a{height:auto;padding-bottom:6px}
  .trow .btn{margin-left:auto}
}

/* Diagram-heavy concept components on a phone: stack what can stack,
   scroll what cannot (a 32-bit field is not a phone-width object). */
@media(max-width:760px){
  .log{overflow-x:auto}
  .log .l{grid-template-columns:1fr;gap:4px;padding:10px 0}
  .log .fix{font-size:13px}
  .xch span{grid-template-columns:1fr;gap:2px}
  .xch span i{font-size:11px}
  .bits{overflow-x:auto;padding-bottom:6px}
  .bits .grid32,.bits .scale{min-width:520px}
  .tl{grid-template-columns:1fr 1fr;gap:0 14px}
  .tl b{font-size:19px}
  .cfg .tabs{overflow-x:auto;scrollbar-width:none}
  .cfg .tabs::-webkit-scrollbar{display:none}
  .cfg .tabs label{white-space:nowrap}
  .fig{padding:14px;overflow-x:auto}
  .metrics{grid-template-columns:1fr 1fr;gap:14px}
  .metrics b{font-size:26px}
  .chooser{padding:18px}
  .chooser .opts label{font-size:13px;padding:0 12px}
  .by{gap:10px 18px;font-size:12.5px}
  .short{padding:18px}
  .short p{font-size:16px}
  .toc li a{font-size:13.5px}
}
@media(max-width:520px){
  .tl{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr}
}

@media(max-width:760px){
  /* This used to be a sideways scroller. On a phone that reads as a sentence cut off mid-word,
     with nothing to say it can be swiped, so the trail wraps onto a second line instead and the
     current page ends in an ellipsis only if one line is still not enough. */
  .crumbs{flex-wrap:wrap;row-gap:4px;padding-bottom:2px}
  .crumbs > a,.crumbs > svg{flex:none}
}

/* Radio inputs drive the 0-JS tab panels; they must never occupy a grid cell. */
.proc > input,.rtabs > input,.cfg > input,.chooser > input{position:absolute;opacity:0;pointer-events:none;width:0;height:0;margin:0}

/* empty logo slots: draw the box only when there is a logo in it */
.pickrow .lg:empty,.cmp td .lg:empty,.tool .logo:empty{display:none}
.pickrow:has(.lg:empty){grid-template-columns:1fr auto}

/* Homepage topical map: one card per subject, its strongest pages listed by target phrase. */
.silomap{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:26px 30px;margin-top:26px}
.silocard{border-top:2px solid var(--ink);padding-top:14px;min-width:0}
.silocard h3{margin:0 0 12px;font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.silocard h3 a{color:var(--ink);display:inline-flex;align-items:center;gap:8px;transition:color var(--t)}
.silocard h3 a:hover{color:var(--indigo)}
.silocard h3 svg{width:15px;height:15px;flex:none}
.silocard h3 span{margin-left:auto;font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.4px;white-space:nowrap}
.silocard ul{list-style:none;margin:0;padding:0}
.silocard li{border-bottom:1px solid var(--line-soft)}
.silocard li:last-child{border-bottom:0}
.silocard li a{display:block;padding:7px 0;font-size:13.5px;line-height:1.35;color:var(--ink);transition:color var(--t)}
.silocard li a:hover,.silocard li a:focus-visible{color:var(--indigo)}
.silocard .more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:12px;font-weight:600;letter-spacing:.3px;color:var(--indigo)}
.silocard .more svg{width:11px;height:11px}
@media (max-width:600px){.silomap{grid-template-columns:1fr;gap:22px}}

/* Nav search autocomplete dropdown (JS progressive enhancement) */
.search-dd{position:absolute;top:calc(100% + 6px);left:auto;right:0;width:380px;max-width:calc(100vw - 32px);background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-pop);z-index:60;overflow:hidden}
.search-dd-list{list-style:none;margin:0;padding:4px;max-height:60vh;overflow-y:auto}
.search-dd-item a{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:11px;padding:8px 10px;border-radius:6px;text-decoration:none;color:var(--ink)}
.search-dd-item .lead{width:44px;height:30px;display:grid;place-items:center;color:var(--indigo)}
.search-dd-item .lead.logo{border:1px solid var(--line-soft);border-radius:4px;background:#fff;overflow:hidden}
.search-dd-item .lead img{display:block;width:100%;height:100%;object-fit:contain;padding:3px}
.search-dd-item .lead svg{width:18px;height:18px}
.search-dd-item .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
/* The list sits inside the utility bar, whose links are uppercase and letter-spaced. A page
   title set that way wraps to three lines and cannot be skimmed, so titles go back to sentence
   case and only the type line keeps the small caps. */
.search-dd-item a{text-transform:none;letter-spacing:0}
.search-dd-item .t{font-size:14px;font-weight:500;line-height:1.3;text-transform:none;letter-spacing:0}
.search-dd-item .m{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.search-dd-item.on a,.search-dd-item a:hover{background:#F1EEFF}

/* ---------- stat ledger (.facts) ----------
   The numbers a page stands on: counts on the index pages, key figures on a concept page.
   A tinted panel in the same lavender as the short-answer box, mono numerals in the brand
   indigo, hairlines drawn as shadows so the grid needs no first/last/nth bookkeeping at any
   width (the container clips the outer ones). Where the numbers are live counts, a last row
   carries the site mark and says where they came from and when: that line is the brand, a
   site whose claim is that every figure is counted and dated. No gradient text, no accent
   bars, no badges. */
:root{--facts-bg:#F6F3FF;--facts-line:rgba(67,0,255,.14)}
.facts{display:flex;flex-wrap:wrap;margin:26px 0 0;background:var(--facts-bg);border-radius:6px;overflow:hidden}
.facts>div{flex:1 1 0;min-width:0;padding:18px 22px 17px;box-shadow:1px 0 0 var(--facts-line),0 1px 0 var(--facts-line)}
.facts>div>b{display:block;font-family:var(--mono);font-size:24px;font-weight:600;line-height:1.15;letter-spacing:-.4px;color:var(--indigo);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.facts>div>span{display:block;margin-top:7px;font-size:13.5px;line-height:1.4;color:var(--ink)}
.facts-src{flex:0 0 100%;display:flex;align-items:center;gap:8px;margin:0;padding:9px 22px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.6px;text-transform:uppercase;color:#5B4BA8}
.facts-src svg{width:14px;height:14px;flex:none;color:var(--indigo)}
.facts-src a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* In the two-column heroes the panel is a narrow card, so the stats stack as rows. */
.hero2 .facts{display:block;margin:0}
.hero2 .facts>div{display:flex;align-items:baseline;gap:18px;padding:15px 22px;box-shadow:0 1px 0 var(--facts-line)}
.hero2 .facts>div>b{flex:none;min-width:92px;font-size:26px}
.hero2 .facts>div>span{margin:0;font-size:14.5px}
@media(max-width:1000px){.facts>div{flex:1 1 50%}}
@media(max-width:640px){.facts>div{padding:14px 16px 13px}.facts>div>b{font-size:21px}.facts-src{padding:9px 16px}.hero2 .facts>div{padding:13px 16px;gap:14px}.hero2 .facts>div>b{min-width:96px;font-size:22px}}

/* ---- Provider profile depth: the record, services explained, sector rules, questions, sources ---- */
.others .nm{display:grid;gap:3px;min-width:0;font-weight:500;line-height:1.3}
.others .nm small{font-size:12px;font-weight:400;color:var(--muted)}
.prec{align-self:start;background:var(--facts-bg);border-radius:6px;padding:18px 20px 20px}
.prec .hsub{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--indigo);margin:0 0 4px}
.prec dl{margin:10px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px}
.prec dl>div{min-width:0;padding:11px 0 12px;box-shadow:0 -1px 0 var(--facts-line)}
.prec dt{font-size:11.5px;font-weight:500;color:var(--muted)}
.prec dd{margin:2px 0 0;font-size:14px;font-weight:400;color:var(--ink);overflow-wrap:anywhere}
.svcx-h{font-size:17px;font-weight:500;margin:28px 0 4px}
.svcx{display:grid;grid-template-columns:1fr 1fr;gap:0 36px;margin-top:10px}
.svcx>div{min-width:0;padding:16px 0 18px;border-top:1px solid var(--line-soft)}
.svcx b{display:block;font-size:15.5px;font-weight:600;color:var(--ink)}
.svcx .named{display:block;font-size:12.5px;color:var(--muted);margin:3px 0 8px}
.svcx p{font-size:14.5px;line-height:1.62;margin:0 0 9px}
.svcx a{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500}
.svcx a svg{width:13px;height:13px;flex:none}
.pnote{font-size:13.5px;line-height:1.62;color:var(--muted);max-width:78ch;margin:0}
.pnote b{color:var(--ink);font-weight:500}
.indn{display:grid;grid-template-columns:180px minmax(0,1fr);margin:14px 0 0}
.indn dt{font-size:14.5px;font-weight:600;color:var(--ink);padding:13px 18px 13px 0;border-top:1px solid var(--line-soft)}
.indn dd{margin:0;font-size:14.5px;line-height:1.62;padding:13px 0;border-top:1px solid var(--line-soft)}
.qlist{list-style:none;margin:14px 0 0;padding:0}
.qlist li{position:relative;padding:13px 0 13px 32px;border-top:1px solid var(--line-soft);font-size:15px;line-height:1.6;color:var(--ink)}
.qlist li::before{content:"?";position:absolute;left:6px;top:13px;font-family:var(--mono);font-weight:600;color:var(--indigo)}
.srcl{list-style:none;margin:0;padding:0}
.srcl li{display:grid;grid-template-columns:180px minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:11px 0;border-top:1px solid var(--line-soft);font-size:14px}
.srcl li:first-child{border-top:0;padding-top:0}
.srcl b{font-weight:500;color:var(--ink)}
.srcl a{overflow-wrap:anywhere}
.srcl span{font-size:12.5px;color:var(--muted);white-space:nowrap}
@media(max-width:1000px){.prec dl{grid-template-columns:1fr 1fr}}
@media(max-width:720px){
  .svcx{grid-template-columns:1fr}.prec dl{grid-template-columns:1fr}
  .indn{grid-template-columns:1fr}.indn dt{padding-bottom:2px}.indn dd{border-top:0;padding-top:0}
  .srcl li{grid-template-columns:1fr;gap:2px}
}

/* ---- pricing card, the hero card on a software pricing page -------------------------------- */
/* The old card printed seven facts at one weight, with the price as the second cell and a ghost
   outline button under them. This leads with the figure the reader came for, keeps the rest as a
   qualifying list, and gives the free tier and the trial their own chips, because those are what
   move somebody to click through. The figure is editorial, from database/data/glance-leads.php. */
.vprice{background:#fff;border-radius:10px;box-shadow:var(--shadow-pop);overflow:hidden}
.vprice-top{background:var(--grad-hero);color:#fff;padding:20px 22px 18px}
.vprice-eyebrow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;color:rgba(255,255,255,.72)}
.vprice-chip{flex:0 0 auto;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);border-radius:3px;padding:3px 7px;letter-spacing:.8px}
.vprice-fig{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 9px;margin:14px 0 0}
.vprice-fig b{font-family:var(--mono);font-size:40px;font-weight:700;letter-spacing:-1.5px;line-height:1;color:#fff}
.vprice-fig b.words{font-family:var(--sans);font-size:27px;letter-spacing:-.6px}
.vprice-fig span{font-size:14px;color:rgba(255,255,255,.86)}
.vprice-sub{margin:8px 0 0;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.82)}
.vprice-rows{padding:6px 22px 0}
.vprice-row{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.vprice-row:last-child{border-bottom:0}
.vprice-row span{flex:0 0 36%;color:var(--muted)}
.vprice-row b{flex:1 1 auto;font-weight:500;color:var(--ink);text-align:right}
.vprice-pills{display:flex;flex-wrap:wrap;gap:8px;padding:14px 22px 0}
.vprice-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:4px;font-size:12.5px;font-weight:500;color:var(--ink);background:#EEF4FF;border:1px solid rgba(38,126,253,.3)}
.vprice-pill i{width:6px;height:6px;border-radius:50%;background:var(--blue)}
.vprice-pill.is-free{background:#EAFBF3;border-color:rgba(6,188,123,.3)}
.vprice-pill.is-free i{background:var(--green)}
.vprice-cta{padding:16px 22px 20px}
.vprice-btn{display:flex;align-items:center;justify-content:center;gap:10px;height:46px;border-radius:6px;background:var(--grad-purple);color:#fff;font-size:13.5px;font-weight:600;letter-spacing:.3px;box-shadow:0 6px 18px rgba(67,0,255,.28);transition:box-shadow var(--t),transform var(--t)}
.vprice-btn:hover,.vprice-btn:focus-visible{color:#fff;box-shadow:0 8px 24px rgba(67,0,255,.36);transform:translateY(-1px)}
.vprice-btn svg{width:7px;height:12px;flex:0 0 auto;transition:transform var(--t)}
.vprice-btn:hover svg,.vprice-btn:focus-visible svg{transform:translateX(2px)}
.vprice-note{margin:10px 0 0;font-size:12px;line-height:1.45;color:var(--muted);text-align:center}
.vprice-note b{font-weight:500;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.vprice-btn,.vprice-btn svg{transition:none}.vprice-btn:hover{transform:none}}
@media (max-width:900px){
  .vprice-fig b{font-size:34px}
  .vprice-row{font-size:13.5px}
  .vprice-row span{flex:0 0 42%}
}
/* The pricing card is taller than the old one, so the hero column no longer centers against it. */
.hero2.top{align-items:start}
.vprice-eyebrow>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The four figures, now inside the hero column beside the pricing card rather than in a band under
   it, where they repeated what the card had just said and left this column half empty. */
.hfacts{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:26px 0 0;background:var(--facts-line);border:1px solid var(--facts-line);border-radius:6px;overflow:hidden}
.hfacts>div{padding:16px 18px 15px;background:var(--facts-bg)}
.hfacts b{display:block;font-family:var(--mono);font-size:23px;font-weight:600;line-height:1.15;letter-spacing:-.4px;color:var(--indigo);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.hfacts span{display:block;margin-top:6px;font-size:13px;line-height:1.4;color:var(--ink)}
/* The card's own rows: a wider label column stops "Technicians included" breaking in two. */
.vprice-row span{flex:0 0 42%}
.vprice-pills{flex-wrap:nowrap}
.vprice-pill{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:700px){.hfacts{grid-template-columns:1fr}.vprice-pills{flex-wrap:wrap}}

/* ---- top picks on a ranking ---------------------------------------------------------------- */
/* Three identical white boxes used to carry the top three, with the score hanging on the right at
   no scale and no price anywhere. One skeleton now, one card, and the rank is carried by weight:
   every row is a link and shows it, so the winner does not lead because it is the only way in. */
.pk{background:#fff;border-radius:10px;box-shadow:var(--shadow-pop);overflow:hidden}
.pk-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;background:var(--ink);color:#fff}
.pk-head h2{font-size:14px;color:#fff;font-weight:600}
.pk-head span{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:1px;color:var(--blue-2)}
.pkrow{display:grid;grid-template-columns:28px 46px 1fr auto;gap:13px;align-items:center;padding:15px 18px;border-bottom:1px solid var(--line-soft);color:var(--ink);transition:background var(--t)}
.pkrow:last-of-type{border-bottom:0}
.pkrow:hover,.pkrow:focus-visible{background:var(--bg-soft);color:var(--ink)}
.pkrow.win{background:linear-gradient(180deg,#F7F5FF,#fff);padding:18px}
.pkrow.win:hover,.pkrow.win:focus-visible{background:linear-gradient(180deg,#F2EEFF,#fff)}
.pkrow .n{font-family:var(--mono);font-size:16px;font-weight:700;color:var(--muted-2);text-align:center}
.pkrow.win .n{font-size:22px;color:#fff;background:var(--grad-hero);border-radius:6px;padding:5px 0;line-height:1}
.pkrow .lg{width:46px;height:46px;border-radius:7px;background:var(--bg-2);display:grid;place-items:center}
.pkrow.win .lg{width:52px;height:52px;background:#fff;box-shadow:var(--shadow)}
.pkrow .lg img{width:26px;height:26px;object-fit:contain}
.pkrow.win .lg img{width:30px;height:30px}
.pkrow .who{display:block;min-width:0}
.pkrow .aw{display:block;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:var(--violet)}
.pkrow .nm{display:block;margin-top:2px;font-size:15px;font-weight:600;line-height:1.2;color:var(--ink)}
.pkrow.win .nm{font-size:17px}
.pkrow small{display:block;margin-top:3px;font-size:12.5px;line-height:1.4;color:var(--muted)}
.pkrow .pr{display:inline-block;margin-top:6px;padding:3px 8px;border-radius:4px;background:#EEF4FF;font-size:12px;font-weight:500;color:var(--ink)}
.pkrow.win .pr{background:#fff;border:1px solid rgba(38,126,253,.3)}
.pkrow .rv{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;font-weight:600;color:var(--blue)}
.pkrow .rv svg{width:6px;height:11px;transition:transform var(--t)}
.pkrow:hover .rv svg,.pkrow:focus-visible .rv svg{transform:translateX(2px)}
.pkrow .sc{text-align:right}
.pkrow .sc b{font-family:var(--mono);font-size:22px;font-weight:700;letter-spacing:-.8px;line-height:1;color:var(--indigo)}
.pkrow.win .sc b{font-size:30px;letter-spacing:-1.2px}
.pkrow .sc i{display:block;width:50px;height:4px;border-radius:2px;background:#E9ECF5;margin-top:6px;overflow:hidden}
.pkrow .sc i em{display:block;height:100%;background:var(--grad-hero)}
.pkrow .sc u{display:block;margin-top:5px;font-family:var(--mono);font-size:9.5px;letter-spacing:.6px;color:var(--muted);text-decoration:none}
.pkrow .sc u.ns{font-family:var(--sans);font-size:12px;letter-spacing:0}
.pk-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;border-top:1px solid var(--line-soft);font-size:12px;color:var(--muted)}
.pk-foot a{display:inline-flex;align-items:center;gap:6px;font-weight:500}
.pk-foot svg{width:6px;height:11px}
@media (max-width:560px){
  .pkrow{grid-template-columns:24px 40px 1fr;gap:11px;padding:14px}
  .pkrow.win{padding:14px}
  .pkrow .sc{grid-column:2 / -1;display:flex;align-items:center;gap:10px;text-align:left}
  .pkrow .sc i{margin-top:0}
  .pkrow .sc u{margin-top:0}
}
/* Price and link each take their own line, or a short price sits beside the link on one row and a
   long one does not, which reads as three different layouts in a list that is meant to be one. */
.pkrow .pr{display:block;width:fit-content}

/* The header search box is hidden under 640px, and the only way to search from a phone was a link
   buried in the menu. This is the same affordance as the menu button, beside it, always visible. */
.msearch{display:none;width:38px;height:38px;border:1px solid var(--line);border-radius:4px;align-items:center;justify-content:center;flex:none;color:var(--ink);transition:border-color var(--t),color var(--t)}
.msearch svg{width:17px;height:17px}
.msearch:hover,.msearch:focus-visible{border-color:var(--indigo);color:var(--indigo)}
@media(max-width:640px){.msearch{display:inline-flex}}

/* The index tables only scrolled sideways on a phone, so every column was a few characters wide and
   the page read as broken. Under 760px each row becomes a card: the title keeps its weight, and
   every other cell prints its column name above the value, from the data-l attribute. */
@media (max-width:760px){
  .rt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rt,.rt tbody,.rt tr,.rt td{display:block;width:auto}
  .rt tr{padding:15px 16px;border:1px solid var(--line-soft);border-radius:8px;background:#fff;margin-bottom:12px}
  .rt tr:last-child{margin-bottom:0}
  .rt td{border:0;padding:0}
  .rt td:empty{display:none}
  .rt td.nm{margin-bottom:10px}
  .rt td.nm a{font-size:15.5px;line-height:1.25}
  .rt td.nm small{display:block;margin-top:4px;color:var(--muted)}
  .rt td[data-l]{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:7px 0;border-top:1px solid var(--line-soft);font-size:13.5px;text-align:left}
  .rt td[data-l]::before{content:attr(data-l);flex:0 0 auto;color:var(--muted);font-size:12.5px}
  .rt td.sc[data-l]{align-items:center}
  .rt .ico{margin-right:8px}
  .tbl-wrap.cards{overflow-x:visible}
}

/* The magnifier on a phone used to be a link to /search. It now opens the header's own search
   field, which is the one the suggestion script is bound to, so a phone gets the same dropdown a
   desktop gets. Checkbox, like the menu, so the header still needs no JavaScript. */
.msrch-cb{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
@media(max-width:640px){
  .hd .top{height:auto;min-height:56px;flex-wrap:wrap;padding:8px 0}
  .msrch-cb:checked ~ .util{display:flex;flex:1 1 100%;order:3;margin:2px 0 6px}
  .msrch-cb:checked ~ .util > a{display:none}
  .msrch-cb:checked ~ .util .search{display:flex;width:100%}
  /* 16px or iOS zooms the page on focus and the header jumps. */
  .msrch-cb:checked ~ .util .search input{font-size:16px}
  .msrch-cb:checked ~ .navrow .msearch,.msrch-cb:checked + .brand ~ .navrow .msearch{border-color:var(--indigo);color:var(--indigo)}
  .search-dd{width:100%;right:0}
}

/* The search page on a phone: the submit was a full width slab under the field. Put it inside the
   field, where a phone keyboard expects it. */
@media(max-width:640px){
  .bigsearch{position:relative;flex-direction:row;align-items:center}
  .bigsearch label{padding-right:104px}
  .bigsearch input{font-size:16px}
  .bigsearch .btn{position:absolute;right:5px;top:5px;height:36px;width:auto;padding:0 16px;font-size:11.5px}
  .bigsearch .btn .ar{display:none}
}
/* The empty state was one grey box of instructions. These are real searches, so the page suggests
   what to type instead of describing it. */
.strytry{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.strytry a{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--line-soft);border-radius:999px;background:#fff;font-size:13px;font-weight:500;color:var(--ink);transition:border-color var(--t),color var(--t)}
.strytry a:hover,.strytry a:focus-visible{border-color:var(--indigo);color:var(--indigo)}
.strytry a span{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}

/* The search hero sat flush against both edges on a phone. Its own rule set padding with the
   shorthand, "30px 0 10px", which also set the left and right to zero and so cancelled the 20px
   the wrapper gives every other section. Only the vertical padding belongs to this class. */
.srch{padding:30px 20px 10px}
/* The results list opens with a heavy rule. With the count wrapping to two lines above it and no
   gap, that rule read as a line struck through the heading. */
.rhead{margin-bottom:12px}
@media (max-width:640px){
  .rhead{align-items:flex-start;gap:4px}
  .rhead h2{line-height:1.45}
  /* A 150px thumbnail column leaves the title about half the screen. The picture is decoration
     here, and the result text is the thing being scanned. */
  .rlist a{grid-template-columns:1fr;gap:10px;padding:18px 0}
  .rlist .ph{display:none}
  .rlist .ph.logo{display:block;width:40px;height:40px}
}
/* Body HTML is wrapped in a scroller by the renderer, but a table can also arrive from a field that
   does not go through it, and one of those pushed a page 9px wider than the screen. This is the
   floor: on a phone no table may be wider than the page, whoever wrote it. */
@media (max-width:760px){
  main table:not(.rt){display:block;width:100%;max-width:100%;overflow-x:auto}
}