:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#232829;background:#fff;color-scheme:light;--green:#2c7b73;--muted:#67726f;--stage:#fff}
*{box-sizing:border-box}body{margin:0}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:3px}[hidden]{display:none!important}h1,h2,h3,p{margin:0}
.page{min-height:100svh;padding:16px;display:grid;place-items:center;background:var(--stage)}
.film{position:relative;aspect-ratio:16/9;width:min(100%,calc((100svh - 32px)*16/9));max-width:1920px;container-type:inline-size;background:var(--stage)}
.picture{position:absolute;top:0;right:0;width:61%;height:100%}
video{width:100%;height:100%;display:block;object-fit:fill}
.brand{position:absolute;left:5.416667%;top:6.481481%;z-index:1}
.brand h1{font-size:2.447917cqw;font-weight:400;line-height:1;letter-spacing:normal}
.brand p{margin-top:1.09375cqw;font-size:.885417cqw;font-weight:550;line-height:1;letter-spacing:.012em;color:var(--muted)}
.copy,.chapter-copy,.benefits{position:absolute;inset:0;pointer-events:none}
.eyebrow,.chapter-copy h2,.benefit{position:absolute;left:5.416667%;width:33.2%;pointer-events:auto}
.eyebrow{top:22.87037%;font-size:1.041667cqw;line-height:1;font-weight:600;color:var(--green);text-transform:uppercase}
.chapter-copy h2{top:27.685185%;left:5.208333%;font-size:var(--title-size);font-weight:600;line-height:var(--title-leading);letter-spacing:normal}
.benefit{top:var(--y)}
.benefit h3{font-size:var(--benefit-size);font-weight:550;line-height:1.1;letter-spacing:normal}
.benefit p{font-size:1.302083cqw;line-height:1.32;color:var(--muted);margin-top:.677083cqw;letter-spacing:normal}
[data-copy=processor] .benefit h3{font-weight:650}
[data-copy=processor] .benefit p{padding-left:1.197917cqw;margin-top:1.197917cqw}
[data-copy=processor] .benefit p span{display:block;margin-top:.520833cqw}
[data-copy=power] .benefit:last-child h3{color:var(--green)}
.chapters{position:absolute;left:5.416667%;top:calc(92.314815% - 22px);width:28.125%;display:grid;grid-template-columns:repeat(6,1fr);height:44px}
.chapters button{position:relative;border:0;background:transparent;padding:0;text-align:left;min-height:44px}
.track{position:absolute;left:0;top:22px;width:77.7778%;height:2px;overflow:hidden;background:#9aa69e45}
.fill{display:block;width:100%;height:100%;background:var(--green);transform:scaleX(0);transform-origin:left}
.chapter-name{position:absolute;left:0;top:29px;color:var(--muted);font-size:clamp(8px,.625cqw,12px);white-space:nowrap;line-height:1.3}
.chapters button:hover .chapter-name,.chapters button[aria-current=true] .chapter-name{color:var(--green)}
.chapters button[aria-current=true] .chapter-name{font-weight:600}.chapters button:hover .track{height:3px}
.counter{position:absolute;left:35.729167%;top:91.481481%;color:var(--muted);font-size:clamp(9px,.833333cqw,16px);font-variant-numeric:tabular-nums;line-height:1.25}
.controls{position:absolute;right:5.416667%;top:calc(92.314815% - 22px);display:flex;align-items:center;gap:8px;height:44px}
.controls button{width:36px;height:44px;border:0;background:transparent;display:grid;place-items:center;padding:9px;color:#697e76}.controls button:hover{color:var(--green)}
.controls svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.clock{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:65px;text-align:center}
.start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#f9faf6e8;border:1px solid #61857870;padding:14px 24px;border-radius:40px;box-shadow:0 3px 20px #25382b0c;color:#2d6c63}.start span{padding-left:5px}
.loading{position:absolute;bottom:13%;left:50%;transform:translateX(-50%);background:#f8f8f2dc;font-size:12px;padding:9px 16px;border-radius:25px;color:#376c5f}
.error{position:absolute;inset:0;display:grid;place-content:center;background:#ffffffed;text-align:center;gap:10px}.error button{background:transparent;border:1px solid #70867b;border-radius:24px;min-height:44px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.page:fullscreen,.page.expanded{width:100%;height:100%;background:var(--stage);padding:0;overflow:auto}
.page.expanded{position:fixed;inset:0;z-index:9999}
.page:fullscreen .film,.page.expanded .film{width:min(100%,calc(100svh * 16/9))}
/* Real text reflows on phones; the complete product remains visible. */
@container(max-width:760px){
 .brand{background:#fff;position:relative;left:auto;top:auto;padding:24px 6% 8px}.brand h1{font-size:32px}.brand p{font-size:10px;margin-top:12px}
 .picture{background:var(--stage);position:relative;top:auto;right:auto;width:100%;height:auto;aspect-ratio:976/900}
 .copy{background:#fff;position:relative;min-height:460px;padding:20px 6% 30px}.chapter-copy,.benefits{position:static;pointer-events:auto}
 .eyebrow,.chapter-copy h2,.benefit{position:static;width:auto;pointer-events:auto}
 .eyebrow{font-size:12px;margin-bottom:18px}.chapter-copy h2{font-size:clamp(32px,7.8cqw,44px);line-height:1.1;letter-spacing:-.035em;margin-bottom:30px}
 .benefits{display:grid;gap:24px}.benefit h3{font-size:16px;line-height:1.25}.benefit p{font-size:15px;line-height:1.45;margin-top:8px}
 [data-copy=processor] .benefit p{padding-left:16px;margin-top:10px}[data-copy=processor] .benefit p span{margin-top:6px}
 .chapters{position:relative;left:auto;top:auto;margin:0 6%;width:88%;height:46px}.track{top:10px;width:88%}.chapter-name{top:20px;font-size:clamp(8px,1.8cqw,12px)}
 .controls{position:relative;top:auto;right:auto;justify-content:flex-end;padding:0 4%;gap:3px}.counter{top:auto;bottom:14px;left:6%;font-size:11px}.controls button{min-width:44px}.clock{font-size:10px}.loading{font-size:10px;padding:6px 12px}
}
@media(max-width:760px){.page{padding:0;min-height:100svh;align-content:start}.film{width:100%;aspect-ratio:auto;background:#fff}}
@media(prefers-contrast:more){:root{--green:#116b59;--muted:#505e57}.track{background:#8c9993}}
.embedded .page{min-height:0;padding:0}.embedded .film{width:100%}
.no-brand .brand{display:none}
/* theme=site: typography of the Nobi website (Hanken Grotesk; Light headlines with a Morning Green full stop, bold subheads, grey body; no capitals) */
@font-face{font-family:"Hanken Grotesk";font-weight:300;src:url("assets/fonts/HankenGrotesk-Light.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Hanken Grotesk";font-weight:400;src:url("assets/fonts/HankenGrotesk-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Hanken Grotesk";font-weight:700;src:url("assets/fonts/HankenGrotesk-Bold.ttf") format("truetype");font-display:swap}
.site-theme{--night:#2e4447;--green:#37928b;--muted:#58595b;font-family:"Hanken Grotesk",Helvetica,Arial,sans-serif;color:#58595b}
.site-theme .eyebrow{font-weight:700;color:var(--night);text-transform:none}
.site-theme .chapter-copy h2{font-weight:300;line-height:1.08;letter-spacing:-.01em;color:var(--night)}
.site-theme .dot{color:var(--green)}
.site-theme .benefit h3,.site-theme [data-copy=processor] .benefit h3{font-weight:700;line-height:1.2;color:var(--night)}
.site-theme .benefit p{font-weight:400;color:var(--muted)}
.site-theme [data-copy=power] .benefit:last-child h3{color:var(--green)}
.site-theme .chapter-name,.site-theme .counter,.site-theme .clock{color:var(--muted)}
.site-theme .chapters button[aria-current=true] .chapter-name{color:var(--night);font-weight:700}
.site-theme .chapters button:hover .chapter-name{color:var(--night)}
.site-theme .controls button{color:var(--night)}.site-theme .controls button:hover{color:var(--green)}
@container(max-width:760px){.site-theme .eyebrow{font-size:15px}.site-theme .chapter-copy h2{letter-spacing:-.01em;line-height:1.08}.site-theme .benefit h3{font-size:18px}.site-theme .benefit p{font-size:16px}}
/* ui=min: no chapter label, counter, pause, clock or next (the chapter bar stays; click the video to pause); copy moves up into the label's place */
.ui-min .eyebrow,.ui-min .counter,.ui-min #toggle,.ui-min .clock,.ui-min #next{display:none}
.ui-min .chapter-copy h2{top:22.87037%}.ui-min .benefit{top:calc(var(--y) - 4.814815%)}
.ui-min .picture video{cursor:pointer}
/* theme=site chapter bar: readable names and thicker progress bars; on phones 3 x 2 so all six fit */
.site-theme .chapters{width:46%;height:56px;top:calc(92.314815% - 28px)}
.site-theme .track{top:16px;width:86%;height:4px;border-radius:2px;background:#dfe4e1}
.site-theme .chapters button:hover .track{height:5px}
.site-theme .fill{border-radius:2px}
.site-theme .chapter-name{top:30px;font-size:clamp(11px,1.05cqw,15px)}
@container(max-width:760px){
 .site-theme .chapters{grid-template-columns:repeat(3,1fr);width:88%;height:auto;row-gap:4px;top:auto;margin:8px 6% 0}
 .site-theme .chapters button{min-height:48px}
 .site-theme .track{top:12px;width:90%}.site-theme .chapter-name{top:24px;font-size:14px}
}