/* ============================================================
   CurbMate - bin valet
   Brand colors sampled straight from the logo:
     cream       #FEF9EB
     deep green  #0E6C52
     light green #7CC76F
     orange      #FD673E
   ============================================================ */

:root {
  /* brand */
  --cream:        #FEF9EB;
  --cream-warm:   #F7EFD9;
  --cream-edge:   #EADFC4;
  --green-deep:   #0E6C52;
  --green-mid:    #0A5540;
  --green-light:  #7CC76F;
  --green-tint:   rgba(124, 199, 111, 0.18);
  --orange:       #FD673E;
  --orange-dark:  #E2502A;

  /* roles - light theme (default, matches the logo lockup) */
  --bg:           var(--cream);
  --surface:      #FFFFFF;
  --surface-alt:  var(--cream-warm);
  --border:       var(--cream-edge);
  --text:         #1C3A30;
  --text-soft:    #4A6A5D;
  --heading:      var(--green-deep);
  --accent:       var(--green-deep);
  --accent-soft:  var(--green-light);
  --on-accent:    var(--cream);
  --shadow:       0 6px 20px rgba(14, 108, 82, 0.10);
  --shadow-lift:  0 14px 32px rgba(14, 108, 82, 0.18);
  --header-bg:    var(--cream);
  --header-text:  var(--green-deep);
}

/* Dark theme - deep green night, cream type. Driven by the same
   radio buttons the original template used. */
html:has(#dark-mode:checked) {
  --bg:           #07201A;
  --surface:      #0D2E25;
  --surface-alt:  #123A2E;
  --border:       rgba(124, 199, 111, 0.28);
  --text:         #F2ECDC;
  --text-soft:    #B6CDBF;
  --heading:      var(--green-light);
  --accent:       var(--green-light);
  --accent-soft:  var(--green-light);
  --on-accent:    #07201A;
  --shadow:       0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-lift:  0 14px 32px rgba(0, 0, 0, 0.55);
  --header-bg:    #07201A;
  --header-text:  var(--cream);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
	font-family: "Nunito", Arial, Helvetica, sans-serif;
	line-height: 1.6;
	font-size: 1rem;
	padding: 0;
	margin: 0;
	background-color: var(--bg);
	color: var(--text);
	transition: background-color 0.35s ease, color 0.35s ease;
}

h1, h2, h3 {
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--heading);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* scroll offsets so anchors do not land under the fixed header */
section#about   { scroll-margin-top: calc(90px + var(--waitlist-h)); }
section#services { scroll-margin-top: calc(90px + var(--waitlist-h)); }
section#pricing { scroll-margin-top: calc(80px + var(--waitlist-h)); }
section#reviews { scroll-margin-top: calc(80px + var(--waitlist-h)); }
section#contact { scroll-margin-top: calc(80px + var(--waitlist-h)); }

#wrapper-container {
  padding: 5px 0 0;
}

ul {
	margin: 0;
	padding: 0;
}

/* ---------------- waitlist bar ----------------
   Pinned above the nav. The red is deliberately outside the brand palette -
   cream, green and orange are all already working elsewhere on the page, so
   none of them would read as "this one is time-limited". Dark enough to clear
   4.5:1 against white text.
   --waitlist-h is remeasured by js/waitlist.js whenever the bar wraps; the
   value here is the no-JS fallback, and header/scroll offsets are derived
   from it so nothing ends up hidden underneath.

   It defaults to 0 because most pages have no bar. Only the homepage does,
   and checkout.html and success.html do not even load js/waitlist.js - so a
   fixed 56px there pinned the header 56px down the viewport and left a strip
   above it for the form to scroll up through. :has() scopes the offset to
   pages that actually carry a bar, and the inline value js/waitlist.js writes
   on those pages overrides this with the real measured height. */
:root {
  --waitlist-h:    0px;
  --urgent:        #CC1B1B;
  --urgent-deep:   #A81414;
}

html:has(#waitlist-bar) {
  --waitlist-h:    56px;
}

.waitlist-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 11; /* one above the header */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.4rem;
  padding: 8px 16px;
  background: var(--urgent);
  border-bottom: 3px solid var(--urgent-deep);
  color: #FFFFFF;
  text-decoration: none;
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  transition: background-color 0.25s ease;
  /* Slides into place on load. Done as an animation rather than a JS-toggled
     class so the bar is never left hidden if the script fails - and `both`
     keeps the end state after it finishes. Flip the keyframe to
     translateY(100%) if you want it rising from below the header instead. */
  animation: cm-bar-slide 0.45s ease-out both;
}

@keyframes cm-bar-slide {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .waitlist-bar {
    animation: none;
  }

  .cm-modal,
  .cm-modal-backdrop,
  .cm-modal-dialog {
    transition: none;
  }
}

.waitlist-bar:hover,
.waitlist-bar:focus-visible {
  background: var(--urgent-deep);
}

.waitlist-bar:focus-visible {
  outline: 3px solid var(--cream);
  outline-offset: -6px;
}

.waitlist-offer {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.waitlist-bar:hover .waitlist-offer {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.waitlist-offer strong {
  font-weight: 700;
  white-space: nowrap;
}

.waitlist-timer {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  font-variant-numeric: tabular-nums;
}

.waitlist-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
  min-width: 2.1rem;
}

.waitlist-num {
  font-size: 1.15rem;
  font-weight: 700;
}

.waitlist-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.85;
}

.waitlist-colon {
  font-size: 1.15rem;
  font-weight: 700;
  padding-top: 0.05rem;
}

/* Once the hour is up the bar stays, the countdown goes - a timer frozen at
   00:00:00, or one that quietly restarts, reads as fake. */
.waitlist-timer[hidden] {
  display: none;
}

