/* Mothersteader. Brand kit only: six colours from palette.json, Work Sans self-hosted.
   Tints below are the kit colours mixed with linen, never new hues.

   Text pairs used (WCAG 2.x contrast, AA needs 4.5 for body text):
     ink on linen 17.5   plum on linen 10.5   spruce on linen 6.2
     linen on spruce 6.2 linen on plum 10.5   sage on plum 6.1   rose on plum 5.2
   Rose and sage are decoration only on linen (2.0, 1.7) and on spruce (3.0, 3.6). */

@font-face {
  font-family: "Work Sans";
  src: url("/fonts/WorkSans-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --spruce: #465D5C;
  --sage: #9BBFBC;
  --rose: #D39C9D;
  --plum: #4F2B3D;
  --ink: #0A070E;
  --linen: #F4EFE8;

  --line: color-mix(in srgb, var(--spruce) 24%, var(--linen));
  --wash: color-mix(in srgb, var(--sage) 22%, var(--linen));
  --blush: color-mix(in srgb, var(--rose) 18%, var(--linen));

  --sans: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: 0.9rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.7rem;
  --step-3: clamp(2rem, 5vw, 2.8rem);
  --step-4: clamp(2.4rem, 7vw, 4.2rem);

  --gutter: 16px;
  --measure: 66ch;
  --wide: 1140px;
  --focus: var(--plum);
}
@media (min-width: 720px) { :root { --gutter: 32px; --step-0: 1.125rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--linen);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--step-0);
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--spruce); text-decoration-color: var(--rose); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--plum); text-decoration-color: var(--plum); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 3px; }

h1, h2, h3 { font-family: var(--sans); color: var(--spruce); margin: 0 0 0.5em; }
h1, h2 { font-weight: 300; line-height: 1.12; letter-spacing: -0.01em; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-weight: 500; line-height: 1.3; }
p, ul, ol, dl { margin: 0 0 1em; }

/* Kicker: Work Sans Medium, uppercase, letterspaced, as in the brand kit covers */
.kicker { font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.8rem; color: var(--plum); margin: 0 0 12px; }

.skip { position: absolute; left: -999px; top: 0; background: var(--spruce); color: var(--linen); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; top: 8px; }

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.prose { max-width: var(--measure); }
.prose h2 { margin-top: 1.6em; font-size: var(--step-2); }
.prose h3 { margin-top: 1.4em; }
.prose li { margin-bottom: 0.4em; }

/* Header: the kit wordmark as an image, never retyped */
.site-head { border-bottom: 1px solid var(--line); background: var(--linen); }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 16px; padding-bottom: 12px; }
.wordmark { display: block; line-height: 0; }
.wordmark img { height: 30px; width: auto; }
@media (min-width: 720px) { .wordmark img { height: 36px; } }
.site-nav { display: flex; flex-wrap: wrap; gap: 2px 22px; font-size: var(--step--1); font-weight: 500; }
.site-nav a { text-decoration: none; color: var(--ink); padding: 8px 0; border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--rose); color: var(--plum); }

/* Buttons: linen on spruce (6.2) and linen on plum (10.5) */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; font: 500 var(--step-0)/1.1 var(--sans); background: var(--spruce); color: var(--linen); text-decoration: none; padding: 14px 26px; border-radius: 999px; border: 2px solid var(--spruce); text-align: center; }
.btn:hover { background: var(--plum); border-color: var(--plum); color: var(--linen); }
.btn-plum { background: var(--plum); border-color: var(--plum); }
.btn-plum:hover { background: var(--spruce); border-color: var(--spruce); }
.btn-outline { background: transparent; color: var(--spruce); }
.btn-outline:hover { background: var(--spruce); color: var(--linen); }
.btn-big { min-height: 64px; font-size: 1.25rem; padding: 18px 34px; }
.btn-disabled, .btn-disabled:hover { background: transparent; color: var(--spruce); border: 2px dashed var(--spruce); cursor: not-allowed; }

