/* The integration pages (template-parts/integration.php, root .ip) and their hub (template-parts/integrations-hub.php,
   root .ih), routed by inc/integrations.php and loaded by gs_integration_assets() or gs_integrations_hub_assets() after
   the kit, product.css (the shared finale and its card) and, on a page with a cost, feature.css (its cost card,
   gs_feature_cost(), whose rules hang on its own section.ft-cost). Only the type's own atoms live here: the split
   hero, the flow card, the columns of what it does, the numbered when, the neutral initial tile, the hub's cards and the
   trademark band. Every section is a k- part of the landing kit; the cards follow BRANDBOOK section 20 (a hairline,
   radius 12, no shadow, a status a word). Nothing moves. The columns of what it does (.ip-moves, .ip-cols, .ip-col and
   their tokens) are a shared row too: gs_integration_cards() in inc/integrations.php prints them here and as a product
   page's control row (page.limits), whose page loads this file for it (gs_integration_stylesheet()), so none of their
   rules is scoped to .ip. */

/* ==== tokens: light, then dark as kit.css writes them ============================================================== */
:root{
  --ip-card:var(--k-card,#FFFFFF);--ip-rule:var(--line);
  /* a row that the integration does: the tick in its soft disc; one it does not: a dash, grey */
  --ip-tick:var(--k-ok-ink,var(--ok));--ip-tick-bg:color-mix(in srgb,var(--ok) 12%,transparent);
  --ip-not:var(--mute);--ip-not-bg:var(--sunk);
  /* the neutral initial tile is white in both themes (the kit's .k-vlogo), so its letter is a fixed ink */
  --ip-ini:#16161A;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ip-tick-bg:color-mix(in srgb,var(--ok) 18%,transparent);
    --ip-not-bg:color-mix(in srgb,var(--ink) 8%,transparent);
  }
}
:root[data-theme="dark"]{
  --ip-tick-bg:color-mix(in srgb,var(--ok) 18%,transparent);
  --ip-not-bg:color-mix(in srgb,var(--ink) 8%,transparent);
}

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

/* ---- the neutral initial tile: the kit's white .k-vlogo with the vendor's letter in ink, until a mark is allowed -- */
.ip-ini{font:700 calc(var(--s) * .46)/1 var(--display);letter-spacing:-.01em;text-transform:none;color:var(--ip-ini)}

/* ==== an integration page ============================================================================================ */

/* ---- the hero: the words on the left, the flow card on the right; under 1100 the card goes under the words --------- */
.ip .k-hero{padding:56px 0 112px}
.ip-hero-in{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:72px;align-items:center;max-width:var(--k-wrap);margin:0 auto;padding:0 var(--k-gutter)}
.ip-hero-txt{min-width:0}
.ip-hero .k-h1{margin:22px 0 0;max-width:none;font-size:clamp(38px,3.9vw,56px);line-height:1.04;text-align:left}
.ip-hero .k-hero-dek{margin:22px 0 0;max-width:46ch;text-wrap:pretty}
.ip-hero .k-btns{justify-content:flex-start;margin-top:32px}
/* the eyebrow: "Integrations / <tile> HubSpot", the type's word a link to the hub while the hub is served; the name
   keeps its vendor's own case (folk, n8n, gtm-api.com), the rest of the eyebrow stays the kit's capitals */
.ip-eye-v{display:inline-flex;align-items:center;gap:8px}
.ip-eye-v>span:last-child{text-transform:none}
.ip-eye-a{color:inherit;text-decoration:none}
.ip-eye-a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.ip-eye-a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
/* the facts under the calls: the kit's chips, each its key muted before its value */
.ip-facts{margin-top:28px}
.ip-fact-k{margin-right:7px;font-weight:500;color:var(--mute)}

/* the flow card: what goes where, in the product's crisp card (a hairline, radius 12, no shadow). Its head is the two
   sides, then one row per thing, ours, an arrow, theirs, the note under them */
