/* ==========================================================================
   Deep Sea Dough Co. — Design tokens
   Palette: coastal, sea and sky. Sky-haze ground, shallow-water aqua bands,
   ocean blues, one warm sunset coral accent, sun gold for quiet dividers.
   Type: Fraunces (warm, characterful serif) + Inter (clean body/UI face).
   ========================================================================== */

:root {
  /* Coastal palette, sea and sky (2026-09-30): a pale sky-haze ground,
     shallow-water aqua for the alternating bands, ocean blue for headings,
     deep ocean for the dark bands and footer, sea glass for tags and
     dividers, and one warm note, sunset coral, for the buttons and the
     order band. Variable names kept from v1: navy = ocean, clay = coral,
     cream = sky haze. */
  --cream: #eff5f6;        /* sky haze */
  --cream-deep: #d7e8ec;   /* shallow water */
  --paper: #fafdfd;        /* sea spray */
  --sunset: #cfe6ef;       /* morning sky, hero wash */
  --foam: #c6dfe4;         /* sea foam, photo section */
  --navy: #1b6a8a;         /* ocean */
  --navy-deep: #164b63;    /* deep ocean, bands and footer */
  --slate: #4f9fb3;        /* sea glass */
  --signal: #003a8c;       /* signal-flag blue, from the D S D flags (2026-10-06): headings, blue text, buttons */
  --signal-light: #1f5cb3; /* lighter signal blue for hover */
  --clay: #e07a52;         /* sunset coral */
  --clay-deep: #b85a35;    /* terracotta */
  --gold: #e9b85f;         /* sun */
  --ink: #22303a;          /* wet slate */
  --ink-soft: #4f6069;
  --line: rgba(27, 106, 138, 0.18);
  --radius: 4px;
  --shadow: 0 12px 30px -18px rgba(22, 75, 99, 0.4);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
/* grid and flex children default to min-width:auto, which lets a large image
   force the column wider than the viewport on phones */
.hero-inner > *, .story-inner > *, .info-inner > *,
.category-grid > *, .favorites-grid > *, .product-grid > *,
.photo-strip > *, .disclosure-grid > *, .footer-grid > *, .why-grid > * { min-width: 0; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--signal);
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 0.9em;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 28px;
}

section { padding: 88px 0; scroll-margin-top: 80px; }
@media (max-width: 720px) { section { padding: 56px 0; } }

/* -------------------- buttons -------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 26px;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:focus-visible { outline: 2px solid var(--slate); outline-offset: 3px; }
.btn-primary { background: var(--signal); color: var(--paper); }
.btn-primary:hover { background: var(--signal-light); transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--signal); border-color: var(--signal); }
.btn-secondary:hover { background: var(--signal); color: var(--paper); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* -------------------- header -------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(239, 245, 246, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
}
.logo {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--signal);
  text-decoration: none;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.logo span { color: var(--clay); }
/* header name in the same color as the hero headline (2026-10-06) */
.site-header .logo-text { color: var(--signal); }
.logo-img {
  height: 44px;
  width: 44px;
  max-width: none;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  flex: none;
}
.site-header .logo { flex: none; }
.logo-text { white-space: nowrap; }
.header-actions { display: flex; align-items: center; gap: 14px; }
.btn-small { padding: 10px 18px; font-size: 0.85rem; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
}
.nav-links a:hover { color: var(--clay-deep); }
.mobile-toggle { display: none; }
@media (max-width: 760px) {
  .nav-links { display: none; }
  .site-header .container { padding: 0 16px; }
  .container { padding: 0 16px; }
  .mobile-toggle { display: block; background: none; border: none; font-size: 1.4rem; cursor: pointer; }
}
@media (max-width: 400px) { .logo-text { font-size: 1.1rem; } }

