:root{
    --r-btn:12px; --r-card:16px; --r-pill:999px;
    --paper:#f6f3ed; --surface:#fbf8f2; --surface-2:#f1ece3;
    --ink:#141214; --muted:#5a554c;
    --klein:#2438e6;         
    --klein-text:#1b28b8;    
    --klein-lift:#3346ff;    
    --klein-deep:#1421a0;    
    --accent:var(--klein); --accent-text:var(--klein-text); --accent-lift:var(--klein-lift);
    --accent-ink:#fff;       
    --peri:#7c97f5;          
    --edge:#cfc7b8;
    --fedge:#b9ae99;    
    --line:rgba(20,18,20,.11);
    --serif:"Fraunces",Georgia,serif;
    --sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
    --spring:cubic-bezier(.34,1.56,.64,1);
    --ease:cubic-bezier(.16,1,.3,1);
    --flow:cubic-bezier(.22,.61,.36,1);    
    --shadow:0 30px 70px -34px rgba(20,18,20,.42), 0 8px 22px -16px rgba(20,18,20,.28);
    color-scheme:light;
  }
[hidden]{display:none !important}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;max-width:100%;overflow-x:hidden}
body{
    background:var(--paper);color:var(--ink);font-family:var(--sans);
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    padding:clamp(16px,4vw,44px) clamp(12px,4vw,28px);position:relative;
  }
