/* ============================================================
   THE GYZER . Phase 1 Tease (flattened static build)
   Self-contained. Design-system tokens + component CSS are
   inlined below verbatim from the GYZER design system so this
   page carries NO Claude Design runtime dependency.
   ============================================================ */

/* ---- Webfonts (GYZER design system: Barlow Condensed / Inter / IBM Plex Mono) ---- */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ============================================================
   DESIGN TOKENS  (inlined from _ds/tokens/*.css)
   ============================================================ */
:root {
  /* ---- colors.css ---- */
  --near-black:        #060E14;
  --gyzer-cyan:        #25EEF3;
  --gyzer-blue:        #0089D6;
  --gyzer-blue-deep:   #0162C6;
  --gyzer-navy:        #025C9D;
  --gyzer-steel:       #727272;

  --navy-1000: #04101F;
  --navy-900:  #061A30;
  --navy-800:  #0A2440;
  --navy-700:  #0E3158;
  --navy-600:  #123F72;
  --navy-500:  #18548F;

  --blue-100: #D6F3FF;
  --blue-200: #9FE2FB;
  --blue-300: #58C8F2;
  --blue-400: #1FA4E4;
  --blue-500: #0089D6;
  --blue-600: #0162C6;
  --blue-700: #044F9E;
  --blue-800: #073F7C;

  --steel-50:  #F4F7FA;
  --steel-100: #E4EAF0;
  --steel-200: #C7D1DB;
  --steel-300: #9BA7B4;
  --steel-400: #727C88;
  --steel-500: #586573;
  --steel-600: #3D4751;
  --steel-700: #2A333D;
  --steel-800: #1B232C;
  --steel-900: #11171E;

  --white: #FFFFFF;
  --black: #000000;

  --success: #2FBF87;
  --warning: #F2B43D;
  --danger:  #F0563E;
  --info:    var(--blue-400);

  --surface-abyss:    #03090F;
  --surface-page:     var(--near-black);
  --surface-raised:   var(--navy-800);
  --surface-card:     var(--navy-700);
  --surface-elevated: var(--navy-600);
  --surface-inverse:  var(--steel-50);

  --text-bright:  var(--white);
  --text-default: #D7E2EE;
  --text-muted:   #8FA3B8;
  --text-subtle:  #5E7286;
  --text-steel:   var(--gyzer-steel);
  --text-accent:  var(--blue-300);

  --text-on-light:       var(--steel-900);
  --text-on-light-muted: var(--steel-400);

  --accent:          var(--blue-500);
  --accent-hover:    var(--blue-400);
  --accent-press:    var(--blue-600);
  --accent-cyan:     var(--gyzer-cyan);
  --accent-contrast: var(--white);

  --border-hairline: rgba(159, 226, 251, 0.14);
  --border-soft:     rgba(159, 226, 251, 0.22);
  --border-strong:   rgba(159, 226, 251, 0.40);
  --border-on-light: var(--steel-200);

  --focus-ring: var(--gyzer-cyan);

  --grad-vortex:   linear-gradient(155deg, var(--gyzer-cyan) 0%, var(--gyzer-blue-deep) 100%);
  --grad-water:    linear-gradient(180deg, var(--navy-700) 0%, var(--navy-1000) 100%);
  --grad-electric: linear-gradient(120deg, var(--gyzer-cyan) 0%, var(--gyzer-blue) 45%, var(--gyzer-navy) 100%);
  --grad-steel:    linear-gradient(180deg, #9BA7B4 0%, #586573 100%);

  /* ---- typography.css ---- */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', 'SFMono-Regular', monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --fs-display:  clamp(3rem, 6vw, 5.5rem);
  --fs-h1:       clamp(2.25rem, 4vw, 3.5rem);
  --fs-h2:       clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3:       1.5rem;
  --fs-h4:       1.25rem;
  --fs-lg:       1.125rem;
  --fs-body:     1rem;
  --fs-sm:       0.875rem;
  --fs-xs:       0.75rem;
  --fs-eyebrow:  0.8125rem;

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-eyebrow: 0.22em;
  --ls-mono:    0.02em;

  --text-body-fmt: var(--fw-regular) var(--fs-body)/var(--lh-relaxed) var(--font-body);

  /* ---- spacing.css ---- */
  --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --space-10: 128px; --space-11: 192px;

  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px;
  --radius-xl: 26px; --radius-pill: 999px;

  --control-sm: 36px; --control-md: 44px; --control-lg: 54px;

  --border-w: 1px; --border-w-2: 2px;

  /* ---- effects.css ---- */
  --shadow-xs: 0 1px 2px rgba(2,12,28,.40);
  --shadow-sm: 0 2px 8px rgba(2,12,28,.45);
  --shadow-md: 0 8px 24px rgba(2,12,28,.50);
  --shadow-lg: 0 18px 48px rgba(2,12,28,.55);
  --shadow-xl: 0 32px 80px rgba(2,12,28,.60);

  --glow-blue: 0 0 0 1px rgba(31,164,228,.50), 0 0 24px rgba(0,137,214,.45);
  --glow-cyan: 0 0 24px rgba(37,238,243,.55);
  --glow-soft: 0 0 40px rgba(0,137,214,.25);
  --glow-inset: inset 0 1px 0 rgba(159,226,251,.18);

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  --hover-lift: translateY(-2px);
  --press-settle: translateY(1px);
}

/* ============================================================
   BASE / RESET  (from _ds/tokens/base.css, trimmed to what this page uses)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; margin: 0; height: 100%; background: var(--near-black); }
body {
  margin: 0; height: 100%;
  font: var(--text-body-fmt);
  color: var(--text-default);
  background: var(--near-black);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
p { margin: 0; }
::selection { background: rgba(37, 238, 243, 0.30); color: var(--white); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ============================================================
   DS COMPONENT: Button  (inlined from _ds_bundle.js gz-btn CSS)
   ============================================================ */
.gz-btn{
  --_bg: var(--accent); --_fg: var(--accent-contrast); --_bd: transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display); font-weight:var(--fw-semibold);
  letter-spacing:.01em; text-transform:uppercase; white-space:nowrap;
  border:var(--border-w-2) solid var(--_bd); border-radius:var(--radius-pill);
  background:var(--_bg); color:var(--_fg); cursor:pointer; text-decoration:none;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              filter var(--dur-fast) var(--ease-out);
}
.gz-btn--md{ height:var(--control-md); padding:0 26px; font-size:14px; }
.gz-btn--sm{ height:var(--control-sm); padding:0 18px; font-size:12.5px; }
.gz-btn--lg{ height:var(--control-lg); padding:0 34px; font-size:16px; }
.gz-btn--primary{ box-shadow:var(--glow-soft); }
.gz-btn--primary:hover{ transform:var(--hover-lift); box-shadow:var(--glow-blue); background:var(--accent-hover); }
.gz-btn--primary:active{ transform:var(--press-settle); background:var(--accent-press); box-shadow:var(--shadow-sm); }
.gz-btn:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; }
.gz-btn[disabled]{ opacity:.42; cursor:not-allowed; box-shadow:none; transform:none; filter:saturate(.6); }

/* ============================================================
   DS COMPONENT: Badge  (inlined from _ds_bundle.js gz-badge CSS)
   ============================================================ */
.gz-badge{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-body); font-weight:var(--fw-semibold);
  font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  padding:5px 12px; border-radius:var(--radius-pill);
  border:1px solid transparent; line-height:1; white-space:nowrap;
}
.gz-badge__dot{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.gz-badge--cyan{ background:rgba(37,238,243,.14); color:var(--accent-cyan); border-color:rgba(37,238,243,.34); }

/* ============================================================
   PAGE CSS  (inlined verbatim from Phase1Tease.dc.html <helmet>)
   ============================================================ */
.gz-tease-in { background: linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(226,244,255,.12) 55%, rgba(200,232,248,.10) 100%); backdrop-filter: blur(12px) saturate(1.15); -webkit-backdrop-filter: blur(12px) saturate(1.15); border: 1px solid rgba(255,255,255,.30); border-radius: var(--radius-pill); padding: 0 20px; height: var(--control-lg); color: #F2FAFF; font-family: var(--font-body); font-size: 15px; outline: none; min-width: 0; flex: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,.40), inset 0 -6px 14px rgba(2,40,72,.20), 0 4px 14px rgba(0,40,80,.25); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.gz-tease-in::placeholder { color: rgba(226,244,255,.60); }
.gz-tease-in:focus { border-color: rgba(159,226,251,.65); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 3px rgba(37,238,243,.18), var(--glow-soft); }
.gz-social a { color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.gz-social a:hover { color: var(--accent-cyan); }
.gz-glass.gz-btn--primary {
  background: linear-gradient(155deg, rgba(37,238,243,.42) 0%, rgba(0,137,214,.40) 42%, rgba(2,92,157,.48) 100%) !important;
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid rgba(159,226,251,.38);
  color: #EAF9FF !important;
  text-shadow: 0 1px 6px rgba(2,20,36,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -10px 18px rgba(2,50,90,.35), 0 6px 20px rgba(0,60,110,.40), var(--glow-soft);
  position: relative;
  overflow: hidden;
}
.gz-glass.gz-btn--primary::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.06) 46%, rgba(255,255,255,0) 60%);
}
.gz-glass.gz-btn--primary:hover {
  background: linear-gradient(155deg, rgba(37,238,243,.55) 0%, rgba(0,137,214,.50) 42%, rgba(2,92,157,.55) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -10px 18px rgba(2,50,90,.35), 0 8px 26px rgba(0,80,140,.5), var(--glow-blue) !important;
}

/* ============================================================
   LAYOUT  (from Phase1Tease.dc.html inline styles, flattened to classes)
   Scrim opacities .41 / .51 match the approved render
   (bgBrightness prop default 59: top = 1 - 59/100 = .41; bottom = .51).
   ============================================================ */
.gz-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px 96px;
  overflow: hidden;
  background-image:
    linear-gradient(rgba(6,14,20,.41), rgba(6,14,20,.51)),
    url(assets/backgrounds/wpBg-L1-dark.jpg);
  background-size: cover;
  background-position: center;
  font-family: var(--font-body);
}
.gz-hero__inner {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gz-logo {
  width: 480px;
  max-width: 92vw;
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.70)) drop-shadow(0 18px 50px rgba(0,0,0,.55));
}
.gz-lower {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.gz-anticipation {
  color: var(--text-default);
  font-size: 19px;
  line-height: 1.5;
  margin-top: 26px;
  max-width: 460px;
}
.gz-badge-wrap { margin-top: 24px; }

.gz-pledge {
  width: 100%;
  max-width: 460px;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.gz-pledge__note {
  color: var(--text-default);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  max-width: 400px;
}

.gz-capture { width: 100%; max-width: 440px; margin-top: 30px; }
.gz-capture__row { display: flex; gap: 10px; align-items: center; }
.gz-capture__success {
  color: var(--accent-cyan);
  font-size: 15px;
  line-height: 1.55;
  margin: 8px 0;
}
.gz-hp { position: absolute; left: -5000px; } /* Mailchimp honeypot */

.gz-social {
  display: flex;
  gap: 22px;
  margin-top: 30px;
  flex-wrap: wrap;
  justify-content: center;
}

.gz-footer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 24px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--text-subtle);
}
.gz-footer__sep { color: var(--border-strong); }

.is-hidden { display: none !important; }

/* ============================================================
   CONSENT BANNER
   ============================================================ */
.gz-consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: rgba(6, 14, 20, 0.92);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-top: 1px solid var(--border-soft);
  box-shadow: 0 -8px 30px rgba(0, 20, 40, 0.45);
}
.gz-consent__text {
  color: var(--text-default);
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.4;
  margin: 0;
}
.gz-consent__actions { display: flex; gap: 10px; align-items: center; }
.gz-consent__btn {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 13px;
  height: 40px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.gz-consent__btn--accept {
  background: linear-gradient(155deg, rgba(37,238,243,.42) 0%, rgba(0,137,214,.40) 42%, rgba(2,92,157,.48) 100%);
  border-color: rgba(159,226,251,.38);
  color: #EAF9FF;
  box-shadow: var(--glow-soft);
}
.gz-consent__btn--accept:hover { transform: var(--hover-lift); box-shadow: var(--glow-blue); }
.gz-consent__btn--decline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-muted);
}
.gz-consent__btn--decline:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); }

/* ---- Small screens: stack the email row and consent banner ---- */
@media (max-width: 480px) {
  .gz-capture__row { flex-direction: column; align-items: stretch; }
  .gz-capture__row .gz-btn { width: 100%; }
  .gz-consent { flex-direction: column; text-align: center; gap: 12px; }
}