/* ==========================================================================
   AKA CONNECT — integrations page
   Figma node 208:8073 (1470x3394): hero with four benefit cards, a bento of
   integration categories, then the dark Developer API band.
   Card fills come straight from the design: rgba(242,243,246,.5) for the
   plain cards, #F6F5FE for the wide ones, #989CB2 for CRM and ERP.
   ========================================================================== */

/* ---------- hero ---------- */

.i-hero {
  display: grid;
  /* The two tracks are fixed at the design's widths and total less than the
     shell, so the leftover has to be split evenly — left-aligned by default it
     dumps ~230px of dead space on the right. Figma insets this block 138 / 142. */
  grid-template-columns: minmax(0, 635px) 470px;
  justify-content: center;
  /* 90 rather than 60: centring alone leaves 115/60/115, and the wider gutter
     lands on 100/90/100 — within ~10px of Figma's 108/93/112 on every measure.
     space-around would also centre it, but at 58/175/58 the outer margins come
     out half the design's. */
  gap: 90px;
  align-items: start;
  max-width: var(--shell);
  margin: 60px auto 0;
  padding: 0 var(--gutter);
}
.i-hero__title {
  font: var(--h1);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
}
.i-hero__title em { font-style: normal; color: var(--gray-purple); }
.i-hero__lead {
  max-width: 395px;
  margin-top: 30px;
  font: var(--t1);
  letter-spacing: 0;
  color: var(--ink-text);
}
.i-hero__cta { margin-top: 40px; }

.i-hero__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.benefit {
  display: flex;
  flex-direction: column;
  gap: 23px;
  padding: 20px;
  background: var(--white);
  border-radius: var(--r-plan);
  box-shadow: var(--inner-purple);
}
.benefit img { height: 18px; width: auto; align-self: flex-start; }
.benefit__name { font: var(--h4); letter-spacing: 0; color: var(--ink-text); }
.benefit__desc { margin-top: 10px; font: var(--t-med); letter-spacing: 0; color: var(--gray-purple); }

/* ---------- bento ---------- */

/* Figma 204:3979 wraps the whole bento in a 1430-wide #F6F7F9 panel and makes
   every card plain white — the tinted card variants belong to the other
   integrations frame (208:8073), which this page used to follow. */
.bento {
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--content);
  margin: 90px auto 0;
  padding: 60px;
  background: #F6F7F9;
  border-radius: 40px;
}
.bento__head { max-width: 640px; }
.bento__title {
  margin-top: 10px;
  font: var(--h2);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
}

.bento__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

/* Each card is a <details> so the phone layout can collapse it (see the
   accordion block below). Spacing is set with margins rather than a flex gap
   because the name and its description read as one block in the design, and a
   gap cannot be cancelled for a single pair. */
.icard {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border-radius: var(--r-plan);
  background: var(--white);
}
/* 30px between the parts, which is the gap the cards elsewhere on the site use
   at this padding. The title and its description are the one pair that sits
   closer, since they read as one block. */
.icard > * + * { margin-top: 30px; }
.icard__head + .icard__desc { margin-top: 12px; }
/* not a control on a wide screen, where every card is open — the script
   also takes it out of the tab order there */
.icard__head { list-style: none; pointer-events: none; }
.icard__head::-webkit-details-marker { display: none; }
.icard--wide { grid-column: span 2; }
.icard__name { font: var(--h3); letter-spacing: 0; color: var(--ink-text); }
.icard__desc { font: var(--t-med); letter-spacing: 0; color: var(--gray-purple); }

/* brand-name list, as the design renders it for CRM / helpdesk / ERP */
.icard__brands {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: var(--t-med);
  letter-spacing: 0;
  color: var(--gray-purple);
}
.icard__brands li { position: relative; padding-left: 14px; }
.icard__brands li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
}

/* logo row — Figma 204:3979 seats each logo in a 55px accent circle with 5px
   padding, so the ring reads as part of the brand mark rather than a border */
/* The logo row sits on the card's floor, which takes two things.

   One: the cards are <details>, and Chrome lays their contents out inside a
   ::details-content box, so the logos are not a flex child of the card and an
   auto margin has nothing to push against. Giving that box flex: 1 hands it the
   card's spare height, and the row can reach the bottom of it. Browsers without
   the pseudo-element leave the children as flex items of the card, where the
   auto margin already worked, so the rule simply does not apply there.

   Two: on the tallest card in a row there is no spare height at all, and auto
   resolving to nothing also cancels the 30px every other child of the card
   gets. So the gap above the row is padding rather than margin — a distance it
   always keeps from the text, whether or not auto has anything to hand out. */
