/* Hallmark · macrostructure: Photographic · genre: editorial
 * nav: N6 Masthead · footer: Ft5 Statement · theme: custom (warm-paper / high-contrast-serif / warm-accent)
 * tone: premium patisserie editorial · anchor hue: 75deg amber
 * enrichment: none - the photography IS the enrichment
 * contrast: pass · mobile: pass (34, 49, 50-57)
 */
/* ==========================================================================
   Café-Style Desserts at Home — landing page styles
   Mobile-first. No framework, no build step.
   ========================================================================== */

/* ---------- Fonts (self-hosted, latin subset, variable) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ----------
   Canonical values live in tokens.css. These are the page's semantic aliases;
   every declaration below resolves to a token, never a raw value. */
:root {
  --cream:        var(--color-paper);
  --cream-tint:   var(--color-paper-2);
  --cream-deep:   var(--color-paper-3);
  --ink:          var(--color-ink);
  --ink-soft:     var(--color-ink-2);
  --muted:        var(--color-ink-3);
  --berry:        var(--color-accent);
  --berry-deep:   var(--color-accent-deep);
  --caramel:      var(--color-caramel);
  --caramel-ink:  var(--color-caramel-ink);
  --line:         var(--color-rule);
  --line-soft:    var(--color-rule-soft);

  --cta:          var(--color-ink);
  --cta-hover:    oklch(31% 0.042 48);
  --cta-text:     var(--color-paper-on-ink);

  --serif: var(--font-display);
  --sans:  var(--font-body);

  --radius:    var(--radius-md);
  --shadow:    0 14px 38px -20px oklch(23.7% 0.0326 51.1 / .34);
  --shadow-lg: 0 28px 70px -32px oklch(23.7% 0.0326 51.1 / .45);

  --wrap:   1140px;
  --gutter: var(--space-sm);
  --ease:   var(--ease-out);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
  background: var(--cream);   /* overscroll colour at the top of the page */
  overflow-x: clip;
}

body {
  margin: 0;
  /* Dark, not cream. The checkout platform appends its own policy footer
     after ours; it has no background of its own and carries opacity:.85, so
     it cannot be given an opaque background from a rule of ours. Making the
     page's floor dark means it simply sits on the footer's colour.
     Every section above therefore declares its own background explicitly. */
  background: var(--ink);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }

/* Display type is the only text large enough that a single long word can
   exceed a 320px viewport. Allow a break inside the word rather than let it
   push the page wide. */
h1, h2, h3, .h2, .hero__title { overflow-wrap: break-word; min-width: 0; }
/* Avoids one-word last lines in narrow columns. Ignored where unsupported. */
p, li { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button, input { font: inherit; color: inherit; }
button, a, summary, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;   /* no 300ms double-tap-zoom delay */
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 200;
  background: var(--ink);
  color: var(--cta-text);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: .9rem;
}
.skip-link:focus { left: 12px; }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 740px; }

/* Section rhythm. One repeated padding value across a dozen sections is what
   makes a long page feel machine-set — the eye reads the metronome. These
   three weights let the page breathe unevenly: close where an idea continues,
   open where it turns. */
.section { padding-block: clamp(52px, 36.67px + 4.79vw, 98px); background: var(--cream); }
.section--tint  { background: var(--cream-tint); }

.center { text-align: center; }

.section-head { max-width: 640px; margin-inline: auto; margin-bottom: clamp(34px, 26.67px + 2.29vw, 56px); }

/* ---------- Typography ---------- */
.eyebrow {
  font-size: .785rem;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--berry);
  margin-bottom: 16px;
}

.h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.8rem, 1.417rem + 1.917vw, 2.95rem);
  line-height: 1.08;
  letter-spacing: -.018em;
  font-optical-sizing: auto;
  text-wrap: balance;
}
.h2--final { font-size: clamp(1.95rem, 1.5rem + 2.25vw, 3.3rem); }

.lead {
  font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.14rem);
  color: var(--ink-soft);
  margin-top: 18px;
  line-height: 1.6;
}
.lead--center { margin-inline: auto; max-width: 52ch; }

.microcopy {
  font-size: .82rem;
  color: var(--muted);
  margin-top: 14px;
  letter-spacing: .01em;
}

