/* ==========================================================================
   Geodhara Farm: Design Tokens & Base
   Typography: Archivo (body/UI) + Archivo Narrow (condensed display),
   the closest free structural match to the brand's GT America system.
   ========================================================================== */

:root{
  /* Brand palette */
  --brand:        #D46642; /* NOTE: 3.51:1 contrast on --bg/--cream-text - fails WCAG AA (4.5:1) for normal text; fine for large text/icons/backgrounds (3:1 threshold) */
  --brand-dark:   #A85134; /* darkened proportionally to keep it visually distinct from --brand */
  --bg:           #FFFBF0;
  --bg-dim:       #FBF2DF;
  --brown:        #382014;
  --green:        #244C30;
  --gold:         #E7B24C;
  --announcement: #6f1d1b;
  --ink:          #000000;
  --cream-text:   #FFFBF0;
  --line:         rgba(56, 32, 20, 0.14);
  --cream-soft:   rgba(255, 251, 240, 0.78);
  --line-strong:  rgba(56, 32, 20, 0.3);
  --brown-soft:   rgba(56, 32, 20, 0.72);

  /* Type */
  --font-body:    'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'Archivo Narrow', 'Arial Narrow', var(--font-body);
  --font-mono:    'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Product photography backdrop */
  --backdrop:     #8A4A34;

  /* Placeholder photography gradients (until real photos land) */
  --grad-sand:    linear-gradient(155deg, #EADFC4 0%, #DFCBA0 55%, #C9AE78 100%);
  --grad-olive:   linear-gradient(155deg, #7C8F6A 0%, #556B48 100%);

  /* Layout */
  --container:    100%;
  --gutter:       clamp(1.25rem, 4vw, 3rem);
  --radius-sm:    4px;

  /* Type scale: shared section-heading size, standardized across the site */
  --text-h2:      clamp(1.9rem, 3.4vw, 2.75rem);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 100px; }
body, h1, h2, h3, h4, p, figure{ margin: 0; }
ul{ list-style: none; margin: 0; padding: 0; }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input{ font: inherit; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: var(--cream-text);
  padding: 0.75rem 1.25rem;
  z-index: 200;
}
.skip-link:focus{ left: 1rem; top: 1rem; }

.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .social-feed-row{ animation-name: none; }
  .ribbon-row{ animation-name: none; }
}

/* ---------- Typography scale ---------- */
h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.98;
  color: var(--brown);
}

.eyebrow{
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---------- Layout helpers ---------- */
.container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section{
  padding-block: clamp(2.25rem, 4.5vw, 4rem);
}

.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.9rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.2s var(--ease);
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: var(--brand);
  color: var(--cream-text);
}
.btn-primary:hover{ background: var(--brown); }

.btn-secondary{
  background: var(--bg);
  border-color: var(--brown);
  color: var(--brown);
}
.btn-secondary:hover{ background: var(--brown); color: var(--bg); }

.btn-secondary.on-dark{
  background: transparent;
  border-color: var(--cream-soft);
  color: var(--cream-text);
}
.btn-secondary.on-dark:hover{ background: var(--cream-text); color: var(--brown); border-color: var(--cream-text); }

.btn-small{ padding: 0.7rem 1.3rem; font-size: 0.72rem; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position: -webkit-sticky; /* older iOS Safari */
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
}

.announcement-bar{
  background: var(--announcement);
  color: var(--cream-text);
  text-align: center;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 1.1rem var(--gutter);
}
.announcement-bar a{
  text-decoration: none;
}
/* While the mobile dropdown is open, park the bar fixed right under the header instead
   of letting the full-screen dropdown cover it. z-index must beat .site-header's own
   100, not just .nav-links' nominal 1 - .nav-links is nested inside the header, so it
   actually paints within the header's stacking context (z-index:100), not at its own
   value. --header-height is measured in JS each time the menu opens, since it varies
   by breakpoint. */
body.nav-open .announcement-bar{
  position: fixed;
  top: var(--header-height, 0px);
  left: 0;
  right: 0;
  z-index: 101;
}

.navbar{ border-bottom: 1px solid var(--line); }
.nav-inner{
  max-width: var(--container);
  margin-inline: auto;
  padding: 1.1rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.logo{
  display: inline-flex;
  align-items: center;
}

.logo-img{
  height: 42px;
  width: auto;
  display: block;
}

.nav-links{
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2vw, 2rem);
  margin-left: auto;
  margin-right: clamp(0.75rem, 2.5vw, 2.5rem);
}
/* Mobile-only nav items (Home, Subscribe Now, WhatsApp): Subscribe Now duplicates the
   desktop CTA button that's hidden on mobile; WhatsApp duplicates the floating button,
   which itself is hidden while this dropdown is open. Both need a way in during that
   window. Home just isn't offered as text anywhere else in the nav. */
.nav-mobile-only{ display: none; }
.nav-links a{
  position: relative;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-block: 0.25rem;
}
.nav-links a::after{
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1.5px;
  background: var(--brand);
  transition: right 0.25s var(--ease);
}
.nav-links a:hover::after{ right: 0; }