@media (max-width: 560px) {
  .waitlist-offer {
    font-size: 0.92rem;
    width: 100%;
    text-align: center;
  }

  .waitlist-timer {
    padding-bottom: 2px;
  }
}

/* ---------------- waitlist modal ----------------
   Bootstrap's modal pattern rebuilt natively: the CSP is script-src 'self'
   with no CDN allowed, so pulling the library in would mean loosening it in
   both server.js and vercel.json for one dialog. Same structure (backdrop +
   dialog + content), same .fade/.show mechanics, same timings - backdrop
   0.15s linear to 0.5 opacity, dialog 0.3s ease-out from translateY(-50px). */

.cm-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1050;
  background-color: #000;
  /* Must not exist in the layout until it opens, or an invisible full-screen
     layer sits over the page swallowing every click. */
  display: none;
  opacity: 0;
  transition: opacity 0.15s linear;
}

.cm-modal-backdrop.is-open {
  display: block;
}

.cm-modal-backdrop.show {
  opacity: 0.5;
}

.cm-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1055;
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.15s linear;
}

/* display must flip before the opacity transition can run, so opening is a
   two-step: .is-open this frame, .show the next. */
.cm-modal.is-open {
  display: block;
}

.cm-modal.show {
  opacity: 1;
}

.cm-modal-dialog {
  max-width: 34rem;
  margin: 3.5rem auto;
  transform: translateY(-50px);
  transition: transform 0.3s ease-out;
}

.cm-modal.show .cm-modal-dialog {
  transform: none;
}

.cm-modal-content {
  position: relative;
  background-color: var(--surface);
  border: 2px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-lift);
  padding: 2.6rem 2.2rem 2.2rem;
  text-align: center;
}

.cm-modal-close {
  position: absolute;
  top: 0.7rem;
  right: 0.9rem;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  font-size: 1.9rem;
  line-height: 1;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  border-radius: 8px;
}

.cm-modal-close:hover,
.cm-modal-close:focus-visible {
  color: var(--heading);
  background-color: var(--surface-alt);
}

.cm-modal-logo {
  width: 150px;
  height: auto;
  display: block;
  margin: 0 auto 1rem;
}

.cm-modal-title {
  font-size: 2.1rem;
  line-height: 1.2;
  margin: 0 0 0.8rem;
}

.cm-modal-text {
  color: var(--text-soft);
  font-size: 1.12rem;
  margin: 0 auto 1.4rem;
  max-width: 26rem;
}

/* the same countdown as the bar, scaled up for the dialog */
.cm-modal-timer {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0.45rem;
  margin-bottom: 1.6rem;
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  color: var(--urgent);
  font-variant-numeric: tabular-nums;
}

.cm-modal-timer .waitlist-unit {
  min-width: 3rem;
}

.cm-modal-timer .waitlist-num {
  font-size: 2rem;
}

.cm-modal-timer .waitlist-colon {
  font-size: 2rem;
  padding-top: 0.1rem;
}

.cm-modal-timer .waitlist-label {
  font-size: 0.72rem;
  opacity: 1;
  color: var(--text-soft);
}

.cm-modal-content .cm-modal-join {
  display: block;
  width: 100%;
  margin: 0;
  padding: 14px 20px;
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-size: 1.15rem;
  text-decoration: none;
}

.cm-modal-content .cm-modal-join:hover {
  background-color: var(--green-mid);
  border-color: var(--green-mid);
  color: var(--on-accent);
}

body.cm-modal-open {
  overflow: hidden;
}

@media (max-width: 560px) {
  .cm-modal-dialog {
    margin: 2rem auto;
  }

  .cm-modal-content {
    padding: 2.2rem 1.3rem 1.6rem;
  }

  .cm-modal-logo {
    width: 112px;
  }

  .cm-modal-title {
    font-size: 1.7rem;
  }
}

/* ---------------- header / nav ---------------- */

header {
	padding: 12px 0;
	position: fixed;
	top: var(--waitlist-h);
	width: 100%;
	background-color: var(--header-bg);
	border-bottom: 3px solid var(--accent);
	z-index: 10; /* pushes header to the very front */
	transition: background-color 0.35s ease, border-color 0.35s ease;
}

.bg-colored {
    background-color: var(--header-bg);
    color: var(--header-text);
}

.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: auto;
	text-align: left;
	width: 90%;
}

#branding a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.nav-logo {
  height: 34px;
  width: auto;
  display: block;
}

header a {
	color: var(--header-text);
	text-decoration: none;
	text-transform: uppercase;
	font-size: 1rem;
}

header li {
	padding: 0 18px;
	list-style: none;
}

header nav {
	margin-left: auto;
	margin-right: auto;
}

header nav ul {
	list-style: none;
	display: none;
	flex-direction: column;
	justify-content: center;
    text-align: center;
	margin: 0;
	gap: 16px;
    padding: 16px;
  transition: 0.9s;
}

/* Make links larger and clearer */
header nav a {
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  color: var(--header-text);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.1rem;
  letter-spacing: 1.5px;
  padding-bottom: 3px;
  border-bottom: 0.2rem solid transparent;
}

nav a:hover {
	color: var(--orange);
	transition: color 0.3s ease, border-color 0.3s ease;
	border-bottom: 0.2rem solid var(--orange);
	border-radius: 6px;
}

header .current a {
	color: var(--orange);
}

/* Hamburger label */
label[for="toggle"] {
  display: block;
  font-size: 2rem;
  cursor: pointer;
  color: var(--header-text);
  text-align: center;
}

/* Hide the checkbox */
#toggle {
  display: none;
}

/* When hamburger is clicked, show menu */
#toggle:checked ~ ul {
  display: flex;
  transform: scaleY(1);
  opacity: 1;
}

hr.nav-line {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--border);
  border: none;
  margin: 6px auto;
}