body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.05;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
.aura{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aura .orb{position:absolute;top:0;left:0;border-radius:50%;will-change:transform;
    box-shadow:0 30px 68px -26px rgba(20,18,20,.36)}
.fireworks{position:fixed;inset:0;z-index:0;pointer-events:none}
.brandwrap{text-decoration:none;position:relative;z-index:1;display:inline-block;line-height:0;margin:auto 0 clamp(16px,2.6vw,22px);opacity:0;animation:rise .7s var(--ease) .04s both}
.brand{display:block;height:clamp(30px,3.7vw,40px);width:auto}
.xout{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:0;transition:opacity .55s ease;clip-path:inset(0 100% 0 0)}
.xline{fill:none;stroke:#d7263d;stroke-width:7;stroke-linecap:round;vector-effect:non-scaling-stroke}
.brandwrap:focus-visible{outline:2px solid var(--accent,#2438e6);outline-offset:6px;border-radius:6px}
.brandwrap.xing .xout{opacity:1;animation:xdraw .75s linear -.23s forwards}
.brandwrap.xing.xfade .xout{opacity:0}
@keyframes xdraw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.pen{position:absolute;left:0;top:0;width:clamp(17px,2vw,21px);height:auto;pointer-events:none;opacity:0;
    transform-origin:17% 83%;filter:drop-shadow(0 2px 3px rgba(20,18,20,.3))}
.brandwrap.xing .pen{animation:pensweep .7s ease-in-out .02s forwards}
.brandwrap.xing.xfade .pen{opacity:0}
@keyframes pensweep{
    0%   {left:30%;top:-34%;opacity:0;transform:translate(-17%,-83%) rotate(-18deg)}
    10%  {left:40.6%;top:21%;opacity:1;transform:translate(-17%,-83%) rotate(-18deg)}
    45%  {left:73.4%;top:89%;opacity:1;transform:translate(-17%,-83%) rotate(-18deg)}
    65%  {left:86%;top:40%;opacity:1;transform:translate(-17%,-83%) rotate(-8deg)}
    100% {left:106%;top:-36%;opacity:0;transform:translate(-17%,-83%) rotate(0deg)}
  }
@media (prefers-reduced-motion:reduce){.brandwrap.xing .xout{animation:none;clip-path:none}
.pen{display:none}}
.app{
    position:relative;z-index:1;width:100%;max-width:780px;
    background:var(--surface);border:1px solid var(--edge);border-radius:26px;
    box-shadow:var(--shadow);margin-bottom:auto;
    padding:clamp(20px,4vw,34px) clamp(18px,4vw,34px) clamp(18px,3.6vw,26px);
    overflow:clip;
  }
.stephead{display:flex;align-items:flex-start;gap:16px;opacity:0;animation:rise .7s var(--ease) .1s both}
.stepblock{flex:1;min-width:0}
.track{position:relative;height:14px}
.track-line{position:absolute;top:50%;height:2px;background:var(--surface-2);border-radius:2px;transform:translateY(-50%)}
.track-fill{display:block;height:100%;width:0;background:var(--klein);border-radius:2px;transition:width .55s var(--ease)}
.track-nodes{position:relative;display:flex;height:100%}
.node{flex:1;display:flex;align-items:center;justify-content:center}
.node b{display:block;width:11px;height:11px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 2px var(--edge);transition:box-shadow .35s var(--ease),background .35s var(--ease),opacity .5s var(--ease),transform .5s var(--ease);position:relative;z-index:1}
.node.done b{background:var(--klein);box-shadow:inset 0 0 0 2px var(--klein)}
.node.active b{background:var(--klein);box-shadow:inset 0 0 0 2px var(--klein),0 0 0 4px rgba(36,56,230,.14)}
.track-line.armed{transition:right .55s var(--ease)}
.node.future b{opacity:0;transform:scale(.2)}
button.node{margin:-10px 0;border:0;background:none;padding:0;font:inherit;min-height:34px}
button.node[disabled]{cursor:default}
.node.nav{cursor:pointer;-webkit-tap-highlight-color:transparent}
.node.nav:hover b{box-shadow:inset 0 0 0 2px var(--klein),0 0 0 4px rgba(36,56,230,.16)}
.node.nav:focus-visible{outline:none}
.node.nav:focus-visible b{box-shadow:inset 0 0 0 2px var(--klein),0 0 0 3px rgba(36,56,230,.45)}
.seg-labels{display:flex;gap:4px;margin-top:9px}
.sl{flex:1;min-width:0;text-align:center;font-size:9px;font-weight:600;line-height:1.15;letter-spacing:.02em;color:var(--muted);text-transform:uppercase;transition:color .3s ease,opacity .5s var(--ease);white-space:normal;word-break:normal}
.sl.active{color:var(--klein-text)}
.sl.future{opacity:0}
button.sl{margin:0;border:0;background:none;padding:0;font-family:inherit}
.sl.nav{cursor:pointer;-webkit-tap-highlight-color:transparent}
.sl.nav:hover,.sl.nav:focus-visible{color:var(--klein-text);text-decoration:underline;text-underline-offset:2px}
.sl.nav:focus-visible{outline:2px solid var(--klein);outline-offset:2px;border-radius:3px}
.stephead .counter{display:none}
.counter .n{font-family:var(--serif);font-weight:600;font-size:20px;line-height:1;color:var(--ink);letter-spacing:-.02em}
.counter .n b{color:var(--klein-text)}
.counter .l{display:block;margin-top:4px;font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.screen{display:none}
.screens{position:relative;margin-top:clamp(22px,4vw,30px);display:flex;flex-direction:column}
.screen.on{display:block;flex:1 1 auto;min-height:0}
.screen[data-screen="fork"].on{display:flex;flex-direction:column}
.screen[data-screen="fork"] .door{min-height:333px}
.screen[data-screen="fork"] .ghost{width:66%;max-width:300px;top:66%}
.screen[data-screen="fork"] .door.b .ghost{width:62%}
@media (max-width:620px){.screen[data-screen="fork"] .door{min-height:228px}}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--klein-text);margin:0}
.eb-opt{font-weight:500;letter-spacing:.04em;text-transform:none;color:var(--muted)}
.eyebrow .pd{width:7px;height:7px;border-radius:50%;background:var(--klein);flex:0 0 auto}
.eb-t{display:inline-block;position:relative}
.screen.on .eyebrow .pd{animation:eb-dot .9s cubic-bezier(.4,0,.2,1) both}
.screen.on .eyebrow .eb-t{animation:eb-label 1s cubic-bezier(.4,0,.2,1) .3s both}
@keyframes eb-dot{from{opacity:0;transform:translateX(-9px)}to{opacity:1;transform:none}}
@keyframes eb-label{from{opacity:0;transform:translateX(-7px)}to{opacity:1;transform:none}}
.eb-t::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--klein);border-radius:2px;transform:scaleX(0);transform-origin:left center;opacity:0}
.screen.on .eyebrow .eb-t::after{animation:eb-underline 2.1s var(--ease) .55s both}
@keyframes eb-underline{0%{transform:scaleX(0);opacity:0} 10%{opacity:1} 42%{transform:scaleX(1);opacity:1} 66%{transform:scaleX(1);opacity:1} 100%{transform:scaleX(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.screen.on .eyebrow .pd,.screen.on .eyebrow .eb-t,.screen.on .eyebrow .eb-t::after{animation:none}}
h1.head{
    font-family:var(--serif);font-weight:600;
    font-size:clamp(30px,5.4vw,50px);line-height:1.02;letter-spacing:-.03em;
    color:var(--ink);margin:14px 0 12px;text-wrap:balance;max-width:30ch;
  }
h1.head .hopt{font-style:normal;font-weight:500;font-size:.36em;letter-spacing:-.01em;
    color:var(--muted);vertical-align:.52em;white-space:nowrap;
    margin-left:.9em}
@media (min-width:861px) and (max-width:1119px){.screen[data-screen="replacewhy"] h1.head{font-size:clamp(24px,calc((100vw - 544px)/12),50px)}}
h1.head .accent-dot{display:inline-block;width:.16em;height:.16em;border-radius:50%;background:var(--klein);vertical-align:baseline;margin-left:.03em;transform:translateY(.04em)}
h1.head .accent-dot.ink-dot{background:var(--ink)}
h1.head .haccent{color:var(--klein)}
h1.head .haccent.ink{color:var(--ink)}
h1.head .hlite{
    display:inline-block;vertical-align:baseline;
    font-style:italic;  
    background:linear-gradient(90deg,var(--klein) 0%,var(--klein) 40%,#ff7a18 50%,var(--klein) 60%,var(--klein) 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;  
    background-repeat:repeat;background-size:500% 300%;background-position:100% 50%;
    padding-top:.22em;margin-top:-.22em;
    padding-bottom:.3em;margin-bottom:-.3em;
    padding-right:.26em;margin-right:-.26em;
  }
@keyframes hlite-breathe{
    0%   { background-position:100% 50% }     
    100% { background-position:-25% 50% }      
  }
@keyframes hlite-reveal{
    0%  { color:#141214 }
    35% { color:var(--klein) }
    100%{ color:transparent }
  }
@media (prefers-reduced-motion:reduce){h1.head .hlite{animation:none !important}}
h1.head.tw .hlite{
    background:none;color:var(--ink);
  }
h1.head.tw{text-wrap:normal}
h1.head.tw .tw-c{opacity:0;position:relative}
h1.head.tw .tw-c.tw-on{opacity:1}
h1.head.tw .tw-lite{color:var(--klein)}
h1.head.tw .haccent,h1.head.tw .accent-dot,h1.head.tw .dotcl{opacity:0}
h1.head.tw.tw-done .haccent,h1.head.tw.tw-done .accent-dot,h1.head.tw.tw-done .dotcl{opacity:1;transition:opacity .22s ease}
h1.head.tw .tw-c.tw-cur::after{content:"";position:absolute;left:100%;top:.2em;bottom:.16em;margin-left:.06em;
    width:.055em;background:var(--klein);border-radius:1px;opacity:1;transition:opacity .2s ease}
h1.head.tw .tw-c.tw-cur.tw-blink::after{animation:twcaret .53s steps(1,end) 2}
h1.head.tw .tw-c.tw-cur.tw-resolve::after{opacity:0}
@keyframes twcaret{0%,49%{opacity:1}50%,100%{opacity:0}}
p.sub{font-size:clamp(14.5px,1.6vw,16.5px);line-height:1.5;color:var(--muted);margin:0 0 clamp(20px,3.4vw,26px);max-width:58ch}
.doors{display:flex;gap:14px}
.door{
    position:relative;flex:1 1 0;min-width:0;overflow:hidden;cursor:pointer;
    -webkit-appearance:none;appearance:none;
    display:flex;flex-direction:column;justify-content:flex-start;
    min-height:250px;border-radius:20px;border:1.5px solid var(--edge);
    background:var(--surface);text-align:left;color:var(--ink);font-family:inherit;
    padding:clamp(18px,2.4vw,24px);
    --fg:var(--ink); --fg-soft:var(--muted); --acc:var(--klein-text);
    transition:flex-grow .55s var(--ease),filter .5s var(--ease),border-color .3s ease,box-shadow .4s ease,transform .4s var(--spring);
    opacity:0;
  }
.door.a{background:radial-gradient(130% 120% at 20% 6%,var(--surface) 0%,var(--paper) 62%,var(--surface-2) 100%)}
.door.b{background:radial-gradient(130% 120% at 80% 6%,var(--surface-2) 0%,var(--paper) 58%,#ece5d9 100%)}
.screen.on .door.a{animation:rise .8s var(--ease) .3s both}
.screen.on .door.b{animation:rise .8s var(--ease) .38s both}
.flood{position:absolute;inset:0;z-index:0;opacity:.05;transition:opacity .55s var(--ease);
    background:radial-gradient(120% 130% at 30% 0%,#3d4ff2 0%,var(--klein) 52%,#1c2ac2 100%)}
.door.b .flood{background:radial-gradient(120% 130% at 70% 0%,#3d4ff2 0%,var(--klein) 52%,#1c2ac2 100%)}
.glow{position:absolute;z-index:1;width:64%;aspect-ratio:1;border-radius:50%;pointer-events:none;
    filter:blur(42px);opacity:.5;
    background:radial-gradient(circle,color-mix(in srgb,var(--peri) 60%,transparent),transparent 68%);
    animation:drift 15s ease-in-out infinite}
.door.a .glow{top:4%;left:-8%}
.door.b .glow{top:0;right:-10%;animation-delay:-6s}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(10%,14%,0) scale(1.12)}66%{transform:translate3d(-8%,6%,0) scale(.96)}}
.ghost{position:absolute;z-index:2;right:-4%;top:50%;width:52%;height:auto;max-width:230px;aspect-ratio:1;
    color:var(--acc);opacity:.10;pointer-events:none;transform:translateY(-50%);overflow:visible;
    animation:ghostfloat 16s ease-in-out infinite;transition:opacity .55s var(--ease),color .55s var(--ease)}
.door.b .ghost{right:4%;width:48%}
.door.hovering .ghost,.door.chosen .ghost{opacity:.16}
@keyframes ghostfloat{0%,100%{transform:translateY(-54%) rotate(-1deg)}50%{transform:translateY(-46%) rotate(1.5deg)}}