/* ----------  VARIABLES & RESET ---------- */
/* Palette centred on #F98D24 with complementary deep navy + cool greys */
:root{
  --primary:#F98D24;      /* Brand primary (orange) */
  --primary-600:#F98D24;  /* Gradient partner */
  --primary-700:#D9791F;  /* Hover shade */
  --primary-050:#FFF3E8;  /* Soft tint */

  --navy-900:#142033;     /* Headings / brand ink */
  --navy-800:#1F2E46;     /* Depth surfaces */

  --mint-500:#2FE0C4;     /* Accent for small highlights */

  --ink:#1F2D3D;          /* Body text */
  --muted:#5A6E7F;        /* Secondary text */
  --bg:#F6F8FB;           /* Page background */
  --surface:#FFFFFF;      /* Cards / header */
  --border:#E6EDF1;

  --radius:16px;
  --shadow:0 10px 26px rgba(20,32,51,.08);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:'Inter',sans-serif;
  font-size:18px;
  line-height:1.65;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

/* ----------  LAYOUT HELPERS ---------- */
.container{width:90%;max-width:1240px;margin-inline:auto}

/* Tighter default rhythm (was 50px; plus a mobile override that made it bigger) */
.section{padding:44px 0}
@media (max-width:768px){.section{padding:54px 0}}

/* ----------  HEADER & NAV ---------- */
header{
  background:var(--surface);
  box-shadow:var(--shadow);
  position:sticky;top:0;z-index:1000;
}

.nav-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:72px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:1.35rem;
  color:var(--navy-900);
}

.brand img{height:40px}

/* Burger menu (kept for when you re-enable it) */
#nav-toggle{display:none}

.burger{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}

.burger span{
  width:28px;height:3px;border-radius:2px;
  background:var(--navy-900);
  transition:.3s;
}

nav ul{
  display:flex;
  gap:42px;
  list-style:none;
  font-weight:500;
}

nav a{position:relative}

nav a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-6px;
  height:2px;
  width:0;
  background:var(--primary);
  transition:.3s ease;
}

nav a:hover::after{width:100%}

/* Mobile menu (kept for when you re-enable it) */
@media (max-width:930px){
  .burger{display:flex}
  nav ul{
    position:fixed;inset:0 0 0 40%;
    flex-direction:column;
    gap:28px;
    padding:110px 30px;
    background:var(--surface);
    transform:translateX(100%);
    transition:.4s cubic-bezier(.2,.7,.2,1);
    box-shadow:-20px 0 40px rgba(0,0,0,.08);
  }
  #nav-toggle:checked~nav ul{transform:translateX(0)}
  #nav-toggle:checked+label .line1{transform:rotate(45deg) translate(5px,6px)}
  #nav-toggle:checked+label .line2{opacity:0}
  #nav-toggle:checked+label .line3{transform:rotate(-45deg) translate(6px,-6px)}
}

/* ----------  BUTTONS ---------- */
.btn{
  display:inline-block;
  background:var(--primary);
  color:#fff;
  padding:14px 30px;
  border-radius:var(--radius);
  font-weight:600;
  transition:transform .12s ease, background .2s ease, box-shadow .2s ease;
  box-shadow:0 8px 20px rgba(249,141,36,.25);
}
.btn:hover{background:var(--primary-700);transform:translateY(-1px)}

/* Light button variant */
.btn-light{
  background:#fff;
  color:var(--primary);
  border:1px solid var(--border);
  box-shadow:none;
}
.btn-light:hover{
  background:var(--primary-050);
  color:var(--primary-700);
}

/* ----------  HERO (DEFAULT = TIGHT NOW) ---------- */
/* Your page uses <section class="hero"> so .hero must be tight by default */
.hero{
  background:
    radial-gradient(80rem 30rem at 10% -10%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(120deg,var(--primary),var(--primary-600));
  color:#fff;
  border-bottom-left-radius:44px;
  border-bottom-right-radius:44px;
  padding:64px 0 44px;     /* was 140px 0 110px */
  text-align:center;
}

.hero h1{
  font-size:2.55rem;       /* was 3.2rem */
  font-weight:700;
  letter-spacing:-0.02em;
  margin-bottom:12px;      /* was 24px */
}

.hero p{
  font-size:1.08rem;       /* was 1.25rem */
  max-width:680px;         /* was 740px */
  margin:0 auto;
  opacity:.95;
}

@media (max-width:600px){
  .hero{
    padding:56px 0 40px;
    border-bottom-left-radius:36px;
    border-bottom-right-radius:36px;
  }
  .hero h1{font-size:2.1rem}
  .hero p{font-size:1.02rem}
}

/* ----------  CARD GRIDS ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:34px;
  margin-top:42px; /* slightly tighter */
}

.card{
  background:var(--surface);
  padding:34px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform .25s;
}
.card:hover{transform:translateY(-6px)}
.card h3{
  font-size:1.25rem;
  color:var(--primary);
  margin-bottom:10px;
}

/* ----------  NEWSLETTER BANNER ---------- */
.newsletter{
  background:linear-gradient(90deg,var(--primary),var(--primary-700));
  color:#fff;
  border-radius:var(--radius);
  padding:64px 28px; /* tighter */
  text-align:center;
  box-shadow:0 14px 40px rgba(249,141,36,.25);
}