/* ---------------- hero ---------------- */

/* hero also carries .container, so force it back to full bleed */
section#hero,
section#hero.container {
	position: relative;
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	height: 100vh;
	overflow: hidden;
}

section#hero .hero-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 92%;
	color: var(--cream);
	text-align: center;
	z-index: 1; /* ensures its above the video */
}

.hero-logo {
  width: 150px;
  max-width: 45vw;
  height: auto;
  margin-bottom: 0.5rem;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
}

.heroText {
	font-size: 2.1rem;
	color: var(--cream);
	margin: 0.4rem 0;
	text-shadow: 0 3px 14px rgba(0, 0, 0, 0.5);
}

section#hero h2 {
	font-family: "Fredoka", "Trebuchet MS", sans-serif;
	font-weight: 500;
	font-size: 1.2rem;
	color: var(--cream);
	max-width: 34rem;
	margin: 0 auto 0.3rem;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.hero-sub {
	font-family: "Nunito", Arial, Helvetica, sans-serif;
	font-size: 1rem;
	color: var(--cream);
	max-width: 32rem;
	margin: 0 auto;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

#myVideo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -10;
	filter: brightness(42%) saturate(115%);
}

/* green wash over the video so it sits inside the brand */
section#hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 108, 82, 0.55), rgba(7, 32, 26, 0.75));
  z-index: 0;
  pointer-events: none;
}

.button {
  background-color: var(--green-light);
  border: 3px solid var(--green-light);
  border-radius: 999px;
  color: #0B3327;
  padding: 1rem 2.2rem;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin-top: 1.2rem;
  cursor: pointer;
  text-transform: uppercase;
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  transition: background-color 0.3s, transform 0.3s, color 0.3s;
}

.button:hover {
  background-color: var(--orange);
  border-color: var(--orange);
  color: var(--cream);
  transform: translateY(-3px);
}

.fas.fa-chevron-down,
.button .fa-chevron-right {
    font-size: 1.1rem;
    margin-left: 6px;
}

/* the two hero buttons stack; the second sits a little closer than the first's top margin */
.hero-content .button + .button {
  margin-top: 0.9rem;
}

/* bounce anim */
@keyframes bounce {
  0%, 30%, 60%, 80%, 100% { transform: translateY(0); }
  20% { transform: translateY(-10px); }
  40% { transform: translateY(5px); }
  70% { transform: translateY(-4px); }
  90% { transform: translateY(2px); }
}

/* chevron icon */
.button:hover .fas.fa-chevron-down {
  animation: bounce 1s ease-in;
}

/* ---------------- about (flip card) ---------------- */

section#about {
  padding: 5rem 1rem;
}

.card {
  position: relative;
  margin: auto;
  width: 90%;
  max-width: 60rem;
  background-color: var(--surface);
  border: 2px solid var(--border);
  padding: 2rem;
  border-radius: 1.5rem;
  box-shadow: var(--shadow);
}

section#about .card {
  transform-style: preserve-3d;
  transition: transform 0.9s;
  min-height: 380px; /* must fit the taller face, which is the back */
}

/* front and back of card */
section#about .front,
section#about .back {
  backface-visibility: hidden;
  color: var(--text);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;  /* important */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;        /* ensures both sides take full card space */
  padding: 2rem;
  border-radius: 1.5rem;
}

section#about .back {
  transform: rotateY(180deg);
  background-color: var(--surface-alt);
}

/* hover to flip */
section#about .card:hover {
    transform: rotateY(180deg);
}

.card p {
	font-family: "Nunito", Arial, Helvetica, sans-serif;
	font-size: 1.05rem;
	color: var(--text);
	width: 92%;
	text-align: center;
	margin: 0.4rem auto;
}

/* the short three-beat line that closes each side of the about card */
.about-punch {
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-size: 1.05rem !important;
  font-weight: 600;
  color: var(--accent) !important;
  margin-top: 0.8rem !important;
}

.flip-hint {
  margin-top: 1rem !important;
  font-size: 0.85rem !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--orange) !important;
  font-weight: 700;
}

/* ---------------- section titles ---------------- */

.section-title {
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-weight: 600;
  font-size: 2rem;
  text-align: center;
  display: block;
  width: 100%;
  margin: 2.5rem auto 0.5rem;
  color: var(--heading);
}

.section-title::after {
  content: "";
  display: block;
  width: 72px;
  height: 5px;
  border-radius: 999px;
  background: var(--orange);
  margin: 0.6rem auto 0;
}

/* ---------------- service + pricing cards ---------------- */

.container2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 2%;
}

.service-card {
    position: relative;
    margin: 10px;
    padding: 26px 22px;
    border-radius: 18px;
    width: 90%;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
	background-color: var(--surface);
	border: 2px solid var(--border);
	box-shadow: var(--shadow);
	text-align: center;
}

.service-card:hover {
    transform: translateY(-6px);
    border-color: var(--green-light);
    box-shadow: var(--shadow-lift);
}

.service-card h3 {
    font-family: "Fredoka", "Trebuchet MS", sans-serif;
	font-size: 1.25rem;
	text-align: center;
	margin: 0.6rem 0 0.4rem;
}

.service-card p {
  color: var(--text-soft);
  margin: 0 auto;
  max-width: 26rem;
}

/* the three "what we do" cards run several paragraphs each, so the copy is set
   a step larger and in the full text colour rather than the softened one */
section#services .service-card p {
  font-family: "Istok Web", "Nunito", Arial, Helvetica, sans-serif;
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--text);
  max-width: 28rem;
}

section#services .service-card h3 {
  font-size: 1.4rem;
}

/* the heading above the cards is scaled with their larger copy;
   Pricing keeps the base .section-title size */
.section-title-services {
  font-size: 2.3rem;
}

