/* ============================================================
   Respondent — Image Blocks
   A library of composite "marketing graphic" components:
   a photorealistic photo framed in a card, with chart cards,
   stat badges, window chrome, transcripts, and avatar clusters
   layered on top. All chrome is pure CSS/SVG on brand tokens —
   only the photo is a raster asset (drop-in slot).

   USAGE (production / Claude Code):
     1. Link this file.
     2. Copy any .ib-stage block from the reference.
     3. Replace each <image-slot> with:
          <img class="ib-photo-img" src="your-photo.jpg" alt="">
        (the wrapper already sizes/frames it).
   ============================================================ */

:root{
  --indigo:#0003C9; --indigo-deep:#000150; --indigo-mid:#2F33D8;
  --periwinkle:#6163DF; --indigo-soft:#9192E9; --indigo-tint:#EBEBFE;
  --coral:#F0635C; --coral-soft:#F8B3AC; --coral-tint:#FDECEA;
  --mint:#079455; --mint-soft:#BFE7D8;
  --ink:#181D27; --ink-2:#535862; --muted:#717680; --muted-2:#A4A7AE;
  --line:rgba(24,29,39,.12); --paper:#ECEFFB; --white:#FFFFFF;
  --gradient:linear-gradient(120deg,#0003C9,#6163DF);
  --font-display:'Onest',-apple-system,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --shadow-card:0 18px 40px -22px rgba(24,29,39,.28), 0 2px 8px -4px rgba(24,29,39,.12);
  --shadow-float:0 24px 50px -20px rgba(0,3,201,.22), 0 4px 14px -6px rgba(24,29,39,.16);
}

/* ---- Stage: the canvas each composite lives on ---- */
.ib-stage{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  background:rgba(255,255,255,.10);
  background-image:radial-gradient(rgba(24,29,39,.04) 1px, transparent 1px);
  background-size:5px 5px;
  border-radius:18px;
  overflow:hidden;
  font-family:var(--font-display);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
}
.ib-stage *{box-sizing:border-box;}
.ib-stage--wide{aspect-ratio:4/3;}
.ib-stage--tall{aspect-ratio:4/5;}
.ib-pad{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:34px;}

/* ---- Photo frame (works for <image-slot> and <img>) ---- */
.ib-photo{
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow-card);
  background:#dfe3f3;
}
.ib-photo-img{width:100%;height:100%;object-fit:cover;display:block;}
image-slot.ib-photo{display:block;}

/* ---- Floating frosted cards ---- */
.ib-card{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow-float);
  padding:14px 16px;
}
.ib-float{position:absolute;}

