/* ============================================================================
   mist-teaser.css — the pre-launch countdown page.

   Owned entirely by sections/mist_teaser — the coming-soon page, rendered by
   home_page/default (5409646) while the teaser switch is on. Flip the switch
   and this file stops being requested.

   Deliberately holds one screen. There is no scroll narrative, no second act:
   the mark, one line, the clock, a date. Everything below the fold is a quiet
   footer, not content.
   ============================================================================ */

.mt-page {
  --mt-bg: #07080a;
  --mt-ink: #eeede8;
  --mt-dim: #9a9fa8;
  --mt-faint: #4b505a;
  --mt-line: rgba(255, 255, 255, .09);
  --mt-accent: var(--we-accent, #42b1ff);
  --mt-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
  --mt-mono: "WeHaas", "Neue Haas Display", "Helvetica Neue", Helvetica, Arial, sans-serif;

  position: relative;
  z-index: 1;
  /* box-sizing so the nav clearance lives INSIDE the 100svh box — without it
     the page was always exactly the clearance taller than the window and
     scrolled by ~79px on every device. */
  box-sizing: border-box;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* clear the fixed nav + its torn edge */
  padding-top: calc(69px - .558 * 24px + 24px);
  color: var(--mt-ink);
  font-family: var(--mt-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* The page owns the document background so overscroll on either end stays
   black instead of flashing white. */
html:has(.mt-page), body:has(.mt-page) { background: #07080a; }
body:has(.mt-page) { margin: 0; overflow-x: clip; }

/* The platform injects <fluid-cart-widget> and <fluid-lead-capture-widget>
   into every page. On a teaser page a cart button is nonsense — there is
   nothing to buy — so it goes. Lead capture stays: someone who lands on a
   countdown and wants to raise a hand is exactly the point. */
html.is-teaser-page fluid-cart-widget { display: none; }

/* --------------------------------------------------------------------------
   THE STAGE

   The Mist page's executive-desk photograph, blurred and pushed down so it
   reads as atmosphere rather than a picture you are meant to look at — but
   still readable AS a desk. Darkened too far and it is just black. Three
   real elements rather than pseudo-elements, because the blur+darken filter
   has to apply to the photo ONLY — filtering a parent would drag the scrim and
   the grain through it too and the grain would smear.
   -------------------------------------------------------------------------- */
.mt-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #07080a;
}
.mt-bg-photo,
.mt-bg-scrim,
.mt-bg-grain { position: absolute; inset: 0; }

.mt-bg-photo {
  /* inset past the edges and scaled: a blur samples transparent pixels outside
     its own box, which would otherwise leave a pale halo down all four sides. */
  inset: -6%;
  background-image: var(--mt-photo, none);
  background-size: cover;
  background-position: center 60%;   /* the laptop sits low in the frame */
  filter: blur(6px) saturate(.82) brightness(.74);
  transform: scale(1.04);
}

/* Pulls the middle down further still, where the type sits, and keeps the
   corners from going flat black. */
.mt-bg-scrim {
  background:
    radial-gradient(74% 60% at 50% 46%, rgba(5, 8, 14, .30), rgba(5, 8, 14, .68) 80%),
    linear-gradient(180deg, rgba(5, 8, 14, .42), rgba(5, 8, 14, .16) 32%, rgba(5, 8, 14, .52));
}

.mt-bg-grain {
  mix-blend-mode: overlay;
  opacity: .30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   TOP — the real site nav (see we-teaser-nav.css). It is position:fixed, so
   the stage below has to start beneath it rather than under it.
   -------------------------------------------------------------------------- */
.mt-page > .nav { z-index: 100; }

/* --------------------------------------------------------------------------
   CENTRE
   -------------------------------------------------------------------------- */
.mt-main {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(20px, 3vw, 36px) clamp(18px, 4vw, 52px) clamp(28px, 3.6vw, 48px);
  gap: clamp(10px, 1.3vw, 17px);
}

/* --------------------------------------------------------------------------
   The live particle mark.

   Measured against the running canvas, solid grains only (alpha>200), averaged
   over 8 frames (2026-07-28): the SOLID mark occupies x 0.276→0.569 and
   y 0.349→0.668 of the element's 1024×576 box. Two consequences:

     · It donates ~68% of its height as dead space. Negative margins reclaim
       that from LAYOUT without clipping anything — the canvas still paints in
       full, it just overlaps the empty air above and below, so the mist stays
       free to drift up past the top edge.

     · The solid core sits 7.76% LEFT of the element's centre; the shed mist
       drifts RIGHT of it. Centring on the solid core alone would let the trail
       pull the composition right, so translateX splits the difference and
       lands the dense mark just shy of the page's centre line with the mist
       trailing off it. (Measuring at alpha>12 instead reports the centre 6.75%
       RIGHT — that reading is the drift, not the mark. Don't trust it.)
   -------------------------------------------------------------------------- */
.mt-mark {
  --mw: clamp(300px, 32vw, 500px);
  display: flex;
  justify-content: center;
}
.mt-mark mist-logo {
  display: block;
  width: var(--mw);
  max-width: 92vw;
  margin-top: calc(var(--mw) * -.13);
  margin-bottom: calc(var(--mw) * -.16);
  transform: translateX(6%);
  pointer-events: auto;
  cursor: crosshair;
  filter: drop-shadow(0 14px 40px rgba(0, 0, 0, .6));
}

.mt-kick {
  font-family: "FLBold", "Arial Black", sans-serif;
  font-size: clamp(.82rem, 1.25vw, 1rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mt-accent);
  display: inline-block;
  transform: rotate(-.7deg);
}

/* The house large-header face (Neue Haas via WeHaas), at the same metrics as
   .display on the other pages — with ONE word set in the brand marker face and
   the accent blue. The two faces have different cap heights, so FLBold is
   nudged up in size and pulled back down on the baseline to sit level. */
.mt-h1 {
  margin: 0;
  font-family: var(--mt-mono);
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 1.0;
  letter-spacing: -.042em;
  color: #fff;
  text-shadow: 0 14px 50px rgba(0, 0, 0, .5);
  max-width: 18ch;
  text-wrap: balance;
}
.mt-h1 em {
  font-family: "FLBold", "Arial Black", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.1em;
  letter-spacing: -.01em;
  color: var(--mt-accent);
  display: inline-block;
  transform: translateY(.035em);
}

/* The three-beat deck. Each line is its own block on purpose — the house
   voice sets these as separate statements, not a paragraph. */
.mt-deck {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .3em;
  font-size: clamp(.98rem, 1.4vw, 1.14rem);
  font-weight: 450;
  line-height: 1.4;
  letter-spacing: -.005em;
  color: rgba(255, 255, 255, .66);
  max-width: min(92vw, 600px);
}
.mt-deck b { font-weight: 650; color: #fff; }

/* --------------------------------------------------------------------------
   THE CLOCK — on a torn paper tape.

   The side-tear masks are the theme's own --tv-l/--tv-r pair, lifted verbatim
   from fc-landing.css (where the brand slips use them), so the rag matches the
   rest of the site. The technique is a THREE-layer mask: left rag tile, right
   rag tile, and a solid block for everything between them. The tiles repeat
   down the y axis, so the tape can be any height.

   Stock is --we-tex-paper-white, the theme's plain paper. NOT we-fc-slip-print:
   that asset is a photographed UI slip with legible copy printed on it, which
   showed straight through the numerals.

   On cream stock the numerals flip to ink — white-on-paper would be unreadable.
   -------------------------------------------------------------------------- */
.mt-clock {
  --tv-r1:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%20300'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='48'%20height='300'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.052%200.02'%20numOctaves='3'%20seed='211'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='19'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-12,-4%2024,-4%2024,304%20-12,304'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  --tv-r2:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%20300'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='48'%20height='300'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.045%200.017'%20numOctaves='3'%20seed='223'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='20'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-12,-4%2024,-4%2024,304%20-12,304'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  --tv-r3:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%20300'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='48'%20height='300'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.05%200.025'%20numOctaves='3'%20seed='227'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='18'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-12,-4%2024,-4%2024,304%20-12,304'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  --tv-l1:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%20300'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='48'%20height='300'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.052%200.02'%20numOctaves='3'%20seed='251'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='19'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='24,-4%2060,-4%2060,304%2024,304'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  --tv-l2:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%20300'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='48'%20height='300'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.045%200.017'%20numOctaves='3'%20seed='263'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='20'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='24,-4%2060,-4%2060,304%2024,304'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  --tv-l3:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%20300'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='48'%20height='300'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.05%200.025'%20numOctaves='3'%20seed='267'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='18'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='24,-4%2060,-4%2060,304%2024,304'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  --amp: 26px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  margin-top: clamp(4px, 1vw, 12px);
  padding: clamp(10px, 1.4vw, 16px) calc(10px + var(--amp));
  rotate: -.55deg;

  background-color: #f2f0e8;
  background-image: var(--mt-tape, none);
  background-size: cover;
  background-position: center;

  -webkit-mask-image: var(--tv-l2), var(--tv-r1), linear-gradient(#000, #000);
          mask-image: var(--tv-l2), var(--tv-r1), linear-gradient(#000, #000);
  -webkit-mask-repeat: repeat-y, repeat-y, no-repeat;
          mask-repeat: repeat-y, repeat-y, no-repeat;
  -webkit-mask-size: 48px 300px, 48px 300px, calc(100% - 58px) 100%;
          mask-size: 48px 300px, 48px 300px, calc(100% - 58px) 100%;
  -webkit-mask-position: left top, right top, center;
          mask-position: left top, right top, center;

  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .55));
}
.mt-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, .6vw, 9px);
  padding: 0 clamp(12px, 2.4vw, 30px);
  border-left: 1px solid rgba(20, 21, 25, .16);
}
.mt-unit:first-child { border-left: 0; }
.mt-unit b {
  font-family: var(--mt-mono);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.1rem, 5.2vw, 4rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: #141519;
  min-width: 2ch;
  text-align: center;
}
.mt-unit span {
  font-family: "FLBold", "Arial Black", sans-serif;
  font-size: clamp(.6rem, .9vw, .76rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #3d4149;
}

.mt-when {
  font-family: var(--mt-mono);
  font-size: clamp(.74rem, 1.05vw, .86rem);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mt-dim);
  margin: 0;
}

/* --------------------------------------------------------------------------
   CTAs — the house button pair (primary + ghost).
   -------------------------------------------------------------------------- */
.mt-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.2vw, 14px);
  margin-top: clamp(6px, 1vw, 14px);
}
.mt-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--mt-mono);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.005em;
  text-decoration: none;
  transition: transform .2s cubic-bezier(.2, .8, .3, 1), background .2s, border-color .2s, color .2s;
}
.mt-btn svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.mt-btn--primary { background: var(--mt-accent); color: #05070c; border: 1px solid var(--mt-accent); }
.mt-btn--primary:hover { transform: translateY(-2px); background: #6cc4ff; border-color: #6cc4ff; }
.mt-btn--ghost { background: transparent; color: var(--mt-ink); border: 1px solid rgba(255, 255, 255, .22); }
.mt-btn--ghost:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .5); color: #fff; }



/* --------------------------------------------------------------------------
   T-0. If the clock runs out before the switch is flipped, the page says so
   instead of sitting on four zeroes. A safety net, not a substitute for
   flipping it.
   -------------------------------------------------------------------------- */
.mt-live { display: none; }
html.teaser-live .mt-clock,
html.teaser-live .mt-when { display: none; }
html.teaser-live .mt-live {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
  margin-top: clamp(8px, 1.6vw, 20px);
}
html.teaser-live .mt-live p {
  margin: 0;
  font-family: "FLBold", "Arial Black", sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Narrow
   -------------------------------------------------------------------------- */
/* Short windows (a 720-tall laptop, a landscape phone). The page is meant to
   hold one screen; rather than let it scroll, the stack tightens. */
@media (max-height: 840px) {
  .mt-mark { --mw: clamp(230px, 24vw, 340px); }
  .mt-main { gap: clamp(7px, .9vw, 12px); padding-top: clamp(12px, 1.6vw, 20px); padding-bottom: clamp(16px, 2vw, 26px); }
  .mt-h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
  .mt-deck { font-size: clamp(.92rem, 1.15vw, 1rem); }
  .mt-unit b { font-size: clamp(1.8rem, 3.9vw, 2.9rem); }
  .mt-clock { padding-block: clamp(8px, 1vw, 12px); }
  .mt-btn { padding: 11px 20px; }
}
@media (max-height: 680px) {
  .mt-mark { --mw: 200px; }
  .mt-h1 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
  .mt-unit b { font-size: 2.2rem; }
}

@media (max-width: 720px) {
  .mt-clock { --amp: 20px; }
  .mt-unit { padding: 0 clamp(9px, 3.4vw, 18px); }
  .mt-deck { font-size: 1rem; }
}
@media (max-width: 420px) {
  .mt-unit b { font-size: 2.1rem; }
  .mt-unit span { font-size: .58rem; letter-spacing: .1em; }
  .mt-btn { padding: 12px 20px; font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mt-bg::before { animation: none; }
  .mt-btn:hover { transform: none; }
}