section#services .service-card p + p {
  margin-top: 0.85rem;
}

/* icons sit on a cream tile so the deep green always has contrast */
section#services .service-card img {
    width: 108px;
    height: 108px;
    object-fit: contain;
    display: block;
    margin: 0 auto 6px;
    padding: 14px;
    border-radius: 50%;
    background-color: var(--cream-warm);
}

/* the highlighted plan */
.service-card.featured {
  border-color: var(--orange);
  background-color: var(--surface-alt);
}

.card-flag {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--orange);
  color: var(--cream);
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 16px;
  border-radius: 999px;
  margin: 0 !important;
  white-space: nowrap;
}

/* pricing figure */
.price {
    font-family: "Fredoka", "Trebuchet MS", sans-serif;
    font-size: 2.1rem;
    color: var(--accent) !important;
    font-weight: 700;
    margin-top: 14px;
    text-align: center;
    line-height: 1.2;
}

.price-unit {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-soft);
}

/* ---------------- waitlist page ----------------
   Same shell as the confirmation page: no nav, one centred column of cards,
   brand lockup in the corner instead of a header. */

.waitlist-brand {
  position: absolute;
  top: 1.4rem;
  left: 1.6rem;
  z-index: 5;
  display: inline-block;
  line-height: 0;
}

.waitlist-brand-mark {
  width: 168px;
  height: auto;
  display: block;
}

#waitlist {
  max-width: 70rem;
  margin: 0 auto;
  padding: 13.5rem 1.2rem 4rem;
}

.waitlist-hero {
  text-align: center;
  margin-bottom: 2.2rem;
}

.waitlist-hero h1 {
  font-size: 3.7rem;
  line-height: 1.15;
  margin: 0 0 0.6rem;
}

.waitlist-tagline {
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 1.2rem;
}

.waitlist-lead {
  color: var(--text-soft);
  font-size: 1.38rem;
  max-width: 48rem;
  margin: 0 auto 1rem;
}

/* .plan-button is full width by design in the pricing cards and is defined
   further down this file, so these need the extra class to win on specificity
   rather than order. The hero CTA hugs its text, and is filled rather than
   outlined because it is the primary action on the page. */
.waitlist-hero .waitlist-cta {
  display: inline-block;
  width: auto;
  margin-top: 0.8rem;
  padding: 13px 2.2rem;
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
}

.waitlist-hero .waitlist-cta:hover {
  background-color: var(--green-mid);
  border-color: var(--green-mid);
  color: var(--on-accent);
}

html:has(#dark-mode:checked) .waitlist-hero .waitlist-cta:hover {
  background-color: var(--cream);
  border-color: var(--cream);
  color: var(--green-deep);
}

.waitlist-cta i {
  margin-left: 0.4rem;
}

.waitlist-card {
  background-color: var(--surface);
  border: 2px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 2rem 2.2rem;
  margin-bottom: 1.6rem;
  scroll-margin-top: 2rem;
}

.waitlist-card h2 {
  font-size: 2.15rem;
  margin: 0 0 1rem;
}

.waitlist-card p {
  color: var(--text-soft);
  font-size: 1.26rem;
  margin: 0 0 0.7rem;
}

.waitlist-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.waitlist-list li {
  position: relative;
  font-size: 1.26rem;
  padding-left: 1.8rem;
  margin-bottom: 0.55rem;
  color: var(--text);
}

.waitlist-list li::before {
  content: "\f00c"; /* font-awesome check */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.1rem;
  font-size: 0.85rem;
  color: var(--accent-soft);
}

.waitlist-note {
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-weight: 600;
  color: var(--accent) !important;
  margin: 0 !important;
}

/* numbered steps */
.waitlist-step {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1.1rem 0;
  border-top: 2px solid var(--border);
}

.waitlist-step:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.waitlist-step-num {
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-size: 1.95rem;
  font-weight: 700;
  color: var(--accent-soft);
  line-height: 1;
  min-width: 2.4rem;
}

.waitlist-step h3 {
  font-size: 1.5rem;
  margin: 0 0 0.35rem;
}

.waitlist-step p:last-child {
  margin-bottom: 0;
}

/* form
   The cards run the full 70rem, but a 1,000px-wide box for a first name is not
   a form anyone wants to fill in. The fields keep a readable measure and sit
   centred in the card; the copy above them still uses the full width. */
#waitlist-form form {
  max-width: 38rem;
  margin: 0 auto;
}

#waitlist-form .myInputs {
  font-size: 1.15rem;
}

#waitlist-form label {
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-size: 1.15rem;
  color: var(--heading);
  display: block;
  margin-top: 14px;
}

.waitlist-optional {
  font-family: "Nunito", Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-soft);
  text-transform: none;
  margin-left: 0.3rem;
}

/* The select needs the arrow drawn in, since resetting appearance to match
   .myInputs removes the browser's own. */
#waitlist-form select.myInputs {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%230E6C52' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
  padding-right: 2.6rem;
}

html:has(#dark-mode:checked) #waitlist-form select.myInputs {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%237CC76F' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}

.waitlist-privacy {
  font-size: 1.1rem;
  line-height: 1.5;
  margin-top: 1.4rem !important;
}

.waitlist-privacy a {
  color: var(--accent);
}

/* checkbox sits beside its text, not above it like the other labels */
.waitlist-consent {
  display: flex !important;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 1rem !important;
  font-family: "Nunito", Arial, sans-serif !important;
  font-size: 1.12rem !important;
  color: var(--text) !important;
  line-height: 1.5;
  cursor: pointer;
}

.waitlist-consent input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.15rem 0 0;
  flex-shrink: 0;
  accent-color: var(--green-deep);
  cursor: pointer;
}

.waitlist-submit {
  margin-top: 1.6rem;
  width: 100%;
}