/* ---- Labels / eyebrows / chips ---- */
.ib-eyebrow{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
}
.ib-eyebrow--indigo{color:var(--indigo);}
.ib-pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px;border-radius:999px;
  font-size:12.5px;font-weight:600;line-height:1;
  background:var(--white);border:1px solid var(--line);
  box-shadow:var(--shadow-float);
}
.ib-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px;border-radius:8px;font-size:11px;font-weight:600;
}
.ib-chip--indigo{background:var(--indigo-tint);color:var(--indigo);}
.ib-chip--mint{background:var(--mint-soft);color:#05653b;}
.ib-chip--coral{background:var(--coral-tint);color:#c23b34;}
.ib-dot{width:8px;height:8px;border-radius:50%;flex:none;}
.ib-dot--mint{background:var(--mint);}
.ib-dot--indigo{background:var(--indigo);}
.ib-dot--coral{background:var(--coral);}
.ib-up{color:var(--mint);font-weight:700;}

/* ---- Big stat ---- */
.ib-stat-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.ib-stat-num{font-size:40px;font-weight:600;letter-spacing:-.04em;line-height:.95;color:var(--indigo);}
.ib-stat-num--ink{color:var(--ink);}
.ib-stat-sub{font-size:12.5px;color:var(--ink-2);}

/* ---- Bar chart (flex of bars) ---- */
.ib-bars{display:flex;align-items:flex-end;gap:6px;height:48px;}
.ib-bars span{flex:1;border-radius:4px 4px 2px 2px;background:var(--indigo);}
.ib-bars--soft span{background:var(--indigo-soft);}
.ib-bars span:last-child{background:var(--indigo);}

/* ---- Line / spark (SVG) ---- */
.ib-line-chart{display:block;width:100%;height:auto;}
.ib-line-chart .area{fill:rgba(0,3,201,.08);}
.ib-line-chart .stroke{fill:none;stroke:var(--indigo);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.ib-line-chart .dot{fill:var(--indigo);}

/* ---- Donut (conic) ---- */
.ib-donut{
  width:64px;height:64px;border-radius:50%;
  background:conic-gradient(var(--indigo) 0 var(--p,62%), var(--indigo-tint) 0);
  display:grid;place-items:center;flex:none;
}
.ib-donut::after{content:"";width:42px;height:42px;border-radius:50%;background:var(--white);}
.ib-donut-val{position:absolute;font-size:14px;font-weight:700;color:var(--indigo);}

/* ---- Waveform ---- */
.ib-wave{display:flex;align-items:center;gap:3px;height:22px;}
.ib-wave span{width:3px;border-radius:2px;background:var(--indigo);}
.ib-window-body .ib-wave{background:#fff;padding:5px 10px;border-radius:11px;box-shadow:0 3px 10px rgba(15,10,46,.16);height:32px;align-items:flex-end;}

/* ---- Window chrome ---- */
.ib-window{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--shadow-float);
}
.ib-window-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 14px;border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.7);
}
.ib-window-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;}
.ib-window-mono{font-family:var(--font-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);}
.ib-window-mono--rec{color:var(--coral);}
.ib-window-body{position:relative;}
.ib-window-body image-slot,.ib-window-body .ib-photo-img{display:block;width:100%;height:100%;}

/* ---- Transcript / chat ---- */
.ib-trow{display:flex;gap:10px;align-items:flex-start;}
.ib-avatar-mark{
  width:30px;height:30px;border-radius:8px;flex:none;
  background:var(--gradient);display:grid;place-items:center;
}
.ib-avatar-mark svg{width:15px;height:15px;}
.ib-bubble{
  background:var(--indigo-tint);
  border-radius:4px 12px 12px 12px;
  padding:9px 12px;font-size:13px;color:var(--ink);line-height:1.4;
}
.ib-bubble--quote{background:rgba(97,99,223,.1);}
.ib-speaker{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--indigo);margin-bottom:4px;}
.ib-time{font-family:var(--font-mono);font-size:10px;color:var(--muted-2);flex:none;width:34px;}

/* ---- Avatar grid / cluster ---- */
.ib-avatars{display:flex;flex-wrap:wrap;gap:8px;}
.ib-av{width:44px;height:44px;border-radius:12px;overflow:hidden;background:#dfe3f3;border:2px solid var(--white);box-shadow:0 2px 6px -2px rgba(24,29,39,.2);}
.ib-av img,.ib-av image-slot{width:100%;height:100%;object-fit:cover;display:block;}
.ib-av--round{border-radius:50%;}
.ib-cluster{display:flex;}
.ib-cluster .ib-av{margin-left:-12px;}
.ib-cluster .ib-av:first-child{margin-left:0;}
.ib-av-more{
  display:grid;place-items:center;background:var(--indigo);color:#fff;
  font-size:12px;font-weight:700;border-radius:12px;
}

/* ---- Misc helpers ---- */
.ib-row{display:flex;align-items:center;gap:10px;}
.ib-col{display:flex;flex-direction:column;}
.ib-title{font-size:13px;font-weight:700;letter-spacing:-.01em;}
.ib-sub{font-size:12px;color:var(--ink-2);line-height:1.4;}
.ib-divider{height:1px;background:var(--line);width:100%;}

/* Hero/feature photo windows: body fills the window so the photo never leaves a gap */
.hero-visual .ib-window, .feature-block-vis .ib-window{ display:flex; flex-direction:column; }
.hero-visual .ib-window-body, .feature-block-vis .ib-window-body{ flex:1 1 auto; }