@font-face{font-family:DM Sans;src:url(/assets/fonts/DMSans-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:DM Sans;src:url(/assets/fonts/DMSans-Medium.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:DM Sans;src:url(/assets/fonts/DMSans-SemiBold.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:DM Sans;src:url(/assets/fonts/DMSans-Bold.woff2) format('woff2');font-weight:700;font-display:swap}
:root{color-scheme:light;--ink:#18243a;--muted:#64718a;--blue:#235be8;--paper:#fff;--radius:28px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;font-family:DM Sans,system-ui,sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}h1,h2,h3,p,figure{margin:0}a{color:inherit;text-decoration:none}button{font:inherit}img{display:block;max-width:100%;height:auto}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}[hidden]{display:none!important}::selection{background:#c4d9ff;color:#18243a}:focus-visible{outline:3px solid var(--blue);outline-offset:5px}.container{width:min(1160px,calc(100% - 80px));margin-inline:auto}
.fork-skip{position:absolute;z-index:20;top:10px;left:20px;padding:12px 20px;background:white;border-radius:30px;transform:translateY(-200%)}.fork-skip:focus{transform:none}
.fork-header{position:absolute;top:28px;inset-inline:0;z-index:5}.fork-nav{width:min(1220px,calc(100% - 80px));margin:auto;display:flex;align-items:center;justify-content:space-between;gap:30px}.fork-brand{display:inline-flex;align-items:center;gap:10px;font-size:22px;font-weight:700;letter-spacing:-.055em}.fork-brand img{border-radius:10px}.fork-links{display:flex;gap:34px;font-size:14px;font-weight:500}.fork-links a{padding:12px 0}.fork-links a:hover{color:var(--blue)}
.fork-button{display:inline-flex;justify-content:center;align-items:center;gap:28px;min-height:56px;padding:16px 26px;border-radius:100px;background:var(--blue);color:#fff;font-weight:600;font-size:15px;white-space:nowrap;transition:background .2s,translate .2s}.fork-button:hover{background:#184dc9;translate:0 -2px}.fork-nav-cta{min-height:44px;font-size:13px;padding:12px 20px;gap:22px;background:#18243a}.fork-nav-cta:hover{background:#304562}
/* Center the product; give the headline, story and action separate breathing room. */
.fork-hero{--fork-hero-bottom:36px;position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(#87983d,#87983d) bottom/100% 120px no-repeat,linear-gradient(180deg,#b6ddfa 0%,#d1eafb 72%,#e2f2fc 100%);padding:105px 0 var(--fork-hero-bottom)}
.fork-hero:after{content:"";position:absolute;inset:auto 0 0;height:var(--fork-hero-bottom);z-index:2;background:linear-gradient(#fff0,#fff);pointer-events:none}
.fork-hero{min-height:calc(100svh + var(--fork-hero-bottom) + 24px)}
/* The scenery sits below the product and copy; decorative layers never intercept input. */
.fork-hero-scenery{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.fork-sky-cloud{position:absolute;width:clamp(180px,21vw,350px);max-width:none;height:auto;opacity:.65}
.fork-sky-cloud-left{top:15%;left:-3%;--cloud-travel:26px}
.fork-sky-cloud-right{top:29%;right:-2%;width:clamp(150px,18vw,290px);opacity:.5;--cloud-travel:-22px}
.fork-hero-layout{position:relative;z-index:1;width:min(1320px,calc(100% - 80px));display:grid;grid-template-columns:minmax(0,1fr) minmax(500px,1.85fr) minmax(0,1fr);grid-template-areas:"title title title" "story scene action";gap:16px 24px;align-items:center}
.fork-hero h1{grid-area:title;font-size:clamp(44px,4.8vw,72px);line-height:1.02;font-weight:600;letter-spacing:-.06em;color:#233d64;text-align:center;margin:0 auto 4px;max-width:100%}
.fork-hero h1>span{display:block}
.fork-title-accent{color:#567b9f}
.fork-hero-copy{grid-area:story;position:relative;z-index:3;justify-self:start;max-width:250px;padding-bottom:30px}
.fork-hero-copy>p{font-size:clamp(17px,1.6vw,22px);line-height:1.55;color:#334b67;letter-spacing:-.035em}
.fork-hero-action{grid-area:action;position:relative;z-index:3;justify-self:end;text-align:center;padding-bottom:30px}
.fork-hero-action small{display:block;color:#425a74;font-size:12px;margin-top:15px}
.fork-product-scene{grid-area:scene;position:relative;z-index:4;min-width:0;height:var(--fork-scene-height,auto);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;isolation:isolate}
.fork-device{--fork-bezel:9px;position:relative;flex:none;width:360px;max-width:100%;aspect-ratio:71.9/150;padding:var(--fork-bezel);background:#172332;border:1px solid #364554;border-radius:50px;box-shadow:0 32px 65px -20px #294a6b3d,0 0 0 1px #263d6614;transform:scale(var(--fork-device-scale,1));transform-origin:top center}
/* iPhone 17 Pro body: 71.9 mm wide × 150 mm tall (Apple technical specs). */
.fork-device-screen{position:absolute;inset:var(--fork-bezel);display:flex;flex-direction:column;background:linear-gradient(180deg,#e3f1fc 0%,#eaf3f8 52%,#f7f8fa 78%);border-radius:40px;overflow:visible}
.fork-device-screen> :not(.fork-demo-world){flex-shrink:0}
.fork-device-screen:after{content:"";position:absolute;inset:auto 0 0;height:48px;background:#f7f8fa;border-radius:0 0 40px 40px;z-index:2;pointer-events:none}
.fork-device-status{height:39px;padding:14px 22px 6px;display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;color:#18243a}
.fork-device-speaker{position:absolute;left:50%;top:7px;transform:translateX(-50%);height:22px;width:25%;background:#10151f;border-radius:20px}
.fork-device-battery{width:18px;height:9px;border:1px solid #53637a;border-radius:3px;position:relative}
.fork-device-battery:before{content:"";position:absolute;inset:1px 3px 1px 1px;background:#53637a;border-radius:1px}
.fork-demo-timer{text-align:center;padding:6px 14px 0;color:#18243a}
.fork-demo-timer:before{content:"";position:absolute;inset:-6px -12px -16px;z-index:-1;background:radial-gradient(ellipse at 50% 38%,#e6f2fcf0 0%,#e6f2fca6 42%,#e6f2fc00 74%);pointer-events:none}
.fork-demo-timer output{font-size:56px;font-weight:700;line-height:1.12;font-variant-numeric:tabular-nums}
.fork-demo-progress-row{display:grid;justify-items:center;gap:6px;width:72%;margin:8px auto 0;font-size:11px;line-height:1.2;color:#58627a}
.fork-demo-progress-row>span{white-space:nowrap;text-shadow:0 0 4px #e6f2fc,0 0 8px #e6f2fc}
.fork-demo-progress-row progress{display:block;width:100%;height:4px;border:0;border-radius:5px;appearance:none;overflow:hidden;background:#c7c6d8}
.fork-demo-progress-row progress::-webkit-progress-bar{background:#c7c6d8}
.fork-demo-progress-row progress::-webkit-progress-value{background:#287d98;border-radius:5px}
.fork-demo-progress-row progress::-moz-progress-bar{background:#287d98;border-radius:5px}
/* Let the kingdom rise behind the foreground timer without stretching the device. */
.fork-demo-world{--fork-kingdom-overlap:80px;--fork-castle-height:calc(100% + var(--fork-kingdom-overlap));flex:1;min-height:0;position:relative;isolation:isolate;margin-top:14px}
/* Each frame extends the original 1536×1024 artwork into a 3840×1648 meadow.
   Anchor the original lawn at the same height while the added ground flows below it. */
.fork-kingdom,.fork-kingdom-video,.fork-kingdom-ground{position:absolute;height:calc(var(--fork-castle-height)*1.609375);width:auto;max-width:none;left:50%;transform:translateX(-50%);bottom:calc(var(--fork-castle-height)*-.609375);z-index:1;mask-image:linear-gradient(#000 82%,transparent)}
.fork-kingdom-video{opacity:0;z-index:3;pointer-events:none;mask-image:linear-gradient(90deg,transparent 20%,#000 27%,#000 73%,transparent 80%),linear-gradient(#000 82%,transparent);mask-composite:intersect}
.fork-kingdom-ground{visibility:hidden;pointer-events:none}
.fork-kingdom-stages.is-video-active .fork-kingdom-ground{visibility:visible}
.fork-kingdom-stages.is-video-active .fork-kingdom-video{opacity:1}
.fork-kingdom-stages.is-video-active .fork-kingdom{visibility:hidden}
/* Extend only the empty outer meadow on wide screens; keep the castle's proportions. */
.fork-meadow-floor{--fork-meadow-image:url(/fork/assets/kingdom-growth-v4-poster.webp);position:absolute;bottom:calc(var(--fork-castle-height)*-.609375);left:50%;height:calc(var(--fork-castle-height)*1.609375);aspect-ratio:3840/1648;transform:translateX(-50%);pointer-events:none}
.fork-meadow-floor:before,.fork-meadow-floor:after{content:"";position:absolute;z-index:1;top:0;height:100%;width:max(0px,calc((100vw / var(--fork-device-scale,1) - 100%)/2 + 2px));transform:scaleX(-1);background-image:var(--fork-meadow-image);background-size:500% 100%;background-repeat:no-repeat;mask-image:linear-gradient(#000 82%,transparent)}
.fork-meadow-floor:before{right:calc(100% - 4px);background-position:left top}
.fork-meadow-floor:after{left:calc(100% - 4px);background-position:right top}
.fork-meadow-tail{position:absolute;z-index:0;top:82%;left:50%;width:calc(100vw / var(--fork-device-scale,1) + 4px);height:max(360px,calc((100svh - 600px) / var(--fork-device-scale,1)));transform:translateX(-50%);background:#87983d var(--fork-meadow-image) center bottom/100% 275% no-repeat}
.fork-demo-locke{position:absolute;width:27%;right:3%;bottom:1%;z-index:6;pointer-events:none}
.fork-demo-locke video{display:block;width:100%;height:auto}
.fork-demo-task{text-align:center;padding:12px 9px;background:linear-gradient(180deg,#f7f8fae6,#f7f8fa 25%)}
.fork-demo-task h2{font-size:19px;letter-spacing:-.03em;font-weight:700;line-height:1.3;margin:0 0 6px}
.fork-demo-task>p{font-size:12px;color:#626a7b;margin:0 0 12px}
.fork-demo-blocking{font-size:10px;color:#626a7b;display:flex;justify-content:center;align-items:center;gap:6px}
.fork-demo-blocking>span[aria-hidden]{color:#6b5cb6;font-weight:700}
.fork-demo-actions{display:flex;gap:7px;padding:0 10px;background:#f7f8fa}
.fork-demo-actions button{border:1px solid #dce0e8;border-radius:30px;padding:10px 7px;flex:1;font-size:11px;white-space:nowrap;color:#646d7c;background:transparent}
.fork-demo-actions button:first-child{color:#18243a;font-weight:600;border-color:#fff;background:#fff}
.fork-demo-actions button:hover{border-color:#b0c5df;background:#f1f6ff}
#fork-demo-urge-count{background:#287d98;color:white;display:inline-flex;min-width:19px;height:19px;align-items:center;justify-content:center;padding:0 4px;border-radius:20px;font-size:11px;margin-left:3px}
.fork-demo-feedback{font-size:11px;line-height:1.5;min-height:45px;text-align:center;color:#62748a;padding:10px 15px 4px;background:#f7f8fa;border-radius:0 0 26px 26px}
.fork-device-home{display:block;width:100px;height:4px;background:#37404f;border-radius:10px;margin:8px auto 3px}
.fork-demo-controls{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;font-size:11px;color:#6c7a90;margin-top:18px}
.fork-demo-controls button{font:inherit;color:#425d80;background:none;border:0;padding:6px 0;text-decoration:underline;text-decoration-color:#bac9dc;text-underline-offset:4px}
.fork-demo-controls button:hover{color:#235be8}

.fork-device:after{content:"";position:absolute;inset:0;border:8px solid #172332;border-radius:50px;z-index:5;pointer-events:none;box-shadow:inset 0 0 0 1px #536375}
.fork-device-status,.fork-demo-timer,.fork-demo-task,.fork-demo-actions,.fork-demo-feedback,.fork-device-home{position:relative;z-index:3}
/* Clip each word so a wrapped row cannot reveal letters in the row below. */
.fork-hero h1 .fork-title-line{display:block;overflow:hidden;padding-bottom:.17em;margin-bottom:-.17em}
.fork-title-word,.fork-title-letter{display:inline-block;vertical-align:baseline}
.fork-title-word{-webkit-clip-path:inset(0 -.04em -.17em);clip-path:inset(0 -.04em -.17em)}
.fork-ribbon{padding:35px 0;border-bottom:1px solid #edf0f5}
.fork-ribbon-fade{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.fork-ribbon-track{display:flex;width:max-content;animation:fork-ribbon 38s linear infinite}
.fork-ribbon ul{list-style:none;display:flex;gap:70px;padding:0 35px;margin:0;flex:none}
.fork-ribbon li{white-space:nowrap;font-size:20px;letter-spacing:-.035em;color:#7c8b9d;font-weight:500}
.fork-ribbon:hover .fork-ribbon-track,.motion-paused .fork-ribbon-track{animation-play-state:paused}
@keyframes fork-ribbon{to{transform:translateX(-50%)}}
.fork-footer{display:grid;grid-template-columns:1fr auto;gap:20px;padding-block:48px}.fork-footer .fork-brand{font-size:20px}.fork-footer>p{grid-column:1;grid-row:2;font-size:13px;color:var(--muted)}.fork-footer nav{display:flex;gap:24px;align-items:center;font-size:13px;grid-column:2;grid-row:1}.fork-footer small{grid-column:2;grid-row:2;text-align:right;font-size:11px;color:var(--muted)}

@media(prefers-reduced-motion:no-preference){
 .fork-sky-cloud{animation:fork-cloud-drift 32s ease-in-out infinite alternate;animation-play-state:paused}
 .fork-sky-cloud-right{animation-duration:41s;animation-delay:-15s}
 .fork-hero.is-scenery-visible .fork-sky-cloud{animation-play-state:running}
 .motion-paused .fork-hero .fork-sky-cloud{animation-play-state:paused}
}
@keyframes fork-cloud-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--cloud-travel),-8px,0)}}

@media(min-width:901px) and (max-height:1000px){
 .fork-hero{--fork-hero-bottom:18px;padding-top:92px}
 .fork-hero h1{font-size:clamp(44px,4.2vw,60px)}
 .fork-hero-layout{row-gap:12px}
 .fork-device{width:340px}
 .fork-device-status{height:33px;padding-top:11px}
 .fork-demo-timer output{font-size:52px}
 .fork-demo-task{padding-top:8px;padding-bottom:9px}
 .fork-demo-feedback{min-height:32px;padding-top:7px}
}
@media(min-width:901px) and (max-height:850px){
 .fork-device{--fork-bezel:8px;width:310px;border-radius:45px}
 .fork-device:after{border-radius:45px;border-width:7px}
 .fork-device-screen{border-radius:36px}
 .fork-device-status{height:30px;padding-top:10px}
 .fork-demo-timer{padding-top:2px}
 .fork-demo-timer output{font-size:48px}
 .fork-demo-progress-row{margin-top:4px;gap:4px;font-size:10px}
 .fork-demo-world{margin-top:10px}
 .fork-demo-task{padding:6px 8px}
 .fork-demo-task h2{font-size:18px;line-height:1.2;margin-bottom:3px}
 .fork-demo-task>p{font-size:11px;line-height:1.3;margin-bottom:5px}
 .fork-demo-actions button{padding-block:7px}
 .fork-demo-feedback{font-size:10px;line-height:1.3;min-height:23px;padding:4px 10px 3px}
 .fork-device-home{margin-top:6px}
}
@media(min-width:901px) and (max-width:1100px){
 .fork-hero-layout{width:calc(100% - 48px);grid-template-columns:minmax(0,1fr) 440px minmax(0,1fr);column-gap:12px}
 .fork-demo-world{--fork-castle-height:min(calc(100% + var(--fork-kingdom-overlap)),calc((100vw - 410px)/var(--fork-device-scale,1)/1.5))}
 .fork-links{gap:22px}
 .fork-hero-action .fork-button{padding-inline:20px;gap:14px;font-size:14px}
 .fork-hero-copy{max-width:180px}
 .fork-hero-copy>p{font-size:16px}
 .fork-hero-action small{font-size:11px}
}
@media(max-width:900px){
 .container{width:calc(100% - 40px)}
 .fork-header{top:23px}
 .fork-nav{width:calc(100% - 40px);gap:14px}
 .fork-brand{font-size:20px;gap:8px}
 .fork-brand img{width:28px;height:28px}
 .fork-links{display:none}
 .fork-nav-cta{font-size:12px;gap:12px;padding:11px 16px;min-height:42px}
 .fork-hero{--fork-hero-bottom:32px;padding:111px 0 var(--fork-hero-bottom)}
 .fork-sky-cloud-left{top:5%;left:-29%;width:240px;opacity:.55}
 .fork-sky-cloud-right{top:30%;right:-25%;width:200px;opacity:.4}
 .fork-hero-layout{width:calc(100% - 40px);display:flex;flex-direction:column;gap:0}
 .fork-hero h1{font-size:clamp(38px,7vw,58px);line-height:1.05;margin-bottom:22px;max-width:700px}
 .fork-hero-copy{order:1;padding:0;text-align:center;max-width:400px}
 .fork-hero-copy>p{font-size:17px;line-height:1.55;letter-spacing:-.02em}
 .fork-hero-copy br{display:none}
 .fork-hero-action{order:2;padding:0;margin:23px 0 32px}
 .fork-hero-action small{display:none}
 .fork-product-scene{order:3;width:100%}
 .fork-device{--fork-bezel:8px;width:330px}
 .fork-demo-world{--fork-kingdom-overlap:100px}
 .fork-demo-timer output{font-size:54px}
 .fork-demo-task h2{font-size:21px}
 .fork-demo-actions button{font-size:12px}
 .fork-demo-controls{margin-top:22px}
 .fork-ribbon{padding:28px 0}
 .fork-ribbon ul{gap:40px;padding-inline:20px}
 .fork-ribbon li{font-size:17px}
 .fork-footer{grid-template-columns:1fr;gap:20px;padding-block:36px}
 .fork-footer nav{grid-column:1;grid-row:3;gap:22px;flex-wrap:wrap}
 .fork-footer small{grid-column:1;grid-row:4;text-align:left}
}
@media(max-width:380px){
 .fork-hero h1{font-size:34px}
 .fork-hero-copy>p{font-size:16px}
 .fork-device{--fork-bezel:7px;width:290px;border-radius:38px}
 .fork-device:after{border-radius:38px;border-width:6px}
 .fork-device-screen{border-radius:30px}
 .fork-demo-timer output{font-size:48px}
 .fork-demo-actions button{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .fork-button{transition:none}
 .fork-title-letter{transform:none!important}
 .fork-ribbon-track{animation:none;width:auto}
 .fork-ribbon ul{flex-wrap:wrap;justify-content:center;gap:18px 30px;flex:1}
 .fork-ribbon ul[aria-hidden]{display:none}
 .fork-ribbon-fade{mask-image:none}
}

/* NumberFlow handles the countdown's rolling digits and soft edge masks. */
.fork-kingdom{opacity:0;transition:none;pointer-events:none}
.fork-kingdom.is-previous{opacity:1;z-index:1}
.fork-kingdom.is-current{opacity:1;z-index:2;transition:opacity .4s ease}
.fork-kingdom.is-instant{transition:none}
.fork-demo-timer output{display:inline-flex;align-items:center;justify-content:center;line-height:1.12;letter-spacing:0;white-space:nowrap}
.fork-demo-timer number-flow-group{display:inline-flex;align-items:baseline;justify-content:center}
.fork-demo-timer number-flow{font:inherit;font-variant-numeric:tabular-nums;line-height:1.05;--number-flow-mask-height:.12em;--number-flow-mask-width:.08em}
.fork-demo-blocking{min-height:28px}
.fork-app-stack{display:inline-flex;align-items:center;gap:6px;border-radius:100px;padding:5px 8px;background:#e9ebf0;color:#626a7b}
.fork-app-icons{display:flex;align-items:center;padding-left:4px}
.fork-app-icon{display:grid;place-items:center;width:20px;height:20px;margin-left:-4px;border:2px solid #e9ebf0;border-radius:6px;position:relative;background:#141619}
.fork-app-icon img{width:12px;height:12px;filter:invert(1)}
.fork-app-instagram{background:linear-gradient(30deg,#ffb647,#dd2a7b 60%,#6e48ce)}
.fork-app-youtube{background:#f32631}
.fork-app-more{font-size:10px;font-weight:600}
.fork-demo-actions button:disabled{opacity:.5;cursor:default}
/* Let the completed session settle in, one line at a time. */
.fork-demo-task.is-complete>*{animation:fork-session-reveal 480ms cubic-bezier(.16,1,.3,1) backwards}
.fork-demo-task.is-complete>p{animation-delay:70ms}
.fork-demo-task.is-complete>.fork-demo-blocking{animation-delay:140ms}
@keyframes fork-session-reveal{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.motion-paused .fork-demo-task.is-complete>*{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.fork-kingdom{transition:none}.fork-demo-task.is-complete>*{animation:none}}
.motion-paused .fork-kingdom{transition:none}

/* Wide displays get a larger composition, bounded by the available viewport height. */
@media(min-width:1600px){
 .fork-nav{width:min(1840px,calc(100% - 160px))}
 .fork-header{top:38px}
 .fork-brand{font-size:28px;gap:13px}.fork-brand img{width:40px;height:40px}
 .fork-links{font-size:18px;gap:45px}
 .fork-nav-cta{font-size:16px;min-height:54px;padding:15px 25px}
 .fork-hero{padding-top:130px}
 .fork-hero-layout{width:min(1900px,calc(100% - 160px));grid-template-columns:minmax(0,1fr) minmax(650px,1.8fr) minmax(0,1fr);gap:24px 44px}
 .fork-hero h1{font-size:clamp(72px,4.2vw,108px)}
 .fork-hero-copy{max-width:330px}.fork-hero-copy>p{font-size:clamp(23px,1.2vw,30px)}
 .fork-hero-action .fork-button{font-size:20px;padding:22px 34px;gap:38px}
 .fork-hero-action small{font-size:15px;margin-top:20px}
 .fork-sky-cloud-left{width:clamp(350px,17vw,550px)}
 .fork-sky-cloud-right{width:clamp(290px,15vw,460px)}
}
@media(min-width:1600px) and (max-height:1100px){
 .fork-header{top:25px}.fork-hero{padding-top:100px}
 .fork-hero h1{font-size:clamp(62px,3.5vw,80px)}
 .fork-hero-layout{row-gap:16px}
}