/* ===== Half Eats brand layer (loaded last) ===== */
:root{
  --brand:        #305CDE;  /* royal blue */
  --brand-dark:   #2549B5;  /* hover/dark */
  --brand-darker: #193A8F;  /* pressed/focus ring */
  --brand-btn-lite:#c3d5fa; /* light blue used on BUTTON fills/hover */
  --brand-tint:   #EAF1FF;  /* very-light blue used on SECTION/CARD backgrounds */
}

/* --- Filled primary buttons (common Tailwind reds -> blue) --- */
.bg-rose-500, .bg-red-500, .bg-pink-500,
.bg-rose-600, .bg-red-600, .bg-pink-600,
.from-rose-500, .from-red-500, .from-pink-500,
.to-rose-600,   .to-red-600,   .to-pink-600,
button[class*="bg-rose-"], a[role="button"][class*="bg-rose-"],
button[class*="bg-red-"],  a[role="button"][class*="bg-red-"]{
  background-color: var(--brand) !important;
  --tw-gradient-from: var(--brand) !important;
  --tw-gradient-to:   var(--brand-dark) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  color:#fff !important;
}
.hover\:bg-rose-600:hover, .hover\:bg-red-600:hover, .hover\:bg-pink-600:hover{
  background-color: var(--brand-dark) !important;
}

/* --- Outline & ghost buttons: blue border + blue label --- */
.border-rose-500, .border-rose-600, .border-red-500, .border-red-600, .border-pink-500,
.text-rose-500, .text-rose-600, .text-red-500, .text-red-600, .text-pink-600{
  border-color: var(--brand) !important;
  color: var(--brand) !important;
}

/* When outline/ghost buttons get a light fill, use the BUTTON light: #c3d5fa */
.hover\:bg-rose-50:hover, .hover\:bg-rose-100:hover,
.hover\:bg-red-50:hover,  .hover\:bg-red-100:hover,
button.bg-rose-50, a[role="button"].bg-rose-50,
button.bg-red-50,  a[role="button"].bg-red-50{
  background-color: var(--brand-btn-lite) !important;
}

/* --- Section/card tints that used to be pink: keep the lighter background tint --- */
.bg-rose-50, .bg-rose-100, .bg-red-50, .bg-red-100, .bg-pink-50, .bg-pink-100{
  background-color: var(--brand-tint) !important; /* stays #EAF1FF for cards/blocks */
}

/* Optional: focus states so they look intentional */
.focus\:ring-rose-500:focus, .focus\:ring-red-500:focus, .focus\:ring-pink-500:focus{
  --tw-ring-color: var(--brand-darker) !important;
}

/* ===== Promo CTA: keep solid blue, grow slightly ===== */
:root{ --promo-red: #305CDE; } /* align promo end with brand blue */

main a[href*="/order"]{
  background-image: linear-gradient(90deg, var(--brand) 0%, var(--brand) 100%) !important;
  background-color: transparent !important;
  color:#fff !important;
  border: none !important;
  transform: translateZ(0) scale(1);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, filter .18s ease;
  box-shadow: 0 10px 24px rgba(48,92,222,.18), 0 8px 20px rgba(214,31,60,.12);
}
main a[href*="/order"]:hover{
  transform: scale(1.04);  /* same grow feel */
  background-image: linear-gradient(90deg, var(--brand) 0%, var(--brand) 100%) !important; /* keep solid blue */
  background-color: transparent !important;
  filter: saturate(1.05);
}
main a[href*="/order"]:active { transform: scale(.99); }

/* Guard against Tailwind hover utilities flipping it to solid red */
main a[href*="/order"]:hover[class*="hover:bg-rose-"],
main a[href*="/order"]:hover[class*="hover:bg-red-"],
main a[href*="/order"]:hover[class*="hover:from-"],
main a[href*="/order"]:hover[class*="hover:to-"]{
  background-color: transparent !important;
  --tw-gradient-from: var(--brand) !important;
  --tw-gradient-to:   var(--brand) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  background-image: linear-gradient(90deg, var(--brand), var(--brand)) !important;
}
/* Secondary CTAs → white + blue outline; hover → light-blue tint */
a[href*="how"], a[href*="impact"]{
  background: #fff !important;
  color: var(--brand) !important;
  border: 1.5px solid var(--brand) !important;
  border-radius: 9999px !important;
  background-image: none !important;
  transform: translateZ(0) scale(1);
  transition: background-color .18s ease, color .18s ease,
              transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 8px 18px rgba(48,92,222,.08);
}
a[href*="how"]:hover, a[href*="impact"]:hover{
  background: var(--brand-btn-lite) !important; /* #c3d5fa */
  color: var(--brand) !important;
  transform: scale(1.03);
  box-shadow: 0 10px 24px rgba(48,92,222,.16);
}
a[href*="how"]:active, a[href*="impact"]:active{ transform: scale(.99); }

/* guard against gradient utilities flipping it */
a[href*="how"][class*="hover:bg-"]:hover,
a[href*="how"][class*="from-"], a[href*="how"][class*="to-"],
a[href*="impact"][class*="hover:bg-"]:hover,
a[href*="impact"][class*="from-"], a[href*="impact"][class*="to-"]{
  background-image: none !important;
  --tw-gradient-from: initial !important;
  --tw-gradient-to: initial !important;
  --tw-gradient-stops: initial !important;
}
main a[href*="/order"]{
  position: relative;
  isolation: isolate;               /* halo behind the pill */
}

main a[href*="/order"]::before{
  content: "";
  position: absolute;
  inset: -12px;                     /* halo padding */
  border-radius: 9999px;
  background: radial-gradient(closest-side,
              rgba(48,92,222,.36), rgba(214,31,60,.22), transparent 95%);
  filter: blur(12px);
  z-index: -1;
  transform: scale(.96);
  opacity: .6;
  animation: he-pulse 1s ease-in-out 2;   /* 2s × 4 = ~8s, then stop */
}

/* Faster while interacting */
main a[href*="/order"]:hover::before,
main a[href*="/order"]:focus-visible::before{
  animation: he-pulse .90s ease-in-out infinite;
}

@keyframes he-pulse{
  0%,100% { transform: scale(.96); opacity: .55; }
  50%     { transform: scale(1.06); opacity: 1;   }
}

/* Accessibility + mobile restraint */
@media (prefers-reduced-motion: reduce){
  main a[href*="/order"]::before{ animation: none; opacity: .75; }
}
@media (max-width: 768px){
  main a[href*="/order"]::before{ animation: none; opacity: 0; }
}
:root{ --promo-red:#D61F3C; } /* same red end as hero */

a[href*="/order"]{
  background-image: linear-gradient(90deg, var(--brand) 0%, var(--promo-red) 100%) !important;
  background-color: transparent !important;
  color:#fff !important;
  border:none !important;
  transform: translateZ(0) scale(1);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow: 0 10px 24px rgba(48,92,222,.18), 0 8px 20px rgba(214,31,60,.12);
}
a[href*="/order"]:hover{
  transform: scale(1.04);
  background-image: linear-gradient(90deg, var(--brand) 0%, var(--promo-red) 100%) !important; /* keep gradient */
  filter: saturate(1.05);
}
a[href*="/order"]:active{ transform: scale(.99); }

/* guard against utilities that try to flip it to solid red */
a[href*="/order"][class*="hover:bg-"]:hover,
a[href*="/order"][class*="from-"],
a[href*="/order"][class*="to-"]{
  background-color: transparent !important;
  --tw-gradient-from: var(--brand) !important;
  --tw-gradient-to:   var(--promo-red) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  background-image: linear-gradient(90deg, var(--brand), var(--promo-red)) !important;
}
/* Force "See How It Works" → white default, blue outline/text; hover = light-blue */
a[href*="how"]{
  background:#fff !important;
  color:var(--brand) !important;
  border:1.5px solid var(--brand) !important;
  border-radius:9999px !important;
  background-image:none !important;
  transform:translateZ(0) scale(1);
  transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow:0 8px 18px rgba(48,92,222,.08);
}

/* kill any backgrounds applied on the link OR its inner spans/divs */
a[href*="how"][class*="bg-"],
a[href*="how"] [class*="bg-"],
a[href*="how"][class*="from-"], a[href*="how"][class*="to-"],
a[href*="how"] [class*="from-"], a[href*="how"] [class*="to-"]{
  background:#fff !important;
  background-image:none !important;
}

/* keep children transparent so only the pill changes */
a[href*="how"] *, a[href*="how"]::before, a[href*="how"]::after{
  background:transparent !important;
  background-image:none !important;
}

/* hover tint */
a[href*="how"]:hover{
  background:var(--brand-btn-lite) !important; /* #c3d5fa */
  border-color:var(--brand-dark) !important;
  transform:scale(1.03);
  box-shadow:0 10px 24px rgba(48,92,222,.16);
}
button.text-red-600.border-red-600,
a.text-red-600.border-red-600 {
  background:#fff !important;
  color:var(--brand) !important;
  border-color:var(--brand) !important;
  border-width:1.5px !important;
  border-radius:9999px !important;
  background-image:none !important;
}

/* hover tint */
button.text-red-600.border-red-600:hover,
a.text-red-600.border-red-600:hover,
button.hover\:bg-red-50:hover,
a.hover\:bg-red-50:hover {
  background:var(--brand-btn-lite) !important; /* #c3d5fa */
  color:var(--brand) !important;
  border-color:var(--brand-dark) !important;
}

/* nuke any nested bg utilities that try to repaint it */
button.text-red-600.border-red-600 [class*="bg-"],
a.text-red-600.border-red-600 [class*="bg-"] {
  background:transparent !important;
  background-image:none !important;
}
.text-red-600, .text-rose-600, .text-pink-600,
.text-red-700, .text-rose-700, .text-pink-700{
  color: var(--brand) !important;
}

.border-red-100, .border-red-200, .border-red-300,
.border-rose-100, .border-rose-200, .border-rose-300,
.border-pink-100, .border-pink-200, .border-pink-300{
  border-color: var(--brand) !important;
}

/* light red backgrounds → light blue tint */
.bg-red-50, .bg-red-100, .bg-red-200,
.bg-rose-50, .bg-rose-100, .bg-rose-200,
.bg-pink-50, .bg-pink-100, .bg-pink-200{
  background-color: var(--brand-tint) !important; /* #EAF1FF */
}.border-red-100, .border-red-200, .border-red-300,
.border-rose-100, .border-rose-200, .border-rose-300,
.border-pink-100, .border-pink-200, .border-pink-300{
  border-color: var(--brand) !important;
  border-width: 1.25px !important; /* try 1px if you want it even lighter */
}
/* Trusted-by-students strip → white band + blue top divider + soft fades */
:root { --page-tint: var(--brand-tint); }  /* your light page blue (#EAF1FF) */

/* Target the specific band that used the red/pink gradient and contains the logo cards */
div[class*="bg-gradient"][class*="from-red-50"]:has([class*="ring-blue"]),
div[class*="bg-gradient"][class*="via-red-50"]:has([class*="ring-blue"]),
div[class*="bg-gradient"][class*="to-red-100"]:has([class*="ring-blue"]),
div[class*="bg-gradient"][class*="from-rose-50"]:has([class*="ring-blue"]),
div[class*="bg-gradient"][class*="from-pink-50"]:has([class*="ring-blue"]) {
  position: relative;
  background-color: #fff !important;   /* white band */
  background-image: none !important;   /* kill the red wash */
  border-top: 1.5px solid var(--brand) !important;  /* blue divider */
}

/* thinner divider on mobile */
@media (max-width: 768px){
  div[class*="bg-gradient"][class*="from-red-50"]:has([class*="ring-blue"]),
  div[class*="bg-gradient"][class*="via-red-50"]:has([class*="ring-blue"]),
  div[class*="bg-gradient"][class*="to-red-100"]:has([class*="ring-blue"]),
  div[class*="bg-gradient"][class*="from-rose-50"]:has([class*="ring-blue"]),
  div[class*="bg-gradient"][class*="from-pink-50"]:has([class*="ring-blue"]) {
    border-top-width: 1px !important;
  }
}

/* Soft blends (top & bottom) so the white band fades into the page tint */
div[class*="bg-gradient"][class*="from-red-50"]:has([class*="ring-blue"])::before,
div[class*="bg-gradient"][class*="via-red-50"]:has([class*="ring-blue"])::before,
div[class*="bg-gradient"][class*="to-red-100"]:has([class*="ring-blue"])::before,
div[class*="bg-gradient"][class*="from-rose-50"]:has([class*="ring-blue"])::before,
div[class*="bg-gradient"][class*="from-pink-50"]:has([class*="ring-blue"])::before,
div[class*="bg-gradient"][class*="from-red-50"]:has([class*="ring-blue"])::after,
div[class*="bg-gradient"][class*="via-red-50"]:has([class*="ring-blue"])::after,
div[class*="bg-gradient"][class*="to-red-100"]:has([class*="ring-blue"])::after,
div[class*="bg-gradient"][class*="from-rose-50"]:has([class*="ring-blue"])::after,
div[class*="bg-gradient"][class*="from-pink-50"]:has([class*="ring-blue"])::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
}

div[class*="bg-gradient"][class*="from-red-50"]:has([class*="ring-blue"])::before,
div[class*="bg-gradient"][class*="via-red-50"]:has([class*="ring-blue"])::before,
div[class*="bg-gradient"][class*="to-red-100"]:has([class*="ring-blue"])::before,
div[class*="bg-gradient"][class*="from-rose-50"]:has([class*="ring-blue"])::before,
div[class*="bg-gradient"][class*="from-pink-50"]:has([class*="ring-blue"])::before {
  top: -14px;
  height: 14px;  /* micro-fade */
  background: linear-gradient(to bottom, var(--page-tint), rgba(234,241,255,0));
}

div[class*="bg-gradient"][class*="from-red-50"]:has([class*="ring-blue"])::after,
div[class*="bg-gradient"][class*="via-red-50"]:has([class*="ring-blue"])::after,
div[class*="bg-gradient"][class*="to-red-100"]:has([class*="ring-blue"])::after,
div[class*="bg-gradient"][class*="from-rose-50"]:has([class*="ring-blue"])::after,
div[class*="bg-gradient"][class*="from-pink-50"]:has([class*="ring-blue"])::after {
  bottom: -14px;
  height: 14px;
  background: linear-gradient(to top, var(--page-tint), rgba(234,241,255,0));
}
/* === Fix residual red wash in "Trusted by students" band === */
/* Scope: the gradient wrapper that has red/rose/pink AND contains the blue-ring logo cards */
div[class*="bg-gradient-to-"][class*="from-red-"]:has([class*="ring-blue"]),
div[class*="bg-gradient-to-"][class*="via-red-"]:has([class*="ring-blue"]),
div[class*="bg-gradient-to-"][class*="to-red-"]:has([class*="ring-blue"]),
div[class*="bg-gradient-to-"][class*="from-rose-"]:has([class*="ring-blue"]),
div[class*="bg-gradient-to-"][class*="via-rose-"]:has([class*="ring-blue"]),
div[class*="bg-gradient-to-"][class*="to-rose-"]:has([class*="ring-blue"]),
div[class*="bg-gradient-to-"][class*="from-pink-"]:has([class*="ring-blue"]),
div[class*="bg-gradient-to-"][class*="via-pink-"]:has([class*="ring-blue"]),
div[class*="bg-gradient-to-"][class*="to-pink-"]:has([class*="ring-blue"]) {
  position: relative;
  background-color: #fff !important;     /* pure white band */
  background-image: none !important;      /* kill gradient */
  /* also neutralize Tailwind gradient variables just in case */
  --tw-gradient-from: #fff !important;
  --tw-gradient-to:   #fff !important;
  --tw-gradient-stops:#fff, #fff !important;
}

/* If a nested child also has a red gradient, neutralize it too (still scoped to the same band) */
div[class*="bg-gradient-to-"][class*="from-red-"]:has([class*="ring-blue"])  [class*="bg-gradient-to-"],
div[class*="bg-gradient-to-"][class*="via-red-"]:has([class*="ring-blue"])   [class*="bg-gradient-to-"],
div[class*="bg-gradient-to-"][class*="to-red-"]:has([class*="ring-blue"])    [class*="bg-gradient-to-"],
div[class*="bg-gradient-to-"][class*="from-rose-"]:has([class*="ring-blue"]) [class*="bg-gradient-to-"],
div[class*="bg-gradient-to-"][class*="from-pink-"]:has([class*="ring-blue"]) [class*="bg-gradient-to-"]{
  background-color: #fff !important;
  background-image: none !important;
  --tw-gradient-from: #fff !important;
  --tw-gradient-to:   #fff !important;
  --tw-gradient-stops:#fff, #fff !important;
}
/* Kill the red gradient on the "Trusted by students" band */
div.bg-gradient-to-b.overflow-hidden[class*="from-red-50"][class~="via-white"][class~="to-white"]{
  background-color: #fff !important;
  background-image: none !important;

  /* Neutralize Tailwind gradient variables in case they're used */
  --tw-gradient-from: #fff !important;
  --tw-gradient-to:   #fff !important;
  --tw-gradient-stops: #fff, #fff !important;
}

/* If a nested child inside that band also has a gradient, nuke it too */
div.bg-gradient-to-b.overflow-hidden[class*="from-red-50"][class~="via-white"][class~="to-white"] [class*="bg-gradient-to-"]{
  background-color: #fff !important;
  background-image: none !important;
  --tw-gradient-from: #fff !important;
  --tw-gradient-to:   #fff !important;
  --tw-gradient-stops: #fff, #fff !important;
}
/* How-it-works cards: make title text turn Half Eats blue on hover (keep icon/gradient unchanged) */
#how-it-works .group:hover [class*="group-hover:text-red-"],
#how-it-works .group:hover .text-red-600,
#how-it-works .group:hover .text-rose-600,
#how-it-works .group:hover .text-pink-600,
#how-it-works [class*="hover:text-red-"]:hover {
  color: var(--brand) !important;   /* #305CDE */
}
/* ===== FAQ hover: bump/tint the left icon pill ===== */
button[aria-expanded]:hover .rounded-full,
[role="button"]:hover .rounded-full {
  /* light color bump across all icon pills */
  filter: saturate(1.15) brightness(1.02);
  transform: scale(1.06);
  transition: transform .15s ease, filter .15s ease;
}

