/* ═══════════════════════════════════════════════════════════════════
   APP 2026 SKIN — restyles the control-center demo (dm-*) and the
   process sims (sim / s-*) to match the current product UI:
   dark icon rail, light lavender workspace, white rounded cards,
   lavender pills, purple primary actions, lavender heat ramp.
   Loaded after demo.css and sim.css; it only overrides presentation.
   Every animation hook (.arm, .on, data-view, stagger classes) is kept.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --ap-rail:#13112F; --ap-rail-2:#232150; --ap-rail-ink:rgba(255,255,255,.72);
  --ap-bg:#F5F4FB; --ap-card:#FFFFFF; --ap-line:#E9E7F3; --ap-line-2:#DDD9EC;
  --ap-ink:#1A1830; --ap-ink-2:#5B5876; --ap-ink-3:#8E8BA6;
  --ap-accent:#6D4FE0; --ap-accent-2:#5B3FD0; --ap-soft:#EEEBFA; --ap-soft-ink:#4B32B0;
  --ap-good:#16A34A; --ap-good-soft:#E7F6EE; --ap-bad:#DC4A4A;
  --ap-r:14px; --ap-r-sm:9px;
}

/* ───────────────────────── CONTROL CENTER (dm-*) ───────────────────────── */
.dm-win{border-radius:16px;border:1px solid var(--ap-line);background:var(--ap-bg)}
.dm-bar{background:#fff;border-bottom:1px solid var(--ap-line);padding:11px 16px}
.dm-bar .ttl{font-family:var(--mono);font-size:11.5px;color:var(--ap-ink-3)}
.dm-bar .live{color:var(--ap-good);background:var(--ap-good-soft);border-color:transparent}
.dm-bar .ver{color:var(--ap-ink-3)}
.dm-bar .dot{background:url(/media/brand/cc-mark.svg) center/cover no-repeat;width:20px;height:20px}

/* rail → the app's dark icon sidebar */
.dm-body{grid-template-columns:86px 1fr}
.dm-rail{background:var(--ap-rail);border-right:0;padding:14px 10px;display:flex;flex-direction:column;align-items:center}
.dm-rail::before{content:"";width:32px;height:32px;border-radius:50%;margin:2px 0 18px;background:url(/media/brand/cc-mark.svg) center/cover no-repeat;box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.dm-search,.dm-lbl{display:none}
.dm-mods{gap:4px;width:100%}
.dm-mod{flex-direction:column;gap:5px;padding:9px 4px;border-radius:10px;font-size:9.5px;color:var(--ap-rail-ink);letter-spacing:.01em;justify-content:center}
.dm-mod .ic{width:20px;height:20px;border-radius:6px;background:transparent;color:#C9C4EA;font-size:14px;line-height:1}
.dm-mod .ct{display:none}
.dm-mod.on{background:var(--ap-rail-2);color:#fff}
.dm-mod.on .ic{background:transparent;color:#fff}
.dm-rail::after{content:"J";margin-top:auto;width:28px;height:28px;border-radius:50%;background:var(--ap-accent);color:#fff;display:grid;place-items:center;font-size:11px;font-variation-settings:"wght" 650}

/* stage + type */
.dm-stage{background:var(--ap-bg)}
.dm-title{font-size:22px;color:var(--ap-ink);letter-spacing:-.025em;font-variation-settings:"wdth" 100,"wght" 700}
.dm-sub{color:var(--ap-ink-2);font-size:13px}
.dm-eyebrow{font-family:var(--sans);font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--ap-ink-3);margin-bottom:2px}
.dm-btn{background:var(--ap-accent);border-radius:10px;padding:9px 16px;font-size:12.5px;box-shadow:0 6px 16px -8px rgba(109,79,224,.7)}
.dm-btn.ghost{background:#fff;color:var(--ap-ink);border:1px solid var(--ap-line-2);box-shadow:none}

/* KPI strip → one white card, columns */
.dm-kpis{gap:0;background:#fff;border:1px solid var(--ap-line);border-radius:var(--ap-r);overflow:hidden;box-shadow:0 1px 2px rgba(26,24,48,.04)}
.dm-kpi{border:0;border-left:1px solid var(--ap-line);border-radius:0;background:#fff;padding:11px 14px}
.dm-kpi:first-child{border-left:0}
.dm-kpi .k{font-family:var(--sans);font-size:11px;letter-spacing:0;text-transform:none;color:var(--ap-ink-3)}
.dm-kpi .v{color:var(--ap-ink);font-variation-settings:"wdth" 100,"wght" 700}
.dm-kpi .d{font-family:var(--sans);color:var(--ap-good);font-size:10.5px}
.dm-kpi.hl{background:#fff;border-color:var(--ap-line)}
.dm-kpi.hl .v{color:var(--ap-accent)}

/* projects table → the app's list card */
.dm-tbl{border:1px solid var(--ap-line);border-radius:var(--ap-r);background:#fff;box-shadow:0 1px 2px rgba(26,24,48,.04)}
.dm-tbl .hd{background:#fff;border-bottom:1px solid var(--ap-line);font-family:var(--sans);font-size:9.5px;letter-spacing:.06em;color:var(--ap-ink-3)}
.dm-tr{border-bottom:1px solid var(--ap-line);font-size:12.5px;color:var(--ap-ink)}
.dm-tr.hot{background:var(--ap-soft)}
.dm-tr .nm{font-variation-settings:"wght" 650;letter-spacing:-.01em}
.dm-tr .nm::after{content:"COMPANY · Ready";display:block;font-size:8.5px;letter-spacing:.06em;color:var(--ap-ink-3);margin-top:2px}
.dm-tr .nm::after{content:attr(data-kind)}
.dm-tr .term{font-family:var(--sans);font-size:10.5px;color:var(--ap-soft-ink);background:var(--ap-soft);padding:3px 9px;border-radius:999px}
.dm-tr .pill{font-family:var(--sans);font-size:11px;font-variation-settings:"wght" 650;padding:0;border-radius:0;background:transparent}
.dm-tr .pill.ok{background:transparent;color:var(--ap-good)}
.dm-tr .pill.ok::after{content:"";display:inline-block;width:38px;height:5px;border-radius:4px;background:linear-gradient(90deg,var(--ap-good) 0 82%,#E9E7F3 82%);margin-left:8px;vertical-align:middle}
.dm-list-top .dm-title::after{content:attr(data-sub);display:block;font-size:12px;color:var(--ap-ink-2);letter-spacing:0;font-variation-settings:"wght" 400;margin-top:3px}

/* create-project panel */
.dm-create{border:1px solid var(--ap-line);border-radius:var(--ap-r);background:#fff;box-shadow:0 1px 2px rgba(26,24,48,.04)}
.dm-field label{font-family:var(--sans);font-size:11px;letter-spacing:0;text-transform:none;color:var(--ap-ink-2);font-variation-settings:"wght" 600}
.dm-input{border:1px solid var(--ap-line-2);border-radius:10px;background:var(--ap-bg)}
.dm-chip{border-radius:999px;border-color:var(--ap-line-2);background:#fff;color:var(--ap-ink-2)}
.dm-chip i{border-radius:50%}
.dm-chip.on{background:var(--ap-soft);border-color:var(--ap-accent);color:var(--ap-ink)}
.dm-create-foot .cnt{font-family:var(--sans);color:var(--ap-ink-3)}

/* charts, rows, drivers */
.dm-chart{border:1px solid var(--ap-line);border-radius:var(--ap-r);background:#fff;box-shadow:0 1px 2px rgba(26,24,48,.04)}
.dm-chart .ch b{color:var(--ap-ink)}
.dm-chart .ch span{font-family:var(--sans);color:var(--ap-ink-3)}
.dm-row{border:1px solid var(--ap-line);border-radius:var(--ap-r);background:#fff}
.dm-row .bar{background:#ECEAF5}
.dm-row.hl{background:var(--ap-soft);border-color:#CFC4F6}
.dm-drv{border:1px solid var(--ap-line);border-radius:var(--ap-r);background:#fff}
.dm-drv .h{font-family:var(--sans);font-size:11px;letter-spacing:0;text-transform:none;font-variation-settings:"wght" 650;border-bottom:1px solid var(--ap-line)}
.dm-drv.pain .h{color:var(--ap-bad)}
.dm-drv .r{border-bottom:1px solid var(--ap-line);color:var(--ap-ink)}
.dm-drv .r .m{font-family:var(--sans);color:var(--ap-ink-3)}

/* win / lose / gain + scoreboard */
.dm-wlg .c,.dm-sc .c{border:1px solid var(--ap-line);border-radius:var(--ap-r);background:#fff}
.dm-sc .c .k{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:9.5px;color:var(--ap-ink-3)}
.dm-sc .c .b{font-family:var(--sans);border-radius:999px;padding:2px 7px}

/* strategic report → the app's report page: cover block + section index */
.dm-report{border:1px solid var(--ap-line);border-radius:var(--ap-r);background:#fff;box-shadow:0 1px 2px rgba(26,24,48,.04);position:relative;overflow:hidden}
.dm-report::before{content:"";position:absolute;right:-60px;top:-80px;width:220px;height:220px;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 40% 40%,#8B6DF0 0,#6D4FE0 35%,rgba(109,79,224,.12) 62%,transparent 72%);filter:blur(2px)}
.dm-slide{border-bottom:1px solid var(--ap-line);position:relative;z-index:1}
.dm-slide .k{font-family:var(--sans);font-size:10px;letter-spacing:.08em;color:var(--ap-ink-3)}
.dm-slide h4{color:var(--ap-ink);font-size:20px}
.dm-slide:first-child h4{font-size:26px;letter-spacing:-.03em}
.dm-slide:first-child h4::after{content:" Strategic report.";color:var(--ap-accent);display:block}
.dm-slide p{color:var(--ap-ink-2)}
.dm-slide.verdict{background:var(--ap-soft)}

/* segments → "Who is this campaign for?" cards */
.dm-seg{border:1px solid var(--ap-line);border-radius:var(--ap-r);background:#fff;box-shadow:0 1px 2px rgba(26,24,48,.04);padding:16px}
.dm-seg .pc{background:transparent;color:var(--ap-accent);font-size:20px;padding:0;letter-spacing:-.03em;right:14px;top:12px}
.dm-seg .pc::after{content:"of the talk";display:block;font-size:8.5px;color:var(--ap-ink-3);letter-spacing:0;font-variation-settings:"wght" 400;text-align:right}
.dm-seg .nm{font-size:14.5px;padding-right:62px}
.dm-seg .mt{position:relative;height:5px;border-radius:4px;background:#ECEAF5;margin-top:10px;font-size:0;overflow:hidden}
.dm-seg .mt::before{content:"";position:absolute;left:0;top:0;height:100%;width:46%;border-radius:4px;background:var(--ap-accent)}
.dm-seg .ds{color:var(--ap-ink-2)}
.dm-seg .go{border-radius:10px;padding:9px;font-size:12px}
.dm-seg.hot{border-color:var(--ap-accent);box-shadow:0 0 0 2px var(--ap-accent)}
.dm-seg.hot .go::before{content:"Continue · "}

/* ideas / wall / formats / enlarge */
.dm-idea,.dm-wcard,.dm-fmt,.dm-preview,.dm-refine{border:1px solid var(--ap-line);border-radius:var(--ap-r);background:#fff;box-shadow:0 1px 2px rgba(26,24,48,.04)}
.dm-idea .ih b,.dm-preview .ph b{font-family:var(--sans);font-size:9.5px;letter-spacing:0;background:var(--ap-soft);color:var(--ap-soft-ink);border-radius:999px;padding:2px 8px}
.dm-idea .ih span,.dm-preview .ph span{font-family:var(--sans);color:var(--ap-ink-3)}
.dm-preview .ph{background:#fff;border-bottom:1px solid var(--ap-line)}
.dm-wnew{border-radius:var(--ap-r);background:var(--ap-soft);border-color:#CFC4F6}
.dm-fmt .ic{border-radius:10px;background:var(--ap-soft);color:var(--ap-soft-ink)}
.dm-fmt.hot{border-color:var(--ap-accent);background:var(--ap-soft);box-shadow:0 0 0 2px var(--ap-accent)}
.dm-refine .rh{font-family:var(--sans);font-size:10.5px;letter-spacing:.06em;color:var(--ap-ink-3);border-bottom:1px solid var(--ap-line)}
.dm-refine .rh i{background:var(--ap-accent)}
.dm-refine .rh::after{content:"Chat with me to refine this, like a strategist on your side.";display:block;flex-basis:100%;font-size:11px;letter-spacing:0;text-transform:none;color:var(--ap-ink);margin-top:6px;font-variation-settings:"wght" 600}
.dm-refine .rh{flex-wrap:wrap}
.dm-msg{border-radius:12px}
.dm-msg.ai{background:var(--ap-bg);border-color:var(--ap-line);color:var(--ap-ink-2)}
.dm-msg.you{background:var(--ap-accent)}
.dm-typing{background:var(--ap-bg);border-color:var(--ap-line);border-radius:12px}

/* heatmap → topic ownership (lavender ramp, dark text on light cells) */
.dm-heat{border:1px solid var(--ap-line);border-radius:var(--ap-r);background:#fff;box-shadow:0 1px 2px rgba(26,24,48,.04)}
.dm-heat .hh{font-family:var(--sans);font-size:10px;letter-spacing:0;text-transform:none;color:var(--ap-ink-2);font-variation-settings:"wght" 600;border-bottom:1px solid var(--ap-line)}
.dm-heat .hh.rl{color:var(--ap-ink-3);font-variation-settings:"wght" 400}
.dm-heat .rl{border-right:0;color:var(--ap-ink)}
.dm-heat .body .hrow{border-bottom:1px solid var(--ap-line)}
.dm-heat .cell{color:var(--ap-ink);font-variation-settings:"wght" 600;border-left:1px solid #fff}
.dm-heat .cell[style*="#5b3fd0"]{background:#6D4FE0!important;color:#fff}
.dm-heat .cell[style*="#8a72e6"]{background:#9B86EC!important;color:#fff}
.dm-heat .cell[style*="#9a85e9"]{background:#AC9BF0!important;color:#fff}
.dm-heat .cell[style*="#a292ec"]{background:#BEB0F3!important}
.dm-heat .cell[style*="#b0a2ee"]{background:#CFC4F6!important}
.dm-heat .cell[style*="#bcb0f1"]{background:#D9D1F8!important}
.dm-heat .cell[style*="#c8bef4"]{background:#E3DDFA!important}
.dm-heat .cell[style*="#d5cdf7"],.dm-heat .cell[style*="#dcd4f9"]{background:#ECE8FB!important}
.dm-heat .cell[style*="#e6e0fb"]{background:#F4F2FD!important}
.dm-heat .cell.lead::after{color:var(--ap-ink)}
.dm-heat .cell[style*="#5b3fd0"].lead::after{color:#fff}
.dm-heat-note{background:#fff;border-top:1px solid var(--ap-line);color:var(--ap-ink-3);font-size:10.5px}
.dm-heat-note::before{content:"💡 Tip: click a row to see the 30-day trend. ";color:var(--ap-ink-3)}
.dm-lead-kpis .dm-kpi{border-left:0;border:1px solid var(--ap-line);border-radius:var(--ap-r)}
.dm-lead-kpis{gap:9px}

/* hud + cursor stay; hud goes white */
.dm-hud{background:#fff;border-color:var(--ap-line);font-family:var(--sans);font-size:10.5px;color:var(--ap-ink-3)}
.dm-hud .bars i{background:var(--ap-line-2)}.dm-hud .bars i.on{background:var(--ap-accent)}

@media(max-width:1000px){.dm-body{grid-template-columns:1fr}}

/* ───────────────────────── PROCESS SIMS (sim / s-*) ───────────────────────── */
.sim{display:grid;grid-template-columns:46px 1fr;background:var(--ap-bg);color:var(--ap-ink);border-radius:0}
.sim-sweep{grid-column:1/-1;grid-row:1/-1}
/* top bar → dark left rail with logo, faux nav dots and the status at the bottom */
.sim-top{grid-column:1;grid-row:1;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;padding:10px 0;
  background:var(--ap-rail);border-bottom:0;border-right:0;min-height:100%}
.sim-top .lg{width:24px;height:24px;border-radius:50%;background:url(/media/brand/cc-mark.svg) center/cover no-repeat;margin-bottom:14px}
.sim-top .nm{display:none}
.sim-top::before{content:"";width:26px;height:118px;border-radius:7px;
  background:
    linear-gradient(var(--ap-rail-2),var(--ap-rail-2)) 0 0/26px 24px no-repeat,
    radial-gradient(circle,#fff 0 2.2px,transparent 2.6px) 50% 10px/26px 24px repeat-y;
  opacity:.9}
.sim-top .rt{margin-left:0;margin-top:auto;flex-direction:column;gap:3px;color:#A5A0C9;font-size:7px;letter-spacing:.04em;text-transform:uppercase;text-align:center}
.sim-top .rt i{background:var(--ap-good);border-radius:50%;width:6px;height:6px;box-shadow:0 0 0 3px rgba(22,163,74,.18)}
.sim-body{grid-column:2;padding:14px 16px 16px}
.sim-h{color:var(--ap-ink);font-size:17px;font-weight:700;letter-spacing:-.025em}
.sim-sub{color:var(--ap-ink-2)}
.sim-eyebrow{font-family:var(--sans);font-size:10px;letter-spacing:0;text-transform:none;color:var(--ap-ink-3)}

/* primitives → cards and pills */
.s-card{border:1px solid var(--ap-line);border-radius:var(--ap-r-sm);background:#fff;box-shadow:0 1px 2px rgba(26,24,48,.04)}
.s-card .l{font-family:var(--sans);font-size:9px;letter-spacing:0;text-transform:none;color:var(--ap-ink-3)}
.s-card .v{color:var(--ap-ink)}
.s-card .d{color:var(--ap-good)}
.s-card.hl{background:#fff;border-color:var(--ap-line)}
.s-card.hl .v{color:var(--ap-accent)}
.s-kpis{gap:0;border:1px solid var(--ap-line);border-radius:var(--ap-r-sm);overflow:hidden;background:#fff}
.s-kpis .s-card{border:0;border-left:1px solid var(--ap-line);border-radius:0;box-shadow:none}
.s-kpis .s-card:first-child{border-left:0}
.s-tbl{border:1px solid var(--ap-line);border-radius:var(--ap-r-sm);overflow:hidden;background:#fff}
.s-tbl .hd{background:#fff;border-bottom:1px solid var(--ap-line);font-family:var(--sans);font-size:8.5px;letter-spacing:.06em;color:var(--ap-ink-3)}
.s-row{border-bottom:1px solid var(--ap-line);color:var(--ap-ink)}
.s-row .term{font-family:var(--sans);font-size:9px;color:var(--ap-soft-ink);background:var(--ap-soft);border-radius:999px;padding:2px 7px}
.s-row .src{border-radius:50%}
.s-row .sent{color:var(--ap-good)}
.s-bar{background:#ECEAF5;border-radius:4px}
.s-row .s-bar i{background:var(--ap-good);border-radius:4px}
.s-chart{border:1px solid var(--ap-line);border-radius:var(--ap-r-sm);background:#fff}
.s-legend span{color:var(--ap-ink-2)}
.s-legend i{border-radius:50%}

/* heatmap */
.s-heat{gap:3px}
.s-heat .ch{font-family:var(--sans);font-size:8.5px;letter-spacing:0;text-transform:none;color:var(--ap-ink-2);font-weight:600}
.s-heat .rh{color:var(--ap-ink);font-size:9.5px}
.s-heat .rh i{border-radius:50%}
.s-cell{border-radius:5px;color:var(--ap-ink)}
.s-cell[style*="#5b3fd0"]{background:#6D4FE0!important;color:#fff}
.s-cell[style*="#8a72e6"]{background:#9B86EC!important;color:#fff}
.s-cell[style*="#9a85e9"]{background:#AC9BF0!important;color:#fff}
.s-cell[style*="#a292ec"]{background:#BEB0F3!important}
.s-cell[style*="#b0a2ee"]{background:#CFC4F6!important}
.s-cell[style*="#bcb0f1"]{background:#D9D1F8!important}
.s-cell[style*="#c8bef4"]{background:#E3DDFA!important}
.s-cell[style*="#d5cdf7"],.s-cell[style*="#dcd4f9"]{background:#ECE8FB!important}
.s-cell[style*="#e6e0fb"]{background:#F4F2FD!important}

/* win/lose/gain, score, segments, media, film, takeaways, plan */
.s-wlg .lose .t{color:var(--ap-bad)}
.s-score .b{border-radius:999px}
.s-score .b.lead{background:var(--ap-good-soft);color:var(--ap-good)}
.s-score .b.you{background:var(--ap-soft);color:var(--ap-soft-ink)}
.s-seg{border:1px solid var(--ap-line);border-radius:var(--ap-r-sm);background:#fff;box-shadow:0 1px 2px rgba(26,24,48,.04)}
.s-seg .pc{background:transparent;color:var(--ap-accent);font-size:15px;padding:0;letter-spacing:-.03em}
.s-seg .pc::after{content:"of the talk";display:block;font-size:7px;color:var(--ap-ink-3);font-weight:400;text-align:right}
.s-seg .nm{padding-right:50px}
.s-seg .mt{position:relative;height:4px;border-radius:4px;background:#ECEAF5;margin-top:8px;font-size:0;overflow:hidden}
.s-seg .mt::before{content:"";position:absolute;left:0;top:0;height:100%;width:45%;border-radius:4px;background:var(--ap-accent)}
.s-seg .ds{color:var(--ap-ink-2)}
.s-seg .cta{border-radius:8px}
.s-tile{border:1px solid var(--ap-line);border-radius:var(--ap-r-sm);background:#fff}
.s-tile .th{border-bottom:1px solid var(--ap-line)}
.s-tile .th b{font-family:var(--sans);font-size:8.5px;letter-spacing:0;background:var(--ap-soft);color:var(--ap-soft-ink);border-radius:999px;padding:2px 6px}
.s-tile .th span{color:var(--ap-ink-3)}
.s-frame,.s-fr{border-radius:7px}
.s-frame b{color:#fff}
.s-script{border-left:1px solid var(--ap-line)}
.s-line{border-bottom:1px solid var(--ap-line)}
.s-line b{font-family:var(--sans);color:var(--ap-accent);font-weight:600}
.s-take .s-row{border:1px solid var(--ap-line);border-radius:var(--ap-r-sm);background:#fff}
.s-take .n{font-family:var(--sans);color:var(--ap-accent);font-weight:600}
.s-sent{border:1px solid var(--ap-line);border-radius:var(--ap-r-sm);background:#fff}
.s-sent .v{color:var(--ap-good)}
.s-sent .track{border-radius:4px;background:#ECEAF5}
.s-plan .s-card{border-left:1px solid var(--ap-line);border-radius:var(--ap-r-sm);box-shadow:0 1px 2px rgba(26,24,48,.04)}
.s-plan .k{font-family:var(--sans);letter-spacing:0;text-transform:none;color:var(--ap-ink-3);font-size:9px}
.s-chat{border:1px solid var(--ap-line);border-radius:var(--ap-r-sm);background:#fff}
.s-chat .ch-hd{font-family:var(--sans);font-size:9.5px;letter-spacing:.04em;color:var(--ap-ink-3);border-bottom:1px solid var(--ap-line)}
.s-msg{border-radius:10px}
.s-msg.ai{background:var(--ap-bg);border-color:var(--ap-line);color:var(--ap-ink-2)}
.s-msg.you{background:var(--ap-accent)}
.s-typing{background:var(--ap-bg);border-color:var(--ap-line);border-radius:10px}
.s-fr .vb{border-radius:4px}
.sim-sweep{background:linear-gradient(90deg,transparent,rgba(109,79,224,.16) 48%,transparent)}

@media(max-width:620px){.sim{grid-template-columns:36px 1fr}.sim-top::before{width:20px;background-size:20px 22px,20px 22px}}

/* ───────────────────────── REPORT SLIDES (app design) ───────────────────────── */
.dm-layout .dm-report .dm-scrollport{max-height:438px}
.dm-scrollport{max-height:470px}
.dm-slide.rp{padding:14px 18px 16px;background:#fff}
.dm-slide.rp .rp-brand{margin-bottom:8px}
.dm-slide.rp .rp-sub{margin-bottom:9px}
.dm-slide.rp h4::after{content:none}
.rp-brand{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;color:var(--ap-ink);margin-bottom:12px}
.rp-brand i{width:16px;height:16px;border-radius:50%;background:url(/media/brand/cc-mark.svg) center/cover no-repeat;display:block}
.rp-hd{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.rp-hd .dots{display:flex;gap:3px}
.rp-hd .dots i{width:14px;height:3px;border-radius:2px;background:#DDD9EC;display:block}
.rp-hd .dots i.on{background:var(--ap-accent)}
.rp-hd span{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ap-ink-3);font-weight:600}
.rp-t{font-size:19px;font-variation-settings:"wdth" 100,"wght" 700;letter-spacing:-.03em;line-height:1.15;color:var(--ap-ink);margin:0 0 4px}
.rp-t .acc{color:var(--ap-accent)}
.rp-sub{font-size:10.5px;color:var(--ap-ink-2);margin-bottom:12px;line-height:1.4}
.rp-kpis{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--ap-line);border-radius:10px;background:#fff;box-shadow:0 1px 2px rgba(26,24,48,.04);margin-bottom:10px;overflow:hidden}
.rp-kpis.six{grid-template-columns:repeat(6,1fr)}
.rp-kpi{padding:9px 11px;border-left:1px solid var(--ap-line);min-width:0}
.rp-kpi:first-child{border-left:0}
.rp-kpi .k{font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--ap-ink-3);font-weight:600}
.rp-kpi .v{font-size:18px;font-weight:700;letter-spacing:-.03em;color:var(--ap-ink);margin-top:3px;line-height:1}
.rp-kpis.six .rp-kpi .v{color:var(--ap-accent);font-size:16px}
.rp-kpi .c{display:inline-block;margin-top:5px;font-size:8px;font-weight:600;padding:2px 6px;border-radius:5px;background:var(--ap-good-soft);color:var(--ap-good)}
.rp-kpi .s{display:block;font-size:8px;color:var(--ap-ink-3);margin-top:4px}
.rp-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:10px}
.rp-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rp-card{border:1px solid var(--ap-line);border-radius:10px;background:#fff;padding:10px 12px;box-shadow:0 1px 2px rgba(26,24,48,.04);min-width:0}
.rp-card .lbl{font-size:8px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--ap-ink-3);margin-bottom:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rp-card .lbl.good{color:var(--ap-good)}.rp-card .lbl.warn{color:#C58A00}
.rp-card .lbl i{width:16px;height:16px;border-radius:4px;background:var(--ap-soft);color:var(--ap-soft-ink);display:grid;place-items:center;font-style:normal;font-size:7.5px}
.rp-card p{font-size:9.5px;color:var(--ap-ink-2);line-height:1.45}
.rp-card.purple{background:var(--ap-accent);border-color:var(--ap-accent);color:#fff}
.rp-card.purple .lbl,.rp-card.purple p{color:rgba(255,255,255,.85)}
.rp-card.purple .lbl i{background:rgba(255,255,255,.2);color:#fff}
.rp-card.purple .big{font-size:30px;font-weight:700;letter-spacing:-.04em;line-height:1}
.rp-card.purple .big small{font-size:9.5px;font-weight:400;letter-spacing:0;margin-left:6px;color:rgba(255,255,255,.85)}
.rp-card.purple .track{height:6px;border-radius:4px;background:rgba(255,255,255,.22);margin:9px 0 5px;display:flex;overflow:hidden}
.rp-card.purple .track i{height:100%;display:block}
.rp-card.purple .mix{font-size:8px;color:rgba(255,255,255,.85);display:flex;gap:10px}
.rp-card.purple h5{font-size:11.5px;font-weight:700;margin:6px 0 3px;color:#fff}
.rp-card .pill{display:inline-block;font-size:8px;font-weight:600;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.2);color:#fff;letter-spacing:0;text-transform:none}
.rp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.rp-stats div{font-size:7.5px;color:rgba(255,255,255,.8);letter-spacing:.06em;text-transform:uppercase}
.rp-stats b{display:block;font-size:12px;color:#fff;letter-spacing:-.02em;margin-top:2px}
.rp-list{display:grid;gap:6px}
.rp-li{display:grid;grid-template-columns:18px 1fr;gap:8px;align-items:start}
.rp-li i{width:18px;height:18px;border-radius:5px;background:var(--ap-accent);color:#fff;font-size:8px;font-weight:700;display:grid;place-items:center;font-style:normal}
.rp-li b{display:block;font-size:10px;color:var(--ap-ink);letter-spacing:-.01em}
.rp-li span{display:block;font-size:8.5px;color:var(--ap-ink-2);line-height:1.4}
.rp-topics{display:grid;border:1px solid var(--ap-line);border-radius:10px;overflow:hidden;background:#fff}
.rp-tr{display:grid;grid-template-columns:8px 1fr auto auto;gap:7px;align-items:center;padding:6px 10px;border-top:1px solid var(--ap-line);font-size:9.5px;color:var(--ap-ink)}
.rp-tr:first-child{border-top:0}
.rp-tr.hot{background:var(--ap-soft)}
.rp-tr i{width:7px;height:7px;border-radius:50%;display:block}
.rp-tr .tag{font-size:7.5px;font-weight:600;letter-spacing:.05em;padding:2px 6px;border-radius:5px;background:#EEEDF5;color:var(--ap-ink-2);font-family:var(--sans);text-transform:uppercase}
.rp-tr .tag.star{background:var(--ap-good-soft);color:var(--ap-good)}
.rp-tr .tag::before{content:none}
.rp-tr .sc{font-weight:600;min-width:26px;text-align:right}
.rp-tr .sc.neg{color:var(--ap-bad)}.rp-tr .sc.pos{color:var(--ap-good)}
.rp-bubble{position:relative;border:1px solid var(--ap-line);border-radius:10px;background:#fff;aspect-ratio:1.55;overflow:hidden}
.rp-bubble .q{position:absolute;width:50%;height:50%;font-size:7px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:7px 9px}
.rp-bubble .q1{left:0;top:0;background:#F3F2FA;color:var(--ap-ink-2)}
.rp-bubble .q2{right:0;top:0;background:#EAF7EF;color:var(--ap-good);text-align:right}
.rp-bubble .q3{left:0;bottom:0;color:var(--ap-ink-3);display:flex;align-items:flex-end}
.rp-bubble .q4{right:0;bottom:0;background:#FBF4E6;color:#C58A00;text-align:right;display:flex;align-items:flex-end;justify-content:flex-end}
.rp-bubble .ax{position:absolute;font-size:7px;letter-spacing:.08em;text-transform:uppercase;color:var(--ap-ink-3);font-weight:600}
.rp-bubble .ax.y{left:5px;top:50%;transform:rotate(-90deg) translateX(50%);transform-origin:left}
.rp-bubble .ax.x{left:50%;bottom:4px;transform:translateX(-50%)}
.rp-bubble .b{position:absolute;border-radius:50%;background:var(--ap-good);border:2px solid #fff;box-shadow:0 2px 6px rgba(26,24,48,.2);transform:translate(-50%,-50%) scale(1);transition:transform .6s var(--ease)}
.rp-bubble .b.neg{background:var(--ap-bad)}.rp-bubble .b.mix{background:#4F9DDB}
.rp-bubble .b em{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:5px;font-style:normal;font-size:7.5px;font-weight:600;color:var(--ap-ink);white-space:nowrap;background:#fff;padding:1px 5px;border-radius:4px;box-shadow:0 1px 3px rgba(26,24,48,.15)}
.dm-stage.arm .rp-bubble .b,.sim.arm .rp-bubble .b{transform:translate(-50%,-50%) scale(0);transition:none}
.rp-map{border:1px solid var(--ap-line);border-radius:10px;background:#fff;padding:10px 12px 14px 24px;position:relative}
.rp-map .grid{position:relative;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);aspect-ratio:1.5;border:1px solid #E3E1EE;
  background:linear-gradient(90deg,#ECEAF5 1px,transparent 1px) 0 0/20% 100%,linear-gradient(#ECEAF5 1px,transparent 1px) 0 0/100% 20%}
.rp-map .cell{grid-column:var(--c);grid-row:var(--r);background:var(--ap-soft);display:grid;place-items:center;text-align:center;font-size:7px;font-weight:600;color:var(--ap-soft-ink);padding:3px;line-height:1.25}
.rp-map .pt{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:grid;justify-items:center;gap:2px;transition:transform .6s var(--ease)}
.rp-map .pt i{width:8px;height:8px;border-radius:50%;background:var(--ap-accent);display:block;border:2px solid #fff;box-shadow:0 0 0 1px var(--ap-accent)}
.rp-map .pt.you i{width:12px;height:12px;box-shadow:0 0 0 2px var(--ap-accent),0 0 0 5px rgba(109,79,224,.18)}
.rp-map .pt b{font-size:7.5px;color:var(--ap-ink);white-space:nowrap}
.dm-stage.arm .rp-map .pt,.sim.arm .rp-map .pt{transform:translate(-50%,-50%) scale(0);transition:none}
.rp-map .ax{position:absolute;font-size:7px;letter-spacing:.08em;text-transform:uppercase;color:var(--ap-ink-3);font-weight:600}
.rp-map .ax.y{left:6px;top:50%;transform:rotate(-90deg) translateX(-50%);transform-origin:left top;white-space:nowrap}
.rp-map .ax.x{left:50%;bottom:1px;transform:translateX(-50%)}
.rp-map .ax.xl{left:24px;bottom:1px}.rp-map .ax.xr{right:12px;bottom:1px}
.sim-rp .rp-t{font-size:16px}
.sim-rp .rp-kpis.six{grid-template-columns:repeat(3,1fr)}

/* ───────────────────────── LUMEN (AI assistant view) ───────────────────────── */
.lm{display:flex;flex-direction:column;gap:10px;height:100%}
.lm-hd{display:flex;align-items:center;gap:8px}
.lm-hd i{width:22px;height:22px;border-radius:50%;background:url(/media/brand/cc-mark.svg) center/cover no-repeat;display:block}
.lm-hd b{font-size:14px;letter-spacing:-.02em}
.lm-hd span{font-size:10.5px;color:var(--ap-ink-3);margin-left:auto;text-align:right}
.lm-log{display:flex;flex-direction:column;gap:8px;min-height:0}
.lm-you{align-self:flex-end;max-width:78%;background:var(--ap-accent);color:#fff;border-radius:12px 12px 3px 12px;padding:8px 11px;font-size:12px;line-height:1.4;transform:translateY(8px);opacity:0;transition:transform .35s var(--ease),opacity .35s}
.lm-you.in{transform:none;opacity:1}
.lm-plan{align-self:flex-start;width:100%;background:#fff;border:1px solid var(--ap-line);border-radius:12px 12px 12px 3px;box-shadow:0 1px 2px rgba(26,24,48,.04);overflow:hidden;transform:translateY(8px);opacity:0;transition:transform .35s var(--ease),opacity .35s}
.lm-plan.in{transform:none;opacity:1}
.lm-plan .ph{display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid var(--ap-line);font-size:11.5px;color:var(--ap-ink)}
.lm-plan .ph i{width:16px;height:16px;border-radius:50%;background:url(/media/brand/cc-mark.svg) center/cover no-repeat;display:block;flex:none}
.lm-plan .ph span{margin-left:auto;font-size:9.5px;color:var(--ap-ink-3);flex:none}
.lm-task{display:grid;grid-template-columns:18px 1fr auto;gap:9px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--ap-line);font-size:11.5px;color:var(--ap-ink-2);transition:color .3s}
.lm-task .ck{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--ap-line-2);display:grid;place-items:center;font-size:9px;color:transparent;transition:background .3s,border-color .3s,color .3s}
.lm-task.on{color:var(--ap-ink)}
.lm-task.on .ck{border-color:var(--ap-accent);border-top-color:transparent;animation:lmSpin .8s linear infinite}
@keyframes lmSpin{to{transform:rotate(360deg)}}
.lm-task.done{color:var(--ap-ink)}
.lm-task.done .ck{background:var(--ap-good);border-color:var(--ap-good);color:#fff;animation:none}
.lm-task .st{font-size:9px;color:var(--ap-ink-3)}
.lm-task.on .st{color:var(--ap-accent)}.lm-task.done .st{color:var(--ap-good)}
.lm-outs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px 12px;background:var(--ap-bg);border-top:1px solid var(--ap-line)}
.lm-out{background:#fff;border:1px solid var(--ap-line);border-radius:9px;padding:8px 9px;min-width:0;transform:translateY(10px);opacity:0;transition:transform .45s var(--ease),opacity .45s}
.lm-out.in{transform:none;opacity:1}
.lm-out .k{font-size:7.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ap-ink-3);font-weight:600;margin-bottom:4px}
.lm-out b{display:block;font-size:10.5px;color:var(--ap-ink);letter-spacing:-.01em;line-height:1.25}
.lm-out span{display:block;font-size:8.5px;color:var(--ap-ink-2);margin-top:2px}
.lm-out .bar{height:4px;border-radius:3px;background:#ECEAF5;margin-top:6px;overflow:hidden}
.lm-out .bar i{display:block;height:100%;width:var(--w);background:var(--ap-accent)}
.lm-out .heat{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:6px}
.lm-out .heat i{height:9px;border-radius:2px;display:block}
.lm-out .thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:6px}
.lm-out .thumbs img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px;display:block}
.lm-box{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--ap-line-2);border-radius:14px;padding:10px 12px;box-shadow:0 8px 24px -14px rgba(26,24,48,.25);margin-top:auto}
.lm-box .inp{flex:1;font-size:12.5px;color:var(--ap-ink);min-height:18px;display:flex;align-items:center}
.lm-box .inp:empty::before{content:"Tell me about your business…";color:var(--ap-ink-3)}
.lm-box .car{width:1.5px;height:14px;background:var(--ap-accent);animation:dmCar 1s step-end infinite}
.lm-box .send{width:28px;height:28px;border-radius:50%;background:var(--ap-accent);color:#fff;display:grid;place-items:center;font-size:12px;flex:none}
.lm-box .hint{font-size:9px;color:var(--ap-ink-3)}
@media(max-width:620px){.lm-outs{grid-template-columns:1fr 1fr}.rp-kpis.six{grid-template-columns:repeat(3,1fr)}.rp-grid,.rp-grid3{grid-template-columns:1fr}.lm-box .hint{display:none}}

/* hero post: the generated clip fills the Instagram card like the image did */
.hs-post .im video{width:100%;height:100%;object-fit:cover;display:block;background:#1a1622}

/* ───────────────────────── PHONE: workspace cards instead of the tour ───────────────────────── */
.dm-mobile{display:none}
@media(max-width:760px){
  .dm-layout .dm-win{display:none}
  .dm-mobile{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:4px -16px 0;padding:4px 16px 14px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .dm-mobile::-webkit-scrollbar{display:none}
  .mm-card{flex:0 0 82%;scroll-snap-align:start;background:#fff;border:1px solid var(--ap-line);border-radius:16px;padding:16px;
    box-shadow:0 10px 30px -18px rgba(26,24,48,.35);display:flex;flex-direction:column;gap:10px;color:var(--ap-ink)}
  .mm-hd{display:flex;align-items:center;gap:9px}
  .mm-hd b{font-size:15px;letter-spacing:-.02em}
  .mm-ic{width:30px;height:30px;border-radius:9px;background:var(--ap-rail);color:#fff;display:grid;place-items:center;font-size:14px;flex:none}
  .mm-card p{font-size:13px;color:var(--ap-ink-2);line-height:1.45}
  .mm-kpi{display:flex;justify-content:space-between;align-items:baseline;padding:10px 12px;border-radius:11px;background:var(--ap-accent);color:#fff}
  .mm-kpi span{font-size:11px;opacity:.85}.mm-kpi b{font-size:24px;letter-spacing:-.03em}
  .mm-row{display:grid;grid-template-columns:1fr 90px;gap:10px;align-items:center;font-size:12px}
  .mm-row i{height:6px;border-radius:4px;background:linear-gradient(90deg,var(--ap-good) var(--w),#ECEAF5 var(--w))}
  .mm-row.neg i{background:linear-gradient(90deg,var(--ap-bad) var(--w),#ECEAF5 var(--w))}
  .mm-heat{display:grid;grid-template-columns:1fr repeat(3,38px);gap:4px;align-items:center;font-size:11.5px}
  .mm-heat em{font-style:normal;font-size:10px;color:var(--ap-ink-3);text-align:center;font-weight:600}
  .mm-heat i{height:24px;border-radius:5px;background:#F4F2FD;display:block}
  .mm-heat i.h1{background:#D9D1F8}.mm-heat i.h2{background:#AC9BF0}.mm-heat i.h4{background:#6D4FE0}
  .mm-heat i.open{background:transparent;border:1.5px dashed var(--ap-accent)}
  .mm-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .mm-thumbs img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:8px;display:block}
  .mm-tasks{list-style:none;display:grid;gap:7px;margin:0;padding:0}
  .mm-tasks li{display:flex;align-items:center;gap:9px;font-size:13px}
  .mm-tasks li::before{content:"✓";width:18px;height:18px;border-radius:50%;background:var(--ap-good);color:#fff;display:grid;place-items:center;font-size:10px;flex:none}
}