/* ---------- Price ---------- */
.price {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
  font-size: clamp(2.1rem, 1.9rem + 1vw, 2.7rem);
  line-height: 1;
}
.price--sm { font-size: 1.9rem; }
.price--xl { font-size: clamp(2.8rem, 2.4rem + 2vw, 4rem); margin-block: 22px 8px; }
/* Loading skeleton shown only while [data-price] is still empty, i.e. before
   the platform injects the live price. It removes itself the instant any
   price text arrives, so the price is never hardcoded anywhere. */
[data-price]:empty::after {
  content: "";
  display: inline-block;
  width: 2.4em;
  height: .66em;
  border-radius: 4px;
  background: currentColor;
  opacity: .16;
}

/* Note always stacks under the price rather than sitting beside it -
   requested explicitly, not just a narrow-width wrap. */
.price-line {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
}
.price-line__note {
  font-size: .84rem;
  color: var(--muted);
  letter-spacing: .01em;
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--cta);
  --btn-fg: var(--cta-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 56px;
  /* Fluid label so "Get the recipes for ₹149 →" stays on one line from 360px up. */
  padding: 15px clamp(20px, 16.67px + 1.04vw, 30px);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-bg);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: clamp(.83rem, 0.8rem + 0.15vw, .92rem);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { background: var(--cta-hover); border-color: var(--cta-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn:active { transform: translateY(0); }

.btn--block { display: flex; width: 100%; }
.btn--lg { min-height: 62px; font-size: clamp(.85rem, 0.813rem + 0.183vw, .96rem); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--ink);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--cta-text); box-shadow: var(--shadow); }

/* Keep the label (and the price inside it) as one flex item so it wraps as a
   block instead of breaking away from the arrow. */
.btn { flex-wrap: wrap; }
.btn__label { display: inline; line-height: 1.35; }
.btn__arrow { display: inline-block; flex: none; transition: transform .25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn[aria-busy="true"], .btn:disabled { opacity: .62; pointer-events: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(251, 246, 238, .88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line-soft); box-shadow: 0 6px 22px -18px rgba(43,26,16,.5); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
}

.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.brand__mark {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--cream-deep);
  color: var(--ink);
}
.brand__text {
  font-family: var(--serif);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: -.01em;
  line-height: 1.15;
}
.brand__text em { font-style: italic; font-weight: 500; color: var(--muted); }

.site-header__cta {
  display: none;
  align-items: center;
  min-height: 44px;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 10px 22px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.site-header__cta:hover { background: var(--ink); color: var(--cta-text); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  background: var(--cream);
  padding-block: clamp(24px, 18.67px + 1.67vw, 40px) clamp(48px, 40px + 2.5vw, 72px);
}

.hero__grid { display: grid; gap: 26px; }
.hero__copy   { order: 1; }
.hero__action { order: 2; }
.hero__media  { order: 3; }

.hero__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.35rem, 1.991rem + 1.796vw, 3rem);
  line-height: 1.01;
  letter-spacing: -.028em;
  font-optical-sizing: auto;
  margin-bottom: 18px;
  text-wrap: balance;
}

.hero__lead {
  font-size: clamp(1.04rem, 0.987rem + 0.267vw, 1.2rem);
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 30ch;
}

.hero__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  margin-inline: calc(var(--gutter) * -.4);
}
.hero__media img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  /* Anchor right: the desserts sit on the right of the frame and the left
     third is empty counter, so a narrow crop should keep the food. */
  object-position: right center;
}

/* On mobile the price + CTA come straight after the photo; the longer
   supporting sentence drops below them so the CTA stays near the fold. */
.hero__action { display: flex; flex-direction: column; }
.price-line { order: 1; }
.hero__action .btn { order: 2; }
.hero__action .social-proof { order: 1; }
.price-line { order: 2; }
.hero__action .btn { order: 3; }
.hero__action .microcopy { order: 4; }

/* ---------- Social proof ----------
   Sits directly under the CTA, where proof does the most work. Figures are
   injected from PRODUCT.socialProof; the stars are absent unless a rating is
   configured, so the markup can never imply ratings that were not collected. */