.waitlist-status {
  background: var(--green-tint);
  border: 2px solid var(--green-light);
  color: var(--text) !important;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 0 1.2rem !important;
}

.waitlist-status.is-error {
  background: rgba(253, 103, 62, 0.12);
  border-color: var(--orange);
}

/* FAQ */
.waitlist-faq {
  padding: 1rem 0;
  border-top: 2px solid var(--border);
}

.waitlist-faq:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.waitlist-faq h3 {
  font-size: 1.45rem;
  margin: 0 0 0.4rem;
}

.waitlist-faq p:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .waitlist-brand {
    top: 1rem;
    left: 1rem;
  }

  .waitlist-brand-mark {
    width: 116px;
  }

  #waitlist {
    padding-top: 10rem;
  }

  .waitlist-hero h1 {
    font-size: 2.6rem;
  }

  .waitlist-card {
    padding: 1.6rem 1.2rem;
  }

  .waitlist-step {
    gap: 0.8rem;
  }
}

/* ---------------- legal pages (terms, privacy, refunds) ----------------
   Same shell as the waitlist page - brand lockup in the corner, cream ground,
   one card - but set as a document: body copy stays at the waitlist's 1.26rem,
   while the display sizes come down and the column narrows. 70rem of legal
   prose at that size runs past 110 characters a line, which nobody reads. */

#legal {
  max-width: 54rem;
  margin: 0 auto;
  padding: 13.5rem 1.2rem 4rem;
}

.legal-head {
  margin-bottom: 2rem;
  text-align: center;
}

.legal-head h1 {
  font-size: 2.8rem;
  line-height: 1.15;
  margin: 0 0 0.6rem;
}

.legal-dates {
  color: var(--text-soft);
  font-size: 1.05rem;
  margin: 0;
}

.legal-doc {
  background-color: var(--surface);
  border: 2px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 2.4rem 2.6rem;
}

.legal-doc > section {
  padding: 1.7rem 0;
  border-top: 2px solid var(--border);
  scroll-margin-top: 2rem;
}

.legal-doc > section:first-child {
  border-top: 0;
  padding-top: 0;
}

.legal-doc h2 {
  font-size: 1.7rem;
  margin: 0 0 0.8rem;
}

.legal-doc h3 {
  font-size: 1.28rem;
  margin: 1.3rem 0 0.4rem;
}

.legal-doc p {
  font-size: 1.26rem;
  color: var(--text-soft);
  margin: 0 0 0.85rem;
}

.legal-doc p:last-child {
  margin-bottom: 0;
}

/* the global `ul` reset zeroes padding, so the markers need it back */
.legal-doc ul {
  margin: 0 0 1rem;
  padding-left: 1.6rem;
}

.legal-doc li {
  font-size: 1.26rem;
  color: var(--text-soft);
  margin-bottom: 0.4rem;
}

.legal-doc a {
  color: var(--accent);
}

/* the opening statement, before the numbered sections begin */
.legal-intro p {
  color: var(--text);
}

/* contact blocks at the end of each document */
.legal-contact {
  list-style: none;
  padding-left: 0 !important;
  margin-top: 0.6rem;
}

.legal-contact li {
  margin-bottom: 0.2rem;
}

@media (max-width: 640px) {
  #legal {
    padding-top: 10rem;
  }

  .legal-head h1 {
    font-size: 2.1rem;
  }

  .legal-doc {
    padding: 1.6rem 1.2rem;
  }
}

/* ---------------- success / confirmation page ---------------- */

/* The `hidden` attribute comes from the browser's own stylesheet, which any
   author `display` rule outranks. Restate it here so hidden really hides. */
[hidden] {
  display: none !important;
}

#confirmation {
  max-width: 44rem;
  margin: 0 auto;
  padding: 8rem 1.2rem 4rem;
}

.confirm-card {
  background-color: var(--surface);
  border: 2px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 2.5rem 2rem;
  text-align: center;
}

.confirm-check {
  margin-bottom: 0.5rem;
}

#confirmation h1 {
  font-size: 2.2rem;
  margin: 0.2rem 0 0.6rem;
}

.confirm-lead {
  color: var(--text-soft);
  font-size: 1.05rem;
  max-width: 30rem;
  margin: 0 auto;
}

.order-summary {
  margin: 2rem auto 0;
  max-width: 26rem;
  background-color: var(--surface-alt);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 0.4rem 1.2rem;
  text-align: left;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
}

.summary-row:last-child {
  border-bottom: none;
}

.summary-label {
  color: var(--text-soft);
  font-size: 0.92rem;
}

.summary-value {
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  color: var(--accent);
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}

.next-title {
  font-size: 1.3rem;
  margin: 2.2rem 0 0.8rem;
}

.next-steps {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 30rem;
  text-align: left;
}

.next-steps li {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 0.7rem 0;
  color: var(--text-soft);
}

.step-num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--green-light);
  color: #0B3327;
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.next-steps strong {
  color: var(--heading);
  display: block;
}

.confirm-help {
  margin-top: 1.8rem;
  color: var(--text-soft);
  font-size: 0.95rem;
}

.confirm-help a {
  color: var(--accent);
  font-weight: 700;
}

.confirm-home {
  width: auto !important;
  min-width: 14rem;
  margin-top: 1.6rem !important;
}

/* ---------------- checkout page ---------------- */

#checkout {
  max-width: 56rem;
  margin: 0 auto;
  padding: 8rem 1.2rem 4rem;
}

.checkout-card {
  background-color: var(--surface);
  border: 2px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 2.5rem 2.2rem;
}

.checkout-eyebrow {
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 0.4rem;
}

#checkout h1 {
  font-size: 2.1rem;
  margin: 0 0 0.5rem;
}

.checkout-lead {
  color: var(--text-soft);
  font-size: 1.05rem;
  margin: 0 0 1.4rem;
}

