/* The alternative page (template-parts/alternative.php, routed by inc/alternatives.php; loaded by gs_alternative_assets()
   after the kit and, on a page with a finale, after product.css, whose shared finale and card it reuses): only what is
   the page type's own. Every section is a k- part of the landing kit (kit.css: the hero, the grounds, the heads, the
   block grid, the comparison table and its sources, the FAQ) and the one picture is the shared demo; nothing here
   restyles either, it only lays out the parts the kit does not have: the rival's name in the eyebrow, the read line
   under the calls, the customers' words after the table, the three reasons, the price sheet, the stack card (template-parts/alternative-stack.php, on the
   hub too), the fair paragraph (in the page's order). Scoped to .ap, the part's root. Nothing moves. */

/* the page starts under the sticky nav with the hero's own padding, as a product page does; an anchor lands clear */
main.gs-alt{padding-top:0}
.ap [id]{scroll-margin-top:calc(var(--nav-h) + 16px)}

/* ---- the hero: no stage (the subject is the comparison), so it ends on the read line under the calls ---------- */
.ap .k-hero{padding-bottom:104px}
.ap .k-hero-dek{text-wrap:balance}
.ap-read{margin:26px 0 0;font:500 12px/1.5 var(--mono);letter-spacing:.06em;color:var(--mute);text-wrap:balance}
.ap-read a{color:var(--ink2);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.ap-read a:hover{text-decoration-color:currentColor}
/* the eyebrow names the rival after the type, as a feature page names its parent: "Alternatives / <mark> ZoomInfo"
   (the slash is the kit's .k-sep) */
.ap-eye-r{display:inline-flex;align-items:center;gap:8px}

/* ---- the table: the kit's .k-cmp under a head as wide as its lead ----------------------------------------------- */
.ap-cmp .k-head{max-width:820px}
.ap-cmp .k-lead{max-width:64ch}

/* ---- the price (warm after the reasons in the default order): the sheet of how the rival prices first on a desktop */
.ap-price .ap-sheet{order:-1}
.ap-ours{margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.ap-ours p{margin:0;font:500 16.5px/1.5 var(--sans);color:var(--ink);text-wrap:pretty}
.ap-ours .k-link{margin-top:14px}
.ap-sheet{min-width:0;border-radius:20px;background:var(--k-card);box-shadow:var(--k-card-sh),var(--k-sh)}
.ap-sheet-h{margin:0;padding:20px 26px 18px;border-bottom:1px solid var(--line)}
.ap-sheet-h b{display:block;font:600 18px/1.3 var(--display);letter-spacing:-.01em;color:var(--ink2)}
.ap-sheet dl{margin:0;padding:4px 26px 8px}
.ap-sheet dl>div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:20px;padding:16px 0}
.ap-sheet dl>div+div{border-top:1px solid var(--line)}
.ap-sheet dt{font:500 11.5px/2.1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.ap-sheet dd{margin:0;font:400 15.5px/1.55 var(--sans);color:var(--k-text);text-wrap:pretty}

/* ---- the three reasons beside the one still: a number, a title, two lines each --------------------------------- */

/* ---- the fair paragraph: the head on the left, the words on the right, on the FAQ's grid ----------------------- */
.ap-fair-in{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:72px;align-items:start}
.ap-fair .k-p{margin:6px 0 0;max-width:60ch;color:var(--k-text)}
.ap-fair .k-p+.k-p{margin-top:18px}

@media (max-width:1200px){
  .ap-price .ap-sheet{order:0}
  .ap-fair-in{grid-template-columns:minmax(0,1fr);gap:24px;max-width:780px}
}
@media (max-width:760px){
  .ap .k-hero{padding-bottom:72px}
  .ap-read{margin-top:22px;font-size:11.5px}
  .ap-sheet-h{padding:16px 18px 14px}
  .ap-sheet dl{padding:2px 18px 6px}
  .ap-sheet dl>div{grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 0}
  .ap-sheet dt{line-height:1.4}
  .ap-ours{margin-top:26px;padding-top:20px}
  /* our line: the price under the words, so the words keep their width; the bar still opens the line */
  /* the reasons' links, two to a row, so the last never stands alone under the others */
  .ap .k-links{display:grid;grid-template-columns:repeat(2,max-content);gap:14px 32px}
}

/* ==== the hub, /alternatives/ (template-parts/alternatives-hub.php, its root .ap.ah): the hero is the rival page's,
   so only the bank's rows and the questions' grid are its own. Nothing moves. ======================================= */

/* ---- the bank: a head, then each kind of tool as a group head over one card of rows ---------------------------- */
.ah-bank .k-head{max-width:820px}
.ah-bank .k-lead{max-width:64ch}
.ah-group{margin-top:56px}
.ah-group+.ah-group{margin-top:64px}
.ah-group-h{max-width:720px;margin:0 0 20px;padding:0}
.ah-group-h .k-h3{font-size:20px;line-height:1.3}
.ah-group-h .k-text{margin-top:6px}
.ah-list{margin:0;padding:0;list-style:none;border-radius:20px;background:var(--k-card);box-shadow:var(--k-card-sh);overflow:hidden}
/* a row: the name, what the tool says it is with the site it was read on (the day only when not the page's), and the
   comparison when one is written; the link's column is kept on every row, so the lines start and end together */
.ah-row{display:grid;grid-template-columns:190px minmax(0,1fr) 210px;gap:0 32px;align-items:start;margin:0;padding:22px 28px}
.ah-row+.ah-row{border-top:1px solid var(--line)}
/* the name with the vendor's mark beside it (kit.css .k-vlogo) */
.ah-name{display:flex;align-items:center;gap:10px;margin:0;font:600 15.5px/1.55 var(--sans);color:var(--ink2)}
.ah-line{margin:0;max-width:72ch;font:400 15.5px/1.55 var(--sans);color:var(--k-text);text-wrap:pretty}
.ah-src{margin:6px 0 0;font:500 11.5px/1.5 var(--mono);letter-spacing:.06em;color:var(--mute)}
.ah-row .ah-go{margin:0;justify-self:end;white-space:nowrap;line-height:1.55}

/* ---- how to choose: the head on the left, the numbered questions on the right ---------------------------------- */
.ah-choose-in{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:72px;align-items:start}
.ah-choose .ah-qs{margin-top:6px}

@media (max-width:1200px){
  .ah-choose-in{grid-template-columns:minmax(0,1fr);gap:32px;max-width:780px}
}
@media (max-width:1000px){
  .ah-row{grid-template-columns:170px minmax(0,1fr);gap:0 24px}
  .ah-row .ah-go{grid-column:2;justify-self:start;margin-top:12px}
}
@media (max-width:760px){
  .ah-group,.ah-group+.ah-group{margin-top:44px}
  .ah-group-h{margin-bottom:16px}
  .ah-group-h .k-h3{font-size:17px}
  .ah-row{grid-template-columns:minmax(0,1fr);padding:18px 20px}
  .ah-name{margin-bottom:8px}
  .ah-row .ah-go{grid-column:1}
  .ah-src{font-size:11px}
  .ah-choose-in{gap:24px}
}

/* ---- the table's verdicts (the founder, 2026-10-26: ticks, not a wall of text): a mark and a short line per cell -- */
.ap-cmp-marks td{vertical-align:middle}
.ap-cmp-marks td,.ap-cmp-marks tbody th{padding-top:16px;padding-bottom:16px}
.ap-cmp-marks td>.ap-mk{float:left;margin:1px 12px 0 0}
.ap-cell-t{display:block;overflow:hidden;font-size:15px;line-height:1.5}
.ap-mk{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%}
.ap-mk svg{width:16px;height:16px}
.ap-mk-yes{background:color-mix(in srgb,var(--ok) 16%,var(--k-card));color:var(--k-ok-ink)}
.ap-mk-part{background:color-mix(in srgb,var(--k-amber) 30%,var(--k-card));color:color-mix(in srgb,var(--k-amber) 40%,var(--ink))}
.ap-mk-no{background:color-mix(in srgb,#E5484D 14%,var(--k-card));color:color-mix(in srgb,#E5484D 86%,var(--ink))}

/* ---- the sources: one closed line under what they back, the receipts for whoever opens them ------------------- */
.ap-srcs{margin-top:20px;font:400 13.5px/1.5 var(--sans);color:var(--mute)}
.ap-srcs summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font:500 12px/1.4 var(--mono);letter-spacing:.04em;color:var(--mute);list-style:none}
.ap-srcs summary::-webkit-details-marker{display:none}
.ap-srcs summary::before{content:"+";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:5px;background:color-mix(in srgb,var(--ink) 6%,transparent);font:600 13px/1 var(--mono)}
.ap-srcs[open] summary::before{content:"\2212"}
.ap-srcs ul{margin:12px 0 0;padding:0 0 0 26px;list-style:none}
.ap-srcs li{margin:4px 0}

/* the hub's fits section without a still: its words alone, full width */
.ap-why-solo .k-blk-in{grid-template-columns:minmax(0,1fr)}

/* ---- why teams switch: three reasons in a row over the product's main demo, live ------------------------------- */
/* the customers who compared GetSales with the rival (the kit's review cards, inc/quotes.php), under the head */
.ap-said .k-reviews{margin-top:40px}
.ap-why-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:40px 0 0;padding:0;list-style:none}
.ap-why-list li{margin:0}
.ap-why-n{display:block;margin-bottom:10px;font:500 13px/1.4 var(--mono);letter-spacing:.12em;color:var(--k-ai-ink)}
.ap-why-list .k-h3{font-size:18.5px;line-height:1.3}
.ap-why-list .k-text{margin-top:6px}
.ap-demo{margin-top:48px}

/* ---- what you get: a card per product, each to its page --------------------------------------------------------- */
.ap-suite-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:40px 0 0;padding:0;list-style:none}
.ap-suite-grid li{margin:0}
/* Creator, the one that sets up the rest, takes two cells, so the seven fill two rows of four */
.ap-suite-grid li:first-child{grid-column:span 2}
.ap-suite-card{position:relative;display:flex;flex-direction:column;gap:8px;height:100%;padding:22px 22px 44px;border-radius:18px;background:var(--k-card);box-shadow:var(--k-card-sh);color:inherit;text-decoration:none;transition:box-shadow .15s}
.ap-suite-card:hover{box-shadow:var(--k-card-sh),var(--k-sh)}
.ap-suite-card .k-tile{margin-bottom:6px}
.ap-suite-card b{font:600 17px/1.3 var(--display);letter-spacing:-.01em;color:var(--ink2)}
.ap-suite-card span:not(.k-tile){font:400 14.5px/1.5 var(--sans);color:var(--k-text);text-wrap:pretty}
.ap-suite-card>svg{position:absolute;left:22px;bottom:18px;width:18px;height:18px;color:var(--k-ai-ink)}

/* ---- which one fits: two verdict cards side by side ------------------------------------------------------------- */
.ap-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:40px}
.ap-pick-card{padding:24px 26px 26px;border-radius:20px;background:var(--k-card);box-shadow:var(--k-card-sh)}
.ap-pick-us{box-shadow:var(--k-card-sh),inset 0 0 0 1.5px color-mix(in srgb,var(--ai) 30%,transparent)}
.ap-pick-h{display:flex;align-items:center;gap:10px;margin:0 0 16px;font:600 19px/1.3 var(--display);letter-spacing:-.01em;color:var(--ink2)}
.ap-pick ul{margin:0;padding:0;list-style:none}
.ap-pick li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;margin:0;padding:10px 0;font:400 15.5px/1.5 var(--sans);color:var(--k-text)}
.ap-pick li+li{border-top:1px solid var(--line)}
/* the reasons to stay are the rival's strengths: a plain tick in the ink, no verdict colour */
.ap-pick-them .ap-mk{background:color-mix(in srgb,var(--ink) 7%,var(--k-card));color:var(--ink2)}

