.browser-stencil{--browser-w:480px;--browser-chrome:clamp(30px, calc(var(--browser-w) * .07), 38px);--chrome-dot:clamp(8px, calc(var(--browser-chrome) * .28), 12px);--chrome-icon:clamp(10px, calc(var(--browser-chrome) * .38), 14px);--chrome-lock:clamp(8px, calc(var(--browser-chrome) * .28), 11px);--chrome-url:clamp(10px, calc(var(--browser-chrome) * .32), 12px);--chrome-pad:clamp(8px, calc(var(--browser-chrome) * .32), 12px);--chrome-gap:clamp(6px, calc(var(--browser-chrome) * .22), 10px);--content-ar:1.499;width:100%;max-width:min(100%, var(--site-max));min-width:0;max-height:100%;width:min(100cqw, calc((100cqh - var(--browser-chrome)) * var(--content-ar)));border-radius:clamp(8px, calc(var(--browser-w) * .022), 12px);box-shadow:0 0 0 1px #00000017, 0 calc(var(--browser-w) * .017) calc(var(--browser-w) * .067) #0000001a;background:#fff;flex-direction:column;flex-shrink:0;margin-inline:auto;display:flex;overflow:hidden}.browser-stencil__chrome{height:var(--browser-chrome);min-height:var(--browser-chrome);padding:0 var(--chrome-pad);align-items:center;column-gap:var(--chrome-gap);box-sizing:border-box;background:#e8e8e8;border-bottom:1px solid #d0d0d0;flex-shrink:0;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr) minmax(0,1fr);min-width:0;display:grid}.browser-stencil__leading{align-items:center;gap:var(--chrome-gap);z-index:1;grid-area:1/1;justify-self:start;min-width:0;display:flex}.browser-stencil__dots{align-items:center;gap:calc(var(--chrome-dot) * .5);flex-shrink:0;display:flex}.browser-stencil__dot{width:var(--chrome-dot);height:var(--chrome-dot);border-radius:50%;flex-shrink:0;display:block}.browser-stencil__dot--red{background:#ff5f57}.browser-stencil__dot--yellow{background:#febc2e}.browser-stencil__dot--green{background:#28c840}.browser-stencil__nav{align-items:center;gap:calc(var(--chrome-icon) * .2);flex-shrink:0;display:flex}.browser-stencil__nav-icon{width:var(--chrome-icon);height:var(--chrome-icon);color:#888}.browser-stencil__url-bar{height:calc(var(--browser-chrome) * .62);justify-content:center;place-self:center stretch;align-items:center;gap:calc(var(--chrome-lock) * .45);border-radius:calc(var(--browser-chrome) * .18);min-width:0;padding:0 calc(var(--browser-chrome) * .28);box-sizing:border-box;background:#fff;grid-area:1/2;display:flex}.browser-stencil__lock{width:var(--chrome-lock);height:calc(var(--chrome-lock) * 1.16);color:#888;flex-shrink:0}.browser-stencil__url-text{font-size:var(--chrome-url);color:#555;white-space:nowrap;text-overflow:ellipsis;text-align:center;min-width:0;line-height:1;overflow:hidden}.browser-stencil__url-balance{width:var(--chrome-lock);visibility:hidden;flex-shrink:0;height:1px}.browser-stencil--compact .browser-stencil__chrome{grid-template-columns:minmax(0,.7fr) minmax(0,2.6fr) minmax(0,.7fr)}.browser-stencil--compact .browser-stencil__nav,.browser-stencil--tiny .browser-stencil__url-bar{display:none}.browser-stencil--tiny .browser-stencil__chrome{grid-template-columns:1fr}.browser-stencil__screen{aspect-ratio:var(--content-ar);background:#fff;flex:0 auto;justify-content:center;align-items:center;width:100%;min-width:0;min-height:0;display:flex;position:relative;overflow:hidden}.browser-stencil__media{object-fit:contain;object-position:center;background:#fff;width:100%;height:100%;display:block}.browser-stencil--case-study,.browser-stencil--card{align-self:center}
:root{--phone-body:#1a1a1c;--phone-radius-w:11.7%;--phone-radius-h:5.27%;--phone-screen-radius-w:9.87%;--phone-screen-radius-h:4.32%;--phone-default-ar:.461826;--phone-body-scale:1.0458}.phone-stencil{--body-w:200px;width:fit-content;max-width:min(100%, var(--site-max));min-width:0;margin-inline:auto}.phone-stencil__body{--phone-bezel:calc(var(--body-w) * .0229);--phone-btn-w:max(calc(var(--body-w) * .00764), 1.5px);padding:var(--phone-bezel);border-radius:var(--phone-radius-w) / var(--phone-radius-h);background:var(--phone-body);box-shadow:inset 0 0 0 calc(var(--body-w) * .0025) #ffffff1a, 0 0 0 calc(var(--body-w) * .0013) #ffffff1a, 0 0 0 calc(var(--body-w) * .0025) #0000008c, 0 calc(var(--body-w) * .102) calc(var(--body-w) * .254) #0000005c, 0 calc(var(--body-w) * .025) calc(var(--body-w) * .076) #0000002e;position:relative}.phone-stencil--case-study{width:auto;max-width:min(100%, var(--site-max));max-height:100%}.phone-stencil--case-study .phone-stencil__body{flex-direction:column;justify-content:center;align-items:center;min-height:0;max-height:100%;display:flex}@media (min-width:901px){.phone-stencil--case-study .phone-stencil__screen{width:min(25rem, calc(100cqw / var(--phone-body-scale)), calc((100cqh / var(--phone-body-scale)) * var(--content-ar,var(--phone-default-ar))))}}@media (max-width:900px) and (orientation:portrait){.phone-stencil--case-study .phone-stencil__screen{width:min(240px, calc(100cqw / var(--phone-body-scale)), calc((100cqh / var(--phone-body-scale)) * var(--content-ar,var(--phone-default-ar))))}}.phone-stencil--card{width:auto;max-width:min(100%, var(--site-max));max-height:100%}@media (max-width:768px),(max-width:900px) and (orientation:landscape){.phone-stencil--card{width:100%;max-width:100%;max-height:none}.phone-stencil--card .phone-stencil__body{box-sizing:border-box;justify-content:flex-start;width:100%;max-width:100%;max-height:none}.phone-stencil--card .phone-stencil__screen{width:100%;max-width:100%;aspect-ratio:var(--content-ar,var(--phone-default-ar))}}@media (max-width:440px){.phone-stencil--card{width:100%}.phone-stencil--card .phone-stencil__body{max-width:100%}.phone-stencil--card .phone-stencil__screen{width:100%;max-width:100%}}.phone-stencil--card .phone-stencil__body{box-shadow:inset 0 0 0 calc(var(--body-w) * .0025) #ffffff1a, 0 0 0 calc(var(--body-w) * .0013) #ffffff1a, 0 0 0 calc(var(--body-w) * .0025) #0000008c, 0 calc(var(--body-w) * .061) calc(var(--body-w) * .153) #0000004d, 0 calc(var(--body-w) * .015) calc(var(--body-w) * .046) #00000029;flex-direction:column;align-items:center;min-height:0;display:flex}@media (min-width:769px) and (orientation:portrait),(min-width:901px){.phone-stencil--card .phone-stencil__body{justify-content:center;max-height:100%}}.phone-stencil--card .phone-stencil__btn{display:none}.phone-stencil__body:before{content:"";border-radius:var(--phone-radius-w) / var(--phone-radius-h);pointer-events:none;z-index:6;background:linear-gradient(148deg,#ffffff0d 0%,#ffffff04 28%,#0000 55%);position:absolute;inset:0}.phone-stencil__body:after{content:"";inset:var(--phone-bezel);border-radius:var(--phone-screen-radius-w) / var(--phone-screen-radius-h);box-shadow:inset 0 0 0 calc(var(--body-w) * .0013) #ffffff0f;pointer-events:none;z-index:4;position:absolute}.phone-stencil__screen{aspect-ratio:var(--content-ar,var(--phone-default-ar));width:100%;width:min(calc(100cqw / var(--phone-body-scale)), calc((100cqh / var(--phone-body-scale)) * var(--content-ar,var(--phone-default-ar))));border-radius:var(--phone-screen-radius-w) / var(--phone-screen-radius-h);background:#000;justify-content:center;align-items:center;min-width:0;max-width:100%;margin-inline:auto;display:flex;position:relative;overflow:hidden}.phone-stencil__screen-fill{background:#0a0a0a;width:100%;height:100%}.phone-stencil__island{width:32%;height:4.3%;box-shadow:inset 0 calc(var(--body-w) * .0025) calc(var(--body-w) * .005) #ffffff14;z-index:5;pointer-events:none;background:#000;border-radius:999px;position:absolute;top:1.4%;left:50%;transform:translate(-50%)}.phone-stencil__btn{border-radius:calc(var(--body-w) * .005);z-index:7;position:absolute}.phone-stencil__btn--action{left:calc(-1 * var(--phone-btn-w));width:var(--phone-btn-w);height:5%;box-shadow:calc(var(--body-w) * -.0025) 0 calc(var(--body-w) * .005) #0009;background:linear-gradient(90deg,#2a2a2c,#1e1e20,#2a2a2c);top:11%}.phone-stencil__btn--vol-up{left:calc(-1 * var(--phone-btn-w));width:var(--phone-btn-w);height:8%;box-shadow:calc(var(--body-w) * -.0025) 0 calc(var(--body-w) * .005) #0009;background:linear-gradient(90deg,#2a2a2c,#1e1e20,#2a2a2c);top:21%}.phone-stencil__btn--vol-down{left:calc(-1 * var(--phone-btn-w));width:var(--phone-btn-w);height:8%;box-shadow:calc(var(--body-w) * -.0025) 0 calc(var(--body-w) * .005) #0009;background:linear-gradient(90deg,#2a2a2c,#1e1e20,#2a2a2c);top:32%}.phone-stencil__btn--power{right:calc(-1 * var(--phone-btn-w));width:var(--phone-btn-w);height:13%;box-shadow:calc(var(--body-w) * .0025) 0 calc(var(--body-w) * .005) #0009;background:linear-gradient(270deg,#2a2a2c,#1e1e20,#2a2a2c);top:25%}.phone-stencil__media{object-fit:contain;object-position:center;background:#000;width:100%;height:100%;display:block}