.nav-toggle{
  display: none;
  width: 2.1rem; height: 2.1rem;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span{
  display: block;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
  height: 2px;
  background: var(--brown);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  width: 100%;
  /* 139px = measured height of the sticky header + announcement bar,
     so the hero fills exactly what's left of the screen, not 100vh on top of it */
  height: calc(100vh - 139px);
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
@supports (height: 100dvh){
  .hero{ height: calc(100dvh - 139px); }
}
.hero-slides{ position: absolute; inset: 0; }
.hero-slides::after{
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(0deg, rgba(20, 13, 8, 0.55) 0%, rgba(20, 13, 8, 0.2) 32%, rgba(20, 13, 8, 0) 55%);
}
.hero-slide{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.hero-slide.is-active{ opacity: 1; }

.hero-dots{
  position: absolute;
  left: 50%;
  bottom: clamp(1.25rem, 4vw, 2.25rem);
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.hero-dot{
  position: relative;
  width: 2.4rem;
  height: 2px;
  background: rgba(255, 251, 240, 0.35);
  border-radius: 999px;
  overflow: hidden;
}
.hero-dot::after{
  content: '';
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--cream-text);
  border-radius: 999px;
}
.hero-dot.is-active::after{
  animation: hero-dot-fill 8s linear forwards;
}
@keyframes hero-dot-fill{
  from{ width: 0%; }
  to{ width: 100%; }
}

.hero-content{
  position: relative;
  z-index: 1;
  max-width: 640px;
  padding: 0 var(--gutter) clamp(2rem, 5vw, 3.5rem);
}
.hero h1{
  font-size: clamp(2.1rem, 5vw, 3.5rem);
  color: var(--cream-text);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  margin-bottom: 1.5rem;
}
.hero-trust{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream-text);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.hero-trust li + li{ padding-left: 0.7rem; border-left: 1px solid rgba(255, 251, 240, 0.45); }

/* ==========================================================================
   Ribbon (scrolling tagline marquee)
   ========================================================================== */
.ribbon{ background: var(--brand); overflow: hidden; padding-block: 1.1rem; }
.ribbon-row{
  display: flex;
  width: max-content;
  animation: ribbon-marquee 75s linear infinite;
}
@keyframes ribbon-marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.ribbon-item{
  position: relative;
  flex-shrink: 0;
  color: var(--cream-text);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  white-space: nowrap;
  padding-inline: 1.75rem;
}
.ribbon-item::after{
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cream-text);
  opacity: 0.55;
}

/* ==========================================================================
   Product slider ("Our Milk")
   ========================================================================== */
.range-head{ text-align: center; margin-bottom: clamp(1rem, 2vw, 1.75rem); }
.range-head .eyebrow{ display: block; color: var(--brand-dark); margin-bottom: 0.85rem; }
.range-head h2{ font-size: var(--text-h2); }

.product-slider{ position: relative; }

.ps-viewport{ overflow: hidden; }
.ps-track{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ps-track::-webkit-scrollbar{ display: none; }

.ps-slide{
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(0.5rem, 1.5vw, 1rem);
  overflow: hidden; /* keep each slide's decorative bleed contained to itself */
}

.ps-media-wrap{ position: relative; }
.ps-media-wrap::before{
  content: "";
  position: absolute;
  inset: -14%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 24%, transparent) 0%, transparent 72%);
  filter: blur(34px);
}
.ps-orbit{
  position: absolute;
  left: -4%;
  top: 50%;
  transform: translateY(-50%);
  width: 42%;
  height: 96%;
  color: var(--brand);
  opacity: 0.55;
  z-index: 0;
}
.ps-media{
  position: relative;
  z-index: 1;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  background: radial-gradient(120% 120% at 30% 18%, #F8ECD3 0%, #EFD4A4 48%, #DCA968 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  overflow: hidden;
}
.ps-media img{
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 26px 38px rgba(56, 32, 20, 0.25)) drop-shadow(0 6px 10px rgba(56, 32, 20, 0.15));
  transform: translate(-50%, -50%);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}
/* Packaging shot swaps in on hovering/focusing anywhere in the card, not just the photo;
   base transform must stay chained onto the hover lift below, since a transform
   declaration replaces rather than adds to it. Extra scale(1.5) on the pack shot only:
   it's a landscape photo (not square like the bottle shots), so img{max-width:100%}
   caps it by width before it ever reaches the 92% height target - it renders smaller
   than the bottle photo unless nudged back up. */
.ps-media-hover{ opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
.ps-slide:hover .ps-media img,
.ps-slide:focus-within .ps-media img{ transform: translate(-50%, -50%) translateY(-6px) scale(1.02); }
.ps-slide:hover .ps-media-default,
.ps-slide:focus-within .ps-media-default{ opacity: 0; }
.ps-slide:hover .ps-media-hover,
.ps-slide:focus-within .ps-media-hover{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.5) translateY(-6px) scale(1.02);
}

.ps-title{
  display: flex;
  flex-direction: column;
  line-height: 0.92;
  margin-bottom: 1.5rem;
}
.ps-title-kind{
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  color: var(--brown-soft);
}
.ps-title-type{
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 6vw, 4.25rem);
  color: var(--brown);
}
.ps-specs{
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--brown-soft);
  margin-bottom: 1.25rem;
}
.ps-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}
.ps-tags li{
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand-dark);
  background: var(--bg-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45rem 1rem;
}
/* Full Description/Benefits copy - desktop only. On mobile the shorter specs/tags
   above already cover this, and these paragraphs would be a lot of scrolling. */
.ps-info{ display: none; margin-bottom: 1.25rem; }
@media (min-width: 761px){
  .ps-info{ display: block; }
}
.ps-label{
  display: block;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-dark);
  margin-bottom: 0.4rem;
}
.ps-desc{
  color: var(--brown-soft);
  line-height: 1.7;
}
.ps-price-line{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--brand-dark);
  margin-bottom: 1.75rem;
}
.ps-price-line span{
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--brown-soft);
}
.ps-actions{ display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }

.ps-controls{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

#milk{ padding-bottom: 0.5rem; }

.ps-arrows{
  display: flex;
  gap: 0.5rem;
  background: var(--bg);
  border-radius: 999px;
  padding: 0.4rem;
  box-shadow: 0 14px 30px rgba(56, 32, 20, 0.12);
}
.ps-arrow{
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--brown);
  display: flex; align-items: center; justify-content: center;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.ps-arrow:hover{ background: var(--brand); color: var(--cream-text); border-color: var(--brand); }
.ps-arrow:disabled{ opacity: 0.35; cursor: default; }
.ps-arrow:disabled:hover{ background: var(--bg); color: var(--brown); border-color: var(--line-strong); }
.ps-arrow svg{ width: 18px; height: 18px; }

/* ==========================================================================
   Home page additions
   (why choose us / plans teaser / testimonials / delivery area / faq)
   ========================================================================== */

/* Why choose us */
.why-choose{ text-align: center; }
.why-choose .eyebrow{ display: block; color: var(--brand-dark); margin-bottom: 0.9rem; }
.why-choose h2{
  position: relative;
  font-size: var(--text-h2);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(1rem, 1.6vw, 1.35rem);
}
.why-choose h2::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 54px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
}
.why-choose-grid{
  --wc-gap: clamp(1.75rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--wc-gap);
  text-align: left;
}
.why-choose-item{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  transition: transform 0.3s var(--ease);
}
.why-choose-item:hover{ transform: translateY(-4px); }
.why-choose-icon{
  background: linear-gradient(150deg, rgba(212, 102, 66, 0.17), rgba(212, 102, 66, 0.06));
  box-shadow: 0 6px 14px rgba(212, 102, 66, 0.14), inset 0 0 0 1px rgba(212, 102, 66, 0.2);
  transition: background 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.why-choose-item:hover .why-choose-icon{
  background: var(--brand);
  color: var(--cream-text);
  box-shadow: 0 12px 22px rgba(212, 102, 66, 0.34);
}

.icon-badge, .why-choose-icon, .step-icon{
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(189, 79, 43, 0.09);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-badge svg, .why-choose-icon svg, .step-icon svg{ width: 1.4rem; height: 1.4rem; }
.why-choose-item h3{
  font-family: var(--font-body);
  text-transform: none;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--brown);
  margin-bottom: 0.6rem;
}
.why-choose-item p{ font-size: 0.92rem; color: var(--brown-soft); line-height: 1.7; }

/* Subscription plans teaser */
.section:has(.plans-teaser-grid){ padding-bottom: clamp(1rem, 2vw, 1.5rem); }
.plans-teaser-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}
.plan-teaser-card{
  position: relative;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(1.5rem, 3vw, 2rem);
  text-align: center;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.plan-teaser-card:hover{ transform: translateY(-6px); box-shadow: 0 24px 48px rgba(56, 32, 20, 0.1); }
.plan-teaser-card.is-popular{ border-color: var(--brand); }
.plan-teaser-card h3{ font-size: 1.3rem; margin-bottom: 0.6rem; }
.plan-teaser-price{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2rem);
  color: var(--brand);
  margin-bottom: 0.5rem;
}
.plan-teaser-price span{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--brown-soft);
}
.plan-teaser-card p{ font-size: 0.88rem; color: var(--brown-soft); line-height: 1.5; }
.plan-teaser-save{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--green);
  background: rgba(36, 76, 48, 0.09);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin-top: 0.75rem;
}
/* Distinct amber tone (not the --gold used on the Subscribe page's dark panels, which
   would fail contrast on this light card) so the free-litre bonus reads as separate
   from the money-saved badge above it, not a duplicate of it. */
