/* ==========================================================================
   Aatithya Farm — the only stylesheet on the site.
   Palette is taken from the logo and the pouch: Aatithya red, mango gold,
   leaf green, warm paper. Retune the brand by editing :root and nothing else.
   ========================================================================== */

:root {
  --brand:       #C4161C;   /* Aatithya red — the wordmark */
  --brand-dark:  #9C1015;
  --mango:       #E8901E;   /* fruit orange */
  --mango-dark:  #C9760F;
  --gold:        #F5C518;   /* the sun behind the farmer */
  --leaf:        #7AB648;
  --leaf-dark:   #2F6B24;
  --cream:       #FFFBF3;
  --cream-deep:  #FDF3E0;
  --ink:         #2C1F14;
  --ink-soft:    #5D4B3C;
  --line:        #EADFCC;
  --white:       #FFFFFF;

  --serif: "Iowan Old Style", Georgia, "Palatino Linotype", "Book Antiqua", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius:    10px;
  --radius-lg: 16px;
  --shadow:    0 2px 8px rgba(44, 31, 20, .07);
  --shadow-md: 0 6px 20px rgba(44, 31, 20, .10);

  --wrap: 1140px;
  --gutter: 20px;
}

/* --- Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.15; margin: 0 0 .55em; color: var(--ink); }
h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.2rem); }
h2 { font-size: clamp(1.7rem, 1.3rem + 1.7vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1.1em; }

a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 3px solid var(--leaf-dark); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.measure { max-width: 68ch; }
.center { text-align: center; }
.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 62ch; }
.eyebrow {
  font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--leaf-dark); margin: 0 0 .8rem;
  /* Centred: the matched leaf pair reads as an ornament, so it wants to sit
     centred over its heading rather than hung on the left margin. */
  text-align: center;
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--radius) var(--radius); text-decoration: none;
}
.skip-link:focus { top: 0; color: #fff; }

/* --- Call bar ------------------------------------------------------------- */
.call-bar {
  display: block; background: var(--ink); color: var(--gold);
  text-align: center; padding: .55rem 1rem; font-weight: 700;
  font-size: .95rem; text-decoration: none;
}
.call-bar:hover { color: var(--white); text-decoration: underline; }

/* --- Header --------------------------------------------------------------- */
.site-header {
  background: rgba(255, 251, 243, .95); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100; backdrop-filter: saturate(1.4) blur(10px);
}
.header-inner {
  max-width: var(--wrap); margin: 0 auto; padding: .6rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.logo { display: block; line-height: 0; }
.logo img { width: 118px; height: auto; }
.header-right { display: flex; align-items: center; gap: 1.25rem; }
.nav-list {
  display: flex; align-items: center; gap: 1.4rem;
  list-style: none; margin: 0; padding: 0;
}
.nav-list a { color: var(--ink-soft); text-decoration: none; font-weight: 500; font-size: .97rem; }
.nav-list a:hover, .nav-list a[aria-current="page"] { color: var(--brand); }
.nav-list a[aria-current="page"] { font-weight: 700; }
.nav-toggle {
  display: none; align-items: center; gap: .5rem; cursor: pointer;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 11px 14px; font: inherit; font-weight: 700; color: var(--ink); min-height: 44px;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 18px; height: 2px; background: var(--ink); content: ""; position: relative;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after  { top: 4px; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: 12px 24px; border-radius: 999px; border: 2px solid transparent;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--brand); color: var(--white); box-shadow: var(--shadow); }
.btn--primary:hover { background: var(--brand-dark); color: var(--white); }
.btn--green { background: var(--leaf-dark); color: var(--white); }
.btn--green:hover { background: #24521c; color: var(--white); }
.btn--outline { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--outline:hover { border-color: var(--brand); color: var(--brand); }
.btn--onbrand { background: var(--white); color: var(--brand); }
.btn--onbrand:hover { background: var(--gold); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.btn.is-pending { background: var(--ink); color: var(--white); }
.btn.is-pending:hover { background: #1d140c; }
.buy-note { font-size: .9rem; color: var(--ink-soft); margin: .8rem 0 0; }

/* --- Sections ------------------------------------------------------------- */
.section { padding: clamp(3rem, 7vw, 5rem) 0; }
.section--alt   { background: var(--cream-deep); }
.section--white { background: var(--white); }
.section--tight { padding: clamp(2rem, 4vw, 3rem) 0; }
.section--brand { background: var(--brand); color: var(--white); }
.section--brand h2, .section--brand p, .section--brand .lede { color: var(--white); }
.section-head { max-width: 62ch; margin: 0 0 2.25rem; }
.section-head.center { margin-left: auto; margin-right: auto; }

.page-hero { background: var(--cream-deep); padding: clamp(2rem, 5vw, 3.5rem) 0; border-bottom: 1px solid var(--line); }
.page-hero h1 { margin-bottom: .3em; }
.breadcrumb { font-size: .9rem; color: var(--ink-soft); margin: 0 0 .9rem; }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb span { margin: 0 .5rem; }

/* --- Hero ----------------------------------------------------------------- */
.hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.hero-grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 860px) { .hero-grid { grid-template-columns: 1.05fr 1fr; } }
.hero-figure { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.price-line {
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
  font-family: var(--serif); font-size: 1.7rem; margin: 1.3rem 0 1.1rem;
}
.price-line .size { font-family: var(--sans); font-size: 1rem; color: var(--ink-soft); font-weight: 500; }
.hero-note { font-size: .92rem; color: var(--ink-soft); }

/* --- Trust bar ------------------------------------------------------------ */
.trust { background: var(--ink); color: #E4D9CC; padding: 1.5rem 0; }
.trust-list { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; text-align: center; }
@media (min-width: 620px) { .trust-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .trust-list { grid-template-columns: repeat(4, 1fr); } }
.trust-list li { margin: 0; font-size: .95rem; }
.trust-list strong { display: block; color: var(--white); font-size: 1.1rem; font-family: var(--serif); }

/* --- Cards / grids -------------------------------------------------------- */
.grid { display: grid; gap: 1.25rem; }
@media (min-width: 620px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 980px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.5rem; box-shadow: var(--shadow); height: 100%;
}
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }
.card-icon { width: 40px; height: 40px; color: var(--brand); margin-bottom: .9rem; }

.split { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 860px) { .split { grid-template-columns: 1fr 1fr; } }
.split figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
@media (min-width: 860px) { .split--flip > :first-child { order: 2; } }

.callout {
  background: var(--white); border-left: 6px solid var(--leaf-dark);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 1.25rem 1.5rem; margin: 0 0 1.5em;
  box-shadow: var(--shadow);
}
.callout p:last-child { margin-bottom: 0; }

.checklist { list-style: none; margin: 0 0 1.2em; padding: 0; }
.checklist li { position: relative; padding-left: 1.9rem; margin-bottom: .6em; }
.checklist li::before {
  content: "\2713"; position: absolute; left: 0; top: -1px;
  color: var(--leaf-dark); font-weight: 800; font-size: 1.1rem;
}
.xlist { list-style: none; margin: 0 0 1.2em; padding: 0; }
.xlist li { position: relative; padding-left: 1.9rem; margin-bottom: .6em; color: var(--ink-soft); }
.xlist li::before { content: "\2715"; position: absolute; left: 0; color: #A08B76; font-weight: 800; }

/* --- Tables --------------------------------------------------------------- */
/* Grid and flex children default to min-width:auto, which stops them shrinking
   below their content — that makes a wide table push the whole page sideways
   instead of scrolling inside .table-scroll. min-width:0 lets them shrink. */
.grid > *, .split > *, .hero-grid > * { min-width: 0; }
.card { min-width: 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
table {
  width: 100%; border-collapse: collapse; min-width: 480px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
th, td { text-align: left; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); font-size: .96rem; }
thead th {
  background: var(--cream-deep); font-size: .82rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft);
}
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
td.yes { color: var(--leaf-dark); font-weight: 700; }
td.no  { color: var(--ink-soft); }

.spec-dl { margin: 0; display: grid; grid-template-columns: minmax(8.5rem, auto) 1fr; gap: 0 1.25rem; }
.spec-dl dt { font-weight: 700; padding: .6rem 0; border-bottom: 1px solid var(--line); font-size: .93rem; }
.spec-dl dd { margin: 0; padding: .6rem 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: .95rem; }
.spec-dl > :nth-last-child(-n+2) { border-bottom: 0; }

/* --- Video ---------------------------------------------------------------- */
.video-frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-md); background: #000;
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Accordion ------------------------------------------------------------ */
/* Centre the column itself, never the text inside it — a centred paragraph
   wraps raggedly and is markedly harder to read. */
.accordion { max-width: 780px; margin-inline: auto; text-align: left; }
.accordion details {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: .75rem; overflow: hidden;
}
.accordion summary {
  cursor: pointer; padding: 1.05rem 1.3rem; font-weight: 700; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; min-height: 44px; align-items: center;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; color: var(--brand); font-size: 1.4rem; line-height: 1; flex: none; }
.accordion details[open] summary::after { content: "\2212"; }
.accordion details[open] summary { border-bottom: 1px solid var(--line); }
.accordion .body { padding: 1.05rem 1.3rem; }
.accordion .body p:last-child { margin-bottom: 0; }

/* --- TODO banner ---------------------------------------------------------- */
/* Visible on the page on purpose. Every one of these must be gone at launch. */
.todo {
  display: block; background: #FFF4D6; border: 2px dashed var(--mango-dark);
  border-radius: var(--radius); padding: .75rem 1rem; margin: 0 0 1.1em;
  color: #5C4407; font-size: .95rem; font-weight: 600;
}
.todo::before { content: "TODO \2014 "; font-weight: 800; letter-spacing: .03em; }
.todo a { color: #5C4407; }
.todo--check::before { content: "CHECK \2014 "; }

/* --- Forms ---------------------------------------------------------------- */
.form-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.25rem); box-shadow: var(--shadow); max-width: 640px;
}
.field { margin-bottom: 1.25rem; }
.field label { display: block; font-weight: 700; margin-bottom: .35rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--ink);
  background: var(--white); border: 1px solid #CBBFA8; border-radius: var(--radius); min-height: 44px;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--leaf-dark); }
.field [aria-invalid="true"] { border-color: var(--brand); border-width: 2px; }
.field .error { display: none; color: var(--brand-dark); font-weight: 700; font-size: .92rem; margin-top: .35rem; }
.field .error.is-shown { display: block; }
.required-mark { color: var(--brand); }
.hp-field { position: absolute; left: -9999px; }
.form-status { margin-top: 1rem; font-weight: 700; }
.form-status.is-error { color: var(--brand-dark); }
.form-status.is-ok { color: var(--leaf-dark); }

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--ink); color: #E4D9CC; padding: clamp(2.5rem, 6vw, 4rem) 0 2rem; font-size: .95rem; }
.site-footer a { color: #E4D9CC; }
.site-footer a:hover { color: var(--gold); }
.site-footer h2 {
  font-family: var(--sans); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 .9rem;
}
.site-footer p { color: #BFB1A2; }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer-logo img { width: 160px; height: auto; margin-bottom: 1rem; }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer-legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .87rem; }
.footer-legal p { color: #9C8E80; }
.footer-inline { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0 0 1.25rem; padding: 0; }

/* --- Mobile --------------------------------------------------------------- */
@media (max-width: 859px) {
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--cream); border-bottom: 1px solid var(--line); padding: .5rem var(--gutter) 1.25rem;
  }
  .site-nav.is-open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list li { border-bottom: 1px solid var(--line); }
  .nav-list a { display: block; padding: 14px 0; min-height: 44px; }
}
@media (max-width: 560px) {
  :root { --gutter: 14px; }
  .logo img { width: 96px; }
  .nav-toggle { padding: 10px 12px; font-size: .95rem; }
  .header-inner { gap: .5rem; }
  .lede { font-size: 1.1rem; }
}

/* --- Video fallback for local file:// preview ------------------------------ */
/* Only ever seen when the page is opened by double-clicking it. See main.js. */
.video-fallback {
  position: absolute; inset: 0; display: block; text-decoration: none; background: #000;
}
.video-fallback img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.video-fallback__play {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  width: 68px; height: 48px; border-radius: 12px; background: var(--brand);
}
.video-fallback__play::after {
  content: ""; position: absolute; left: 27px; top: 14px;
  border-left: 18px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent;
}
.video-fallback__note {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem 1.25rem;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
  color: #fff; font-weight: 700; text-align: center;
}
.video-fallback__note small { display: block; font-weight: 400; opacity: .85; font-size: .82rem; margin-top: .2rem; }

/* --- Slideshow ------------------------------------------------------------ */
/* Manual by default; autoplay only starts if the markup asks for it AND the
   visitor has not requested reduced motion. Always pausable. */
/* Capped at the native width of the video stills (640px) so they are never
   upscaled — enlarging them past 1:1 only makes the softness obvious. */
.slideshow { max-width: 640px; margin-inline: auto; }
.slideshow__viewport {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--ink); box-shadow: var(--shadow-md); aspect-ratio: 64 / 29;
}
.slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .5s ease; }
.slide.is-current { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3rem 1.25rem 1rem;
  /* Strong scrim: one frame has the logo burned into the middle of the shot,
     and the caption has to stay readable over it. */
  background: linear-gradient(transparent, rgba(0,0,0,.55) 42%, rgba(0,0,0,.92));
  color: #fff; font-size: .95rem; text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.slide figcaption strong { display: block; font-family: var(--serif); font-size: 1.15rem; }
@media (prefers-reduced-motion: reduce) { .slide { transition: none; } }

.slideshow__controls {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin-top: 1rem; flex-wrap: wrap;
}
.slideshow__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: var(--white); border: 1px solid var(--line); color: var(--ink);
  font: inherit; font-size: 1.1rem; line-height: 1;
}
.slideshow__btn:hover { border-color: var(--brand); color: var(--brand); }
.slideshow__dots { display: flex; gap: .45rem; margin: 0 .5rem; padding: 0; list-style: none; }
.slideshow__dots button {
  width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.slideshow__dots button::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: #CBBFA8; transition: background-color .15s ease, transform .15s ease;
}
.slideshow__dots button[aria-current="true"]::before { background: var(--brand); transform: scale(1.35); }
.slideshow__status { font-size: .88rem; color: var(--ink-soft); min-width: 5.5ch; text-align: center; }
.slideshow__note { font-size: .85rem; color: var(--ink-faint, var(--ink-soft)); text-align: center; margin: .75rem 0 0; }


/* ==========================================================================
   Organic cues
   Small, quiet signals that this is a farm product rather than a factory one:
   a leaf in place of a bullet, a paper grain under everything, green hairlines,
   and hand-cut corners on photographs. Nothing loud.
   ========================================================================== */

/* Warm paper grain across the whole page. Sits under everything, costs nothing,
   and stops the large flat cream areas looking like plastic. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22g%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.8%22%20numOctaves%3D%224%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22180%22%20height%3D%22180%22%20filter%3D%22url%28%23g%29%22%20opacity%3D%220.035%22%2F%3E%3C%2Fsvg%3E"); background-repeat: repeat;
}

/* The eyebrow gets a leaf. It appears above almost every section heading, so
   this is the motif that carries across the whole site. */
.eyebrow { display: block; }
.eyebrow::before, .eyebrow::after {
  content: ""; display: inline-block; vertical-align: -.12em;
  width: 1.05em; height: 1.05em;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%232F6B24%22%3E%3Cpath%20d%3D%22M6.05%208.05a7%207%200%200%200-.02%209.88c1.47-3.4%204.09-6.24%207.36-7.93-2.77%202.34-4.71%205.61-5.39%209.32a7%207%200%200%200%208.03-1.32c1.71-1.71%202.31-6.9%202.55-9.35a1%201%200%200%200-1.1-1.1c-2.45.24-7.64.84-9.35%202.55z%22%2F%3E%3C%2Fsvg%3E"); background-size: contain;
  background-repeat: no-repeat; background-position: center;
}
.eyebrow::before { margin-right: .5rem; }
.eyebrow::after  { margin-left: .5rem; transform: scaleX(-1); }

/* Ticks become leaves. */
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .28em;
  width: 1.05em; height: 1.05em;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%236FA82B%22%3E%3Cpath%20d%3D%22M6.05%208.05a7%207%200%200%200-.02%209.88c1.47-3.4%204.09-6.24%207.36-7.93-2.77%202.34-4.71%205.61-5.39%209.32a7%207%200%200%200%208.03-1.32c1.71-1.71%202.31-6.9%202.55-9.35a1%201%200%200%200-1.1-1.1c-2.45.24-7.64.84-9.35%202.55z%22%2F%3E%3C%2Fsvg%3E"); background-size: contain;
  background-repeat: no-repeat; background-position: center;
}

/* Trust chips: outlined in leaf green, each one led by a leaf. */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; justify-content: center; }
.chips li {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--white); border: 1px solid #D6E3C4; border-radius: 999px;
  padding: .5rem 1rem .5rem .85rem; font-size: .9rem; font-weight: 500; color: var(--ink-soft);
}
.chips li::before {
  content: ""; width: 1em; height: 1em; flex: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%236FA82B%22%3E%3Cpath%20d%3D%22M6.05%208.05a7%207%200%200%200-.02%209.88c1.47-3.4%204.09-6.24%207.36-7.93-2.77%202.34-4.71%205.61-5.39%209.32a7%207%200%200%200%208.03-1.32c1.71-1.71%202.31-6.9%202.55-9.35a1%201%200%200%200-1.1-1.1c-2.45.24-7.64.84-9.35%202.55z%22%2F%3E%3C%2Fsvg%3E"); background-size: contain;
  background-repeat: no-repeat; background-position: center;
}

