:root{--color-black:#000;--color-white:#fff;--color-downy:#75cdd6;--color-biscay:#183969;--color-midnight-blue:#1b2978;--color-catskill-white:#f1f6f8;--ease-in-out-quart:cubic-bezier(.77,0,.175,1);--ease-in-out-cubic:cubic-bezier(.645,.045,.355,1);--ease-in-out-quad:cubic-bezier(.455,.03,.515,.955);--ease-out-quart:cubic-bezier(.165,.84,.44,1);--ease-out-cubic:cubic-bezier(.215,.61,.355,1);--ease-out-quad:cubic-bezier(.25,.46,.45,.94);--ease-none:cubic-bezier(.25,.25,.75,.75);--font-f-twk-lausanne-250:"TWKLausanne-250";--font-f-twk-lausanne-200:"TWKLausanne-200";--font-f-neo-sans-pro-medium:"NeoSansPro-Medium";--font-s-heading-xl:44.8vw;--font-lh-heading-xl:44.8vw;--font-ls-heading-xl:-.005952381em;--font-s-heading-l:21.3333333333vw;--font-lh-heading-l:21.3333333333vw;--font-ls-heading-l:-.025em;--font-s-heading-m:16vw;--font-lh-heading-m:16vw;--font-ls-heading-m:-.0333333333em;--font-s-heading-s:13.3333333333vw;--font-lh-heading-s:13.3333333333vw;--font-ls-heading-s:-.04em;--font-s-body-xl:10.6666666667vw;--font-lh-body-xl:11.7333333333vw;--font-ls-body-xl:0em;--font-s-body-l:8.5333333333vw;--font-lh-body-l:9.6vw;--font-ls-body-l:0em;--font-s-body-m:6.9333333333vw;--font-lh-body-m:8.5333333333vw;--font-ls-body-m:0em;--font-s-body-r:5.3333333333vw;--font-lh-body-r:7.4666666667vw;--font-ls-body-r:0em;--font-s-body-s:4.2666666667vw;--font-lh-body-s:6.4vw;--font-ls-body-s:.03125em;--font-s-body-xs:3.7333333333vw;--font-lh-body-xs:5.3333333333vw;--font-ls-body-xs:.02em;--font-s-title-r:2.6666666667vw;--font-lh-title-r:4vw;--font-ls-title-r:.16em;--font-s-title-s:2.1333333333vw;--font-lh-title-s:3.7333333333vw;--font-ls-title-s:.15em;--font-s-m-heading-s:12.8vw;--font-lh-m-heading-s:12.8vw;--font-ls-m-heading-s:-.0229166667em;--font-s-m-body-m:6.4vw;--font-lh-m-body-m:7.4666666667vw;--font-ls-m-body-m:0em}@media (min-width:601px){:root{--font-s-heading-xl:11.6666666667vw;--font-lh-heading-xl:11.6666666667vw;--font-ls-heading-xl:-.005952381em;--font-s-heading-l:5.5555555556vw;--font-lh-heading-l:5.5555555556vw;--font-ls-heading-l:-.025em;--font-s-heading-m:4.1666666667vw;--font-lh-heading-m:4.1666666667vw;--font-ls-heading-m:-.0333333333em;--font-s-heading-s:3.4722222222vw;--font-lh-heading-s:3.4722222222vw;--font-ls-heading-s:-.04em;--font-s-body-xl:2.7777777778vw;--font-lh-body-xl:3.0555555556vw;--font-ls-body-xl:0em;--font-s-body-l:2.2222222222vw;--font-lh-body-l:2.5vw;--font-ls-body-l:0em;--font-s-body-m:1.8055555556vw;--font-lh-body-m:2.2222222222vw;--font-ls-body-m:0em;--font-s-body-r:1.3888888889vw;--font-lh-body-r:1.9444444444vw;--font-ls-body-r:0em;--font-s-body-s:1.1111111111vw;--font-lh-body-s:1.6666666667vw;--font-ls-body-s:.03125em;--font-s-body-xs:.9722222222vw;--font-lh-body-xs:1.3888888889vw;--font-ls-body-xs:.02em;--font-s-title-r:.6944444444vw;--font-lh-title-r:1.0416666667vw;--font-ls-title-r:.16em;--font-s-title-s:.5555555556vw;--font-lh-title-s:.9722222222vw;--font-ls-title-s:.15em;--font-s-m-heading-s:3.3333333333vw;--font-lh-m-heading-s:3.3333333333vw;--font-ls-m-heading-s:-.0229166667em;--font-s-m-body-m:1.6666666667vw;--font-lh-m-body-m:1.9444444444vw;--font-ls-m-body-m:0em}}*,:after,:before{box-sizing:border-box}*{-webkit-tap-highlight-color:transparent}ol,ul{list-style:none;padding:0}blockquote,body,dd,dl,figcaption,figure,h1,h2,h3,h4,input,li,ol,p,ul{margin:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-ms-overflow-style:none;overscroll-behavior:none;scroll-behavior:auto}body{margin:0;text-rendering:optimizeSpeed;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}a{color:inherit;text-decoration:none}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img,video{display:block;height:100%;-o-object-fit:contain;object-fit:contain;width:100%}img,svg{display:block;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}svg{overflow:visible}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;color:inherit;cursor:pointer;margin:0;outline:0;padding:0}li{line-height:0}@font-face{font-display:swap;font-family:NeoSansPro-Medium;font-style:normal;font-weight:400;src:url(/_nuxt/NeoSansPro-Medium.B9XxyJoC.woff2) format("woff2"),url(/_nuxt/NeoSansPro-Medium.D0r4ttUV.woff) format("woff")}@font-face{font-display:swap;font-family:TWKLausanne-250;font-style:normal;font-weight:400;src:url(/_nuxt/TWKLausanne-250.Dq0HLRo1.woff2) format("woff2"),url(/_nuxt/TWKLausanne-250.sKaKz6tU.woff) format("woff")}@font-face{font-display:swap;font-family:TWKLausanne-200;font-style:normal;font-weight:400;src:url(/_nuxt/TWKLausanne-200.DUfGGNya.woff2) format("woff2"),url(/_nuxt/TWKLausanne-200.WmyoSDnk.woff) format("woff")}body,html{inset:0;overflow:hidden;position:fixed}body{background:var(--color-biscay);font-family:var(--font-f-twk-lausanne-250);-webkit-user-select:none;-moz-user-select:none;user-select:none}section{position:relative}main{inset:0;position:fixed}.is-active,.is-exact-active{pointer-events:none}@keyframes blinker{80%{opacity:1}90%{opacity:0}to{opacity:1}}@keyframes wave{0%{transform:translate(0)}to{transform:translate(-50%)}}
/* ------------------------------------------------------- Appshare additions */
:root{
  --as-brand:#7892ff;
  --as-brand-soft:rgba(120,146,255,.16);
  --as-ink:#ffffff;
  --as-ink-2:rgba(255,255,255,.66);
  --as-hair:rgba(255,255,255,.18);
  --as-r:14px;
  --as-ease:cubic-bezier(.165,.84,.44,1);
}

/* the landing page pins the document; these pages have to scroll */
body.as-page,html:has(body.as-page){position:static;overflow:visible;height:auto}
body.as-page{margin:0;color:var(--as-ink);background:#0f2f42;
  font-family:var(--font-f-twk-lausanne-250);-webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body.as-page main{position:static;inset:auto}
body.as-page ::selection{background:var(--as-brand);color:#fff}

/* the sky, recreated in CSS so these pages need no WebGL context of their own */
.as-sky{position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(120% 120% at 82% 42%, #c6e9ec 0%, #8ccdd6 22%, #3d8ba1 52%, #164457 78%, #0d2a3b 100%);}
.as-sky:after{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 70% at 10% 8%, rgba(9,32,48,.72), transparent 62%);}

/* ------------------------------------------------------- nav */
.as-nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;
  gap:2.2vw;padding:calc(2.2vw + env(safe-area-inset-top,0px)) 2.6vw 2.2vw;
  font-family:var(--font-f-neo-sans-pro-medium);font-size:calc(var(--font-s-title-s)*1.22);
  letter-spacing:var(--font-ls-title-s);text-transform:uppercase;
  opacity:0;transition:opacity .8s var(--as-ease)}
.as-nav.is-ready{opacity:1}
.as-brand-link .as-logo{width:17px;height:17px;flex:none;margin-right:.9em;
  color:var(--as-brand);fill:currentColor;overflow:visible}
.as-nav .as-brand-link{color:var(--as-ink);text-decoration:none;letter-spacing:.3071428571em;
  margin-right:auto;text-indent:.2986111111em}
.as-nav .as-links{display:flex;align-items:center;gap:2.2vw}
.as-nav a{color:var(--as-ink-2);text-decoration:none;position:relative;
  transition:color .35s var(--as-ease)}
.as-nav a:hover,.as-nav a[aria-current=page]{color:var(--as-ink)}
.as-nav a:not(.as-brand-link):not(.as-nav-cta):after{content:"";position:absolute;left:0;right:0;bottom:-.5em;
  height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--as-ease)}
.as-nav a:not(.as-brand-link):not(.as-nav-cta):hover:after,
.as-nav a[aria-current=page]:not(.as-brand-link):not(.as-nav-cta):after{transform:scaleX(1)}
/* the CTA sits inside the frosted chip, so it must not lift out of it on hover -
   it brightens and picks up a ring instead of moving */
.as-nav-cta{color:#fff!important;background:var(--as-brand);border-radius:999px;
  padding:1.05em 1.9em;box-shadow:0 0 0 0 rgba(120,146,255,.5);
  transition:background .3s var(--as-ease),box-shadow .3s var(--as-ease)}
.as-nav-cta:hover,.as-nav-cta:focus-visible{background:#8ea6ff;
  box-shadow:0 0 0 .32em rgba(120,146,255,.26)}
.as-nav-cta:active{background:#6a86ff}

/* ------------------------------------------------------- mobile menu
   Above 768px none of this exists, so the desktop bar is untouched. */
.as-burger,.as-menu{display:none}
html.as-lock,html.as-lock body{overflow:hidden}

/* ------------------------------------------------------- layout */
.as-wrap{width:100%;max-width:none;padding:0 5.5vw;box-sizing:border-box}
.as-hero{min-height:82vh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:6vw;padding-top:18vh}
.as-eyebrow{font-family:var(--font-f-neo-sans-pro-medium);font-size:var(--font-s-title-s);
  letter-spacing:var(--font-ls-title-s);text-transform:uppercase;color:var(--as-ink-2);
  display:flex;align-items:center;gap:.9em;margin:0 0 1.6em}
.as-eyebrow:before{content:"";width:.45em;height:.45em;border-radius:50%;background:var(--as-brand);
  flex:none}
h1.as-h1{font-family:var(--font-f-twk-lausanne-200);font-weight:400;margin:0;
  font-size:var(--font-s-heading-l);line-height:var(--font-lh-heading-l);
  letter-spacing:var(--font-ls-heading-l);max-width:16ch}
h2.as-h2{font-family:var(--font-f-twk-lausanne-200);font-weight:400;margin:0 0 .5em;
  font-size:var(--font-s-heading-m);line-height:var(--font-lh-heading-m);
  letter-spacing:var(--font-ls-heading-m);max-width:18ch}
h3.as-h3{font-family:var(--font-f-twk-lausanne-250);font-weight:400;margin:0 0 .6em;
  font-size:var(--font-s-body-m);line-height:var(--font-lh-body-m);letter-spacing:0}
.as-lead{font-size:var(--font-s-body-r);line-height:var(--font-lh-body-r);
  color:var(--as-ink);max-width:46ch;margin:1.6em 0 0}
.as-p{font-size:var(--font-s-body-s);line-height:var(--font-lh-body-s);color:var(--as-ink-2);
  max-width:56ch;margin:0 0 1.1em}
.as-p strong{color:var(--as-ink);font-weight:400}

.as-section{padding:7vw 0;border-top:1px solid var(--as-hair)}
.as-section:first-of-type{border-top:0}
.as-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:4vw;align-items:start}

/* ------------------------------------------------------- steps */
.as-steps{list-style:none;margin:0;padding:0;counter-reset:s}
.as-steps li{counter-increment:s;display:grid;grid-template-columns:4.5em minmax(0,1fr);
  gap:2vw;padding:2.2vw 0;border-top:1px solid var(--as-hair)}
.as-steps li:first-child{border-top:0}
.as-steps li:before{content:"0" counter(s);font-family:var(--font-f-neo-sans-pro-medium);
  font-size:var(--font-s-title-s);letter-spacing:var(--font-ls-title-s);color:var(--as-brand)}

/* ------------------------------------------------------- cards */
.as-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1.4vw}
.as-card{border:1px solid var(--as-hair);border-radius:var(--as-r);padding:1.9vw;
  background:rgba(255,255,255,.045);backdrop-filter:blur(6px);
  transition:transform .55s var(--as-ease),background .55s var(--as-ease),border-color .55s var(--as-ease)}
.as-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.085);
  border-color:rgba(255,255,255,.34)}