/* Optional: nicer color nudges for common Tailwind color families */
button[aria-expanded]:hover .rounded-full[class*="text-purple"],
[role="button"]:hover       .rounded-full[class*="text-purple"]{
  background-color:#EDE9FE !important; /* purple-100 */
  color:#6D28D9 !important;            /* purple-700/600 */
}
button[aria-expanded]:hover .rounded-full[class*="text-yellow"],
[role="button"]:hover       .rounded-full[class*="text-yellow"]{
  background-color:#FEF9C3 !important; /* yellow-100 */
  color:#CA8A04 !important;            /* yellow-600 */
}

/* ======================= Hero cleanup (lander only) ======================= */
/* Simplify hero background to a soft blue tint and normalize the right card */
body.is-lander main section:first-of-type{
  background: linear-gradient(180deg, #F8FAFC 0%, #EEF2FF 100%) !important;
}
/* Price card on the right: clean white card with subtle elevation */
body.is-lander main section:first-of-type .bg-white{
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 22px rgba(2,6,23,.08) !important;
}
/* Use green only for the numeric savings inside the hero card */
body.is-lander main section:first-of-type [class*="text-green-"],
body.is-lander main section:first-of-type .text-green{
  color: #16A34A !important;
}

/* Map legacy hero CTAs to the new button look without changing markup */
body.is-lander main section:first-of-type a[href*="/order"],
body.is-lander main section:first-of-type a[href*="how"],
body.is-lander main section:first-of-type a[href*="impact"]{
  padding: 10px 16px; border-radius: 9999px; font-weight: 700;
}

/* ======================= Trusted logos band ======================= */
/* Make the band pure white (already neutralized above) and normalize logo chips */
div.bg-gradient-to-b.overflow-hidden[class*="from-red-50"][class~="via-white"][class~="to-white"] [class*="ring-blue"],
div.bg-gradient-to-b.overflow-hidden[class*="from-rose-50"][class~="via-white"][class~="to-white"] [class*="ring-blue"],
div.bg-gradient-to-b.overflow-hidden[class*="from-pink-50"][class~="via-white"][class~="to-white"] [class*="ring-blue"]{
  background:#fff !important;
  border:1px solid #E5E7EB !important;
  border-radius:12px !important;
  box-shadow:none !important;
}
div.bg-gradient-to-b.overflow-hidden[class*="from-red-50"][class~="via-white"][class~="to-white"] [class*="ring-blue"] img,
div.bg-gradient-to-b.overflow-hidden[class*="from-rose-50"][class~="via-white"][class~="to-white"] [class*="ring-blue"] img,
div.bg-gradient-to-b.overflow-hidden[class*="from-pink-50"][class~="via-white"][class~="to-white"] [class*="ring-blue"] img{
  max-height:42px; width:auto; object-fit:contain;
  filter:grayscale(100%) brightness(.95);
}
@media (max-width:768px){
  div.bg-gradient-to-b.overflow-hidden[class*="from-red-50"][class~="via-white"][class~="to-white"] .grid,
  div.bg-gradient-to-b.overflow-hidden[class*="from-rose-50"][class~="via-white"][class~="to-white"] .grid,
  div.bg-gradient-to-b.overflow-hidden[class*="from-pink-50"][class~="via-white"][class~="to-white"] .grid{
    overflow-x:auto; display:flex; gap:10px; padding-bottom:8px;
    scroll-snap-type:x mandatory;
  }
  div.bg-gradient-to-b.overflow-hidden[class*="from-red-50"][class~="via-white"][class~="to-white"] .grid > *,
  div.bg-gradient-to-b.overflow-hidden[class*="from-rose-50"][class~="via-white"][class~="to-white"] .grid > *,
  div.bg-gradient-to-b.overflow-hidden[class*="from-pink-50"][class~="via-white"][class~="to-white"] .grid > *{
    flex:0 0 auto; scroll-snap-align:start;
  }
}

/* ======================= How it works cards ======================= */
#how-it-works .group, #how-it-works [class*="rounded-"]{
  background:#fff !important; border:1px solid #E5E7EB !important;
  border-radius:12px !important; box-shadow:0 8px 20px rgba(2,6,23,.06) !important;
}
#how-it-works [class*="bg-rose-"], #how-it-works [class*="bg-red-"],
#how-it-works [class*="bg-pink-"], #how-it-works [class*="bg-green-50"],
#how-it-works [class*="bg-yellow-50"], #how-it-works [class*="bg-blue-50"]{
  background:#fff !important;
}

/* Step numbers: number inside the existing white peg (rounded square) */
#how-it-works{ position: relative; counter-reset: he-step; }
#how-it-works .group{ position: relative; }
/* We render the number inside the existing peg element (data-peg), not with ::before. */
#how-it-works .group::before{ content:none !important; }
/* Peg: keep its original white square visuals; only overlay a number span */
#how-it-works [data-peg]{ position: relative; }
#how-it-works [data-peg] .he-step-no{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#2563EB !important; font-weight:800 !important; font-size:16px !important; line-height:1; pointer-events:none;
  z-index:2147483646 !important; text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
/* If the peg already contains a span with white text (desktop variant), neutralize it */
#how-it-works [data-peg] > span:not(.he-step-no){ color:transparent !important; }
@media (max-width: 768px){
  #how-it-works [data-peg] .he-step-no{ font-size:14px !important; }
}

/* Hover/focus lift + pill ring darken */
#how-it-works .group{ transition: box-shadow .18s ease, transform .18s ease; }
#how-it-works .group:hover, #how-it-works .group:focus-within{
  box-shadow:0 12px 28px rgba(2,6,23,.12) !important; transform:translateY(-2px);
}
#how-it-works .group:hover::before, #how-it-works .group:focus-within::before{ box-shadow:none; }
@media (prefers-reduced-motion: reduce){
  #how-it-works .group{ transition:none; }
}

/* Remove any unintended icon halos/rings */
#how-it-works .group svg, #how-it-works .group img{
  box-shadow:none !important; background:transparent !important;
}