/* A green hairline at the very top of the page, and under the header. */
.site-header { border-top: 3px solid var(--leaf); }

/* Photographs get hand-cut corners rather than a uniform machine radius. */
.split figure, .hero-figure { border-radius: 26px 8px 26px 8px; }

/* Section headings sit over a faint leaf watermark on the tinted bands. */
.section--alt { position: relative; overflow: hidden; }
.section--alt::after {
  content: ""; position: absolute; right: -40px; bottom: -50px;
  width: 220px; height: 220px; opacity: .05; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%232F6B24%22%3E%3Cpath%20d%3D%22M6.05%208.05a7%207%200%200%200-.02%209.88c1.47-3.4%204.09-6.24%207.36-7.93-2.77%202.34-4.71%205.61-5.39%209.32a7%207%200%200%200%208.03-1.32c1.71-1.71%202.31-6.9%202.55-9.35a1%201%200%200%200-1.1-1.1c-2.45.24-7.64.84-9.35%202.55z%22%2F%3E%3C%2Fsvg%3E"); background-size: contain; background-repeat: no-repeat;
  transform: rotate(-18deg);
}


@media (max-width: 560px) {
  .chips { justify-content: flex-start; }
  .split figure, .hero-figure { border-radius: 18px 6px 18px 6px; }
}