.as-card .as-p{margin:0}

/* ------------------------------------------------------- app -> ticker rows */
.as-map{border-top:1px solid var(--as-hair)}
.as-map-row{display:grid;grid-template-columns:minmax(0,1fr) 7em minmax(0,2fr);gap:2vw;
  align-items:baseline;padding:1.5vw 0;border-bottom:1px solid var(--as-hair);
  transition:padding-left .5s var(--as-ease),color .5s var(--as-ease)}
.as-map-row:hover{padding-left:.9vw}
.as-map-app{font-size:var(--font-s-body-r);line-height:1.2}
.as-map-tkr{font-family:var(--font-f-neo-sans-pro-medium);font-size:var(--font-s-title-s);
  letter-spacing:var(--font-ls-title-s);color:var(--as-brand)}
.as-map-note{font-size:var(--font-s-body-xs);line-height:var(--font-lh-body-xs);color:var(--as-ink-2)}

/* ------------------------------------------------------- buttons */
.as-btn{display:inline-flex;align-items:center;gap:.7em;border-radius:999px;
  background:var(--as-brand);color:#fff;text-decoration:none;padding:1.05em 1.8em;
  font-family:var(--font-f-neo-sans-pro-medium);font-size:calc(var(--font-s-title-s)*1.22);
  letter-spacing:var(--font-ls-title-s);text-transform:uppercase;border:0;cursor:pointer;
  transition:transform .4s var(--as-ease),background .4s var(--as-ease)}