/* -------------------- hero -------------------- */
.hero {
  padding: 64px 0 0;
  overflow: hidden;
  /* Wheat field photo (images/wheat-field-01.jpg, 2026-10-08; it replaced
     the sunset, shore-sunset-01.jpg) behind the hero. The sky-haze
     wash is strongest on the left, under the headline and buttons, and fades
     toward the right so the sky shows; the bottom fades into the page. */
  background:
    linear-gradient(180deg, rgba(239, 245, 246, 0) 60%, var(--cream) 100%),
    linear-gradient(90deg, rgba(239, 245, 246, 0.86) 0%, rgba(239, 245, 246, 0.62) 45%, rgba(239, 245, 246, 0.08) 100%),
    url("../images/wheat-field-01.jpg") center 30% / cover no-repeat,
    var(--cream);
}
@media (max-width: 860px) {
  /* One column on phones: text runs the full width, so wash evenly. */
  .hero {
    background:
      linear-gradient(180deg, rgba(239, 245, 246, 0.70) 0%, rgba(239, 245, 246, 0.80) 70%, var(--cream) 100%),
      url("../images/wheat-field-01.jpg") center 30% / cover no-repeat,
      var(--cream);
  }
}
.hero-inner {
  /* Text only since 2026-10-06 (the loaf photo was removed at the owner's
     request); the sunset background fills the rest of the section. */
  display: grid;
  grid-template-columns: minmax(0, 640px);
  gap: 56px;
  align-items: center;
  padding-top: 56px;
  padding-bottom: 72px;
}
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
}
.hero h1 {
  font-size: clamp(2.4rem, 4.4vw, 3.5rem);
  line-height: 1.08;
  margin-bottom: 0.4em;
}
.hero p.lede {
  font-size: 1.12rem;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: 2em;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-photo {
  aspect-ratio: 4/5;
  border-radius: 6px;
  background:
    linear-gradient(160deg, rgba(27,106,138,0.08), rgba(224,122,82,0.14)),
    repeating-linear-gradient(135deg, rgba(27,106,138,0.05) 0 2px, transparent 2px 18px),
    var(--cream-deep);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 0.85rem;
  text-align: center;
  padding: 20px;
  box-shadow: var(--shadow);
}

/* photo slots: the .has-img variant drops the placeholder padding and lets
   the image fill the slot at the slot's aspect ratio */
.hero-photo.has-img,
.photo-placeholder.has-img,
.category-photo.has-img,
.favorite-photo.has-img,
.product-photo.has-img {
  padding: 0;
  overflow: hidden;
  border-style: solid;
}
.has-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* soft horizon divider — quiet nod to the coast, not literal iconography */
.tideline {
  height: 46px;
  width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 24 C 150 6, 300 42, 450 22 S 750 4, 900 24 S 1080 40, 1200 20' fill='none' stroke='%234f9fb3' stroke-opacity='0.35' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 8px 0;
}

/* -------------------- our story -------------------- */
.story {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.story-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 860px) { .story-inner { grid-template-columns: 1fr; } }
/* Our Story (2026-10-10): the owner's flour-dusted cutting board in black and
   white behind the section, the story centred on a soft white panel. The
   loaf photo that sat beside the text was removed at the owner's request. */
.story {
  background:
    linear-gradient(rgba(250, 253, 253, 0.35), rgba(250, 253, 253, 0.35)),
    url("../images/cutting-board-03.jpg") center / cover no-repeat;
}
.story .story-inner { grid-template-columns: 1fr; justify-items: center; }
.story-panel {
  max-width: 720px;
  background: rgba(250, 253, 253, 0.9);
  border-radius: 6px;
  padding: 44px 48px;
  text-align: center;
  box-shadow: var(--shadow);
}
@media (max-width: 720px) { .story-panel { padding: 28px 22px; } }
.photo-placeholder {
  aspect-ratio: 5/4;
  background: var(--cream-deep);
  border: 1px dashed var(--slate);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 0.85rem;
  text-align: center;
  padding: 20px;
}
.story h2 { font-size: 2rem; }
.story p { color: var(--ink-soft); margin-bottom: 1.1em; }

/* -------------------- product categories -------------------- */
.section-head {
  max-width: 620px;
  margin: 0 auto 48px;
  text-align: center;
}
.section-head h2 { font-size: 2.1rem; }
.section-head p {
  color: var(--ink-soft);
  /* even out line lengths so a paragraph never ends on one lonely word */
  text-wrap: balance;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .category-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .category-grid { grid-template-columns: 1fr; } }

.category-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.category-photo {
  aspect-ratio: 4/3;
  background: linear-gradient(150deg, rgba(27,106,138,0.10), rgba(233,184,95,0.18)), var(--cream-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 0.78rem;
  text-align: center;
  padding: 14px;
}
.category-body { padding: 22px; }
.category-body h3 { font-size: 1.2rem; margin-bottom: 0.35em; }
.category-body p { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 1.2em; }
.category-body a { font-weight: 600; font-size: 0.88rem; color: var(--clay-deep); text-decoration: none; }
.category-body a:hover { text-decoration: underline; }

/* -------------------- why us -------------------- */
.why {
  background: var(--navy-deep);
  color: var(--cream);
}
.why .eyebrow { color: var(--gold); }
.why h2 { color: var(--paper); }
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
}
@media (max-width: 760px) { .why-grid { grid-template-columns: 1fr; } }
.why-item {
  border-top: 1px solid rgba(239,245,246,0.2);
  padding-top: 18px;
}
.why-item h3 { color: var(--paper); font-size: 1.05rem; margin-bottom: 0.4em; }
.why-item p { color: rgba(239,245,246,0.72); font-size: 0.93rem; }

/* -------------------- favorites -------------------- */
.favorites-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 760px) { .favorites-grid { grid-template-columns: 1fr; } }
.favorite-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 18px;
  text-decoration: none;
  display: block;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.favorite-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.favorite-photo {
  aspect-ratio: 1/1;
  border-radius: 4px;
  margin-bottom: 14px;
  background: linear-gradient(150deg, rgba(224,122,82,0.16), rgba(79,159,179,0.14)), var(--cream-deep);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft); font-size: 0.78rem; text-align: center; padding: 12px;
}
.favorite-card h3 { font-size: 1.02rem; margin-bottom: 0.2em; }
.favorite-card .price { color: var(--clay-deep); font-weight: 600; font-size: 0.92rem; }