.ip-flow{min-width:0;width:100%;max-width:540px;margin:0 0 0 auto;border:1px solid var(--ip-rule);border-radius:12px;background:var(--ip-card);color:var(--ink);text-align:left}
.ip-flow-h{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0;padding:16px 20px;border-bottom:1px solid var(--ip-rule)}
.ip-flow-who{display:inline-flex;align-items:center;gap:9px;min-width:0}
.ip-flow-who b{font:700 16px/1.2 var(--sans);color:var(--ink2)}
.ip-flow-ar{display:inline-flex;flex:none;color:var(--mute)}
.ip-flow-ar svg{display:block;width:16px;height:16px}
.ip-flow-rows{margin:0;padding:0;list-style:none}
.ip-flow-rows li{margin:0;padding:16px 20px 17px}
.ip-flow-rows li+li{border-top:1px solid var(--ip-rule)}
.ip-flow-pair{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0;font:600 16px/1.35 var(--sans);color:var(--ink2)}
.ip-flow-pair .ip-flow-ar svg{width:15px;height:15px}
.ip-flow-note{margin:5px 0 0;font:400 14px/1.45 var(--sans);color:var(--mute);text-wrap:pretty}

/* ---- what it does: the head, then the columns as hairline cards side by side (a product page's control row too) --- */
.ip-moves .k-head{max-width:820px}
.ip-cols{display:grid;grid-template-columns:repeat(var(--ip-n,3),minmax(0,1fr));gap:16px;margin-top:48px}
.ip-col{min-width:0;border:1px solid var(--ip-rule);border-radius:12px;background:var(--ip-card)}
.ip-col-h{margin:0;padding:15px 20px 14px;border-bottom:1px solid var(--ip-rule);font:700 15px/1.3 var(--sans);color:var(--ink2)}
.ip-col-rows{margin:0;padding:0;list-style:none}
.ip-col-rows li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;margin:0;padding:15px 20px 16px}
.ip-col-rows li+li{border-top:1px solid var(--ip-rule)}
.ip-mk svg{display:block;width:22px;height:22px;padding:4px;border-radius:50%;background:var(--ip-tick-bg);color:var(--ip-tick)}
.ip-col-rows b{display:block;font:600 15px/1.4 var(--sans);color:var(--ink2)}
.ip-col-rows p{margin:4px 0 0;font:400 14.5px/1.55 var(--sans);color:var(--k-text,var(--ink));text-wrap:pretty}
/* the column of what it does not do: the same card, muted, a dash in place of the tick */
.ip-col-not .ip-col-h{color:var(--mute)}
.ip-col-not .ip-mk svg{background:var(--ip-not-bg);color:var(--ip-not)}
.ip-col-not .ip-col-rows b{color:var(--k-text,var(--ink))}
.ip-col-not .ip-col-rows p{color:var(--mute)}

/* ---- when it runs: three numbered items in a row ------------------------------------------------------------------ */
.ip-when .k-head{max-width:820px}
.ip-when-list{display:grid;grid-template-columns:repeat(var(--ip-n,3),minmax(0,1fr));gap:40px;margin:48px 0 0;padding:0;list-style:none}
.ip-when-list li{min-width:0;margin:0;padding-top:24px;border-top:1px solid var(--line)}
.ip-when-n{display:block;font:500 14px/1 var(--mono);letter-spacing:.14em;color:var(--k-ai-ink,var(--ai))}
.ip-when-h{margin:18px 0 0;font:600 22px/1.25 var(--display);letter-spacing:-.02em;color:var(--ink2);text-wrap:balance}
.ip-when-p{margin:10px 0 0;max-width:40ch;font:400 16.5px/1.6 var(--sans);color:var(--k-text,var(--ink));text-wrap:pretty}

/* ---- set it up: the head on the left, the steps on the right (pages.css .gs-next and .gs-steps-lg) ---------------- */
.ip-setup-steps{min-width:0}

/* ---- the band under the night: the vendors' trademark lines and the day the vendor facts were read --------------- */
.ip-tm{padding:28px 0 32px;background:var(--ground)}
.ip-tm p{margin:0;max-width:120ch;font:400 13px/1.55 var(--sans);color:var(--mute);text-wrap:pretty}
.ip-tm p+p{margin-top:8px;font:500 11.5px/1.5 var(--mono);letter-spacing:.06em}