.checkout-lead strong {
  color: var(--heading);
}

.checkout-alert {
  background: rgba(253, 103, 62, 0.12);
  border: 2px solid var(--orange);
  color: var(--text);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 1.4rem;
}

/* Contact form: the honeypot input. Kept out of the layout and away from
   keyboards and screen readers, while staying a real, fillable field so bots
   still take the bait. `display: none` is skipped because some bots ignore it. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Result banner above the contact form. Green when the message went out,
   orange when it did not - matching .checkout-alert. */
.contact-status {
  background: var(--green-tint);
  border: 2px solid var(--green-light);
  color: var(--text);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 0 1.4rem;
}

.contact-status.is-error {
  background: rgba(253, 103, 62, 0.12);
  border-color: var(--orange);
}

.checkout-section {
  border: 0;
  border-top: 2px solid var(--border);
  padding: 1.4rem 0 0.4rem;
  margin: 0.6rem 0 0;
  min-width: 0;
}

.checkout-section legend {
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--heading);
  padding: 0 0.6rem 0 0;
}

.section-hint {
  color: var(--text-soft);
  font-size: 0.95rem;
  margin: 0.2rem 0 0.4rem;
}

.checkout-section label {
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-size: 0.95rem;
  color: var(--heading);
  display: block;
  margin-top: 12px;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 18px;
}

.field-grid-3 {
  grid-template-columns: 1.4fr 1fr 1fr;
}

.myInputs.is-invalid {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(253, 103, 62, 0.18);
}

/* bin location: fields on the left, diagram on the right */
.bin-location-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
  align-items: start;
}

.bin-location-fields textarea.myInputs {
  min-height: 150px;
}

.bin-diagram-wrap {
  margin-top: 12px;
  padding: 16px;
  border-radius: 14px;
  background-color: var(--surface-alt);
  border: 2px solid var(--border);
}

.bin-diagram {
  width: 100%;
  height: auto;
  display: block;
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
}

.bin-diagram .zone {
  fill: var(--green-tint);
  stroke: var(--green-light);
  stroke-width: 2;
  transition: fill 0.25s, stroke 0.25s;
}

.bin-diagram .house {
  fill: var(--surface);
  stroke: var(--green-deep);
  stroke-width: 3;
}

.bin-diagram .door {
  fill: var(--orange);
}

.bin-diagram .house-label {
  fill: var(--green-deep);
  font-size: 18px;
  font-weight: 600;
}

.bin-diagram .zone-label {
  fill: var(--text-soft);
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
}

.bin-diagram .street {
  fill: var(--cream-edge);
}

.bin-diagram .street-label {
  fill: var(--text-soft);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* the chosen side lights up */
.bin-diagram[data-side="left"]  .zone-left,
.bin-diagram[data-side="right"] .zone-right,
.bin-diagram[data-side="front"] .zone-front,
.bin-diagram[data-side="back"]  .zone-back {
  fill: var(--orange);
  stroke: var(--orange-dark);
}

.bin-diagram[data-side="left"]  .label-left,
.bin-diagram[data-side="right"] .label-right,
.bin-diagram[data-side="front"] .label-front,
.bin-diagram[data-side="back"]  .label-back {
  fill: var(--cream);
}

.bin-disclaimer {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-soft);
  margin: 12px 0 0;
}

.checkout-submit {
  margin-top: 1.8rem;
}

.checkout-submit i {
  margin-left: 6px;
  font-size: 0.9em;
}

.checkout-submit:disabled {
  opacity: 0.7;
  cursor: default;
}

.checkout-fineprint {
  text-align: center;
  color: var(--text-soft);
  font-size: 0.85rem;
  margin: 0.8rem 0 0;
}

/* success page: spinner while the order status is checked */
.confirm-spinner {
  font-size: 4.5rem;
  color: var(--green-light);
  line-height: 1;
}

html:has(#dark-mode:checked) .bin-diagram .street {
  fill: rgba(124, 199, 111, 0.2);
}

@media (max-width: 768px) {
  #checkout {
    padding-top: 6rem;
  }

  .checkout-card {
    padding: 1.8rem 1.2rem;
  }

  .field-grid,
  .field-grid-3,
  .bin-location-grid {
    grid-template-columns: 1fr;
  }

  .bin-diagram-wrap {
    max-width: 22rem;
  }
}

/* the trimmed-down nav used on the success page */
.nav-simple {
  display: flex !important;
  flex-direction: row !important;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* pricing cards stretch to equal height so the buttons line up */
section#pricing .container2 {
  align-items: stretch;
}

section#pricing .service-card {
  display: flex;
  flex-direction: column;
}

/* push the price + button to the bottom of the card */
section#pricing .price {
  margin-top: auto;
  padding-top: 14px;
}

/* short line under a section title */
.section-lead {
  text-align: center;
  color: var(--text-soft);
  max-width: 34rem;
  margin: 0.4rem auto 0;
}

/* cart line-up photo on each pricing card. The source images are square with
   empty space above and below the carts, so crop to the middle band instead of
   showing the whole square. */
.plan-photo {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: center;
  background-color: #EFEFEF;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 0; /* beats the blanket `img { padding: 10px }` further down */
  margin: 0.3rem 0 0.9rem;
}

/* what each tier includes, sits right under the plan name */
.plan-includes {
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: var(--accent) !important;
  background-color: var(--green-tint);
  border-radius: 999px;
  padding: 5px 14px;
  display: inline-block;
  margin: 0 auto 0.7rem !important;
}

/* checkout button on each pricing card */
.plan-form {
  margin: 0;
}

