/* The directory, both kinds (template-parts/directory-page.php, routed by inc/directory.php): the crumbs, the catalog of
   a hub and a category (the filter column, the rows), the cards of a profile's similar listings, the rating slot, the
   profile's top card with its summary and services, GetSales in action and the bands. Then what the sales tools add
   (.dr-tools): a card's price line, the profile's
   facts in three columns, what a tool does with its verdicts, Choose <tool> if and the switching band. A tool's profile
   also wears the rival pages' verdict marks, price sheet and folded sources (assets/css/alternative.css, loaded before
   this file). Every section is a k- part of the landing kit (assets/css/kit.css); this file lays out only what the
   directory adds. Scoped to .dr. Nothing moves. */

main.dr{padding-top:0}
.dr{--dr-star:color-mix(in srgb,var(--k-amber) 78%,#E08A00);--dr-star-off:color-mix(in srgb,var(--ink) 26%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dr{--dr-star:var(--k-amber)}}
:root[data-theme="dark"] .dr{--dr-star:var(--k-amber)}
.dr [id]{scroll-margin-top:calc(var(--nav-h) + 72px)}
.dr .k-hero{padding-bottom:72px}
.dr .k-eyebrow a{color:inherit;text-decoration:none}
.dr .k-eyebrow a:hover{color:var(--ink)}

/* the crumbs: Directory / Agencies / the category / the agency, in the eyebrow's type */
.dr-crumbs ol{padding:0;list-style:none}
.dr-crumbs li{display:inline-flex;align-items:center;gap:10px;min-width:0}
.dr-crumbs li+li::before{content:"/";opacity:.5}
.dr-crumbs [aria-current]{color:var(--mute)}
.dr-hero .k-hero-txt .dr-crumbs ol{justify-content:center}

/* an agency's tile: its initials on one of five quiet hues, until its own mark comes with its claim */
.dr-tile{display:grid;place-items:center;flex:none;width:var(--s);height:var(--s);border-radius:calc(var(--s) * .26);font:600 calc(var(--s) * .36)/1 var(--display);letter-spacing:-.01em}
.dr-hue-0{background:color-mix(in srgb,var(--ai) 14%,var(--k-card));color:var(--k-ai-ink)}
.dr-hue-1{background:color-mix(in srgb,var(--ok) 16%,var(--k-card));color:var(--k-ok-ink)}
.dr-hue-2{background:color-mix(in srgb,#F2C46B 34%,var(--k-card));color:color-mix(in srgb,#C27A08 80%,var(--ink))}
.dr-hue-3{background:color-mix(in srgb,#E5484D 13%,var(--k-card));color:color-mix(in srgb,#E5484D 80%,var(--ink))}
.dr-hue-4{background:color-mix(in srgb,var(--ink) 8%,var(--k-card));color:var(--ink2)}

/* the category pill: a link on a profile, a label on a card */
.dr-pill{display:inline-flex;align-items:center;align-self:flex-start;height:24px;padding:0 10px;border-radius:999px;background:var(--k-ai-soft);font:500 12.5px/1 var(--sans);color:var(--k-ai-ink);text-decoration:none;white-space:nowrap}
a.dr-pill:hover{background:color-mix(in srgb,var(--ai) 16%,var(--panel))}

/* the rating slot: five stars cut at the value, the value, the count on its site and the day it was read; or the
   outline stars and No Clutch reviews yet */
.dr-rate{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font:400 14.5px/1.4 var(--sans);color:var(--mute)}
.dr-stars{--sw:96px;position:relative;display:block;flex:none;width:var(--sw);height:calc(var(--sw) * 20 / 116)}
.dr-stars svg{display:block;width:var(--sw);height:100%}
.dr-stars-off{fill:none;stroke:var(--dr-star-off);stroke-width:1.3;stroke-linejoin:round}
.dr-stars-on{position:absolute;inset:0 auto 0 0;overflow:hidden}
.dr-stars-on svg{fill:var(--dr-star)}
.dr-rate b{font:600 15px/1 var(--sans);color:var(--ink2)}
.dr-rate-n a{color:var(--ink2);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.dr-rate-n a:hover{text-decoration-color:currentColor}
.dr-rate-at{font:500 11.5px/1.4 var(--mono);letter-spacing:.04em;color:var(--k-faint)}
.dr-rate-claim{font:600 14px/1.4 var(--sans);color:var(--k-ai-ink);text-decoration:none}
.dr-rate-claim:hover{text-decoration:underline;text-underline-offset:3px}
.dr-rate-sm{gap:2px 7px;font-size:13px}
.dr-rate-sm .dr-stars{--sw:72px}
.dr-rate-sm b{font-size:13.5px}
.dr-rate-sm .dr-rate-at{flex-basis:100%;font-size:11px}

/* a tool's profile: the row of its sections, sticky under the nav, each a link down the page */
.dr-cats{position:sticky;top:var(--nav-h);z-index:5;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--ground,#fff) 92%,transparent);backdrop-filter:blur(8px)}
.dr-cats ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:12px 0;list-style:none}
.dr-cats a{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--line);font:500 14px/1 var(--sans);color:var(--ink2);text-decoration:none;white-space:nowrap}
.dr-cats a:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ai) 40%,transparent)}
.dr-cats a span{font:500 12px/1 var(--mono);color:var(--mute)}
.dr-cats a[aria-current]{background:var(--ink2);box-shadow:none;color:var(--ground)}
.dr-cats a[aria-current] span{color:color-mix(in srgb,var(--ground) 70%,transparent)}

/* the cards of a profile's similar listings */
.dr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:36px 0 0;padding:0;list-style:none}
.dr-grid>li{margin:0}
.dr-card{display:flex;flex-direction:column;gap:14px;height:100%;padding:22px;border-radius:18px;background:var(--k-card);box-shadow:var(--k-card-sh);color:inherit;text-decoration:none}
.dr-card:hover{box-shadow:var(--k-card-sh),var(--k-sh)}
.dr-card-top{display:flex;align-items:center;gap:12px}
.dr-card-id{display:flex;flex-direction:column;flex:1;min-width:0}
.dr-card-id b{font:600 16.5px/1.3 var(--display);letter-spacing:-.01em;color:var(--ink2)}
.dr-card-id span{font:400 13.5px/1.4 var(--sans);color:var(--mute)}
.dr-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.dr-card-p{font:400 14.5px/1.55 var(--sans);color:var(--k-text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dr-tags{display:flex;flex-wrap:wrap;gap:6px;margin:auto 0 0;padding:0;list-style:none}
.dr-tags li{padding:4px 9px;border-radius:7px;background:color-mix(in srgb,var(--ink) 5%,transparent);font:500 12px/1.3 var(--sans);color:var(--k-text)}
.dr-tags-lg li{padding:6px 11px;font-size:13.5px}
.dr .dr-more{margin-top:28px}

/* the bands: a heading and a line beside one button */
.dr-band-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px}
.dr-band-in .k-lead{margin-top:10px;max-width:60ch}

/* the catalog of a hub and a category: from 1024 px the filter column left, sticky under the nav and scrolling on its
   own when it is taller than the window (its foot fades while more is below), the rows right. What needs directory.js (the search, the facets, the Filters
   button, the sort) shows only once the catalog's inline line has marked it .dr-js */
.dr .dr-catalog{padding:56px 0 104px}
.dr-cat{display:grid;grid-template-columns:272px minmax(0,1fr);gap:0 48px;align-items:start}
.dr-cat:not(.dr-js) .dr-js-only{display:none}
.dr-side{position:sticky;top:calc(var(--nav-h) + 24px);display:flex;flex-direction:column;gap:28px;max-height:calc(100vh - var(--nav-h) - 48px);overflow-y:auto;overscroll-behavior:contain;padding:2px 8px 28px 2px;scrollbar-width:thin;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent)}
.dr-fh{display:block;margin:0 0 10px;font:500 11.5px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.dr-search-in{position:relative;display:block}
.dr-search-in svg{position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--mute);pointer-events:none}
.dr-search input{box-sizing:border-box;width:100%;height:44px;margin:0;padding:0 14px 0 42px;border:1px solid var(--line);border-radius:12px;background:var(--k-card);font:400 15px/1.2 var(--sans);color:var(--ink);-webkit-appearance:none;appearance:none}
.dr-search input::placeholder{color:var(--k-faint);opacity:1}
.dr-catnav ul,.dr-facet ul{margin:0;padding:0;list-style:none}
.dr-catnav a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:38px;padding:7px 12px;border-radius:10px;font:500 14.5px/1.3 var(--sans);color:var(--ink2);text-decoration:none}
.dr-catnav a:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.dr-catnav a[aria-current]{background:var(--k-card);box-shadow:var(--k-card-sh);font-weight:600}
.dr-n{flex:none;font:500 12px/1 var(--mono);color:var(--mute);font-variant-numeric:tabular-nums}
.dr-facets{display:flex;flex-direction:column;gap:24px}
.dr-facet{min-width:0;margin:0;padding:0;border:0}
.dr-facet legend{float:left;width:100%;padding:0}
.dr-facet legend+ul{clear:both}
.dr-facet label{display:flex;align-items:center;gap:10px;min-height:34px;padding:5px 6px;border-radius:8px;font:400 14.5px/1.3 var(--sans);color:var(--ink2);cursor:pointer}
.dr-facet label:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.dr-facet input{flex:none;width:17px;height:17px;margin:0;accent-color:var(--ai);cursor:pointer}
.dr-opt{flex:1;min-width:0}
.dr-facet input:disabled~span{opacity:.45}
.dr-facet label:has(input:disabled){cursor:default}
.dr-facet label:has(input:disabled):hover{background:none}
.dr-facet:not(.is-all) .dr-opt-x{display:none}
.dr-facet-more{margin:6px 0 0 6px;padding:0;border:0;background:none;font:600 14px/1.4 var(--sans);color:var(--k-ai-ink);cursor:pointer}
.dr-fbtn{display:none}
.dr-fbtn svg{width:17px;height:17px;flex:none}
.dr-fbtn-n{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--ink2);font:600 12px/20px var(--sans);color:var(--ground);text-align:center}
.dr-fbtn-n[hidden]{display:none}
.dr-fbtn[aria-expanded="true"]{border-color:var(--ink2);box-shadow:inset 0 0 0 1px var(--ink2)}