/* Floral line art from the kit, coloured by CSS mask. Edges only, never behind text. */
.floral-edges { position: relative; isolation: isolate; }
.floral-edges::before, .floral-edges::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  background: var(--floral, var(--rose));
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* phones: a strip along the top edge only */
.floral-edges::before {
  left: 0; right: 0; top: 0; height: 72px;
  -webkit-mask-image: url("/images/brand/floral-top.png"); mask-image: url("/images/brand/floral-top.png");
  -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: center bottom; mask-position: center bottom;
}
.floral-edges::after { display: none; }
@media (min-width: 1040px) {
  .floral-edges::before, .floral-edges::after {
    display: block; top: 0; bottom: 0; height: auto; width: min(16vw, 240px);
    -webkit-mask-size: cover; mask-size: cover;
  }
  .floral-edges::before { left: 0; right: auto; -webkit-mask-image: url("/images/brand/floral-left.png"); mask-image: url("/images/brand/floral-left.png"); -webkit-mask-position: right center; mask-position: right center; }
  .floral-edges::after { right: 0; -webkit-mask-image: url("/images/brand/floral-right.png"); mask-image: url("/images/brand/floral-right.png"); -webkit-mask-position: left center; mask-position: left center; }
}

/* Coloured bands */
.band-spruce { background: var(--spruce); color: var(--linen); --focus: var(--linen); }
.band-spruce h1, .band-spruce h2, .band-spruce h3, .band-spruce .kicker { color: var(--linen); }
.band-spruce a:not(.btn) { color: var(--linen); text-decoration-color: var(--rose); }
.band-plum { background: var(--plum); color: var(--linen); --focus: var(--sage); }
.band-plum h2, .band-plum h3 { color: var(--linen); }
.band-plum .kicker { color: var(--sage); }

/* Home intro */
.intro { padding: 92px 0 36px; text-align: left; }
.intro h1 { max-width: 15ch; color: var(--spruce); }
.intro .lede { max-width: 54ch; font-size: var(--step-1); line-height: 1.55; }
@media (min-width: 1040px) { .intro { padding: 96px 0 72px; text-align: center; } .intro h1, .intro .lede { margin-left: auto; margin-right: auto; } .intro h1 { max-width: 17ch; } }

.feature-app { padding: 44px 0; }
.feature-app .wrap { display: grid; gap: 24px 48px; align-items: center; }
@media (min-width: 900px) { .feature-app .wrap { grid-template-columns: 1.1fr 1fr; } }
.feature-app h2 { margin-bottom: 0.35em; }
.feature-app p { max-width: 52ch; }
.feature-app .cta-row { margin-top: 18px; }
.mini3 { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid color-mix(in srgb, var(--linen) 45%, var(--spruce)); border-radius: 14px; }
.mini3 div { padding: 18px 8px 16px; text-align: center; }
.mini3 div + div { border-left: 1px solid color-mix(in srgb, var(--linen) 45%, var(--spruce)); }
.mini3 .n { display: block; font-weight: 300; font-size: clamp(2.6rem, 9vw, 4rem); line-height: 1; }
.mini3 .u { display: block; margin-top: 8px; font-weight: 500; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }
.mini3-cap { font-size: var(--step--1); margin-top: 10px; }

