/* Palette */
:root { --orange:#FF6600; --charcoal:#222; --bg:#FAFAFA; --peach:#FFF3E9; --white:#fff; }

body.lp { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#222; background:var(--bg); margin:0; }

.container { max-width:1100px; margin:0 auto; padding:0 16px; }
.section { padding:18px 0; }

/* NAV */
.nav { display:flex; align-items:center; background:var(--charcoal); color:#fff; border-bottom:4px solid var(--orange); border-radius:12px; padding:10px 16px; margin:10px auto; }
.nav .brand { display:flex; gap:10px; align-items:center; flex:1; }
.nav .brand .logo { width:28px; height:28px; background:var(--orange); border-radius:6px; display:inline-block; }
.nav .menu { display:flex; gap:8px; align-items:center; }
.nav .menu a { color:#fff; text-decoration:none; padding:8px 12px; border-bottom:2px solid transparent; border-radius:8px; }
.nav .menu a:hover, .nav .menu a.active { border-bottom-color:var(--orange); }

/* Mobile nav toggle */
#nav-toggle { display:none; background:transparent; border:none; color:#fff; font-size:22px; line-height:1; padding:6px; cursor:pointer; }

/* Cards */
.card { background:var(--white); border:2px solid var(--orange); border-radius:12px; padding:14px; box-shadow:0 6px 14px rgba(0,0,0,.05); }
.soft { background:var(--peach); }
.frame { border:2px solid var(--orange); border-radius:12px; overflow:hidden; }

/* Grid */
.grid-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }

/* Buttons */
.btn { display:inline-block; padding:12px 22px; border-radius:999px; border:2px solid var(--orange); text-decoration:none; font-weight:700; transition:all .2s; }
.btn-fill { background:var(--orange); color:#fff; }
.btn-fill:hover { filter:brightness(1.05); }
.btn-outline { background:#fff; color:#111; }
.btn-outline:hover { background:var(--peach); }

/* Disabled button state for hero livestream button */
.btn.btn-disabled { opacity:0.6; pointer-events:none; cursor:default; }

/* Headings */
h1 { font-size:40px; margin:0 0 8px; }
h2 { font-size:28px; margin:0 0 10px; }
h3 { font-size:18px; margin:0 0 8px; }
.accent { color:var(--orange); }

/* Forms */
label { display:block; margin-bottom:6px; }
.form-row { margin-bottom:12px; }
input[type="email"], input[type="text"], input[type="tel"], input[type="password"], textarea {
  width:100%;
  padding:10px 12px;
  border:1px solid #e6e6e6;
  border-radius:8px;
  font-size:15px;
  box-sizing:border-box;
  display:block;
}

button.btn { margin-top:10px; }
.hint { font-size:13px; color:#666; margin-bottom:6px }

/* Countdown timer */
.countdown, #countdown { font-size:14px; color:#666; margin-top:8px; }
#countdown-timer { font-weight:700; color:var(--orange); margin-left:6px; }
.tiny { font-size:12px; color:#666; }
.msg { margin-top:12px; font-size:14px; }

/* Footer */
.footer { background:var(--charcoal); color:#ddd; border-top:4px solid var(--orange); border-radius:12px; padding:18px; text-align:center; }
.footer a { color:#fff; text-decoration:underline; }

@media (max-width: 640px){
  h1 { font-size:34px; }
  h2 { font-size:26px; }
}

/* Mobile specific adjustments */
@media (max-width: 700px) {
  /* Slightly tighter container on phones */
  .container { padding: 0 12px; }

  .nav { position: relative; }

  /* Hide menu by default on small screens; toggle with button */
  .nav { flex-wrap:wrap; }
  /* Show menu as a horizontal row beneath the brand on mobile */
  .nav .menu { display: none; flex-direction: row; gap:10px; margin-top:10px; width:100%; justify-content:center; flex-wrap:wrap; }
  .nav.open .menu { display: flex; }

  /* Make menu area comfortable for tapping while horizontal */
  .nav.open { padding-bottom:12px; }
  .nav.open .menu { background: transparent; }
  .nav.open .menu a { display:inline-block; padding:10px 14px; border-radius:8px; }

  #nav-toggle { display: inline-block; }

  /* Slimmer nav and wrap menu items */
  .nav { padding: 10px 12px; margin:8px auto; border-radius:10px; }
  .nav .menu { display:flex; gap:8px; align-items:center; }
  .nav .menu a { padding:6px 8px; font-size:14px; }

  /* Cards should have comfortable padding for mobile */
  .card { padding:14px; border-radius:10px; }

  /* Make hero buttons stack & be easier to tap */
  .btnrow { display:flex; gap:10px; flex-wrap:wrap; }
  .btnrow .btn { flex:1 1 auto; min-width:120px; }

  /* Make form buttons full width and inputs larger touch targets */
  button.btn { display:block; width:100%; padding:12px 16px; font-size:16px; }
  input[type="email"], input[type="text"], textarea { padding:12px 14px; font-size:16px; }

  /* Tighten vertical rhythm inside cards */
  .card h3 { margin-bottom:10px; }
  .hint, .tiny { font-size:13px; }

  /* Ensure footer doesn't feel oversized */
  .footer { padding:14px; }
  /* Add spacing between stacked cards on mobile */
  .card { margin-bottom:14px; }
}