.social-proof {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
}
.social-proof__avatars {
  width: 84px;
  height: auto;
  flex: none;
}
.social-proof__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.35;
}
.social-proof__line {
  color: var(--ink);
  font-weight: 500;
}
.social-proof__line strong {
  font-weight: 600;
  font-family: var(--serif);
  font-size: .9rem;
  letter-spacing: -.01em;
}
.social-proof__note { font-size: .78rem; opacity: .85; }

.stars { display: inline-flex; gap: 1.5px; line-height: 1; }
.stars__star { color: var(--line); font-size: .72rem; }
.stars__star.is-on { color: var(--caramel-ink); }

.hero__support {
  order: 4;
  font-size: .96rem;
  color: var(--muted);
  line-height: 1.58;
  margin-top: 26px;
  max-width: 46ch;
}

/* ==========================================================================
   HOOK
   ========================================================================== */

/* ==========================================================================
   RECIPES
   ========================================================================== */
/* Two across from the smallest screen. Stacked, the five cards ran 4.3
   screens - 30% of the whole page - which is far too much scrolling for a
   low-ticket impulse buy. Square crops keep the food readable at this size
   while cutting the section to roughly a third of its height. */
.recipe-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
}
.recipe-card__media img { aspect-ratio: 1 / 1; }
.recipe-card__body { padding: 14px 14px 18px; }
.recipe-card__num { font-size: .72rem; margin-bottom: 5px; }
.recipe-card__title { font-size: .98rem; line-height: 1.14; margin-bottom: 5px; }
/* Two lines keeps the rows even and stops one long dessert name doubling the
   height of its whole row. Full text stays in the DOM for screen readers. */
.recipe-card__desc {
  font-size: .84rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The buy card spans the full row so the CTA is never a cramped half-width. */
.recipe-card--cta { grid-column: 1 / -1; min-height: 0; }

/* Odd count: the last recipe would otherwise sit alone next to an empty cell. */
.recipe-card:nth-child(5) { grid-column: 1 / -1; }
.recipe-card:nth-child(5) .recipe-card__media img { aspect-ratio: 16 / 9; }

.recipe-card {
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.section--tint .recipe-card { background: var(--cream); }
.recipe-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.recipe-card__media { overflow: hidden; background: var(--cream-deep); }
.recipe-card__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.recipe-card:hover .recipe-card__media img { transform: scale(1.04); }

.recipe-card__body { padding: 22px 22px 26px; flex: 1; }

.recipe-card__num {
  display: block;
  font-family: var(--serif);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--caramel-ink);
  margin-bottom: 8px;
}

.recipe-card__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.16;
  letter-spacing: -.012em;
  margin-bottom: 9px;
  text-wrap: balance;
}

.recipe-card__desc { color: var(--muted); font-size: .95rem; line-height: 1.55; }

/* CTA sits in the grid as a ruled block, not another photo card. */
.recipe-card--cta {
  background: var(--cream-deep);
  border-color: transparent;
  justify-content: center;
  min-height: 300px;
}
.recipe-card--cta:hover { transform: none; box-shadow: none; }
.recipe-card__body--cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 36px 24px;
}
.recipe-card__ctaLead {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.18;
  margin-bottom: 6px;
}
.recipe-card__body--cta .price { margin-bottom: 18px; }
.recipe-card__body--cta .btn { max-width: 320px; }

/* ==========================================================================
   VALUE
   ========================================================================== */
.value__grid { display: grid; gap: clamp(34px, 25.33px + 2.71vw, 60px); align-items: center; }

.ticks { margin-top: 30px; display: grid; gap: 18px; }
.ticks li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  align-items: start;
  font-size: .97rem;
  color: var(--muted);
  line-height: 1.5;
}
.ticks strong { color: var(--ink); font-weight: 500; font-size: 1.04rem; }
.ticks__icon {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--berry);
  color: var(--cta-text);
}

.value__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.value__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ==========================================================================
   MOCKUP
   ========================================================================== */
.mockup__grid { display: grid; gap: clamp(32px, 21.33px + 3.33vw, 64px); align-items: center; }
.mockup__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.mockup__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.mini-list { margin-top: 26px; display: grid; gap: 12px; }
.mini-list li {
  position: relative;
  padding-left: 24px;
  color: var(--muted);
  font-size: .97rem;
}
.mini-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: .62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--caramel);
}
.mockup__copy .btn { margin-top: 30px; }

/* ==========================================================================
   OBJECTION
   ========================================================================== */