/* The shelves */
.pantry { padding: 52px 0 64px; }
.pantry-head { max-width: var(--measure); margin-bottom: 8px; }
.shelf { margin-top: 44px; }
.shelf-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 18px; }
.shelf-head h2 { font-size: var(--step-2); margin: 0; }
.shelf-head p { margin: 0; color: var(--spruce); font-size: var(--step--1); }
.shelf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; align-items: end; list-style: none; padding: 0; margin: 0; }
@media (min-width: 640px) { .shelf-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px) { .shelf-row { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.slot { position: relative; padding: 0 9px 22px; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.slot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: var(--spruce); box-shadow: inset 0 -4px 0 var(--plum); }
.slot:first-child::after { border-radius: 3px 0 0 3px; }
@media (max-width: 639px) { .slot:last-child:nth-child(odd)::after { right: -100%; } }
@media (min-width: 640px) and (max-width: 979px) {
  .slot:last-child:nth-child(3n+1)::after { right: -200%; }
  .slot:last-child:nth-child(3n+2)::after { right: -100%; }
}
@media (min-width: 980px) {
  .shelf-row { position: relative; }
  .slot::after { display: none; }
  .shelf-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: var(--spruce); box-shadow: inset 0 -4px 0 var(--plum); border-radius: 3px; }
}

.jar { position: relative; display: flex; flex-direction: column; align-items: center; }
.jar-lid { width: 74%; height: 16px; border-radius: 4px 4px 1px 1px; background: var(--plum); }
.jar-neck { width: 66%; height: 9px; background: var(--wash); border-left: 2px solid var(--sage); border-right: 2px solid var(--sage); }
.jar-body {
  width: 100%;
  border: 2px solid var(--sage);
  border-radius: 20px 20px 14px 14px;
  background: linear-gradient(to top, var(--rose) 0 60%, var(--wash) 60% 100%);
  padding: 22px 8px 26px;
  display: flex; align-items: center; justify-content: center;
}
.jar.quart .jar-body { min-height: 230px; }
.jar.pint .jar-body { min-height: 196px; }
.jar.half .jar-body { min-height: 166px; }
.jar.half { width: 86%; }

.jar-label { background: var(--linen); width: 100%; border-radius: 6px; padding: 12px 10px 10px; text-align: center; box-shadow: 0 0 0 3px var(--linen), 0 0 0 4px var(--spruce); }
.jar-kind { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--plum); margin: 0 0 4px; }
.jar-name { font-size: 1.05rem; font-weight: 500; line-height: 1.2; margin: 0 0 6px; }
.jar-name a { text-decoration: none; color: var(--spruce); }
.jar-name a::after { content: ""; position: absolute; inset: 0; }
.jar-line { font-size: 0.8rem; line-height: 1.35; color: var(--ink); margin: 0 0 8px; }
.jar-price { font-weight: 300; color: var(--plum); font-size: 1.3rem; margin: 0; }
.jar-state { font-size: 0.8rem; margin: 10px 0 0; font-weight: 500; color: var(--spruce); text-align: center; }

.jar.soon .jar-lid { background: transparent; border: 2px dashed var(--line); border-bottom: 0; }
.jar.soon .jar-neck { background: transparent; border-color: var(--line); }
.jar.soon .jar-body { background: transparent; border: 2px dashed var(--line); }
.jar.soon .jar-label { box-shadow: none; border: 1px dashed var(--line); background: transparent; }
.jar.soon .jar-name, .jar.soon .jar-price, .jar.soon .jar-state { color: var(--spruce); font-weight: 400; }
.jar.live:hover .jar-label { box-shadow: 0 0 0 3px var(--linen), 0 0 0 5px var(--plum); }

/* Generic product page */
.product-hero { display: grid; gap: 28px; padding-block: 32px 40px; }
@media (min-width: 900px) { .product-hero { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding-block: 56px 64px; } }
.product-hero img { border-radius: 10px; border: 1px solid var(--line); }
.product-hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
.product-hero .label-line { max-width: 40ch; }
.price-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 22px 0 10px; }
.price { font-weight: 300; font-size: 2.6rem; color: var(--plum); line-height: 1; }
.price-note, .fine { font-size: var(--step--1); color: var(--spruce); }
.formats { list-style: none; padding: 0; margin: 18px 0 0; font-size: var(--step--1); }
.formats li { padding: 6px 0; border-top: 1px solid var(--line); }
.formats li:last-child { border-bottom: 1px solid var(--line); }