/* --- Hero cutout ----------------------------------------------------------
   The pouch render has a transparent background, so it should sit on the page
   rather than inside a card. No box, no crop — just a soft shadow under it. */
.hero-figure--cutout {
  background: none; box-shadow: none; border-radius: 0; overflow: visible;
}
.hero-figure--cutout img {
  width: 100%; max-width: 430px; height: auto; margin-inline: auto;
  filter: drop-shadow(0 24px 30px rgba(44, 31, 20, .22));
}
@media (prefers-reduced-motion: no-preference) {
  .hero-figure--cutout img { transition: transform .4s ease; }
  .hero-figure--cutout img:hover { transform: translateY(-4px); }
}

/* Cutouts used in a content column (not the hero) can run wider. */
.split .hero-figure--cutout img,
.hero-grid .hero-figure--cutout img { max-width: 100%; }
.hero .hero-figure--cutout img { max-width: 430px; }

.char-count { margin: .35rem 0 0; font-size: .85rem; color: var(--ink-soft); text-align: right; }
.char-count.is-near { color: var(--mango-dark); font-weight: 700; }

/* --- Embedded checkout ----------------------------------------------------- */
.checkout-frame {
  max-width: 760px; margin-inline: auto; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow);
}
.checkout-frame iframe { display: block; width: 100%; border: 0; }
.checkout-fallback {
  max-width: 760px; margin: 1rem auto 0; text-align: center;
  font-size: .9rem; color: var(--ink-soft);
}


