/* PowerPoint, Rebuilt · transformation study page
   Palette follows the redesigned deck: off-white, deep ink, electric blue. Satoshi + IBM Plex Mono. */
@font-face{font-family:"Satoshi";src:url(fonts/satoshi-var.woff2) format("woff2-variations"),url(fonts/satoshi-var.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --off:#F4F3EF; --paper:#FBFAF7; --ink:#0D1726; --ink-2:#4F5868; --ink-3:#8A909B;
  --blue:#2255FF; --ice:#B9E7F5; --vio:#7B3FF2; --grn:#45A66B;
  --line:rgba(13,23,38,.12); --line-2:rgba(13,23,38,.22);
  --f:"Satoshi","Helvetica Neue",Helvetica,Arial,sans-serif;
  --m:"Plex Mono",ui-monospace,Menlo,monospace;
  --gut:clamp(16px,5.56vw,80px); --max:1440px;
  --e:cubic-bezier(.22,.61,.15,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--off);color:var(--ink);font-family:var(--f);font-size:17px;line-height:1.45;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,dl,dd,ol,ul,figure{margin:0}
ol,ul{list-style:none;padding:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.mono{font-family:var(--m);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.blue{color:var(--blue)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
::selection{background:var(--blue);color:#fff}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--e),transform .9s var(--e)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}

/* bar */
.bar{position:sticky;top:0;z-index:20;background:rgba(244,243,239,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px}
.bar .back,.bar .dl{font-size:15px;font-weight:500;display:inline-flex;gap:8px;align-items:center;white-space:nowrap}
.bar .back i,.bar .dl i{font-style:normal;transition:transform .4s var(--e)}
.bar .back:hover i{transform:translateX(-4px)}.bar .dl:hover i{transform:translateY(3px)}
.bar .dl{color:var(--blue)}
.bar .mid{color:var(--ink-3)}

/* type scale */
.mega{font-size:clamp(64px,13.4vw,224px);line-height:.86;letter-spacing:-.055em;font-weight:700}
.mega b{color:var(--blue);font-weight:700}
.h-xl{font-size:clamp(46px,7vw,112px);line-height:.9;letter-spacing:-.045em;font-weight:700}
.h-l{font-size:clamp(34px,4.4vw,64px);line-height:.98;letter-spacing:-.035em;font-weight:700}
.ln{display:block;overflow:hidden;padding-bottom:.04em}
.ln>span{display:block;transform:translateY(105%);transition:transform 1.1s var(--e)}
.mega.in .ln>span,.ln.in>span{transform:none}
.mega .ln:nth-child(2)>span{transition-delay:.1s}

/* intro */
.intro{padding:clamp(56px,9vw,128px) 0 clamp(56px,7vw,96px)}
.slug{display:flex;justify-content:space-between;gap:16px;color:var(--ink-3);padding-bottom:18px;border-bottom:1px solid var(--line-2);margin-bottom:clamp(28px,4vw,56px);flex-wrap:wrap}
.slug span:first-child{color:var(--blue)}
.intro-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:clamp(36px,5vw,72px)}
.lede{grid-column:1/span 6;font-size:clamp(22px,2.2vw,32px);line-height:1.2;letter-spacing:-.02em;font-weight:500}
.sub{grid-column:8/span 5;color:var(--ink-2);font-size:18px;align-self:end}

/* hero */
.hero{padding:clamp(56px,7vw,104px) 0;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hero-head{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.tag{color:var(--blue);margin-bottom:18px}
.meta{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}
.meta div{border-top:1px solid var(--line-2);padding-top:10px}
.meta dt{font-family:var(--m);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.meta dd{font-size:16px;font-weight:500;line-height:1.3}
.meta dd span{color:var(--ink-3);font-weight:400;font-size:14px}
.meta dd i{font-style:normal;color:var(--blue)}
.hint{color:var(--ink-3);margin-top:14px;font-size:11px}

/* before/after slider */
.ba{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:6px;background:#e9e7e1;box-shadow:0 1px 0 var(--line),0 30px 60px -30px rgba(13,23,38,.35);--p:45%;user-select:none;touch-action:pan-y}
.ba img{width:100%;height:100%;object-fit:cover}
.ba-after{position:absolute;inset:0}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0);filter:saturate(.9)}
.ba-before img{width:100%;height:100%}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:var(--blue);pointer-events:none}
.ba-handle i{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-style:normal;font-size:18px;box-shadow:0 6px 20px rgba(34,85,255,.4)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;-webkit-appearance:none;appearance:none}
.ba-lab{position:absolute;top:14px;padding:6px 10px;border-radius:3px;font-size:10.5px;pointer-events:none;z-index:2}
.ba-lab em{font-style:normal;opacity:.6;margin-left:6px}
.ba-lab.b{left:14px;background:rgba(255,255,255,.92);color:var(--ink)}
.ba-lab.a{right:14px;background:var(--ink);color:#fff}
.ba-range:focus-visible~.ba-handle i,.ba:focus-within .ba-handle i{outline:2px solid #fff;outline-offset:2px}

/* numbers */
.nums{padding:clamp(64px,9vw,128px) 0;background:var(--ink);color:#fff}
.num-row{display:grid;grid-template-columns:auto 1fr auto 1.1fr;align-items:end;gap:clamp(16px,3vw,48px)}
.num b{display:block;font-size:clamp(96px,17vw,280px);line-height:.8;letter-spacing:-.06em;font-weight:700}
.num b.blue{color:#6F93FF}
.num span{display:block;font-family:var(--m);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8D98AD;margin-top:16px}
.num-ar{height:2px;background:linear-gradient(90deg,#2A3852,#6F93FF);align-self:center;position:relative;margin-bottom:28px}
.num-ar:after{content:"";position:absolute;right:-1px;top:-5px;border:6px solid transparent;border-left:9px solid #6F93FF;border-right:0}
.num-s{font-size:clamp(22px,2.4vw,36px);line-height:1.08;letter-spacing:-.025em;font-weight:600;color:var(--ice);padding-bottom:6px}

/* copy */
.copy{padding:clamp(72px,10vw,144px) 0 clamp(48px,6vw,80px)}
.copy-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.copy-grid .h-l{grid-column:1/span 6}
.copy-body{grid-column:8/span 5;display:grid;align-content:start;gap:18px;font-size:18px;color:var(--ink-2)}
.copy-body strong{color:var(--ink);font-weight:600}
.copy-body .fin{font-size:clamp(22px,2vw,28px);line-height:1.15;color:var(--ink);font-weight:600;letter-spacing:-.02em;margin-top:8px}
.copy-body .fin span{color:var(--blue)}
.note{margin-top:clamp(48px,6vw,80px);padding-top:18px;border-top:1px solid var(--line-2);color:var(--ink-3);max-width:900px;line-height:1.6}

/* section head */
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(32px,4vw,56px)}
.sec-head .mono{color:var(--blue)}

/* transformations */
.trs{padding:clamp(64px,8vw,120px) 0}
.tr{padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--line-2)}
.tr-h{display:grid;grid-template-columns:64px 1fr 40px 1.3fr;gap:16px;align-items:start;margin-bottom:28px}
.tr-n{font-size:28px;font-weight:700;color:var(--blue);letter-spacing:-.02em;line-height:1}
.tr-was,.tr-is{display:flex;flex-direction:column;gap:6px}
.tr-was{font-size:17px;color:var(--ink-2);line-height:1.3}
.tr-is{font-size:clamp(22px,2.2vw,32px);font-weight:700;letter-spacing:-.03em;line-height:1.05}
.tr-was .mono,.tr-is .mono{font-size:10.5px;color:var(--ink-3);font-weight:500;letter-spacing:.07em}
.tr-ar{font-style:normal;font-size:24px;color:var(--blue);line-height:1;padding-top:18px}
.tr-why{display:grid;grid-template-columns:64px 1fr;gap:16px;max-width:980px;margin-top:28px;font-size:18px;color:var(--ink-2)}
.tr-why .mono{color:var(--ink-3);padding-top:4px;font-size:11px}
.chg{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:28px;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:var(--paper)}
.chg div{padding:16px 18px;border-right:1px solid var(--line)}
.chg div:last-child{border-right:0}
.chg dt{font-family:var(--m);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.chg dd{font-size:15px;line-height:1.3;font-weight:500}
.chg .ed{background:var(--ink);color:#fff}
.chg .ed dt{color:var(--ice)}
.states{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;margin-top:20px;max-width:880px}
.states img{border-radius:4px;box-shadow:0 0 0 1px var(--line)}
.states figcaption{color:var(--ink-3);margin-top:8px;font-size:10.5px}
.states .mo{color:var(--blue);display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10.5px}
.states .mo i{font-style:normal;font-size:20px}

/* editing */
.edit{padding:clamp(64px,8vw,120px) 0;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.edit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ec{border-top:2px solid var(--ink);padding-top:16px}
.ec:nth-child(2){border-color:var(--blue)}.ec:nth-child(3){border-color:var(--ink-3)}
.ec .mono{color:var(--ink-3)}
.ec b{display:block;font-size:clamp(64px,7vw,112px);line-height:.9;letter-spacing:-.05em;margin:14px 0 14px;font-weight:700}
.ec:nth-child(2) b{color:var(--blue)}.ec:nth-child(3) b{color:var(--ink-3)}
.ec p{color:var(--ink-2);font-size:16px;max-width:380px}

/* deck strip */
.deck{padding:clamp(64px,8vw,120px) 0}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 20px}
.strip li img{border-radius:4px;box-shadow:0 0 0 1px var(--line),0 18px 36px -24px rgba(13,23,38,.4);transition:transform .5s var(--e)}
.strip li:hover img{transform:translateY(-4px)}
.strip li span{display:block;margin-top:10px;color:var(--ink-2);font-size:10.5px}
.strip li em{font-style:normal;color:var(--blue);margin-left:6px}

/* craft */
.craft{padding:clamp(72px,10vw,144px) 0;background:var(--ink);color:#fff}
.craft-head{display:grid;grid-template-columns:1.3fr 1fr;align-items:end;gap:32px;margin-bottom:clamp(36px,5vw,64px)}
.craft-head p{color:var(--ice);font-size:clamp(20px,1.8vw,26px);line-height:1.2;letter-spacing:-.015em;font-weight:500;max-width:420px}
.facts{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid #2A3852;border-bottom:1px solid #2A3852;margin-bottom:clamp(32px,4vw,56px)}
.facts li{padding:18px 16px 18px 0}
.facts b{display:block;font-size:clamp(30px,3.2vw,48px);line-height:1;letter-spacing:-.04em;font-weight:700}
.facts li:last-child b{color:#6F93FF}
.facts span{display:block;font-family:var(--m);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#8D98AD;margin-top:8px;line-height:1.4}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.tile{position:relative;background:#121E33;border:1px solid #22304A;border-radius:8px;padding:26px;display:flex;flex-direction:column;gap:20px;min-height:400px}
.tile p{color:#B8C1D1;font-size:15px;line-height:1.45;margin-top:auto;max-width:520px}
.tile code{font-family:var(--m);font-size:12.5px;color:var(--ice)}
.tl{color:var(--ice);font-size:11px;letter-spacing:.14em}
/* master */
.lays{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.lay{aspect-ratio:16/9;background:#F4F3EF;border-radius:3px;position:relative;padding:9% 8%;display:flex;flex-direction:column;gap:6%}
.lay.ink{background:#0A1220;box-shadow:inset 0 0 0 1px #2A3852}
.lay i{display:block;height:9%;background:#0D1726;border-radius:1px}
.lay.ink i{background:#E9ECF2}
.lay .k{width:30%;height:4%;background:#2255FF!important}
.lay .t.w3{width:30%}.lay .t.w4{width:42%}.lay .t.w5{width:52%}.lay .t.w6{width:58%}.lay .t.w7{width:68%}.lay .t.w9{width:84%}
.lay .s{width:40%;height:5%;opacity:.5}
.lay .ft{position:absolute;left:8%;right:8%;bottom:8%;height:2%!important;background:#2255FF!important;opacity:.9}
.lays .lay:nth-child(1){grid-column:span 2;grid-row:span 2}
/* grid */
.gridshot{position:relative;border-radius:4px;overflow:hidden}
.gv,.gh{position:absolute;background:transparent}
.gv{top:0;bottom:0;width:0;border-left:1px dashed rgba(34,85,255,.9)}
.gh{left:0;right:0;height:0;border-top:1px dashed rgba(34,85,255,.9)}
/* morph */
.morph{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:16/9}
.morph img{position:absolute;inset:0;width:100%;height:100%}
.morph .m2{animation:mswap 6s var(--e) infinite}
@keyframes mswap{0%,38%{opacity:0}50%,88%{opacity:1}100%{opacity:0}}
/* selection pane */
.pane{background:#F7F7F8;color:#1C1F24;border-radius:6px;overflow:hidden;font-size:13px;box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.pane-h{background:#E9EAEE;padding:9px 12px;color:#4F5868;font-size:10.5px}
.pane ul{padding:6px 0}
.pane li{padding:5px 12px 5px 34px;position:relative;border-bottom:1px solid #EDEEF1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pane li:before{content:"";position:absolute;left:12px;top:50%;width:12px;height:7px;margin-top:-4px;border:1.5px solid #8A909B;border-radius:50%}
.pane li.in{background:#DCE5FF;color:#0D1726}
/* motion */
.tline{display:grid;gap:9px}
.tline li{display:grid;grid-template-columns:28px 1fr;align-items:center;gap:12px;font-size:13px}
.tline span{font-family:var(--m);color:#8D98AD;font-size:11px}
.tline i{display:block;height:8px;width:calc(var(--n) * 11%);background:repeating-linear-gradient(90deg,#2255FF 0 calc(100% / var(--n) - 3px),transparent 0 calc(100% / var(--n)));border-radius:2px}
.tline em{grid-column:2;font-style:normal;color:#B8C1D1;font-size:12px;margin-top:-4px}
/* theme */
.sw{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.sw i{aspect-ratio:1;background:var(--c);border-radius:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);position:relative}
.sw i:after{content:attr(data-n);position:absolute;left:0;top:calc(100% + 6px);font-family:var(--m);font-style:normal;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:#8D98AD;line-height:1.2}
.type{margin-top:34px;display:grid;gap:6px}
.type b{font-size:clamp(28px,3vw,44px);letter-spacing:-.04em;line-height:.9}
.type span{color:var(--ice);font-size:10.5px}
.type em{font-style:normal;color:#B8C1D1;font-size:14px}

/* end */
.end{padding:clamp(80px,12vw,180px) 0 clamp(48px,6vw,80px)}
.end-h{font-size:clamp(56px,10vw,168px);line-height:.88;letter-spacing:-.055em;font-weight:700}
.end-h .ln:nth-child(3){margin-top:.12em}
.end-tags{color:var(--ink-3);margin-top:clamp(28px,4vw,48px)}
.end-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:4px;background:var(--blue);color:#fff;font-weight:500;font-size:16px;transition:background .3s var(--e)}
.btn:hover{background:#1640D6}
.btn i{font-style:normal;transition:transform .4s var(--e)}
.btn:hover i{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn.ghost:hover{background:#fff}
.btn.ghost:hover i{transform:translateY(3px)}
.disc{margin-top:clamp(48px,6vw,80px);padding-top:18px;border-top:1px solid var(--line-2);color:var(--ink-3);font-size:13px;max-width:860px}
.home{display:inline-flex;gap:8px;margin-top:24px;font-weight:500}
.home i{font-style:normal}

/* responsive */
@media (max-width:1000px){
  .hero-head,.craft-head{grid-template-columns:1fr}
  .tr-h{grid-template-columns:44px 1fr}
  .tr-ar{display:none}
  .tr-is{grid-column:2}
  .chg{grid-template-columns:1fr 1fr}
  .chg div{border-bottom:1px solid var(--line)}
  .chg .ed{grid-column:span 2}
  .strip{grid-template-columns:repeat(3,1fr)}
  .facts{grid-template-columns:repeat(3,1fr)}
  .tiles{grid-template-columns:1fr}
  .num-row{grid-template-columns:auto 1fr auto}
  .num-s{grid-column:1/-1}
}
@media (max-width:720px){
  body{font-size:16px}
  .bar .mid{display:none}
  .intro-grid,.copy-grid{grid-template-columns:1fr}
  .lede,.sub,.copy-grid .h-l,.copy-body{grid-column:auto}
  .meta{grid-template-columns:1fr}
  .tr-why{grid-template-columns:1fr;gap:6px}
  .edit-grid{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr 1fr;gap:20px 12px}
  .states{grid-template-columns:1fr;gap:10px}
  .states .mo{flex-direction:row}
  .lays{grid-template-columns:repeat(2,1fr)}
  .lays .lay:nth-child(1){grid-row:auto}
  .tile{padding:20px;min-height:0}
  .ba-handle i{width:36px;height:36px;margin:-18px 0 0 -18px}
  .ba-lab{top:8px;font-size:9.5px;padding:4px 7px}.ba-lab.b{left:8px}.ba-lab.a{right:8px}
}
@media (prefers-reduced-motion:reduce){
  .rv,.ln>span{opacity:1!important;transform:none!important;transition:none!important}
  .morph .m2{animation:none;opacity:0}
}