/* SaveFounders shared design system — nav, footer, buttons, guarantee.
   Edit here once → every page updates on build. Uses :root vars defined per page. */

/* Type role ladder (shared) — same definitions as index.html; defined here too so
   pages that don't declare them still resolve the vars used below. */
:root{
  --fs-caption:clamp(13px,1vw,14px);
  --fs-overline:11px;
  --fs-btn:16px;
  --fs-btn-compact:clamp(14px,1.3vw,16px);
  --fs-nav:15px;
  --fs-logo:clamp(18px,calc(16.9437px + .2817vw),21px);
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-weight:600;font-size:var(--fs-btn);padding:15px 24px;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:transform .18s ease, box-shadow .25s ease, background .2s ease;white-space:nowrap}
.btn-primary{background:var(--flag);color:#fff;box-shadow:0 10px 22px -10px rgba(242,72,28,.7)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(242,72,28,.85);background:var(--flag-deep)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{transform:translateY(-2px);background:#fff;box-shadow:var(--shadow-sm)}
.btn .arr{transition:transform .2s ease}
.btn:hover .arr{transform:translateX(3px)}

/* ---------- nav (incl. opaque scrolled state + safe-area cover) ---------- */
nav{position:sticky;top:0;z-index:100;transition:background .3s ease, box-shadow .3s ease, backdrop-filter .3s}
nav.scrolled{background:var(--paper);box-shadow:0 1px 0 var(--line)}
nav.scrolled::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:300px;background:var(--paper)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:800;font-size:var(--fs-logo);letter-spacing:-.02em}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{font-size:var(--fs-nav);color:var(--ink-2);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:14px}
.menu-btn{display:none;background:none;border:none;cursor:pointer;font-size:24px;color:var(--ink)}
.menu-only{display:none}

/* ---------- guarantee badges ---------- */
.rguar{display:flex;align-items:center;gap:9px;margin-top:18px;font-family:var(--body);font-size:var(--fs-caption);font-weight:600;color:#FFD9C9;background:rgba(242,72,28,.14);border:1px solid rgba(242,72,28,.34);border-radius:12px;padding:10px 13px;line-height:1.35}
.rguar svg{flex:0 0 auto}
.hero-guar{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-family:var(--body);font-size:var(--fs-caption);font-weight:700;color:var(--flag-deep);background:var(--flag-soft);border:1px solid #FAD3C3;border-radius:11px;padding:8px 13px;line-height:1.3}
.hero-guar b{color:var(--flag-deep);font-weight:700}
.hero-guar svg{flex:0 0 auto}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:46px 0 60px;margin-top:40px}
.foot{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap}
.foot .tag{color:var(--ink-2);font-size:clamp(14px,calc(13.6479px + .0939vw),15px);margin-top:12px;max-width:280px}
.foot-cta{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.foot-links{display:flex;gap:40px;flex-wrap:wrap}
.foot-col h4{font-family:var(--mono);font-size:var(--fs-overline);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.foot-col a{display:block;font-size:var(--fs-nav);color:var(--ink-2);margin-bottom:9px;transition:color .2s}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.04em;color:var(--ink-3)}

/* ---------- nav + wrap responsive (mobile) ---------- */
@media(max-width:620px){
  .nav-links{display:none}
  .nav-fit{display:none}
  .menu-btn{display:block;font-size:25px}
  .logo{gap:9px}
  .logo img{width:25px!important;height:25px!important}
  .nav-cta{gap:7px}
  .nav-cta .btn-primary{font-size:var(--fs-btn-compact);padding:13px 21px}
  .nav-cta .btn-primary .arr{display:none}
  .nav-links.show{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--paper);padding:14px 22px 20px;gap:2px;box-shadow:var(--shadow);border-top:1px solid var(--line)}
  .nav-links.show a:not(.btn){width:100%;text-align:center;font-size:var(--fs-nav);font-weight:600;color:var(--ink);padding:13px 2px;border-bottom:1px solid var(--line)}
  .nav-links.show .menu-only{display:inline-flex;width:100%;justify-content:center;font-size:var(--fs-btn);color:var(--ink);padding:12px 17px;margin-top:14px}
}

/* small phones: keep the logo off the Get Started button */
@media(max-width:400px){
  .nav-cta .btn-primary{font-size:var(--fs-btn-compact);padding:13px 21px}
}
/* tiny phones: emergency squeeze so the pill clears the logo (matches index's 340 block, which this sheet otherwise overrides) */
@media(max-width:360px){
  .nav-cta .btn-primary{font-size:var(--fs-btn-compact);padding:10px 14px}
}