/* ===== Brand palette ===== */
:root {
  --brand-navy:#00395C;
  --brand-navy-600:#003455;
  --brand-navy-700:#002F50;
  --brand-sky:#7FB9E7;
  --brand-ice:#F2F7FB;

  --bg:#FAFCFE;
  --surface:#FFFFFF;
  --text:#17212B;
  --muted:#64748B;
  --line:#E6EFF7;

  --radius:16px;
  --radius-lg:22px;
  --shadow:0 8px 24px rgba(0,57,92,0.08);
  --shadow-sm:0 2px 10px rgba(0,57,92,0.06);
  --container:1120px;

  /* spacing */
  --pad-x: clamp(16px, 4vw, 24px);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:
    radial-gradient(1000px 600px at 50% -240px, #EAF3FA 10%, transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--pad-x)}
.section{padding: clamp(56px, 8vw, 88px) 0}
.section-title{font-size: clamp(20px, 2.4vw, 24px); font-weight:700; color:var(--brand-navy-700); margin:0 0 18px}

/* ===== Header ===== */
.site-header{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:1000;
  backdrop-filter:saturate(1.1) blur(6px);
}
.site-header .container{ padding-left: var(--pad-x); padding-right: var(--pad-x); }

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  min-height:68px; gap:16px;
  padding:12px 0; /* vertical only */
}

/* Reset link styles for the clickable brand */
.brand,
.brand:link,
.brand:visited {
  color: var(--brand-navy-700);
  text-decoration: none;
}
.brand:hover .brand-name { color: var(--brand-navy); }
.brand .brand-name { color: var(--brand-navy-700); }
.brand .brand-tag  { color: var(--muted); }

/* Brand block */
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand-logo{width:36px; height:36px}
.brand-logo.sm{width:20px; height:20px}
.brand-logo.big{width:56px; height:56px}
.brand-text{display:flex; flex-direction:column; line-height:1.05; min-width:0}
.brand-name{font-weight:800; color:var(--brand-navy-700); letter-spacing:-0.01em; font-size: clamp(16px, 2.6vw, 20px)}
.brand-tag{font-size:12px; color:var(--muted); white-space:nowrap}

/* Primary nav */
.main-nav{display:flex; align-items:center; gap:18px}
.main-nav a{
  color:var(--muted); text-decoration:none; position:relative; padding:8px 0;
  font-weight:600; line-height:1;
}
.main-nav a:hover{color:var(--brand-navy-700)}
.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:linear-gradient(90deg,var(--brand-navy),transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .18s ease;
}
.main-nav a:hover::after{transform:scaleX(1)}

/* Hamburger toggle */
.nav-toggle{
  display:none !important; /* force hide by default (desktop) */
  background:transparent; border:0; line-height:1; padding:6px 10px; cursor:pointer;
}
@media (max-width: 820px){
  .nav-toggle{
    display:inline-flex !important;
    align-items:center; justify-content:center;
    font-size:24px;
    border:1px solid var(--line);
    border-radius:10px;
    height:36px; width:36px;
  }
  .main-nav{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    background:#fff; border-top:1px solid var(--line);
    box-shadow:0 12px 24px rgba(0,0,0,.06);
    flex-direction:column;
  }
  .main-nav.open{ display:block; }
  .main-nav a{ display:block; padding:14px var(--pad-x); margin:0; border-bottom:1px solid #f2f2f2 }
}

/* Prevent header overlap on very narrow widths */
@media (max-width:420px){
  .header-inner{flex-wrap:wrap}
  .brand-text{min-width: 50%; overflow:hidden; text-overflow:ellipsis}
}

/* ===== Hero ===== */
.hero{
  padding: clamp(56px, 9vw, 96px) 0 clamp(36px, 6vw, 56px);
  background:linear-gradient(180deg,#FFFFFF 0%, #F6FAFE 55%, transparent 100%);
}
.grid-hero{display:grid; grid-template-columns: 1.2fr .8fr; gap:36px; align-items:start}
@media (max-width: 980px){ .grid-hero{grid-template-columns:1fr} }

.pill{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; color:var(--brand-navy);
  background:#EAF3FA; border:1px solid var(--line);
  padding:6px 10px; border-radius:999px; margin-bottom:14px;
}
.hero-title{
  font-size: clamp(28px, 6.4vw, 50px);
  line-height:1.2; margin:0 0 12px; font-weight:800; letter-spacing:-0.01em; color:var(--brand-navy-700);
}
.hero-title .accent{
  display:block; font-size: clamp(24px, 5.6vw, 50px); font-weight:800; color:#2563eb;
}
.lede{
  color:var(--muted);
  font-size: clamp(16px, 2.2vw, 18px);
  line-height:1.65; max-width:58ch; margin:14px 0 22px;
}

/* Waitlist form */
.waitlist{display:flex; gap:12px; margin:18px 0 10px}
.input-wrap{
  flex:1; display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:14px 16px; box-shadow:var(--shadow-sm);
}
.input-wrap:focus-within{border-color:var(--brand-navy); box-shadow:0 0 0 3px rgba(0,57,92,.10)}
.input-icon{font-size:16px; opacity:.7}
input[type="email"]{border:0; outline:0; background:transparent; width:100%; font-size:16px; color:var(--text)}
.btn{
  border:1px solid transparent; border-radius:14px; padding:13px 18px;
  font-weight:700; cursor:pointer; transition:.16s ease; box-shadow:var(--shadow-sm); touch-action:manipulation;
}
.btn-primary{background:var(--brand-navy); color:#fff}
.btn-primary:hover{background:var(--brand-navy-600)}
.btn-outline{background:transparent; color:var(--brand-navy); border-color:var(--brand-navy-600)}
.btn-outline:hover{background:#EAF3FA}

/* Mobile waitlist stacking */
@media (max-width: 640px){
  .waitlist{flex-direction:column; align-items:stretch}
  .waitlist input[type="email"]{font-size:18px; padding:16px 18px}
  .waitlist .btn{width:100%; font-size:18px; padding:16px 18px}
}

/* chips */
.chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--line); color:var(--muted);
  padding:8px 12px; border-radius:999px; box-shadow:var(--shadow-sm); font-size:13px;
}
.dot{width:10px; height:10px; border-radius:50%; display:inline-block}
.dot-green{background:#7FD3B7}
.dot-blue{background:#7FB9E7}
.dot-gray{background:#A6B3C2}

/* hero side card */
.hero-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:20px;
}
.card-head{font-weight:700; margin-bottom:12px; color:var(--brand-navy)}
.steps{margin:0 0 10px 18px; padding:0; color:var(--muted); line-height:1.8}
.card-foot{font-size:12px; color:var(--muted)}

/* ===== Tiles & grids ===== */
.grid{display:grid; gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1000px){ .grid-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:780px){ .grid-3,.grid-2,.grid-4{grid-template-columns:1fr} }

.tile{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm);
}
.tile h3{margin:0 0 8px; font-size:18px; color:var(--brand-navy-700)}
.tile p{margin:0; color:var(--muted); line-height:1.65}
.tile.simple{box-shadow:none}
.kicker{font-size:12px; color:var(--brand-sky); font-weight:700; letter-spacing:.04em; text-transform:uppercase}

/* ===== Section styling ===== */
#how{background:linear-gradient(180deg, var(--brand-ice), #FFFFFF)}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--line); background:#fff; padding:20px 0; margin-top: clamp(24px, 6vw, 48px)}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 0}
.footer-left{display:flex; align-items:center; gap:10px; color:var(--muted)}
.footer-links a{color:var(--muted); text-decoration:none; margin-left:16px}
.footer-links a:hover{color:var(--brand-navy-700)}

/* ===== Auth header bits (used by JS) ===== */
.auth-cta button{padding:10px 14px; border:0; border-radius:10px; background:#000; color:#fff; font-weight:600; cursor:pointer}
.auth-cta .profile{display:flex; align-items:center; gap:10px; position:relative}
.auth-cta .avatar{width:36px; height:36px; border-radius:50%; object-fit:cover; background:#eef1f5; cursor:pointer}
.auth-cta .chip{font-size:12px; padding:2px 8px; border-radius:999px; background:#eef2ff}
.auth-cta .menu{
  position:absolute; right:0; top:44px; background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.08); padding:8px; display:none; min-width:220px; z-index:1000;
}
.auth-cta .menu button{display:block; text-align:left; width:100%; padding:10px; border:0; background:#fff; cursor:pointer}
.auth-cta .menu button:hover{background:#f9fafb}

/* ===== Utilities ===== */
.visually-hidden{position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); overflow:hidden}

/* --- Pill nav styling --- */
.main-nav {
  display: flex;
  gap: 22px;
  align-items: center;
}

.main-nav .pill-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.035);
  color: var(--text, #4b5563);
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.06) inset,
    0 8px 20px rgba(0, 0, 0, 0.05);
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.main-nav .pill-link:hover {
  background: rgba(0, 0, 0, 0.07);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.08) inset,
    0 12px 28px rgba(0, 0, 0, 0.08);
}

.main-nav .pill-link:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

/* Make the Progress link stand out */
.main-nav .pill-cta {
  background: #0ea5e9;
  color: #fff;
  box-shadow: 0 12px 32px rgba(14, 165, 233, 0.35);
}

.main-nav .pill-cta:hover {
  background: #0284c7;
  box-shadow: 0 14px 36px rgba(2, 132, 199, 0.45);
  transform: translateY(-1px);
}