/* ---- the rest of the market: one compact table ------------------------------------------------------------------ */
.ap-oth{margin-top:40px;border-radius:20px;background:var(--k-card);box-shadow:var(--k-card-sh);overflow:hidden}
.ap-oth-t{width:100%;border-collapse:collapse;font:400 15px/1.5 var(--sans);color:var(--k-text);text-align:left}
.ap-oth-t th,.ap-oth-t td{padding:15px 22px;vertical-align:top}
.ap-oth-t thead th{font:500 11.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--line)}
.ap-oth-t tbody th{width:22%;font:600 15px/1.5 var(--sans);color:var(--ink2)}
.ap-oth-t td:last-child{width:26%}
.ap-oth-t tbody tr+tr>*{border-top:1px solid var(--line)}

/* ---- the stack as one table (the founder, 2026-10-26): the job, the stack quiet, GetSales lit; the stack's total loud
   in the warm tone, the time an infinity sign counted nowhere ------------------------------------------------------- */
.ap-stack{--ap-cost:color-mix(in srgb,#E39A16 82%,var(--ink));--ap-cost-soft:color-mix(in srgb,#F2C46B 26%,var(--k-card))}
.ap-vs-head{max-width:820px;margin:0 auto;text-align:center}
.ap-vs-head .k-lead{margin-left:auto;margin-right:auto}
.ap-vs-head .k-eyebrow{justify-content:center}
.ap-vs-stat{margin:14px 0 0;font:600 clamp(28px,2.6vw,38px)/1.15 var(--display);letter-spacing:-.02em;color:var(--k-ai-ink)}
.ap-vs{max-width:1060px;margin:44px auto 0}
.ap-vs-t{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font:400 15px/1.45 var(--sans);color:var(--k-text);text-align:left}
.ap-vs-t th,.ap-vs-t td{padding:14px 20px;vertical-align:middle}
.ap-vs-t thead th{padding-top:20px;padding-bottom:16px;vertical-align:bottom}
.ap-vs-jobh{width:27%;font:500 11.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.ap-vs-t thead .ap-vs-them b{display:block;font:600 17px/1.3 var(--display);color:var(--mute)}
.ap-vs-t thead small{display:block;margin-top:4px;font:500 11px/1.35 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.ap-vs-t tbody th,.ap-vs-t tfoot th{font:600 15px/1.4 var(--sans);color:var(--ink2)}
.ap-vs-t tbody tr>*{border-top:1px solid var(--line)}
/* the stack: grey marks, quiet words, the price on the right in the ink */
.ap-vs-them{color:var(--mute)}
.ap-vs-them-in,.ap-vs-us-in{display:flex;align-items:center;gap:12px;min-width:0}
.ap-vs-them .k-vlogo{filter:grayscale(1);opacity:.6}
.ap-vs-name{display:flex;flex-direction:column;min-width:0;flex:1}
.ap-vs-name b{font:600 15px/1.35 var(--sans);color:var(--k-text)}
.ap-vs-name span{font:400 13.5px/1.4 var(--sans);color:var(--mute)}
.ap-vs-them .ap-vs-name b{color:var(--mute)}
.ap-vs-sum{font:600 15.5px/1.3 var(--sans);font-variant-numeric:tabular-nums;color:var(--k-text);white-space:nowrap}
.ap-vs-tag{align-self:flex-start;margin:2px 0 3px;padding:3px 6px;border-radius:5px;background:color-mix(in srgb,var(--ink) 6%,transparent);font:600 9.5px/1 var(--mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.ap-vs-inf{flex:none;width:28px;font:500 30px/1 var(--display);text-align:center;color:var(--ap-cost)}
.ap-vs-time .ap-vs-name b{color:var(--ap-cost)}
/* GetSales: the lit column, a raised panel drawn cell by cell (its edges on each cell, its top and foot rounded) */
.ap-vs-t .ap-vs-gs{background:color-mix(in srgb,var(--ai) 5%,var(--k-card));box-shadow:inset 1.5px 0 0 color-mix(in srgb,var(--ai) 32%,transparent),inset -1.5px 0 0 color-mix(in srgb,var(--ai) 32%,transparent);color:var(--ink2)}
.ap-vs-t thead .ap-vs-gs{border-radius:18px 18px 0 0;box-shadow:inset 1.5px 0 0 color-mix(in srgb,var(--ai) 32%,transparent),inset -1.5px 0 0 color-mix(in srgb,var(--ai) 32%,transparent),inset 0 1.5px 0 color-mix(in srgb,var(--ai) 32%,transparent)}
.ap-vs-t tfoot .ap-vs-gs{border-radius:0 0 18px 18px;box-shadow:inset 1.5px 0 0 color-mix(in srgb,var(--ai) 32%,transparent),inset -1.5px 0 0 color-mix(in srgb,var(--ai) 32%,transparent),inset 0 -1.5px 0 color-mix(in srgb,var(--ai) 32%,transparent);background:color-mix(in srgb,var(--ai) 10%,var(--k-card))}
.ap-vs-who{display:flex;align-items:center;gap:10px}
.ap-vs-who b{font:600 19px/1.3 var(--display);letter-spacing:-.01em;color:var(--ink2)}
.ap-vs-t thead .ap-vs-gs small{color:var(--k-ai-ink)}
.ap-vs-ck{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--ok) 16%,var(--k-card));color:var(--k-ok-ink)}
.ap-vs-ck svg{width:15px;height:15px}
.ap-vs-gs .ap-vs-name b{color:var(--ink2)}
.ap-vs-gs .ap-vs-name span{color:var(--k-text)}
.ap-vs-incl{flex:none;font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--k-ok-ink)}
/* the foot: the stack's total loud in the warm tone, ours in the primary */
.ap-vs-t tfoot th,.ap-vs-t tfoot td{padding-top:18px;padding-bottom:20px;border-top:1px solid var(--line)}
.ap-vs-total{display:flex;align-items:baseline;gap:8px}
.ap-vs-total b{font:600 30px/1.1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--k-ai-ink)}
.ap-vs-total small{font:400 14px/1.3 var(--sans);color:var(--mute);white-space:nowrap}
.ap-vs-total-them{display:inline-flex;padding:6px 12px;border-radius:10px;background:var(--ap-cost-soft)}
.ap-vs-total-them b{color:var(--ap-cost)}
.ap-vs-quote{font-size:18px!important}
.ap-vs-point{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:6px 18px;margin:26px 0 0;text-align:center}
.ap-vs-point span{font:400 15.5px/1.5 var(--sans);color:var(--k-text)}
.ap-vs-point .k-link{margin-top:0}
.ap-stack .ap-srcs{text-align:center}
.ap-stack .ap-srcs ul{text-align:left;max-width:760px;margin-left:auto;margin-right:auto}

@media (max-width:1200px){
  .ap-suite-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .ap-pick{grid-template-columns:minmax(0,1fr)}
  .ap-why-list{grid-template-columns:minmax(0,1fr);gap:20px}
}
@media (max-width:760px){
  .ap-suite-grid{grid-template-columns:minmax(0,1fr)}
  .ap-suite-grid li:first-child{grid-column:auto}
  .ap-vs-t,.ap-vs-t tbody,.ap-vs-t tfoot,.ap-vs-t tr{display:block}
  .ap-vs-t thead{display:none}
  .ap-vs-t tbody tr,.ap-vs-t tfoot tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:10px;border-radius:14px;background:var(--k-card);box-shadow:var(--k-card-sh);overflow:hidden}
  .ap-vs-t tr>*{display:block;border:0!important}
  .ap-vs-t tbody th,.ap-vs-t tfoot th{grid-column:1/-1;padding:12px 14px 4px;font-size:14px}
  .ap-vs-t td{padding:8px 14px 14px}
  .ap-vs-t .ap-vs-gs{border-radius:0!important;box-shadow:none!important}
  .ap-vs-them-in,.ap-vs-us-in{flex-wrap:wrap;gap:8px}
  .ap-vs-them .k-vlogo{display:none}
  .ap-vs-incl{display:none}
  .ap-vs-total b{font-size:24px}
  .ap-vs-total-them{padding:4px 8px}
  .ap-vs-total small{font-size:12.5px}
  .ap-pick-card{padding:20px 18px 20px}
  .ap-oth-t thead{display:none}
  .ap-oth-t,.ap-oth-t tbody,.ap-oth-t tr,.ap-oth-t th,.ap-oth-t td{display:block;width:auto!important}
  .ap-oth-t tbody tr{padding:14px 18px}
  .ap-oth-t tbody tr+tr{border-top:1px solid var(--line)}
  .ap-oth-t th,.ap-oth-t td{padding:0;border:0!important}
  .ap-oth-t td{margin-top:4px}
  .ap-oth-t td[data-th="Channels"]{font:500 12px/1.4 var(--mono);color:var(--mute)}
  .ap-demo{margin-top:32px}
}