/* Put It Up page */
.piu-hero { padding: 92px 0 56px; }
@media (min-width: 1040px) { .piu-hero { padding: 80px 0 72px; } }
.piu-hero-in { max-width: 760px; text-align: center; }
.piu-hero h1 { font-size: clamp(2.5rem, 9vw, 4rem); margin-bottom: 0.3em; }
.piu-hero .lede { font-size: var(--step-1); max-width: 46ch; margin: 0 auto 28px; }
.big3 { margin: 0 auto 26px; max-width: 640px; }
.big3-row { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid color-mix(in srgb, var(--linen) 45%, var(--spruce)); border-radius: 16px; }
.big3-row div { padding: 22px 6px 18px; }
.big3-row div + div { border-left: 1px solid color-mix(in srgb, var(--linen) 45%, var(--spruce)); }
.big3 .n { display: block; font-weight: 300; font-size: clamp(3.2rem, 15vw, 6rem); line-height: 1; }
.big3 .u { display: block; margin-top: 10px; font-weight: 500; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; }
.big3 figcaption { font-size: var(--step--1); margin: 14px auto 0; max-width: 56ch; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; }
.band-spruce .btn-free { background: var(--linen); color: var(--spruce); border-color: var(--linen); }
.band-spruce .btn-free:hover { background: var(--plum); color: var(--linen); border-color: var(--linen); }
.band-spruce .btn-buy { background: var(--plum); border-color: var(--linen); }
.band-spruce .btn-buy:hover { background: var(--linen); color: var(--plum); }
.band-spruce .btn-disabled { color: var(--linen); border-color: var(--linen); }
.cta-note { font-size: var(--step--1); margin-top: 14px; }
@media (max-width: 480px) { .cta-row .btn { width: 100%; } }