.plan-teaser-offer{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--brand-dark);
  background: rgba(212, 102, 66, 0.1);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin-top: 0.5rem;
}
.plan-teaser-card .plan-features{ text-align: left; margin-top: 1.1rem; }
.plans-teaser-cta{ text-align: center; }

/* Testimonials marquee */
.testimonial-feed{ background: var(--bg); padding-block: clamp(1rem, 2vw, 1.5rem); padding-bottom: clamp(1.5rem, 3vw, 2.25rem); overflow: hidden; }
.testimonial-carousel{ position: relative; }
.testimonial-row{
  display: flex;
  gap: 1.75rem;
  padding: 2.25rem clamp(1.25rem, 4vw, 3rem) 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  background: var(--bg);
  --marquee-seconds: 30; /* time for one full auto-scroll cycle - read by js/main.js */
}
.testimonial-row::-webkit-scrollbar{ display: none; }
.testimonial-row.is-dragging{ cursor: grabbing; }
.testimonial-item{
  flex: 0 0 clamp(270px, 30vw, 380px);
  transition: transform 0.3s var(--ease);
}
.testimonial-item:hover{ transform: translateY(-4px); }
.testimonial-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0.25rem 1rem;
}
.testimonial-stars{
  display: flex;
  gap: 0.1rem;
  font-size: 0.9rem;
  line-height: 1;
  color: #E3A63B;
  padding-bottom: 0.45rem;
}
.testimonial-avatar{
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 4.1rem;
  height: 4.1rem;
  border-radius: 50%;
  background: var(--bg-dim);
  border: 3px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: -1.75rem;
}
.testimonial-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.testimonial-who{ text-align: right; }
.testimonial-name{
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brown);
}
.testimonial-locality{ font-family: var(--font-mono); font-size: 0.68rem; color: var(--brown-soft); margin-top: 0.15rem; }
.testimonial-card{
  position: relative;
  background: color-mix(in srgb, var(--brand) 78%, #FFA544 22%);
  color: var(--cream-text);
  border-radius: 20px;
  padding: 2.25rem 1.75rem 1.75rem;
  overflow: hidden;
}
.testimonial-text{ position: relative; z-index: 1; line-height: 1.65; }

/* Delivery area */
.delivery-area{
  background: var(--green);
  color: var(--cream-text);
  text-align: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.delivery-area .icon-badge{
  background: rgba(255, 251, 240, 0.14);
  color: var(--cream-text);
  margin: 0 auto 1.25rem;
}
.delivery-area .eyebrow{ color: var(--cream-soft); margin-bottom: 1rem; }
.delivery-area h2{ color: var(--cream-text); font-size: var(--text-h2); margin-bottom: 1.25rem; }
.delivery-area p{ color: var(--cream-soft); max-width: 55ch; margin: 0 auto 2rem; line-height: 1.7; }

/* FAQ */
.faq-list{ max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item{ border: 1px solid var(--line); border-radius: var(--radius-sm); }
.faq-item summary{
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 700;
  color: var(--brown);
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-question{ flex: 1; min-width: 0; }
.faq-icon{
  flex-shrink: 0;
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s var(--ease);
  font-size: 0.9rem;
  color: var(--brand);
}
.faq-item[open] .faq-icon{ transform: rotate(45deg); }
.faq-item p{ padding: 0 1.5rem 1.25rem; margin: 0; color: var(--brown-soft); line-height: 1.7; }

@media (max-width: 1150px){
  .why-choose-grid{ grid-template-columns: repeat(3, 1fr); max-width: 720px; margin-inline: auto; }
}
@media (max-width: 900px){
  .why-choose-grid{ grid-template-columns: 1fr 1fr; max-width: none; }
  .plans-teaser-grid{ grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}
@media (max-width: 760px){
  .why-choose-grid{ grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .why-choose-item{
    padding: 1rem;
    border-radius: 14px;
    transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .why-choose-item:hover,
  .why-choose-item:active{ background: var(--bg-dim); transform: scale(0.98); }
}

/* ==========================================================================
   Favorites / product grid
   ========================================================================== */
.section-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.section-head h2{ font-size: var(--text-h2); }

/* ==========================================================================
   About teaser ("Meet the Farmer")
   ========================================================================== */
.about-teaser{
  position: relative;
  min-height: clamp(600px, 90vh, 860px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.about-teaser .media{
  position: absolute;
  inset: 0;
  background-color: #2b3324;
  background-image: linear-gradient(180deg, rgba(23, 20, 14, 0.5) 0%, rgba(23, 20, 14, 0.74) 100%), url('../images/pages/hero-1.jpg');
  background-size: cover;
  background-position: center;
}
.about-content{
  position: relative;
  z-index: 2;
  max-width: 640px;
  text-align: center;
  padding: 0 var(--gutter);
  color: var(--cream-text);
}
.about-content .eyebrow{ color: var(--cream-soft); margin-bottom: 1rem; }
.about-content h2{
  color: var(--cream-text);
  font-size: var(--text-h2);
  margin-bottom: 1.25rem;
}
.about-content p{
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--cream-soft);
  margin-bottom: 2rem;
}

/* ==========================================================================
   Social feed ("Follow Our Farm Family")
   ========================================================================== */
.social-feed{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2rem, 3.5vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
.social-feed-head{ margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.social-feed-head h2{ font-size: var(--text-h2); }

.social-feed-row-wrap{ position: relative; overflow: hidden; }

.social-feed-row{
  display: flex;
  gap: 0.4rem;
  width: max-content;
  padding-left: var(--gutter);
  animation: feed-marquee 24s linear infinite;
}
.social-feed-row-wrap:hover .social-feed-row{ animation-play-state: paused; }
@keyframes feed-marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

.feed-tile{
  flex: 0 0 clamp(180px, 19vw, 280px);
  aspect-ratio: 4 / 5;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.feed-tile:hover{ transform: translateY(-4px); box-shadow: 0 16px 32px rgba(56, 32, 20, 0.16); }
.feed-tile:nth-child(7n+1){ background: linear-gradient(155deg, #E08A5C 0%, var(--brand) 100%); }
.feed-tile:nth-child(7n+2){ background: linear-gradient(155deg, #35573F 0%, var(--green) 100%); }
.feed-tile:nth-child(7n+3){ background: linear-gradient(155deg, var(--gold) 0%, #C98A3E 100%); }
.feed-tile:nth-child(7n+4){ background: linear-gradient(155deg, #A85D3E 0%, var(--backdrop) 100%); }
.feed-tile:nth-child(7n+5){ background: var(--grad-olive); }
.feed-tile:nth-child(7n+6){ background: linear-gradient(155deg, #D9A96A 0%, #B5793F 100%); }
.feed-tile:nth-child(7n+7){ background: linear-gradient(155deg, var(--brand-dark) 0%, var(--brown) 100%); }
.feed-tile:not(.feed-tile-text)::before{
  content: '';
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 1.4rem;
  height: 1.4rem;
  opacity: 0.55;
  background: currentColor;
  color: var(--cream-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1'/%3E%3C/svg%3E") center / contain no-repeat;
}

.feed-tile-text{ color: var(--cream-text); }
.feed-tile-kicker{
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 0.25rem;
}
.feed-tile-title{
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  line-height: 1.05;
}

.social-feed-handle{
  text-align: center;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}
.social-feed-handle a{
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--brown);
  border-bottom: 1px solid var(--brown);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.social-feed-handle a:hover{ color: var(--brand); border-color: var(--brand); }

/* ==========================================================================
   Breadcrumb
   ========================================================================== */
.breadcrumb{ border-bottom: 1px solid var(--line); padding-block: 0.85rem; }
.breadcrumb .container{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--brown-soft);
}
.breadcrumb a{ color: var(--brown-soft); }
.breadcrumb a:hover{ color: var(--brand); }
.breadcrumb span[aria-current]{ color: var(--brown); }

/* ==========================================================================
   Back to top
   ========================================================================== */
.back-to-top{
  position: fixed;
  left: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s, border-color 0.2s var(--ease);
  cursor: pointer;
  z-index: 250;
  box-shadow: 0 8px 24px rgba(56, 32, 20, 0.16);
}
.back-to-top.is-visible{ opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover{ border-color: var(--brand); }
.back-to-top svg{ width: 20px; height: 20px; }

/* ==========================================================================
   WhatsApp float
   ========================================================================== */
.whatsapp-float{
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: calc(clamp(1rem, 3vw, 1.75rem) + env(safe-area-inset-bottom, 0px));
  width: clamp(48px, 12vw, 56px);
  height: clamp(48px, 12vw, 56px);
  flex-shrink: 0;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease), visibility 0.2s;
  z-index: 255;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35), 0 2px 10px rgba(0,0,0,0.15);
}
.whatsapp-float:hover,
.whatsapp-float:focus-visible{ transform: scale(1.07); }
.whatsapp-float:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }
.whatsapp-float svg{ width: 56%; height: 56%; }
body.nav-open .back-to-top{ opacity: 0; visibility: hidden; pointer-events: none; }

/* ==========================================================================
   Inner pages (About / Partner)
   ========================================================================== */
.nav-links a[aria-current="page"]::after{ right: 0; }

.split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split p{ color: var(--brown-soft); line-height: 1.7; margin-bottom: 1rem; }

.steps{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
}
.steps::before{
  content: '';
  position: absolute;
  top: 3.15rem;
  left: 16.6667%;
  right: 16.6667%;
  border-top: 2px dashed var(--line-strong);
  z-index: 0;
}
.step{
  position: relative;
  z-index: 1;
  text-align: center;
}
.step-icon-wrap{
  position: relative;
  width: 6.3rem;
  height: 6.3rem;
  margin: 0 auto 1.5rem;
}
.step-icon{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--brand);
  color: var(--cream-text);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 30px rgba(189, 79, 43, 0.28);
}
.step-icon svg{ width: 2.3rem; height: 2.3rem; }
.step-number{
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background: var(--brown);
  color: var(--cream-text);
  border: 3px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
}
.step h3{ font-size: 1.25rem; margin-bottom: 0.6rem; }
.step p{
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--brown-soft);
  max-width: 30ch;
  margin-inline: auto;
}

@media (max-width: 900px){
  .steps{ grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; gap: 2.75rem; }
  .steps::before{ display: none; }
}

/* ==========================================================================
   Partner page (coming soon intro + simple contact form)
   ========================================================================== */
.section:has(.partner-intro){ padding-top: clamp(1rem, 2vw, 1.5rem); }
.partner-intro{
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
  padding-block: clamp(0.5rem, 1vw, 0.75rem) clamp(0.5rem, 2vw, 1rem);
}
.partner-intro .eyebrow{ display: block; color: var(--brand-dark); margin-bottom: 1rem; }
.partner-intro h1{
  color: var(--brand);
  font-size: var(--text-h2);
  max-width: 26ch;
  margin-inline: auto;
  margin-bottom: 1.5rem;
}
.partner-intro p{
  color: var(--brown-soft);
  font-size: 1.02rem;
  line-height: 1.7;
  max-width: 62ch;
  margin-inline: auto;
}
.partner-intro p + p{ margin-top: 1.1rem; }

.partner-types{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2rem, 4vw, 2.75rem);
}
.partner-type{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.partner-type .icon-badge{ margin-inline: auto; }
.partner-type span:last-child{
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--brown);
}

.partner-contact-head{ text-align: center; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.partner-contact-head h2{ color: var(--brand); font-size: var(--text-h2); margin-bottom: 0.75rem; }
.partner-contact-head p{ color: var(--brown-soft); }

.partner-form{ max-width: 760px; margin-inline: auto; }
.partner-form .form-actions{ text-align: center; }
.partner-form .form-success{ text-align: center; color: var(--green); }

/* ==========================================================================
   About page
   ========================================================================== */
/* Intro (two-column: text + photo) */
.about-intro h1{
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  margin-bottom: 1.5rem;
}
.about-intro .about-tagline{
  font-style: normal;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--brand-dark);
  margin-bottom: 1.4rem;
}
.about-intro p{
  color: var(--brown-soft);
  line-height: 1.8;
  margin-bottom: 1.1rem;
  font-style: italic;
}
.about-intro .signature-inline{
  font-style: normal;
  font-weight: 700;
  color: var(--brown);
  margin-top: 1.4rem;
}
.about-photo{
  width: 100%;
  /* matches the homepage hero's height so both read as the same visual size */
  height: calc(100vh - 139px);
  min-height: 480px;
  object-fit: cover;
  background: var(--grad-sand);
}
@supports (height: 100dvh){
  .about-photo{ height: calc(100dvh - 139px); }
}

.section-divider{
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* Centered story block */
.story-block{ text-align: center; }
.story-block h2{ font-size: var(--text-h2); margin-bottom: 1.5rem; }
.story-block p{ color: var(--brown-soft); line-height: 1.8; margin-bottom: 1.1rem; }

/* Full-width founders image band */
.farmers-band{
  position: relative;
  min-height: clamp(380px, 50vh, 540px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter);
  background-color: var(--green);
  background-image: url('../images/pages/hero-1.jpg');
  background-size: cover;
  background-position: center;
}
.farmers-band::before{
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(30, 20, 12, 0.55);
}
.farmers-band-inner{ position: relative; max-width: 620px; color: var(--cream-text); }
.farmers-band h2{ color: var(--cream-text); font-size: clamp(2.2rem, 5vw, 3.5rem); margin-bottom: 1rem; }
.farmers-band p{ color: var(--cream-soft); line-height: 1.7; margin-bottom: 2rem; }

/* Founders' letter (long-form story) */
.founder-letter{ max-width: 80%; margin-inline: auto; }
.founder-letter h2{ text-align: center; font-size: var(--text-h2); margin-bottom: 1rem; }
.founder-letter .founder-subtitle{ text-align: center; font-weight: 700; font-size: 1.05rem; color: var(--brand-dark); margin-bottom: 2rem; }
.founder-letter p{ color: var(--brown-soft); line-height: 1.85; margin-bottom: 1.2rem; }
.founder-letter .signature-italic{ font-style: italic; color: var(--brown); margin-top: 2rem; line-height: 1.8; }

/* ==========================================================================
   Subscription plans
   ========================================================================== */
.plans-head{ text-align: center; margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.plans-head .eyebrow{ display: block; color: var(--brand-dark); margin-bottom: 0.9rem; }
.plans-head h2, .plans-head h1{
  font-size: var(--text-h2);
  max-width: 24ch;
  margin-inline: auto;
}

.plan-milk-note{
  text-align: center;
  max-width: 60ch;
  margin: 0 auto clamp(1.5rem, 3vw, 2rem);
  color: var(--brown-soft);
  line-height: 1.7;
}

.milk-type-toggle{
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  width: fit-content;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  padding: 0.35rem;
  background: var(--bg-dim);
  border-radius: 999px;
}
.milk-type-btn{
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brown-soft);
  background: transparent;
  border: none;
  padding: 0.65rem 1.5rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.milk-type-btn:hover{ color: var(--brown); }
.milk-type-btn.is-active{
  background: var(--brand);
  color: var(--cream-text);
}
.milk-type-btn.is-active:hover{ color: var(--cream-text); }

.plan-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2rem);
}
/* `.plan-grid{ display: grid }` above would otherwise silently override the browser's
   built-in `[hidden]{ display: none }` rule (both are author-vs-UA-stylesheet, but any
   author rule setting `display` wins), which is exactly what happens between the two
   milk-type panels on the Subscribe page - so it has to be restated explicitly here. */
.plan-grid[hidden]{ display: none; }

.plan-card{
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.plan-card:hover{ transform: translateY(-6px); box-shadow: 0 24px 48px rgba(56, 32, 20, 0.1); }
.plan-card.is-popular{ border-color: var(--brand); }

.plan-ribbon{
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand);
  color: var(--cream-text);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(212, 102, 66, 0.35);
}

.plan-card-head h3{ font-size: 1.55rem; margin-bottom: 0.4rem; }
.plan-card-head span{
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--brown-soft);
}

.plan-panel{
  background: var(--green);
  border-radius: 14px;
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
  color: var(--cream-text);
}
.plan-tiers{
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.plan-tier{ text-align: center; }
.plan-tier + .plan-tier{ border-left: 1px solid rgba(255, 251, 240, 0.2); }
.plan-tier-label{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cream-soft);
  margin-bottom: 0.55rem;
}
.plan-tier-was{
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--cream-soft);
  text-decoration: line-through;
  opacity: 0.75;
}
.plan-tier-price{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  color: var(--gold);
  line-height: 1.1;
}
.plan-tier-unit{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--cream-soft);
  margin-top: 0.35rem;
}

.plan-savings{
  margin-top: 1.1rem;
  padding: 0.75rem 1rem;
  /* Kept faint: at the previous 0.1 alpha this tint lightened the green just enough to
     drop the gold text below 4.5:1 (WCAG AA) - 0.03 keeps the pill's subtle tint while
     staying close to gold-on-plain-green's own ~5:1 contrast. */
  background: rgba(255, 251, 240, 0.03);
  border: 1.5px solid rgba(255, 251, 240, 0.3);
  border-radius: 999px;
}
/* The real price discount is already shown unambiguously via the struck-through
   "was" price on each tier above - this box now just states the flat bonus plainly,
   rather than also trying to re-explain the same discount in ₹ terms down here. */
.plan-savings-offer{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gold);
}

.plan-features{ display: flex; flex-direction: column; gap: 0.65rem; }
.plan-features li{
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--brown-soft);
  line-height: 1.5;
}
.plan-features li svg{ width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--brand); }

.plan-card .btn{ width: 100%; margin-top: auto; }

.cta-band{
  background: var(--green);
  color: var(--cream-text);
  text-align: center;
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter);
}
.cta-band h2{ color: var(--cream-text); font-size: var(--text-h2); margin-bottom: 1rem; }
.cta-band p{
  color: var(--cream-soft);
  max-width: 55ch;
  margin: 0 auto 2rem;
  line-height: 1.7;
}

.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1.25rem;
}
.field{ display: flex; flex-direction: column; gap: 0.4rem; }
.field.full{ grid-column: 1 / -1; }
.field label{
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brown);
}
.field input,
.field select,
.field textarea{
  font: inherit;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  color: var(--brown);
}
.field textarea{ min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
.form-actions{ margin-top: 1.5rem; }

@media (max-width: 900px){
  .split{ grid-template-columns: 1fr; }
  .plan-grid{ grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .form-grid{ grid-template-columns: 1fr; }

  .ps-slide{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 1.75rem;
  }
  .ps-media-wrap{ width: min(320px, 78%); }
  .ps-orbit{ display: none; }
  .ps-tags{ justify-content: center; }
  .ps-actions{ justify-content: center; }
  .ps-controls{ display: none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background: var(--bg);
  color: var(--brown-soft);
  border-top: 1px solid var(--line);
}
.footer-top{
  --footer-gap: clamp(2rem, 4vw, 3rem);
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(2rem, 3.5vw, 3rem) var(--gutter) 1.75rem;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: var(--footer-gap);
}
.footer-about p{ margin-top: 0; max-width: 34ch; font-size: 0.9rem; line-height: 1.6; }
.footer-about p a{ color: var(--brand-dark); text-decoration: none; transition: color 0.2s var(--ease); }
.footer-about p a:hover{ color: var(--brand); }
.social-links{ display: flex; gap: 0.9rem; margin-top: 1.5rem; }
.footer-follow .social-links{ margin-top: 0; }
.social-links a{
  width: 2.3rem; height: 2.3rem;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.92;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), filter 0.2s var(--ease);
}
.social-links a:hover{ opacity: 1; transform: translateY(-3px); filter: drop-shadow(0 8px 14px rgba(56, 32, 20, 0.25)); }
.social-links img{ width: 100%; height: 100%; object-fit: contain; }

.footer-top h2{
  position: relative;
  font-family: var(--font-body);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 1.35rem;
  padding-bottom: 0.85rem;
}
.footer-top h2::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  background: color-mix(in srgb, var(--brand) 55%, transparent);
}
/* The h2 label doubles as an accordion trigger on mobile (see the media query below);
   on desktop it's reset to look and behave exactly like plain heading text always did. */
.footer-toggle{
  all: unset;
  display: block;
  width: 100%;
  cursor: default;
}
/* `all: unset` above also strips the browser's default focus ring, so keyboard users
   tabbing to it would otherwise get no visible indicator at either breakpoint. */
.footer-toggle:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}
.footer-top ul{ display: flex; flex-direction: column; gap: 0.7rem; }
.footer-top ul a{ font-size: 0.9rem; color: var(--brown-soft); transition: color 0.2s var(--ease), padding-left 0.2s var(--ease); }
.footer-top ul a:hover{ color: var(--brand); padding-left: 0.25rem; }

.form-success{ margin-top: 0.75rem; font-size: 0.85rem; color: var(--brown); }

.footer-bottom{
  border-top: 1px solid var(--line-strong);
}
.footer-bottom .container{
  padding-block: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-align: center;
}
.footer-copyright-brand{
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand-dark);
}
/* ==========================================================================
   Toast (lightweight feedback for non-backed actions)
   ========================================================================== */
.toast{
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 12px);
  background: var(--brown);
  color: var(--cream-text);
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  z-index: 300;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}
.toast.is-visible{ opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   Payment page (Subscribe page plan buttons link here)
   ========================================================================== */
.payment-page-plan{
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--brand-dark);
  text-align: center;
  margin-top: -0.75rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.payment-qr{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.payment-qr-card{
  position: relative;
  width: min(320px, 100%);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 44px rgba(56, 32, 20, 0.16);
}
.payment-qr-card::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--gold) 50%, var(--green) 100%);
}
.payment-qr-image{
  aspect-ratio: 1080 / 1500;
  margin-top: 6px;
  overflow: hidden;
}
/* Crops the source screenshot's empty black footer space so the QR reads bigger; keeps logo, QR and business name fully in frame */
.payment-qr-image img{ width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.payment-qr-card-footer{
  margin-top: 6px;
  padding: 1.25rem 1.5rem 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.payment-upi-link{ width: 100%; margin-bottom: 0.85rem; }
.payment-qr-upi{ font-family: var(--font-mono); font-size: 0.85rem; color: var(--brown-soft); }

.payment-upload{ margin-top: 1.1rem; }
.payment-upload label{
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brown);
  margin-bottom: 0.5rem;
}
.payment-upload input[type="file"]{ font-size: 0.85rem; color: var(--brown-soft); max-width: 100%; }
.payment-upload-hint{ font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--brown-soft); }
.payment-upload-list{
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 0.85rem;
}
.payment-upload-item{
  display: flex;
  align-items: center;
  gap: 0.3rem;
  animation: payment-upload-item-in 0.2s var(--ease);
}
.payment-upload-item:hover .payment-upload-thumb{ box-shadow: 0 6px 14px rgba(56, 32, 20, 0.16); }
@keyframes payment-upload-item-in{
  from{ opacity: 0; transform: scale(0.9); }
  to{ opacity: 1; transform: scale(1); }
}
.payment-upload-thumb{
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-dim);
  border: 1px solid var(--line);
  transition: box-shadow 0.2s var(--ease);
}
.payment-upload-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.payment-upload-remove{
  flex-shrink: 0;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 30%;
  background: #EF4444;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s var(--ease);
}
.payment-upload-remove:hover{ background: #DC2626; }
.payment-upload-remove svg{ width: 65%; height: 65%; }
.payment-confirm{
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--brown-soft);
  line-height: 1.5;
}
.payment-confirm input{ margin-top: 0.2rem; flex-shrink: 0; width: 1rem; height: 1rem; accent-color: var(--brand); }
.payment-confirm a{ color: var(--brand-dark); text-decoration: underline; }
.payment-confirm a:hover{ color: var(--brand); }

.payment-notice{
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 760px;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  padding: 1rem 1.25rem;
  /* Standard warning-alert colours, shifted toward orange-red for a bit more urgency
     than a plain yellow caution - not the site's brand palette, since this is a
     functional caution message rather than a branding element. */
  background: #FFEDD5;
  border: 1px solid #FDBA74;
  border-radius: 12px;
  color: #9A3412;
}
.payment-notice svg{ flex-shrink: 0; width: 1.2rem; height: 1.2rem; margin-top: 0.15rem; color: #9A3412; }
.payment-notice p{ font-size: 0.88rem; line-height: 1.6; }
.payment-notice a{ color: #9A3412; font-weight: 700; text-decoration: underline; }
.payment-notice a:hover{ color: #7C2D12; }

/* ==========================================================================
   Payment popup (desktop only - mobile navigates to payment.html instead;
   reuses the .payment-qr-card components above, scoped smaller to fit a popup)
   ========================================================================== */
.payment-modal{
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: var(--gutter);
}
.payment-modal[hidden]{ display: none; }
.payment-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(20, 13, 8, 0.55);
}
.payment-modal-panel{
  position: relative;
  z-index: 1;
  width: min(1000px, 100%);
  background: var(--bg);
  border-radius: 20px;
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.38);
}
.payment-modal-close{
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--brown);
  color: var(--cream-text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s var(--ease);
  box-shadow: 0 6px 16px rgba(56, 32, 20, 0.28);
}
.payment-modal-close:hover{ background: var(--brand); }
.payment-modal-close svg{ width: 18px; height: 18px; }

.payment-modal-grid{
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  overflow: hidden;
  border-radius: 20px;
}
.payment-modal .payment-qr{
  background: var(--bg-dim);
  border-right: 1px solid var(--line);
  padding: 0;
  align-items: stretch;
  justify-content: center;
}
.payment-modal .payment-qr-card{
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.payment-modal .payment-qr-card::before{ height: 5px; }
.payment-modal .payment-qr-image{
  margin-top: 5px;
  aspect-ratio: 1080 / 1500;
}
.payment-modal .payment-qr-card-footer{ margin-top: 5px; padding: 14px 16px 16px; }
.payment-modal .payment-upi-link{ padding: 0.75rem 1.2rem; margin-bottom: 0.75rem; }
.payment-modal .payment-qr-upi{ font-size: 0.8rem; }

.payment-form-wrap{ padding: clamp(1.5rem, 3vw, 2rem); }
.payment-form-wrap h2{ font-size: 1.7rem; margin-bottom: 0.4rem; }
.payment-modal-plan{
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--brand-dark);
  margin-bottom: 1rem;
}
.payment-modal .payment-form .form-grid{ gap: 0.9rem 1.1rem; }
.payment-modal .payment-form textarea{ min-height: 72px; }
.payment-modal .payment-upload{ margin-top: 0.9rem; }
.payment-modal .payment-upload label{ margin-bottom: 0.4rem; }
.payment-modal .payment-upload input[type="file"]{ font-size: 0.82rem; }
.payment-modal .payment-confirm{ margin-top: 1rem; font-size: 0.83rem; line-height: 1.45; }
.payment-modal .payment-form .form-actions{ margin-top: 1rem; }

.payment-modal-notice{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: fit-content;
  max-width: 96vw;
  overflow-x: auto;
  padding: 0.9rem 1.25rem;
  /* Standard warning-alert colours, shifted toward orange-red for a bit more urgency
     than a plain yellow caution - not the site's brand palette, since this is a
     functional caution message rather than a branding element. */
  background: #FFEDD5;
  border: 1px solid #FDBA74;
  border-radius: 14px;
  color: #9A3412;
  box-shadow: 0 10px 26px rgba(56, 32, 20, 0.14);
}
.payment-modal-notice svg{ flex-shrink: 0; width: 1.15rem; height: 1.15rem; color: #9A3412; }
.payment-modal-notice p{ font-size: 0.83rem; line-height: 1.5; white-space: nowrap; }
.payment-modal-notice a{ color: #9A3412; font-weight: 700; text-decoration: underline; }
.payment-modal-notice a:hover{ color: #7C2D12; }

body.payment-modal-open{ overflow: hidden; }
body.payment-modal-open .whatsapp-float,
body.payment-modal-open .back-to-top{ opacity: 0; visibility: hidden; pointer-events: none; }

/* Guards against an open popup being resized down into mobile range without a page reload */
@media (max-width: 760px){
  .payment-modal-grid{ grid-template-columns: 1fr; }
  .payment-modal .payment-qr{ border-right: 0; border-bottom: 1px solid var(--line); padding: 1rem 1.25rem; }
  .payment-form-wrap{ padding: 1.25rem; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px){
  .footer-top{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px){
  /* 158px = measured mobile header + announcement bar height (wraps to two lines at narrow widths) */
  .hero{ height: calc(100vh - 158px); min-height: 480px; max-height: 680px; }
  @supports (height: 100dvh){
    .hero{ height: calc(100dvh - 158px); }
  }
  .about-photo{ height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .nav-toggle{ display: flex; order: 2; position: relative; z-index: 2; }
  .nav-inner{ padding: 1.4rem var(--gutter); gap: 0.75rem; }
  .nav-inner .logo{ order: 1; position: relative; z-index: 2; }
  .logo-img{ height: 37px; }
  .nav-inner > .btn{ display: none; }
  .nav-links{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    margin: 0;
    z-index: 1;
    background: var(--bg);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    /* Base offset clears just the header; --announcement-height (set in JS when the
       menu opens) adds the announcement bar's height too, since that bar now shows
       fixed on top of the dropdown instead of being hidden underneath it. */
    padding: calc(4.5rem + var(--announcement-height, 0px)) 0 2rem;
    overflow-y: auto;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.3s var(--ease), visibility 0.3s;
  }
  .nav-links::before{
    content: '';
    position: absolute;
    top: calc(4.5rem + var(--announcement-height, 0px));
    left: 0;
    right: 0;
    border-top: 2px solid var(--brown);
  }
  .nav-links.is-open{ transform: translateY(0); visibility: visible; }
  .nav-links li{ width: 100%; }
  .nav-mobile-only{ display: list-item; }
  .nav-links a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.1rem var(--gutter);
    border-bottom: 1px solid var(--line);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
  }
  .nav-links a::before{
    content: '';
    order: 2;
    flex-shrink: 0;
    width: 7px; height: 7px;
    margin-left: 0.75rem;
    border-right: 2px solid var(--brown-soft);
    border-bottom: 2px solid var(--brown-soft);
    transform: rotate(-45deg);
  }
  /* The desktop hover/active-page underline (brand-orange ::after) doesn't belong in this
     full-row list style - without this it would show as a stray coloured line under
     whichever item matches the current page (e.g. "Home" on the homepage). */
  .nav-links a::after{ display: none; }

  .footer-top{ grid-template-columns: 1fr; row-gap: 0; padding-top: 1.75rem; padding-bottom: 1.5rem; }

  /* Slower on mobile: only one card is visible at a time on a narrow screen, so the
     same 30s desktop speed (tuned for a wide viewport showing several cards at once)
     reads as too fast to comfortably read here. */
  .testimonial-row{ --marquee-seconds: 50; }

  /* Footer accordion: each column collapses behind its heading, closed by default,
     expanding only the one the visitor taps. Desktop keeps all four always open (see
     .footer-toggle above) - this entire block only matters at this breakpoint. */
  .footer-col{ padding-block: 0.6rem; }

  .footer-top h2{ margin-bottom: 0; padding-bottom: 0; }
  .footer-top h2::after{ display: none; } /* the underline accent doesn't suit an accordion row */

  .footer-toggle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
  }
  .footer-toggle::after{
    content: "+";
    flex-shrink: 0;
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--brand-dark);
    transition: transform 0.2s var(--ease);
  }
  .footer-toggle[aria-expanded="true"]::after{ transform: rotate(45deg); } /* + becomes x */

  /* grid-template-rows 0fr/1fr animates to the panel's real content height exactly -
     unlike max-height, no need to guess/cap a height that fits every column. */
  .footer-panel{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s var(--ease);
  }
  .footer-panel > *{ overflow: hidden; min-height: 0; }
  .footer-col.is-open .footer-panel{ grid-template-rows: 1fr; margin-top: 0.9rem; }
}

@media (max-width: 480px){
  .announcement-bar{ font-size: 0.85rem; }
  .nav-inner{ gap: 0.6rem; }
  .logo-img{ height: 32px; }

  .testimonial-head{ gap: 0.4rem; }
  .testimonial-stars{ font-size: 0.75rem; }
  .testimonial-avatar{ width: 3.4rem; height: 3.4rem; margin-bottom: -1.4rem; }
  .testimonial-locality{ font-size: 0.62rem; }
}

/* ==========================================================================
   Legal / policy pages (Privacy, Terms, Cancellation, Shipping, Refund)
   ========================================================================== */
.legal-head{ text-align: center; margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.legal-head .eyebrow{ display: block; color: var(--brand-dark); margin-bottom: 0.9rem; }
.legal-head h1{ font-size: var(--text-h2); max-width: 34ch; margin-inline: auto; margin-bottom: 0.85rem; }
.legal-updated{ font-family: var(--font-mono); font-size: 0.8rem; color: var(--brown-soft); }

.legal-toc{
  max-width: 640px;
  margin: clamp(2rem, 4vw, 3rem) auto;
  background: var(--bg-dim);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
.legal-toc h2{
  font-family: var(--font-body);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 1rem;
}
.legal-toc ol{ list-style: decimal; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.55rem; }
.legal-toc a{ font-size: 0.92rem; color: var(--brown-soft); transition: color 0.2s var(--ease); }
.legal-toc a:hover{ color: var(--brand); }

.legal-content{ max-width: 760px; margin-inline: auto; }
.legal-content h2{
  font-size: 1.35rem;
  margin-top: clamp(2.25rem, 4vw, 3rem);
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 6rem;
}
.legal-content h2:first-of-type{ margin-top: 0; }
.legal-content h3{
  font-family: var(--font-body);
  text-transform: none;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0;
  color: var(--brown);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.legal-content p{ color: var(--brown-soft); line-height: 1.75; margin-bottom: 1rem; }
.legal-content ul, .legal-content ol{
  color: var(--brown-soft);
  line-height: 1.75;
  margin: 0 0 1rem;
  padding-left: 1.4rem;
}
.legal-content ul{ list-style: disc; }
.legal-content ol{ list-style: decimal; }
.legal-content li{ margin-bottom: 0.5rem; }
.legal-content li::marker{ color: var(--brand); font-weight: 700; }
.legal-content strong{ color: var(--brown); font-weight: 700; }
.legal-content a{ color: var(--brand-dark); text-decoration: underline; }
.legal-content a:hover{ color: var(--brand); }
.legal-formula{
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--brand-dark);
  background: var(--bg-dim);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1.25rem;
}
.legal-content table{ width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; font-size: 0.92rem; }
.legal-content th, .legal-content td{ text-align: left; padding: 0.65rem 0.85rem; border: 1px solid var(--line); color: var(--brown-soft); }
.legal-content th{ background: var(--bg-dim); color: var(--brown); font-weight: 700; }

/* Reuses the payment notice's warning palette so flagged/assumption clauses read
   consistently with the rest of the site's "please confirm before you act" language */
.legal-flag{
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  background: #FFEDD5;
  border: 1px solid #FDBA74;
  border-radius: 12px;
}
.legal-flag svg{ flex-shrink: 0; width: 1.2rem; height: 1.2rem; margin-top: 0.15rem; color: #9A3412; }
.legal-flag p{ font-size: 0.88rem; line-height: 1.6; color: #9A3412; margin: 0; }
.legal-flag strong{ color: #7C2D12; }

.legal-contact-card{
  max-width: 760px;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  background: var(--green);
  color: var(--cream-text);
  border-radius: 20px;
  padding: clamp(1.75rem, 3vw, 2.25rem);
}
.legal-contact-card h2{ color: var(--cream-text); border-bottom-color: rgba(255, 251, 240, 0.2); }
.legal-contact-card p{ color: var(--cream-soft); }
.legal-contact-card a{ color: var(--gold); }
.legal-contact-card a:hover{ color: var(--cream-text); }

.legal-related{
  max-width: 760px;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}
.legal-related h2{
  font-family: var(--font-body);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 1rem;
}
.legal-related ul{ display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; }
.legal-related a{ font-size: 0.9rem; color: var(--brown-soft); transition: color 0.2s var(--ease); }
.legal-related a:hover{ color: var(--brand); }