/* ==========================================================================
   Phone layout
   Most visits are on a phone, so the first screen has to show the product,
   not a paragraph about it. These rules only apply below 620px.
   ========================================================================== */
@media (max-width: 620px) {

  /* 1. The pouch comes first. On a phone the hero stacks, and the text block
        was pushing the product off the first screen entirely. */
  .hero .hero-figure { order: -1; margin-bottom: .5rem; }
  .hero-figure--cutout img {
    width: auto; max-width: 100%; max-height: 32vh; margin-inline: auto;
  }
  .hero { padding-top: 1.25rem; }

  /* 2. Headline sized so it does not eat the screen the image just earned. */
  .hero h1 { font-size: clamp(1.75rem, 7.6vw, 2.15rem); margin-bottom: .4em; }

  /* 3. Centre the call to action under the stacked hero. The body copy stays
        left-aligned — centred paragraphs wrap raggedly — but the buttons sit
        under a centred product shot, so centring them is what looks right. */
  .hero .btn-row { justify-content: center; }

  /* 4. The lede was five lines of small print above the fold. Trim it back;
        the detail is repeated on The Mango page anyway. */
  .hero .lede { font-size: .98rem; margin-bottom: .8em; }
  .hero .price-line { margin: .9rem 0 .8rem; }

  /* 5. Tighten the eyebrow so the leaf pair and the text fit better. */
  .eyebrow { letter-spacing: .1em; }

  /* 5. Five full-width pills ran to 247px of ragged edges. Two columns,
        smaller type, aligned left. Six of them divide evenly into 2x3. */
  .chips { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; justify-content: stretch; }
  .chips li { font-size: .78rem; padding: .5rem .7rem; align-items: flex-start; line-height: 1.3; }
  .chips li::before { margin-top: .1em; }

  /* 7. Centred body copy wraps raggedly and is measurably harder to read at
        this width. Headings stay centred; the paragraphs under them do not. */
  .section-head.center p:not(.eyebrow), .section-head p:not(.eyebrow) { text-align: left; }
  .center .lede { text-align: left; }

  /* 8. Centre the mark in the stacked footer. The columns sit one above the
        other on a phone, so a left-hung logo looks stranded. */
  .footer-logo { display: block; text-align: center; }
  .footer-logo img { margin-inline: auto; }

  /* 9. Tighten the vertical rhythm — the page was 8.8 screens tall. */
  .section { padding-block: clamp(2.25rem, 8vw, 3rem); }
  .section-head { margin-bottom: 1.5rem; }
}

