/* The base, as delivered: stage, masthead, hero copy, explore card, chat pill, the four screen modes. */

@font-face{font-family:"OF Display";src:url("assets/of-display-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"OF Display";src:url("assets/of-display-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:"OF Text";src:url("assets/of-text-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block;ascent-override:77%;descent-override:23%;line-gap-override:0%}
@font-face{font-family:"OF Text";src:url("assets/of-text-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:block;ascent-override:77%;descent-override:23%;line-gap-override:0%}

:root{
  --vh:100vh;
  --u:min(100vw / 1280, var(--vh) / 800);
  --navy:#1a3058;
  --blue:#1749a8;
  --card:rgba(22,71,164,.97);
  --glass:rgba(255,255,255,.75);
  --glass-weak:rgba(255,255,255,.40);
  --chip:#3e72dc;
  --ink:#04070e;
  --display:"OF Display","OF Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
}
@supports (height:100dvh){:root{--vh:100dvh}}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
html{background:#1f74d4;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#1f74d4;color:var(--navy);font-family:"OF Text","Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:calc(2 * var(--u)) solid #fff;outline-offset:calc(2 * var(--u))}

/* ---------- stage + background ---------- */
.stage{position:relative;width:100vw;height:100vh;height:100dvh;overflow:hidden;isolation:isolate}
.bg{position:absolute;inset:0;z-index:-1;background:#2a6fd0}
.bg video{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 50%}

/* ---------- masthead ---------- */
.masthead{--edge:30;--build-w:120;--demo-w:119;--gap-btn:12;--gap-link:24}
.nav-panel,.actions{display:contents}

/* the wordmark sits at left 43u / top 6.6u of the logo; it is kept in flow (40u mark + 3u) so the link box, and its focus ring, span the whole logo */
.logo{position:absolute;left:calc(16 * var(--u));top:calc(14 * var(--u));height:calc(48 * var(--u));display:flex;align-items:flex-start}
.logo svg{display:block;flex:none;width:calc(40 * var(--u));height:calc(48 * var(--u))}
.logo .wordmark{position:relative;top:calc(6.6 * var(--u));margin-left:calc(3 * var(--u));font-family:var(--display);font-weight:700;font-size:calc(31.4 * var(--u));line-height:1;letter-spacing:calc(.5 * var(--u));white-space:nowrap}

.menu{position:absolute;top:calc(16 * var(--u));left:calc(50% - 216 * var(--u));width:calc(426 * var(--u));height:calc(50 * var(--u));border-radius:calc(16 * var(--u));background:var(--glass);-webkit-backdrop-filter:blur(calc(12 * var(--u)));backdrop-filter:blur(calc(12 * var(--u)))}
.menu a{position:absolute;top:0;height:100%;display:flex;align-items:center;padding-top:calc(2 * var(--u));font-size:calc(17.4 * var(--u));letter-spacing:calc(.1 * var(--u));white-space:nowrap;color:var(--navy)}


.btn{display:flex;align-items:center;justify-content:center;height:calc(50.5 * var(--u));border-radius:calc(16 * var(--u));font-size:calc(17.4 * var(--u));padding-top:calc(2 * var(--u));white-space:nowrap}
.btn--glass{background:var(--glass-weak);border:calc(1 * var(--u)) solid rgba(26,48,88,.78);-webkit-backdrop-filter:blur(calc(10 * var(--u)));backdrop-filter:blur(calc(10 * var(--u)))}
.btn--solid{background:var(--blue);color:#fff}
.btn--light{background:rgba(255,255,255,.85);box-shadow:inset 0 0 0 calc(1 * var(--u)) rgba(26,48,88,.75);-webkit-backdrop-filter:blur(calc(10 * var(--u)));backdrop-filter:blur(calc(10 * var(--u)))}
.btn:hover,.burger:hover{filter:brightness(1.06)}

.top-demo{position:absolute;top:calc(16 * var(--u));width:calc(var(--demo-w) * var(--u));right:calc((var(--edge) + var(--build-w) + var(--gap-btn)) * var(--u))}
.top-build{position:absolute;top:calc(16 * var(--u));width:calc(var(--build-w) * var(--u));right:calc(var(--edge) * var(--u))}

.burger{display:none;margin:0;padding:0;border:0;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}

/* ---------- hero copy ---------- */
.copy{position:absolute;left:calc(72 * var(--u));bottom:calc(39.5 * var(--u))}
.copy h1{position:relative;left:calc(-2.2 * var(--u));margin:0;font-family:var(--display);font-weight:400;font-size:calc(60 * var(--u));line-height:calc(65 * var(--u));letter-spacing:calc(.72 * var(--u));white-space:nowrap}
.copy h1 .ln,.copy h1 .ln > span{display:block}
.copy p{position:relative;left:calc(-1.3 * var(--u));margin:calc(10 * var(--u)) 0 0;width:calc(320 * var(--u));font-size:calc(22.1 * var(--u));line-height:calc(24 * var(--u))}
.cta{position:relative;height:calc(50.5 * var(--u));margin-top:calc(19 * var(--u))}
.hero-demo{position:absolute;top:0;left:calc(-1.75 * var(--u));width:calc(119.5 * var(--u));height:calc(50.5 * var(--u))}
.hero-build{position:absolute;top:0;left:calc(125 * var(--u));width:calc(121 * var(--u));height:calc(50 * var(--u))}

/* ---------- explore card, arrow, chat ---------- */
.explore{position:absolute;right:calc(46 * var(--u));bottom:calc(40 * var(--u));display:block;width:calc(200 * var(--u));height:calc(160 * var(--u));border-radius:calc(16 * var(--u));background:var(--card);color:#fff;padding:calc(15.4 * var(--u)) 0 0 calc(15.6 * var(--u));font-size:calc(28.5 * var(--u));line-height:calc(34 * var(--u));letter-spacing:calc(.15 * var(--u))}
.arrow{position:absolute;right:calc(70.5 * var(--u));bottom:calc(53 * var(--u));width:calc(16 * var(--u));height:calc(30 * var(--u));pointer-events:none;transform-origin:50% 0}
.chat{position:absolute;right:calc(16.5 * var(--u));bottom:calc(11.5 * var(--u));display:block;width:calc(131.5 * var(--u));height:calc(46.5 * var(--u));border-radius:calc(23.25 * var(--u));background:linear-gradient(90deg,#0c0c12,#04070e 70%);color:#fff;font-size:calc(12.7 * var(--u));letter-spacing:calc(.1 * var(--u))}
.chat svg{position:absolute;left:calc(13.6 * var(--u));top:calc(50% - 12 * var(--u));width:calc(24 * var(--u));height:calc(24 * var(--u))}
.chat span{position:absolute;left:calc(47.7 * var(--u));top:0;height:100%;display:flex;align-items:center;justify-content:center;padding-top:.19em;line-height:1;white-space:nowrap}

/* ---------- compact header: tablet, short landscape, landscape phones, portrait phones ---------- */
@media (min-width:600px) and (max-width:1099.98px) and (min-height:500px),
       (orientation:landscape) and (max-width:1099.98px) and (max-height:499.98px),
       (orientation:landscape) and (max-width:599.98px),
       (max-width:599.98px) and (orientation:portrait){
  .stage{--head-top:max(calc(16 * var(--u)), var(--safe-t))}

  .burger{display:flex;align-items:center;justify-content:center;position:absolute;top:var(--head-top);right:calc(30 * var(--u));width:calc(50.5 * var(--u));height:calc(50.5 * var(--u));border-radius:calc(16 * var(--u));background:var(--glass);-webkit-backdrop-filter:blur(calc(12 * var(--u)));backdrop-filter:blur(calc(12 * var(--u)))}
  .burger svg{display:block;width:calc(20 * var(--u));height:calc(14 * var(--u));overflow:visible}
  .burger path{transform-origin:10px 7px;transition:transform .2s,opacity .2s}
  .burger[aria-expanded="true"] path{transform:scaleX(.82)}

  .top-build{right:calc(90.5 * var(--u));top:var(--head-top)}

  .nav-panel{display:flex;flex-direction:column;position:absolute;z-index:5;top:calc(var(--head-top) + 60.5 * var(--u));right:calc(30 * var(--u));width:calc(300 * var(--u));padding:calc(8 * var(--u));border-radius:calc(16 * var(--u));background:var(--glass);-webkit-backdrop-filter:blur(calc(12 * var(--u)));backdrop-filter:blur(calc(12 * var(--u)));opacity:0;visibility:hidden;transform:translateY(calc(-6 * var(--u)));transition:opacity .18s,transform .18s,visibility 0s .18s}
  .masthead[data-menu="open"] .nav-panel{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .18s,visibility 0s}

  .menu{position:static;display:flex;flex-direction:column;width:auto;height:auto;border-radius:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
  .menu a{position:static;display:flex;align-items:center;gap:calc(8 * var(--u));height:auto;min-height:max(calc(46 * var(--u)), 44px);padding:calc(2 * var(--u)) calc(14 * var(--u)) 0;border-radius:calc(10 * var(--u));font-size:max(calc(17.4 * var(--u)), 16px)}
  .menu a:hover{background:rgba(255,255,255,.55)}
  .top-demo{position:static;width:auto;margin-top:calc(6 * var(--u));min-height:44px}
}

/* ---------- tablet ---------- */
@media (min-width:600px) and (max-width:1099.98px) and (min-height:500px){
  :root{--u:min(1px, max(.86px, min(100vw / 1280, var(--vh) / 800), min(100vw / 900, var(--vh) / 1100)))}
  .bg video{object-position:62% 50%}
  .copy{left:max(28px, min(calc(72 * var(--u)), 6vw));bottom:calc(39.5 * var(--u) + var(--safe-b))}
  .explore{bottom:calc(40 * var(--u) + var(--safe-b))}
  .arrow{bottom:calc(53 * var(--u) + var(--safe-b))}
  .chat{bottom:calc(11.5 * var(--u) + var(--safe-b));font-size:max(calc(12.7 * var(--u)), 12px)}
}

/* ---------- mobile landscape ---------- */
@media (orientation:landscape) and (max-width:1099.98px) and (max-height:499.98px),
       (orientation:landscape) and (max-width:599.98px){
  :root{--u:min(1px, max(.72px, min(100vw / 780, var(--vh) / 520)))}
  .logo{left:calc(16 * var(--u) + var(--safe-l))}
  .burger{right:calc(30 * var(--u) + var(--safe-r));width:max(calc(50.5 * var(--u)), 40px);height:max(calc(50.5 * var(--u)), 40px)}
  .top-build{right:calc(40 * var(--u) + max(calc(50.5 * var(--u)), 40px) + var(--safe-r));min-height:40px}
  .nav-panel{display:grid;grid-template-columns:1fr 1fr;gap:calc(8 * var(--u));right:calc(30 * var(--u) + var(--safe-r));top:calc(var(--head-top) + max(calc(50.5 * var(--u)), 40px) + 10 * var(--u));width:calc(440 * var(--u))}
  .menu{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;column-gap:calc(8 * var(--u))}
  .copy{left:max(calc(24px + var(--safe-l)), min(calc(72 * var(--u)), 6vw));bottom:calc(39.5 * var(--u) + var(--safe-b))}
  .explore{right:calc(46 * var(--u) + var(--safe-r));bottom:calc(40 * var(--u) + var(--safe-b))}
  .arrow{right:calc(70.5 * var(--u) + var(--safe-r));bottom:calc(53 * var(--u) + var(--safe-b))}
  .chat{right:calc(16.5 * var(--u) + var(--safe-r));bottom:calc(11.5 * var(--u) + var(--safe-b));font-size:max(calc(12.7 * var(--u)), 12px)}
}

/* ---------- mobile portrait ---------- */
@media (max-width:599.98px) and (orientation:portrait){
  :root{--u:max(.82px, min(100vw / 390, var(--vh) / 760))}
  .bg video{object-position:66% 50%}
  .bg::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top, rgba(251,248,245,.94) 0, rgba(251,248,245,.82) 30%, transparent 52%)}

  .stage{--head-top:max(calc(14 * var(--u)), var(--safe-t))}
  .logo{left:calc(14 * var(--u));top:var(--head-top)}
  .burger{top:calc(var(--head-top) + 3 * var(--u));right:calc(14 * var(--u));width:max(calc(50.5 * var(--u)), 44px);height:max(calc(50.5 * var(--u)), 44px);border-radius:calc(14 * var(--u))}

  /* the whole actions group is the dropdown here; the inner panel dissolves into it */
  .actions{display:grid;grid-template-columns:1fr 1fr;gap:calc(8 * var(--u));position:absolute;z-index:5;left:calc(14 * var(--u));right:calc(14 * var(--u));top:calc(var(--head-top) + 57 * var(--u));padding:calc(8 * var(--u));border-radius:calc(16 * var(--u));background:var(--glass);-webkit-backdrop-filter:blur(calc(12 * var(--u)));backdrop-filter:blur(calc(12 * var(--u)));opacity:0;visibility:hidden;transform:translateY(calc(-6 * var(--u)));transition:opacity .18s,transform .18s,visibility 0s .18s}
  .masthead[data-menu="open"] .actions{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .18s,visibility 0s}
  .nav-panel,.masthead[data-menu="open"] .nav-panel{display:contents;visibility:inherit;transition:none}
  .menu{grid-column:1 / -1}
  .menu{display:flex}
  .top-demo,.top-build{position:static;width:auto;margin-top:0;min-height:44px;height:calc(50.5 * var(--u))}
  .top-build{border-radius:calc(16 * var(--u))}

  .copy{left:calc(20 * var(--u));right:calc(20 * var(--u));bottom:max(calc(80 * var(--u)), calc(var(--safe-b) + 70 * var(--u)))}
  .copy h1{left:calc(-2.6 * var(--u));font-size:calc(46 * var(--u));line-height:calc(50 * var(--u))}
  .copy p{margin-top:calc(8 * var(--u));width:calc(300 * var(--u));font-size:max(16px, calc(19 * var(--u)));line-height:calc(23 * var(--u))}
  .cta{margin-top:calc(20 * var(--u));height:calc(50 * var(--u))}
  .hero-demo{left:0;width:calc(171 * var(--u))}
  .hero-build{left:calc(179 * var(--u));width:calc(171 * var(--u))}

  .explore{right:calc(20 * var(--u));bottom:auto;top:calc(var(--head-top) + 70 * var(--u));width:calc(150 * var(--u));height:calc(104 * var(--u));padding:calc(12 * var(--u)) 0 0 calc(14 * var(--u));font-size:calc(20 * var(--u));line-height:calc(25 * var(--u))}
  .arrow{right:calc(38.5 * var(--u));bottom:auto;top:calc(var(--head-top) + 140 * var(--u));width:calc(12 * var(--u));height:calc(22.5 * var(--u))}
  .chat{right:calc(20 * var(--u));bottom:max(calc(18 * var(--u)), calc(var(--safe-b) + 8 * var(--u)));font-size:max(calc(12.7 * var(--u)), 12px)}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .btn,.burger{transition:filter .15s}
}
@media (prefers-reduced-motion:reduce){
  .nav-panel,.actions,.masthead[data-menu="open"] .nav-panel,.masthead[data-menu="open"] .actions,.burger path{transition:none}
}

/* ---------- entrance: initial states, held only while html.intro is on ---------- */
.intro [data-intro]{opacity:0}
.intro .copy h1 .ln{overflow:hidden}
@supports (overflow:clip){.intro .copy h1 .ln{overflow-x:visible;overflow-y:clip}}
.intro .copy h1 .ln > span{transform:translateY(105%)}