/* -------------------- community -------------------- */
.community {
  /* the owner's striped cutting board in black and white (2026-10-10); the
     shore photo strip and the coral "Fresh bread is better shared" band
     below it were removed the same day */
  background:
    linear-gradient(rgba(250, 253, 253, 0.25), rgba(250, 253, 253, 0.25)),
    url("../images/cutting-board-01.jpg") center / cover no-repeat;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
  padding: 110px 0;
}
.community-panel {
  background: rgba(250, 253, 253, 0.9);
  border-radius: 6px;
  padding: 40px 44px 34px;
  box-shadow: var(--shadow);
}
.community-panel h2 { margin-bottom: 0.9em; }
@media (max-width: 720px) { .community { padding: 64px 0; } .community-panel { padding: 28px 22px 24px; } }
.community .container { max-width: 760px; }
.community h2 { font-size: 2rem; }
.community p { color: var(--ink-soft); font-size: 1.05rem; }
.community .photo-strip {
  max-width: 1140px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: 14px;
  margin-top: 40px;
}
.photo-strip img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
}
@media (max-width: 760px) { .community .photo-strip { grid-template-columns: 1fr 1fr; } }

/* -------------------- order cta -------------------- */
.order-cta {
  text-align: center;
  background: var(--clay);
  color: var(--paper);
}
.order-cta h2 { color: var(--paper); font-size: 2.3rem; }
.order-cta .btn-secondary { border-color: var(--paper); color: var(--paper); }
.order-cta .btn-secondary:hover { background: var(--paper); color: var(--clay-deep); }

/* -------------------- footer -------------------- */
footer {
  background: var(--navy-deep);
  color: rgba(239,245,246,0.78);
  padding: 64px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
footer h4 {
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
/* footer state columns: state names underlined, season dates in bold (2026-10-11) */
footer h4.season-head { text-decoration: underline; text-underline-offset: 4px; }
footer .season-dates { font-weight: 700; color: var(--paper); }
footer .logo { color: var(--paper); }
footer .logo span { color: var(--gold); }
footer p, footer li { font-size: 0.9rem; margin: 0 0 8px; }
footer ul { list-style: none; padding: 0; margin: 0; }
footer a { text-decoration: none; color: inherit; }
footer a:hover { color: var(--paper); }
footer p a { text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom {
  border-top: 1px solid rgba(239,245,246,0.15);
  padding-top: 24px;
  font-size: 0.82rem;
  color: rgba(239,245,246,0.5);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.placeholder-flag {
  color: var(--gold);
  font-weight: 600;
}

/* -------------------- products (single page) -------------------- */
.products { background: var(--paper); border-top: 1px solid var(--line); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
@media (max-width: 900px) { .product-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .product-grid { grid-template-columns: 1fr; } }

.product-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.product-photo {
  aspect-ratio: 4/3;
  background: linear-gradient(150deg, rgba(27,106,138,0.10), rgba(233,184,95,0.16)), var(--cream-deep);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft); font-size: 0.78rem; text-align: center; padding: 14px;
}
.product-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.product-body h4 { font-family: var(--font-display); font-size: 1.08rem; margin: 0; color: var(--signal); }
.product-body .desc { color: var(--ink-soft); font-size: 0.88rem; flex: 1; margin: 0; }
.product-body .meta { font-size: 0.85rem; color: var(--signal); margin: 0; font-weight: 500; }
.product-body .note { font-size: 0.82rem; color: var(--slate); margin: 0; font-style: italic; }
.product-body .note a { color: var(--signal); text-underline-offset: 3px; }
.section-head a, .order-box a:not(.btn) { color: var(--clay-deep); text-underline-offset: 3px; }
.unavailable-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
  background: rgba(79,159,179,0.14);
  padding: 4px 9px;
  border-radius: 999px;
  align-self: flex-start;
}

/* -------------------- info sections -------------------- */
.info-section {
  background: var(--paper);
  border-top: 1px solid var(--line);
  scroll-margin-top: 90px;
}
.info-section.info-alt { background: var(--cream-deep); }
.info-section h2 { font-size: 1.9rem; }
.info-section p { color: var(--ink-soft); }
.info-inner {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 860px) { .info-inner { grid-template-columns: 1fr; } }
.container.narrow { max-width: 820px; }
.policy-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}
.policy-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.season-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal);
  background: rgba(79,159,179,0.14);
  padding: 3px 8px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
}
.info-thanks { font-family: var(--font-display); font-size: 1.15rem; color: var(--signal) !important; }
.order-box {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 26px;
  box-shadow: var(--shadow);
}
.order-box h3 { font-size: 1.3rem; }
.disclosure-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 36px;
}
@media (max-width: 720px) { .disclosure-grid { grid-template-columns: 1fr; } }
.disclosure {
  border: 1.5px solid var(--navy-deep);
  border-radius: 6px;
  padding: 20px 22px;
  background: var(--paper);
}
.disclosure h3 { font-size: 1.05rem; margin-bottom: 0.5em; }
.disclosure h3 span { display: block; font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin-top: 4px; }
.disclosure p { color: var(--ink); font-size: 1rem; margin: 0; }

/* -------------------- misc pages -------------------- */
.page-hero { padding: 70px 0 30px; text-align: center; }
.page-hero h1 { font-size: 2.4rem; }
.placeholder-note {
  background: var(--cream-deep);
  border: 1px dashed var(--slate);
  border-radius: 6px;
  padding: 14px 18px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 10px;
}


/* ==========================================================================
   Condensed layout below Our Story (2026-10-10, owner's request): less empty
   space, smaller product cards, How to Order and the allergen statement side
   by side. The hero and Our Story keep their spacing.
   ========================================================================== */
.products, .why, .info-section { padding: 60px 0; }
.products .section-head { margin-bottom: 32px; }
.products .section-head p { margin-bottom: 0.6em; }

/* products: four across, shorter photos, tighter text */
.products .section-head { max-width: 860px; }
.product-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
.product-photo { aspect-ratio: 16/9; }
.product-body { padding: 14px 16px 16px; gap: 6px; }
.product-body h4 { font-size: 1rem; }
.product-body .desc { font-size: 0.84rem; line-height: 1.5; }
.product-body .meta, .product-body .note { font-size: 0.8rem; }
@media (max-width: 860px) { .product-grid { grid-template-columns: 1fr 1fr; } }
/* phones: one compact row per product, small photo beside the text */
@media (max-width: 560px) {
  .product-grid { grid-template-columns: 1fr; gap: 12px; }
  .product-card { display: grid; grid-template-columns: 112px 1fr; }
  .product-photo { aspect-ratio: 1; align-self: start; margin: 12px 0 12px 12px; border-radius: 4px; font-size: 0.68rem; padding: 6px; }
  .product-card { grid-template-columns: 104px 1fr; }
  .product-body { padding: 10px 12px; }
}

/* Order Online button under the product cards (2026-10-10) */
.products-cta { text-align: center; margin-top: 32px; }

/* why: same six blurbs, tighter */
.why h2 { margin-bottom: 0.6em; }
.why-grid { gap: 18px 36px; margin-top: 18px; }
.why-item { padding-top: 14px; }
.why-item p { font-size: 0.88rem; margin: 0; }
@media (max-width: 760px) { .why-grid { grid-template-columns: 1fr 1fr; gap: 14px 20px; } }

/* how to order + allergens side by side, disclosures underneath */
.info-two { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.info-two > * { min-width: 0; }
#allergens { scroll-margin-top: 90px; }
@media (max-width: 860px) { .info-two { grid-template-columns: 1fr; gap: 36px; } }
.info-section h2 { font-size: 1.6rem; }
.info-two p, .policy-list li { font-size: 0.95rem; }
.policy-list li { padding: 8px 0; }
.order-box { margin-top: 20px; padding: 20px; }
.order-box p { margin-top: 0; }
.disclosure-grid { margin-top: 36px; }
.disclosure { padding: 16px 18px; }

/* from our family: shorter band */
.community { padding: 70px 0; }
@media (max-width: 720px) {
  .products, .why, .info-section { padding: 40px 0; }
  .community { padding: 44px 0; }
}