/* ---------- Base (dark brand) ---------- */
body{ font-family: 'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; }
a{ transition: all .15s ease; }

.section-title{
  color:#f5f5f4; font-weight:800;
  font-size:clamp(1.5rem,1rem + 2vw,2.25rem);
  text-align:center;
}

/* hero */
.hero-wrap{ background:#0b0f0e; }
.hero-bg{
  background:
    linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.45)),
    url('backgroundphoto.jpg')
    center/cover no-repeat;
  filter:saturate(.9);
  height:260px;
}
@media (min-width:768px){ .hero-bg{ height:340px; } }

/* cards / inputs (dark UI) */
.card{ padding:1.25rem; border-radius:1rem; background:#1a1a1a;
  box-shadow:0 1px 2px rgba(0,0,0,.2); border:1px solid #262626; }
.card-title{ font-weight:700; font-size:1.125rem; color:#f1f5f9; }
.card-text{ margin-top:.35rem; color:#d1d5db; }

.input{ width:100%; margin-top:.25rem; padding:.5rem .75rem;
  border-radius:.75rem; border:1px solid #d6d3d1; background:#fff; outline:none; }
.input:focus{ box-shadow:0 0 0 3px rgba(5,150,105,.25); border-color:#059669; }

.table-dark th,.table-dark td{ color:#e5e7eb; }
.table-dark thead tr{ border-bottom:1px solid #262626; }
.table-dark tbody tr{ border-bottom:1px solid #262626; }

/* schedule pills */
.schedule-card{ background:#1a1a1a; border:1px solid #262626;
  border-radius:1.5rem; padding:1.5rem; }
.zone-pill{
  color:#111; font-weight:800; letter-spacing:.5px;
  display:inline-block; padding:.9rem 2.25rem; border-radius:2rem;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.18), 0 12px 24px rgba(0,0,0,.25);
  text-align:center;
}
.schedule-lines{ margin-top:1.25rem; color:#d1d5db; }
.schedule-lines hr{ border:0; border-top:1px solid #2a2a2a; margin:1rem 0; }
.schedule-lines .date{ color:#f8fafc; font-weight:700; }
.schedule-lines .muted{ color:#cbd5e1; }

/* ---------- Variables for the light panels ---------- */
:root{
  --bg:#2c2a29;     /* brand dark (unused here but handy) */
  --text:#0f1523;   /* dark text on light panels */
  --cream:#CFD0CA;  /* light panel bg */
  --light:#f4f1ee;
  --muted:#8b8a88;
  --evergreen:#255D4C;
  --espresso:#3b322c;
  --accent:#39a27a;
  --zone1:#4DA3FF; --zone2:#34C38F; --zone3:#FF9F43;
}

/* ---------- Layout helpers ---------- */
.section{ padding:64px 0; }

/* Match Tailwind's max-w-7xl (80rem) so widths line up with the rest of the page */
.container{
  max-width:80rem;       /* 1280px */
  margin:0 auto;
  padding-left:1rem;
  padding-right:1rem;
}

/* ---------- Full-bleed light panels (safe method) ---------- */
/* Keep the element normal width and paint a full-width background behind it */
.value, .comp{
  position:relative;
  isolation:isolate;     /* contain the pseudo background so it never overlaps other sections */
  color:var(--text);
}
.value::before, .comp::before{
  display: none;
}

/* Remove the section full-bleed background so the light panel does not
   expand beyond the normal content width. Keep the section itself
   visually neutral and style the inner cards directly. */
.value{ background: transparent; }
.value .cols > div{
  background: #f3f3ef; /* slightly lighter than --cream so cards stand out */
  border: 1px solid rgba(0,0,0,0.06);
  color: var(--text);
}

/* Constrain the visual panel to the page content and give it a soft
   translucent background so the section title remains readable on dark
   page backgrounds while the inner cards keep the cream color. */
.value .container{
  background: rgba(207,208,202,0.12);
  padding: 2.25rem 1rem;
  border-radius: 10px;
}

.value .cols > div{
  padding: 1.25rem;
}

.value{ background: transparent; }
.value h2{
  text-align:center; margin:0 0 24px;
  font-size:clamp(22px,3vw,30px); font-weight:800;
}
.value .cols{ display:grid; gap:28px; grid-template-columns:1fr; }
@media (min-width:980px){ .value .cols{ grid-template-columns:1fr 1fr; } }
.value h3{ margin:0 0 8px; font-size:clamp(18px,2.4vw,22px); font-weight:700; }
.value p{ line-height:1.6; margin:0 0 12px; }
.value blockquote{
  margin:12px 0; padding:12px 14px; border-left:4px solid var(--evergreen);
  background:#e7e8e3; color:#222; font-style:italic; border-radius:6px;
}

/* ----- COMPARISON / VALUE CALLOUTS ----- */
.comp{ background:#fff; }
.comp h2{ text-align:center; margin:0 0 10px; font-weight:800; }
.comp .sub{ text-align:center; color:#444; margin:0 0 22px; }
.comp .grid{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:980px){ .comp .grid{ grid-template-columns:1fr 1fr; } }

/* Light cards inside the comparison panel */
.comp .card{
  border:1px solid #e6e3df; border-radius:14px; padding:20px;
  box-shadow:0 10px 22px rgba(0,0,0,.06); background:#fff;
}
.comp .card h3{ margin:0 0 8px; font-weight:700; }
.comp .card ul{ margin:8px 0 0 18px; line-height:1.55; }
.comp .card .price-line{ font-weight:700; margin-top:8px; }

/* Small screens: reduce outer padding a touch */
@media (max-width:480px){ .section{ padding:44px 0; } }

/* Make the entire .value section a full-width light panel while keeping
   inner content constrained to the `.container` max-width. This creates a
   full-bleed soft gray background and keeps the cream cards inside it.
*/
.value{
  background: #c9cbc6; /* slightly darker panel so cards pop more */
  padding: 3rem 0;
}
.value .container{
  background: transparent;
  padding-top: 0;
  padding-bottom: 0;
}
.value .cols{
  gap: 28px;
  padding: 0 0.25rem;
}

/* Full-width background for CTA section */
#cta {
  position: relative;
  isolation: isolate;
}

#cta::before {
  content: "";
  position: absolute;
  inset: 0;                /* top:0; right:0; bottom:0; left:0; but simpler */
  left: 50%;
  width: 100vw;            /* real edge to edge */
  transform: translateX(-50%);
  background: inherit;     /* uses the same gradient already on the section */
  z-index: -1;             /* push behind content */
}