/* ==========================================================================
   HONESTY
   ========================================================================== */
.crosses__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(43, 26, 16, .07);
  color: var(--muted);
}

/* ==========================================================================
   OFFER POINTS (used by the final CTA)
   ========================================================================== */
.offer-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  margin-block: 24px 34px;
}
.offer-points li {
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .85rem;
  color: var(--ink-soft);
  letter-spacing: .02em;
  background: var(--cream);
}

/* ==========================================================================
   TRUST
   ========================================================================== */
.trust__grid { display: grid; gap: clamp(28px, 21.33px + 2.08vw, 48px); align-items: center; }

/* ---------- Creator block ----------
   A named person instead of an anonymous storefront. Attribution only —
   no follower counts, no popularity or authority claims. */
.creator {
  background: var(--cream-tint);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 22.67px + 1.04vw, 36px);
}
.creator__mark {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  margin-bottom: 18px;
}
.creator__eyebrow {
  font-size: .785rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--berry);
  margin-bottom: 12px;
}
.creator__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.35rem, 1.267rem + 0.417vw, 1.6rem);
  letter-spacing: -.015em;
  line-height: 1.15;
}
.creator__handle {
  font-size: .92rem;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: .01em;
}
.creator__note {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: .98rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.trust__facts { display: grid; gap: 4px; }
.trust__facts li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-block: 20px;
  border-bottom: 1px solid var(--line-soft);
}
.trust__facts li:last-child { border-bottom: 0; }
.trust__facts strong {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 1.7rem + 1vw, 2.5rem);
  line-height: 1;
  color: var(--berry);
  letter-spacing: -.02em;
  flex: none;
  min-width: 2.4ch;
}
.trust__facts span { color: var(--muted); font-size: .97rem; line-height: 1.45; }

.testimonials { margin-top: 40px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.accordion { border-top: 1px solid var(--line); }
.acc { border-bottom: 1px solid var(--line); }
.acc__h { margin: 0; font-size: inherit; font-weight: inherit; }

.acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-height: 60px;
  padding: 20px 4px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.14rem);
  line-height: 1.3;
  letter-spacing: -.008em;
  color: var(--ink);
  transition: color .2s var(--ease);
}
.acc__btn:hover { color: var(--berry); }

.acc__icon {
  position: relative;
  flex: none;
  width: 20px; height: 20px;
}
.acc__icon::before, .acc__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--berry);
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.acc__icon::before { width: 14px; height: 1.6px; }
.acc__icon::after  { width: 1.6px; height: 14px; }
.acc__btn[aria-expanded="true"] .acc__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.acc__panel { overflow: hidden; }
.acc__panel > p {
  padding: 0 4px 24px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.62;
  max-width: 60ch;
}
.acc__panel[hidden] { display: none; }
.acc__panel.is-animating { display: block !important; transition: height .34s var(--ease); }

/* ==========================================================================
   FINAL CTA + CHECKOUT
   ========================================================================== */
.final { background: var(--cream-deep); }
.final__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 1.133rem + 0.833vw, 1.8rem);
  color: var(--berry-deep);
  margin-top: 14px;
}
.final__facts {
  margin-top: 26px;
  color: var(--ink-soft);
  font-size: clamp(1rem, 0.967rem + 0.167vw, 1.1rem);
  line-height: 1.5;
}
.final__frame {
  max-width: 40ch;
  margin: 6px auto 0;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--muted);
}
.final .offer-points { margin-block: 24px 6px; }
.final .offer-points li { background: var(--cream); border-color: var(--line); }

.final__cta { width: 100%; max-width: 400px; margin-top: 26px; }

/* ==========================================================================
   CHECKOUT MODAL
   Full-screen sheet on phones; centred panel from 640px up.
   Uses <dialog> so focus trapping, Esc and background inertness are native.
   ========================================================================== */
.modal {
  margin: 0;
  padding: 0;
  border: 0;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  background: transparent;
  color: var(--ink);
  overflow: hidden;
}
/* Bottom sheet on phones: the panel sits at the foot of the screen so the Pay
   button lands under the thumb, and it is only as tall as it needs to be.
   Scoped to [open] so the dialog's default hidden state still applies. */
