/* Uses the public site's paper, ink and typography. */
.integrations-page .card-head .intro { max-width: 700px; }
.integration-section { padding: 44px 0; }
.integration-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.integration-card { display: flex; flex-direction: column; align-items: flex-start; padding: 30px; border: 1px solid var(--line); border-radius: 20px; }
.integration-mark { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 14px; font-size: 25px; font-weight: 500; color: var(--ink); }
.integration-card h2,.integration-card h3 { margin: 14px 0 0; font-size: 30px; letter-spacing: -.03em; }
.integration-status { margin: 22px 0 0; color: var(--muted); font-size: 13px; }
.integration-card p { line-height: 1.65; }
.integration-detail { color: var(--muted); font-size: 14px; margin-bottom: 26px; }
.integration-card .button { margin-top: auto; min-height: 44px; height: auto; padding: 12px 15px; white-space: normal; gap: 12px; text-align: left; }
.integration-account { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding: 40px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.integration-account h2,.integration-note h2,.integration-guide h2 { font-size: 28px; line-height: 1.2; letter-spacing: -.025em; }
.integration-account p:first-child { margin-top: 0; }
.integration-account .kicker { font-size: 12px; color: var(--muted); letter-spacing: .06em; }
.integration-guide { max-width: 800px; margin-left: max(0px,calc((100% - 1100px)/2)); }
.integration-guide h2 { margin-top: 40px; }
.integration-guide li { padding: 6px 0 6px 5px; }
.integration-guide code { overflow-wrap: anywhere; }
.checksum { font-size: 12px; color: var(--muted); }
@media(max-width:900px) { .integration-grid { grid-template-columns: 1fr; } .integration-card { padding: 26px; } }
@media(max-width:600px) { .integration-account { grid-template-columns: 1fr; gap: 20px; } .integration-section { padding: 28px 0; } }

.integration-icon{width:36px;height:36px;color:var(--ink);flex-shrink:0}
.hub-jumps{display:flex;gap:24px;flex-wrap:wrap}.hub-intro{max-width:740px;line-height:1.65}.hub-choose{margin:30px 0 20px;font-size:20px}.integration-status.beta{color:#46738c}.integration-status.pending{color:var(--muted)}
#hemmingway-apps,#choose-integration,#first-open{scroll-margin-top:85px}

.integration-features{display:flex;flex-wrap:wrap;gap:10px 24px;list-style:none;padding:0;margin:24px 0 30px;color:var(--ink);font-weight:500}.integration-features li{padding:6px 0}.integration-card .integration-detail{margin-top:18px}

/* Preserve each vendor artwork’s intrinsic colors and proportions. */
.app-card img.os,.integration-card img.integration-icon{display:block;object-fit:contain}

.apps-grid .app-card.web .os{color:var(--acc)}

.integration-card { min-width:0; background:var(--paper); transition:transform .3s var(--ease-out),box-shadow .3s ease,border-color .2s ease; }
.integration-card:focus-within { outline:2px solid var(--acc); outline-offset:3px; }
@media(hover:hover) { .integration-card:hover { transform:translateY(-6px); border-color:color-mix(in srgb,var(--ink) 28%,var(--line)); box-shadow:0 2px 4px rgba(34,29,25,.04),0 28px 50px -28px rgba(34,29,25,.45); } }
@media(prefers-reduced-motion:reduce) { .integration-card { transition:none; } .integration-card:hover { transform:none; } }
@media(min-width:601px) and (max-width:1000px) { .integration-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }