/* ─────────────────────────────────────────────────────────────────
   splash.css — the logged-out marketing splash, embedded as #screen-login.
   ALL selectors are scoped under .hh-splash so nothing leaks into the rest
   of the app (or gets clobbered by global app CSS). Tokens are local.
   ───────────────────────────────────────────────────────────────── */
.hh-splash{
  --aqua:#00D2A6; --aqua-bright:#19E8C2;
  --blue:#147EFB; --blue-bright:#3E97FF;
  --navy:#0A1B2E; --navy-2:#0D2236; --navy-3:#112B43;
  --ink:#fff; --muted:rgba(255,255,255,.62); --faint:rgba(255,255,255,.40);
  --line:rgba(255,255,255,.10);
  --grad:linear-gradient(118deg,#00D2A6 0%,#147EFB 78%);
  --display:'Montserrat',system-ui,sans-serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  position:relative; min-height:100vh;
  font-family:var(--body); color:var(--ink); background:var(--navy);
  line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.hh-splash *{box-sizing:border-box}
.hh-splash::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1100px 620px at 50% -22%, rgba(20,126,251,.14), transparent 60%),
    radial-gradient(760px 520px at 96% 8%, rgba(0,210,166,.10), transparent 58%),
    radial-gradient(820px 600px at 4% 120%, rgba(0,210,166,.05), transparent 60%);
}
.hh-splash .wrap{max-width:1120px; margin:0 auto; padding:0 24px; position:relative; z-index:1}
.hh-splash .grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}

/* mark + wordmark */
.hh-splash .mark{height:30px; width:auto; display:block}
.hh-splash .word{font-family:var(--display); font-weight:800; letter-spacing:-.02em; color:#fff}
.hh-splash .word b{color:var(--blue-bright); font-weight:800}

/* nav */
.hh-splash .nav{position:sticky; top:0; z-index:20; backdrop-filter:blur(10px); background:rgba(10,27,46,.72); border-bottom:1px solid var(--line)}
.hh-splash .nav-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.hh-splash .brand{display:flex; align-items:center; gap:11px; text-decoration:none; cursor:pointer}
.hh-splash .brand .word{font-size:21px}
.hh-splash .nav-right{display:flex; align-items:center; gap:14px}
.hh-splash .nav-login{color:var(--muted); text-decoration:none; font-weight:600; font-size:14px; cursor:pointer}
.hh-splash .nav-login:hover{color:#fff}

.hh-splash .btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-weight:700; border-radius:999px; text-decoration:none; cursor:pointer; border:0; transition:transform .15s, box-shadow .15s, border-color .15s}
.hh-splash .btn svg{width:18px; height:18px}
.hh-splash .btn-primary{background:var(--grad); color:#fff; padding:13px 22px; box-shadow:0 6px 22px rgba(20,126,251,.34)}
.hh-splash .btn-primary:hover{transform:translateY(-1px); box-shadow:0 10px 28px rgba(20,126,251,.42)}
.hh-splash .btn-sm{padding:9px 17px; font-size:14px}
.hh-splash .btn-ghost{background:transparent; color:#fff; border:1.5px solid var(--line); padding:12px 20px}
.hh-splash .btn-ghost:hover{border-color:var(--blue-bright); color:var(--blue-bright)}

/* hero */
.hh-splash .hero{padding:64px 0 76px}
.hh-splash .hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:54px; align-items:center}
.hh-splash .kicker{font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--aqua-bright); display:inline-block; margin-bottom:20px}
.hh-splash .tagq{font-family:var(--display); font-weight:700; font-size:19px; color:var(--muted); margin-bottom:8px}
.hh-splash h1{font-family:var(--display); font-weight:800; letter-spacing:-.025em; line-height:1.02; font-size:clamp(40px,6.4vw,68px)}
.hh-splash .lead{font-size:18px; color:var(--muted); max-width:30rem; margin-top:22px}
.hh-splash .lead b{color:#fff; font-weight:600}
.hh-splash .hero-cta{display:flex; gap:13px; margin-top:30px; flex-wrap:wrap}
.hh-splash .micro{margin-top:18px; font-family:var(--mono); font-size:12px; color:var(--faint); letter-spacing:.02em}

/* sign-in card — now wraps the real Clerk widget (#clerk-signin) */
.hh-splash .signin{background:linear-gradient(180deg, rgba(17,43,67,.9), rgba(13,34,54,.9)); border:1px solid var(--line); border-radius:18px; padding:26px 24px; box-shadow:0 24px 60px rgba(0,0,0,.4); position:relative; overflow:hidden}
.hh-splash .signin::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad)}
.hh-splash .si-h{font-family:var(--display); font-weight:700; font-size:18px; margin-bottom:4px}
.hh-splash .si-sub{font-size:13.5px; color:var(--muted); margin-bottom:18px}
.hh-splash #clerk-signin{min-height:120px}

/* generic section */
.hh-splash section{position:relative; z-index:1}
.hh-splash .sec{padding:60px 0}
.hh-splash .eyebrow{font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--aqua-bright)}
.hh-splash h2{font-family:var(--display); font-weight:800; letter-spacing:-.02em; line-height:1.08; font-size:clamp(28px,4vw,42px); margin-top:12px}
.hh-splash .sec p.lead{margin-top:16px}

/* the debrief panel */
.hh-splash .turn{display:grid; grid-template-columns:.95fr 1.05fr; gap:48px; align-items:center}
.hh-splash .panel{background:linear-gradient(180deg,var(--navy-3),var(--navy-2)); border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:0 20px 50px rgba(0,0,0,.35)}
.hh-splash .panel-top{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.hh-splash .panel-top .av{width:30px; height:30px; border-radius:50%; background:var(--grad)}
.hh-splash .panel-top .meta{flex:1}
.hh-splash .panel-top .meta b{display:block; font-size:13.5px}
.hh-splash .panel-top .meta span{font-size:11px; color:var(--faint); font-family:var(--mono)}
.hh-splash .panel-top .chip{font-family:var(--mono); font-size:10px; font-weight:700; color:var(--aqua-bright); border:1px solid var(--line); border-radius:999px; padding:4px 9px}

/* pillars / steps */
.hh-splash .pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:38px}
.hh-splash .pill{background:linear-gradient(180deg,var(--navy-2),rgba(13,34,54,.5)); border:1px solid var(--line); border-radius:16px; padding:24px 22px; position:relative; overflow:hidden}
.hh-splash .pill::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--grad)}
.hh-splash .pill .pn{font-family:var(--display); font-weight:800; font-size:18px; margin-bottom:8px}
.hh-splash .pill p{font-size:14.5px; color:var(--muted)}
.hh-splash .pillars.steps{grid-template-columns:repeat(4,1fr)}
.hh-splash .pill .stepn{display:block; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--aqua-bright); margin-bottom:9px}

/* fleet */
.hh-splash .fleet{text-align:center}
.hh-splash .fleet .lead{margin:16px auto 0}
.hh-splash .feed{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:38px; text-align:left}
.hh-splash .fcard{background:var(--navy-2); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.hh-splash .fcard .strip{height:3px; background:var(--grad)}
.hh-splash .fc-body{padding:16px 16px 17px}
.hh-splash .fc-top{display:flex; align-items:center; gap:9px; margin-bottom:11px}
.hh-splash .fc-top .av{width:26px; height:26px; border-radius:50%}
.hh-splash .fc-top b{font-size:13px; display:block}
.hh-splash .fc-top span{font-size:10.5px; color:var(--faint); font-family:var(--mono)}
.hh-splash .fc-note{font-size:13px; color:var(--muted); line-height:1.5}
.hh-splash .fc-coach{margin-top:11px; font-size:12.5px; color:rgba(255,255,255,.78); border-top:1px solid var(--line); padding-top:11px}
.hh-splash .fc-coach .tag{font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--aqua-bright); display:inline-block; margin-right:7px}

/* honest */
.hh-splash .honest{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.hh-splash .honest ul{list-style:none; margin-top:20px; display:flex; flex-direction:column; gap:14px}
.hh-splash .honest li{display:flex; gap:13px; align-items:flex-start}
.hh-splash .honest .tick{flex:0 0 22px; height:22px; border-radius:7px; background:rgba(0,210,166,.14); border:1px solid rgba(0,210,166,.3); display:flex; align-items:center; justify-content:center}
.hh-splash .honest .tick svg{width:13px; height:13px; stroke:var(--aqua-bright)}
.hh-splash .honest li b{font-weight:600}
.hh-splash .honest li span{color:var(--muted); font-size:14.5px}

/* close */
.hh-splash .close{text-align:center; padding:80px 0 70px}
.hh-splash .close .mark{height:54px; margin:0 auto 22px}
.hh-splash .close .tagq{font-size:17px; margin-bottom:6px}
.hh-splash .close h2{font-size:clamp(30px,5vw,48px)}
.hh-splash .close .lead{margin:18px auto 0}
.hh-splash .close .hero-cta{justify-content:center}

.hh-splash .foot{border-top:1px solid var(--line); padding:26px 0; margin-top:20px}
.hh-splash .foot-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.hh-splash .foot-inner .word{font-size:18px}
.hh-splash .foot-base{color:var(--faint); font-size:12px; font-family:var(--mono); margin-top:14px}

/* Clerk widget — dark theme tweaks so the embedded card matches the surface.
   Clerk also gets variables via appearance in auth.js; these catch the chrome. */
.hh-splash .cl-card, .hh-splash .cl-rootBox, .hh-splash .cl-cardBox{background:transparent !important; box-shadow:none !important; width:100% !important}
.hh-splash .cl-footer{background:transparent !important}
/* Hide Clerk's own logo + header. The dashboard logo is a mark-on-white asset (CSS
   can't strip the white box) and the 'Sign in to HelmHero' title is our splash h1
   bleeding in (oversized). Our card already supplies the heading ("Have an invite?"),
   so drop Clerk's logo + title + subtitle entirely and keep just the form. */
.hh-splash .cl-logoBox, .hh-splash .cl-logoImage,
.hh-splash .cl-header, .hh-splash .cl-headerTitle, .hh-splash .cl-headerSubtitle{display:none !important}
/* Field label: light, and don't let it clip (the 'E' in 'Email address' was cut).
   The label rule alone wasn't enough — the first glyph was clipped by a Clerk wrapper
   above it. Belt + suspenders: stop every form wrapper clipping, and nudge the label
   text a couple px inward so the 'E' glyph clears whatever sits at its left edge. */
.hh-splash .cl-form, .hh-splash .cl-card, .hh-splash .cl-rootBox,
.hh-splash .cl-formField, .hh-splash .cl-formFieldRow{overflow:visible !important}
.hh-splash .cl-formFieldLabel{color:rgba(255,255,255,.82) !important; overflow:visible !important; text-indent:0 !important; margin-left:0 !important; padding-left:3px !important}
.hh-splash .cl-footerActionText, .hh-splash .cl-footerActionLink,
.hh-splash .cl-dividerText, .hh-splash .cl-formFieldInfoText,
.hh-splash .cl-identityPreviewText{color:rgba(255,255,255,.62) !important}

@media (max-width:860px){
  .hh-splash .hero-grid,.hh-splash .turn,.hh-splash .honest{grid-template-columns:1fr; gap:34px}
  .hh-splash .pillars,.hh-splash .pillars.steps{grid-template-columns:1fr}
  .hh-splash .feed{grid-template-columns:1fr}
  .hh-splash .signin{order:-1}
  .hh-splash .hero{padding:40px 0 50px}
  .hh-splash .nav-login{display:none}
}