/* ======================= Yellow info strip ======================= */
body.is-lander .bg-yellow-50, body.is-lander .bg-amber-50, body.is-lander .bg-yellow-100{
  border:1px solid #FDE68A !important; box-shadow:none !important; border-radius:12px !important;
}

/* ======================= Testimonials ======================= */
/* Normalize testimonial/review cards to white 12px with subtle shadow */
body.is-lander [class*="testimonial" i] article,
body.is-lander [class*="testimonial" i] figure,
body.is-lander [class*="reviews" i] article,
body.is-lander [class*="reviews" i] figure,
body.is-lander [data-testimonials] > *{
  background:#fff !important; border:1px solid #E5E7EB !important;
  border-radius:12px !important; box-shadow:0 8px 20px rgba(2,6,23,.06) !important;
}
body.is-lander [class*="testimonial" i] img,
body.is-lander [class*="reviews" i] img{
  border-radius:12px !important; object-fit:cover; width:100%; height:auto;
}
/* Carousel dots spacing */
body.is-lander [class*="dots" i] button{ width:8px; height:8px; border-radius:9999px; background:#CBD5E1; }
body.is-lander [class*="dots" i] button[aria-current="true"]{ background:#2563EB; }

/* ======================= FAQ Accordion ======================= */
/* Single style for any FAQ-like accordion buttons */
body.is-lander button[aria-expanded]{
  background:#fff; border:1px solid #E5E7EB; border-left:0; border-right:0;
  padding:14px 16px; width:100%; text-align:left; font-weight:700; color:#111827;
}
body.is-lander button[aria-expanded] + *{ padding:10px 16px; }
body.is-lander button[aria-expanded] .rounded-full{ transition:transform .15s ease; }
body.is-lander button[aria-expanded="true"] .rounded-full{ transform:rotate(90deg); }

/* ======================= Mid-page CTA ======================= */
/* Ensure mid CTA uses the blue primary treatment */
body.is-lander section a[href*="/order"].primary-cta,
body.is-lander section a[href*="/order"]{
  background-image: linear-gradient(90deg,#2563EB,#1D4ED8) !important; color:#fff !important; border:1px solid #1D4ED8 !important;
}

/* ======================= Footer polish ======================= */
body.is-lander footer{
  background:#FFFFFF !important; border-top:1px solid #E5E7EB !important;
}
body.is-lander footer a{ color:#6B7280 !important; }
body.is-lander footer a:hover{ color:#2563EB !important; text-decoration:underline; }
body.is-lander footer .btn, body.is-lander footer a[href*="/order"]{
  background-image: linear-gradient(90deg,#2563EB,#1D4ED8) !important; color:#fff !important;
}

/* ======================= Spacing & Type ======================= */
body.is-lander h1{ font-size:44px; line-height:52px; font-weight:800; color:#111827; }
body.is-lander h2{ font-size:32px; line-height:40px; font-weight:800; color:#111827; }
body.is-lander h3{ font-size:24px; line-height:32px; font-weight:700; color:#111827; }
@media (max-width:768px){
  body.is-lander h1{ font-size:32px; line-height:38px; }
  body.is-lander h2{ font-size:24px; line-height:30px; }
  body.is-lander h3{ font-size:20px; line-height:26px; }
}
/* Section padding rhythm */
body.is-lander main section{ padding-top:64px; padding-bottom:64px; }
@media (max-width:768px){ body.is-lander main section{ padding-top:36px; padding-bottom:36px; } }

/* ======================= Mini FAQ trio (Too Good To Be True?) ======================= */
.hf-mini-faq .grid > *,
.hf-mini-faq [class*="grid"] > *,
.hf-mini-faq .card, .hf-mini-faq article, .hf-mini-faq .box{
  background:#fff !important;
  border:1px solid #E5E7EB !important;
  border-radius:12px !important;
  box-shadow:0 8px 20px rgba(2,6,23,.06) !important;
}
.hf-mini-faq [class*="text-green"], .hf-mini-faq .text-green{ color:#16A34A !important; }
.hf-mini-faq [class*="text-red"],   .hf-mini-faq .text-red{ color:#2563EB !important; }
button[aria-expanded]:hover .rounded-full[class*="text-amber"],
[role="button"]:hover       .rounded-full[class*="text-amber"]{
  background-color:#FEF3C7 !important; /* amber-100 */
  color:#D97706 !important;            /* amber-600 */
}
button[aria-expanded]:hover .rounded-full[class*="text-sky"],
[role="button"]:hover       .rounded-full[class*="text-sky"]{
  background-color:#E0F2FE !important; /* sky-100 */
  color:#0EA5E9 !important;            /* sky-500/600 */
}
button[aria-expanded]:hover .rounded-full[class*="text-rose"],
[role="button"]:hover       .rounded-full[class*="text-rose"]{
  background-color:#EAF1FF !important; /* rose-100 */
  color:#305CDE !important;            /* rose-600 */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  button[aria-expanded]:hover .rounded-full,
  [role="button"]:hover .rounded-full { transform:none; }
}


/* @faq-hover — FAQ icon chips brighten in their own accent on hover */
button:hover .rounded-full[class*="text-violet-6"]{ background-color:#EDE9FE !important; color:#7C3AED !important; }
button:hover .rounded-full[class*="text-yellow-6"]{ background-color:#FEF9C3 !important; color:#EAB308 !important; }
button:hover .rounded-full[class*="text-orange-6"]{ background-color:#FFEDD5 !important; color:#F97316 !important; }
button:hover .rounded-full[class*="text-blue-6"]  { background-color:#DBEAFE !important; color:#2563EB !important; }
button:hover .rounded-full[class*="text-green-6"] { background-color:#DCFCE7 !important; color:#16A34A !important; }
button:hover .rounded-full[class*="text-rose-6"]  { background-color:#EAF1FF !important; color:#305CDE !important; }

/* explicit accent token used by the script below (clock icon) */
.rounded-full[data-accent="rose"]{
  background-color:#EAF1FF !important;
  color:#D61F3C !important;
}

/* =======================
   Half Eats — FAQ chip hover accents
   - On hover, tint the icon glyph inside the left pill to match its accent.
   - Clock row (arrival ETA) is light red by default.
=======================*/

/* Smooth color transition for any glyph we touch */
button [class*="bg-"] > svg,
button [class*="text-"] > svg { transition: color .15s ease !important; }

/* Yellow/amber */
button:hover [class*="bg-yellow-"] > svg,
button:hover [class*="text-yellow"]  > svg { color:#eab308 !important; }

/* Green */
button:hover [class*="bg-green-"]  > svg,
button:hover [class*="text-green"] > svg { color:#16a34a !important; }

/* Violet */
button:hover [class*="bg-violet-"] > svg,
button:hover [class*="text-violet"] > svg { color:#7c3aed !important; }

/* Orange */
button:hover [class*="bg-orange-"] > svg,
button:hover [class*="text-orange"] > svg { color:#f97316 !important; }

/* Blue — brand */
button:hover [class*="bg-blue-"] > svg,
button:hover [class*="text-blue"] > svg { color:#305CDE !important; }

/* Clock row: make the icon light red by default (rose-400) */
button[data-faq-clock] [class*="bg-"] > svg,
button[data-faq-clock] [class*="text-"] > svg { color:#305CDE !important; }
/* @faq-tabs — only the active pill is filled */
[role="tablist"] [role="tab"]{
  background:#fff !important;
  color:var(--brand) !important;
  border:1px solid var(--brand-btn-lite) !important;
}

[role="tablist"] [role="tab"][aria-selected="true"],
[role="tablist"] [role="tab"][data-state="active"],
[role="tablist"] .active{
  background:var(--brand) !important;
  color:#fff !important;
  border-color:var(--brand) !important;
}

[role="tablist"] [role="tab"]:not([aria-selected="true"]):hover{
  background:var(--brand-tint) !important;
}
/* @faq-fix — don't paint buttons blue just because they have a hover:bg-rose-* */
button[class*="bg-white"][class*="hover:bg-rose-"],
button[class*="bg-white"][class*="hover:bg-red-"]{
  background:#fff !important;
  color:#0f172a !important;
  border:1px solid var(--brand-btn-lite) !important;
}
button[class*="bg-white"][class*="hover:bg-rose-"]:hover,
button[class*="bg-white"][class*="hover:bg-red-"]:hover{
  background:var(--brand-tint) !important; /* light blue hover */
}
/* Half Eats — FAQ styles */
/* =======================
   Half Eats — FAQ icon glyph hover accents
   - On hover, tint the left-pill icon glyph to match its accent.
   - Clock row (arrival ETA) uses a light red glyph by default.
=======================*/

/* Smooth color transition for any glyph we touch */
button [class*="bg-"] > svg,
button [class*="text-"] > svg { transition: color .15s ease !important; }

/* Yellow/amber */
button:hover [class*="bg-yellow-"] > svg,
button:hover [class*="text-yellow"]  > svg { color:#eab308 !important; }

/* Green */
button:hover [class*="bg-green-"]  > svg,
button:hover [class*="text-green"] > svg { color:#16a34a !important; }

/* Violet */
button:hover [class*="bg-violet-"] > svg,
button:hover [class*="text-violet"] > svg { color:#7c3aed !important; }

/* Orange */
button:hover [class*="bg-orange-"] > svg,
button:hover [class*="text-orange"] > svg { color:#f97316 !important; }

/* Blue — brand */
button:hover [class*="bg-blue-"] > svg,
button:hover [class*="text-blue"] > svg { color:#305CDE !important; }

/* Clock row: make the icon light red by default (rose-400 look) */
button[data-faq-clock] [class*="bg-"] > svg,
button[data-faq-clock] [class*="text-"] > svg { color:#305CDE !important; }

/* =======================
   Half Eats — FAQ tabs (only active is filled)
=======================*/
[role="tablist"] [role="tab"]{
  background:#fff !important;
  color:#305CDE !important;
  border:1px solid #c3d5fa !important;
}
[role="tablist"] [role="tab"][aria-selected="true"],
[role="tablist"] [role="tab"][data-state="active"],
[role="tablist"] .active{
  background:#305CDE !important;
  color:#fff !important;
  border-color:#305CDE !important;
}
[role="tablist"] [role="tab"]:not([aria-selected="true"]):hover{
  background:#EAF1FF !important;
}

/* =======================
   Half Eats — FAQ items (closed = white; hover = tint)
=======================*/
button[aria-expanded="false"],
button[data-state="closed"]{
  background:#fff !important;
  color:#0f172a !important;
  border:1px solid #c3d5fa !important;
}
button[aria-expanded="false"]:hover,
button[data-state="closed"]:hover{
  background:#EAF1FF !important;
}
button[aria-expanded="false"] [class*="bg-blue-"],
button[data-state="closed"]    [class*="bg-blue-"],
button[aria-expanded="false"] [class*="from-blue"],
button[data-state="closed"]    [class*="from-blue"],
button[aria-expanded="false"] [class*="to-blue"],
button[data-state="closed"]    [class*="to-blue"],
button[aria-expanded="false"] [class*="bg-gradient-to-"],
button[data-state="closed"]    [class*="bg-gradient-to-"]{
  background: transparent !important;
  background-image: none !important;
  --tw-gradient-from: initial !important;
  --tw-gradient-to: initial !important;
  --tw-gradient-stops: initial !important;
}
button[aria-expanded="false"] [class*="text-white"],
button[data-state="closed"]    [class*="text-white"]{
  color:#0f172a !important;
}
/* open item subtle state */
button[aria-expanded="true"],
button[data-state="open"]{
  background:#EAF1FF !important;
  border-color:#c3d5fa !important;
}
[data-he-soft-card]{
  background-image: linear-gradient(135deg, var(--brand-tint) 0%, #EAF1FF 100%) !important;
}
/* Half Eats — FAQ styles + soft card */
/* =======================
   Half Eats — FAQ icon glyph hover accents
   - On hover, tint the left-pill icon glyph to match its accent.
   - Clock row (arrival ETA) uses a light-red glyph by default.
=======================*/

/* Smooth color transition for any glyph we touch */
button [class*="bg-"] > svg,
button [class*="text-"] > svg { transition: color .15s ease !important; }

/* Yellow/amber */
button:hover [class*="bg-yellow-"] > svg,
button:hover [class*="text-yellow"]  > svg { color:#eab308 !important; }

/* Green */
button:hover [class*="bg-green-"]  > svg,
button:hover [class*="text-green"] > svg { color:#16a34a !important; }

/* Violet */
button:hover [class*="bg-violet-"] > svg,
button:hover [class*="text-violet"] > svg { color:#7c3aed !important; }

/* Orange */
button:hover [class*="bg-orange-"] > svg,
button:hover [class*="text-orange"] > svg { color:#f97316 !important; }

/* Blue — brand */
button:hover [class*="bg-blue-"] > svg,
button:hover [class*="text-blue"] > svg { color:#305CDE !important; }

/* Clock row default glyph color */
button[data-faq-clock] [class*="bg-"] > svg,
button[data-faq-clock] [class*="text-"] > svg { color:#305CDE !important; }

/* --- FAQ tabs: only the active pill is filled --- */
[role="tablist"] [role="tab"]{
  background:#fff !important;
  color:#305CDE !important;
  border:1px solid #c3d5fa !important;
}
[role="tablist"] [role="tab"][aria-selected="true"],
[role="tablist"] [role="tab"][data-state="active"],
[role="tablist"] .active{
  background:#305CDE !important;
  color:#fff !important;
  border-color:#305CDE !important;
}
[role="tablist"] [role="tab"]:not([aria-selected="true"]):hover{
  background:#EAF1FF !important;
}

/* --- FAQ items: closed = white; hover = light tint; open = subtle tint --- */
button[aria-expanded="false"],
button[data-state="closed"]{
  background:#fff !important;
  color:#0f172a !important;
  border:1px solid #c3d5fa !important;
}
button[aria-expanded="false"]:hover,
button[data-state="closed"]:hover{
  background:#EAF1FF !important;
}
button[aria-expanded="false"] [class*="bg-blue-"],
button[data-state="closed"]    [class*="bg-blue-"],
button[aria-expanded="false"] [class*="from-blue"],
button[data-state="closed"]    [class*="from-blue"],
button[aria-expanded="false"] [class*="to-blue"],
button[data-state="closed"]    [class*="to-blue"],
button[aria-expanded="false"] [class*="bg-gradient-to-"],
button[data-state="closed"]    [class*="bg-gradient-to-"]{
  background: transparent !important;
  background-image: none !important;
  --tw-gradient-from: initial !important;
  --tw-gradient-to: initial !important;
  --tw-gradient-stops: initial !important;
}
button[aria-expanded="false"] [class*="text-white"],
button[data-state="closed"]    [class*="text-white"]{
  color:#0f172a !important;
}
button[aria-expanded="true"],
button[data-state="open"]{
  background:#EAF1FF !important;
  border-color:#c3d5fa !important;
}

/* --- Discount card: soften gradient to a tint --- */
[data-he-soft-card]{
  background-image: linear-gradient(135deg, var(--brand-tint, #EAF1FF) 0%, #EAF1FF 100%) !important;
}
/* === Kill the DataSlash promo card entirely === */
a[href*="dataslash" i]{
  display: none !important;
}

/* === Soften the “Discounted Food Delivery” card to a tint === */
/* Targets the clickable card that links to the food-delivery flow */
a[href*="/order/food-delivery" i]{
  background-image: linear-gradient(135deg, var(--brand-tint, #EAF1FF) 0%, #EAF1FF 100%) !important;
  /* optional: lighter border to match the tint */
  border-color: #c3d5fa !important;
}

/* Many builds add a gradient overlay via ::before — neutralize it */
a[href*="/order/food-delivery" i]::before{
  background: none !important;
  background-image: none !important;
}

/* Keeps text readable over the lighter tint (tweak if you prefer) */
a[href*="/order/food-delivery" i] h3,
a[href*="/order/food-delivery" i] p{
  color: #0f172a !important;
}
/* Softer, tintier gradient for the Discounted Food Delivery card */
:is(a[href="/order/food-delivery"], a[href*="/order/food-delivery" i]){
  /* much lighter stops */
  --tw-gradient-from: rgba(48, 92, 222, 0.06) !important;  /* brand blue @ 6% */
  --tw-gradient-to:   rgba(225, 29, 72,  0.08) !important;  /* rose @ 8%   */
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;

  /* fallback for static gradients */
  background-image: linear-gradient(135deg,
                       rgba(48, 92, 222, 0.06),
                       rgba(225, 29, 72,  0.08)) !important;
}

/* If the build uses an overlay, keep it ultra-light */
:is(a[href="/order/food-delivery"], a[href*="/order/food-delivery" i])::before{
  background-image: linear-gradient(135deg,
                       rgba(48, 92, 222, 0.05),
                       rgba(225, 29, 72,  0.06)) !important;
}

/* Ensure text stays readable over the lighter tint */
:is(a[href="/order/food-delivery"], a[href*="/order/food-delivery" i]) h2,
:is(a[href="/order/food-delivery"], a[href*="/order/food-delivery" i]) p{
  color:#0f172a !important;
}


#philanthropy-desktop { display: none !important; }
main .flex.flex-col.lg\:flex-row { display: none !important; }
main .bg-gradient-to-br.from-rose-50.to-red-50.rounded-2xl { display: none !important; }
/* @he-logo-hover: flip colors on brand wordmark */
nav a.flex-shrink-0.group > span:nth-of-type(1) { /* HALF default */
  color: #111 !important;
}
nav a.flex-shrink-0.group > span:nth-of-type(2) { /* EATS default */
  color: var(--brand) !important; /* #305CDE */
}

/* On hover: HALF → blue, EATS → black */
nav a.flex-shrink-0.group:hover > span:nth-of-type(1) {
  color: var(--brand) !important;
}
nav a.flex-shrink-0.group:hover > span:nth-of-type(2) {
  color: #111 !important;
}

/* Force PLACE ORDER CTA to solid blue everywhere */
nav a[href="/order"], nav a[href="/order/food-delivery"], nav a[href="/order"].hf-cta-primary, nav a[href="/order/food-delivery"].hf-cta-primary{
  background-image:none!important;
  background-color:#2563eb!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(37,99,235,.35)!important;
  border:0!important;
}
nav a[href="/order"]:hover, nav a[href="/order/food-delivery"]:hover, nav a[href="/order"].hf-cta-primary:hover, nav a[href="/order/food-delivery"].hf-cta-primary:hover{
  filter:brightness(.97)!important;
}
nav a[href="/order"]:active, nav a[href="/order/food-delivery"]:active, nav a[href="/order"].hf-cta-primary:active, nav a[href="/order/food-delivery"].hf-cta-primary:active{
  transform:translateY(1px)!important;
}

/* (optional) keep the slash icon blue even if it has text-red-600 */
nav a.flex-shrink-0.group svg.lucide-slash {
  color: var(--brand) !important;
}
/* Wordmark: HALF/EATS hover flip (matches actual DOM: <a.group><svg/><span>HALF <span>EATS</span></span></a>) */

/* defaults */
nav a.flex-shrink-0.group > span {            /* HALF */
  color: #111 !important;
}
nav a.flex-shrink-0.group > span > span {      /* EATS */
  color: var(--brand) !important; /* #305CDE */
}

/* on hover: HALF → blue, EATS → black */
nav a.flex-shrink-0.group:hover > span {
  color: var(--brand) !important;
}
nav a.flex-shrink-0.group:hover > span > span {
  color: #111 !important;
}

/* keep the slash icon blue */
nav a.flex-shrink-0.group svg.lucide-slash {
  color: var(--brand) !important;
}
nav a.flex-shrink-0.group svg.lucide-slash{
  width: 2rem; height: 2rem; margin-right: .5rem;
  background: url("/brand/Half Eats-mark.svg") center/contain no-repeat;
  stroke: transparent !important;
  fill: transparent !important;
  color: transparent !important;
}
main .inline-flex.items-center.rounded-full.mb-4.bg-red-100.border-red-200 {
  display: none !important;
}
/* === Half Eats – Theme tokens (light default) === */
:root{
  --he-bg: #F5F7FF;
  --he-surface: #FFFFFF;
  --he-card: #FFFFFF;
  --he-text: #111111;
  --he-muted: #6B7280;
  --he-border: #E5E7EB;
  --he-brand: #305CDE;
  --he-brand-contrast: #FFFFFF;
}

/* Dark tokens */
html[data-theme="dark"]{
  --he-bg: #0C111B;
  --he-surface: #0F172A;
  --he-card: #111827;
  --he-text: #E5E7EB;
  --he-muted: #9CA3AF;
  --he-border: #1F2937;
  --he-brand: #5B82FF;
  --he-brand-contrast: #0B1220;
}

/* Base flips */
[data-theme="dark"] body { background: var(--he-bg); color: var(--he-text); }

/* Common surfaces */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .from-white,
[data-theme="dark"] .via-white,
[data-theme="dark"] .to-white{
  background-color: var(--he-surface) !important;
  background-image: none !important;
}

/* Cards */
[data-theme="dark"] main .rounded-xl,
[data-theme="dark"] main .rounded-2xl,
[data-theme="dark"] main .rounded-3xl,
[data-theme="dark"] main .shadow, 
[data-theme="dark"] main .shadow-lg, 
[data-theme="dark"] main .shadow-xl{
  background-color: var(--he-card) !important;
}

/* Text + borders */
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800{ color: var(--he-text) !important; }
[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-gray-600{ color: var(--he-muted) !important; }
[data-theme="dark"] .border-gray-100,
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300{ border-color: var(--he-border) !important; }

/* Big gradients → neutral slate in dark */
[data-theme="dark"] .bg-gradient-to-b,
[data-theme="dark"] .bg-gradient-to-br,
[data-theme="dark"] .bg-gradient-to-r{
  background-image: linear-gradient(180deg, #0C111B 0%, #0F172A 100%) !important;
}

/* Toggle button */
.he-theme-toggle{
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--he-border);
  border-radius: 9999px; margin-left: .5rem;
  background: var(--he-surface); color: var(--he-text);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.he-theme-toggle:hover{ filter: brightness(1.05); }
.he-theme-toggle .he-moon{ display: none; }
html[data-theme="dark"] .he-theme-toggle .he-sun{ display: none; }
html[data-theme="dark"] .he-theme-toggle .he-moon{ display: inline; }

/* Optional: if you add a dark version of the header mark
html[data-theme="dark"] nav a.flex-shrink-0.group::before{
  background-image: url("/assets/brand/Half Eats-mark-dark.svg");
}
*/
/* ================================
   Half Eats — Theme System (v1)
   ================================ */

/* Tokens (light) */
:root{
  --he-bg: #F5F7FF;
  --he-surface: #FFFFFF;
  --he-card: #FFFFFF;
  --he-text: #111111;
  --he-muted: #6B7280;
  --he-border: #E5E7EB;
  --he-brand: #305CDE;
  --he-brand-contrast: #FFFFFF;
  --he-link: #305CDE;
}

/* Tokens (dark) */
html[data-theme="dark"]{
  color-scheme: dark;
  --he-bg: #0C111B;
  --he-surface: #0F172A;
  --he-card: #111827;
  --he-text: #E5E7EB;
  --he-muted: #9CA3AF;
  --he-border: #1F2937;
  --he-brand: #5B82FF;            /* slightly brighter blue for dark */
  --he-brand-contrast: #0B1220;   /* text-on-brand if you need dark text */
  --he-link: #7CA1FF;
}

/* Base + text */
[data-theme="dark"] body{ background: var(--he-bg) !important; color: var(--he-text) !important; }
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,[data-theme="dark"] h4{ color: var(--he-text) !important; }
[data-theme="dark"] p, [data-theme="dark"] li, [data-theme="dark"] small{ color: var(--he-muted) !important; }
[data-theme="dark"] a{ color: var(--he-link) !important; }

/* Surfaces: kill bright whites & white gradients */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .from-white,
[data-theme="dark"] .via-white,
[data-theme="dark"] .to-white{
  background-color: var(--he-surface) !important;
  background-image: none !important;
}

/* Cards & common containers */
[data-theme="dark"] main .rounded-xl,
[data-theme="dark"] main .rounded-2xl,
[data-theme="dark"] main .rounded-3xl,
[data-theme="dark"] main .shadow,
[data-theme="dark"] main .shadow-lg,
[data-theme="dark"] main .shadow-xl{
  background-color: var(--he-card) !important;
}

/* Dividers & hairlines */
[data-theme="dark"] .border-gray-100,
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300{ border-color: var(--he-border) !important; }

/* Big section gradients → neutral slate in dark */
[data-theme="dark"] .bg-gradient-to-b,
[data-theme="dark"] .bg-gradient-to-br,
[data-theme="dark"] .bg-gradient-to-r{
  background-image: linear-gradient(180deg, #0C111B 0%, #0F172A 100%) !important;
}

/* Links/buttons focus ring (visible on dark) */
[data-theme="dark"] :focus-visible{
  outline: 2px solid var(--he-brand) !important;
  outline-offset: 2px;
}

/* ======================================================
   Component skins (powered by tags we add in rebrand.js)
   ====================================================== */

/* Primary CTA ("Get Savings Now!") */
.he-cta{
  color: var(--he-brand-contrast) !important;
  background-image: linear-gradient(90deg, var(--he-brand) 0%, #6C2BD9 100%) !important;
  border-color: transparent !important;
}
/* Secondary CTA ("See How It Works") */
.he-cta-secondary{
  background: transparent !important;
  color: var(--he-text) !important;
  border: 1px solid var(--he-border) !important;
}
html[data-theme="dark"] .he-cta-secondary:hover{
  background: rgba(255,255,255,0.04) !important;
}

/* Price card on the right */
[data-he-price-card]{
  background: var(--he-card) !important;
  color: var(--he-text) !important;
  border-color: var(--he-border) !important;
}

/* "You Save" success chip */
[data-he-success-chip]{
  background: rgba(73,220,134,0.12) !important; /* green-500 on dark */
  color: #49DC86 !important;
  border-color: rgba(73,220,134,0.22) !important;
}

/* Testimonials slider surface + dots */
[data-he-testimonials]{
  background: var(--he-surface) !important;
  color: var(--he-text) !important;
  border-color: var(--he-border) !important;
}
html[data-theme="dark"] [data-he-testimonials] .dot,
html[data-theme="dark"] [data-he-testimonials] .swiper-pagination-bullet{
  background: var(--he-muted) !important;
  opacity: .6 !important;
}
html[data-theme="dark"] [data-he-testimonials] .dot-active,
html[data-theme="dark"] [data-he-testimonials] .swiper-pagination-bullet-active{
  background: var(--he-brand) !important; opacity: 1 !important;
}

/* FAQ */
[data-he-faq]{
  background: var(--he-surface) !important;
  color: var(--he-text) !important;
  border-color: var(--he-border) !important;
}
html[data-theme="dark"] [data-he-faq] .faq-row{
  background: var(--he-card) !important;
  border-color: var(--he-border) !important;
}

/* Chips/pills that used red tints → neutral/brand on dark */
html[data-theme="dark"] .bg-red-50,
html[data-theme="dark"] .bg-rose-50{
  background-color: rgba(124,161,255,0.08) !important; /* soft brand tint */
  color: var(--he-text) !important;
  border-color: var(--he-border) !important;
}
/* ================================
   Half Eats — Dark Mode Polish Pack
   (append at end of dist/brand.css)
   ================================ */

/* 1) Clearer dark tokens (depth + contrast) */
html[data-theme="dark"]{
  --he-bg: #0B1220;       /* page bg */
  --he-surface: #0F182A;  /* bands/sections */
  --he-card: #121C31;     /* cards/tiles */
  --he-border: #2A3A55;   /* quiet divider */
  --he-text: #E8EDF6;     /* main text */
  --he-muted: #B2BDD0;    /* secondary */
  --he-brand: #5B82FF;    /* slightly brighter on dark */
}

/* base + headings + body copy */
[data-theme="dark"] body{ background: var(--he-bg) !important; color: var(--he-text) !important; }
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,[data-theme="dark"] h4{ color: var(--he-text) !important; }
[data-theme="dark"] p,[data-theme="dark"] li,[data-theme="dark"] small{ color: var(--he-muted) !important; }

/* 2) “Trusted by students” logo band: readable on dark */
html[data-theme="dark"] div[class*="bg-gradient"][class*="from-"]:has([class*="ring-blue"]),
html[data-theme="dark"] div[class*="bg-gradient-to-"][class*="from-"]:has([class*="ring-blue"]){
  position: relative;
  background-color: var(--he-surface) !important;
  background-image: none !important;
  border-top: 1px solid var(--he-border) !important;
  border-bottom: 1px solid var(--he-border) !important;
}

html[data-theme="dark"] :is([class*="ring-blue"],[class*="ring-indigo"])[class*="rounded"]{
  background: var(--he-card) !important;
  border-color: var(--he-border) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 6px 20px rgba(0,0,0,.35) !important;
}

html[data-theme="dark"] :is([class*="ring-blue"],[class*="ring-indigo"])[class*="rounded"] img{
  filter: none !important;
  opacity: .96;
}

/* 3) Cards & containers: consistent elevation and borders */
[data-theme="dark"] main .rounded-xl,
[data-theme="dark"] main .rounded-2xl,
[data-theme="dark"] main .rounded-3xl,
[data-theme="dark"] main .shadow,
[data-theme="dark"] main .shadow-lg,
[data-theme="dark"] main .shadow-xl{
  background-color: var(--he-card) !important;
  border-color: var(--he-border) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.35) !important;
}

/* price card gets a touch more lift */
html[data-theme="dark"] [data-he-price-card]{
  box-shadow: 0 12px 32px rgba(0,0,0,.45) !important;
}

/* 4) Yellow callouts: tone down luminance on dark */
html[data-theme="dark"] [class*="bg-yellow-100"],
html[data-theme="dark"] [class*="bg-amber-100"]{
  background: rgba(250, 204, 21, 0.10) !important;
  border-color: rgba(250, 204, 21, 0.35) !important;
  color: var(--he-text) !important;
}

/* 5) Clock glyph default = light rose (not blue) */
button[data-faq-clock] [class*="bg-"] > svg,
button[data-faq-clock] [class*="text-"] > svg{
  color: #305CDE !important; /* rose-400 vibe */
}

/* 6) Big gradients: subtle neutral slate on dark (avoid “navy soup”) */
[data-theme="dark"] .bg-gradient-to-b,
[data-theme="dark"] .bg-gradient-to-br,
[data-theme="dark"] .bg-gradient-to-r{
  background-image: linear-gradient(180deg, #0B1220 0%, #0F182A 100%) !important;
}

/* 7) Links & CTAs consistent with brand */
[data-theme="dark"] a{ color: var(--he-brand) !important; }
html[data-theme="dark"] .he-cta-secondary:hover{
  background: rgba(255,255,255,0.04) !important;
}
/* ===============================
   Half Eats — Dark Mode Polish (lander)
   =============================== */

/* 1) Header: make all nav text white on dark (logo can stay branded) */
html[data-theme="dark"] nav a,
html[data-theme="dark"] nav button,
html[data-theme="dark"] nav li,
html[data-theme="dark"] nav span {
  color: #fff !important;
}
/* keep the wordmark split color (HALF/EATS) from the brand rules */
html[data-theme="dark"] nav a.flex-shrink-0.group > span > span { /* EATS */
  color: var(--he-brand) !important;
}
html[data-theme="dark"] nav a[href*="/order"],
html[data-theme="dark"] nav a[href*="sign"] {
  color: #fff !important; /* “Place Order” + “Sign In” labels are white */
}

/* 2) Secondary CTAs (“See How It Works”, “See Our Impact”):
      make them blue-tint pills with white text on dark */
html[data-theme="dark"] a[href*="how"],
html[data-theme="dark"] a[href*="impact"],
html[data-theme="dark"] .he-cta-secondary{
  background: rgba(48, 92, 222, .18) !important;   /* brand tint */
  color: #fff !important;
  border-color: rgba(48, 92, 222, .45) !important;
  box-shadow: 0 10px 24px rgba(48,92,222,.18) !important;
}
html[data-theme="dark"] a[href*="how"]:hover,
html[data-theme="dark"] a[href*="impact"]:hover,
html[data-theme="dark"] .he-cta-secondary:hover{
  background: rgba(48, 92, 222, .26) !important;
  border-color: rgba(48, 92, 222, .60) !important;
}

/* 3) “Trusted by students at” logo band:
      remove the white strip on dark; match the page surface & white text */
html[data-theme="dark"] div[class*="bg-gradient"][class*="from-red-50"]:has([class*="ring-blue"]),
html[data-theme="dark"] div[class*="bg-gradient"][class*="via-red-50"]:has([class*="ring-blue"]),
html[data-theme="dark"] div[class*="bg-gradient"][class*="to-red-100"]:has([class*="ring-blue"]),
html[data-theme="dark"] div[class*="bg-gradient"][class*="from-rose-50"]:has([class*="ring-blue"]),
html[data-theme="dark"] div[class*="bg-gradient"][class*="from-pink-50"]:has([class*="ring-blue"]),
html[data-theme="dark"] div.bg-gradient-to-b.overflow-hidden[class*="from-red-50"][class~="via-white"][class~="to-white"]{
  background-color: var(--he-surface) !important;  /* deep navy like rest */
  background-image: none !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  color: #fff !important;
}
html[data-theme="dark"] div[class*="bg-gradient"]:has([class*="ring-blue"]) p,
html[data-theme="dark"] div[class*="bg-gradient"]:has([class*="ring-blue"]) span{
  color: #fff !important;
}

/* 4) How‑it‑works cards (dark): unify surfaces + calm accent chips */
html[data-theme="dark"] [data-he-hiw] .rounded-lg,
html[data-theme="dark"] [data-he-hiw] .rounded-xl,
html[data-theme="dark"] [data-he-hiw] .rounded-2xl{
  background: var(--he-card) !important;
  border-color: var(--he-border) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.20) !important;
}
/* Pills under each step (e.g., “Magic happens here!”) → soft brand tint */
html[data-theme="dark"] [data-he-hiw] .rounded-full{
  background-color: rgba(48,92,222,.12) !important;
  color: #fff !important;
  border-color: rgba(48,92,222,.35) !important;
}

/* 5) “Trusted by 2000+ students” bar in the hero card → light blue tint */
html[data-theme="dark"] [data-he-trusted-bar]{
  background: rgba(48,92,222,.14) !important; /* light blue tint instead of white */
  color: #fff !important;
  border-color: rgba(124,161,255,.35) !important;
}
html[data-theme="dark"] [data-he-trusted-bar] svg{
  color: #FFD166 !important; /* keep the star color readable on dark */
}

/* (safety) ensure any residual white gradients in big sections stay slate on dark */
html[data-theme="dark"] .bg-gradient-to-b,
html[data-theme="dark"] .bg-gradient-to-br,
html[data-theme="dark"] .bg-gradient-to-r{
  background-image: linear-gradient(180deg, #0C111B 0%, #0F172A 100%) !important;
}
html[data-theme="dark"] a[href*="how"],
html[data-theme="dark"] a[href*="impact"],
html[data-theme="dark"] .he-cta-secondary{
  background: rgba(48,92,222,.18) !important;
  color: #fff !important;
  border-color: rgba(48,92,222,.45) !important;
}
html[data-theme="dark"] a[href*="how"]:hover,
html[data-theme="dark"] a[href*="impact"]:hover,
html[data-theme="dark"] .he-cta-secondary:hover{
  background: rgba(48,92,222,.26) !important;
  border-color: rgba(48,92,222,.60) !important;
}/* ===============================
   FAQ — Dark mode skin (no more white bars)
   =============================== */
html[data-theme="dark"] [data-he-faq] {
  color: var(--he-text) !important;
}

/* Tabs row */
html[data-theme="dark"] [data-he-faq] [role="tablist"] [role="tab"]{
  background: var(--he-card) !important;
  color: var(--he-text) !important;
  border-color: var(--he-border) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.22) !important;
}
html[data-theme="dark"] [data-he-faq] [role="tablist"] [role="tab"][aria-selected="true"],
html[data-theme="dark"] [data-he-faq] [role="tablist"] [role="tab"][data-state="active"]{
  background: rgba(48,92,222,.22) !important;           /* light blue tint */
  color: #fff !important;
  border-color: rgba(48,92,222,.45) !important;
}
html[data-theme="dark"] [data-he-faq] [role="tablist"] [role="tab"]:hover{
  background: rgba(48,92,222,.14) !important;
  border-color: rgba(48,92,222,.35) !important;
}

/* Collapsed items (the “white bars”) */
html[data-theme="dark"] [data-he-faq] button[aria-expanded="false"],
html[data-theme="dark"] [data-he-faq] button[data-state="closed"]{
  background: var(--he-card) !important;
  color: var(--he-text) !important;
  border-color: var(--he-border) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.20) !important;
}
html[data-theme="dark"] [data-he-faq] button[aria-expanded="false"]:hover,
html[data-theme="dark"] [data-he-faq] button[data-state="closed"]:hover{
  background: rgba(48,92,222,.12) !important;           /* subtle hover */
  border-color: rgba(48,92,222,.35) !important;
}

/* Open item */
html[data-theme="dark"] [data-he-faq] button[aria-expanded="true"],
html[data-theme="dark"] [data-he-faq] button[data-state="open"]{
  background: rgba(48,92,222,.12) !important;           /* soft brand tint */
  border-color: rgba(48,92,222,.35) !important;
  color: var(--he-text) !important;
}

/* Kill any light-mode whites/gradients inside the FAQ area only */
html[data-theme="dark"] [data-he-faq] .bg-white,
html[data-theme="dark"] [data-he-faq] [class*="bg-white"]{
  background: var(--he-card) !important;
}
html[data-theme="dark"] [data-he-faq] .bg-gradient-to-b,
html[data-theme="dark"] [data-he-faq] .bg-gradient-to-r,
html[data-theme="dark"] [data-he-faq] [class*="from-white"],
html[data-theme="dark"] [data-he-faq] [class*="to-white"]{
  background-image: none !important;
}

/* Make sure glyphs inherit readable colors */
html[data-theme="dark"] [data-he-faq] button [class*="text-white"]{ color: var(--he-text) !important; }
html[data-theme="dark"] [data-he-faq] button svg{ color: currentColor !important; }
img[alt*="Trustpilot" i],
img[src*="Trustpilot" i]{
  display: none !important;
}

/* Hide any Trustpilot link/button anywhere on the site */
a[href*="trustpilot" i]{
  display: none !important;
}

/* If a container includes the Trustpilot logo, hide that whole rating row */
div:has(> img[alt*="Trustpilot" i]){
  display: none !important;
}
footer .border-t.border-red-100,
footer .border-t.border-blue-100,
footer > .border-t,
footer .border-t {
  border-top-width: 0 !important;
  border-top-color: transparent !important;
}nav.border-b,
nav[class*="border-b"],
header .border-b {
  border-bottom-width: 0 !important;
  border-bottom-color: transparent !important;
}

/* Footer: remove any separators (top/bottom/hr/divide-y) */
footer,
footer .border-t,
footer .border-b,
footer .border,
footer hr,
footer [class*="divide-y"] > * + * {
  border: 0 !important;
  border-color: transparent !important;
}
nav a[href="/"].group svg { display: none !important; } /* hide the current icon */
nav a[href="/"].group::before{
  content: none !important;
  display: none !important;
}
/* @faq-hover – text + chevron match pill color on hover or when open */
[data-faq-accent] button:hover h1,
[data-faq-accent] button:hover h2,
[data-faq-accent] button:hover h3,
[data-faq-accent] button[aria-expanded="true"] h1,
[data-faq-accent] button[aria-expanded="true"] h2,
[data-faq-accent] button[aria-expanded="true"] h3 { color: var(--faq-acc) !important; }

[data-faq-accent] button:hover svg,
[data-faq-accent] button[aria-expanded="true"] svg {
  color: var(--faq-acc) !important;
  stroke: var(--faq-acc) !important;
  fill: currentColor;
}

/* Landing-only: avoid double logo and keep hamburger visible */
.is-lander nav a[href="/"].group::before{
  display: none !important;
}
.is-lander nav img[alt*="brgnbites logo" i]{
  display: none !important;
}
.is-lander nav a[href="/"] > span{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.is-lander nav a[href="/"] > span img{
  display: inline-block !important;
  margin: 0 !important;
}
.is-lander nav a[href="/"] img{
  display: none !important;
}
.is-lander nav img[alt*="brgnbites logo" i],
nav img[alt*="brgnbites logo" i]{
  display: none !important;
}
.is-lander nav button[aria-label*="menu" i]{
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.is-lander nav button[aria-label*="menu" i] svg{
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.is-lander #hf-menu-btn{
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.is-lander #hf-menu-btn svg{
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* @faq-hover — text + chevron match pill color on hover or when open */
[data-faq-accent] button:hover h1,
[data-faq-accent] button:hover h2,
[data-faq-accent] button:hover h3,
[data-faq-accent] button[aria-expanded="true"] h1,
[data-faq-accent] button[aria-expanded="true"] h2,
[data-faq-accent] button[aria-expanded="true"] h3 { color: var(--faq-acc) !important; }

[data-faq-accent] button:hover svg,
[data-faq-accent] button[aria-expanded="true"] svg {
  color: var(--faq-acc) !important;
  stroke: var(--faq-acc) !important;
  fill: currentColor;
}

/* accent tokens per row (fix rose) */
[data-faq-accent="blue"]   { --faq-acc: #3B82F6; }
[data-faq-accent="green"]  { --faq-acc: #22C55E; }
[data-faq-accent="purple"] { --faq-acc: #7C3AED; }
[data-faq-accent="orange"] { --faq-acc: #F59E0B; }
[data-faq-accent="rose"]   { --faq-acc: #305CDE; }

/* FAQ: text-only glow on hover/open — derive color from the pill icon */
#faq button :is(h1,h2,h3) { transition: color .2s, text-shadow .2s; }

/* ensure the icon itself doesn't glow */
#faq button:hover svg,
#faq button[aria-expanded="true"] svg { filter: none !important; }

/* GREEN */
#faq button:has(:is([class*="text-green-"],[class*="stroke-green-"],[class*="fill-green-"])):hover :is(h1,h2,h3),
#faq button[aria-expanded="true"]:has(:is([class*="text-green-"],[class*="stroke-green-"],[class*="fill-green-"])) :is(h1,h2,h3) {
  color:#22C55E !important;
  text-shadow: 0 0 2px rgba(34,197,94,.55), 0 0 2px rgba(34,197,94,.35);
}

/* BLUE family: blue + sky + indigo + violet */
#faq button:has(:is(
  [class*="text-blue-"],[class*="stroke-blue-"],[class*="fill-blue-"],
  [class*="text-sky-"], [class*="stroke-sky-"], [class*="fill-sky-"],
  [class*="text-indigo-"],[class*="stroke-indigo-"],[class*="fill-indigo-"],
  [class*="text-violet-"],[class*="stroke-violet-"],[class*="fill-violet-"]
)):hover :is(h1,h2,h3),
#faq button[aria-expanded="true"]:has(:is(
  [class*="text-blue-"],[class*="stroke-blue-"],[class*="fill-blue-"],
  [class*="text-sky-"], [class*="stroke-sky-"], [class*="fill-sky-"],
  [class*="text-indigo-"],[class*="stroke-indigo-"],[class*="fill-indigo-"],
  [class*="text-violet-"],[class*="stroke-violet-"],[class*="fill-violet-"]
)) :is(h1,h2,h3) {
  color:#3B82F6 !important;
  text-shadow: 0 0 2px rgba(59,130,246,.55), 0 0 2px rgba(59,130,246,.35);
}

/* PURPLE */
#faq button:has(:is([class*="text-purple-"],[class*="stroke-purple-"],[class*="fill-purple-"])):hover :is(h1,h2,h3),
#faq button[aria-expanded="true"]:has(:is([class*="text-purple-"],[class*="stroke-purple-"],[class*="fill-purple-"])) :is(h1,h2,h3) {
  color:#7C3AED !important;
  text-shadow: 0 0 2px rgba(124,58,237,.55), 0 0 2px rgba(124,58,237,.35);
}

/* ORANGE / AMBER / YELLOW family */
#faq button:has(:is(
  [class*="text-orange-"],[class*="stroke-orange-"],[class*="fill-orange-"],
  [class*="text-amber-"], [class*="stroke-amber-"], [class*="fill-amber-"],
  [class*="text-yellow-"],[class*="stroke-yellow-"],[class*="fill-yellow-"]
)):hover :is(h1,h2,h3),
#faq button[aria-expanded="true"]:has(:is(
  [class*="text-orange-"],[class*="stroke-orange-"],[class*="fill-orange-"],
  [class*="text-amber-"], [class*="stroke-amber-"], [class*="fill-amber-"],
  [class*="text-yellow-"],[class*="stroke-yellow-"],[class*="fill-yellow-"]
)) :is(h1,h2,h3) {
  color:#F59E0B !important;
  text-shadow: 0 0 2px rgba(245,158,11,.55), 0 0 2px rgba(245,158,11,.35);
}

/* ROSE */
#faq button:has(:is([class*="text-rose-"],[class*="stroke-rose-"],[class*="fill-rose-"])):hover :is(h1,h2,h3),
#faq button[aria-expanded="true"]:has(:is([class*="text-rose-"],[class*="stroke-rose-"],[class*="fill-rose-"])) :is(h1,h2,h3) {
  color:#305CDE !important;
  text-shadow: 0 0 2px rgba(251,113,133,.55), 0 0 2px rgba(251,113,133,.35);
}

/* Force "What is Half Eats?" pill + icon to red */
[data-faq-accent="red"] { --faq-acc:#305CDE; }                  /* text/chevron token */
[data-faq-accent="red"] .bg-blue-100,
[data-faq-accent="red"] .bg-sky-100,
[data-faq-accent="red"] .bg-indigo-100,
[data-faq-accent="red"] .bg-violet-100 { background:#EAF1FF !important; }
[data-faq-accent="red"] button:hover .bg-blue-100,
[data-faq-accent="red"] button:hover .bg-sky-100,
[data-faq-accent="red"] button:hover .bg-indigo-100,
[data-faq-accent="red"] button:hover .bg-violet-100 { background:#FECACA !important; }

[data-faq-accent="red"] .text-blue-600,
[data-faq-accent="red"] .text-sky-600,
[data-faq-accent="red"] .text-indigo-600,
[data-faq-accent="red"] .text-violet-600,
[data-faq-accent="red"] .stroke-blue-600,
[data-faq-accent="red"] .stroke-sky-600,
[data-faq-accent="red"] .stroke-indigo-600,
[data-faq-accent="red"] .stroke-violet-600,
[data-faq-accent="red"] button svg { color:#305CDE !important; stroke:#305CDE !important; }
/* Brand icon: scale up on hover/focus */
nav a.group > svg,
nav a.group > img {
  transition: transform .18s ease;
  transform-origin: left center;
}

/* force the bump even if Tailwind sets transform on hover */
nav a.group:hover > svg,
nav a.group:focus-visible > svg,
nav a.group:hover > img,
nav a.group:focus-visible > img {
  transform: scale(1.20) !important; /* tweak 1.15–1.25 to taste */
}

/* Brand icon: bump on hover using Tailwind's transform vars */
nav a.group svg { transition: transform .18s ease; transform-origin: left center; }

nav a.group:hover svg,
nav a.group:focus-visible svg {
  --tw-scale-x: 1.22 !important;
  --tw-scale-y: 1.22 !important;
  transform:
    translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate))
    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scale(var(--tw-scale-x), var(--tw-scale-y)) !important;
}


/* Half Eats — FAQ styles + soft card */
/* =======================
   Half Eats — FAQ icon glyph hover accents
   - On hover, tint the left-pill icon glyph to match its accent.
   - Clock row (arrival ETA) uses a light-red glyph by default.
=======================*/

/* Smooth color transition for any glyph we touch */
button [class*="bg-"] > svg,
button [class*="text-"] > svg { transition: color .15s ease !important; }

/* Yellow/amber */
button:hover [class*="bg-yellow-"] > svg,
button:hover [class*="text-yellow"]  > svg { color:#eab308 !important; }

/* Green */
button:hover [class*="bg-green-"]  > svg,
button:hover [class*="text-green"] > svg { color:#16a34a !important; }

/* Violet */
button:hover [class*="bg-violet-"] > svg,
button:hover [class*="text-violet"] > svg { color:#7c3aed !important; }

/* Orange */
button:hover [class*="bg-orange-"] > svg,
button:hover [class*="text-orange"] > svg { color:#f97316 !important; }

/* Blue — brand */
button:hover [class*="bg-blue-"] > svg,
button:hover [class*="text-blue"] > svg { color:#305CDE !important; }

/* Clock row default glyph color */
button[data-faq-clock] [class*="bg-"] > svg,
button[data-faq-clock] [class*="text-"] > svg { color:#305CDE !important; }

/* --- FAQ tabs: only the active pill is filled --- */
[role="tablist"] [role="tab"]{
  background:#fff !important;
  color:#305CDE !important;
  border:1px solid #c3d5fa !important;
}
[role="tablist"] [role="tab"][aria-selected="true"],
[role="tablist"] [role="tab"][data-state="active"],
[role="tablist"] .active{
  background:#305CDE !important;
  color:#fff !important;
  border-color:#305CDE !important;
}
[role="tablist"] [role="tab"]:not([aria-selected="true"]):hover{
  background:#EAF1FF !important;
}

/* --- FAQ items: closed = white; hover = light tint; open = subtle tint --- */
button[aria-expanded="false"],
button[data-state="closed"]{
  background:#fff !important;
  color:#0f172a !important;
  border:1px solid #c3d5fa !important;
}
button[aria-expanded="false"]:hover,
button[data-state="closed"]:hover{
  background:#EAF1FF !important;
}
button[aria-expanded="false"] [class*="bg-blue-"],
button[data-state="closed"]    [class*="bg-blue-"],
button[aria-expanded="false"] [class*="from-blue"],
button[data-state="closed"]    [class*="from-blue"],
button[aria-expanded="false"] [class*="to-blue"],
button[data-state="closed"]    [class*="to-blue"],
button[aria-expanded="false"] [class*="bg-gradient-to-"],
button[data-state="closed"]    [class*="bg-gradient-to-"]{
  background: transparent !important;
  background-image: none !important;
  --tw-gradient-from: initial !important;
  --tw-gradient-to: initial !important;
  --tw-gradient-stops: initial !important;
}
button[aria-expanded="false"] [class*="text-white"],
button[data-state="closed"]    [class*="text-white"]{
  color:#0f172a !important;
}
button[aria-expanded="true"],
button[data-state="open"]{
  background:#EAF1FF !important;
  border-color:#c3d5fa !important;
}

/* --- Discount card: soften gradient to a tint --- */
[data-he-soft-card]{
  background-image: linear-gradient(135deg, var(--brand-tint, #EAF1FF) 0%, #EAF1FF 100%) !important;
}

/* Half Eats — Dark Mode Polish Pack */
/* === Half Eats — Dark Mode Polish Pack === */
/* Clear tokens + fix "logo strip", card elevation, CTAs, etc. */

html[data-theme="dark"]{
  --he-bg:#0B1220; --he-surface:#0F182A; --he-card:#121C31;
  --he-border:#2A3A55; --he-text:#E8EDF6; --he-muted:#B2BDD0; --he-brand:#5B82FF;
}

/* base + headings + body copy */
[data-theme="dark"] body{ background:var(--he-bg) !important; color:var(--he-text) !important; }
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,[data-theme="dark"] h4{ color:var(--he-text) !important; }
[data-theme="dark"] p,[data-theme="dark"] li,[data-theme="dark"] small{ color:var(--he-muted) !important; }

/* “Trusted by students” logo band: readable on dark */
html[data-theme="dark"] div[class*="bg-gradient"][class*="from-"]:has([class*="ring-blue"]),
html[data-theme="dark"] div[class*="bg-gradient-to-"][class*="from-"]:has([class*="ring-blue"]){
  position:relative; background-color:var(--he-surface) !important; background-image:none !important;
  border-top:1px solid var(--he-border) !important; border-bottom:1px solid var(--he-border) !important;
}
html[data-theme="dark"] :is([class*="ring-blue"],[class*="ring-indigo"])[class*="rounded"]{
  background:var(--he-card) !important; border-color:var(--he-border) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.04), 0 6px 20px rgba(0,0,0,.35) !important;
}
html[data-theme="dark"] :is([class*="ring-blue"],[class*="ring-indigo"])[class*="rounded"] img{ filter:none !important; opacity:.96; }

/* Cards & containers: consistent elevation and borders */
[data-theme="dark"] main .rounded-xl,[data-theme="dark"] main .rounded-2xl,[data-theme="dark"] main .rounded-3xl,
[data-theme="dark"] main .shadow,[data-theme="dark"] main .shadow-lg,[data-theme="dark"] main .shadow-xl{
  background-color:var(--he-card) !important; border-color:var(--he-border) !important; box-shadow:0 10px 28px rgba(0,0,0,.35) !important;
}

/* price card gets a touch more lift */
html[data-theme="dark"] [data-he-price-card]{ box-shadow:0 12px 32px rgba(0,0,0,.45) !important; }

/* Yellow callouts: tone down luminance on dark */
html[data-theme="dark"] [class*="bg-yellow-100"],
html[data-theme="dark"] [class*="bg-amber-100"]{
  background:rgba(250,204,21,.10) !important; border-color:rgba(250,204,21,.35) !important; color:var(--he-text) !important;
}

/* Clock glyph default = light rose (not blue) */
button[data-faq-clock] [class*="bg-"] > svg,
button[data-faq-clock] [class*="text-"] > svg{ color:#305CDE !important; }

/* Big gradients: subtle neutral slate on dark (avoid “navy soup”) */
[data-theme="dark"] .bg-gradient-to-b,
[data-theme="dark"] .bg-gradient-to-br,
[data-theme="dark"] .bg-gradient-to-r{
  background-image:linear-gradient(180deg,#0B1220 0%,#0F182A 100%) !important;
}



/* --- Discount card: soften gradient to a tint (dark-safe) --- */
[data-theme="dark"] [data-he-soft-card]{
  background-image: linear-gradient(135deg, rgba(91,130,255,.06) 0%, rgba(255,255,255,.02) 100%) !important;
}

#he-theme-toggle .he-moon { display: none; }
#he-theme-toggle[aria-pressed="true"] .he-sun { display: none; }
#he-theme-toggle[aria-pressed="true"] .he-moon { display: inline; }


/* @he-orderflow:start */
/* Keep this tiny. Real styles live in existing page CSS; this is just safety. */
.he-orderflow-hide{ display:none !important; }
/* @he-orderflow:end */
/* @kill-klaviyo:start */
[class*="kl-private-reset-css"],
.klaviyo-form,
.klaviyo-form-V2,
.klaviyo-popup,
.kl-teaser,
.klaviyo-bubble,
[data-testid="on-site-announcement"],
iframe[src*="klaviyo"]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
/* @kill-klaviyo:end */
/* ==== HalfEats Step‑4 Card styles (scoped) ==== */
#he-card-root { margin-top: 12px; }
.he-card { border:1px solid #a7f3d0; background:#ecfdf5; border-radius:12px; padding:14px; }
.he-card.he-card--error { border-color:#fed7aa; background:#fff7ed; }
.he-card .he-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.he-card .he-head .he-check { display:inline-flex; width:22px; height:22px; border-radius:50%;
  align-items:center; justify-content:center; background:#10b981; color:#fff; font-weight:700; }
.he-card .he-head .he-title { font-weight:700; color:#064e3b; }
.he-card .he-head .he-orderno { margin-left:auto; color:#6b7280; font-size:12px; }

.he-summary { display:grid; grid-template-columns: 1fr auto auto; gap:10px; }
.he-chip { display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid #d1fae5; background:#ffffff; border-radius:8px; }
.he-chip .he-ico { width:16px; height:16px; opacity:0.7; }

.he-acc { margin-top:10px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; overflow:hidden; }
.he-acc summary { list-style:none; cursor:pointer; padding:10px 12px; user-select:none; }
.he-acc summary::-webkit-details-marker { display:none; }
.he-items { padding:8px 12px; max-height:280px; overflow:auto; }
.he-item { display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid #f3f4f6; }
.he-item:first-child { border-top:none; }
.he-thumb { width:44px; height:44px; border-radius:8px; background:#f3f4f6; object-fit:cover; }
.he-name { flex:1; font-size:14px; color:#111827; }
.he-qty { font-size:13px; color:#6b7280; }

.he-cta { margin-top:14px; width:100%; padding:14px 16px; border-radius:10px; border:none;
  background:#ef4444; color:#fff; font-weight:700; cursor:pointer; }
.he-cta:disabled { opacity:0.5; cursor:not-allowed; }
.he-msg { padding:8px 10px; color:#374151; }
#he-card-root { display:block; width:100%; grid-column:1 / -1; margin-top:12px; clear:both; }
/* HalfEats validated card text visibility overrides */
#he-card-root .he-chip,
#he-card-root .he-acc summary,
#he-card-root .he-name,
#he-card-root .he-qty {
  color: #111827 !important;     /* force readable text */
}

#he-card-root .he-acc summary {
  font-weight: 600;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

#he-card-root .he-summary {       /* keep layout sane */
  align-items: center;
  gap: 12px;
}

#he-card-root .he-chip {          /* make sure text doesn’t get clipped */
  min-width: 0;
  white-space: nowrap;
}
/* ==== HalfEats Step-1 polished card (MealSlash-style) ==== */

/* place under link, span full width */
#he-card-root { display:block; width:100%; grid-column:1 / -1; margin-top:12px; clear:both; }

/* card base */
.he-card { border:1px solid #a7f3d0; background:#ecfdf5; border-radius:12px; padding:14px; }
.he-card.he-card--error { border-color:#fed7aa; background:#fff7ed; }
.he-card .he-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.he-card .he-head .he-check { display:inline-flex; width:22px; height:22px; border-radius:50%;
  align-items:center; justify-content:center; background:#10b981; color:#fff; font-weight:700; }
.he-card .he-head .he-title { font-weight:700; color:#064e3b; }
.he-card .he-head .he-orderno { margin-left:auto; color:#6b7280; font-size:12px; }

/* summary chips */
.he-summary { display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; }
.he-chip { display:inline-flex; align-items:center; gap:8px; padding:10px 12px;
  border:1px solid #E5EFE7; background:#fff; border-radius:8px; min-width:0; white-space:nowrap; }
.he-chip .he-ico { width:16px; height:16px; opacity:.7; }

/* accordion + caret */
.he-acc { margin-top:10px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; overflow:hidden; }
.he-acc summary { list-style:none; cursor:pointer; padding:10px 12px; user-select:none; 
  position:relative; font-weight:600; background:#fff; border-bottom:1px solid #e5e7eb; }
.he-acc summary::-webkit-details-marker { display:none; }
.he-acc summary::after { content:"▾"; position:absolute; right:12px; top:9px; opacity:.6; transition:transform .15s ease; }
details[open] > .he-acc > summary::after, .he-acc[open] > summary::after { transform:rotate(180deg); }

.he-items { padding:8px 12px; max-height:280px; overflow:auto; }
.he-item { display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid #f3f4f6; }
.he-item:first-child { border-top:none; }
.he-thumb { width:44px; height:44px; border-radius:8px; background:#f3f4f6; object-fit:cover; }
.he-name { flex:1; font-size:14px; }
.he-qty { font-size:13px; color:#6b7280; }

/* CTA */
.he-cta { margin-top:14px; width:100%; padding:14px 16px; border-radius:10px; border:none;
  background:#ef4444; color:#fff; font-weight:700; cursor:pointer; }
.he-cta:disabled { opacity:.5; cursor:not-allowed; }

/* enforce readable text inside our card despite global theming */
#he-card-root .he-chip,
#he-card-root .he-acc summary,
#he-card-root .he-name,
#he-card-root .he-qty { color:#111827 !important; }

/* ===================== Dark Theme (global tokens + mappings) ===================== */
/* Tokens */
html[data-theme="dark"]{
  /* Base surfaces */
  --bg: #0B1220;           /* page background */
  --surface-1: #0F172A;    /* cards/panels */
  --surface-2: #111827;    /* nav/hero */
  --border: #1F2937;       /* hairlines */

  /* Text */
  --text:  #E5E7EB;        /* primary */
  --muted: #94A3B8;        /* secondary */

  /* Brand */
  --brand:        #3B82F6; /* blue-500 */
  --brand-dark:   #2563EB; /* blue-600 */
  --brand-darker: #1D4ED8; /* blue-700 */

  /* Accents */
  --accent:      #34D399;  /* green-400/500 */
  --accent-bg:   #052E28;  /* deep green chip */
  --accent-text: #A7F3D0;  /* mint text */
  --error:       #F87171;  /* red-400 */
  --error-bg:    #3F1D1D;  /* dark red bg */
  --ring:        #60A5FA;  /* focus ring */
}

/* Base application */
html[data-theme="dark"],
html[data-theme="dark"] body{
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Cards / panels / rounded blocks */
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .rounded-lg,
html[data-theme="dark"] .rounded-xl,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .backdrop-blur,
html[data-theme="dark"] section[class*="card"],
html[data-theme="dark"] div[class*="card"]{
  background-color: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

/* Headings + text */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3{ color: var(--text) !important; }
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-black{ color: var(--text) !important; }
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-neutral-600{ color: var(--muted) !important; }

/* Borders */
html[data-theme="dark"] .border-gray-100,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-300,
html[data-theme="dark"] .divide-gray-200{ border-color: var(--border) !important; }

/* Primary CTA buttons (map various classes to brand) */
html[data-theme="dark"] .bg-blue-600,
html[data-theme="dark"] .bg-indigo-600,
html[data-theme="dark"] .bg-rose-600,
html[data-theme="dark"] .bg-red-600,
html[data-theme="dark"] .bg-pink-600,
html[data-theme="dark"] button[class*="bg-rose-"],
html[data-theme="dark"] button[class*="bg-red-"],
html[data-theme="dark"] a[role="button"][class*="bg-rose-"],
html[data-theme="dark"] a[role="button"][class*="bg-red-"]{
  background-color: var(--brand) !important;
  color: #fff !important;
  border-color: transparent !important;
}
html[data-theme="dark"] .hover\:bg-rose-600:hover,
html[data-theme="dark"] .hover\:bg-red-600:hover,
html[data-theme="dark"] .hover\:bg-blue-700:hover{ background-color: var(--brand-dark) !important; }

/* Links / secondary actions */
html[data-theme="dark"] a{ color: var(--brand); }
html[data-theme="dark"] a:hover{ color: var(--brand-dark); }

/* Primary CTAs (Place Order / Get Savings) use solid brand blue in dark */
/* Keep primary CTA solid blue in dark (override gradient rules) */
html[data-theme="dark"] a[href*="/order"],
html[data-theme="dark"] a[href*="/order"]:hover,
html[data-theme="dark"] a[href*="/order"]:focus{
  background-image: none !important;
  background-color: var(--brand) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 24px rgba(59,130,246,.22) !important; /* blue-500 shadow */
}
html[data-theme="dark"] a[href*="/order"]:hover{ background-color: var(--brand-dark) !important; }
html[data-theme="dark"] a[href*="/order"]:active{ background-color: var(--brand-darker) !important; }
/* Kill any inner gradient wrappers inside the hero CTA in dark */
html[data-theme="dark"] main a[href*="/order"] *{ background-image:none !important; background-color: transparent !important; }

/* Inputs */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{ color: var(--muted) !important; }

/* Focus ring */
html[data-theme="dark"] :focus{ outline-color: var(--ring); }
html[data-theme="dark"] .focus\:ring-rose-500:focus{ --tw-ring-color: var(--ring) !important; }

/* Chips / badges */
html[data-theme="dark"] .badge,
html[data-theme="dark"] .chip{ border-radius: 9999px; }
html[data-theme="dark"] .badge.savings,
html[data-theme="dark"] .chip.savings,
html[data-theme="dark"] [class*="saving" i]{
  background: var(--accent-bg) !important;
  color: var(--accent-text) !important;
  border: 1px solid #0B5C49 !important;
}

/* Dividers */
html[data-theme="dark"] hr{ border-color: var(--border) !important; opacity: .6; }

/* Hero / header subtle surface */
html[data-theme="dark"] .hero,
html[data-theme="dark"] header + section{
  background: radial-gradient(1200px 400px at 30% -10%, rgba(30,58,138,.35) 0%, transparent 60%), var(--surface-2) !important;
}

/* Secondary CTA (How it works) in dark: white bg, blue outline/text; hover = dark surface */
/* Secondary CTA (How it works) – hero version: blue outline, black fill, white text (idle + hover) */
html[data-theme="dark"] main a[href*="how" i],
html[data-theme="dark"] main a[href*="how" i]:hover,
html[data-theme="dark"] main a[href*="how" i]:focus{
  background: #0B1220 !important; /* black fill */
  color: #FFFFFF !important;      /* white text */
  border: 1.5px solid var(--brand) !important; /* blue outline */
  border-radius: 9999px !important;
  box-shadow: none !important;
}
/* Remove any inner bg/gradient wrappers that might tint the pill */
html[data-theme="dark"] main a[href*="how" i] *,
html[data-theme="dark"] main a[href*="how" i]:hover *,
html[data-theme="dark"] main a[href*="how" i]:focus *{
  background: transparent !important;
  background-image: none !important;
  color: inherit !important;
}

/* Some builds render the hero CTA as a <button> inside #how-it-works; style that too */
html[data-theme="dark"] #how-it-works button,
html[data-theme="dark"] #how-it-works button:hover,
html[data-theme="dark"] #how-it-works button:focus{
  background: #0B1220 !important; /* black fill */
  color: #FFFFFF !important;      /* white text */
  border: 1.5px solid var(--brand) !important; /* blue outline */
  border-radius: 9999px !important;
  box-shadow: none !important;
}
html[data-theme="dark"] #how-it-works button *,
html[data-theme="dark"] #how-it-works button:hover *,
html[data-theme="dark"] #how-it-works button:focus *{
  background: transparent !important;
  background-image: none !important;
  color: inherit !important;
}

/* Explicit hook for hero How-CTA when we can tag it: data-cta="how" */
html[data-theme="dark"] button[data-cta="how"],
html[data-theme="dark"] button[data-cta="how"]:hover,
html[data-theme="dark"] button[data-cta="how"]:focus{
  background: #0B1220 !important;
  color: #FFFFFF !important;
  border: 1.5px solid var(--brand) !important;
  border-radius: 9999px !important;
  box-shadow: none !important;
}
html[data-theme="dark"] button[data-cta="how"] *,
html[data-theme="dark"] button[data-cta="how"]:hover *,
html[data-theme="dark"] button[data-cta="how"]:focus *{
  background: transparent !important;
  background-image: none !important;
  color: inherit !important;
}

/* Do not bubble-style the FAQ link in nav */
html[data-theme="dark"] nav a[href*="faq" i]{
  background: transparent !important;
  color: inherit !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* HALFEATS logo colors: dark = HALF white, EATS brand; light already OK */
/* HALFEATS: HALF white / EATS blue; swap on hover */
html[data-theme="dark"] nav a[href="/"] > span { color: #FFFFFF !important; }
html[data-theme="dark"] nav a[href="/"] > span > span { color: var(--brand) !important; }
html[data-theme="dark"] nav a[href="/"]:hover > span { color: var(--brand) !important; }
html[data-theme="dark"] nav a[href="/"]:hover > span > span { color: #FFFFFF !important; }
html[data-theme="dark"] nav a[href="/"] svg { color:#FFFFFF !important; fill:currentColor !important; stroke:currentColor !important; }
html[data-theme="dark"] nav a[href="/"] img { filter: brightness(0) invert(1) !important; }
/* If the logo is rendered via a pseudo-element (::before) with a background image, invert it in dark only */
html[data-theme="dark"] nav a[href="/"]::before{
  filter: brightness(0) invert(1) !important;
  -webkit-filter: brightness(0) invert(1) !important;
}
/* Extra fallbacks targeting Tailwind utility classes used in brand text */
html[data-theme="dark"] nav a[href="/"] span.text-gray-900 { color:#FFFFFF !important; }
html[data-theme="dark"] nav a[href="/"] span.text-gray-900 > span { color: var(--brand) !important; }
html[data-theme="dark"] nav a[href="/"]:hover span.text-gray-900 { color: var(--brand) !important; }
html[data-theme="dark"] nav a[href="/"]:hover span.text-gray-900 > span { color:#FFFFFF !important; }

/* === Mobile polish & section controls (Phase 1 & 2) === */
@media (max-width: 768px) {
  /* Phone-safe gutters across the landing page */
  body.is-lander main { padding-left: 16px; padding-right: 16px; }

  /* Readable, compact headings */
  h1 { font-size: clamp(1.6rem, 5.4vw, 2.1rem); line-height: 1.15; letter-spacing: -0.01em; }
  h2 { font-size: clamp(1.25rem, 4.4vw, 1.6rem); line-height: 1.20; }
  h3 { font-size: clamp(1.10rem, 3.8vw, 1.35rem); line-height: 1.25; }
  p, li { line-height: 1.6; }

  /* Touch-friendly primary actions */
  button,
  a[role="button"],
  a[class*="btn"],
  .button,
  .btn {
    min-height: 44px;
    padding: 12px 16px;
    border-radius: 12px;
  }

  /* Card aesthetics: slightly softer radius + lighter shadow on mobile */
  .card,
  [class*="rounded-2xl"],
  [class*="rounded-xl"],
  [class*="shadow-"] {
    border-radius: 12px !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.06) !important;
  }

  /* Kill only the dedicated philanthropy/giving block on phones.
     IMPORTANT: avoid broad :has() on generic div/section wrappers to prevent
     hiding the entire page when any nested link points to /philanthropy. */
  #philanthropy,
  section#philanthropy,
  .philanthropy,
  [data-section="philanthropy"],
  [data-philanthropy],
  .giving-back { display: none !important; }
}

/* === Sticky mobile CTA + hero cleanup + reviews compact === */
@media (max-width: 768px) {
  /* Provide breathing room so sticky bar doesn't overlap content */
  body.is-lander { padding-bottom: 84px; }

  /* Sticky CTA shell */
  #he-sticky-cta{
    position: fixed;
    left: 10px; right: 10px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    z-index: 9998;
    background: #0B1220; /* dark pill backdrop for contrast */
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 12px 28px rgba(0,0,0,.25);
    display: flex; align-items: center; justify-content: center;
  }
  #he-sticky-cta .he-sticky-btn{
    display: inline-block;
    width: 100%; text-align: center;
    color: #fff; font-weight: 800;
    padding: 12px 16px;
    border-radius: 12px;
    background-image: linear-gradient(90deg, var(--brand), #1d4ed8);
    box-shadow: 0 8px 20px rgba(37,99,235,.25);
  }
  #he-sticky-cta .he-sticky-btn:active{ transform: translateY(1px); }

  /* Hero tighten: reduce top/bottom spacing, hide secondary CTA */
  header + section { padding-top: 16px !important; padding-bottom: 18px !important; }
  header + section a.btn-secondary,
  header + section a[href*="how" i] { display: none !important; }

  /* Reviews/testimonials compact: show one card at a time, hide complex nav */
  [data-he-testimonials] .grid { grid-template-columns: 1fr !important; }
  [data-he-testimonials] [class*="swiper-button"],
  [data-he-testimonials] [class*="swiper-pagination"],
  [data-he-testimonials] [class*="carousel"] [class*="nav"],
  [data-he-testimonials] [class*="arrow"] { display: none !important; }
}

/* Global CTA override: keep PLACE ORDER solid blue across pages */
nav a[href="/order"]{
  background-image:none !important;
  background-color:#2563eb !important;
  color:#fff !important;
  box-shadow:0 8px 20px rgba(37,99,235,.35) !important;
  border:0 !important;
}
nav a[href="/order"]:hover{
  filter:brightness(.97) !important;
}
nav a[href="/order"]:active{
  transform:translateY(1px) !important;
}