.plan-button {
  display: inline-block;
  width: 100%;
  margin-top: 14px;
  padding: 12px 20px;
  border: 2px solid var(--green-deep);
  border-radius: 999px;
  background-color: transparent;
  color: var(--accent);
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

html:has(#dark-mode:checked) .plan-button {
  border-color: var(--green-light);
}

.plan-button:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.featured .plan-button {
  background-color: var(--orange);
  border-color: var(--orange);
  color: var(--cream);
}

.featured .plan-button:hover {
  background-color: var(--orange-dark);
  border-color: var(--orange-dark);
}

/* ---------------- reviews ---------------- */

#reviews {
    padding: 40px 0 60px;
}

/* the big panel the whole section sits on - full viewport width */
.reviews-panel {
  width: 100%;
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px 6vw 80px;
  border-radius: 0;
  /* top and bottom edges fade into the page background instead of a hard seam */
  background-color: var(--surface-alt);
  background-image: linear-gradient(
    to bottom,
    var(--bg) 0,
    var(--surface-alt) 100px,
    var(--surface-alt) calc(100% - 100px),
    var(--bg) 100%
  );
}

.reviews-head {
  max-width: 34rem;
  text-align: left;
}

.reviews-tag {
  display: inline-block;
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange);
  background: rgba(253, 103, 62, 0.12);
  padding: 5px 10px;
  border-radius: 4px;
}

.reviews-title {
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 1.15;
  color: var(--heading);
  margin: 0.9rem 0 0.4rem;
}

.reviews-sub {
  color: var(--text-soft);
  font-size: 0.95rem;
  margin: 0;
}

/* --- marquee --- */

.reviews-marquee {
  overflow: hidden;
  /* the panel is a flex column, so without this the marquee refuses to shrink
     below the track's full width and nothing gets clipped or scrolls */
  min-width: 0;
  width: 100%;
  margin-top: 2.6rem;
  /* soften the cards as they enter and leave */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.reviews-track {
  display: flex;
  width: max-content;
  padding: 16px 0 28px;
  animation: reviews-scroll 40s linear infinite;
}

.reviews-group {
  display: flex;
  flex-shrink: 0;
}

.reviews-marquee:hover .reviews-track {
  animation-play-state: paused;
}

/* both groups are identical, so sliding one group's width and snapping
   back to 0 is invisible */
@keyframes reviews-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- card --- */

.review-card {
  flex: 0 0 auto;
  width: 360px;
  margin-right: 24px;
  padding: 18px 20px 22px;
  border-radius: 16px;
  border: 1.5px solid transparent;
  /* gradient border: surface fills the padding box, gradient shows through the border box */
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(160deg, rgba(124, 199, 111, 0.9) 0%, rgba(14, 108, 82, 0.35) 55%, rgba(124, 199, 111, 0.9) 100%) border-box;
  box-shadow: var(--shadow);
  text-align: left;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.review-card:hover {
  transform: scale(1.04);
  box-shadow: var(--shadow-lift);
}

.review-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* empty slot - drop an <img> inside when photos are ready */
.review-avatar {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--green-tint);
  border: 2px solid var(--green-light);
  overflow: hidden;
}

.review-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.review-name {
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text);
  margin: 0;
}

.review-role {
  font-size: 0.85rem;
  color: var(--text-soft);
  margin: 0;
}

.review-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  margin: 14px 0 0;
}

.review-stars {
  color: var(--orange);
  font-size: 0.95rem;
  letter-spacing: 1px;
}

.review-stars .far {
  color: var(--cream-edge);
}

/* long dashes like the mockup, not the browser's short dotted ones */
.review-divider {
  height: 2px;
  margin: 12px 0 16px;
  background: repeating-linear-gradient(90deg, var(--border) 0 12px, transparent 12px 20px);
}

.review-text {
  font-family: "Istok Web", "Nunito", Arial, Helvetica, sans-serif;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0;
}

.review-text + .review-text {
  margin-top: 0.9rem;
}

html:has(#dark-mode:checked) .review-stars .far {
  color: rgba(124, 199, 111, 0.3);
}

/* ---------------- contact ---------------- */

section#contact {
    margin: 0 auto;
    padding: 40px 20px 80px;
    text-align: center;
    width: 92%;
    max-width: 46rem;
}

section#contact h1 {
    margin-top: 2rem;
    font-size: 2rem;
    text-align: center;
}

section#contact p {
    text-align: center;
    font-size: 1rem;
    color: var(--text-soft);
    max-width: 34rem;
    margin: 0.5rem auto 0;
}

.form-card {
  text-align: left;
  margin-top: 2rem;
  width: 100%;
}

.form-card label {
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-size: 0.95rem;
  color: var(--heading);
  display: block;
  margin-top: 12px;
}

.myInputs {
    display: block;
    width: 100%;
    padding: 12px;
    border: 2px solid var(--border);
    border-radius: 10px;
    background-color: var(--bg);
    color: var(--text);
    font-family: "Nunito", Arial, Helvetica, sans-serif;
    font-size: 1rem;
    margin-top: 6px;
    margin-bottom: 6px;
}

/* comments box - plenty of room, and only grows vertically */
textarea.myInputs {
  min-height: 180px;
  resize: vertical;
  line-height: 1.5;
}

.myInputs:focus {
  outline: none;
  border-color: var(--green-light);
  box-shadow: 0 0 0 4px var(--green-tint);
}

.button_1 {
    background-color: var(--green-deep);
    width: 100%;
    height: 48px;
    border-radius: 999px;
    color: var(--cream);
    border: 0;
    margin-top: 1.4rem;
    font-family: "Fredoka", "Trebuchet MS", sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.button_1:hover {
    background-color: var(--orange);
    transform: translateY(-2px);
}

/* ---------------- theme toggle ---------------- */

input[type="radio"] {
   display: none;
}

#theme-toggle-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    gap: 10px;
    align-items: center;
	z-index: 100;
}