.icard::details-content { flex: 1 1 auto; display: flex; flex-direction: column; }
.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 30px;
}
.logo-chip {
  /* The accent is a ring around a white surface, so it is a border rather than
     a background — that way nothing sits on top of the logo to clip it, and a
     wide wordmark simply stretches the chip into a pill (Figma 204:3979). */
  display: grid;
  place-items: center;
  flex: none;
  width: 55px;
  height: 55px;
  border: 5px solid var(--chip-accent, transparent);
  border-radius: 100px;
  background: var(--chip-fill, var(--white));
}
/* default: the asset is a finished circular badge, so it meets the ring */
.logos .logo-chip img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
}
/* a flat wordmark instead: inset it inside the same circle */
/* 30px is the largest a square mark can be and still sit inside the 45px
   disc (a square's corners reach r=21.2 against the circle's 22.5), and the
   narrow side padding lets a wide wordmark run to 37px. */
.logo-chip--mark { padding: 0 4px; }
.logos .logo-chip--mark img {
  width: 100%;
  height: 30px;
  border-radius: 0;
  object-fit: contain;
}

/* CRM and e-commerce sit their mark on the accent itself, not on white */
.logo-chip--tint { --chip-fill: var(--chip-accent); }

/* Three brands own their chip colour rather than borrowing an accent — without
   these, HubSpot and Pipedrive would tint the same grey-purple as the CRM card
   they sit on and disappear into it. */
/* These three ring a solid brand disc with a lighter accent, the way the
   design draws them — the ring is not just a paler edge of the same fill. */
.logo-chip--hubspot   { --chip-accent: var(--accent-peach);  --chip-fill: #FC7854; }
.logo-chip--pipedrive { --chip-accent: var(--gray-purple);   --chip-fill: #242424; }
.logo-chip--bitrix    { --chip-accent: var(--accent-peach);  --chip-fill: #E46C00; }

/* A wide logo stretches its chip into a pill. On its own the chip is a badge
   and the artwork fills it (SAP ships its own blue field); paired with --mark
   the logo is inset on the chip's fill instead (1C, Razorpay, Braintree). */
.logo-chip--pill { width: auto; min-width: 55px; }
.logos .logo-chip--pill img {
  width: auto;
  height: 45px;
  border-radius: 100px;
  object-fit: contain;
}
.logo-chip--pill.logo-chip--mark { padding: 0 10px; }

/* Optical centring for the wordmark pills. A logo's bounding box includes the
   bits that stick out — an i-dot, a registered mark — so centring the box
   leaves the letters visibly low or to one side. These offsets are measured
   from each asset's ink (x-height band vs box centre) and are only valid for
   the current artwork: re-measure if a logo is replaced. */
.logo-chip--nudge-servicenow img { transform: translateY(-4.4px); }
.logo-chip--nudge-braintree  img { transform: translateY(-4.5px); }
.logo-chip--nudge-razorpay   img { transform: translate(2.6px, -2.7px); }
.logo-chip--nudge-jira       img { transform: translate(-3.7px, -2.6px); }
.logo-chip--nudge-1c         img { transform: translateX(5.9px); }
.logos .logo-chip--pill.logo-chip--mark img { height: 30px; border-radius: 0; }

.logo-chip--lgreen       { --chip-accent: var(--accent-lgreen); }
.logo-chip--lavender     { --chip-accent: var(--accent-lavender); }
.logo-chip--blue         { --chip-accent: var(--accent-blue); }
.logo-chip--peach        { --chip-accent: var(--accent-peach); }
.logo-chip--pink         { --chip-accent: var(--accent-pink); }
.logo-chip--lemon        { --chip-accent: var(--accent-lemon); }
.logo-chip--light-purple { --chip-accent: var(--light-purple); }
.logo-chip--gray-purple  { --chip-accent: var(--gray-purple); }
.logos img { height: 34px; width: auto; object-fit: contain; }
.logos--round img { width: 34px; border-radius: 50%; }
.logos__more {
  /* the count is a footnote to the row, not another chip in it, so it sits out
     at the card's edge rather than crowding the last logo */
  margin-left: auto;
  font: var(--t-med);
  letter-spacing: 0;
  color: var(--gray-purple);
  white-space: nowrap;
}

/* the plain text block that sits in the grid without a card */
.bento__note {
  display: flex;
  align-items: center;
  padding: 10px 0;
  font: var(--t1);
  letter-spacing: 0;
  color: var(--ink-text);
}
.bento__explore { display: flex; align-items: center; justify-content: flex-end; }

/* ---------- developer API band ---------- */

.devapi {
  position: relative;
  overflow: hidden;
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--content);
  margin: 90px auto 60px;
  padding: 81px 120px;
  background: var(--ink);
  border-radius: 40px;
  color: var(--white);
}
.devapi__glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  opacity: .3;
  background: radial-gradient(closest-side,
              #66538C 0%, #D3BDFF 40.4%, #1E1E1E 93.3%, rgba(30, 30, 30, 0) 100%);
}
.devapi__glow--1 { right: -560px; top: -79px;  width: 1040px; height: 596px; }
.devapi__glow--2 { left: -773px;  top: -461px; width: 1289px; height: 765px; }

.devapi__grid {
  position: relative;
  display: grid;
  grid-template-columns: 527px minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}
.devapi__title {
  margin-top: 10px;
  font: var(--h2);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--white);
}
.devapi__lead {
  margin-top: 30px;
  font: var(--t1);
  letter-spacing: 0;
  color: var(--gray-purple);
}
.devapi__cta { margin-top: 40px; }

.api-cards { display: flex; flex-direction: column; gap: 10px; }
.api-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 30px;
  background: var(--panel-dark);
  border-radius: var(--r-plan);
}
.api-card__bar { width: 19px; height: 19px; flex: none; margin-top: 2px; object-fit: contain; }
.api-card__name {
  font: var(--t-bold);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--white);
}
.api-card__desc { margin-top: 8px; font: var(--t-med); letter-spacing: 0; color: var(--gray-purple); }

