/* The base, as delivered: one centred screen, masthead, copy, the video field, the four screen modes. */

@font-face{font-family:"Google Sans";src:url("assets/google-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"Google Sans";src:url("assets/google-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:block}

:root{
  --vh:100vh;
  --u:min(var(--vh) / 800, max(100vw / 1280, min(100vw / 640, .75px)));
  --ink:#ffffff;
  --nav:rgba(238,242,255,.9);
  --subhead:rgba(226,233,255,.74);
  --link:rgba(212,236,255,.77);
  --hairline:rgba(255,255,255,.19);
  --button:#ffffff;
  --button-ink:#0a0a0a;
}
@supports (height:100dvh){:root{--vh:100dvh}}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
html{background:#01061a;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#01061a;color:var(--ink);font-family:"Google Sans","Product Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision;font-kerning:normal}
a{color:inherit;text-decoration:none}

:focus{outline:none}
.wordmark:focus-visible,.nav a:focus-visible,.discover:focus-visible{outline:2px solid #7fd4ff;outline-offset:4px}
.button:focus-visible{outline:2px solid #7fd4ff;outline-offset:3px}

/* ---------- page: one screen, a centered column ---------- */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;height:100vh;height:100dvh;overflow:hidden;background:#01061a linear-gradient(90deg,#00061a 0%,#01071b 22%,#01071a 45%,#010718 62%,#010614 80%,#020511 100%)}

/* ---------- masthead ---------- */
.masthead{position:relative;z-index:1;flex:none;display:flex;flex-direction:column;align-items:center;padding-top:calc(env(safe-area-inset-top,0px) + 40.5 * var(--u))}
.wordmark{display:block}
.wordmark svg{display:block;position:relative;left:calc(-.5 * var(--u));width:auto;height:max(calc(23.5 * var(--u)), 17px);fill:#fff}
.hairline{width:max(calc(284 * var(--u)), 252px);height:1px;margin-top:calc(24 * var(--u));background:var(--hairline)}
.nav{display:flex;justify-content:space-between;width:max(calc(284 * var(--u)), 252px);margin-top:calc(17.4 * var(--u));padding:0 calc(8.9 * var(--u));font-size:max(calc(15 * var(--u)), 13px);letter-spacing:-.033em}
.nav a{color:var(--nav);transition:color .2s}
.nav a:hover{color:#fff}

/* ---------- copy ---------- */
.gap{flex:82.98 1 0;min-height:calc(24 * var(--u))}
.copy{position:relative;z-index:1;flex:none;display:flex;flex-direction:column;align-items:center;text-align:center}
.copy h1{margin:0;font-weight:400;font-size:max(calc(68 * var(--u)), 34px);line-height:.9559;letter-spacing:-.0279em;white-space:nowrap}
.copy h1 .l,.copy h1 .li{display:block}
.copy h1 .l + .l{position:relative;left:calc(2.6 * var(--u));letter-spacing:-.0294em}
.sub{margin:calc(18.98 * var(--u)) 0 0;font-size:max(calc(21 * var(--u)), 15px);letter-spacing:-.005em;color:var(--subhead);text-wrap:balance}
.button{display:flex;align-items:center;justify-content:center;width:max(calc(216 * var(--u)), 196px);height:max(calc(46 * var(--u)), 44px);margin-top:calc(25.64 * var(--u));border-radius:max(calc(4.5 * var(--u)), 4px);background:var(--button);color:var(--button-ink);font-weight:500;font-size:max(calc(17 * var(--u)), 15px);letter-spacing:-.0265em;white-space:nowrap;transition:background-color .2s,box-shadow .2s}
.button:hover{background:#e8eef7;box-shadow:0 0 0 calc(4 * var(--u)) rgba(120,200,255,.12)}
.discover{display:flex;align-items:center;gap:.42em;margin-top:calc(20.55 * var(--u));font-size:max(calc(14.8 * var(--u)), 13px);letter-spacing:-.051em;color:var(--link);white-space:nowrap}
.discover svg{display:block;flex:none;width:.68em;height:.85em;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;transition:transform .2s}
.discover:hover svg{transform:translateY(.12em)}

/* ---------- background video ---------- */
.field{position:relative;z-index:0;flex:318.68 1 0;align-self:stretch;min-height:calc(160 * var(--u));container-type:size}
.field video{position:absolute;left:50%;top:calc(-36.4 * var(--u));transform:translate(-50%,-50.463%);width:auto;max-width:none;height:max(60vw, 105vh);pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 4%);mask-image:linear-gradient(to bottom,transparent 0,#000 4%)}
@supports (height:1cqh){
  .field video{height:max(100cqw * 971 / 1619, (100cqh + 36.4 * var(--u)) / .49537 + 1px)}
}

/* ---------- tablet ---------- */
@media (min-width:600px) and (max-width:1099.98px) and (min-height:541px){
  :root{--u:min(var(--vh) / 800, 1px, max(100vw / 1280, var(--vh) / 1190, .86px))}
  .field{max-height:48%}
  .nav a{padding:14px 8px;margin:-14px -8px}
  .discover{padding:12px 10px;margin:calc(20.55 * var(--u) - 12px) -10px -12px}
}

/* ---------- portrait phones ---------- */
@media (max-width:599.98px) and (orientation:portrait){
  :root{--u:min(var(--vh) / 800, 1px, max(100vw / 1280, var(--vh) / 1190, .86px))}
  @supports (height:100svh){:root{--vh:100svh}}
  .hero{padding-left:24px;padding-right:24px}
  .copy h1{font-size:max(26px, min(calc(68 * var(--u)), calc((100vw - 48px) / 8.235)))}
  .sub{font-size:max(16px, min(calc(21 * var(--u)), 3.345vw));line-height:1.25;overflow-wrap:break-word}
  .hairline,.nav{width:min(max(calc(284 * var(--u)), 252px), calc(100vw - 32px))}
  .field{max-height:48%}
  .nav a{padding:14px 8px;margin:-14px -8px}
  .discover{padding:12px 10px;margin:calc(20.55 * var(--u) - 12px) -10px -12px}
}

/* ---------- short landscape: desktop proportions, lower floors ---------- */
@media (orientation:landscape) and (max-height:539.98px){
  .wordmark svg{height:max(calc(23.5 * var(--u)), 13px)}
  .hairline,.nav{width:max(calc(284 * var(--u)), 210px)}
  .nav{font-size:max(calc(15 * var(--u)), 11px)}
  .copy h1{font-size:max(calc(68 * var(--u)), 28px)}
  .sub{font-size:max(calc(21 * var(--u)), 12px)}
  .button{width:max(calc(216 * var(--u)), 150px);height:max(calc(46 * var(--u)), 34px);font-size:max(calc(17 * var(--u)), 12.5px)}
  .discover{font-size:max(calc(14.8 * var(--u)), 11px)}
  .gap{min-height:calc(14 * var(--u))}
  .field{min-height:calc(120 * var(--u))}
}
@media (orientation:landscape) and (max-height:539.98px) and (pointer:coarse){
  .nav a{padding:14px 8px;margin:-14px -8px}
  .discover{padding:12px 10px;margin:calc(20.55 * var(--u) - 12px) -10px -12px}
}

/* ---------- very narrow, outside the portrait block ---------- */
@media (max-width:359px) and (orientation:landscape){
  .copy h1{font-size:30px;white-space:normal}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important}
}

/* ---------- entrance: initial states, held only while html.intro is on ---------- */
.intro .wordmark,.intro .nav a,.intro .sub,.intro .button,.intro .discover{opacity:0}
.intro .hairline{transform:scaleX(0)}
/* each line is masked at its baseline: line box .9559em, Google Sans ascent .966 / descent .286 */
.intro .copy h1 .l{-webkit-clip-path:inset(-.4em -1em .12em -1em);clip-path:inset(-.4em -1em .12em -1em)}
.intro .copy h1 .li{transform:translateY(104%)}