/* /connect — how to add Leave to an AI chat. Built from the "Leave Connect Page" Claude Design canvas;
   shared tokens, buttons, nav and footer come from styles.css. */

.cx-hero { max-width: 1100px; margin: 0 auto; padding: clamp(40px, 7vw, 88px) var(--gutter) clamp(28px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: end; }
.cx-hero__text { display: grid; gap: 20px; }
.cx-hero__text .eyebrow { margin-bottom: 0; }
.cx-hero__title { margin: 0; font: 700 clamp(40px, 6vw, 72px)/0.98 var(--sans); letter-spacing: -.035em; text-wrap: balance; }
.cx-hero__lede { max-width: 520px; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; color: var(--body); text-wrap: pretty; }

.cx-address { background: var(--ink); color: var(--paper); border-radius: 20px; padding: clamp(22px, 3vw, 32px); display: grid; gap: 16px; }
.cx-address__top { display: flex; justify-content: space-between; align-items: center; }
.cx-address .mono-label { color: #9a9a9a; }
.cx-address__url { font: 400 clamp(15px, 1.7vw, 20px)/1.3 var(--mono); color: var(--volt); overflow-wrap: anywhere; }
.cx-address__row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.cx-address__note { font-size: 14px; line-height: 1.5; color: #b5b5b5; flex: 1 1 220px; }
.cx-address__note a { color: var(--paper); text-decoration: underline; }
.cx-address__note a:hover { color: var(--volt); }
.cx-address .btn--lime:hover { background: var(--paper); }

.cx-clients { padding-top: 16px; padding-bottom: var(--section-y); display: grid; gap: 24px; }
.cx-clients__head { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; justify-content: space-between; }
.cx-clients h2 { margin: 0; font: 700 clamp(28px, 3.4vw, 36px)/1.1 var(--sans); letter-spacing: -.02em; }
.cx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cx-card { background: var(--card); border: 1px solid #e2e0d9; border-radius: 16px; padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.cx-card__top { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; }
.cx-card h3 { margin: 0; font-size: 24px; letter-spacing: -.01em; }
.cx-card__btn { align-self: flex-start; }
.cx-card p, .cx-card ol { margin: 0; font-size: 15px; line-height: 1.6; color: var(--body); }
.cx-card ol { padding-left: 20px; }
.cx-card .cx-card__fine { font-size: 13px; line-height: 1.5; color: var(--muted); }
.st--soon { background: #e7e5de; color: var(--ink); }

.cx-more { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cx-mini { border: 1px solid #d8d6ce; border-radius: 14px; padding: 20px; display: grid; gap: 8px; align-content: start; }
.cx-mini h3 { margin: 0; font-size: 18px; }
.cx-mini p { font-size: 14px; line-height: 1.5; color: var(--body); }
.cx-mini a { font-size: 14px; font-weight: 600; text-decoration: underline; min-height: 24px; }
.cx-cli { font-size: 14px; color: var(--muted); }
.cx-cli code { font: 400 13px var(--mono); color: var(--ink); background: #e7e5de; padding: 3px 6px; border-radius: 6px; overflow-wrap: anywhere; }

.cx-see { background: var(--ink); color: var(--paper); padding: var(--section-y) 0; }
.cx-see .wrap { display: grid; gap: 28px; }
.cx-see .eyebrow { margin-bottom: 0; }
.cx-see__title { margin: 0; max-width: 760px; font: 700 clamp(30px, 4.2vw, 44px)/1.05 var(--sans); letter-spacing: -.025em; text-wrap: balance; }
.cx-see__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cx-tier { border: 1px solid #333; border-radius: 16px; padding: 26px; display: grid; gap: 10px; align-content: start; }
.cx-tier--locked { border-color: var(--volt); }
.cx-tier .mono-label { color: var(--volt); }
.cx-tier h3 { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.25; }
.cx-tier p, .cx-see__notes p { font-size: 15px; line-height: 1.6; color: #b5b5b5; }
.cx-see__notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.cx-built { padding-top: clamp(40px, 6vw, 64px); padding-bottom: clamp(40px, 6vw, 64px); display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.cx-built h2 { margin: 0 0 8px; font: 700 clamp(26px, 3vw, 32px)/1.1 var(--sans); letter-spacing: -.02em; }
.cx-built p { max-width: 620px; font-size: 16px; line-height: 1.55; color: var(--body); }

@media (max-width: 900px) {
  .cx-hero { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .cx-grid, .cx-see__grid, .cx-see__notes { grid-template-columns: minmax(0, 1fr); }
  .cx-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .cx-more { grid-template-columns: minmax(0, 1fr); }
}