/* ═══════════════════════════════════════════════════════════════════
   SIMULATED APP VIEWS  ("sim")
   Hand-built DOM recreations of the real product screens, so the
   INSIDE of the panel animates — rows, cells, values, charts — rather
   than a static screenshot with tags pasted over it.

   Motion rule, learned the hard way: entrances are TRANSFORM-ONLY.
   A stalled compositor leaves an element a few px low, never invisible.
   Only purely decorative layers (sweeps, dots) may use opacity.
   ═══════════════════════════════════════════════════════════════════ */

.sim{background:#fff;color:#171225;font-size:12px;line-height:1.4;position:relative;overflow:hidden;
  font-family:var(--sans);min-height:330px}
.sim *{font-variant-numeric:tabular-nums}

/* app chrome inside the sim */
.sim-top{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid #e8e5f0;background:#fbfaff}
.sim-top .lg{width:18px;height:18px;background:linear-gradient(135deg,#6d4fe0,#9a7bf0);flex:none}
.sim-top .nm{font-size:12px;font-weight:600;letter-spacing:-.02em}
.sim-top .rt{margin-left:auto;font-size:10px;color:#1d8a60;display:flex;align-items:center;gap:5px}
.sim-top .rt i{width:6px;height:6px;background:#1d8a60;display:block}
.sim-body{padding:14px 16px}
.sim-h{font-size:16px;font-weight:600;letter-spacing:-.025em;margin-bottom:2px}
.sim-sub{font-size:11px;color:#6b6580;margin-bottom:12px}
.sim-eyebrow{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#6d4fe0;margin-bottom:4px}

/* ── generic animated primitives ─────────────────────────────────── */
.s-row,.s-card,.s-cell,.s-tile,.s-frame,.s-seg{transform:none;transition:transform .5s var(--ease)}
.sim.arm .s-row,.sim.arm .s-card,.sim.arm .s-cell,.sim.arm .s-tile,.sim.arm .s-frame,.sim.arm .s-seg{
  transform:translateY(12px);transition:none}
.s-bar i{display:block;height:100%;transform-origin:left;transform:scaleX(1);transition:transform .8s var(--ease)}
.sim.arm .s-bar i{transform:scaleX(0);transition:none}
.s-draw{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--ease)}
.sim.arm .s-draw{stroke-dashoffset:1;transition:none}
.s-grow{transform:scaleY(1);transform-origin:bottom;transition:transform .7s var(--ease)}
.sim.arm .s-grow{transform:scaleY(0);transition:none}
/* stagger */
.d1{transition-delay:.05s}.d2{transition-delay:.12s}.d3{transition-delay:.19s}.d4{transition-delay:.26s}
.d5{transition-delay:.33s}.d6{transition-delay:.40s}.d7{transition-delay:.47s}.d8{transition-delay:.54s}
.d9{transition-delay:.61s}.d10{transition-delay:.68s}.d11{transition-delay:.75s}.d12{transition-delay:.82s}
/* decorative sweep across the sim */
.sim-sweep{position:absolute;inset:0;pointer-events:none;z-index:5;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(214,255,63,.28) 48%,transparent)}
.sim.play .sim-sweep{animation:simSweep .85s var(--ease) 1 both}
@keyframes simSweep{0%{transform:translateX(-100%);opacity:1}100%{transform:translateX(100%);opacity:0}}

/* ── KPI strip ───────────────────────────────────────────────────── */
.s-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin-bottom:12px}
.s-card{border:1px solid #e8e5f0;padding:9px 10px;background:#fff}
.s-card .l{font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:#8d87a0;font-family:var(--mono)}
.s-card .v{font-size:19px;font-weight:600;letter-spacing:-.03em;margin-top:4px}
.s-card .d{font-size:9px;color:#1d8a60;margin-top:2px}
.s-card.hl{background:#f4f0ff;border-color:#cdbdf7}
.s-card.hl .v{color:#6d4fe0}

/* ── table ───────────────────────────────────────────────────────── */
.s-tbl{border:1px solid #e8e5f0}
.s-tbl .hd,.s-row{display:grid;grid-template-columns:1.5fr 1.3fr .5fr .6fr .7fr;gap:9px;padding:8px 11px;align-items:center}
.s-tbl .hd{background:#fbfaff;border-bottom:1px solid #e8e5f0;font-family:var(--mono);font-size:8px;
  letter-spacing:.08em;text-transform:uppercase;color:#8d87a0}
.s-row{border-bottom:1px solid #f0eef6;font-size:11px}
.s-row:last-child{border-bottom:0}
.s-row .p{font-weight:600;letter-spacing:-.01em}
.s-row .term{font-family:var(--mono);font-size:8.5px;color:#6d4fe0;background:#f4f0ff;padding:2px 5px;
  display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s-row .src{width:15px;height:15px;background:#0a66c2;display:grid;place-items:center;color:#fff;font-size:7px;font-family:var(--mono)}
.s-row .sent{display:flex;align-items:center;gap:5px;color:#1d8a60;font-weight:600;font-size:11px}
.s-bar{height:4px;background:#eceaf2;overflow:hidden;flex:1;min-width:26px}
.s-row .s-bar i{background:#1d8a60}

/* ── stacked area chart ──────────────────────────────────────────── */
.s-chart{border:1px solid #e8e5f0;padding:10px;margin-bottom:10px;background:#fff}
.s-chart svg{width:100%;height:126px;display:block}
.s-legend{display:flex;gap:11px;flex-wrap:wrap;margin-top:7px}
.s-legend span{font-size:9px;color:#6b6580;display:flex;align-items:center;gap:4px}
.s-legend i{width:7px;height:7px;display:block}

/* ── heatmap ─────────────────────────────────────────────────────── */
.s-heat{display:grid;grid-template-columns:96px repeat(6,1fr);gap:2px}
.s-heat .rh{font-size:9px;color:#4e4860;display:flex;align-items:center;gap:5px;padding-right:5px}
.s-heat .rh i{width:6px;height:6px;flex:none;display:block}
.s-cell{padding:7px 0;text-align:center;font-size:10px;font-weight:600;color:#fff;letter-spacing:-.01em}
.s-heat .ch{font-family:var(--mono);font-size:7.5px;letter-spacing:.06em;text-transform:uppercase;
  color:#8d87a0;text-align:center;padding-bottom:3px}

/* ── win / lose / gain ───────────────────────────────────────────── */
.s-wlg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:11px}
.s-wlg .s-card .t{font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:5px}
.s-wlg .win .t{color:#1d8a60}.s-wlg .lose .t{color:#d2564f}.s-wlg .gain .t{color:#6d4fe0}
.s-wlg .s-card p{font-size:10px;color:#4e4860;line-height:1.45}
.s-score{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.s-score .s-card{padding:8px}
.s-score .b{font-size:8px;padding:1px 4px;display:inline-block;margin-top:4px}
.s-score .b.lead{background:#e9f7f1;color:#1d8a60}
.s-score .b.you{background:#f4f0ff;color:#6d4fe0}

/* ── segments ────────────────────────────────────────────────────── */
.s-segs{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.s-seg{border:1px solid #e8e5f0;padding:11px;position:relative}
.s-seg .pc{position:absolute;right:9px;top:9px;font-size:12px;font-weight:700;color:#6d4fe0;background:#f4f0ff;padding:2px 6px}
.s-seg .nm{font-size:12px;font-weight:600;letter-spacing:-.02em;padding-right:44px}
.s-seg .mt{font-size:9px;color:#8d87a0;margin-top:1px}
.s-seg .ds{font-size:9.5px;color:#4e4860;line-height:1.45;margin-top:7px}
.s-seg .cta{margin-top:9px;background:#6d4fe0;color:#fff;font-size:9.5px;padding:6px;text-align:center;font-weight:600}

/* ── media grid ──────────────────────────────────────────────────── */
.s-media{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.s-tile{border:1px solid #e8e5f0;overflow:hidden}
.s-tile .th{display:flex;align-items:center;gap:5px;padding:5px 7px;border-bottom:1px solid #f0eef6}
.s-tile .th b{font-family:var(--mono);font-size:7.5px;color:#6d4fe0;background:#f4f0ff;padding:2px 4px;font-weight:400;letter-spacing:.04em}
.s-tile .th span{margin-left:auto;font-size:8px;color:#8d87a0}
.s-tile .im{height:52px;background:linear-gradient(135deg,#d9d3ea,#efecf7)}
.s-tile .cp{padding:6px 7px;font-size:9.5px;line-height:1.35;color:#171225}

/* ── film / storyboard ───────────────────────────────────────────── */
.s-film{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.s-frames{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.s-frame{aspect-ratio:16/10;background:linear-gradient(135deg,#2a2440,#4a3f6b);position:relative}
.s-frame b{position:absolute;left:5px;bottom:4px;font-family:var(--mono);font-size:7px;color:#d6ff3f;letter-spacing:.05em}
.s-script{border-left:1px solid #e8e5f0;padding-left:10px}
.s-line{display:grid;grid-template-columns:34px 1fr;gap:7px;padding:5px 0;border-bottom:1px solid #f0eef6;
  transform:none;transition:transform .45s var(--ease)}
.sim.arm .s-line{transform:translateX(9px);transition:none}
.s-line b{font-family:var(--mono);font-size:8px;color:#6d4fe0;font-weight:400}
.s-line p{font-size:9.5px;line-height:1.4;color:#4e4860}

/* ── takeaways ───────────────────────────────────────────────────── */
.s-take{display:grid;gap:7px}
.s-take .s-row{display:grid;grid-template-columns:22px 1fr;gap:8px;border:1px solid #e8e5f0;padding:8px 10px}
.s-take .n{font-family:var(--mono);font-size:9px;color:#6d4fe0}
.s-take .t{font-size:11px;font-weight:600;letter-spacing:-.015em}
.s-take .x{font-size:9.5px;color:#6b6580;line-height:1.45;margin-top:2px}
.s-sent{border:1px solid #e8e5f0;padding:10px;margin-bottom:10px}
.s-sent .v{font-size:24px;font-weight:600;color:#1d8a60;letter-spacing:-.03em}
.s-sent .track{height:7px;background:#eceaf2;margin-top:7px;display:flex;overflow:hidden}
.s-sent .track i{height:100%;transform-origin:left;transform:scaleX(1);transition:transform .8s var(--ease)}
.sim.arm .s-sent .track i{transform:scaleX(0);transition:none}

/* ── verdict / plan ──────────────────────────────────────────────── */
.s-plan{display:grid;gap:8px}
.s-plan .s-card{border-left:2px solid #6d4fe0}
.s-plan .k{font-family:var(--mono);font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:#6d4fe0}
.s-plan .t{font-size:12.5px;font-weight:600;letter-spacing:-.02em;margin-top:3px}
.s-plan .x{font-size:10px;color:#4e4860;margin-top:3px;line-height:1.45}

@media(max-width:620px){
  .s-heat{grid-template-columns:70px repeat(6,1fr)}
  .s-score{grid-template-columns:repeat(3,1fr)}
  .s-media,.s-segs,.s-wlg{grid-template-columns:1fr 1fr}
  .s-film{grid-template-columns:1fr}
  /* side by side leaves the chat ~110px wide — stack the storyboard over it */
  .s-film2{grid-template-columns:1fr;gap:10px}
  .s-film2 .s-board{order:-1}
  .s-chat .ch-log{height:132px}
}

/* ═══ media previews — a REAL generated sample behind the format glyph
   (images are AI-generated and owned by us) ══════════════════════════ */
.s-tile .im{height:60px;position:relative;overflow:hidden;background:#1a1622;display:block}
.s-tile .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.s-tile .im .ov{position:absolute;inset:0;z-index:2}
/* video / story play glyph over the image */
.im .ov.play::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.92)}
.im .ov.play::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-40%,-50%);
  border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #2a2440}
.im .ov.story::before{content:"";position:absolute;left:6px;right:6px;top:6px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,#fff 0 62%,rgba(255,255,255,.4) 62%)}
.im .ov.dots::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:5px;
  background:radial-gradient(circle,#fff 1.5px,transparent 1.7px) center/9px 9px}
/* legacy CSS-only fallbacks (kept for tiles with no image) */
.s-tile .im{height:60px;position:relative;overflow:hidden;background:#1a1622;display:block}
/* reel / story — vertical video, play glyph, caption bar */
.im.v-vid{background:linear-gradient(160deg,#2a2440,#4a3f6b)}
.im.v-vid::before{content:"";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent rgba(255,255,255,.92)}
.im.v-vid::after{content:"";position:absolute;left:8px;right:8px;bottom:7px;height:4px;border-radius:2px;background:rgba(255,255,255,.32)}
.im.v-story{background:linear-gradient(160deg,#3a2f5e,#6b5aa0)}
.im.v-story::before{content:"";position:absolute;left:7px;right:7px;top:6px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,#fff 0 62%,rgba(255,255,255,.35) 62%)}
.im.v-story::after{content:"";position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent rgba(255,255,255,.92)}
/* carousel — slides + dots */
.im.v-carousel{background:#fff;display:flex;align-items:center;gap:4px;padding:0 10px}
.im.v-carousel span{flex:none;width:38px;height:40px;border-radius:5px;background:linear-gradient(150deg,#c9bff0,#efeaff)}
.im.v-carousel span:nth-child(2){background:linear-gradient(150deg,#a58ef0,#d9ccfa)}
.im.v-carousel::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:4px;
  background:radial-gradient(circle,#6d4fe0 1.4px,transparent 1.6px) 0 0/9px 9px;background-position:center}
/* landing — browser + hero + button */
.im.v-landing{background:#fff;padding:7px 9px}
.im.v-landing::before{content:"";position:absolute;left:9px;top:8px;width:44%;height:7px;border-radius:2px;background:#3b3550}
.im.v-landing::after{content:"";position:absolute;left:9px;bottom:9px;width:34px;height:10px;border-radius:3px;background:#6d4fe0}
/* email — subject lines + button */
.im.v-email{background:#fff;padding:8px 9px}
.im.v-email::before{content:"";position:absolute;left:9px;top:9px;right:9px;height:5px;border-radius:2px;
  background:linear-gradient(90deg,#171225 0 40%,#d9d3ea 40%)}
.im.v-email::after{content:"";position:absolute;left:9px;bottom:9px;width:40px;height:9px;border-radius:3px;background:#6d4fe0}
/* post — avatar + text */
.im.v-post{background:#fff;padding:8px 9px}
.im.v-post::before{content:"";position:absolute;left:9px;top:9px;width:14px;height:14px;border-radius:50%;
  background:linear-gradient(140deg,#6d4fe0,#9a7bf0)}
.im.v-post::after{content:"";position:absolute;left:29px;top:10px;right:9px;height:5px;border-radius:2px;background:#c7c1d6;
  box-shadow:0 8px 0 #ddd8e8, 0 16px 0 #e6e2f0}

/* ═══ film — looping chat drives storyboard swaps ══════════════════ */
.s-film2{display:grid;grid-template-columns:.86fr 1.14fr;gap:11px;margin-top:12px}
.s-chat{border:1px solid #e8e5f0;border-radius:9px;background:#fbfaff;display:flex;flex-direction:column;overflow:hidden}
.s-chat .ch-hd{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid #eee9f5;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:#6d4fe0}
.s-chat .ch-hd i{width:6px;height:6px;border-radius:50%;background:#6d4fe0;flex:none}
/* Fixed box, not an auto height. The loop appends a bubble every ~1.5s and only
   trims past five, so an auto height grew this figure ~200px per cycle and shoved
   everything below it down the page. Newest messages sit at the bottom; older
   ones clip off the top, the way a chat pane scrolled to the end behaves. */
.s-chat .ch-log{padding:10px;display:flex;flex-direction:column;gap:6px;flex:0 0 auto;
  justify-content:flex-end;height:150px;min-height:0;overflow:hidden}
.s-msg{max-width:90%;padding:7px 9px;border-radius:9px;font-size:10.5px;line-height:1.42;
  transform:translateY(6px);transition:transform .3s var(--ease)}
.s-msg.ai{background:#fff;border:1px solid #e8e5f0;color:#3b3550;align-self:flex-start;border-bottom-left-radius:3px}
.s-msg.you{background:#6d4fe0;color:#fff;align-self:flex-end;border-bottom-right-radius:3px}
.s-msg.in{transform:none}
.s-typing{align-self:flex-start;display:inline-flex;gap:3px;padding:8px 10px;background:#fff;border:1px solid #e8e5f0;border-radius:9px}
.s-typing i{width:4px;height:4px;border-radius:50%;background:#6d4fe0;opacity:.4;animation:sTy 1.1s infinite}
.s-typing i:nth-child(2){animation-delay:.15s}.s-typing i:nth-child(3){animation-delay:.3s}
@keyframes sTy{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}

.s-board{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:7px}
.s-fr{position:relative;aspect-ratio:16/10;border-radius:7px;overflow:hidden;background:#1a1622}
.s-fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.s-fr::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55))}
.s-fr b{position:absolute;left:7px;bottom:6px;font-family:var(--mono);font-size:8px;letter-spacing:.05em;color:#fff;z-index:2}
.s-fr .vb{position:absolute;right:5px;top:5px;font-family:var(--mono);font-size:7px;letter-spacing:.04em;
  color:#fff;background:#6d4fe0;padding:1.5px 4px;border-radius:3px;opacity:0;transform:scale(.7);transition:opacity .3s,transform .3s var(--ease)}
.s-fr.upd .vb{opacity:1;transform:none}
.s-fr.upd{animation:frSwap .55s var(--ease)}
@keyframes frSwap{0%{filter:saturate(.2) brightness(1.3);transform:scale(1.04)}100%{filter:none;transform:none}}