/* the results line ("20 agencies"), Clear filters and the sort above the rows */
.dr-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;min-height:44px;margin:0 0 14px}
.dr-results{margin:0;font:600 20px/1.25 var(--display);letter-spacing:-.02em;color:var(--ink2)}
.dr-clear{font:600 14.5px/1.3 var(--sans);color:var(--k-ai-ink);text-decoration:none}
.dr-clear:hover,.dr-none a:hover{text-decoration:underline;text-underline-offset:3px}
.dr-clear[hidden],.dr-none[hidden],.dr-rows>li[hidden]{display:none}
.dr-sort{position:relative;display:inline-flex;align-items:center;gap:10px;margin-left:auto;font:500 14px/1 var(--sans);color:var(--mute)}
.dr-sort::after{content:"";position:absolute;right:14px;top:50%;width:6px;height:6px;margin-top:-5px;border:solid var(--mute);border-width:0 1.6px 1.6px 0;transform:rotate(45deg);pointer-events:none}
.dr-sort select{height:40px;margin:0;padding:0 36px 0 12px;border:1px solid var(--line);border-radius:10px;background:var(--k-card);font:500 14.5px/1 var(--sans);color:var(--ink2);-webkit-appearance:none;appearance:none;cursor:pointer}
.dr-none{margin:0;padding:28px 24px;border-radius:16px;background:var(--k-card);box-shadow:var(--k-card-sh);font:400 15.5px/1.5 var(--sans);color:var(--k-text)}
.dr-none a{font-weight:600;color:var(--k-ai-ink);text-decoration:none}