.body-sections { padding-block: 56px 40px; }
.body-sections > section { margin-bottom: 64px; }
.features { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
@media (min-width: 680px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .features { grid-template-columns: repeat(3, 1fr); } }
.features li { background: var(--wash); border-radius: 14px; padding: 20px 20px 6px; border-top: 4px solid var(--spruce); }
.features h3 { margin-bottom: 6px; }

.try { display: grid; gap: 16px 40px; align-items: center; background: var(--blush); border-radius: 18px; padding: 28px 22px; }
@media (min-width: 860px) { .try { grid-template-columns: 1.6fr 1fr; padding: 40px 44px; } }
.try h2 { font-size: var(--step-2); }
.try p:last-child { margin-bottom: 0; }
.try-cta { display: flex; }
@media (max-width: 859px) { .try-cta .btn { width: 100%; } }

.steps { list-style: none; counter-reset: s; padding: 0; margin: 20px 0 0; max-width: 760px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 3rem 1fr; gap: 0 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.steps li::before { content: counter(s); font-weight: 300; font-size: 2rem; color: var(--plum); line-height: 1; grid-row: span 2; }
.steps strong { font-weight: 500; color: var(--spruce); display: block; }

.safety { border: 2px solid var(--spruce); border-radius: 16px; padding: 26px 24px 10px; max-width: 860px; }
.safety h2 { font-size: var(--step-2); }

.faq { max-width: 760px; }
.faq details { border-top: 1px solid var(--line); padding: 16px 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 500; color: var(--spruce); }
.faq summary::marker { color: var(--plum); }
.faq details p { margin: 10px 0 0; }

.also { padding: 0 0 56px; }
.also ul { padding-left: 1.2em; }

/* Put It Up: two tiers. Sheet = linen card, spruce rule. App = plum card (linen on plum 10.5, sage on plum 6.1, rose on plum 5.2 large only). */
.tiers-wrap { padding: 56px 0 8px; }
.tiers-h { font-size: var(--step-3); margin-bottom: 24px; }
.tiers { display: grid; gap: 20px; }
@media (min-width: 860px) { .tiers { grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; } }
.tier { border-radius: 18px; padding: 26px 22px 22px; display: flex; flex-direction: column; scroll-margin-top: 16px; }
@media (min-width: 600px) { .tier { padding: 34px 34px 28px; } }
.tier h3 { font-size: var(--step-2); font-weight: 300; line-height: 1.15; margin-bottom: 8px; }
.tier-kind { font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.78rem; margin: 0 0 10px; }
.tier-what { margin-bottom: 14px; }
.tier-price { margin: 0 0 16px; }
.tier-price .price { font-size: 2.6rem; }
.price-open { font-weight: 300; font-size: 1.6rem !important; line-height: 1.2; }
.tier-list { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.tier-list li { padding: 9px 0 9px 26px; position: relative; border-top: 1px solid var(--tier-line); }
.tier-list li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 12px; height: 7px; border-left: 2px solid var(--tier-tick); border-bottom: 2px solid var(--tier-tick); transform: rotate(-45deg); }
.tier-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.tier-cta .btn { flex: 1 1 220px; }
.tier .fine { margin: 0; }
.tier-sheet { background: var(--linen); border: 2px solid var(--spruce); --tier-line: var(--line); --tier-tick: var(--spruce); }
.tier-sheet .tier-kind { color: var(--plum); }
.tier-app { background: var(--plum); color: var(--linen); --tier-line: color-mix(in srgb, var(--linen) 22%, var(--plum)); --tier-tick: var(--sage); --focus: var(--sage); }
.tier-app h3 { color: var(--linen); }
.tier-app .tier-kind { color: var(--sage); }
.tier-app .price { color: var(--linen); }
.tier-app .fine { color: var(--linen); }
.tier-app a:not(.btn) { color: var(--linen); text-decoration-color: var(--rose); }
.tier-app a:not(.btn):hover { color: var(--sage); }
.tier-app .btn-plum { background: var(--linen); color: var(--plum); border-color: var(--linen); }
.tier-app .btn-plum:hover { background: var(--sage); border-color: var(--sage); color: var(--ink); }
.tier-app .btn-outline { color: var(--linen); border-color: var(--linen); }
.tier-app .btn-outline:hover { background: var(--linen); color: var(--plum); }
.tier-app .btn-disabled { color: var(--linen); border-color: var(--sage); }

.app-detail-in { display: grid; gap: 18px 48px; align-items: center; }
@media (min-width: 900px) { .app-detail-in { grid-template-columns: 1fr 1.1fr; } }
.app-detail-in p { max-width: 52ch; }
.big3-light { margin: 0; text-align: center; color: var(--ink); }
.big3-light .big3-row { border-color: var(--line); background: var(--wash); }
.big3-light .big3-row div + div { border-left-color: var(--line); }
.big3-light .n { color: var(--spruce); }
.big3-light .u { color: var(--plum); }
.big3-light figcaption { text-align: left; }
.mini3-fig { margin: 0; }
.also-h { font-size: var(--step-1) !important; font-weight: 500; margin-top: 0 !important; }
.claim-safety { text-align: center; }
.safety-line { font-weight: 500; color: var(--spruce); border-left: 4px solid var(--rose); padding-left: 12px; }
.upgrade { padding-bottom: 56px; }

/* Bundles and library */
.page-head { padding-block: 40px 8px; }
.page-head p { max-width: var(--measure); }
.bundle { border-top: 2px solid var(--spruce); padding: 26px 0 30px; display: grid; gap: 10px 40px; }
@media (min-width: 860px) { .bundle { grid-template-columns: 1fr 1.2fr; } }
.bundle h2 { font-size: var(--step-2); margin-bottom: 6px; }
.bundle .price { font-size: 2.2rem; }
.bundle .savings { color: var(--spruce); font-size: var(--step--1); margin-top: 4px; }
.member-list { list-style: none; padding: 0; margin: 0; }
.member-list li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: var(--step--1); }
.member-list .ready { color: var(--spruce); font-weight: 600; white-space: nowrap; }
.member-list .growing { color: var(--plum); white-space: nowrap; }

.thanks { padding-block: 56px 72px; }
.thanks h1 { max-width: 14ch; }

/* Claim page */
.claim { padding: 88px 0 72px; }
@media (min-width: 1040px) { .claim { padding: 72px 0; } }
.claim-card { max-width: 560px; margin: 0 auto; background: var(--linen); border: 1px solid var(--line); border-radius: 18px; padding: 28px 22px; }
@media (min-width: 600px) { .claim-card { padding: 36px 40px; } }
.claim h1 { font-size: clamp(2.2rem, 8vw, 3.2rem); margin-bottom: 0.3em; }
/* the card sits on the spruce band but is linen, so it takes linen-page colours back */
.band-spruce .claim-card { color: var(--ink); --focus: var(--plum); }
.band-spruce .claim-card h1 { color: var(--spruce); }
.band-spruce .claim-card .kicker { color: var(--plum); }
.band-spruce .claim-card a:not(.btn) { color: var(--spruce); text-decoration-color: var(--rose); }
.field { margin: 0 0 18px; }
.field label { display: block; font-weight: 500; margin-bottom: 6px; color: var(--ink); }
.field .hint { display: block; font-size: var(--step--1); color: var(--spruce); margin: 0 0 8px; }
.field input { width: 100%; font: 400 1.15rem/1.3 var(--sans); color: var(--ink); background: var(--linen); border: 2px solid var(--spruce); border-radius: 12px; padding: 14px 14px; min-height: 54px; }
.field input:focus-visible { outline: 3px solid var(--plum); outline-offset: 2px; }
.claim .btn { width: 100%; }
.msg { border-radius: 12px; padding: 14px 16px; margin: 0 0 18px; border-left: 6px solid var(--plum); background: var(--blush); }
.msg p { margin: 0 0 0.5em; } .msg p:last-child { margin: 0; }
.done-key { font: 500 1.15rem/1.3 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: 0.04em; background: var(--wash); border-radius: 10px; padding: 12px 14px; word-break: break-all; margin: 6px 0 16px; color: var(--ink); }
.claim-done[hidden], .claim-form[hidden] { display: none; }
.after-steps { margin: 22px 0 0; padding-left: 1.2em; font-size: var(--step--1); }

/* Footer: plum band, sage wordmark */
.site-foot { padding: 36px 0 44px; font-size: var(--step--1); }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; }
.site-foot img { height: 26px; width: auto; margin-bottom: 10px; }
.site-foot p { margin: 0; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.site-foot a { color: var(--linen); text-decoration-color: var(--rose); }
.site-foot a:hover { color: var(--sage); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Free recipes signup (/free/): the consent box and the honeypot */
.field-check { display: flex; align-items: flex-start; gap: 12px; }
.field-check input { width: 22px; height: 22px; min-height: 0; margin: 3px 0 0; padding: 0; flex: none; accent-color: var(--spruce); }
.field-check label { font-weight: 400; margin: 0; line-height: 1.4; }
.field.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The Canning Pantry, Sheet + Book (20 Oct 2026): buy box and the held app note (rule 64). */
.buy-box { background: var(--linen); border: 2px solid var(--spruce); }
.app-later { background: var(--wash); border-radius: 18px; padding: 26px 22px 12px; border-left: 4px solid var(--plum); max-width: 860px; scroll-margin-top: 16px; }
@media (min-width: 600px) { .app-later { padding: 32px 34px 18px; } }
.app-later h2 { font-size: var(--step-2); }

/* Product galleries and bundle pictures (20 Oct 2026) */
.gallery { padding: 0 0 48px; }
.gallery ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
@media (min-width: 700px) { .gallery ul { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
.gallery img { border-radius: 10px; border: 1px solid var(--line); width: 100%; height: auto; }
.bundle-img { border-radius: 10px; border: 1px solid var(--line); margin-bottom: 16px; max-width: 420px; width: 100%; height: auto; }