/* Integration pages (/integrations/ and /integrations/<tool>/): a light flavour of the home page. They load
   home.css for the type, colours, masthead, install line, FAQ and footer, and add only what is theirs here:
   the two logos in squares, the numbered how-to, and the grid of other tools. */
.ihero{padding-block:80px 0}
.ihero .col{display:grid;justify-items:center;text-align:center}
.ihero h1{margin-top:40px;font-size:clamp(32px,5vw,52px);line-height:1.06;max-width:16em}
.isub{margin-top:16px;max-width:34em;font:400 clamp(17px,1.6vw,20px)/1.45 var(--sans);letter-spacing:-.01em;color:var(--grey);text-wrap:pretty}
.ihero .install{margin-top:44px;max-width:560px}

/* Two squares, Glitterball on the left, the tool on the right, joined by a dotted line that runs between them. */
.pair{display:flex;align-items:center;gap:0}
.tile{display:grid;place-items:center;width:var(--t,96px);height:var(--t,96px);border-radius:var(--tr,24px);background:var(--sheet);box-shadow:var(--lift);flex:none}
.tile .logo{width:50%;height:50%;color:var(--lc,var(--ink))}
.tile.gb{background:#0d0c0b;color:#fff;color-scheme:dark;box-shadow:0 0 0 .5px rgba(0,0,0,.4),inset 0 0 0 .5px rgba(255,255,255,.16),0 24px 60px -24px rgba(30,24,20,.4)}
.tile.gb .mark{--s:58%}
.join{width:56px;height:2px;margin-inline:6px;background:radial-gradient(circle,var(--quiet) 1px,transparent 1.5px) 0 50%/8px 2px repeat-x;animation:join 1.2s linear infinite}
@keyframes join{to{background-position:8px 50%}}
@media (prefers-reduced-motion:reduce){.join{animation:none}}
@media (max-width:480px){.pair{--t:76px;--tr:24px}.join{width:36px}}


/* How to: numbered white cards on the 720 column */
.ihow{padding-top:120px}
.ihow .say .a,.iworks .say .a{font-size:clamp(26px,3.6vw,42px);line-height:1.08;letter-spacing:-.036em}
.isteps{list-style:none;margin:48px 0 0;padding:0;display:grid;gap:16px;counter-reset:s}
.isteps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:20px;padding:32px;border-radius:32px;background:var(--sheet);box-shadow:var(--card);counter-increment:s}
.isteps li::before{content:counter(s);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--wash);box-shadow:inset 0 0 0 .5px var(--rule);color:var(--ink);font:500 15px/1 var(--sans)}
.isteps h3{margin:4px 0 0;font:500 20px/26px var(--display);letter-spacing:-.015em;color:var(--ink)}
.isteps p{max-width:58ch;margin-top:8px;color:var(--grey);font-size:15px;line-height:1.6;text-wrap:pretty}
.isteps p a{color:var(--ink)}
.isteps b{font-weight:500;color:var(--ink)}
.isteps q{quotes:"\201C" "\201D";color:var(--ink)}
.isteps .cmds{display:grid;gap:8px;margin-top:16px}
.isteps .cmd{padding:12px 16px;gap:12px;font-size:15px;line-height:22px;border:0;border-radius:12px;background:color-mix(in srgb,#000 6%,var(--sheet));box-shadow:none;animation:none;overflow-wrap:anywhere}
.isteps .cmd:hover{background:color-mix(in srgb,#000 9%,var(--sheet))}
.isteps .cmd::after{font-size:14px}
.chip{padding:1px 6px;border-radius:6px;background:var(--wash);box-shadow:inset 0 0 0 .5px var(--rule);color:var(--ink);font-size:.94em;overflow-wrap:anywhere}
@media (max-width:860px){.isteps li{padding:24px;border-radius:24px;gap:16px}}
@media (max-width:480px){.isteps li{grid-template-columns:minmax(0,1fr)}}

/* What you get: the home page's three claims, as three small cards */

/* Works with: every other tool as a card that links to its page */
.iworks{padding-top:120px}
/* The cards run a little wider than the 720 reading column */
.iworks .col{max-width:calc(960px + 40px)}
.tools{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tools a{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:16px;height:100%;padding:20px;border-radius:14px;background:var(--sheet);box-shadow:var(--card);text-decoration:none;transition:box-shadow .2s,transform .2s}
.tools a:hover{box-shadow:var(--lift);transform:translateY(-1px)}
.tools .tile{--t:44px;--tr:10px;box-shadow:var(--ring)}
.tools h3{font:500 17px/22px var(--display);letter-spacing:-.01em;color:var(--ink)}
.tools p{margin-top:4px;color:var(--grey);font-size:14px;line-height:1.5}
@media (max-width:640px){.tools{grid-template-columns:minmax(0,1fr)}}
.ihero+.iworks,.wr+.iworks{padding-top:72px}
/* The ring hero sits where .ihero's top padding used to */
.gh+.wr{padding-top:104px}
/* Four links don't fit beside the wordmark on a phone: Integrations goes, leaving the home page's three */
@media (max-width:560px){.top .links a[href="/integrations/"]{display:none}}

/* Use case pages (/use-cases/<slug>/): three small cards for what the page replaces */
.ihero>.col>.tile.gb{--t:88px}
.iinstead{padding-top:120px}
.iinstead .say{gap:16px;max-width:none}
.iinstead .say .a{font-size:clamp(26px,3.6vw,42px);line-height:1.08;letter-spacing:-.036em}
.iinstead .say .b{max-width:34em;margin-inline:auto;font:400 clamp(17px,1.6vw,20px)/1.45 var(--sans);letter-spacing:-.01em;text-wrap:pretty}
.iinstead .col{max-width:calc(960px + 40px)}
.was{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.was li{padding:24px;border-radius:24px;background:var(--sheet);box-shadow:var(--card)}
.was h3{font:500 17px/22px var(--display);letter-spacing:-.01em;color:var(--ink)}
.was p{margin-top:6px;color:var(--grey);font-size:14px;line-height:1.5;text-wrap:pretty}
@media (max-width:720px){.was{grid-template-columns:minmax(0,1fr)}}