/* a row: the tile, then the name with the category pill, one line, the facts, the rating slot (an agency's) or the day
   read (a tool's), and View profile at the end */
.dr-rows{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.dr-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:4px 18px;align-items:start;margin:0;padding:20px 22px;border-radius:16px;background:var(--k-card);box-shadow:var(--k-card-sh)}
.dr-row:hover{box-shadow:var(--k-card-sh),var(--k-sh)}
.dr-row .k-vlogo{margin-top:2px}
.dr-row-body{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.dr-row-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-width:0}
.dr-row-name{margin:0;font:600 18px/1.3 var(--display);letter-spacing:-.015em;overflow-wrap:anywhere}
.dr-row-name a{color:var(--ink2);text-decoration:none}
.dr-row-name a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.dr-row-p{margin:0;max-width:78ch;font:400 15px/1.5 var(--sans);color:var(--k-text);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
/* the facts on one line, a dot before each: the line starts 23 px to the left and that strip is cut away, so a fact
   that opens a line (the first, or one the line wrapped) shows no dot */
.dr-row-facts{display:flex;flex-wrap:wrap;align-items:baseline;max-width:calc(100% + 23px);margin:0 0 0 -23px;font:500 13.5px/1.6 var(--sans);color:var(--ink2);clip-path:inset(0 0 0 23px)}
.dr-row-facts>span{position:relative;min-width:0;padding-left:23px}
.dr-row-facts>span::before{content:"";position:absolute;left:10px;top:calc(.8em - 1.5px);width:3px;height:3px;border-radius:50%;background:var(--mute)}
.dr-row-rate{max-width:46ch;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dr-row-read{margin:0;font:500 11px/1.4 var(--mono);letter-spacing:.04em;color:var(--k-faint)}
.dr-rate-row .dr-rate-at{flex-basis:auto}
.dr-row-go{align-self:center}
/* the light stars: one element, the five stars a mask, filled to the value */
.dr-stars-lite{--sw:72px;background:linear-gradient(90deg,var(--dr-star) var(--v,0%),color-mix(in srgb,var(--ink) 16%,transparent) var(--v,0%));-webkit-mask:var(--dr-star-row) 0 0/100% 100% no-repeat;mask:var(--dr-star-row) 0 0/100% 100% no-repeat}
.dr{--dr-star-row:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 20'%3E%3Cg id='s'%3E%3Cpath d='M10 1.6l2.5 5.3 5.8.7-4.3 4 1.1 5.8L10 14.6l-5.1 2.8 1.1-5.8-4.3-4 5.8-.7z'/%3E%3C/g%3E%3Cuse href='%23s' x='24'/%3E%3Cuse href='%23s' x='48'/%3E%3Cuse href='%23s' x='72'/%3E%3Cuse href='%23s' x='96'/%3E%3C/svg%3E")}
.dr{--dr-star-row-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 20'%3E%3Cg id='s' fill='none' stroke='black' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M10 1.6l2.5 5.3 5.8.7-4.3 4 1.1 5.8L10 14.6l-5.1 2.8 1.1-5.8-4.3-4 5.8-.7z'/%3E%3C/g%3E%3Cuse href='%23s' x='24'/%3E%3Cuse href='%23s' x='48'/%3E%3Cuse href='%23s' x='72'/%3E%3Cuse href='%23s' x='96'/%3E%3C/svg%3E")}
/* a row with no rating: the outline stars, as on a profile */
.dr-stars-lite-off{background:var(--dr-star-off);-webkit-mask-image:var(--dr-star-row-off);mask-image:var(--dr-star-row-off)}

/* the profile: the top card */
.dr-pro .k-wrap{display:flex;flex-direction:column}
.dr-top{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"id acts" "facts acts";gap:0 40px;margin-top:4px;padding:32px;border-radius:24px;background:var(--k-card);box-shadow:var(--k-card-sh),var(--k-sh)}
.dr-top-id{grid-area:id;display:flex;align-items:flex-start;gap:20px;min-width:0}
.dr-top-name{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.dr-h1{margin:2px 0 0;font:600 clamp(32px,3.4vw,46px)/1.05 var(--display);letter-spacing:-.035em;color:var(--ink2);overflow-wrap:anywhere}
.dr-top-facts{grid-area:facts;display:flex;flex-wrap:wrap;gap:14px 40px;margin:26px 0 0;padding:22px 0 0;border-top:1px solid var(--line)}
.dr-top-facts>div{min-width:0}
.dr-top-facts dt{font:500 11px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.dr-top-facts dd{margin:2px 0 0;font:500 15.5px/1.45 var(--sans);color:var(--ink2);overflow-wrap:anywhere}
.dr-top-facts dd a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.dr-top-facts dd a:hover{text-decoration-color:currentColor}
.dr-top-acts{grid-area:acts;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:10px;min-width:220px}
.dr-top-acts .k-btn svg{width:17px;height:17px;flex:none;color:var(--mute)}
.dr-top-acts .k-btn-dark svg{color:inherit;opacity:.7}
.dr-top-acts .k-link{justify-content:center;margin-top:6px;font-size:15px}

/* the profile: Summary left, Services right */
.dr-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:56px;align-items:start;margin-top:56px}
.dr-h2{margin:0;font:600 26px/1.15 var(--display);letter-spacing:-.025em;color:var(--ink2)}
.dr-sum-lead{margin:16px 0 0;max-width:700px;font:400 19px/1.55 var(--sans);color:var(--ink2);text-wrap:pretty}
.dr-sum-p{margin:14px 0 0;max-width:700px;font:400 16.5px/1.65 var(--sans);color:var(--k-text);text-wrap:pretty}
.dr-chips{margin-top:26px}
.dr-chips h3{margin:0 0 10px;font:500 11.5px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.dr-chips .dr-tags{margin:0}
.dr-svc{padding:26px;border-radius:20px;background:var(--k-warm);box-shadow:inset 0 0 0 1px var(--line)}
.dr-svc ul{margin:14px 0 0;padding:0;list-style:none}
.dr-svc li{position:relative;padding:11px 0 11px 30px;font:400 15.5px/1.45 var(--sans);color:var(--ink2)}
.dr-svc li+li{border-top:1px solid var(--line)}
.dr-svc li::before{content:"";position:absolute;left:2px;top:14px;width:16px;height:16px;border-radius:50%;background:var(--k-ai-soft)}
.dr-svc li::after{content:"";position:absolute;left:7.5px;top:17.5px;width:4px;height:7px;border:solid var(--k-ai-ink);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}

/* GetSales in action: the head, the calls, the product's main demo */
.dr-act .k-btns{margin-top:26px}
.dr-demo{margin-top:48px}

/* get listed: the steps and what a profile holds */
.dr-two{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:72px;align-items:start}
.dr-ol{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.dr-ol>li{display:grid;grid-template-columns:52px minmax(0,1fr);padding:24px 0;border-bottom:1px solid var(--line)}
.dr-n{font:500 13px/1.6 var(--mono);letter-spacing:.12em;color:var(--k-ai-ink)}
.dr-ol .k-text{margin-top:6px}
.dr-list{margin:0;padding:0 0 0 20px;font:400 16.5px/1.7 var(--sans);color:var(--k-text)}

/* the sales tools: the hub's line to the agencies, a card's price line with the day read */
.dr-sib{margin:22px 0 0}
.dr-sib .k-link{font-size:15px}
.dr-card-price{display:flex;flex-direction:column;gap:4px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.dr-card-price b{font:600 14.5px/1.45 var(--sans);color:var(--ink2);text-wrap:pretty}
.dr-card-price span{font:500 11px/1.4 var(--mono);letter-spacing:.04em;color:var(--k-faint)}

/* a tool's profile: the mark beside the name, its line, the facts in three columns under both, the day read */
.dr-tools .dr-top{grid-template-areas:"id acts" "facts facts" "read read"}
.dr-tools .dr-top-id .k-vlogo{margin-top:8px}
.dr-top-line{margin:2px 0 0;max-width:62ch;font:400 17px/1.5 var(--sans);color:var(--k-text);text-wrap:pretty}
.dr-tools .dr-top-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 40px}
.dr-tools .dr-top-facts dd{font-size:15px;text-wrap:pretty}
.dr-top-read{grid-area:read;margin:22px 0 0;font:500 11.5px/1.5 var(--mono);letter-spacing:.06em;color:var(--mute)}
.dr-fits li{font-size:15px;line-height:1.5}

/* a tool's profile: what it does, one card per question with its verdict */
.dr-feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:40px 0 0;padding:0;list-style:none}
.dr-feats>li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;margin:0;padding:20px 22px;border-radius:18px;background:var(--k-card);box-shadow:var(--k-card-sh)}
.dr-feats h3{margin:1px 0 0;font:600 16px/1.35 var(--display);letter-spacing:-.01em;color:var(--ink2)}
.dr-feats p{margin:6px 0 0;font:400 14.5px/1.55 var(--sans);color:var(--k-text);text-wrap:pretty}
.dr-price .ap-srcs{margin-top:28px}

/* a tool's profile, the analysis: the section links under the nav, the tool's own features, its plans as cards over the
   sheet's other rows, pros beside cons with the ratings read under them, the integrations; an anchor lands below both
   sticky rows */
.dr-tools [id]{scroll-margin-top:calc(var(--nav-h) + 72px)}
.dr-toc ul{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.dr-toc li{flex:none}
.dr-over .dr-body{margin-top:0}
.dr-tfs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:40px 0 0;padding:0;list-style:none}
.dr-tfs>li{display:flex;flex-direction:column;align-items:flex-start;margin:0;padding:22px 24px;border-radius:18px;background:var(--k-card);box-shadow:var(--k-card-sh)}
.dr-tfs h3{margin:0;font:600 17px/1.3 var(--display);letter-spacing:-.01em;color:var(--ink2)}
.dr-tfs p{margin:8px 0 0;font:400 15px/1.55 var(--sans);color:var(--k-text);text-wrap:pretty}
.dr-tf-plan{margin-top:auto;padding-top:14px;font:500 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--k-ai-ink)}
.dr-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:40px 0 0;padding:0;list-style:none}
.dr-plans-h{margin:44px 0 0;font:600 20px/1.2 var(--display);letter-spacing:-.02em;color:var(--ink2)}
.dr-plans-h+.dr-plans{margin-top:16px}
.dr-plan{display:flex;flex-direction:column;margin:0;padding:24px 24px 22px;border-radius:20px;background:var(--k-card);box-shadow:var(--k-card-sh),var(--k-sh)}
.dr-plan-n{margin:0;font:500 12px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.dr-plan-price{margin:10px 0 0;font:600 26px/1.15 var(--display);letter-spacing:-.025em;color:var(--ink2);text-wrap:balance}
.dr-plan-note{margin:6px 0 0;font:400 13.5px/1.45 var(--sans);color:var(--mute);text-wrap:pretty}
.dr-plan-for{margin:14px 0 0;font:500 15px/1.45 var(--sans);color:var(--ink2);text-wrap:pretty}
.dr-plan ul{margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--line);list-style:none}
.dr-plan li{position:relative;margin:0;padding:5px 0 5px 20px;font:400 14.5px/1.5 var(--sans);color:var(--k-text);text-wrap:pretty}
.dr-plan li::before{content:"";position:absolute;left:3px;top:13px;width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--ai) 55%,transparent)}
.dr-terms{max-width:900px;margin:32px 0 0}
.dr-pc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:40px 0 0}
.dr-pc-col{padding:8px 26px 10px;border-radius:20px;background:var(--k-card);box-shadow:var(--k-card-sh)}
.dr-pc-col h3{margin:18px 0 6px;font:600 20px/1.2 var(--display);letter-spacing:-.02em;color:var(--ink2)}
.dr-pc-col ul{margin:0;padding:0;list-style:none}
.dr-pc-col li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;margin:0;padding:16px 0}
.dr-pc-col li+li{border-top:1px solid var(--line)}
.dr-pc-col .ap-mk{margin-top:1px}
.dr-pc-col b{display:block;font:600 16px/1.35 var(--sans);color:var(--ink2)}
.dr-pc-col p{margin:5px 0 0;font:400 15px/1.55 var(--sans);color:var(--k-text);text-wrap:pretty}
.dr-revs{margin:22px 0 0;font:500 12px/1.6 var(--mono);letter-spacing:.04em;color:var(--mute);text-wrap:pretty}
.dr-ints-in{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:72px;align-items:center}
.dr-ints .dr-tags{margin:0}
.dr-feat .dr-more{margin-top:18px}