/* A plain fixed overlay with a MODERATE z-index - deliberately not the
   browser's top layer. dialog.showModal() renders above every z-index on the
   page, which put this sheet on top of the Razorpay/Cashfree window. Opened
   with show() instead, it stacks normally: above the header (60) and sticky
   bar (80), below payment gateways, which use z-index 2147483647. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.modal:not([open]) { display: none; }
/* Bottom sheet on phones: the panel sits at the foot of the screen so the Pay
   button lands under the thumb, and it is only as tall as it needs to be. */
.modal[open] {
  display: flex;
  align-items: flex-end;
  /* The dimmed backdrop, formerly ::backdrop (which only exists in the top
     layer). */
  background: rgba(30, 18, 10, .62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.modal__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 92vh;
  max-height: 92dvh;      /* excludes the mobile address bar */
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--cream);
  padding: 16px var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
}

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
}
.modal__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -.015em;
  line-height: 1.15;
}
.modal__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px; height: 44px;
  margin: -6px -8px 0 0;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.modal__close:hover { background: var(--cream-deep); color: var(--ink); }

.modal__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: var(--cream-tint);
  border-radius: var(--radius);
  margin-bottom: 22px;
}
.modal__item { font-size: .96rem; font-weight: 500; color: var(--ink); }
.modal__note { font-size: .82rem; color: var(--muted); margin-top: 2px; }
.modal__price { font-size: 1.9rem; flex: none; }

.modal__microcopy { text-align: center; }

/* Reassurance at the moment of decision. It follows the form directly rather
   than being pushed to the foot of the sheet: with only an email field above
   it, margin-top:auto left a large gap through the middle of the panel. */

.checkout { text-align: left; }
.checkout__fields { display: grid; gap: 16px; }

.field { display: grid; gap: 7px; }

/* Phone is required by the platform but never asked of the visitor.
   js/app.js fills it from PRODUCT.defaultPhone. Declared after .field so it
   wins the cascade. */