/* --- Sticky buy bar (phones only) ------------------------------------------
   The page is eight screens long on a phone. Without this the only way to buy
   is to scroll back to the top or all the way to the bottom. */
.buybar { display: none; }
@media (max-width: 620px) {
  .buybar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: rgba(255, 251, 243, .97);
    backdrop-filter: saturate(1.4) blur(10px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(44, 31, 20, .10);
    /* clear the iPhone home indicator */
    padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom, 0px));
    transform: translateY(calc(100% + 16px));   /* fully clear, whatever the padding */
    transition: transform .25s ease;
  }
  .buybar.is-up { transform: translateY(0); }
  /* Keep the bar from sitting on top of the last of the page. */
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .buybar[hidden] { display: none; }
  .buybar__inner { display: flex; align-items: center; gap: .75rem; }
  .buybar__price {
    font-family: var(--serif); font-size: 1.25rem; line-height: 1.1;
    display: flex; flex-direction: column; flex: none;
  }
  .buybar__price small { font-family: var(--sans); font-size: .72rem; color: var(--ink-soft); font-weight: 500; }
  .buybar .btn { flex: 1; justify-content: center; padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .buybar { transition: none; }
}

/* --- Header call to action ------------------------------------------------
   Hidden until the hero's own Add to cart has scrolled away, so the top of
   the page never shows two. Toggled with opacity rather than display, so the
   header does not reflow while you scroll. */
.header-cta { opacity: 0; visibility: hidden; transition: opacity .2s ease; }
.header-cta.is-shown { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .header-cta { transition: none; } }