/* a tool's profile: switching from it, the head and its calls beside Choose GetSales if */
.dr-switch-in{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:72px;align-items:start}
.dr-switch .k-btns{margin-top:26px}
.dr-switch-list{margin:0;padding:10px 26px;border-radius:20px;background:var(--k-card);box-shadow:var(--k-card-sh),inset 0 0 0 1.5px color-mix(in srgb,var(--ai) 30%,transparent);list-style:none}
.dr-switch-list li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;margin:0;padding:14px 0;font:400 15.5px/1.5 var(--sans);color:var(--k-text);text-wrap:pretty}
.dr-switch-list li+li{border-top:1px solid var(--line)}

/* focus: the kit rings its buttons and links; the directory's own links take the same ring, a pill or a card in its
   own shape */
.dr :is(.dr-crumbs a,.dr-rate-n a,.dr-rate-claim,.dr-top-facts dd a):focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.dr :is(.dr-pill,.dr-cats a,.dr-card,.dr-catnav a,.dr-row-name a,.dr-clear,.dr-none a,.dr-facet-more,.dr-sort select):focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.dr :is(.dr-search input):focus-visible{outline:2px solid var(--blue);outline-offset:1px}

@media (max-width:1100px){
  .dr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dr-two{grid-template-columns:minmax(0,1fr);gap:32px}
  .dr-body{grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:40px}
  .dr-feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dr-switch-in{grid-template-columns:minmax(0,1fr);gap:32px}
  .dr-tfs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dr-ints-in{grid-template-columns:minmax(0,1fr);gap:28px}
}
/* below 1024 px: the search beside the Filters button, the categories as a row of chips that scrolls sideways, the
   facets in a panel the button opens above the rows */