.as-btn:hover{transform:translateY(-2px);background:#6a86ff}
.as-btn.is-ghost{background:transparent;border:1px solid var(--as-hair);color:var(--as-ink)}
.as-btn.is-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.as-btn[aria-disabled=true]{background:rgba(255,255,255,.08);color:var(--as-ink-2);
  pointer-events:none}
.as-btn .as-dot{width:.45em;height:.45em;border-radius:50%;background:currentColor}
.as-btns{display:flex;flex-wrap:wrap;gap:.9em;margin-top:2.2em}

/* ------------------------------------------------------- store buttons */
.as-store{display:flex;flex-wrap:wrap;gap:1em}
.as-store a,.as-store .as-store-soon{display:flex;align-items:center;gap:.9em;text-decoration:none;color:var(--as-ink);
  border:1px solid var(--as-hair);border-radius:var(--as-r);padding:1.1em 1.5em;min-width:13rem;
  transition:border-color .45s var(--as-ease),background .45s var(--as-ease)}
.as-store .as-store-soon{cursor:default;opacity:.85}
.as-store a:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.as-store .as-store-sub{display:block;font-size:var(--font-s-body-xs);color:var(--as-ink-2)}
.as-store .as-store-main{display:block;font-size:var(--font-s-body-s)}
.as-store svg{width:1.6em;height:1.6em;flex:none;fill:currentColor}
.as-store-s{margin-top:1.6em;gap:.8em}
.as-store-s a,.as-store-s .as-store-soon{padding:.7em 1.1em}
.as-store-s svg{width:1.25em;height:1.25em}
/* the pair injected into the home page's own footer column, which is laid out by the
   mirrored site's stylesheet - so these size themselves rather than inherit from it */
.as-store-foot{margin-top:1.5em;flex-direction:column;align-items:flex-end;gap:.4em;width:100%}
.as-store-foot a{font-family:var(--font-f-twk-lausanne-250);text-transform:none;letter-spacing:0;
  line-height:1.15;white-space:nowrap;gap:.55em;padding:.45em .75em;border-radius:12px;
  border-color:rgba(255,255,255,.13);color:var(--as-ink-2);
  transition:color .3s var(--as-ease),border-color .3s var(--as-ease),background .3s var(--as-ease)}
.as-store-foot a:hover{color:var(--as-ink);border-color:rgba(255,255,255,.34)}
.as-store-foot svg{width:1.05em;height:1.05em;opacity:.8}
.as-store-foot a:hover svg{opacity:1}
.as-store-foot .as-store-main{font-size:.74rem}
.as-store-foot a{max-width:100%}
@media (max-width:767px){
  .as-store-foot{flex-direction:row;flex-wrap:wrap;align-items:flex-start;
    justify-content:flex-start;gap:.5em;margin-top:1.2em}}

/* ------------------------------------------------------- footer */
.as-foot{border-top:1px solid var(--as-hair);padding:5vw 0 3.5vw;margin-top:4vw}
.as-foot-top{display:flex;flex-wrap:wrap;gap:2vw;align-items:flex-end;justify-content:space-between}
.as-foot .as-payoff{font-family:var(--font-f-twk-lausanne-200);font-size:var(--font-s-heading-s);
  line-height:var(--font-lh-heading-s);letter-spacing:var(--font-ls-heading-s);max-width:14ch}
.as-foot-links{display:flex;flex-wrap:wrap;gap:1.6vw;margin:3.5vw 0 1.6vw;
  font-family:var(--font-f-neo-sans-pro-medium);font-size:var(--font-s-title-s);
  letter-spacing:var(--font-ls-title-s);text-transform:uppercase}
.as-foot-links a{color:var(--as-ink-2);text-decoration:none;transition:color .35s var(--as-ease)}
.as-foot-links a:hover{color:var(--as-ink)}
.as-copy{font-size:var(--font-s-body-xs);color:var(--as-ink-2)}


/* ------------------------------------------------------- fragments
   Not app screenshots. Each tile carries ONE piece of a real surface and is
   happy to be cropped by the edge that holds it. Numbers are board fixtures. */
.as-frag,.as-panel,.as-mini{box-sizing:border-box}
.as-frag *,.as-panel *,.as-mini *{box-sizing:border-box;line-height:1.25}
.as-chart{display:block;overflow:visible}

.as-frag{--f1:#8ea6ff;--f2:#5468d8;position:relative;width:14.5rem;min-height:17rem;
  border-radius:26px;padding:1.1rem 1.15rem 1.25rem;color:#fff;overflow:hidden;
  background:linear-gradient(158deg,var(--f1),var(--f2));
  box-shadow:0 26px 60px rgba(6,28,42,.32),inset 0 1px 0 rgba(255,255,255,.28);
  display:flex;flex-direction:column;margin:0}
.as-frag.is-tall{min-height:20.5rem}
.as-frag:before{content:"";position:absolute;inset:.55rem;border-radius:20px;
  border:1px solid rgba(255,255,255,.22);pointer-events:none}
.as-t-blue{--f1:#8ea6ff;--f2:#5468d8}
.as-t-meta{--f1:#4f8cf5;--f2:#0a49b8}
.as-t-googl{--f1:#6ea8fb;--f2:#2b62d6}
.as-t-spot{--f1:#4fd48a;--f2:#0f7a45}
.as-t-rddt{--f1:#ff8a5c;--f2:#d63b12}
.as-t-ink{--f1:#2f4a63;--f2:#122636}
.as-t-mist{--f1:#fbfdff;--f2:#c8d7ea;color:#12232f}
.as-t-mist .as-rows li{border-color:rgba(0,0,0,.1)}
.as-t-mist:before{border-color:rgba(0,0,0,.08)}
.as-chip{align-self:flex-start;font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;
  padding:.3rem .62rem;border-radius:999px;background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.3)}
.as-t-mist .as-chip{background:rgba(255,255,255,.7);border-color:rgba(0,0,0,.07)}
.as-frag-art{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.45rem;
  padding:.9rem 0 .2rem}
.as-frag-label{font-size:.82rem;opacity:.86;margin:0}
.as-big{display:block;font-family:var(--font-f-twk-lausanne-200);font-weight:400;
  font-size:1.9rem;letter-spacing:-.025em;line-height:1}
.as-sub{display:block;font-size:.72rem;opacity:.8}

/* the fanned arc - outer tiles deliberately run off both page edges */
.as-fan{position:relative;height:33rem;margin:2.5rem 0 4rem;isolation:isolate}
.as-fan-rail{display:contents}
.as-fan .as-frag{position:absolute;bottom:6.5rem;transform-origin:50% 120%}
.as-fan-pill{position:absolute;left:50%;bottom:2.4rem;transform:translateX(-50%);z-index:30;
  display:flex;align-items:center;gap:1.1rem;width:min(26rem,86vw);
  padding:.85rem 1rem .85rem 1.15rem;border-radius:18px;
  background:rgba(255,255,255,.62);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.55);box-shadow:0 20px 44px rgba(6,28,42,.26)}
.as-fan-pill strong{display:block;font-weight:400;font-size:.95rem;color:#12232f}
.as-fan-pill span{display:block;font-size:.8rem;color:rgba(18,35,47,.66)}
.as-fan-pill>div{flex:1;min-width:0}
.as-fan-go{flex:none;width:2.3rem;height:2.3rem;border-radius:50%;background:#fff;
  color:#12232f;display:grid;place-items:center;text-decoration:none;font-size:1.2rem;
  box-shadow:0 3px 10px rgba(6,28,42,.18);transition:transform .35s var(--as-ease)}
.as-fan-go:hover{transform:translateX(2px)}

/* ------------------------------------------------------- wide panels
   One panel per section, cropped by the bottom edge of its stage. */
.as-stage{padding:9vw 0 0;overflow:hidden}
.as-bleed{margin-top:3.4vw}
.as-panel{border-radius:26px 26px 0 0;padding:2.2vw 2.4vw 0;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.06));
  backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.3);border-bottom:0;
  box-shadow:0 -1px 0 rgba(255,255,255,.4) inset,0 30px 70px rgba(6,28,42,.3);
  margin-bottom:-3.2vw}
.as-panel-head{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2vw;
  padding-bottom:2vw;border-bottom:1px solid rgba(255,255,255,.2)}
.as-k{font-size:.76rem;opacity:.72;margin:0 0 .3rem}
.as-v{font-family:var(--font-f-twk-lausanne-200);font-weight:400;font-size:2.2rem;
  letter-spacing:-.025em;line-height:1;margin:0}
.as-v.is-s{font-size:1.25rem}
.as-v span{display:block;font-size:.72rem;opacity:.72;letter-spacing:0}
.as-d{font-size:.76rem;opacity:.8;margin:.35rem 0 0}
.as-d.is-up{color:#8ef0b4}
.as-d.is-down{color:#ffb2a6}
.as-plot{padding:2vw 0 .7vw}
.as-axis{display:flex;justify-content:space-between;font-size:.66rem;opacity:.6;
  letter-spacing:.08em;text-transform:uppercase;padding-top:.6rem}

.as-rows{list-style:none;margin:0;padding:0}
.as-rows li{display:grid;grid-template-columns:.6rem minmax(0,1fr) auto;gap:.6rem;
  align-items:center;padding:.5rem 0;border-top:1px solid rgba(255,255,255,.16);font-size:.82rem}
.as-rows.is-wide li{grid-template-columns:.6rem 5.5rem minmax(0,1fr) 5rem 4rem}
.as-rows li:first-child{border-top:0}
.as-rows.is-light li{border-color:rgba(0,0,0,.08)}
.as-dotc{width:.6rem;height:.6rem;border-radius:3px}
.as-rs{opacity:.62;font-size:.74rem}
.as-rv{text-align:right}
.as-rd{text-align:right;font-size:.76rem}
.as-rd.is-up{color:#1f9d55}
.as-rd.is-down{color:#d93a2b}
.as-panel .as-rd.is-up{color:#8ef0b4}
.as-panel .as-rd.is-down{color:#ffb2a6}

/* ------------------------------------------------------- two-up cards
   Heading on top, one cropped fragment anchored to the bottom edge. */
.as-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4vw}
.as-duo-card{border:1px solid var(--as-hair);border-radius:var(--as-r);overflow:hidden;
  padding:3.4vw 2.6vw 0;background:rgba(255,255,255,.06)}
.as-duo-art{margin:2.6vw auto -2.6vw;max-width:24rem}
.is-mid{text-align:center;margin-inline:auto}
p.as-lead.is-mid,p.as-p.is-mid{max-width:34rem}
.as-mini{background:rgba(255,255,255,.9);border-radius:20px 20px 0 0;padding:1.1rem 1.2rem;
  color:#1d1d1f;box-shadow:0 22px 50px rgba(6,28,42,.26)}
.as-mini .as-k{opacity:.55}
.as-mini .as-v{color:#1d1d1f}
.as-mini-row{display:flex;gap:1.1rem;align-items:center}
.as-mini-row .as-rows{flex:1}
.as-pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
  background:var(--as-brand);color:#fff;padding:.55rem 1.1rem;font-size:.8rem;border:0;
  margin-top:.7rem;width:100%}
.as-ico{width:2rem;height:2rem;border-radius:9px;display:grid;place-items:center;color:#fff;
  font-size:.66rem;letter-spacing:.02em;flex:none}
.as-note{font-size:var(--font-s-body-xs);line-height:var(--font-lh-body-xs);color:var(--as-ink-2);
  margin:1.4em 0 0}
.as-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:1.2vw;
  margin-top:2.4vw}
.as-stat{border:1px solid var(--as-hair);border-radius:var(--as-r);padding:1.4vw}
.as-stat strong{display:block;
  font-size:var(--font-s-heading-s);line-height:1.05;letter-spacing:-.03em;margin-bottom:.35em}
.as-stat span{font-size:var(--font-s-body-xs);color:var(--as-ink-2)}

/* ------------------------------------------------------- mirrored-site chrome
   The original header is dropped whole: its burger opened an overlay panel listing
   routes that no longer exist, its sound button played the ambient track, and its
   wordmark sat centred. One header for every page instead - name on the left, links
   on the right - so the two never disagree about where things sit.
   The header is white text over a page that scrolls from near-black to pure white,
   so a page-wide scrim cannot win at both ends. Instead each group of header text
   carries its own frosted dark chip and stays legible wherever it happens to sit. */
header.header,button.sound,.sound[data-v-d2060e09]{display:none!important}
.as-nav{padding-top:calc(1.6vw + env(safe-area-inset-top,0px));padding-bottom:1.6vw}
.as-nav .as-links,.as-nav .as-brand-link{background:rgba(8,26,40,.62);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;
  box-shadow:0 10px 30px rgba(6,24,38,.28)}
/* both chips are the same height: the links chip is sized by the CTA pill inside it,
   so the brand chip matches that pill's padding plus the chip's own .5em rim */
.as-nav .as-links{padding:.5em .5em .5em 1.6em}
.as-nav .as-brand-link{display:flex;align-items:center;padding:1.55em 1.9em}
.as-nav-cta{margin-left:.9em}
@media (max-width:767px){
  .as-nav .as-links{padding:.5em .5em .5em 1.1em}
  .as-nav .as-brand-link{padding:1.3em 1.35em}
  .as-nav-cta{margin-left:.5em}}

/* ------------------------------------------------------- page wipe
   The site's own 90-frame canvas transition, reused for real navigations. */
/* No fade on the way in: the first frame of the strip is already fully transparent,
   so fading the canvas as well only made the first third of the wipe look washed out
   and late. It fades only when it is being taken away early. */
.as-wipe{position:fixed;inset:0;z-index:999;pointer-events:none;
  opacity:0;visibility:hidden}
.as-wipe.is-on{opacity:1;visibility:visible}
.as-wipe.is-off{opacity:0;transition:opacity .3s linear}
@media (prefers-reduced-motion:reduce){.as-wipe{display:none}}

/* ------------------------------------------------------- smooth scroll
   The home page never scrolls natively - its runtime pins a layer and eases it
   towards the wheel. These pages scrolled natively, which is why they felt
   steppier than the home page next to it. Same idea here: the real scrollbar
   still drives the position, the content just catches up to it. Only switched
   on by script, so without JS the page is an ordinary scrolling document. */
html.as-smooth .as-scroll{position:fixed;top:0;left:0;right:0;z-index:1}
html.as-smooth .as-scroll-in{will-change:transform;backface-visibility:hidden}
.as-scroll-spacer{pointer-events:none;width:100%}

/* ------------------------------------------------------- reveal */
[data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .9s var(--as-ease),transform .9s var(--as-ease)}
[data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .as-card:hover,.as-btn:hover,.as-nav-cta:hover{transform:none}
}

/* tablet: the fan loses its outer pair rather than shrinking to nothing */
@media (max-width:1100px){
  .as-frag{width:12rem;min-height:15rem}
  .as-frag.is-tall{min-height:18rem}
  .as-fan{height:26rem}
  .as-rows.is-wide li{grid-template-columns:.6rem 4.6rem minmax(0,1fr) 4.2rem 3.4rem;font-size:.76rem}
}

/* ------------------------------------------------------- phone */
@media (max-width:767px){
  /* an arc does not fit 375px: the fragments become a swipeable rail */
  .as-fan{height:auto;margin:0;display:block;padding:0}
  .as-fan-rail{display:flex;gap:3.5vw;overflow-x:auto;padding:2vw 6vw 4vw;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .as-fan-rail::-webkit-scrollbar{display:none}
  .as-fan .as-frag{position:static;transform:none!important;flex:0 0 auto;
    width:60vw;min-height:15rem;scroll-snap-align:center;bottom:auto}
  .as-fan .as-frag.is-tall{min-height:15rem}
  /* out of the rail entirely, so the summary is on screen instead of 1700px to the right */
  .as-fan-pill{position:static;transform:none;left:auto;bottom:auto;
    width:auto;margin:0 6vw 2vw}
  .as-duo{grid-template-columns:1fr;gap:4vw}
  .as-duo-card{padding:8vw 6vw 0}
  .as-duo-art{margin:7vw auto -6vw}
  .as-stage{padding:16vw 0 0}
  .as-panel{padding:6vw 5vw 0;border-radius:20px 20px 0 0;margin-bottom:-8vw}
  .as-panel-head{grid-template-columns:1fr;gap:4vw}
  .as-rows.is-wide li{grid-template-columns:.6rem minmax(0,1fr) auto;font-size:.8rem}
  .as-rows.is-wide .as-rs,.as-rows.is-wide .as-rd{display:none}
  .as-stats{grid-template-columns:1fr;gap:4vw;margin-top:7vw}
  .as-stat{padding:5vw}
  .as-wrap{padding:0 6vw}
  /* The mirrored site sizes its two label styles in vw, which lands at 8px and 10px
     on a 375px phone - below the 11px floor iOS and Android both use. Everything
     else in the scale (body-xs 14px up) is already fine, so only these two change. */
  :root{--font-s-title-s:10.5px;--font-s-title-r:12px}
  /* Five labels and a CTA squeezed into a 375px row is what forced 8px type. A phone
     gets a real header instead: wordmark left, one button right, routes in a sheet. */
  .as-nav{gap:.75em;align-items:center;font-size:11px;letter-spacing:.08em;
    padding:calc(3.2vw + env(safe-area-inset-top,0px)) 4vw 3.2vw}
  .as-nav .as-links,.as-nav-landing .as-links{display:none}
  .as-nav .as-brand-link{display:flex;position:relative;z-index:2;margin-right:auto;
    padding:1.15em 1.45em;font-size:11px}

  .as-burger{display:flex;position:relative;z-index:2;flex:none;
    width:44px;height:44px;align-items:center;justify-content:center;padding:0;
    border-radius:999px;border:1px solid rgba(255,255,255,.16);
    background:rgba(8,26,40,.62);-webkit-backdrop-filter:blur(18px) saturate(1.25);
    backdrop-filter:blur(18px) saturate(1.25);box-shadow:0 10px 30px rgba(6,24,38,.28);
    cursor:pointer;-webkit-tap-highlight-color:transparent}
  .as-burger span{position:absolute;width:16px;height:1.5px;border-radius:2px;
    background:var(--as-ink);
    transition:transform .34s var(--as-ease),opacity .22s var(--as-ease)}
  .as-burger span:nth-child(1){transform:translateY(-3.5px)}
  .as-burger span:nth-child(2){transform:translateY(3.5px)}
  .as-nav.is-open .as-burger span:nth-child(1){transform:rotate(45deg)}
  .as-nav.is-open .as-burger span:nth-child(2){transform:rotate(-45deg)}

  .as-menu{display:flex;flex-direction:column;position:fixed;inset:0;z-index:1;
    padding:calc(env(safe-area-inset-top,0px) + 96px) 7vw
            calc(env(safe-area-inset-bottom,0px) + 8vw);
    background:rgba(6,22,35,.92);
    -webkit-backdrop-filter:blur(30px) saturate(1.35);backdrop-filter:blur(30px) saturate(1.35);
    overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transform:translateY(-.9em);
    transition:opacity .4s var(--as-ease),transform .4s var(--as-ease),visibility .4s}
  .as-nav.is-open .as-menu{opacity:1;visibility:visible;transform:none}

  .as-menu-list{list-style:none;margin:0;padding:0}
  .as-menu-list li{opacity:0;transform:translateY(.7em);
    transition:opacity .5s var(--as-ease),transform .5s var(--as-ease)}
  .as-nav.is-open .as-menu-list li{opacity:1;transform:none}
  .as-nav.is-open .as-menu-list li:nth-child(1){transition-delay:.08s}
  .as-nav.is-open .as-menu-list li:nth-child(2){transition-delay:.13s}
  .as-nav.is-open .as-menu-list li:nth-child(3){transition-delay:.18s}
  .as-nav.is-open .as-menu-list li:nth-child(4){transition-delay:.23s}
  .as-nav.is-open .as-menu-list li:nth-child(5){transition-delay:.28s}
  .as-menu-list a{display:flex;align-items:center;justify-content:space-between;gap:1em;
    padding:.72em 0;border-bottom:1px solid rgba(255,255,255,.1);
    font-family:var(--font-f-twk-lausanne-250);font-size:1.6rem;line-height:1.15;
    letter-spacing:-.015em;text-transform:none;color:var(--as-ink);text-decoration:none}
  .as-menu-list li:first-child a{border-top:1px solid rgba(255,255,255,.1)}
  .as-menu-list a:after{display:none}
  .as-menu-list a[aria-current=page],
  .as-menu-list a[aria-current=page] .as-menu-n{color:var(--as-brand)}
  .as-menu-n{font-family:var(--font-f-neo-sans-pro-medium);font-size:10px;
    letter-spacing:.16em;color:var(--as-ink-2);text-transform:uppercase}

  .as-menu-foot{margin-top:auto;padding-top:2.4em;opacity:0;transform:translateY(.7em);
    transition:opacity .5s var(--as-ease) .34s,transform .5s var(--as-ease) .34s}
  .as-nav.is-open .as-menu-foot{opacity:1;transform:none}
  .as-menu-cta{display:flex;align-items:center;justify-content:center;
    background:var(--as-brand);color:#fff;border-radius:999px;padding:1.25em 1.6em;
    font-family:var(--font-f-neo-sans-pro-medium);font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;text-decoration:none}
  .as-menu-note{margin:1.1em 0 0;text-align:center;font-size:12px;line-height:1.5;
    color:var(--as-ink-2);text-transform:none;letter-spacing:0}
  .as-nav-cta{margin-left:auto;padding:1.05em 1.5em}
  .as-hero{min-height:74vh;padding-top:26vh;padding-bottom:12vw}
  h1.as-h1{max-width:none}
  .as-section{padding:14vw 0}
  .as-split{grid-template-columns:1fr;gap:7vw}
  .as-steps li{grid-template-columns:1fr;gap:1.4vw;padding:6vw 0}
  .as-grid{grid-template-columns:1fr;gap:4vw}
  .as-card{padding:6vw}
  .as-map-row{grid-template-columns:minmax(0,1fr) 6em;gap:3vw;padding:5vw 0}
  .as-map-note{grid-column:1/-1}
  .as-foot{padding:12vw 0 10vw}
  .as-foot-links{gap:4vw;margin:9vw 0 5vw}
}

/* ------------------------------------------------------- landing-page hero */
/* the 3D wordmark that used to sit in the middle of the hero is gone, so the headline
   owns the stage: wider column, left aligned, and a good deal bigger */
.heading[data-v-e086a7c9] > div{white-space:nowrap}
@media (min-width:768px){
  .column[data-v-e086a7c9]:first-child{grid-column:2/11;text-align:left;padding-right:0;
    padding-top:32vh;padding-top:calc(var(--vh, 1vh)*32)}
  .heading[data-v-e086a7c9]{font-size:calc(var(--font-s-heading-l)*1.24);
    line-height:.97;letter-spacing:-.032em;margin-bottom:1.6vw}
  .paragraph[data-v-e086a7c9]{font-size:var(--font-s-body-s);line-height:var(--font-lh-body-s)}
}
@media (max-width:767px){
  /* the three headline lines are set nowrap, so the size has to be the one that keeps
     the longest of them ("stocks you own") inside the column. At *1.12 it rendered
     344px wide in a 315px column on a 375px phone and the last word was cut off. */
  .heading[data-v-e086a7c9]{font-size:calc(var(--font-s-m-heading-s)*0.96);line-height:1.04}
}