/* Approved design (Raj, 2026-10-02): software status. Off-white page, big modern grotesk with one
italic serif phrase per title, mono labels like a status page, ONE live green only where something
is running. Motion: title lines unmask upward once, content fades up once; live dots breathe on
3 slides only (5, 6, 9). Cover fully static. Single light look on purpose.
Theme 2026-10-05 (Raj): powder-to-lilac wash; ring #5482B0 + teal #0C8F7B (one step darker so both hold 3:1). */
:root{
color-scheme:light;
--warm:#D2604F; --warm-text:#B84A3A; --warm-soft:rgba(210,96,79,.20); --warm-glow:rgba(210,96,79,.45);
--page:#DFE5F2; --ink:#111318; --body:#56606B; --muted:#535D69; --line:#CBD6E1; --chip:#F7FAFC;
--live:#0C8F7B; --live-glow:rgba(12,143,123,.45); --live-text:#0B6B5E; --live-soft:#D3F0E8; --live-ink:#0A5A50;
--sans:"Instrument Sans","Segoe UI",Arial,Helvetica,sans-serif;
--serif:"Instrument Serif",Georgia,serif;
--mono:"JetBrains Mono",Consolas,"Courier New",monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#DAE3EB;color:var(--ink);font-family:var(--sans);overflow:hidden}
p,h1,h2,h3{margin:0}
.stage{position:absolute;left:0;top:0;width:calc(1920 * var(--u));height:calc(1080 * var(--u));transform-origin:0 0;overflow:hidden;background:linear-gradient(160deg,#D3E1EF 0%,#DFE5F2 50%,#ECEAF4 100%)}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.5;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,")}
.slide{position:absolute;inset:0;padding:calc(128 * var(--u)) calc(160 * var(--u));display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .45s ease-out,visibility 0s linear .45s}
.slide.on{opacity:1;visibility:visible;transition:opacity .45s ease-out}
.top{display:flex;justify-content:space-between;font:400 calc(18 * var(--u)) var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:calc(28 * var(--u));border-top:calc(1 * var(--u)) solid var(--line);font:400 calc(18 * var(--u)) var(--mono);color:var(--muted);letter-spacing:.04em}
.label{font:500 calc(20 * var(--u)) var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.big{font:500 calc(140 * var(--u))/1 var(--sans);letter-spacing:-.045em}
.h2{font:500 calc(88 * var(--u))/1.02 var(--sans);letter-spacing:-.04em}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.body{font:400 calc(28 * var(--u))/1.5 var(--sans);color:var(--body)}
.line{display:block;overflow:hidden;padding-bottom:.08em}
.line > span{display:block}
.pills{display:flex;gap:calc(14 * var(--u));flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:calc(12 * var(--u));padding:calc(12 * var(--u)) calc(24 * var(--u));border-radius:calc(999 * var(--u));font:500 calc(24 * var(--u)) var(--sans);color:var(--ink);white-space:nowrap;background:linear-gradient(180deg,rgba(251,252,254,.85) 0%,rgba(240,244,249,.85) 100%);border:calc(1 * var(--u)) solid rgba(255,255,255,.6);box-shadow:inset 0 calc(1 * var(--u)) 0 rgba(255,255,255,.9),0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(17,19,24,.04),0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(40,60,95,.06)}
/* pills = soft clay buttons, from Raj's UI styleguide reference (2026-10-05) */
.dot{position:relative;width:calc(10 * var(--u));height:calc(10 * var(--u));border-radius:50%;background:var(--muted);flex:none}
.pill.live{color:var(--live-ink);background:linear-gradient(180deg,#E6F6F1 0%,#D6F0E8 100%);border-color:rgba(255,255,255,.55);box-shadow:inset 0 calc(1 * var(--u)) 0 rgba(255,255,255,.8),0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(12,110,95,.05),0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(12,110,95,.07)}
.pill.live .dot,.dot.live{background:var(--live);box-shadow:0 0 calc(10 * var(--u)) var(--live-glow)}
.dot.live.beat::after{content:"";position:absolute;inset:0;border-radius:50%;border:calc(1.5 * var(--u)) solid var(--live);opacity:0}
.cover{display:grid;grid-template-columns:1fr auto;align-items:center;gap:calc(80 * var(--u))}
.brandbox{display:flex;flex-direction:column;gap:calc(16 * var(--u))}
.cover .mid{display:flex;flex-direction:column;gap:calc(40 * var(--u))}
.brand,.sbrand{display:flex;align-items:center;gap:calc(36 * var(--u))}
.brand{gap:calc(20 * var(--u))}
.brand .word{font:500 calc(88 * var(--u))/1 var(--sans);letter-spacing:-.045em}
.ldot.w{filter:drop-shadow(0 0 calc(1.2 * var(--u)) rgba(254,92,137,.6))}
.ldot.t{opacity:0;filter:drop-shadow(0 0 calc(1.2 * var(--u)) rgba(12,143,123,.8))}
.mark{overflow:visible}
.tail{opacity:0}
.sbrand{gap:calc(24 * var(--u))}
.sbrand .word{font:500 calc(64 * var(--u))/1 var(--sans);letter-spacing:-.04em}
.byname{font:400 calc(26 * var(--u)) var(--sans);color:var(--body);padding-left:calc(6 * var(--u))}
.story{display:flex;flex-direction:column;gap:0}
.story .sbrand{margin-bottom:calc(32 * var(--u))}
.srow{display:grid;grid-template-columns:calc(120 * var(--u)) 1fr;gap:calc(24 * var(--u));align-items:baseline;padding:calc(20 * var(--u)) 0;border-top:calc(1 * var(--u)) solid var(--line)}
.srow:last-child{border-bottom:calc(1 * var(--u)) solid var(--line)}
.cover .lands{font:400 calc(32 * var(--u))/1.45 var(--sans);color:var(--body);max-width:calc(1100 * var(--u))}
.content{margin-top:auto}
/* status rows */
.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:var(--cols,calc(440 * var(--u)) 1fr auto);gap:calc(48 * var(--u));align-items:center;padding:calc(32 * var(--u)) 0;border-bottom:calc(1 * var(--u)) solid var(--line)}
.row:first-child{border-top:calc(1 * var(--u)) solid var(--line)}
.row h3{font:500 calc(40 * var(--u))/1.15 var(--sans);letter-spacing:-.025em}
.note{font:400 calc(28 * var(--u))/1.5 var(--sans);color:var(--body);margin-top:calc(32 * var(--u))}
/* split */
.split{display:grid;grid-template-columns:1fr calc(1 * var(--u)) 1fr;gap:calc(96 * var(--u))}
.split .rule{background:var(--line)}
.col{display:flex;flex-direction:column;gap:calc(24 * var(--u));min-width:0}
.col .n{font:500 calc(20 * var(--u)) var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.col h3{font:500 calc(48 * var(--u))/1.08 var(--sans);letter-spacing:-.03em}
.go{font:500 calc(24 * var(--u)) var(--sans);color:var(--ink);display:inline-flex;gap:calc(10 * var(--u));align-items:center}
.go::after{content:"\2192"}
/* why */
.why{display:grid;grid-template-columns:1fr calc(820 * var(--u));gap:calc(120 * var(--u));align-items:end}
.yrs{font:500 calc(300 * var(--u))/0.8 var(--sans);letter-spacing:-.06em}
.yrs em{font-size:calc(88 * var(--u));letter-spacing:0;margin-left:calc(10 * var(--u))}
.names{display:flex;gap:calc(12 * var(--u));flex-wrap:wrap}
.agentic{display:flex;gap:calc(28 * var(--u));align-items:center;padding:calc(30 * var(--u)) 0;border-top:calc(1 * var(--u)) solid var(--line);border-bottom:calc(1 * var(--u)) solid var(--line)}
.bot{width:calc(76 * var(--u));height:calc(76 * var(--u));flex:none;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#FF5FA2 0%,#FF4D5E 35%,#FF9A3C 65%,#4D8DFF 100%);color:#FFFFFF}
.bot svg{width:calc(38 * var(--u));height:calc(38 * var(--u))}
.spectrum{display:inline;font:500 calc(28 * var(--u)) var(--sans);letter-spacing:-.02em;background:linear-gradient(90deg,#E8457F 0%,#E2453F 35%,#E07A1F 65%,#3B6FD6 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* timeline */
.track{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:calc(48 * var(--u));padding-top:calc(64 * var(--u))}
.track::before{content:"";position:absolute;left:0;right:0;top:calc(11 * var(--u));height:calc(1 * var(--u));background:var(--line)}
.node{position:absolute;top:0;width:calc(22 * var(--u));height:calc(22 * var(--u));border-radius:50%;background:var(--page);border:calc(1.5 * var(--u)) solid var(--ink)}
.node.live{background:var(--live);border-color:var(--live);box-shadow:0 0 calc(14 * var(--u)) var(--live-glow)}
.node.live::after{content:"";position:absolute;inset:-1.5px;border-radius:50%;border:calc(1.5 * var(--u)) solid var(--live);opacity:0}
.step{display:flex;flex-direction:column;gap:calc(16 * var(--u))}
.step h3{font:500 calc(40 * var(--u))/1.15 var(--sans);letter-spacing:-.025em}
/* lists */
.list{display:flex;flex-direction:column}
.list p{display:flex;gap:calc(24 * var(--u));align-items:baseline;padding:calc(16 * var(--u)) 0;border-bottom:calc(1 * var(--u)) solid var(--line);font:400 calc(28 * var(--u))/1.4 var(--sans)}
.list p:first-child{border-top:calc(1 * var(--u)) solid var(--line)}
.list p b{font:500 calc(22 * var(--u)) var(--mono);color:var(--muted);flex:none;width:calc(28 * var(--u))}
.list.yes p b{color:var(--live-text)}
/* pricing */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(56 * var(--u))}
.price{display:flex;flex-direction:column;gap:calc(16 * var(--u));padding-top:calc(32 * var(--u));border-top:calc(2 * var(--u)) solid var(--ink)}
.price.liveb{border-top-color:var(--live)}
.price h3{font:500 calc(40 * var(--u))/1.15 var(--sans);letter-spacing:-.025em}
.amt{font:500 calc(72 * var(--u))/1 var(--sans);letter-spacing:-.04em}
.amt small{font:400 calc(28 * var(--u)) var(--sans);color:var(--body);letter-spacing:0}
/* next */
.next{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(56 * var(--u))}
.next .s{display:flex;flex-direction:column;gap:calc(16 * var(--u));padding-top:calc(32 * var(--u));border-top:calc(1 * var(--u)) solid var(--line)}
.next .s.first{border-top:calc(2 * var(--u)) solid var(--live)}
.next h3{font:500 calc(40 * var(--u))/1.15 var(--sans);letter-spacing:-.025em}
.contact{display:flex;justify-content:space-between;align-items:center;margin-top:calc(64 * var(--u));padding-top:calc(32 * var(--u));border-top:calc(1 * var(--u)) solid var(--line);font:500 calc(28 * var(--u)) var(--sans)}
/* slide 2 (Raj, 2026-10-05): smaller title + paid-vs-used meter on the right, status visuals per row */
.gaphead{display:grid;grid-template-columns:1fr calc(600 * var(--u));gap:calc(120 * var(--u));align-items:end}
.h2.sm{font-size:calc(76 * var(--u))}
.roi{display:flex;flex-direction:column;gap:calc(22 * var(--u));padding:calc(34 * var(--u)) calc(40 * var(--u)) calc(30 * var(--u));border-radius:calc(30 * var(--u));background:linear-gradient(170deg,rgba(250,252,254,.80) 0%,rgba(236,241,248,.72) 60%,rgba(234,233,245,.70) 100%);border:calc(1 * var(--u)) solid rgba(255,255,255,.7);box-shadow:inset 0 calc(1 * var(--u)) 0 rgba(255,255,255,.95),inset 0 -3px calc(6 * var(--u)) rgba(40,60,95,.05),0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(17,19,24,.05),0 calc(14 * var(--u)) calc(32 * var(--u)) rgba(40,60,95,.10)}
/* meter card = soft clay card (styleguide ref, Raj 2026-10-05); rails = soft inset groove like the ref's input field */
.roi .mrow{display:grid;grid-template-columns:calc(140 * var(--u)) 1fr calc(72 * var(--u));align-items:center;gap:calc(20 * var(--u))}
.roi .rail{height:calc(14 * var(--u));border-radius:calc(99 * var(--u));overflow:visible;background:repeating-linear-gradient(135deg,rgba(17,19,24,.06) 0 calc(6 * var(--u)),transparent calc(6 * var(--u)) calc(12 * var(--u))),#E7EDF4;box-shadow:inset 0 calc(1.5 * var(--u)) calc(3 * var(--u)) rgba(40,60,95,.16),inset 0 -1px 0 rgba(255,255,255,.9)}
.roi .fill{display:block;height:100%;width:100%;border-radius:calc(99 * var(--u));background:linear-gradient(90deg,#5482B0 0%,#0C8F7B 100%);transform-origin:left}
.roi .fill.half{width:50%;background:linear-gradient(90deg,#E48FA6 0%,#DE6F62 55%,#E79A64 100%)}
.roi .v{font:500 calc(22 * var(--u)) var(--mono);color:var(--muted);text-align:right}
.roi .v.warn{color:var(--warm-text)}
.roi .v.ok{color:var(--live-text)}
.roi .cap{font:400 calc(22 * var(--u))/1.4 var(--sans);color:var(--body);margin-top:calc(4 * var(--u))}
.dot.red{background:var(--warm);box-shadow:0 0 calc(10 * var(--u)) var(--warm-glow)}
.row mark{background:linear-gradient(transparent 60%,var(--warm-soft) 60%);color:var(--ink);padding:0 calc(3 * var(--u))}
.avs{display:inline-flex}
.avs i{width:calc(32 * var(--u));height:calc(32 * var(--u));border-radius:50%;margin-left:-9px;display:grid;place-items:center;background:#E8EEF5;color:#7A8592;box-shadow:0 0 0 calc(2 * var(--u)) var(--chip),inset 0 0 0 calc(1.5 * var(--u)) #A9B4C1}
.avs i:first-child{margin-left:0}
.avs svg{width:calc(17 * var(--u));height:calc(17 * var(--u))}
.tl{display:inline-flex;align-items:center}
.tl i{width:calc(32 * var(--u));height:calc(32 * var(--u));border-radius:calc(9 * var(--u));display:grid;place-items:center;color:#5E6977;background:linear-gradient(180deg,#FBFCFE 0%,#E9EEF5 100%);box-shadow:inset 0 0 0 calc(1 * var(--u)) rgba(169,180,193,.7),inset 0 calc(1 * var(--u)) 0 #FFFFFF,0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(40,60,95,.06)}
.tl i svg{width:calc(18 * var(--u));height:calc(18 * var(--u))}
.tl i.ghost{background:none;box-shadow:none;border:calc(1.5 * var(--u)) dashed #A9B4C1;color:#8C96A2}
.tl s{width:calc(22 * var(--u));height:calc(2 * var(--u));margin:0 calc(4 * var(--u));background:linear-gradient(90deg,#A9B4C1 0 38%,transparent 38% 62%,#A9B4C1 62%)}
.tags{display:flex;flex-wrap:wrap;gap:calc(10 * var(--u))}
.tags span{font:500 calc(21 * var(--u)) var(--sans);color:var(--body);padding:calc(7 * var(--u)) calc(16 * var(--u));border-radius:calc(999 * var(--u));border:calc(1 * var(--u)) solid var(--line);background:rgba(255,255,255,.35)}
.proc .srow{grid-template-columns:calc(200 * var(--u)) 1fr;padding:calc(16 * var(--u)) 0}
.proc .body{font-size:calc(26 * var(--u))}
.flow{position:relative;padding:calc(30 * var(--u)) calc(40 * var(--u)) calc(28 * var(--u));border-radius:calc(30 * var(--u));background:linear-gradient(170deg,rgba(250,252,254,.80) 0%,rgba(236,241,248,.72) 60%,rgba(234,233,245,.70) 100%);border:calc(1 * var(--u)) solid rgba(255,255,255,.7);box-shadow:inset 0 calc(1 * var(--u)) 0 rgba(255,255,255,.95),inset 0 -3px calc(6 * var(--u)) rgba(40,60,95,.05),0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(17,19,24,.05),0 calc(14 * var(--u)) calc(32 * var(--u)) rgba(40,60,95,.10)}
.fl{position:relative;display:grid;grid-template-columns:repeat(5,1fr)}
.fl::before{content:"";position:absolute;left:10%;right:10%;top:calc(10 * var(--u));height:calc(2 * var(--u));background:linear-gradient(90deg,var(--line) 0 60%,var(--live) 60% 100%);transform-origin:left}
.fn{position:relative;display:flex;flex-direction:column;align-items:center;gap:calc(14 * var(--u))}
.fn i{width:calc(22 * var(--u));height:calc(22 * var(--u));border-radius:50%;background:linear-gradient(180deg,#FBFCFE,#E6ECF4);box-shadow:inset 0 0 0 calc(2 * var(--u)) #8D99A7,0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(40,60,95,.12)}
.fn.live i{background:linear-gradient(180deg,#E3F6F0,#C9EDE3);box-shadow:inset 0 0 0 calc(2 * var(--u)) var(--live),0 0 0 calc(4 * var(--u)) rgba(12,143,123,.10),0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(12,110,95,.15)}
.fn span{font:500 calc(16 * var(--u)) var(--mono);letter-spacing:.03em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.fn.live span{color:var(--live-text)}
.loopmark{display:flex;align-items:center;justify-content:flex-end;gap:calc(8 * var(--u));margin:0 2% calc(14 * var(--u)) 0;font:500 calc(17 * var(--u)) var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--live-text)}
.loopmark svg{width:calc(22 * var(--u));height:calc(22 * var(--u))}
.rhythm{padding:calc(26 * var(--u)) calc(36 * var(--u)) calc(24 * var(--u))}
.rhythm .loopmark{margin:0 0 calc(12 * var(--u))}
.rb{display:flex;align-items:flex-start;gap:calc(18 * var(--u))}
.rb .g{display:flex;flex-direction:column;gap:calc(12 * var(--u))}
.rb .g.c{align-items:center;padding-top:calc(16 * var(--u))}
.rb .g i{font:500 calc(15 * var(--u)) var(--mono);font-style:normal;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.rb .g.c i{margin-top:calc(16 * var(--u))}
.rb .g i.lv{color:var(--live-text)}
.rb .ms{display:flex;align-items:center;gap:calc(10 * var(--u))}
.rb .proj{width:calc(190 * var(--u));height:calc(46 * var(--u));border-radius:calc(13 * var(--u));display:grid;place-items:center;font:500 calc(16 * var(--u)) var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#FFFFFF;background:linear-gradient(90deg,#5482B0,#3D8AA0);box-shadow:inset 0 calc(1 * var(--u)) 0 rgba(255,255,255,.25),0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(40,60,95,.12)}
.rb .sign{width:calc(14 * var(--u));height:calc(14 * var(--u));border-radius:50%;margin:0;background:var(--ink);box-shadow:0 0 0 calc(4 * var(--u)) rgba(17,19,24,.06)}
.rb .m{width:calc(62 * var(--u));height:calc(46 * var(--u));border-radius:calc(13 * var(--u));display:grid;place-items:center;font:500 calc(16 * var(--u)) var(--mono);color:var(--live-ink);background:linear-gradient(180deg,#E6F6F1,#D6F0E8);box-shadow:inset 0 0 0 calc(1 * var(--u)) rgba(12,143,123,.35),inset 0 calc(1 * var(--u)) 0 rgba(255,255,255,.8),0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(12,110,95,.08)}
.rb .more{font:500 calc(22 * var(--u)) var(--mono);color:var(--live-text);margin-left:calc(4 * var(--u))}
.step .tags{margin:-4px 0 calc(2 * var(--u))}
.sc .hd{display:flex;align-items:center;gap:calc(12 * var(--u));font:500 calc(17 * var(--u)) var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:calc(18 * var(--u))}
.sc .hd svg{width:calc(24 * var(--u));height:calc(24 * var(--u))}
.sc .ck{display:grid;grid-template-columns:1fr 1fr;gap:calc(16 * var(--u)) calc(28 * var(--u))}
.sc .ck span{display:flex;align-items:center;gap:calc(12 * var(--u));font:500 calc(24 * var(--u)) var(--sans);color:var(--ink)}
.sc .ck svg,.as svg{width:calc(26 * var(--u));height:calc(26 * var(--u));color:var(--live);flex:none}
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.kpi div{display:flex;flex-direction:column;gap:calc(8 * var(--u));padding:0 calc(20 * var(--u));border-left:calc(1 * var(--u)) solid var(--line)}
.kpi div:first-child{border-left:0;padding-left:0}
.kpi b{font:500 calc(34 * var(--u))/1.1 var(--sans);letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.kpi span{font:500 calc(15 * var(--u)) var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.as{display:flex;flex-direction:column;gap:calc(16 * var(--u))}
.as p{display:flex;align-items:center;gap:calc(14 * var(--u));font:500 calc(24 * var(--u)) var(--sans);color:var(--ink)}
.bk{display:flex;align-items:center;gap:calc(22 * var(--u))}
.bk .bi{width:calc(60 * var(--u));height:calc(60 * var(--u));border-radius:calc(16 * var(--u));display:grid;place-items:center;flex:none;color:var(--live-text);background:linear-gradient(180deg,#E6F6F1,#D6F0E8);box-shadow:inset 0 0 0 calc(1 * var(--u)) rgba(12,143,123,.3),inset 0 calc(1 * var(--u)) 0 rgba(255,255,255,.8)}
.bk .bi svg{width:calc(30 * var(--u));height:calc(30 * var(--u))}
.bk div{display:flex;flex-direction:column;gap:calc(4 * var(--u));flex:1}
.bk b{font:500 calc(30 * var(--u)) var(--sans);letter-spacing:-.02em}
.bk div span{font:400 calc(20 * var(--u)) var(--sans);color:var(--body);white-space:nowrap}
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(64 * var(--u))}
.tc{display:flex;flex-direction:column;gap:calc(18 * var(--u));padding-top:calc(28 * var(--u));border-top:calc(1 * var(--u)) solid var(--line);align-items:flex-start}
.tc.me{border-top:calc(2 * var(--u)) solid var(--live)}
.tc .hd{display:flex;align-items:center;gap:calc(18 * var(--u))}
.tc.me .hd .label{color:var(--live-text)}
.tc .hd{height:calc(56 * var(--u))}
.brandhd{gap:calc(14 * var(--u))}
.brandhd .word{font:500 calc(44 * var(--u))/1 var(--sans);letter-spacing:-.04em}
.br{display:flex;align-items:center;justify-content:space-between;padding:calc(34 * var(--u)) calc(44 * var(--u)) calc(28 * var(--u))}
.br .bn{display:flex;flex-direction:column;align-items:center;gap:calc(14 * var(--u))}
.br .bn > span:last-child{font:500 calc(16 * var(--u)) var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.br .bn.mid > span:last-child{color:var(--live-text)}
.br .bn.mid .mark{margin:-2px 0}
.br > s{flex:1;height:calc(3 * var(--u));margin:0 calc(14 * var(--u)) calc(30 * var(--u));border-radius:calc(2 * var(--u));background:var(--live);opacity:.75;transform-origin:left}
.tl i.warm{color:var(--warm-text);background:linear-gradient(180deg,#FBEDEA,#F6DCD6);box-shadow:inset 0 0 0 calc(1.5 * var(--u)) rgba(210,96,79,.55),inset 0 calc(1 * var(--u)) 0 rgba(255,255,255,.8),0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(150,60,45,.08)}
.tc.no{border-top:calc(2 * var(--u)) solid rgba(210,96,79,.55)}
.tc.no .hd .label{color:var(--warm-text)}
.tc h3{font:500 calc(40 * var(--u))/1.15 var(--sans);letter-spacing:-.025em}
.tc .lns{display:flex;flex-direction:column;gap:calc(10 * var(--u))}
.ln{display:flex;align-items:center;gap:calc(12 * var(--u));font:400 calc(24 * var(--u))/1.35 var(--sans);color:var(--body)}
.ln svg{width:calc(24 * var(--u));height:calc(24 * var(--u));flex:none;color:var(--live)}
.ln.no svg{color:var(--warm)}
.dot.ok{background:var(--live)}
.roi.care .mrow{grid-template-columns:calc(200 * var(--u)) 1fr calc(64 * var(--u))}
.roi .fill.warm{background:linear-gradient(90deg,#E48FA6 0%,#DE6F62 55%,#E79A64 100%)}
.roi .fill.after{position:relative}
.roi .fill.after::after{content:"";position:absolute;right:-1px;top:50%;width:calc(16 * var(--u));height:calc(16 * var(--u));margin-top:-8px;border-radius:50%;background:#0C8F7B;box-shadow:0 0 calc(6 * var(--u)) calc(1 * var(--u)) rgba(12,143,123,.35)}
.roi .fill.after::before{content:"";position:absolute;top:0;bottom:0;left:0;width:12%;border-radius:calc(99 * var(--u));opacity:0;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.32) 50%,rgba(255,255,255,0) 100%)}
.dv{display:flex;align-items:center;gap:calc(28 * var(--u));margin-bottom:calc(16 * var(--u))}
.tl.big i{width:calc(56 * var(--u));height:calc(56 * var(--u));border-radius:calc(15 * var(--u))}
.tl.big i svg{width:calc(28 * var(--u));height:calc(28 * var(--u))}
.tl.big s{width:calc(44 * var(--u));height:calc(3 * var(--u));margin:0 calc(6 * var(--u))}
.tl s.ok{background:var(--live);opacity:.75;transform-origin:left}
.tl i.new{color:var(--live-text);background:linear-gradient(180deg,#E3F6F0 0%,#C9EDE3 100%);box-shadow:inset 0 0 0 calc(1.5 * var(--u)) var(--live),inset 0 calc(1 * var(--u)) 0 rgba(255,255,255,.8),0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(12,110,95,.08)}
/* research handoffs (POPO) */
.hand{display:grid;grid-template-columns:calc(330 * var(--u)) 1fr 1fr;gap:calc(48 * var(--u));align-items:baseline;padding:calc(20 * var(--u)) 0;border-bottom:calc(1 * var(--u)) solid var(--line)}
.hand.head{padding:0 0 calc(12 * var(--u))}
.hand h3{font:500 calc(32 * var(--u))/1.2 var(--sans);letter-spacing:-.02em}
.hand p{font:400 calc(24 * var(--u))/1.45 var(--sans);color:var(--body)}
.hand p.q{font-family:var(--serif);font-style:italic;font-size:calc(28 * var(--u));color:var(--ink)}
/* case slides */
.case{display:grid;grid-template-columns:calc(680 * var(--u)) 1fr;gap:calc(112 * var(--u));align-items:start}
.case .think{font:400 italic calc(40 * var(--u))/1.3 var(--serif);color:var(--ink);padding-left:calc(28 * var(--u));border-left:calc(3 * var(--u)) solid var(--live)}
.case .srow{grid-template-columns:calc(200 * var(--u)) 1fr}
@media (prefers-reduced-motion:no-preference){
@keyframes unmask{from{transform:translateY(105%)}to{transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(calc(8 * var(--u)))}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes live{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.8);opacity:0}}
.on .line > span{animation:unmask .55s cubic-bezier(.16,.84,.44,1) both;animation-delay:calc(var(--i,0) * 90ms + 100ms)}
.on .in{animation:fade .5s ease-out both;animation-delay:calc(var(--i,0) * 90ms + 200ms)}
.on .track::before{transform-origin:left;animation:grow .6s ease-out .35s both}
.on .node.live::after,.on .dot.live.beat::after{animation:live 2.6s ease-out 1.2s infinite}
@keyframes softblink{0%,100%{opacity:1}50%{opacity:.25}}
.on .dot.red.blink{animation:softblink 2.4s ease-in-out 1s infinite}
/* slide 2 pills (Raj, 2026-10-05): untrained team waits its turn; broken links keep failing */
@keyframes avwait{0%,60%,100%{transform:none;opacity:.7}30%{transform:translateY(-3px);opacity:1}}
.on .row .avs i{animation:avwait 2.4s ease-in-out 1.2s infinite}
.on .row .avs i:nth-child(2){animation-delay:1.45s}.on .row .avs i:nth-child(3){animation-delay:1.7s}
@keyframes linkfail{0%,100%{opacity:.35}40%{opacity:1}55%{opacity:.35}}
.on .row .tl s{animation:linkfail 2.2s ease-in-out 1.2s infinite}
.on .row .tl s:nth-of-type(2){animation-delay:1.6s}
@keyframes ghostpulse{0%,100%{border-color:rgba(169,180,193,.55)}50%{border-color:rgba(94,105,119,.95)}}
.on .row .tl i.ghost{animation:ghostpulse 2.2s ease-in-out 2s infinite}
@keyframes pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.on .tl s.ok{animation:grow .4s ease-out .5s both}
/* slide 2 (Raj, 2026-10-05): used bar keeps trying to move forward, stalls, slips back */
@keyframes struggle{0%,100%{transform:scaleX(1)}22%{transform:scaleX(1.07)}30%{transform:scaleX(1.05)}44%{transform:scaleX(1.12)}52%{transform:scaleX(1.02)}60%{transform:scaleX(.97)}74%{transform:scaleX(1.04)}84%{transform:scaleX(.99)}}
.on .roi .fill.half{animation:grow .6s ease-out .5s both,struggle 3.8s ease-in-out 1.3s infinite}
.on .br > s{animation:grow .5s ease-out .6s both}
.on .br > s:nth-of-type(2){animation-delay:.9s}
.on .tl i.new{animation:pop .5s ease-out .9s both}
.on .fl::before{animation:grow .7s ease-out .4s both}
.on .fn{animation:fade .4s ease-out both}
.on .fn:nth-child(1){animation-delay:.4s}.on .fn:nth-child(2){animation-delay:.55s}.on .fn:nth-child(3){animation-delay:.7s}.on .fn:nth-child(4){animation-delay:.85s}.on .fn:nth-child(5){animation-delay:1s}
.on .rb .m{animation:pop .4s ease-out both}
.on .rb .m:nth-of-type(1){animation-delay:.7s}.on .rb .m:nth-of-type(2){animation-delay:.85s}.on .rb .m:nth-of-type(3){animation-delay:1s}.on .rb .m:nth-of-type(4){animation-delay:1.15s}
.on .roi .fill{animation:grow .6s ease-out .5s both}
@keyframes fillup{from{transform:scaleX(.5)}to{transform:none}}
.on .roi .fill.after{animation:fillup .9s ease-out .7s both}
/* slide 3 (Raj, 2026-10-05): shine sweeps left to right along the full Used bar, then the tip glows; one shared 3.6s cycle */
@keyframes shine{0%{left:0;opacity:0}6%{opacity:1}40%{left:86%;opacity:1}46%,100%{left:86%;opacity:0}}
@keyframes glowbreath{0%,38%,100%{box-shadow:0 0 0 0 rgba(12,143,123,0),0 0 calc(6 * var(--u)) calc(1 * var(--u)) rgba(12,143,123,.35)}58%{box-shadow:0 0 0 calc(9 * var(--u)) rgba(12,143,123,.16),0 0 calc(24 * var(--u)) calc(7 * var(--u)) rgba(12,143,123,.62)}80%{box-shadow:0 0 0 calc(3 * var(--u)) rgba(12,143,123,.06),0 0 calc(12 * var(--u)) calc(3 * var(--u)) rgba(12,143,123,.42)}}
.on .roi .fill.after::before{animation:shine 3.6s ease-in-out 1.7s infinite}
.on .roi .fill.after::after{animation:glowbreath 3.6s ease-in-out 1.7s infinite}
@keyframes orbit{0%{transform:rotate(360deg);animation-timing-function:cubic-bezier(.4,.1,.2,1)}46.7%,100%{transform:rotate(0deg)}}
@keyframes tail{0%{opacity:0}5.6%{opacity:1}33.6%{opacity:1}46.7%,100%{opacity:0}}
@keyframes glowdot{0%,100%{filter:drop-shadow(0 0 calc(1 * var(--u)) rgba(12,143,123,.55))}50%{filter:drop-shadow(0 0 calc(2.5 * var(--u)) rgba(12,143,123,.95))}}
.on .travel .orbit{transform-box:view-box;transform-origin:18px 18px;animation:orbit 6s linear .5s infinite both}
.on .travel .tail{animation:tail 6s linear .5s infinite both}
/* orbit moves 0-46.7% of each 6s lap: teal dot while moving, Instagram-gradient dot at rest */
@keyframes dotwarm{0%,42%{opacity:0}52%,95%{opacity:1}100%{opacity:0}}
@keyframes dotteal{0%,42%{opacity:1}52%,95%{opacity:0}100%{opacity:1}}
@keyframes igglow{0%,100%{filter:drop-shadow(0 0 calc(1 * var(--u)) rgba(254,92,137,.45))}50%{filter:drop-shadow(0 0 calc(3 * var(--u)) rgba(254,92,137,.85))}}
.on .travel .ldot.w{animation:dotwarm 6s linear .5s infinite both,igglow 5s ease-in-out 3.3s infinite}
.on .travel .ldot.t{animation:dotteal 6s linear .5s infinite both}
}
.bar{position:fixed;left:50%;bottom:calc(calc(14 * var(--u)) + env(safe-area-inset-bottom,calc(0 * var(--u))));transform:translateX(-50%);display:flex;align-items:center;gap:calc(6 * var(--u));background:rgba(17,17,19,.88);color:#F7F7F5;border-radius:calc(999 * var(--u));padding:calc(6 * var(--u)) calc(8 * var(--u));font:500 calc(13 * var(--u)) var(--mono);z-index:5}
.bar button{all:unset;cursor:pointer;width:calc(34 * var(--u));height:calc(34 * var(--u));border-radius:50%;display:grid;place-items:center;font:500 calc(18 * var(--u)) var(--sans)}
.bar button:hover,.bar button:focus-visible{background:rgba(255,255,255,.14)}
.bar button:focus-visible{outline:calc(2 * var(--u)) solid #7FCFA6}
.bar .count{min-width:calc(60 * var(--u));text-align:center}
.prog{position:fixed;left:0;top:0;height:calc(2 * var(--u));background:var(--ink);transition:width .5s ease-out;z-index:5}
/* ---------- site layer (2026-10-05): turns the 1920x1080 slide stage into a scrolling page ---------- */
:root{--u:clamp(.5px, calc(100vw / 1920), .78px)}
html,body{height:auto}
body{overflow-x:hidden;overflow-y:auto;background:linear-gradient(160deg,#D3E1EF 0%,#DFE5F2 50%,#ECEAF4 100%) fixed;color:var(--ink)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.5;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,")}
.stage{position:static;width:auto;height:auto;transform:none!important;overflow:visible;background:transparent;max-width:1920px;margin:0 auto}
.stage::after{display:none}
.slide{position:relative;inset:auto;opacity:1;visibility:visible;transition:none;padding:calc(112 * var(--u)) calc(160 * var(--u));min-height:auto}
.slide + .slide{border-top:1px solid rgba(203,214,225,.55)}
.content{margin-top:calc(80 * var(--u))}
.slide.cover{min-height:min(calc(100vh - 72px), 820px);padding-top:calc(60 * var(--u));padding-bottom:calc(60 * var(--u))}
.bar,.prog{display:none}
/* top nav */
.nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px;padding:0 max(16px, calc(160 * var(--u)));
background:rgba(226,233,243,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(203,214,225,.6)}
.nav .brandmini{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.nav .brandmini svg{width:30px;height:30px}
.nav .brandmini b{font:500 24px/1 var(--sans);letter-spacing:-.04em}
.nav .brandmini i{font:400 italic 18px var(--serif);color:var(--body)}
.nav .tabs{display:flex;align-items:center;gap:6px}
.nav .tabs a{font:500 15px var(--sans);color:var(--body);text-decoration:none;padding:9px 14px;border-radius:999px}
.nav .tabs a.li-nav{color:var(--body);box-shadow:inset 0 0 0 1px rgba(203,214,225,.9)}
.nav .tabs a.on,.nav .tabs a:hover{color:var(--ink);background:rgba(255,255,255,.55)}
.nav .tabs a.cta{color:var(--live-ink);background:linear-gradient(180deg,#E6F6F1,#D6F0E8);box-shadow:inset 0 0 0 1px rgba(12,143,123,.25)}
.nav .tabs a:focus-visible{outline:2px solid var(--live);outline-offset:2px}
.foot2{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;padding:40px max(16px, calc(160 * var(--u)));font:400 15px var(--sans);color:var(--body);border-top:1px solid rgba(203,214,225,.6)}
.foot2 a.li{font:500 16px var(--sans);color:var(--ink);text-decoration:none;padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(203,214,225,.8)}
.foot2 a.li:hover{background:rgba(255,255,255,.8)}
.foot2 a.li:focus-visible{outline:2px solid var(--live);outline-offset:2px}
.slides-link{font:500 15px var(--mono);letter-spacing:.04em;color:var(--body)}
/* phones and small tablets: stack every multi-column layout, bigger unit, normal gutters */
@media (max-width:860px){
:root{--u:.6px}
.slide{padding:56px 16px}
.slide.cover{min-height:auto;padding:48px 16px 56px}
.nav{height:64px;padding:0 16px}.nav .brandmini i{display:none}.nav .tabs a{padding:8px 10px;font-size:14px}
.cover,.gaphead,.split,.tri,.why,.next,.case,.prices,.track,.kpi,.sc .ck{grid-template-columns:1fr!important;gap:28px!important}
.gaphead{display:grid}
.split .rule{display:none}
.row{grid-template-columns:1fr!important;gap:12px!important;align-items:start}
.row .pill{justify-self:start}
.track{padding-top:0}.track::before,.track .node{display:none}
.big{font-size:52px}.h2,.h2.sm{font-size:40px}
.yrs{font-size:150px}.yrs em{font-size:44px}
.brand .word{font-size:48px}.brand .mark{width:64px;height:64px}
.roi.care .mrow,.roi .mrow{grid-template-columns:96px 1fr 52px!important}
.rb{flex-wrap:wrap}.br{gap:8px}
.kpi div{border-left:0;padding:0}
.gaphead > *,.tri > *,.split > *{min-width:0}
.br{padding:22px 14px 18px}.br > s{margin:0 6px 26px}
.br .bn > span:last-child{white-space:normal;text-align:center;font-size:11px;max-width:84px}
.bk{flex-wrap:wrap;gap:14px}.bk div span{white-space:normal}
.contact{flex-wrap:wrap;gap:8px}.contact span:last-child{font-size:14px!important;white-space:normal;word-break:break-word}
.nav .tabs{gap:2px}.nav .tabs a[href="/private/"]{display:none}.nav .brandmini b{font-size:20px}
}
@media (max-width:420px){.nav .tabs a.cta{display:none}}
/* ---------- content elements (Raj, 2026-10-05): soft raised pills + blue-to-cyan accent from Desktop "Website Design theme.jpg".
Background stays the locked powder-to-lilac wash; only buttons, badges and their accents change. ---------- */
:root{--neo-face:linear-gradient(145deg,#F1F4FA 0%,#E2E8F1 100%);--neo-text:#4F5B70;
--neo-out:-6px -6px 14px rgba(255,255,255,.9),6px 6px 16px rgba(132,150,180,.32);
--neo-out-sm:-4px -4px 10px rgba(255,255,255,.9),4px 4px 12px rgba(132,150,180,.30);
--neo-in:inset 3px 3px 7px rgba(132,150,180,.30),inset -3px -3px 7px rgba(255,255,255,.9);
--accent:linear-gradient(90deg,#5482B0 0%,#0C8F7B 100%);--accent-ink:#3D6A97}
/* combo (Raj, 2026-10-05): raised shape from the reference, colour washes from our own brand (ring blue -> live teal) */
.pill{color:var(--neo-text);background:var(--neo-face);border:0;box-shadow:var(--neo-out-sm)}
.pill.live{color:var(--live-ink);background:linear-gradient(145deg,#EEF8F5 0%,#D3EEE6 100%);border:0;
box-shadow:-4px -4px 10px rgba(255,255,255,.9),4px 4px 12px rgba(80,140,130,.28)}
.pill.live .dot,.dot.live{background:var(--accent);box-shadow:0 0 calc(10 * var(--u)) var(--live-glow)}
/* Used bar: the dot travels left to right once when the card itself is on screen, then stops at the end */
.roi .fill.after::after{margin-top:calc(-8 * var(--u))}
@media (prefers-reduced-motion:no-preference){
@keyframes travelw{from{width:50%}to{width:100%}}
.on .roi .fill.after{animation:none}
.roi .fill.after{width:50%}
.roi.seen .fill.after{animation:travelw 1.4s cubic-bezier(.22,.8,.3,1) .2s both}
}
.nav .tabs a.li-nav,.foot2 a.li{color:var(--neo-text);background:var(--neo-face);box-shadow:var(--neo-out-sm);transition:box-shadow .2s ease-out,color .2s ease-out}
.nav .tabs a.li-nav:hover,.foot2 a.li:hover{color:var(--accent-ink);background:var(--neo-face)}
.nav .tabs a.li-nav:active,.foot2 a.li:active{box-shadow:var(--neo-in)}
.nav .tabs a.li-nav:focus-visible,.foot2 a.li:focus-visible,.jump button:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
/* section jump buttons, bottom right */
.jump{position:fixed;right:max(16px, calc(40 * var(--u)));bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:45;display:flex;flex-direction:column;gap:12px}
.jump button{all:unset;box-sizing:border-box;cursor:pointer;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:var(--neo-text);
background:var(--neo-face);box-shadow:var(--neo-out);transition:box-shadow .2s ease-out,color .2s ease-out,opacity .3s ease-out}
.jump button svg{width:20px;height:20px}
.jump button:hover{color:var(--accent-ink)}
.jump button:active{box-shadow:var(--neo-in)}
.jump button[disabled]{opacity:.35;cursor:default;pointer-events:none}
/* small tags lifted a notch + Instagram-gradient icons (Raj, 2026-10-05) */
.tags{gap:calc(12 * var(--u))}
.tags span{display:inline-flex;align-items:center;gap:calc(8 * var(--u));color:#3F4A5C;border:0;background:var(--neo-face);
padding:calc(8 * var(--u)) calc(18 * var(--u)) calc(8 * var(--u)) calc(14 * var(--u));
box-shadow:-3px -3px 8px rgba(255,255,255,.9),3px 3px 9px rgba(132,150,180,.30)}
.tags span svg.ti{width:calc(24 * var(--u));height:calc(24 * var(--u));min-width:14px;min-height:14px;flex:none}
.igdefs{position:absolute;width:0;height:0;overflow:hidden}
@media (max-width:860px){.jump{right:16px;bottom:16px;gap:10px}.jump button{width:44px;height:44px;border-radius:12px}}
@media (prefers-reduced-motion:reduce){.nav .tabs a.li-nav,.foot2 a.li,.jump button{transition:none}}