.light-mode-style {
    height: 56px;
    width: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--surface);
    border: 2px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    font-family: "Fredoka", "Trebuchet MS", sans-serif;
    font-size: 0.72rem;
    color: var(--heading);
    box-shadow: var(--shadow);
    transition: background-color 0.3s, transform 0.3s, border-color 0.3s;
}

.light-mode-style:hover {
  transform: translateY(-3px);
  border-color: var(--green-light);
}

#theme-toggle-container i {
    color: var(--orange);
    font-size: 1.15rem;
    margin-bottom: 2px;
}

/* mark the active theme button */
html:has(#light-mode:checked) label[for="light-mode"],
html:has(#dark-mode:checked) label[for="dark-mode"] {
  background-color: var(--green-light);
  border-color: var(--green-light);
  color: #0B3327;
}

html:has(#light-mode:checked) label[for="light-mode"] i,
html:has(#dark-mode:checked) label[for="dark-mode"] i {
  color: #0B3327;
}

/* ---------------- footer ---------------- */

footer {
	padding: 40px 20px;
	color: var(--text-soft);
	text-align: center;
	background-color: var(--surface-alt);
	border-top: 3px solid var(--accent);
}

.container3 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: auto;
	text-align: center;
	width: 90%;
}

.footer-logo {
  height: 30px;
  width: auto;
}

/* Legal links, stacked one per line. .container3 is already a centred column,
   so this is its own column inside it rather than a row that would wrap
   unevenly on narrow screens. */
.footer-legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 6px 0 2px;
}

.footer-legal a {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.95rem;
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

footer p {
  margin: 0;
}

/* ============================================================
   Desktop view - show nav inline
   ============================================================ */

@media (min-width: 768px) {
  label[for="toggle"] {
    display: none; /* hide hamburger */
  }

  .nav-logo {
    height: 40px;
  }

  /* push the links to the right edge instead of floating mid-header */
  header nav {
    margin-right: 0;
  }

  header nav ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 34px;
    background: none;
    padding: 0;
  }

  .nav-line {
    display: none;
  }

  .container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 92%;
  }

  section#hero,
  section#hero.container {
    width: 100%;
    height: 100vh;
  }

  .hero-logo {
    width: 190px;
  }

  .heroText {
    font-size: 3.4rem;
  }

  section#hero h2 {
    font-size: 1.2rem;
  }

  .section-title {
    font-size: 2.4rem;
  }

  .section-title-services {
    font-size: 2.75rem;
  }

  section#services {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: auto;
  }

  .service-card {
    margin: 18px;
    width: calc(33.333% - 40px);
  }

  .container3 {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 18px;
  }

  /* Keeps the logo and copyright on one line as before, and drops the legal
     column onto its own line underneath instead of squeezing it between them. */
  .footer-legal {
    flex-basis: 100%;
  }
}

/* ============================================================
   iPad / tablet view
   ============================================================ */

@media (max-width: 1024px) {
	#navbar .container {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	header nav ul {
		list-style: none;
		display: none;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		margin: 0;
		gap: 16px;
		padding: 16px;
	}

	/* Hamburger label */
	label[for="toggle"] {
		display: block;
		font-size: 2rem;
		cursor: pointer;
		text-align: center;
	}

	/* Hide the checkbox */
	#toggle {
		display: none;
	}

	/* When hamburger is clicked, show menu */
	#toggle:checked ~ ul {
		display: flex;
    transition: 0.8s;
	}

  section#services {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: space-evenly;
	  margin: auto;
	}

  .service-card {
	  margin: 16px;
    width: calc(50% - 36px);
	}

  section#pricing .container2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  section#pricing .service-card {
    width: 88%;
    margin: 0.5rem auto;
  }
}

/* ============================================================
   Mobile view - because mobile first does not always hold up
   ============================================================ */

@media (max-width: 768px) {
  .container2 {
    flex-direction: column;
    align-items: center;
  }

  .service-card {
    width: 88%;
    margin: 14px 0;
  }

  section#about {
    padding: 4rem 0.5rem;
  }

  section#about .card {
    min-height: 560px;
  }

  .card p {
    font-size: 0.98rem;
  }

  section#about .front,
  section#about .back {
    padding: 1.2rem;
  }

  .heroText {
    font-size: 1.9rem;
  }

  .reviews-panel {
    min-height: 0;
    padding: 44px 20px 48px;
  }

  .review-card {
    width: 300px;
    margin-right: 16px;
  }

  #theme-toggle-container {
    bottom: 12px;
    left: 12px;
    gap: 6px;
  }

  .light-mode-style {
    height: 48px;
    width: 48px;
    font-size: 0.65rem;
  }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  section#about .card:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Capacity

   Shown when every place has been taken (js/capacity.js). The button stays
   where it was and reads as unavailable rather than disappearing, so the card
   keeps its shape and nothing jumps.

   .plan-button sets width:100% and is defined late in this file, so the
   two-class selector below is what wins - source order alone would not.
   --------------------------------------------------------------------------- */
.plan-button.plan-button-full,
.plan-button.plan-button-full:hover {
  border-color: var(--border);
  background-color: var(--surface-alt);
  color: var(--text-soft);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.featured .plan-button.plan-button-full,
.featured .plan-button.plan-button-full:hover {
  border-color: var(--border);
  background-color: var(--surface-alt);
  color: var(--text-soft);
}

.capacity-notice {
  max-width: 44rem;
  margin: 0 auto 18px;
  padding: 14px 20px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-soft);
  border-radius: 12px;
  background-color: var(--surface-alt);
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.5;
  text-align: center;
}

.capacity-notice strong {
  color: var(--heading);
}

.capacity-notice-link {
  display: inline-block;
  margin-top: 6px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.capacity-notice-link:hover {
  color: var(--green-mid);
}