@media (max-width:1023px){
  .dr .dr-catalog{padding:32px 0 88px}
  .dr-cat{grid-template-columns:minmax(0,1fr)}
  .dr-side{position:static;flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:14px 10px;max-height:none;overflow:visible;margin:0 0 22px;padding:0;-webkit-mask-image:none;mask-image:none}
  .dr-search{flex:1 1 220px;min-width:0}
  .dr-search .dr-fh,.dr-catnav .dr-fh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .dr-js .dr-fbtn{display:inline-flex;height:44px;order:2}
  .dr-catnav{order:3;flex:1 1 100%;min-width:0}
  .dr-catnav ul{display:flex;gap:8px;margin:0 calc(var(--k-gutter) * -1);padding:2px var(--k-gutter);overflow-x:auto;scrollbar-width:none}
  .dr-catnav li{flex:none}
  .dr-catnav a{height:36px;min-height:0;padding:0 14px;border-radius:999px;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;white-space:nowrap}
  .dr-catnav a[aria-current]{background:var(--ink2);box-shadow:none;color:var(--ground)}
  .dr-catnav a[aria-current] .dr-n{color:color-mix(in srgb,var(--ground) 70%,transparent)}
  .dr-facets{order:4;flex:1 1 100%;min-width:0}
  .dr-js .dr-facets{display:none;padding:18px 16px 20px;border-radius:16px;background:var(--k-card);box-shadow:var(--k-card-sh)}
  .dr-js .dr-facets.is-open{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px 28px}
}
@media (max-width:899px){
  .dr-top{grid-template-columns:minmax(0,1fr);grid-template-areas:"id" "facts" "acts"}
  .dr-top-acts{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;margin-top:24px;min-width:0}
  .dr-top-acts .k-link{margin:0 0 0 8px}
  .dr-body{grid-template-columns:minmax(0,1fr);gap:40px;margin-top:40px}
  .dr-tools .dr-top{grid-template-areas:"id" "facts" "acts" "read"}
  .dr-tools .dr-top-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dr-pc-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .dr-grid{grid-template-columns:minmax(0,1fr)}
  .dr-row{grid-template-columns:40px minmax(0,1fr);gap:4px 14px;padding:16px}
  .dr-row .dr-tile{width:40px;height:40px;border-radius:11px;font-size:15px}
  .dr-row-name{font-size:17px}
  .dr-row-p{-webkit-line-clamp:2;font-size:14.5px}
  .dr-row-facts{flex-direction:column;align-items:flex-start}
  .dr-row-rate{max-width:none;white-space:normal}
  .dr-row-go{grid-column:2;justify-self:start;margin-top:8px}
  .dr-bar{gap:10px 14px}
  .dr-results{font-size:18px}
  .dr-cats ul{flex-wrap:nowrap;overflow-x:auto;padding:10px 5px;scrollbar-width:none}
  .dr-cats li{flex:none}
  .dr-top{padding:22px 20px;border-radius:20px}
  .dr-top-id{gap:14px}
  .dr-top-id .dr-tile{width:52px;height:52px;border-radius:14px;font-size:19px}
  .dr-top-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;margin-top:20px;padding-top:18px}
  .dr-top-facts .dr-f-site,.dr-top-facts .dr-f-where,.dr-top-facts .dr-f-rate{grid-column:1/-1}
  .dr-top-acts .k-btn{flex:1 1 100%}
  .dr-top-acts .k-link{margin:4px auto 0}
  .dr-svc{padding:20px}
  .dr-demo{margin-top:32px}
  .dr-feats{grid-template-columns:minmax(0,1fr);margin-top:28px}
  .dr-feats>li{padding:18px}
  .dr-tfs{grid-template-columns:minmax(0,1fr);margin-top:28px}
  .dr-tfs>li{padding:18px}
  .dr-plans{grid-template-columns:minmax(0,1fr);margin-top:28px}
  .dr-plan{padding:20px 18px 18px}
  .dr-pc-grid{margin-top:28px}
  .dr-pc-col{padding:4px 18px 6px}
  .dr-tools .dr-top-facts .dr-f-price,.dr-tools .dr-top-facts .dr-f-trial,.dr-tools .dr-top-facts .dr-f-billing{grid-column:1/-1}
  .dr-top-line{font-size:16px}
  .dr-switch-list{padding:6px 18px}
}