.io-wrap{--gutter:max(24px, calc((100vw - min(1200px, 100vw - 48px)) / 2))}
.io-container{max-width:1200px;margin-inline:auto;padding-inline:24px}

/* hero */
.io-section.io-hero{text-align:center;padding-top:calc(var(--nav-h) + clamp(20px,4vw,48px))}
.io-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--cap,#3B6FE0)}
.io-h1{font-family:'Instrument Sans',sans-serif;font-weight:700;font-size:clamp(2.9rem,8.4vw,6.2rem);line-height:.97;letter-spacing:-.038em;margin:20px auto;max-width:16ch;color:var(--ink)}
.io-lead{font-family:'Instrument Sans',sans-serif;font-size:clamp(1.15rem,2.4vw,1.7rem);line-height:1.32;color:var(--ink-soft);max-width:26ch;margin:0 auto;font-weight:500}
.io-hero-media{margin-top:clamp(34px,5vw,64px);border-radius:clamp(20px,3vw,34px);aspect-ratio:16/9;overflow:hidden;position:relative}

/* metrics strip */
.io-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,3vw,40px);text-align:center;margin-top:clamp(30px,4vw,52px)}
.io-stat b{display:block;font-family:'Instrument Sans',sans-serif;font-weight:700;font-size:clamp(2.1rem,4.6vw,4rem);letter-spacing:-.03em;line-height:1;color:var(--ink)}
.io-stat span{display:block;margin-top:8px;font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* placeholders + media */
.io-ph{position:absolute;inset:0;z-index:0;display:grid;place-items:center;background:radial-gradient(125% 125% at 22% 12%, color-mix(in srgb,var(--cap,#3B6FE0) 58%, #14141d), color-mix(in srgb,var(--cap,#3B6FE0) 16%, #06060b))}
.io-ph svg{width:clamp(44px,6vw,72px);height:clamp(44px,6vw,72px);color:rgba(255,255,255,.30)}
.io-img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}
.io-scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(6,6,12,.05) 30%, rgba(6,6,12,.72));pointer-events:none}

/* section framing */
.io-section{padding-block:clamp(52px,9vw,130px)}
.io-head{max-width:820px}
.io-kicker{display:inline-flex;align-items:center;gap:12px;font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cap,#3B6FE0)}
.io-kicker::before{content:"";width:28px;height:2px;background:var(--cap,#3B6FE0)}
.io-title{font-family:'Instrument Sans',sans-serif;font-weight:700;font-size:clamp(2rem,5.2vw,3.7rem);line-height:1.02;letter-spacing:-.032em;margin:18px 0 14px;color:var(--ink)}
.io-sub{font-size:clamp(1.05rem,1.7vw,1.4rem);line-height:1.5;color:var(--muted);max-width:54ch}

/* problem statement */
.io-statement{font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:clamp(1.5rem,3.6vw,2.8rem);line-height:1.18;letter-spacing:-.025em;color:var(--ink);max-width:20ch;margin-inline:auto;text-align:center}
.io-statement b{color:var(--muted);font-weight:600}

/* 4 user-type cards */
.io-types{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(30px,4vw,50px)}
.io-type{position:relative;isolation:isolate;border-radius:26px;overflow:hidden;min-height:clamp(310px,30vw,392px);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(22px,2.4vw,30px);color:#fff;text-decoration:none;transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s}
.io-type:hover{transform:translateY(-7px);box-shadow:0 34px 66px rgba(8,8,20,.34)}
.io-type .it-num{position:relative;z-index:3;font-family:'Instrument Sans',sans-serif;font-weight:700;font-size:.82rem;opacity:.86}
.io-type h3{position:relative;z-index:3;font-family:'Instrument Sans',sans-serif;font-weight:700;font-size:clamp(1.5rem,2.1vw,1.95rem);letter-spacing:-.025em;margin:8px 0 8px}
.io-type p{position:relative;z-index:3;font-size:.98rem;color:rgba(255,255,255,.85);line-height:1.4;max-width:22ch}
.io-type .it-go{position:relative;z-index:3;margin-top:16px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;transition:transform .4s}
.io-type .it-go svg{width:18px;height:18px}
.io-type:hover .it-go{transform:translateX(4px);background:rgba(255,255,255,.28)}

/* horizontal scroller */
.io-scroller{margin-top:clamp(28px,4vw,48px)}
.io-hscroll{display:grid;grid-auto-flow:column;grid-auto-columns:min(80%,390px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding-inline:var(--gutter);padding-block:6px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.io-hscroll::-webkit-scrollbar{display:none}
.io-hscroll>*{scroll-snap-align:start}
.io-fcard{position:relative;isolation:isolate;border-radius:28px;overflow:hidden;min-height:clamp(430px,52vw,540px);display:flex;align-items:flex-end;color:#fff}
.fc-in{position:relative;z-index:3;padding:clamp(24px,2.6vw,34px)}
.fc-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);margin-bottom:16px}
.fc-ic svg{width:24px;height:24px;color:#fff}
.fc-k{display:block;font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:10px}
.io-fcard h3{font-family:'Instrument Sans',sans-serif;font-weight:700;font-size:clamp(1.5rem,2.2vw,1.95rem);letter-spacing:-.02em;line-height:1.04;margin-bottom:10px}
.io-fcard p{font-size:.99rem;line-height:1.46;color:rgba(255,255,255,.85);max-width:34ch}

.io-nav-row{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;padding-inline:var(--gutter)}
.io-nav{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:var(--paper);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .3s,opacity .3s}
.io-nav svg{width:20px;height:20px}
.io-nav:hover{background:var(--card)}
.io-nav:disabled{opacity:.3;cursor:default}

/* alternating blocks (carrier) */
.io-block{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;margin-top:clamp(30px,5vw,72px)}
.io-block:first-of-type{margin-top:clamp(28px,4vw,52px)}
.io-block.flip .io-block-media{order:2}
.io-block-media{position:relative;isolation:isolate;border-radius:28px;overflow:hidden;aspect-ratio:4/3}
.io-block-text h3{font-family:'Instrument Sans',sans-serif;font-weight:700;font-size:clamp(1.7rem,3.2vw,2.5rem);letter-spacing:-.028em;line-height:1.04;margin-bottom:16px;color:var(--ink)}
.io-block-text p{font-size:clamp(1.03rem,1.5vw,1.22rem);line-height:1.55;color:var(--muted);max-width:44ch}

/* phone deck (driver) */
.io-hscroll.phones{grid-auto-columns:min(62%,280px)}
.io-phone{position:relative;isolation:isolate;aspect-ratio:9/19.3;border-radius:38px;overflow:hidden;border:1px solid var(--line);background:#0b0b12}
.io-phone .io-scrim{background:linear-gradient(180deg,transparent 55%, rgba(6,6,12,.5))}
.pc-cap{padding:20px 6px 0}
.pc-cap b{display:block;font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:1.08rem;letter-spacing:-.01em;margin-bottom:6px;color:var(--ink)}
.pc-cap span{color:var(--muted);font-size:.92rem;line-height:1.5}

/* highlight grid (investor) */
.io-hl{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(28px,4vw,48px)}
.io-hl-card{position:relative;border-radius:26px;background:var(--card);border:1px solid var(--line);padding:clamp(26px,3vw,42px);transition:transform .5s cubic-bezier(.2,.7,.2,1),background .4s}
.io-hl-card:hover{transform:translateY(-6px);background:var(--card-2)}
.hl-ic{display:grid;place-items:center;width:50px;height:50px;border-radius:14px;background:color-mix(in srgb,var(--cap,#5A5AD6) 13%,#fff);color:var(--cap,#5A5AD6);margin-bottom:20px}
.hl-ic svg{width:26px;height:26px}
.io-hl-card h3{font-family:'Instrument Sans',sans-serif;font-weight:700;font-size:clamp(1.3rem,1.9vw,1.6rem);letter-spacing:-.02em;margin-bottom:11px;color:var(--ink)}
.io-hl-card p{color:var(--muted);font-size:.99rem;line-height:1.56}

/* results matrix reuse comes from tiso.css (.outcome-matrix) */

/* ── responsive ── */
.io-wrap{overflow-x:clip}
@media(max-width:820px){
  .io-nav-row{display:none}
  .io-types{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding-inline:var(--gutter);margin-inline:calc(-1 * var(--gutter));scrollbar-width:none}
  .io-types::-webkit-scrollbar{display:none}
  .io-type{scroll-snap-align:start}
  .io-block,.io-block.flip{grid-template-columns:1fr;gap:22px}
  .io-block.flip .io-block-media{order:0}
  .io-block-media{aspect-ratio:16/10}
  .io-hl{grid-template-columns:1fr}
}
@media(max-width:520px){
  .io-stats{grid-template-columns:1fr 1fr;gap:24px 16px}
}