.field.field--hidden { display: none; }
.field__hint { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.field__label {
  font-size: .785rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input {
  width: 100%;
  min-height: 54px;
  padding: 14px 18px;
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font-size: 16px; /* 16px prevents iOS zoom-on-focus */
  color: var(--ink);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field input::placeholder { color: rgba(124, 99, 83, .7); }
.field input:focus { border-color: var(--ink); background: #FEFCF8; }
.field input[aria-invalid="true"] { border-color: var(--berry); }

.checkout__error {
  display: block;
  min-height: 0;
  color: var(--berry-deep);
  font-size: .88rem;
  line-height: 1.4;
}
.checkout__error:not(:empty) { margin-top: 12px; }

.checkout .btn { margin-top: 22px; }
.checkout .microcopy { text-align: center; }

/* Modal entrance. Closing is instant so the tap feels immediate. */
@keyframes modalSheetIn { from { transform: translateY(22px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes modalFadeIn  { from { opacity: 0; } to { opacity: 1; } }
.modal[open] .modal__inner { animation: modalSheetIn .32s var(--ease); }
.modal[open] { animation: modalFadeIn .32s var(--ease); }

/* Background must not scroll behind the sheet. */
html.modal-open, body.modal-open { overflow: hidden; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--ink);
  color: rgba(253, 248, 241, .75);
  /* Bottom padding is light because the platform's policy strip continues
     this same dark band directly underneath. */
  padding-block: 48px 26px;
  font-size: .9rem;
}
.site-footer__inner { display: grid; gap: 10px; }
.site-footer__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--cta-text);
}
.site-footer__note { max-width: 48ch; line-height: 1.55; font-size: .88rem; }
.site-footer__legal {
  margin-top: 16px;
  font-size: .82rem;
  color: rgba(253, 248, 241, .45);
  letter-spacing: .04em;
}

/* ==========================================================================
   INJECTED PLATFORM FOOTER
   The checkout platform appends its own strip after our <footer> — links
   (Refund · Terms · Privacy · Contact · email) plus a small notice line.
   Its text is light, so on the page's cream background it is invisible.
   Everything after .site-footer therefore inherits the footer's colours.
   The <script> tag is excluded; the sticky CTA and the checkout dialog sit
   before the footer in the DOM, so they are never caught by this.

   The injected markup is:
     <footer class="dbs-policy-footer" style="…color:#F4F6F3;opacity:.85">
   Near-white text, no background of its own, and opacity:.85 applied to the
   whole element — so giving *it* a background would dim that background too
   and the band would not match. Instead body is dark (see the body rule), and
   this strip simply sits on it. Nothing here fights the platform's inline
   styles, so no !important is needed.
   ========================================================================== */

/* Belt and braces: paint the strip dark itself, so this holds even if the
   platform ever wraps the page in a light container and the body floor below
   is no longer what sits behind the strip.
   `opacity: 1` must win over the element's inline `opacity:.85`, otherwise
   that opacity would dim this background too and the band would not match the
   footer. This is the only !important in the stylesheet, and it exists purely
   to override a third-party inline style we do not control. With full opacity
   the platform's own text colours (#F4F6F3 / #c9cec8) land at 14:1 and 9:1
   against this background — brighter than they designed, and more readable. */
.dbs-policy-footer {
  background: var(--ink);
  opacity: 1 !important;
  border-top: 1px solid rgba(253, 248, 241, .12);
}
.dbs-policy-footer a { text-underline-offset: 3px; }
.dbs-policy-footer a:hover { text-decoration: underline; }

/* ==========================================================================
   MOBILE STICKY CTA
   ========================================================================== */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  padding: 12px var(--gutter);
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(251, 246, 238, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-soft);
  transform: translateY(105%);
  transition: transform .38s var(--ease);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .btn { min-height: 54px; box-shadow: none; }
.sticky-cta .btn:hover { transform: none; box-shadow: none; }

body.has-sticky { padding-bottom: 84px; }

/* ==========================================================================
   SCROLL REVEAL (progressive enhancement — content is visible without JS)
   ========================================================================== */
/* One identical fade applied to every element is a recognisable generated-page
   tell. Photographs settle further and slower than text; items in a row are
   staggered so the group resolves in sequence rather than as one block. */
.reveal--armed { opacity: 0; transform: translateY(14px); }
.reveal--armed.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .62s var(--ease), transform .62s var(--ease);
}

/* Photography: longer travel, slower settle, slight scale-down on arrival. */
figure.reveal--armed,
.recipe-card.reveal--armed { transform: none; }
figure.reveal--armed.is-in,
.recipe-card.reveal--armed.is-in {
  transition: opacity var(--dur-slow) var(--ease);
}

/* Stagger within a row. */
.recipe-card.reveal--armed:nth-child(2) { transition-delay: .09s; }
.recipe-card.reveal--armed:nth-child(3) { transition-delay: .18s; }
.recipe-card.reveal--armed:nth-child(4) { transition-delay: .07s; }
.recipe-card.reveal--armed:nth-child(5) { transition-delay: .14s; }

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */

/* --- 520px: comfortable phones / small tablets --- */
@media (min-width: 520px) {
  :root { --gutter: 28px; }
  .hero__media img { aspect-ratio: 16 / 10; }
}

/* --- 560px: two-column card grids --- */
@media (min-width: 560px) {
  .recipe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .recipe-card:nth-child(5) { grid-column: auto; }
  .recipe-card__media img,
  .recipe-card:nth-child(5) .recipe-card__media img { aspect-ratio: 4 / 5; }
  .recipe-card__body { padding: 22px 22px 26px; }
  .recipe-card__num { font-size: .8rem; margin-bottom: 8px; }
  .recipe-card__title { font-size: 1.3rem; line-height: 1.16; margin-bottom: 9px; }
  .recipe-card__desc { font-size: .95rem; line-height: 1.55; -webkit-line-clamp: none; display: block; overflow: visible; }
  /* Centred panel instead of a full-screen sheet once there's room for one. */
  /* Matches .modal[open]'s specificity so the bottom-sheet alignment does not
     leak past the phone breakpoint. */
  .modal[open] { display: grid; place-items: center; padding: 24px; }
  .modal__inner {
    width: 100%;
    max-width: 470px;
    height: auto;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    border-radius: var(--radius-lg);
    box-shadow: 0 40px 90px -30px rgba(30, 18, 10, .6);
    padding: 26px 30px 30px;
  }
  .modal__title { font-size: 1.5rem; }
  /* On desktop the panel hugs its content, so the recap sits inline. */
}

/* The supporting paragraph stays hidden on a stacked hero: it sits below the
   button, repeats the lead, and its dessert names are the recipe cards
   immediately beneath. Desktop keeps it. */
@media (max-width: 899px) {
  .hero__support { display: none; }
}

/* --- 560-899px: keep the hero CTA in the fold ---
   Capping the photograph against viewport height rather than a fixed ratio is
   what keeps this correct on short landscape screens as well as tall ones. */
@media (min-width: 560px) and (max-width: 899px) {
  .hero__media img { max-height: 40vh; }
}

/* --- 760px: tablets pair up the two-column content sections ---
   These previously waited for 900px, leaving 760-899px as a column of very
   large stacked blocks. The hero keeps its stacked shape until 900 because
   its headline needs the full width to stay on two lines. */
@media (min-width: 760px) {
  .value__grid  { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
  .mockup__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .trust__grid  { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .value__media img { aspect-ratio: 5 / 4; }
}

/* --- 900px: desktop editorial layout --- */
@media (min-width: 900px) {
  :root { --gutter: 40px; }

  html { scroll-padding-top: 90px; }

  .site-header__inner { min-height: 76px; }
  .site-header__cta { display: inline-flex; }
  .brand__text { font-size: 1.05rem; }

  /* Hero: full-bleed photography with copy set into the image's open left side */
  .hero {
    padding: 0;
    display: grid;
    align-items: center;
    /* The 560px floor was taller than a short laptop's whole viewport
       (1024x600), pushing the buy button out of the fold. The outer min()
       caps the hero against actual screen height; tall displays are
       unaffected because 88vh exceeds the clamp there. */
    min-height: min(clamp(520px, 78vh, 730px), 88vh);
    isolation: isolate;
  }
  .hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .hero__media img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-position: right center;
  }
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      100deg,
      var(--cream) 0%,
      var(--cream) 26%,
      rgba(251, 246, 238, .93) 42%,
      rgba(251, 246, 238, .58) 54%,
      rgba(251, 246, 238, 0) 68%
    );
  }
  .hero__grid {
    grid-template-columns: minmax(0, 580px);
    gap: 0;
    padding-block: 56px;
  }
  .hero__title { font-size: clamp(2.9rem, 1.431rem + 2.611vw, 4rem); margin-bottom: 20px; }
  /* The compact strip above is tuned for the phone fold. Desktop has room,
     so it steps back up a little. */
  .social-proof { gap: 12px; margin-bottom: 20px; }
  .social-proof__avatars { width: 104px; }
  .social-proof__text { font-size: .86rem; gap: 3px; }
  .social-proof__line strong { font-size: .98rem; }
  .stars__star { font-size: .82rem; }
  .hero__lead { max-width: 26ch; }
  /* Desktop restores the reading order: supporting copy, then price, then CTA. */
  .hero__support { order: 0; margin-top: 26px; margin-bottom: 26px; font-size: 1rem; }
  .hero__action { margin-top: 4px; }
  .hero__action .btn { width: auto; display: inline-flex; }
  .price-line { margin-bottom: 22px; }

  /* Two-column editorial sections */
  .value__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  }
  .value__media img { aspect-ratio: 5 / 4; }

  .mockup__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

  .trust__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  /* Sticky CTA is mobile-only */
  .sticky-cta { display: none !important; }
  body.has-sticky { padding-bottom: 0; }
}

/* --- 1000px: three-column recipe grid --- */
@media (min-width: 1000px) {
  .recipe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .recipe-card__body { padding: 26px 26px 30px; }
}

/* --- Very small phones (360px) --- */
@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .btn { letter-spacing: .06em; }
  .recipe-card__body { padding: 20px 18px 24px; }
}

/* ==========================================================================
   MOTION PREFERENCES
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal--armed { opacity: 1; transform: none; }
  .btn:hover, .recipe-card:hover { transform: none; }
  .recipe-card:hover .recipe-card__media img { transform: none; }
  .sticky-cta { transition: none; }
  .modal[open] .modal__inner, .modal[open] { animation: none; }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
  .site-header, .sticky-cta, .btn { display: none !important; }
  body { background: #fff; }
}

/* ==========================================================================
   PREVIEW
   ========================================================================== */
@media (min-width: 560px) {
}
@media (min-width: 900px) {
}