/* AI Crew, 21 Sep 2026 feedback pass.
   1. Case strip carousel (site wide)       .aic-strip-sec, .cs-*
   2. Process infographic on case studies   .aic-flow, .fl-*
   3. Stack chips with real logos           .stack-chip img
   4. Mobile fixes: icon ligatures, hero wrap, teaching video
*/

/* ---------- 4a. Icon font: never print "arrow_forward" as text ---------- */
.material-symbols-outlined { display:inline-block; width:1em; overflow:hidden; white-space:nowrap; flex-shrink:0; }
html:not(.ms-ready) .material-symbols-outlined { color:transparent !important; -webkit-text-fill-color:transparent !important; }

/* ---------- 1. Case strip ---------- */
.aic-strip-sec { background:linear-gradient(180deg,#F8F9FB 0%,#FFFFFF 100%); padding:72px 0 64px; overflow:hidden; }
.aic-strip-sec.tight { padding:40px 0 56px; background:#F8F9FB; }
.aic-strip-head { max-width:1400px; margin:0 auto 28px; padding:0 24px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
@media (min-width:1024px){ .aic-strip-head { padding:0 40px; } }
.aic-strip-eyebrow { font:700 11px/1 'Plus Jakarta Sans',sans-serif; letter-spacing:.22em; text-transform:uppercase; color:#6B7280; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.aic-strip-eyebrow i { width:6px; height:6px; border-radius:50%; background:linear-gradient(135deg,#aec6ff,#6ad9c3,#ffbe2e); display:inline-block; }
.aic-strip-title { font:800 clamp(1.9rem,4vw,3.1rem)/.98 'Plus Jakarta Sans',sans-serif; letter-spacing:-.035em; color:#0B1326; margin:0; }
.aic-strip-title span { background:linear-gradient(135deg,#4a7fff 0%,#18c4a3 50%,#ffaa00 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.aic-strip-all { font:700 14px/1 'Plus Jakarta Sans',sans-serif; color:#0B1326; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; padding:12px 16px; border:1px solid #E5E7EB; border-radius:12px; background:#fff; transition:background .2s; }
.aic-strip-all:hover { background:#F1F4FA; }
@media (max-width:640px){ .aic-strip-head { flex-direction:column; align-items:flex-start; gap:14px; } .aic-strip-sec { padding:56px 0 48px; } }

.cs-root { position:relative; width:100%; max-width:1240px; margin:0 auto; outline:none; user-select:none; -webkit-user-select:none; padding:6px 0; }
.cs-stage { position:relative; width:100%; }
.cs-card { position:absolute; left:50%; top:50%; will-change:transform; border-radius:32px; background:#fff; color:#0B1326;
  box-shadow:0 10px 30px rgba(95,109,119,.10),0 4px 12px rgba(95,109,119,.07);
  transition:transform .72s cubic-bezier(.3,1.16,.45,1), width .72s cubic-bezier(.3,1.16,.45,1), height .72s cubic-bezier(.3,1.16,.45,1), opacity .45s ease; }
.cs-card:not(.is-active) { cursor:pointer; }
.cs-clip { position:absolute; inset:0; overflow:hidden; border-radius:inherit; }
.cs-n { position:absolute; top:0; bottom:0; margin:auto 0; width:22px; height:42px; color:#fff; display:none; pointer-events:none; z-index:3; }
.cs-n svg { width:100%; height:100%; display:block; fill:currentColor; overflow:visible; }
.cs-card.notch-l .cs-n.r { display:block; left:calc(100% - 1px); }
.cs-card.notch-r .cs-n.l { display:block; right:calc(100% - 1px); }
.cs-card.notch-sm .cs-n { width:18px; height:28px; }

.cs-peek { position:absolute; inset:0; padding:8px; transition:opacity .22s ease; }
.cs-card.is-active .cs-peek { opacity:0; pointer-events:none; }
.cs-peek-in { width:100%; height:100%; border-radius:24px; overflow:hidden; background:#EEF1F6; }
.cs-peek-in img { width:100%; height:100%; object-fit:cover; display:block; }

.cs-full-wrap { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.cs-full { width:100%; height:100%; display:flex; gap:24px; padding:28px; opacity:0; pointer-events:none;
  transition:transform .72s cubic-bezier(.3,1.16,.45,1), opacity .35s ease; }
.cs-card.is-left .cs-full { transform:translateX(-822px); }
.cs-card.is-right .cs-full { transform:translateX(822px); }
.cs-card.is-active .cs-full { opacity:1; transform:none; pointer-events:auto; transition-delay:0s,.08s; }

.cs-text { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:space-between; gap:14px; padding:4px 0; }
.cs-title { font:800 30px/1.08 'Plus Jakarta Sans',sans-serif; letter-spacing:-.025em; color:#0B1326; margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.cs-did { font:400 15.5px/1.55 'Inter',sans-serif; color:#3A4256; margin:0; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.cs-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.cs-stats b { display:block; font:800 22px/1 'Plus Jakarta Sans',sans-serif; letter-spacing:-.02em;
  background:linear-gradient(135deg,#2f66ff 0%,#0f9e84 55%,#c98a00 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.cs-stats span { display:block; margin-top:6px; font:700 9.5px/1.25 'Plus Jakarta Sans',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#6B7280; }

.cs-meta { display:flex; flex-direction:column; align-items:flex-start; min-width:0; max-width:100%; }
.cs-chip { display:inline-flex; align-items:center; gap:8px; max-width:100%; border-radius:6px; background:#F1F4FA; padding:6px 10px; }
.cs-client { font:700 13px/1.2 'Plus Jakarta Sans',sans-serif; color:#0B1326; }
.cs-client > span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs-logo { height:20px; width:auto; max-width:92px; object-fit:contain; flex:0 0 auto; }
.cs-logo.sq { height:18px; max-width:18px; }
.cs-notch { display:block; padding:0 12px; height:6px; margin:-1px 0; color:#F1F4FA; position:relative; z-index:1; line-height:0; }
.cs-notch svg { fill:currentColor; overflow:visible; display:block; }
.cs-loc { font:500 12px/1.2 'Inter',sans-serif; color:#6B7280; }
.cs-loc > span:last-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs-loc .material-symbols-outlined { font-size:15px; color:#18c4a3; }
.cs-read { font:700 13.5px/1 'Plus Jakarta Sans',sans-serif; color:#0B1326; display:inline-flex; gap:6px; align-items:center; margin-top:2px; }
.cs-read:hover { text-decoration:underline; text-underline-offset:3px; }

.cs-media { position:relative; flex:0 0 auto; width:clamp(180px,44%,330px); height:100%; border-radius:22px; overflow:hidden; background:#EEF1F6; display:block; }
.cs-media > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.cs-media::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,19,38,0) 45%,rgba(11,19,38,.28) 100%); pointer-events:none; }

/* Dashboard mockups sitting on the photo */
.cs-shot { position:absolute; z-index:2; box-shadow:0 18px 40px -8px rgba(11,19,38,.45),0 4px 10px rgba(11,19,38,.18); }
.cs-shot img { display:block; width:100%; }
.cs-shot-browser { left:12px; right:12px; bottom:12px; background:#fff; border-radius:10px; padding:14px 0 0; overflow:hidden; }
.cs-shot-browser i { position:absolute; top:5px; left:8px; width:5px; height:5px; border-radius:50%; background:#ff5f57; box-shadow:8px 0 0 #febc2e,16px 0 0 #28c840; }
.cs-shot-browser img { aspect-ratio:16/10; object-fit:cover; object-position:top; }
.cs-shot-phone { right:14px; bottom:14px; width:36%; border:5px solid #0f1218; border-radius:18px; overflow:hidden; background:#0f1218; }
.cs-shot-phone img { aspect-ratio:9/19; object-fit:cover; object-position:top; border-radius:12px; }
.cs-shot-input { left:12px; bottom:12px; width:32%; border:4px solid #fff; border-radius:12px; overflow:hidden; background:#fff; }
.cs-shot-input img { aspect-ratio:2/3; object-fit:cover; }
.cs-shot-input span { position:absolute; left:6px; bottom:6px; font:700 9px/1 'Plus Jakarta Sans',sans-serif; letter-spacing:.08em; text-transform:uppercase; background:#fff; color:#0B1326; padding:4px 6px; border-radius:5px; }

.cs-tabs { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:22px; flex-wrap:wrap; padding:0 16px; }
.cs-tab { height:8px; width:8px; border-radius:3px; border:0; padding:0; background:#E3E7EE; cursor:pointer; overflow:hidden; transition:width .3s ease, background .2s; }
.cs-tab:hover { background:#C9D0DC; }
.cs-tab.on { width:72px; background:#E3E7EE; }
.cs-tab i { display:block; height:100%; width:100%; border-radius:3px; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,#4a7fff,#18c4a3 60%,#ffaa00); }
.cs-tab:focus-visible { outline:2px solid #4a7fff; outline-offset:2px; }

/* Tablet */
@media (min-width:768px) and (max-width:1119px) {
  .cs-full { padding:22px; gap:18px; }
  .cs-title { font-size:23px; }
  .cs-did { font-size:14px; -webkit-line-clamp:3; }
  .cs-stats b { font-size:18px; }
}
/* Phone: image under the text, like the component */
@media (max-width:767px) {
  .cs-card { border-radius:26px; }
  .cs-peek-in { border-radius:20px; }
  .cs-full { flex-direction:column; padding:16px; gap:12px; }
  .cs-text { gap:10px; padding:2px 2px 0; justify-content:flex-start; }
  .cs-title { font-size:20px; line-height:1.12; }
  .cs-did { font-size:13.5px; line-height:1.5; -webkit-line-clamp:3; }
  .cs-stats { display:none; }
  .cs-read { display:none; }
  .cs-media { width:100%; flex:1 1 auto; height:auto; min-height:170px; border-radius:18px; }
  .cs-shot-browser { left:10px; right:10px; bottom:10px; }
  .cs-shot-phone { width:28%; right:10px; bottom:10px; border-width:4px; border-radius:14px; }
  .cs-shot-input { width:26%; }
  .cs-client { font-size:12.5px; }
  .cs-logo { height:17px; }
}

/* ---------- 2. Process infographic ---------- */
.aic-flow { padding:88px 24px; background:#fff; }
@media (min-width:1024px){ .aic-flow { padding:112px 40px; } }
.aic-flow-in { max-width:1240px; margin:0 auto; }
.fl-head { max-width:760px; margin-bottom:48px; }
.fl-pill { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:#E8F7F3; color:#0f7a66; font:700 12px/1 'Plus Jakarta Sans',sans-serif; letter-spacing:.02em; margin-bottom:18px; }
.fl-head h2 { font:800 clamp(2rem,4.4vw,3.4rem)/.98 'Plus Jakarta Sans',sans-serif; letter-spacing:-.035em; color:#0B1326; margin:0 0 16px; }
.fl-head p { font:400 17px/1.6 'Inter',sans-serif; color:#3A4256; margin:0; }

.fl-board { position:relative; background:#F8F9FB; border:1px solid #EEF1F5; border-radius:28px; padding:36px; }
.fl-diagram { position:relative; display:grid; grid-template-columns:1fr minmax(260px,1.05fr) 1fr; gap:96px; align-items:center; }
.fl-wires { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:0; }
.fl-wires path { fill:none; stroke:#A9B8F5; stroke-width:2; stroke-dasharray:6 7; animation:flDash 1.4s linear infinite; }
.fl-wires circle { fill:#fff; stroke:#4a7fff; stroke-width:2.5; }
@keyframes flDash { to { stroke-dashoffset:-26; } }
@media (prefers-reduced-motion:reduce){ .fl-wires path { animation:none; } }
.fl-col { position:relative; z-index:1; display:flex; flex-direction:column; gap:14px; }
.fl-col-label { align-self:center; font:700 11px/1 'Plus Jakarta Sans',sans-serif; letter-spacing:.16em; text-transform:uppercase; color:#4a6cf7; background:#EEF2FF; padding:7px 12px; border-radius:8px; margin-bottom:4px; }
.fl-node { background:#fff; border:1px solid #E8ECF2; border-radius:16px; padding:14px 16px; display:flex; align-items:center; gap:14px; box-shadow:0 6px 18px -8px rgba(11,19,38,.12); }
.fl-node .fl-ic { width:42px; height:42px; border-radius:12px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:#F1F4FA; }
.fl-node .fl-ic img { width:24px; height:24px; object-fit:contain; }
.fl-node .fl-ic .material-symbols-outlined { font-size:22px; color:#0B1326; }
.fl-node b { display:block; font:700 15px/1.25 'Plus Jakarta Sans',sans-serif; color:#0B1326; }
.fl-node small { display:block; font:400 13px/1.4 'Inter',sans-serif; color:#6B7280; margin-top:2px; }
.fl-hub { position:relative; z-index:1; background:#fff; border:1px solid #E3E8F0; border-radius:24px; padding:28px 24px 22px; text-align:center;
  box-shadow:0 30px 60px -24px rgba(74,127,255,.35),0 8px 20px -10px rgba(11,19,38,.12); }
.fl-orb { width:76px; height:76px; margin:0 auto 14px; border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative;
  background:linear-gradient(135deg,#4a7fff 0%,#18c4a3 60%,#ffbe2e 100%); box-shadow:0 12px 28px -8px rgba(74,127,255,.55); }
.fl-orb .material-symbols-outlined { font-size:36px; color:#fff; }
.fl-orb::after { content:'AI'; position:absolute; right:-6px; top:-4px; background:#0B1326; color:#fff; font:800 10px/1 'Plus Jakarta Sans',sans-serif; padding:5px 6px; border-radius:7px; }
.fl-hub h3 { font:800 21px/1.15 'Plus Jakarta Sans',sans-serif; letter-spacing:-.02em; color:#0B1326; margin:0 0 6px; }
.fl-hub > p { font:400 14px/1.5 'Inter',sans-serif; color:#3A4256; margin:0 auto 14px; max-width:300px; }
.fl-hub ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px; text-align:left; }
.fl-hub li { display:flex; gap:9px; align-items:flex-start; font:500 13px/1.4 'Inter',sans-serif; color:#0B1326; background:#F8F9FB; border-radius:10px; padding:8px 10px; }
.fl-hub li .material-symbols-outlined { font-size:17px; color:#18a88c; margin-top:1px; }

/* Step path, after the Figma reference: numbered cards, dark duration pill, dashed hand-offs */
.fl-steps { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:26px 88px; margin-top:36px; }
.fl-step { position:relative; background:#fff; border:1px solid #E8ECF2; border-radius:22px; padding:18px 20px 18px 18px; display:flex; gap:16px; }
.fl-step.hl { background:#F2FBF8; border-color:#D4F1E9; }
.fl-step:nth-child(even) { transform:translateY(46px); }
.fl-who { flex:0 0 34px; border-radius:17px; background:#0B1326; color:#fff; writing-mode:vertical-rl; transform:rotate(180deg);
  display:flex; align-items:center; justify-content:center; font:700 11px/1 'Plus Jakarta Sans',sans-serif; letter-spacing:.06em; padding:14px 0; min-height:104px; }
.fl-step.hl .fl-who { background:linear-gradient(180deg,#18c4a3,#0f7a66); }
.fl-body { min-width:0; }
.fl-t { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.fl-t .fl-si { width:34px; height:34px; border-radius:50%; background:#F1F4FA; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.fl-t .fl-si img { width:18px; height:18px; object-fit:contain; }
.fl-t .fl-si .material-symbols-outlined { font-size:18px; color:#0B1326; }
.fl-t b { font:700 17px/1.2 'Plus Jakarta Sans',sans-serif; color:#0B1326; letter-spacing:-.01em; }
.fl-t b em { font-style:normal; color:#9AA3B2; margin-right:4px; }
.fl-body p { font:400 14px/1.55 'Inter',sans-serif; color:#3A4256; margin:0; }
/* dashed connector from each card to the next */
.fl-step:not(:last-child)::after { content:''; position:absolute; pointer-events:none; border:2px dashed #9fd9cb; }
.fl-step:nth-child(odd):not(:last-child)::after { left:100%; top:50%; width:88px; height:46px; border-left:0; border-bottom:0; border-radius:0 14px 0 0; }
.fl-step:nth-child(even):not(:last-child)::after { right:100%; top:calc(50% + 0px); width:88px; height:calc(100% - 20px); border-right:0; border-top:0; border-radius:0 0 0 14px; transform:translateY(0); display:none; }

.fl-stack { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:84px; padding-top:28px; border-top:1px dashed #DCE2EA; }
.fl-stack > span:first-child { font:700 11px/1 'Plus Jakarta Sans',sans-serif; letter-spacing:.18em; text-transform:uppercase; color:#6B7280; margin-right:6px; }
.fl-stack .stack-chip { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid #E5E7EB; border-radius:999px; font:600 13px/1 'Inter',sans-serif; color:#0B1326; background:#fff; letter-spacing:0; text-transform:none; }
.fl-stack .stack-chip .material-symbols-outlined { font-size:16px; }
.fl-stack .stack-chip img, .stack-chip img.stk { width:16px; height:16px; object-fit:contain; }

@media (max-width:1023px) {
  .fl-board { padding:22px 16px; border-radius:22px; }
  .fl-diagram { grid-template-columns:1fr; gap:34px; }
  .fl-wires { display:none; }
  .fl-col + .fl-hub::before, .fl-hub + .fl-col::before { content:''; position:absolute; left:50%; top:-30px; height:26px; border-left:2px dashed #A9B8F5; }
  .fl-hub + .fl-col { padding-top:0; }
  .fl-hub + .fl-col::before { top:-30px; }
  .fl-steps { grid-template-columns:1fr; gap:18px; margin-top:28px; }
  .fl-step:nth-child(even) { transform:none; }
  .fl-step:not(:last-child)::after { display:block !important; left:36px !important; right:auto !important; top:100% !important; width:0 !important; height:18px !important;
    border:0 !important; border-left:2px dashed #9fd9cb !important; border-radius:0 !important; transform:none !important; }
  .fl-stack { margin-top:36px; }
  .fl-who { min-height:90px; }
}

/* ---------- 4b. Home hero: keep "for founders." on one line on phones ---------- */
@media (max-width:640px) {
  h1.hero-h1 { font-size:clamp(1.85rem,8.1vw,2.45rem) !important; }
  h1.hero-h1 .hero-line:nth-of-type(2) { white-space:nowrap; }
  h1.hero-h1 .rotate-word { display:inline-block !important; width:auto !important; }
}

/* ---------- 4c. Home teaching video: stop zooming it on phones ----------
   The section is ~950px tall on a phone once the text and stats are in, and a 16:9
   clip stretched to cover that is cropped to a sliver. On phones the text sits on
   white and the clip gets its own full-width 16:9 band underneath, nothing cut. */
@media (max-width:1023px) {
  .video-teach-section { display:flex !important; flex-direction:column; min-height:0 !important; background:#fff !important; }
  .video-teach-section > .relative.grid { order:1; min-height:0 !important; }
  .video-teach-section .video-teach { position:relative !important; inset:auto !important; order:2; width:100% !important; height:auto !important; aspect-ratio:16/9; object-fit:cover; object-position:50% 50% !important; }
  .video-teach-section .video-mobile-cover, .video-teach-section > .pointer-events-none { display:none !important; }
  .video-teach-section .video-teach-right-spacer { display:none !important; }
  .video-teach-section > .relative.grid > div:first-child { padding-top:64px !important; padding-bottom:32px !important; }
  .video-teach-section .hp-stats { background:#F8F9FB !important; }
}

/* case-studies page: the hero already says it, so the strip starts straight away */
.aic-strip-sec.tight { padding:12px 0 56px; background:linear-gradient(180deg,#F8F9FB 0%,#fff 100%); }
.aic-strip-sec.tight .aic-strip-head { display:none; }
/* grid cards: the mockup sits bottom right so the person stays visible */
.cs-grid-media .cs-shot-browser { left:auto; width:60%; right:14px; bottom:14px; }
.cs-grid-media .cs-shot-phone { width:26%; }
.cs-grid-media .cs-shot-input { width:26%; }
@media (max-width:767px) {
  .cs-media .cs-shot-browser { left:auto; width:60%; right:10px; bottom:10px; }
}