/* ---------- responsive ---------- */

@media (max-width: 1240px) {
  .i-hero { grid-template-columns: 1fr; gap: 40px; }
  .devapi { padding: 60px 40px; }
  .devapi__grid { grid-template-columns: 1fr; gap: 40px; }
  .bento__grid { grid-template-columns: repeat(2, 1fr); }
  .icard--wide { grid-column: span 2; }
  .bento__explore { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .i-hero { margin-top: 32px; }
  .i-hero__title { font-size: 34px; }
  .i-hero__cards { grid-template-columns: 1fr; }
  /* Figma 278:18648 sets the section headings at 20/26 on a phone — much
     smaller than the desktop h2, which was only being stepped down to 26. */
  .bento__title, .devapi__title { font-size: 20px; line-height: 1.3; }
  /* ---- integrations catalogue, phone — Figma 278:18648 ----
     The panel drops away so the heading sits on the page, and the cards become
     a plain disclosure list: title and chevron closed, copy and logos open.
     <details> gives the keyboard and screen-reader behaviour for free. */
  .bento {
    padding: 0;
    background: none;
    border-radius: 0;
  }
  .bento__grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
  }
  /* the lead sits under the heading here, and the catalogue link goes last */
  .bento__note { order: -1; padding: 0; margin-bottom: 20px; font-size: 15px; }
  .bento__explore { order: 9; justify-content: flex-start; margin-top: 12px; }
  /* the design's own running order for the categories */
  .icard--msg  { order: 1; }
  .icard--mail { order: 2; }
  .icard--prod { order: 3; }
  .icard--pay  { order: 4; }
  .icard--crm  { order: 5; }
  .icard--ecom { order: 6; }
  .icard--desk { order: 7; }
  .icard--erp  { order: 8; }

  .icard {
    padding: 12px 16px;
    border-radius: 12px;
    background: #F6F7F9;
  }
  .icard > * + * { margin-top: 12px; }
  /* the phone accordion is its own design and already signed off: the title
     row sits tight on its description, and the count follows the last logo */
  .icard__head + .icard__desc { margin-top: 0; }
  .logos { margin-top: 0; padding-top: 0; }
  .logos__more { margin-left: 0; }
  .icard__name { font-size: 16px; line-height: 1.4; }

  .icard__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    pointer-events: auto;
  }
  .icard__head::after {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    margin-right: 3px;
    border-right: 2px solid var(--ink-text);
    border-bottom: 2px solid var(--ink-text);
    transform: translateY(-3px) rotate(45deg);
    transition: transform .2s ease;
  }
  .icard[open] > .icard__head::after { transform: translateY(2px) rotate(-135deg); }
  .icard__head:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; }
  /* the design runs this band to both screen edges, like the chart band on
     the features page, and centres its action underneath the cards */
  .devapi {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: 32px 18px;
    border-radius: 24px;
  }
  .devapi__cta { margin-top: 28px; text-align: center; }
  .api-card { padding: 18px 20px; gap: 14px; }
}