/* ==== the hub ======================================================================================================== */
.ih .k-hero{padding-bottom:104px}
.ih .k-hero-dek{text-wrap:balance}
/* the groups' head (index.json page.bank), then each kind of integration: its heading and line, its cards three to a row */
.ih-apps .k-head{max-width:820px}
.ih-apps .k-head+.ih-group{margin-top:48px}
.ih-group+.ih-group{margin-top:64px}
.ih-group-h{max-width:720px;margin:0 0 20px}
.ih-group-h .k-h3{font-size:22px;line-height:1.25;letter-spacing:-.015em}
.ih-group-h .k-text{margin-top:6px}
.ih-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.ih-build .k-head{max-width:820px}
.ih-grid-build{margin-top:48px}
/* a card: the tile, the name, its status on the right (the arrow while its page is served, else Coming), its line */
.ih-card{position:relative;display:flex;flex-direction:column;min-width:0;margin:0;padding:20px 22px 22px;border:1px solid var(--ip-rule);border-radius:12px;background:var(--ip-card)}
.ih-card-top{display:flex;align-items:center;gap:12px;min-width:0}
.ih-card-n{flex:1;min-width:0;margin:0;font:700 16px/1.3 var(--sans);color:var(--ink2);overflow-wrap:anywhere}
.ih-card-top .k-pill{flex:none}
.ih-card-go{display:inline-flex;flex:none;color:var(--ai)}
.ih-card-go svg{display:block;width:18px;height:18px}
.ih-card-p{margin:14px 0 0;font:400 14.5px/1.55 var(--sans);color:var(--k-text,var(--ink));text-wrap:pretty}
/* a card with a page is one link: the name's link covers the card, the edge darkens on hover, a ring on focus */
.ih-card-a{color:inherit;text-decoration:none}
.ih-card-a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.ih-card-a:focus-visible{outline:none}
.ih-card-on:hover{border-color:var(--mute)}
.ih-card-on:hover .ih-card-a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.ih-card-on:has(.ih-card-a:focus-visible){outline:2px solid var(--blue);outline-offset:3px}

/* ==== widths ========================================================================================================= */
@media (max-width:1100px){
  .ip .k-hero{padding:44px 0 96px}
  .ip-hero-in{grid-template-columns:minmax(0,1fr);gap:44px;max-width:780px}
  .ip-hero .k-hero-dek{max-width:56ch}
  .ip-flow{max-width:none;margin:0}
}
@media (max-width:1000px){
  .ip-cols{grid-template-columns:minmax(0,1fr);max-width:640px}
  .ih-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .ip .k-hero{padding:28px 0 72px}
  .ip-hero .k-h1{margin-top:18px;font-size:38px;line-height:1.06}
  .ip-hero .k-hero-dek{margin-top:18px;font-size:17px}
  .ip-hero .k-btns{margin-top:28px;margin-inline:0}
  /* a fact longer than the phone's line wraps inside its chip, never past the edge */
  .ip-facts .k-fact{height:auto;min-height:34px;padding:8px 15px;line-height:1.3;white-space:normal}
  .ip-flow-h,.ip-flow-rows li{padding-left:14px;padding-right:14px}
  .ip-cols{margin-top:36px}
  .ip-col-h{padding:13px 16px 12px}
  .ip-col-rows li{padding:13px 16px 14px}
  .ip-when-list{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:36px}
  .ip-when-list li{padding-top:20px}
  .ip-when-h{margin-top:14px;font-size:20px}
  .ip-when-p{max-width:none;font-size:16px}
  .ip-tm{padding:24px 0 28px}
  .ih .k-hero{padding-bottom:72px}
  .ih-apps .k-head+.ih-group{margin-top:36px}
  .ih-group+.ih-group{margin-top:48px}
  .ih-group-h .k-h3{font-size:19px}
  .ih-grid{grid-template-columns:minmax(0,1fr)}
  .ih-grid-build{margin-top:36px}
  .ih-card{padding:18px 18px 20px}
}