.newsletter p{
  max-width:680px;
  margin:0 auto 26px;
  font-size:1.1rem;
  opacity:.95;
}

.newsletter .btn{
  background:#fff;
  color:var(--primary);
}

.newsletter .btn:hover{
  background:var(--primary-050);
  color:var(--primary-700);
}

/* ----------  BENEFITS LIST ---------- */
.benefits{
  list-style:disc;
  padding-left:22px;
  margin-top:26px;
  display:grid;
  gap:12px;
}

/* ----------  APP COMING SOON ---------- */
#app{background:var(--bg)}

.app-grid{
  display:flex;
  align-items:center;
  gap:56px;          /* slightly tighter than 60 */
  flex-wrap:wrap;
}

/* KEEP THIS to preserve the GloveBoxPhoneApp image size behaviour */
.phone-col{
  flex:0 0 340px;
  max-width:100%;
  text-align:center;
}

.subhead{
  font-size:1.25rem; /* was 1.75rem */
  color:var(--navy-900);
  margin-top:14px;
  margin-bottom:6px;
  font-weight:700;
  letter-spacing:-0.01em;
}

.text-col{flex:1 1 360px}

.text-col h2{
  font-size:2.05rem;   /* was 2.3rem */
  color:var(--navy-900);
  margin-bottom:10px;  /* was 14px */
  letter-spacing:-0.01em;
}

.text-col h3{
  margin-bottom:14px;  /* was 18px */
  font-size:1.25rem;   /* slightly tighter */
  color:var(--navy-900);
}

.text-col p{
  font-size:1.08rem;   /* was 1.15rem */
  margin-bottom:22px;  /* was 34px */
  color:var(--ink);
}

.feature-list{
  display:grid;
  gap:16px;            /* was 22px */
  font-size:1.02rem;   /* was 1.05rem */
}

.feature-list b{
  display:block;
  color:var(--primary);
  margin-bottom:4px;
}

.store-badges{
  display:flex;
  justify-content:center;
  gap:14px;          /* was 18px */
  margin-top:14px;   /* was 26px */
}

.store-badges img{height:46px;width:auto}

@media (max-width:780px){
  .app-grid{
    flex-direction:column;
    text-align:center;
    gap:40px;
  }
  .text-col h2{font-size:1.9rem}
}

/* ----------  FOOTER ---------- */
footer{
  background:var(--surface);
  border-top:1px solid var(--border);
  text-align:center;
  font-size:.9rem;
  color:var(--muted);
  padding:28px 0;    /* was 38px */
  margin-top:64px;   /* was 120px */
}
footer a{color:inherit;font-weight:500}

/* ===== Banner (kept) ===== */
.top-banner{
  background: linear-gradient(90deg, var(--primary), var(--primary-700));
  color:#fff;
  box-shadow: 0 10px 26px rgba(249,141,36,.25);
}
.banner-wrap{
  display:flex;
  align-items:center;
  gap:16px;
  padding:12px 0;
}
.badge{
  display:inline-block;
  font-size:.8rem;
  font-weight:700;
  background: rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.35);
  padding:4px 10px;
  border-radius:9999px;
}
.top-banner p{
  flex:1;
  opacity:.95;
}
.btn-compact{
  padding:10px 16px;
  border-radius:12px;
  background:#fff;
  color:var(--primary);
  font-weight:600;
}
.btn-compact:hover{
  background:var(--primary-050);
  color:var(--primary-700);
}

/* emphasise CTA link in nav (kept) */
.cta-link{
  padding:10px 14px;
  background: var(--primary-050);
  border-radius: 12px;
  transition: background .2s ease, color .2s ease;
}
.cta-link:hover{
  background: var(--primary);
  color:#fff;
}

/* ===== Waitlist section (kept) ===== */
.waitlist{
  background: var(--primary-050);
  padding-top: 60px;
  padding-bottom: 74px;
}

.waitlist-wrap{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:40px;
  align-items:start;
}

.waitlist-copy h2{
  font-size:2.05rem;
  color:var(--navy-900);
  margin-bottom:10px;
}
.waitlist-copy p{
  margin-bottom:18px;
}
.waitlist .benefits{
  margin-top: 18px;
  grid-template-columns: 1fr;
}

/* form */
.waitlist-form{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}

.form-row{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:16px;
}
.form-row.checkbox{
  flex-direction:row;
  align-items:center;
  gap:12px;
  margin: 6px 0 18px;
}

.waitlist-form label{
  font-weight:600;
  color:var(--navy-900);
}

.waitlist-form .req{ color:var(--primary); }

.waitlist-form input[type="text"],
.waitlist-form input[type="email"]{
  appearance:none;
  border:1px solid var(--border);
  background:#fff;
  padding:14px 12px;
  border-radius:12px;
  font-size:1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.waitlist-form input:focus{
  outline:none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(249,141,36,.15);
}

.form-note{
  margin-top:12px;
  color:var(--muted);
  font-size:.9rem;
}

.form-msg{
  margin-top:12px;
  font-weight:600;
  white-space: pre-line;
}
.form-msg.success{ color:#0a7f4f; }
.form-msg.error{ color:#b00020; }

@media (max-width: 900px){
  .waitlist-wrap{
    grid-template-columns: 1fr;
  }
}