/* Connector reference pages: Vexa palette, distinct family stories, real text in HTML. */
.connector-reference-hero{background:radial-gradient(circle at 82% 24%,rgba(25,199,194,.10),transparent 28%),linear-gradient(180deg,#f7faff 0%,#fff 92%)}
.connector-reference-hero .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,68px);align-items:center}
.connector-reference-hero .integration-identity{margin:16px 0 12px}
.connector-reference-eyebrow{margin-top:12px}
.connector-reference-hero h1{max-width:660px;margin:12px 0 18px}
.connector-reference-hero .lead{max-width:630px}
.connector-reference-hero .hero-actions{margin-top:24px}
.connector-story-figure{width:100%;max-width:590px;margin:0;justify-self:end}
.connector-story-visual{position:relative;overflow:hidden;padding:clamp(22px,3vw,34px);border:1px solid #193b70;border-radius:24px;color:#fff;background:radial-gradient(ellipse at 50% 45%,rgba(21,105,255,.25),transparent 53%),linear-gradient(145deg,#0b2147,#07152e 72%);box-shadow:0 28px 70px rgba(7,26,56,.22)}
.connector-story-visual:before{content:"";position:absolute;inset:12px;border:1px solid rgba(139,190,255,.12);border-radius:17px;pointer-events:none}
.connector-story-stages{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
.connector-story-stage{position:relative;display:flex;min-height:236px;flex-direction:column;padding:20px 16px 18px;border:1px solid rgba(168,199,241,.23);border-radius:17px;background:rgba(13,37,75,.88);box-shadow:0 12px 28px rgba(0,0,0,.15)}
.connector-story-stage:not(:last-child):after{content:"";position:absolute;z-index:2;inset-inline-end:-15px;top:50%;width:12px;height:12px;border-block-start:2px solid #53d8e1;border-inline-end:2px solid #53d8e1;transform:translateY(-50%) rotate(45deg)}
.connector-story-step{display:grid;width:32px;height:32px;place-items:center;margin-bottom:26px;border:1px solid rgba(109,218,232,.6);border-radius:10px;color:#9ef4ec;background:rgba(25,199,194,.12);font-size:12px;font-weight:800}
.connector-story-stage h3{margin:0 0 10px;color:#fff;font-size:17px;line-height:1.25}
.connector-story-stage p{margin:0;color:#bdcce3;font-size:13px;line-height:1.55}
.connector-story-stage--1{border-color:rgba(25,199,194,.72);background:linear-gradient(155deg,rgba(13,61,103,.97),rgba(10,35,75,.98));box-shadow:0 0 0 3px rgba(25,199,194,.08),0 18px 38px rgba(0,0,0,.22)}
.connector-story-stage--1 .connector-story-step{color:#071a38;background:#70e2db;border-color:#70e2db}
.connector-story-figure figcaption{display:flex;flex-direction:column;gap:3px;padding:12px 3px 0;color:#657791;font-size:12px;line-height:1.5}
.connector-story-figure figcaption strong{color:var(--navy);font-size:14px}
.connector-reference-problem h2,.connector-reference-data h2,.connector-reference-use-cases h2,.connector-reference-faq h2{max-width:830px;font-size:clamp(30px,3.5vw,42px);line-height:1.1}
.connector-reference-problem .kicker,.connector-reference-data .kicker,.connector-reference-use-cases .kicker,.connector-reference-faq .kicker{margin-bottom:12px}
.connector-reference-cards{margin-top:32px}
.connector-reference-card{position:relative;min-height:206px;padding:27px 24px 24px;border-color:#e1eafa;border-radius:18px;box-shadow:0 14px 36px rgba(16,48,96,.055)}
.connector-card-index{display:block;margin-bottom:24px;color:var(--blue);font-size:12px;font-weight:900;letter-spacing:.12em}
.connector-reference-card h3{margin:0 0 10px;font-size:19px;line-height:1.25}
.connector-reference-card p,.connector-use-case p{margin:0;color:var(--muted-strong);font-size:15px;line-height:1.6}
.connector-reference-data-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:50px;align-items:center}
.connector-data-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.connector-data-list li{display:flex;min-height:58px;align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--line);border-radius:13px;background:#fff;color:var(--ink);font-size:14px;font-weight:700}
.connector-data-list li span{display:grid;width:25px;height:25px;flex:0 0 25px;place-items:center;border-radius:8px;color:#08766e;background:#e6faf7;font-size:13px}
.connector-reference-use-cases .three{margin-top:30px}
.connector-use-case{padding:22px 22px 20px;border-inline-start:3px solid var(--cyan);border-radius:0 14px 14px 0;background:#fff}
.connector-use-case h3{margin:0 0 9px;font-size:18px;line-height:1.3}
.connector-faq-list{display:grid;max-width:900px;gap:0;margin:28px 0 0;padding:0;list-style:none;counter-reset:connector-faq}
.connector-faq-list li{position:relative;padding:24px 8px 24px 64px;border-top:1px solid var(--line);counter-increment:connector-faq}
.connector-faq-list li:before{content:counter(connector-faq,decimal-leading-zero);position:absolute;inset-inline-start:8px;top:26px;color:var(--blue);font-size:12px;font-weight:900;letter-spacing:.1em}
.connector-faq-list h3{margin:0 0 8px;font-size:18px;line-height:1.35}
.connector-faq-list p{max-width:790px;margin:0;color:var(--muted-strong);font-size:15px;line-height:1.65}
.connector-reference-cta{display:flex;align-items:center;justify-content:space-between;gap:32px}
.connector-reference-cta-actions{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:10px}
.connector-reference-cta-actions .btn{white-space:nowrap}
.connector-story-figure--marketplace .connector-story-stage--1{background:linear-gradient(155deg,#173d77,#102953)}
.connector-story-figure--marketplace .connector-story-stage--1 .connector-story-step{color:#fff;background:#0969ff;border-color:#6aa1ff}
.connector-story-figure--business-system .connector-story-stage--0{background:linear-gradient(155deg,#142d58,#0d2041)}
.connector-story-figure--business-system .connector-story-stage--2{border-color:rgba(115,75,232,.55);background:linear-gradient(155deg,#182f60,#102447)}
.connector-story-figure--business-system .connector-story-stage--2 .connector-story-step{color:#fff;background:var(--violet);border-color:#a38af0}
[dir="rtl"] .connector-story-stage:not(:last-child):after{transform:translateY(-50%) rotate(225deg)}
@media(max-width:900px){.connector-reference-hero .hero-grid{grid-template-columns:minmax(0,1fr)}.connector-story-figure{max-width:680px;justify-self:start}.connector-reference-data-grid{grid-template-columns:minmax(0,1fr);gap:25px}.connector-reference-cta{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.connector-reference-hero h1{font-size:clamp(32px,9vw,40px)}.connector-reference-hero .hero-actions{display:grid;grid-template-columns:1fr}.connector-reference-hero .hero-actions .btn{width:100%}.connector-story-visual{padding:18px;border-radius:19px}.connector-story-stages{grid-template-columns:minmax(0,1fr);gap:12px}.connector-story-stage{min-height:0;padding:15px 16px}.connector-story-step{margin-bottom:12px}.connector-story-stage:not(:last-child):after{inset-inline-end:auto;top:auto;bottom:-9px;inset-inline-start:50%;width:10px;height:10px;transform:translateX(-50%) rotate(135deg)}.connector-reference-cards,.connector-reference-use-cases .three{grid-template-columns:minmax(0,1fr)}.connector-reference-card{min-height:0}.connector-data-list{grid-template-columns:minmax(0,1fr)}.connector-reference-cta-actions{width:100%;flex-direction:column}.connector-reference-cta-actions .btn{width:100%}.connector-faq-list li{padding:22px 0;padding-inline-start:44px}.connector-faq-list li:before{inset-inline-start:0;top:24px}}
